@mieweb/forms-renderer 0.1.0

package/README.md

@@ -0,0 +1,356 @@
+# @mieweb/forms-renderer
+
+Read-only questionnaire renderer for displaying and filling out forms. Produces FHIR QuestionnaireResponse output.
+
+## 📦 Installation
+
+```bash
+npm install @mieweb/forms-renderer
+```
+
+### Peer Dependencies
+
+Ensure you have React 18+ installed:
+
+```bash
+npm install react react-dom
+```
+
+### Automatic Dependencies
+
+The following is installed automatically:
+
+- `@mieweb/forms-engine` - Core form state and field components
+
+## 🚀 Quick Start
+
+### 1. Basic Usage
+
+```jsx
+import { QuestionnaireRenderer } from '@mieweb/forms-renderer';
+import '@mieweb/forms-engine/styles.css'; // Import styles
+
+function App({ fields }) {
+  const handleChange = (updatedFields) => {
+    console.log('Form data:', updatedFields);
+  };
+
+  const handleSubmit = (fhirResponse) => {
+    console.log('FHIR QuestionnaireResponse:', fhirResponse);
+    // Send to your backend
+  };
+
+  return (
+    <QuestionnaireRenderer
+      fields={fields}
+      onChange={handleChange}
+      onSubmit={handleSubmit}
+      questionnaireId="patient-intake-v1"
+      subjectId="patient-12345"
+    />
+  );
+}
+```
+
+### 2. Field Structure
+
+The `fields` prop accepts any data source (API, database, local storage) that matches this JSON structure:
+
+```js
+// Example: Simple questionnaire data
+[
+  {
+    id: '1',
+    fieldType: 'input',
+    question: 'What is your name?',
+    answer: ''
+  },
+  {
+    id: '2',
+    fieldType: 'radio',
+    question: 'Select your role',
+    options: ['Developer', 'Designer', 'Manager'],
+    selected: null
+  }
+]
+
+// Example: Complex medical screening with sections and conditional logic
+[
+  {
+    fieldType: "section",
+    title: "Patient Information",
+    id: "sec-patient-info",
+    fields: [
+      { fieldType: "input", question: "First name", answer: "", id: "pi-first-name" },
+      { fieldType: "input", question: "Last name",  answer: "", id: "pi-last-name" },
+      {
+        fieldType: "selection",
+        question: "Biological sex",
+        options: [
+          { id: "pi-sex-m", value: "Male" },
+          { id: "pi-sex-f", value: "Female" }
+        ],
+        selected: null,
+        id: "pi-sex"
+      }
+    ]
+  },
+  {
+    fieldType: "section",
+    title: "Pregnancy & OB",
+    id: "sec-pregnancy",
+    enableWhen: {
+      logic: "AND",
+      conditions: [
+        { targetId: "pi-sex", operator: "equals", value: "pi-sex-f" }
+      ]
+    },
+    fields: [
+      {
+        fieldType: "radio",
+        question: "Are you currently pregnant?",
+        options: [
+          { id: "preg-yes", value: "Yes" },
+          { id: "preg-no", value: "No" }
+        ],
+        selected: null,
+        id: "preg-status"
+      }
+    ]
+  }
+]
+```
+
+**Any JSON object matching this structure works** - whether from your backend API, a database query, local storage, or a CMS.
+
+## 📖 Props
+
+### `QuestionnaireRenderer`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `fields` | `Array` | **Required** | Questionnaire definition from your data source (API, database, etc.) |
+| `onChange` | `Function` | `undefined` | Callback when answers change: `(fields) => void` |
+| `onSubmit` | `Function` | `undefined` | Callback on submit: `(fhirResponse) => void` |
+| `questionnaireId` | `String` | `'questionnaire-1'` | ID for FHIR Questionnaire reference |
+| `subjectId` | `String` | `undefined` | Patient/subject ID for FHIR response |
+| `className` | `String` | `''` | Additional CSS classes |
+| `fullHeight` | `Boolean` | `false` | Use full viewport height |
+
+## ✨ Features
+
+### ✅ Read-Only Display
+
+- Displays questionnaire fields without editing controls
+- Users can **fill out** the form but **cannot add/remove/reorder** fields
+
+### 📋 Supported Field Types
+
+- **Text Input** - Single-line text entry
+- **Radio Buttons** - Single choice selection
+- **Checkboxes** - Multiple choice selection
+- **Dropdown** - Select menu
+- **Section** - Grouped fields with collapse/expand
+
+### 🔀 Conditional Logic (enableWhen)
+
+Automatically shows/hides fields based on answers:
+
+```jsx
+const fields = [
+  {
+    id: '1',
+    fieldType: 'radio',
+    question: 'Do you have symptoms?',
+    options: ['Yes', 'No'],
+    selected: null
+  },
+  {
+    id: '2',
+    fieldType: 'input',
+    question: 'Describe your symptoms',
+    answer: '',
+    enableWhen: [
+      {
+        question: '1',        // ID of field to check
+        operator: 'equals',
+        answer: 'Yes'
+      }
+    ]
+  }
+];
+```
+
+Field `2` only appears when field `1` is answered with "Yes".
+
+### 🏥 FHIR QuestionnaireResponse
+
+On submit, generates a standard FHIR R4 QuestionnaireResponse:
+
+```js
+{
+  resourceType: "QuestionnaireResponse",
+  id: "response-uuid",
+  questionnaire: "questionnaire-1",
+  status: "completed",
+  authored: "2025-10-02T10:30:00Z",
+  subject: {
+    reference: "Patient/patient-12345"
+  },
+  item: [
+    {
+      linkId: "1",
+      text: "What is your name?",
+      answer: [
+        {
+          valueString: "John Doe"
+        }
+      ]
+    }
+    // ... more items
+  ]
+}
+```
+
+## 🎯 Usage Examples
+
+### Saving Responses
+
+```jsx
+import { QuestionnaireRenderer } from '@mieweb/forms-renderer';
+import { useState } from 'react';
+
+function FormPage() {
+  const [responses, setResponses] = useState([]);
+
+  const handleSubmit = async (fhirResponse) => {
+    // Save to backend
+    await fetch('/api/responses', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(fhirResponse)
+    });
+
+    setResponses([...responses, fhirResponse]);
+    alert('Form submitted successfully!');
+  };
+
+  return (
+    <QuestionnaireRenderer
+      fields={fields}
+      onSubmit={handleSubmit}
+      questionnaireId="patient-intake"
+      subjectId="patient-67890"
+    />
+  );
+}
+```
+
+### Pre-filled Form
+
+```jsx
+const prefilledFields = [
+  {
+    id: '1',
+    fieldType: 'input',
+    question: 'Full Name',
+    answer: 'Jane Doe' // Pre-filled
+  },
+  {
+    id: '2',
+    fieldType: 'radio',
+    question: 'Gender',
+    options: ['Male', 'Female', 'Other'],
+    selected: 'Female' // Pre-filled
+  }
+];
+
+<QuestionnaireRenderer fields={prefilledFields} />
+```
+
+### Real-time Validation
+
+```jsx
+function ValidatedForm() {
+  const [errors, setErrors] = useState({});
+
+  const handleChange = (fields) => {
+    const newErrors = {};
+    
+    fields.forEach(field => {
+      if (field.required && !field.answer && !field.selected) {
+        newErrors[field.id] = 'This field is required';
+      }
+    });
+
+    setErrors(newErrors);
+  };
+
+  return (
+    <div>
+      <QuestionnaireRenderer
+        fields={fields}
+        onChange={handleChange}
+      />
+      {Object.values(errors).map(err => (
+        <p className="text-red-500">{err}</p>
+      ))}
+    </div>
+  );
+}
+```
+
+## 🔧 Field Structure
+
+Fields use the same structure as `@mieweb/forms-editor`:
+
+```js
+{
+  id: 'unique-id',
+  fieldType: 'input' | 'radio' | 'check' | 'dropdown' | 'section',
+  question: 'Your question text',
+  answer: '',                   // For input
+  options: [],                  // For radio/check/dropdown
+  selected: null,               // For radio
+  selectedOptions: [],          // For check
+  fields: [],                   // For section
+  enableWhen: []               // Conditional logic
+}
+```
+
+## 📦 Bundle Size
+
+- **4.85 KB** (ESM, uncompressed)
+- Very lightweight - perfect for embedding in patient portals
+
+## 🎨 Styling
+
+Import the base styles from `forms-engine`:
+
+```jsx
+import '@mieweb/forms-engine/styles.css';
+```
+
+Override with custom CSS:
+
+```css
+.qr-renderer-root {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.qr-submit-btn {
+  background: #10b981;
+  color: white;
+  padding: 0.75rem 2rem;
+}
+```
+
+## 🔗 Related Packages
+
+- **@mieweb/forms-engine** - Core form primitives (auto-installed)
+- **@mieweb/forms-editor** - Full questionnaire editor UI
+
+## 📄 License
+
+MIT

package/dist/index.js

@@ -0,0 +1,130 @@
+// src/QuestionnaireRenderer.jsx
+import React from "react";
+import { useFormStore, useUIApi, useFieldsArray, getFieldComponent, isVisible } from "@mieweb/forms-engine";
+import "@mieweb/forms-engine/styles.css";
+function QuestionnaireRenderer({
+  fields,
+  onChange,
+  onSubmit,
+  questionnaireId = "questionnaire-1",
+  subjectId,
+  className = "",
+  fullHeight = false
+}) {
+  const initializedRef = React.useRef(false);
+  const ui = useUIApi();
+  React.useEffect(() => {
+    if (initializedRef.current || !Array.isArray(fields)) return;
+    const sectionChildIds = /* @__PURE__ */ new Set();
+    fields.forEach((f) => {
+      if ((f == null ? void 0 : f.fieldType) === "section" && Array.isArray(f.fields)) {
+        f.fields.forEach((ch) => (ch == null ? void 0 : ch.id) && sectionChildIds.add(ch.id));
+      }
+    });
+    const topOnly = fields.filter((f) => !sectionChildIds.has(f.id));
+    useFormStore.getState().replaceAll(topOnly);
+    ui.preview.set(true);
+    initializedRef.current = true;
+  }, [fields, ui.preview]);
+  React.useEffect(() => {
+    if (!onChange) return;
+    const unsub = useFormStore.subscribe((s) => {
+      const arr = s.flatArray ? s.flatArray() : Object.values(s.byId);
+      onChange(arr);
+    });
+    return unsub;
+  }, [onChange]);
+  const all = useFieldsArray();
+  const buildQuestionnaireResponse = React.useCallback(() => {
+    const items = [];
+    (all || []).forEach((f) => {
+      if (f.fieldType === "section" && Array.isArray(f.fields)) {
+        f.fields.forEach((ch) => {
+          if (!ch) return;
+          items.push({
+            linkId: ch.id,
+            text: ch.question || ch.title || "",
+            answer: toFhirAnswers(ch)
+          });
+        });
+        return;
+      }
+      if (f.fieldType !== "section") {
+        items.push({
+          linkId: f.id,
+          text: f.question || f.title || "",
+          answer: toFhirAnswers(f)
+        });
+      }
+    });
+    return {
+      resourceType: "QuestionnaireResponse",
+      questionnaire: questionnaireId,
+      status: "in-progress",
+      subject: subjectId ? { reference: `Patient/${subjectId}` } : void 0,
+      item: items
+    };
+  }, [all, questionnaireId, subjectId]);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const qr = buildQuestionnaireResponse();
+    onSubmit == null ? void 0 : onSubmit(qr);
+  };
+  const rootClasses = [
+    "qb-render-root",
+    "bg-gray-100",
+    "font-titillium",
+    fullHeight ? "min-h-screen" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React.createElement("div", { className: rootClasses }, /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit, className: "max-w-4xl mx-auto px-2 pb-8 pt-4" }, /* @__PURE__ */ React.createElement(RendererBody, null), /* @__PURE__ */ React.createElement("div", { className: "pt-2" }, /* @__PURE__ */ React.createElement("button", { type: "submit", className: "px-4 py-2 rounded bg-[#0076a8] text-white shadow hover:bg-[#00628a] transition-colors" }, "Submit"))));
+}
+function toFhirAnswers(field) {
+  switch (field.fieldType) {
+    case "input":
+      return field.answer ? [{ valueString: String(field.answer) }] : [];
+    case "radio":
+      return field.selected ? [{ valueString: optionValue(field, field.selected) }] : [];
+    case "check":
+      return (field.selected || []).map((id) => ({ valueString: optionValue(field, id) }));
+    case "selection":
+      return field.selected ? [{ valueString: optionValue(field, field.selected) }] : [];
+    default:
+      return [];
+  }
+}
+function optionValue(field, optionId) {
+  const opt = (field.options || []).find((o) => o.id === optionId || o.value === optionId);
+  return opt ? opt.value : "";
+}
+function RendererBody() {
+  const ui = useUIApi();
+  const fields = useFieldsArray() || [];
+  const flat = React.useMemo(() => {
+    const out = [];
+    fields.forEach((f) => {
+      out.push(f);
+      if ((f == null ? void 0 : f.fieldType) === "section" && Array.isArray(f.fields)) out.push(...f.fields);
+    });
+    return out;
+  }, [fields]);
+  const visible = React.useMemo(() => {
+    if (!ui.state.isPreview) return fields;
+    return fields.filter((f) => isVisible(f, flat));
+  }, [fields, flat, ui.state.isPreview]);
+  return /* @__PURE__ */ React.createElement("div", null, visible.map((f) => /* @__PURE__ */ React.createElement(FieldNode, { key: f.id, field: f, allFlat: flat })));
+}
+function FieldNode({ field, allFlat }) {
+  const ui = useUIApi();
+  const Comp = getFieldComponent(field.fieldType);
+  if (!Comp) return null;
+  if (field.fieldType === "section" && ui.state.isPreview && Array.isArray(field.fields)) {
+    const visibleChildren = field.fields.filter((ch) => isVisible(ch, allFlat));
+    const filteredSection = { ...field, fields: visibleChildren };
+    return /* @__PURE__ */ React.createElement(Comp, { field: filteredSection });
+  }
+  return /* @__PURE__ */ React.createElement(Comp, { field });
+}
+export {
+  QuestionnaireRenderer
+};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@mieweb/forms-renderer",
+  "version": "0.1.0",
+  "description": "Read-only questionnaire form renderer producing FHIR QuestionnaireResponse",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist", "README.md"],
+  "scripts": {
+    "build": "tsup index.js --format esm --external react --external react-dom --external @mieweb/forms-engine"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@mieweb/forms-engine": "0.1.0"
+  },
+  "publishConfig": { "access": "public" }
+}