@kaushalparajuli/react-crud-ui 1.0.0

package/README.md

@@ -0,0 +1,321 @@
+# @yaj/react-crud-ui
+
+A comprehensive React CRUD and UI component library with Zustand store integration.
+
+## Features
+
+- 🎨 **20+ UI Components** - Button, Card, Badge, Dialog, Select, Tabs, and more
+- 📊 **CRUD Components** - DataTable, CrudList, CrudForm, CrudDetail
+- 🔄 **Zustand Store Factory** - Create CRUD stores with minimal code
+- 🎯 **Form Components** - QInput, QSelect, QSwitch, QSearchSelect with validation
+- 📱 **Responsive** - Mobile-first design with Tailwind CSS
+- 🌙 **Dark Mode** - Built-in dark mode support via CSS variables
+- ⚡ **TypeScript Ready** - Full TypeScript support
+
+## Installation
+
+```bash
+npm install @yaj/react-crud-ui
+# or
+yarn add @yaj/react-crud-ui
+# or
+pnpm add @yaj/react-crud-ui
+```
+
+### Peer Dependencies
+
+Make sure you have these peer dependencies installed:
+
+```bash
+npm install react react-dom react-router-dom zustand
+```
+
+## Setup
+
+### 1. Import Styles
+
+Add the styles to your main entry file (e.g., `main.jsx` or `App.jsx`):
+
+```jsx
+import '@yaj/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/@yaj/react-crud-ui/dist/**/*.{js,cjs}',
+  ],
+  // ... rest of config
+}
+```
+
+## Usage
+
+### UI Components
+
+```jsx
+import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from '@yaj/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
+import { QInput, QSelect, QSwitch, QForm } from '@yaj/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
+import { DataTable } from '@yaj/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
+import { CrudList } from '@yaj/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
+import { CrudForm } from '@yaj/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'
+import { createCrudStore } from '@yaj/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