@zeroheight/adoption-cli 2.4.2 → 3.0.0

package/CHANGELOG.md

@@ -1,12 +1,25 @@
 # Release notes
 
+## [3.0.0](https://www.npmjs.com/package/@zeroheight/adoption-cli/v/3.0.0) - 15th March 2025
+
+- `analyze` command updated to collect date about color usage
+  - For non-interactive command new flags introduced: `--color-usage` and `--component-usage`
+- Improvement to usability of interactive `analyze` command
+- Remove `--dry-run` from interactive `analyze`
+- Additional prompt added if using an outdated version of the CLI tool
+- Allow `track-package` command to use package where version is unspecified
+
+## [2.4.3](https://www.npmjs.com/package/@zeroheight/adoption-cli/v/2.4.3) - 2nd January 2025
+
+- `track-package --packages` option can be used to allow tracking specific packages within monorepos in non-interactive mode
+
 ## [2.4.2](https://www.npmjs.com/package/@zeroheight/adoption-cli/v/2.4.2) - 17th December 2024
 
 - Fix issue with parsing pnpm lockfiles using version `6.0`
 
 ## [2.4.1](https://www.npmjs.com/package/@zeroheight/adoption-cli/v/2.4.1) - 11th December 2024
 
-- The monitor-repo command now supports custom package naming for projects.
+- The `monitor-repo` command now supports custom package naming for projects.
 
 ## [2.4.0](https://www.npmjs.com/package/@zeroheight/adoption-cli/v/2.4.0) - 10th December 2024
 

package/README.md

@@ -50,17 +50,27 @@ There are 4 levels of increasing severity:
 
 ---
 
+### Color usage analysis
+
+[Help center article](https://zeroheight.com/help/article/color-usage/)
+
+In the repository in which you wish to get usage metrics around how raw color values are being used, run the following command:
+
+```bash
+zh-adoption analyze --color-usage
+```
+
 ### Component usage analysis
 
 [Help center article](https://zeroheight.com/help/article/component-usage/)
 
-In the React repository in which you wish to get usage metrics around how components from your design system packages are being used, run the following command:
+In the **React** repository in which you wish to get usage metrics around how components from your design system packages are being used, run the following command:
 
 ```bash
-zh-adoption analyze
+zh-adoption analyze --component-usage
 ```
 
-#### Options
+### Analyze command options
 
 `-e` / `--extensions`
 
@@ -72,7 +82,7 @@ zh-adoption analyze -e "**/*.{js,jsx,ts,tsx}"
 
 `-i` / `--ignore`
 
-Provide a glob pattern to ignore files, directories or file extensions when searching for components.
+Provide a glob pattern to ignore files, directories or file extensions when analyzing.
 
 ```bash
 zh-adoption analyze -i "**/*.{test,spec}.*"
@@ -186,6 +196,18 @@ Pass in `false` to disable the interactive mode e.g. when running in a CI enviro
 zh-adoption track-package --interactive false
 ```
 
+`-p` / `--packages`
+
+Provide one or multiple package names to match when searching for design system packages. This must be passed when `-in` / `--interactive` is set to `false`.
+
+```bash
+zh-adoption track-package -in false -p package1 -p package2 -p package3
+```
+
+```bash
+zh-adoption track-package -in false --packages package1,package2,package3
+```
+
 `--log-level`
 
 Provide a severity to output diagnostic messages.

package/dist/ast/analyze.d.ts

@@ -31,6 +31,17 @@ export type RawUsage = {
     package: string;
     props: ComponentProps;
 };
+export type RawColorUsage = {
+    hex: string[];
+    rgb: string[];
+    hsla: string[];
+    oklab: string[];
+    hwb: string[];
+    lab: string[];
+    lch: string[];
+    colorSpace: string[];
+    totalCount: number;
+};
 declare const RUNTIME_VALUE = "zh-runtime-value";
 export declare const ARRAY_VALUE = "zh-array-value";
 export declare const BINARY_VALUE = "zh-binary-value";

package/dist/cli.d.ts

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
 import { Command } from "commander";
 declare const program: Command;
+export declare const CURRENT_VERSION = "3.0.0";
 export default program;

package/dist/cli.js

@@ -3,18 +3,26 @@ import * as React from "react";
 import { Command, Option } from "commander";
 import { render } from "ink-render-string";
 import HelpInfo from "./components/help-info.js";
+import LatestVersionInfo from "./components/latest-version-info.js";
 import { analyzeCommand } from "./commands/analyze.js";
 import { authCommand } from "./commands/auth.js";
 import { monitorRepoCommand } from "./commands/monitor-repo.js";
 import { trackPackageCommand } from "./commands/track-package.js";
 import logger, { setFileStream } from "./common/logging.js";
 const program = new Command();
-const { output, cleanup } = render(React.createElement(HelpInfo, null));
+export const CURRENT_VERSION = "3.0.0";
+async function getLatestPackageVersion() {
+    const response = await fetch("https://registry.npmjs.org/@zeroheight/adoption-cli/latest");
+    const json = await response.json();
+    return json.version;
+}
+const { output: helpOutput, cleanup: helpCleanup } = render(React.createElement(HelpInfo, null));
+const { output: latestVersionOutput, cleanup: latestVersionCleanup } = render(React.createElement(LatestVersionInfo, { latestVersion: await getLatestPackageVersion() }));
 program
     .name("zh-adoption")
     .description("CLI for measuring design system usage usage in your products")
-    .version("2.4.2")
-    .addHelpText("before", output)
+    .version(CURRENT_VERSION)
+    .addHelpText("before", helpOutput)
     .option("--log-file <path>", "Path to write logs to, if not provided logs only error logs will be written to stderr")
     .addOption(new Option("--log-level <level>", "The lowest level of logs to display")
     .default("error")
@@ -23,7 +31,7 @@ program
     .addCommand(authCommand())
     .addCommand(monitorRepoCommand())
     .addCommand(trackPackageCommand())
-    .hook("preAction", (thisCommand, actionCommand) => {
+    .hook("preAction", async (thisCommand, actionCommand) => {
     logger.level = thisCommand.opts()["logLevel"];
     if (thisCommand.opts()["logFile"]) {
         setFileStream(thisCommand.opts()["logFile"]);
@@ -35,8 +43,13 @@ program
             globalOpts: thisCommand.opts(),
         },
     }, "Running command");
+    const latestVersion = await getLatestPackageVersion();
+    if (latestVersion !== CURRENT_VERSION) {
+        console.log(latestVersionOutput);
+    }
 });
-cleanup();
+helpCleanup();
+latestVersionCleanup();
 // Only start parsing if run as CLI, don't start parsing during testing
 if (process.env["NODE_ENV"] !== "test") {
     program.parse();

package/dist/commands/analyze.d.ts

@@ -1,14 +1,16 @@
 import { RenderOptions } from "ink";
 import { Command } from "commander";
-import { RawUsage } from "../ast/analyze.js";
+import { RawColorUsage, RawUsage } from "../ast/analyze.js";
 interface AnalyzeOptions {
     extensions: string;
     ignore: string[];
-    dryRun: boolean;
     repoName?: string;
     interactive: boolean;
+    componentUsage: boolean;
+    tokenUsage: boolean;
 }
-export type RawUsageMap = Map<string, RawUsage[]>;
+export type RawComponentUsageMap = Map<string, RawUsage[]>;
+export type RawColorUsageMap = Map<string, RawColorUsage>;
 export declare function analyzeAction(options: AnalyzeOptions, renderOptions?: RenderOptions): Promise<void>;
 export declare function analyzeCommand(): Command;
 export {};

package/dist/commands/analyze.js

@@ -2,16 +2,16 @@ import * as React from "react";
 import { render } from "ink";
 import { Command, Option } from "commander";
 import yn from "yn";
-import { analyzeFiles, parseGlobList } from "./analyze.utils.js";
+import { analyzeFiles, analyzeRawColorUsage, parseGlobList, } from "./analyze.utils.js";
 import Analyze from "../components/analyze/analyze.js";
 import NonInteractiveAnalyze from "../components/analyze/non-interactive-analyze.js";
 import logger, { setStdErrStream } from "../common/logging.js";
 export async function analyzeAction(options, renderOptions) {
     if (options.interactive) {
-        render(React.createElement(Analyze, { dryRun: options.dryRun, onAnalyzeFiles: () => analyzeFiles(options.extensions, options.ignore), repoName: options.repoName }), renderOptions);
+        render(React.createElement(Analyze, { onAnalyzeFiles: () => analyzeFiles(options.extensions, options.ignore), onAnalyzeColorUsage: () => analyzeRawColorUsage(options.extensions, options.ignore), repoName: options.repoName }), renderOptions);
     }
     else {
-        render(React.createElement(NonInteractiveAnalyze, { repoName: options.repoName, onAnalyzeFiles: () => analyzeFiles(options.extensions, options.ignore) }));
+        render(React.createElement(NonInteractiveAnalyze, { repoName: options.repoName, onAnalyzeFiles: () => analyzeFiles(options.extensions, options.ignore), onAnalyzeColorUsage: () => analyzeRawColorUsage(options.extensions, options.ignore), shouldAnalyzeComponentUsage: options.componentUsage, shouldAnalyzeTokenUsage: options.tokenUsage }));
     }
 }
 export function analyzeCommand() {
@@ -26,11 +26,16 @@ export function analyzeCommand() {
         .addOption(new Option("-i, --ignore [patterns]", "files to ignore when searching for components, use multiple times to add more than one glob pattern")
         .default(["**/*.{test,spec}.*", "**/*.d.ts"], "*.test.*, *.spec.* and *.d.ts files")
         .argParser(parseGlobList))
-        .addOption(new Option("-d, --dry-run", "don't push results to zeroheight").default(false))
         .addOption(new Option("-r, --repo-name <string>", "name of the repository"))
         .addOption(new Option("-in, --interactive [boolean]", "disable to skip input (useful when running in CI)")
         .default(true)
         .argParser((value) => yn(value)))
+        .addOption(new Option("-cu, --component-usage [boolean]", "gather data about component and prop usage")
+        .default(true)
+        .argParser((value) => yn(value)))
+        .addOption(new Option("-cou, --color-usage [boolean]", "gather data about color usage")
+        .default(true)
+        .argParser((value) => yn(value)))
         .action(async (options) => {
         if (!options.interactive) {
             setStdErrStream();

package/dist/commands/analyze.utils.d.ts

@@ -1,13 +1,6 @@
 import type { Option } from "commander";
-import { RawUsageMap } from "./analyze.js";
-import { ComponentProps } from "../ast/analyze.js";
-export interface ComponentUsageRecord {
-    name: string;
-    files: string[];
-    count: number;
-    package: string;
-    props: ComponentProps;
-}
+import { RawColorUsageMap, RawComponentUsageMap } from "./analyze.js";
+import { RawColorUsage } from "../ast/analyze.js";
 /**
  * Get a list of files matching extensions, skips hidden files and node_modules
  * @param base starting directory
@@ -19,9 +12,15 @@ export interface ComponentUsageRecord {
 export declare function findFiles(base: string, extensions: string, ignorePattern: string[]): Promise<string[]>;
 export declare function analyzeFiles(extensions: string, ignorePattern: string[]): Promise<{
     errorFile: string | null;
-    usage: RawUsageMap;
+    usage: RawComponentUsageMap;
+}>;
+export declare function calculateNumberOfComponents(usageResult: RawComponentUsageMap): number;
+export declare function calculateNumberOfColors(usageResult: RawColorUsageMap): number;
+export declare function countColorOccurrences(fileContent: string): RawColorUsage;
+export declare function analyzeRawColorUsage(extensions: string, ignorePattern: string[]): Promise<{
+    errorFile: string | null;
+    usage: RawColorUsageMap;
 }>;
-export declare function calculateNumberOfComponents(usageResult: RawUsageMap): number;
 /**
  * Parse the ignore array and format correctly
  */

package/dist/commands/analyze.utils.js

@@ -101,6 +101,93 @@ export function calculateNumberOfComponents(usageResult) {
     }
     return 0;
 }
+export function calculateNumberOfColors(usageResult) {
+    if (!usageResult)
+        return 0;
+    const colors = Array.from(usageResult.entries()).flatMap((cols) => cols[1]);
+    const colorCount = colors.reduce((prev, next) => {
+        return prev + next.totalCount;
+    }, 0);
+    return colorCount;
+}
+export function countColorOccurrences(fileContent) {
+    // Matches #FFF, #FFFA, #FFFFFF or #FFFFFFA
+    const hexColorRegex = /#([a-fA-F0-9]{6}|[a-fA-F0-9]{8})\b|#([a-fA-F0-9]{3})\b/gi;
+    const hexMatches = Array.from(fileContent.match(hexColorRegex) ?? []);
+    // Matches rgb(255, 255, 255) or rgba(255, 255, 255) (with or without commas)
+    const rgbColorRegex = /rgba?\(\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})\s*[,\s]\s*(\d{1,3})(?:\s*[,\s]\s*(\d*\.?\d+))?\s*\)/g;
+    const rgbMatches = Array.from(fileContent.match(rgbColorRegex) ?? []);
+    // Matches hsl and hsla values
+    const hslaColorRegex = /hsl(?:a)?\(\s*(?:(?:none|from\s+[a-zA-Z#0-9()]+)?\s*(?:[a-z\d+\-*/%()\s]+)\s*|(\d+(?:deg|grad|rad|turn)?)\s*(\d+%?)\s*(\d+%?)\s*(?:\/\s*(\d+%?|0?\.\d+))?|(\d+(?:deg|grad|rad|turn)?)\s*,\s*(\d+%)\s*,\s*(\d+%)\s*(?:,\s*(\d+(\.\d+)?%?))?)\)/g;
+    const hslaMatches = Array.from(fileContent.match(hslaColorRegex) ?? []);
+    // Matches oklab and oklch values (with or without commas and opacity)
+    const oklabColorRegex = /okl(?:ab|ch)\(\s*(-?\d*\.?\d+)\s*[,\s]\s*(-?\d*\.?\d+)\s*[,\s]\s*(-?\d*\.?\d+)(?:\s*[,\s]\s*(\d*\.?\d+))?\s*\)/g;
+    const oklabMatches = Array.from(fileContent.match(oklabColorRegex) ?? []);
+    // Matches hwb values (with or without commas and opacity)
+    const hwbColorRegex = /hwb\(\s*(\d*\.?\d+)(?:deg|turn|rad|grad)?\s*[,\s]\s*(\d*\.?\d+%)\s*[,\s]\s*(\d*\.?\d+%)(?:\s*[,\s]\s*(\d*\.?\d+))?\s*\)/g;
+    const hwbMatches = Array.from(fileContent.match(hwbColorRegex) ?? []);
+    // Matches lab values (with or without commas and opacity)
+    const labColorRegex = /(?<!ok)lab\(\s*(-?\d*\.?\d+%)\s*[,\s]\s*(-?\d*\.?\d+)\s*[,\s]\s*(-?\d*\.?\d+)(?:\s*[,\s]\s*(\d*\.?\d+))?\s*\)/g;
+    const labMatches = Array.from(fileContent.match(labColorRegex) ?? []);
+    // Matches lch values (with or without commas and opacity)
+    const lchColorRegex = /(?<!ok)lch\(\s*(-?\d*\.?\d+%)\s*[,\s]\s*(-?\d*\.?\d+)\s*[,\s]\s*(-?\d*\.?\d+)(?:\s*[,\s]\s*(\d*\.?\d+))?\s*\)/g;
+    const lchMatches = Array.from(fileContent.match(lchColorRegex) ?? []);
+    // Matches color space values
+    const colorSpaceColorRegex = /color\(\s*([\w-]+)\s+(?:[-+]?\d*\.?\d+(?:e[-+]?\d+)?%?\s*){3,4}\)/g;
+    const colorSpaceMatches = Array.from(fileContent.match(colorSpaceColorRegex) ?? []);
+    return {
+        hex: hexMatches,
+        rgb: rgbMatches,
+        hsla: hslaMatches,
+        oklab: oklabMatches,
+        hwb: hwbMatches,
+        lab: labMatches,
+        lch: lchMatches,
+        colorSpace: colorSpaceMatches,
+        totalCount: hexMatches.length +
+            rgbMatches.length +
+            hslaMatches.length +
+            hwbMatches.length +
+            labMatches.length +
+            lchMatches.length +
+            colorSpaceMatches.length +
+            oklabMatches.length,
+    };
+}
+export async function analyzeRawColorUsage(extensions, ignorePattern) {
+    const files = await findFiles(process.cwd(), extensions, ignorePattern);
+    if (files.length === 0) {
+        throw new Error("Can't find any relevant files");
+    }
+    const parseErrors = [];
+    const usageMap = new Map();
+    for (const file of files) {
+        try {
+            const fileContents = await readFile(file, "utf-8");
+            const colorUsage = countColorOccurrences(fileContents);
+            if (colorUsage.totalCount > 0) {
+                const relativePath = file.slice(process.cwd().length);
+                usageMap.set(relativePath, colorUsage);
+            }
+        }
+        catch (e) {
+            logger.error({ file, error: e }, "Error parsing file");
+            parseErrors.push(`Can't parse file ${file}`);
+        }
+    }
+    const errorFile = `/tmp/zh-adoption-analyze-errors-${Date.now()}`;
+    if (parseErrors.length > 0) {
+        const file = fs.createWriteStream(errorFile);
+        parseErrors.forEach((err) => {
+            file.write(err + "\n");
+        });
+        file.end();
+    }
+    return {
+        errorFile: parseErrors.length > 0 ? errorFile : null,
+        usage: usageMap,
+    };
+}
 /**
  * Parse the ignore array and format correctly
  */

package/dist/commands/track-package.d.ts

@@ -2,6 +2,7 @@ import { Command } from "commander";
 import { RenderOptions } from "ink";
 interface TrackPackageOptions {
     interactive: boolean;
+    packages?: string[];
 }
 export declare function trackPackageAction(options: TrackPackageOptions, renderOptions?: RenderOptions): Promise<void>;
 export declare function trackPackageCommand(): Command;

package/dist/commands/track-package.js

@@ -5,12 +5,13 @@ import yn from "yn";
 import NonInteractiveTrackPackage from "../components/track-package/non-interactive-track-package.js";
 import TrackPackage from "../components/track-package/track-package.js";
 import { setStdErrStream } from "../common/logging.js";
+import { parsePackageList } from "./track-package.utils.js";
 export async function trackPackageAction(options, renderOptions) {
     if (options.interactive) {
         render(React.createElement(TrackPackage, null), renderOptions);
     }
     else {
-        render(React.createElement(NonInteractiveTrackPackage, null));
+        render(React.createElement(NonInteractiveTrackPackage, { allowedPackages: options.packages }));
     }
 }
 export function trackPackageCommand() {
@@ -24,6 +25,7 @@ export function trackPackageCommand() {
         .addOption(new Option("-in, --interactive [boolean]", "disable to skip manual input (useful when running in CI)")
         .default(true)
         .argParser((value) => yn(value)))
+        .addOption(new Option("-p, --packages [packageNames]", "specify the packages to search for, use multiple times to match more than one package").argParser(parsePackageList))
         .action(async (options) => {
         if (!options.interactive) {
             setStdErrStream();

package/dist/commands/track-package.utils.d.ts

@@ -4,7 +4,14 @@ import { PackageFile } from "../common/types/package-file.js";
  * @param subpath - provide to search inside subpath instead of working directory
  */
 export declare function findPackageFiles(subpath?: string): Promise<string[]>;
-export declare function getPackageInfo(): Promise<{
+/**
+ * Get allowed package files from the directory and return
+ * their name/package/version/exports
+ *
+ * @param allowedPackages a list of package names to match on
+ * @returns a list of matched packages files and errors
+ */
+export declare function getPackageInfo(allowedPackages?: string[]): Promise<{
     files: PackageFile[];
     error: string | null;
 }>;
@@ -12,3 +19,7 @@ export declare function getPackageInfo(): Promise<{
  * Transform exports object into fully qualified aliases
  */
 export declare function getAliasesFromExports(packageName: string, exports?: PackageFile["exports"]): string[];
+/**
+ * Parse package list and format correctly
+ */
+export declare function parsePackageList(value: string, previous?: string[]): string[];

package/dist/commands/track-package.utils.js

@@ -9,7 +9,14 @@ export async function findPackageFiles(subpath) {
     const workingDir = joinPath(process.cwd(), subpath ?? "");
     return findFiles(workingDir, "**/**/package.json", []);
 }
-export async function getPackageInfo() {
+/**
+ * Get allowed package files from the directory and return
+ * their name/package/version/exports
+ *
+ * @param allowedPackages a list of package names to match on
+ * @returns a list of matched packages files and errors
+ */
+export async function getPackageInfo(allowedPackages) {
     const base = process.cwd();
     const files = await findPackageFiles();
     if (files.length === 0) {
@@ -19,16 +26,26 @@ export async function getPackageInfo() {
         };
     }
     try {
-        const packageFiles = await Promise.all(files.map(async (file) => {
+        let packageFiles = await Promise.all(files.map(async (file) => {
             const fileContents = await readFile(file, "utf-8");
             const parsedPackage = JSON.parse(fileContents);
             return {
                 name: parsedPackage.name,
-                path: `.${files[0]?.split(base).pop()}`,
-                version: parsedPackage.version,
+                path: `.${file.split(base).pop()}`,
+                // Default to 0.0.0 as we don't have a version so it might be a workspaces project/monorepo
+                version: parsedPackage.version ?? "0.0.0",
                 exports: parsedPackage.exports,
             };
         }));
+        if (allowedPackages?.length) {
+            packageFiles = packageFiles.filter((pack) => allowedPackages.includes(pack.name));
+            if (!packageFiles.length) {
+                return {
+                    files: [],
+                    error: "Can't find any matching packages",
+                };
+            }
+        }
         return {
             files: packageFiles,
             error: null,
@@ -51,3 +68,15 @@ export function getAliasesFromExports(packageName, exports) {
         .map((path) => joinPath(packageName, path))
         .filter((name) => name !== packageName);
 }
+/**
+ * Parse package list and format correctly
+ */
+export function parsePackageList(value, previous = []) {
+    return [
+        ...previous,
+        ...value
+            .split(",")
+            .map((entry) => entry.trim())
+            .filter(Boolean),
+    ];
+}

package/dist/common/api.d.ts

@@ -1,6 +1,20 @@
 import { ComponentProps } from "../ast/analyze.js";
-import { RawUsageMap } from "../commands/analyze.js";
+import { RawColorUsageMap, RawComponentUsageMap } from "../commands/analyze.js";
 import { Credentials } from "./config.js";
+export interface ComponentUsageRecord {
+    name: string;
+    files: string[];
+    count: number;
+    package: string;
+    props: ComponentProps;
+}
+export interface TokenLiteralUsageRecord {
+    value: string;
+    files: string[];
+    /** Only support color values right now */
+    type: "color";
+    count: number;
+}
 export declare enum ResponseStatus {
     Success = "success",
     Error = "error",
@@ -73,7 +87,11 @@ interface ComponentUsageDetailsSuccess {
         repo_name: string;
     };
 }
-export declare function submitUsageData(usage: RawUsageMap, repoName: string, credentials: Credentials): Promise<APIResponse<ComponentUsageDetailsSuccess>>;
+export declare function submitComponentUsageData(usage: RawComponentUsageMap, repoName: string, credentials: Credentials): Promise<APIResponse<ComponentUsageDetailsSuccess>>;
+interface TokenLiteralUsageDetailsSuccess {
+    token_literal_usage: {};
+}
+export declare function submitTokenLiteralUsageData(usage: RawColorUsageMap, repoName: string, credentials: Credentials): Promise<APIResponse<TokenLiteralUsageDetailsSuccess>>;
 interface RepoNamesSuccess {
     repo_names: string[];
 }

package/dist/common/api.js

@@ -31,12 +31,20 @@ export async function submitMonitoredRepoDetails(name, version, lockfilePath, pa
         version,
     }, credentials);
 }
-export async function submitUsageData(usage, repoName, credentials) {
+export async function submitComponentUsageData(usage, repoName, credentials) {
     return post("/component_usages", {
         repo_name: repoName,
         usage: transformUsageByName(usage),
     }, credentials);
 }
+export async function submitTokenLiteralUsageData(usage, repoName, credentials) {
+    return post("/token_literal_usages", {
+        token_literal_usage: {
+            repo_name: repoName,
+            usage: transformTokenLiteralUsageByName(usage),
+        },
+    }, credentials);
+}
 export async function getExistingRepoNames(credentials) {
     return get("/component_usages/repo_names", credentials);
 }
@@ -141,3 +149,21 @@ function transformUsageByName(usage) {
     }
     return Array.from(transformedUsageMap.values());
 }
+function transformTokenLiteralUsageByName(usage) {
+    const transformedUsageMap = new Map();
+    for (const [file, { hex, rgb, hsla }] of usage) {
+        // These values shouldn't collide as they're all different notations and types
+        const values = [...hex, ...rgb, ...hsla];
+        for (const colorValue of values) {
+            const currentValue = transformedUsageMap.get(colorValue);
+            const newFileList = [...(currentValue?.files ?? []), file];
+            transformedUsageMap.set(colorValue, {
+                value: colorValue,
+                type: "color",
+                files: newFileList,
+                count: (currentValue?.count ?? 0) + 1,
+            });
+        }
+    }
+    return Array.from(transformedUsageMap.values());
+}

package/dist/components/analyze/analyze.d.ts

@@ -1,11 +1,14 @@
 import React from "react";
-import { RawUsageMap } from "../../commands/analyze.js";
+import { RawColorUsageMap, RawComponentUsageMap } from "../../commands/analyze.js";
 export interface AnalyzeProps {
     onAnalyzeFiles: () => Promise<{
         errorFile: string | null;
-        usage: RawUsageMap;
+        usage: RawComponentUsageMap;
+    }>;
+    onAnalyzeColorUsage: () => Promise<{
+        errorFile: string | null;
+        usage: RawColorUsageMap;
     }>;
-    dryRun: boolean;
     repoName?: string;
 }
-export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }: AnalyzeProps): React.JSX.Element;
+export default function Analyze({ onAnalyzeFiles, onAnalyzeColorUsage, repoName, }: AnalyzeProps): React.JSX.Element;