@aehrc/smart-forms-renderer 0.3.0 → 0.5.0

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

@@ -0,0 +1,30 @@
+/*
+ * 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 { FormGroup, RadioGroup, styled, Typography } from '@mui/material';
+
+export const QFormGroup = styled(FormGroup)(() => ({
+  marginBottom: 4
+}));
+
+export const QRadioGroup = styled(RadioGroup)(() => ({
+  marginBottom: 4
+}));
+
+export const QItemTypography = styled(Typography)(() => ({
+  marginTop: 4
+}));

package/src/components/FormComponents/ItemParts/ContextDisplayItem.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 type { QuestionnaireItem } from 'fhir/r4';
+import useHidden from '../../../hooks/useHidden';
+import ItemLabelText from './ItemLabelText';
+
+interface GroupHeadingIconProps {
+  displayItem: QuestionnaireItem;
+}
+
+const ContextDisplayItem = memo(function GroupHeadingIcon(props: GroupHeadingIconProps) {
+  const { displayItem } = props;
+
+  const itemIsHidden = useHidden(displayItem);
+  if (itemIsHidden) {
+    return null;
+  }
+
+  return <ItemLabelText qItem={displayItem} />;
+});
+
+export default ContextDisplayItem;

package/src/components/FormComponents/ItemParts/FadingCheckIcon.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { Fade } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+
+interface FadingCheckIconProps {
+  fadeIn: boolean;
+}
+
+function FadingCheckIcon(props: FadingCheckIconProps) {
+  const { fadeIn } = props;
+
+  return (
+    <Fade in={fadeIn} timeout={{ enter: 100, exit: 300 }}>
+      <CheckIcon color="success" fontSize="small" />
+    </Fade>
+  );
+}
+
+export default FadingCheckIcon;

package/src/components/FormComponents/ItemParts/ItemFieldGrid.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 { ReactNode } from 'react';
+import React from 'react';
+import { Grid } from '@mui/material';
+import type { QuestionnaireItem } from 'fhir/r4';
+import DisplayInstructions from '../DisplayItem/DisplayInstructions';
+import LabelWrapper from './ItemLabelWrapper';
+
+interface ItemFieldGridProps {
+  children: ReactNode;
+  qItem: QuestionnaireItem;
+  displayInstructions: string;
+}
+
+function ItemFieldGrid(props: ItemFieldGridProps) {
+  const { children, qItem, displayInstructions } = props;
+
+  return (
+    <Grid container columnSpacing={6}>
+      <Grid item xs={5}>
+        <LabelWrapper qItem={qItem} />
+      </Grid>
+      <Grid item xs={7}>
+        {children}
+        <DisplayInstructions displayInstructions={displayInstructions} />
+      </Grid>
+    </Grid>
+  );
+}
+
+export default ItemFieldGrid;

package/src/components/FormComponents/ItemParts/ItemLabelText.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, { memo } from 'react';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { getMarkdownString, getXHtmlString } from '../../../utils/itemControl';
+import { QItemTypography } from '../Item.styles';
+import parse from 'html-react-parser';
+import { Box } from '@mui/material';
+import ReactMarkdown from 'react-markdown';
+
+interface ItemLabelTextProps {
+  qItem: QuestionnaireItem;
+}
+
+const ItemLabelText = memo(function ItemLabelText(props: ItemLabelTextProps) {
+  const { qItem } = props;
+
+  // parse xHTML if found
+  const xHtmlString = getXHtmlString(qItem);
+
+  if (xHtmlString) {
+    return <Box>{parse(xHtmlString)}</Box>;
+  }
+
+  // parse xHTML if found
+  const markdownString = getMarkdownString(qItem);
+  if (markdownString) {
+    return (
+      <Box>
+        <ReactMarkdown>{markdownString}</ReactMarkdown>
+      </Box>
+    );
+  }
+
+  // parse regular text
+  if (qItem.type === 'group') {
+    return <>{qItem.text}</>;
+  } else {
+    return <QItemTypography>{qItem.text}</QItemTypography>;
+  }
+});
+
+export default ItemLabelText;

package/src/components/FormComponents/ItemParts/ItemLabelWrapper.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 React from 'react';
+import { Box } from '@mui/material';
+import ContextDisplayItem from './ContextDisplayItem';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { getContextDisplays } from '../../../utils/tabs';
+import ItemLabelText from './ItemLabelText';
+
+interface LabelWrapperProps {
+  qItem: QuestionnaireItem;
+}
+
+function ItemLabelWrapper(props: LabelWrapperProps) {
+  const { qItem } = props;
+
+  const contextDisplayItems = getContextDisplays(qItem);
+
+  return (
+    <Box display="flex" alignItems="center" justifyContent="space-between">
+      <ItemLabelText qItem={qItem} />
+
+      <Box display="flex" columnGap={0.5}>
+        {contextDisplayItems.map((item) => {
+          return <ContextDisplayItem key={item.linkId} displayItem={item} />;
+        })}
+      </Box>
+    </Box>
+  );
+}
+
+export default ItemLabelWrapper;

package/src/components/FormComponents/ItemParts/QItemCheckboxSingle.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 from 'react';
+import { Checkbox, FormControlLabel } from '@mui/material';
+
+interface Props {
+  value: string;
+  label: string;
+  readOnly: boolean;
+  isChecked: boolean;
+  onCheckedChange: (value: string) => unknown;
+}
+
+function QItemCheckboxSingle(props: Props) {
+  const { value, label, readOnly, isChecked, onCheckedChange } = props;
+
+  return (
+    <FormControlLabel
+      disabled={readOnly}
+      control={
+        <Checkbox size="small" checked={isChecked} onChange={() => onCheckedChange(value)} />
+      }
+      label={label}
+      sx={{ mr: 3 }}
+    />
+  );
+}
+
+export default QItemCheckboxSingle;

package/src/components/FormComponents/ItemParts/QItemCheckboxSingleWithOpenLabel.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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 { ChangeEvent } from 'react';
+import React from 'react';
+import { Box, Checkbox, FormControlLabel } from '@mui/material';
+import { StandardTextField } from '../Textfield.styles';
+
+interface Props {
+  value: string | null;
+  label: string;
+  isChecked: boolean;
+  onCheckedChange: (checked: boolean) => unknown;
+  onInputChange: (input: string) => unknown;
+}
+
+function QItemCheckboxSingleWithOpenLabel(props: Props) {
+  const { value, label, isChecked, onCheckedChange, onInputChange } = props;
+
+  function handleCheckedChange(event: ChangeEvent<HTMLInputElement>) {
+    onCheckedChange(event.target.checked);
+  }
+
+  function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
+    onInputChange(event.target.value);
+  }
+
+  return (
+    <Box data-test="q-item-checkbox-open-label-box">
+      <FormControlLabel
+        control={<Checkbox size="small" checked={isChecked} onChange={handleCheckedChange} />}
+        label={label + ':'}
+        sx={{ mr: 3 }}
+      />
+      <StandardTextField
+        disabled={!isChecked}
+        value={value}
+        onChange={handleInputChange}
+        fullWidth
+        isTabled={false}
+        size="small"
+        data-test="q-item-checkbox-open-label-field"
+      />
+    </Box>
+  );
+}
+
+export default QItemCheckboxSingleWithOpenLabel;

package/src/components/FormComponents/ItemParts/QItemRadioButtonWithOpenLabel.tsx

@@ -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 { ChangeEvent } from 'react';
+import React from 'react';
+import { Box } from '@mui/material';
+import { StandardTextField } from '../Textfield.styles';
+import QItemChoiceRadioSingle from '../QItemChoice/QItemChoiceRadioSingle';
+
+interface Props {
+  value: string | null;
+  label: string;
+  readOnly: boolean;
+  isSelected: boolean;
+  onInputChange: (input: string) => unknown;
+}
+
+function QItemRadioButtonWithOpenLabel(props: Props) {
+  const { value, label, readOnly, isSelected, onInputChange } = props;
+  function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
+    onInputChange(event.target.value);
+  }
+
+  return (
+    <Box data-test="q-item-radio-open-label-box">
+      <QItemChoiceRadioSingle value={value ?? ''} label={label + ':'} readOnly={readOnly} />
+      <StandardTextField
+        disabled={!isSelected}
+        value={value}
+        onChange={handleInputChange}
+        fullWidth
+        isTabled={false}
+        size="small"
+        data-test="q-item-radio-open-label-field"
+      />
+    </Box>
+  );
+}
+
+export default QItemRadioButtonWithOpenLabel;

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

@@ -0,0 +1,39 @@
+/*
+ * 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 { List, styled } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+
+export const PrimarySelectableList = styled(List)(({ theme }) => ({
+  '&& .Mui-selected': {
+    color: theme.palette.primary.dark,
+    backgroundColor: alpha(theme.palette.primary.main, 0.2),
+    borderRadius: 30,
+    '& .MuiTypography-root': {
+      fontWeight: 'bold'
+    }
+  },
+  '& .MuiListItemButton-root': {
+    color: '#444746',
+    borderRadius: 30
+  },
+  '& .MuiListItemButton-root:hover': {
+    color: theme.palette.primary.dark,
+    backgroundColor: alpha(theme.palette.primary.main, 0.09),
+    borderRadius: 30
+  }
+}));

package/src/components/FormComponents/QItemChoice/QItemChoice.tsx

@@ -0,0 +1,130 @@
+/*
+ * 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 { QItemChoiceControl } from '../../../interfaces/choice.enum';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import QItemChoiceRadioAnswerOption from './QItemChoiceRadioAnswerOption';
+import QItemChoiceSelectAnswerOption from './QItemChoiceSelectAnswerOption';
+import QItemChoiceCheckboxAnswerOption from './QItemChoiceCheckboxAnswerOption';
+import QItemChoiceAutocomplete from './QItemChoiceAutocomplete';
+import QItemChoiceSelectAnswerValueSet from './QItemChoiceSelectAnswerValueSet';
+import { getChoiceControlType, getChoiceOrientation } from '../../../utils/choice';
+import QItemChoiceRadioAnswerValueSet from './QItemChoiceRadioAnswerValueSet';
+import QItemChoiceCheckboxAnswerValueSet from './QItemChoiceCheckboxAnswerValueSet';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../../interfaces/renderProps.interface';
+
+interface Props
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+}
+
+function QItemChoice(props: Props) {
+  const { qItem, qrItem, isRepeated, isTabled, onQrItemChange } = props;
+  const orientation = getChoiceOrientation(qItem);
+  const choiceControlType = getChoiceControlType(qItem);
+
+  switch (choiceControlType) {
+    case QItemChoiceControl.Radio:
+      if (qItem.answerOption) {
+        return (
+          <QItemChoiceRadioAnswerOption
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            onQrItemChange={onQrItemChange}
+            orientation={orientation}
+          />
+        );
+      } else {
+        return (
+          <QItemChoiceRadioAnswerValueSet
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            onQrItemChange={onQrItemChange}
+            orientation={orientation}
+          />
+        );
+      }
+    case QItemChoiceControl.Checkbox:
+      if (qItem.answerOption) {
+        return (
+          <QItemChoiceCheckboxAnswerOption
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={qItem['repeats'] ?? false}
+            onQrItemChange={onQrItemChange}
+            orientation={orientation}
+          />
+        );
+      } else {
+        return (
+          <QItemChoiceCheckboxAnswerValueSet
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={qItem['repeats'] ?? false}
+            onQrItemChange={onQrItemChange}
+            orientation={orientation}
+          />
+        );
+      }
+    case QItemChoiceControl.Autocomplete:
+      return (
+        <QItemChoiceAutocomplete
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={isRepeated}
+          isTabled={isTabled}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    case QItemChoiceControl.Select:
+      if (qItem.answerOption) {
+        return (
+          <QItemChoiceSelectAnswerOption
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      } else {
+        return (
+          <QItemChoiceSelectAnswerValueSet
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      }
+    default:
+      return null;
+  }
+}
+
+export default QItemChoice;