@mieweb/forms-editor 1.0.1 → 1.1.0

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.
Files changed (4) hide show
  1. package/README.md +16 -117
  2. package/dist/index.js +1486 -1262
  3. package/dist/index.js.map +1 -1
  4. package/package.json +4 -4
package/README.md CHANGED
@@ -1,35 +1,14 @@
1
1
  # @mieweb/forms-editor
2
2
 
3
- Embeddable questionnaire editor with FHIR export and conditional logic.
3
+ Visual questionnaire builder with three editing modes: Build, Code, and Preview.
4
+
5
+ ## Installation
4
6
 
5
7
  ```bash
6
- npm install @mieweb/forms-editor react react-dom
8
+ npm install @mieweb/forms-editor
7
9
  ```
8
10
 
9
- ## 🆕 New Features
10
-
11
- ### YAML & JSON Import
12
- Import questionnaires from YAML or JSON with automatic format detection:
13
- - Drag and drop `.json`, `.yaml`, or `.yml` files
14
- - Auto-detects MIE Forms vs SurveyJS schemas
15
- - Preserves metadata (title, description, etc.)
16
-
17
- ### Auto-Parsing on Initialization
18
- Pass YAML strings, JSON strings, or objects directly:
19
- ```jsx
20
- // YAML string
21
- const yamlData = `
22
- schemaType: mieforms-v1.0
23
- fields:
24
- - id: name
25
- fieldType: text
26
- question: Name?
27
- `;
28
-
29
- <QuestionnaireEditor initialFormData={yamlData} />
30
-
31
- // Or JSON string, or parsed object - all work!
32
- ```
11
+ **Requirements:** React 18+ and React DOM 18+
33
12
 
34
13
  ## Quick Start
35
14
 
@@ -39,13 +18,7 @@ import { QuestionnaireEditor } from '@mieweb/forms-editor';
39
18
  function App() {
40
19
  const [formData, setFormData] = React.useState({
41
20
  schemaType: 'mieforms-v1.0',
42
- title: 'Patient Intake',
43
- fields: [
44
- { id: 'section-1', fieldType: 'section', title: 'Section 1', fields: [] },
45
- { id: 'name', fieldType: 'text', question: 'Your Name', required: true },
46
- { id: 'gender', fieldType: 'radio', question: 'Gender',
47
- options: [{ value: 'Male' }, { value: 'Female' }], selected: null },
48
- ]
21
+ fields: []
49
22
  });
50
23
 
51
24
  return (
@@ -57,91 +30,17 @@ function App() {
57
30
  }
58
31
  ```
59
32
 
60
- ## Props
33
+ ## Documentation
61
34
 
62
- - `initialFormData` - Form data object or YAML/JSON string (supports auto-parsing)
63
- - `schemaType` - Optional: `'mieforms'` or `'surveyjs'` (auto-detected if not provided)
64
- - `onChange` - Callback when form data changes (receives complete form object with metadata)
65
- - `startInPreview` - Start in preview mode (default: false)
66
- - `hideUnsupportedFields` - Hide unsupported field types (default: false)
67
- - `showHeader` - Show editor header (default: true)
68
- - `className` - Additional CSS classes
35
+ **[Full Documentation](https://questionnaire-builder.opensource.mieweb.org/docs/editor/overview)**
69
36
 
70
- ## 🔄 Breaking Changes (v0.1.1)
37
+ For detailed information, see:
38
+ - [Quick Start Guide](https://questionnaire-builder.opensource.mieweb.org/docs/getting-started/quickstart-editor)
39
+ - [Props Reference](https://questionnaire-builder.opensource.mieweb.org/docs/editor/props)
40
+ - [Editor Modes](https://questionnaire-builder.opensource.mieweb.org/docs/editor/modes)
41
+ - [Field Editing](https://questionnaire-builder.opensource.mieweb.org/docs/editor/field-editing)
42
+ - [Import/Export](https://questionnaire-builder.opensource.mieweb.org/docs/editor/importing)
71
43
 
72
- ### Prop Rename
73
- ```jsx
74
- // ❌ Before
75
- <QuestionnaireEditor initialFields={fields} />
76
-
77
- // ✅ After
78
- <QuestionnaireEditor initialFormData={formData} />
79
- ```
44
+ ## License
80
45
 
81
- ### onChange Callback
82
- Now receives complete form data object instead of just fields array:
83
- ```jsx
84
- // ❌ Before
85
- onChange={(fields) => console.log(fields)}
86
-
87
- // ✅ After
88
- onChange={(formData) => {
89
- console.log(formData);
90
- // { schemaType: 'mieforms-v1.0', title: '...', fields: [...] }
91
- }}
92
- ```
93
-
94
- ### Schema Type Required
95
- Form data must include `schemaType` field:
96
- ```jsx
97
- const formData = {
98
- schemaType: 'mieforms-v1.0', // Required!
99
- fields: [...]
100
- };
101
- ```
102
-
103
- ## Features
104
-
105
- ### Field Types
106
- - `text` - Single-line text input
107
- - `longtext` - Multi-line text area
108
- - `multitext` - Multiple labeled text inputs
109
- - `boolean` - Yes/No button selection
110
- - `radio` - Radio buttons
111
- - `check` - Checkboxes
112
- - `dropdown` - Dropdown selection
113
- - `section` - Field container
114
- - `unsupported` - Placeholder (can be hidden with `hideUnsupportedFields` prop)
115
-
116
- ### Conditional Logic
117
- Show/hide fields based on answers via the Logic panel.
118
-
119
- ### Import/Export
120
- - JSON, YAML formats with auto-detection
121
- - SurveyJS schema import with conversion report
122
- - FHIR export (via forms-engine)
123
-
124
- ### Mobile Support
125
- Responsive with swipeable modal editing.
126
-
127
- ## Field Structure
128
-
129
- ```javascript
130
- {
131
- id: 'unique-id',
132
- fieldType: 'text', // 'longtext', 'multitext', 'boolean', 'radio', 'check', 'dropdown', 'section'
133
- question: 'What is your name?',
134
- answer: '',
135
- required: false,
136
- enableWhen: {
137
- logic: 'AND', // or 'OR'
138
- conditions: [
139
- {
140
- targetId: 'other-field-id',
141
- operator: 'equals', // 'contains', 'includes'
142
- value: 'expected-value'
143
- }
144
- ]
145
- }
146
- }
147
- ```
46
+ MIT