@digiform/builder 0.2.4 → 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 +15 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @digiform/builder
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@digiform/builder)
|
|
4
4
|
[](https://opensource.org/licenses/MIT)
|
|
5
5
|
|
|
6
6
|
React form builder for creating and managing configurable multi-step forms.
|
|
@@ -10,7 +10,7 @@ React form builder for creating and managing configurable multi-step forms.
|
|
|
10
10
|
## Installation
|
|
11
11
|
|
|
12
12
|
```sh
|
|
13
|
-
npm install @
|
|
13
|
+
npm install @digiform/builder
|
|
14
14
|
```
|
|
15
15
|
|
|
16
16
|
> Requires React 18+, XState 5+, TanStack Form 1+, TanStack Query 5+, Zod 3+, dnd-kit, and Radix UI components as peer dependencies. See `peerDependencies` in package.json for exact versions.
|
|
@@ -22,7 +22,7 @@ npm install @formbuilder/builder
|
|
|
22
22
|
> **Required.** The builder will not render correctly without the stylesheet.
|
|
23
23
|
|
|
24
24
|
```ts
|
|
25
|
-
import '@
|
|
25
|
+
import '@digiform/builder/styles';
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
Add this import once at your app entry point before rendering any builder component.
|
|
@@ -32,8 +32,8 @@ Add this import once at your app entry point before rendering any builder compon
|
|
|
32
32
|
## Quick Start
|
|
33
33
|
|
|
34
34
|
```tsx
|
|
35
|
-
import { FormBuilderView } from '@
|
|
36
|
-
import '@
|
|
35
|
+
import { FormBuilderView } from '@digiform/builder';
|
|
36
|
+
import '@digiform/builder/styles';
|
|
37
37
|
|
|
38
38
|
export function MyBuilder() {
|
|
39
39
|
return (
|
|
@@ -54,22 +54,22 @@ export function MyBuilder() {
|
|
|
54
54
|
|
|
55
55
|
| Import path | Contents |
|
|
56
56
|
| ------------------------------ | -------------------------------------------------------------------------------- |
|
|
57
|
-
| `@
|
|
58
|
-
| `@
|
|
59
|
-
| `@
|
|
57
|
+
| `@digiform/builder` | Main export — all components. Auto-selects client/server behavior as appropriate. |
|
|
58
|
+
| `@digiform/builder/client` | Explicit client-side import. Use when your bundler requires a clear client boundary. |
|
|
59
|
+
| `@digiform/builder/server` | Node.js storage providers (e.g., `FilesystemStorageProvider`). **Node.js only.** |
|
|
60
60
|
|
|
61
61
|
---
|
|
62
62
|
|
|
63
63
|
## Server-Side Storage (Next.js)
|
|
64
64
|
|
|
65
|
-
> **Node.js only** — import storage providers from `@
|
|
65
|
+
> **Node.js only** — import storage providers from `@digiform/builder/server`.
|
|
66
66
|
|
|
67
67
|
The builder ships a `FilesystemStorageProvider` that stores form configs as JSON files on disk. Use it in a Next.js App Router route handler to back the builder with real persistence.
|
|
68
68
|
|
|
69
69
|
```ts
|
|
70
70
|
// app/api/forms/[formId]/route.ts
|
|
71
71
|
import { NextRequest, NextResponse } from 'next/server';
|
|
72
|
-
import { FilesystemStorageProvider } from '@
|
|
72
|
+
import { FilesystemStorageProvider } from '@digiform/builder/server';
|
|
73
73
|
|
|
74
74
|
const storage = new FilesystemStorageProvider({
|
|
75
75
|
basePath: process.env.FORMS_DATA_PATH ?? './data/forms',
|
|
@@ -106,7 +106,7 @@ Set the `FORMS_DATA_PATH` environment variable to the directory where form confi
|
|
|
106
106
|
|
|
107
107
|
1. Import styles in `src/main.tsx`:
|
|
108
108
|
```ts
|
|
109
|
-
import '@
|
|
109
|
+
import '@digiform/builder/styles';
|
|
110
110
|
```
|
|
111
111
|
2. Render `FormBuilderView` directly — no `'use client'` directive needed (Vite has no RSC boundary).
|
|
112
112
|
|
|
@@ -114,13 +114,13 @@ Set the `FORMS_DATA_PATH` environment variable to the directory where form confi
|
|
|
114
114
|
|
|
115
115
|
1. Import styles in `app/layout.tsx`:
|
|
116
116
|
```ts
|
|
117
|
-
import '@
|
|
117
|
+
import '@digiform/builder/styles';
|
|
118
118
|
```
|
|
119
119
|
2. Mark the page or component using `FormBuilderView` with the `'use client'` directive:
|
|
120
120
|
```tsx
|
|
121
121
|
'use client';
|
|
122
122
|
|
|
123
|
-
import { FormBuilderView } from '@
|
|
123
|
+
import { FormBuilderView } from '@digiform/builder';
|
|
124
124
|
|
|
125
125
|
export default function BuilderPage() {
|
|
126
126
|
return (
|
|
@@ -142,4 +142,4 @@ Set the `FORMS_DATA_PATH` environment variable to the directory where form confi
|
|
|
142
142
|
|
|
143
143
|
## Related
|
|
144
144
|
|
|
145
|
-
Use [@
|
|
145
|
+
Use [@digiform/wizard](https://www.npmjs.com/package/@digiform/wizard) to render the forms built with this package.
|