@digiform/wizard 0.2.3 → 0.2.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 +14 -14
- package/index.cjs +1029 -693
- package/index.cjs.map +1 -1
- package/index.js +1026 -693
- package/index.js.map +1 -1
- package/package.json +2 -2
- package/renderer/wizardRenderer.d.ts +2 -0
- package/styles.css +330 -0
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @digiform/wizard
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@digiform/wizard)
|
|
4
4
|
[](https://opensource.org/licenses/MIT)
|
|
5
5
|
|
|
6
6
|
React component for rendering configurable multi-step forms from a JSON config. Zero database dependencies.
|
|
@@ -10,7 +10,7 @@ React component for rendering configurable multi-step forms from a JSON config.
|
|
|
10
10
|
## Installation
|
|
11
11
|
|
|
12
12
|
```bash
|
|
13
|
-
npm install @
|
|
13
|
+
npm install @digiform/wizard
|
|
14
14
|
```
|
|
15
15
|
|
|
16
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.
|
|
@@ -22,7 +22,7 @@ npm install @formbuilder/wizard
|
|
|
22
22
|
> **Required:** You must import the wizard stylesheet before rendering any wizard component.
|
|
23
23
|
|
|
24
24
|
```ts
|
|
25
|
-
import '@
|
|
25
|
+
import '@digiform/wizard/styles';
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
Add this import once at your app entry point before rendering any wizard.
|
|
@@ -32,8 +32,8 @@ Add this import once at your app entry point before rendering any wizard.
|
|
|
32
32
|
## Quick Start
|
|
33
33
|
|
|
34
34
|
```tsx
|
|
35
|
-
import { FormWizard } from '@
|
|
36
|
-
import '@
|
|
35
|
+
import { FormWizard } from '@digiform/wizard';
|
|
36
|
+
import '@digiform/wizard/styles';
|
|
37
37
|
|
|
38
38
|
const config = { /* your FormWizardConfig */ };
|
|
39
39
|
|
|
@@ -61,7 +61,7 @@ export function MyForm() {
|
|
|
61
61
|
// src/main.tsx
|
|
62
62
|
import React from 'react';
|
|
63
63
|
import ReactDOM from 'react-dom/client';
|
|
64
|
-
import '@
|
|
64
|
+
import '@digiform/wizard/styles'; // must come before App
|
|
65
65
|
import App from './App';
|
|
66
66
|
|
|
67
67
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
@@ -75,8 +75,8 @@ export function MyForm() {
|
|
|
75
75
|
|
|
76
76
|
```tsx
|
|
77
77
|
// src/components/MyForm.tsx
|
|
78
|
-
import { FormWizard } from '@
|
|
79
|
-
import type { FormWizardConfig } from '@
|
|
78
|
+
import { FormWizard } from '@digiform/wizard';
|
|
79
|
+
import type { FormWizardConfig } from '@digiform/wizard';
|
|
80
80
|
|
|
81
81
|
const config: FormWizardConfig = {
|
|
82
82
|
// your form configuration
|
|
@@ -97,7 +97,7 @@ export function MyForm() {
|
|
|
97
97
|
|
|
98
98
|
```tsx
|
|
99
99
|
// app/layout.tsx — App Router
|
|
100
|
-
import '@
|
|
100
|
+
import '@digiform/wizard/styles';
|
|
101
101
|
|
|
102
102
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
103
103
|
return (
|
|
@@ -110,7 +110,7 @@ export function MyForm() {
|
|
|
110
110
|
|
|
111
111
|
```tsx
|
|
112
112
|
// pages/_app.tsx — Pages Router
|
|
113
|
-
import '@
|
|
113
|
+
import '@digiform/wizard/styles';
|
|
114
114
|
import type { AppProps } from 'next/app';
|
|
115
115
|
|
|
116
116
|
export default function App({ Component, pageProps }: AppProps) {
|
|
@@ -126,8 +126,8 @@ export function MyForm() {
|
|
|
126
126
|
// app/forms/page.tsx
|
|
127
127
|
'use client';
|
|
128
128
|
|
|
129
|
-
import { FormWizard } from '@
|
|
130
|
-
import type { FormWizardConfig } from '@
|
|
129
|
+
import { FormWizard } from '@digiform/wizard';
|
|
130
|
+
import type { FormWizardConfig } from '@digiform/wizard';
|
|
131
131
|
|
|
132
132
|
const config: FormWizardConfig = {
|
|
133
133
|
// your form configuration
|
|
@@ -144,4 +144,4 @@ export function MyForm() {
|
|
|
144
144
|
|
|
145
145
|
## Related
|
|
146
146
|
|
|
147
|
-
Use [@
|
|
147
|
+
Use [@digiform/builder](https://www.npmjs.com/package/@digiform/builder) to visually create and edit form configs.
|