Usage By Codeowner Scanner

A node script built on top of react-scanner that will help you understand which teams are using your design system components the most. The script scans your codebase to analyze design system component usage by GitHub CODEOWNERS.

Features

• Uses react-scanner to scan your codebase for design system component usage
• Maps component usage to teams based on CODEOWNERS file
• Generates results in a JSON file

Usage

npx component-usage-by-codeowners [options]

Options

• -c, --config <path> - Path to react-scanner config file (required)
• --codeowners <path> - Path to CODEOWNERS file (required)
• -o, --output <path> - (optional) Output path for the report. Can be a file or directory. Defaults to ./output/usage-by-codeowner.json
• -d, --debug - (optional) Enable debug logging

Example Usage

npx component-usage-by-codeowners -c react-scanner.config.js -o ./output/usage-by-codeowner.json --codeowners ./CODEOWNERS

Configuration

React Scanner Config

See react-scanner documentation for setting up a react-scanner config. You can also view the sample config file in test-files/sample-codebase/react-scanner.config.js.

Output Format

The tool generates a JSON report with the following structure:

{
  "ComponentName": {
    "@team-name": numberOfUsages
  }
}

Example output:

{
  "Button": {
    "@frontend-team": 3,
    "@design-system-team": 1
  },
  "Card": {
    "@frontend-team": 2
  }
}

Local Development

Installation

# Clone the repository
git clone https://github.com/yourusername/component-usage-by-codeowners.git

# Install dependencies
cd component-usage-by-codeowners
npm install

Testing

The repository includes a sample codebase for testing the scanner.

To run the scanner against the sample codebase:

npm run test-scan