@cyberbloxai/ui-kit 0.1.2 → 0.2.1

package/README.md

@@ -18,6 +18,34 @@ CyberBlox UI Kit is a modular, themeable component library designed for building
 
 ## Installation
 
+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. It also handles dependencies and installs necessary npm packages automatically.
+
+```bash
+# 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.
+
 ```bash
 npm install @cyberbloxai/ui-kit
 ```
@@ -25,7 +53,7 @@ npm install @cyberbloxai/ui-kit
 > **Note**: If you are using **Tailwind CSS v4** and encounter a dependency conflict (`ERESOLVE`), you can install using:
 > `npm install @cyberbloxai/ui-kit --legacy-peer-deps`
 
-## Quick Start
+## Quick Start (Library Style)
 
 1. **Import Styles**: Add the CSS to your main entry file (e.g., `main.tsx` or `App.tsx`) **before** your other imports:
 
@@ -76,6 +104,7 @@ function App() {
 
 ## Troubleshooting
 
+- **CLI Not Working**: If `npx @cyberbloxai/ui-kit` fails, try `npx @cyberbloxai/ui-kit@latest`.
 - **Blank Page / White Screen**: This usually indicates a JavaScript error. Check your browser console (`F12` -> Console).
   - Ensure you have `react` and `react-dom` installed.
   - If using Vite, try clearing your cache: `rm -rf node_modules/.vite` and restart with `npm run dev`.

package/package.json

@@ -1,7 +1,10 @@
 {
   "name": "@cyberbloxai/ui-kit",
-  "version": "0.1.2",
-  "description": "Production-ready UI component library built on Radix UI + Tailwind CSS.",
+  "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"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/abhishekjohn1507/uni-kit-forge.git"
@@ -23,6 +26,7 @@
   },
   "files": [
     "dist",
+    "src",
     "README.md"
   ],
   "sideEffects": [

package/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/src/App.tsx

@@ -0,0 +1,31 @@
+import { Toaster } from "@/components/ui/toaster";
+import { Toaster as Sonner } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Index from "./pages/Index";
+import ComponentsList from "./pages/ComponentsList";
+import ComponentDetail from "./pages/ComponentDetail";
+import NotFound from "./pages/NotFound";
+
+const queryClient = new QueryClient();
+
+const App = () => (
+  <QueryClientProvider client={queryClient}>
+    <TooltipProvider>
+      <Toaster />
+      <Sonner />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Index />} />
+          <Route path="/components" element={<ComponentsList />} />
+          <Route path="/components/:id" element={<ComponentDetail />} />
+          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </BrowserRouter>
+    </TooltipProvider>
+  </QueryClientProvider>
+);
+
+export default App;

package/src/cli.js

@@ -0,0 +1,393 @@
+#!/usr/bin/env node
+
+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);
+
+const packageRoot = path.join(__dirname, '..');
+const componentsSrc = path.join(packageRoot, 'src', 'components', 'ui');
+const utilsSrc = path.join(packageRoot, 'src', 'lib', 'utils.ts');
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+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) {
+  const destDir = path.dirname(dest);
+  if (!fs.existsSync(destDir)) {
+    fs.mkdirSync(destDir, { recursive: true });
+  }
+  
+  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 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);
+  
+  copyFile(utilsSrc, utilsDest);
+
+  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.');
+    process.exit(1);
+  }
+
+  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)) {
+    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 destPath = path.join(targetDir, path.basename(finalSrcPath));
+  
+  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() {
+  console.log('Available components:');
+  const files = fs.readdirSync(componentsSrc);
+  files.forEach(file => {
+    if (file.endsWith('.tsx')) {
+      console.log(`- ${file.replace('.tsx', '')}`);
+    }
+  });
+}
+
+switch (command) {
+  case 'init':
+    init();
+    break;
+  case 'add':
+    addComponent(args[1]);
+    break;
+  case 'list':
+    listComponents();
+    break;
+  default:
+    console.log('CyberBlox UI CLI');
+    console.log('\nUsage:');
+    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;
+}

package/src/components/CodeBlock.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  className?: string;
+}
+
+const CodeBlock = ({ code, language = "tsx", className }: CodeBlockProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={cn("relative group", className)}>
+      <div className="flex items-center justify-between px-4 py-2 bg-muted/80 border border-border/40 rounded-t-lg">
+        <span className="text-xs font-mono text-muted-foreground">{language}</span>
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+        >
+          {copied ? (
+            <>
+              <Check className="h-3.5 w-3.5 text-success" />
+              <span>Copied</span>
+            </>
+          ) : (
+            <>
+              <Copy className="h-3.5 w-3.5" />
+              <span>Copy</span>
+            </>
+          )}
+        </button>
+      </div>
+      <pre className="overflow-x-auto p-4 bg-background/80 border border-t-0 border-border/40 rounded-b-lg">
+        <code className="text-sm font-mono text-foreground/90 leading-relaxed whitespace-pre">
+          {code}
+        </code>
+      </pre>
+    </div>
+  );
+};
+
+export default CodeBlock;