@aehrc/smart-forms-renderer 0.27.4 → 0.28.0

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

@@ -224,17 +224,16 @@ export const qItemControlGroupGTable: Questionnaire = {
   ]
 };
 
-// FIXME at the moment, itemControl grid does not work without a parent container
-export const qItemControlGroupGrid: Questionnaire = {
+export const qItemControlGroupGridSingleRow: Questionnaire = {
   resourceType: 'Questionnaire',
-  id: 'ItemControlGroupGrid',
-  name: 'ItemControlGroupGrid',
-  title: 'Item Control Group Grid',
+  id: 'ItemControlGroupGridSingleRow',
+  name: 'ItemControlGroupGridSingleRow',
+  title: 'Item Control Group Grid - Single Row',
   version: '0.1.0',
   status: 'draft',
   publisher: 'AEHRC CSIRO',
   date: '2024-05-01',
-  url: 'https://smartforms.csiro.au/docs/advanced/control/item-control-group-grid',
+  url: 'https://smartforms.csiro.au/docs/advanced/control/item-control-group-grid-1',
   item: [
     {
       linkId: 'parent-container',
@@ -313,6 +312,221 @@ export const qItemControlGroupGrid: Questionnaire = {
   ]
 };
 
+export const qItemControlGroupGridMultiRow: Questionnaire = {
+  resourceType: 'Questionnaire',
+  id: 'ItemControlGroupGridMultiRow',
+  name: 'ItemControlGroupGridMultiRow',
+  title: 'Item Control Group Grid - Multi Row',
+  version: '0.1.0',
+  status: 'draft',
+  publisher: 'AEHRC CSIRO',
+  date: '2024-05-01',
+  url: 'https://smartforms.csiro.au/docs/advanced/control/item-control-group-grid-2',
+  item: [
+    {
+      linkId: 'parent-container',
+      text: '',
+      type: 'group',
+      repeats: false,
+      item: [
+        {
+          extension: [
+            {
+              url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+              valueCodeableConcept: {
+                coding: [
+                  {
+                    system: 'http://hl7.org/fhir/questionnaire-item-control',
+                    version: '1.0.0',
+                    code: 'grid'
+                  }
+                ]
+              }
+            }
+          ],
+          linkId: 'grid-group',
+          type: 'group',
+          repeats: false,
+          item: [
+            {
+              linkId: 'height-row',
+              text: 'Height',
+              type: 'group',
+              repeats: false,
+              item: [
+                {
+                  extension: [
+                    {
+                      url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-unit',
+                      valueCoding: {
+                        system: 'http://unitsofmeasure.org',
+                        code: 'cm',
+                        display: 'cm'
+                      }
+                    }
+                  ],
+                  linkId: 'height-value',
+                  text: 'Value',
+                  type: 'decimal',
+                  repeats: false
+                },
+                {
+                  linkId: 'height-date-performed',
+                  text: 'Date performed',
+                  type: 'date',
+                  repeats: false
+                }
+              ]
+            },
+            {
+              linkId: 'weight-row',
+              text: 'Weight',
+              type: 'group',
+              repeats: false,
+              item: [
+                {
+                  extension: [
+                    {
+                      url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-unit',
+                      valueCoding: {
+                        system: 'http://unitsofmeasure.org',
+                        code: 'kg',
+                        display: 'kg'
+                      }
+                    }
+                  ],
+                  linkId: 'weight-value',
+                  text: 'Value',
+                  type: 'decimal',
+                  repeats: false
+                },
+                {
+                  linkId: 'weight-date-performed',
+                  text: 'Date performed',
+                  type: 'date',
+                  repeats: false
+                }
+              ]
+            },
+            {
+              linkId: 'bmi-row',
+              text: 'BMI',
+              type: 'group',
+              repeats: false,
+              item: [
+                {
+                  extension: [
+                    {
+                      url: 'http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-calculatedExpression',
+                      valueExpression: {
+                        description: 'BMI calculation',
+                        language: 'text/fhirpath',
+                        expression: '(%weight/((%height/100).power(2))).round(1)'
+                      }
+                    },
+                    {
+                      url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-unit',
+                      valueCoding: {
+                        system: 'http://unitsofmeasure.org',
+                        code: 'kg/m2',
+                        display: 'kg/m2'
+                      }
+                    }
+                  ],
+                  linkId: 'bmi-value',
+                  text: 'Value',
+                  type: 'decimal',
+                  repeats: false,
+                  readOnly: false
+                }
+              ]
+            },
+            {
+              linkId: 'heart-rate-row',
+              text: 'Heart rate',
+              type: 'group',
+              repeats: false,
+              item: [
+                {
+                  extension: [
+                    {
+                      url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-unit',
+                      valueCoding: {
+                        system: 'http://unitsofmeasure.org',
+                        code: '/min',
+                        display: '/min'
+                      }
+                    }
+                  ],
+                  linkId: 'heart-rate-value',
+                  text: 'Value',
+                  type: 'integer',
+                  repeats: false
+                },
+                {
+                  linkId: 'heart-rate-date-performed',
+                  text: 'Date performed',
+                  type: 'date',
+                  repeats: false
+                }
+              ]
+            },
+            {
+              linkId: 'heart-rhythm-row',
+              text: 'Heart rhythm',
+              type: 'group',
+              repeats: false,
+              item: [
+                {
+                  extension: [
+                    {
+                      url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl',
+                      valueCodeableConcept: {
+                        coding: [
+                          {
+                            system: 'http://hl7.org/fhir/questionnaire-item-control',
+                            code: 'radio-button'
+                          }
+                        ]
+                      }
+                    }
+                  ],
+                  linkId: 'heart-rhythm-value',
+                  text: 'Value',
+                  type: 'choice',
+                  repeats: false,
+                  answerOption: [
+                    {
+                      valueCoding: {
+                        system: 'http://snomed.info/sct',
+                        code: '271636001',
+                        display: 'Pulse regular'
+                      }
+                    },
+                    {
+                      valueCoding: {
+                        system: 'http://snomed.info/sct',
+                        code: '61086009',
+                        display: 'Pulse irregular'
+                      }
+                    }
+                  ]
+                },
+                {
+                  linkId: 'heart-rhythm-date-performed',
+                  text: 'Date performed',
+                  type: 'date',
+                  repeats: false
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+
 export const qItemControlDisplayTabContainer: Questionnaire = {
   resourceType: 'Questionnaire',
   id: 'ItemControlGroupTabContainer',

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
+import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 
 export const qOpenChoiceAnswerOptionBasic: Questionnaire = {
   resourceType: 'Questionnaire',

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

@@ -29,6 +29,12 @@ export const qQuantityBasic: Questionnaire = {
   url: 'https://smartforms.csiro.au/docs/components/quantity/basic',
   item: [
     {
+      extension: [
+        {
+          url: 'http://hl7.org/fhir/StructureDefinition/questionnaire-unit',
+          valueCoding: { system: 'http://unitsofmeasure.org', code: 'kg', display: 'kg' }
+        }
+      ],
       linkId: 'body-weight',
       type: 'quantity',
       repeats: false,

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

@@ -16,7 +16,7 @@
  */
 
 import type { Questionnaire } from 'fhir/r4';
-import { QuestionnaireResponse } from 'fhir/r4';
+import type { QuestionnaireResponse } from 'fhir/r4';
 
 export const qStringBasic: Questionnaire = {
   resourceType: 'Questionnaire',

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

@@ -16,7 +16,7 @@
  */
 
 import type { Questionnaire } from 'fhir/r4';
-import { QuestionnaireResponse } from 'fhir/r4';
+import type { QuestionnaireResponse } from 'fhir/r4';
 
 export const qTextBasic: Questionnaire = {
   resourceType: 'Questionnaire',
@@ -48,7 +48,7 @@ export const qrTextBasicResponse: QuestionnaireResponse = {
       answer: [
         {
           valueString:
-            '- 8 hour eating window\n- cup of black coffee in the morning\n- small portions of lunch and dinner'
+            '- 8 hour eating window\n- Cup of black coffee in the morning\n- Small portions of lunch and dinner'
         }
       ]
     }

package/src/stories/itemTypes/Boolean.stories.tsx

@@ -15,23 +15,6 @@
  * limitations under the License.
  */
 
-/*
- * 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 type { Meta, StoryObj } from '@storybook/react';
 import {
   qBooleanBasic,

package/src/stories/itemTypes/Choice.stories.tsx

@@ -19,7 +19,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import BuildFormWrapper from '../BuildFormWrapper';
 import {
   qChoiceAnswerOptionBasic,
+  qChoiceAnswerOptionCalculation,
   qChoiceAnswerValueSetBasic,
+  qChoiceAnswerValueSetCalculation,
   qrChoiceAnswerOptionBasicResponse,
   qrChoiceAnswerValueSetBasicResponse
 } from '../assets/questionnaires';
@@ -42,6 +44,7 @@ export const ChoiceAnswerOptionBasic: Story = {
     questionnaire: qChoiceAnswerOptionBasic
   }
 };
+
 export const ChoiceAnswerOptionBasicResponse: Story = {
   args: {
     questionnaire: qChoiceAnswerOptionBasic,
@@ -61,3 +64,15 @@ export const ChoiceAnswerValueSetBasicResponse: Story = {
     questionnaireResponse: qrChoiceAnswerValueSetBasicResponse
   }
 };
+
+export const ChoiceAnswerOptionCalculation: Story = {
+  args: {
+    questionnaire: qChoiceAnswerOptionCalculation
+  }
+};
+
+export const ChoiceAnswerValueSetCalculation: Story = {
+  args: {
+    questionnaire: qChoiceAnswerValueSetCalculation
+  }
+};

package/src/stories/itemTypes/Url.stories.tsx

@@ -17,7 +17,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import BuildFormWrapper from '../BuildFormWrapper';
-import { qStringBasic } from '../assets/questionnaires';
+import { qUrlBasic } from '../assets/questionnaires';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
@@ -34,6 +34,6 @@ type Story = StoryObj<typeof meta>;
 
 export const UrlBasic: Story = {
   args: {
-    questionnaire: qStringBasic
+    questionnaire: qUrlBasic
   }
 };

package/src/stories/sdc/AdvancedAdditionalDisplayContent.stories.tsx

@@ -17,7 +17,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import BuildFormWrapper from '../BuildFormWrapper';
-import { qEntryFormat, qShortText } from '../assets/questionnaires';
+import { qEntryFormat, qQuestionnaireUnit, qShortText } from '../assets/questionnaires';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
@@ -43,3 +43,9 @@ export const ShortText: Story = {
     questionnaire: qShortText
   }
 };
+
+export const QuestionnaireUnit: Story = {
+  args: {
+    questionnaire: qQuestionnaireUnit
+  }
+};

package/src/stories/sdc/AdvancedTextAppearance.stories.tsx

@@ -22,6 +22,7 @@ import {
   qHidden,
   qOpenLabel,
   qRenderingXhtmlBooleanCheckboxItem,
+  qRenderingXhtmlDisplayBase64ImageItem,
   qRenderingXhtmlDisplayListItem
 } from '../assets/questionnaires';
 
@@ -50,6 +51,12 @@ export const RenderingXHTMLDisplayList: Story = {
   }
 };
 
+export const RenderingXHTMLDisplayBase64Image: Story = {
+  args: {
+    questionnaire: qRenderingXhtmlDisplayBase64ImageItem
+  }
+};
+
 export const DisplayCategoryInstructions: Story = {
   args: {
     questionnaire: qDisplayCategoryInstructions

package/src/stories/sdc/BehaviorChoiceRestriction.stories.tsx

@@ -31,7 +31,7 @@ const meta = {
   title: 'Component/SDC/9.1.2 Form Behavior Choice Restriction',
   component: BuildFormWrapper,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-  tags: ['autodocs']
+  tags: []
 } satisfies Meta<typeof BuildFormWrapper>;
 
 export default meta;

package/src/stories/sdc/ItemControlDisplay.stories.tsx

@@ -17,7 +17,13 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import BuildFormWrapper from '../BuildFormWrapper';
-import { qItemControlDisplayLowerAndUpper } from '../assets/questionnaires'; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+import {
+  qItemControlDisplayContextDisplay,
+  qItemControlDisplayFlyover,
+  qItemControlDisplayLowerAndUpper,
+  qItemControlDisplayPrompt,
+  qItemControlDisplayUnit
+} from '../assets/questionnaires'; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
@@ -32,8 +38,32 @@ type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 
+export const Prompt: Story = {
+  args: {
+    questionnaire: qItemControlDisplayPrompt
+  }
+};
+
+export const Unit: Story = {
+  args: {
+    questionnaire: qItemControlDisplayUnit
+  }
+};
+
 export const LowerAndUpper: Story = {
   args: {
     questionnaire: qItemControlDisplayLowerAndUpper
   }
 };
+
+export const Flyover: Story = {
+  args: {
+    questionnaire: qItemControlDisplayFlyover
+  }
+};
+
+export const CustomContextDisplay: Story = {
+  args: {
+    questionnaire: qItemControlDisplayContextDisplay
+  }
+};

package/src/stories/sdc/ItemControlGroup.stories.tsx

@@ -19,7 +19,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 import BuildFormWrapper from '../BuildFormWrapper';
 import {
   qItemControlDisplayTabContainer,
-  qItemControlGroupGrid,
+  qItemControlGroupGridMultiRow,
+  qItemControlGroupGridSingleRow,
   qItemControlGroupGTable
 } from '../assets/questionnaires';
 
@@ -42,9 +43,15 @@ export const Gtable: Story = {
   }
 };
 
-export const Grid: Story = {
+export const GridSingleRow: Story = {
   args: {
-    questionnaire: qItemControlGroupGrid
+    questionnaire: qItemControlGroupGridSingleRow
+  }
+};
+
+export const GridMultiRow: Story = {
+  args: {
+    questionnaire: qItemControlGroupGridMultiRow
   }
 };
 

package/src/tests/enableWhen.test.ts

@@ -0,0 +1,112 @@
+/*
+ * 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.
+ */
+
+// @ts-ignore
+import enableWhenItemsSample from './test-data/enable-when-items-sample.json';
+// @ts-ignore
+import linkedQuestionsMapSample from './test-data/linked-questions-map.json';
+// @ts-ignore
+import questionnaireResponseSample from './test-data/questionnaire-response-sample.json';
+// @ts-ignore
+import initialAnswersSample from './test-data/initial-answers-sample.json';
+import type { QuestionnaireResponse, QuestionnaireResponseItemAnswer } from 'fhir/r4';
+import { describe, expect, test } from '@jest/globals';
+import type { EnableWhenItems } from '../interfaces';
+import { createEnableWhenLinkedQuestions, readInitialAnswers, setInitialAnswers } from '../utils';
+
+describe('verify correctness of linked questions map created from enable when items', () => {
+  const enableWhenItems = enableWhenItemsSample as unknown as EnableWhenItems;
+
+  const linkedQuestionsMap = createEnableWhenLinkedQuestions(enableWhenItems);
+  const linkedQuestionsOfAge = linkedQuestionsMap['e2a16e4d-2765-4b61-b286-82cfc6356b30'];
+
+  test('linked questions of Age question should return 147 linkIds', () => {
+    expect(linkedQuestionsOfAge.length).toEqual(147);
+  });
+
+  test('specifying age as key in linked questions map should return 2e82032a-dc28-45f2-916e-862303d39fe5 as the first value', () => {
+    expect(linkedQuestionsOfAge[0]).toEqual('2e82032a-dc28-45f2-916e-862303d39fe5');
+  });
+
+  test('specifying age as key in linked questions map should return 16971bd2-5494-483d-9713-eda182c47f02 as the last value', () => {
+    expect(linkedQuestionsOfAge[linkedQuestionsOfAge.length - 1]).toEqual(
+      '16971bd2-5494-483d-9713-eda182c47f02'
+    );
+  });
+
+  test('specifying c72933c7-349f-4fef-94ff-c424c69da6f3 as key in linked questions map should return b7d116f9-0425-4cf1-8cde-fbf4dfaee550 as the only value', () => {
+    const joinedLinkIds = linkedQuestionsMap['c72933c7-349f-4fef-94ff-c424c69da6f3'].join();
+    expect(joinedLinkIds).toEqual('b7d116f9-0425-4cf1-8cde-fbf4dfaee550');
+  });
+});
+
+describe('verify correctness of initial answers created from linked questions map', () => {
+  const linkedQuestionsMap = linkedQuestionsMapSample as Record<string, string[]>;
+  const questionnaireResponse = questionnaireResponseSample as QuestionnaireResponse;
+
+  const initialAnswers = readInitialAnswers(questionnaireResponse, linkedQuestionsMap);
+  const ageKey = 'e2a16e4d-2765-4b61-b286-82cfc6356b30';
+
+  test('specifying age as key in initial answers should return valueInteger of 86', () => {
+    const initialAnswer = initialAnswers[ageKey];
+    expect(initialAnswer[0].valueInteger).toBe(86);
+  });
+
+  test('specifying b639a3a8-f476-4cc8-b5c7-f5d2abb23511 as key in initial answers should return valueCoding with code 8517006', () => {
+    const initialAnswer = initialAnswers['b639a3a8-f476-4cc8-b5c7-f5d2abb23511'];
+    expect(initialAnswer[0].valueCoding?.code).toEqual('8517006');
+  });
+
+  test('specifying b639a3a8-f476-4cc8-b5c7-f5d2abb23511 as key in initial answers should return valueCoding with display Former smoker', () => {
+    const initialAnswer = initialAnswers['b639a3a8-f476-4cc8-b5c7-f5d2abb23511'];
+    expect(initialAnswer[0].valueCoding?.display).toEqual('Former smoker');
+  });
+});
+
+describe('update enable when items by setting initial answers', () => {
+  const enableWhenItems = enableWhenItemsSample as unknown as EnableWhenItems;
+  const linkedQuestionsMap = linkedQuestionsMapSample as Record<string, string[]>;
+  const initialAnswers = initialAnswersSample as Record<string, QuestionnaireResponseItemAnswer[]>;
+
+  test('passing an empty initial answers object should cause updated answers to be equal to enable when items', () => {
+    const updatedAnswers = setInitialAnswers({}, enableWhenItems, linkedQuestionsMap);
+    expect(updatedAnswers).toEqual(enableWhenItems);
+  });
+
+  test('passing an non-empty initial answers object should cause updated answers to be from enable when items', () => {
+    const updatedAnswers = setInitialAnswers(initialAnswers, enableWhenItems, linkedQuestionsMap);
+    expect(updatedAnswers).not.toEqual(enableWhenItems);
+  });
+
+  test('passing an initial answers object with age - valueInteger of 87 should result in a corresponding linked answer in object with linkId b7a9e23c-b875-4536-b72d-81d361c18e2c', () => {
+    const initialAnswers: Record<string, QuestionnaireResponseItemAnswer[]> = {
+      'e2a16e4d-2765-4b61-b286-82cfc6356b30': [
+        {
+          valueInteger: 87
+        }
+      ]
+    };
+
+    const updatedAnswers = setInitialAnswers(initialAnswers, enableWhenItems, linkedQuestionsMap);
+    const objectWithLinkedAge = updatedAnswers.singleItems['c587e3b6-b91a-40dc-9a16-179342d001e9'];
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const answer = objectWithLinkedAge.linked![0].answer!;
+
+    expect(answer[0].valueInteger).toBe(87);
+  });
+});