Shared CLI Dashboard

Simple Template System CLI for generating SolidJS components with auto-dependency handling - Dashboard Edition

CLI tools untuk generating SolidJS components dengan sistem template yang sederhana dan auto-dependency management. Build dashboard components dengan cepat dan mudah!

✨ Features

• 🔄 Auto-Dependency Handling - Otomatis generate dependency yang dibutuhkan
• 📝 Simple Template System - Template TSX/JSX yang mudah diedit
• 🎯 Atomic Design - Support atoms, molecules, organisms
• 🏷️ Component Families - Kelompokkan komponen terkait
• 📦 NPM Ready - Siap dipublish dan digunakan di berbagai project
• 📚 TypeScript Support - Full TypeScript integration
• 🎨 Tailwind Ready - Built-in Tailwind CSS classes
• 📖 Storybook Compatible - Generated components siap untuk Storybook

🚀 Quick Start

Installation

# Install globally
npm install -g shared-cli-dashboard

# Install di project
npm install shared-cli-dashboard --save-dev

Generate Components

# Lihat komponen tersedia
shared-cli-dashboard list

# Generate satu komponen
shared-cli-dashboard generate Button

# Generate semua komponen
shared-cli-dashboard generate-all

# Generate ke directory spesifik
shared-cli-dashboard generate-all --dir src/components

Use in Project

# Generate di project Anda
npx shared-cli-dashboard generate Modal

// Import generated components
import { Button, Modal, Alert } from './components';

function App() {
  return (
    <div>
      <Button variant="primary">Click Me</Button>
      <Modal isOpen={true} onClose={() => {}}>
        Modal Content
      </Modal>
    </div>
  );
}

🔥 Auto-Dependency System

Example: Generate Modal Component

shared-cli-dashboard generate Modal

What happens:

1. ✅ Generate Button dependency terlebih dahulu
2. ✅ Generate Modal dengan import yang benar
3. ✅ Update index files

Generated Modal with Auto-Import:

import { JSX } from "solid-js";
import { Button } from "../atoms/Button"; // ✅ Auto-imported

interface ModalProps {
  isOpen?: boolean;
  onClose?: () => void;
  title?: string;
  children?: JSX.Element;
  className?: string;
}

export default function Modal(props: ModalProps) {
  return (
    <>
      {props.isOpen && (
        <div class={`fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 ${props.className || ''}`}>
          <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4">
            {props.title && <h2 class="text-xl font-bold mb-4">{props.title}</h2>}
            {props.children}
            <div class="mt-4 flex justify-end">
              <Button onClick={props.onClose}>Close</Button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

📋 Available Components

Atoms

• Button - Primary button dengan 8 variants
• Alert - Alert dengan info/success/error states
• Input - Form input field
• Badge - Small status badges
• Avatar - User avatar component
• Spinner - Loading indicators

Molecules

• Card - Content card
• Form - Form dengan Button & Input (auto-dependency)
• DialogCard - Confirmation dialog (auto-dependency)
• Notification - Notification dengan Button (auto-dependency)

Organisms

• Modal - Modal dengan Button (auto-dependency)

Families

• Alert Family - Alert, AlertTitle, AlertDescription

🎨 Component Variants

Button Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="danger">Danger</Button>
<Button variant="warning">Warning</Button>
<Button variant="info">Info</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

Button Sizes

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

Alert Variants

<Alert variant="info">Info message</Alert>
<Alert variant="success">Success message</Alert>
<Alert variant="error">Error message</Alert>

📁 Generated Structure

src/components/
├── index.ts              # Main exports
├── atoms/
│   ├── Button.tsx
│   ├── Alert.tsx
│   ├── Input.tsx
│   ├── Badge.tsx
│   ├── Avatar.tsx
│   ├── Spinner.tsx
│   └── index.ts
├── molecules/
│   ├── Card.tsx
│   ├── Form.tsx
│   ├── DialogCard.tsx
│   ├── Notification.tsx
│   └── index.ts
├── organisms/
│   ├── Modal.tsx
│   └── index.ts
└── atoms/alert/          # Family components
    ├── AlertTitle.tsx
    ├── AlertDescription.tsx
    └── index.ts

🛠 CLI Commands

# List available components & templates
shared-cli-dashboard list

# Generate single component
shared-cli-dashboard generate <component>

# Generate all components
shared-cli-dashboard generate-all

# Generate with JSX extension
shared-cli-dashboard jsx <component>

# Generate all with JSX
shared-cli-dashboard jsx-all

# Options:
#   -d, --dir <directory>     Target directory (default: src/components)
#   -e, --extension <ext>     File extension (tsx | jsx, default: tsx)

📝 Template System

CLI menggunakan template TSX/JSX asli yang mudah diedit:

Available Templates

• Simple.tsx - Template universal untuk komponen sederhana
• Button.tsx - Template untuk Button dengan variants
• Alert.tsx - Template untuk Alert dengan variants
• Modal.tsx - Template untuk Modal dengan dependency

Custom Component Configuration

components.json:

{
  "name": "MyComponent",
  "template": "Simple",
  "defaultClass": "p-6 bg-white rounded-lg shadow",
  "imports": ["Button"],
  "type": "molecule"
}

📖 Documentation

• 📚 Full Usage Guide - Panduan lengkap step by step
• ⚡ Quick Start - Panduan singkat
• 🎨 Storybook Setup
• 🚀 NPM Publishing
• 🛠 Troubleshooting

🏗 Development

Local Development

# Clone repository
git clone <repository-url>
cd solid-cli/packages/shared-cli-dashboard

# Install dependencies
npm install

# Link untuk development
npm link

# Test CLI
shared-cli-dashboard --version
shared-cli-dashboard list

Adding New Components

1. Add to components.json:

{
  "name": "NewComponent",
  "template": "Simple",
  "defaultClass": "custom-classes",
  "type": "atom"
}

2. Generate:

shared-cli-dashboard generate NewComponent

Custom Templates

Create new template in templates/MyCustom.tsx:

import { JSX } from "solid-js";

interface MyCustomProps {
  children?: JSX.Element;
  className?: string;
}

export default function MyCustom(props: MyCustomProps) {
  return (
    <div class={`custom-base-class ${props.className || ''}`}>
      {props.children}
    </div>
  );
}

📦 Publishing to NPM

# Test package
npm pack

# Dry run
npm publish --dry-run

# Publish
npm publish

🔧 Configuration

components.json Structure

{
  "name": "ComponentName",
  "template": "TemplateName",     // Template to use
  "defaultClass": "classes",      // For Simple template
  "imports": ["Button"],          // Auto-dependencies
  "type": "atom|molecule|organism", // Component type
  "family": "family-name"         // Optional family grouping
}

🛡 Requirements

• Node.js >= 16.0.0
• SolidJS >= 1.0.0
• TypeScript (recommended)

🤝 Contributing

1. Fork the repository
2. Create feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open Pull Request

📄 License

MIT License - see LICENSE file for details

🙋‍♂️ Support

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 📖 Docs: Full Documentation

🎉 Happy Dashboard Building with Shared CLI Dashboard!

Quick Links

• 📚 Full Documentation
• ⚡ Quick Start
• 📦 NPM Package