@aehrc/smart-forms-renderer 0.5.0 → 0.6.1

package/src/components/FormComponents/RepeatItem/RepeatItem.styles.tsx

@@ -15,7 +15,9 @@
  * limitations under the License.
  */
 
-import { Stack, styled, Tooltip } from '@mui/material';
+import Stack from '@mui/material/Stack';
+import { styled } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
 
 export const RepeatDeleteTooltip = styled(Tooltip)(() => ({
   marginLeft: 8

package/src/components/FormComponents/RepeatItem/RepeatItem.tsx

@@ -25,7 +25,7 @@ import { FullWidthFormComponentBox } from '../../Box.styles';
 import AddItemButton from './AddItemButton';
 import { TransitionGroup } from 'react-transition-group';
 import RepeatField from './RepeatField';
-import { Collapse } from '@mui/material';
+import Collapse from '@mui/material/Collapse';
 import useInitialiseRepeatAnswers from '../../../hooks/useInitialiseRepeatAnswers';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 

package/src/components/FormComponents/SingleItem/SingleItemSwitcher.tsx

@@ -16,10 +16,10 @@
  */
 
 import React from 'react';
-import QItemChoice from '../QItemChoice/QItemChoice';
+import ChoiceItemSwitcher from '../ChoiceItems/ChoiceItemSwitcher';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import QItemOpenChoice from '../QItemOpenChoice/QItemOpenChoice';
-import { Typography } from '@mui/material';
+import OpenChoiceItemSwitcher from '../OpenChoiceItems/OpenChoiceItemSwitcher';
+import Typography from '@mui/material/Typography';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithIsTabledAttribute,
@@ -131,7 +131,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
       );
     case 'choice':
       return (
-        <QItemChoice
+        <ChoiceItemSwitcher
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -141,7 +141,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
       );
     case 'open-choice':
       return (
-        <QItemOpenChoice
+        <OpenChoiceItemSwitcher
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}

package/src/components/FormComponents/StringItem/StringField.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
-import { InputAdornment } from '@mui/material';
+import InputAdornment from '@mui/material/InputAdornment';
 import { StandardTextField } from '../Textfield.styles';
 import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
 

package/src/components/FormComponents/Tables/DeleteRowButton.tsx

@@ -17,7 +17,9 @@
 
 import React from 'react';
 import { DeleteButtonTableCell } from './Table.styles';
-import { IconButton, Tooltip } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import type { QuestionnaireResponseItem } from 'fhir/r4';
 

package/src/components/FormComponents/Tables/QItemGroupTable.tsx

@@ -18,19 +18,18 @@
 import React, { useMemo, useState } from 'react';
 
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import {
-  Button,
-  Divider,
-  Paper,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Typography
-} from '@mui/material';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+
 import AddIcon from '@mui/icons-material/Add';
 import QItemGroupTableRow from './QItemGroupTableRow';
 import { HeaderTableCell } from './Table.styles';

package/src/components/FormComponents/Tables/Table.styles.tsx

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { styled, TableCell } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import TableCell from '@mui/material/TableCell';
 
 export const HeaderTableCell = styled(TableCell)(() => ({
   fontSize: 13,

package/src/components/FormComponents/TextItem/MuiTextField.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 TextField from '@mui/material/TextField';
+
+const MuiTextField = TextField;
+
+export default MuiTextField;

package/src/components/FormComponents/TextItem/TextField.tsx

@@ -16,7 +16,8 @@
  */
 
 import React from 'react';
-import { InputAdornment, TextField as MuiTextField } from '@mui/material';
+import InputAdornment from '@mui/material/InputAdornment';
+import MuiTextField from './MuiTextField';
 import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
 
 interface TextFieldProps {

package/src/components/FormComponents/Textfield.styles.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { styled, TextField } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
 
 // Always use this accompanied by the TextField prop fullWidth
 export const StandardTextField = styled(TextField, {

package/src/components/FormComponents/Typography.styles.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { styled, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
 
 export const QGroupHeadingTypography = styled(Typography, {
   shouldForwardProp: (prop) => prop !== 'isTabHeading'

package/src/components/FormComponents/UrlItem/UrlField.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
-import { InputAdornment } from '@mui/material';
+import InputAdornment from '@mui/material/InputAdornment';
 import { StandardTextField } from '../Textfield.styles';
 
 interface UrlFieldProps extends PropsWithIsTabledAttribute {

package/src/components/Iconify/Iconify.tsx

@@ -17,8 +17,8 @@
 
 import React, { forwardRef, memo } from 'react';
 import { Icon } from '@iconify/react';
-import type { SxProps, Theme } from '@mui/material';
-import { Box } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
 
 interface IconifyProps {
   icon: string;

package/src/components/Lists.styles.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { List, styled } from '@mui/material';
-import { alpha } from '@mui/material/styles';
+import List from '@mui/material/List';
+import { alpha, styled } from '@mui/material/styles';
 
 export const PrimarySelectableList = styled(List)(({ theme }) => ({
   '&& .Mui-selected': {

package/src/components/{FormRenderer → Renderer}/BaseRenderer.tsx

@@ -16,8 +16,9 @@
  */
 
 import React from 'react';
-import { Container, Fade } from '@mui/material';
-import FormTopLevelItem from '../FormRenderer/FormTopLevelItem';
+import Container from '@mui/material/Container';
+import Fade from '@mui/material/Fade';
+import FormTopLevelItem from './FormTopLevelItem';
 import type { QuestionnaireResponse, QuestionnaireResponseItem } from 'fhir/r4';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 import useQuestionnaireResponseStore from '../../stores/useQuestionnaireResponseStore';

package/src/components/{FormRenderer → Renderer}/FormBodyCollapsible.tsx

@@ -16,7 +16,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { Stack } from '@mui/material';
+import Stack from '@mui/material/Stack';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import { updateQrGroup } from '../../utils/qrItem';

package/src/components/{FormRenderer → Renderer}/FormBodySingleCollapsible.tsx

@@ -17,14 +17,12 @@
 
 import type { ReactNode } from 'react';
 import React, { memo } from 'react';
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Box,
-  Tooltip,
-  Typography
-} from '@mui/material';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { getContextDisplays } from '../../utils/tabs';
 import type { QuestionnaireItem } from 'fhir/r4';

package/src/components/{FormRenderer → Renderer}/FormBodyTabbed.tsx

@@ -16,9 +16,10 @@
  */
 
 import React, { useMemo } from 'react';
-import { Grid } from '@mui/material';
+import Grid from '@mui/material/Grid';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { TabContext, TabPanel } from '@mui/lab';
+import TabContext from '@mui/lab/TabContext';
+import TabPanel from '@mui/lab/TabPanel';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import { updateQrGroup } from '../../utils/qrItem';

package/src/components/{FormRenderer → Renderer}/FormTitle.tsx

@@ -20,7 +20,7 @@ import type { Questionnaire } from 'fhir/r4';
 import parse from 'html-react-parser';
 import { getXHtmlStringFromQuestionnaire } from '../../utils/qItem';
 import { FormTitleWrapper } from '../Box.styles';
-import { Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
 
 interface FormTitleProps {
   questionnaire: Questionnaire;

package/src/components/{FormRenderer → Renderer}/SmartFormsRenderer.tsx

@@ -18,26 +18,32 @@
 import React from 'react';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import useInitialiseRenderer from '../../hooks/useInitialiseRenderer';
-import { Box, CircularProgress, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+
 import { QueryClientProvider } from '@tanstack/react-query';
 import useQueryClient from '../../hooks/useQueryClient';
 import BaseRenderer from './BaseRenderer';
 import ThemeProvider from '../../theme/Theme';
+import type Client from 'fhirclient/lib/Client';
 
 interface SmartFormsRendererProps {
   questionnaire: Questionnaire;
   questionnaireResponse?: QuestionnaireResponse;
   additionalVariables?: Record<string, object>;
+  fhirClient?: Client;
 }
 
 // TODO add terminiology server
 function SmartFormsRenderer(props: SmartFormsRendererProps) {
-  const { questionnaire, questionnaireResponse, additionalVariables } = props;
+  const { questionnaire, questionnaireResponse, additionalVariables, fhirClient } = props;
 
   const isLoading = useInitialiseRenderer(
     questionnaire,
     questionnaireResponse,
-    additionalVariables
+    additionalVariables,
+    fhirClient
   );
   const queryClient = useQueryClient();
 

package/src/components/Tabs/CompleteTabButton.tsx

@@ -16,7 +16,8 @@
  */
 
 import React, { memo } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 

package/src/components/Tabs/FormBodySingleTab.tsx

@@ -16,7 +16,11 @@
  */
 
 import React, { memo } from 'react';
-import { Box, ListItemButton, ListItemText, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 import type { QuestionnaireItem } from 'fhir/r4';
 import { getContextDisplays } from '../../utils/tabs';

package/src/components/Tabs/FormBodyTabList.tsx

@@ -16,7 +16,9 @@
  */
 
 import React, { memo } from 'react';
-import { Box, Card, Collapse } from '@mui/material';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import Collapse from '@mui/material/Collapse';
 import { PrimarySelectableList } from '../Lists.styles';
 import { TransitionGroup } from 'react-transition-group';
 import { isHidden } from '../../utils/qItem';

package/src/components/index.ts

@@ -15,4 +15,4 @@
  * limitations under the License.
  */
 
-export * from './FormRenderer';
+export * from './Renderer';

package/src/hooks/useInitialiseRenderer.ts

@@ -20,29 +20,53 @@ import { useLayoutEffect, useState } from 'react';
 import { createQuestionnaireResponse } from '../utils/qrItem';
 import useQuestionnaireStore from '../stores/useQuestionnaireStore';
 import useQuestionnaireResponseStore from '../stores/useQuestionnaireResponseStore';
+import type Client from 'fhirclient/lib/Client';
+import useSmartConfigStore from '../stores/useSmartConfigStore';
+import { readEncounter, readPatient, readUser } from '../api/smartClient';
 
 function useInitialiseRenderer(
   questionnaire: Questionnaire,
   questionnaireResponse?: QuestionnaireResponse,
-  additionalVariables?: Record<string, object>
+  additionalVariables?: Record<string, object>,
+  fhirClient?: Client
 ): boolean {
   const buildSourceQuestionnaire = useQuestionnaireStore((state) => state.buildSourceQuestionnaire);
   const updatePopulatedProperties = useQuestionnaireStore(
     (state) => state.updatePopulatedProperties
   );
   const buildSourceResponse = useQuestionnaireResponseStore((state) => state.buildSourceResponse);
-  const populateResponse = useQuestionnaireResponseStore((state) => state.populateResponse);
+  const setUpdatableResponseAsPopulated = useQuestionnaireResponseStore(
+    (state) => state.setUpdatableResponseAsPopulated
+  );
+
+  const setSmartClient = useSmartConfigStore((state) => state.setClient);
+  const setPatient = useSmartConfigStore((state) => state.setPatient);
+  const setUser = useSmartConfigStore((state) => state.setUser);
+  const setEncounter = useSmartConfigStore((state) => state.setEncounter);
 
   const [loading, setLoading] = useState(true);
 
   useLayoutEffect(() => {
     setLoading(true);
+    if (fhirClient) {
+      setSmartClient(fhirClient);
+      readPatient(fhirClient).then((patient) => {
+        setPatient(patient);
+      });
+      readUser(fhirClient).then((user) => {
+        setUser(user);
+      });
+      readEncounter(fhirClient).then((encounter) => {
+        setEncounter(encounter);
+      });
+    }
+
     buildSourceQuestionnaire(questionnaire, questionnaireResponse, additionalVariables).then(() => {
       buildSourceResponse(createQuestionnaireResponse(questionnaire));
 
       if (questionnaireResponse) {
         const updatedResponse = updatePopulatedProperties(questionnaireResponse);
-        populateResponse(updatedResponse);
+        setUpdatableResponseAsPopulated(updatedResponse);
       }
       setLoading(false);
     });
@@ -51,9 +75,14 @@ function useInitialiseRenderer(
     questionnaireResponse,
     buildSourceQuestionnaire,
     buildSourceResponse,
-    populateResponse,
+    setUpdatableResponseAsPopulated,
     updatePopulatedProperties,
-    additionalVariables
+    additionalVariables,
+    fhirClient,
+    setSmartClient,
+    setPatient,
+    setUser,
+    setEncounter
   ]);
 
   return loading;

package/src/hooks/useTerminologyServerQuery.ts

@@ -19,7 +19,7 @@ import { useQuery } from '@tanstack/react-query';
 import type { Coding, ValueSet } from 'fhir/r4';
 import { getValueSetCodings, getValueSetPromise } from '../utils/valueSet';
 
-import type { AlertColor } from '@mui/material';
+import type { AlertColor } from '@mui/material/Alert';
 import useQuestionnaireStore from '../stores/useQuestionnaireStore';
 
 function useTerminologyServerQuery(

package/src/hooks/useValueSetCodings.ts

@@ -26,13 +26,13 @@ import {
 import { getAnswerExpression } from '../utils/itemControl';
 import fhirpath from 'fhirpath';
 import fhirpath_r4_model from 'fhirpath/fhir-context/r4';
-import useConfigStore from '../stores/useConfigStore';
+import useSmartConfigStore from '../stores/useSmartConfigStore';
 import useQuestionnaireStore from '../stores/useQuestionnaireStore';
 
 function useValueSetCodings(qItem: QuestionnaireItem) {
-  const patient = useConfigStore((state) => state.patient);
-  const user = useConfigStore((state) => state.user);
-  const encounter = useConfigStore((state) => state.encounter);
+  const patient = useSmartConfigStore((state) => state.patient);
+  const user = useSmartConfigStore((state) => state.user);
+  const encounter = useSmartConfigStore((state) => state.encounter);
 
   const launchContexts = useQuestionnaireStore((state) => state.launchContexts);
   const processedValueSetCodings = useQuestionnaireStore((state) => state.processedValueSetCodings);

package/src/index.ts

@@ -6,68 +6,11 @@ import { removeHiddenAnswers } from './utils/removeHidden';
 
 export * from './components';
 export * from './hooks';
-
-/**
- * Get the initial Questionnaire.
- *
- * @author Sean Fong
- */
-export function useSourceQuestionnaire(): Questionnaire {
-  return useQuestionnaireStore.getState().sourceQuestionnaire;
-}
-
-/**
- * Get the initial QuestionnaireResponse.
- * An empty QuestionnaireResponse is returned if no initial QuestionnaireResponse is provided when building the form.
- *
- * @author Sean Fong
- */
-export function useSourceResponse(): QuestionnaireResponse {
-  return useQuestionnaireResponseStore.getState().sourceResponse;
-}
-
-/**
- * Get the filled QuestionnaireResponse.
- * If no changes have been made to the form, the initial QuestionnaireResponse is returned.
- *
- * @author Sean Fong
- */
-export function useUpdatableResponse(): QuestionnaireResponse {
-  return useQuestionnaireResponseStore.getState().updatableResponse;
-}
-
-/**
- * Get the boolean value of whether any changes have been made to the form.
- *
- * @author Sean Fong
- */
-export function useFormHasChanges(): boolean {
-  return useQuestionnaireResponseStore.getState().hasChanges;
-}
-
-/**
- * Get the boolean value of whether enableWhen (and enableWhenExpression) is activated.
- *
- * @author Sean Fong
- */
-export function useEnableWhenActivated(): boolean {
-  return useQuestionnaireStore.getState().enableWhenIsActivated;
-}
-
-/**
- * Set the initial Questionnaire.
- * In most cases, <pre>buildForm()</pre> should be used instead.
- *
- * @author Sean Fong
- */
-export async function setSourceQuestionnaire(questionnaire: Questionnaire): Promise<void> {
-  await useQuestionnaireStore.getState().buildSourceQuestionnaire(questionnaire);
-}
+export * from './stores';
 
 /**
  * Build the form with an initial Questionnaire and an optional filled QuestionnaireResponse.
  * If a QuestionnaireResponse is not provided, an empty QuestionnaireResponse is set as the initial QuestionnaireResponse.
- * In most cases, <pre>buildForm()</pre> is sufficient. Other fine-grained functions are provided for more control.
  *
  * @author Sean Fong
  */
@@ -89,7 +32,7 @@ export async function buildForm(
 }
 
 /**
- * Destroy the form to clean up the store.
+ * Destroy the form to clean up the questionnaire and questionnaireResponse stores.
  *
  * @author Sean Fong
  */
@@ -99,44 +42,13 @@ export function destroyForm(): void {
 }
 
 /**
- * Toggle activation of enableWhen (and enableWhenExpression).
- *
- * @author Sean Fong
- */
-export function setEnableWhenActivation(isActivated: boolean): void {
-  useQuestionnaireStore.getState().toggleEnableWhenActivation(isActivated);
-}
-
-/**
- * Set the filled QuestionnaireResponse.
- * In most cases, <pre>buildForm()</pre> should be used instead.
- *
- * @author Sean Fong
- */
-export function setUpdatableResponse(populatedResponse: QuestionnaireResponse): void {
-  const updatedResponse = useQuestionnaireStore
-    .getState()
-    .updatePopulatedProperties(populatedResponse);
-  useQuestionnaireResponseStore.getState().populateResponse(updatedResponse);
-}
-
-/**
- * Set the filled QuestionnaireResponse to be empty.
- * This is used to quickly clear the form.
- *
- * @author Sean Fong
- */
-export function setUpdatableResponseAsEmpty(emptyResponse: QuestionnaireResponse): void {
-  return useQuestionnaireResponseStore.getState().clearResponse(emptyResponse);
-}
-
-/**
- * Save the filled QuestionnaireResponse to be the initial QuestionnaireResponse and reset the <pre>hasChanges</pre> flag.
+ * Get the filled QuestionnaireResponse at its current state.
+ * If no changes have been made to the form, the initial QuestionnaireResponse is returned.
  *
  * @author Sean Fong
  */
-export function setUpdatableResponseAsSaved(savedResponse: QuestionnaireResponse): void {
-  return useQuestionnaireResponseStore.getState().saveResponse(savedResponse);
+export function getUpdatableResponse(): QuestionnaireResponse {
+  return useQuestionnaireResponseStore.getState().updatableResponse;
 }
 
 /**

package/src/interfaces/choice.enum.ts

@@ -15,26 +15,26 @@
  * limitations under the License.
  */
 
-export enum QItemChoiceControl {
+export enum ChoiceItemControl {
   Radio = 'radio',
   Select = 'select',
   Autocomplete = 'autocomplete',
   Checkbox = 'check-box'
 }
 
-export enum QItemOpenChoiceControl {
+export enum OpenChoiceItemControl {
   Select = 'select',
   Autocomplete = 'autocomplete',
   Checkbox = 'check-box',
   Radio = 'radio'
 }
 
-export enum QItemChoiceOrientation {
+export enum ChoiceItemOrientation {
   Horizontal = 'horizontal',
   Vertical = 'vertical'
 }
 
-export enum CheckBoxOptionType {
+export enum CheckBoxOption {
   AnswerOption = 'answerOption',
   AnswerValueSet = 'answerValueSet'
 }

package/src/stores/index.ts

@@ -0,0 +1,3 @@
+export { default as useQuestionnaireStore } from './useQuestionnaireStore';
+export { default as useQuestionnaireResponseStore } from './useQuestionnaireResponseStore';
+export { default as useSmartConfigStore } from './useSmartConfigStore';