@soadtech/cli 0.1.0

package/dist/index.js

@@ -0,0 +1,272 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/init.ts
+import { resolve as resolve3 } from "path";
+import { copyFileSync, mkdirSync, existsSync as existsSync2 } from "fs";
+import { execSync } from "child_process";
+import prompts from "prompts";
+
+// src/utils/config.ts
+import { readFileSync, writeFileSync, existsSync } from "fs";
+import { resolve } from "path";
+var CONFIG_FILE = "components.json";
+function getConfigPath(cwd) {
+  return resolve(cwd, CONFIG_FILE);
+}
+function readConfig(cwd) {
+  const configPath = getConfigPath(cwd);
+  if (!existsSync(configPath)) return null;
+  return JSON.parse(readFileSync(configPath, "utf-8"));
+}
+function writeConfig(cwd, config) {
+  const configPath = getConfigPath(cwd);
+  writeFileSync(configPath, JSON.stringify(config, null, 2) + "\n");
+}
+
+// src/registry.ts
+import { readFileSync as readFileSync2 } from "fs";
+import { resolve as resolve2, dirname } from "path";
+import { fileURLToPath } from "url";
+function getRegistryDir() {
+  const currentDir = dirname(fileURLToPath(import.meta.url));
+  return resolve2(currentDir, "../registry");
+}
+function loadRegistry() {
+  const registryPath = resolve2(getRegistryDir(), "registry.json");
+  return JSON.parse(readFileSync2(registryPath, "utf-8"));
+}
+function getComponentSourceDir(componentName) {
+  return resolve2(getRegistryDir(), "components", componentName);
+}
+function getBaseDir() {
+  return resolve2(getRegistryDir(), "base");
+}
+function resolveTransitiveDeps(registry, componentNames) {
+  const resolved = /* @__PURE__ */ new Set();
+  const queue = [...componentNames];
+  while (queue.length > 0) {
+    const name = queue.pop();
+    if (resolved.has(name)) continue;
+    const component = registry.components[name];
+    if (!component) {
+      throw new Error(`Component "${name}" not found in registry.`);
+    }
+    resolved.add(name);
+    for (const dep of component.dependencies) {
+      if (!resolved.has(dep)) {
+        queue.push(dep);
+      }
+    }
+  }
+  return [...resolved].sort();
+}
+
+// src/utils/logger.ts
+import pc from "picocolors";
+var logger = {
+  info: (...args) => console.log(pc.cyan("info"), ...args),
+  success: (...args) => console.log(pc.green("success"), ...args),
+  warn: (...args) => console.log(pc.yellow("warn"), ...args),
+  error: (...args) => console.log(pc.red("error"), ...args)
+};
+
+// src/commands/init.ts
+var DEFAULTS = {
+  components: "src/components/ui",
+  utils: "src/lib",
+  theme: "src/styles"
+};
+function detectPackageManager(cwd) {
+  if (existsSync2(resolve3(cwd, "bun.lockb")) || existsSync2(resolve3(cwd, "bun.lock"))) return "bun";
+  if (existsSync2(resolve3(cwd, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync2(resolve3(cwd, "yarn.lock"))) return "yarn";
+  return "npm";
+}
+async function init(options) {
+  const { cwd } = options;
+  if (existsSync2(getConfigPath(cwd))) {
+    logger.warn("components.json already exists. Overwriting.");
+  }
+  let aliases = DEFAULTS;
+  if (!options.yes) {
+    const response = await prompts([
+      {
+        type: "text",
+        name: "components",
+        message: "Components directory:",
+        initial: DEFAULTS.components
+      },
+      {
+        type: "text",
+        name: "utils",
+        message: "Utils directory:",
+        initial: DEFAULTS.utils
+      },
+      {
+        type: "text",
+        name: "theme",
+        message: "Theme directory:",
+        initial: DEFAULTS.theme
+      }
+    ]);
+    if (!response.components) {
+      logger.error("Cancelled.");
+      process.exit(1);
+    }
+    aliases = {
+      components: response.components,
+      utils: response.utils,
+      theme: response.theme
+    };
+  }
+  const baseDir = getBaseDir();
+  const themeDir = resolve3(cwd, aliases.theme);
+  mkdirSync(themeDir, { recursive: true });
+  copyFileSync(
+    resolve3(baseDir, "theme/tokens.css"),
+    resolve3(themeDir, "tokens.css")
+  );
+  logger.success(`Copied tokens.css \u2192 ${aliases.theme}/tokens.css`);
+  const utilsDir = resolve3(cwd, aliases.utils);
+  mkdirSync(utilsDir, { recursive: true });
+  copyFileSync(resolve3(baseDir, "cn.ts"), resolve3(utilsDir, "cn.ts"));
+  logger.success(`Copied cn.ts \u2192 ${aliases.utils}/cn.ts`);
+  copyFileSync(
+    resolve3(baseDir, "css-modules.d.ts"),
+    resolve3(cwd, "css-modules.d.ts")
+  );
+  logger.success("Copied css-modules.d.ts \u2192 project root");
+  mkdirSync(resolve3(cwd, aliases.components), { recursive: true });
+  const pm = detectPackageManager(cwd);
+  const pkgJsonPath = resolve3(cwd, "package.json");
+  if (existsSync2(pkgJsonPath)) {
+    const pkg = JSON.parse(
+      (await import("fs")).readFileSync(pkgJsonPath, "utf-8")
+    );
+    const allDeps = {
+      ...pkg.dependencies,
+      ...pkg.devDependencies
+    };
+    if (!allDeps["clsx"]) {
+      logger.info(`Installing clsx with ${pm}...`);
+      const installCmd = pm === "npm" ? "npm install clsx" : `${pm} add clsx`;
+      execSync(installCmd, { cwd, stdio: "inherit" });
+    }
+  }
+  writeConfig(cwd, { aliases });
+  logger.success("Created components.json");
+  logger.info("Run `npx @soadtech/cli add <component>` to add components.");
+}
+
+// src/commands/add.ts
+import { resolve as resolve4 } from "path";
+import prompts2 from "prompts";
+
+// src/utils/fs.ts
+import { cpSync, existsSync as existsSync3, mkdirSync as mkdirSync2 } from "fs";
+function copyDir(src, dest) {
+  mkdirSync2(dest, { recursive: true });
+  cpSync(src, dest, { recursive: true });
+}
+function exists(path) {
+  return existsSync3(path);
+}
+
+// src/transform.ts
+import { readFileSync as readFileSync3, writeFileSync as writeFileSync2, readdirSync } from "fs";
+import { join, relative, dirname as dirname2 } from "path";
+function rewriteImports(componentDir, utilsDir) {
+  const files = readdirSync(componentDir).filter(
+    (f) => f.endsWith(".ts") || f.endsWith(".tsx")
+  );
+  for (const file of files) {
+    const filePath = join(componentDir, file);
+    let content = readFileSync3(filePath, "utf-8");
+    const fromDir = dirname2(filePath);
+    const targetCn = join(utilsDir, "cn");
+    let rel = relative(fromDir, targetCn);
+    rel = rel.split("\\").join("/");
+    if (!rel.startsWith(".")) rel = "./" + rel;
+    content = content.replace(
+      /from\s+['"]\.\.\/\.\.\/utils\/cn['"]/g,
+      `from '${rel}'`
+    );
+    writeFileSync2(filePath, content, "utf-8");
+  }
+}
+
+// src/commands/add.ts
+async function add(componentNames, options) {
+  const { cwd } = options;
+  const config = readConfig(cwd);
+  if (!config) {
+    logger.error(
+      "components.json not found. Run `npx @soadtech/cli init` first."
+    );
+    process.exit(1);
+  }
+  const registry = loadRegistry();
+  for (const name of componentNames) {
+    if (!registry.components[name]) {
+      logger.error(
+        `Component "${name}" not found. Available: ${Object.keys(registry.components).join(", ")}`
+      );
+      process.exit(1);
+    }
+  }
+  const allComponents = resolveTransitiveDeps(registry, componentNames);
+  const componentsDir = resolve4(cwd, config.aliases.components);
+  const existing = allComponents.filter(
+    (name) => exists(resolve4(componentsDir, name))
+  );
+  const toInstall = options.overwrite ? allComponents : allComponents.filter((name) => !existing.includes(name));
+  if (existing.length > 0 && !options.overwrite) {
+    logger.info(
+      `Skipping existing: ${existing.join(", ")} (use --overwrite to replace)`
+    );
+  }
+  if (toInstall.length === 0) {
+    logger.info("All components already installed.");
+    return;
+  }
+  if (!options.yes) {
+    logger.info(`Components to install: ${toInstall.join(", ")}`);
+    const { confirm } = await prompts2({
+      type: "confirm",
+      name: "confirm",
+      message: "Proceed?",
+      initial: true
+    });
+    if (!confirm) {
+      logger.error("Cancelled.");
+      process.exit(1);
+    }
+  }
+  const utilsDir = resolve4(cwd, config.aliases.utils);
+  for (const name of toInstall) {
+    const src = getComponentSourceDir(name);
+    const dest = resolve4(componentsDir, name);
+    copyDir(src, dest);
+    rewriteImports(dest, utilsDir);
+    logger.success(`Added ${name}`);
+  }
+  logger.info(`Done. ${toInstall.length} component(s) installed.`);
+}
+
+// src/index.ts
+var program = new Command();
+program.name("soadtech").description("Add soadtech-ui components to your project").version("0.1.0");
+program.command("init").description("Initialize your project for soadtech-ui components").option("-y, --yes", "Use default configuration", false).option("--cwd <path>", "Working directory", process.cwd()).action(async (opts) => {
+  await init({ yes: opts.yes, cwd: opts.cwd });
+});
+program.command("add").description("Add components to your project").argument("<components...>", "Components to add").option("--overwrite", "Overwrite existing components", false).option("-y, --yes", "Skip confirmation", false).option("--cwd <path>", "Working directory", process.cwd()).action(async (components, opts) => {
+  await add(components, {
+    overwrite: opts.overwrite,
+    yes: opts.yes,
+    cwd: opts.cwd
+  });
+});
+program.parse();

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@soadtech/cli",
+  "version": "0.1.0",
+  "type": "module",
+  "bin": {
+    "soadtech": "./dist/index.js"
+  },
+  "files": ["dist", "registry"],
+  "scripts": {
+    "prebuild": "tsx scripts/copy-source.ts",
+    "build": "tsup"
+  },
+  "dependencies": {
+    "commander": "^13.1.0",
+    "picocolors": "^1.1.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.4.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.3"
+  }
+}

package/registry/base/cn.ts

@@ -0,0 +1,5 @@
+import clsx, { type ClassValue } from 'clsx';
+
+export function cn(...inputs: ClassValue[]): string {
+  return clsx(inputs);
+}

package/registry/base/css-modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

package/registry/base/theme/reset.css

@@ -0,0 +1,43 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+body {
+  line-height: var(--st-line-height-normal);
+  -webkit-font-smoothing: antialiased;
+  font-family: var(--st-font-family);
+  color: var(--st-color-foreground);
+  background-color: var(--st-color-background);
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}

package/registry/base/theme/tokens.css

@@ -0,0 +1,154 @@
+:root {
+  /* ─── Colors: Primary ─── */
+  --st-color-primary: #2563eb;
+  --st-color-primary-hover: #1d4ed8;
+  --st-color-primary-active: #1e40af;
+  --st-color-primary-subtle: #eff6ff;
+  --st-color-primary-foreground: #ffffff;
+
+  /* ─── Colors: Secondary ─── */
+  --st-color-secondary: #7c3aed;
+  --st-color-secondary-hover: #6d28d9;
+  --st-color-secondary-active: #5b21b6;
+  --st-color-secondary-subtle: #f5f3ff;
+  --st-color-secondary-foreground: #ffffff;
+
+  /* ─── Colors: Tertiary ─── */
+  --st-color-tertiary: #ec4899;
+  --st-color-tertiary-hover: #db2777;
+  --st-color-tertiary-active: #be185d;
+  --st-color-tertiary-subtle: #fdf2f8;
+  --st-color-tertiary-foreground: #ffffff;
+
+  /* ─── Colors: Neutral scale ─── */
+  --st-color-neutral-50: #fafafa;
+  --st-color-neutral-100: #f5f5f5;
+  --st-color-neutral-200: #e5e5e5;
+  --st-color-neutral-300: #d4d4d4;
+  --st-color-neutral-400: #a3a3a3;
+  --st-color-neutral-500: #737373;
+  --st-color-neutral-600: #525252;
+  --st-color-neutral-700: #404040;
+  --st-color-neutral-800: #262626;
+  --st-color-neutral-900: #171717;
+  --st-color-neutral-950: #0a0a0a;
+
+  /* ─── Colors: Semantic ─── */
+  --st-color-success: #16a34a;
+  --st-color-success-hover: #15803d;
+  --st-color-success-subtle: #f0fdf4;
+  --st-color-success-foreground: #ffffff;
+
+  --st-color-warning: #d97706;
+  --st-color-warning-hover: #b45309;
+  --st-color-warning-subtle: #fffbeb;
+  --st-color-warning-foreground: #ffffff;
+
+  --st-color-error: #dc2626;
+  --st-color-error-hover: #b91c1c;
+  --st-color-error-subtle: #fef2f2;
+  --st-color-error-foreground: #ffffff;
+
+  --st-color-info: #0284c7;
+  --st-color-info-hover: #0369a1;
+  --st-color-info-subtle: #f0f9ff;
+  --st-color-info-foreground: #ffffff;
+
+  /* ─── Colors: Surfaces & Borders ─── */
+  --st-color-background: #ffffff;
+  --st-color-foreground: #0a0a0a;
+  --st-color-surface: #ffffff;
+  --st-color-surface-raised: #fafafa;
+  --st-color-border: #e5e5e5;
+  --st-color-border-strong: #d4d4d4;
+  --st-color-muted: #737373;
+  --st-color-overlay: rgb(0 0 0 / 0.5);
+
+  /* ─── Typography ─── */
+  --st-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --st-font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+
+  --st-font-size-xs: 0.75rem;
+  --st-font-size-sm: 0.875rem;
+  --st-font-size-md: 1rem;
+  --st-font-size-lg: 1.125rem;
+  --st-font-size-xl: 1.25rem;
+  --st-font-size-2xl: 1.5rem;
+  --st-font-size-3xl: 1.875rem;
+  --st-font-size-4xl: 2.25rem;
+
+  --st-font-weight-normal: 400;
+  --st-font-weight-medium: 500;
+  --st-font-weight-semibold: 600;
+  --st-font-weight-bold: 700;
+
+  --st-line-height-tight: 1.25;
+  --st-line-height-normal: 1.5;
+  --st-line-height-relaxed: 1.75;
+
+  /* ─── Spacing (4px increments) ─── */
+  --st-space-0: 0;
+  --st-space-1: 0.25rem;
+  --st-space-2: 0.5rem;
+  --st-space-3: 0.75rem;
+  --st-space-4: 1rem;
+  --st-space-5: 1.25rem;
+  --st-space-6: 1.5rem;
+  --st-space-7: 1.75rem;
+  --st-space-8: 2rem;
+  --st-space-9: 2.25rem;
+  --st-space-10: 2.5rem;
+  --st-space-11: 2.75rem;
+  --st-space-12: 3rem;
+  --st-space-13: 3.25rem;
+  --st-space-14: 3.5rem;
+  --st-space-15: 3.75rem;
+  --st-space-16: 4rem;
+
+  /* ─── Border Radius ─── */
+  --st-radius-none: 0;
+  --st-radius-sm: 0.25rem;
+  --st-radius-md: 0.375rem;
+  --st-radius-lg: 0.5rem;
+  --st-radius-xl: 0.75rem;
+  --st-radius-2xl: 1rem;
+  --st-radius-full: 9999px;
+
+  /* ─── Shadows ─── */
+  --st-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --st-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --st-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --st-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --st-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* ─── Transitions ─── */
+  --st-transition-fast: 100ms ease;
+  --st-transition-base: 200ms ease;
+  --st-transition-slow: 300ms ease;
+
+  /* ─── Chart Colors ─── */
+  --st-color-chart-1: #22c55e;
+  --st-color-chart-1-subtle: #dcfce7;
+  --st-color-chart-1-muted: #86efac;
+  --st-color-chart-1-faded: #bbf7d0;
+  --st-color-chart-2: #3b82f6;
+  --st-color-chart-2-subtle: #dbeafe;
+  --st-color-chart-2-muted: #93c5fd;
+  --st-color-chart-2-faded: #bfdbfe;
+  --st-color-chart-3: #a78bfa;
+  --st-color-chart-3-subtle: #ede9fe;
+  --st-color-chart-4: #737373;
+  --st-color-chart-4-subtle: #f5f5f5;
+  --st-color-chart-grid: #f0f0f0;
+  --st-color-chart-axis: var(--st-color-neutral-400);
+  --st-color-chart-tooltip-bg: var(--st-color-neutral-900);
+  --st-color-chart-tooltip-fg: #ffffff;
+
+  /* ─── Z-index ─── */
+  --st-z-dropdown: 1000;
+  --st-z-sticky: 1100;
+  --st-z-overlay: 1200;
+  --st-z-modal: 1300;
+  --st-z-toast: 1400;
+  --st-z-tooltip: 1500;
+}

package/registry/components/Accordion/Accordion.module.css

@@ -0,0 +1,3 @@
+.root {
+  width: 100%;
+}

package/registry/components/Accordion/Accordion.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, useState } from 'react';
+import { cn } from '../../utils/cn';
+import { AccordionContext } from './AccordionContext';
+import type { AccordionProps } from './Accordion.types';
+import styles from './Accordion.module.css';
+
+function normalizeValue(val?: string | string[]): string[] {
+  if (!val) return [];
+  return Array.isArray(val) ? val : [val];
+}
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+  (
+    {
+      type = 'multiple',
+      variant = 'collapsible',
+      defaultValue,
+      value,
+      onValueChange,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const [internalOpen, setInternalOpen] = useState(() =>
+      normalizeValue(defaultValue)
+    );
+    const openItems =
+      value !== undefined ? normalizeValue(value) : internalOpen;
+
+    const toggle = (itemValue: string) => {
+      let next: string[];
+      if (openItems.includes(itemValue)) {
+        next = openItems.filter((v) => v !== itemValue);
+      } else {
+        next =
+          type === 'single' ? [itemValue] : [...openItems, itemValue];
+      }
+      if (value === undefined) setInternalOpen(next);
+      onValueChange?.(next);
+    };
+
+    return (
+      <AccordionContext.Provider value={{ variant, openItems, toggle }}>
+        <div ref={ref} className={cn(styles.root, className)} {...rest}>
+          {children}
+        </div>
+      </AccordionContext.Provider>
+    );
+  }
+);
+
+Accordion.displayName = 'Accordion';

package/registry/components/Accordion/Accordion.types.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react';
+
+export type AccordionType = 'single' | 'multiple';
+export type AccordionVariant = 'collapsible' | 'accordion' | 'showmore';
+
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+  /** `single` allows only one open item; `multiple` allows many */
+  type?: AccordionType;
+  /** Visual variant: trigger icon and layout */
+  variant?: AccordionVariant;
+  /** Initial open items (uncontrolled) */
+  defaultValue?: string | string[];
+  /** Currently open items (controlled) */
+  value?: string | string[];
+  /** Callback when open items change */
+  onValueChange?: (value: string[]) => void;
+}

package/registry/components/Accordion/AccordionContext.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+import type { AccordionVariant } from './Accordion.types';
+
+export interface AccordionContextValue {
+  variant: AccordionVariant;
+  openItems: string[];
+  toggle: (value: string) => void;
+}
+
+export const AccordionContext = createContext<AccordionContextValue | null>(null);
+
+export function useAccordion(): AccordionContextValue {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error('AccordionItem must be used within an Accordion');
+  }
+  return ctx;
+}