# 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="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2FLMqXRJsRxptqksR2dfaE%2FFrame%201.png?alt=media&#x26;token=e6f3c725-c27c-47db-ade8-a4cb1f0b2492" 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="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2F7w9WcXkhjbpRQWlnE4qZ%2Fcreate-tag.png?alt=media&#x26;token=6482164d-1e22-4c49-a14d-35197d94512e" 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="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2FMUAmvjHqx9X6CInj9TWL%2Fanalyze.png?alt=media&#x26;token=68340226-8595-448f-9f05-ad584ee392e2" 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="https://4214978157-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRXB2SJ9FZ5x4QW8ihpe%2Fuploads%2F3u5DEVEaKZQ03MhyxjYW%2Ffilter-by-tag%20(1).png?alt=media&#x26;token=0f10d32d-48a6-4871-a863-b63e8c7676ba" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}