@aehrc/smart-forms-renderer 0.44.0 → 1.0.0-alpha.1

package/src/components/FormComponents/index.ts

@@ -21,3 +21,7 @@ export { RepeatGroup } from './RepeatGroup';
 export { GroupTable } from './Tables';
 export { GridGroup } from './GridGroup';
 export { parseFhirDateToDisplayDate } from './DateTimeItems';
+export { ItemFieldGrid } from './ItemParts';
+
+// item type components
+export { StringField } from './StringItem';

package/src/components/index.ts

@@ -23,5 +23,10 @@ export {
   RepeatGroup,
   GroupTable,
   GridGroup,
-  parseFhirDateToDisplayDate
+  parseFhirDateToDisplayDate,
+  ItemFieldGrid,
+  StringField
 } from './FormComponents';
+
+// Styled MUI components
+export { FullWidthFormComponentBox } from './Box.styles';

package/src/hooks/index.ts

@@ -1,3 +1,9 @@
 export { default as useHidden } from './useHidden';
+export { default as useReadOnly } from './useReadOnly';
 export { default as useBuildForm } from './useBuildForm';
 export { default as useRendererQueryClient } from './useRendererQueryClient';
+export { default as useRenderingExtensions } from './useRenderingExtensions';
+export { default as useValidationFeedback } from './useValidationFeedback';
+
+// CalculatedExpression hooks
+export { default as useStringCalculatedExpression } from './useStringCalculatedExpression';

package/src/hooks/useBuildForm.ts

@@ -15,9 +15,10 @@
  * limitations under the License.
  */
 
-import { useLayoutEffect, useState } from 'react';
+import { ComponentType, useLayoutEffect, useState } from 'react';
 import { buildForm } from '../utils';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
+import { RendererStyling, useRendererStylingStore } from '../stores/rendererStylingStore';
 
 /**
  * React hook wrapping around the buildForm() function to build a form from a questionnaire and an optional QuestionnaireResponse.
@@ -28,6 +29,8 @@ import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
  * @param readOnly - Applies read-only mode to all items in the form view
  * @param terminologyServerUrl - Terminology server url to fetch terminology. If not provided, the default terminology server will be used. (optional)
  * @param additionalVariables - Additional key-value pair of SDC variables `Record<name, variable extension>` for testing (optional)
+ * @param rendererStyling - Renderer styling to be applied to the form. See docs for styling options. (optional)
+ * @param customComponents - FIXME add comment
  *
  * @author Sean Fong
  */
@@ -36,17 +39,27 @@ function useBuildForm(
   questionnaireResponse?: QuestionnaireResponse,
   readOnly?: boolean,
   terminologyServerUrl?: string,
-  additionalVariables?: Record<string, object>
+  additionalVariables?: Record<string, object>,
+  rendererStyling?: RendererStyling,
+  customComponents?: Record<string, ComponentType<any>>
 ) {
   const [isBuilding, setIsBuilding] = useState(true);
 
+  const setRendererStyling = useRendererStylingStore.use.setRendererStyling();
+
   useLayoutEffect(() => {
+    // Set optional renderer styling
+    if (rendererStyling) {
+      setRendererStyling(rendererStyling);
+    }
+
     buildForm(
       questionnaire,
       questionnaireResponse,
       readOnly,
       terminologyServerUrl,
-      additionalVariables
+      additionalVariables,
+      customComponents
     ).then(() => {
       setIsBuilding(false);
     });

package/src/index.ts

@@ -1,5 +1,12 @@
 // interface exports
-export type { Tab, Tabs, Variables, VariableXFhirQuery, LaunchContext } from './interfaces';
+export type {
+  Tab,
+  Tabs,
+  Variables,
+  VariableXFhirQuery,
+  LaunchContext,
+  CustomComponentProps
+} from './interfaces';
 
 // component exports
 export type { SmartFormsRendererProps } from './components';
@@ -11,7 +18,10 @@ export {
   RepeatGroup,
   GroupTable,
   GridGroup,
-  parseFhirDateToDisplayDate
+  parseFhirDateToDisplayDate,
+  ItemFieldGrid,
+  StringField,
+  FullWidthFormComponentBox
 } from './components';
 
 // state management store exports
@@ -33,7 +43,15 @@ export {
 } from './stores';
 
 // hooks exports
-export { useHidden, useBuildForm, useRendererQueryClient } from './hooks';
+export {
+  useHidden,
+  useReadOnly,
+  useBuildForm,
+  useRendererQueryClient,
+  useRenderingExtensions,
+  useValidationFeedback,
+  useStringCalculatedExpression
+} from './hooks';
 
 // utils exports
 export type { ItemToRepopulate } from './utils';
@@ -43,6 +61,7 @@ export {
   getResponse,
   removeEmptyAnswersFromResponse,
   removeInternalIdsFromResponse,
+  createEmptyQrItem,
   isSpecificItemControl,
   isRepeatItemAndNotCheckbox,
   initialiseQuestionnaireResponse,

package/src/interfaces/customComponent.interface.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { QuestionnaireItem, type QuestionnaireResponseItem } from 'fhir/r4';
+
+export interface CustomComponentProps {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem | null;
+  isRepeated: boolean;
+  isTabled: boolean;
+  parentIsReadOnly?: boolean;
+  onQrItemChange: (qrItem: QuestionnaireResponseItem) => unknown;
+}

package/src/interfaces/index.ts

@@ -19,3 +19,4 @@ export type { Tab, Tabs } from './tab.interface';
 export type { Variables, VariableXFhirQuery } from './variables.interface';
 export type { LaunchContext } from './populate.interface';
 export type { EnableWhenItems, EnableWhenExpressions } from './enableWhen.interface';
+export type { CustomComponentProps } from './customComponent.interface';

package/src/stores/questionnaireStore.ts

@@ -48,6 +48,8 @@ import { questionnaireResponseStore } from './questionnaireResponseStore';
 import { createQuestionnaireResponseItemMap } from '../utils/questionnaireResponseStoreUtils/updatableResponseItems';
 import { insertCompleteAnswerOptionsIntoQuestionnaire } from '../utils/questionnaireStoreUtils/insertAnswerOptions';
 import type { InitialExpression } from '../interfaces/initialExpression.interface';
+import React from 'react';
+import { CustomComponentProps } from '../interfaces/customComponent.interface';
 
 /**
  * QuestionnaireStore properties and methods
@@ -116,6 +118,7 @@ export interface QuestionnaireStoreType {
   cachedValueSetCodings: Record<string, Coding[]>;
   fhirPathContext: Record<string, any>;
   populatedContext: Record<string, any>;
+  customComponents: Record<string, React.ComponentType<CustomComponentProps>>;
   focusedLinkId: string;
   readOnly: boolean;
   buildSourceQuestionnaire: (
@@ -123,7 +126,8 @@ export interface QuestionnaireStoreType {
     questionnaireResponse?: QuestionnaireResponse,
     additionalVariables?: Record<string, object>,
     terminologyServerUrl?: string,
-    readOnly?: boolean
+    readOnly?: boolean,
+    customComponents?: Record<string, React.ComponentType<any>>
   ) => Promise<void>;
   destroySourceQuestionnaire: () => void;
   switchTab: (newTabIndex: number) => void;
@@ -182,6 +186,7 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
   cachedValueSetCodings: {},
   fhirPathContext: {},
   populatedContext: {},
+  customComponents: {},
   focusedLinkId: '',
   readOnly: false,
   buildSourceQuestionnaire: async (
@@ -189,7 +194,8 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
     questionnaireResponse = structuredClone(emptyResponse),
     additionalVariables = {},
     terminologyServerUrl = terminologyServerStore.getState().url,
-    readOnly = false
+    readOnly = false,
+    customComponents = {}
   ) => {
     const questionnaireModel = await createQuestionnaireModel(
       questionnaire,
@@ -242,6 +248,7 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
       processedValueSetCodings: questionnaireModel.processedValueSetCodings,
       processedValueSetUrls: questionnaireModel.processedValueSetUrls,
       fhirPathContext: updatedFhirPathContext,
+      customComponents: customComponents,
       readOnly: readOnly
     });
   },
@@ -264,7 +271,8 @@ export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, ge
       answerExpressions: {},
       processedValueSetCodings: {},
       processedValueSetUrls: {},
-      fhirPathContext: {}
+      fhirPathContext: {},
+      customComponents: {}
     }),
   switchTab: (newTabIndex: number) => set(() => ({ currentTabIndex: newTabIndex })),
   switchPage: (newPageIndex: number) => set(() => ({ currentPageIndex: newPageIndex })),

package/src/stores/rendererStylingStore.ts

@@ -0,0 +1,67 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createStore } from 'zustand/vanilla';
+import { createSelectors } from './selector';
+
+export interface RendererStyling {
+  itemLabelFontWeight?:
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | 'default';
+}
+
+/**
+ * RendererStylingStore properties and methods
+ *
+ * @author Sean Fong
+ */
+export interface RendererStylingStoreType {
+  itemLabelFontWeight:
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900'
+    | 'default';
+  setRendererStyling: (params: RendererStyling) => void;
+}
+
+/**
+ * @author Sean Fong
+ */
+export const rendererStylingStore = createStore<RendererStylingStoreType>()((set) => ({
+  itemLabelFontWeight: 'default',
+  setRendererStyling: (params: RendererStyling) => {
+    set(() => ({
+      itemLabelFontWeight: params.itemLabelFontWeight ?? 'default'
+    }));
+  }
+}));
+
+export const useRendererStylingStore = createSelectors(rendererStylingStore);

package/src/stories/assets/questionnaires/QBehaviorOther.ts

@@ -315,6 +315,98 @@ export const qEnableWhen: Questionnaire = {
   ]
 };
 
+export const qEnableWhenMultiCheckbox: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'EnableWhenMultiCheckbox',
+  name: 'EnableWhenMultiCheckbox',
+  title: 'EnableWhen Multi-select Checkbox',
+  version: '0.1.0',
+  status: 'draft',
+  date: '2024-05-01',
+  url: 'https://smartforms.csiro.au/docs/behavior/other/enable-when-multi-checkbox',
+  item: [
+    {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+          valueCodeableConcept: {
+            coding: [
+              {
+                system: 'http://hl7.org/fhir/questionnaire-item-control',
+                code: 'check-box'
+              }
+            ]
+          }
+        },
+        {
+          url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-openLabel',
+          valueString: 'Other, please specify'
+        }
+      ],
+      linkId: 'select-conditions-list',
+      text: 'Select one or more conditions',
+      type: 'open-choice',
+      repeats: true,
+      answerOption: [
+        {
+          valueString: 'Condition A (Displays Clinical guidance: Condition A question)'
+        },
+        {
+          valueString: 'Condition B (Displays Clinical guidance: Condition B question)'
+        },
+        {
+          valueString: 'Condition C (Displays Clinical guidance: Condition C question)'
+        },
+        {
+          valueString: 'Condition D'
+        },
+        {
+          valueString: 'Condition E'
+        },
+        {
+          valueString: 'Condition F'
+        }
+      ]
+    },
+    {
+      linkId: 'clinical-guidance-a',
+      text: 'Clinical guidance: Condition A',
+      type: 'display',
+      enableWhen: [
+        {
+          question: 'select-conditions-list',
+          operator: '=',
+          answerString: 'Condition A (Displays Clinical guidance: Condition A question)'
+        }
+      ]
+    },
+    {
+      linkId: 'clinical-guidance-b',
+      text: 'Clinical guidance: Condition B',
+      type: 'display',
+      enableWhen: [
+        {
+          question: 'select-conditions-list',
+          operator: '=',
+          answerString: 'Condition B (Displays Clinical guidance: Condition B question)'
+        }
+      ]
+    },
+    {
+      linkId: 'clinical-guidance-c',
+      text: 'Clinical guidance: Condition C',
+      type: 'display',
+      enableWhen: [
+        {
+          question: 'select-conditions-list',
+          operator: '=',
+          answerString: 'Condition C (Displays Clinical guidance: Condition C question)'
+        }
+      ]
+    }
+  ]
+};
+
 export const qEnableBehaviorAll: Questionnaire = {
   resourceType: 'Questionnaire',
   id: 'EnableBehaviorAll',

package/src/stories/sdc/BehaviorOther.stories.tsx

@@ -23,6 +23,7 @@ import {
   qEnableWhen,
   qEnableWhenExpressionSimple,
   qEnableWhenExpressionTabs,
+  qEnableWhenMultiCheckbox,
   qInitialRepeats,
   qInitialSingle,
   qText
@@ -59,6 +60,12 @@ export const EnableWhen: Story = {
   }
 };
 
+export const EnableWhenMultiCheckbox: Story = {
+  args: {
+    questionnaire: qEnableWhenMultiCheckbox
+  }
+};
+
 export const EnableBehaviorAll: Story = {
   args: {
     questionnaire: qEnableBehaviorAll

package/src/utils/enableWhen.ts

@@ -339,19 +339,29 @@ export function checkItemIsEnabledSingle(
 ): boolean {
   const checkedIsEnabledItems: boolean[] = [];
 
+  // Check if linked item satisfies enableWhen condition
   for (const linkedItem of enableWhenItemProperties.linked) {
+    let isEnabledForThisLinkedItem = false;
+
+    // Linked item has answers
     if (linkedItem.answer && linkedItem.answer.length > 0) {
+      // Check if linked answer within item satisfies enableWhen condition
+      // Exit early once a linked answer is found to satisfy the condition
       for (const answer of linkedItem.answer) {
-        const isEnabledForThisLinkedItem = isEnabledAnswerTypeSwitcher(
+        const isEnabledForThisLinkedAnswer = isEnabledAnswerTypeSwitcher(
           linkedItem.enableWhen,
           answer
         );
 
-        // In a repeat item, if at least one answer satisfies the condition, the item is enabled
-        // FIXME need to look further at this
-        checkedIsEnabledItems.push(isEnabledForThisLinkedItem);
-        break;
+        if (isEnabledForThisLinkedAnswer) {
+          isEnabledForThisLinkedItem = true;
+          break;
+        }
       }
+
+      // Push result of the linked item to the checkedIsEnabledItems array
+      checkedIsEnabledItems.push(isEnabledForThisLinkedItem);
+
       continue;
     }
 

package/src/utils/index.ts

@@ -23,6 +23,8 @@ export {
   removeInternalIdsFromResponse
 } from './manageForm';
 export { initialiseQuestionnaireResponse } from './initialise';
+export { createEmptyQrItem } from './qrItem';
+
 export { isSpecificItemControl } from './itemControl';
 export { isRepeatItemAndNotCheckbox } from './qItem';
 export type { ItemToRepopulate } from './repopulateItems';

package/src/utils/manageForm.ts

@@ -11,6 +11,7 @@ import { readEncounter, readPatient, readUser } from '../api/smartClient';
 import type Client from 'fhirclient/lib/Client';
 import { updateQuestionnaireResponse } from './genericRecursive';
 import { removeInternalRepeatIdsRecursive } from './removeRepeatId';
+import { ComponentType } from 'react';
 
 /**
  * Build the form with an initial Questionnaire and an optional filled QuestionnaireResponse.
@@ -22,6 +23,7 @@ import { removeInternalRepeatIdsRecursive } from './removeRepeatId';
  * @param readOnly - Applies read-only mode to all items in the form view
  * @param terminologyServerUrl - Terminology server url to fetch terminology. If not provided, the default terminology server will be used. (optional)
  * @param additionalVariables - Additional key-value pair of SDC variables `Record<name, variable extension>` for testing (optional)
+ * @param customComponents - FIXME add comment
  *
  * @author Sean Fong
  */
@@ -30,7 +32,8 @@ export async function buildForm(
   questionnaireResponse?: QuestionnaireResponse,
   readOnly?: boolean,
   terminologyServerUrl?: string,
-  additionalVariables?: Record<string, object>
+  additionalVariables?: Record<string, object>,
+  customComponents?: Record<string, ComponentType<any>>
 ): Promise<void> {
   // Reset terminology server
   if (terminologyServerUrl) {
@@ -42,7 +45,14 @@ export async function buildForm(
   // QR is set to undefined here to prevent it from being initialised twice. This is defined like that for backward compatibility purposes.
   await questionnaireStore
     .getState()
-    .buildSourceQuestionnaire(questionnaire, undefined, additionalVariables, terminologyServerUrl);
+    .buildSourceQuestionnaire(
+      questionnaire,
+      undefined,
+      additionalVariables,
+      terminologyServerUrl,
+      undefined,
+      customComponents
+    );
 
   const initialisedQuestionnaireResponse = initialiseQuestionnaireResponse(
     questionnaire,

package/src/utils/openChoice.ts

@@ -24,6 +24,7 @@ import type {
 import { OpenChoiceItemControl } from '../interfaces/choice.enum';
 import { isSpecificItemControl } from './itemControl';
 import isEqual from 'lodash.isequal';
+import differenceWith from 'lodash.differencewith';
 
 /**
  * Update open choice answer based on open label value
@@ -121,10 +122,15 @@ export function getOldOpenLabelAnswer(
   answers: QuestionnaireResponseItemAnswer[],
   options: QuestionnaireItemAnswerOption[]
 ): QuestionnaireResponseItemAnswer | null {
-  const openLabelAnswer = answers.find(
-    (answer) => !options.some((option) => isEqual(option, answer))
-  );
-  return openLabelAnswer ?? null;
+  const answersWithoutId = answers.map((answer) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { id, ...rest } = answer;
+    return rest as QuestionnaireResponseItemAnswer;
+  });
+
+  const outliers = differenceWith(answersWithoutId, options, isEqual);
+
+  return outliers?.[0] ?? null;
 }
 
 /**