# Tutorial 1: Team/code owner usage

In this tutorial, we'll create a hook script that'll process the `CODEOWNERS` file and add the owner information as a custom component property to each component. This will help you analyze the design system adoption across different teams.

{% hint style="info" %}
Feel free to customize the script based on your setup—reach us at <support@omlet.dev> for any questions/feedback.
{% endhint %}

{% stepper %}
{% step %}

### CODEOWNERS file

`CODEOWNERS` is a file used in many repositories (e.g., GitHub, GitLab, Bitbucket) to define the owners of specific files or directories in a codebase. Here is an example of a `CODEOWNERS` file:

{% code title=".github/CODEOWNERS" %}

```
# Default owner for all files
* @acme/design-system

# Owners for specific applications
applications/mail/ @acme/mail-team
applications/calendar/ @acme/calendar-team
applications/drive/ @acme/drive-team
applications/vpn-settings/ @acme/vpn-team
applications/pass/ @acme/pass-team

# Owners for shared packages
packages/components/ @acme/frontend-team
packages/utils/ @acme/frontend-team

# Owners for configuration and tooling
.yarn/ @acme/devops-team
.eslintrc.js @acme/devops-team
.prettier.config.mjs @acme/devops-team
```

{% endcode %}

Before stepping into the hook script, make sure that the [`codeowners`](https://www.npmjs.com/package/codeowners) package is installed as a dependency to your project. It'll help us process the `CODEOWNER` file:

{% tabs %}
{% tab title="npm" %}

```bash
npm install codeowners --save-dev
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn add codeowners --dev
```

{% endtab %}

{% tab title="pnpm" %}

```bash
pnpm add codeowners --save-dev
```

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

### Setting up the hook script

Create a file named `hook-script.js` in the root of your repository and copy the following code.

{% code title="hook-script.js" %}

```javascript
const Codeowners = require("codeowners");

const repo = new Codeowners();
function getOwners(filePath) {
    const owners = repo.getOwner(`${filePath}`);
    if (owners.length === 0) {
        owners.push("unknown");
    }
    return owners
        .filter((o) => o !== "")
        .map((o) => `${o}`)
        .join(",");
}

/**
 * @type {import('@omlet/cli').CliHookModule}
 */
module.exports = {
    async afterScan(components) {
        for (const component of components) {
            const owners = getOwners(component.filePath);
            component.setMetadata("Codeowner", owners);
        }
    },
};
```

{% endcode %}

The `setMetadata` function will add the `Codeowner` property to each component. Feel free to update the property to a preferred name.
{% endstep %}

{% step %}

### Scan your repo

Use the `--hook-script` argument with the `analyze` command, specifying the path to your script:

{% tabs %}
{% tab title="npm" %}

```bash
npx @omlet/cli analyze --hook-script ./hook-script.js
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn dlx @omlet/cli analyze --hook-script ./hook-script.js
```

{% endtab %}

{% tab title="pnpm" %}

```bash
pnpm dlx @omlet/cli analyze --hook-script ./hook-script.js
```

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

### Filter components by owner

Once the CLI scan complete, the `Codeowner` property will be associated with each component.&#x20;

Navigate to the "Components" page. From the "Custom properties" filter, click `Codeowner` and select some of the owners from the revealed dropdown. This will list all the components assigned to the selected owners.

<figure><img src="/files/iHgURESWyxRDulTy3kSi" alt=""><figcaption></figcaption></figure>

You can create a tag based on this filter to easily access it later on and generate charts for your specific needs.

<figure><img src="/files/ACqNiqQAC7UByMM60rcl" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Analyze the usage

To analyze component usage, open your Analytics dashboard and click "Create new analysis" button on top-right. Under the Analyze section, select "Codeowner" from "Custom properties". Total number of component usages for each Codeowner will be listed.

<figure><img src="/files/SbQD5wzquS6ObqiQ2VNH" alt=""><figcaption></figcaption></figure>

You can break down the chart to gain deeper insights into how teams are utilizing components. For example, adding a “Tag” breakdown will allow you to compare each team’s design system usage to overall component usage.

<figure><img src="/files/71kdOGIBLcFnkd7BUf0D" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.omlet.dev/cli-and-dashboard/learn-omlet-cli/custom-component-properties/tutorial-1-team-code-owner-usage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.