@aehrc/smart-forms-renderer 0.4.0 → 0.6.0

package/src/stories/assets/QTestGrid.json

@@ -15,7 +15,121 @@
   "subjectType": ["Patient"],
   "date": "2023-07-05",
   "publisher": "Test Publisher",
+  "contained": [
+    {
+      "resourceType": "ValueSet",
+      "id": "condition-clinical",
+      "meta": {
+        "profile": ["http://hl7.org/fhir/StructureDefinition/shareablevalueset"]
+      },
+      "extension": [
+        {
+          "url": "http://hl7.org/fhir/StructureDefinition/structuredefinition-wg",
+          "valueCode": "pc"
+        },
+        {
+          "url": "http://hl7.org/fhir/StructureDefinition/structuredefinition-standards-status",
+          "valueCode": "trial-use"
+        },
+        {
+          "url": "http://hl7.org/fhir/StructureDefinition/structuredefinition-fmm",
+          "valueInteger": 3
+        }
+      ],
+      "url": "http://hl7.org/fhir/ValueSet/condition-clinical",
+      "identifier": [
+        {
+          "system": "urn:ietf:rfc:3986",
+          "value": "urn:oid:2.16.840.1.113883.4.642.3.164"
+        }
+      ],
+      "version": "4.3.0",
+      "name": "ConditionClinicalStatusCodes",
+      "title": "Condition Clinical Status Codes",
+      "status": "draft",
+      "experimental": false,
+      "publisher": "FHIR Project team",
+      "contact": [
+        {
+          "telecom": [
+            {
+              "system": "url",
+              "value": "http://hl7.org/fhir"
+            }
+          ]
+        }
+      ],
+      "description": "Preferred value set for Condition Clinical Status.",
+      "compose": {
+        "include": [
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/condition-clinical"
+          }
+        ]
+      },
+      "expansion": {
+        "identifier": "5d4bed14-061a-42c4-853d-e6a624c4f483",
+        "timestamp": "2022-10-20T09:32:48+10:00",
+        "total": 6,
+        "offset": 0,
+        "parameter": [
+          {
+            "name": "version",
+            "valueUri": "http://terminology.hl7.org/CodeSystem/condition-clinical|4.0.1"
+          },
+          {
+            "name": "count",
+            "valueInteger": 2147483647
+          },
+          {
+            "name": "offset",
+            "valueInteger": 0
+          }
+        ],
+        "contains": [
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/condition-clinical",
+            "code": "active",
+            "display": "Active"
+          },
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/condition-clinical",
+            "code": "inactive",
+            "display": "Inactive"
+          },
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/condition-clinical",
+            "code": "recurrence",
+            "display": "Recurrence"
+          },
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/condition-clinical",
+            "code": "relapse",
+            "display": "Relapse"
+          },
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/condition-clinical",
+            "code": "remission",
+            "display": "Remission"
+          },
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/condition-clinical",
+            "code": "resolved",
+            "display": "Resolved"
+          }
+        ]
+      }
+    }
+  ],
   "extension": [
+    {
+      "url": "http://hl7.org/fhir/StructureDefinition/variable",
+      "valueExpression": {
+        "name": "Condition",
+        "language": "application/x-fhir-query",
+        "expression": "Condition?patient={{%patient.id}}"
+      }
+    },
     {
       "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-launchContext",
       "extension": [
@@ -35,6 +149,26 @@
           "valueString": "The patient that is to be used to pre-populate the form"
         }
       ]
+    },
+    {
+      "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-launchContext",
+      "extension": [
+        {
+          "url": "name",
+          "valueCoding": {
+            "system": "http://hl7.org/fhir/uv/sdc/CodeSystem/launchContext",
+            "code": "user"
+          }
+        },
+        {
+          "url": "type",
+          "valueCode": "Practitioner"
+        },
+        {
+          "url": "description",
+          "valueString": "The practitioner user that is to be used to pre-populate the form"
+        }
+      ]
     }
   ],
   "item": [
@@ -159,6 +293,117 @@
           "text": "This item should only be displayed if: (1) addVar1 variable is supplied and (2) Colour in Left Limb has an answer",
           "type": "display",
           "repeats": false
+        },
+        {
+          "extension": [
+            {
+              "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
+              "valueExpression": {
+                "language": "text/fhirpath",
+                "expression": "(%patient.name.where(use='official').select((family | (given | prefix).join(' ')).join(', ') | text) | %patient.name.select((family | (given | prefix).join(' ')).join(', ') | text)).first()"
+              }
+            }
+          ],
+          "linkId": "3",
+          "text": "Patient's name",
+          "type": "string",
+          "repeats": false
+        },
+        {
+          "extension": [
+            {
+              "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
+              "valueExpression": {
+                "language": "text/fhirpath",
+                "expression": "(%user.name.where(use='official').select((family | (given | prefix).join(' ')).join(', ') | text) | %patient.name.select((family | (given | prefix).join(' ')).join(', ') | text)).first()"
+              }
+            }
+          ],
+          "linkId": "4",
+          "text": "User's name",
+          "type": "string",
+          "repeats": false
+        },
+        {
+          "extension": [
+            {
+              "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
+              "valueCodeableConcept": {
+                "coding": [
+                  {
+                    "system": "http://hl7.org/fhir/questionnaire-item-control",
+                    "code": "gtable"
+                  }
+                ]
+              }
+            },
+            {
+              "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-itemPopulationContext",
+              "valueExpression": {
+                "name": "ConditionRepeat",
+                "language": "text/fhirpath",
+                "expression": "%Condition.entry.resource"
+              }
+            }
+          ],
+          "linkId": "6",
+          "text": "Medical history and current problems list",
+          "type": "group",
+          "repeats": true,
+          "item": [
+            {
+              "extension": [
+                {
+                  "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
+                  "valueCodeableConcept": {
+                    "coding": [
+                      {
+                        "system": "http://hl7.org/fhir/questionnaire-item-control",
+                        "code": "autocomplete"
+                      }
+                    ]
+                  }
+                },
+                {
+                  "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
+                  "valueExpression": {
+                    "language": "text/fhirpath",
+                    "expression": "%ConditionRepeat.code.select((coding.where(system='http://snomed.info/sct') | coding.where(system!='http://snomed.info/sct').first() | text ).first())"
+                  }
+                }
+              ],
+              "linkId": "59b1900a-4f85-4a8c-b9cd-3fe2fd76f27e",
+              "text": "Condition",
+              "type": "open-choice",
+              "answerValueSet": "https://smartforms.csiro.au/ig/ValueSet/MedicalHistory"
+            },
+            {
+              "extension": [
+                {
+                  "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
+                  "valueCodeableConcept": {
+                    "coding": [
+                      {
+                        "system": "http://hl7.org/fhir/questionnaire-item-control",
+                        "code": "drop-down"
+                      }
+                    ]
+                  }
+                },
+                {
+                  "url": "http://hl7.org/fhir/uv/sdc/StructureDefinition/sdc-questionnaire-initialExpression",
+                  "valueExpression": {
+                    "language": "text/fhirpath",
+                    "expression": "%ConditionRepeat.clinicalStatus.coding"
+                  }
+                }
+              ],
+              "linkId": "88bcfad7-386b-4d87-b34b-2e50482e4d2c",
+              "text": "Clinical Status",
+              "type": "choice",
+              "answerValueSet": "#condition-clinical"
+            }
+          ]
         }
       ]
     }

package/src/theme/Theme.tsx

@@ -0,0 +1,107 @@
+/*
+ * 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 type { ReactNode } from 'react';
+import React from 'react';
+import type { ThemeOptions } from '@mui/material/styles';
+import {
+  alpha,
+  createTheme,
+  StyledEngineProvider,
+  ThemeProvider as MUIThemeProvider
+} from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import palette from './palette';
+import typography from './typography';
+import GlobalStyles from './globalStyles';
+import componentsOverride from './overrides/Overrides';
+import { grey } from '@mui/material/colors';
+
+// ----------------------------------------------------------------------
+// Module Augmentation
+
+declare module '@mui/material/styles' {
+  // noinspection JSUnusedGlobalSymbols
+  interface Theme {
+    customShadows: {
+      z1: string;
+      z4: string;
+      z8: string;
+      z12: string;
+      z16: string;
+      z20: string;
+      z24: string;
+      card: string;
+      dialog: string;
+      dropdown: string;
+    };
+  }
+
+  // noinspection JSUnusedGlobalSymbols
+  interface ThemeOptions {
+    customShadows: {
+      z1: string;
+      z4: string;
+      z8: string;
+      z12: string;
+      z16: string;
+      z20: string;
+      z24: string;
+      card: string;
+      dialog: string;
+      dropdown: string;
+    };
+  }
+}
+// ----------------------------------------------------------------------
+
+const transparent = alpha(grey[500], 0.16);
+
+export const themeOptions: ThemeOptions = {
+  palette,
+  shape: { borderRadius: 6 },
+  typography,
+  customShadows: {
+    z1: `0 1px 2px 0 ${transparent}`,
+    z4: `0 4px 8px 0 ${transparent}`,
+    z8: `0 8px 16px 0 ${transparent}`,
+    z12: `0 12px 24px -4px ${transparent}`,
+    z16: `0 16px 32px -4px ${transparent}`,
+    z20: `0 20px 40px -4px ${transparent}`,
+    z24: `0 24px 48px 0 ${transparent}`,
+    //
+    card: `0 0 2px 0 ${alpha(grey[500], 0.2)}, 0 12px 24px -4px ${alpha(grey[500], 0.12)}`,
+    dialog: `-40px 40px 80px -8px ${alpha(grey[500], 0.24)}`,
+    dropdown: `0 0 2px 0 ${alpha(grey[500], 0.24)}, -20px 20px 40px -4px ${alpha(grey[500], 0.24)}`
+  }
+};
+
+function ThemeProvider({ children }: { children: ReactNode }) {
+  const theme = createTheme(themeOptions);
+  theme.components = componentsOverride(theme);
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <MUIThemeProvider theme={theme}>
+        <CssBaseline />
+        <GlobalStyles />
+        {children}
+      </MUIThemeProvider>
+    </StyledEngineProvider>
+  );
+}
+
+export default ThemeProvider;

package/src/theme/globalStyles.tsx

@@ -0,0 +1,68 @@
+/*
+ * 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 { GlobalStyles as MUIGlobalStyles } from '@mui/material';
+
+export default function GlobalStyles() {
+  return (
+    <MUIGlobalStyles
+      styles={{
+        '*': {
+          boxSizing: 'border-box'
+        },
+        html: {
+          margin: 0,
+          padding: 0,
+          width: '100%',
+          height: '100%',
+          WebkitOverflowScrolling: 'touch'
+        },
+        body: {
+          margin: 0,
+          padding: 0,
+          width: '100%',
+          height: '100%'
+        },
+        '#root': {
+          width: '100%',
+          height: '100%'
+        },
+        input: {
+          '&[type=number]': {
+            MozAppearance: 'textfield',
+            '&::-webkit-outer-spin-button': {
+              margin: 0,
+              WebkitAppearance: 'none'
+            },
+            '&::-webkit-inner-spin-button': {
+              margin: 0,
+              WebkitAppearance: 'none'
+            }
+          }
+        },
+        img: {
+          display: 'block',
+          maxWidth: '100%'
+        },
+        ul: {
+          margin: 0,
+          padding: 0
+        }
+      }}
+    />
+  );
+}

package/src/theme/overrides/Accordion.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 type { Theme } from '@mui/material/styles';
+
+export default function Accordion(theme: Theme) {
+  return {
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          boxShadow: theme.customShadows.z1,
+          borderRadius: Number(theme.shape.borderRadius) * 2,
+          '&:before': {
+            display: 'none'
+          }
+        }
+      }
+    }
+  };
+}

package/src/{components/index.js → theme/overrides/Autocomplete.ts}

@@ -14,5 +14,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './FormRenderer';
-//# sourceMappingURL=index.js.map
+
+import type { Theme } from '@mui/material/styles';
+
+export default function Autocomplete(theme: Theme) {
+  return {
+    MuiAutocomplete: {
+      styleOverrides: {
+        paper: {
+          boxShadow: theme.customShadows.z20
+        }
+      }
+    }
+  };
+}

package/src/theme/overrides/Backdrop.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 type { Theme } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
+
+export default function Backdrop(theme: Theme) {
+  return {
+    MuiBackdrop: {
+      styleOverrides: {
+        root: {
+          backgroundColor: alpha(theme.palette.grey[800], 0.8)
+        },
+        invisible: {
+          background: 'transparent'
+        }
+      }
+    }
+  };
+}

package/src/theme/overrides/Button.ts

@@ -0,0 +1,54 @@
+/*
+ * 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 type { Theme } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
+
+export default function Button(theme: Theme) {
+  return {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          '&:hover': {
+            boxShadow: 'none'
+          }
+        },
+        sizeLarge: {
+          height: 48
+        },
+        containedInherit: {
+          color: theme.palette.grey[800],
+          boxShadow: theme.customShadows.z8,
+          '&:hover': {
+            backgroundColor: theme.palette.grey[400]
+          }
+        },
+        outlinedInherit: {
+          border: `1px solid ${alpha(theme.palette.grey[500], 0.32)}`,
+          '&:hover': {
+            backgroundColor: theme.palette.action.hover
+          }
+        },
+        textInherit: {
+          '&:hover': {
+            backgroundColor: theme.palette.action.hover
+          }
+        }
+      }
+    }
+  };
+}

package/src/theme/overrides/Card.ts

@@ -0,0 +1,51 @@
+/*
+ * 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 type { Theme } from '@mui/material/styles';
+
+export default function Card(theme: Theme) {
+  return {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          boxShadow: theme.customShadows.card,
+          borderRadius: Number(theme.shape.borderRadius) * 2,
+          position: 'relative',
+          zIndex: 0 // Fix Safari overflow: hidden with border radius
+        }
+      }
+    },
+    MuiCardHeader: {
+      defaultProps: {
+        titleTypographyProps: { variant: 'h6' },
+        subheaderTypographyProps: { variant: 'body2' }
+      },
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(3, 3, 0)
+        }
+      }
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(3)
+        }
+      }
+    }
+  };
+}