Tutorial 1: Team/code owner usage

Step-by-step tutorial to add Team/Codeowner information to components and analyze them.

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.

Feel free to customize the script based on your setup—reach us at [e-mail] for any questions/feedback.

1

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:

.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

Before stepping into the hook script, make sure that the codeowners package is installed as a dependency to your project. It'll help us process the CODEOWNER file:

npm

npm install codeowners --save-dev

yarn

yarn add codeowners --dev

pnpm

pnpm add codeowners --save-dev

2

Setting up the hook script

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

hook-script.js

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);
        }
    },
};

The setMetadata function will add the Codeowner property to each component. Feel free to update the property to a preferred name.

3

Scan your repo

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

npm

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

yarn

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

pnpm

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

4

Filter components by owner

Once the CLI scan complete, the Codeowner property will be associated with each component.

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.

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

5

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.

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.