@frontfamily/cli 0.1.1 → 0.2.0

package/README.md

@@ -1,60 +1,151 @@
-# @frontfamily/cli
+<div align="center">
+  <h1>@frontfamily/cli</h1>
+  <p>Eject production-ready UI components into any project.<br/>162 templates · 9 frameworks · 18 patterns · works offline.</p>
+  <p>
+    <a href="https://www.npmjs.com/package/@frontfamily/cli"><img src="https://img.shields.io/npm/v/@frontfamily/cli.svg?style=flat-square&color=3B82F6" alt="npm version"></a>
+    <a href="https://www.npmjs.com/package/@frontfamily/cli"><img src="https://img.shields.io/npm/dm/@frontfamily/cli.svg?style=flat-square&color=4ADE80" alt="downloads"></a>
+    <img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square" alt="license">
+  </p>
+</div>
 
-Eject production-ready UI components into your project. 72 templates across 9 frameworks and 8 patterns.
+---
 
-## Quick Start
+## Why
+
+You need an auth form in Quasar. Or a data table in Chakra. Or a settings panel in Angular Material. Instead of writing it from scratch, eject a tested, production-ready template in one command.
+
+All templates are **bundled inside the package** — no network requests, no API keys, no accounts. Works offline, works in CI.
+
+## Install
 
 ```bash
-# Interactive — prompts for pattern + framework
+# Use directly (no install needed)
 npx @frontfamily/cli eject
 
-# Direct — no prompts
-npx @frontfamily/cli eject auth-form -f vue-quasar
+# Or install globally
+npm i -g @frontfamily/cli
+frontfamily eject
 ```
 
-The component file is written to `./components/` in your current directory.
+## Usage
 
-## Available Patterns
+### Interactive mode
 
-| Pattern | Description |
-|---|---|
-| `data-table` | Sortable, paginated table with status badges |
-| `auth-form` | Login/signup with validation, password toggle |
-| `card-feed` | Responsive grid of user profile cards |
-| `dashboard-stats` | KPI cards with progress bars and trends |
-| `modal-dialog` | Confirmation, form, and alert dialogs |
-| `nav-bar` | Top nav with links, dropdown, search, mobile drawer |
-| `notification-center` | Toast stack with auto-dismiss and history |
-| `settings-panel` | Toggles, sliders, radio groups, selects |
-
-## Available Frameworks
+```bash
+$ npx @frontfamily/cli eject
+
+┌  FrontFamily Eject
+│
+◆  Select the UI Pattern:
+│  ○ Data Table
+│  ○ Auth Form          ← you pick
+│  ○ Card Feed
+│  ...
+│
+◆  Select the framework:
+│  ○ Vue 3 + Quasar     ← you pick
+│  ○ React + Chakra UI
+│  ○ React + Material UI
+│  ...
+│
+◇  Ejected successfully!
+│
+└  ✨ Your component is ready at ./components/QuasarAuthForm.vue
+```
 
-| ID | Framework | File Type |
-|---|---|---|
-| `react-chakra` | Chakra UI | `.tsx` |
-| `react-mui` | Material UI | `.tsx` |
-| `react-antd` | Ant Design | `.tsx` |
-| `react-eui` | Elastic EUI | `.tsx` |
-| `react-mantine` | Mantine | `.tsx` |
-| `react-bootstrap` | Bootstrap | `.tsx` |
-| `react-tailwind` | Tailwind | `.tsx` |
-| `vue-quasar` | Quasar (Vue 3) | `.vue` |
-| `angular-material` | Angular Material | `.ts` |
+### Direct mode
 
-## How It Works
+```bash
+# Skip prompts — specify pattern and framework directly
+npx @frontfamily/cli eject auth-form -f vue-quasar
+npx @frontfamily/cli eject data-table -f react-mui
+npx @frontfamily/cli eject settings-panel -f angular-material
+```
 
-All 72 templates are bundled inside the package. No network requests, no API calls, no account needed. Works completely offline.
+## Patterns
 
-The CLI never reads or modifies your existing files — it only creates new files in `./components/`.
+| ID | Name | What you get |
+|---|---|---|
+| `data-table` | Data Table | Sortable, paginated table with status badges and a11y scores |
+| `auth-form` | Auth Form | Login/signup with validation, password visibility toggle, error states |
+| `card-feed` | Card Feed | Responsive grid of profile cards with avatars, badges, hover effects |
+| `dashboard-stats` | Dashboard Stats | 4 KPI cards with progress bars, trend indicators, department breakdown |
+| `modal-dialog` | Modal Dialog | Confirmation, form, and alert dialogs with overlay and keyboard dismiss |
+| `nav-bar` | Navigation Bar | Top nav with links, dropdown menu, search input, mobile hamburger drawer |
+| `notification-center` | Notifications | Toast stack with auto-dismiss, progress bars, and notification history |
+| `settings-panel` | Settings Panel | Toggles, sliders, radio groups, selects with save/reset actions |
+| `file-upload` | File Upload | Drag-and-drop zone, file list, progress bars, and validation |
+| `date-picker` | Date Picker | Calendar selector with range mode, time input, and locale support |
+| `sidebar-layout` | Sidebar Layout | Collapsible sidebar with nested nav, icons, and responsive drawer |
+| `data-grid` | Data Grid | Editable table with inline editing, column reorder, and virtualization |
+| `command-palette` | Command Palette | Cmd+K search overlay with fuzzy matching and keyboard navigation |
+| `pricing-table` | Pricing Table | Tier cards with feature comparison, toggle billing cycle, and CTAs |
+| `stepper-wizard` | Stepper Wizard | Multi-step form with validation, progress indicator, and back/next |
+| `autocomplete` | Autocomplete | Search input with async suggestions, multi-select, and custom rendering |
+| `kanban-board` | Kanban Board | Draggable cards across columns with add, edit, and status filtering |
+| `chat-ui` | Chat UI | Message bubbles, input with send, timestamps, and typing indicator |
+
+## Frameworks
+
+| Flag | ID | Framework | Output |
+|---|---|---|---|
+| ⚛️ | `react-chakra` | Chakra UI | `.tsx` |
+| ⚛️ | `react-mui` | Material UI (MUI) | `.tsx` |
+| ⚛️ | `react-antd` | Ant Design | `.tsx` |
+| ⚛️ | `react-eui` | Elastic EUI | `.tsx` |
+| ⚛️ | `react-mantine` | Mantine | `.tsx` |
+| ⚛️ | `react-bootstrap` | Bootstrap | `.tsx` |
+| ⚛️ | `react-tailwind` | Tailwind / Headless UI | `.tsx` |
+| 💚 | `vue-quasar` | Quasar (Vue 3) | `.vue` |
+| 🔺 | `angular-material` | Angular Material | `.ts` |
+
+**18 patterns × 9 frameworks = 162 templates**
+
+## What you get
+
+Each ejected file is a **single, self-contained component** with:
+
+- Framework-specific imports (`@chakra-ui/react`, `quasar`, `@angular/material`, etc.)
+- Proper TypeScript types
+- Theme support (dark/light)
+- Density support (compact/comfortable)
+- Loading and error states
+- Responsive layout
+
+The file is yours — modify it however you want. No dependency on `@frontfamily/cli` at runtime.
+
+## FAQ
+
+**Does it need internet?**
+No. All 162 templates are bundled in the npm package. Fully offline.
+
+**Does it touch my existing files?**
+No. It only creates new files in `./components/`. Never reads, modifies, or deletes anything.
+
+**What if `./components/` doesn't exist?**
+It creates the directory automatically.
+
+**Is this like shadcn/ui?**
+Similar concept — you own the code. The difference: FrontFamily covers 9 frameworks (React, Vue, Angular), not just React + Tailwind.
+
+**Can I use the output commercially?**
+Yes. Apache 2.0 license. No restrictions.
 
 ## Commands
 
-```bash
-frontfamily eject                        # Interactive mode
-frontfamily eject <pattern>              # Select framework only
-frontfamily eject <pattern> -f <framework>  # Fully non-interactive
-frontfamily --version                    # Show version
 ```
+frontfamily eject                              Interactive mode
+frontfamily eject <pattern>                    Prompts for framework only
+frontfamily eject <pattern> -f <framework>     No prompts
+frontfamily --version                          Print version
+frontfamily --help                             Show help
+```
+
+## Links
+
+- [Web Converter](https://frontfamily.com/converter) — convert code between frameworks online
+- [Migration Guides](https://frontfamily.com/guides) — 9 guides with 219 searchable component mappings
+- [CLI Documentation](https://frontfamily.com/docs) — full docs with examples
 
 ## License