@dinachi/cli 0.1.0

package/dist/index.js

@@ -0,0 +1,643 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command as Command3 } from "commander";
+
+// src/commands/add.ts
+import { Command } from "commander";
+import { execSync } from "child_process";
+import fs2 from "fs-extra";
+import path2 from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+import ora from "ora";
+import chalk from "chalk";
+
+// src/utils/registry.ts
+import fs from "fs-extra";
+import path from "path";
+import { fileURLToPath } from "url";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path.dirname(__filename);
+function getUtilityRegistry() {
+  return {
+    cn: {
+      name: "utils",
+      dependencies: [
+        "clsx",
+        "tailwind-merge"
+      ]
+    },
+    variants: {
+      name: "variants",
+      dependencies: [
+        "class-variance-authority"
+      ]
+    }
+  };
+}
+function getComponentRegistry() {
+  return {
+    button: {
+      name: "button",
+      description: "A customizable button component with multiple variants",
+      files: [
+        { name: "button.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react",
+        "class-variance-authority"
+      ],
+      componentDependencies: ["core"],
+      utilityDependencies: ["cn", "variants"]
+    },
+    input: {
+      name: "input",
+      description: "A customizable input field component with variants and sizes",
+      files: [
+        { name: "input.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    field: {
+      name: "field",
+      description: "A component for building accessible forms with custom styling and validation.",
+      files: [
+        { name: "field.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    form: {
+      name: "form",
+      description: "A native form element with consolidated error handling, built on Base UI foundation.",
+      files: [
+        { name: "form.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    "alert-dialog": {
+      name: "alert-dialog",
+      description: "A modal dialog that interrupts the user with important content and expects a response.",
+      files: [
+        { name: "alert-dialog.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react/alert-dialog",
+        "lucide-react"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    accordion: {
+      name: "accordion",
+      description: "A vertically stacked set of interactive headings that each reveal a section of content.",
+      files: [
+        { name: "accordion.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react",
+        "lucide-react",
+        "tailwindcss-animate"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    tabs: {
+      name: "tabs",
+      description: "A component for toggling between related panels on the same page.",
+      files: [
+        { name: "tabs.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    slider: {
+      name: "slider",
+      description: "An input where the user selects a value from within a given range.",
+      files: [
+        { name: "slider.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    avatar: {
+      name: "avatar",
+      description: "An image element with a fallback for representing a user.",
+      files: [
+        { name: "avatar.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react",
+        "class-variance-authority"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    checkbox: {
+      name: "checkbox",
+      description: "A control that allows the user to select one or more options from a set.",
+      files: [
+        { name: "checkbox.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react",
+        "lucide-react"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    "checkbox-group": {
+      name: "checkbox-group",
+      description: "A group of checkboxes that share a common state.",
+      files: [
+        { name: "checkbox-group.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react"
+      ],
+      componentDependencies: ["checkbox"],
+      utilityDependencies: ["cn"]
+    },
+    "collapsible": {
+      name: "collapsible",
+      description: "A collapsible panel controlled by a button.",
+      files: [
+        { name: "collapsible.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react",
+        "tailwindcss-animate"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    dialog: {
+      name: "dialog",
+      description: "A popup that opens on top of the entire page, providing a modal interface for user interactions.",
+      files: [
+        { name: "dialog.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    toast: {
+      name: "toast",
+      description: "Generates toast notifications with support for different types, promises, actions, and global management.",
+      files: [
+        { name: "toast.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react",
+        "class-variance-authority"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    select: {
+      name: "select",
+      description: "A common form component for choosing a predefined value in a dropdown menu.",
+      files: [
+        { name: "select.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react",
+        "lucide-react"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    "context-menu": {
+      name: "context-menu",
+      description: "A menu that appears at the pointer on right click or long press.",
+      files: [
+        { name: "context-menu.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react",
+        "lucide-react"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    menubar: {
+      name: "menubar",
+      description: "A visually persistent menu common in desktop applications that provides access to a consistent set of commands.",
+      files: [
+        { name: "menubar.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react",
+        "lucide-react"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    "navigation-menu": {
+      name: "navigation-menu",
+      description: "A collection of links and menus for website navigation.",
+      files: [
+        { name: "navigation-menu.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react",
+        "lucide-react"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    "preview-card": {
+      name: "preview-card",
+      description: "A popup that appears when a link is hovered, showing a preview for sighted users.",
+      files: [
+        { name: "preview-card.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    toggle: {
+      name: "toggle",
+      description: "A two-state button that can be on or off.",
+      files: [
+        { name: "toggle.tsx" },
+        { name: "index.ts" }
+      ],
+      dependencies: [
+        "@base-ui-components/react",
+        "class-variance-authority"
+      ],
+      utilityDependencies: ["cn"]
+    },
+    "toolbar": {
+      "name": "toolbar",
+      "description": "A container for grouping a set of controls, such as buttons, toggle groups, or dropdown menus.",
+      "files": [
+        {
+          "name": "toolbar.tsx"
+        },
+        {
+          "name": "index.ts"
+        }
+      ],
+      "dependencies": [
+        "@base-ui-components/react"
+      ],
+      "utilityDependencies": [
+        "cn"
+      ]
+    },
+    "tooltip": {
+      "name": "tooltip",
+      "description": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+      "files": [
+        {
+          "name": "tooltip.tsx"
+        },
+        {
+          "name": "index.ts"
+        }
+      ],
+      "dependencies": [
+        "@base-ui-components/react"
+      ],
+      "utilityDependencies": [
+        "cn"
+      ]
+    }
+  };
+}
+async function getConfig() {
+  const configPath = path.join(process.cwd(), "components.json");
+  if (!fs.existsSync(configPath)) {
+    return null;
+  }
+  try {
+    const configContent = await fs.readFile(configPath, "utf-8");
+    return JSON.parse(configContent);
+  } catch (error) {
+    return null;
+  }
+}
+
+// src/commands/add.ts
+var __filename2 = fileURLToPath2(import.meta.url);
+var __dirname2 = path2.dirname(__filename2);
+function getComponentDependencies(componentName) {
+  const registry = getComponentRegistry();
+  const component = registry[componentName];
+  if (!component) return [];
+  let dependencies = component.componentDependencies || [];
+  for (const dep of component.componentDependencies || []) {
+    dependencies = [...dependencies, ...getComponentDependencies(dep)];
+  }
+  return [...new Set(dependencies)];
+}
+async function ensureTailwindConfig(deps) {
+  const needsAnimatePlugin = deps.includes("tailwindcss-animate");
+  if (!needsAnimatePlugin) return;
+  const configPath = path2.join(process.cwd(), "tailwind.config.js");
+  if (!fs2.existsSync(configPath)) {
+    const configContent = `/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require("tailwindcss-animate"),
+  ],
+};`;
+    await fs2.writeFile(configPath, configContent);
+    return { created: true };
+  } else {
+    const configContent = await fs2.readFile(configPath, "utf-8");
+    if (!configContent.includes("tailwindcss-animate")) {
+      let updatedContent = configContent;
+      if (configContent.includes("plugins:")) {
+        updatedContent = configContent.replace(
+          /plugins:\s*\[([\s\S]*?)\]/,
+          (match, pluginsContent) => {
+            const cleanPlugins = pluginsContent.trim();
+            const newPlugin = 'require("tailwindcss-animate")';
+            if (cleanPlugins === "") {
+              return `plugins: [
+    ${newPlugin},
+  ]`;
+            } else {
+              return `plugins: [
+${pluginsContent},
+    ${newPlugin},
+  ]`;
+            }
+          }
+        );
+      } else {
+        updatedContent = configContent.replace(
+          /}\s*;?\s*$/,
+          '  plugins: [\n    require("tailwindcss-animate"),\n  ],\n};'
+        );
+      }
+      await fs2.writeFile(configPath, updatedContent);
+      return { updated: true };
+    }
+  }
+  return { exists: true };
+}
+var addCommand = new Command("add").description("Add a component to your project").argument("<component>", "Name of the component").option("-y, --yes", "Skip confirmation prompts").option("-o, --overwrite", "Overwrite existing files").action(async (componentName, options) => {
+  const spinner = ora("Adding component...").start();
+  try {
+    const config = await getConfig();
+    if (!config) {
+      spinner.fail("\u274C No components.json found. Run `dinachi init` first.");
+      process.exit(1);
+    }
+    const registry = getComponentRegistry();
+    const component = registry[componentName];
+    if (!component) {
+      spinner.fail(`\u274C Component "${componentName}" not found.`);
+      console.log("Available components:");
+      Object.keys(registry).forEach((name) => {
+        console.log(`  ${chalk.cyan(name)}`);
+      });
+      process.exit(1);
+    }
+    const componentsToInstall = [componentName, ...getComponentDependencies(componentName)];
+    spinner.text = `Installing ${componentsToInstall.join(", ")}...`;
+    const componentDir = path2.join(process.cwd(), config.aliases.components);
+    await fs2.ensureDir(componentDir);
+    let allFilesAdded = [];
+    let allDepsInstalled = [];
+    let allUtilityDeps = [];
+    for (const name of componentsToInstall) {
+      const comp = registry[name];
+      if (!comp) continue;
+      if (comp.utilityDependencies?.length) {
+        allUtilityDeps.push(...comp.utilityDependencies);
+      }
+    }
+    const utilityRegistry = getUtilityRegistry();
+    const uniqueUtilityDeps = [...new Set(allUtilityDeps)];
+    const utilsDir = path2.join(process.cwd(), config.aliases.utils);
+    if (uniqueUtilityDeps.length > 0) {
+      await fs2.ensureDir(utilsDir);
+      for (const utilityName of uniqueUtilityDeps) {
+        const utility = utilityRegistry[utilityName];
+        if (!utility) continue;
+        const utilityFilename = `${utility.name}.ts`;
+        const sourcePath = path2.join(__dirname2, "../templates/utils", utilityFilename);
+        const targetPath = path2.join(utilsDir, utilityFilename);
+        if (!fs2.existsSync(targetPath)) {
+          let content = await fs2.readFile(sourcePath, "utf-8");
+          content = content.replace(/^\/\/ @ts-nocheck\s*\n/m, "");
+          await fs2.writeFile(targetPath, content);
+          allFilesAdded.push({
+            name: utilityFilename,
+            path: path2.join(config.aliases.utils, utilityFilename)
+          });
+          if (utility.dependencies?.length) {
+            allDepsInstalled.push(...utility.dependencies);
+          }
+        }
+      }
+    }
+    for (const name of componentsToInstall) {
+      const comp = registry[name];
+      if (!comp) continue;
+      for (const file of comp.files) {
+        const sourcePath = path2.join(__dirname2, "../templates", name, file.name);
+        const targetPath = path2.join(componentDir, file.name);
+        if (fs2.existsSync(targetPath) && !options.overwrite) {
+          spinner.warn(`\u26A0\uFE0F  ${file.name} already exists. Use --overwrite to replace it.`);
+          continue;
+        }
+        let content = await fs2.readFile(sourcePath, "utf-8");
+        content = content.replace(/^\/\/ @ts-nocheck\s*\n/m, "");
+        await fs2.writeFile(targetPath, content);
+        allFilesAdded.push({ name: file.name, path: path2.join(config.aliases.components, file.name) });
+      }
+      if (comp.dependencies?.length) {
+        allDepsInstalled.push(...comp.dependencies);
+      }
+    }
+    let tailwindConfigInfo = null;
+    if (allDepsInstalled.includes("tailwindcss-animate")) {
+      spinner.text = "Updating Tailwind configuration...";
+      tailwindConfigInfo = await ensureTailwindConfig(allDepsInstalled);
+    }
+    if (allDepsInstalled.length > 0) {
+      spinner.text = "Installing dependencies...";
+      const packageJsonPath = path2.join(process.cwd(), "package.json");
+      const packageJson = JSON.parse(await fs2.readFile(packageJsonPath, "utf-8"));
+      const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+      const missingDeps = [...new Set(allDepsInstalled)].filter((dep) => !allDeps[dep]);
+      if (missingDeps.length > 0) {
+        try {
+          const packageManager = getPackageManager();
+          const installCmd = `${packageManager} ${packageManager === "npm" ? "install" : "add"} ${missingDeps.join(" ")}`;
+          execSync(installCmd, { stdio: "inherit" });
+        } catch (error) {
+          spinner.warn(`\u26A0\uFE0F  Failed to install dependencies. Please install manually: ${missingDeps.join(" ")}`);
+        }
+      }
+    }
+    spinner.succeed(`\u2705 Added ${componentsToInstall.join(", ")} component(s)!`);
+    console.log();
+    console.log("Files added:");
+    allFilesAdded.forEach((file) => {
+      console.log(`  ${chalk.green("+")} ${file.path}`);
+    });
+    if (tailwindConfigInfo) {
+      console.log();
+      if (tailwindConfigInfo.created) {
+        console.log(`  ${chalk.green("+")} tailwind.config.js (created with tailwindcss-animate plugin)`);
+      } else if (tailwindConfigInfo.updated) {
+        console.log(`  ${chalk.blue("~")} tailwind.config.js (updated with tailwindcss-animate plugin)`);
+      }
+    }
+    if (allDepsInstalled.length > 0) {
+      console.log();
+      console.log("Dependencies installed:");
+      [...new Set(allDepsInstalled)].forEach((dep) => {
+        console.log(`  ${chalk.green("\u2713")} ${dep}`);
+      });
+    }
+  } catch (error) {
+    spinner.fail(`\u274C Failed to add component: ${error instanceof Error ? error.message : error}`);
+    process.exit(1);
+  }
+});
+function getPackageManager() {
+  if (fs2.existsSync("pnpm-lock.yaml")) return "pnpm";
+  if (fs2.existsSync("yarn.lock")) return "yarn";
+  return "npm";
+}
+
+// src/commands/init.ts
+import { Command as Command2 } from "commander";
+import { execSync as execSync2 } from "child_process";
+import fs3 from "fs-extra";
+import path3 from "path";
+import prompts from "prompts";
+import chalk2 from "chalk";
+import ora2 from "ora";
+var initCommand = new Command2("init").description("Initialize Dinachi UI in your project").action(async () => {
+  console.log(chalk2.bold.cyan("\u{1F3A8} Welcome to Dinachi UI!"));
+  console.log();
+  const packageJsonPath = path3.join(process.cwd(), "package.json");
+  if (!fs3.existsSync(packageJsonPath)) {
+    console.log(chalk2.red("\u274C No package.json found. Please run this command in a valid project."));
+    process.exit(1);
+  }
+  const response = await prompts([
+    {
+      type: "text",
+      name: "componentsPath",
+      message: "Where would you like to install components?",
+      initial: "./src/components/ui"
+    },
+    {
+      type: "text",
+      name: "utilsPath",
+      message: "Where would you like to install utilities?",
+      initial: "./src/lib/utils.ts"
+    },
+    {
+      type: "confirm",
+      name: "installDeps",
+      message: "Install required dependencies?",
+      initial: true
+    }
+  ]);
+  if (!response.componentsPath || !response.utilsPath) {
+    console.log(chalk2.red("\u274C Setup cancelled."));
+    process.exit(1);
+  }
+  const spinner = ora2("Setting up Dinachi UI...").start();
+  try {
+    await fs3.ensureDir(path3.dirname(response.componentsPath));
+    await fs3.ensureDir(path3.dirname(response.utilsPath));
+    const utilsContent = `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+    await fs3.writeFile(response.utilsPath, utilsContent);
+    if (response.installDeps) {
+      spinner.text = "Installing dependencies...";
+      const deps = [
+        "class-variance-authority",
+        "clsx",
+        "tailwind-merge"
+      ];
+      const packageManager = getPackageManager2();
+      const installCmd = `${packageManager} ${packageManager === "npm" ? "install" : "add"} ${deps.join(" ")}`;
+      execSync2(installCmd, { stdio: "inherit" });
+    }
+    const configContent = `{
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "${response.componentsPath}",
+    "utils": "${response.utilsPath.replace(".ts", "")}"
+  }
+}`;
+    await fs3.writeFile("components.json", configContent);
+    spinner.succeed("\u2705 Dinachi UI setup complete!");
+    console.log();
+    console.log("Next steps:");
+    console.log(`  1. Add a component: ${chalk2.cyan("npx dinachi add button")}`);
+    console.log(`  2. Components will be installed to: ${chalk2.cyan(response.componentsPath)}`);
+    console.log(`  3. Utils available at: ${chalk2.cyan(response.utilsPath)}`);
+  } catch (error) {
+    spinner.fail(`\u274C Setup failed: ${error.message}`);
+    process.exit(1);
+  }
+});
+function getPackageManager2() {
+  if (fs3.existsSync("pnpm-lock.yaml")) return "pnpm";
+  if (fs3.existsSync("yarn.lock")) return "yarn";
+  return "npm";
+}
+
+// src/index.ts
+var program = new Command3();
+program.name("dinachi").description("Add Dinachi UI components to your project").version("0.1.0");
+program.addCommand(addCommand).addCommand(initCommand);
+program.parse();

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@dinachi/cli",
+  "version": "0.1.0",
+  "description": "CLI for adding Dinachi UI components to your project",
+  "type": "module",
+  "keywords": [
+    "ui",
+    "components",
+    "cli",
+    "dinachi",
+    "react",
+    "tailwind"
+  ],
+  "author": "Dinachi Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dinachi/ui"
+  },
+  "homepage": "https://dinachi.dev",
+  "bin": {
+    "dinachi": "./dist/index.js",
+    "dinachi-ui": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "dependencies": {
+    "commander": "^11.1.0",
+    "chalk": "^5.3.0",
+    "ora": "^7.0.1",
+    "prompts": "^2.4.2",
+    "fs-extra": "^11.2.0",
+    "node-fetch": "^3.3.2",
+    "execa": "^8.0.1",
+    "ts-morph": "^20.0.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.0.1",
+    "typescript": "^5.5.3"
+  },
+  "peerDependencies": {
+    "typescript": ">=4.5.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "dev": "tsup src/index.ts --format esm --dts --watch",
+    "type-check": "tsc --noEmit"
+  }
+}