shadcn-zod-formkit 1.0.1 → 1.0.3
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 +28 -17
- package/dist/index.cjs +767 -315
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +6 -2
- package/dist/index.d.ts +6 -2
- package/dist/index.mjs +750 -299
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -10,30 +10,31 @@
|
|
|
10
10
|
|
|
11
11
|
## 📌 Installation
|
|
12
12
|
|
|
13
|
-
```
|
|
13
|
+
```typescript
|
|
14
14
|
# Using npm
|
|
15
|
-
npm install
|
|
15
|
+
npm install shadcn-zod-formkit
|
|
16
16
|
|
|
17
17
|
# Using yarn
|
|
18
|
-
yarn add
|
|
18
|
+
yarn add shadcn-zod-formkit
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
Add Shadcn
|
|
22
|
-
```
|
|
22
|
+
```typescript
|
|
23
23
|
# Add Shadcn
|
|
24
24
|
npx shadcn@latest init
|
|
25
25
|
```
|
|
26
26
|
You need installa shadcn basic components
|
|
27
|
-
```
|
|
27
|
+
```typescript
|
|
28
28
|
# Add Shadcn Basics
|
|
29
|
-
npx shadcn@latest add accordion alert badge button calendar card checkbox dialog popover form input label select sonner tooltip switch textarea input-otp collapsible input-group
|
|
29
|
+
npx shadcn@latest add accordion alert badge button calendar card checkbox dialog popover form input label select sonner tooltip switch textarea input-otp collapsible input-group radio-group
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
## 🛠️ Basic Usage
|
|
35
|
+
#### First Dynamic Form
|
|
35
36
|
|
|
36
|
-
```
|
|
37
|
+
```typescript
|
|
37
38
|
'use client'
|
|
38
39
|
|
|
39
40
|
import {
|
|
@@ -41,9 +42,11 @@ import {
|
|
|
41
42
|
FieldProps,
|
|
42
43
|
InputTypes,
|
|
43
44
|
TextInputType
|
|
44
|
-
} from "
|
|
45
|
+
} from "shadcn-zod-formkit";
|
|
45
46
|
|
|
46
47
|
export default function Home() {
|
|
48
|
+
// Record From DB example (User),
|
|
49
|
+
// record is used for define default values
|
|
47
50
|
const record= {
|
|
48
51
|
username: "John Doe ",
|
|
49
52
|
email: "johndoe@example.com",
|
|
@@ -63,28 +66,36 @@ export default function Home() {
|
|
|
63
66
|
}
|
|
64
67
|
|
|
65
68
|
const mockFields: Array<FieldProps |FieldProps[]> = [
|
|
66
|
-
// 🧍♂️ Campo requerido simple
|
|
67
69
|
{
|
|
68
70
|
name: "username",
|
|
69
71
|
label: "Nombre de usuario",
|
|
70
72
|
inputType: InputTypes.TEXT,
|
|
71
|
-
|
|
72
|
-
// ZodTypeAny: z
|
|
73
|
-
// .string()
|
|
74
|
-
// .min(3)
|
|
75
|
-
// .max(20),
|
|
73
|
+
ZodTypeAny: z .string().min(3).max(20),
|
|
76
74
|
},
|
|
77
|
-
|
|
78
|
-
// // 📧 Campo de correo con validación personalizada (ZodTypeAny)
|
|
79
75
|
{
|
|
80
76
|
name: "email",
|
|
81
77
|
label: "Correo electrónico",
|
|
82
78
|
inputType: InputTypes.TEXT,
|
|
83
|
-
required: false,
|
|
84
79
|
},
|
|
85
80
|
]
|
|
86
81
|
```
|
|
87
82
|
|
|
83
|
+
## 📚 Field Types ( InputTypes ) Avaible
|
|
84
|
+
| Types | Use |
|
|
85
|
+
| -------------------------|:-------------------------------:
|
|
86
|
+
| **Text** | `InputTypes.TEXT_GROUP` |
|
|
87
|
+
| **Color Picker** | `InputTypes.COLOR` |
|
|
88
|
+
| **Switch** | `InputTypes.SWITCH` |
|
|
89
|
+
| **Checkbox** | `InputTypes.CHECKBOX` |
|
|
90
|
+
| **Date Picker** | `InputTypes.DATE` |
|
|
91
|
+
| **Select** | `InputTypes.SELECT` |
|
|
92
|
+
| **OTP Code** | `InputTypes.OTP` |
|
|
93
|
+
| **Upload File** | `InputTypes.FILE` |
|
|
94
|
+
| **Checkbox List** | `InputTypes.SIMPLE_CHECK_LIST` |
|
|
95
|
+
| **Switch List** | `InputTypes.GROUPED_SWITCH_LIST` |
|
|
96
|
+
| **Radio Group** | `InputTypes.RADIO_GROUP` |
|
|
97
|
+
| **Tags** | `InputTypes.TAGS` |
|
|
98
|
+
|
|
88
99
|
|
|
89
100
|
## ✅ Features
|
|
90
101
|
- Fully dynamic fields array support.
|