@aehrc/smart-forms-renderer 0.7.2 → 0.8.1

package/src/components/Renderer/FormTopLevelItem.tsx

@@ -29,6 +29,7 @@ import FormBodyCollapsible from './FormBodyCollapsible';
 import useResponsive from '../../hooks/useResponsive';
 import useHidden from '../../hooks/useHidden';
 import GroupItemSwitcher from '../FormComponents/GroupItem/GroupItemSwitcher';
+import useReadOnly from '../../hooks/useReadOnly';
 
 interface FormTopLevelItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -43,10 +44,11 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
   const itemIsTabContainer = isTabContainer(topLevelQItem);
   const itemContainsTabs = containsTabs(topLevelQItem);
 
-  const isDesktop = useResponsive('up', 'lg');
+  const isTablet = useResponsive('up', 'md');
 
   const itemIsGroup = topLevelQItem.type === 'group';
 
+  const readOnly = useReadOnly(topLevelQItem, false);
   const itemIsHidden = useHidden(topLevelQItem);
   if (itemIsHidden) {
     return null;
@@ -60,6 +62,7 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
         qItem={topLevelQItem}
         qrItemOrItems={topLevelQRItemOrItems}
         groupCardElevation={1}
+        parentIsReadOnly={readOnly}
         onQrItemChange={onQrItemChange}
         onQrRepeatGroupChange={onQrRepeatGroupChange}
       />
@@ -71,7 +74,7 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
 
   // If form is tabbed, it is rendered as a tabbed form
   if (itemContainsTabs || itemIsTabContainer) {
-    if (isDesktop) {
+    if (isTablet) {
       return (
         <FormBodyTabbed
           key={topLevelQItem.linkId}
@@ -100,8 +103,9 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
         qItem={topLevelQItem}
         qrItem={topLevelQRItem}
         groupCardElevation={1}
-        onQrItemChange={onQrItemChange}
         isRepeated={false}
+        parentIsReadOnly={readOnly}
+        onQrItemChange={onQrItemChange}
       />
     );
   }
@@ -112,9 +116,10 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
       key={topLevelQItem.linkId}
       qItem={topLevelQItem}
       qrItem={topLevelQRItem}
+      isRepeated={false}
       isTabled={false}
+      parentIsReadOnly={readOnly}
       onQrItemChange={onQrItemChange}
-      isRepeated={false}
     />
   );
 }

package/src/components/Tabs/FormBodySingleTab.tsx

@@ -46,7 +46,7 @@ const FormBodySingleTab = memo(function FormBodySingleTab(props: FormBodySingleT
     <>
       <ListItemButton
         selected={selected}
-        sx={{ my: 0.2, minHeight: '36px' }}
+        sx={{ my: 0.1, minHeight: '36px' }}
         onClick={handleTabClick}>
         <ListItemText
           primary={

package/src/components/Tabs/FormBodyTabList.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import Collapse from '@mui/material/Collapse';
 import { TransitionGroup } from 'react-transition-group';
 import { getShortText } from '../../utils/itemControl';
@@ -23,27 +23,24 @@ import type { QuestionnaireItem } from 'fhir/r4';
 import FormBodySingleTab from './FormBodySingleTab';
 import type { Tabs } from '../../interfaces/tab.interface';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
-import { getContextDisplays, isTabHidden } from '../../utils/tabs';
+import { isTabHidden } from '../../utils/tabs';
 
 interface FormBodyTabListProps {
   topLevelItems: QuestionnaireItem[];
   currentTabIndex: number;
   tabs: Tabs;
   completedTabsCollapsed: boolean;
+  allContextDisplayItems: QuestionnaireItem[][];
 }
 
 const FormBodyTabList = memo(function FormBodyTabList(props: FormBodyTabListProps) {
-  const { topLevelItems, currentTabIndex, tabs, completedTabsCollapsed } = props;
+  const { topLevelItems, currentTabIndex, tabs, completedTabsCollapsed, allContextDisplayItems } =
+    props;
 
   const enableWhenIsActivated = useQuestionnaireStore((state) => state.enableWhenIsActivated);
   const enableWhenItems = useQuestionnaireStore((state) => state.enableWhenItems);
   const enableWhenExpressions = useQuestionnaireStore((state) => state.enableWhenExpressions);
 
-  const allContextDisplayItems = useMemo(
-    () => topLevelItems.map((topLevelItem) => getContextDisplays(topLevelItem)),
-    [topLevelItems]
-  );
-
   return (
     <TransitionGroup>
       {topLevelItems.map((qItem, i) => {

package/src/components/Tabs/FormBodyTabListWrapper.tsx

@@ -21,15 +21,13 @@ import Card from '@mui/material/Card';
 import { PrimarySelectableList } from '../Lists.styles';
 import type { QuestionnaireItem } from 'fhir/r4';
 import type { Tabs } from '../../interfaces/tab.interface';
-import { IconButton } from '@mui/material';
-import ExpandLess from '@mui/icons-material/ExpandLess';
-import ExpandMore from '@mui/icons-material/ExpandMore';
-import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import FormBodyTabList from './FormBodyTabList';
+import ShowCompletedTabsSection from './ShowCompletedTabsSection';
+import useContextDisplayItems from '../../hooks/useContextDisplayItems';
 
 interface FormBodyTabListWrapperProps {
-  qFormItems: QuestionnaireItem[];
+  topLevelItems: QuestionnaireItem[];
   currentTabIndex: number;
   tabs: Tabs;
 }
@@ -37,39 +35,30 @@ interface FormBodyTabListWrapperProps {
 const FormBodyTabListWrapper = memo(function FormBodyTabListWrapper(
   props: FormBodyTabListWrapperProps
 ) {
-  const { qFormItems, currentTabIndex, tabs } = props;
+  const { topLevelItems, currentTabIndex, tabs } = props;
 
   const [completedTabsExpanded, setCompletedTabsExpanded] = useState(true);
 
+  const { allContextDisplayItems, completedDisplayItemExists } =
+    useContextDisplayItems(topLevelItems);
+
   return (
     <Card sx={{ p: 0.75, mb: 2 }}>
       <Box sx={{ flexGrow: 1 }}>
         <PrimarySelectableList dense disablePadding sx={{ mb: 1 }} data-test="renderer-tab-list">
-          <Box display="flex" justifyContent="center" alignItems="center" mx={2} columnGap={0.5}>
-            <Typography
-              variant="overline"
-              fontSize={9}
-              color={completedTabsExpanded ? 'text.secondary' : 'text.disabled'}>
-              Completed tabs {completedTabsExpanded ? 'shown' : 'hidden'}
-            </Typography>
-            <IconButton
-              size="small"
-              onClick={() => {
-                setCompletedTabsExpanded(!completedTabsExpanded);
-              }}>
-              {completedTabsExpanded ? (
-                <ExpandLess fontSize="small" />
-              ) : (
-                <ExpandMore fontSize="small" />
-              )}
-            </IconButton>
-          </Box>
+          {completedDisplayItemExists ? (
+            <ShowCompletedTabsSection
+              completedTabsExpanded={completedTabsExpanded}
+              setCompletedTabsExpanded={setCompletedTabsExpanded}
+            />
+          ) : null}
           <Divider sx={{ mx: 1 }} light />
           <FormBodyTabList
-            topLevelItems={qFormItems}
+            topLevelItems={topLevelItems}
             currentTabIndex={currentTabIndex}
             tabs={tabs}
             completedTabsCollapsed={!completedTabsExpanded}
+            allContextDisplayItems={allContextDisplayItems}
           />
         </PrimarySelectableList>
       </Box>

package/src/components/Tabs/ShowCompletedTabsSection.tsx

@@ -0,0 +1,52 @@
+/*
+ * 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/Box';
+import Typography from '@mui/material/Typography';
+import { IconButton } from '@mui/material';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+
+interface ShowCompletedTabsSectionProps {
+  completedTabsExpanded: boolean;
+  setCompletedTabsExpanded: (newExpanded: boolean) => void;
+}
+
+function ShowCompletedTabsSection(props: ShowCompletedTabsSectionProps) {
+  const { completedTabsExpanded, setCompletedTabsExpanded } = props;
+
+  return (
+    <Box display="flex" justifyContent="center" alignItems="center" mx={2} columnGap={0.5}>
+      <Typography
+        variant="overline"
+        fontSize={8.5}
+        color={completedTabsExpanded ? 'text.secondary' : 'text.disabled'}>
+        Completed tabs {completedTabsExpanded ? 'shown' : 'hidden'}
+      </Typography>
+      <IconButton
+        size="small"
+        onClick={() => {
+          setCompletedTabsExpanded(!completedTabsExpanded);
+        }}>
+        {completedTabsExpanded ? <ExpandLess fontSize="small" /> : <ExpandMore fontSize="small" />}
+      </IconButton>
+    </Box>
+  );
+}
+
+export default ShowCompletedTabsSection;

package/src/hooks/useContextDisplayItems.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 { useMemo } from 'react';
+import { getContextDisplays } from '../utils/tabs';
+import type { QuestionnaireItem } from 'fhir/r4';
+
+function useContextDisplayItems(topLevelItems: QuestionnaireItem[]) {
+  return useMemo(() => {
+    let completedDisplayItemExists = false;
+
+    const allContextDisplayItems = topLevelItems.map((topLevelItem) =>
+      getContextDisplays(topLevelItem)
+    );
+
+    completedDisplayItemExists = allContextDisplayItems.some((contextDisplayItems) => {
+      return contextDisplayItems.some(
+        (contextDisplayItem) => contextDisplayItem.text === 'Complete'
+      );
+    });
+
+    return { allContextDisplayItems, completedDisplayItemExists };
+  }, [topLevelItems]);
+}
+
+export default useContextDisplayItems;

package/src/hooks/useInitialiseRenderer.ts

@@ -17,7 +17,7 @@
 
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import { useLayoutEffect, useState } from 'react';
-import { createQuestionnaireResponse } from '../utils/qrItem';
+import { createEmptyQuestionnaireResponse } from '../utils/qrItem';
 import useQuestionnaireStore from '../stores/useQuestionnaireStore';
 import useQuestionnaireResponseStore from '../stores/useQuestionnaireResponseStore';
 import type Client from 'fhirclient/lib/Client';
@@ -80,7 +80,7 @@ function useInitialiseRenderer(
       additionalVariables,
       terminologyServerUrl
     ).then(() => {
-      buildSourceResponse(createQuestionnaireResponse(questionnaire));
+      buildSourceResponse(createEmptyQuestionnaireResponse(questionnaire));
 
       if (questionnaireResponse) {
         const updatedResponse = updatePopulatedProperties(questionnaireResponse);

package/src/hooks/useInitialiseRepeatGroups.ts

@@ -16,7 +16,7 @@
  */
 
 import type { QuestionnaireResponseItem } from 'fhir/r4';
-import { QuestionnaireItem } from 'fhir/r4';
+import type { QuestionnaireItem } from 'fhir/r4';
 import { nanoid } from 'nanoid';
 import type { RepeatGroupSingle } from '../interfaces/repeatGroup.interface';
 import { useMemo } from 'react';

package/src/hooks/useNumberInput.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import { useEffect, useState } from 'react';
 
 function useNumberInput(valueFromProps: number): [number, Dispatch<SetStateAction<number>>] {
   const [value, setValue] = useState(valueFromProps);

package/src/hooks/useReadOnly.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 type { QuestionnaireItem } from 'fhir/r4';
+import useRenderingExtensions from './useRenderingExtensions';
+
+function useReadOnly(qItem: QuestionnaireItem, parentIsReadOnly: boolean | undefined): boolean {
+  let { readOnly } = useRenderingExtensions(qItem);
+  if (typeof parentIsReadOnly === 'boolean' && parentIsReadOnly) {
+    readOnly = parentIsReadOnly;
+  }
+
+  return readOnly;
+}
+
+export default useReadOnly;

package/src/hooks/useStringInput.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import { useEffect, useState } from 'react';
 
 function useStringInput(valueFromProps: string): [string, Dispatch<SetStateAction<string>>] {
   const [input, setInput] = useState(valueFromProps);

package/src/hooks/useTerminologyServerQuery.ts

@@ -34,7 +34,6 @@ function useTerminologyServerQuery(
 
   let fullUrl = '';
   let options: Coding[] = [];
-  let loading = false;
   let feedback: { message: string; color: AlertColor } | undefined;
 
   if (input.length === 0) {
@@ -64,7 +63,7 @@ function useTerminologyServerQuery(
 
   // Perform query
   const terminologyServerUrl = getTerminologyServerUrl(qItem) ?? defaultTerminologyServerUrl;
-  const { isInitialLoading, error, data } = useQuery<ValueSet>(
+  const { isFetching, error, data } = useQuery<ValueSet>(
     ['expandValueSet', fullUrl],
     () => getValueSetPromise(fullUrl, terminologyServerUrl),
     {
@@ -72,9 +71,7 @@ function useTerminologyServerQuery(
     }
   );
 
-  if (isInitialLoading) {
-    loading = true;
-  }
+  console.log(isFetching);
 
   if (error) {
     console.warn('Ontoserver query failed. Details below: \n' + error);
@@ -95,6 +92,6 @@ function useTerminologyServerQuery(
     }
   }
 
-  return { options, loading, feedback };
+  return { options, loading: isFetching, feedback };
 }
 export default useTerminologyServerQuery;

package/src/index.ts

@@ -1,6 +1,6 @@
 import useQuestionnaireStore from './stores/useQuestionnaireStore';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
-import { createQuestionnaireResponse } from './utils/qrItem';
+import { createEmptyQuestionnaireResponse } from './utils/qrItem';
 import useQuestionnaireResponseStore from './stores/useQuestionnaireResponseStore';
 import { removeHiddenAnswers } from './utils/removeHidden';
 import type { ItemToRepopulate } from './utils/repopulateItems';
@@ -28,7 +28,7 @@ export async function buildForm(
   if (!questionnaireResponse) {
     useQuestionnaireResponseStore
       .getState()
-      .buildSourceResponse(createQuestionnaireResponse(questionnaire));
+      .buildSourceResponse(createEmptyQuestionnaireResponse(questionnaire));
     return;
   }
 

package/src/interfaces/calculatedExpression.interface.ts

@@ -1,4 +1,4 @@
 export interface CalculatedExpression {
   expression: string;
-  value?: number | string;
+  value?: number | string | object;
 }

package/src/interfaces/renderProps.interface.ts

@@ -32,3 +32,11 @@ export interface PropsWithIsRepeatedAttribute {
 export interface PropsWithIsTabledAttribute {
   isTabled: boolean;
 }
+
+export interface PropsWithTextShownAttribute {
+  textShown?: boolean;
+}
+
+export interface PropsWithParentIsReadOnlyAttribute {
+  parentIsReadOnly?: boolean;
+}

package/src/stores/useQuestionnaireResponseStore.ts

@@ -2,12 +2,13 @@ import { create } from 'zustand';
 import type { QuestionnaireResponse } from 'fhir/r4';
 import { emptyResponse } from '../utils/emptyResource';
 import cloneDeep from 'lodash.clonedeep';
-import { diff } from 'json-diff';
+import type { Diff } from 'deep-diff';
+import { diff } from 'deep-diff';
 
 export interface UseQuestionnaireResponseStoreType {
   sourceResponse: QuestionnaireResponse;
   updatableResponse: QuestionnaireResponse;
-  formChangesHistory: object[];
+  formChangesHistory: (Diff<QuestionnaireResponse, QuestionnaireResponse>[] | null)[];
   buildSourceResponse: (response: QuestionnaireResponse) => void;
   setUpdatableResponseAsPopulated: (populatedResponse: QuestionnaireResponse) => void;
   updateResponse: (updatedResponse: QuestionnaireResponse) => void;
@@ -27,14 +28,14 @@ const useQuestionnaireResponseStore = create<UseQuestionnaireResponseStoreType>(
     }));
   },
   setUpdatableResponseAsPopulated: (populatedResponse: QuestionnaireResponse) => {
-    const formChanges = diff(get().updatableResponse, populatedResponse, { full: true });
+    const formChanges = diff(get().updatableResponse, populatedResponse) ?? null;
     set(() => ({
       updatableResponse: populatedResponse,
       formChangesHistory: [...get().formChangesHistory, formChanges]
     }));
   },
   updateResponse: (updatedResponse: QuestionnaireResponse) => {
-    const formChanges = diff(get().updatableResponse, updatedResponse, { full: true });
+    const formChanges = diff(get().updatableResponse, updatedResponse) ?? null;
     set(() => ({
       updatableResponse: updatedResponse,
       formChangesHistory: [...get().formChangesHistory, formChanges]

package/src/theme/typography.ts

@@ -38,9 +38,7 @@ export function responsiveFontSizes(props: { sm: number; md: number; lg: number
 
 const typography = {
   fontFamily: ['Inter', 'sans-serif', 'Roboto', 'Arial', '"Helvetica Neue"', 'Helvetica'].join(','),
-  fontWeightRegular: 400,
-  fontWeightMedium: 600,
-  fontWeightBold: 700,
+  fontWeightRegular: 500,
   h1: {
     fontWeight: 800,
     lineHeight: 80 / 64,
@@ -85,11 +83,11 @@ const typography = {
   subtitle2: {
     fontWeight: 600,
     lineHeight: 22 / 14,
-    fontSize: pxToRem(11)
+    fontSize: pxToRem(11.5)
   },
   body1: {
     lineHeight: 1.5,
-    fontSize: pxToRem(12)
+    fontSize: pxToRem(12.25)
   },
   body2: {
     lineHeight: 22 / 14,

package/src/utils/calculatedExpression.ts

@@ -22,6 +22,7 @@ import type {
   Expression,
   Questionnaire,
   QuestionnaireItem,
+  QuestionnaireItemAnswerOption,
   QuestionnaireResponse,
   QuestionnaireResponseItem,
   QuestionnaireResponseItemAnswer
@@ -32,6 +33,8 @@ import { createFhirPathContext } from './fhirpath';
 import { getQrItemsIndex, mapQItemsIndex } from './mapItem';
 import { updateQrItemsInGroup } from './qrItem';
 import cloneDeep from 'lodash.clonedeep';
+import dayjs from 'dayjs';
+import moment from 'moment';
 
 interface EvaluateInitialCalculatedExpressionsParams {
   initialResponse: QuestionnaireResponse;
@@ -49,15 +52,17 @@ export function evaluateInitialCalculatedExpressions(
     return calculatedExpressions;
   }
 
-  const initialExpressions: Record<string, CalculatedExpression> = { ...calculatedExpressions };
+  const initialCalculatedExpressions: Record<string, CalculatedExpression> = {
+    ...calculatedExpressions
+  };
 
-  if (Object.keys(initialExpressions).length > 0) {
+  if (Object.keys(initialCalculatedExpressions).length > 0) {
     const fhirPathContext: Record<string, any> = createFhirPathContext(
       initialResponse,
       variablesFhirPath
     );
 
-    for (const linkId in initialExpressions) {
+    for (const linkId in initialCalculatedExpressions) {
       try {
         const result = fhirpath.evaluate(
           initialResponse,
@@ -66,8 +71,8 @@ export function evaluateInitialCalculatedExpressions(
           fhirpath_r4_model
         );
 
-        if (calculatedExpressions[linkId].value !== result[0]) {
-          initialExpressions[linkId].value = result[0];
+        if (!_isEqual(calculatedExpressions[linkId].value, result[0])) {
+          initialCalculatedExpressions[linkId].value = result[0];
         }
       } catch (e) {
         console.warn(
@@ -77,7 +82,7 @@ export function evaluateInitialCalculatedExpressions(
       }
     }
   }
-  return initialExpressions;
+  return initialCalculatedExpressions;
 }
 
 export function evaluateCalculatedExpressions(
@@ -102,7 +107,7 @@ export function evaluateCalculatedExpressions(
       );
 
       if (result.length > 0) {
-        if (calculatedExpressions[linkId].value !== result[0]) {
+        if (!_isEqual(calculatedExpressions[linkId].value, result[0])) {
           isUpdated = true;
           updatedCalculatedExpressions[linkId].value = result[0];
         }
@@ -283,17 +288,68 @@ function constructSingleItem(
   };
 }
 
-function parseValueToAnswer(
-  qItem: QuestionnaireItem,
-  value: string | number
-): QuestionnaireResponseItemAnswer {
+// duplicate functions in sdc-populate
+function parseValueToAnswer(qItem: QuestionnaireItem, value: any): QuestionnaireResponseItemAnswer {
+  if (qItem.answerOption) {
+    const answerOption = qItem.answerOption.find(
+      (option: QuestionnaireItemAnswerOption) => option.valueCoding?.code === value?.code
+    );
+
+    if (answerOption) {
+      return answerOption;
+    }
+  }
+
+  if (typeof value === 'boolean' && qItem.type === 'boolean') {
+    return { valueBoolean: value };
+  }
+
   if (typeof value === 'number') {
+    if (qItem.type === 'decimal') {
+      return { valueDecimal: value };
+    }
     if (qItem.type === 'integer') {
       return { valueInteger: value };
     }
+  }
+
+  if (typeof value === 'object') {
+    return { valueCoding: value };
+  }
+
+  // Value is string at this point
+  if (qItem.type === 'date' && checkIsDateTime(value)) {
+    return { valueDate: value };
+  }
 
-    return { valueDecimal: value };
+  if (qItem.type === 'dateTime' && checkIsDateTime(value)) {
+    return { valueDateTime: value };
+  }
+
+  if (qItem.type === 'time' && checkIsTime(value)) {
+    return { valueTime: value };
   }
 
   return { valueString: value };
 }
+
+/**
+ * Check if an answer is a datetime in the format YYYY, YYYY-MM, YYYY-MM-DD, YYYY-MM-DDThh:mm:ss+zz:zz
+ *
+ * @author Sean Fong
+ */
+export function checkIsDateTime(value: string): boolean {
+  const acceptedFormats = ['YYYY', 'YYYY-MM', 'YYYY-MM-DD', 'YYYY-MM-DDTHH:mm:ssZ'];
+  const formattedDate = dayjs(value).format();
+  return moment(formattedDate, acceptedFormats, true).isValid();
+}
+
+/**
+ * Check if an answer is in a  time format - Regex: ([01][0-9]|2[0-3]):[0-5][0-9]:([0-5][0-9]|60)(\.[0-9]+)?
+ *
+ * @author Sean Fong
+ */
+export function checkIsTime(value: string): boolean {
+  const timeRegex = /^([01][0-9]|2[0-3]):[0-5][0-9]:([0-5][0-9]|60)(\.[0-9]+)?$/;
+  return timeRegex.test(value);
+}

package/src/utils/qrItem.ts

@@ -25,12 +25,13 @@ import type {
 import type { QrRepeatGroup } from '../interfaces/repeatGroup.interface';
 
 /**
- * Create a questionnaireResponse from a given questionnaire form item
- * A questionnaire form item is the first item of a questionnaire
+ * Create an empty questionnaireResponse from a given questionnaire
  *
  * @author Sean Fong
  */
-export function createQuestionnaireResponse(questionnaire: Questionnaire): QuestionnaireResponse {
+export function createEmptyQuestionnaireResponse(
+  questionnaire: Questionnaire
+): QuestionnaireResponse {
   const questionnaireResponse: QuestionnaireResponse = {
     resourceType: 'QuestionnaireResponse',
     status: 'in-progress'

package/src/utils/repopulateIntoResponse.ts

@@ -1,10 +1,10 @@
-import {
+import type {
   Questionnaire,
   QuestionnaireItem,
   QuestionnaireResponse,
   QuestionnaireResponseItem
 } from 'fhir/r4';
-import { ItemToRepopulate } from './repopulateItems';
+import type { ItemToRepopulate } from './repopulateItems';
 import { getQrItemsIndex, mapQItemsIndex } from './mapItem';
 import { updateQrItemsInGroup } from './qrItem';