@mieweb/forms-renderer 0.1.9 → 0.1.10

package/README.md

@@ -25,7 +25,7 @@ npm install react react-dom
 
 #### Basic Usage (Custom Submit Button)
 ```jsx
-import { QuestionnaireRenderer, useQuestionnaireData } from '@mieweb/forms-renderer';
+import { QuestionnaireRenderer, buildQuestionnaireResponse, useFieldsArray } from '@mieweb/forms-renderer';
 
 function MyForm() {
   const [fields] = React.useState([
@@ -37,11 +37,11 @@ function MyForm() {
     }
   ]);
   
-  const { getQuestionnaireResponse } = useQuestionnaireData('my-questionnaire', 'patient-123');
+  const currentFields = useFieldsArray();
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    const fhirResponse = getQuestionnaireResponse();
+    const fhirResponse = buildQuestionnaireResponse(currentFields, 'my-questionnaire', 'patient-123');
     console.log('Submitted:', fhirResponse);
     // Send to your API, etc.
   };
@@ -61,7 +61,7 @@ function MyForm() {
 #### With Sections and Conditional Logic
 From [`example-react.jsx`](./examples/example-react.jsx):
 ```jsx
-import { QuestionnaireRenderer, useQuestionnaireData } from '@mieweb/forms-renderer';
+import { QuestionnaireRenderer, buildQuestionnaireResponse, useFieldsArray } from '@mieweb/forms-renderer';
 
 function App() {
   const [fields] = React.useState([
@@ -90,11 +90,11 @@ function App() {
     }
   ]);
   
-  const { fields: currentFields, getQuestionnaireResponse } = useQuestionnaireData('demo-1');
+  const currentFields = useFieldsArray();
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    const fhirResponse = getQuestionnaireResponse();
+    const fhirResponse = buildQuestionnaireResponse(currentFields, 'demo-1', 'patient-123');
     // Handle submission
   };
 
@@ -107,6 +107,29 @@ function App() {
 }
 ```
 
+#### 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}
+    />
+  );
+}
+```
+
 ### 🌐 Standalone Web Component (Framework-Agnostic)
 
 ✨ Zero dependencies - works with any framework or vanilla JS.
@@ -165,50 +188,49 @@ 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.
 
-### `useQuestionnaireData(questionnaireId, subjectId)` Hook
-Get current questionnaire data and FHIR response builder.
-
-**Parameters:**
-- `questionnaireId` *(string)* - FHIR Questionnaire ID (default: `'questionnaire-1'`)
-- `subjectId` *(string, optional)* - Patient/subject ID
-
-**Returns:**
-```typescript
-{
-  fields: Field[],                           // Current form fields with answers
-  getQuestionnaireResponse: () => Object     // Get FHIR QuestionnaireResponse
-}
-```
-
-**Example:**
+**Example with hideUnsupportedFields:**
 ```jsx
-const { fields, getQuestionnaireResponse } = useQuestionnaireData('q-1', 'patient-123');
-
-const handleSubmit = () => {
-  const fhirResponse = getQuestionnaireResponse();
-  // fhirResponse is a FHIR QuestionnaireResponse object
-};
+<QuestionnaireRenderer 
+  fields={surveyJsSchema}
+  schemaType="surveyjs"
+  hideUnsupportedFields={true}
+/>
 ```
 
-### `useQuestionnaireSubmit(fields, questionnaireId, subjectId, onSubmit)` Hook
-*(Legacy)* Pre-built submit handler.
+### Helper Functions
+
+#### `buildQuestionnaireResponse(fields, questionnaireId, subjectId)`
+Build FHIR QuestionnaireResponse from fields. Use with `useFieldsArray()`.
 
 **Parameters:**
-- `fields` *(array)* - Current form fields
+- `fields` *(array)* - Current form fields (from `useFieldsArray()`)
 - `questionnaireId` *(string)* - FHIR Questionnaire ID
 - `subjectId` *(string, optional)* - Patient/subject ID
-- `onSubmit` *(function)* - Callback with FHIR response
 
-**Returns:** `(event) => void` - Form submit handler
+**Returns:** FHIR QuestionnaireResponse object
 
-### `buildQuestionnaireResponse(fields, questionnaireId, subjectId)` Utility
-Build FHIR QuestionnaireResponse from fields.
+**Example:**
+```jsx
+import { buildQuestionnaireResponse, useFieldsArray } from '@mieweb/forms-renderer';
 
-**Returns:** FHIR QuestionnaireResponse object
+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
 - `full-height` - Full viewport height (attribute)