Add questionnaire renderer components and update styles

Author: olimsaidov

README.md

@@ -1,134 +1,33 @@
-# FHIRPath Editor
+# Aidbox Forms Renderer
 
-A React component library for editing and evaluating FHIRPath expressions with real-time feedback.
-
-## Online Demo
-
-Try the interactive demo at [https://healthsamurai.github.io/aidbox-forms-renderer/](https://healthsamurai.github.io/aidbox-forms-renderer/)
-
-## Installation
-
-```bash
-npm install aidbox-forms-renderer
-# or
-yarn add aidbox-forms-renderer
-```
-
-## Usage
-
-The library provides an `Editor` component for working with FHIRPath expressions:
-
-### Uncontrolled Component (with defaultValue)
-
-```tsx
-import { Editor } from "aidbox-forms-renderer";
-import r4 from "fhirpath/fhir-context/r4";
-
-function MyFhirPathEditor() {
-  // FHIRPath expression to evaluate
-  const defaultExpr = "(1 + 2) * 3";
-  const handleChange = (newValue) =>
-    console.log("Expression changed:", newValue);
-
-  // Simple FHIR resource to evaluate FHIRPath against
-  const data = {
-    resourceType: "Patient",
-    id: "example",
-    name: [
-      {
-        family: "Smith",
-        given: ["John"],
-      },
-    ],
-    birthDate: "1970-01-01",
-  };
-
-  const fhirSchema = []; // Replace with actual schema data
-
-  return (
-    <Editor
-      defaultValue={defaultExpr}
-      onChange={handleChange}
-      data={data}
-      schema={fhirSchema}
-      model={r4}
-    />
-  );
-}
-```
-
-### Controlled Component (with value)
+Minimal React renderer for HL7® FHIR® Questionnaires. State is always a canonical `QuestionnaireResponse`, so the data you display is the data you can submit.
 
 ```tsx
-import { Editor } from "aidbox-forms-renderer";
-import r4 from "fhirpath/fhir-context/r4";
+import { Renderer, type Questionnaire, type QuestionnaireResponse } from "aidbox-forms-renderer";
 import { useState } from "react";
 
-function MyFhirPathEditor() {
-  // FHIRPath expression state
-  const [expression, setExpression] = useState("(1 + 2) * 3");
-
-  // Simple FHIR resource to evaluate FHIRPath against
-  const data = {
-    resourceType: "Patient",
-    id: "example",
-    name: [
-      {
-        family: "Smith",
-        given: ["John"],
-      },
-    ],
-    birthDate: "1970-01-01",
-  };
+const questionnaire: Questionnaire = {
+  resourceType: "Questionnaire",
+  item: [
+    { linkId: "first", text: "First name", type: "string", required: true },
+    { linkId: "consent", text: "Consent to treatment", type: "boolean" },
+  ],
+};
 
-  const fhirSchema = []; // Replace with actual schema data
+export function IntakeForm() {
+  const [response, setResponse] = useState<QuestionnaireResponse | null>(null);
 
   return (
-    <Editor
-      value={expression}
-      onChange={setExpression}
-      data={data}
-      schema={fhirSchema}
-      model={r4}
+    <Renderer
+      questionnaire={questionnaire}
+      initialResponse={response ?? undefined}
+      onChange={setResponse}
+      onSubmit={setResponse}
     />
   );
 }
 ```
 
-## Props
-
-| Prop           | Type                    | Required | Description                                     |
-| -------------- | ----------------------- | -------- | ----------------------------------------------- |
-| `value`        | string                  | No       | Current FHIRPath expression (controlled mode)   |
-| `defaultValue` | string                  | No       | Initial FHIRPath expression (uncontrolled mode) |
-| `onChange`     | (value: string) => void | No       | Callback for expression changes                 |
-| `data`         | any                     | Yes      | The context data to evaluate FHIRPath against   |
-| `variables`    | Record<string, any>     | No       | External bindings available to expressions      |
-| `schema`       | FhirSchema[]            | Yes      | FHIR schema definitions for validation          |
-| `model`        | Model                   | Yes      | FHIR version model data                         |
-| `debug`        | boolean                 | No       | Enable debug mode                               |
-
-## Component Modes
-
-The Editor component supports both controlled and uncontrolled modes:
-
-- **Controlled Mode**: Provide the `value` prop and handle changes with `onChange`.
-- **Uncontrolled Mode**: Provide only the `defaultValue` prop (initial value) and optionally handle changes with `onChange`.
-
-Note: Do not provide both `value` and `defaultValue` at the same time. If both are provided, `defaultValue` will be ignored and a warning will be logged to the console.
-
-## Features
-
-- Low-code environment for developing and testing FHIRPath expressions
-- Interactive visual editor with instant feedback
-- Real-time evaluation against FHIR resources
-- Support for external variable bindings
-- Schema-based validation with autocomplete suggestions
-- Syntax highlighting and error detection
-- Reduces development time for complex FHIRPath queries
+Useful scripts: `npm run dev` (playground), `npm run build` (type-check + bundle), `npm test`, `npm run lint`.
 
-## Todo
-- [x] Support $total special variable
-- [x] Support type evaluation of `aggregate` call
-- [ ] Support dynamic index access
-- [ ] Support unit token
+Architecture and rationale live as doc comments in the source (`lib/state/`, `lib/form-provider.tsx`, `lib/questionnaire-renderer.tsx`).

eslint.config.js

@@ -4,6 +4,8 @@ import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
 import tseslint from "typescript-eslint";
 
+const tsconfigRootDir = new URL("./", import.meta.url).pathname;
+
 export default tseslint.config(
   { ignores: ["dist"] },
   {
@@ -23,7 +25,19 @@ export default tseslint.config(
         "warn",
         { allowConstantExport: true },
       ],
-      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-explicit-any": "error",
+    },
+  },
+  {
+    files: ["lib/**/*.{ts,tsx}"],
+    languageOptions: {
+      parserOptions: {
+        project: ["./tsconfig.lib.json"],
+        tsconfigRootDir,
+      },
+    },
+    rules: {
+      "@typescript-eslint/switch-exhaustiveness-check": "error",
     },
   },
 );

lib/Renderer.tsx

@@ -0,0 +1,55 @@
+import { useStateContext } from "../../state/state-context.ts";
+import type { QuestionnaireItem, Attachment } from "fhir/r5";
+import { coerceAttachment } from "../../utils/answer-coercions";
+import { renderItemChildren } from "./item-children";
+import { renderItemLabel } from "./item-label";
+
+interface AttachmentItemProps {
+  item: QuestionnaireItem;
+}
+
+export function AttachmentItem({ item }: AttachmentItemProps) {
+  const { readValue, writeValue } = useStateContext();
+  const value = readValue(item);
+  const attachment = coerceAttachment(value) ?? {};
+  const inputId = `q-${item.linkId}`;
+
+  const update = (partial: Partial<Attachment>) => {
+    const next: Attachment = { ...attachment, ...partial };
+    if (!next.url && !next.data && !next.title && !next.contentType) {
+      writeValue(item, undefined);
+    } else {
+      writeValue(item, next);
+    }
+  };
+
+  return (
+    <div className="q-item q-item-attachment">
+      {renderItemLabel(item, inputId)}
+      <input
+        id={`${inputId}-url`}
+        type="url"
+        placeholder="URL"
+        value={attachment.url ?? ""}
+        onChange={(event) => update({ url: event.target.value || undefined })}
+        disabled={item.readOnly}
+      />
+      <input
+        id={`${inputId}-content-type`}
+        type="text"
+        placeholder="Content type"
+        value={attachment.contentType ?? ""}
+        onChange={(event) => update({ contentType: event.target.value || undefined })}
+        disabled={item.readOnly}
+      />
+      <textarea
+        id={`${inputId}-data`}
+        placeholder="Base64 data"
+        value={attachment.data ?? ""}
+        onChange={(event) => update({ data: event.target.value || undefined })}
+        disabled={item.readOnly}
+      />
+      {renderItemChildren(item)}
+    </div>
+  );
+}

lib/components/items/attachment-item.tsx

@@ -0,0 +1,32 @@
+import { useStateContext } from "../../state/state-context.ts";
+import type { QuestionnaireItem } from "fhir/r5";
+import { renderItemChildren } from "./item-children";
+
+interface BooleanItemProps {
+  item: QuestionnaireItem;
+}
+
+export function BooleanItem({ item }: BooleanItemProps) {
+  const { readValue, writeValue } = useStateContext();
+  const value = readValue(item);
+  const checked = typeof value === "boolean" ? value : false;
+  const inputId = `q-${item.linkId}`;
+
+  return (
+    <div className="q-item q-item-boolean">
+      <label className="q-item-label q-item-label-inline">
+        <input
+          id={inputId}
+          type="checkbox"
+          checked={checked}
+          required={item.required}
+          onChange={(event) => writeValue(item, event.target.checked)}
+          disabled={item.readOnly}
+        />
+        <span>{item.text ?? item.linkId}</span>
+        {item.required ? <span className="q-item-required">*</span> : null}
+      </label>
+      {renderItemChildren(item)}
+    </div>
+  );
+}

lib/components/items/boolean-item.tsx

@@ -0,0 +1,67 @@
+import { useStateContext } from "../../state/state-context.ts";
+import type { QuestionnaireItem } from "fhir/r5";
+import {
+  getCodingLabel,
+  getCodingValue,
+  isSameCodingValue,
+} from "../../utils/coding-options";
+import { renderItemChildren } from "./item-children";
+import { renderItemLabel } from "./item-label";
+
+interface CodingItemProps {
+  item: QuestionnaireItem;
+}
+
+export function CodingItem({ item }: CodingItemProps) {
+  const { readValue, writeValue } = useStateContext();
+  const value = readValue(item);
+  const inputId = `q-${item.linkId}`;
+  const options = item.answerOption ?? [];
+
+  if (options.length === 0) {
+    return (
+      <div className="q-item q-item-coding">
+        {renderItemLabel(item, inputId)}
+        <p className="q-item-unsupported">No answer options provided.</p>
+        {renderItemChildren(item)}
+      </div>
+    );
+  }
+
+  const internalOptions = options.map((option, index) => {
+    const optionValue = getCodingValue(option);
+    return {
+      key: String(index),
+      value: optionValue,
+      label: getCodingLabel(option),
+    };
+  });
+
+  const selected = internalOptions.find((option) => isSameCodingValue(option.value, value));
+
+  return (
+    <div className="q-item q-item-coding">
+      {renderItemLabel(item, inputId)}
+      <select
+        id={inputId}
+        required={item.required}
+        disabled={item.readOnly}
+        value={selected?.key ?? ""}
+        onChange={(event) => {
+          const next = internalOptions.find((option) => option.key === event.target.value);
+          writeValue(item, next ? next.value : undefined);
+        }}
+      >
+        <option value="" disabled>
+          Select an option
+        </option>
+        {internalOptions.map((option) => (
+          <option key={option.key} value={option.key}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {renderItemChildren(item)}
+    </div>
+  );
+}

lib/components/items/coding-item.tsx

@@ -0,0 +1,15 @@
+import type { QuestionnaireItem } from "fhir/r5";
+import { renderItemChildren } from "./item-children";
+
+interface DisplayItemProps {
+  item: QuestionnaireItem;
+}
+
+export function DisplayItem({ item }: DisplayItemProps) {
+  return (
+    <div className="q-item q-item-display-wrapper">
+      <p className="q-item-display">{item.text}</p>
+      {renderItemChildren(item)}
+    </div>
+  );
+}

lib/components/items/display-item.tsx

@@ -0,0 +1,18 @@
+import type { QuestionnaireItem } from "fhir/r5";
+import { renderItemChildren } from "./item-children";
+
+interface GroupItemProps {
+  item: QuestionnaireItem;
+}
+
+export function GroupItem({ item }: GroupItemProps) {
+  return (
+    <fieldset className="q-item q-item-group">
+      <legend>
+        {item.prefix ? <span className="q-item-prefix">{item.prefix} </span> : null}
+        <span>{item.text ?? item.linkId}</span>
+      </legend>
+      {renderItemChildren(item)}
+    </fieldset>
+  );
+}