@kaushalparajuli/react-crud-ui 1.0.14 → 1.0.16

package/README.md

@@ -1,25 +1,36 @@
-# @yaj/react-crud-ui
+# @kaushalparajuli/react-crud-ui
 
-A comprehensive React CRUD and UI component library with Zustand store integration.
+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, and more
-- 📊 **CRUD Components** - DataTable, CrudList, CrudForm, CrudDetail
+- 🎨 **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
-- 📱 **Responsive** - Mobile-first design with Tailwind CSS
+- 🏗️ **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 @yaj/react-crud-ui
+npm install @kaushalparajuli/react-crud-ui
 # or
-yarn add @yaj/react-crud-ui
+yarn add @kaushalparajuli/react-crud-ui
 # or
-pnpm add @yaj/react-crud-ui
+pnpm add @kaushalparajuli/react-crud-ui
 ```
 
 ### Peer Dependencies
@@ -37,7 +48,7 @@ npm install react react-dom react-router-dom zustand
 Add the styles to your main entry file (e.g., `main.jsx` or `App.jsx`):
 
 ```jsx
-import '@yaj/react-crud-ui/styles.css'
+import '@kaushalparajuli/react-crud-ui/styles.css'
 ```
 
 ### 2. Configure Tailwind (Optional)
@@ -49,7 +60,7 @@ If you're using Tailwind CSS in your project, add the package to your content pa
 module.exports = {
   content: [
     './src/**/*.{js,jsx,ts,tsx}',
-    './node_modules/@yaj/react-crud-ui/dist/**/*.{js,cjs}',
+    './node_modules/@kaushalparajuli/react-crud-ui/dist/**/*.{js,cjs}',
   ],
   // ... rest of config
 }
@@ -60,7 +71,9 @@ module.exports = {
 ### UI Components
 
 ```jsx
-import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from '@yaj/react-crud-ui'
+```jsx
+import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from '@kaushalparajuli/react-crud-ui'
+```
 
 function MyComponent() {
   return (
@@ -80,7 +93,9 @@ function MyComponent() {
 ### Form Components
 
 ```jsx
-import { QInput, QSelect, QSwitch, QForm } from '@yaj/react-crud-ui'
+```jsx
+import { QInput, QSelect, QSwitch, QForm } from '@kaushalparajuli/react-crud-ui'
+```
 
 function MyForm() {
   const handleSubmit = (e) => {
@@ -117,7 +132,9 @@ function MyForm() {
 ### DataTable
 
 ```jsx
-import { DataTable } from '@yaj/react-crud-ui'
+```jsx
+import { DataTable } from '@kaushalparajuli/react-crud-ui'
+```
 
 const columns = [
   { header: 'Name', accessor: 'name', sortable: true },
@@ -154,7 +171,9 @@ function UserTable() {
 ### CrudList
 
 ```jsx
-import { CrudList } from '@yaj/react-crud-ui'
+```jsx
+import { CrudList } from '@kaushalparajuli/react-crud-ui'
+```
 
 function ProductList() {
   const columns = [
@@ -180,7 +199,9 @@ function ProductList() {
 ### CrudForm
 
 ```jsx
-import { CrudForm } from '@yaj/react-crud-ui'
+```jsx
+import { CrudForm } from '@kaushalparajuli/react-crud-ui'
+```
 import { z } from 'zod'
 
 const schema = z.object({
@@ -214,7 +235,9 @@ function ProductForm() {
 
 ```jsx
 import { create } from 'zustand'
-import { createCrudStore } from '@yaj/react-crud-ui'
+```jsx
+import { createCrudStore } from '@kaushalparajuli/react-crud-ui'
+```
 import { apiClient } from './api'
 
 // Create a product store