Merge pull request #1011 from aehrc/fix/various-fixes

Fix/various fixes
aehrc · Sep 18, 2024 · 947da12 · 947da12
2 parents 89bff2a + 0f49039
commit 947da12
Show file tree

Hide file tree

Showing 36 changed files with 155 additions and 89 deletions.
diff --git a/packages/smart-forms-renderer/CHANGELOG.md → CHANGELOG.md b/packages/smart-forms-renderer/CHANGELOG.md → CHANGELOG.md
@@ -5,6 +5,16 @@ This log documents significant changes for the [@aehrc/smart-forms-renderer](htt
 
 Changelog only includes changes from version 0.36.0 onwards.
 
+## [0.40.1] - 2024-09-18
+### Fixed
+- Fix date validation error message for two matches.
+- Fix generation of internal IDs for repeat items and groups to be consistent and sync-able with externally-generated QuestionnaireResponses.
+- Add simple, minimal fix to dynamically adjust field positions based on viewport
+
+## [0.40.0] - 2024-09-06
+### Added
+- Added support for Observation-based extraction as a library function and as a feature in the Playground.
+
 ## [0.39.0] - 2024-09-06
 ### Changed
 - Refactored `repeat` items so that it tracks item instances using the QuestionnaireResponse, instead of using React's `useState`.

diff --git a/apps/demo-renderer-app/package.json b/apps/demo-renderer-app/package.json
@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@aehrc/sdc-populate": "^2.3.1",
-    "@aehrc/smart-forms-renderer": "^0.39.0",
+    "@aehrc/smart-forms-renderer": "^0.40.0",
     "@tanstack/react-query": "^4.36.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/apps/smart-forms-app/package.json b/apps/smart-forms-app/package.json
@@ -28,7 +28,7 @@
   "dependencies": {
     "@aehrc/sdc-assemble": "^1.3.1",
     "@aehrc/sdc-populate": "^2.3.1",
-    "@aehrc/smart-forms-renderer": "^0.40.0",
+    "@aehrc/smart-forms-renderer": "^0.40.1",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@fontsource/material-icons": "^5.0.18",

diff --git a/documentation/docs/api/smart-forms-renderer/functions/extractObservationBased.md b/documentation/docs/api/smart-forms-renderer/functions/extractObservationBased.md
@@ -0,0 +1,20 @@
+# Function: extractObservationBased()
+
+> **extractObservationBased**(`questionnaire`, `questionnaireResponse`): `Observation`[]
+
+Extract an array of Observations from a QuestionnaireResponse and its source Questionnaire.
+
+## Parameters
+
+| Parameter | Type |
+| :------ | :------ |
+| `questionnaire` | `Questionnaire` |
+| `questionnaireResponse` | `QuestionnaireResponse` |
+
+## Returns
+
+`Observation`[]
+
+## See
+
+https://build.fhir.org/ig/HL7/sdc/extraction.html#observation-based-extraction
diff --git a/documentation/docs/api/smart-forms-renderer/index.md b/documentation/docs/api/smart-forms-renderer/index.md
@@ -50,6 +50,7 @@
 | [SmartFormsRenderer](functions/SmartFormsRenderer.md) | A self-initialising wrapper around the BaseRenderer rendering engine. |
 | [buildForm](functions/buildForm.md) | Build the form with an initial Questionnaire and an optional filled QuestionnaireResponse. |
 | [destroyForm](functions/destroyForm.md) | Destroy the form to clean up the questionnaire and questionnaireResponse stores. |
+| [extractObservationBased](functions/extractObservationBased.md) | Extract an array of Observations from a QuestionnaireResponse and its source Questionnaire. |
 | [generateItemsToRepopulate](functions/generateItemsToRepopulate.md) | Compare latest data from the server with the current QuestionnaireResponse and decide items to re-populate |
 | [getResponse](functions/getResponse.md) | Get the filled QuestionnaireResponse at its current state. |
 | [initialiseQuestionnaireResponse](functions/initialiseQuestionnaireResponse.md) | Initialise a questionnaireResponse from a given questionnaire |

diff --git a/documentation/docs/api/smart-forms-renderer/typedoc-sidebar.cjs b/documentation/docs/api/smart-forms-renderer/typedoc-sidebar.cjs
@@ -178,6 +178,11 @@ const typedocSidebar = { items: [
         "id": "api/smart-forms-renderer/functions/destroyForm",
         "label": "destroyForm"
       },
+      {
+        "type": "doc",
+        "id": "api/smart-forms-renderer/functions/extractObservationBased",
+        "label": "extractObservationBased"
+      },
       {
         "type": "doc",
         "id": "api/smart-forms-renderer/functions/generateItemsToRepopulate",

diff --git a/documentation/docs/components/boolean.mdx b/documentation/docs/components/boolean.mdx
@@ -38,7 +38,7 @@ import IframeContainer from '../../src/react/IframeContainer';
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-boolean--boolean-calculation"
     width="100%"
-    height="240"
+    height="270"
   />
 </IframeContainer>
 

diff --git a/documentation/docs/components/choice.mdx b/documentation/docs/components/choice.mdx
@@ -18,7 +18,7 @@ Questionnaire-only
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-choice--choice-answer-option-basic"
     width="100%"
-    height="200"
+    height="270"
   />
 </IframeContainer>
 
@@ -28,7 +28,7 @@ With Response
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-choice--choice-answer-option-basic-response"
     width="100%"
-    height="200"
+    height="270"
   />
 </IframeContainer>
 

diff --git a/documentation/docs/components/date.mdx b/documentation/docs/components/date.mdx
@@ -18,7 +18,7 @@ It uses the FHIR [date](https://hl7.org/fhir/r4/datatypes.html#date) data type,
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-date--date-basic"
     width="100%"
-    height="110"
+    height="420"
   />
 </IframeContainer>
 
@@ -28,7 +28,7 @@ It uses the FHIR [date](https://hl7.org/fhir/r4/datatypes.html#date) data type,
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-date--date-basic-response"
     width="100%"
-    height="110"
+    height="420"
   />
 </IframeContainer>
 

diff --git a/documentation/docs/components/dateTime.mdx b/documentation/docs/components/dateTime.mdx
@@ -18,7 +18,7 @@ It uses the FHIR [dateTime](https://hl7.org/fhir/r4/datatypes.html#dateTime) dat
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-datetime--date-time-basic"
     width="100%"
-    height="220"
+    height="420"
   />
 </IframeContainer>
 
@@ -28,7 +28,7 @@ It uses the FHIR [dateTime](https://hl7.org/fhir/r4/datatypes.html#dateTime) dat
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-datetime--date-time-basic-response"
     width="100%"
-    height="220"
+    height="420"
   />
 </IframeContainer>
 

diff --git a/documentation/docs/components/display.mdx b/documentation/docs/components/display.mdx
@@ -26,7 +26,7 @@ import IframeContainer from '../../src/react/IframeContainer';
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-display--display-calculation"
     width="100%"
-    height="240"
+    height="270"
   />
 </IframeContainer>
 
@@ -36,7 +36,7 @@ import IframeContainer from '../../src/react/IframeContainer';
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-display--display-calculation-styled"
     width="100%"
-    height="240"
+    height="270"
   />
 </IframeContainer>
 

diff --git a/documentation/docs/components/string.mdx b/documentation/docs/components/string.mdx
@@ -38,7 +38,7 @@ import IframeContainer from '../../src/react/IframeContainer';
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-string--string-calculation"
     width="100%"
-    height="240"
+    height="270"
   />
 </IframeContainer>
 

diff --git a/documentation/docs/components/text.mdx b/documentation/docs/components/text.mdx
@@ -16,7 +16,7 @@ import IframeContainer from '../../src/react/IframeContainer';
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-text--text-basic"
     width="100%"
-    height="160"
+    height="220"
   />
 </IframeContainer>
 
@@ -26,7 +26,7 @@ import IframeContainer from '../../src/react/IframeContainer';
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-text--text-basic-response"
     width="100%"
-    height="160"
+    height="220"
   />
 </IframeContainer>
 

diff --git a/documentation/docs/components/time.mdx b/documentation/docs/components/time.mdx
@@ -26,7 +26,7 @@ This component is not thoroughly tested yet. Please use it with caution.
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-time--time-basic"
     width="100%"
-    height="100"
+    height="360"
   />
 </IframeContainer>
 

diff --git a/documentation/docs/dev/renderer-overview.mdx b/documentation/docs/dev/renderer-overview.mdx
@@ -314,7 +314,7 @@ The button will look different in the output, but it still functions the same wa
       <iframe
         src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-testing-build-form-button-tester--build-form-button-tester"
         width="100%"
-        height="130"
+        height="1100"
       />
     </IframeContainer>
   </TabItem>

diff --git a/documentation/docs/sdc/advanced/display.mdx b/documentation/docs/sdc/advanced/display.mdx
@@ -141,7 +141,7 @@ As this a custom (and has fairly complex usage requirements) extension, it might
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance-item-control-display--custom-context-display"
     width="100%"
-    height="250"
+    height="270"
   />
 </IframeContainer>
 
@@ -177,7 +177,7 @@ For more information, refer to http://hl7.org/fhir/uv/sdc/rendering.html#renderi
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-display--display-calculation-styled"
     width="100%"
-    height="240"
+    height="270"
   />
 </IframeContainer>
 

diff --git a/documentation/docs/sdc/advanced/fundamental.mdx b/documentation/docs/sdc/advanced/fundamental.mdx
@@ -53,14 +53,6 @@ Most question items with `item.repeats = true` are presented in this manner. An
   />
 </IframeContainer>
 
-:::danger
-
-There is currently a known issue which requires repeating items to have a parent group item, otherwise it will be rendered as a non-repeating item.
-
-For more information, refer to https://github.com/aehrc/smart-forms/issues/788.
-
-:::
-
 #### Checkbox Usage
 
 If a question is a checkbox and `item.repeats = true`, a different view is presented. Instead of having add and remove buttons, multiple selections can be made in the checkbox.

diff --git a/documentation/docs/sdc/advanced/group.mdx b/documentation/docs/sdc/advanced/group.mdx
@@ -30,11 +30,21 @@ A group table provides the following controls:
 
 #### Basic Usage
 
-<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/index.html?path=/story/component-sdc-8-1-2-advanced-control-appearance-item-control-group--gtable">
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/index.html?path=/story/component-sdc-8-1-2-advanced-control-appearance-item-control-group--g-table-single">
   <iframe
-    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance-item-control-group--gtable"
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance-item-control-group--g-table-single"
     width="100%"
-    height="580"
+    height="550"
+  />
+</IframeContainer>
+
+#### Repeating Usage
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/index.html?path=/story/component-sdc-8-1-2-advanced-control-appearance-item-control-group--g-table-repeats">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance-item-control-group--g-table-repeats"
+    width="100%"
+    height="750"
   />
 </IframeContainer>
 
@@ -70,14 +80,6 @@ Refer to the **grid** section in [Questionnaire Item UI Controls](https://hl7.or
   />
 </IframeContainer>
 
-:::danger
-
-There is currently a known issue which requires group grids to have a parent group item, otherwise it will be rendered as a regular group.
-
-For more information, refer to https://github.com/aehrc/smart-forms/issues/789.
-
-:::
-
 :::note
 
 Similar to the group table, having too many columns in a group grid can make the form question difficult to read. It is recommended to have a maximum of 4-5 columns in a group table.

diff --git a/documentation/docs/sdc/advanced/question.mdx b/documentation/docs/sdc/advanced/question.mdx
@@ -54,7 +54,7 @@ Drop down is only supported on **choice** items.
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance-item-control-question--drop-down-choice-answer-option"
     width="100%"
-    height="310"
+    height="270"
   />
 </IframeContainer>
 
@@ -64,7 +64,7 @@ Drop down is only supported on **choice** items.
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-8-1-2-advanced-control-appearance-item-control-question--drop-down-choice-answer-value-set"
     width="100%"
-    height="260"
+    height="270"
   />
 </IframeContainer>
 

diff --git a/documentation/docs/sdc/calculations.mdx b/documentation/docs/sdc/calculations.mdx
@@ -82,6 +82,6 @@ At the moment, the only supported element/control is **text**.
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-display--display-calculation"
     width="100%"
-    height="240"
+    height="270"
   />
 </IframeContainer>
diff --git a/documentation/docs/sdc/population.mdx b/documentation/docs/sdc/population.mdx
@@ -281,7 +281,7 @@ This example is available in Storybook under **Repeat Group Usage**.
   <iframe
     src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-sdc-12-form-population--item-population-context-home-address"
     width="100%"
-    height="550"
+    height="800"
   />
 </IframeContainer>
 

diff --git a/documentation/package.json b/documentation/package.json
@@ -15,7 +15,7 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@aehrc/smart-forms-renderer": "^0.40.0",
+    "@aehrc/smart-forms-renderer": "^0.40.1",
     "@docusaurus/core": "^3.4.0",
     "@docusaurus/preset-classic": "^3.4.0",
     "@docusaurus/theme-live-codeblock": "^3.4.0",

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/smart-forms-renderer/package.json b/packages/smart-forms-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.40.0",
+  "version": "0.40.1",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {

diff --git a/packages/smart-forms-renderer/src/components/FormComponents/ItemParts/ItemFieldGrid.tsx b/packages/smart-forms-renderer/src/components/FormComponents/ItemParts/ItemFieldGrid.tsx
@@ -22,6 +22,7 @@ import type { QuestionnaireItem } from 'fhir/r4';
 import DisplayInstructions from '../DisplayItem/DisplayInstructions';
 import LabelWrapper from './ItemLabelWrapper';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import Box from '@mui/material/Box';
 
 interface ItemFieldGridProps {
   children: ReactNode;
@@ -36,10 +37,15 @@ function ItemFieldGrid(props: ItemFieldGridProps) {
 
   return (
     <Grid container columnSpacing={4}>
-      <Grid item xs={4}>
+      <Grid item md={4} xs={12}>
         <LabelWrapper qItem={qItem} readOnly={readOnly} />
       </Grid>
-      <Grid item xs={8}>
+      <Box
+        sx={{
+          my: { xs: 1.5, md: 0 } // Adds padding for `xs` breakpoint and removes it for `md` and up
+        }}
+      />
+      <Grid item md={8} xs={12}>
         {children}
         <DisplayInstructions displayInstructions={displayInstructions} readOnly={readOnly} />
       </Grid>