@mieweb/forms-renderer 0.1.9 → 0.1.11

package/README.md

@@ -1,234 +1,230 @@
-# 📋 @mieweb/forms-renderer
+# @mieweb/forms-renderer
 
-Read-only questionnaire renderer with dual distribution: React component or Standalone Web Component.
+Questionnaire renderer with three distribution options: React component, standalone Web Component, or Blaze component for Meteor.
 
-## 📦 Installation
+## Examples
 
-```bash
-npm install @mieweb/forms-renderer
-```
-
-## 🚀 Examples
+- [`example-react.jsx`](./examples/example-react.jsx) - React component
+- [`example-standalone.html`](./examples/example-standalone.html) - Web Component
+- [`blaze-example.html`](./examples/blaze-example.html) - Blaze/Meteor
 
-See the complete working examples in this package:
-- [`example-react.jsx`](./examples/example-react.jsx) - ⚛️ React component usage
-- [`example-standalone.html`](./examples/example-standalone.html) - 🌐 Web Component usage
+## Usage
 
-## 💻 Usage
+Choose the method that fits your stack:
 
-### ⚛️ React Component (Recommended for React Projects)
+### 1. React Component (for React apps)
 
-Requires React peer dependencies:
+**Install:**
 ```bash
-npm install react react-dom
+npm install @mieweb/forms-renderer react react-dom
 ```
 
-#### Basic Usage (Custom Submit Button)
+**Basic Usage:**
 ```jsx
-import { QuestionnaireRenderer, useQuestionnaireData } from '@mieweb/forms-renderer';
+import { QuestionnaireRenderer, buildQuestionnaireResponse, useFieldsArray } from '@mieweb/forms-renderer';
 
 function MyForm() {
   const [fields] = React.useState([
     {
       id: 'q-name',
-      fieldType: 'input',
+      fieldType: 'text',
       question: 'What is your full name?',
       answer: ''
     }
   ]);
   
-  const { getQuestionnaireResponse } = useQuestionnaireData('my-questionnaire', 'patient-123');
+  const currentFields = useFieldsArray();
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    const fhirResponse = getQuestionnaireResponse();
-    console.log('Submitted:', fhirResponse);
-    // Send to your API, etc.
+    const fhir = buildQuestionnaireResponse(currentFields, 'my-questionnaire', 'patient-123');
   };
 
   return (
     <form onSubmit={handleSubmit}>
-      <QuestionnaireRenderer 
-        fields={fields}
-        onChange={(updated) => console.log('Changed:', updated)}
-      />
-      <button type="submit">Submit Questionnaire</button>
+      <QuestionnaireRenderer fields={fields} />
+      <button type="submit">Submit</button>
     </form>
   );
 }
 ```
 
-#### With Sections and Conditional Logic
-From [`example-react.jsx`](./examples/example-react.jsx):
+**With SurveyJS Schema:**
 ```jsx
-import { QuestionnaireRenderer, useQuestionnaireData } from '@mieweb/forms-renderer';
-
-function App() {
-  const [fields] = React.useState([
-    {
-      id: 'sec-1',
-      fieldType: 'section',
-      title: 'Personal Information',
-      fields: [
-        {
-          id: 'q-name',
-          fieldType: 'input',
-          question: 'What is your full name?',
-          answer: ''
-        },
-        {
-          id: 'q-gender',
-          fieldType: 'radio',
-          question: 'Biological sex',
-          options: [
-            { id: 'gender-male', value: 'Male' },
-            { id: 'gender-female', value: 'Female' }
-          ],
-          selected: null
-        }
+import { QuestionnaireRenderer } from '@mieweb/forms-renderer';
+
+function SurveyForm() {
+  const surveySchema = {
+    pages: [{
+      elements: [
+        { type: 'text', name: 'firstName', title: 'First Name' },
+        { type: 'text', name: 'lastName', title: 'Last Name' }
       ]
-    }
-  ]);
-  
-  const { fields: currentFields, getQuestionnaireResponse } = useQuestionnaireData('demo-1');
-
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const fhirResponse = getQuestionnaireResponse();
-    // Handle submission
+    }]
   };
 
   return (
-    <form onSubmit={handleSubmit}>
-      <QuestionnaireRenderer fields={fields} />
-      <button type="submit">Submit</button>
-    </form>
+    <QuestionnaireRenderer 
+      fields={surveySchema}
+      schemaType="surveyjs"
+      hideUnsupportedFields={true}
+    />
   );
 }
 ```
 
-### 🌐 Standalone Web Component (Framework-Agnostic)
+---
 
-✨ Zero dependencies - works with any framework or vanilla JS.
+### 2. Standalone Web Component (framework-agnostic)
 
-From [`example-standalone.html`](./examples/example-standalone.html):
-```html
-<script type="module">
-  import './package/dist/standalone.js';
-  
-  const renderer = document.querySelector('questionnaire-renderer');
-  renderer.fields = [
-    {
-      id: 'sec-1',
-      fieldType: 'section',
-      title: 'Patient Information',
-      fields: [
-        {
-          id: 'q-name',
-          fieldType: 'input',
-          question: 'Full Name',
-          answer: ''
-        },
-        {
-          id: 'q-gender',
-          fieldType: 'radio',
-          question: 'Biological sex',
-          options: [
-            { id: 'gender-male', value: 'Male' },
-            { id: 'gender-female', value: 'Female' }
-          ],
-          selected: null
-        }
-      ]
-    }
-  ];
-  
-  // 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>
-
-<form id="myForm">
-  <questionnaire-renderer full-height></questionnaire-renderer>
-  <button type="submit">Submit</button>
-</form>
+**Install:**
+```bash
+npm install @mieweb/forms-renderer
 ```
+No peer dependencies required - bundles React internally.
 
-## ⚙️ API Reference
+**Usage:**
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script type="module">
+    import '@mieweb/forms-renderer/standalone';
+  </script>
+</head>
+<body>
+  <form id="myForm">
+    <questionnaire-renderer></questionnaire-renderer>
+    <button type="submit">Submit</button>
+  </form>
+
+  <script>
+    const renderer = document.querySelector('questionnaire-renderer');
+    
+    // Set schema type for SurveyJS schemas
+    renderer.schemaType = 'surveyjs';
+    
+    // Hide unsupported field types
+    renderer.hideUnsupportedFields = true;
+    
+    renderer.fields = [
+      {
+        id: 'q-name',
+        fieldType: 'text',
+        question: 'Full Name',
+        answer: ''
+      }
+    ];
+    
+    document.getElementById('myForm').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const fhir = renderer.getQuestionnaireResponse('q-1', 'patient-123');
+      console.log(fhir);
+    });
+  </script>
+</body>
+</html>
+```
 
-### `<QuestionnaireRenderer>` Component
-React component for rendering questionnaires (no built-in submit button).
+---
 
-**Props:**
-- `fields` *(array)* - Questionnaire definition array
-- `onChange` *(function)* - Callback when answers change: `(updatedFields) => void`
-- `className` *(string)* - Additional CSS classes
-- `fullHeight` *(boolean)* - Full viewport height mode
+### 3. Blaze Component (for Meteor apps)
 
-### `useQuestionnaireData(questionnaireId, subjectId)` Hook
-Get current questionnaire data and FHIR response builder.
+**Install:**
+```bash
+meteor npm install @mieweb/forms-renderer
+```
 
-**Parameters:**
-- `questionnaireId` *(string)* - FHIR Questionnaire ID (default: `'questionnaire-1'`)
-- `subjectId` *(string, optional)* - Patient/subject ID
+**Usage:**
+```javascript
+// In your Meteor client code
+import '@mieweb/forms-renderer/blaze';
 
-**Returns:**
-```typescript
-{
-  fields: Field[],                           // Current form fields with answers
-  getQuestionnaireResponse: () => Object     // Get FHIR QuestionnaireResponse
-}
+// If the above doesn't work in your Meteor version, try:
+// import '@mieweb/forms-renderer/dist/blaze.js';
 ```
 
-**Example:**
-```jsx
-const { fields, getQuestionnaireResponse } = useQuestionnaireData('q-1', 'patient-123');
+**In your Blaze template:**
+```handlebars
+{{> questionnaireRenderer 
+    fields=myFields 
+    schemaType="surveyjs" 
+    hideUnsupportedFields=true 
+    onChange=handleChange}}
+```
 
-const handleSubmit = () => {
-  const fhirResponse = getQuestionnaireResponse();
-  // fhirResponse is a FHIR QuestionnaireResponse object
-};
+**Helper example:**
+```javascript
+Template.myTemplate.helpers({
+  myFields() {
+    return [
+      { id: 'q1', fieldType: 'text', question: 'Name?', answer: '' }
+    ];
+  },
+  handleChange() {
+    return (updatedFields) => {
+      console.log('Fields changed:', updatedFields);
+    };
+  }
+});
 ```
 
-### `useQuestionnaireSubmit(fields, questionnaireId, subjectId, onSubmit)` Hook
-*(Legacy)* Pre-built submit handler.
+---
 
-**Parameters:**
-- `fields` *(array)* - Current form fields
-- `questionnaireId` *(string)* - FHIR Questionnaire ID
-- `subjectId` *(string, optional)* - Patient/subject ID
-- `onSubmit` *(function)* - Callback with FHIR response
+## API Reference
 
-**Returns:** `(event) => void` - Form submit handler
+### React Component Props
 
-### `buildQuestionnaireResponse(fields, questionnaireId, subjectId)` Utility
-Build FHIR QuestionnaireResponse from fields.
+- `fields` - Questionnaire definition array
+- `schemaType` - `'inhouse'` (default) or `'surveyjs'`
+- `onChange` - Callback when answers change
+- `className` - Additional CSS classes
+- `fullHeight` - Full viewport height mode
+- `hideUnsupportedFields` - Hide unsupported field types
 
-**Returns:** FHIR QuestionnaireResponse object
+### React Helpers
 
-### 🌐 Web Component
-- `full-height` - Full viewport height (attribute)
-- `fields` - Questionnaire definition (property)
-- `onChange` - Change callback (property)
-- `getQuestionnaireResponse(questionnaireId, subjectId)` - Get FHIR response (method)
+**`buildQuestionnaireResponse(fields, questionnaireId, subjectId)`**
 
-## 🔧 Field Types
+Returns FHIR QuestionnaireResponse. Use with `useFieldsArray()` to get current form state:
 
-- `input` - 📝 Text input field
-- `radio` - 🔘 Single selection radio buttons
-- `check` - ☑️ Multiple selection checkboxes
-- `selection` - 📋 Dropdown selection
-- `section` - 📂 Container for grouping fields
+```jsx
+import { buildQuestionnaireResponse, useFieldsArray } from '@mieweb/forms-renderer';
+
+const currentFields = useFieldsArray();
+const fhir = buildQuestionnaireResponse(currentFields, 'q-1', 'patient-123');
+```
+
+### Web Component API
+
+- `renderer.fields` - Set/get questionnaire definition (property)
+- `renderer.onChange` - Set change callback (property)
+- `renderer.schemaType` - Set to `'surveyjs'` for SurveyJS schemas (property)
+- `renderer.hideUnsupportedFields` - Boolean to hide unsupported types (property)
+- `renderer.getQuestionnaireResponse(id, subjectId)` - Get FHIR response (method)
+
+### Blaze Component Data Context
+
+- `fields` - Questionnaire definition array
+- `schemaType` - `'inhouse'` or `'surveyjs'`
+- `onChange` - Change callback function
+- `hideUnsupportedFields` - Boolean to hide unsupported types
+- `fullHeight` - Boolean for full height mode
 
-## 🔀 Conditional Logic (enableWhen)
+## Field Types
 
-Fields can be shown/hidden based on other field values. Both examples include conditional logic:
+- `text` - Single-line text input
+- `longtext` - Multi-line text area
+- `multitext` - Multiple labeled text inputs
+- `boolean` - Yes/No button selection
+- `radio` - Single selection
+- `check` - Multiple selection
+- `dropdown` - Dropdown selection
+- `section` - Container for grouping
 
-From [`example-react.jsx`](./examples/example-react.jsx):
+## Conditional Logic
+
+Show/hide fields based on other answers:
 ```javascript
 {
   id: 'sec-pregnancy',
@@ -243,7 +239,7 @@ From [`example-react.jsx`](./examples/example-react.jsx):
   fields: [
     {
       id: 'q-weeks',
-      fieldType: 'input',
+      fieldType: 'text',
       question: 'Weeks gestation (if known)',
       answer: '',
       enableWhen: {
@@ -257,9 +253,9 @@ From [`example-react.jsx`](./examples/example-react.jsx):
 }
 ```
 
-## 🏥 FHIR Output
+## FHIR Output
 
-The `onSubmit` callback receives a FHIR QuestionnaireResponse:
+FHIR QuestionnaireResponse format:
 
 ```javascript
 {
@@ -275,14 +271,4 @@ The `onSubmit` callback receives a FHIR QuestionnaireResponse:
     }
   ]
 }
-```
-
-## 📊 Bundle Sizes
-
-- **⚛️ React version**: ~24 KB (requires peer deps)
-- **🌐 Standalone version**: ~819 KB (zero dependencies)
-
-## 📚 Documentation
-
-- [⚛️ React Component Example](./examples/example-react.jsx)
-- [🌐 Web Component Example](./examples/example-standalone.html)
+```