shapes-ui 0.4.2 → 0.6.0

package/src/commands/add.ts

@@ -1,18 +1,17 @@
 import path from "node:path";
 
 import { cancel, multiselect, note, spinner } from "@clack/prompts";
-import { execa } from "execa";
 import fs from "fs-extra";
 
 import type { RegistryItem } from "@/types/registry-item";
 import { exitIfCancelled } from "@/utils/cli-utils";
-import { getInstallCommand } from "@/utils/package-manager";
+import { installDependencies } from "@/utils/dependency-installer";
 import type { Config } from "@/utils/schema";
 
 const REGISTRY_URL = "https://shapes-ui.com/r";
 
-export async function loadRegistryIndex() {
-  const localRegistryDir = path.resolve(process.cwd(), "public/r");
+export async function loadRegistryIndex(cwd = process.cwd()) {
+  const localRegistryDir = path.resolve(cwd, "public/r");
   if (await fs.pathExists(localRegistryDir)) {
     const files = await fs.readdir(localRegistryDir);
     const entries: RegistryItem[] = [];
@@ -47,7 +46,7 @@ export async function loadRegistryIndex() {
 export async function pickComponents() {
   let components: string[] = [];
   try {
-    components = await loadRegistryIndex();
+    components = await loadRegistryIndex(process.cwd());
   } catch (error) {
     cancel(error instanceof Error ? error.message : "Failed to load registry.");
     process.exit(1);
@@ -68,49 +67,90 @@ export async function pickComponents() {
   return selected as string[];
 }
 
-export async function installComponent(name: string, config: Config) {
-  const spin = spinner();
-  spin.start(`Fetching ${name}`);
+type InstallContext = {
+  installing: Set<string>;
+  installed: Set<string>;
+};
 
-  let data: RegistryItem;
+function createInstallContext(): InstallContext {
+  return {
+    installing: new Set<string>(),
+    installed: new Set<string>(),
+  };
+}
 
-  const localFile = path.resolve(process.cwd(), `public/r/${name}.json`);
-  if (await fs.pathExists(localFile)) {
-    data = await fs.readJSON(localFile);
-  } else {
-    const res = await fetch(`${REGISTRY_URL}/${name}.json`);
-    if (!res.ok) {
-      spin.stop("Fetch failed");
-      throw new Error(`Component ${name} not found in registry.`);
-    }
-    data = await res.json();
+export async function installComponent(
+  name: string,
+  config: Config,
+  context = createInstallContext(),
+  cwd = process.cwd(),
+) {
+  if (context.installed.has(name)) return;
+  if (context.installing.has(name)) {
+    note(`Skipped circular dependency while resolving ${name}`);
+    return;
   }
 
-  spin.stop(`Fetched ${name}`);
+  context.installing.add(name);
+  try {
+    const spin = spinner();
+    spin.start(`Fetching ${name}`);
+
+    let data: RegistryItem;
+
+    const localFile = path.resolve(cwd, `public/r/${name}.json`);
+    if (await fs.pathExists(localFile)) {
+      data = await fs.readJSON(localFile);
+    } else {
+      const res = await fetch(`${REGISTRY_URL}/${name}.json`);
+      if (!res.ok) {
+        spin.stop("Fetch failed");
+        throw new Error(`Component ${name} not found in registry.`);
+      }
+      data = await res.json();
+    }
+
+    spin.stop(`Fetched ${name}`);
 
-  // 1. Recursive Install of Registry Dependencies
-  if (data.registryDependencies) {
-    for (const dep of data.registryDependencies) {
-      const depPath = path.join(process.cwd(), config.paths.ui, `${dep}.tsx`);
-      if (!fs.existsSync(depPath)) {
-        await installComponent(dep, config);
+    // 1. Recursive Install of Registry Dependencies
+    if (data.registryDependencies) {
+      for (const dep of data.registryDependencies) {
+        const depPath = path.join(cwd, config.paths.ui, `${dep}.tsx`);
+        if (!fs.existsSync(depPath)) {
+          await installComponent(dep, config, context, cwd);
+        }
       }
     }
-  }
 
-  // 2. Install NPM Dependencies
-  if (data.dependencies?.length) {
-    const [command, ...args] = await getInstallCommand(data.dependencies);
-    await execa(command, args);
+    // 2. Install NPM Dependencies
+    if (data.dependencies?.length) {
+      await installDependencies(data.dependencies, {
+        label: `Installing dependencies for ${name}`,
+        successMessage: `Dependencies installed for ${name}`,
+        cwd,
+      });
+    }
+
+    // 3. Write Files
+    for (const file of data.files) {
+      const target = path.join(cwd, config.paths.ui, file.path);
+      await fs.ensureDir(path.dirname(target));
+      await fs.writeFile(target, file.content);
+    }
+
+    context.installed.add(name);
+    note(`Added ${name}`);
+  } finally {
+    context.installing.delete(name);
   }
+}
 
-  // 3. Write Files
-  for (const file of data.files) {
-    const target = path.join(process.cwd(), config.paths.ui, file.path);
-    await fs.ensureDir(path.dirname(target));
-    await fs.writeFile(target, file.content);
+export async function addAllComponents(config: Config, cwd = process.cwd()) {
+  const all = await loadRegistryIndex(cwd);
+  const context = createInstallContext();
+  for (const name of all) {
+    await installComponent(name, config, context, cwd);
   }
-  note(`Added ${name}`);
 }
 
 export async function addCommand(components: string[], config: Config) {
@@ -119,7 +159,8 @@ export async function addCommand(components: string[], config: Config) {
     selections = await pickComponents();
   }
 
+  const context = createInstallContext();
   for (const name of selections) {
-    await installComponent(name, config);
+    await installComponent(name, config, context, process.cwd());
   }
 }

package/src/commands/cli.ts

@@ -3,25 +3,72 @@ import { Command } from "commander";
 
 import { getConfig } from "@/utils/cli-utils";
 
-import { addCommand } from "./add";
+import { addAllComponents, addCommand } from "./add";
+import { createCommand } from "./create";
 import { initCommand } from "./init";
+import { paletteSetCommand } from "./palette";
 
 const program = new Command();
 
-program.name("shapes").description("Shapes UI CLI").version("0.0.1");
+program.name("shapes-ui").description("Shapes UI CLI").version("0.0.1");
 
 program.command("init").description("Configure Shapes UI for your project").action(initCommand);
 
+program
+  .command("create [project-name]")
+  .description("Create a new Vite React TypeScript app ready for Shapes UI")
+  .option("-i, --install", "Install project dependencies")
+  .option("--full", "Configure Shapes UI and install all components")
+  .option("--style <style>", "Shapes style for --full (default|brutalist|minimal)")
+  .option("--palette <name>", "Brand palette for --full (e.g. blue, emerald, rose)")
+  .option("--contrast-mode <mode>", "Foreground contrast mode for --full (deterministic|dynamic)")
+  .option("--ui-path <path>", "UI components path for --full (e.g. ./src/components/ui)")
+  .option("--css-path <path>", "Tailwind CSS file path for --full (e.g. src/index.css)")
+  .option("-f, --force", "Overwrite target directory if it already exists")
+  .action(async (projectName, options) => {
+    await createCommand(projectName, {
+      install: options.install,
+      full: options.full,
+      style: options.style,
+      palette: options.palette,
+      contrastMode: options.contrastMode,
+      uiPath: options.uiPath,
+      cssPath: options.cssPath,
+      force: options.force,
+    });
+  });
+
 program
   .command("add [components...]")
   .description("Add components to your project")
-  .action(async (components) => {
+  .option("-a, --all", "Add all available components")
+  .action(async (components, options) => {
     const config = await getConfig();
     if (!config) {
       console.error("Please run 'init' first.");
       return;
     }
+    if (options.all) {
+      await addAllComponents(config);
+      return;
+    }
     await addCommand(components, config);
   });
 
+program
+  .command("palette")
+  .description("Manage color palettes")
+  .command("set <name>")
+  .description("Set brand palette and regenerate semantic tokens")
+  .option("--css-path <path>", "Override Tailwind CSS file path")
+  .option("--contrast-mode <mode>", "Foreground contrast mode (deterministic|dynamic)")
+  .option("--refresh", "Refresh Tailwind palette data from docs")
+  .action(async (name, options) => {
+    await paletteSetCommand(name, {
+      cssPath: options.cssPath,
+      contrastMode: options.contrastMode,
+      refresh: options.refresh,
+    });
+  });
+
 program.parse();

package/src/commands/create.ts

@@ -0,0 +1,262 @@
+import path from "node:path";
+
+import { confirm, intro, note, outro, spinner, text } from "@clack/prompts";
+import { execa } from "execa";
+import fs from "fs-extra";
+import pc from "picocolors";
+
+import { addAllComponents } from "@/commands/add";
+import {
+  exitIfCancelled,
+  getMissingDeps,
+  isTailwindV4Installed,
+  isViteProject,
+  readPackageJson,
+} from "@/utils/cli-utils";
+import { installDependencies } from "@/utils/dependency-installer";
+import { getPackageManager } from "@/utils/package-manager";
+import {
+  type ContrastMode,
+  getDefaultBrandPaletteOptions,
+  normalizeContrastMode,
+  writePaletteTokens,
+} from "@/utils/palette";
+import type { Config } from "@/utils/schema";
+
+type CreateOptions = {
+  install?: boolean;
+  force?: boolean;
+  full?: boolean;
+  style?: Config["style"];
+  palette?: string;
+  contrastMode?: ContrastMode | string;
+  uiPath?: string;
+  cssPath?: string;
+};
+
+const BASE_DEPS = [
+  "@base-ui/react",
+  "class-variance-authority",
+  "clsx",
+  "lucide-react",
+  "tailwind-merge",
+  "tw-animate-css",
+];
+
+async function ensureTailwindStyles(cwd: string, cssPath: string) {
+  const template = '@import "tailwindcss";\n';
+  const absPath = path.join(cwd, cssPath);
+  await fs.ensureDir(path.dirname(absPath));
+
+  if (await fs.pathExists(absPath)) {
+    const current = await fs.readFile(absPath, "utf-8");
+    if (current.includes("tailwindcss") || current.includes("@tailwind")) return;
+    await fs.writeFile(absPath, `${current.trimEnd()}\n\n${template}`);
+    return;
+  }
+
+  await fs.writeFile(absPath, template);
+}
+
+async function setupShapesFull(projectDir: string, options: CreateOptions) {
+  const setupSpin = spinner();
+  setupSpin.start("Configuring Shapes UI");
+
+  const cssPath = options.cssPath ?? "src/index.css";
+  const uiPath = options.uiPath ?? "./src/components/ui";
+  const style = options.style ?? "default";
+  const palette = options.palette ?? "blue";
+  const contrastMode = options.contrastMode ?? "deterministic";
+  const pkg = await readPackageJson(projectDir);
+  const hasTailwindV4 = isTailwindV4Installed(pkg);
+  const isVite = await isViteProject(projectDir);
+
+  if (!hasTailwindV4) {
+    const tailwindDeps = ["tailwindcss"];
+    if (isVite) {
+      tailwindDeps.push("@tailwindcss/vite");
+    }
+
+    await installDependencies(tailwindDeps, {
+      dev: true,
+      label: "Installing Tailwind dependencies",
+      successMessage: "Tailwind dependencies installed",
+      cwd: projectDir,
+    });
+  }
+
+  const latestPkg = await readPackageJson(projectDir);
+  const missingBaseDeps = getMissingDeps(latestPkg, BASE_DEPS);
+  await installDependencies(missingBaseDeps, {
+    label: "Installing Shapes base dependencies",
+    successMessage: "Shapes base dependencies installed",
+    cwd: projectDir,
+  });
+
+  await ensureTailwindStyles(projectDir, cssPath);
+
+  const paletteResult = await writePaletteTokens({
+    cwd: projectDir,
+    cssPath,
+    paletteName: palette,
+    neutralPalette: "zinc",
+    contrastMode,
+  });
+
+  const config: Config = {
+    $schema: "https://shapes-ui.com/schema.json",
+    style,
+    palette: {
+      name: paletteResult.paletteName,
+      contrastMode: paletteResult.contrastMode,
+    },
+    tailwind: { css: cssPath, baseColor: "zinc" },
+    paths: { ui: uiPath, lib: "./src/lib" },
+  };
+
+  await fs.writeJSON(path.join(projectDir, "shapes.json"), config, { spaces: 2 });
+  await addAllComponents(config, projectDir);
+
+  setupSpin.stop("Shapes UI configured with all components");
+}
+
+function getCreateCommand(packageManager: string, projectName: string) {
+  if (packageManager === "pnpm") {
+    return ["pnpm", ["create", "vite", projectName, "--template", "react-ts"]] as const;
+  }
+
+  if (packageManager === "yarn") {
+    return ["yarn", ["create", "vite", projectName, "--template", "react-ts"]] as const;
+  }
+
+  if (packageManager === "bun") {
+    return ["bun", ["create", "vite", projectName, "--template", "react-ts"]] as const;
+  }
+
+  return ["npm", ["create", "vite@latest", projectName, "--", "--template", "react-ts"]] as const;
+}
+
+function getProjectInstallCommand(packageManager: string) {
+  if (packageManager === "pnpm") {
+    return ["pnpm", ["install"]] as const;
+  }
+
+  if (packageManager === "yarn") {
+    return ["yarn", ["install"]] as const;
+  }
+
+  if (packageManager === "bun") {
+    return ["bun", ["install"]] as const;
+  }
+
+  return ["npm", ["install"]] as const;
+}
+
+export async function createCommand(projectNameArg?: string, options: CreateOptions = {}) {
+  intro(pc.bgCyan(pc.black(" Create a Shapes UI app ")));
+
+  const allowedStyles = new Set<Config["style"]>(["default", "brutalist", "minimal"]);
+  if (options.style && !allowedStyles.has(options.style)) {
+    throw new Error(`Invalid style "${options.style}". Use one of: default, brutalist, minimal.`);
+  }
+
+  if (options.palette) {
+    const normalizedPalette = options.palette.toLowerCase();
+    const allowedPalettes = new Set<string>(getDefaultBrandPaletteOptions());
+    if (!allowedPalettes.has(normalizedPalette)) {
+      throw new Error(
+        `Invalid palette "${options.palette}". Use one of: ${getDefaultBrandPaletteOptions().join(", ")}.`,
+      );
+    }
+    options.palette = normalizedPalette;
+  }
+
+  if (options.contrastMode) {
+    options.contrastMode = normalizeContrastMode(options.contrastMode);
+  }
+
+  if (options.uiPath !== undefined && !options.uiPath.trim()) {
+    throw new Error("Invalid ui path. Please provide a non-empty value.");
+  }
+
+  if (options.cssPath !== undefined && !options.cssPath.trim()) {
+    throw new Error("Invalid css path. Please provide a non-empty value.");
+  }
+
+  const projectName =
+    projectNameArg && projectNameArg.trim().length > 0
+      ? projectNameArg.trim()
+      : (
+          exitIfCancelled(
+            await text({
+              message: "Project name",
+              initialValue: "my-shapes-app",
+              validate(value) {
+                if (!value || !value.trim()) return "Project name is required.";
+                return undefined;
+              },
+            }),
+          ) as string
+        ).trim();
+
+  const projectDir = path.resolve(process.cwd(), projectName);
+  const exists = await fs.pathExists(projectDir);
+
+  if (exists) {
+    const overwrite =
+      options.force ??
+      exitIfCancelled(
+        await confirm({
+          message: `${projectName} already exists. Overwrite it?`,
+          initialValue: false,
+        }),
+      );
+
+    if (!overwrite) {
+      outro(pc.yellow("Create cancelled."));
+      return;
+    }
+
+    await fs.remove(projectDir);
+  }
+
+  const packageManager = await getPackageManager();
+  const [createCommandName, createArgs] = getCreateCommand(packageManager, projectName);
+
+  const createSpin = spinner();
+  createSpin.start(`Scaffolding ${projectName}`);
+
+  await execa(createCommandName, createArgs, { stdio: "ignore" });
+  createSpin.stop(`Created ${projectName}`);
+
+  note(`Project scaffolded with ${packageManager} + Vite (React + TypeScript).`, "Create");
+
+  const shouldInstallProjectDeps = options.install || options.full;
+
+  if (shouldInstallProjectDeps) {
+    const [installCommand, installArgs] = getProjectInstallCommand(packageManager);
+    const installSpin = spinner();
+    installSpin.start("Installing project dependencies");
+
+    await execa(installCommand, installArgs, {
+      cwd: projectDir,
+      stdio: "ignore",
+    });
+
+    installSpin.stop("Dependencies installed");
+  }
+
+  if (options.full) {
+    await setupShapesFull(projectDir, options);
+  }
+
+  const runShapesInit = `${packageManager === "npm" ? "npx" : packageManager === "pnpm" ? "pnpm dlx" : packageManager === "yarn" ? "yarn dlx" : "bunx"} shapes-ui init`;
+
+  outro(
+    `${pc.green(options.full ? "Project ready with Shapes UI." : "Project ready.")}\n\n` +
+      `${pc.bold("Next steps:")}\n` +
+      `  cd ${projectName}\n` +
+      `  ${shouldInstallProjectDeps ? "" : `${packageManager} install\n  `}${options.full ? "" : `${runShapesInit}\n  `}` +
+      `  ${packageManager} run dev`,
+  );
+}

package/src/commands/init.ts

@@ -1,7 +1,6 @@
 import path from "node:path";
 
-import { confirm, intro, note, outro, select, text, spinner } from "@clack/prompts";
-import { execa } from "execa";
+import { confirm, intro, note, outro, select, text } from "@clack/prompts";
 import figlet from "figlet";
 import fs from "fs-extra";
 import gradient from "gradient-string";
@@ -15,7 +14,12 @@ import {
   isViteProject,
   readPackageJson,
 } from "@/utils/cli-utils";
-import { getInstallCommand } from "@/utils/package-manager";
+import { installDependencies } from "@/utils/dependency-installer";
+import {
+  type ContrastMode,
+  getDefaultBrandPaletteOptions,
+  writePaletteTokens,
+} from "@/utils/palette";
 import { type Config } from "@/utils/schema";
 
 const BASE_DEPS = [
@@ -28,15 +32,10 @@ const BASE_DEPS = [
 ];
 
 async function installDeps(deps: string[], dev = false) {
-  if (!deps.length) return;
-  const spin = spinner();
-  const label = dev ? "Installing dev dependencies" : "Installing dependencies";
-  spin.start(label);
-
-  const [command, ...args] = await getInstallCommand(deps, dev);
-  await execa(command, args);
-
-  spin.stop(pc.green("Dependencies installed"));
+  await installDependencies(deps, {
+    dev,
+    successMessage: pc.green("Dependencies installed"),
+  });
 }
 
 async function ensureTailwindStyles(cssPath: string) {
@@ -81,7 +80,30 @@ export async function initCommand() {
       options: [
         { label: "Default", value: "default" },
         { label: "Brutalist", value: "brutalist" },
+        { label: "Minimal", value: "minimal" },
+      ],
+    }),
+  );
+
+  const palette = exitIfCancelled(
+    await select({
+      message: "Pick a brand palette",
+      options: getDefaultBrandPaletteOptions().map((name) => ({
+        label: name[0].toUpperCase() + name.slice(1),
+        value: name,
+      })),
+      initialValue: "blue",
+    }),
+  );
+
+  const contrastMode = exitIfCancelled(
+    await select({
+      message: "Choose foreground contrast strategy",
+      options: [
+        { label: "Deterministic shades", value: "deterministic" },
+        { label: "Dynamic contrast", value: "dynamic" },
       ],
+      initialValue: "deterministic",
     }),
   );
 
@@ -121,9 +143,20 @@ export async function initCommand() {
   await installDeps(missingBaseDeps, false);
   await ensureTailwindStyles(cssPath);
 
+  const paletteResult = await writePaletteTokens({
+    cssPath,
+    paletteName: palette as string,
+    neutralPalette: "zinc",
+    contrastMode: contrastMode as ContrastMode,
+  });
+
   const config: Config = {
     $schema: "https://shapes-ui.com/schema.json",
     style: style as Config["style"],
+    palette: {
+      name: paletteResult.paletteName,
+      contrastMode: paletteResult.contrastMode,
+    },
     tailwind: { css: cssPath as string, baseColor: "zinc" },
     paths: { ui: uiPath as string, lib: "./src/lib" },
   };

package/src/commands/palette.ts

@@ -0,0 +1,55 @@
+import path from "node:path";
+
+import { intro, note, outro } from "@clack/prompts";
+import fs from "fs-extra";
+import pc from "picocolors";
+
+import { getConfig } from "@/utils/cli-utils";
+import { normalizeContrastMode, writePaletteTokens } from "@/utils/palette";
+
+type PaletteSetOptions = {
+  cssPath?: string;
+  contrastMode?: string;
+  refresh?: boolean;
+};
+
+export async function paletteSetCommand(name: string, options: PaletteSetOptions = {}) {
+  intro(pc.bgCyan(pc.black(" Update Shapes palette ")));
+
+  const config = await getConfig();
+  if (!config) {
+    throw new Error("Could not find shapes.json. Run `shapes-ui init` first.");
+  }
+
+  const contrastMode = normalizeContrastMode(options.contrastMode ?? config.palette?.contrastMode);
+  const cssPath = options.cssPath ?? config.tailwind.css;
+  const neutralPalette = config.tailwind.baseColor;
+
+  const result = await writePaletteTokens({
+    cssPath,
+    paletteName: name,
+    neutralPalette,
+    contrastMode,
+    refresh: options.refresh,
+  });
+
+  const updatedConfig = {
+    ...config,
+    palette: {
+      name: result.paletteName,
+      contrastMode: result.contrastMode,
+    },
+    tailwind: {
+      ...config.tailwind,
+      css: cssPath,
+    },
+  };
+
+  await fs.writeJSON(path.join(process.cwd(), "shapes.json"), updatedConfig, { spaces: 2 });
+
+  note(
+    `palette=${result.paletteName} neutral=${result.neutralPalette} contrast=${result.contrastMode} source=${result.source}`,
+    "Palette updated",
+  );
+  outro(pc.green("Shapes UI palette updated."));
+}

package/src/components/docs/layout/footer.tsx

@@ -2,8 +2,8 @@ import { Badge } from "@/components/ui/badge";
 
 export function Footer() {
   return (
-    <footer className=" h-12 border-t">
-      <div className=" container mx-auto flex h-full items-center border-x px-4">
+    <footer className=" z-10 h-12">
+      <div className=" container mx-auto flex h-full items-center  px-4">
         <Badge variant={"info"}>Alpha</Badge>
       </div>
     </footer>