@aehrc/smart-forms-renderer 0.36.1 → 0.37.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.36.1",
+  "version": "0.37.2",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/aehrc/smart-forms#readme",
   "dependencies": {
-    "@aehrc/sdc-populate": "^2.3.0",
+    "@aehrc/sdc-populate": "^2.3.1",
     "@iconify/react": "^4.1.1",
     "dayjs": "^1.11.10",
     "deep-diff": "^1.0.2",
@@ -45,7 +45,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-markdown": "^8.0.7",
     "style-to-object": "^1.0.6",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.3",
@@ -66,7 +66,7 @@
     "@storybook/addon-links": "^8.0.10",
     "@storybook/addon-onboarding": "^8.0.10",
     "@storybook/blocks": "^8.0.10",
-    "@storybook/react": "^8.0.10",
+    "@storybook/react": "^8.2.6",
     "@storybook/react-vite": "^8.0.10",
     "@storybook/test": "^8.0.10",
     "@swc/cli": "^0.1.63",

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

@@ -0,0 +1,10 @@
+import { styled } from '@mui/material/styles';
+import Fab from '@mui/material/Fab';
+
+export const SecondaryFab = styled(Fab)(({ theme }) => ({
+  color: '#fff',
+  background: theme.palette.secondary.main,
+  '&:hover': {
+    background: theme.palette.secondary.dark
+  }
+}));

package/src/components/FormComponents/GroupItem/GroupHeading.tsx

@@ -29,10 +29,11 @@ interface GroupHeadingProps extends PropsWithIsRepeatedAttribute {
   qItem: QuestionnaireItem;
   readOnly: boolean;
   tabIsMarkedAsComplete?: boolean;
+  pageIsMarkedAsComplete?: boolean;
 }
 
 const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
-  const { qItem, readOnly, tabIsMarkedAsComplete, isRepeated } = props;
+  const { qItem, readOnly, tabIsMarkedAsComplete, pageIsMarkedAsComplete, isRepeated } = props;
 
   const contextDisplayItems = getContextDisplays(qItem);
 
@@ -41,14 +42,15 @@ const GroupHeading = memo(function GroupHeading(props: GroupHeadingProps) {
   }
 
   const isTabHeading = tabIsMarkedAsComplete !== undefined;
+  const isPageHeading = pageIsMarkedAsComplete !== undefined;
 
   return (
     <>
       <Box display="flex" alignItems="center" width="100%">
         <Typography
           variant="h6"
-          fontSize={isTabHeading ? 16 : 15}
-          color={readOnly && !isTabHeading ? 'text.secondary' : 'text.primary'}>
+          fontSize={isTabHeading || isPageHeading ? 16 : 15}
+          color={readOnly && (!isTabHeading || !isPageHeading) ? 'text.secondary' : 'text.primary'}>
           <ItemLabelText qItem={qItem} />
         </Typography>
         <Box flexGrow={1} />

package/src/components/FormComponents/GroupItem/GroupItem.tsx

@@ -28,6 +28,7 @@ import type {
 import type { QrRepeatGroup } from '../../../interfaces/repeatGroup.interface';
 import useHidden from '../../../hooks/useHidden';
 import type { Tabs } from '../../../interfaces/tab.interface';
+import type { Pages } from '../../../interfaces/page.interface';
 import GroupItemView from './GroupItemView';
 
 interface GroupItemProps
@@ -41,6 +42,9 @@ interface GroupItemProps
   tabIsMarkedAsComplete?: boolean;
   tabs?: Tabs;
   currentTabIndex?: number;
+  pageIsMarkedAsComplete?: boolean;
+  pages?: Pages;
+  currentPageIndex?: number;
 }
 
 function GroupItem(props: GroupItemProps) {
@@ -52,6 +56,9 @@ function GroupItem(props: GroupItemProps) {
     tabIsMarkedAsComplete,
     tabs,
     currentTabIndex,
+    pageIsMarkedAsComplete,
+    pages,
+    currentPageIndex,
     parentIsReadOnly,
     parentIsRepeatGroup,
     parentRepeatGroupIndex,
@@ -83,7 +90,7 @@ function GroupItem(props: GroupItemProps) {
   }
 
   if (!qItems || !qrItems) {
-    return <>Unable to load group, something has gone terribly wrong.</>;
+    return <>Group Item: Unable to load group, something has gone terribly wrong.</>;
   }
 
   // If an item has multiple answers, it is a repeat group
@@ -99,6 +106,9 @@ function GroupItem(props: GroupItemProps) {
       tabIsMarkedAsComplete={tabIsMarkedAsComplete}
       tabs={tabs}
       currentTabIndex={currentTabIndex}
+      pageIsMarkedAsComplete={pageIsMarkedAsComplete}
+      pages={pages}
+      currentPageIndex={currentPageIndex}
       parentIsReadOnly={parentIsReadOnly}
       parentIsRepeatGroup={parentIsRepeatGroup}
       parentRepeatGroupIndex={parentRepeatGroupIndex}

package/src/components/FormComponents/GroupItem/GroupItemView.tsx

@@ -26,6 +26,7 @@ import type {
   PropsWithQrRepeatGroupChangeHandler
 } from '../../../interfaces/renderProps.interface';
 import type { Tabs } from '../../../interfaces/tab.interface';
+import type { Pages } from '../../../interfaces/page.interface';
 import GroupHeading from './GroupHeading';
 import { GroupCard } from './GroupItem.styles';
 import TabButtonsWrapper from './TabButtonsWrapper';
@@ -37,6 +38,7 @@ import Divider from '@mui/material/Divider';
 import { getGroupCollapsible } from '../../../utils/qItem';
 import useReadOnly from '../../../hooks/useReadOnly';
 import { GroupAccordion } from './GroupAccordion.styles';
+import PageButtonsWrapper from './PageButtonWrapper';
 
 interface GroupItemViewProps
   extends PropsWithQrItemChangeHandler,
@@ -51,6 +53,9 @@ interface GroupItemViewProps
   tabIsMarkedAsComplete?: boolean;
   tabs?: Tabs;
   currentTabIndex?: number;
+  pageIsMarkedAsComplete?: boolean;
+  pages?: Pages;
+  currentPageIndex?: number;
 }
 
 function GroupItemView(props: GroupItemViewProps) {
@@ -63,6 +68,9 @@ function GroupItemView(props: GroupItemViewProps) {
     tabIsMarkedAsComplete,
     tabs,
     currentTabIndex,
+    pageIsMarkedAsComplete,
+    pages,
+    currentPageIndex,
     parentIsReadOnly,
     parentIsRepeatGroup,
     parentRepeatGroupIndex,
@@ -91,6 +99,7 @@ function GroupItemView(props: GroupItemViewProps) {
             qItem={qItem}
             readOnly={readOnly}
             tabIsMarkedAsComplete={tabIsMarkedAsComplete}
+            pageIsMarkedAsComplete={pageIsMarkedAsComplete}
             isRepeated={isRepeated}
           />
         </AccordionSummary>
@@ -117,6 +126,7 @@ function GroupItemView(props: GroupItemViewProps) {
 
             {/* Next tab button at the end of each tab group */}
             <TabButtonsWrapper currentTabIndex={currentTabIndex} tabs={tabs} />
+            <PageButtonsWrapper currentPageIndex={currentPageIndex} pages={pages} />
           </>
         </AccordionDetails>
       </GroupAccordion>
@@ -133,6 +143,7 @@ function GroupItemView(props: GroupItemViewProps) {
           qItem={qItem}
           readOnly={readOnly}
           tabIsMarkedAsComplete={tabIsMarkedAsComplete}
+          pageIsMarkedAsComplete={pageIsMarkedAsComplete}
           isRepeated={isRepeated}
         />
         {childQItems.map((qItem: QuestionnaireItem, i) => {
@@ -155,6 +166,7 @@ function GroupItemView(props: GroupItemViewProps) {
 
         {/* Next tab button at the end of each tab group */}
         <TabButtonsWrapper currentTabIndex={currentTabIndex} tabs={tabs} />
+        <PageButtonsWrapper currentPageIndex={currentPageIndex} pages={pages} />
       </GroupCard>
     </QGroupContainerBox>
   );

package/src/components/FormComponents/GroupItem/NextPageButton.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2024 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 Iconify from '../../Iconify/Iconify';
+import { SecondaryFab } from '../Button.styles';
+
+interface NextPageButtonProps {
+  isDisabled: boolean;
+  onNextPageClick: () => void;
+}
+
+function NextPageButton(props: NextPageButtonProps) {
+  const { isDisabled, onNextPageClick } = props;
+
+  return (
+    <SecondaryFab size="small" aria-label="next" disabled={isDisabled} onClick={onNextPageClick}>
+      <Iconify icon="material-symbols:chevron-right-rounded" />
+    </SecondaryFab>
+  );
+}
+
+export default NextPageButton;

package/src/components/FormComponents/GroupItem/PageButtonWrapper.tsx

@@ -0,0 +1,78 @@
+import React, { memo } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import type { Pages } from '../../../interfaces/page.interface';
+import { useQuestionnaireStore } from '../../../stores';
+import NextPageButton from './NextPageButton';
+import PreviousPageButton from './PreviousPageButton';
+import useNextAndPreviousVisiblePages from '../../../hooks/useNextAndPreviousVisiblePages';
+
+interface PageButtonsWrapperProps {
+  currentPageIndex?: number;
+  pages?: Pages;
+}
+
+const PageButtonsWrapper = memo(function PageButtonsWrapper(props: PageButtonsWrapperProps) {
+  const { currentPageIndex, pages } = props;
+
+  const switchPage = useQuestionnaireStore.use.switchPage();
+
+  const { previousPageIndex, nextPageIndex, numOfVisiblePages } = useNextAndPreviousVisiblePages(
+    currentPageIndex,
+    pages
+  );
+
+  const pagesNotDefined = currentPageIndex === undefined || pages === undefined;
+
+  // Event handlers
+  function handlePreviousPageButtonClick() {
+    if (previousPageIndex === null) {
+      return;
+    }
+
+    switchPage(previousPageIndex);
+
+    // Scroll to top of page
+    window.scrollTo(0, 0);
+  }
+
+  function handleNextPageButtonClick() {
+    if (nextPageIndex === null) {
+      return;
+    }
+
+    switchPage(nextPageIndex);
+
+    // Scroll to top of page
+    window.scrollTo(0, 0);
+  }
+
+  if (pagesNotDefined) {
+    return null;
+  }
+
+  const previousPageButtonHidden = previousPageIndex === null;
+  const nextPageButtonHidden = nextPageIndex === null;
+
+  // This is more of a fallback check to prevent the user from navigating to an invisble page if buttons are visble for some reason
+  const pageButtonsDisabled = numOfVisiblePages <= 1;
+
+  return (
+    <Box display="flex" mt={3} gap={2} alignItems="center">
+      <Box flexGrow={1} />
+      <Typography variant="subtitle2" color="text.secondary">
+        Page {`${currentPageIndex + 1} / ${numOfVisiblePages}`}
+      </Typography>
+      <PreviousPageButton
+        isDisabled={pageButtonsDisabled || previousPageButtonHidden}
+        onPreviousPageClick={handlePreviousPageButtonClick}
+      />
+      <NextPageButton
+        isDisabled={pageButtonsDisabled || nextPageButtonHidden}
+        onNextPageClick={handleNextPageButtonClick}
+      />
+    </Box>
+  );
+});
+
+export default PageButtonsWrapper;

package/src/components/FormComponents/GroupItem/PreviousPageButton.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2024 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 Iconify from '../../Iconify/Iconify';
+import { SecondaryFab } from '../Button.styles';
+
+interface PreviousPageButtonProps {
+  isDisabled: boolean;
+  onPreviousPageClick: () => void;
+}
+
+function PreviousPageButton(props: PreviousPageButtonProps) {
+  const { isDisabled, onPreviousPageClick } = props;
+
+  return (
+    <SecondaryFab
+      size="small"
+      aria-label="back"
+      disabled={isDisabled}
+      onClick={onPreviousPageClick}>
+      <Iconify icon="material-symbols:chevron-left-rounded" />
+    </SecondaryFab>
+  );
+}
+
+export default PreviousPageButton;

package/src/components/Renderer/BaseRenderer.tsx

@@ -24,7 +24,9 @@ import { useQuestionnaireResponseStore, useQuestionnaireStore } from '../../stor
 import cloneDeep from 'lodash.clonedeep';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import { updateQrItemsInGroup } from '../../utils/qrItem';
+import { everyIsPages } from '../../utils/page';
 import type { QrRepeatGroup } from '../../interfaces/repeatGroup.interface';
+import FormTopLevelPage from './FormTopLevelPage';
 
 /**
  * Main component of the form-rendering engine.
@@ -74,6 +76,25 @@ function BaseRenderer() {
   // If an item has multiple answers, it is a repeat group
   const topLevelQRItemsByIndex = getQrItemsIndex(topLevelQItems, topLevelQRItems, qItemsIndexMap);
 
+  const everyItemIsPage = everyIsPages(topLevelQItems);
+
+  if (everyItemIsPage) {
+    return (
+      <Fade in={true} timeout={500}>
+        <Container maxWidth="xl">
+          <FormTopLevelPage
+            topLevelQItems={topLevelQItems}
+            topLevelQRItems={topLevelQRItemsByIndex}
+            parentIsReadOnly={readOnly}
+            onQrItemChange={(newTopLevelQRItem) =>
+              handleTopLevelQRItemSingleChange(newTopLevelQRItem)
+            }
+          />
+        </Container>
+      </Fade>
+    );
+  }
+
   return (
     <Fade in={true} timeout={500}>
       <Container maxWidth="xl">

package/src/components/Renderer/FormBodyPage.tsx

@@ -0,0 +1,93 @@
+import React, { useMemo } from 'react';
+import Grid from '@mui/material/Grid';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import TabContext from '@mui/lab/TabContext';
+import TabPanel from '@mui/lab/TabPanel';
+import GroupItem from '../FormComponents/GroupItem/GroupItem';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../interfaces/renderProps.interface';
+import { useQuestionnaireStore } from '../../stores';
+import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
+import { createEmptyQrGroup, updateQrItemsInGroup } from '../../utils/qrItem';
+
+interface FormBodyPageProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithParentIsReadOnlyAttribute {
+  topLevelQItem: QuestionnaireItem;
+  topLevelQRItem: QuestionnaireResponseItem | null;
+}
+
+function FormBodyPage(props: FormBodyPageProps) {
+  const { topLevelQItem, topLevelQRItem, parentIsReadOnly, onQrItemChange } = props;
+
+  const pages = useQuestionnaireStore.use.pages();
+  const currentPage = useQuestionnaireStore.use.currentPageIndex();
+
+  const indexMap: Record<string, number> = useMemo(
+    () => mapQItemsIndex(topLevelQItem),
+    [topLevelQItem]
+  );
+
+  const nonNullTopLevelQRItem = topLevelQRItem ?? createEmptyQrGroup(topLevelQItem);
+
+  const qItems = topLevelQItem.item;
+  const qrItems = nonNullTopLevelQRItem.item;
+
+  function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
+    updateQrItemsInGroup(qrItem, null, nonNullTopLevelQRItem, indexMap);
+    onQrItemChange(nonNullTopLevelQRItem);
+  }
+
+  if (!qItems || !qrItems) {
+    return <>Unable to load form</>;
+  }
+
+  const qrItemsByIndex = getQrItemsIndex(qItems, qrItems, indexMap);
+
+  return (
+    <Grid container spacing={1.5}>
+      <TabContext value={currentPage.toString()}>
+        <Grid item xs={12} md={12} lg={12}>
+          {qItems.map((qItem, i) => {
+            const qrItem = qrItemsByIndex[i];
+
+            const isNotRepeatGroup = !Array.isArray(qrItem);
+            const isPage = !!pages[qItem.linkId];
+
+            if (!isPage || !isNotRepeatGroup) {
+              // Something has gone horribly wrong
+              return null;
+            }
+
+            const isRepeated = qItem.repeats ?? false;
+            const pageIsMarkedAsComplete = pages[qItem.linkId].isComplete ?? false;
+
+            return (
+              <TabPanel
+                key={qItem.linkId}
+                sx={{ p: 0 }}
+                value={i.toString()}
+                data-test="renderer-page-panel">
+                <GroupItem
+                  qItem={qItem}
+                  qrItem={qrItem ?? null}
+                  isRepeated={isRepeated}
+                  groupCardElevation={1}
+                  pageIsMarkedAsComplete={pageIsMarkedAsComplete}
+                  pages={pages}
+                  currentPageIndex={currentPage}
+                  parentIsReadOnly={parentIsReadOnly}
+                  onQrItemChange={handleQrGroupChange}
+                />
+              </TabPanel>
+            );
+          })}
+        </Grid>
+      </TabContext>
+    </Grid>
+  );
+}
+
+export default FormBodyPage;

package/src/components/Renderer/FormTopLevelItem.tsx

@@ -18,7 +18,9 @@
 import React from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import FormBodyTabbed from './FormBodyTabbed';
+import FormBodyPage from './FormBodyPage';
 import { containsTabs, isTabContainer } from '../../utils/tabs';
+import { containsPages, isPage } from '../../utils/page';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import SingleItem from '../FormComponents/SingleItem/SingleItem';
 import type {
@@ -53,6 +55,9 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
   const itemIsTabContainer = isTabContainer(topLevelQItem);
   const itemContainsTabs = containsTabs(topLevelQItem);
 
+  const itemIsPageContainer = isPage(topLevelQItem);
+  const itemContainsPages = containsPages(topLevelQItem);
+
   const isTablet = useResponsive('up', 'md');
 
   const itemIsGroup = topLevelQItem.type === 'group';
@@ -106,6 +111,18 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
     );
   }
 
+  if (itemContainsPages || itemIsPageContainer) {
+    return (
+      <FormBodyPage
+        key={topLevelQItem.linkId}
+        topLevelQItem={topLevelQItem}
+        topLevelQRItem={topLevelQRItem}
+        parentIsReadOnly={readOnly}
+        onQrItemChange={onQrItemChange}
+      />
+    );
+  }
+
   // If form is untabbed, it is rendered as a regular group
   if (itemIsGroup) {
     return (

package/src/components/Renderer/FormTopLevelPage.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import Grid from '@mui/material/Grid';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import TabContext from '@mui/lab/TabContext';
+import TabPanel from '@mui/lab/TabPanel';
+import GroupItem from '../FormComponents/GroupItem/GroupItem';
+import type {
+  PropsWithParentIsReadOnlyAttribute,
+  PropsWithQrItemChangeHandler
+} from '../../interfaces/renderProps.interface';
+import { useQuestionnaireStore } from '../../stores';
+
+interface FormTopLevelPageProps
+  extends PropsWithQrItemChangeHandler,
+    PropsWithParentIsReadOnlyAttribute {
+  topLevelQItems: QuestionnaireItem[];
+  topLevelQRItems: (QuestionnaireResponseItem | QuestionnaireResponseItem[] | undefined)[];
+}
+
+function FormTopLevelPage(props: FormTopLevelPageProps) {
+  const { topLevelQItems, topLevelQRItems, parentIsReadOnly, onQrItemChange } = props;
+
+  const pages = useQuestionnaireStore.use.pages();
+  const currentPage = useQuestionnaireStore.use.currentPageIndex();
+
+  return (
+    <Grid container spacing={1.5}>
+      <TabContext value={currentPage.toString()}>
+        <Grid item xs={12} md={12} lg={12}>
+          {topLevelQItems.map((qItem, i) => {
+            const qrItem = topLevelQRItems[i];
+
+            const isNotRepeatGroup = !Array.isArray(qrItem);
+            const isPage = !!pages[qItem.linkId];
+
+            if (!isPage || !isNotRepeatGroup) {
+              // Something has gone horribly wrong
+              return null;
+            }
+
+            const isRepeated = qItem.repeats ?? false;
+            const pageIsMarkedAsComplete = pages[qItem.linkId].isComplete ?? false;
+
+            return (
+              <TabPanel
+                key={qItem.linkId}
+                sx={{ p: 0 }}
+                value={i.toString()}
+                data-test="renderer-page-panel">
+                <GroupItem
+                  qItem={qItem}
+                  qrItem={qrItem ?? null}
+                  isRepeated={isRepeated}
+                  groupCardElevation={1}
+                  pageIsMarkedAsComplete={pageIsMarkedAsComplete}
+                  pages={pages}
+                  currentPageIndex={currentPage}
+                  parentIsReadOnly={parentIsReadOnly}
+                  onQrItemChange={onQrItemChange}
+                />
+              </TabPanel>
+            );
+          })}
+        </Grid>
+      </TabContext>
+    </Grid>
+  );
+}
+
+export default FormTopLevelPage;

package/src/hooks/useNextAndPreviousVisiblePages.ts

@@ -0,0 +1,69 @@
+import { useQuestionnaireStore } from '../stores';
+import type { Pages } from '../interfaces/page.interface';
+import { constructPagesWithVisibility } from '../utils/page';
+
+function useNextAndPreviousVisiblePages(
+  currentPageIndex?: number,
+  pages?: Pages
+): { previousPageIndex: number | null; nextPageIndex: number | null; numOfVisiblePages: number } {
+  const enableWhenIsActivated = useQuestionnaireStore.use.enableWhenIsActivated();
+  const enableWhenItems = useQuestionnaireStore.use.enableWhenItems();
+  const enableWhenExpressions = useQuestionnaireStore.use.enableWhenExpressions();
+
+  const pagesNotDefined = currentPageIndex === undefined || pages === undefined;
+
+  if (pagesNotDefined) {
+    return { previousPageIndex: null, nextPageIndex: null, numOfVisiblePages: 0 };
+  }
+
+  const pagesWithVisibility = constructPagesWithVisibility({
+    pages,
+    enableWhenIsActivated,
+    enableWhenItems,
+    enableWhenExpressions
+  });
+
+  return {
+    previousPageIndex: getPreviousPageIndex(currentPageIndex, pagesWithVisibility),
+    nextPageIndex: getNextPageIndex(currentPageIndex, pagesWithVisibility),
+    numOfVisiblePages: pagesWithVisibility.filter((tab) => tab.isVisible).length
+  };
+}
+
+function getPreviousPageIndex(
+  currentPageIndex: number,
+  pagesWithVisibility: { linkId: string; isVisible: boolean }[]
+): number | null {
+  const previousPages = pagesWithVisibility.slice(0, currentPageIndex);
+  const foundIndex = previousPages.reverse().findIndex((tab) => tab.isVisible);
+
+  // Previous visible tab not found
+  if (foundIndex === -1) {
+    return null;
+  }
+
+  // Previous visible tab less than 0
+  const previousPageIndex = currentPageIndex - foundIndex - 1;
+  if (previousPageIndex < 0) {
+    return null;
+  }
+
+  return previousPageIndex;
+}
+
+function getNextPageIndex(
+  currentPageIndex: number,
+  pagesWithVisibility: { linkId: string; isVisible: boolean }[]
+): number | null {
+  const subsequentPages = pagesWithVisibility.slice(currentPageIndex + 1);
+  const foundIndex = subsequentPages.findIndex((tab) => tab.isVisible);
+
+  // Next visible tab not found, something is wrong
+  if (foundIndex === -1) {
+    return null;
+  }
+
+  return currentPageIndex + foundIndex + 1;
+}
+
+export default useNextAndPreviousVisiblePages;

package/src/interfaces/page.interface.ts

@@ -0,0 +1,13 @@
+/**
+ * Page interface
+ *
+ * @property pageIndex - The index of the page
+ * @property isComplete - Whether the page is marked as complete
+ * @property isHidden - Whether the page is hidden
+ */
+export type Page = { pageIndex: number; isComplete: boolean; isHidden: boolean };
+
+/**
+ * Key-value pair of pages `Record<linkId, Page>`
+ */
+export type Pages = Record<string, Page>;