shadcn-zod-formkit 1.0.3 → 1.0.5
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 +18 -4
- package/dist/index.cjs +527 -97
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +12 -4
- package/dist/index.d.ts +12 -4
- package/dist/index.mjs +512 -83
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
📦 A React library for creating **dynamic forms** with **Zod validations**, supporting multiple input types: text, number, email, switch, color, date, select, file, and
|
|
7
|
+
📦 A React library for creating **dynamic forms** with **Zod validations**, supporting multiple input types: text, number, email, switch, color, date, select, file, OTP and others.
|
|
8
8
|
|
|
9
9
|
---
|
|
10
10
|
|
|
@@ -26,7 +26,7 @@ yarn add shadcn-zod-formkit
|
|
|
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 radio-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 slider button-group
|
|
30
30
|
```
|
|
31
31
|
|
|
32
32
|
|
|
@@ -58,6 +58,7 @@ export default function Home() {
|
|
|
58
58
|
|
|
59
59
|
return (
|
|
60
60
|
<DynamicForm
|
|
61
|
+
formTitle="Title Form"
|
|
61
62
|
fields={mockFields}
|
|
62
63
|
record={record}
|
|
63
64
|
onSubmit={(data) => console.log("📤 Resultado final:", data)}
|
|
@@ -88,6 +89,7 @@ const mockFields: Array<FieldProps |FieldProps[]> = [
|
|
|
88
89
|
| **Switch** | `InputTypes.SWITCH` |
|
|
89
90
|
| **Checkbox** | `InputTypes.CHECKBOX` |
|
|
90
91
|
| **Date Picker** | `InputTypes.DATE` |
|
|
92
|
+
| **Date Time Picker** | `InputTypes.DATE_TIME` |
|
|
91
93
|
| **Select** | `InputTypes.SELECT` |
|
|
92
94
|
| **OTP Code** | `InputTypes.OTP` |
|
|
93
95
|
| **Upload File** | `InputTypes.FILE` |
|
|
@@ -95,11 +97,16 @@ const mockFields: Array<FieldProps |FieldProps[]> = [
|
|
|
95
97
|
| **Switch List** | `InputTypes.GROUPED_SWITCH_LIST` |
|
|
96
98
|
| **Radio Group** | `InputTypes.RADIO_GROUP` |
|
|
97
99
|
| **Tags** | `InputTypes.TAGS` |
|
|
100
|
+
| **Input Date Time** | `InputTypes.DATE_TIME` |
|
|
101
|
+
| **Input Time** | `InputTypes.TIME` |
|
|
102
|
+
| **Upload Multi File** | `InputTypes.FILE_MULTI_UPLOAD` |
|
|
103
|
+
| **Button Group** | `InputTypes.BUTTON_GROUP` |
|
|
104
|
+
|
|
98
105
|
|
|
99
106
|
|
|
100
107
|
## ✅ Features
|
|
101
108
|
- Fully dynamic fields array support.
|
|
102
|
-
- Multiple input types (text, email, number, color, date, select, switch, file, OTP).
|
|
109
|
+
- Multiple input types (text, email, number, color, date, select, switch, file, OTP, and others).
|
|
103
110
|
- Zod validation integration for robust form validation.
|
|
104
111
|
- Supports default values via record prop.
|
|
105
112
|
- Works seamlessly with React 18+ and TypeScript.
|
|
@@ -107,4 +114,11 @@ const mockFields: Array<FieldProps |FieldProps[]> = [
|
|
|
107
114
|
## 💡 Tips
|
|
108
115
|
- Use peerDependencies for React to avoid version conflicts.
|
|
109
116
|
- Wrap your forms inside a "use client" component if using Next.js App Router.
|
|
110
|
-
- Combine multiple FieldProps in arrays for grouped fields (like age + color).
|
|
117
|
+
- Combine multiple FieldProps in arrays for grouped fields (like age + color).
|
|
118
|
+
|
|
119
|
+
## 🧠 Acknowledgements
|
|
120
|
+
React - A JavaScript library for building user interfaces.
|
|
121
|
+
Next.js - The React framework for production.
|
|
122
|
+
Tailwind CSS - A utility-first CSS framework for creating custom designs.
|
|
123
|
+
Zod - TypeScript-first schema declaration and validation.
|
|
124
|
+
|