@aehrc/smart-forms-renderer 0.7.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {
@@ -23,6 +23,7 @@
   },
   "homepage": "https://github.com/aehrc/smart-forms#readme",
   "dependencies": {
+    "deep-diff": "^1.0.2",
     "@iconify/react": "^4.1.1",
     "dayjs": "^1.11.9",
     "fhirclient": "^2.5.2",
@@ -48,27 +49,28 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
+    "@babel/core": "^7.22.17",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/addon-interactions": "^7.4.0",
     "@storybook/addon-links": "^7.4.0",
     "@storybook/addon-onboarding": "^1.0.8",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/blocks": "^7.4.0",
-    "@storybook/react": "^7.4.0",
+    "@storybook/react": "^7.4.3",
     "@storybook/react-vite": "^7.4.0",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/testing-library": "^0.2.1",
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@types/jest": "^29.5.4",
+    "@types/deep-diff": "^1.0.2",
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
     "jest": "^29.6.4",
     "jest-environment-jsdom": "^29.6.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.4.0",
+    "storybook": "^7.4.2",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2"

package/src/components/FormComponents/ChoiceItems/ChoiceAutocompleteItem.tsx

@@ -66,7 +66,6 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
   const { displayUnit, displayPrompt, displayInstructions, readOnly, entryFormat } =
     useRenderingExtensions(qItem);
 
-  // Query ontoserver for options
   const maxList = 10;
 
   const [input, setInput] = useState('');
@@ -106,6 +105,7 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
         options={options}
         getOptionLabel={(option) => `${option.display}`}
         isOptionEqualToValue={(option, value) => option.id === value.id}
+        disabled={readOnly}
         loading={loading}
         loadingText={'Fetching results...'}
         clearOnEscape
@@ -118,7 +118,6 @@ function ChoiceAutocompleteItem(props: ChoiceAutocompleteItemProps) {
             {...params}
             onChange={(e: ChangeEvent<HTMLInputElement>) => setInput(e.target.value)}
             isTabled={isTabled}
-            disabled={readOnly}
             label={displayPrompt}
             size="small"
             InputProps={{

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerOptionFields.tsx

@@ -0,0 +1,85 @@
+/*
+ * Copyright 2023 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 React from 'react';
+import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem, QuestionnaireResponseItemAnswer } from 'fhir/r4';
+import QItemChoiceCheckboxSingle from '../ItemParts/CheckboxSingle';
+import { StyledFormGroup } from '../Item.styles';
+
+interface ChoiceCheckboxAnswerOptionFieldsProps {
+  qItem: QuestionnaireItem;
+  answers: QuestionnaireResponseItemAnswer[];
+  orientation: ChoiceItemOrientation;
+  readOnly: boolean;
+  onCheckedChange: (newValue: string) => void;
+}
+
+function ChoiceCheckboxAnswerOptionFields(props: ChoiceCheckboxAnswerOptionFieldsProps) {
+  const { qItem, answers, orientation, readOnly, onCheckedChange } = props;
+
+  return (
+    <StyledFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>
+      {qItem.answerOption?.map((option) => {
+        if (option['valueCoding']) {
+          return (
+            <QItemChoiceCheckboxSingle
+              key={option.valueCoding.code ?? ''}
+              value={option.valueCoding.code ?? ''}
+              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
+              readOnly={readOnly}
+              isChecked={answers.some(
+                (answer) => JSON.stringify(answer) === JSON.stringify(option)
+              )}
+              onCheckedChange={onCheckedChange}
+            />
+          );
+        }
+
+        if (option['valueString']) {
+          return (
+            <QItemChoiceCheckboxSingle
+              key={option.valueString}
+              value={option.valueString}
+              label={option.valueString}
+              readOnly={readOnly}
+              isChecked={answers.some((answer) => answer.valueString === option.valueString)}
+              onCheckedChange={onCheckedChange}
+            />
+          );
+        }
+
+        if (option['valueInteger']) {
+          return (
+            <QItemChoiceCheckboxSingle
+              key={option.valueInteger}
+              value={option.valueInteger.toString()}
+              label={option.valueInteger.toString()}
+              readOnly={readOnly}
+              isChecked={answers.some((answer) => answer.valueInteger === option.valueInteger)}
+              onCheckedChange={onCheckedChange}
+            />
+          );
+        }
+
+        return null;
+      })}
+    </StyledFormGroup>
+  );
+}
+
+export default ChoiceCheckboxAnswerOptionFields;

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerOptionItem.tsx

@@ -17,31 +17,32 @@
 
 import React from 'react';
 import Grid from '@mui/material/Grid';
-import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import QItemChoiceCheckboxSingle from '../ItemParts/CheckboxSingle';
 import { createEmptyQrItem } from '../../../utils/qrItem';
-import { QFormGroup } from '../Item.styles';
 import { updateQrCheckboxAnswers } from '../../../utils/choice';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
 import type {
   PropsWithIsRepeatedAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithTextShownAttribute
 } from '../../../interfaces/renderProps.interface';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerOptionFields';
 
 interface ChoiceCheckboxAnswerOptionItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
-    PropsWithIsRepeatedAttribute {
+    PropsWithIsRepeatedAttribute,
+    PropsWithTextShownAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
   orientation: ChoiceItemOrientation;
 }
 
 function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemProps) {
-  const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
+  const { qItem, qrItem, isRepeated, onQrItemChange, orientation, textShown = true } = props;
 
   // Init input value
   const qrChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
@@ -68,63 +69,39 @@ function ChoiceCheckboxAnswerOptionItem(props: ChoiceCheckboxAnswerOptionItemPro
     }
   }
 
-  const choiceCheckbox = (
-    <QFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>
-      {qItem.answerOption?.map((option) => {
-        if (option['valueCoding']) {
-          return (
-            <QItemChoiceCheckboxSingle
-              key={option.valueCoding.code ?? ''}
-              value={option.valueCoding.code ?? ''}
-              label={option.valueCoding.display ?? `${option.valueCoding.code}`}
+  if (textShown) {
+    return (
+      <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-option-box">
+        <Grid container columnSpacing={6}>
+          <Grid item xs={5}>
+            <LabelWrapper qItem={qItem} />
+          </Grid>
+          <Grid item xs={7}>
+            <ChoiceCheckboxAnswerValueSetFields
+              qItem={qItem}
+              answers={answers}
+              orientation={orientation}
               readOnly={readOnly}
-              isChecked={answers.some(
-                (answer) => JSON.stringify(answer) === JSON.stringify(option)
-              )}
               onCheckedChange={handleCheckedChange}
             />
-          );
-        } else if (option['valueString']) {
-          return (
-            <QItemChoiceCheckboxSingle
-              key={option.valueString}
-              value={option.valueString}
-              label={option.valueString}
-              readOnly={readOnly}
-              isChecked={answers.some((answer) => answer.valueString === option.valueString)}
-              onCheckedChange={handleCheckedChange}
-            />
-          );
-        } else if (option['valueInteger']) {
-          return (
-            <QItemChoiceCheckboxSingle
-              key={option.valueInteger}
-              value={option.valueInteger.toString()}
-              label={option.valueInteger.toString()}
-              readOnly={readOnly}
-              isChecked={answers.some((answer) => answer.valueInteger === option.valueInteger)}
-              onCheckedChange={handleCheckedChange}
-            />
-          );
-        } else {
-          return null;
-        }
-      })}
-    </QFormGroup>
-  );
+            <DisplayInstructions displayInstructions={displayInstructions} />
+          </Grid>
+        </Grid>
+      </FullWidthFormComponentBox>
+    );
+  }
 
   return (
-    <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-option-box">
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} />
-        </Grid>
-        <Grid item xs={7}>
-          {choiceCheckbox}
-          <DisplayInstructions displayInstructions={displayInstructions} />
-        </Grid>
-      </Grid>
-    </FullWidthFormComponentBox>
+    <>
+      <ChoiceCheckboxAnswerValueSetFields
+        qItem={qItem}
+        answers={answers}
+        orientation={orientation}
+        readOnly={readOnly}
+        onCheckedChange={handleCheckedChange}
+      />
+      <DisplayInstructions displayInstructions={displayInstructions} />
+    </>
   );
 }
 

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetFields.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright 2023 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 React from 'react';
+import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import type { Coding, QuestionnaireResponseItemAnswer } from 'fhir/r4';
+import CheckboxSingle from '../ItemParts/CheckboxSingle';
+import { StyledFormGroup } from '../Item.styles';
+import { StyledAlert } from '../../Alert.styles';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import Typography from '@mui/material/Typography';
+
+interface ChoiceCheckboxAnswerValueSetFieldsProps {
+  codings: Coding[];
+  answers: QuestionnaireResponseItemAnswer[];
+  orientation: ChoiceItemOrientation;
+  readOnly: boolean;
+  serverError: Error | null;
+  onCheckedChange: (newValue: string) => void;
+}
+
+function ChoiceCheckboxAnswerValueSetFields(props: ChoiceCheckboxAnswerValueSetFieldsProps) {
+  const { codings, answers, orientation, readOnly, serverError, onCheckedChange } = props;
+
+  if (codings.length > 0) {
+    return (
+      <StyledFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>
+        {codings.map((coding) => (
+          <CheckboxSingle
+            key={coding.code ?? ''}
+            value={coding.code ?? ''}
+            label={coding.display ?? `${coding.code}`}
+            readOnly={readOnly}
+            isChecked={answers.some(
+              (answer) => JSON.stringify(answer.valueCoding) === JSON.stringify(coding)
+            )}
+            onCheckedChange={onCheckedChange}
+          />
+        ))}
+      </StyledFormGroup>
+    );
+  }
+
+  if (serverError) {
+    return (
+      <StyledAlert color="error">
+        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+        <Typography variant="subtitle2">
+          There was an error fetching options from the terminology server
+        </Typography>
+      </StyledAlert>
+    );
+  }
+
+  return (
+    <StyledAlert color="error">
+      <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
+      <Typography variant="subtitle2">
+        Unable to fetch options from the questionnaire or launch context
+      </Typography>
+    </StyledAlert>
+  );
+}
+
+export default ChoiceCheckboxAnswerValueSetFields;

package/src/components/FormComponents/ChoiceItems/ChoiceCheckboxAnswerValueSetItem.tsx

@@ -17,36 +17,34 @@
 
 import React from 'react';
 import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { createEmptyQrItem } from '../../../utils/qrItem';
 import useValueSetCodings from '../../../hooks/useValueSetCodings';
-import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import type { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
 import { mapCodingsToOptions, updateQrCheckboxAnswers } from '../../../utils/choice';
-import CheckboxSingle from '../ItemParts/CheckboxSingle';
-import { QFormGroup } from '../Item.styles';
 import { FullWidthFormComponentBox } from '../../Box.styles';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import type {
   PropsWithIsRepeatedAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithTextShownAttribute
 } from '../../../interfaces/renderProps.interface';
-import { StyledAlert } from '../../Alert.styles';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from '../ItemParts/ItemLabelWrapper';
+import ChoiceCheckboxAnswerValueSetFields from './ChoiceCheckboxAnswerValueSetFields';
 
 interface ChoiceCheckboxAnswerValueSetItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
-    PropsWithIsRepeatedAttribute {
+    PropsWithIsRepeatedAttribute,
+    PropsWithTextShownAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
   orientation: ChoiceItemOrientation;
+  showText?: boolean;
 }
 
 function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetItemProps) {
-  const { qItem, qrItem, isRepeated, onQrItemChange, orientation } = props;
+  const { qItem, qrItem, orientation, isRepeated, textShown = true, onQrItemChange } = props;
 
   // Init input value
   const qrChoiceCheckbox = qrItem ?? createEmptyQrItem(qItem);
@@ -75,52 +73,41 @@ function ChoiceCheckboxAnswerValueSetItem(props: ChoiceCheckboxAnswerValueSetIte
     }
   }
 
-  const choiceCheckbox =
-    codings.length > 0 ? (
-      <QFormGroup row={orientation === ChoiceItemOrientation.Horizontal}>
-        {codings.map((coding) => {
-          return (
-            <CheckboxSingle
-              key={coding.code ?? ''}
-              value={coding.code ?? ''}
-              label={coding.display ?? `${coding.code}`}
+  if (textShown) {
+    return (
+      <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-value-set-box">
+        <Grid container columnSpacing={6}>
+          <Grid item xs={5}>
+            <LabelWrapper qItem={qItem} />
+          </Grid>
+          <Grid item xs={7}>
+            <ChoiceCheckboxAnswerValueSetFields
+              codings={codings}
+              answers={answers}
+              orientation={orientation}
               readOnly={readOnly}
-              isChecked={answers.some(
-                (answer) => JSON.stringify(answer.valueCoding) === JSON.stringify(coding)
-              )}
+              serverError={serverError}
               onCheckedChange={handleCheckedChange}
             />
-          );
-        })}
-      </QFormGroup>
-    ) : serverError ? (
-      <StyledAlert color="error">
-        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography variant="subtitle2">
-          There was an error fetching options from the terminology server
-        </Typography>
-      </StyledAlert>
-    ) : (
-      <StyledAlert color="error">
-        <ErrorOutlineIcon color="error" sx={{ pr: 0.75 }} />
-        <Typography variant="subtitle2">
-          Unable to fetch options from the questionnaire or launch context
-        </Typography>
-      </StyledAlert>
+            <DisplayInstructions displayInstructions={displayInstructions} />
+          </Grid>
+        </Grid>
+      </FullWidthFormComponentBox>
     );
+  }
 
   return (
-    <FullWidthFormComponentBox data-test="q-item-choice-checkbox-answer-value-set-box">
-      <Grid container columnSpacing={6}>
-        <Grid item xs={5}>
-          <LabelWrapper qItem={qItem} />
-        </Grid>
-        <Grid item xs={7}>
-          {choiceCheckbox}
-          <DisplayInstructions displayInstructions={displayInstructions} />
-        </Grid>
-      </Grid>
-    </FullWidthFormComponentBox>
+    <>
+      <ChoiceCheckboxAnswerValueSetFields
+        codings={codings}
+        answers={answers}
+        orientation={orientation}
+        readOnly={readOnly}
+        serverError={serverError}
+        onCheckedChange={handleCheckedChange}
+      />
+      <DisplayInstructions displayInstructions={displayInstructions} />
+    </>
   );
 }
 

package/src/components/FormComponents/ChoiceItems/ChoiceItemSwitcher.tsx

@@ -29,19 +29,22 @@ import ChoiceCheckboxAnswerValueSetItem from './ChoiceCheckboxAnswerValueSetItem
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithTextShownAttribute
 } from '../../../interfaces/renderProps.interface';
 
 interface ChoiceItemSwitcherProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
     PropsWithIsRepeatedAttribute,
-    PropsWithIsTabledAttribute {
+    PropsWithIsTabledAttribute,
+    PropsWithTextShownAttribute {
   qItem: QuestionnaireItem;
   qrItem: QuestionnaireResponseItem;
 }
 
 function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const { qItem, qrItem, isRepeated, isTabled, textShown, onQrItemChange } = props;
+
   const orientation = getChoiceOrientation(qItem);
   const choiceControlType = getChoiceControlType(qItem);
 
@@ -74,9 +77,10 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
           <ChoiceCheckboxAnswerOptionItem
             qItem={qItem}
             qrItem={qrItem}
-            isRepeated={qItem['repeats'] ?? false}
+            isRepeated={qItem.repeats ?? false}
             onQrItemChange={onQrItemChange}
             orientation={orientation}
+            textShown={textShown}
           />
         );
       } else {
@@ -84,9 +88,10 @@ function ChoiceItemSwitcher(props: ChoiceItemSwitcherProps) {
           <ChoiceCheckboxAnswerValueSetItem
             qItem={qItem}
             qrItem={qrItem}
-            isRepeated={qItem['repeats'] ?? false}
+            isRepeated={qItem.repeats ?? false}
             onQrItemChange={onQrItemChange}
             orientation={orientation}
+            textShown={textShown}
           />
         );
       }

package/src/components/FormComponents/ChoiceItems/ChoiceRadioAnswerOptionFields.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2023 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 React from 'react';
+import { ChoiceItemOrientation } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem } from 'fhir/r4';
+import RadioAnswerOptionButtons from '../ItemParts/RadioAnswerOptionButtons';
+import { StyledRadioGroup } from '../Item.styles';
+
+interface ChoiceRadioAnswerOptionFieldsProps {
+  qItem: QuestionnaireItem;
+  valueRadio: string | null;
+  orientation: ChoiceItemOrientation;
+  readOnly: boolean;
+  onCheckedChange: (newValue: string) => void;
+}
+
+function ChoiceRadioAnswerOptionFields(props: ChoiceRadioAnswerOptionFieldsProps) {
+  const { qItem, valueRadio, orientation, readOnly, onCheckedChange } = props;
+
+  return (
+    <StyledRadioGroup
+      row={orientation === ChoiceItemOrientation.Horizontal}
+      name={qItem.text}
+      id={qItem.id}
+      onChange={(e) => onCheckedChange(e.target.value)}
+      value={valueRadio}
+      data-test="q-item-radio-group">
+      <RadioAnswerOptionButtons qItem={qItem} readOnly={readOnly} />
+    </StyledRadioGroup>
+  );
+}
+
+export default ChoiceRadioAnswerOptionFields;