sdaia-ui 0.3.0

package/dist/index.js

@@ -0,0 +1,476 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/init.ts
+import fs3 from "node:fs";
+import path3 from "node:path";
+import { execSync } from "node:child_process";
+import prompts from "prompts";
+
+// src/utils/config.ts
+import fs from "node:fs";
+import path from "node:path";
+var CONFIG_FILE = "sdaia.config.json";
+function getConfigPath() {
+  return path.resolve(process.cwd(), CONFIG_FILE);
+}
+function configExists() {
+  return fs.existsSync(getConfigPath());
+}
+function readConfig() {
+  const configPath = getConfigPath();
+  if (!fs.existsSync(configPath)) {
+    throw new Error(
+      `No ${CONFIG_FILE} found. Run "npx sdaia-ui init" first.`
+    );
+  }
+  return JSON.parse(fs.readFileSync(configPath, "utf-8"));
+}
+function writeConfig(config) {
+  fs.writeFileSync(getConfigPath(), JSON.stringify(config, null, 2) + "\n");
+}
+
+// src/utils/registry.ts
+async function fetchRegistry(registryUrl) {
+  const res = await fetch(registryUrl);
+  if (!res.ok) {
+    throw new Error(`Failed to fetch registry from ${registryUrl}: ${res.status}`);
+  }
+  return res.json();
+}
+async function fetchComponentFile(registryUrl, componentName, fileName) {
+  const url = `${registryUrl}/${componentName}/${fileName}`;
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`Failed to fetch ${url}: ${res.status}`);
+  }
+  return res.text();
+}
+function resolveComponent(registry, nameOrSlug) {
+  const lower = nameOrSlug.toLowerCase();
+  return registry.components.find(
+    (c) => c.name.toLowerCase() === lower || c.slug === lower
+  );
+}
+function resolveAllDependencies(registry, componentNames) {
+  const resolved = /* @__PURE__ */ new Map();
+  const visited = /* @__PURE__ */ new Set();
+  function walk(name) {
+    if (visited.has(name)) return;
+    visited.add(name);
+    const entry = registry.components.find((c) => c.name === name);
+    if (!entry) return;
+    for (const dep of entry.internalDependencies) {
+      walk(dep);
+    }
+    resolved.set(name, entry);
+  }
+  for (const name of componentNames) {
+    walk(name);
+  }
+  return [...resolved.values()];
+}
+function collectNpmDependencies(entries) {
+  const deps = /* @__PURE__ */ new Set();
+  for (const entry of entries) {
+    for (const dep of entry.dependencies) {
+      deps.add(dep);
+    }
+  }
+  return [...deps];
+}
+
+// src/utils/package-manager.ts
+import fs2 from "node:fs";
+import path2 from "node:path";
+function detectPackageManager() {
+  const cwd = process.cwd();
+  if (fs2.existsSync(path2.join(cwd, "bun.lockb")) || fs2.existsSync(path2.join(cwd, "bun.lock"))) {
+    return "bun";
+  }
+  if (fs2.existsSync(path2.join(cwd, "pnpm-lock.yaml"))) {
+    return "pnpm";
+  }
+  if (fs2.existsSync(path2.join(cwd, "yarn.lock"))) {
+    return "yarn";
+  }
+  return "npm";
+}
+function getInstallCommand(pm, packages) {
+  const pkgs = packages.join(" ");
+  switch (pm) {
+    case "bun":
+      return `bun add ${pkgs}`;
+    case "pnpm":
+      return `pnpm add ${pkgs}`;
+    case "yarn":
+      return `yarn add ${pkgs}`;
+    default:
+      return `npm install ${pkgs}`;
+  }
+}
+
+// src/utils/logger.ts
+import pc from "picocolors";
+var logger = {
+  info: (msg) => console.log(pc.cyan("info"), msg),
+  success: (msg) => console.log(pc.green("success"), msg),
+  warn: (msg) => console.log(pc.yellow("warn"), msg),
+  error: (msg) => console.log(pc.red("error"), msg),
+  break: () => console.log("")
+};
+
+// src/commands/init.ts
+var DEFAULT_REGISTRY_URL = "https://ds.nacew.com/api/registry";
+var DEFAULT_COMPONENT_DIR = "src/components/ui";
+var DEFAULT_UTILS_DIR = "src/lib";
+function isTailwindInstalled() {
+  const pkgJsonPath = path3.resolve(process.cwd(), "package.json");
+  if (!fs3.existsSync(pkgJsonPath)) return false;
+  const pkgJson = JSON.parse(fs3.readFileSync(pkgJsonPath, "utf-8"));
+  const allDeps = {
+    ...pkgJson.dependencies,
+    ...pkgJson.devDependencies
+  };
+  return !!allDeps["tailwindcss"];
+}
+async function init() {
+  logger.break();
+  logger.info("Initializing SDAIA Design System in your project...");
+  logger.break();
+  if (configExists()) {
+    const { overwrite } = await prompts({
+      type: "confirm",
+      name: "overwrite",
+      message: "sdaia.config.json already exists. Overwrite?",
+      initial: false
+    });
+    if (!overwrite) {
+      logger.info("Init cancelled.");
+      return;
+    }
+  }
+  const response = await prompts([
+    {
+      type: "text",
+      name: "registryUrl",
+      message: "Registry URL (your docs site API):",
+      initial: DEFAULT_REGISTRY_URL
+    },
+    {
+      type: "text",
+      name: "componentDir",
+      message: "Where should components be installed?",
+      initial: DEFAULT_COMPONENT_DIR
+    },
+    {
+      type: "text",
+      name: "utilsDir",
+      message: "Where should utilities (cn.ts) be installed?",
+      initial: DEFAULT_UTILS_DIR
+    }
+  ]);
+  if (!response.registryUrl) {
+    logger.error("Init cancelled.");
+    return;
+  }
+  const config = {
+    registryUrl: response.registryUrl,
+    componentDir: response.componentDir,
+    utilsDir: response.utilsDir
+  };
+  writeConfig(config);
+  logger.success("Created sdaia.config.json");
+  const pm = detectPackageManager();
+  if (!isTailwindInstalled()) {
+    logger.warn("Tailwind CSS is not installed. Components require Tailwind CSS to work.");
+    logger.break();
+    const { installTailwind } = await prompts({
+      type: "confirm",
+      name: "installTailwind",
+      message: "Would you like to install Tailwind CSS now?",
+      initial: true
+    });
+    if (installTailwind) {
+      const tailwindDeps = ["tailwindcss", "@tailwindcss/postcss", "postcss"];
+      const tailwindCmd = getInstallCommand(pm, tailwindDeps.map((d) => `-D ${d}`));
+      logger.info("Installing Tailwind CSS...");
+      try {
+        const devFlag = pm === "npm" ? "--save-dev" : "-D";
+        const cmd = getInstallCommand(pm, [devFlag, ...tailwindDeps]);
+        execSync(cmd, { stdio: "inherit", cwd: process.cwd() });
+        logger.success("Tailwind CSS installed");
+      } catch {
+        logger.warn(
+          `Failed to auto-install Tailwind CSS. Install manually:
+  ${tailwindCmd}`
+        );
+      }
+      const postcssConfigPath = path3.resolve(process.cwd(), "postcss.config.mjs");
+      if (!fs3.existsSync(postcssConfigPath)) {
+        const postcssConfig = `/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;
+`;
+        fs3.writeFileSync(postcssConfigPath, postcssConfig);
+        logger.success("Created postcss.config.mjs");
+      }
+      const cssFiles = ["src/index.css", "src/App.css", "src/globals.css", "app/globals.css"];
+      let cssFilePath = null;
+      for (const cssFile of cssFiles) {
+        const fullPath = path3.resolve(process.cwd(), cssFile);
+        if (fs3.existsSync(fullPath)) {
+          cssFilePath = fullPath;
+          break;
+        }
+      }
+      if (cssFilePath) {
+        const cssContent = fs3.readFileSync(cssFilePath, "utf-8");
+        if (!cssContent.includes('@import "tailwindcss"') && !cssContent.includes("@import 'tailwindcss'")) {
+          fs3.writeFileSync(cssFilePath, `@import "tailwindcss";
+
+${cssContent}`);
+          logger.success(`Added Tailwind import to ${path3.relative(process.cwd(), cssFilePath)}`);
+        }
+      } else {
+        logger.warn(
+          'Could not find a CSS entry file. Add this to your main CSS file:\n  @import "tailwindcss";'
+        );
+      }
+    } else {
+      logger.break();
+      logger.warn("Skipping Tailwind CSS installation.");
+      logger.info("Components will not be styled correctly without Tailwind CSS.");
+      logger.info("Install it manually later:");
+      logger.info(`  ${getInstallCommand(pm, ["-D", "tailwindcss", "@tailwindcss/postcss", "postcss"])}`);
+      logger.info("Then add to your main CSS file:");
+      logger.info('  @import "tailwindcss";');
+    }
+  } else {
+    logger.success("Tailwind CSS detected");
+  }
+  logger.break();
+  logger.info("Installing Icon Factory (required for all components)...");
+  const iconFactoryCmd = getInstallCommand(pm, ["sdaia-ui"]);
+  try {
+    execSync(iconFactoryCmd, { stdio: "inherit", cwd: process.cwd() });
+    logger.success("Icon Factory installed");
+  } catch {
+    logger.warn(`Failed to auto-install Icon Factory. Run manually:
+  ${iconFactoryCmd}`);
+  }
+  const utilityDeps = ["tailwind-merge", "clsx", "class-variance-authority"];
+  const utilityCmd = getInstallCommand(pm, utilityDeps);
+  logger.break();
+  logger.info("Installing utility dependencies...");
+  try {
+    execSync(utilityCmd, { stdio: "inherit", cwd: process.cwd() });
+    logger.success("Utility dependencies installed");
+  } catch {
+    logger.warn(`Failed to auto-install. Run manually:
+  ${utilityCmd}`);
+  }
+  const utilsPath = path3.resolve(process.cwd(), config.utilsDir);
+  const cnPath = path3.join(utilsPath, "cn.ts");
+  if (fs3.existsSync(cnPath)) {
+    logger.info("cn.ts already exists, skipping");
+  } else {
+    try {
+      const cnSource = await fetchComponentFile(config.registryUrl, "cn", "cn.ts");
+      fs3.mkdirSync(utilsPath, { recursive: true });
+      fs3.writeFileSync(cnPath, cnSource);
+      logger.success(`Created ${path3.relative(process.cwd(), cnPath)}`);
+    } catch {
+      logger.warn("Could not download cn.ts \u2014 you may need to create it manually.");
+      const fallback = `import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+      fs3.mkdirSync(utilsPath, { recursive: true });
+      fs3.writeFileSync(cnPath, fallback);
+      logger.success(`Created ${path3.relative(process.cwd(), cnPath)} (from template)`);
+    }
+  }
+  const compPath = path3.resolve(process.cwd(), config.componentDir);
+  fs3.mkdirSync(compPath, { recursive: true });
+  logger.break();
+  logger.success("SDAIA Design System initialized!");
+  logger.break();
+  logger.info("You can now add components:");
+  logger.info("  npx sdaia-ui add button");
+  logger.info("  npx sdaia-ui add modal");
+  logger.info("  npx sdaia-ui add button modal tag");
+  logger.break();
+}
+
+// src/commands/add.ts
+import fs4 from "node:fs";
+import path5 from "node:path";
+import { execSync as execSync2 } from "node:child_process";
+
+// src/utils/transformer.ts
+import path4 from "node:path";
+function transformImports(source, componentDir, utilsDir, componentName) {
+  const componentPath = path4.posix.join(componentDir, componentName);
+  const cnRelative = path4.posix.relative(componentPath, utilsDir);
+  const cnImportPath = cnRelative ? `${cnRelative}/cn` : "./cn";
+  let result = source.replace(
+    /from\s+(['"])\.\.\/\.\.\/lib\/cn\1/g,
+    `from '${cnImportPath}'`
+  );
+  result = result.replace(
+    /from\s+(['"])\.\.\/\.\.\/icons\/[^'"]+\1/g,
+    `from 'sdaia-ui/icons'`
+  );
+  result = result.replace(
+    /from\s+(['"])\.\.\/\.\.\/hooks\/[^'"]+\1/g,
+    `from 'sdaia-ui/hooks'`
+  );
+  return result;
+}
+function ensureReactImport(source, fileName) {
+  if (!fileName.endsWith(".tsx")) return source;
+  if (/import\s+React[\s,]/m.test(source)) return source;
+  const useClientMatch = source.match(/^['"]use client['"];?\s*\n/);
+  if (useClientMatch) {
+    const directive = useClientMatch[0];
+    return directive + "import React from 'react';\n" + source.slice(directive.length);
+  }
+  return "import React from 'react';\n" + source;
+}
+
+// src/commands/add.ts
+async function add(componentSlugs, options) {
+  const config = readConfig();
+  logger.break();
+  logger.info("Fetching component registry...");
+  const registry = await fetchRegistry(config.registryUrl);
+  const requestedEntries = [];
+  for (const slug of componentSlugs) {
+    const entry = resolveComponent(registry, slug);
+    if (!entry) {
+      logger.error(
+        `Component "${slug}" not found in the registry.
+  Available: ${registry.components.map((c) => c.slug).join(", ")}`
+      );
+      return;
+    }
+    requestedEntries.push(entry);
+  }
+  const allEntries = resolveAllDependencies(
+    registry,
+    requestedEntries.map((e) => e.name)
+  );
+  const toInstall = [];
+  const alreadyExists = [];
+  for (const entry of allEntries) {
+    const compDir = path5.resolve(
+      process.cwd(),
+      config.componentDir,
+      entry.name
+    );
+    const exists = fs4.existsSync(path5.join(compDir, "index.ts"));
+    if (exists && !options.overwrite) {
+      alreadyExists.push(entry.name);
+    } else {
+      toInstall.push(entry);
+    }
+  }
+  if (alreadyExists.length > 0) {
+    logger.info(
+      `Skipping (already installed): ${alreadyExists.join(", ")}. Use --overwrite to replace.`
+    );
+  }
+  if (toInstall.length === 0) {
+    logger.success("All components are already installed.");
+    return;
+  }
+  const requested = requestedEntries.map((e) => e.name);
+  const deps = toInstall.filter((e) => !requested.includes(e.name)).map((e) => e.name);
+  logger.info(`Installing: ${toInstall.map((e) => e.name).join(", ")}`);
+  if (deps.length > 0) {
+    logger.info(`  (auto-resolved dependencies: ${deps.join(", ")})`);
+  }
+  for (const entry of toInstall) {
+    const compDir = path5.resolve(
+      process.cwd(),
+      config.componentDir,
+      entry.name
+    );
+    fs4.mkdirSync(compDir, { recursive: true });
+    for (const fileName of entry.files) {
+      let source = await fetchComponentFile(
+        config.registryUrl,
+        entry.name,
+        fileName
+      );
+      if (fileName.endsWith(".tsx") || fileName.endsWith(".ts")) {
+        source = transformImports(
+          source,
+          config.componentDir,
+          config.utilsDir,
+          entry.name
+        );
+        source = ensureReactImport(source, fileName);
+      }
+      fs4.writeFileSync(path5.join(compDir, fileName), source);
+    }
+    logger.success(
+      `  ${entry.name} \u2192 ${path5.relative(process.cwd(), compDir)}/`
+    );
+  }
+  const npmDeps = collectNpmDependencies(toInstall);
+  const baseDeps = ["clsx", "tailwind-merge"];
+  const allDeps = [.../* @__PURE__ */ new Set([...npmDeps, ...baseDeps])];
+  const pkgJsonPath = path5.resolve(process.cwd(), "package.json");
+  let missingDeps = allDeps;
+  if (fs4.existsSync(pkgJsonPath)) {
+    const pkgJson = JSON.parse(fs4.readFileSync(pkgJsonPath, "utf-8"));
+    const installed = {
+      ...pkgJson.dependencies,
+      ...pkgJson.devDependencies
+    };
+    missingDeps = allDeps.filter((dep) => !installed[dep]);
+  }
+  if (missingDeps.length > 0) {
+    const pm = detectPackageManager();
+    const cmd = getInstallCommand(pm, missingDeps);
+    logger.info(`Installing npm dependencies: ${missingDeps.join(", ")}`);
+    try {
+      execSync2(cmd, { stdio: "inherit", cwd: process.cwd() });
+    } catch {
+      logger.warn(`Failed to auto-install. Run manually:
+  ${cmd}`);
+    }
+  }
+  logger.break();
+  logger.success("Done! Components are ready to use.");
+  logger.break();
+  const first = requestedEntries[0];
+  if (first) {
+    logger.info("Import example:");
+    logger.info(
+      `  import { ${first.name} } from './${config.componentDir}/${first.name}';`
+    );
+    logger.break();
+  }
+}
+
+// src/index.ts
+var program = new Command();
+program.name("sdaia-ui").description("Install SDAIA Design System components into your project").version("0.1.0");
+program.command("init").description("Initialize your project for SDAIA Design System components").action(init);
+program.command("add").description("Add components to your project").argument("<components...>", "Component names (e.g. button modal tag)").option("--overwrite", "Overwrite existing components", false).action((components, options) => {
+  add(components, options);
+});
+program.parse();

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "sdaia-ui",
+  "version": "0.3.0",
+  "description": "CLI for installing SDAIA Design System components into your project",
+  "type": "module",
+  "bin": {
+    "sdaia-ui": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node build.mjs",
+    "dev": "node build.mjs --watch"
+  },
+  "dependencies": {
+    "commander": "^13.1.0",
+    "prompts": "^2.4.2",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/prompts": "^2.4.9",
+    "@types/node": "^22.0.0",
+    "esbuild": "^0.25.0",
+    "typescript": "^5.8.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "license": "MIT"
+}