inai-react-components 0.1.0

package/dist/commands/add.d.ts

@@ -0,0 +1,34 @@
+import { type RegistryComponent } from "./status.js";
+export interface AddResult {
+    added: boolean;
+    message: string;
+    files: string[];
+    npmDeps: string[];
+    internalDeps: string[];
+}
+/**
+ * Parse a component spec like "button", "block/auth-login", or "template/admin-dashboard"
+ * into its type prefix and name.
+ */
+export declare function parseComponentSpec(spec: string): {
+    prefix: string | null;
+    name: string;
+};
+/**
+ * Find a component in the registry, optionally narrowing by type prefix.
+ */
+export declare function findInRegistry(registry: {
+    components: RegistryComponent[];
+    blocks: RegistryComponent[];
+    templates: RegistryComponent[];
+}, name: string, prefix: string | null): RegistryComponent | null;
+/**
+ * Determine the target directory for a component based on its type and aliases.
+ */
+export declare function getTargetDir(component: RegistryComponent, aliases: {
+    components: string;
+    blocks: string;
+}): string;
+export declare function runAdd(componentSpec: string, rootDir: string): Promise<AddResult>;
+export declare function addCommand(componentSpec?: string): Promise<void>;
+//# sourceMappingURL=add.d.ts.map

package/dist/commands/add.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add.d.ts","sourceRoot":"","sources":["../../src/commands/add.ts"],"names":[],"mappings":"AAKA,OAAO,EAGL,KAAK,iBAAiB,EAEvB,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG;IAChD,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;CACd,CAQA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE;IAAE,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAAC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAAC,SAAS,EAAE,iBAAiB,EAAE,CAAA;CAAE,EAC1G,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,GAAG,IAAI,GACpB,iBAAiB,GAAG,IAAI,CAc1B;AAED;;GAEG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,iBAAiB,EAC5B,OAAO,EAAE;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAC9C,MAAM,CAUR;AAED,wBAAsB,MAAM,CAC1B,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,SAAS,CAAC,CAiHpB;AAuBD,wBAAsB,UAAU,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CA0BtE"}

package/dist/commands/add.js

@@ -0,0 +1,284 @@
+import fs from "node:fs";
+import path from "node:path";
+import chalk from "chalk";
+import ora from "ora";
+import prompts from "prompts";
+import { readComponentsJson, readRegistryJson, } from "./status.js";
+import { resolveRegistryDir } from "../utils/registry-resolver.js";
+/**
+ * Parse a component spec like "button", "block/auth-login", or "template/admin-dashboard"
+ * into its type prefix and name.
+ */
+export function parseComponentSpec(spec) {
+    if (spec.startsWith("block/")) {
+        return { prefix: "block", name: spec.slice(6) };
+    }
+    if (spec.startsWith("template/")) {
+        return { prefix: "template", name: spec.slice(9) };
+    }
+    return { prefix: null, name: spec };
+}
+/**
+ * Find a component in the registry, optionally narrowing by type prefix.
+ */
+export function findInRegistry(registry, name, prefix) {
+    if (prefix === "block") {
+        return registry.blocks.find((c) => c.name === name) ?? null;
+    }
+    if (prefix === "template") {
+        return registry.templates.find((c) => c.name === name) ?? null;
+    }
+    // No prefix: search components first, then blocks, then templates
+    const allItems = [
+        ...registry.components,
+        ...registry.blocks,
+        ...registry.templates,
+    ];
+    return allItems.find((c) => c.name === name) ?? null;
+}
+/**
+ * Determine the target directory for a component based on its type and aliases.
+ */
+export function getTargetDir(component, aliases) {
+    const type = component.type.toLowerCase();
+    if (type === "block") {
+        return aliases.blocks.replace(/^@\//, "src/");
+    }
+    if (type === "template") {
+        return aliases.blocks.replace(/^@\//, "src/").replace(/blocks$/, "templates");
+    }
+    // Components, forms, and other types go to the components directory
+    return aliases.components.replace(/^@\//, "src/");
+}
+export async function runAdd(componentSpec, rootDir) {
+    const componentsJson = readComponentsJson(rootDir);
+    if (!componentsJson) {
+        return {
+            added: false,
+            message: "No components.json found. Run `inai-ui init` first to initialize your project.",
+            files: [],
+            npmDeps: [],
+            internalDeps: [],
+        };
+    }
+    const { prefix, name } = parseComponentSpec(componentSpec);
+    const registryDir = resolveRegistryDir(rootDir);
+    const registryPath = path.join(registryDir, "registry.json");
+    const registry = readRegistryJson(registryPath);
+    if (!registry) {
+        return {
+            added: false,
+            message: `Registry not found. Ensure your project is initialized correctly.`,
+            files: [],
+            npmDeps: [],
+            internalDeps: [],
+        };
+    }
+    const component = findInRegistry(registry, name, prefix);
+    if (!component) {
+        const label = prefix ? `${prefix}/${name}` : name;
+        return {
+            added: false,
+            message: `Component "${label}" not found in registry.`,
+            files: [],
+            npmDeps: [],
+            internalDeps: [],
+        };
+    }
+    // Determine target directory
+    const targetDir = getTargetDir(component, componentsJson.aliases);
+    const copiedFiles = [];
+    // Copy component source files
+    for (const filePath of component.files) {
+        const registryFilePath = path.join(registryDir, filePath);
+        const fileName = path.basename(filePath);
+        const localFilePath = path.join(rootDir, targetDir, fileName);
+        if (!fs.existsSync(registryFilePath)) {
+            continue;
+        }
+        fs.mkdirSync(path.dirname(localFilePath), { recursive: true });
+        const content = fs.readFileSync(registryFilePath, "utf-8");
+        fs.writeFileSync(localFilePath, content);
+        copiedFiles.push(fileName);
+    }
+    // Resolve and copy internal dependencies
+    const copiedInternalDeps = [];
+    for (const dep of component.internalDeps) {
+        // dep is like "lib/cn" or "lib/animations"
+        const depFileName = dep.split("/").pop() + ".ts";
+        const depSourcePath = path.join(registryDir, "packages", "ui", "src", dep + ".ts");
+        const depTargetPath = path.join(rootDir, "src", "lib", depFileName);
+        if (!fs.existsSync(depSourcePath)) {
+            continue;
+        }
+        // Copy even if it already exists (ensure latest version)
+        fs.mkdirSync(path.dirname(depTargetPath), { recursive: true });
+        const content = fs.readFileSync(depSourcePath, "utf-8");
+        fs.writeFileSync(depTargetPath, content);
+        copiedInternalDeps.push(dep);
+    }
+    // Update components.json with installed component entry
+    const registryVersion = registry.version;
+    const installed = componentsJson.installedComponents ?? [];
+    const existingIdx = installed.findIndex((c) => c.name === name);
+    const entry = {
+        name,
+        version: registryVersion,
+        installedAt: new Date().toISOString().split("T")[0],
+    };
+    if (existingIdx >= 0) {
+        installed[existingIdx] = entry;
+    }
+    else {
+        installed.push(entry);
+    }
+    componentsJson.installedComponents = installed;
+    const componentsJsonPath = path.join(rootDir, "components.json");
+    fs.writeFileSync(componentsJsonPath, JSON.stringify(componentsJson, null, 2) + "\n");
+    return {
+        added: true,
+        message: `Component "${name}" added successfully.`,
+        files: copiedFiles,
+        npmDeps: component.npmDeps,
+        internalDeps: copiedInternalDeps,
+    };
+}
+function printAddResult(result) {
+    if (result.files.length > 0) {
+        console.log(chalk.green("\nCopied files:"));
+        for (const file of result.files) {
+            console.log(chalk.dim(`  - ${file}`));
+        }
+    }
+    if (result.internalDeps.length > 0) {
+        console.log(chalk.green("\nInternal dependencies resolved:"));
+        for (const dep of result.internalDeps) {
+            console.log(chalk.dim(`  - ${dep}`));
+        }
+    }
+    if (result.npmDeps.length > 0) {
+        console.log(chalk.yellow("\nRequired npm dependencies:"));
+        console.log(chalk.cyan(`  pnpm add ${result.npmDeps.join(" ")}`));
+    }
+}
+export async function addCommand(componentSpec) {
+    // If no component specified, show interactive picker
+    if (!componentSpec) {
+        await interactiveAdd();
+        return;
+    }
+    const spinner = ora(`Adding "${componentSpec}"...`).start();
+    try {
+        const rootDir = process.cwd();
+        const result = await runAdd(componentSpec, rootDir);
+        if (!result.added) {
+            spinner.fail(result.message);
+            process.exit(1);
+        }
+        spinner.succeed(result.message);
+        printAddResult(result);
+    }
+    catch (error) {
+        spinner.fail("Failed to add component.");
+        const message = error instanceof Error ? error.message : String(error);
+        console.error(chalk.red(`\nError: ${message}`));
+        process.exit(1);
+    }
+}
+async function interactiveAdd() {
+    const rootDir = process.cwd();
+    const componentsJson = readComponentsJson(rootDir);
+    if (!componentsJson) {
+        console.log(chalk.red("No components.json found. Run `inai-ui init` first to initialize your project."));
+        process.exit(1);
+    }
+    const registryDir = resolveRegistryDir(rootDir);
+    const registryPath = path.join(registryDir, "registry.json");
+    const registry = readRegistryJson(registryPath);
+    if (!registry) {
+        console.log(chalk.red("Registry not found. Ensure your project is initialized correctly."));
+        process.exit(1);
+    }
+    const allItems = [
+        ...registry.components,
+        ...registry.blocks,
+        ...registry.templates,
+    ];
+    const installed = componentsJson.installedComponents ?? [];
+    const installedNames = new Set(installed.map((c) => c.name));
+    // Build choices with status indicator
+    const choices = allItems.map((item) => {
+        const isInstalled = installedNames.has(item.name);
+        const prefix = item.type === "block" ? "block/" : item.type === "template" ? "template/" : "";
+        const label = `${prefix}${item.name}`;
+        const status = isInstalled ? chalk.green(" [installed]") : "";
+        const desc = item.description.length > 50
+            ? item.description.slice(0, 47) + "..."
+            : item.description;
+        return {
+            title: `${label}${status}`,
+            description: desc,
+            value: item.name,
+            selected: false,
+        };
+    });
+    console.log(chalk.bold("\nInAI UI - Component Picker\n"));
+    console.log(chalk.dim("Select components to add or update. Already installed components will be updated.\n"));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const response = await prompts({
+        type: "multiselect",
+        name: "components",
+        message: "Which components would you like to add?",
+        choices,
+        instructions: false,
+    });
+    const selectedComponents = response.components;
+    if (!selectedComponents || selectedComponents.length === 0) {
+        console.log(chalk.yellow("\nNo components selected."));
+        return;
+    }
+    const selected = selectedComponents;
+    const allNpmDeps = new Set();
+    let addedCount = 0;
+    let updatedCount = 0;
+    for (const name of selected) {
+        const isInstalled = installedNames.has(name);
+        const action = isInstalled ? "Updating" : "Adding";
+        const spinner = ora(`${action} "${name}"...`).start();
+        try {
+            const result = await runAdd(name, rootDir);
+            if (!result.added) {
+                spinner.fail(result.message);
+                continue;
+            }
+            if (isInstalled) {
+                spinner.succeed(`Updated "${name}"`);
+                updatedCount++;
+            }
+            else {
+                spinner.succeed(`Added "${name}"`);
+                addedCount++;
+            }
+            for (const dep of result.npmDeps) {
+                allNpmDeps.add(dep);
+            }
+        }
+        catch (error) {
+            spinner.fail(`Failed to process "${name}"`);
+            const message = error instanceof Error ? error.message : String(error);
+            console.error(chalk.red(`  Error: ${message}`));
+        }
+    }
+    // Summary
+    console.log(chalk.bold("\nSummary:"));
+    if (addedCount > 0) {
+        console.log(chalk.green(`  ${addedCount} component${addedCount > 1 ? "s" : ""} added`));
+    }
+    if (updatedCount > 0) {
+        console.log(chalk.blue(`  ${updatedCount} component${updatedCount > 1 ? "s" : ""} updated`));
+    }
+    if (allNpmDeps.size > 0) {
+        console.log(chalk.yellow("\nInstall required npm dependencies:"));
+        console.log(chalk.cyan(`  pnpm add ${[...allNpmDeps].join(" ")}`));
+    }
+}

package/dist/commands/diff.d.ts

@@ -0,0 +1,6 @@
+import { type RegistryComponent } from "./status.js";
+export declare function computeDiff(localContent: string, registryContent: string): string;
+export declare function findComponentInRegistry(registryPath: string, componentName: string): RegistryComponent | null;
+export declare function runDiff(componentName: string, rootDir: string): Promise<string>;
+export declare function diffCommand(componentName: string): Promise<void>;
+//# sourceMappingURL=diff.d.ts.map

package/dist/commands/diff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../../src/commands/diff.ts"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,iBAAiB,EACvB,MAAM,aAAa,CAAC;AAGrB,wBAAgB,WAAW,CAAC,YAAY,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,GAAG,MAAM,CA+BjF;AAED,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,GACpB,iBAAiB,GAAG,IAAI,CAW1B;AAED,wBAAsB,OAAO,CAC3B,aAAa,EAAE,MAAM,EACrB,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,MAAM,CAAC,CAgEjB;AAED,wBAAsB,WAAW,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CActE"}

package/dist/commands/diff.js

@@ -0,0 +1,100 @@
+import fs from "node:fs";
+import path from "node:path";
+import chalk from "chalk";
+import ora from "ora";
+import { readComponentsJson, readRegistryJson, } from "./status.js";
+import { resolveRegistryDir } from "../utils/registry-resolver.js";
+export function computeDiff(localContent, registryContent) {
+    const localLines = localContent.split("\n");
+    const registryLines = registryContent.split("\n");
+    const output = [];
+    const maxLen = Math.max(localLines.length, registryLines.length);
+    let hasChanges = false;
+    for (let i = 0; i < maxLen; i++) {
+        const localLine = localLines[i];
+        const registryLine = registryLines[i];
+        if (localLine === registryLine) {
+            output.push(chalk.dim(`  ${localLine ?? ""}`));
+        }
+        else {
+            hasChanges = true;
+            if (registryLine !== undefined) {
+                output.push(chalk.red(`- ${registryLine}`));
+            }
+            if (localLine !== undefined) {
+                output.push(chalk.green(`+ ${localLine}`));
+            }
+        }
+    }
+    if (!hasChanges) {
+        return chalk.green("No differences found. Component is up to date.");
+    }
+    return output.join("\n");
+}
+export function findComponentInRegistry(registryPath, componentName) {
+    const registry = readRegistryJson(registryPath);
+    if (!registry)
+        return null;
+    const allItems = [
+        ...registry.components,
+        ...registry.blocks,
+        ...registry.templates,
+    ];
+    return allItems.find((c) => c.name === componentName) ?? null;
+}
+export async function runDiff(componentName, rootDir) {
+    const componentsJson = readComponentsJson(rootDir);
+    if (!componentsJson) {
+        return chalk.red("No components.json found. Run `inai-ui init` first to initialize your project.");
+    }
+    const registryDir = resolveRegistryDir(rootDir);
+    const registryPath = path.join(registryDir, "registry.json");
+    const registryComponent = findComponentInRegistry(registryPath, componentName);
+    if (!registryComponent) {
+        return chalk.red(`Component "${componentName}" not found in registry.`);
+    }
+    if (registryComponent.files.length === 0) {
+        return chalk.yellow(`Component "${componentName}" has no files in the registry.`);
+    }
+    const results = [];
+    for (const filePath of registryComponent.files) {
+        const registryFilePath = path.join(registryDir, filePath);
+        const localComponentDir = componentsJson.aliases.components.replace(/^@\//, "src/");
+        const fileName = path.basename(filePath);
+        const localFilePath = path.join(rootDir, localComponentDir, fileName);
+        results.push(chalk.bold(`\nDiff for ${fileName}:`));
+        results.push(chalk.dim("─".repeat(60)));
+        if (!fs.existsSync(registryFilePath)) {
+            results.push(chalk.yellow(`Registry source file not found: ${filePath}`));
+            continue;
+        }
+        const registryContent = fs.readFileSync(registryFilePath, "utf-8");
+        if (!fs.existsSync(localFilePath)) {
+            results.push(chalk.yellow(`Local file not found at ${localComponentDir}/${fileName}. Component may not be installed.`));
+            // Show what registry has as all additions
+            const lines = registryContent.split("\n");
+            for (const line of lines) {
+                results.push(chalk.green(`+ ${line}`));
+            }
+            continue;
+        }
+        const localContent = fs.readFileSync(localFilePath, "utf-8");
+        results.push(computeDiff(localContent, registryContent));
+    }
+    return results.join("\n");
+}
+export async function diffCommand(componentName) {
+    const spinner = ora(`Comparing "${componentName}" with registry...`).start();
+    try {
+        const rootDir = process.cwd();
+        const output = await runDiff(componentName, rootDir);
+        spinner.stop();
+        console.log(output);
+    }
+    catch (error) {
+        spinner.fail("Failed to compute diff.");
+        const message = error instanceof Error ? error.message : String(error);
+        console.error(chalk.red(`\nError: ${message}`));
+        process.exit(1);
+    }
+}

package/dist/commands/init.d.ts

@@ -0,0 +1,46 @@
+declare const AVAILABLE_THEMES: readonly ["monday", "linear", "notion", "vercel"];
+type Theme = (typeof AVAILABLE_THEMES)[number];
+export interface InitConfig {
+    componentPath: string;
+    blockPath: string;
+    theme: Theme;
+    importAlias: string;
+    utilsAlias: string;
+    tanstackRouter: boolean;
+    tanstackQuery: boolean;
+    tanstackForm: boolean;
+    tanstackTable: boolean;
+}
+export interface ComponentsJson {
+    $schema: string;
+    registrySource?: string;
+    style: string;
+    tailwind: {
+        config: string;
+        css: string;
+    };
+    aliases: {
+        components: string;
+        blocks: string;
+        utils: string;
+    };
+    theme: Theme;
+    tanstack: {
+        router: boolean;
+        query: boolean;
+        form: boolean;
+        table: boolean;
+    };
+}
+export declare function promptInitConfig(): Promise<InitConfig | null>;
+export declare function buildComponentsJson(config: InitConfig, repoUrl?: string): ComponentsJson;
+export declare function getCnTemplate(): string;
+export declare function getLocalTailwindCssTemplate(theme: Theme): string;
+export declare function getLegacyTailwindCssTemplate(theme: Theme): string;
+export declare function runInit(config: InitConfig, targetDir: string, repoUrl?: string): Promise<{
+    success: boolean;
+    filesCreated: string[];
+}>;
+export declare function initCommand(repoUrl?: string): Promise<void>;
+export {};
+//# sourceMappingURL=init.d.ts.map

package/dist/commands/init.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"AAOA,QAAA,MAAM,gBAAgB,mDAAoD,CAAC;AAC3E,KAAK,KAAK,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE/C,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE;QACR,MAAM,EAAE,MAAM,CAAC;QACf,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,OAAO,EAAE;QACP,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE;QACR,MAAM,EAAE,OAAO,CAAC;QAChB,KAAK,EAAE,OAAO,CAAC;QACf,IAAI,EAAE,OAAO,CAAC;QACd,KAAK,EAAE,OAAO,CAAC;KAChB,CAAC;CACH;AAED,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,CAuEnE;AAED,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,UAAU,EAClB,OAAO,CAAC,EAAE,MAAM,GACf,cAAc,CA6BhB;AAED,wBAAgB,aAAa,IAAI,MAAM,CAQtC;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAOhE;AAED,wBAAgB,4BAA4B,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAOjE;AA2ED,wBAAsB,OAAO,CAC3B,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,MAAM,GACf,OAAO,CAAC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,CA4CvD;AAED,wBAAsB,WAAW,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAyDjE"}