@mieweb/forms-renderer 0.1.8 → 0.1.10

package/README.md

@@ -11,8 +11,8 @@ npm install @mieweb/forms-renderer
 ## 🚀 Examples
 
 See the complete working examples in this package:
-- [`example-react.jsx`](./example-react.jsx) - ⚛️ React component usage
-- [`example-standalone.html`](./example-standalone.html) - 🌐 Web Component usage
+- [`example-react.jsx`](./examples/example-react.jsx) - ⚛️ React component usage
+- [`example-standalone.html`](./examples/example-standalone.html) - 🌐 Web Component usage
 
 ## 💻 Usage
 
@@ -23,9 +23,45 @@ Requires React peer dependencies:
 npm install react react-dom
 ```
 
-From [`example-react.jsx`](./example-react.jsx):
+#### Basic Usage (Custom Submit Button)
 ```jsx
-import { QuestionnaireRenderer } from '@mieweb/forms-renderer';
+import { QuestionnaireRenderer, buildQuestionnaireResponse, useFieldsArray } from '@mieweb/forms-renderer';
+
+function MyForm() {
+  const [fields] = React.useState([
+    {
+      id: 'q-name',
+      fieldType: 'input',
+      question: 'What is your full name?',
+      answer: ''
+    }
+  ]);
+  
+  const currentFields = useFieldsArray();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const fhirResponse = buildQuestionnaireResponse(currentFields, 'my-questionnaire', 'patient-123');
+    console.log('Submitted:', fhirResponse);
+    // Send to your API, etc.
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <QuestionnaireRenderer 
+        fields={fields}
+        onChange={(updated) => console.log('Changed:', updated)}
+      />
+      <button type="submit">Submit Questionnaire</button>
+    </form>
+  );
+}
+```
+
+#### With Sections and Conditional Logic
+From [`example-react.jsx`](./examples/example-react.jsx):
+```jsx
+import { QuestionnaireRenderer, buildQuestionnaireResponse, useFieldsArray } from '@mieweb/forms-renderer';
 
 function App() {
   const [fields] = React.useState([
@@ -53,13 +89,42 @@ function App() {
       ]
     }
   ]);
+  
+  const currentFields = useFieldsArray();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const fhirResponse = buildQuestionnaireResponse(currentFields, 'demo-1', 'patient-123');
+    // Handle submission
+  };
 
   return (
-    <QuestionnaireRenderer
-      questionnaireId="demo-questionnaire"
-      fields={fields}
-      onChange={(updatedFields) => console.log('Changed:', updatedFields)}
-      onSubmit={(fhirResponse) => console.log('Submitted:', fhirResponse)}
+    <form onSubmit={handleSubmit}>
+      <QuestionnaireRenderer fields={fields} />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+#### With SurveyJS Schema and Hidden Unsupported Fields
+```jsx
+import { QuestionnaireRenderer } from '@mieweb/forms-renderer';
+
+function SurveyForm() {
+  const [surveySchema, setSurveySchema] = React.useState(null);
+  
+  React.useEffect(() => {
+    fetch('/surveyjs-schema.json')
+      .then(r => r.json())
+      .then(setSurveySchema);
+  }, []);
+
+  return (
+    <QuestionnaireRenderer 
+      fields={surveySchema}
+      schemaType="surveyjs"
+      hideUnsupportedFields={true}
     />
   );
 }
@@ -69,7 +134,7 @@ function App() {
 
 ✨ Zero dependencies - works with any framework or vanilla JS.
 
-From [`example-standalone.html`](./example-standalone.html):
+From [`example-standalone.html`](./examples/example-standalone.html):
 ```html
 <script type="module">
   import './package/dist/standalone.js';
@@ -101,34 +166,77 @@ From [`example-standalone.html`](./example-standalone.html):
     }
   ];
   
-  renderer.onSubmit = (fhirResponse) => {
+  // Handle form submission
+  const form = document.getElementById('myForm');
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const fhirResponse = renderer.getQuestionnaireResponse('q-1', 'patient-123');
     console.log('Form submitted:', fhirResponse);
-  };
+  });
 </script>
 
-<questionnaire-renderer 
-  questionnaire-id="standalone-demo" 
-  full-height>
-</questionnaire-renderer>
+<form id="myForm">
+  <questionnaire-renderer full-height></questionnaire-renderer>
+  <button type="submit">Submit</button>
+</form>
 ```
 
-## ⚙️ Props/Attributes
+## ⚙️ API Reference
+
+### `<QuestionnaireRenderer>` Component
+React component for rendering questionnaires (no built-in submit button).
+
+**Props:**
+- `fields` *(array)* - Questionnaire definition array
+- `schemaType` *(string)* - Schema format: `'inhouse'` (default) or `'surveyjs'`
+- `onChange` *(function)* - Callback when answers change: `(updatedFields) => void`
+- `className` *(string)* - Additional CSS classes
+- `fullHeight` *(boolean)* - Full viewport height mode
+- `hideUnsupportedFields` *(boolean)* - Hide unsupported field types instead of showing placeholders. Useful when importing schemas from external sources like SurveyJS that may contain field types not yet supported by this renderer.
+
+**Example with hideUnsupportedFields:**
+```jsx
+<QuestionnaireRenderer 
+  fields={surveyJsSchema}
+  schemaType="surveyjs"
+  hideUnsupportedFields={true}
+/>
+```
 
-### ⚛️ React Component
-- `fields` - Questionnaire definition array
-- `onChange` - Callback when answers change
-- `onSubmit` - Callback on form submit
-- `questionnaireId` - FHIR Questionnaire ID
-- `subjectId` - Patient/subject ID
-- `className` - CSS classes
-- `fullHeight` - Full viewport height
+### Helper Functions
+
+#### `buildQuestionnaireResponse(fields, questionnaireId, subjectId)`
+Build FHIR QuestionnaireResponse from fields. Use with `useFieldsArray()`.
+
+**Parameters:**
+- `fields` *(array)* - Current form fields (from `useFieldsArray()`)
+- `questionnaireId` *(string)* - FHIR Questionnaire ID
+- `subjectId` *(string, optional)* - Patient/subject ID
+
+**Returns:** FHIR QuestionnaireResponse object
+
+**Example:**
+```jsx
+import { buildQuestionnaireResponse, useFieldsArray } from '@mieweb/forms-renderer';
+
+function MyForm() {
+  const currentFields = useFieldsArray();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const fhirResponse = buildQuestionnaireResponse(currentFields, 'q-1', 'patient-123');
+    // Send to API, save to database, etc.
+  };
+  
+  return <form onSubmit={handleSubmit}>...</form>;
+}
+```
 
 ### 🌐 Web Component
-- `questionnaire-id` - FHIR Questionnaire ID (attribute)
 - `full-height` - Full viewport height (attribute)
 - `fields` - Questionnaire definition (property)
 - `onChange` - Change callback (property)
-- `onSubmit` - Submit callback (property)
+- `getQuestionnaireResponse(questionnaireId, subjectId)` - Get FHIR response (method)
 
 ## 🔧 Field Types
 
@@ -142,7 +250,7 @@ From [`example-standalone.html`](./example-standalone.html):
 
 Fields can be shown/hidden based on other field values. Both examples include conditional logic:
 
-From [`example-react.jsx`](./example-react.jsx):
+From [`example-react.jsx`](./examples/example-react.jsx):
 ```javascript
 {
   id: 'sec-pregnancy',
@@ -198,7 +306,5 @@ The `onSubmit` callback receives a FHIR QuestionnaireResponse:
 
 ## 📚 Documentation
 
-- [📖 Migration Guide](./docs/MIGRATION.md)
-- [🚀 Meteor/Blaze Guide](./docs/METEOR-BLAZE-GUIDE.md)
-- [🌐 Web Component Summary](./docs/WEB-COMPONENT-SUMMARY.md)
-- [🏗️ Architecture](./docs/ARCHITECTURE.md)
+- [⚛️ React Component Example](./examples/example-react.jsx)
+- [🌐 Web Component Example](./examples/example-standalone.html)