@zeroheight/adoption-cli 0.2.5 → 0.2.6

package/README.md

@@ -9,7 +9,9 @@ npm i @zeroheight/adoption-cli
 ```
 
 ## Usage
+
 In the repository in which you wish to analyze the component usage, run the following command:
+
 ```
 zh-adoption analyze
 ```
@@ -21,6 +23,7 @@ zh-adoption auth
 ```
 
 More info on the commands can be seen by running
+
 ```
 zh-adoption --help
-```
+```

package/dist/ast/analyze.d.ts

@@ -0,0 +1,14 @@
+import type { Node } from "acorn";
+export type VisitorState = {
+    components: Map<string, number>;
+    imports: Map<string, {
+        package: string;
+        name: string;
+    }>;
+};
+export type RawUsage = {
+    name: string;
+    count: number;
+    package: string;
+};
+export declare function analyze(ast: Node): RawUsage[];

package/dist/ast/analyze.js

@@ -0,0 +1,91 @@
+import * as walk from "acorn-walk";
+function transformVisitorStateToRawUsage(visitorState) {
+    const transformedUsageMap = new Map();
+    for (const [name, count] of visitorState.components) {
+        const importInfo = visitorState.imports.get(name);
+        const actualName = importInfo?.name ?? name;
+        const packageName = importInfo?.package ?? "";
+        const key = `package:${packageName} name:${actualName}`;
+        const currentValue = transformedUsageMap.get(key) ?? {
+            name: actualName,
+            count: 0,
+            package: importInfo?.package ?? "",
+        };
+        transformedUsageMap.set(key, {
+            ...currentValue,
+            count: currentValue.count + count,
+        });
+    }
+    return Array.from(transformedUsageMap.values());
+}
+export function analyze(ast) {
+    const visitorState = {
+        components: new Map(),
+        imports: new Map(),
+    };
+    const visitors = {
+        JSXElement(node, state, _nodePath) {
+            const el = node.openingElement;
+            const elName = el.name.name;
+            if (!elName)
+                return;
+            // Ignore html tags e.g. div, h1, span
+            if (elName[0] === elName[0]?.toLocaleLowerCase())
+                return;
+            state.components.set(elName, (state.components.get(elName) ?? 0) + 1);
+        },
+        ImportDeclaration(node, state, _nodePath) {
+            const packageName = node.source.value;
+            node.specifiers.forEach((specifier) => {
+                // not handling namespace imports as we can't determine the actual name
+                // e.g. import * as MyIconLibrary from 'my-icon-library'
+                if (specifier.type === "ImportNamespaceSpecifier") {
+                    return;
+                }
+                let name = specifier.local.name;
+                if (specifier.type === "ImportDefaultSpecifier") {
+                    // handles the following cases:
+                    // import Icon from 'my-icon-library'
+                    name = specifier.local.name;
+                }
+                else if (specifier.type === "ImportSpecifier") {
+                    // handles the following cases:
+                    // import { Icon } from 'my-icon-library'
+                    // import { Icon as MyIcon } from 'my-icon-library'
+                    name =
+                        specifier.imported.type === "Literal"
+                            ? specifier.imported.value
+                            : specifier.imported.name;
+                }
+                state.imports.set(specifier.local.name, {
+                    package: packageName,
+                    name,
+                });
+            });
+        },
+    };
+    const base = {
+        ...walk.base,
+        TSInterfaceDeclaration() { },
+        TSModuleDeclaration() { },
+        TSAsExpression() { },
+        TSDeclareFunction() { },
+        TSTypeAliasDeclaration() { },
+        TSNonNullExpression() { },
+        TSEnumDeclaration() { },
+        TSParameterProperty() { },
+        TSImportEqualsDeclaration() { },
+        TSInstantiationExpression() { },
+        TSDeclareMethod() { },
+    };
+    try {
+        walk.ancestor(ast, visitors, base, visitorState);
+    }
+    catch (e) {
+        // We don't want to log the error to the users - maybe could add some actually logging in the future
+        // console.log("error", e);
+    }
+    finally {
+        return transformVisitorStateToRawUsage(visitorState);
+    }
+}

package/dist/ast/parser.d.ts

@@ -0,0 +1,11 @@
+import * as acorn from "acorn";
+/**
+ * Parse code and return AST
+ *
+ * This extends the acorn parser with support for TypeScript and JSX
+ *
+ * @param code The string containing JS/TS
+ * @param version a version of ECMA Script to use, defaults to latest
+ * @returns Parsed AST
+ */
+export declare function parse(code: string, version?: acorn.ecmaVersion): acorn.Program;

package/dist/ast/parser.js

@@ -0,0 +1,23 @@
+import * as acorn from "acorn";
+import { tsPlugin } from "acorn-typescript";
+import * as walk from "acorn-walk";
+import { extend } from "acorn-jsx-walk";
+/**
+ * Parse code and return AST
+ *
+ * This extends the acorn parser with support for TypeScript and JSX
+ *
+ * @param code The string containing JS/TS
+ * @param version a version of ECMA Script to use, defaults to latest
+ * @returns Parsed AST
+ */
+export function parse(code, version = "latest") {
+    const typescriptPlugin = tsPlugin();
+    extend(walk.base);
+    const JSXParser = acorn.Parser.extend(typescriptPlugin);
+    return JSXParser.parse(code, {
+        ecmaVersion: version,
+        sourceType: "module",
+        locations: true,
+    });
+}

package/dist/cli.d.ts

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

package/dist/cli.js

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+import * as React from "react";
+import { Command } from "commander";
+import { render } from "ink-render-string";
+import { analyzeCommand } from "./commands/analyze.js";
+import { authCommand } from "./commands/auth.js";
+import HelpInfo from "./components/help-info.js";
+const program = new Command();
+const { output, cleanup } = render(React.createElement(HelpInfo, null));
+program
+    .name("zh-adoption")
+    .description("CLI for measuring design system usage usage in your products")
+    .version("0.1.0")
+    .addHelpText("before", output)
+    .addCommand(analyzeCommand())
+    .addCommand(authCommand());
+cleanup();
+// Only start parsing if run as CLI, don't start parsing during testing
+if (process.env["NODE_ENV"] !== "test") {
+    program.parse();
+}
+export default program;

package/dist/commands/analyze.d.ts

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

package/dist/commands/analyze.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { render } from "ink";
+import { Command, Option } from "commander";
+import Analyze from "../components/analyze/analyze.js";
+import { analyzeFiles } from "./analyze.utils.js";
+export async function analyzeAction(options, renderOptions) {
+    render(React.createElement(Analyze, { onAnalyzeFiles: () => analyzeFiles(options.extensions, options.ignore), dryRun: options.dryRun, repoName: options.repoName }), renderOptions);
+}
+export function analyzeCommand() {
+    const command = new Command();
+    return command
+        .command("analyze")
+        .description("Analyze your codebase to determine component usage metrics")
+        .addOption(new Option("-e, --extensions [ext]", "file extensions to include when searching for components").default("**/*.{js,jsx,ts,tsx}", "glob pattern to determine file extensions"))
+        .addOption(new Option("-i, --ignore [ext]", "files to ignore when searching for components").default("**/*.{test,spec}.*", "glob pattern to determine ignored files"))
+        .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"))
+        .action(async (options) => {
+        try {
+            await analyzeAction(options);
+        }
+        catch (e) {
+            console.error(e);
+            process.exitCode = 1;
+        }
+    });
+}

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

@@ -0,0 +1,20 @@
+import { RawUsageMap } from "./analyze.js";
+export interface ComponentUsageRecord {
+    name: string;
+    files: string[];
+    count: number;
+    package: string;
+}
+/**
+ * Get a list of files matching extensions, skips hidden files and node_modules
+ * @param base starting directory
+ * @param extensions glob syntax of files to look for, e.g. **\/*.{js,jsx,ts,tsx}
+ * @param ignorePattern glob syntax of files to ignore, e.g. **\/*.{test,spec}.*
+ * @param gitIgnore contents of .gitignore file
+ * @returns list of file paths
+ */
+export declare function findFiles(base: string, extensions: string, ignorePattern: string): Promise<string[]>;
+export declare function analyzeFiles(extensions: string, ignorePattern: string): Promise<{
+    errors: string[];
+    usage: RawUsageMap;
+}>;

package/dist/commands/analyze.utils.js

@@ -0,0 +1,71 @@
+import { stat, readFile } from "fs/promises";
+import * as fs from "fs";
+import path from "path";
+import { Glob } from "glob";
+import ignore from "ignore";
+import { parse } from "../ast/parser.js";
+import { analyze } from "../ast/analyze.js";
+/**
+ * Get a list of files matching extensions, skips hidden files and node_modules
+ * @param base starting directory
+ * @param extensions glob syntax of files to look for, e.g. **\/*.{js,jsx,ts,tsx}
+ * @param ignorePattern glob syntax of files to ignore, e.g. **\/*.{test,spec}.*
+ * @param gitIgnore contents of .gitignore file
+ * @returns list of file paths
+ */
+export async function findFiles(base, extensions, ignorePattern) {
+    const gitIgnore = await getGitIgnore(base);
+    // typescript complains about the ignore() function having
+    // no call signature. Could not find a way to fix this.
+    // @ts-ignore
+    const ig = ignore()
+        // skip hidden files and directories
+        .add("/**/.*")
+        .add("/**/.*/")
+        // skip node_modules
+        .add("node_modules/")
+        // add gitignore rules
+        .add(gitIgnore);
+    const matchingFiles = [];
+    const g = new Glob(extensions, { cwd: base, ignore: ignorePattern, fs });
+    for await (const file of g) {
+        const fullFilepath = path.join(base, file);
+        const meta = await stat(fullFilepath);
+        if (!meta.isDirectory() && !ig.ignores(file)) {
+            matchingFiles.push(fullFilepath);
+        }
+    }
+    return matchingFiles;
+}
+async function getGitIgnore(base) {
+    const gitIgnorePath = path.join(base, ".gitignore");
+    try {
+        return await readFile(gitIgnorePath, "utf-8");
+    }
+    catch (e) {
+        return "";
+    }
+}
+export async function analyzeFiles(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 ast = parse(fileContents);
+            const usage = analyze(ast);
+            if (usage.length > 0) {
+                const relativePath = file.slice(process.cwd().length);
+                usageMap.set(relativePath, usage);
+            }
+        }
+        catch (e) {
+            parseErrors.push(`Can't parse file ${file}`);
+        }
+    }
+    return { errors: parseErrors, usage: usageMap };
+}

package/dist/commands/auth.d.ts

@@ -0,0 +1,9 @@
+import { Command } from "commander";
+import { RenderOptions } from "ink";
+interface AuthOptions {
+    client?: string;
+    token?: string;
+}
+export declare function authAction(options: AuthOptions, renderOptions?: RenderOptions): Promise<void>;
+export declare function authCommand(): Command;
+export {};

package/dist/commands/auth.js

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Command } from "commander";
+import { Box, Text, render } from "ink";
+import CredentialsAlreadyExists from "../components/auth/credentials-already-exists.js";
+import CredentialsPreview from "../components/auth/credentials-preview.js";
+import NoCredentialsOnboarding from "../components/auth/no-credentials-onboarding.js";
+import { configPath, readConfig, writeConfig } from "../common/config.js";
+export async function authAction(options, renderOptions) {
+    const existingConfig = await readConfig();
+    if (existingConfig) {
+        const { waitUntilExit } = render(React.createElement(CredentialsAlreadyExists, { existingConfig: existingConfig, token: options.token, client: options.client, configPath: configPath(), onOverwriteCredentials: async () => {
+                const newClient = options.client ?? existingConfig.client;
+                const newToken = options.token ?? existingConfig.token;
+                await writeConfig({
+                    client: newClient,
+                    token: newToken,
+                });
+                render(React.createElement(Box, { flexDirection: "column" },
+                    React.createElement(Text, { color: "green" }, "Updated credentials"),
+                    React.createElement(CredentialsPreview, { client: newClient, token: newToken })));
+            } }), renderOptions);
+        await waitUntilExit();
+    }
+    else {
+        const { waitUntilExit, rerender } = render(React.createElement(NoCredentialsOnboarding, { configPath: configPath(), onSaveCredentials: async (persist, newClient, newToken) => {
+                if (persist) {
+                    await writeConfig({
+                        client: newClient,
+                        token: newToken,
+                    });
+                    rerender(React.createElement(Box, { flexDirection: "column" },
+                        React.createElement(Text, { color: "green" }, "Updated credentials"),
+                        React.createElement(CredentialsPreview, { client: newClient, token: newToken })));
+                }
+            } }));
+        await waitUntilExit();
+    }
+    render(React.createElement(Text, { bold: true }, "Done"));
+}
+export function authCommand() {
+    const command = new Command();
+    return command
+        .command("auth")
+        .description("Authenticate with zeroheight")
+        .addHelpText("before", "Set credentials for performing actions with zeroheight. Credentials will default to ZEROHEIGHT_CLIENT_ID and ZEROHEIGHT_ACCESS_TOKEN environment variables if not supplied")
+        .option("-c, --client <client_id>", "zeroheight Client ID", process.env["ZEROHEIGHT_CLIENT_ID"])
+        .option("-t, --token <access_token>", "zeroheight Access Token", process.env["ZEROHEIGHT_ACCESS_TOKEN"])
+        .action(async (options) => {
+        try {
+            await authAction(options);
+        }
+        catch (e) {
+            console.error(e);
+            process.exitCode = 1;
+        }
+    });
+}

package/dist/common/api.d.ts

@@ -0,0 +1,5 @@
+import { RawUsageMap } from "../commands/analyze.js";
+import { Credentials } from "./config.js";
+export declare function getZeroheightURL(): URL;
+export declare function submitUsageData(usage: RawUsageMap, repoName: string, credentials: Credentials): Promise<any>;
+export declare function getExistingRepoNames(credentials: Credentials): Promise<any>;

package/dist/common/api.js

@@ -0,0 +1,67 @@
+export function getZeroheightURL() {
+    if (process.env["NODE_ENV"] === "dev") {
+        return new URL("https://zeroheight.dev");
+    }
+    else {
+        return new URL("https://zeroheight.com");
+    }
+}
+export async function submitUsageData(usage, repoName, credentials) {
+    return post("/open_api/v1/component_usages", {
+        repo_name: repoName,
+        usage: transformUsageByName(usage),
+    }, credentials);
+}
+export function getExistingRepoNames(credentials) {
+    return get("/open_api/v1/component_usages/repo_names", credentials);
+}
+async function get(path, credentials) {
+    return request(path, credentials, {
+        method: "GET",
+    });
+}
+async function post(path, body, credentials) {
+    return request(path, credentials, {
+        method: "POST",
+        body: JSON.stringify(body),
+    });
+}
+async function request(path, credentials, init) {
+    const url = getZeroheightURL();
+    url.pathname = path;
+    if (process.env["NODE_ENV"] === "dev") {
+        process.env["NODE_TLS_REJECT_UNAUTHORIZED"] = "0";
+    }
+    const response = await fetch(url, {
+        ...init,
+        headers: {
+            "X-API-CLIENT": credentials.client,
+            "X-API-KEY": credentials.token,
+            "Content-Type": "application/json",
+        },
+    });
+    if (response.status === 401) {
+        throw new Error("Unauthorized");
+    }
+    return await response.json();
+}
+/**
+ * Transform usage map grouped by file into usage map grouped by component
+ */
+function transformUsageByName(usage) {
+    const transformedUsageMap = new Map();
+    for (const [file, rawUsage] of usage) {
+        for (const { count, package: packageName, name } of rawUsage) {
+            const key = `package:${packageName} name:${name}`;
+            const currentValue = transformedUsageMap.get(key);
+            const newFileList = [...(currentValue?.files ?? []), file]; // Add file to list
+            transformedUsageMap.set(key, {
+                name: currentValue?.name ?? name,
+                files: Array.from(new Set(newFileList)), // Ensure unique file paths
+                count: count + (currentValue?.count ?? 0),
+                package: packageName,
+            });
+        }
+    }
+    return Array.from(transformedUsageMap.values());
+}

package/dist/common/config.d.ts

@@ -0,0 +1,14 @@
+export interface Credentials {
+    token: string;
+    client: string;
+}
+export interface Config extends Credentials {
+    repoNames: Record<string, string>;
+}
+export declare function configPath(): string;
+/**
+ * Read the credentials from the user's home directory
+ * @returns access token and client id or null
+ */
+export declare function readConfig(): Promise<Config | null>;
+export declare function writeConfig(newValues: Partial<Config>): Promise<void>;

package/dist/common/config.js

@@ -0,0 +1,41 @@
+import { readFile, writeFile } from "fs/promises";
+import { homedir } from "os";
+import path from "path";
+export function configPath() {
+    return path.join(homedir(), ".zeroheight-config.json");
+}
+/**
+ * Read the credentials from the user's home directory
+ * @returns access token and client id or null
+ */
+export async function readConfig() {
+    try {
+        const rawData = await readFile(configPath(), "utf8");
+        const { token, client, repoNames = {} } = JSON.parse(rawData);
+        return { token, client, repoNames };
+    }
+    catch (e) {
+        const client = process.env["ZEROHEIGHT_CLIENT_ID"];
+        const token = process.env["ZEROHEIGHT_ACCESS_TOKEN"];
+        if (client && token) {
+            return { token, client, repoNames: {} };
+        }
+        return null;
+    }
+}
+export async function writeConfig(newValues) {
+    const config = (await readConfig()) ??
+        {
+            repoNames: {},
+        };
+    // TODO: if we have a more complex config, we should use a deep merge here
+    const payload = JSON.stringify({
+        ...config,
+        ...newValues,
+        repoNames: {
+            ...config.repoNames,
+            ...(newValues.repoNames ?? {}),
+        },
+    });
+    return writeFile(configPath(), payload);
+}

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { RawUsageMap } from "../../commands/analyze.js";
+export interface AnalyzeProps {
+    onAnalyzeFiles: () => Promise<{
+        errors: string[];
+        usage: RawUsageMap;
+    }>;
+    dryRun: boolean;
+    repoName?: string;
+}
+export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }: AnalyzeProps): React.JSX.Element;

package/dist/components/analyze/analyze.js

@@ -0,0 +1,136 @@
+import React from "react";
+import Spinner from "ink-spinner";
+import { Box, Newline, Text, useApp } from "ink";
+import { configPath, writeConfig, readConfig, } from "../../common/config.js";
+import UsageTable from "../usage-table.js";
+import ContinuePrompt from "../ui/continue-prompt.js";
+import Link from "ink-link";
+import NoCredentialsOnboarding from "../auth/no-credentials-onboarding.js";
+import { getZeroheightURL, submitUsageData } from "../../common/api.js";
+import RepoNamePrompt from "../repo-name-prompt.js";
+export default function Analyze({ onAnalyzeFiles, dryRun, repoName, }) {
+    const { exit } = useApp();
+    const [usageResult, setUsageResult] = React.useState(null);
+    const [isSendingData, setIsSendingData] = React.useState(false);
+    const [errorList, setErrorList] = React.useState([]);
+    const [credentials, setCredentials] = React.useState(null);
+    const [resourceURL, setResourceURL] = React.useState(null);
+    const [repo, setRepo] = React.useState(repoName);
+    const [promptRepo, setPromptRepo] = React.useState(repoName === undefined);
+    React.useEffect(() => {
+        onAnalyzeFiles()
+            .then(({ errors, usage }) => {
+            setErrorList((s) => [...s, ...errors]);
+            setUsageResult(usage);
+        })
+            .catch((e) => setErrorList((s) => [...s, e]));
+        if (!dryRun) {
+            readConfig().then((config) => {
+                if (config) {
+                    setCredentials({ token: config.token, client: config.client });
+                }
+            });
+        }
+    }, []);
+    async function handleContinue(shouldContinue) {
+        if (shouldContinue) {
+            if (!dryRun && credentials && usageResult && !repo) {
+                setPromptRepo(true);
+                setRepo("");
+            }
+            else if (!dryRun && credentials && usageResult && repo) {
+                setIsSendingData(true);
+                try {
+                    await submitUsageData(usageResult, repo, credentials);
+                    const resourceURL = getZeroheightURL();
+                    resourceURL.pathname = "/adoption/";
+                    setResourceURL(resourceURL);
+                }
+                catch (e) {
+                    const errorMessage = e.message === "Unauthorized"
+                        ? "Unauthorized. Please reset your authentication by running: zh-adoption auth"
+                        : "Failed to send data to zeroheight";
+                    setErrorList((s) => [...s, errorMessage]);
+                }
+                finally {
+                    setIsSendingData(false);
+                }
+            }
+        }
+        else {
+            exit();
+        }
+    }
+    function handleOnRepoNameSelected(repoName) {
+        setRepo(repoName);
+        writeConfig({
+            repoNames: {
+                [process.cwd()]: repoName,
+            },
+        });
+        setPromptRepo(false);
+    }
+    if (errorList.length > 0) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: "red" }, "Error:"),
+            React.createElement(Box, { flexDirection: "column", marginLeft: 1 }, errorList.map((e) => (React.createElement(Text, { key: e },
+                "- ",
+                e))))));
+    }
+    if (!credentials && !dryRun) {
+        return (React.createElement(NoCredentialsOnboarding, { configPath: configPath(), onSaveCredentials: async (persist, newClient, newToken) => {
+                const newCredentials = { token: newToken, client: newClient };
+                setCredentials(newCredentials);
+                if (persist) {
+                    await writeConfig({
+                        client: newClient,
+                        token: newToken,
+                    });
+                }
+            } }));
+    }
+    // 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"));
+    }
+    // Posting usage data to zeroheight
+    if (isSendingData) {
+        return (React.createElement(Text, null,
+            React.createElement(Text, { color: "green" },
+                React.createElement(Spinner, { type: "dots" })),
+            " Sending usage data to zeroheight..."));
+    }
+    // Completed, usage data is ready to view on zeroheight
+    if (resourceURL) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Newline, null),
+            React.createElement(Text, null,
+                React.createElement(Text, { color: "green" }, "Successful:"),
+                " View your",
+                " ",
+                React.createElement(Link, { url: resourceURL.toString() }, "usage data on zeroheight"))));
+    }
+    if (usageResult && !promptRepo) {
+        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 })));
+    }
+    if (promptRepo) {
+        return (React.createElement(RepoNamePrompt, { credentials: credentials, onRepoNameSelected: handleOnRepoNameSelected }));
+    }
+    return React.createElement(Text, null, "NOPE");
+}

package/dist/components/auth/credentials-already-exists.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+interface CredentialsAlreadyExistsProps {
+    client?: string;
+    token?: string;
+    configPath: string;
+    existingConfig: {
+        client: string;
+        token: string;
+    };
+    onOverwriteCredentials: () => Promise<void>;
+}
+/**
+ * Show when credentials already exist and prompt user to overwrite if applicable
+ */
+export default function CredentialsAlreadyExists({ client, token, configPath, existingConfig, onOverwriteCredentials, }: CredentialsAlreadyExistsProps): React.JSX.Element;
+export {};

package/dist/components/auth/credentials-already-exists.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Box, Text, useApp } from "ink";
+import Link from "ink-link";
+import CredentialsPreview from "./credentials-preview.js";
+import ConfirmInput from "../ui/confirm-input.js";
+/**
+ * Show when credentials already exist and prompt user to overwrite if applicable
+ */
+export default function CredentialsAlreadyExists({ client, token, configPath, existingConfig, onOverwriteCredentials, }) {
+    const { exit } = useApp();
+    const [shouldOverwrite, setShouldOverwrite] = React.useState("");
+    async function handleSubmitOverwrite(override) {
+        if (override) {
+            await onOverwriteCredentials();
+        }
+        exit();
+    }
+    return (React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, { bold: true, color: "yellow" }, "Credentials already exist"),
+        React.createElement(Text, null,
+            "You already have credentials in",
+            " ",
+            React.createElement(Link, { url: configPath }, configPath)),
+        React.createElement(CredentialsPreview, { client: existingConfig.client, token: existingConfig.token }),
+        (client || token) && (React.createElement(Box, null,
+            React.createElement(Text, null,
+                "Would you like to overwrite these credentials?",
+                " ",
+                React.createElement(Text, { dimColor: true }, "(y/N)")),
+            React.createElement(ConfirmInput, { isChecked: false, value: shouldOverwrite, onChange: setShouldOverwrite, onSubmit: handleSubmitOverwrite })))));
+}

package/dist/components/auth/credentials-preview.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+interface CredentialsPreviewProps {
+    client: string;
+    token: string;
+}
+/**
+ * Show Client ID and Access Token (redacted/sensitive) for confirmation
+ */
+export default function CredentialsPreview({ client, token, }: CredentialsPreviewProps): React.JSX.Element;
+export {};

package/dist/components/auth/credentials-preview.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { Box, Text } from "ink";
+const REDACT_REVEAL_COUNT = 6;
+/**
+ * Show Client ID and Access Token (redacted/sensitive) for confirmation
+ */
+export default function CredentialsPreview({ client, token, }) {
+    const asterisks = new Array(Math.max(3, token.length - 2 * REDACT_REVEAL_COUNT)).fill("✲");
+    return (React.createElement(Box, { borderStyle: "single", margin: 1, padding: 1 },
+        React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Box, { gap: 7 },
+                React.createElement(Text, { bold: true }, "Client ID:"),
+                React.createElement(Text, null, client)),
+            React.createElement(Box, { gap: 4 },
+                React.createElement(Text, { bold: true }, "Access Token:"),
+                React.createElement(Text, null,
+                    token.slice(0, REDACT_REVEAL_COUNT),
+                    asterisks,
+                    token.slice(token.length - REDACT_REVEAL_COUNT, token.length))))));
+}

package/dist/components/auth/no-credentials-onboarding.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+interface NoCredentialsOnboardingProps {
+    onSaveCredentials: (storeCredentials: boolean, client: string, token: string) => Promise<void>;
+    configPath: string;
+}
+export default function NoCredentialsOnboarding({ onSaveCredentials, configPath, }: NoCredentialsOnboardingProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Box, Newline, Text } from "ink";
+import TextInput from "ink-text-input";
+import Link from "ink-link";
+import CredentialsPreview from "./credentials-preview.js";
+import ConfirmInput from "../ui/confirm-input.js";
+export default function NoCredentialsOnboarding({ onSaveCredentials, configPath, }) {
+    const [client, setClient] = React.useState("");
+    const [token, setToken] = React.useState("");
+    const [shouldWrite, setShouldWrite] = React.useState("");
+    const [field, setField] = React.useState("client");
+    const handleWriteCredentials = async (answer) => {
+        await onSaveCredentials(answer, client.trim(), token.trim());
+    };
+    return (React.createElement(Box, { flexDirection: "column" },
+        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")),
+        field === "client" && (React.createElement(Box, null,
+            React.createElement(Text, null, "Client ID: "),
+            React.createElement(TextInput, { onChange: setClient, value: client, onSubmit: (v) => {
+                    if (v.trim().length === 0)
+                        return;
+                    setField("token");
+                } }))),
+        field === "token" && (React.createElement(Box, null,
+            React.createElement(Text, null, "Access Token:"),
+            React.createElement(TextInput, { onChange: setToken, value: token, onSubmit: (v) => {
+                    if (v.trim().length === 0)
+                        return;
+                    setField("write");
+                } }))),
+        field === "write" && (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(CredentialsPreview, { client: client, token: token }),
+            React.createElement(Text, null,
+                "Would you like to write these credentials to",
+                " ",
+                React.createElement(Link, { url: configPath }, configPath),
+                "?",
+                " ",
+                React.createElement(Text, { dimColor: true }, "(Y/n)")),
+            React.createElement(ConfirmInput, { isChecked: true, onChange: setShouldWrite, onSubmit: handleWriteCredentials, value: shouldWrite }))),
+        React.createElement(Newline, null)));
+}

package/dist/components/help-info.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+/**
+ * Rich help banner with link to help center docs
+ */
+export default function HelpInfo(): React.JSX.Element;

package/dist/components/help-info.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { Box, Newline, Text } from "ink";
+import Link from "ink-link";
+/**
+ * Rich help banner with link to help center docs
+ */
+export default function HelpInfo() {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Box, { borderStyle: "double", padding: 2, margin: 1, flexDirection: "column" },
+            React.createElement(Box, { justifyContent: "center" },
+                React.createElement(Text, { bold: true }, "Welcome \uD83D\uDC4B")),
+            React.createElement(Newline, null),
+            React.createElement(Text, null,
+                "Get started with the",
+                " ",
+                React.createElement(Text, { color: "#f63e7c", bold: true }, "zeroheight"),
+                " ",
+                "measurement CLI and start tracking your component usage."),
+            React.createElement(Text, null,
+                "For more information on how to set this up, check",
+                " ",
+                React.createElement(Link, { url: "https://zeroheight.com" }, "here"),
+                "."))));
+}

package/dist/components/repo-name-prompt.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { Credentials } from "../common/config.js";
+interface RepoNamePromptProps {
+    credentials: Credentials | null;
+    onRepoNameSelected: (repoName: string) => void;
+}
+export default function RepoNamePrompt({ credentials, onRepoNameSelected, }: RepoNamePromptProps): React.JSX.Element | null;
+export {};

package/dist/components/repo-name-prompt.js

@@ -0,0 +1,93 @@
+import React from "react";
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import SelectInput from "ink-select-input";
+import { readConfig } from "../common/config.js";
+import { getExistingRepoNames } from "../common/api.js";
+import TextInput from "ink-text-input";
+var RepoNamePromptState;
+(function (RepoNamePromptState) {
+    RepoNamePromptState["LOADING"] = "LOADING";
+    RepoNamePromptState["ERROR"] = "ERROR";
+    RepoNamePromptState["SELECT_REPO_NAME"] = "SELECT_REPO_NAME";
+    RepoNamePromptState["ENTER_REPO_NAME"] = "ENTER_REPO_NAME";
+})(RepoNamePromptState || (RepoNamePromptState = {}));
+export default function RepoNamePrompt({ credentials, onRepoNameSelected, }) {
+    const [state, setState] = React.useState(RepoNamePromptState.LOADING);
+    const [repoNames, setRepoNames] = React.useState([]);
+    const [repoName, setRepoName] = React.useState("");
+    async function loadRepoNames(credentials) {
+        try {
+            const names = await getExistingRepoNames(credentials);
+            setRepoNames(names);
+            if (names.length === 0) {
+                setState(RepoNamePromptState.ENTER_REPO_NAME);
+            }
+            else {
+                setState(RepoNamePromptState.SELECT_REPO_NAME);
+            }
+        }
+        catch (e) {
+            setState(RepoNamePromptState.ERROR);
+        }
+    }
+    React.useEffect(() => {
+        if (!credentials) {
+            return;
+        }
+        setState(RepoNamePromptState.LOADING);
+        readConfig().then((config) => {
+            const repoName = config?.repoNames?.[process.cwd()];
+            if (repoName) {
+                onRepoNameSelected(repoName);
+            }
+            else {
+                loadRepoNames(credentials);
+            }
+        });
+    }, [credentials]);
+    function onSelect(item) {
+        if (item.value === "enter-repository-name") {
+            setState(RepoNamePromptState.ENTER_REPO_NAME);
+            return;
+        }
+        onRepoNameSelected(item.value);
+    }
+    if (state === RepoNamePromptState.LOADING) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, null,
+                React.createElement(Text, { color: "cyan" },
+                    React.createElement(Spinner, { type: "dots" })),
+                " ",
+                "Fetching repository names...")));
+    }
+    if (state === RepoNamePromptState.ERROR) {
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, { color: "red" }, "Error:"),
+            React.createElement(Box, { flexDirection: "column", marginLeft: 1 },
+                React.createElement(Text, null, "- Failed to fetch repository names"))));
+    }
+    if (state === RepoNamePromptState.SELECT_REPO_NAME) {
+        const selectItems = [
+            { label: "Enter repository name", value: "enter-repository-name" },
+            ...repoNames.map((name) => ({
+                label: name,
+                value: name,
+            })),
+        ];
+        return (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Text, null, "Select the repository name"),
+            React.createElement(SelectInput, { items: selectItems, onSelect: onSelect })));
+    }
+    if (state === RepoNamePromptState.ENTER_REPO_NAME) {
+        return (React.createElement(Box, null,
+            React.createElement(Text, null, "Repository name:"),
+            React.createElement(TextInput, { value: repoName, onChange: setRepoName, onSubmit: (value) => {
+                    if (value.trim().length === 0) {
+                        return;
+                    }
+                    onRepoNameSelected(value);
+                } })));
+    }
+    return null;
+}

package/dist/components/ui/confirm-input.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+interface InkConfirmInputProps {
+    isChecked: boolean;
+    onChange: (newValue: string) => void;
+    onSubmit: (value: boolean) => void;
+    placeholder?: string;
+    value: string;
+}
+declare const ConfirmInput: ({ isChecked, onChange, onSubmit, placeholder, value, ...props }: InkConfirmInputProps) => React.JSX.Element;
+export default ConfirmInput;

package/dist/components/ui/confirm-input.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import TextInput from "ink-text-input";
+import yn from "yn";
+const ConfirmInput = ({ isChecked, onChange, onSubmit, placeholder, value, ...props }) => {
+    const handleSubmit = React.useCallback((newValue) => {
+        onSubmit(yn(newValue, { default: isChecked }));
+    }, [isChecked, onSubmit]);
+    return (React.createElement(TextInput, { ...props, placeholder: placeholder, value: value, onChange: onChange, onSubmit: handleSubmit }));
+};
+export default ConfirmInput;

package/dist/components/ui/continue-prompt.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface ContinuePromptProps {
+    onContinue: (answer: boolean) => void;
+}
+export default function ContinuePrompt({ onContinue }: ContinuePromptProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Box, Text } from "ink";
+import ConfirmInput from "./confirm-input.js";
+export default function ContinuePrompt({ onContinue }) {
+    const [shouldContinueText, setShouldContinueText] = React.useState("");
+    return (React.createElement(Box, null,
+        React.createElement(Text, null,
+            "Continue? ",
+            React.createElement(Text, { dimColor: true }, "(Y/n):")),
+        React.createElement(ConfirmInput, { isChecked: true, value: shouldContinueText, onChange: setShouldContinueText, onSubmit: (answer) => {
+                onContinue(answer);
+            } })));
+}

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { RawUsage } from "../ast/analyze.js";
+interface UsageTableProps {
+    usage: Map<string, RawUsage[]>;
+}
+export default function UsageTable({ usage }: UsageTableProps): React.JSX.Element;
+export {};

package/dist/components/usage-table.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Box, Text } from "ink";
+export default function UsageTable({ usage }) {
+    const rows = Array.from(usage.entries());
+    return (React.createElement(Box, { flexDirection: "column" }, rows.map(([filepath, fileUsage]) => {
+        return (React.createElement(Box, { key: filepath, flexDirection: "column" },
+            React.createElement(Text, { color: "green" }, filepath),
+            React.createElement(Box, { flexDirection: "column", marginLeft: 2 }, fileUsage.map(({ name, count }) => {
+                return (React.createElement(Box, { gap: 2, key: `${name}-${filepath}` },
+                    React.createElement(Text, { bold: true }, count),
+                    React.createElement(Text, null, name)));
+            }))));
+    })));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeroheight/adoption-cli",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "license": "ISC",
   "main": "dist/cli.js",
   "bin": {
@@ -13,7 +13,7 @@
   "scripts": {
     "cleanup": "rm -rf dist",
     "setup": "npm run build && npm i -g",
-    "start": "zh-adoption",
+    "start": "node dist/cli.js",
     "start-dev": "export NODE_ENV=dev && zh-adoption",
     "build": "tsc",
     "dev": "tsc --watch",
@@ -30,9 +30,9 @@
     "acorn-walk": "^8.3.2",
     "chalk": "^5.2.0",
     "commander": "^12.0.0",
+    "glob": "^10.3.15",
     "ignore": "^5.3.1",
     "ink": "^4.1.0",
-    "glob": "^10.3.15",
     "ink-link": "^3.0.0",
     "ink-render-string": "^1.0.0",
     "ink-select-input": "^5.0.0",
@@ -52,7 +52,7 @@
     "ink-testing-library": "git+ssh://git@github.com/vadimdemedes/ink-testing-library.git#f44b077e9a05a1d615bab41c72906726d34ea085",
     "memfs": "^4.9.2",
     "mock-stdin": "^1.0.0",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "ts-node": "^10.9.1",
     "typescript": "^5.4.5",
     "vitest": "^1.5.2"