@zeroheight/adoption-cli 2.4.3 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Release notes
 
+## [3.0.1](https://www.npmjs.com/package/@zeroheight/adoption-cli/v/3.0.1) - 25th March 2025
+
+- Fix bug where color analysis didn't occur when using non-interactive mode
+
+## [3.0.0](https://www.npmjs.com/package/@zeroheight/adoption-cli/v/3.0.0) - 25th 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

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}.*"

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.1";
 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.1";
+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.3")
-    .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;
+    colorUsage: 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.colorUsage }));
     }
 }
 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.utils.js

@@ -32,7 +32,8 @@ export async function getPackageInfo(allowedPackages) {
             return {
                 name: parsedPackage.name,
                 path: `.${file.split(base).pop()}`,
-                version: parsedPackage.version,
+                // 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,
             };
         }));

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;

package/dist/components/analyze/analyze.js

@@ -8,48 +8,116 @@ import NoCredentialsOnboarding from "../auth/no-credentials-onboarding.js";
 import RepoNamePrompt from "../repo-name-prompt.js";
 import UsageTable from "../usage-table.js";
 import { configPath, writeConfig, readConfig, } from "../../common/config.js";
-import { ResponseStatus, getAuthDetails, getZeroheightURL, submitUsageData, } from "../../common/api.js";
-import { calculateNumberOfComponents } from "../../commands/analyze.utils.js";
+import { ResponseStatus, getAuthDetails, getZeroheightURL, submitComponentUsageData, submitTokenLiteralUsageData, } from "../../common/api.js";
+import { calculateNumberOfColors, calculateNumberOfComponents, } from "../../commands/analyze.utils.js";
 import { ApiError } from "../../common/errors.js";
-export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }) {
+import ColorUsageTable from "../color-usage-table.js";
+var AnalyzeStage;
+(function (AnalyzeStage) {
+    AnalyzeStage[AnalyzeStage["initial"] = 0] = "initial";
+    AnalyzeStage[AnalyzeStage["finished"] = 1] = "finished";
+    AnalyzeStage[AnalyzeStage["fetchCredentials"] = 2] = "fetchCredentials";
+    AnalyzeStage[AnalyzeStage["fetchRepoNames"] = 3] = "fetchRepoNames";
+    AnalyzeStage[AnalyzeStage["cuScanningFiles"] = 4] = "cuScanningFiles";
+    AnalyzeStage[AnalyzeStage["cuScanComplete"] = 5] = "cuScanComplete";
+    AnalyzeStage[AnalyzeStage["cuShowMoreDetails"] = 6] = "cuShowMoreDetails";
+    AnalyzeStage[AnalyzeStage["cuSendDataCheck"] = 7] = "cuSendDataCheck";
+    AnalyzeStage[AnalyzeStage["cuAuthSetUp"] = 8] = "cuAuthSetUp";
+    AnalyzeStage[AnalyzeStage["cuRepoSelection"] = 9] = "cuRepoSelection";
+    AnalyzeStage[AnalyzeStage["cuSendingData"] = 10] = "cuSendingData";
+    AnalyzeStage[AnalyzeStage["cuSendSuccess"] = 11] = "cuSendSuccess";
+    AnalyzeStage[AnalyzeStage["tuConfirmRun"] = 12] = "tuConfirmRun";
+    AnalyzeStage[AnalyzeStage["tuScanningFiles"] = 13] = "tuScanningFiles";
+    AnalyzeStage[AnalyzeStage["tuScanComplete"] = 14] = "tuScanComplete";
+    AnalyzeStage[AnalyzeStage["tuShowMoreDetails"] = 15] = "tuShowMoreDetails";
+    AnalyzeStage[AnalyzeStage["tuSendDataCheck"] = 16] = "tuSendDataCheck";
+    AnalyzeStage[AnalyzeStage["tuAuthSetUp"] = 17] = "tuAuthSetUp";
+    AnalyzeStage[AnalyzeStage["tuRepoSelection"] = 18] = "tuRepoSelection";
+    AnalyzeStage[AnalyzeStage["tuSendingData"] = 19] = "tuSendingData";
+    AnalyzeStage[AnalyzeStage["tuSendSuccess"] = 20] = "tuSendSuccess";
+})(AnalyzeStage || (AnalyzeStage = {}));
+export default function Analyze({ onAnalyzeFiles, onAnalyzeColorUsage, repoName, }) {
     const { exit } = useApp();
-    const [usageResult, setUsageResult] = React.useState(null);
-    const [isSendingData, setIsSendingData] = React.useState(false);
+    const [currentStage, setCurrentStage] = React.useState(AnalyzeStage.initial);
+    // Result states
+    const [componentUsageResult, setComponentUsageResult] = React.useState(new Map());
+    const [colorUsageResult, setColorUsageResult] = React.useState(new Map());
     const [errorList, setErrorList] = React.useState([]);
     const [errorFileLocation, setErrorFileLocation] = React.useState(null);
+    // Set up states
     const [credentials, setCredentials] = React.useState(null);
-    const [resourceURL, setResourceURL] = React.useState(null);
+    const [resourceURL, setResourceURL] = React.useState(getZeroheightURL());
     const [repo, setRepo] = React.useState(repoName);
-    const [promptRepo, setPromptRepo] = React.useState(repoName === undefined);
-    const [showContinue, setShowContinue] = React.useState(false);
+    // Text input states
+    const [continueToTokenUsage, setContinueToTokenUsage] = React.useState("");
+    const [runComponentUsage, setRunComponentUsage] = React.useState("");
+    const [runTokenUsage, setRunTokenUsage] = React.useState("");
     const [showMoreResults, setShowMoreResults] = React.useState("");
-    React.useEffect(() => {
-        (async () => {
-            try {
-                const { errorFile, usage } = await onAnalyzeFiles();
-                setErrorFileLocation(errorFile);
-                setUsageResult(usage);
-            }
-            catch (e) {
-                setErrorList((s) => [...s, e]);
+    // Component usage
+    function handleStartComponentUsage(shouldScan) {
+        if (shouldScan) {
+            setCurrentStage(AnalyzeStage.cuScanningFiles);
+            analyzeComponentUsage();
+        }
+        else {
+            setCurrentStage(AnalyzeStage.tuConfirmRun);
+        }
+    }
+    async function analyzeComponentUsage() {
+        try {
+            const { errorFile, usage } = await onAnalyzeFiles();
+            setErrorFileLocation(errorFile);
+            setComponentUsageResult(usage);
+            setCurrentStage(AnalyzeStage.cuScanComplete);
+        }
+        catch (e) {
+            setErrorList((s) => [...s, e]);
+        }
+    }
+    function handleShowMore(showMore) {
+        if (showMore) {
+            setCurrentStage(AnalyzeStage.cuShowMoreDetails);
+        }
+        else {
+            setCurrentStage(AnalyzeStage.cuSendDataCheck);
+        }
+    }
+    async function handleSendCuData(shouldSend) {
+        if (shouldSend) {
+            const creds = await fetchCredentials();
+            if (!creds) {
+                setCurrentStage(AnalyzeStage.cuAuthSetUp);
+                return;
             }
-            if (dryRun)
+            if (!repo) {
+                setCurrentStage(AnalyzeStage.cuRepoSelection);
                 return;
-            try {
-                const config = await readConfig();
-                if (config) {
-                    setCredentials({ token: config.token, client: config.client });
-                }
             }
-            catch (e) {
-                setErrorList((s) => [...s, "Failed to load credentials"]);
+            setCurrentStage(AnalyzeStage.cuSendingData);
+            sendCuData(componentUsageResult, repo, creds);
+        }
+        else {
+            setCurrentStage(AnalyzeStage.tuConfirmRun);
+            exit();
+        }
+    }
+    async function fetchCredentials() {
+        try {
+            const config = await readConfig();
+            if (config) {
+                setCredentials({ token: config.token, client: config.client });
+                return { token: config.token, client: config.client };
             }
-        })();
-    }, []);
-    async function sendData(result, repoName, credentials) {
-        setIsSendingData(true);
+            return null;
+        }
+        catch (e) {
+            setErrorList((s) => [...s, "Failed to load credentials"]);
+            return null;
+        }
+    }
+    async function sendCuData(result, repoName, credentials) {
         try {
-            await submitUsageData(result, repoName, credentials);
+            await submitComponentUsageData(result, repoName, credentials);
             const authDetailsResponse = await getAuthDetails(credentials);
             if (authDetailsResponse.status !== ResponseStatus.Success) {
                 throw new Error("Failed to get credentials");
@@ -60,6 +128,7 @@ export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }) {
                 ? `/project/${projectId}/adoption/`
                 : "/adoption/";
             setResourceURL(resourceURL);
+            setCurrentStage(AnalyzeStage.cuSendSuccess);
         }
         catch (e) {
             let errorMessage = "Failed to send data to zeroheight";
@@ -68,23 +137,6 @@ export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }) {
             }
             setErrorList((s) => [...s, errorMessage]);
         }
-        finally {
-            setIsSendingData(false);
-        }
-    }
-    async function handleContinue(shouldContinue) {
-        if (shouldContinue) {
-            if (!dryRun && credentials && usageResult && !repo) {
-                setPromptRepo(true);
-                setRepo("");
-            }
-            else if (!dryRun && credentials && usageResult && repo) {
-                sendData(usageResult, repo, credentials);
-            }
-        }
-        else {
-            exit();
-        }
     }
     function handleOnRepoNameSelected(repoName) {
         setRepo(repoName);
@@ -93,14 +145,13 @@ export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }) {
                 [process.cwd()]: repoName,
             },
         });
-        setPromptRepo(false);
-    }
-    function handleShowMore(showMore) {
-        if (showMore) {
-            setShowMoreResults("true");
+        if (currentStage === AnalyzeStage.cuRepoSelection) {
+            handleSendCuData(true);
+            setCurrentStage(AnalyzeStage.cuSendingData);
         }
         else {
-            setShowContinue(true);
+            handleSendTuData(true);
+            setCurrentStage(AnalyzeStage.tuSendingData);
         }
     }
     async function handleCheckCredentials(newClient, newToken) {
@@ -112,6 +163,86 @@ export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }) {
             return exit();
         }
     }
+    // Token usage
+    function startTokenUsageFlow(shouldContinue) {
+        if (shouldContinue) {
+            setCurrentStage(AnalyzeStage.tuConfirmRun);
+        }
+        else {
+            setCurrentStage(AnalyzeStage.finished);
+        }
+    }
+    function handleStartTokenUsage(shouldScan) {
+        if (shouldScan) {
+            setCurrentStage(AnalyzeStage.tuScanningFiles);
+            analyzeTokenUsage();
+        }
+        else {
+            setCurrentStage(AnalyzeStage.finished);
+        }
+    }
+    async function analyzeTokenUsage() {
+        try {
+            const { errorFile, usage } = await onAnalyzeColorUsage();
+            setErrorFileLocation(errorFile);
+            setColorUsageResult(usage);
+            setCurrentStage(AnalyzeStage.tuScanComplete);
+        }
+        catch (e) {
+            setErrorList((s) => [...s, e]);
+        }
+    }
+    function handleShowMoreTU(showMore) {
+        if (showMore) {
+            setCurrentStage(AnalyzeStage.tuShowMoreDetails);
+        }
+        else {
+            setCurrentStage(AnalyzeStage.tuSendDataCheck);
+        }
+    }
+    async function handleSendTuData(shouldSend) {
+        if (shouldSend) {
+            const creds = await fetchCredentials();
+            if (!creds) {
+                setCurrentStage(AnalyzeStage.tuAuthSetUp);
+                return;
+            }
+            if (!repo) {
+                setCurrentStage(AnalyzeStage.tuRepoSelection);
+                return;
+            }
+            setCurrentStage(AnalyzeStage.tuSendingData);
+            sendTuData(colorUsageResult, repo, creds);
+        }
+        else {
+            setCurrentStage(AnalyzeStage.finished);
+            exit();
+        }
+    }
+    async function sendTuData(result, repoName, credentials) {
+        try {
+            await submitTokenLiteralUsageData(result, repoName, credentials);
+            const authDetailsResponse = await getAuthDetails(credentials);
+            if (authDetailsResponse.status !== ResponseStatus.Success) {
+                throw new Error("Failed to get credentials");
+            }
+            const projectId = authDetailsResponse.data.project?.id;
+            const resourceURL = getZeroheightURL();
+            resourceURL.pathname = projectId
+                ? `/project/${projectId}/adoption/`
+                : "/adoption/";
+            setResourceURL(resourceURL);
+            setCurrentStage(AnalyzeStage.tuSendSuccess);
+        }
+        catch (e) {
+            let errorMessage = "Failed to send data to zeroheight";
+            if (e instanceof ApiError) {
+                errorMessage = e.message;
+            }
+            setErrorList((s) => [...s, errorMessage]);
+        }
+    }
+    // UI flow
     if (errorList.length > 0) {
         return (React.createElement(Box, { flexDirection: "column" },
             React.createElement(Text, { color: "red" }, "Error:"),
@@ -119,7 +250,69 @@ export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }) {
                 "- ",
                 e))))));
     }
-    if (!promptRepo && !credentials && !dryRun) {
+    if (currentStage === AnalyzeStage.initial) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, null,
+                "\uD83D\uDC4B Welcome to the ",
+                React.createElement(Text, { color: "#f63e7c" }, "zeroheight"),
+                " analyze tool"),
+            React.createElement(Newline, null),
+            React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, null,
+                    "\u2753 Would you like to us to scan the files in this project to understand how components are being used (React only)?",
+                    " ",
+                    React.createElement(Text, { dimColor: true }, "(Y/n)")),
+                React.createElement(ConfirmInput, { isChecked: true, value: runComponentUsage, onChange: setRunComponentUsage, onSubmit: handleStartComponentUsage }))));
+    }
+    if (currentStage === AnalyzeStage.cuScanningFiles) {
+        return (React.createElement(Text, null,
+            React.createElement(Text, { color: "green" },
+                React.createElement(Spinner, { type: "dots" })),
+            " Scanning files for component usage..."));
+    }
+    if (currentStage === AnalyzeStage.cuScanComplete) {
+        if (componentUsageResult?.size > 0) {
+            return (React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: "green" },
+                    calculateNumberOfComponents(componentUsageResult),
+                    " components found"),
+                errorFileLocation && (React.createElement(React.Fragment, null,
+                    React.createElement(Newline, null),
+                    React.createElement(Box, null,
+                        React.createElement(Text, { color: "red" }, "Error:"),
+                        React.createElement(Text, null,
+                            " ",
+                            "Some files could not be parsed. Errors can be found at",
+                            " ",
+                            React.createElement(Link, { url: errorFileLocation }, errorFileLocation))))),
+                React.createElement(Box, null,
+                    React.createElement(Text, null,
+                        "Show more details? ",
+                        React.createElement(Text, { dimColor: true }, "(y/N)")),
+                    React.createElement(ConfirmInput, { isChecked: false, value: showMoreResults, onChange: setShowMoreResults, onSubmit: handleShowMore }))));
+        }
+        else {
+            return (React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Box, null,
+                    React.createElement(Text, null, "No files found, try a different directory or change the file extensions you want to include.")),
+                React.createElement(Box, null,
+                    React.createElement(Text, null,
+                        "Continue to token usage analysis? ",
+                        React.createElement(Text, { dimColor: true }, "(Y/n)")),
+                    React.createElement(ConfirmInput, { isChecked: true, value: continueToTokenUsage, onChange: setContinueToTokenUsage, onSubmit: startTokenUsageFlow }))));
+        }
+    }
+    if (currentStage === AnalyzeStage.cuShowMoreDetails) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(UsageTable, { usage: componentUsageResult }),
+            React.createElement(Newline, null),
+            React.createElement(ContinuePrompt, { onContinue: handleSendCuData })));
+    }
+    if (currentStage === AnalyzeStage.cuSendDataCheck) {
+        return React.createElement(ContinuePrompt, { onContinue: handleSendCuData });
+    }
+    if (currentStage === AnalyzeStage.cuAuthSetUp ||
+        currentStage === AnalyzeStage.tuAuthSetUp) {
         return (React.createElement(NoCredentialsOnboarding, { configPath: configPath(), onCheckCredentials: handleCheckCredentials, onSaveCredentials: async (persist, newClient, newToken) => {
                 const newCredentials = { token: newToken, client: newClient };
                 setCredentials(newCredentials);
@@ -129,83 +322,108 @@ export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }) {
                         token: newToken,
                     });
                 }
+                if (currentStage === AnalyzeStage.cuAuthSetUp) {
+                    handleSendCuData(true);
+                    setCurrentStage(AnalyzeStage.cuSendingData);
+                }
+                else {
+                    handleSendTuData(true);
+                    setCurrentStage(AnalyzeStage.tuSendingData);
+                }
             } }));
     }
-    // Usage is being calculated
-    if (usageResult === null) {
-        return (React.createElement(Text, null,
-            React.createElement(Text, { color: "green" },
-                React.createElement(Spinner, { type: "dots" })),
-            " Scanning files..."));
-    }
-    // No usage data found
-    if (usageResult?.size === 0) {
-        return (React.createElement(Text, null, "No files found, try a different directory or change the file extensions you want to include"));
+    if (currentStage === AnalyzeStage.cuRepoSelection ||
+        currentStage === AnalyzeStage.tuRepoSelection) {
+        return (React.createElement(RepoNamePrompt, { credentials: credentials, onRepoNameSelected: handleOnRepoNameSelected }));
     }
-    // Posting usage data to zeroheight
-    if (isSendingData) {
+    if (currentStage === AnalyzeStage.cuSendingData ||
+        currentStage === AnalyzeStage.tuSendingData) {
         return (React.createElement(Text, null,
             React.createElement(Text, { color: "green" },
                 React.createElement(Spinner, { type: "dots" })),
-            " Sending usage data to zeroheight..."));
+            " ",
+            "Sending usage data to ",
+            React.createElement(Text, { color: "#f63e7c" }, "zeroheight"),
+            "..."));
     }
-    // Completed, usage data is ready to view on zeroheight
-    if (resourceURL) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Newline, null),
+    if (currentStage === AnalyzeStage.cuSendSuccess) {
+        return (React.createElement(Box, { flexDirection: "column" },
             React.createElement(Text, null,
-                React.createElement(Text, { color: "green" }, "Successful:"),
+                React.createElement(Text, { color: "green" }, "Successfully sent:"),
                 " View your",
                 " ",
-                React.createElement(Link, { url: resourceURL.toString() }, "usage data on zeroheight"))));
+                React.createElement(Link, { url: resourceURL.toString() },
+                    React.createElement(Text, { underline: true, color: "#f63e7c" }, "usage data on zeroheight"))),
+            React.createElement(Newline, null),
+            React.createElement(Box, null,
+                React.createElement(Text, null,
+                    "\u2753 Would you like to us to scan the files in this project to understand how colors are being used? ",
+                    React.createElement(Text, { dimColor: true }, "(Y/n)")),
+                React.createElement(ConfirmInput, { isChecked: true, value: runTokenUsage, onChange: setRunTokenUsage, onSubmit: handleStartTokenUsage }))));
     }
-    if (usageResult &&
-        !promptRepo &&
-        !(showMoreResults === "true" || showContinue)) {
+    if (currentStage === AnalyzeStage.tuConfirmRun) {
         return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Box, null,
+                React.createElement(Text, null,
+                    "\u2753 Would you like to us to scan the files in this project to understand how colors are being used? ",
+                    React.createElement(Text, { dimColor: true }, "(Y/n)")),
+                React.createElement(ConfirmInput, { isChecked: true, value: runTokenUsage, onChange: setRunTokenUsage, onSubmit: handleStartTokenUsage }))));
+    }
+    if (currentStage === AnalyzeStage.tuScanningFiles) {
+        return (React.createElement(Text, null,
             React.createElement(Text, { color: "green" },
-                calculateNumberOfComponents(usageResult),
-                " components found"),
-            errorFileLocation && (React.createElement(React.Fragment, null,
-                React.createElement(Newline, null),
+                React.createElement(Spinner, { type: "dots" })),
+            " Scanning files for color usage..."));
+    }
+    if (currentStage === AnalyzeStage.tuScanComplete) {
+        if (colorUsageResult?.size > 0) {
+            return (React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, { color: "green" },
+                    calculateNumberOfColors(colorUsageResult),
+                    " instatances of raw color usage found"),
+                errorFileLocation && (React.createElement(React.Fragment, null,
+                    React.createElement(Newline, null),
+                    React.createElement(Box, null,
+                        React.createElement(Text, { color: "red" }, "Error:"),
+                        React.createElement(Text, null,
+                            " ",
+                            "Some files could not be parsed. Errors can be found at",
+                            " ",
+                            React.createElement(Link, { url: errorFileLocation }, errorFileLocation))))),
                 React.createElement(Box, null,
-                    React.createElement(Text, { color: "red" }, "Error:"),
                     React.createElement(Text, null,
-                        " ",
-                        "Some files could not be parsed. Errors can be found at",
-                        " ",
-                        React.createElement(Link, { url: errorFileLocation }, errorFileLocation))))),
-            React.createElement(Box, null,
-                React.createElement(Text, null,
-                    "Show more details? ",
-                    React.createElement(Text, { dimColor: true }, "(y/N)")),
-                React.createElement(ConfirmInput, { isChecked: false, value: showMoreResults, onChange: setShowMoreResults, onSubmit: handleShowMore }))));
+                        "Show more details? ",
+                        React.createElement(Text, { dimColor: true }, "(y/N)")),
+                    React.createElement(ConfirmInput, { isChecked: false, value: showMoreResults, onChange: setShowMoreResults, onSubmit: handleShowMoreTU }))));
+        }
+        else {
+            return (React.createElement(Box, { flexDirection: "column" },
+                React.createElement(Text, null, "No files found, try a different directory or change the file extensions you want to include.")));
+        }
     }
-    if (usageResult && !promptRepo && showMoreResults === "true") {
+    if (currentStage === AnalyzeStage.tuShowMoreDetails) {
         return (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(UsageTable, { usage: usageResult }),
-            dryRun && (React.createElement(React.Fragment, null,
-                React.createElement(Newline, null),
-                React.createElement(Text, null,
-                    "Nothing sent to zeroheight, if you want to track component usage data then remove the ",
-                    React.createElement(Text, { italic: true }, "--dry-run"),
-                    " option."),
-                React.createElement(Newline, null))),
-            !dryRun && React.createElement(ContinuePrompt, { onContinue: handleContinue })));
+            React.createElement(ColorUsageTable, { usage: colorUsageResult }),
+            React.createElement(Newline, null),
+            React.createElement(ContinuePrompt, { onContinue: handleSendTuData })));
     }
-    if (usageResult && !promptRepo && showContinue) {
+    if (currentStage === AnalyzeStage.tuSendDataCheck) {
+        return React.createElement(ContinuePrompt, { onContinue: handleSendTuData });
+    }
+    if (currentStage === AnalyzeStage.tuSendSuccess) {
         return (React.createElement(Box, { flexDirection: "column" },
-            dryRun && (React.createElement(React.Fragment, null,
-                React.createElement(Newline, null),
-                React.createElement(Text, null,
-                    "Nothing sent to zeroheight, if you want to track component usage data then remove the ",
-                    React.createElement(Text, { italic: true }, "--dry-run"),
-                    " option."),
-                React.createElement(Newline, null))),
-            !dryRun && React.createElement(ContinuePrompt, { onContinue: handleContinue })));
+            React.createElement(Text, null,
+                React.createElement(Text, { color: "green" }, "Successfully sent:"),
+                " View your",
+                " ",
+                React.createElement(Link, { url: resourceURL.toString() },
+                    React.createElement(Text, { underline: true, color: "#f63e7c" }, "usage data on zeroheight"))),
+            React.createElement(Newline, null),
+            React.createElement(Text, null, "\uD83D\uDC4B See you next time!")));
     }
-    if (promptRepo) {
-        return (React.createElement(RepoNamePrompt, { credentials: credentials, onRepoNameSelected: handleOnRepoNameSelected }));
+    if (currentStage === AnalyzeStage.finished) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, null, "\uD83D\uDC4B See you next time!")));
     }
-    return React.createElement(Text, null, "Done");
+    return React.createElement(Text, null, "Analzye complete");
 }

package/dist/components/analyze/non-interactive-analyze.d.ts

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

package/dist/components/analyze/non-interactive-analyze.js

@@ -2,18 +2,19 @@ import React from "react";
 import { Box, Newline, Text } from "ink";
 import Spinner from "ink-spinner";
 import Link from "ink-link";
-import { calculateNumberOfComponents } from "../../commands/analyze.utils.js";
+import { calculateNumberOfColors, calculateNumberOfComponents, } from "../../commands/analyze.utils.js";
 import { readConfig } from "../../common/config.js";
-import { submitUsageData } from "../../common/api.js";
+import { submitComponentUsageData, submitTokenLiteralUsageData, } from "../../common/api.js";
 import { ApiError } from "../../common/errors.js";
-export default function NonInteractiveAnalyze({ repoName, onAnalyzeFiles, }) {
+export default function NonInteractiveAnalyze({ repoName, onAnalyzeFiles, onAnalyzeColorUsage, shouldAnalyzeComponentUsage, shouldAnalyzeTokenUsage, }) {
     const [isSendingData, setIsSendingData] = React.useState(false);
     const [isAnalyzingFiles, setIsAnalyzingFiles] = React.useState(false);
     const [isFetchingCredentials, setIsFetchingCredentials] = React.useState(false);
     const [errorFileLocation, setErrorFileLocation] = React.useState(null);
     const [errorList, setErrorList] = React.useState([]);
     const [credentials, setCredentials] = React.useState(null);
-    const [usage, setUsage] = React.useState(null);
+    const [componentUsage, setComponentUsage] = React.useState(null);
+    const [colorUsage, setColorUsage] = React.useState(null);
     async function loadCredentials() {
         setIsFetchingCredentials(true);
         try {
@@ -31,13 +32,13 @@ export default function NonInteractiveAnalyze({ repoName, onAnalyzeFiles, }) {
         }
         return null;
     }
-    async function sendData(result, repoName, credentials) {
+    async function sendComponentUsageData(result, repoName, credentials) {
         setIsSendingData(true);
         try {
-            await submitUsageData(result, repoName, credentials);
+            await submitComponentUsageData(result, repoName, credentials);
         }
         catch (e) {
-            let errorMessage = "Failed to send data to zeroheight";
+            let errorMessage = "Failed to send component usage data to zeroheight";
             if (e instanceof ApiError) {
                 errorMessage = e.message;
             }
@@ -47,10 +48,36 @@ export default function NonInteractiveAnalyze({ repoName, onAnalyzeFiles, }) {
             setIsSendingData(false);
         }
     }
-    async function anaylzeUsage() {
+    async function sendTokenUsageData(result, repoName, credentials) {
+        setIsSendingData(true);
+        try {
+            await submitTokenLiteralUsageData(result, repoName, credentials);
+        }
+        catch (e) {
+            let errorMessage = "Failed to send color usage data to zeroheight";
+            if (e instanceof ApiError) {
+                errorMessage = e.message;
+            }
+            setErrorList((s) => [...s, errorMessage]);
+        }
+        finally {
+            setIsSendingData(false);
+        }
+    }
+    async function analyzeComponentUsage() {
         setIsAnalyzingFiles(true);
         const { errorFile, usage } = await onAnalyzeFiles();
-        setUsage(usage);
+        setComponentUsage(usage);
+        if (errorFile) {
+            setErrorFileLocation(errorFile);
+        }
+        setIsAnalyzingFiles(false);
+        return usage;
+    }
+    async function analyzeTokenUsage() {
+        setIsAnalyzingFiles(true);
+        const { errorFile, usage } = await onAnalyzeColorUsage();
+        setColorUsage(usage);
         if (errorFile) {
             setErrorFileLocation(errorFile);
         }
@@ -62,18 +89,25 @@ export default function NonInteractiveAnalyze({ repoName, onAnalyzeFiles, }) {
             const credentials = await loadCredentials();
             if (!credentials)
                 return;
-            const usage = await anaylzeUsage();
             if (!repoName)
                 return;
-            await sendData(usage, repoName, credentials);
+            if (shouldAnalyzeComponentUsage) {
+                const componentUsageMap = await analyzeComponentUsage();
+                await sendComponentUsageData(componentUsageMap, repoName, credentials);
+            }
+            if (shouldAnalyzeTokenUsage) {
+                const colorUsageMap = await analyzeTokenUsage();
+                await sendTokenUsageData(colorUsageMap, repoName, credentials);
+            }
         })();
     }, []);
     if (isAnalyzingFiles || isFetchingCredentials || isSendingData) {
         return (React.createElement(Text, null,
             React.createElement(Spinner, { type: "dots" }),
-            isAnalyzingFiles && React.createElement(Text, null, "Analyzing components"),
+            " ",
+            isAnalyzingFiles && React.createElement(Text, null, "Analyzing files"),
             isFetchingCredentials && React.createElement(Text, null, "Loading credentials"),
-            isSendingData && React.createElement(Text, null, "Sending data to zerohegiht")));
+            isSendingData && React.createElement(Text, null, "Sending data to zeroheight")));
     }
     if (errorList.length > 0) {
         return (React.createElement(Box, { flexDirection: "column" },
@@ -115,12 +149,16 @@ export default function NonInteractiveAnalyze({ repoName, onAnalyzeFiles, }) {
             " ",
             React.createElement(Text, { italic: true }, "--interactive false")));
     }
-    if (!usage) {
+    if (!componentUsage && !colorUsage) {
         return React.createElement(Text, null, "No usage could be found.");
     }
-    return (React.createElement(React.Fragment, null, usage && (React.createElement(Text, { color: "green" },
-        calculateNumberOfComponents(usage),
-        " components found and sent to",
-        " ",
-        React.createElement(Text, { color: "#f63e7c" }, "zeroheight")))));
+    return (React.createElement(React.Fragment, null,
+        componentUsage && (React.createElement(Text, { color: "green" },
+            calculateNumberOfComponents(componentUsage),
+            " components found and sent to ",
+            React.createElement(Text, { color: "#f63e7c" }, "zeroheight"))),
+        colorUsage && (React.createElement(Text, { color: "green" },
+            calculateNumberOfColors(colorUsage),
+            " usages of raw colors found and sent to ",
+            React.createElement(Text, { color: "#f63e7c" }, "zeroheight")))));
 }

package/dist/components/auth/no-credentials-onboarding.js

@@ -22,7 +22,9 @@ export default function NoCredentialsOnboarding({ onCheckCredentials, onSaveCred
         React.createElement(Text, null,
             "If you need a new auth token, generate them from the",
             " ",
-            React.createElement(Link, { url: "https://zeroheight.com/settings/team/developers" }, "Developer Settings")),
+            React.createElement(Link, { url: "https://zeroheight.com/settings/team/developers" },
+                React.createElement(Text, { underline: true, color: "#f63e7c" }, "Developer Settings"))),
+        React.createElement(Newline, null),
         field === "client" && (React.createElement(Box, null,
             React.createElement(Text, null, "Client ID: "),
             React.createElement(TextInput, { onChange: setClient, value: client, onSubmit: (v) => {

package/dist/components/color-usage-table.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { RawColorUsageMap } from "../commands/analyze.js";
+interface ColorUsageTableProps {
+    usage: RawColorUsageMap;
+}
+export default function ColorUsageTable({ usage }: ColorUsageTableProps): React.JSX.Element;
+export {};

package/dist/components/color-usage-table.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { Box, Text } from "ink";
+const colorTypeNameMap = {
+    hex: "HEX",
+    rgb: "RGB",
+    hsla: "HSL",
+    oklab: "Oklab",
+    hwb: "HWB",
+    lab: "LAB",
+    lch: "LCH",
+    colorSpace: "Color space",
+    totalCount: "Total usage",
+};
+export default function ColorUsageTable({ usage }) {
+    const rows = Array.from(usage.entries());
+    return (React.createElement(Box, { flexDirection: "column" }, rows.map(([filepath, rawColorUsage]) => {
+        const rowValues = Object.entries(rawColorUsage);
+        return (React.createElement(Box, { key: filepath, flexDirection: "column" },
+            React.createElement(Text, { color: "green" }, filepath),
+            React.createElement(Box, { flexDirection: "column", marginLeft: 2 },
+                React.createElement(Box, { flexDirection: "column", marginLeft: 2 }, rowValues.map(([type, values]) => {
+                    if (type === "totalCount")
+                        return null;
+                    const count = values.length;
+                    if (count === 0)
+                        return null;
+                    const name = colorTypeNameMap[type];
+                    return (React.createElement(Box, { gap: 2, key: `${type}-${count}` },
+                        React.createElement(Text, { bold: true },
+                            name,
+                            ": "),
+                        React.createElement(Text, null, count)));
+                })),
+                React.createElement(Text, { bold: true },
+                    "Total usage: ",
+                    rawColorUsage.totalCount))));
+    })));
+}

package/dist/components/latest-version-info.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+interface LatestVersionInfoProps {
+    latestVersion: string;
+}
+/**
+ * Rich help banner with info about the latest version
+ */
+export default function LatestVersionInfo({ latestVersion, }: LatestVersionInfoProps): React.JSX.Element;
+export {};

package/dist/components/latest-version-info.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Box, Text } from "ink";
+import Link from "ink-link";
+import { CURRENT_VERSION } from "../cli.js";
+/**
+ * Rich help banner with info about the latest version
+ */
+export default function LatestVersionInfo({ latestVersion, }) {
+    const isMajorVersionOut = Number(CURRENT_VERSION.split(".")[0]) < Number(latestVersion.split(".")[0]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Box, { borderStyle: "double", paddingLeft: 1, paddingRight: 1, marginBottom: 1, flexDirection: "column" },
+            React.createElement(Box, { justifyContent: "center", marginBottom: 1 },
+                React.createElement(Text, null, "\uD83D\uDC4B It seems you're not using the latest version of this package")),
+            React.createElement(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1 },
+                React.createElement(Box, null,
+                    React.createElement(Text, { color: isMajorVersionOut ? "redBright" : "blueBright", bold: true }, CURRENT_VERSION),
+                    React.createElement(Text, { bold: true }, ` -> `),
+                    React.createElement(Text, { color: "green", bold: true }, latestVersion)),
+                React.createElement(Box, null,
+                    React.createElement(Text, null, "Update using: "),
+                    React.createElement(Text, { bold: true }, "npm i @zeroheight/adoption-cli"))),
+            React.createElement(Box, { flexDirection: "column", alignItems: "center" },
+                React.createElement(Text, null,
+                    "For more information on the latest version, check",
+                    " ",
+                    React.createElement(Link, { url: "https://www.npmjs.com/package/@zeroheight/adoption-cli" }, "here"))))));
+}

package/dist/components/ui/continue-prompt.js

@@ -5,7 +5,10 @@ export default function ContinuePrompt({ onContinue }) {
     const [shouldContinueText, setShouldContinueText] = React.useState("");
     return (React.createElement(Box, null,
         React.createElement(Text, null,
-            "Continue? ",
+            "Send this data to ",
+            React.createElement(Text, { color: "#f63e7c" }, "zeroheight"),
+            "?",
+            " ",
             React.createElement(Text, { dimColor: true }, "(Y/n):")),
         React.createElement(ConfirmInput, { isChecked: true, value: shouldContinueText, onChange: setShouldContinueText, onSubmit: (answer) => {
                 onContinue(answer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeroheight/adoption-cli",
-  "version": "2.4.3",
+  "version": "3.0.1",
   "license": "ISC",
   "main": "dist/cli.js",
   "bin": {