Tutorial 1: Team/code owner usage

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:

# 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 install codeowners --save-dev

yarn add codeowners --dev

pnpm add codeowners --save-dev

Setting up the hook script

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

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.

Scan your repo

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

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

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

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

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.

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.