@kaushalparajuli/react-crud-ui 1.0.15 → 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 +23 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,11 +26,11 @@ A comprehensive React CRUD and UI component library with Zustand store integrati
|
|
|
26
26
|
## Installation
|
|
27
27
|
|
|
28
28
|
```bash
|
|
29
|
-
npm install @
|
|
29
|
+
npm install @kaushalparajuli/react-crud-ui
|
|
30
30
|
# or
|
|
31
|
-
yarn add @
|
|
31
|
+
yarn add @kaushalparajuli/react-crud-ui
|
|
32
32
|
# or
|
|
33
|
-
pnpm add @
|
|
33
|
+
pnpm add @kaushalparajuli/react-crud-ui
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
### Peer Dependencies
|
|
@@ -48,7 +48,7 @@ npm install react react-dom react-router-dom zustand
|
|
|
48
48
|
Add the styles to your main entry file (e.g., `main.jsx` or `App.jsx`):
|
|
49
49
|
|
|
50
50
|
```jsx
|
|
51
|
-
import '@
|
|
51
|
+
import '@kaushalparajuli/react-crud-ui/styles.css'
|
|
52
52
|
```
|
|
53
53
|
|
|
54
54
|
### 2. Configure Tailwind (Optional)
|
|
@@ -60,7 +60,7 @@ If you're using Tailwind CSS in your project, add the package to your content pa
|
|
|
60
60
|
module.exports = {
|
|
61
61
|
content: [
|
|
62
62
|
'./src/**/*.{js,jsx,ts,tsx}',
|
|
63
|
-
'./node_modules/@
|
|
63
|
+
'./node_modules/@kaushalparajuli/react-crud-ui/dist/**/*.{js,cjs}',
|
|
64
64
|
],
|
|
65
65
|
// ... rest of config
|
|
66
66
|
}
|
|
@@ -71,7 +71,9 @@ module.exports = {
|
|
|
71
71
|
### UI Components
|
|
72
72
|
|
|
73
73
|
```jsx
|
|
74
|
-
|
|
74
|
+
```jsx
|
|
75
|
+
import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from '@kaushalparajuli/react-crud-ui'
|
|
76
|
+
```
|
|
75
77
|
|
|
76
78
|
function MyComponent() {
|
|
77
79
|
return (
|
|
@@ -91,7 +93,9 @@ function MyComponent() {
|
|
|
91
93
|
### Form Components
|
|
92
94
|
|
|
93
95
|
```jsx
|
|
94
|
-
|
|
96
|
+
```jsx
|
|
97
|
+
import { QInput, QSelect, QSwitch, QForm } from '@kaushalparajuli/react-crud-ui'
|
|
98
|
+
```
|
|
95
99
|
|
|
96
100
|
function MyForm() {
|
|
97
101
|
const handleSubmit = (e) => {
|
|
@@ -128,7 +132,9 @@ function MyForm() {
|
|
|
128
132
|
### DataTable
|
|
129
133
|
|
|
130
134
|
```jsx
|
|
131
|
-
|
|
135
|
+
```jsx
|
|
136
|
+
import { DataTable } from '@kaushalparajuli/react-crud-ui'
|
|
137
|
+
```
|
|
132
138
|
|
|
133
139
|
const columns = [
|
|
134
140
|
{ header: 'Name', accessor: 'name', sortable: true },
|
|
@@ -165,7 +171,9 @@ function UserTable() {
|
|
|
165
171
|
### CrudList
|
|
166
172
|
|
|
167
173
|
```jsx
|
|
168
|
-
|
|
174
|
+
```jsx
|
|
175
|
+
import { CrudList } from '@kaushalparajuli/react-crud-ui'
|
|
176
|
+
```
|
|
169
177
|
|
|
170
178
|
function ProductList() {
|
|
171
179
|
const columns = [
|
|
@@ -191,7 +199,9 @@ function ProductList() {
|
|
|
191
199
|
### CrudForm
|
|
192
200
|
|
|
193
201
|
```jsx
|
|
194
|
-
|
|
202
|
+
```jsx
|
|
203
|
+
import { CrudForm } from '@kaushalparajuli/react-crud-ui'
|
|
204
|
+
```
|
|
195
205
|
import { z } from 'zod'
|
|
196
206
|
|
|
197
207
|
const schema = z.object({
|
|
@@ -225,7 +235,9 @@ function ProductForm() {
|
|
|
225
235
|
|
|
226
236
|
```jsx
|
|
227
237
|
import { create } from 'zustand'
|
|
228
|
-
|
|
238
|
+
```jsx
|
|
239
|
+
import { createCrudStore } from '@kaushalparajuli/react-crud-ui'
|
|
240
|
+
```
|
|
229
241
|
import { apiClient } from './api'
|
|
230
242
|
|
|
231
243
|
// Create a product store
|
package/package.json
CHANGED