ZedBlock UI Library CLI

A powerful CLI tool for managing and deploying UI components with automatic scanning, dependency management, and docs generation.

🚀 Quick Start

# Install dependencies
npm install

# Initialize CLI in a project
node index.js init

# List all available components
node index.js list

# Add a specific component
node index.js add button

# Deploy a single component to docs
./scripts/deploy-component.sh button

# 🆕 AUTO-SCAN: Deploy ALL valid components automatically
./scripts/deploy-component-scan-basic.sh

📋 Table of Contents

• Installation
• Commands
• 🆕 Auto-Scan Deployment
• Component Structure
• Deployment Scripts
• Development Workflow
• Contributing

Installation

1. Clone the repository
2. Install dependencies: npm install
3. Build the CLI: npm run build

Commands

init

Initialize the CLI configuration in your project.

node index.js init

list

List all available components in the registry.

node index.js list

add <component-name>

Add a specific component to your project.

node index.js add button
node index.js add card

🆕 Auto-Scan Deployment

Revolutionary Component Detection 🔍

We've introduced intelligent auto-scanning that eliminates the need to manually specify component names. The system automatically detects and deploys components that exist in all required locations.

Requirements for Auto-Deployment

A component will be automatically deployed if it exists in:

1. cli/ui/<component-name>.tsx - Component implementation file
2. cli/components.json - Component definition with dependencies
3. cli/component-variants.tsx - Component variants (optional, but recommended)

Auto-Scan Scripts

🎯 Basic Auto-Scan (Recommended)

./scripts/deploy-component-scan-basic.sh

• Uses existing deploy-component.sh logic
• Scans and validates all components
• Deploys only components that meet all requirements
• Provides detailed reporting

⚡ Advanced Auto-Scan

./scripts/deploy-component-auto-scan.sh

• Built-in deployment logic
• Automatically updates DynamicComponentRenderer
• Advanced variant handling
• Complete automation

Example Output

🔍 AUTO-SCANNING FOR DEPLOYABLE COMPONENTS (Basic Mode)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📋 Step 1: Scanning cli/ui/ for component files...
✅ Found 23 component files

📋 Step 2: Validating components...
✅ button: Ready for deployment
✅ card: Ready for deployment
❌ alert: Not ready (missing in components.json)

📊 Validation Summary:
   ✅ Valid for deployment: 19 components
   ❌ Invalid/incomplete: 4 components

🚀 Step 3: Deploying 19 valid components...

🎯 Successfully deployed components:
   • button → http://localhost:3000/components/button
   • card → http://localhost:3000/components/card
   • form → http://localhost:3000/components/form
   [... and 16 more]

Benefits

• 🔥 Zero Manual Work - No need to specify component names
• 🛡️ Safe Deployment - Only deploys components that meet all requirements
• 📊 Clear Reporting - See what was deployed and what was skipped
• 🔄 Repeatable - Run anytime to deploy new components
• 📦 Dependency Management - Auto-installs all required packages

Component Structure

For a component to be auto-deployable, ensure it has:

1. Component File (cli/ui/<name>.tsx)

import * as React from "react";
import { cn } from "../lib/utils";

export interface ComponentProps {
  // Your props here
}

const Component = React.forwardRef<HTMLDivElement, ComponentProps>(
  ({ className, ...props }, ref) => {
    return (
      <div ref={ref} className={cn("base-styles", className)} {...props} />
    );
  }
);
Component.displayName = "Component";

export { Component };

2. Component Definition (cli/components.json)

{
  "components": {
    "component-name": {
      "name": "component-name",
      "type": "components:ui",
      "dependencies": ["@radix-ui/react-slot"],
      "files": [{ "name": "component-name.tsx", "content": "" }],
      "category": "Form",
      "subcategory": "Input"
    }
  }
}

3. Component Variants (cli/component-variants.tsx)

export const componentVariants: ComponentVariants = {
  "component-name": [
    {
      name: "Default",
      description: "Basic component usage",
      code: `import { Component } from "@/components/ui/component-name"

export function ComponentDemo() {
  return <Component>Hello World</Component>
}`,
    },
  ],
};

Deployment Scripts

Manual Deployment

# Deploy a single component
./scripts/deploy-component.sh button

# Deploy with advanced features
./scripts/deploy-component-auto.sh button

# Deploy all components (old method)
./scripts/deploy-all-components.sh

Auto-Scan Deployment (New)

# Basic auto-scan (recommended)
./scripts/deploy-component-scan-basic.sh

# Advanced auto-scan
./scripts/deploy-component-auto-scan.sh

Sync Scripts

# Sync a single component
./scripts/sync-component.sh button

# Sync with full features
./scripts/sync-component-full.sh button

# Sync all components
./scripts/sync-all-components.sh

Development Workflow

Adding a New Component

1. Create the component file

   touch cli/ui/my-component.tsx

2. Add to components.json

   # Add component definition with dependencies

3. Add variants

   # Add to cli/component-variants.tsx

4. Auto-deploy

   ./scripts/deploy-component-scan-basic.sh

Updating Components

Simply run the auto-scan script to redeploy all components:

./scripts/deploy-component-scan-basic.sh

🔧 Script Comparison

| Script | Manual Names | Auto-Scan | DynamicRenderer | Best For | | -------------------------------- | ------------ | ---------- | --------------- | ----------------------------- | | deploy-component.sh | ✅ | ❌ | ❌ | Single component | | deploy-component-auto.sh | ✅ | ❌ | ✅ | Single component + renderer | | deploy-all-components.sh | ❌ | ⚠️ (basic) | ❌ | All components (old) | | deploy-component-scan-basic.sh | ❌ | ✅ | ❌ | Auto-scan (recommended) | | deploy-component-auto-scan.sh | ❌ | ✅ | ✅ | Auto-scan + advanced features |

Tips for Auto-Scan Success

1. Keep components.json updated - Missing entries will cause components to be skipped
2. Add variants for better docs - Components without variants will deploy but with warnings
3. Run regularly - Auto-scan is safe to run multiple times
4. Check skipped components - The script tells you exactly what's missing

Contributing

1. Fork the repository
2. Create your feature branch
3. Add components following the structure above
4. Run auto-scan deployment to test
5. Submit a pull request

License

MIT License - see LICENSE.md for details.

🚀 Pro Tip: Use ./scripts/deploy-component-scan-basic.sh for the best automated deployment experience!