MetaMask / design-tokens

Design tokens to be used throughout MetaMask products
https://metamask.github.io/design-tokens/?path=/docs/getting-started-introduction--docs
Apache License 2.0
28 stars 15 forks source link

Automate Component Adoption Metrics #546

Closed georgewrmarshall closed 10 months ago

georgewrmarshall commented 11 months ago

Description:

The goal of this epic is to develop a Node.js script that collects component adoption metrics from a code base. The script will parse a list of components from a JSON file, traverse all folders and files within a specified folder path, and count the number of instances each component has been used in .tsx and .js files. The results will be outputted in a spreadsheet with each component and its corresponding usage count.

User Stories:

  1. As a developer, I want to input a JSON file containing a list of components so that the script knows which components to look for.

    • Acceptance Criteria:
      • The script should accept a JSON file as input.
      • The JSON file should contain a list of components.
  2. As a developer, I want to specify a folder path so that the script knows where to look for the components.

    • Acceptance Criteria:
      • The script should accept a folder path as input.
      • The script should traverse all folders and files within the given folder path.
  3. As a developer, I want the script to count the number of instances each component has been used in .tsx and .js files so that I can track the usage of each component.

    • Acceptance Criteria:
      • The script should count the number of instances each component has been used in .tsx and .js files.
      • The script should handle errors gracefully and not crash the application.
  4. As a developer, I want the script to output the component usage count in a spreadsheet so that I can easily analyze and visualize the data.

    • Acceptance Criteria:
      • The script should output the component usage count in a spreadsheet.
      • The spreadsheet should contain each component and its corresponding usage count.

Tasks:

  1. Setup the project: Create a new directory for the project and initialize it with npm.
  2. Install necessary packages: Install the glob, fs, and json2csv packages using npm.
  3. Create the script: Create a new index.js file and open it in a text editor.
  4. Import necessary modules: Import the glob, fs, and json2csv modules.
  5. Load the components: Load the list of components from the JSON file.
  6. Initialize the component counts: Initialize a count for each component.
  7. Traverse the file system: Use glob to traverse the file system and find all .tsx and .js files.
  8. Count component usage: For each file, read its contents and increment the count for each component every time it is found.
  9. Convert the results to CSV: Use json2csv to convert the results to CSV format.
  10. Write the results to a file: Write the CSV data to a file.

Acceptance Criteria: