A CLI tool to audit design system component usage across multiple MetaMask codebases
- Clone the MetaMask Extension repository if you haven't already:
git clone https://github.com/MetaMask/metamask-extension.git
- Run the CLI tool using npx:
npx @georgewrmarshall/design-system-metrics --project extension
- A file called
extension-component-adoption-metrics.csv
will be generated in the current working directory if there are no errors.
- Clone the MetaMask Mobile repository if you haven't already:
git clone https://github.com/MetaMask/metamask-mobile.git
- Run the CLI tool using npx:
npx @georgewrmarshall/design-system-metrics --project mobile
- A file called
mobile-component-adoption-metrics.csv
will be generated in the current working directory if there are no errors.
-
--project
(Required): Specify the project to audit. Options are: -
extension
: For MetaMask Extension -
mobile
: For MetaMask Mobile
Example:
npx @georgewrmarshall/design-system-metrics --project extension
--format
(Optional): Specify the output format. Options arecsv
(default) orjson
.
Example:
npx @georgewrmarshall/design-system-metrics --project extension --format json
- Custom Configuration: By default, the tool uses a
config.json
file to define the component list and ignore patterns. You can also pass a custom configuration file by adding the--config
option:
npx @georgewrmarshall/design-system-metrics --project extension --config /path/to/custom-config.json
- The tool ignores deprecated components (e.g.,
component-library/deprecated
). - The tool does not count duplicate components when imported from different locations (e.g.,
<Button
from../../ui/button
versus<Button
from../../component-library
). - Components inside JSDoc comments are not counted (e.g.,
@deprecated <Box /> is deprecated in favour of <Box />
).
Upon running the CLI tool, a CSV file will be generated in the root of the repository (e.g., extension-component-adoption-metrics.csv
or mobile-component-adoption-metrics.csv
), listing the components and the number of instances where they are used.
If you wish to contribute to the tool, ensure you are running the latest version of Yarn (v4.x) and Node.js. You can make adjustments to the config.json
file or update the CLI logic for tracking additional components or repositories.
This project is licensed under the MIT License.