@shared-cli

Powerful CLI tool for generating SolidJS components with atomic design principles, TypeScript support, and Tailwind CSS styling.

🚀 Features

• Atomic Design: Built with atomic design principles (atoms, molecules, organisms, templates, pages)
• TypeScript First: Full TypeScript support with proper type definitions
• Tailwind CSS: Pre-configured Tailwind CSS classes for consistent styling
• Family Support: Component families for related components (e.g., Breadcrumb family)
• SolidJS Optimized: Specifically designed for SolidJS patterns and best practices
• Customizable: Easy to extend with new components and variants
• Storybook Ready: Generated components work seamlessly with Storybook

📦 Installation

Global Installation

npm install -g @shared-cli

Project Installation

npm install @shared-cli --save-dev

🎯 Quick Start

Generate a Single Component

shared-cli generate Button

Generate All Components

shared-cli generate-all

List Available Components

shared-cli list

Custom Target Directory

shared-cli generate Button --dir src/components

🧩 Available Components

Atoms

• Alert: Notification messages with variants (info, success, error)
• Avatar: User profile images with fallback
• Badge: Status indicators and labels
• Button: Interactive buttons with multiple variants
• Spinner: Loading indicators with size and color options

Families

• Breadcrumb: Navigation breadcrumb system with:
  • Breadcrumb: Container component
  • BreadcrumbList: List wrapper
  • BreadcrumbItem: Individual item
  • BreadcrumbLink: Clickable links
  • BreadcrumbPage: Current page
  • BreadcrumbSeparator: Visual separators
  • `BreadcrumbEllipsis**: Collapsed state indicator

📚 Usage Examples

Basic Button

import { Button } from './components/atoms/Button';

<Button variant="primary" size="md" onClick={() => console.log('clicked')}>
  Click me
</Button>

Alert Component

import { Alert } from './components/atoms/Alert';

<Alert variant="success">
  Operation completed successfully!
</Alert>

Spinner Component

import { Spinner } from './components/atoms/Spinner';

<Spinner size="lg" color="primary" />

Breadcrumb Navigation

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator
} from './components/molecules/breadcrumb';

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/products">Products</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Details</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

🎨 Component Variants

Button Variants

// Solid variants
<Button variant="primary" />
<Button variant="secondary" />
<Button variant="success" />
<Button variant="danger" />

// Outline variants
<Button variant="outline" />
<Button variant="ghost" />

Size Options

// Available for: Button, Avatar, Spinner
<Component size="sm" />  // Small
<Component size="md" />  // Medium (default)
<Component size="lg" />  // Large

🔧 Configuration

Adding New Components

1. Update components.json:

{
  "name": "MyComponent",
  "props": ["size", "variant", "className"],
  "defaultClass": "base-component-class",
  "type": "atom"
}

2. Add JSX Template in bin/index.js:

case 'MyComponent':
  return `// Your component template here`;

3. Generate:

shared-cli generate MyComponent

Custom Component Families

For complex components like Breadcrumb, create families:

{
  "name": "Breadcrumb",
  "props": ["className"],
  "defaultClass": "",
  "type": "molecule",
  "family": "breadcrumb"
}

🎯 Project Structure

src/components/
├── atoms/           # UI building blocks
│   ├── Alert.tsx
│   ├── Avatar.tsx
│   ├── Badge.tsx
│   ├── Button.tsx
│   └── Spinner.tsx
├── molecules/       # Combinations of atoms
│   └── breadcrumb/
│       ├── Breadcrumb.tsx
│       ├── BreadcrumbList.tsx
│       ├── BreadcrumbItem.tsx
│       └── ...
├── organisms/       # Complex UI sections
├── templates/       # Page layouts
├── pages/          # Complete pages
└── index.ts        # Main exports

📖 API Reference

CLI Commands

• generate <component>: Generate a specific component
• generate-all: Generate all available components
• list: List all available components

Options

• -d, --dir <directory>: Target directory (default: src/components)

Props Interface

Each component exports a TypeScript interface:

export interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'outline' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  className?: string;
  onClick?: () => void;
  children: JSX.Element;
}

🔄 Integration with Storybook

Generated components work out-of-the-box with Storybook:

1. Generate components
2. Import in your stories:

import { Button } from '../components/atoms/Button';

// ... Storybook configuration

🛠️ Development

Local Development

# Clone repository
git clone https://github.com/your-username/solid-cli.git

# Install dependencies
cd solid-cli/packages/shared-cli
npm install

# Test CLI
npm run generate Button

Building

npm run build

Testing

npm test
npm run publish:dry  # Test package without publishing

📝 Requirements

• Node.js >= 16.0.0
• SolidJS project
• TypeScript (recommended)
• Tailwind CSS (for styling)

🤝 Contributing

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙋‍♂️ Support

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

🔗 Related Projects

• SolidJS - Reactive JavaScript library
• Tailwind CSS - Utility-first CSS framework
• Storybook - Component development environment

Happy coding with @shared-cli! 🎉