@aehrc/smart-forms-renderer 0.30.2 → 0.31.0

package/src/stores/terminologyServerStore.ts

@@ -20,16 +20,43 @@ import { createSelectors } from './selector';
 
 const ONTOSERVER_R4 = 'https://r4.ontoserver.csiro.au/fhir';
 
-interface TerminologyServerStoreType {
+/**
+ * TerminologyServerStore properties and methods
+ * Properties can be accessed for fine-grain details.
+ * Methods are usually used internally, using them from an external source is not recommended.
+ *
+ * @property url - The current terminology server URL
+ * @method setUrl - Set the terminology server URL
+ * @method resetUrl - Reset the terminology server URL to the default
+ *
+ * @author Sean Fong
+ */
+export interface TerminologyServerStoreType {
   url: string;
   setUrl: (newUrl: string) => void;
   resetUrl: () => void;
 }
 
+/**
+ * Terminology server state management store. This is used for resolving valueSets externally.
+ * Defaults to use https://r4.ontoserver.csiro.au/fhir.
+ * This is the vanilla version of the store which can be used in non-React environments.
+ * @see {TerminologyServerStoreType} for available properties and methods.
+ *
+ * @author Sean Fong
+ */
 export const terminologyServerStore = createStore<TerminologyServerStoreType>()((set) => ({
   url: ONTOSERVER_R4,
   setUrl: (newUrl: string) => set(() => ({ url: newUrl })),
   resetUrl: () => set(() => ({ url: ONTOSERVER_R4 }))
 }));
 
+/**
+ * Terminology server state management store. This is used for resolving valueSets externally.
+ * Defaults to use https://r4.ontoserver.csiro.au/fhir.
+ * This is the React version of the store which can be used as React hooks in React functional components.
+ * @see {TerminologyServerStoreType} for available properties and methods.
+ *
+ * @author Sean Fong
+ */
 export const useTerminologyServerStore = createSelectors(terminologyServerStore);

package/src/stories/{BuildFormButtonForStorybook.tsx → StorybookWrappers/BuildFormButtonForStorybook.tsx}

@@ -17,20 +17,27 @@
 
 // @ts-ignore
 import React from 'react';
+import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import { Box, IconButton, Tooltip } from '@mui/material';
-import Iconify from '../components/Iconify/Iconify';
+import Iconify from '../../components/Iconify/Iconify';
+import { buildForm } from '../../utils';
 
 interface BuildFormButtonProps {
-  onBuild: () => void;
+  questionnaire: Questionnaire;
+  questionnaireResponse?: QuestionnaireResponse;
 }
 
 function BuildFormButtonForStorybook(props: BuildFormButtonProps) {
-  const { onBuild } = props;
+  const { questionnaire, questionnaireResponse } = props;
+
+  async function handleBuildForm() {
+    await buildForm(questionnaire, questionnaireResponse);
+  }
 
   return (
     <Box display="flex" mb={0.5} alignItems="center" columnGap={3}>
-      <Tooltip title="Build form" placement="right">
-        <IconButton onClick={onBuild} size="small" color="primary">
+      <Tooltip title="Build form with questionnaire response" placement="right">
+        <IconButton onClick={handleBuildForm} size="small" color="primary">
           <Iconify icon="ph:hammer" sx={{ mb: 0.5 }} />
         </IconButton>
       </Tooltip>

package/src/stories/StorybookWrappers/BuildFormButtonTesterWrapperForStorybook.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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.
+ */
+
+// @ts-ignore
+import React from 'react';
+import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
+import { BaseRenderer } from '../../components';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { RendererThemeProvider } from '../../theme';
+import { useBuildForm, useRendererQueryClient } from '../../hooks';
+import BuildFormButtonForStorybook from './BuildFormButtonForStorybook';
+
+interface BuildFormButtonTesterWrapperForStorybookProps {
+  questionnaire: Questionnaire;
+  questionnaireResponse?: QuestionnaireResponse;
+}
+
+/**
+ * This is a demo wrapper which initialises the BaseRenderer with the passed in questionnaire using useBuildForm.
+ * It also provides a button to build the form with the passed in questionnaire + questionnaireResponse.
+ * It was done as a two-step process for demo purposes.
+ *
+ * Use this pattern if you already have a pre-populated/pre-filled/draft response.
+ * If you want to pre-pop on the fly, see https://github.com/aehrc/smart-forms/blob/main/packages/smart-forms-renderer/src/stories/StorybookWrappers/PrePopWrapperForStorybook.tsx instead
+ *
+ * @author Sean Fong
+ */
+function BuildFormButtonTesterWrapperForStorybook(
+  props: BuildFormButtonTesterWrapperForStorybookProps
+) {
+  const { questionnaire, questionnaireResponse } = props;
+
+  const queryClient = useRendererQueryClient();
+
+  const isBuilding = useBuildForm(questionnaire);
+
+  if (isBuilding) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <RendererThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        <div>
+          <BuildFormButtonForStorybook
+            questionnaire={questionnaire}
+            questionnaireResponse={questionnaireResponse}
+          />
+          <BaseRenderer />
+        </div>
+      </QueryClientProvider>
+    </RendererThemeProvider>
+  );
+}
+
+export default BuildFormButtonTesterWrapperForStorybook;

package/src/stories/{BuildFormWrapper.tsx → StorybookWrappers/BuildFormWrapperForStorybook.tsx}

@@ -18,35 +18,34 @@
 // @ts-ignore
 import React from 'react';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
-import { BaseRenderer } from '../components';
+import { BaseRenderer } from '../../components';
 import { QueryClientProvider } from '@tanstack/react-query';
-import ThemeProvider from '../theme/Theme';
-import useQueryClient from '../hooks/useQueryClient';
-import useBuildFormForStorybook from './useBuildFormForStorybook';
+import RendererThemeProvider from '../../theme/Theme';
+import { useBuildForm } from '../../hooks';
+import useRendererQueryClient from '../../hooks/useRendererQueryClient';
 
-interface BuildFormWrapperProps {
+interface BuildFormWrapperForStorybookProps {
   questionnaire: Questionnaire;
   questionnaireResponse?: QuestionnaireResponse;
 }
 
-function BuildFormWrapper(props: BuildFormWrapperProps) {
+function BuildFormWrapperForStorybook(props: BuildFormWrapperForStorybookProps) {
   const { questionnaire, questionnaireResponse } = props;
 
-  const queryClient = useQueryClient();
-
-  const isBuilding = useBuildFormForStorybook(questionnaire, questionnaireResponse);
+  const queryClient = useRendererQueryClient();
+  const isBuilding = useBuildForm(questionnaire, questionnaireResponse);
 
   if (isBuilding) {
     return <div>Loading...</div>;
   }
 
   return (
-    <ThemeProvider>
+    <RendererThemeProvider>
       <QueryClientProvider client={queryClient}>
         <BaseRenderer />
       </QueryClientProvider>
-    </ThemeProvider>
+    </RendererThemeProvider>
   );
 }
 
-export default BuildFormWrapper;
+export default BuildFormWrapperForStorybook;

package/src/stories/{BuildFormButtonTesterWrapper.tsx → StorybookWrappers/FormValidationTesterWrapperForStorybook.tsx}

@@ -18,44 +18,47 @@
 // @ts-ignore
 import React from 'react';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
-import { BaseRenderer } from '../components';
+import { BaseRenderer } from '../../components';
 import { QueryClientProvider } from '@tanstack/react-query';
-import ThemeProvider from '../theme/Theme';
-import useQueryClient from '../hooks/useQueryClient';
-import useBuildFormForStorybook from './useBuildFormForStorybook';
-import { buildForm } from '../utils';
-import BuildFormButtonForStorybook from './BuildFormButtonForStorybook';
+import { RendererThemeProvider } from '../../theme';
+import { useBuildForm, useRendererQueryClient } from '../../hooks';
+import { Grid } from '@mui/material';
+import FormValidationViewerForStorybook from './FormValidationViewerForStorybook';
 
-interface BuildFormButtonTesterWrapperProps {
+interface FormValidationTesterWrapperForStorybookProps {
   questionnaire: Questionnaire;
   questionnaireResponse?: QuestionnaireResponse;
 }
 
-function BuildFormButtonTesterWrapper(props: BuildFormButtonTesterWrapperProps) {
+function FormValidationTesterWrapperForStorybook(
+  props: FormValidationTesterWrapperForStorybookProps
+) {
   const { questionnaire, questionnaireResponse } = props;
 
-  const queryClient = useQueryClient();
+  const isBuilding = useBuildForm(questionnaire, questionnaireResponse);
 
-  const isBuilding = useBuildFormForStorybook(questionnaire);
-
-  async function handleBuildForm() {
-    await buildForm(questionnaire, questionnaireResponse);
-  }
+  const queryClient = useRendererQueryClient();
 
   if (isBuilding) {
     return <div>Loading...</div>;
   }
 
   return (
-    <ThemeProvider>
+    <RendererThemeProvider>
       <QueryClientProvider client={queryClient}>
         <div>
-          <BuildFormButtonForStorybook onBuild={handleBuildForm} />
-          <BaseRenderer />
+          <Grid container>
+            <Grid item xs={6}>
+              <BaseRenderer />
+            </Grid>
+            <Grid item xs={6}>
+              <FormValidationViewerForStorybook />
+            </Grid>
+          </Grid>
         </div>
       </QueryClientProvider>
-    </ThemeProvider>
+    </RendererThemeProvider>
   );
 }
 
-export default BuildFormButtonTesterWrapper;
+export default FormValidationTesterWrapperForStorybook;

package/src/stories/{useBuildFormForStorybook.ts → StorybookWrappers/FormValidationViewerForStorybook.tsx}

@@ -15,23 +15,14 @@
  * limitations under the License.
  */
 
-import { useLayoutEffect, useState } from 'react';
-import { buildForm } from '../utils';
-import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
+// @ts-ignore
+import React from 'react';
+import { useQuestionnaireResponseStore } from '../../stores';
 
-function useBuildFormForStorybook(
-  questionnaire: Questionnaire,
-  questionnaireResponse?: QuestionnaireResponse
-) {
-  const [isBuilding, setIsBuilding] = useState(true);
+function FormValidationViewerForStorybook() {
+  const invalidItems = useQuestionnaireResponseStore.use.invalidItems();
 
-  useLayoutEffect(() => {
-    buildForm(questionnaire, questionnaireResponse).then(() => {
-      setIsBuilding(false);
-    });
-  }, [questionnaire, questionnaireResponse]);
-
-  return isBuilding;
+  return <pre style={{ fontSize: 9 }}>{JSON.stringify(invalidItems, null, 2)}</pre>;
 }
 
-export default useBuildFormForStorybook;
+export default FormValidationViewerForStorybook;

package/src/stories/StorybookWrappers/InitialiseFormWrapperForStorybook.tsx

@@ -0,0 +1,105 @@
+/*
+ * 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.
+ */
+
+// @ts-ignore
+import React from 'react';
+import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
+import { BaseRenderer } from '../../components';
+import { QueryClientProvider } from '@tanstack/react-query';
+import RendererThemeProvider from '../../theme/Theme';
+import useRendererQueryClient from '../../hooks/useRendererQueryClient';
+import type Client from 'fhirclient/lib/Client';
+import useInitialiseForm from '../../hooks/useInitialiseForm';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+
+interface InitialiseFormWrapperProps {
+  questionnaire: Questionnaire;
+  questionnaireResponse?: QuestionnaireResponse;
+  readOnly?: boolean;
+  terminologyServerUrl?: string;
+  additionalVariables?: Record<string, object>;
+  fhirClient?: Client;
+}
+
+/**
+ * This is a one-to-one replacement for the SmartFormsRenderer for demo purposes.
+ * Instead of using this React component, define your own wrapper component that uses the BaseRenderer directly.
+ * Things to note:
+ * - It is required to wrap the BaseRenderer with the QueryClientProvider to make requests.
+ * - You can wrap the BaseRenderer with the RendererThemeProvider to apply the default renderer theme used in Smart Forms. Optionally, you can define your own ThemeProvider.
+ * - Make your buildForm() call in a button click or other event handler. Alternatively, you can use the useInitialiseForm hook to initialise the form.
+ * - Make your own initialiseFhirClient() call in a button click or other event handler. Alternatively, you can use the useInitialiseForm hook to initialise the form.
+ * - The initialised FHIRClient is only used for further FHIR calls. It does not provide pre-population capabilities.
+ *
+ * For button click usage examples of buildForm(), see:
+ * - https://github.com/aehrc/smart-forms/blob/main/packages/smart-forms-renderer/src/stories/StorybookWrappers/BuildFormButtonTesterWrapperForStorybook.tsx
+ * - https://github.com/aehrc/smart-forms/blob/main/packages/smart-forms-renderer/src/stories/StorybookWrappers/BuildFormButtonForStorybook.tsx
+ * - https://github.com/aehrc/smart-forms/blob/main/packages/smart-forms-renderer/src/stories/StorybookWrappers/PrePopWrapperForStorybook.tsx
+ * - https://github.com/aehrc/smart-forms/blob/main/packages/smart-forms-renderer/src/stories/StorybookWrappers/PrePopButtonForStorybook.tsx
+ *
+ * @author Sean Fong
+ */
+function InitialiseFormWrapperForStorybook(props: InitialiseFormWrapperProps) {
+  const {
+    questionnaire,
+    questionnaireResponse,
+    readOnly,
+    terminologyServerUrl,
+    additionalVariables,
+    fhirClient
+  } = props;
+
+  // The renderer requires a @tanstack/react-query QueryClientProvider to make requests
+  const queryClient = useRendererQueryClient();
+
+  /**
+   * The useInitialiseForm hook provides initialisation logic for the form
+   * Alternatively (and recommended to do so), you can initialise your form via a button click or other event handler.
+   *
+   * @see {@link https://github.com/aehrc/smart-forms/blob/main/packages/smart-forms-renderer/src/stories/BuildFormButtonForStorybook.tsx} for button click usage examples.
+   */
+  const isInitialising = useInitialiseForm(
+    questionnaire,
+    questionnaireResponse,
+    readOnly,
+    terminologyServerUrl,
+    additionalVariables,
+    fhirClient
+  );
+
+  // Free feel to customise your loading animation here
+  if (isInitialising) {
+    return (
+      <Box display="flex" alignItems="center" columnGap={2}>
+        <CircularProgress />
+        <Typography>Loading questionnaire...</Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <RendererThemeProvider>
+      <QueryClientProvider client={queryClient}>
+        <BaseRenderer />
+      </QueryClientProvider>
+    </RendererThemeProvider>
+  );
+}
+
+export default InitialiseFormWrapperForStorybook;

package/src/stories/{PrePopButtonForStorybook.tsx → StorybookWrappers/PrePopButtonForStorybook.tsx}

@@ -18,27 +18,29 @@
 // @ts-ignore
 import React from 'react';
 import { Box, CircularProgress, Fade, IconButton, Tooltip } from '@mui/material';
-import PlayCircleIcon from '@mui/icons-material/PlayCircle';
+import CloudDownloadIcon from '@mui/icons-material/CloudDownload';
 import Typography from '@mui/material/Typography';
 
-interface PrePopButtonProps {
+interface PrePopButtonForStorybookProps {
   isPopulating: boolean;
   onPopulate: () => void;
 }
 
-function PrePopButtonForStorybook(props: PrePopButtonProps) {
+function PrePopButtonForStorybook(props: PrePopButtonForStorybookProps) {
   const { isPopulating, onPopulate } = props;
 
   return (
     <Box display="flex" mb={0.5} alignItems="center" columnGap={3}>
       <Tooltip title="Pre-populate form" placement="right">
-        <IconButton disabled={isPopulating} onClick={onPopulate} size="small" color="primary">
-          {isPopulating ? (
-            <CircularProgress size={20} color="inherit" sx={{ mb: 0.5 }} />
-          ) : (
-            <PlayCircleIcon />
-          )}
-        </IconButton>
+        <span>
+          <IconButton disabled={isPopulating} onClick={onPopulate} size="small" color="primary">
+            {isPopulating ? (
+              <CircularProgress size={20} color="inherit" sx={{ mb: 0.5 }} />
+            ) : (
+              <CloudDownloadIcon />
+            )}
+          </IconButton>
+        </span>
       </Tooltip>
       {isPopulating ? (
         <Fade in={true} timeout={100}>

package/src/stories/{PrePopWrapper.tsx → StorybookWrappers/PrePopWrapperForStorybook.tsx}

@@ -18,32 +18,41 @@
 // @ts-ignore
 import React, { useState } from 'react';
 import type { Patient, Practitioner, Questionnaire } from 'fhir/r4';
-import { BaseRenderer } from '../components';
+import { BaseRenderer } from '../../components';
 import { QueryClientProvider } from '@tanstack/react-query';
-import ThemeProvider from '../theme/Theme';
-import useQueryClient from '../hooks/useQueryClient';
+import { RendererThemeProvider } from '../../theme';
+import { useBuildForm, useRendererQueryClient } from '../../hooks';
 import type Client from 'fhirclient/lib/Client';
-import useBuildFormForStorybook from './useBuildFormForStorybook';
-import { buildForm } from '../utils';
 import PrePopButtonForStorybook from './PrePopButtonForStorybook';
 import { populateQuestionnaire } from '@aehrc/sdc-populate';
 import { fetchResourceCallback } from './populateCallbackForStorybook';
+import { buildForm } from '../../utils';
 
-interface PrePopWrapperProps {
+interface PrePopWrapperForStorybookProps {
   questionnaire: Questionnaire;
   fhirClient: Client;
   patient: Patient;
   user: Practitioner;
 }
 
-function PrePopWrapper(props: PrePopWrapperProps) {
+/**
+ * This is a demo wrapper which initialises the BaseRenderer with the passed in questionnaire using useBuildForm.
+ * It also provides a button to pre-populate the questionnaire on the fly using populateQuestionnaire() from '@aehrc/sdc-populate'.
+ * This does in-app population and you have to define your own callback function to retrieve resources from your source server.
+ *
+ * Use this pattern if you do not have a pre-populated/pre-filled/draft response and want to pre-populate on the fly.
+ * If you already have a questionnaireResponse, see https://github.com/aehrc/smart-forms/blob/main/packages/smart-forms-renderer/src/stories/StorybookWrappers/BuildFormButtonTesterWrapperForStorybook.tsx instead
+ *
+ * @author Sean Fong
+ */
+function PrePopWrapperForStorybook(props: PrePopWrapperForStorybookProps) {
   const { questionnaire, fhirClient, patient, user } = props;
 
   const [isPopulating, setIsPopulating] = useState(false);
 
-  const isBuilding = useBuildFormForStorybook(questionnaire);
+  const isBuilding = useBuildForm(questionnaire);
 
-  const queryClient = useQueryClient();
+  const queryClient = useRendererQueryClient();
 
   function handlePrepopulate() {
     setIsPopulating(true);
@@ -65,8 +74,7 @@ function PrePopWrapper(props: PrePopWrapperProps) {
 
       const { populatedResponse } = populateResult;
 
-      // buildForm is used here because there is a really bizarre bug - using the store hooks directly doesn't update the baseRenderer
-      // could be the fact that it doesn't play well with storybook
+      // Call to buildForm to pre-populate the QR which repaints the entire BaseRenderer view
       await buildForm(questionnaire, populatedResponse);
 
       setIsPopulating(false);
@@ -78,15 +86,15 @@ function PrePopWrapper(props: PrePopWrapperProps) {
   }
 
   return (
-    <ThemeProvider>
+    <RendererThemeProvider>
       <QueryClientProvider client={queryClient}>
         <div>
           <PrePopButtonForStorybook isPopulating={isPopulating} onPopulate={handlePrepopulate} />
           {isPopulating ? null : <BaseRenderer />}
         </div>
       </QueryClientProvider>
-    </ThemeProvider>
+    </RendererThemeProvider>
   );
 }
 
-export default PrePopWrapper;
+export default PrePopWrapperForStorybook;

package/src/stories/StorybookWrappers/ValidateFormButtonForStorybook.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.
+ */
+
+// @ts-ignore
+import React from 'react';
+import { Box, IconButton, Tooltip } from '@mui/material';
+import Iconify from '../../components/Iconify/Iconify';
+
+interface ValidationFormButtonForStorybookProps {
+  onValidate: () => void;
+}
+
+function ValidationFormButtonForStorybook(props: ValidationFormButtonForStorybookProps) {
+  const { onValidate } = props;
+
+  return (
+    <Box display="flex" mb={0.5} alignItems="center" columnGap={3}>
+      <Tooltip title="Validate form" placement="right">
+        <IconButton onClick={onValidate} size="small" color="primary">
+          <Iconify icon="material-symbols:data-check" sx={{ mb: 0.5 }} />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  );
+}
+
+export default ValidationFormButtonForStorybook;

package/src/stories/StorybookWrappers/index.ts

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+export { default as InitialiseFormWrapperForStorybook } from './InitialiseFormWrapperForStorybook';
+export { default as BuildFormButtonTesterWrapperForStorybook } from './BuildFormButtonTesterWrapperForStorybook';
+export { default as PrePopWrapperForStorybook } from './PrePopWrapperForStorybook';

package/src/stories/{populateCallbackForStorybook.ts → StorybookWrappers/populateCallbackForStorybook.ts}

@@ -20,11 +20,17 @@ import axios from 'axios';
 
 const ABSOLUTE_URL_REGEX = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/;
 
-export interface RequestConfig {
+interface RequestConfig {
   clientEndpoint: string;
   authToken: string | null;
 }
 
+/**
+ * Sample callback function to fetch resources from your source server when using populate() or populateQuestionnaire() from @aehrc/sdc-populate.
+ * See https://github.com/aehrc/smart-forms/blob/main/packages/smart-forms-renderer/src/stories/StorybookWrappers/PrePopWrapperForStorybook.tsx#L50-L59 for usage.
+ *
+ * @author Sean Fong
+ */
 export const fetchResourceCallback: FetchResourceCallback = (
   query: string,
   requestConfig: RequestConfig
@@ -32,7 +38,7 @@ export const fetchResourceCallback: FetchResourceCallback = (
   let { clientEndpoint } = requestConfig;
   const { authToken } = requestConfig;
 
-  const headers = {
+  const headers: any = {
     Accept: 'application/json;charset=utf-8'
   };