@mieweb/forms-editor 0.1.7 → 0.1.9
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 +29 -60
- package/dist/index.js +673 -690
- package/dist/index.js.map +1 -1
- package/package.json +5 -4
- package/dist/index.css +0 -1
package/README.md
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @mieweb/forms-editor
|
|
2
2
|
|
|
3
|
-
Embeddable questionnaire editor
|
|
4
|
-
|
|
5
|
-
## 📦 Installation
|
|
3
|
+
Embeddable questionnaire editor with FHIR export and conditional logic.
|
|
6
4
|
|
|
7
5
|
```bash
|
|
8
6
|
npm install @mieweb/forms-editor react react-dom
|
|
9
7
|
```
|
|
10
8
|
|
|
11
|
-
##
|
|
9
|
+
## Quick Start
|
|
12
10
|
|
|
13
11
|
```jsx
|
|
14
12
|
import { QuestionnaireEditor } from '@mieweb/forms-editor';
|
|
@@ -16,62 +14,55 @@ import { QuestionnaireEditor } from '@mieweb/forms-editor';
|
|
|
16
14
|
function App() {
|
|
17
15
|
const [fields, setFields] = React.useState([
|
|
18
16
|
{ id: 'section-1', fieldType: 'section', title: 'Section 1', fields: [] },
|
|
19
|
-
{ id: 'name', fieldType: '
|
|
17
|
+
{ id: 'name', fieldType: 'text', question: 'Your Name', required: true },
|
|
20
18
|
{ id: 'gender', fieldType: 'radio', question: 'Gender',
|
|
21
19
|
options: [{ value: 'Male' }, { value: 'Female' }], selected: null },
|
|
22
20
|
]);
|
|
23
21
|
|
|
24
22
|
return (
|
|
25
|
-
<
|
|
26
|
-
<QuestionnaireEditor
|
|
27
|
-
initialFields={fields}
|
|
28
|
-
onChange={setFields}
|
|
29
|
-
/>
|
|
30
|
-
</div>
|
|
23
|
+
<QuestionnaireEditor initialFields={fields} onChange={setFields} />
|
|
31
24
|
);
|
|
32
25
|
}
|
|
33
26
|
```
|
|
34
27
|
|
|
35
|
-
##
|
|
28
|
+
## Props
|
|
36
29
|
|
|
37
30
|
- `initialFields` - Array of field objects
|
|
38
31
|
- `onChange` - Callback when fields change
|
|
39
32
|
- `startInPreview` - Start in preview mode (default: false)
|
|
33
|
+
- `hideUnsupportedFields` - Hide unsupported field types (default: false)
|
|
34
|
+
- `showHeader` - Show editor header (default: true)
|
|
35
|
+
- `showMobileToolbar` - Show mobile toolbar (default: true)
|
|
36
|
+
- `className` - Additional CSS classes
|
|
40
37
|
|
|
41
|
-
##
|
|
42
|
-
|
|
43
|
-
### 🔧 Field Types
|
|
44
|
-
- `input` - 📝 Text input
|
|
45
|
-
- `radio` - 🔘 Radio buttons
|
|
46
|
-
- `check` - ☑️ Checkboxes
|
|
47
|
-
- `selection` - 📋 Dropdown
|
|
48
|
-
- `section` - 📂 Field container
|
|
49
|
-
- `unsupported` - ⚠️ Placeholder for unsupported field types (can be hidden with toggle)
|
|
38
|
+
## Features
|
|
50
39
|
|
|
51
|
-
###
|
|
52
|
-
|
|
40
|
+
### Field Types
|
|
41
|
+
- `text` - Single-line text input
|
|
42
|
+
- `longtext` - Multi-line text area
|
|
43
|
+
- `multitext` - Multiple labeled text inputs
|
|
44
|
+
- `boolean` - Yes/No button selection
|
|
45
|
+
- `radio` - Radio buttons
|
|
46
|
+
- `check` - Checkboxes
|
|
47
|
+
- `dropdown` - Dropdown selection
|
|
48
|
+
- `section` - Field container
|
|
49
|
+
- `unsupported` - Placeholder (can be hidden with `hideUnsupportedFields` prop)
|
|
53
50
|
|
|
54
|
-
###
|
|
55
|
-
Show/hide fields based on answers
|
|
56
|
-
1. Select a field
|
|
57
|
-
2. Click "Logic" in the edit panel
|
|
58
|
-
3. Add conditions (e.g., "Show when Question 1 equals 'Yes'")
|
|
51
|
+
### Conditional Logic
|
|
52
|
+
Show/hide fields based on answers via the Logic panel.
|
|
59
53
|
|
|
60
|
-
###
|
|
61
|
-
- JSON
|
|
62
|
-
- YAML format
|
|
63
|
-
- FHIR Questionnaire format
|
|
54
|
+
### Import/Export
|
|
55
|
+
- JSON, YAML, FHIR formats
|
|
64
56
|
|
|
65
|
-
###
|
|
66
|
-
|
|
67
|
-
- Mobile: Swipeable modal for field editing
|
|
57
|
+
### Mobile Support
|
|
58
|
+
Responsive with swipeable modal editing.
|
|
68
59
|
|
|
69
|
-
##
|
|
60
|
+
## Field Structure
|
|
70
61
|
|
|
71
62
|
```javascript
|
|
72
63
|
{
|
|
73
64
|
id: 'unique-id',
|
|
74
|
-
fieldType: '
|
|
65
|
+
fieldType: 'text', // 'longtext', 'multitext', 'boolean', 'radio', 'check', 'dropdown', 'section'
|
|
75
66
|
question: 'What is your name?',
|
|
76
67
|
answer: '',
|
|
77
68
|
required: false,
|
|
@@ -86,26 +77,4 @@ Show/hide fields based on answers:
|
|
|
86
77
|
]
|
|
87
78
|
}
|
|
88
79
|
}
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
## 🎨 Styling
|
|
92
|
-
|
|
93
|
-
Uses Tailwind CSS. Include in your project:
|
|
94
|
-
|
|
95
|
-
```css
|
|
96
|
-
@import 'tailwindcss/base';
|
|
97
|
-
@import 'tailwindcss/components';
|
|
98
|
-
@import 'tailwindcss/utilities';
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
## 🏥 Export FHIR
|
|
102
|
-
|
|
103
|
-
```jsx
|
|
104
|
-
import { exportToFHIR } from '@mieweb/forms-editor';
|
|
105
|
-
|
|
106
|
-
const fhirQuestionnaire = exportToFHIR(fields, {
|
|
107
|
-
id: 'my-questionnaire',
|
|
108
|
-
title: 'Patient Survey',
|
|
109
|
-
version: '1.0'
|
|
110
|
-
});
|
|
111
80
|
```
|