@aehrc/smart-forms-renderer 0.3.0 → 0.5.0

package/package.json

@@ -1,29 +1,18 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.3.0",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "files": [
-    "dist"
-  ],
-  "types": "dist/index.d.ts",
+  "version": "0.5.0",
+  "main": "lib/index.js",
   "scripts": {
-    "build": "rollup -c",
-    "build:watch": "rollup -c -w",
+    "compile": "tsc",
+    "build:watch": "tsc --watch",
+    "prepare": "npm run compile",
     "test": "jest",
     "test:watch": "jest --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
-  "peerDependencies": {
-    "@emotion/react": ">=11.11.0",
-    "@emotion/styled": ">=11.10.0",
+  "dependencies": {
     "@iconify/react": ">=4.1.0",
-    "@mui/icons-material": ">=5.14.0",
-    "@mui/lab": ">=5.0.0-alpha.137",
-    "@mui/material": ">=5.14.0",
-    "@mui/x-date-pickers": ">=6.10.0",
-    "@tanstack/react-query": ">=4.29.0",
     "dayjs": ">=1.10.0",
     "fhirclient": ">=2.5.0",
     "fhirpath": ">=3.6.0",
@@ -31,17 +20,23 @@
     "lodash.clonedeep": ">=4.0.0",
     "lodash.debounce": ">=4.0.8",
     "nanoid": ">=4.0.0",
-    "react-markdown": ">=8.0.0",
+    "@types/fhir": "^0.0.37",
     "zustand": ">=4.4.0",
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "react-markdown": ">=8.0.0"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11.11.0",
+    "@emotion/styled": ">=11.10.0",
+    "@mui/icons-material": ">=5.14.0",
+    "@mui/lab": ">=5.0.0-alpha.137",
+    "@mui/material": ">=5.14.0",
+    "@mui/x-date-pickers": ">=6.10.0",
+    "@tanstack/react-query": ">=4.29.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@types/fhir": "^0.0.37",
     "@babel/core": "^7.15.0",
-    "@rollup/plugin-commonjs": "^17.1.0",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
     "@storybook/addon-essentials": "^7.4.0",
     "@storybook/addon-interactions": "^7.4.0",
     "@storybook/addon-links": "^7.4.0",
@@ -61,9 +56,6 @@
     "jest-environment-jsdom": "^29.6.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^2.56.3",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.29.0",
     "storybook": "^7.4.0",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",

package/src/api/populate.ts

@@ -0,0 +1,70 @@
+/*
+ * 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 { InputParameters, OutputParameters } from 'sdc-populate';
+import { isOutputParameters, populate } from 'sdc-populate';
+import type { RequestConfig } from '../utils/populateCallback';
+import { fetchResourceCallback } from '../utils/populateCallback';
+import type Client from 'fhirclient/lib/Client';
+import type { OperationOutcome } from 'fhir/r4';
+
+const IS_IN_APP_POPULATE = true;
+
+export const HEADERS = {
+  'Content-Type': 'application/json;charset=utf-8',
+  Accept: 'application/json;charset=utf-8'
+};
+
+export async function requestPopulate(
+  fhirClient: Client,
+  inputParameters: InputParameters
+): Promise<OutputParameters | OperationOutcome> {
+  const requestConfig: RequestConfig = {
+    clientEndpoint: fhirClient.state.serverUrl,
+    authToken: fhirClient.state.tokenResponse!.access_token!
+  };
+
+  if (IS_IN_APP_POPULATE) {
+    return await populate(inputParameters, fetchResourceCallback, requestConfig);
+  }
+
+  const outputParameters = await fhirClient.request({
+    url: 'Questionnaire/$populate',
+    method: 'POST',
+    body: JSON.stringify(inputParameters),
+    headers: {
+      ...HEADERS,
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${requestConfig.authToken}`
+    }
+  });
+
+  if (isOutputParameters(outputParameters)) {
+    return outputParameters;
+  }
+
+  return {
+    resourceType: 'OperationOutcome',
+    issue: [
+      {
+        severity: 'error',
+        code: 'invalid',
+        details: { text: 'Output parameters does not match the specification.' }
+      }
+    ]
+  };
+}

package/src/components/Alert.styles.ts

@@ -0,0 +1,45 @@
+/*
+ * 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 { alpha, styled } from '@mui/material/styles';
+import { Box, ListItemIcon } from '@mui/material';
+
+export const StyledAlert = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'color'
+})<{ color: 'info' | 'error' }>(({ theme, color }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  padding: theme.spacing(1.25),
+  borderRadius: Number(theme.shape.borderRadius) * 1.5,
+  backgroundColor: alpha(
+    color === 'error' ? theme.palette.error.light : theme.palette.info.light,
+    0.12
+  ),
+  [theme.breakpoints.up('sm')]: {
+    padding: theme.spacing(1.5)
+  },
+  [theme.breakpoints.up('md')]: {
+    padding: theme.spacing(2)
+  }
+}));
+
+export const StyledNavItemIcon = styled(ListItemIcon)({
+  color: 'inherit',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});

package/src/components/BackToTopButton/BackToTopButton.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { ReactElement } from 'react';
+import React from 'react';
+import { Box, Fade, useScrollTrigger } from '@mui/material';
+
+interface Props {
+  children: ReactElement;
+}
+
+function BackToTopButton(props: Props) {
+  const { children } = props;
+
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 100
+  });
+
+  const handleClick = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <Fade in={trigger}>
+      <Box onClick={handleClick} sx={{ position: 'fixed', bottom: 12, right: 12 }}>
+        {children}
+      </Box>
+    </Fade>
+  );
+}
+
+export default BackToTopButton;

package/src/components/Box.styles.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 { Box, styled } from '@mui/material';
+
+export const QGroupContainerBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'cardElevation' && prop !== 'isRepeated'
+})<{ cardElevation: number; isRepeated: boolean }>(({ cardElevation, isRepeated }) => ({
+  marginTop: cardElevation === 1 || isRepeated ? 0 : 18,
+  marginBottom: cardElevation === 1 || isRepeated ? 0 : 18
+}));
+
+export const FullWidthFormComponentBox = styled(Box)(() => ({
+  marginBottom: 14
+}));
+
+export const FormTitleWrapper = styled(Box)(() => ({
+  marginTop: 12
+}));

package/src/components/FormComponents/BooleanItem/BooleanField.tsx

@@ -0,0 +1,44 @@
+/*
+ * 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, { memo } from 'react';
+import { Checkbox, FormControlLabel } from '@mui/material';
+
+interface BooleanFieldProps {
+  checked: boolean;
+  readOnly: boolean;
+  onCheckedChange: (newChecked: boolean) => void;
+}
+const BooleanField = memo(function BooleanField(props: BooleanFieldProps) {
+  const { checked, readOnly, onCheckedChange } = props;
+
+  return (
+    <FormControlLabel
+      disabled={readOnly}
+      control={
+        <Checkbox
+          size="small"
+          checked={checked}
+          onChange={(event) => onCheckedChange(event.target.checked)}
+        />
+      }
+      label=""
+    />
+  );
+});
+
+export default BooleanField;

package/src/components/FormComponents/BooleanItem/BooleanItem.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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 type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import BooleanField from './BooleanField';
+import { Box } from '@mui/material';
+
+interface BooleanItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function BooleanItem(props: BooleanItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const { displayInstructions, readOnly } = useRenderingExtensions(qItem);
+
+  // Init input value
+  let checked = false;
+  if (qrItem?.answer && qrItem.answer[0].valueBoolean) {
+    checked = qrItem.answer[0].valueBoolean;
+  }
+
+  // Event handlers
+  function handleCheckedChange(newChecked: boolean) {
+    onQrItemChange({
+      ...createEmptyQrItem(qItem),
+      answer: [{ valueBoolean: newChecked }]
+    });
+  }
+
+  if (isTabled) {
+    return (
+      <Box display="flex" justifyContent="center">
+        <BooleanField checked={checked} readOnly={readOnly} onCheckedChange={handleCheckedChange} />
+      </Box>
+    );
+  }
+
+  if (isRepeated) {
+    return (
+      <BooleanField checked={checked} readOnly={readOnly} onCheckedChange={handleCheckedChange} />
+    );
+  }
+  return (
+    <FullWidthFormComponentBox data-test="q-item-boolean-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <BooleanField checked={checked} readOnly={readOnly} onCheckedChange={handleCheckedChange} />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default BooleanItem;

package/src/components/FormComponents/DateItem/DateField.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import type { Dayjs } from 'dayjs';
+import { DatePicker as MuiDatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+interface DateFieldProps extends PropsWithIsTabledAttribute {
+  value: Dayjs | null;
+  displayPrompt: string;
+  entryFormat: string;
+  readOnly: boolean;
+  onDateChange: (newValue: Dayjs | null) => unknown;
+}
+
+function DateField(props: DateFieldProps) {
+  const { value, displayPrompt, entryFormat, readOnly, isTabled, onDateChange } = props;
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <MuiDatePicker
+        format={entryFormat !== '' ? entryFormat : 'DD/MM/YYYY'}
+        value={value}
+        disabled={readOnly}
+        label={displayPrompt}
+        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+        onChange={onDateChange}
+        slotProps={{
+          textField: {
+            size: 'small',
+            fullWidth: true
+          }
+        }}
+        data-test="q-item-date-field"
+      />
+    </LocalizationProvider>
+  );
+}
+
+export default DateField;

package/src/components/FormComponents/DateItem/DateItem.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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 type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
+import { createEmptyQrItem } from '../../../utils/qrItem';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import DateField from './DateField';
+import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+
+interface DateItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function DateItem(props: DateItemProps) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+
+  // Get additional rendering extensions
+  const { displayPrompt, displayInstructions, readOnly, entryFormat } =
+    useRenderingExtensions(qItem);
+
+  // Init input value
+  let dateString: string | null = null;
+
+  if (qrItem?.answer && qrItem?.answer[0].valueDate) {
+    dateString = qrItem.answer[0].valueDate;
+  }
+  const dateDayJs = dateString ? dayjs(dateString) : null;
+
+  // Event handlers
+  function handleDateChange(newValue: Dayjs | null) {
+    const emptyQrItem = createEmptyQrItem(qItem);
+    if (newValue) {
+      onQrItemChange({ ...emptyQrItem, answer: [{ valueDate: newValue.format('YYYY-MM-DD') }] });
+    } else {
+      onQrItemChange(emptyQrItem);
+    }
+  }
+
+  if (isRepeated) {
+    return (
+      <DateField
+        value={dateDayJs}
+        displayPrompt={displayPrompt}
+        entryFormat={entryFormat}
+        readOnly={readOnly}
+        onDateChange={handleDateChange}
+        isTabled={isTabled}
+      />
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-date-box">
+      <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions}>
+        <DateField
+          value={dateDayJs}
+          displayPrompt={displayPrompt}
+          entryFormat={entryFormat}
+          readOnly={readOnly}
+          onDateChange={handleDateChange}
+          isTabled={isTabled}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default DateItem;

package/src/components/FormComponents/DateTimeItem/DateTimeField.tsx

@@ -0,0 +1,58 @@
+/*
+ * 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 type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import type { Dayjs } from 'dayjs';
+import { DateTimePicker as MuiDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { Box } from '@mui/material';
+
+interface DateTimeFieldProps extends PropsWithIsTabledAttribute {
+  value: Dayjs | null;
+  displayPrompt: string;
+  entryFormat: string;
+  readOnly: boolean;
+  onDateTimeChange: (newValue: Dayjs | null) => unknown;
+}
+
+function DateTimeField(props: DateTimeFieldProps) {
+  const { value, displayPrompt, entryFormat, readOnly, isTabled, onDateTimeChange } = props;
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Box data-test="q-item-date-time-field">
+        <MuiDateTimePicker
+          format={entryFormat !== '' ? entryFormat : 'DD/MM/YYYY hh:mm A'}
+          value={value}
+          disabled={readOnly}
+          label={displayPrompt}
+          sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+          onChange={onDateTimeChange}
+          slotProps={{
+            textField: {
+              size: 'small',
+              fullWidth: true
+            }
+          }}
+        />
+      </Box>
+    </LocalizationProvider>
+  );
+}
+
+export default DateTimeField;