@digiform/wizard 0.1.7
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 +147 -0
- package/index.cjs +19786 -0
- package/index.cjs.map +1 -0
- package/index.js +19746 -0
- package/index.js.map +1 -0
- package/package.json +61 -0
- package/styles.css +1869 -0
package/README.md
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
# @formbuilder/wizard
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@formbuilder/wizard)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
|
|
6
|
+
React component for rendering configurable multi-step forms from a JSON config. Zero database dependencies.
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @formbuilder/wizard
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
> Requires React 18+, XState 5+, TanStack Form 1+, Zod 3+, and Radix UI components as peer dependencies. See `peerDependencies` in package.json for exact versions.
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## CSS Import
|
|
21
|
+
|
|
22
|
+
> **Required:** You must import the wizard stylesheet before rendering any wizard component.
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
import '@formbuilder/wizard/styles';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Add this import once at your app entry point before rendering any wizard.
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## Quick Start
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { FormWizard } from '@formbuilder/wizard';
|
|
36
|
+
import '@formbuilder/wizard/styles';
|
|
37
|
+
|
|
38
|
+
const config = { /* your FormWizardConfig */ };
|
|
39
|
+
|
|
40
|
+
export function MyForm() {
|
|
41
|
+
return (
|
|
42
|
+
<FormWizard
|
|
43
|
+
config={config}
|
|
44
|
+
onSubmit={(data) => console.log(data)}
|
|
45
|
+
/>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
## Framework Setup
|
|
53
|
+
|
|
54
|
+
### Vite
|
|
55
|
+
|
|
56
|
+
1. **Install** the package (see [Installation](#installation) above).
|
|
57
|
+
|
|
58
|
+
2. **Import styles** in `src/main.tsx` (or `src/index.tsx`) before `ReactDOM.createRoot`:
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
// src/main.tsx
|
|
62
|
+
import React from 'react';
|
|
63
|
+
import ReactDOM from 'react-dom/client';
|
|
64
|
+
import '@formbuilder/wizard/styles'; // must come before App
|
|
65
|
+
import App from './App';
|
|
66
|
+
|
|
67
|
+
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
68
|
+
<React.StrictMode>
|
|
69
|
+
<App />
|
|
70
|
+
</React.StrictMode>
|
|
71
|
+
);
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
3. **Use `<FormWizard>`** in any component — no `vite.config.ts` changes required.
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
// src/components/MyForm.tsx
|
|
78
|
+
import { FormWizard } from '@formbuilder/wizard';
|
|
79
|
+
import type { FormWizardConfig } from '@formbuilder/wizard';
|
|
80
|
+
|
|
81
|
+
const config: FormWizardConfig = {
|
|
82
|
+
// your form configuration
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
export function MyForm() {
|
|
86
|
+
return <FormWizard config={config} onSubmit={(data) => console.log(data)} />;
|
|
87
|
+
}
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
### Next.js
|
|
93
|
+
|
|
94
|
+
1. **Install** the package (see [Installation](#installation) above).
|
|
95
|
+
|
|
96
|
+
2. **Import styles** in `app/layout.tsx` (App Router) or `pages/_app.tsx` (Pages Router):
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
// app/layout.tsx — App Router
|
|
100
|
+
import '@formbuilder/wizard/styles';
|
|
101
|
+
|
|
102
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
103
|
+
return (
|
|
104
|
+
<html lang="en">
|
|
105
|
+
<body>{children}</body>
|
|
106
|
+
</html>
|
|
107
|
+
);
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
```tsx
|
|
112
|
+
// pages/_app.tsx — Pages Router
|
|
113
|
+
import '@formbuilder/wizard/styles';
|
|
114
|
+
import type { AppProps } from 'next/app';
|
|
115
|
+
|
|
116
|
+
export default function App({ Component, pageProps }: AppProps) {
|
|
117
|
+
return <Component {...pageProps} />;
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
3. **Mark the wrapping component with `'use client'`** — FormWizard is a client component.
|
|
122
|
+
|
|
123
|
+
4. Create a form page with the `'use client'` directive:
|
|
124
|
+
|
|
125
|
+
```tsx
|
|
126
|
+
// app/forms/page.tsx
|
|
127
|
+
'use client';
|
|
128
|
+
|
|
129
|
+
import { FormWizard } from '@formbuilder/wizard';
|
|
130
|
+
import type { FormWizardConfig } from '@formbuilder/wizard';
|
|
131
|
+
|
|
132
|
+
const config: FormWizardConfig = {
|
|
133
|
+
// your form configuration
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
export default function FormsPage() {
|
|
137
|
+
return <FormWizard config={config} onSubmit={(data) => console.log(data)} />;
|
|
138
|
+
}
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
5. No `next.config.js` changes are required for CSS.
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
## Related
|
|
146
|
+
|
|
147
|
+
Use [@formbuilder/builder](https://www.npmjs.com/package/@formbuilder/builder) to visually create and edit form configs.
|