uniqueui-cli 0.1.0

package/dist/commands/add.js

@@ -0,0 +1,167 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.add = add;
+const node_fetch_1 = __importDefault(require("node-fetch"));
+const path_1 = __importDefault(require("path"));
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const chalk_1 = __importDefault(require("chalk"));
+const ts_morph_1 = require("ts-morph");
+const child_process_1 = require("child_process");
+async function add(componentName, options) {
+    console.log(`Fetching ${componentName} from ${options.url}...`);
+    // 1. Load config
+    let config;
+    try {
+        config = await fs_extra_1.default.readJson("components.json");
+    }
+    catch (e) {
+        console.error(chalk_1.default.red("components.json not found. Run 'init' first."));
+        process.exit(1);
+    }
+    // 2. Fetch registry
+    let registry;
+    try {
+        // For local testing, if url is a file path, read it
+        if (options.url.startsWith(".")) {
+            registry = await fs_extra_1.default.readJson(options.url);
+        }
+        else {
+            const res = await (0, node_fetch_1.default)(`${options.url}/registry.json`);
+            if (!res.ok)
+                throw new Error("Failed to fetch registry");
+            registry = await res.json();
+        }
+    }
+    catch (e) {
+        console.error(chalk_1.default.red("Could not fetch registry.json"), e);
+        process.exit(1);
+    }
+    const item = registry.find((c) => c.name === componentName);
+    if (!item) {
+        console.error(chalk_1.default.red(`Component ${componentName} not found.`));
+        process.exit(1);
+    }
+    // 3. Install dependencies
+    if (item.dependencies.length) {
+        console.log(chalk_1.default.cyan(`Installing dependencies: ${item.dependencies.join(", ")}`));
+        try {
+            // Detect package manager - simplified
+            const pm = fs_extra_1.default.existsSync("pnpm-lock.yaml") ? "pnpm" : fs_extra_1.default.existsSync("yarn.lock") ? "yarn" : "npm";
+            const cmd = pm === "npm" ? "install" : "add"; // yarn add, pnpm add
+            (0, child_process_1.execSync)(`${pm} ${cmd} ${item.dependencies.join(" ")}`, { stdio: "inherit" });
+        }
+        catch (e) {
+            console.warn(chalk_1.default.yellow("Failed to install dependencies automatically. Please install them manually."));
+        }
+    }
+    // 4. Update Tailwind Config
+    if (item.tailwindConfig) {
+        console.log(chalk_1.default.cyan("Updating tailwind.config..."));
+        await updateTailwindConfig(config.tailwind.config, item.tailwindConfig);
+    }
+    // 5. Write Files
+    const targetDir = path_1.default.resolve(config.paths.components || "components/ui");
+    await fs_extra_1.default.ensureDir(targetDir);
+    for (const file of item.files) {
+        // We only handle ui components for now
+        if (file.type === "registry:ui") {
+            const fileName = path_1.default.basename(file.path);
+            const targetPath = path_1.default.join(targetDir, fileName);
+            await fs_extra_1.default.writeFile(targetPath, file.content);
+            console.log(chalk_1.default.green(`Created ${fileName}`));
+        }
+        // Handle utils if needed, or other types
+    }
+}
+async function updateTailwindConfig(configPath, newConfig) {
+    const project = new ts_morph_1.Project({
+        manipulationSettings: {
+            quoteKind: ts_morph_1.QuoteKind.Double,
+        }
+    });
+    // Attempt to add the file
+    const sourceFile = project.addSourceFileAtPath(configPath);
+    // Simplistic handling: look for export default or module.exports
+    // We expect the config to be an object literal.
+    // We need to merge `newConfig.theme.extend` into the existing config.
+    // logic: find 'theme' property -> find 'extend' property -> merge properties.
+    const exportAssignment = sourceFile.getExportAssignment((e) => !e.isExportEquals()); // export default
+    let objectLiteral;
+    if (exportAssignment) {
+        objectLiteral = exportAssignment.getExpression().asKind(ts_morph_1.SyntaxKind.ObjectLiteralExpression);
+    }
+    else {
+        // try module.exports
+        const stmt = sourceFile.getStatement((s) => {
+            if (s.getKind() === ts_morph_1.SyntaxKind.ExpressionStatement) {
+                const expr = s.asKind(ts_morph_1.SyntaxKind.ExpressionStatement)?.getExpression();
+                if (expr && expr.getKind() === ts_morph_1.SyntaxKind.BinaryExpression) {
+                    const binary = expr.asKind(ts_morph_1.SyntaxKind.BinaryExpression);
+                    const left = binary?.getLeft();
+                    if (left?.getText() === "module.exports")
+                        return true;
+                }
+            }
+            return false;
+        });
+        if (stmt) {
+            const binary = stmt.asKind(ts_morph_1.SyntaxKind.ExpressionStatement).getExpression().asKind(ts_morph_1.SyntaxKind.BinaryExpression);
+            objectLiteral = binary.getRight().asKind(ts_morph_1.SyntaxKind.ObjectLiteralExpression);
+        }
+    }
+    if (!objectLiteral) {
+        console.warn(chalk_1.default.yellow("Could not parse tailwind config object. Skipping update."));
+        return;
+    }
+    // Heuristics:
+    // newConfig is { theme: { extend: { animation: {...}, keyframes: {...} } } }
+    // Helper to get or create property object
+    const getOrCreateObjectProperty = (parentObj, name) => {
+        let prop = parentObj.getProperty(name);
+        if (!prop) {
+            parentObj.addPropertyAssignment({ name, initializer: "{}" });
+            prop = parentObj.getProperty(name);
+        }
+        const init = prop?.asKind(ts_morph_1.SyntaxKind.PropertyAssignment)?.getInitializer();
+        return init?.asKind(ts_morph_1.SyntaxKind.ObjectLiteralExpression);
+    };
+    if (newConfig.theme?.extend) {
+        const themeObj = getOrCreateObjectProperty(objectLiteral, "theme");
+        if (themeObj) {
+            const extendObj = getOrCreateObjectProperty(themeObj, "extend");
+            if (extendObj) {
+                // Merge animations
+                const animations = newConfig.theme.extend.animation;
+                if (animations) {
+                    const animObj = getOrCreateObjectProperty(extendObj, "animation");
+                    if (animObj) {
+                        for (const [key, value] of Object.entries(animations)) {
+                            if (!animObj.getProperty(key)) {
+                                animObj.addPropertyAssignment({ name: `"${key}"`, initializer: `"${value}"` });
+                            }
+                        }
+                    }
+                }
+                // Merge keyframes
+                const keyframes = newConfig.theme.extend.keyframes;
+                if (keyframes) {
+                    const keyframesObj = getOrCreateObjectProperty(extendObj, "keyframes");
+                    if (keyframesObj) {
+                        for (const [key, value] of Object.entries(keyframes)) {
+                            if (!keyframesObj.getProperty(key)) {
+                                // value is an object, strictly JSON stringify might be valid JS valid object literal needed?
+                                // "JSON.stringify(value)" produces valid JSON which is valid JS object literal initializer if keys are quoted.
+                                keyframesObj.addPropertyAssignment({ name: `"${key}"`, initializer: JSON.stringify(value) });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    await sourceFile.save();
+    console.log(chalk_1.default.green("Tailwind config updated successfully."));
+}

package/dist/commands/init.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.init = init;
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const prompts_1 = __importDefault(require("prompts"));
+const chalk_1 = __importDefault(require("chalk"));
+async function init() {
+    console.log(chalk_1.default.bold.green("Initializing UniqueUI..."));
+    const cwd = process.cwd();
+    const response = await (0, prompts_1.default)([
+        {
+            type: "text",
+            name: "componentsDir",
+            message: "Where would you like to install components?",
+            initial: "components/ui",
+        },
+        {
+            type: "toggle",
+            name: "typescript",
+            message: "Are you using TypeScript?",
+            initial: true,
+            active: "yes",
+            inactive: "no",
+        },
+        {
+            type: "text",
+            name: "tailwindConfig",
+            message: "Where is your tailwind.config.js located?",
+            initial: "tailwind.config.ts",
+        },
+    ]);
+    const config = {
+        $schema: "https://uniqueui.com/schema.json",
+        style: "default",
+        rsc: true,
+        tsx: response.typescript,
+        tailwind: {
+            config: response.tailwindConfig,
+            css: "app/globals.css", // simplifying assumption or could ask
+            baseColor: "slate",
+            cssVariables: true,
+        },
+        aliases: {
+            components: "@/components",
+            utils: "@/lib/utils",
+        },
+        paths: {
+            components: response.componentsDir,
+            lib: "lib" // simplifying
+        }
+    };
+    await fs_1.promises.writeFile(path_1.default.join(cwd, "components.json"), JSON.stringify(config, null, 2));
+    console.log(chalk_1.default.green("Configuration saved to components.json"));
+}

package/dist/index.js

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const init_1 = require("./commands/init");
+const add_1 = require("./commands/add");
+const program = new commander_1.Command();
+program
+    .name("uniqueui")
+    .description("Add components from UniqueUI to your project")
+    .version("0.1.0");
+program
+    .command("init")
+    .description("Configure your project for UniqueUI")
+    .action(init_1.init);
+program
+    .command("add")
+    .description("Add a component to your project")
+    .argument("<component>", "the component to add")
+    .option("--url <url>", "the base URL of the registry", "https://raw.githubusercontent.com/prashantkumarsingh/uniqueui/main")
+    .action(add_1.add);
+program.parse();

package/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "uniqueui-cli",
+    "version": "0.1.0",
+    "description": "CLI for UniqueUI",
+    "main": "dist/index.js",
+    "bin": {
+        "uniqueui": "./dist/index.js"
+    },
+    "scripts": {
+        "build": "tsc",
+        "start": "node dist/index.js",
+        "dev": "ts-node src/index.ts"
+    },
+    "dependencies": {
+        "commander": "^11.1.0",
+        "chalk": "^4.1.2",
+        "ts-morph": "^21.0.1",
+        "zod": "^3.22.4",
+        "node-fetch": "^3.3.2",
+        "ora": "^5.4.1",
+        "prompts": "^2.4.2"
+    },
+    "devDependencies": {
+        "@types/node": "^20.10.0",
+        "typescript": "^5.3.3",
+        "@types/prompts": "^2.4.9",
+        "@types/fs-extra": "^11.0.4",
+        "fs-extra": "^11.2.0"
+    }
+}

package/src/commands/add.ts

@@ -0,0 +1,184 @@
+
+import { Command } from "commander";
+import fetch from "node-fetch";
+import path from "path";
+import fs from "fs-extra";
+import chalk from "chalk";
+import { Project, SyntaxKind, QuoteKind } from "ts-morph";
+import { execSync } from "child_process";
+
+// Type definition for Registry (matching what we built)
+type RegistryItem = {
+    name: string;
+    dependencies: string[];
+    files: Array<{ path: string; type: string; content: string }>;
+    tailwindConfig?: Record<string, any>;
+};
+
+export async function add(componentName: string, options: { url: string }) {
+    console.log(`Fetching ${componentName} from ${options.url}...`);
+
+    // 1. Load config
+    let config;
+    try {
+        config = await fs.readJson("components.json");
+    } catch (e) {
+        console.error(chalk.red("components.json not found. Run 'init' first."));
+        process.exit(1);
+    }
+
+    // 2. Fetch registry
+    let registry: RegistryItem[];
+    try {
+        // For local testing, if url is a file path, read it
+        if (options.url.startsWith(".")) {
+            registry = await fs.readJson(options.url);
+        } else {
+            const res = await fetch(`${options.url}/registry.json`);
+            if (!res.ok) throw new Error("Failed to fetch registry");
+            registry = await res.json() as RegistryItem[];
+        }
+    } catch (e) {
+        console.error(chalk.red("Could not fetch registry.json"), e);
+        process.exit(1);
+    }
+
+    const item = registry.find((c) => c.name === componentName);
+    if (!item) {
+        console.error(chalk.red(`Component ${componentName} not found.`));
+        process.exit(1);
+    }
+
+    // 3. Install dependencies
+    if (item.dependencies.length) {
+        console.log(chalk.cyan(`Installing dependencies: ${item.dependencies.join(", ")}`));
+        try {
+            // Detect package manager - simplified
+            const pm = fs.existsSync("pnpm-lock.yaml") ? "pnpm" : fs.existsSync("yarn.lock") ? "yarn" : "npm";
+            const cmd = pm === "npm" ? "install" : "add"; // yarn add, pnpm add
+            execSync(`${pm} ${cmd} ${item.dependencies.join(" ")}`, { stdio: "inherit" });
+        } catch (e) {
+            console.warn(chalk.yellow("Failed to install dependencies automatically. Please install them manually."));
+        }
+    }
+
+    // 4. Update Tailwind Config
+    if (item.tailwindConfig) {
+        console.log(chalk.cyan("Updating tailwind.config..."));
+        await updateTailwindConfig(config.tailwind.config, item.tailwindConfig);
+    }
+
+    // 5. Write Files
+    const targetDir = path.resolve(config.paths.components || "components/ui");
+    await fs.ensureDir(targetDir);
+
+    for (const file of item.files) {
+        // We only handle ui components for now
+        if (file.type === "registry:ui") {
+            const fileName = path.basename(file.path);
+            const targetPath = path.join(targetDir, fileName);
+            await fs.writeFile(targetPath, file.content);
+            console.log(chalk.green(`Created ${fileName}`));
+        }
+        // Handle utils if needed, or other types
+    }
+}
+
+async function updateTailwindConfig(configPath: string, newConfig: any) {
+    const project = new Project({
+        manipulationSettings: {
+            quoteKind: QuoteKind.Double,
+        }
+    });
+
+    // Attempt to add the file
+    const sourceFile = project.addSourceFileAtPath(configPath);
+
+    // Simplistic handling: look for export default or module.exports
+    // We expect the config to be an object literal.
+
+    // We need to merge `newConfig.theme.extend` into the existing config.
+    // logic: find 'theme' property -> find 'extend' property -> merge properties.
+
+    const exportAssignment = sourceFile.getExportAssignment((e) => !e.isExportEquals()); // export default
+    let objectLiteral;
+
+    if (exportAssignment) {
+        objectLiteral = exportAssignment.getExpression().asKind(SyntaxKind.ObjectLiteralExpression);
+    } else {
+        // try module.exports
+        const stmt = sourceFile.getStatement((s) => {
+            if (s.getKind() === SyntaxKind.ExpressionStatement) {
+                const expr = s.asKind(SyntaxKind.ExpressionStatement)?.getExpression();
+                if (expr && expr.getKind() === SyntaxKind.BinaryExpression) {
+                    const binary = expr.asKind(SyntaxKind.BinaryExpression);
+                    const left = binary?.getLeft();
+                    if (left?.getText() === "module.exports") return true;
+                }
+            }
+            return false;
+        });
+        if (stmt) {
+            const binary = stmt.asKind(SyntaxKind.ExpressionStatement)!.getExpression().asKind(SyntaxKind.BinaryExpression)!;
+            objectLiteral = binary.getRight().asKind(SyntaxKind.ObjectLiteralExpression);
+        }
+    }
+
+    if (!objectLiteral) {
+        console.warn(chalk.yellow("Could not parse tailwind config object. Skipping update."));
+        return;
+    }
+
+    // Heuristics:
+    // newConfig is { theme: { extend: { animation: {...}, keyframes: {...} } } }
+
+    // Helper to get or create property object
+    const getOrCreateObjectProperty = (parentObj: any, name: string) => {
+        let prop = parentObj.getProperty(name);
+        if (!prop) {
+            parentObj.addPropertyAssignment({ name, initializer: "{}" });
+            prop = parentObj.getProperty(name);
+        }
+        const init = prop?.asKind(SyntaxKind.PropertyAssignment)?.getInitializer();
+        return init?.asKind(SyntaxKind.ObjectLiteralExpression);
+    };
+
+    if (newConfig.theme?.extend) {
+        const themeObj = getOrCreateObjectProperty(objectLiteral, "theme");
+        if (themeObj) {
+            const extendObj = getOrCreateObjectProperty(themeObj, "extend");
+            if (extendObj) {
+                // Merge animations
+                const animations = newConfig.theme.extend.animation;
+                if (animations) {
+                    const animObj = getOrCreateObjectProperty(extendObj, "animation");
+                    if (animObj) {
+                        for (const [key, value] of Object.entries(animations)) {
+                            if (!animObj.getProperty(key)) {
+                                animObj.addPropertyAssignment({ name: `"${key}"`, initializer: `"${value}"` });
+                            }
+                        }
+                    }
+                }
+
+                // Merge keyframes
+                const keyframes = newConfig.theme.extend.keyframes;
+                if (keyframes) {
+                    const keyframesObj = getOrCreateObjectProperty(extendObj, "keyframes");
+                    if (keyframesObj) {
+                        for (const [key, value] of Object.entries(keyframes)) {
+                            if (!keyframesObj.getProperty(key)) {
+                                // value is an object, strictly JSON stringify might be valid JS valid object literal needed?
+                                // "JSON.stringify(value)" produces valid JSON which is valid JS object literal initializer if keys are quoted.
+                                keyframesObj.addPropertyAssignment({ name: `"${key}"`, initializer: JSON.stringify(value) });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    await sourceFile.save();
+    console.log(chalk.green("Tailwind config updated successfully."));
+}

package/src/commands/init.ts

@@ -0,0 +1,62 @@
+
+import { promises as fs } from "fs";
+import path from "path";
+import prompts from "prompts";
+import chalk from "chalk";
+
+export async function init() {
+    console.log(chalk.bold.green("Initializing UniqueUI..."));
+
+    const cwd = process.cwd();
+
+    const response = await prompts([
+        {
+            type: "text",
+            name: "componentsDir",
+            message: "Where would you like to install components?",
+            initial: "components/ui",
+        },
+        {
+            type: "toggle",
+            name: "typescript",
+            message: "Are you using TypeScript?",
+            initial: true,
+            active: "yes",
+            inactive: "no",
+        },
+        {
+            type: "text",
+            name: "tailwindConfig",
+            message: "Where is your tailwind.config.js located?",
+            initial: "tailwind.config.ts",
+        },
+    ]);
+
+    const config = {
+        $schema: "https://uniqueui.com/schema.json",
+        style: "default",
+        rsc: true,
+        tsx: response.typescript,
+        tailwind: {
+            config: response.tailwindConfig,
+            css: "app/globals.css", // simplifying assumption or could ask
+            baseColor: "slate",
+            cssVariables: true,
+        },
+        aliases: {
+            components: "@/components",
+            utils: "@/lib/utils",
+        },
+        paths: {
+            components: response.componentsDir,
+            lib: "lib" // simplifying
+        }
+    };
+
+    await fs.writeFile(
+        path.join(cwd, "components.json"),
+        JSON.stringify(config, null, 2)
+    );
+
+    console.log(chalk.green("Configuration saved to components.json"));
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+import { Command } from "commander";
+import { init } from "./commands/init";
+import { add } from "./commands/add";
+
+const program = new Command();
+
+program
+    .name("uniqueui")
+    .description("Add components from UniqueUI to your project")
+    .version("0.1.0");
+
+program
+    .command("init")
+    .description("Configure your project for UniqueUI")
+    .action(init);
+
+program
+    .command("add")
+    .description("Add a component to your project")
+    .argument("<component>", "the component to add")
+    .option("--url <url>", "the base URL of the registry", "https://raw.githubusercontent.com/prashantkumarsingh/uniqueui/main")
+    .action(add);
+
+program.parse();

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./dist",
+        "rootDir": "./src"
+    },
+    "include": [
+        "src/**/*"
+    ]
+}