@aehrc/smart-forms-renderer 0.3.0 → 0.4.0

package/src/components/FormRenderer/FormBodyTabbed.tsx

@@ -0,0 +1,106 @@
+/*
+ * 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, { useMemo } from 'react';
+import { Grid } from '@mui/material';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { TabContext, TabPanel } from '@mui/lab';
+import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
+import GroupItem from '../FormComponents/GroupItem/GroupItem';
+import { updateQrGroup } from '../../utils/qrItem';
+import FormBodyTabList from '../Tabs/FormBodyTabList';
+import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
+import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+
+interface FormBodyTabbedProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  topLevelQItem: QuestionnaireItem;
+  topLevelQRItem: QuestionnaireResponseItem;
+}
+
+function FormBodyTabbed(props: FormBodyTabbedProps) {
+  const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
+
+  const tabs = useQuestionnaireStore((state) => state.tabs);
+  const currentTab = useQuestionnaireStore((state) => state.currentTabIndex);
+
+  const indexMap: Record<string, number> = useMemo(
+    () => mapQItemsIndex(topLevelQItem),
+    [topLevelQItem]
+  );
+
+  const qItems = topLevelQItem.item;
+  const qrItems = topLevelQRItem.item;
+
+  function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
+    updateQrGroup(qrItem, null, topLevelQRItem, indexMap);
+    onQrItemChange(topLevelQRItem);
+  }
+
+  if (!qItems || !qrItems) {
+    return <>Unable to load form</>;
+  }
+
+  const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, indexMap);
+
+  return (
+    <Grid container spacing={2}>
+      <TabContext value={currentTab.toString()}>
+        <Grid item xs={12} md={3.5} lg={3} xl={2.75}>
+          <FormBodyTabList qFormItems={qItems} currentTabIndex={currentTab} tabs={tabs} />
+        </Grid>
+
+        <Grid item xs={12} md={8.5} lg={9} xl={9.25}>
+          {qItems.map((qItem, i) => {
+            const qrItem = qrItemsByIndex[i];
+
+            const isNotRepeatGroup = !Array.isArray(qrItem);
+            const isTab = !!tabs[qItem.linkId];
+
+            if (!isTab || !isNotRepeatGroup) {
+              // Something has gone horribly wrong
+              return null;
+            }
+
+            const isRepeated = qItem.repeats ?? false;
+            const tabIsMarkedAsComplete = tabs[qItem.linkId].isComplete ?? false;
+
+            return (
+              <TabPanel
+                key={qItem.linkId}
+                sx={{ p: 0 }}
+                value={i.toString()}
+                data-test="renderer-tab-panel">
+                <GroupItem
+                  qItem={qItem}
+                  qrItem={qrItem}
+                  isRepeated={isRepeated}
+                  groupCardElevation={1}
+                  tabIsMarkedAsComplete={tabIsMarkedAsComplete}
+                  tabs={tabs}
+                  currentTabIndex={currentTab}
+                  onQrItemChange={handleQrGroupChange}
+                />
+              </TabPanel>
+            );
+          })}
+        </Grid>
+      </TabContext>
+    </Grid>
+  );
+}
+
+export default FormBodyTabbed;

package/src/components/FormRenderer/FormTitle.js

@@ -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 React, { memo } from 'react';
+import parse from 'html-react-parser';
+import { getXHtmlStringFromQuestionnaire } from '../../utils/qItem';
+import { FormTitleWrapper } from '../Box.styles';
+import { Typography } from '@mui/material';
+const FormTitle = memo(function FormTitle(props) {
+    const { questionnaire } = props;
+    const xHtmlString = getXHtmlStringFromQuestionnaire(questionnaire);
+    const formTitle = xHtmlString ? parse(xHtmlString) : questionnaire.title;
+    return (React.createElement(FormTitleWrapper, null,
+        React.createElement(Typography, { variant: "h3", "data-test": "form-heading" }, formTitle)));
+});
+export default FormTitle;
+//# sourceMappingURL=FormTitle.js.map

package/src/components/FormRenderer/FormTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormTitle.js","sourceRoot":"","sources":["FormTitle.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,+BAA+B,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAM3C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,SAAS,CAAC,KAAqB;IAC7D,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;IAEhC,MAAM,WAAW,GAAG,+BAA+B,CAAC,aAAa,CAAC,CAAC;IACnE,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;IAEzE,OAAO,CACL,oBAAC,gBAAgB;QACf,oBAAC,UAAU,IAAC,OAAO,EAAC,IAAI,eAAW,cAAc,IAC9C,SAAS,CACC,CACI,CACpB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/src/components/FormRenderer/FormTitle.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 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';
+
+interface FormTitleProps {
+  questionnaire: Questionnaire;
+}
+
+const FormTitle = memo(function FormTitle(props: FormTitleProps) {
+  const { questionnaire } = props;
+
+  const xHtmlString = getXHtmlStringFromQuestionnaire(questionnaire);
+  const formTitle = xHtmlString ? parse(xHtmlString) : questionnaire.title;
+
+  return (
+    <FormTitleWrapper>
+      <Typography variant="h3" data-test="form-heading">
+        {formTitle}
+      </Typography>
+    </FormTitleWrapper>
+  );
+});
+
+export default FormTitle;

package/src/components/FormRenderer/FormTopLevelItem.js

@@ -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 React from 'react';
+import FormBodyTabbed from './FormBodyTabbed';
+import { containsTabs, isTabContainer } from '../../utils/tabs';
+import GroupItem from '../FormComponents/GroupItem/GroupItem';
+import SingleItem from '../FormComponents/SingleItem/SingleItem';
+import FormBodyCollapsible from './FormBodyCollapsible';
+import useResponsive from '../../hooks/useResponsive';
+function FormTopLevelItem(props) {
+    const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
+    const itemIsTabContainer = isTabContainer(topLevelQItem);
+    const itemContainsTabs = containsTabs(topLevelQItem);
+    const isDesktop = useResponsive('up', 'lg');
+    const itemIsGroup = topLevelQItem.type === 'group';
+    // If form is tabbed, it is rendered as a tabbed form
+    if (itemContainsTabs || itemIsTabContainer) {
+        if (isDesktop) {
+            return (React.createElement(FormBodyTabbed, { key: topLevelQItem.linkId, topLevelQItem: topLevelQItem, topLevelQRItem: topLevelQRItem, onQrItemChange: onQrItemChange }));
+        }
+        return (React.createElement(FormBodyCollapsible, { key: topLevelQItem.linkId, topLevelQItem: topLevelQItem, topLevelQRItem: topLevelQRItem, onQrItemChange: onQrItemChange }));
+    }
+    // If form is untabbed, it is rendered as a regular group
+    if (itemIsGroup) {
+        return (React.createElement(GroupItem, { key: topLevelQItem.linkId, qItem: topLevelQItem, qrItem: topLevelQRItem, groupCardElevation: 1, onQrItemChange: onQrItemChange, isRepeated: false }));
+    }
+    // Otherwise, it is rendered as a non-group item
+    return (React.createElement(SingleItem, { key: topLevelQItem.linkId, qItem: topLevelQItem, qrItem: topLevelQRItem, isTabled: false, onQrItemChange: onQrItemChange, isRepeated: false }));
+}
+export default FormTopLevelItem;
+//# sourceMappingURL=FormTopLevelItem.js.map

package/src/components/FormRenderer/FormTopLevelItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormTopLevelItem.js","sourceRoot":"","sources":["FormTopLevelItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,SAAS,MAAM,uCAAuC,CAAC;AAC9D,OAAO,UAAU,MAAM,yCAAyC,CAAC;AAEjE,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,aAAa,MAAM,2BAA2B,CAAC;AAOtD,SAAS,gBAAgB,CAAC,KAA4B;IACpD,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEhE,MAAM,kBAAkB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;IACzD,MAAM,gBAAgB,GAAG,YAAY,CAAC,aAAa,CAAC,CAAC;IAErD,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,aAAa,CAAC,IAAI,KAAK,OAAO,CAAC;IAEnD,qDAAqD;IACrD,IAAI,gBAAgB,IAAI,kBAAkB,EAAE;QAC1C,IAAI,SAAS,EAAE;YACb,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,aAAa,CAAC,MAAM,EACzB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;SACH;QAED,OAAO,CACL,oBAAC,mBAAmB,IAClB,GAAG,EAAE,aAAa,CAAC,MAAM,EACzB,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;KACH;IAED,yDAAyD;IACzD,IAAI,WAAW,EAAE;QACf,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,aAAa,CAAC,MAAM,EACzB,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,cAAc,EACtB,kBAAkB,EAAE,CAAC,EACrB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,KAAK,GACjB,CACH,CAAC;KACH;IAED,gDAAgD;IAChD,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,aAAa,CAAC,MAAM,EACzB,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,KAAK,EACf,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,KAAK,GACjB,CACH,CAAC;AACJ,CAAC;AAED,eAAe,gBAAgB,CAAC"}

package/src/components/FormRenderer/FormTopLevelItem.tsx

@@ -0,0 +1,93 @@
+/*
+ * 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 { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import FormBodyTabbed from './FormBodyTabbed';
+import { containsTabs, isTabContainer } from '../../utils/tabs';
+import GroupItem from '../FormComponents/GroupItem/GroupItem';
+import SingleItem from '../FormComponents/SingleItem/SingleItem';
+import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
+import FormBodyCollapsible from './FormBodyCollapsible';
+import useResponsive from '../../hooks/useResponsive';
+
+interface FormTopLevelItemProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  topLevelQItem: QuestionnaireItem;
+  topLevelQRItem: QuestionnaireResponseItem;
+}
+
+function FormTopLevelItem(props: FormTopLevelItemProps) {
+  const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
+
+  const itemIsTabContainer = isTabContainer(topLevelQItem);
+  const itemContainsTabs = containsTabs(topLevelQItem);
+
+  const isDesktop = useResponsive('up', 'lg');
+
+  const itemIsGroup = topLevelQItem.type === 'group';
+
+  // If form is tabbed, it is rendered as a tabbed form
+  if (itemContainsTabs || itemIsTabContainer) {
+    if (isDesktop) {
+      return (
+        <FormBodyTabbed
+          key={topLevelQItem.linkId}
+          topLevelQItem={topLevelQItem}
+          topLevelQRItem={topLevelQRItem}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    }
+
+    return (
+      <FormBodyCollapsible
+        key={topLevelQItem.linkId}
+        topLevelQItem={topLevelQItem}
+        topLevelQRItem={topLevelQRItem}
+        onQrItemChange={onQrItemChange}
+      />
+    );
+  }
+
+  // If form is untabbed, it is rendered as a regular group
+  if (itemIsGroup) {
+    return (
+      <GroupItem
+        key={topLevelQItem.linkId}
+        qItem={topLevelQItem}
+        qrItem={topLevelQRItem}
+        groupCardElevation={1}
+        onQrItemChange={onQrItemChange}
+        isRepeated={false}
+      />
+    );
+  }
+
+  // Otherwise, it is rendered as a non-group item
+  return (
+    <SingleItem
+      key={topLevelQItem.linkId}
+      qItem={topLevelQItem}
+      qrItem={topLevelQRItem}
+      isTabled={false}
+      onQrItemChange={onQrItemChange}
+      isRepeated={false}
+    />
+  );
+}
+
+export default FormTopLevelItem;

package/src/components/FormRenderer/SmartFormsRenderer.js

@@ -0,0 +1,37 @@
+/*
+ * 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 useInitialiseRenderer from '../../hooks/useInitialiseRenderer';
+import { Box, CircularProgress, Typography } from '@mui/material';
+import { QueryClientProvider } from '@tanstack/react-query';
+import useQueryClient from '../../hooks/useQueryClient';
+import FormRenderer from './FormRenderer';
+// TODO add terminiology server
+function SmartFormsRenderer(props) {
+    const { questionnaire, questionnaireResponse, additionalVariables } = props;
+    const isLoading = useInitialiseRenderer(questionnaire, questionnaireResponse, additionalVariables);
+    const queryClient = useQueryClient();
+    if (isLoading) {
+        return (React.createElement(Box, { display: "flex", alignItems: "center", columnGap: 2 },
+            React.createElement(CircularProgress, null),
+            React.createElement(Typography, null, "Loading questionnaire...")));
+    }
+    return (React.createElement(QueryClientProvider, { client: queryClient },
+        React.createElement(FormRenderer, null)));
+}
+export default SmartFormsRenderer;
+//# sourceMappingURL=SmartFormsRenderer.js.map

package/src/components/FormRenderer/SmartFormsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartFormsRenderer.js","sourceRoot":"","sources":["SmartFormsRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,qBAAqB,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,cAAc,MAAM,4BAA4B,CAAC;AACxD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAQ1C,+BAA+B;AAC/B,SAAS,kBAAkB,CAAC,KAA8B;IACxD,MAAM,EAAE,aAAa,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC;IAE5E,MAAM,SAAS,GAAG,qBAAqB,CACrC,aAAa,EACb,qBAAqB,EACrB,mBAAmB,CACpB,CAAC;IACF,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,IAAI,SAAS,EAAE;QACb,OAAO,CACL,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,CAAC;YAClD,oBAAC,gBAAgB,OAAG;YACpB,oBAAC,UAAU,mCAAsC,CAC7C,CACP,CAAC;KACH;IAED,OAAO,CACL,oBAAC,mBAAmB,IAAC,MAAM,EAAE,WAAW;QACtC,oBAAC,YAAY,OAAG,CACI,CACvB,CAAC;AACJ,CAAC;AAED,eAAe,kBAAkB,CAAC"}

package/src/components/FormRenderer/SmartFormsRenderer.tsx

@@ -0,0 +1,59 @@
+/*
+ * 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 { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
+import useInitialiseRenderer from '../../hooks/useInitialiseRenderer';
+import { Box, CircularProgress, Typography } from '@mui/material';
+import { QueryClientProvider } from '@tanstack/react-query';
+import useQueryClient from '../../hooks/useQueryClient';
+import BaseRenderer from './BaseRenderer';
+
+interface SmartFormsRendererProps {
+  questionnaire: Questionnaire;
+  questionnaireResponse?: QuestionnaireResponse;
+  additionalVariables?: Record<string, object>;
+}
+
+// TODO add terminiology server
+function SmartFormsRenderer(props: SmartFormsRendererProps) {
+  const { questionnaire, questionnaireResponse, additionalVariables } = props;
+
+  const isLoading = useInitialiseRenderer(
+    questionnaire,
+    questionnaireResponse,
+    additionalVariables
+  );
+  const queryClient = useQueryClient();
+
+  if (isLoading) {
+    return (
+      <Box display="flex" alignItems="center" columnGap={2}>
+        <CircularProgress />
+        <Typography>Loading questionnaire...</Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BaseRenderer />
+    </QueryClientProvider>
+  );
+}
+
+export default SmartFormsRenderer;

package/src/components/FormRenderer/index.js

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+export { default as SmartFormsRenderer } from './SmartFormsRenderer';
+//# sourceMappingURL=index.js.map

package/src/components/FormRenderer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}

package/src/components/FormRenderer/index.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+export { default as SmartFormsRenderer } from './SmartFormsRenderer';
+export { default as BaseRenderer } from './BaseRenderer';

package/src/components/Iconify/Iconify.js

@@ -0,0 +1,26 @@
+/*
+ * 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, { forwardRef, memo } from 'react';
+import { Icon } from '@iconify/react';
+import { Box } from '@mui/material';
+const Iconify = memo(forwardRef(function Iconify(props, ref) {
+    // eslint-disable-next-line react/prop-types
+    const { icon, width = 20, height = 20, sx } = props;
+    return React.createElement(Box, { ref: ref, component: Icon, icon: icon, sx: Object.assign({ width, height }, sx) });
+}));
+export default Iconify;
+//# sourceMappingURL=Iconify.js.map

package/src/components/Iconify/Iconify.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Iconify.js","sourceRoot":"","sources":["Iconify.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AASpC,MAAM,OAAO,GAAG,IAAI,CAClB,UAAU,CAAC,SAAS,OAAO,CAAC,KAAmB,EAAE,GAAG;IAClD,4CAA4C;IAC5C,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC;IACpD,OAAO,oBAAC,GAAG,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,kBAAI,KAAK,EAAE,MAAM,IAAK,EAAE,IAAM,CAAC;AACtF,CAAC,CAAC,CACH,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/src/components/Iconify/Iconify.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, { forwardRef, memo } from 'react';
+import { Icon } from '@iconify/react';
+import type { SxProps, Theme } from '@mui/material';
+import { Box } from '@mui/material';
+
+interface IconifyProps {
+  icon: string;
+  width?: number;
+  height?: number;
+  sx?: SxProps<Theme>;
+}
+
+const Iconify = memo(
+  forwardRef(function Iconify(props: IconifyProps, ref) {
+    // eslint-disable-next-line react/prop-types
+    const { icon, width = 20, height = 20, sx } = props;
+    return <Box ref={ref} component={Icon} icon={icon} sx={{ width, height, ...sx }} />;
+  })
+);
+
+export default Iconify;

package/src/components/Lists.styles.js

@@ -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 { 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
+    }
+}));
+//# sourceMappingURL=Lists.styles.js.map

package/src/components/Lists.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lists.styles.js","sourceRoot":"","sources":["Lists.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAChE,kBAAkB,EAAE;QAClB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;QACjC,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;QACvD,YAAY,EAAE,EAAE;QAChB,uBAAuB,EAAE;YACvB,UAAU,EAAE,MAAM;SACnB;KACF;IACD,2BAA2B,EAAE;QAC3B,KAAK,EAAE,SAAS;QAChB,YAAY,EAAE,EAAE;KACjB;IACD,iCAAiC,EAAE;QACjC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI;QACjC,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC;QACxD,YAAY,EAAE,EAAE;KACjB;CACF,CAAC,CAAC,CAAC"}

package/src/components/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/Tabs/CompleteTabButton.js

@@ -0,0 +1,29 @@
+/*
+ * 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 { IconButton, Tooltip } from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+const CompleteTabButton = memo(function CompleteTabButton(props) {
+    const { tabLinkId, tabIsMarkedAsComplete } = props;
+    const markTabAsComplete = useQuestionnaireStore((state) => state.markTabAsComplete);
+    return (React.createElement(Tooltip, { title: tabIsMarkedAsComplete ? 'Mark as incomplete' : 'Complete tab' },
+        React.createElement(IconButton, { onClick: () => markTabAsComplete(tabLinkId) },
+            React.createElement(CheckCircleIcon, { color: tabIsMarkedAsComplete ? 'success' : 'inherit' }))));
+});
+export default CompleteTabButton;
+//# sourceMappingURL=CompleteTabButton.js.map