npm package: @kaushalparajuli/react-crud-ui
Description: A comprehensive React CRUD and UI component library with Zustand store integration
Author: Yaj Digital
Latest version: 1.1.13

# @kaushalparajuli/react-crud-ui

A comprehensive React CRUD and UI component library with Zustand store integration, layout components, and CLI code generator.

## Features

- 🎨 **20+ UI Components** - Button, Card, Badge, Dialog, Select, Tabs, Table, and more
- 📊 **CRUD Components** - DataTable, CrudList, CrudForm, CrudDetail with store integration
- 🔄 **Zustand Store Factory** - Create CRUD stores with minimal code
- 🎯 **Form Components** - QInput, QSelect, QSwitch, QSearchSelect with validation
- 🏗️ **Layout Components** - AuthLayout, LoginPage, DashboardLayout with Sidebar & Header
- 📱 **Responsive** - Mobile-first design with Tailwind CSS v4
- 🌙 **Dark Mode** - Built-in dark mode support via CSS variables
- ⚡ **TypeScript Ready** - Full TypeScript support
- 🛠️ **CLI Generator** - Generate CRUD modules with one command

## Documentation

- [Getting Started](./docs/1_GETTING_STARTED.md) - Installation and setup
- [UI Components](./docs/2_UI_COMPONENTS.md) - Button, Card, Badge, Input, Select, etc.
- [CRUD Components](./docs/3_CRUD_COMPONENTS.md) - DataTable, CrudList, CrudForm, CrudDetail
- [Form Components](./docs/4_FORM_COMPONENTS.md) - QInput, QTextarea, QSelect, QSwitch
- [Layout Components](./docs/5_LAYOUT_COMPONENTS.md) - AuthLayout, LoginPage, DashboardLayout
- [Store Factory](./docs/6_STORE_FACTORY.md) - createCrudStore and store patterns

## Installation

```bash
npm install @kaushalparajuli/react-crud-ui
# or
yarn add @kaushalparajuli/react-crud-ui
# or
pnpm add @kaushalparajuli/react-crud-ui
```

### Peer Dependencies

Make sure you have these peer dependencies installed:

```bash
npm install react react-dom react-router-dom zustand
```

## CLI

Generate CRUD modules with a single command:

```bash
npx @kaushalparajuli/react-crud-ui generate <module-name>
```

Example:
```bash
npx @kaushalparajuli/react-crud-ui generate product
```

This will create:
- `src/pages/<module>/ModuleListPage.jsx` - List page with table and actions
- `src/pages/<module>/ModuleFormPage.jsx` - Create/edit form page
- `src/pages/<module>/ModuleDetailPage.jsx` - Detail view page
- `src/routes/modules/<module>Routes.js` - Route definitions
- `src/stores/use<Module>Store.js` - Zustand store for CRUD operations

## Setup

### 1. Import Styles

Add the styles to your main entry file (e.g., `main.jsx` or `App.jsx`):

```jsx
import '@kaushalparajuli/react-crud-ui/styles.css'
```

### 2. Configure Tailwind (Optional)

If you're using Tailwind CSS in your project, add the package to your content paths:

```js
// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@kaushalparajuli/react-crud-ui/dist/**/*.{js,cjs}',
  ],
  // ... rest of config
}
```

## Usage

### UI Components

```jsx
```jsx
import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from '@kaushalparajuli/react-crud-ui'
```

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>My Card</CardTitle>
      </CardHeader>
      <CardContent>
        <Badge variant="success">Active</Badge>
        <Button onClick={() => alert('Clicked!')}>Click Me</Button>
      </CardContent>
    </Card>
  )
}
```

### Form Components

```jsx
```jsx
import { QInput, QSelect, QSwitch, QForm } from '@kaushalparajuli/react-crud-ui'
```

function MyForm() {
  const handleSubmit = (e) => {
    const formData = new FormData(e.target)
    console.log(Object.fromEntries(formData))
  }

  return (
    <QForm onSubmit={handleSubmit}>
      <QInput
        label="Name"
        name="name"
        placeholder="Enter name"
        required
      />
      <QSelect
        label="Status"
        name="status"
        options={[
          { value: 'active', label: 'Active' },
          { value: 'inactive', label: 'Inactive' },
        ]}
      />
      <QSwitch
        label="Is Published"
        name="is_published"
      />
      <Button type="submit">Save</Button>
    </QForm>
  )
}
```

### DataTable

```jsx
```jsx
import { DataTable } from '@kaushalparajuli/react-crud-ui'
```

const columns = [
  { header: 'Name', accessor: 'name', sortable: true },
  { header: 'Email', accessor: 'email' },
  { 
    header: 'Status', 
    accessor: 'status',
    render: (row) => <Badge>{row.status}</Badge>
  },
]

const actions = [
  { label: 'View', icon: Eye, onClick: (row) => console.log('View', row) },
  { label: 'Edit', icon: Pencil, onClick: (row) => console.log('Edit', row) },
  { label: 'Delete', icon: Trash2, variant: 'destructive', onClick: (row) => console.log('Delete', row) },
]

function UserTable() {
  return (
    <DataTable
      data={users}
      columns={columns}
      actions={actions}
      searchable
      onSearchChange={(search) => console.log(search)}
      currentPage={1}
      totalPages={10}
      onPageChange={(page) => console.log(page)}
    />
  )
}
```

### CrudList

```jsx
```jsx
import { CrudList } from '@kaushalparajuli/react-crud-ui'
```

function ProductList() {
  const columns = [
    { header: 'Name', accessor: 'name', sortable: true },
    { header: 'Price', accessor: 'price', format: (v) => `$${v}` },
  ]

  return (
    <CrudList
      title="Products"
      description="Manage your products"
      data={products}
      columns={columns}
      onCreate={() => navigate('/products/create')}
      onEdit={(item) => navigate(`/products/${item.id}/edit`)}
      onDelete={(item) => deleteProduct(item.id)}
      itemName="product"
    />
  )
}
```

### CrudForm

```jsx
```jsx
import { CrudForm } from '@kaushalparajuli/react-crud-ui'
```
import { z } from 'zod'

const schema = z.object({
  name: z.string().min(1, 'Name is required'),
  price: z.number().min(0, 'Price must be positive'),
  is_active: z.boolean(),
})

const fields = [
  { name: 'name', label: 'Name', type: 'text', required: true },
  { name: 'price', label: 'Price', type: 'number', required: true },
  { name: 'description', label: 'Description', type: 'textarea', colSpan: 2 },
  { name: 'is_active', label: 'Active', type: 'switch' },
]

function ProductForm() {
  return (
    <CrudForm
      title="Create Product"
      fields={fields}
      validationSchema={schema}
      onSubmit={(data) => console.log(data)}
      onCancel={() => navigate(-1)}
      columns={2}
    />
  )
}
```

### Create CRUD Store with Zustand

```jsx
import { create } from 'zustand'
```jsx
import { createCrudStore } from '@kaushalparajuli/react-crud-ui'
```
import { apiClient } from './api'

// Create a product store
const useProductStore = create(
  createCrudStore({
    name: 'products',
    apiClient,
    endpoint: '/api/products',
  })
)

// Use in component
function ProductPage() {
  const { 
    items, 
    loading, 
    fetchList, 
    create, 
    update, 
    delete: deleteItem,
    page,
    setPage,
  } = useProductStore()

  useEffect(() => {
    fetchList()
  }, [page])

  return (
    <CrudList
      data={items}
      loading={loading}
      // ...
    />
  )
}
```

## Components Reference

### UI Components

| Component | Description |
|-----------|-------------|
| `Button` | Button with variants (default, destructive, outline, secondary, ghost, link) |
| `Card` | Card container with Header, Content, Footer |
| `Badge` | Badge/Tag with variants |
| `Input` | Text input field |
| `Textarea` | Multi-line text input |
| `Select` | Dropdown select |
| `SearchSelect` | Searchable dropdown select |
| `Checkbox` | Checkbox input |
| `Switch` | Toggle switch |
| `Dialog` | Modal dialog |
| `Tabs` | Tab navigation |
| `QTabs` | Simplified tabs |
| `Avatar` | User avatar |
| `Tooltip` | Tooltip |
| `DropdownMenu` | Dropdown menu |
| `Alert` | Alert message |
| `Table` | Table elements |
| `Separator` | Visual separator |
| `Skeleton` | Loading skeleton |
| `ScrollArea` | Custom scrollable area |

### Form Components

| Component | Description |
|-----------|-------------|
| `QInput` | Input with label and error handling |
| `QTextarea` | Textarea with label and error handling |
| `QSelect` | Select with label and error handling |
| `QSearchSelect` | Searchable select with label and error handling |
| `QSwitch` | Switch with label |
| `QCheckbox` | Checkbox with label |
| `QForm` | Form wrapper |

### CRUD Components

| Component | Description |
|-----------|-------------|
| `DataTable` | Data table with sorting, filtering, pagination |
| `CrudList` | Complete CRUD list with actions |
| `CrudForm` | Dynamic form for create/edit |
| `CrudDetail` | Detail view component |
| `Pagination` | Pagination controls |
| `Loading` | Loading indicators |
| `EmptyState` | Empty state displays |
| `Modal` | Modal dialogs |

### Utilities

| Function | Description |
|----------|-------------|
| `cn` | Tailwind class merge utility |
| `formatDate` | Format date string |
| `formatDateTime` | Format datetime string |
| `formatCurrency` | Format currency |
| `debounce` | Debounce function |
| `createCrudStore` | Zustand store factory |

## License

MIT