zerozeeker 2.2.9 → 2.3.0

package/README.md

@@ -1,8 +1,6 @@
 # ZeroZeeker Components
 
-**Zero-config CLI** for installing production-ready UI components into your React or Next.js projects.
-
-**No setup required. No shadcn/ui required. Just install and go.** ✨
+Official CLI for installing production-ready UI components into your React or Next.js projects.
 
 [![npm](https://img.shields.io/npm/v/zerozeeker?style=flat-square&color=181825)](https://www.npmjs.com/package/zerozeeker)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178C6?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
@@ -92,8 +90,17 @@ Before using ZeroZeeker components, ensure you have:
 
 - Node.js 18 or higher
 - An existing React or Next.js project
+- shadcn/ui initialized in your project
 - Tailwind CSS configured
 
+### Setup shadcn/ui
+
+If you haven't initialized shadcn/ui yet:
+
+```bash
+npx shadcn-ui@latest init
+```
+
 ---
 
 ## How to Use Installed Components
@@ -112,7 +119,7 @@ export default function App() {
 }
 ```
 
-All components follow standard conventions. Import from `@/components/ui/<component-name>`.
+All components follow shadcn/ui conventions. Import from `@/components/ui/<component-name>`.
 
 ---
 
@@ -151,6 +158,13 @@ Use the full npx command:
 npx zerozeeker list
 ```
 
+### shadcn/ui not initialized
+
+Initialize shadcn/ui first:
+```bash
+npx shadcn-ui@latest init
+```
+
 ### Component won't install
 
 Verify the exact component name:

package/dist/index.js

@@ -3,198 +3,70 @@
 // index.ts
 import { Command } from "commander";
 import { execSync } from "child_process";
-import { existsSync, mkdirSync, writeFileSync } from "fs";
-import { join, dirname } from "path";
 import ora from "ora";
 import chalk from "chalk";
 var REGISTRY_URL = "https://www.zerozeeker.com/r";
-var COMPONENTS = [
-  "rainbow-button",
-  "shimmer-button",
-  "magnetic-button",
-  "expand-button",
-  "flip-button",
-  "circle-reveal-button",
-  "index"
+var VERSION = "2.3.0";
+var REGISTRY = [
+  // Buttons
+  { name: "rainbow-button", category: "Buttons", desc: "Animated rainbow gradient border" },
+  { name: "shimmer-button", category: "Buttons", desc: "Moving border glow effect" },
+  { name: "magnetic-button", category: "Buttons", desc: "Cursor-following magnetic pull effect" },
+  { name: "expand-button", category: "Buttons", desc: "Expanding pill animation on hover" },
+  { name: "flip-button", category: "Buttons", desc: "3D flip card reveal effect" },
+  { name: "circle-reveal-button", category: "Buttons", desc: "Icon-to-pill circle expansion" },
+  // Inputs
+  { name: "glow-input", category: "Inputs", desc: "Animated glow ring on focus" },
+  { name: "typewriter-input", category: "Inputs", desc: "Cycling typewriter placeholder" },
+  { name: "shimmer-input", category: "Inputs", desc: "Shimmer border sweep on focus" },
+  { name: "spotlight-input", category: "Inputs", desc: "Mouse-tracked spotlight effect" },
+  { name: "vortex-input", category: "Inputs", desc: "Swirling vortex border animation" },
+  { name: "prism-input", category: "Inputs", desc: "Prism light refraction border" }
 ];
-async function fetchRegistry(url) {
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch registry: ${response.statusText}`);
-  }
-  return response.json();
-}
-function ensureDir(filePath) {
-  const dir = dirname(filePath);
-  if (!existsSync(dir)) {
-    mkdirSync(dir, { recursive: true });
-  }
-}
-function findProjectRoot() {
-  let currentDir = process.cwd();
-  while (currentDir !== dirname(currentDir)) {
-    if (existsSync(join(currentDir, "package.json"))) {
-      return currentDir;
-    }
-    currentDir = dirname(currentDir);
-  }
-  throw new Error("Could not find project root (no package.json found)");
-}
-function installDependencies(deps) {
-  if (deps.length === 0) return;
-  console.log(chalk.dim(`  Installing dependencies: ${deps.join(", ")}`));
-  try {
-    execSync(`npm install ${deps.join(" ")}`, {
-      stdio: "pipe",
-      encoding: "utf-8"
-    });
-  } catch {
-    console.warn(chalk.yellow(`  Warning: Failed to auto-install dependencies. Install manually: npm install ${deps.join(" ")}`));
-  }
-}
-async function installRegistryDependencies(deps, projectRoot, installed = /* @__PURE__ */ new Set()) {
-  const allFiles = [];
-  const allNpmDeps = [];
-  for (const dep of deps) {
-    if (installed.has(dep)) continue;
-    installed.add(dep);
-    const url = `${REGISTRY_URL}/${dep}.json`;
-    try {
-      const registry = await fetchRegistry(url);
-      if (registry.registryDependencies && registry.registryDependencies.length > 0) {
-        const nested = await installRegistryDependencies(
-          registry.registryDependencies,
-          projectRoot,
-          installed
-        );
-        allFiles.push(...nested.files);
-        allNpmDeps.push(...nested.npmDeps);
-      }
-      if (registry.files && registry.files.length > 0) {
-        for (const file of registry.files) {
-          const targetPath = file.target || file.path;
-          const fullPath = join(projectRoot, targetPath);
-          if (existsSync(fullPath)) {
-            continue;
-          }
-          ensureDir(fullPath);
-          writeFileSync(fullPath, file.content, "utf-8");
-          allFiles.push(targetPath);
-        }
-      }
-      if (registry.dependencies) {
-        allNpmDeps.push(...registry.dependencies);
-      }
-    } catch (error) {
-      console.warn(chalk.yellow(`  Warning: Could not install registry dependency "${dep}"`));
-    }
-  }
-  return { files: allFiles, npmDeps: allNpmDeps };
+var COMPONENT_NAMES = REGISTRY.map((c) => c.name);
+function printHeader() {
+  console.log("");
+  console.log(chalk.bold.white("  ZeroZeeker") + chalk.dim(" \xB7 UI Component Library"));
+  console.log(chalk.dim("  https://www.zerozeeker.com"));
+  console.log("");
 }
 var program = new Command();
-program.name("zerozeeker").description("CLI for installing ZeroZeeker UI components - because life is too short for boring interfaces").version("2.1.0");
-program.command("add <component>").description("Add a component from ZeroZeeker registry").action(async (component) => {
-  if (!COMPONENTS.includes(component)) {
-    console.error(chalk.red(`Component "${component}" does not exist in this dimension.`));
-    console.log(chalk.dim("\nHere are the components that actually exist:"));
-    COMPONENTS.filter((c) => c !== "index").forEach((c) => {
-      console.log(chalk.cyan(`  - ${c}`));
-    });
-    console.log(chalk.dim("\nPro tip: Copy-paste is your friend."));
+program.name("zerozeeker").description("CLI for installing ZeroZeeker UI components").version(VERSION, "-v, --version", "Output the current version");
+program.command("add <component>").description("Add a ZeroZeeker component to your project").action((component) => {
+  if (!COMPONENT_NAMES.includes(component)) {
+    console.error(chalk.red(`  \u2716 Unknown component: "${component}"
+`));
+    console.log(chalk.dim("  Available components:"));
+    COMPONENT_NAMES.forEach((c) => console.log(chalk.cyan(`    ${c}`)));
+    console.log(chalk.dim("\n  Run " + chalk.white("npx zerozeeker list") + " for full details.\n"));
     process.exit(1);
   }
   const url = `${REGISTRY_URL}/${component}.json`;
-  const spinner = ora(`Installing ${chalk.cyan(component)}...`).start();
-  try {
-    const projectRoot = findProjectRoot();
-    spinner.text = `Fetching ${chalk.cyan(component)} from registry...`;
-    const registry = await fetchRegistry(url);
-    const filesInstalled = [];
-    const allDependencies = [...registry.dependencies || []];
-    if (registry.registryDependencies && registry.registryDependencies.length > 0) {
-      spinner.text = `Installing registry dependencies...`;
-      const registryResult = await installRegistryDependencies(
-        registry.registryDependencies,
-        projectRoot
-      );
-      filesInstalled.push(...registryResult.files);
-      allDependencies.push(...registryResult.npmDeps);
-    }
-    if (registry.files && registry.files.length > 0) {
-      spinner.text = `Installing ${chalk.cyan(component)} files...`;
-      for (const file of registry.files) {
-        const targetPath = file.target || file.path;
-        const fullPath = join(projectRoot, targetPath);
-        if (existsSync(fullPath)) {
-          spinner.stop();
-          console.warn(chalk.yellow(`
-\u26A0 File already exists: ${targetPath}`));
-          console.log(chalk.dim("  Skipping to avoid overwriting your changes."));
-          console.log(chalk.dim(`  To force reinstall: delete the file and run the command again.
+  const spinner = ora({ text: `Installing ${chalk.cyan(component)}`, color: "cyan" }).start();
+  spinner.stop();
+  console.log(chalk.dim(`  \u2192 ${url}
 `));
-          continue;
-        }
-        ensureDir(fullPath);
-        writeFileSync(fullPath, file.content, "utf-8");
-        filesInstalled.push(targetPath);
-      }
-    }
-    const uniqueDeps = [...new Set(allDependencies)];
-    if (uniqueDeps.length > 0) {
-      spinner.text = "Installing npm dependencies...";
-      installDependencies(uniqueDeps);
-    }
-    spinner.stop();
-    console.log(chalk.green(`
-\u2713 Successfully installed ${component}`));
-    if (filesInstalled.length > 0) {
-      console.log(chalk.dim("\n  Files added:"));
-      filesInstalled.forEach((f) => {
-        console.log(chalk.cyan(`    ${f}`));
-      });
-    }
-    if (uniqueDeps.length > 0) {
-      console.log(chalk.dim("\n  Dependencies installed:"));
-      uniqueDeps.forEach((d) => {
-        console.log(chalk.cyan(`    ${d}`));
-      });
-    }
-    console.log(chalk.dim("\n  Now go make something beautiful. \u2728\n"));
-  } catch (error) {
-    spinner.stop();
-    console.error(chalk.red(`
-\u2717 Failed to install ${component}`));
-    if (error instanceof Error) {
-      if (error.message.includes("package.json")) {
-        console.log(chalk.dim("\n  Make sure you're in a React/Next.js project directory."));
-      } else if (error.message.includes("fetch")) {
-        console.log(chalk.dim("\n  Check your internet connection and try again."));
-      } else {
-        console.log(chalk.dim(`
-  ${error.message}`));
-      }
-    }
-    console.log(chalk.dim("\n  Need help? https://www.zerozeeker.com/docs\n"));
+  try {
+    execSync(`npx shadcn@latest add "${url}"`, { stdio: "inherit" });
+    console.log("");
+    console.log(chalk.green(`  \u2714 ${component} installed successfully.`));
+    console.log(chalk.dim("  Import it from your components/ui directory and go build something great.\n"));
+  } catch {
+    console.error(chalk.red(`  \u2716 Installation failed.`));
+    console.log(chalk.dim("  Check your network connection and try again.\n"));
     process.exit(1);
   }
 });
 program.command("list").description("List all available components").action(() => {
-  console.log(chalk.bold("\nZeroZeeker UI Components\n"));
-  console.log(chalk.dim("Modern, polished components that make users actually want to interact.\n"));
-  const descriptions = {
-    "rainbow-button": "Animated rainbow gradient border - for when one color just will not cut it",
-    "shimmer-button": "Moving border glow effect - subtle flex, maximum impact",
-    "magnetic-button": "Cursor-following magnetic effect - it literally chases your mouse",
-    "expand-button": "Expanding pill animation - small to big, just like your startup",
-    "flip-button": "3D flip card effect - because flat is boring",
-    "circle-reveal-button": "Icon to pill expansion - the element of surprise"
-  };
-  COMPONENTS.filter((c) => c !== "index").forEach((component) => {
-    console.log(chalk.cyan(`  ${component}`));
-    console.log(chalk.dim(`    ${descriptions[component]}
-`));
-  });
-  console.log(chalk.dim("Install any component with: ") + chalk.white("npx zerozeeker add <component>"));
-  console.log(chalk.dim("More components coming soon. Ship fast. Look good doing it.\n"));
+  printHeader();
+  const categories = [...new Set(REGISTRY.map((c) => c.category))];
+  for (const cat of categories) {
+    console.log(chalk.bold.white(`  ${cat}`));
+    REGISTRY.filter((c) => c.category === cat).forEach(({ name, desc }) => {
+      console.log(`  ${chalk.cyan(name.padEnd(26))} ${chalk.dim(desc)}`);
+    });
+    console.log("");
+  }
+  console.log(chalk.dim(`  Install with: `) + chalk.white("npx zerozeeker add <component>") + chalk.dim("\n"));
 });
 program.parse();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zerozeeker",
-  "version": "2.2.9",
-  "description": "Zero-config CLI for installing ZeroZeeker UI components. No shadcn required.",
+  "version": "2.3.0",
+  "description": "CLI for installing ZeroZeeker UI components",
   "type": "module",
   "bin": {
     "zerozeeker": "dist/index.js"
@@ -16,24 +16,21 @@
     "prepublishOnly": "npm run build"
   },
   "keywords": [
-    "zerozeeker",
-    "ui",
+    "shadcn",
     "components",
-    "react",
-    "tailwind",
-    "typescript"
+    "ui",
+    "zerozeeker"
   ],
   "author": "ZeroZeeker",
   "license": "MIT",
   "dependencies": {
-    "chalk": "^5.3.0",
     "commander": "^12.1.0",
-    "ora": "^8.0.1"
+    "ora": "^8.0.1",
+    "chalk": "^5.3.0"
   },
   "devDependencies": {
     "@types/node": "^20.11.5",
     "tsup": "^8.0.1",
-    "tsx": "^4.21.0",
     "typescript": "^5.3.3"
   },
   "engines": {