@squaredr/fieldcraft-pro 0.0.0 → 0.0.1
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 +91 -0
- package/package.json +22 -3
package/README.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# @squaredr/fieldcraft-pro
|
|
2
|
+
|
|
3
|
+
Pro components for [FieldCraft](https://squaredr.tech/products/fieldcraft) — a schema-driven form engine for React.
|
|
4
|
+
|
|
5
|
+
**Includes:**
|
|
6
|
+
|
|
7
|
+
- **Form Builder** — Drag-and-drop visual form designer with 28 field types, undo/redo, import/export, and live preview
|
|
8
|
+
- **Response Viewer** — Read-only viewer for submitted form data with table and detail views
|
|
9
|
+
- **Theme Editor** — Visual theme editor for form styling and branding with CSS custom properties
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @squaredr/fieldcraft-pro @squaredr/fieldcraft-core @squaredr/fieldcraft-react
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Quick Start
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { FieldCraftProProvider, FormBuilder } from "@squaredr/fieldcraft-pro";
|
|
21
|
+
import "@squaredr/fieldcraft-pro/styles.css";
|
|
22
|
+
|
|
23
|
+
function App() {
|
|
24
|
+
return (
|
|
25
|
+
<FieldCraftProProvider licenseKey="YOUR_LICENSE_KEY">
|
|
26
|
+
<FormBuilder
|
|
27
|
+
onSave={(schema) => console.log(schema)}
|
|
28
|
+
height="100vh"
|
|
29
|
+
/>
|
|
30
|
+
</FieldCraftProProvider>
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Subpath Imports
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
// Root — everything
|
|
39
|
+
import { FormBuilder, ResponseViewer, ThemeEditor } from "@squaredr/fieldcraft-pro";
|
|
40
|
+
|
|
41
|
+
// Tree-shakeable subpath imports
|
|
42
|
+
import { FormBuilder } from "@squaredr/fieldcraft-pro/form-builder";
|
|
43
|
+
import { ResponseViewer } from "@squaredr/fieldcraft-pro/response-viewer";
|
|
44
|
+
import { ThemeEditor } from "@squaredr/fieldcraft-pro/theme-editor";
|
|
45
|
+
|
|
46
|
+
// CSS
|
|
47
|
+
import "@squaredr/fieldcraft-pro/styles.css"; // Form Builder styles
|
|
48
|
+
import "@squaredr/fieldcraft-pro/theme-editor/styles.css"; // Theme Editor styles
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Field Types (28)
|
|
52
|
+
|
|
53
|
+
| Category | Fields |
|
|
54
|
+
|----------|--------|
|
|
55
|
+
| Text | Short Text, Long Text, Email, Phone, URL |
|
|
56
|
+
| Numeric | Number, Slider, Rating, NPS, Opinion Scale |
|
|
57
|
+
| Selection | Single Select, Multi Select, Dropdown, Yes/No, Ranking |
|
|
58
|
+
| Date/Time | Date, Time |
|
|
59
|
+
| Media | File Upload |
|
|
60
|
+
| Content | Welcome Screen, Thank You Screen, Rich Text, Image, Video, Divider, Spacer |
|
|
61
|
+
| Structural | Section Header, Info Block, Page Break, Consent |
|
|
62
|
+
| Advanced | Matrix, Calculated, Hidden |
|
|
63
|
+
|
|
64
|
+
Need telehealth fields (PHQ-9, GAD-7, clinical instruments, patient intake)? See [`@squaredr/fieldcraft-pro-telehealth`](https://www.npmjs.com/package/@squaredr/fieldcraft-pro-telehealth).
|
|
65
|
+
|
|
66
|
+
## Extending with Custom Fields
|
|
67
|
+
|
|
68
|
+
The FormBuilder accepts `questionTypes` and `palette` props to inject additional field types at runtime:
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
import { FormBuilder, QUESTION_TYPE_INFO, DEFAULT_PALETTE } from "@squaredr/fieldcraft-pro";
|
|
72
|
+
|
|
73
|
+
<FormBuilder
|
|
74
|
+
questionTypes={{ ...QUESTION_TYPE_INFO, ...myCustomTypes }}
|
|
75
|
+
palette={[...DEFAULT_PALETTE, ...myCustomCategories]}
|
|
76
|
+
/>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Requirements
|
|
80
|
+
|
|
81
|
+
- React 18 or 19
|
|
82
|
+
- `@squaredr/fieldcraft-core` ^1.2.0
|
|
83
|
+
- `@squaredr/fieldcraft-react` ^1.2.1
|
|
84
|
+
|
|
85
|
+
## License
|
|
86
|
+
|
|
87
|
+
Commercial license required for production use. Free in development mode.
|
|
88
|
+
|
|
89
|
+
See [LICENSE.txt](./LICENSE.txt) for details.
|
|
90
|
+
|
|
91
|
+
[Get a license](https://squaredr.tech/products/fieldcraft/admin-pro#pricing) | [Documentation](https://squaredr.tech/products/fieldcraft/docs/pro) | [Discord](https://discord.gg/zMxdu5UVW)
|
package/package.json
CHANGED
|
@@ -1,7 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@squaredr/fieldcraft-pro",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"description": "Pro components for FieldCraft — Form Builder, Response Viewer, Theme Editor",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Pro components for FieldCraft — visual drag-and-drop Form Builder, Response Viewer, and Theme Editor for React",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"fieldcraft",
|
|
7
|
+
"form-builder",
|
|
8
|
+
"react",
|
|
9
|
+
"drag-and-drop",
|
|
10
|
+
"form-engine",
|
|
11
|
+
"response-viewer",
|
|
12
|
+
"theme-editor",
|
|
13
|
+
"survey",
|
|
14
|
+
"questionnaire",
|
|
15
|
+
"form-designer",
|
|
16
|
+
"visual-builder",
|
|
17
|
+
"schema-driven"
|
|
18
|
+
],
|
|
19
|
+
"repository": {
|
|
20
|
+
"type": "git",
|
|
21
|
+
"url": "https://github.com/AnshumanSquaredR/fieldcraft-pro",
|
|
22
|
+
"directory": "packages/pro"
|
|
23
|
+
},
|
|
5
24
|
"main": "./dist/index.js",
|
|
6
25
|
"module": "./dist/index.mjs",
|
|
7
26
|
"types": "./dist/index.d.ts",
|
|
@@ -29,7 +48,7 @@
|
|
|
29
48
|
"./styles.css": "./dist/styles.css",
|
|
30
49
|
"./theme-editor/styles.css": "./dist/theme-editor-styles.css"
|
|
31
50
|
},
|
|
32
|
-
"files": ["dist"],
|
|
51
|
+
"files": ["dist", "README.md"],
|
|
33
52
|
"sideEffects": ["./dist/styles.css", "./dist/theme-editor-styles.css", "*.css"],
|
|
34
53
|
"scripts": {
|
|
35
54
|
"build": "tsup && npx @tailwindcss/cli -i src/form-builder/styles/formbuilder.css -o dist/styles.css --minify && cp src/theme-editor/styles.css dist/theme-editor-styles.css",
|