@georgewrmarshall/design-system-metrics 1.0.2 → 2.0.0

package/.claude/settings.local.json

@@ -0,0 +1,17 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(tree:*)",
+      "Bash(node:*)",
+      "Bash(yarn install)",
+      "Bash(yarn node:*)",
+      "WebFetch(domain:github.com)",
+      "Bash(yarn test:*)",
+      "Bash(npm view:*)",
+      "Bash(npm whoami:*)",
+      "Bash(npm publish:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/README.md

@@ -1,108 +1,210 @@
 # **@georgewrmarshall/design-system-metrics**
 
-A CLI tool to audit design system component usage across multiple MetaMask codebases
+A CLI tool to audit design system component usage and track migration progress across MetaMask codebases. Identifies deprecated local component usage and measures adoption of the new MetaMask Design System (MMDS) NPM packages.
 
 ## **Getting Started**
 
 - [Extension](#extension)
 - [Mobile](#mobile)
+- [Design System Packages](#design-system-packages)
 - [CLI Options](#cli-options)
+- [Features](#features)
+- [Output Files](#output-files)
 - [Requirements](#requirements)
 
 ---
 
 ### **Extension**
 
-1. **Clone the [MetaMask Extension](https://github.com/MetaMask/metamask-extension)** repository if you haven’t already:
+1. **Clone the [MetaMask Extension](https://github.com/MetaMask/metamask-extension)** repository if you haven't already:
 
 ```bash
 git clone https://github.com/MetaMask/metamask-extension.git
 ```
 
-2. **Run the CLI tool from the `@georgewrmarshall/design-system-metrics` package:**
+2. **Run the CLI tool using npx:**
 
-Navigate to the `@georgewrmarshall/design-system-metrics` package directory:
+```bash
+npx @georgewrmarshall/design-system-metrics --project extension
+```
+
+3. Two files will be generated in the current working directory:
+   - `extension-component-metrics-deprecated.csv` - Old local component-library usage (needs migration)
+   - `extension-component-metrics-current.csv` - New MMDS NPM package usage (@metamask/design-system-react)
+
+---
+
+### **Mobile**
+
+1. **Clone the [MetaMask Mobile](https://github.com/MetaMask/metamask-mobile)** repository if you haven't already:
 
 ```bash
-cd /path/to/@georgewrmarshall/design-system-metrics
+git clone https://github.com/MetaMask/metamask-mobile.git
 ```
 
-3. **Run the CLI tool for the MetaMask Extension:**
+2. **Run the CLI tool using npx:**
 
 ```bash
-yarn node index.js --project extension
+npx @georgewrmarshall/design-system-metrics --project mobile
 ```
 
-4. A file called `extension-component-adoption-metrics.csv` will be generated in the current working directory if there are no errors.
+3. Two files will be generated in the current working directory:
+   - `mobile-component-metrics-deprecated.csv` - Old local component-library usage (needs migration)
+   - `mobile-component-metrics-current.csv` - New MMDS NPM package usage (@metamask/design-system-react-native)
 
 ---
 
-### **Mobile**
+### **Design System Packages**
+
+You can also audit the design system NPM packages themselves to track component usage within the design system repos.
 
-1. **Clone the [MetaMask Mobile](https://github.com/MetaMask/metamask-mobile)** repository if you haven’t already:
+#### **design-system-react**
+
+1. **Clone the [design-system-react](https://github.com/MetaMask/design-system-react)** repository:
 
 ```bash
-git clone https://github.com/MetaMask/metamask-mobile.git
+git clone https://github.com/MetaMask/design-system-react.git
+```
+
+2. **Run the CLI tool:**
+
+```bash
+npx @georgewrmarshall/design-system-metrics --project design-system-react
 ```
 
-2. **Run the CLI tool from the `@georgewrmarshall/design-system-metrics` package:**
+3. One file will be generated:
+   - `design-system-react-metrics.csv` - Component usage within the design system package
+
+#### **design-system-react-native**
 
-Navigate to the `@georgewrmarshall/design-system-metrics` package directory:
+1. **Clone the [design-system-react-native](https://github.com/MetaMask/design-system-react-native)** repository:
 
 ```bash
-cd /path/to/@georgewrmarshall/design-system-metrics
+git clone https://github.com/MetaMask/design-system-react-native.git
 ```
 
-3. **Run the CLI tool for the MetaMask Mobile project:**
+2. **Run the CLI tool:**
 
 ```bash
-yarn node index.js --project mobile
+npx @georgewrmarshall/design-system-metrics --project design-system-react-native
 ```
 
-4. A file called `mobile-component-adoption-metrics.csv` will be generated in the current working directory if there are no errors.
+3. One file will be generated:
+   - `design-system-react-native-metrics.csv` - Component usage within the design system package
 
 ---
 
 ### **CLI Options**
 
 - **`--project` (Required)**: Specify the project to audit. Options are:
+  - `extension`: For MetaMask Extension
+  - `mobile`: For MetaMask Mobile
+  - `design-system-react`: For design-system-react package
+  - `design-system-react-native`: For design-system-react-native package
 
-- `extension`: For MetaMask Extension
-- `mobile`: For MetaMask Mobile
+  Example:
+  ```bash
+  npx @georgewrmarshall/design-system-metrics --project extension
+  ```
 
-Example:
+- **`--format` (Optional)**: Specify the output format. Options are `csv` (default) or `json`.
 
-```bash
-yarn node index.js --project extension
-```
+  Example:
+  ```bash
+  npx @georgewrmarshall/design-system-metrics --project extension --format json
+  ```
 
-- **`--format` (Optional)**: Specify the output format. Options are `csv` (default) or `json`.
+- **`--sources` (Optional)**: Specify which sources to track. Options are:
+  - `all` (default): Track both deprecated and current sources
+  - `deprecated`: Only track old local component-library usage
+  - `current`: Only track new MMDS NPM package usage
+  - Comma-separated: `deprecated,current` (same as `all`)
 
-Example:
+  Example:
+  ```bash
+  npx @georgewrmarshall/design-system-metrics --project extension --sources deprecated
+  ```
 
-```bash
-yarn node index.js --project extension --format json
-```
+- **`--config` (Optional)**: Path to custom configuration file
 
-- **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:
+  Example:
+  ```bash
+  npx @georgewrmarshall/design-system-metrics --project extension --config ./custom-config.json
+  ```
 
-```bash
-yarn node index.js --project extension --config /path/to/custom-config.json
-```
+---
+
+### **Features**
+
+#### **Multi-Source Tracking (Extension & Mobile)**
+For Extension and Mobile projects, the tool tracks component usage from two distinct sources:
+
+1. **Deprecated**: Components imported from old local `/component-library` paths (needs migration)
+2. **Current**: Components imported from new MMDS NPM packages:
+   - Extension: `@metamask/design-system-react`
+   - Mobile: `@metamask/design-system-react-native`
+
+This helps you track **migration progress** from deprecated local components to the new design system packages.
+
+#### **Design System Package Auditing**
+For design system packages themselves (`design-system-react` and `design-system-react-native`), the tool generates a single report showing all component usage within the package. This helps you understand which components are being used internally.
+
+#### **Flexible Configuration**
+Four project configurations are available in `config.json`:
+- `extension` - Tracks Extension repo (deprecated = local, current = @metamask/design-system-react)
+- `mobile` - Tracks Mobile repo (deprecated = local, current = @metamask/design-system-react-native)
+- `design-system-react` - Tracks the design-system-react package itself
+- `design-system-react-native` - Tracks the design-system-react-native package itself
+
+Each project can be configured with:
+- Custom file patterns and ignore rules
+- Component lists to audit
+- NPM packages to track (for extension/mobile)
 
 ---
 
-### **Requirements**
+### **Output Files**
+
+#### **Extension & Mobile Projects**
+Two separate CSV or JSON files are generated to track migration progress:
+
+**CSV Format:**
+```csv
+Component,Instances,File Paths
+"Button",42,"ui/pages/send/send.js, ui/pages/home/home.js"
+```
+
+**Files Generated:**
+- `{project}-component-metrics-deprecated.csv` - Old local component usage
+- `{project}-component-metrics-current.csv` - New NPM package usage
+
+**JSON Format:**
+```json
+{
+  "Button": {
+    "instances": 42,
+    "files": ["ui/pages/send/send.js", "ui/pages/home/home.js"]
+  }
+}
+```
 
-- 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 />`).
+#### **Design System Package Projects**
+One aggregated report showing all component usage:
+
+**Files Generated:**
+- `design-system-react-metrics.csv` - All component usage in design-system-react
+- `design-system-react-native-metrics.csv` - All component usage in design-system-react-native
 
 ---
 
-### **Example Output**
+### **Requirements**
 
-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.
+- The tool **only counts components that are imported** from tracked sources:
+  - For Extension/Mobile: Local `/component-library` (deprecated) or configured NPM packages (current)
+  - For Design System packages: Any imports within the package
+- Components **inside JSDoc comments** are not counted as usage
+- **Test files** are automatically excluded (`*.test.{js,tsx}`)
+- **Node.js** v14 or higher is required
 
 ---
 

package/__tests__/fixtures/test-config.json

@@ -0,0 +1,24 @@
+{
+  "projects": {
+    "test-project": {
+      "rootFolder": "__tests__/fixtures/test-project/ui",
+      "ignoreFolders": ["__tests__/fixtures/test-project/ui/components/component-library"],
+      "filePattern": "__tests__/fixtures/test-project/ui/**/*.{js,tsx}",
+      "outputFile": "__tests__/output/test-metrics.csv",
+      "currentPackages": ["@metamask/design-system-react"],
+      "deprecatedComponents": [
+        "Button",
+        "Icon",
+        "Modal",
+        "TextField",
+        "BannerAlert"
+      ],
+      "currentComponents": [
+        "Button",
+        "Icon",
+        "Text",
+        "Box"
+      ]
+    }
+  }
+}

package/__tests__/fixtures/test-project/ui/pages/current-page.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Button, Icon, Text, Box } from '@metamask/design-system-react';
+
+export const CurrentPage = () => {
+  return (
+    <Box>
+      <Button>New Button</Button>
+      <Icon name="check" />
+      <Text>Welcome</Text>
+      <Button variant="primary">Submit</Button>
+    </Box>
+  );
+};

package/__tests__/fixtures/test-project/ui/pages/deprecated-page.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button, Icon, Modal, TextField } from '../../components/component-library';
+
+export const DeprecatedPage = () => {
+  return (
+    <div>
+      <Button>Old Button</Button>
+      <Icon name="check" />
+      <Modal>
+        <TextField label="Name" />
+        <Button type="submit">Submit</Button>
+      </Modal>
+    </div>
+  );
+};

package/__tests__/fixtures/test-project/ui/pages/mixed-page.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Button as OldButton } from '../../components/component-library';
+import { Button, Text } from '@metamask/design-system-react';
+
+export const MixedPage = () => {
+  return (
+    <div>
+      <OldButton>Old Button</OldButton>
+      <Button>New Button</Button>
+      <Text>Some text</Text>
+    </div>
+  );
+};

package/__tests__/metrics.test.js

@@ -0,0 +1,189 @@
+const fs = require('fs').promises;
+const path = require('path');
+const { execSync } = require('child_process');
+
+const TEST_CONFIG = path.join(__dirname, 'fixtures/test-config.json');
+const OUTPUT_DIR = path.join(__dirname, 'output');
+const DEPRECATED_OUTPUT = path.join(OUTPUT_DIR, 'test-metrics-deprecated.csv');
+const CURRENT_OUTPUT = path.join(OUTPUT_DIR, 'test-metrics-current.csv');
+
+describe('Design System Metrics', () => {
+  beforeAll(() => {
+    // Clean output directory before tests
+    try {
+      execSync(`rm -rf ${OUTPUT_DIR}/*`);
+    } catch (err) {
+      // Directory might not exist yet
+    }
+  });
+
+  afterAll(async () => {
+    // Clean up output files after tests
+    try {
+      await fs.rm(OUTPUT_DIR, { recursive: true, force: true });
+    } catch (err) {
+      // Ignore errors
+    }
+  });
+
+  describe('Deprecated Component Tracking', () => {
+    test('should track deprecated components from local component-library', async () => {
+      execSync(
+        `yarn node index.js --project test-project --config ${TEST_CONFIG} --sources deprecated`,
+        { stdio: 'pipe' }
+      );
+
+      const content = await fs.readFile(DEPRECATED_OUTPUT, 'utf8');
+      const lines = content.trim().split('\n');
+
+      // Check header
+      expect(lines[0]).toBe('Component,Instances,File Paths');
+
+      // Check that deprecated components are tracked
+      expect(content).toContain('Button');
+      expect(content).toContain('Icon');
+      expect(content).toContain('Modal');
+      expect(content).toContain('TextField');
+
+      // Parse CSV and verify counts
+      const buttonLine = lines.find(line => line.startsWith('"Button"'));
+      expect(buttonLine).toBeDefined();
+      // Button appears 2 times in deprecated-page.js
+      expect(buttonLine).toContain(',2,');
+    });
+
+    test('should only track components in deprecatedComponents list', async () => {
+      execSync(
+        `yarn node index.js --project test-project --config ${TEST_CONFIG} --sources deprecated`,
+        { stdio: 'pipe' }
+      );
+
+      const content = await fs.readFile(DEPRECATED_OUTPUT, 'utf8');
+
+      // BannerAlert is in the list but not used, should still appear with 0 or not tracked
+      // Only used components should appear
+      expect(content).toContain('Button');
+      expect(content).toContain('Icon');
+      expect(content).toContain('Modal');
+      expect(content).toContain('TextField');
+    });
+  });
+
+  describe('Current Component Tracking', () => {
+    test('should track current components from NPM package', async () => {
+      execSync(
+        `yarn node index.js --project test-project --config ${TEST_CONFIG} --sources current`,
+        { stdio: 'pipe' }
+      );
+
+      const content = await fs.readFile(CURRENT_OUTPUT, 'utf8');
+      const lines = content.trim().split('\n');
+
+      // Check header
+      expect(lines[0]).toBe('Component,Instances,File Paths');
+
+      // Check that current components are tracked
+      expect(content).toContain('Button');
+      expect(content).toContain('Icon');
+      expect(content).toContain('Text');
+      expect(content).toContain('Box');
+    });
+
+    test('should count multiple instances correctly', async () => {
+      execSync(
+        `yarn node index.js --project test-project --config ${TEST_CONFIG} --sources current`,
+        { stdio: 'pipe' }
+      );
+
+      const content = await fs.readFile(CURRENT_OUTPUT, 'utf8');
+      const lines = content.trim().split('\n');
+
+      // Button appears 3 times total in current files (2 in current-page.js, 1 in mixed-page.js)
+      const buttonLine = lines.find(line => line.startsWith('"Button"'));
+      expect(buttonLine).toBeDefined();
+      expect(buttonLine).toContain(',3,');
+    });
+  });
+
+  describe('Source Separation', () => {
+    test('should generate both deprecated and current reports by default', async () => {
+      execSync(
+        `yarn node index.js --project test-project --config ${TEST_CONFIG}`,
+        { stdio: 'pipe' }
+      );
+
+      // Both files should exist
+      const deprecatedExists = await fs
+        .access(DEPRECATED_OUTPUT)
+        .then(() => true)
+        .catch(() => false);
+      const currentExists = await fs
+        .access(CURRENT_OUTPUT)
+        .then(() => true)
+        .catch(() => false);
+
+      expect(deprecatedExists).toBe(true);
+      expect(currentExists).toBe(true);
+    });
+
+    test('should separate Button usage by source', async () => {
+      execSync(
+        `yarn node index.js --project test-project --config ${TEST_CONFIG}`,
+        { stdio: 'pipe' }
+      );
+
+      const deprecatedContent = await fs.readFile(DEPRECATED_OUTPUT, 'utf8');
+      const currentContent = await fs.readFile(CURRENT_OUTPUT, 'utf8');
+
+      // Deprecated Button count (2 in deprecated-page.js)
+      // Note: mixed-page.js uses "Button as OldButton" which doesn't match "Button" component name
+      const deprecatedLines = deprecatedContent.trim().split('\n');
+      const deprecatedButtonLine = deprecatedLines.find(line =>
+        line.startsWith('"Button"')
+      );
+      expect(deprecatedButtonLine).toContain(',2,'); // 2 in deprecated-page
+
+      // Current Button count (2 in current-page.js + 1 in mixed-page.js)
+      const currentLines = currentContent.trim().split('\n');
+      const currentButtonLine = currentLines.find(line =>
+        line.startsWith('"Button"')
+      );
+      expect(currentButtonLine).toContain(',3,'); // 2 in current-page + 1 in mixed-page
+    });
+  });
+
+  describe('File Path Tracking', () => {
+    test('should track which files contain each component', async () => {
+      execSync(
+        `yarn node index.js --project test-project --config ${TEST_CONFIG} --sources deprecated`,
+        { stdio: 'pipe' }
+      );
+
+      const content = await fs.readFile(DEPRECATED_OUTPUT, 'utf8');
+
+      // Button should reference the files where it's used
+      expect(content).toContain('deprecated-page.js');
+    });
+  });
+
+  describe('JSON Output Format', () => {
+    test('should generate JSON format when specified', async () => {
+      execSync(
+        `yarn node index.js --project test-project --config ${TEST_CONFIG} --sources deprecated --format json`,
+        { stdio: 'pipe' }
+      );
+
+      const jsonOutput = path.join(OUTPUT_DIR, 'test-metrics-deprecated.json');
+      const content = await fs.readFile(jsonOutput, 'utf8');
+      const data = JSON.parse(content);
+
+      // Should be valid JSON
+      expect(typeof data).toBe('object');
+
+      // Should have Button data
+      expect(data.Button).toBeDefined();
+      expect(data.Button.instances).toBeGreaterThan(0);
+      expect(Array.isArray(data.Button.files)).toBe(true);
+    });
+  });
+});

package/config.json

@@ -4,8 +4,9 @@
       "rootFolder": "ui",
       "ignoreFolders": ["ui/components/component-library"],
       "filePattern": "ui/**/*.{js,tsx}",
-      "outputFile": "extension-component-adoption-metrics.csv",
-      "components": [
+      "outputFile": "extension-component-metrics.csv",
+      "currentPackages": ["@metamask/design-system-react"],
+      "deprecatedComponents": [
         "AvatarAccount",
         "AvatarBase",
         "AvatarFavicon",
@@ -50,15 +51,47 @@
         "Textarea",
         "TextField",
         "TextFieldSearch"
+      ],
+      "currentComponents": [
+        "AvatarAccount",
+        "AvatarBase",
+        "AvatarFavicon",
+        "AvatarGroup",
+        "AvatarIcon",
+        "AvatarNetwork",
+        "AvatarToken",
+        "BadgeCount",
+        "BadgeIcon",
+        "BadgeNetwork",
+        "BadgeStatus",
+        "BadgeWrapper",
+        "Blockies",
+        "Box",
+        "Button",
+        "ButtonBase",
+        "ButtonIcon",
+        "ButtonHero",
+        "Checkbox",
+        "Icon",
+        "Jazzicon",
+        "Maskicon",
+        "Text",
+        "TextButton"
       ]
     },
     "mobile": {
       "rootFolder": "app",
       "ignoreFolders": ["app/component-library"],
       "filePattern": "app/components/**/*.{js,jsx,ts,tsx}",
-      "outputFile": "mobile-component-adoption-metrics.csv",
-      "components": [
+      "outputFile": "mobile-component-metrics.csv",
+      "currentPackages": ["@metamask/design-system-react-native"],
+      "deprecatedComponents": [
         "Accordion",
+        "AccountBalance",
+        "AccountBase",
+        "AccountCell",
+        "ActionListItem",
+        "AggregatedPercentage",
         "Avatar",
         "AvatarAccount",
         "AvatarBase",
@@ -81,43 +114,105 @@
         "BottomSheetHeader",
         "Button",
         "ButtonBase",
+        "ButtonFilter",
+        "ButtonHero",
         "ButtonIcon",
         "ButtonLink",
+        "ButtonPill",
         "ButtonPrimary",
         "ButtonSecondary",
+        "ButtonSemantic",
+        "ButtonToggle",
         "Card",
         "Cell",
         "CellBase",
         "CellDisplay",
         "CellMultiSelect",
         "CellSelect",
+        "CellSelectWithMenu",
         "Checkbox",
+        "ConditionalScrollView",
+        "ContractBox",
+        "ContractBoxBase",
+        "CustomInput",
+        "CustomSpendCap",
         "Header",
+        "HeaderCenter",
+        "HeaderWithTitleLeft",
+        "HeaderWithTitleLeftScrollable",
         "HelpText",
         "Icon",
         "Input",
+        "KeyValueRow",
         "Label",
         "ListItem",
         "ListItemColumn",
+        "ListItemMultiSelectButton",
+        "ListItemMultiSelectWithMenuButton",
+        "Loader",
+        "MainActionButton",
         "ModalConfirmation",
-        "ModalMadatory",
+        "ModalMandatory",
+        "MultichainAccountSelectorList",
+        "MultichainAddressRow",
+        "MultichainAddressRowsList",
+        "MultichainAddWalletActions",
         "MultiSelectItem",
         "Overlay",
+        "PercentageChange",
         "PickerAccount",
         "PickerBase",
         "PickerNetwork",
+        "QuickActionButton",
+        "QuickActionButtons",
+        "SegmentedControl",
         "SelectItem",
+        "SheetActions",
         "SheetBottom",
         "SheetHeader",
+        "Tab",
         "TabBar",
         "TabBarItem",
+        "TabEmptyState",
+        "Tabs",
+        "TabsBar",
+        "TabsList",
         "Tag",
+        "TagColored",
         "TagUrl",
         "Text",
         "TextField",
         "TextFieldSearch",
         "TextWithPrefixIcon",
+        "TitleLeft",
         "Toast"
+      ],
+      "currentComponents": [
+        "AvatarAccount",
+        "AvatarBase",
+        "AvatarFavicon",
+        "AvatarGroup",
+        "AvatarIcon",
+        "AvatarNetwork",
+        "AvatarToken",
+        "BadgeCount",
+        "BadgeIcon",
+        "BadgeNetwork",
+        "BadgeStatus",
+        "BadgeWrapper",
+        "Blockies",
+        "Box",
+        "ButtonAnimated",
+        "ButtonBase",
+        "Button",
+        "ButtonIcon",
+        "Checkbox",
+        "Icon",
+        "Jazzicon",
+        "Maskicon",
+        "TextButton",
+        "Text",
+        "TextOrChildren"
       ]
     }
   }

package/index.js

@@ -8,14 +8,12 @@ const traverse = require("@babel/traverse").default;
 const { program } = require("commander");
 const chalk = require("chalk");
 
-// Load configuration
-const CONFIG_PATH = path.join(__dirname, "config.json");
 let config;
 
 // Function to load and parse the configuration file
-const loadConfig = async () => {
+const loadConfig = async (configPath) => {
   try {
-    const configContent = await fs.readFile(CONFIG_PATH, "utf8");
+    const configContent = await fs.readFile(configPath, "utf8");
     config = JSON.parse(configContent);
   } catch (err) {
     console.error(
@@ -27,23 +25,56 @@ const loadConfig = async () => {
 
 // Define CLI options using Commander
 program
-  .version("1.0.0")
-  .description("Design System Metrics CLI Tool")
+  .version("2.0.0")
+  .description("Design System Metrics CLI Tool - Track component usage from multiple sources")
   .requiredOption(
     "-p, --project <name>",
     "Specify the project to audit (e.g., extension, mobile)"
   )
   .option("-f, --format <type>", "Output format (csv, json)", "csv")
+  .option(
+    "-s, --sources <types>",
+    "Comma-separated list of sources to track (deprecated, current, all)",
+    "all"
+  )
+  .option(
+    "-c, --config <path>",
+    "Path to custom config file",
+    path.join(__dirname, "config.json")
+  )
   .parse(process.argv);
 
 const options = program.opts();
 
 // Initialize component instances and file mappings
-let componentInstances = new Map();
-let componentFiles = new Map();
+// Structure: Map<componentName, Map<source, { count, files }>>
+let componentMetrics = new Map();
+
+// Helper function to track component usage by source
+const trackComponent = (componentName, source, filePath) => {
+  if (!componentMetrics.has(componentName)) {
+    componentMetrics.set(componentName, new Map());
+  }
+
+  const sourceMetrics = componentMetrics.get(componentName);
+  if (!sourceMetrics.has(source)) {
+    sourceMetrics.set(source, { count: 0, files: [] });
+  }
+
+  const metrics = sourceMetrics.get(source);
+  metrics.count++;
+  metrics.files.push(filePath);
+};
 
 // Function to process a single file
-const processFile = async (filePath, componentsSet, importedComponentsSet) => {
+const processFile = async (
+  filePath,
+  deprecatedComponentsSet,
+  currentComponentsSet,
+  currentPackages
+) => {
+  // Track imports by source: Map<componentName, source>
+  const componentImports = new Map();
   try {
     const content = await fs.readFile(filePath, "utf8");
 
@@ -51,23 +82,61 @@ const processFile = async (filePath, componentsSet, importedComponentsSet) => {
     const ast = babelParser.parse(content, {
       sourceType: "module",
       plugins: ["jsx", "typescript"],
+      attachComment: true, // Enable comment attachment for JSDoc parsing
     });
 
-    // Traverse the AST to find import declarations from the component library
+    // Traverse the AST to find import declarations from multiple sources
     traverse(ast, {
       ImportDeclaration({ node }) {
         const importPath = node.source.value;
         console.log(`Import path detected: ${importPath}`);
+
+        let source = null;
+
+        // Check if it's from local component library (DEPRECATED)
         if (importPath.includes("/component-library")) {
+          source = "deprecated";
+        }
+        // Check if it's from current NPM packages
+        else if (currentPackages && currentPackages.length > 0) {
+          for (const pkg of currentPackages) {
+            if (importPath === pkg || importPath.startsWith(`${pkg}/`)) {
+              source = "current";
+              break;
+            }
+          }
+        }
+
+        // If we found a relevant import source, track the components
+        if (source) {
           node.specifiers.forEach((specifier) => {
+            let componentName = null;
+
             if (specifier.type === "ImportDefaultSpecifier") {
-              importedComponentsSet.add(specifier.local.name);
+              componentName = specifier.local.name;
               console.log(
-                `Default imported component: ${specifier.local.name}`
+                `Default imported component: ${componentName} (${source})`
               );
             } else if (specifier.type === "ImportSpecifier") {
-              importedComponentsSet.add(specifier.local.name);
-              console.log(`Named imported component: ${specifier.local.name}`);
+              componentName = specifier.local.name;
+              console.log(`Named imported component: ${componentName} (${source})`);
+            }
+
+            if (componentName) {
+              // Check if component is in deprecated list (for local imports)
+              if (
+                source === "deprecated" &&
+                deprecatedComponentsSet.has(componentName)
+              ) {
+                componentImports.set(componentName, source);
+              }
+              // Check if component is in current list (for NPM imports)
+              else if (
+                source === "current" &&
+                currentComponentsSet.has(componentName)
+              ) {
+                componentImports.set(componentName, source);
+              }
             }
           });
         }
@@ -99,19 +168,13 @@ const processFile = async (filePath, componentsSet, importedComponentsSet) => {
 
           console.log(`JSX component detected: ${componentName}`);
 
-          if (
-            componentsSet.has(componentName) &&
-            importedComponentsSet.has(componentName)
-          ) {
-            const count = componentInstances.get(componentName) || 0;
-            componentInstances.set(componentName, count + 1);
-
-            const files = componentFiles.get(componentName) || [];
-            files.push(filePath);
-            componentFiles.set(componentName, files);
+          // Check if this component was imported and track its usage
+          if (componentImports.has(componentName)) {
+            const source = componentImports.get(componentName);
+            trackComponent(componentName, source, filePath);
 
             console.log(
-              `Matched JSX component: ${componentName}, Count: ${count + 1}`
+              `Matched JSX component: ${componentName}, Source: ${source}`
             );
           }
         }
@@ -126,7 +189,7 @@ const processFile = async (filePath, componentsSet, importedComponentsSet) => {
 
 // Main function to coordinate the audit
 const main = async () => {
-  await loadConfig();
+  await loadConfig(options.config);
 
   const projectName = options.project;
   const projectConfig = config.projects[projectName];
@@ -140,10 +203,18 @@ const main = async () => {
     process.exit(1);
   }
 
-  const { rootFolder, ignoreFolders, filePattern, outputFile, components } =
-    projectConfig;
+  const {
+    rootFolder,
+    ignoreFolders,
+    filePattern,
+    outputFile,
+    deprecatedComponents = [],
+    currentComponents = [],
+    currentPackages = [],
+  } = projectConfig;
 
-  const componentsSet = new Set(components);
+  const deprecatedComponentsSet = new Set(deprecatedComponents);
+  const currentComponentsSet = new Set(currentComponents);
 
   console.log(chalk.blue(`\nStarting audit for project: ${projectName}\n`));
 
@@ -162,44 +233,96 @@ const main = async () => {
 
     // Process files concurrently
     await Promise.all(
-      files.map((file) => processFile(file, componentsSet, new Set()))
+      files.map((file) =>
+        processFile(
+          file,
+          deprecatedComponentsSet,
+          currentComponentsSet,
+          currentPackages
+        )
+      )
     );
 
-    console.log(chalk.green("\nComponent Adoption Metrics:"));
+    console.log(chalk.green("\nComponent Migration Metrics:"));
 
-    let csvContent = "Component,Instances,File Paths\n";
-    let jsonOutput = {};
+    // Parse sources filter from CLI
+    let requestedSources = ["deprecated", "current"];
+    if (options.sources && options.sources !== "all") {
+      requestedSources = options.sources.split(",").map((s) => s.trim());
+    }
 
-    componentsSet.forEach((componentName) => {
-      const instanceCount = componentInstances.get(componentName) || 0;
-      const filePaths = componentFiles.get(componentName) || [];
-      console.log(`${chalk.cyan(componentName)}: ${instanceCount}`);
+    const sourceTypes = requestedSources;
 
-      if (options.format.toLowerCase() === "json") {
-        jsonOutput[componentName] = {
-          instances: instanceCount,
-          files: filePaths,
-        };
-      } else {
-        csvContent += `"${componentName}",${instanceCount},"${filePaths.join(
-          ", "
-        )}"\n`;
+    for (const sourceType of sourceTypes) {
+      // Filter component metrics for this source type
+      const sourceMetrics = new Map();
+
+      // Determine which component set to use based on source type
+      const componentSet =
+        sourceType === "deprecated"
+          ? deprecatedComponentsSet
+          : currentComponentsSet;
+
+      componentSet.forEach((componentName) => {
+        const componentSources = componentMetrics.get(componentName);
+        if (componentSources) {
+          const metrics = componentSources.get(sourceType);
+          if (metrics) {
+            sourceMetrics.set(componentName, metrics);
+          }
+        }
+      });
+
+      // Skip if no metrics for this source
+      if (sourceMetrics.size === 0) {
+        console.log(
+          chalk.yellow(
+            `No ${sourceType} components found, skipping report.`
+          )
+        );
+        continue;
       }
-    });
 
-    // Write the metrics to the specified output file
-    try {
+      // Generate output file name
+      const baseFileName = outputFile.replace(/\.(csv|json)$/, "");
+      const sourceOutputFile = `${baseFileName}-${sourceType}.${options.format.toLowerCase()}`;
+
+      console.log(
+        chalk.blue(
+          `\n${sourceType.toUpperCase()} Components (${sourceType === "deprecated" ? "Local component-library" : currentPackages.join(", ")}):`
+        )
+      );
+
       if (options.format.toLowerCase() === "json") {
-        await fs.writeFile(outputFile, JSON.stringify(jsonOutput, null, 2));
+        const jsonOutput = {};
+        sourceMetrics.forEach((metrics, componentName) => {
+          console.log(`${chalk.cyan(componentName)}: ${metrics.count}`);
+          jsonOutput[componentName] = {
+            instances: metrics.count,
+            files: metrics.files,
+          };
+        });
+
+        await fs.writeFile(
+          sourceOutputFile,
+          JSON.stringify(jsonOutput, null, 2)
+        );
       } else {
-        await fs.writeFile(outputFile, csvContent);
+        // CSV format
+        let csvContent = "Component,Instances,File Paths\n";
+
+        sourceMetrics.forEach((metrics, componentName) => {
+          console.log(`${chalk.cyan(componentName)}: ${metrics.count}`);
+          csvContent += `"${componentName}",${metrics.count},"${metrics.files.join(", ")}"\n`;
+        });
+
+        await fs.writeFile(sourceOutputFile, csvContent);
       }
-      console.log(
-        chalk.green(`\nComponent metrics written to ${outputFile}\n`)
-      );
-    } catch (err) {
-      console.error(chalk.red(`Error writing to file: ${err.message}`));
+
+      console.log(chalk.green(`Metrics written to ${sourceOutputFile}`));
     }
+
+    console.log(chalk.green("\n✓ All reports generated successfully!\n"));
   } catch (err) {
     console.error(chalk.red(`Error reading files: ${err.message}`));
   }

package/jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  testEnvironment: 'node',
+  testMatch: ['**/__tests__/**/*.test.js'],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '/__tests__/fixtures/',
+    '/__tests__/output/',
+  ],
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '/__tests__/fixtures/',
+    '/__tests__/output/',
+  ],
+};

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@georgewrmarshall/design-system-metrics",
-  "version": "1.0.2",
-  "description": "A CLI tool to audit design system component usage across multiple MetaMask codebases",
+  "version": "2.0.0",
+  "description": "A CLI tool to audit design system component usage from local libraries, NPM packages, and track deprecated components across MetaMask codebases",
   "main": "index.js",
   "packageManager": "yarn@4.3.1",
   "bin": "./index.js",
   "scripts": {
-    "start": "node index.js --project extension"
+    "start": "node index.js --project extension",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "keywords": [
     "cli",
@@ -28,4 +30,4 @@
   "devDependencies": {
     "jest": "^29.7.0"
   }
-}
+}