@kaushalparajuli/react-crud-ui 1.0.14 → 1.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -16
- package/dist/index.cjs +5 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +414 -410
- package/dist/index.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,25 +1,36 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @kaushalparajuli/react-crud-ui
|
|
2
2
|
|
|
3
|
-
A comprehensive React CRUD and UI component library with Zustand store integration.
|
|
3
|
+
A comprehensive React CRUD and UI component library with Zustand store integration, layout components, and CLI code generator.
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
- 🎨 **20+ UI Components** - Button, Card, Badge, Dialog, Select, Tabs, and more
|
|
8
|
-
- 📊 **CRUD Components** - DataTable, CrudList, CrudForm, CrudDetail
|
|
7
|
+
- 🎨 **20+ UI Components** - Button, Card, Badge, Dialog, Select, Tabs, Table, and more
|
|
8
|
+
- 📊 **CRUD Components** - DataTable, CrudList, CrudForm, CrudDetail with store integration
|
|
9
9
|
- 🔄 **Zustand Store Factory** - Create CRUD stores with minimal code
|
|
10
10
|
- 🎯 **Form Components** - QInput, QSelect, QSwitch, QSearchSelect with validation
|
|
11
|
-
-
|
|
11
|
+
- 🏗️ **Layout Components** - AuthLayout, LoginPage, DashboardLayout with Sidebar & Header
|
|
12
|
+
- 📱 **Responsive** - Mobile-first design with Tailwind CSS v4
|
|
12
13
|
- 🌙 **Dark Mode** - Built-in dark mode support via CSS variables
|
|
13
14
|
- ⚡ **TypeScript Ready** - Full TypeScript support
|
|
15
|
+
- 🛠️ **CLI Generator** - Generate CRUD modules with one command
|
|
16
|
+
|
|
17
|
+
## Documentation
|
|
18
|
+
|
|
19
|
+
- [Getting Started](./docs/1_GETTING_STARTED.md) - Installation and setup
|
|
20
|
+
- [UI Components](./docs/2_UI_COMPONENTS.md) - Button, Card, Badge, Input, Select, etc.
|
|
21
|
+
- [CRUD Components](./docs/3_CRUD_COMPONENTS.md) - DataTable, CrudList, CrudForm, CrudDetail
|
|
22
|
+
- [Form Components](./docs/4_FORM_COMPONENTS.md) - QInput, QTextarea, QSelect, QSwitch
|
|
23
|
+
- [Layout Components](./docs/5_LAYOUT_COMPONENTS.md) - AuthLayout, LoginPage, DashboardLayout
|
|
24
|
+
- [Store Factory](./docs/6_STORE_FACTORY.md) - createCrudStore and store patterns
|
|
14
25
|
|
|
15
26
|
## Installation
|
|
16
27
|
|
|
17
28
|
```bash
|
|
18
|
-
npm install @
|
|
29
|
+
npm install @kaushalparajuli/react-crud-ui
|
|
19
30
|
# or
|
|
20
|
-
yarn add @
|
|
31
|
+
yarn add @kaushalparajuli/react-crud-ui
|
|
21
32
|
# or
|
|
22
|
-
pnpm add @
|
|
33
|
+
pnpm add @kaushalparajuli/react-crud-ui
|
|
23
34
|
```
|
|
24
35
|
|
|
25
36
|
### Peer Dependencies
|
|
@@ -37,7 +48,7 @@ npm install react react-dom react-router-dom zustand
|
|
|
37
48
|
Add the styles to your main entry file (e.g., `main.jsx` or `App.jsx`):
|
|
38
49
|
|
|
39
50
|
```jsx
|
|
40
|
-
import '@
|
|
51
|
+
import '@kaushalparajuli/react-crud-ui/styles.css'
|
|
41
52
|
```
|
|
42
53
|
|
|
43
54
|
### 2. Configure Tailwind (Optional)
|
|
@@ -49,7 +60,7 @@ If you're using Tailwind CSS in your project, add the package to your content pa
|
|
|
49
60
|
module.exports = {
|
|
50
61
|
content: [
|
|
51
62
|
'./src/**/*.{js,jsx,ts,tsx}',
|
|
52
|
-
'./node_modules/@
|
|
63
|
+
'./node_modules/@kaushalparajuli/react-crud-ui/dist/**/*.{js,cjs}',
|
|
53
64
|
],
|
|
54
65
|
// ... rest of config
|
|
55
66
|
}
|
|
@@ -60,7 +71,9 @@ module.exports = {
|
|
|
60
71
|
### UI Components
|
|
61
72
|
|
|
62
73
|
```jsx
|
|
63
|
-
|
|
74
|
+
```jsx
|
|
75
|
+
import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from '@kaushalparajuli/react-crud-ui'
|
|
76
|
+
```
|
|
64
77
|
|
|
65
78
|
function MyComponent() {
|
|
66
79
|
return (
|
|
@@ -80,7 +93,9 @@ function MyComponent() {
|
|
|
80
93
|
### Form Components
|
|
81
94
|
|
|
82
95
|
```jsx
|
|
83
|
-
|
|
96
|
+
```jsx
|
|
97
|
+
import { QInput, QSelect, QSwitch, QForm } from '@kaushalparajuli/react-crud-ui'
|
|
98
|
+
```
|
|
84
99
|
|
|
85
100
|
function MyForm() {
|
|
86
101
|
const handleSubmit = (e) => {
|
|
@@ -117,7 +132,9 @@ function MyForm() {
|
|
|
117
132
|
### DataTable
|
|
118
133
|
|
|
119
134
|
```jsx
|
|
120
|
-
|
|
135
|
+
```jsx
|
|
136
|
+
import { DataTable } from '@kaushalparajuli/react-crud-ui'
|
|
137
|
+
```
|
|
121
138
|
|
|
122
139
|
const columns = [
|
|
123
140
|
{ header: 'Name', accessor: 'name', sortable: true },
|
|
@@ -154,7 +171,9 @@ function UserTable() {
|
|
|
154
171
|
### CrudList
|
|
155
172
|
|
|
156
173
|
```jsx
|
|
157
|
-
|
|
174
|
+
```jsx
|
|
175
|
+
import { CrudList } from '@kaushalparajuli/react-crud-ui'
|
|
176
|
+
```
|
|
158
177
|
|
|
159
178
|
function ProductList() {
|
|
160
179
|
const columns = [
|
|
@@ -180,7 +199,9 @@ function ProductList() {
|
|
|
180
199
|
### CrudForm
|
|
181
200
|
|
|
182
201
|
```jsx
|
|
183
|
-
|
|
202
|
+
```jsx
|
|
203
|
+
import { CrudForm } from '@kaushalparajuli/react-crud-ui'
|
|
204
|
+
```
|
|
184
205
|
import { z } from 'zod'
|
|
185
206
|
|
|
186
207
|
const schema = z.object({
|
|
@@ -214,7 +235,9 @@ function ProductForm() {
|
|
|
214
235
|
|
|
215
236
|
```jsx
|
|
216
237
|
import { create } from 'zustand'
|
|
217
|
-
|
|
238
|
+
```jsx
|
|
239
|
+
import { createCrudStore } from '@kaushalparajuli/react-crud-ui'
|
|
240
|
+
```
|
|
218
241
|
import { apiClient } from './api'
|
|
219
242
|
|
|
220
243
|
// Create a product store
|