@aehrc/smart-forms-renderer 0.9.2 → 0.10.0

package/src/hooks/useDecimalCalculatedExpression.ts

@@ -18,7 +18,7 @@
 import { useEffect, useState } from 'react';
 import { createEmptyQrItem } from '../utils/qrItem';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import useQuestionnaireStore from '../stores/useQuestionnaireStore';
+import { useQuestionnaireStore } from '../stores';
 
 interface UseDecimalCalculatedExpression {
   calcExpUpdated: boolean;
@@ -37,7 +37,7 @@ function useDecimalCalculatedExpression(
 ): UseDecimalCalculatedExpression {
   const { qItem, inputValue, precision, setInputValue, onQrItemChange } = props;
 
-  const calculatedExpressions = useQuestionnaireStore((state) => state.calculatedExpressions);
+  const calculatedExpressions = useQuestionnaireStore.use.calculatedExpressions();
 
   const [calcExpUpdated, setCalcExpUpdated] = useState(false);
 

package/src/hooks/useHidden.ts

@@ -17,13 +17,13 @@
 
 import type { QuestionnaireItem } from 'fhir/r4';
 import { hasHiddenExtension } from '../utils/itemControl';
-import useQuestionnaireStore from '../stores/useQuestionnaireStore';
+import { useQuestionnaireStore } from '../stores';
 import { isHiddenByEnableWhens } from '../utils/qItem';
 
 function useHidden(qItem: QuestionnaireItem): boolean {
-  const enableWhenIsActivated = useQuestionnaireStore((state) => state.enableWhenIsActivated);
-  const enableWhenItems = useQuestionnaireStore((state) => state.enableWhenItems);
-  const enableWhenExpressions = useQuestionnaireStore((state) => state.enableWhenExpressions);
+  const enableWhenIsActivated = useQuestionnaireStore.use.enableWhenIsActivated();
+  const enableWhenItems = useQuestionnaireStore.use.enableWhenItems();
+  const enableWhenExpressions = useQuestionnaireStore.use.enableWhenExpressions();
 
   if (hasHiddenExtension(qItem)) {
     return true;

package/src/hooks/useInitialiseGroupTable.ts

@@ -17,10 +17,10 @@
 
 import type { QuestionnaireResponseItem } from 'fhir/r4';
 import { nanoid } from 'nanoid';
-import type { GroupTableRow } from '../interfaces/groupTable.interface';
+import type { GroupTableRowModel } from '../interfaces/groupTable.interface';
 
-function useInitialiseGroupTable(qrItems: QuestionnaireResponseItem[]): GroupTableRow[] {
-  let initialGroupTableRows: GroupTableRow[] = [
+function useInitialiseGroupTable(qrItems: QuestionnaireResponseItem[]): GroupTableRowModel[] {
+  let initialGroupTableRows: GroupTableRowModel[] = [
     {
       nanoId: nanoid(),
       qrItem: null

package/src/hooks/useInitialiseRenderer.ts

@@ -18,12 +18,14 @@
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import { useLayoutEffect, useState } from 'react';
 import { createEmptyQuestionnaireResponse } from '../utils/qrItem';
-import useQuestionnaireStore from '../stores/useQuestionnaireStore';
-import useQuestionnaireResponseStore from '../stores/useQuestionnaireResponseStore';
 import type Client from 'fhirclient/lib/Client';
-import useSmartConfigStore from '../stores/useSmartConfigStore';
 import { readEncounter, readPatient, readUser } from '../api/smartClient';
-import useTerminologyServerStore from '../stores/useTerminologyServerStore';
+import {
+  useQuestionnaireResponseStore,
+  useQuestionnaireStore,
+  useSmartConfigStore,
+  useTerminologyServerStore
+} from '../stores';
 
 function useInitialiseRenderer(
   questionnaire: Questionnaire,
@@ -32,21 +34,18 @@ function useInitialiseRenderer(
   terminologyServerUrl?: string,
   fhirClient?: Client
 ): boolean {
-  const buildSourceQuestionnaire = useQuestionnaireStore((state) => state.buildSourceQuestionnaire);
-  const updatePopulatedProperties = useQuestionnaireStore(
-    (state) => state.updatePopulatedProperties
-  );
-  const buildSourceResponse = useQuestionnaireResponseStore((state) => state.buildSourceResponse);
-  const setUpdatableResponseAsPopulated = useQuestionnaireResponseStore(
-    (state) => state.setUpdatableResponseAsPopulated
-  );
+  const buildSourceQuestionnaire = useQuestionnaireStore.use.buildSourceQuestionnaire();
+  const updatePopulatedProperties = useQuestionnaireStore.use.updatePopulatedProperties();
+  const buildSourceResponse = useQuestionnaireResponseStore.use.buildSourceResponse();
+  const setUpdatableResponseAsPopulated =
+    useQuestionnaireResponseStore.use.setUpdatableResponseAsPopulated();
 
-  const setTerminologyServerUrl = useTerminologyServerStore((state) => state.setUrl);
-  const resetTerminologyServerUrl = useTerminologyServerStore((state) => state.resetUrl);
-  const setSmartClient = useSmartConfigStore((state) => state.setClient);
-  const setPatient = useSmartConfigStore((state) => state.setPatient);
-  const setUser = useSmartConfigStore((state) => state.setUser);
-  const setEncounter = useSmartConfigStore((state) => state.setEncounter);
+  const setTerminologyServerUrl = useTerminologyServerStore.use.setUrl();
+  const resetTerminologyServerUrl = useTerminologyServerStore.use.resetUrl();
+  const setSmartClient = useSmartConfigStore.use.setClient();
+  const setPatient = useSmartConfigStore.use.setPatient();
+  const setUser = useSmartConfigStore.use.setUser();
+  const setEncounter = useSmartConfigStore.use.setEncounter();
 
   const [loading, setLoading] = useState(true);
 

package/src/hooks/useIntegerCalculatedExpression.ts

@@ -18,7 +18,7 @@
 import { useEffect, useState } from 'react';
 import { createEmptyQrItem } from '../utils/qrItem';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import useQuestionnaireStore from '../stores/useQuestionnaireStore';
+import { useQuestionnaireStore } from '../stores/questionnaireStore';
 
 interface UseIntegerCalculatedExpression {
   calcExpUpdated: boolean;
@@ -36,7 +36,7 @@ function useIntegerCalculatedExpression(
 ): UseIntegerCalculatedExpression {
   const { qItem, inputValue, setInputValue, onQrItemChange } = props;
 
-  const calculatedExpressions = useQuestionnaireStore((state) => state.calculatedExpressions);
+  const calculatedExpressions = useQuestionnaireStore.use.calculatedExpressions();
 
   const [calcExpUpdated, setCalcExpUpdated] = useState(false);
 

package/src/hooks/useStringCalculatedExpression.ts

@@ -18,7 +18,7 @@
 import { useEffect, useState } from 'react';
 import { createEmptyQrItem } from '../utils/qrItem';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import useQuestionnaireStore from '../stores/useQuestionnaireStore';
+import { useQuestionnaireStore } from '../stores/questionnaireStore';
 
 interface UseStringCalculatedExpression {
   calcExpUpdated: boolean;
@@ -36,7 +36,7 @@ function useStringCalculatedExpression(
 ): UseStringCalculatedExpression {
   const { qItem, inputValue, setInputValue, onQrItemChange } = props;
 
-  const calculatedExpressions = useQuestionnaireStore((state) => state.calculatedExpressions);
+  const calculatedExpressions = useQuestionnaireStore.use.calculatedExpressions();
 
   const [calcExpUpdated, setCalcExpUpdated] = useState(false);
 

package/src/hooks/useTerminologyServerQuery.ts

@@ -20,8 +20,7 @@ import type { Coding, QuestionnaireItem, ValueSet } from 'fhir/r4';
 import { getTerminologyServerUrl, getValueSetCodings, getValueSetPromise } from '../utils/valueSet';
 
 import type { AlertColor } from '@mui/material/Alert';
-import useQuestionnaireStore from '../stores/useQuestionnaireStore';
-import useTerminologyServerStore from '../stores/useTerminologyServerStore';
+import { useQuestionnaireStore, useTerminologyServerStore } from '../stores';
 
 function useTerminologyServerQuery(
   qItem: QuestionnaireItem,
@@ -29,8 +28,8 @@ function useTerminologyServerQuery(
   input: string,
   searchTerm: string
 ): { options: Coding[]; loading: boolean; feedback?: { message: string; color: AlertColor } } {
-  const processedValueSetUrls = useQuestionnaireStore((state) => state.processedValueSetUrls);
-  const defaultTerminologyServerUrl = useTerminologyServerStore((state) => state.url);
+  const processedValueSetUrls = useQuestionnaireStore.use.processedValueSetUrls();
+  const defaultTerminologyServerUrl = useTerminologyServerStore.use.url();
 
   let fullUrl = '';
   let options: Coding[] = [];

package/src/hooks/useValueSetCodings.ts

@@ -26,22 +26,20 @@ import {
 import { getAnswerExpression } from '../utils/itemControl';
 import fhirpath from 'fhirpath';
 import fhirpath_r4_model from 'fhirpath/fhir-context/r4';
-import useSmartConfigStore from '../stores/useSmartConfigStore';
-import useQuestionnaireStore from '../stores/useQuestionnaireStore';
-import useTerminologyServerStore from '../stores/useTerminologyServerStore';
+import { useQuestionnaireStore, useSmartConfigStore, useTerminologyServerStore } from '../stores';
 
 function useValueSetCodings(qItem: QuestionnaireItem) {
-  const patient = useSmartConfigStore((state) => state.patient);
-  const user = useSmartConfigStore((state) => state.user);
-  const encounter = useSmartConfigStore((state) => state.encounter);
+  const patient = useSmartConfigStore.use.patient();
+  const user = useSmartConfigStore.use.user();
+  const encounter = useSmartConfigStore.use.encounter();
 
-  const launchContexts = useQuestionnaireStore((state) => state.launchContexts);
-  const processedValueSetCodings = useQuestionnaireStore((state) => state.processedValueSetCodings);
-  const cachedValueSetCodings = useQuestionnaireStore((state) => state.cachedValueSetCodings);
-  const addCodingToCache = useQuestionnaireStore((state) => state.addCodingToCache);
-  const { xFhirQueryVariables } = useQuestionnaireStore((state) => state.variables);
+  const launchContexts = useQuestionnaireStore.use.launchContexts();
+  const processedValueSetCodings = useQuestionnaireStore.use.processedValueSetCodings();
+  const cachedValueSetCodings = useQuestionnaireStore.use.cachedValueSetCodings();
+  const addCodingToCache = useQuestionnaireStore.use.addCodingToCache();
+  const { xFhirQueryVariables } = useQuestionnaireStore.use.variables();
 
-  const defaultTerminologyServerUrl = useTerminologyServerStore((state) => state.url);
+  const defaultTerminologyServerUrl = useTerminologyServerStore.use.url();
 
   const valueSetUrl = qItem.answerValueSet;
   let initialCodings = useMemo(() => {

package/src/index.ts

@@ -1,7 +1,6 @@
-import useQuestionnaireStore from './stores/useQuestionnaireStore';
+import { questionnaireResponseStore, questionnaireStore } from './stores';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import { createEmptyQuestionnaireResponse } from './utils/qrItem';
-import useQuestionnaireResponseStore from './stores/useQuestionnaireResponseStore';
 import { removeHiddenAnswers } from './utils/removeHidden';
 import type { ItemToRepopulate } from './utils/repopulateItems';
 import { getItemsToRepopulate } from './utils/repopulateItems';
@@ -23,17 +22,17 @@ export async function buildForm(
   questionnaire: Questionnaire,
   questionnaireResponse?: QuestionnaireResponse
 ): Promise<void> {
-  await useQuestionnaireStore.getState().buildSourceQuestionnaire(questionnaire);
+  await questionnaireStore.getState().buildSourceQuestionnaire(questionnaire);
 
   if (!questionnaireResponse) {
-    useQuestionnaireResponseStore
+    questionnaireResponseStore
       .getState()
       .buildSourceResponse(createEmptyQuestionnaireResponse(questionnaire));
     return;
   }
 
-  useQuestionnaireResponseStore.getState().buildSourceResponse(questionnaireResponse);
-  useQuestionnaireStore.getState().updatePopulatedProperties(questionnaireResponse);
+  questionnaireResponseStore.getState().buildSourceResponse(questionnaireResponse);
+  questionnaireStore.getState().updatePopulatedProperties(questionnaireResponse);
 }
 
 /**
@@ -42,8 +41,8 @@ export async function buildForm(
  * @author Sean Fong
  */
 export function destroyForm(): void {
-  useQuestionnaireStore.getState().destroySourceQuestionnaire();
-  useQuestionnaireResponseStore.getState().destroySourceResponse();
+  questionnaireStore.getState().destroySourceQuestionnaire();
+  questionnaireResponseStore.getState().destroySourceResponse();
 }
 
 /**
@@ -53,7 +52,7 @@ export function destroyForm(): void {
  * @author Sean Fong
  */
 export function getResponse(): QuestionnaireResponse {
-  return useQuestionnaireResponseStore.getState().updatableResponse;
+  return questionnaireResponseStore.getState().updatableResponse;
 }
 
 /**
@@ -66,9 +65,9 @@ export function removeHiddenAnswersFromResponse(
   questionnaire: Questionnaire,
   questionnaireResponse: QuestionnaireResponse
 ): QuestionnaireResponse {
-  const enableWhenIsActivated = useQuestionnaireStore.getState().enableWhenIsActivated;
-  const enableWhenItems = useQuestionnaireStore.getState().enableWhenItems;
-  const enableWhenExpressions = useQuestionnaireStore.getState().enableWhenExpressions;
+  const enableWhenIsActivated = questionnaireStore.getState().enableWhenIsActivated;
+  const enableWhenItems = questionnaireStore.getState().enableWhenItems;
+  const enableWhenExpressions = questionnaireStore.getState().enableWhenExpressions;
 
   return removeHiddenAnswers({
     questionnaire,
@@ -85,12 +84,12 @@ export function removeHiddenAnswersFromResponse(
  * @author Sean Fong
  */
 export function generateItemsToRepopulate(populatedResponse: QuestionnaireResponse) {
-  const sourceQuestionnaire = useQuestionnaireStore.getState().sourceQuestionnaire;
-  const tabs = useQuestionnaireStore.getState().tabs;
-  const updatableResponse = useQuestionnaireResponseStore.getState().updatableResponse;
-  const enableWhenIsActivated = useQuestionnaireStore.getState().enableWhenIsActivated;
-  const enableWhenItems = useQuestionnaireStore.getState().enableWhenItems;
-  const enableWhenExpressions = useQuestionnaireStore.getState().enableWhenExpressions;
+  const sourceQuestionnaire = questionnaireStore.getState().sourceQuestionnaire;
+  const tabs = questionnaireStore.getState().tabs;
+  const updatableResponse = questionnaireResponseStore.getState().updatableResponse;
+  const enableWhenIsActivated = questionnaireStore.getState().enableWhenIsActivated;
+  const enableWhenItems = questionnaireStore.getState().enableWhenItems;
+  const enableWhenExpressions = questionnaireStore.getState().enableWhenExpressions;
 
   return getItemsToRepopulate({
     sourceQuestionnaire,
@@ -109,8 +108,8 @@ export function generateItemsToRepopulate(populatedResponse: QuestionnaireRespon
  * @author Sean Fong
  */
 export function repopulateResponse(checkedItemsToRepopulate: Record<string, ItemToRepopulate>) {
-  const sourceQuestionnaire = useQuestionnaireStore.getState().sourceQuestionnaire;
-  const updatableResponse = useQuestionnaireResponseStore.getState().updatableResponse;
+  const sourceQuestionnaire = questionnaireStore.getState().sourceQuestionnaire;
+  const updatableResponse = questionnaireResponseStore.getState().updatableResponse;
 
   return repopulateItemsIntoResponse(
     sourceQuestionnaire,

package/src/interfaces/groupTable.interface.ts

@@ -17,7 +17,7 @@
 
 import type { QuestionnaireResponseItem } from 'fhir/r4';
 
-export interface GroupTableRow {
+export interface GroupTableRowModel {
   nanoId: string;
   qrItem: QuestionnaireResponseItem | null;
 }

package/src/stores/index.ts

@@ -1,3 +1,7 @@
-export { default as useQuestionnaireStore } from './useQuestionnaireStore';
-export { default as useQuestionnaireResponseStore } from './useQuestionnaireResponseStore';
-export { default as useSmartConfigStore } from './useSmartConfigStore';
+export { questionnaireStore, useQuestionnaireStore } from './questionnaireStore';
+export {
+  questionnaireResponseStore,
+  useQuestionnaireResponseStore
+} from './questionnaireResponseStore';
+export { smartConfigStore, useSmartConfigStore } from './smartConfigStore';
+export { terminologyServerStore, useTerminologyServerStore } from './terminologyServerStore';

package/src/stores/questionnaireResponseStore.ts

@@ -0,0 +1,83 @@
+/*
+ * 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 { createStore } from 'zustand/vanilla';
+import type { QuestionnaireResponse } from 'fhir/r4';
+import { emptyResponse } from '../utils/emptyResource';
+import cloneDeep from 'lodash.clonedeep';
+import type { Diff } from 'deep-diff';
+import { diff } from 'deep-diff';
+import { createSelectors } from './selector';
+
+interface QuestionnaireResponseStoreType {
+  sourceResponse: QuestionnaireResponse;
+  updatableResponse: QuestionnaireResponse;
+  formChangesHistory: (Diff<QuestionnaireResponse, QuestionnaireResponse>[] | null)[];
+  buildSourceResponse: (response: QuestionnaireResponse) => void;
+  setUpdatableResponseAsPopulated: (populatedResponse: QuestionnaireResponse) => void;
+  updateResponse: (updatedResponse: QuestionnaireResponse) => void;
+  setUpdatableResponseAsSaved: (savedResponse: QuestionnaireResponse) => void;
+  setUpdatableResponseAsEmpty: (clearedResponse: QuestionnaireResponse) => void;
+  destroySourceResponse: () => void;
+}
+
+export const questionnaireResponseStore = createStore<QuestionnaireResponseStoreType>()(
+  (set, get) => ({
+    sourceResponse: cloneDeep(emptyResponse),
+    updatableResponse: cloneDeep(emptyResponse),
+    formChangesHistory: [],
+    buildSourceResponse: (questionnaireResponse: QuestionnaireResponse) => {
+      set(() => ({
+        sourceResponse: questionnaireResponse,
+        updatableResponse: questionnaireResponse
+      }));
+    },
+    setUpdatableResponseAsPopulated: (populatedResponse: QuestionnaireResponse) => {
+      const formChanges = diff(get().updatableResponse, populatedResponse) ?? null;
+      set(() => ({
+        updatableResponse: populatedResponse,
+        formChangesHistory: [...get().formChangesHistory, formChanges]
+      }));
+    },
+    updateResponse: (updatedResponse: QuestionnaireResponse) => {
+      const formChanges = diff(get().updatableResponse, updatedResponse) ?? null;
+      set(() => ({
+        updatableResponse: updatedResponse,
+        formChangesHistory: [...get().formChangesHistory, formChanges]
+      }));
+    },
+    setUpdatableResponseAsSaved: (savedResponse: QuestionnaireResponse) =>
+      set(() => ({
+        sourceResponse: savedResponse,
+        updatableResponse: savedResponse,
+        formChangesHistory: []
+      })),
+    setUpdatableResponseAsEmpty: (clearedResponse: QuestionnaireResponse) =>
+      set(() => ({
+        updatableResponse: clearedResponse,
+        formChangesHistory: []
+      })),
+    destroySourceResponse: () =>
+      set(() => ({
+        sourceResponse: cloneDeep(emptyResponse),
+        updatableResponse: cloneDeep(emptyResponse),
+        formChangesHistory: []
+      }))
+  })
+);
+
+export const useQuestionnaireResponseStore = createSelectors(questionnaireResponseStore);

package/src/stores/{useQuestionnaireStore.ts → questionnaireStore.ts}

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { create } from 'zustand';
+import { createStore } from 'zustand/vanilla';
 import type {
   Coding,
   Questionnaire,
@@ -38,9 +38,10 @@ import { createQuestionnaireModel } from '../utils/questionnaireStoreUtils/creat
 import { initialiseFormFromResponse } from '../utils/initialiseForm';
 import { emptyQuestionnaire, emptyResponse } from '../utils/emptyResource';
 import cloneDeep from 'lodash.clonedeep';
-import useTerminologyServerStore from './useTerminologyServerStore';
+import { terminologyServerStore } from './terminologyServerStore';
+import { createSelectors } from './selector';
 
-export interface UseQuestionnaireStoreType {
+interface QuestionnaireStoreType {
   sourceQuestionnaire: Questionnaire;
   itemTypes: Record<string, string>;
   tabs: Tabs;
@@ -76,7 +77,7 @@ export interface UseQuestionnaireStoreType {
   ) => QuestionnaireResponse;
 }
 
-const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) => ({
+export const questionnaireStore = createStore<QuestionnaireStoreType>()((set, get) => ({
   sourceQuestionnaire: cloneDeep(emptyQuestionnaire),
   itemTypes: {},
   tabs: {},
@@ -97,7 +98,7 @@ const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) =>
     questionnaire,
     questionnaireResponse = cloneDeep(emptyResponse),
     additionalVariables = {},
-    terminologyServerUrl = useTerminologyServerStore.getState().url
+    terminologyServerUrl = terminologyServerStore.getState().url
   ) => {
     const questionnaireModel = await createQuestionnaireModel(
       questionnaire,
@@ -266,4 +267,4 @@ const useQuestionnaireStore = create<UseQuestionnaireStoreType>()((set, get) =>
   }
 }));
 
-export default useQuestionnaireStore;
+export const useQuestionnaireStore = createSelectors(questionnaireStore);

package/src/stores/smartConfigStore.ts

@@ -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 { createStore } from 'zustand/vanilla';
+import type { Encounter, Patient, Practitioner } from 'fhir/r4';
+import type Client from 'fhirclient/lib/Client';
+import { createSelectors } from './selector';
+
+export interface SmartConfigStoreType {
+  client: Client | null;
+  patient: Patient | null;
+  user: Practitioner | null;
+  encounter: Encounter | null;
+  setClient: (client: Client) => void;
+  setPatient: (patient: Patient) => void;
+  setUser: (user: Practitioner) => void;
+  setEncounter: (encounter: Encounter) => void;
+}
+
+export const smartConfigStore = createStore<SmartConfigStoreType>()((set) => ({
+  client: null,
+  patient: null,
+  user: null,
+  encounter: null,
+  setClient: (client: Client) => set(() => ({ client: client })),
+  setPatient: (patient: Patient) => set(() => ({ patient: patient })),
+  setUser: (user: Practitioner) => set(() => ({ user: user })),
+  setEncounter: (encounter: Encounter) => set(() => ({ encounter: encounter }))
+}));
+
+export const useSmartConfigStore = createSelectors(smartConfigStore);

package/src/stores/{useTerminologyServerStore.ts → terminologyServerStore.ts}

@@ -15,20 +15,21 @@
  * limitations under the License.
  */
 
-import { create } from 'zustand';
+import { createStore } from 'zustand/vanilla';
+import { createSelectors } from './selector';
 
 const ONTOSERVER_R4 = 'https://r4.ontoserver.csiro.au/fhir';
 
-export interface UseTerminologyServerStoreType {
+interface TerminologyServerStoreType {
   url: string;
   setUrl: (newUrl: string) => void;
   resetUrl: () => void;
 }
 
-const useTerminologyServerStore = create<UseTerminologyServerStoreType>()((set) => ({
+export const terminologyServerStore = createStore<TerminologyServerStoreType>()((set) => ({
   url: ONTOSERVER_R4,
   setUrl: (newUrl: string) => set(() => ({ url: newUrl })),
   resetUrl: () => set(() => ({ url: ONTOSERVER_R4 }))
 }));
 
-export default useTerminologyServerStore;
+export const useTerminologyServerStore = createSelectors(terminologyServerStore);

package/src/stories/MedicalHistoryTable.stories.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 ThemeProvider from '../theme/Theme';
+import type { Meta, StoryObj } from '@storybook/react';
+import { GroupTable } from '../components';
+import GTableMedicalHistoryItemJson from './assets/QItems-and-QRItems/Q_GTableMedicalHistory.json';
+import GTableMedicalHistoryAnswersJson from './assets/QItems-and-QRItems/QR_GTableMedicalHistory.json';
+import { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { DndProvider } from 'react-dnd';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Component/GroupTable',
+  component: GroupTable,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: [],
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <QueryClientProvider client={new QueryClient()}>
+          <DndProvider backend={HTML5Backend}>{Story()}</DndProvider>
+        </QueryClientProvider>
+      </ThemeProvider>
+    )
+  ]
+} satisfies Meta<typeof GroupTable>;
+
+const GTableMedicalHistoryItem = GTableMedicalHistoryItemJson as QuestionnaireItem;
+const GTableMedicalHistoryAnswers = GTableMedicalHistoryAnswersJson as QuestionnaireResponseItem[];
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+export const MedicalHistoryTable: Story = {
+  args: {
+    qItem: GTableMedicalHistoryItem,
+    qrItems: GTableMedicalHistoryAnswers,
+    groupCardElevation: 1,
+    parentIsReadOnly: false,
+    onQrRepeatGroupChange: () => {}
+  }
+};

package/src/stories/SmartFormsRenderer.stories.ts

@@ -18,24 +18,28 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { SmartFormsRenderer } from '../components';
 import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
-import Q715Json from './assets/Q715.json';
-import R715Json from './assets/R715.json';
-import QTestGridJson from './assets/QTestGrid.json';
-import RTestGridJson from './assets/RTestGrid.json';
+import Q715Json from './assets/Qs-and-QRs/Q715.json';
+import R715Json from './assets/Qs-and-QRs/R715.json';
+import QTestGridJson from './assets/Qs-and-QRs/QTestGrid.json';
+import RTestGridJson from './assets/Qs-and-QRs/RTestGrid.json';
+import QDev715Json from './assets/Qs-and-QRs/QDev715.json';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
   title: 'Component/SmartFormsRenderer',
   component: SmartFormsRenderer,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-  tags: ['autodocs']
+  tags: []
 } satisfies Meta<typeof SmartFormsRenderer>;
 
 const Q715 = Q715Json as Questionnaire;
 const R715 = R715Json as QuestionnaireResponse;
+
 const QTestGrid = QTestGridJson as Questionnaire;
 const RTestGrid = RTestGridJson as QuestionnaireResponse;
 
+const QDev715 = QDev715Json as Questionnaire;
+
 export default meta;
 type Story = StoryObj<typeof meta>;
 
@@ -54,6 +58,12 @@ export const Form715WithResponse: Story = {
   }
 };
 
+export const FormDev715: Story = {
+  args: {
+    questionnaire: QDev715
+  }
+};
+
 export const FormTestGrid: Story = {
   args: {
     questionnaire: QTestGrid