@aehrc/smart-forms-renderer 0.3.0 → 0.5.0

package/src/components/FormRenderer/BaseRenderer.tsx

@@ -0,0 +1,82 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { Container, Fade } from '@mui/material';
+import FormTopLevelItem from '../FormRenderer/FormTopLevelItem';
+import type { QuestionnaireResponse, QuestionnaireResponseItem } from 'fhir/r4';
+import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+import useQuestionnaireResponseStore from '../../stores/useQuestionnaireResponseStore';
+
+function BaseRenderer() {
+  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
+  const updateExpressions = useQuestionnaireStore((state) => state.updateExpressions);
+  const updatableResponse = useQuestionnaireResponseStore((state) => state.updatableResponse);
+  const updateResponse = useQuestionnaireResponseStore((state) => state.updateResponse);
+
+  function handleTopLevelQRItemChange(newTopLevelQItem: QuestionnaireResponseItem, index: number) {
+    if (!updatableResponse.item || updatableResponse.item.length === 0) {
+      return;
+    }
+
+    const updatedItems = [...updatableResponse.item]; // Copy the original array of items
+    updatedItems[index] = newTopLevelQItem; // Modify the item at the specified index
+
+    const updatedResponse: QuestionnaireResponse = {
+      ...updatableResponse,
+      item: updatedItems
+    };
+
+    updateExpressions(updatedResponse);
+    updateResponse(updatedResponse);
+  }
+
+  const topLevelQItems = sourceQuestionnaire.item;
+  const topLevelQRItems = updatableResponse.item;
+
+  if (!topLevelQItems) {
+    return <>Questionnaire does not have any items</>;
+  }
+
+  return (
+    <Fade in={true} timeout={500}>
+      <Container maxWidth="xl">
+        {topLevelQItems.map((qItem, index) => {
+          const qrItem = topLevelQRItems
+            ? topLevelQRItems[index]
+            : {
+                linkId: qItem.linkId,
+                text: qItem.text
+              };
+
+          return (
+            <FormTopLevelItem
+              key={qItem.linkId}
+              topLevelQItem={qItem}
+              topLevelQRItem={qrItem}
+              onQrItemChange={(newTopLevelQRItem) =>
+                handleTopLevelQRItemChange(newTopLevelQRItem, index)
+              }
+            />
+          );
+        })}
+      </Container>
+    </Fade>
+  );
+}
+
+export default BaseRenderer;

package/src/components/FormRenderer/FormBodyCollapsible.tsx

@@ -0,0 +1,96 @@
+/*
+ * 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 { Stack } from '@mui/material';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
+import { updateQrGroup } from '../../utils/qrItem';
+import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
+import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
+import FormBodySingleCollapsibleWrapper from './FormBodySingleCollapsibleWrapper';
+
+interface FormBodyCollapsibleProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  topLevelQItem: QuestionnaireItem;
+  topLevelQRItem: QuestionnaireResponseItem;
+}
+
+function FormBodyCollapsibleWrapper(props: FormBodyCollapsibleProps) {
+  const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
+
+  const currentTab = useQuestionnaireStore((state) => state.currentTabIndex);
+  const tabs = useQuestionnaireStore((state) => state.tabs);
+
+  const switchTab = useQuestionnaireStore((state) => state.switchTab);
+
+  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</>;
+  }
+
+  function handleToggleExpand(index: number) {
+    switchTab(currentTab === index ? -1 : index);
+  }
+
+  if (!qItems || !qrItems) {
+    return <>Unable to load form</>;
+  }
+
+  const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, indexMap);
+
+  return (
+    <Stack rowGap={1}>
+      {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;
+        }
+
+        return (
+          <FormBodySingleCollapsibleWrapper
+            key={qItem.linkId}
+            qItem={qItem}
+            qrItem={qrItem}
+            index={i}
+            selectedIndex={currentTab}
+            onToggleExpand={handleToggleExpand}
+            onQrItemChange={handleQrGroupChange}
+          />
+        );
+      })}
+    </Stack>
+  );
+}
+
+export default FormBodyCollapsibleWrapper;

package/src/components/FormRenderer/FormBodySingleCollapsible.tsx

@@ -0,0 +1,76 @@
+/*
+ * 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, { memo } from 'react';
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  Tooltip,
+  Typography
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { getContextDisplays } from '../../utils/tabs';
+import type { QuestionnaireItem } from 'fhir/r4';
+import { getShortText } from '../../utils/itemControl';
+import ContextDisplayItem from '../FormComponents/ItemParts/ContextDisplayItem';
+
+interface FormBodySingleCollapsibleProps {
+  qItem: QuestionnaireItem;
+  index: number;
+  selectedIndex: number;
+  onToggleExpand: (index: number) => void;
+  children: ReactNode;
+}
+
+const FormBodySingleCollapsible = memo(function FormBodySingleCollapsible(
+  props: FormBodySingleCollapsibleProps
+) {
+  const { qItem, index, selectedIndex, onToggleExpand, children } = props;
+
+  const contextDisplayItems = getContextDisplays(qItem);
+
+  const collapsibleLabel = getShortText(qItem) ?? qItem.text ?? '';
+
+  return (
+    <Accordion
+      expanded={selectedIndex === index}
+      TransitionProps={{ unmountOnExit: true, timeout: 250 }}
+      onChange={() => onToggleExpand(index)}>
+      <AccordionSummary
+        expandIcon={
+          <Tooltip title={'Expand'}>
+            <ExpandMoreIcon />
+          </Tooltip>
+        }>
+        <Box display="flex" alignItems="center" justifyContent="space-between" width="100%" mr={3}>
+          <Typography variant="subtitle2">{collapsibleLabel}</Typography>
+          <Box display="flex" columnGap={0.5}>
+            {contextDisplayItems.map((item) => {
+              return <ContextDisplayItem key={item.linkId} displayItem={item} />;
+            })}
+          </Box>
+        </Box>
+      </AccordionSummary>
+      <AccordionDetails>{children}</AccordionDetails>
+    </Accordion>
+  );
+});
+
+export default FormBodySingleCollapsible;

package/src/components/FormRenderer/FormBodySingleCollapsibleWrapper.tsx

@@ -0,0 +1,60 @@
+/*
+ * 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 GroupItem from '../FormComponents/GroupItem/GroupItem';
+import FormBodySingleCollapsible from './FormBodySingleCollapsible';
+import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
+import useHidden from '../../hooks/useHidden';
+
+interface FormBodySingleCollapsibleProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+  qItem: QuestionnaireItem;
+  qrItem: QuestionnaireResponseItem;
+  index: number;
+  selectedIndex: number;
+  onToggleExpand: (index: number) => void;
+}
+
+function FormBodySingleCollapsibleWrapper(props: FormBodySingleCollapsibleProps) {
+  const { qItem, qrItem, index, selectedIndex, onToggleExpand, onQrItemChange } = props;
+
+  const itemIsHidden = useHidden(qItem);
+  if (itemIsHidden) {
+    return null;
+  }
+
+  return (
+    <FormBodySingleCollapsible
+      key={qItem.linkId}
+      qItem={qItem}
+      index={index}
+      selectedIndex={selectedIndex}
+      onToggleExpand={onToggleExpand}>
+      <GroupItem
+        qItem={qItem}
+        qrItem={qrItem}
+        isRepeated={true}
+        groupCardElevation={1}
+        onQrItemChange={onQrItemChange}
+      />
+    </FormBodySingleCollapsible>
+  );
+}
+
+export default FormBodySingleCollapsibleWrapper;

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.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.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.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 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';
+import ThemeProvider from '../../theme/Theme';
+
+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 (
+    <ThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        <BaseRenderer />
+      </QueryClientProvider>
+    </ThemeProvider>
+  );
+}
+
+export default SmartFormsRenderer;

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.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;