@cyberbloxai/ui-kit 0.2.0 → 0.2.1

package/README.md

@@ -21,17 +21,28 @@ CyberBlox UI Kit is a modular, themeable component library designed for building
 There are two ways to use CyberBlox UI:
 
 ### 1. shadcn-style (Recommended)
-This copies the component source code directly into your project, allowing you to customize everything.
+This copies the component source code directly into your project, allowing you to customize everything. It also handles dependencies and installs necessary npm packages automatically.
 
 ```bash
-# 1. Initialize the project (sets up utils)
+# 1. Initialize the project (creates components.json and lib/utils.ts)
 npx @cyberbloxai/ui-kit init
 
 # 2. Add components as needed
 npx @cyberbloxai/ui-kit add button
 npx @cyberbloxai/ui-kit add dialog
+npx @cyberbloxai/ui-kit add alert-dialog # This will also add 'button' automatically!
 ```
 
+**What happens during `init`?**
+- A `components.json` file is created in your root directory.
+- `lib/utils.ts` is created with the `cn` helper.
+
+**What happens during `add`?**
+- The component's `.tsx` file is copied to your `components/ui` folder.
+- Any internal dependencies (like `button` for `alert-dialog`) are also added.
+- Any required npm packages (like `@radix-ui/react-dialog`) are installed automatically.
+
+
 ### 2. Standard Library Style
 Install it as a traditional npm package.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberbloxai/ui-kit",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Production-ready UI component library built on Radix UI + Tailwind CSS. Supports shadcn-style component installation.",
   "bin": {
     "cyberblox": "./src/cli.js"

package/src/cli.js

@@ -3,12 +3,11 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { execSync } from 'child_process';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-// This script will be located in node_modules/@cyberbloxai/ui-kit/src/cli.js
-// We need to find the source components directory relative to this script.
 const packageRoot = path.join(__dirname, '..');
 const componentsSrc = path.join(packageRoot, 'src', 'components', 'ui');
 const utilsSrc = path.join(packageRoot, 'src', 'lib', 'utils.ts');
@@ -16,9 +15,240 @@ const utilsSrc = path.join(packageRoot, 'src', 'lib', 'utils.ts');
 const args = process.argv.slice(2);
 const command = args[0];
 
-function getTargetDir() {
-  const isSrcExists = fs.existsSync(path.join(process.cwd(), 'src'));
-  return isSrcExists ? path.join(process.cwd(), 'src') : process.cwd();
+const DEFAULT_CONFIG = {
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+};
+
+// Component dependencies map
+const COMPONENT_REGISTRY = {
+  "accordion": {
+    "dependencies": ["@radix-ui/react-accordion"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "alert-dialog": {
+    "dependencies": ["@radix-ui/react-alert-dialog", "button"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "alert": {
+    "dependencies": [],
+    "registryDependencies": ["lucide-react", "class-variance-authority"]
+  },
+  "aspect-ratio": {
+    "dependencies": ["@radix-ui/react-aspect-ratio"],
+    "registryDependencies": []
+  },
+  "avatar": {
+    "dependencies": ["@radix-ui/react-avatar"],
+    "registryDependencies": []
+  },
+  "badge": {
+    "dependencies": [],
+    "registryDependencies": ["class-variance-authority"]
+  },
+  "breadcrumb": {
+    "dependencies": ["@radix-ui/react-slot"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "button": {
+    "dependencies": ["@radix-ui/react-slot"],
+    "registryDependencies": ["class-variance-authority", "lucide-react"]
+  },
+  "calendar": {
+    "dependencies": ["react-day-picker", "date-fns", "button"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "card": {
+    "dependencies": [],
+    "registryDependencies": []
+  },
+  "carousel": {
+    "dependencies": ["embla-carousel-react", "button"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "checkbox": {
+    "dependencies": ["@radix-ui/react-checkbox"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "collapsible": {
+    "dependencies": ["@radix-ui/react-collapsible"],
+    "registryDependencies": []
+  },
+  "command": {
+    "dependencies": ["cmdk", "dialog"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "context-menu": {
+    "dependencies": ["@radix-ui/react-context-menu"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "dialog": {
+    "dependencies": ["@radix-ui/react-dialog"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "drawer": {
+    "dependencies": ["vaul"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "dropdown-menu": {
+    "dependencies": ["@radix-ui/react-dropdown-menu"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "form": {
+    "dependencies": ["@radix-ui/react-label", "@radix-ui/react-slot", "react-hook-form", "@hookform/resolvers", "zod", "label"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "hover-card": {
+    "dependencies": ["@radix-ui/react-hover-card"],
+    "registryDependencies": []
+  },
+  "input-otp": {
+    "dependencies": ["input-otp"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "input": {
+    "dependencies": [],
+    "registryDependencies": []
+  },
+  "label": {
+    "dependencies": ["@radix-ui/react-label"],
+    "registryDependencies": ["class-variance-authority"]
+  },
+  "menubar": {
+    "dependencies": ["@radix-ui/react-menubar"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "navigation-menu": {
+    "dependencies": ["@radix-ui/react-navigation-menu"],
+    "registryDependencies": ["lucide-react", "class-variance-authority"]
+  },
+  "pagination": {
+    "dependencies": ["button"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "popover": {
+    "dependencies": ["@radix-ui/react-popover"],
+    "registryDependencies": []
+  },
+  "progress": {
+    "dependencies": ["@radix-ui/react-progress"],
+    "registryDependencies": []
+  },
+  "radio-group": {
+    "dependencies": ["@radix-ui/react-radio-group"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "resizable": {
+    "dependencies": ["react-resizable-panels"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "scroll-area": {
+    "dependencies": ["@radix-ui/react-scroll-area"],
+    "registryDependencies": []
+  },
+  "select": {
+    "dependencies": ["@radix-ui/react-select"],
+    "registryDependencies": ["lucide-react"]
+  },
+  "separator": {
+    "dependencies": ["@radix-ui/react-separator"],
+    "registryDependencies": []
+  },
+  "sheet": {
+    "dependencies": ["@radix-ui/react-dialog"],
+    "registryDependencies": ["lucide-react", "class-variance-authority"]
+  },
+  "sidebar": {
+    "dependencies": ["@radix-ui/react-slot", "button", "input", "separator", "sheet", "skeleton", "tooltip"],
+    "registryDependencies": ["lucide-react", "class-variance-authority"]
+  },
+  "skeleton": {
+    "dependencies": [],
+    "registryDependencies": []
+  },
+  "slider": {
+    "dependencies": ["@radix-ui/react-slider"],
+    "registryDependencies": []
+  },
+  "sonner": {
+    "dependencies": ["sonner", "next-themes"],
+    "registryDependencies": []
+  },
+  "switch": {
+    "dependencies": ["@radix-ui/react-switch"],
+    "registryDependencies": []
+  },
+  "table": {
+    "dependencies": [],
+    "registryDependencies": []
+  },
+  "tabs": {
+    "dependencies": ["@radix-ui/react-tabs"],
+    "registryDependencies": []
+  },
+  "textarea": {
+    "dependencies": [],
+    "registryDependencies": []
+  },
+  "use-toast": {
+    "dependencies": [],
+    "registryDependencies": []
+  },
+  "toast": {
+    "dependencies": ["@radix-ui/react-toast"],
+    "registryDependencies": ["lucide-react", "class-variance-authority"]
+  },
+  "toaster": {
+    "dependencies": ["toast", "use-toast"],
+    "registryDependencies": []
+  },
+  "toggle-group": {
+    "dependencies": ["@radix-ui/react-toggle-group", "toggle"],
+    "registryDependencies": []
+  },
+  "toggle": {
+    "dependencies": ["@radix-ui/react-toggle"],
+    "registryDependencies": ["class-variance-authority"]
+  },
+  "tooltip": {
+    "dependencies": ["@radix-ui/react-tooltip"],
+    "registryDependencies": []
+  }
+};
+
+function getProjectConfig() {
+  const configPath = path.join(process.cwd(), 'components.json');
+  if (fs.existsSync(configPath)) {
+    return JSON.parse(fs.readFileSync(configPath, 'utf8'));
+  }
+  return null;
+}
+
+function resolveAlias(alias, config) {
+  const aliases = config.aliases || {};
+  if (alias.startsWith('@/')) {
+    // Basic @/ support - assuming it maps to src/ or project root
+    const isSrcExists = fs.existsSync(path.join(process.cwd(), 'src'));
+    const base = isSrcExists ? 'src' : '';
+    return path.join(process.cwd(), base, alias.replace('@/', ''));
+  }
+  return path.join(process.cwd(), alias);
 }
 
 function copyFile(src, dest) {
@@ -26,41 +256,111 @@ function copyFile(src, dest) {
   if (!fs.existsSync(destDir)) {
     fs.mkdirSync(destDir, { recursive: true });
   }
-  fs.copyFileSync(src, dest);
+  
+  let content = fs.readFileSync(src, 'utf8');
+  
+  // Basic path replacement: replace @/ with project root relative paths if needed
+  // In a real shadcn CLI, this is more complex (respecting aliases)
+  
+  fs.writeFileSync(dest, content);
   console.log(`  Created ${path.relative(process.cwd(), dest)}`);
 }
 
-function init() {
-  console.log('Initializing CyberBlox UI components...');
-  const targetBase = getTargetDir();
+function installDependencies(deps) {
+  if (!deps || deps.length === 0) return;
+  
+  console.log(`  Installing dependencies: ${deps.join(', ')}...`);
+  try {
+    const command = fs.existsSync(path.join(process.cwd(), 'yarn.lock')) 
+      ? `yarn add ${deps.join(' ')}` 
+      : `npm install ${deps.join(' ')}`;
+    execSync(command, { stdio: 'inherit' });
+  } catch (error) {
+    console.warn('  Failed to install dependencies automatically. Please install them manually.');
+  }
+}
+
+async function init() {
+  console.log('Initializing CyberBlox UI...');
+  
+  const configPath = path.join(process.cwd(), 'components.json');
+  if (fs.existsSync(configPath)) {
+    console.log('  components.json already exists.');
+  } else {
+    fs.writeFileSync(configPath, JSON.stringify(DEFAULT_CONFIG, null, 2));
+    console.log('  Created components.json');
+  }
+
+  const config = getProjectConfig() || DEFAULT_CONFIG;
+  const utilsDest = resolveAlias(config.aliases.utils + '.ts', config);
   
-  // Copy utils
-  const utilsDest = path.join(targetBase, 'lib', 'utils.ts');
   copyFile(utilsSrc, utilsDest);
 
-  console.log('\nSuccess! Now you can add components using:');
-  console.log('npx cyberblox add [component-name]');
+  console.log('\nSuccess! Project initialized.');
+  console.log('Now you can add components using:');
+  console.log('npx @cyberbloxai/ui-kit add [component-name]');
 }
 
 function addComponent(name) {
   if (!name) {
-    console.error('Please specify a component name, e.g., npx cyberblox add button');
+    console.error('Please specify a component name.');
     process.exit(1);
   }
 
-  const fileName = name.endsWith('.tsx') ? name : `${name}.tsx`;
+  const config = getProjectConfig();
+  if (!config) {
+    console.error('Project not initialized. Run "npx @cyberbloxai/ui-kit init" first.');
+    process.exit(1);
+  }
+
+  const registryItem = COMPONENT_REGISTRY[name];
+  
+  // Recursive add for internal dependencies
+  if (registryItem && registryItem.dependencies) {
+    registryItem.dependencies.forEach(dep => {
+      if (!dep.startsWith('@')) { // It's an internal component
+        addComponent(dep);
+      }
+    });
+  }
+
+  const fileName = name.endsWith('.tsx') || name.endsWith('.ts') ? name : `${name}.tsx`;
   const srcPath = path.join(componentsSrc, fileName);
   
+  // Also check in hooks if not found in components
+  let finalSrcPath = srcPath;
+  let targetDir = resolveAlias(config.aliases.ui, config);
+
   if (!fs.existsSync(srcPath)) {
-    console.error(`Component "${name}" not found in library.`);
-    process.exit(1);
+    const hookPath = path.join(packageRoot, 'src', 'hooks', fileName);
+    const libPath = path.join(packageRoot, 'src', 'lib', fileName);
+    
+    if (fs.existsSync(hookPath)) {
+      finalSrcPath = hookPath;
+      targetDir = resolveAlias(config.aliases.hooks || '@/hooks', config);
+    } else if (fs.existsSync(libPath)) {
+      finalSrcPath = libPath;
+      targetDir = resolveAlias(config.aliases.lib || '@/lib', config);
+    } else {
+      console.error(`Component or file "${name}" not found.`);
+      return;
+    }
   }
 
-  const targetBase = getTargetDir();
-  const destPath = path.join(targetBase, 'components', 'ui', fileName);
+  const destPath = path.join(targetDir, path.basename(finalSrcPath));
   
-  copyFile(srcPath, destPath);
-  console.log(`\nComponent "${name}" added successfully!`);
+  if (fs.existsSync(destPath)) {
+    console.log(`  File ${path.basename(finalSrcPath)} already exists. Skipping.`);
+  } else {
+    copyFile(finalSrcPath, destPath);
+    
+    // Install npm dependencies
+    if (registryItem && registryItem.dependencies) {
+      const npmDeps = registryItem.dependencies.filter(d => d.startsWith('@') || !COMPONENT_REGISTRY[d]);
+      const regDeps = registryItem.registryDependencies || [];
+      installDependencies([...new Set([...npmDeps, ...regDeps])]);
+    }
+  }
 }
 
 function listComponents() {
@@ -86,8 +386,8 @@ switch (command) {
   default:
     console.log('CyberBlox UI CLI');
     console.log('\nUsage:');
-    console.log('  npx cyberblox init         - Setup lib/utils.ts');
-    console.log('  npx cyberblox add [name]   - Add a component to your project');
-    console.log('  npx cyberblox list         - List all available components');
+    console.log('  npx @cyberbloxai/ui-kit init         - Setup components.json and utils');
+    console.log('  npx @cyberbloxai/ui-kit add [name]   - Add a component');
+    console.log('  npx @cyberbloxai/ui-kit list         - List components');
     break;
 }