Merge pull request #576 from aehrc/feature/table-dnd

Feature/table dnd

apps/demo-renderer-app/README.md

@@ -25,3 +25,6 @@ If you are developing a production application, we recommend updating the config
 - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
 - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
 - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+
+
+Note to devs working on this: apps/demo-renderer-app is not included in npm workspaces to test if packages are working as a standalone

apps/demo-renderer-app/src/HomePage.tsx

@@ -16,7 +16,7 @@
  */
 
 import { useQuery } from '@tanstack/react-query';
-import { Questionnaire } from 'fhir/r4';
+import type { Questionnaire } from 'fhir/r4';
 import { fetchQuestionnaire, questionnaireIsValid } from './fetchQuestionnaire.ts';
 import RendererPage from './RendererPage.tsx';
 

apps/demo-renderer-app/src/fetchQuestionnaire.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Questionnaire } from 'fhir/r4';
+import type { Questionnaire } from 'fhir/r4';
 
 export async function fetchQuestionnaire(questionnaireUrl: string) {
   const response = await fetch(questionnaireUrl); // Replace with your API endpoint

apps/demo-renderer-app/src/main.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
-import { DefaultOptions, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { DefaultOptions } from '@tanstack/react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const DEFAULT_QUERY_OPTIONS: DefaultOptions = {
   queries: {

apps/smart-forms-app/cypress/e2e/saving.cy.ts

@@ -71,7 +71,7 @@ describe('save response', () => {
       cy.getByData('q-item-integer-box').eq(0).find('input').clear().wait(50);
       cy.initAgeValue(60);
 
-      cy.getByData('list-button-renderer-operation');
+      cy.getByData('renderer-operation-item');
       cy.contains('Save as Final').click();
       cy.get('.MuiButtonBase-root').contains('Save as final').click();
 

apps/smart-forms-app/cypress/e2e/viewer.cy.ts

@@ -93,7 +93,7 @@ describe('response viewer', () => {
     });
 
     it('print preview', () => {
-      cy.getByData('list-button-viewer-operation');
+      cy.getByData('renderer-operation-item');
       cy.contains('Print Preview').should('be.visible');
     });
   });

apps/smart-forms-app/cypress/support/commands.ts

@@ -32,28 +32,28 @@ Cypress.Commands.add('getByData', (selector, ...args) => {
 });
 
 Cypress.Commands.add('previewForm', () => {
-  cy.getByData('list-button-renderer-operation');
+  cy.getByData('renderer-operation-item');
   cy.contains('Preview').click();
   cy.location('pathname').should('eq', '/renderer/preview');
 });
 
 Cypress.Commands.add('clickOnNavPage', (operationName: string) => {
-  cy.getByData('list-button-renderer-nav-page');
+  cy.getByData('renderer-operation-item');
   cy.contains(operationName).click();
 });
 
 Cypress.Commands.add('clickOnRendererOperation', (operationName: string) => {
-  cy.getByData('list-button-renderer-operation');
+  cy.getByData('renderer-operation-item');
   cy.contains(operationName).click();
 });
 
 Cypress.Commands.add('clickOnViewerOperation', (operationName: string) => {
-  cy.getByData('list-button-viewer-operation');
+  cy.getByData('renderer-operation-item');
   cy.contains(operationName).click();
 });
 
 Cypress.Commands.add('editForm', () => {
-  cy.getByData('list-button-renderer-operation');
+  cy.getByData('renderer-operation-item');
   cy.contains('Editor').click();
   cy.location('pathname').should('eq', '/renderer');
 });
@@ -102,7 +102,7 @@ Cypress.Commands.add('launchFromSMARTHealthIT', () => {
 });
 
 Cypress.Commands.add('goToResponsesPage', () => {
-  cy.getByData('list-button-dashboard-nav-page');
+  cy.getByData('renderer-operation-item');
   cy.contains('Responses').click();
 });
 

apps/smart-forms-app/package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@aehrc/sdc-assemble": "^1.0.2",
     "@aehrc/sdc-populate": "^1.0.6",
-    "@aehrc/smart-forms-renderer": "^0.9.0",
+    "@aehrc/smart-forms-renderer": "^0.10.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.10.8",
     "@fontsource/material-icons": "^5.0.7",

apps/smart-forms-app/src/components/Button/RefetchButton.tsx

@@ -27,7 +27,7 @@ function RefetchButton(props: RefetchButtonProps) {
   const { isFetching, refetchResources } = props;
 
   return (
-    <Box display="flex" alignItems="center" sx={{ px: 1.5, py: 0.5 }} columnGap={1.5}>
+    <Box display="flex" alignItems="center" sx={{ px: 1.5 }} columnGap={1}>
       <Tooltip title="Sync">
         <span>
           <IconButton onClick={refetchResources} disabled={isFetching}>

apps/smart-forms-app/src/components/Header/Popovers/QuestionnairePopoverMenu.tsx

@@ -20,7 +20,7 @@ import { PopoverMenuWrapper } from './Popover.styles.ts';
 import { useQuestionnaireStore } from '@aehrc/smart-forms-renderer';
 
 function QuestionnairePopoverMenu() {
-  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
 
   return (
     <PopoverMenuWrapper>

apps/smart-forms-app/src/features/dashboard/components/DashboardNav/DashboardNavItem.tsx

@@ -41,7 +41,7 @@ function DashboardNavItem(props: DashboardNavItemProps) {
       to={path}
       disableGutters
       disabled={disabled}
-      data-test="list-button-dashboard-nav-page"
+      data-test="renderer-operation-item"
       onClick={() => {
         setSelectedQuestionnaire(null);
         onCloseNav();

apps/smart-forms-app/src/features/playground/components/JsonEditor.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import Editor from '@monaco-editor/react';
+import Editor, { useMonaco } from '@monaco-editor/react';
 import { useState } from 'react';
 import type { editor } from 'monaco-editor';
 import { Box, Button, Divider, Stack } from '@mui/material';
@@ -46,6 +46,8 @@ function JsonEditor(props: Props) {
     }
   }
 
+  const monaco = useMonaco();
+
   return (
     <Box height="100%">
       <Stack direction="row" gap={2} sx={{ py: 0.75, px: 1.5 }}>
@@ -57,9 +59,24 @@ function JsonEditor(props: Props) {
         </Button>
 
         {buildingState !== 'idle' ? (
-          <Button color="error" startIcon={<Iconify icon="mdi:nuke" />} onClick={onDestroyForm}>
-            Destroy Form
-          </Button>
+          <>
+            <Button color="error" startIcon={<Iconify icon="mdi:nuke" />} onClick={onDestroyForm}>
+              Destroy Form
+            </Button>
+            <Box flexGrow={1} />
+            <Button
+              startIcon={<Iconify icon="gg:format-left" />}
+              disabled={errorMessages.length > 0 || jsonString === ''}
+              onClick={() => {
+                if (monaco) {
+                  const formattedJson = JSON.stringify(JSON.parse(jsonString), null, 2);
+                  const editor = monaco.editor.getModels()[0];
+                  editor.setValue(formattedJson);
+                }
+              }}>
+              Format JSON
+            </Button>
+          </>
         ) : null}
       </Stack>
       <Divider />

apps/smart-forms-app/src/features/prepopulate/hooks/usePopulate.tsx

@@ -28,19 +28,16 @@ function usePopulate(spinner: RendererSpinner, onStopSpinner: () => void): void
 
   const { smartClient, patient, user, encounter } = useSmartClient();
 
-  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
-  const sourceResponse = useQuestionnaireResponseStore((state) => state.sourceResponse);
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
+  const sourceResponse = useQuestionnaireResponseStore.use.sourceResponse();
 
-  const fhirPathContext = useQuestionnaireStore((state) => state.fhirPathContext);
+  const fhirPathContext = useQuestionnaireStore.use.fhirPathContext();
 
-  const updatePopulatedProperties = useQuestionnaireStore(
-    (state) => state.updatePopulatedProperties
-  );
+  const updatePopulatedProperties = useQuestionnaireStore.use.updatePopulatedProperties();
 
-  const setUpdatableResponseAsPopulated = useQuestionnaireResponseStore(
-    (state) => state.setUpdatableResponseAsPopulated
-  );
-  const formChangesHistory = useQuestionnaireResponseStore((state) => state.formChangesHistory);
+  const setUpdatableResponseAsPopulated =
+    useQuestionnaireResponseStore.use.setUpdatableResponseAsPopulated();
+  const formChangesHistory = useQuestionnaireResponseStore.use.formChangesHistory();
 
   const [isPopulated, setIsPopulated] = useState(false);
 

apps/smart-forms-app/src/features/renderer/components/FormPage/FormRenderer/FormWrapper.tsx

@@ -26,8 +26,8 @@ import {
 import useDebugMode from '../../../../../hooks/useDebugMode.ts';
 
 function FormWrapper() {
-  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
-  const updatableResponse = useQuestionnaireResponseStore((state) => state.updatableResponse);
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
+  const updatableResponse = useQuestionnaireResponseStore.use.updatableResponse();
 
   const { debugModeEnabled } = useDebugMode();
 

apps/smart-forms-app/src/features/renderer/components/FormPreviewPage/FormPreview.tsx

@@ -28,8 +28,8 @@ import {
 } from '@aehrc/smart-forms-renderer';
 
 function FormPreview() {
-  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
-  const updatableResponse = useQuestionnaireResponseStore((state) => state.updatableResponse);
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
+  const updatableResponse = useQuestionnaireResponseStore.use.updatableResponse();
 
   if (!sourceQuestionnaire.item || !updatableResponse.item) {
     return <FormInvalid />;

apps/smart-forms-app/src/features/renderer/components/RendererActions/RendererSaveAsFinalDialog.tsx

@@ -42,11 +42,10 @@ function RendererSaveAsFinalDialog(props: RendererSaveAsFinalDialogProps) {
 
   const { smartClient, patient, user, launchQuestionnaire } = useSmartClient();
 
-  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
-  const updatableResponse = useQuestionnaireResponseStore((state) => state.updatableResponse);
-  const setUpdatableResponseAsSaved = useQuestionnaireResponseStore(
-    (state) => state.setUpdatableResponseAsSaved
-  );
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
+  const updatableResponse = useQuestionnaireResponseStore.use.updatableResponse();
+  const setUpdatableResponseAsSaved =
+    useQuestionnaireResponseStore.use.setUpdatableResponseAsSaved();
 
   const [isSaving, setIsSaving] = useState(false);
 

apps/smart-forms-app/src/features/renderer/components/RendererActions/RepopulateAction.tsx

@@ -44,8 +44,8 @@ function RepopulateAction(props: RepopulateActionProps) {
 
   const [itemsToRepopulate, setItemsToRepopulate] = useState<Record<string, ItemToRepopulate>>({});
 
-  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
-  const fhirPathContext = useQuestionnaireStore((state) => state.fhirPathContext);
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
+  const fhirPathContext = useQuestionnaireStore.use.fhirPathContext();
 
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
 

apps/smart-forms-app/src/features/renderer/components/RendererActions/SaveAsFinalAction.tsx

@@ -35,8 +35,8 @@ function SaveAsFinalAction(props: SaveAsFinalActionProps) {
 
   const [saveAsFinalDialogOpen, setSaveAsFinalDialogOpen] = useState(false);
 
-  const updatableResponse = useQuestionnaireResponseStore((state) => state.updatableResponse);
-  const formChangesHistory = useQuestionnaireResponseStore((state) => state.formChangesHistory);
+  const updatableResponse = useQuestionnaireResponseStore.use.updatableResponse();
+  const formChangesHistory = useQuestionnaireResponseStore.use.formChangesHistory();
 
   function handleOpenDialog() {
     if (smartClient) {

apps/smart-forms-app/src/features/renderer/components/RendererActions/SaveProgressAction.tsx

@@ -37,12 +37,11 @@ function SaveProgressAction(props: SaveProgressSpeedDialActionProps) {
 
   const { smartClient, patient, user, launchQuestionnaire } = useSmartClient();
 
-  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
-  const updatableResponse = useQuestionnaireResponseStore((state) => state.updatableResponse);
-  const formChangesHistory = useQuestionnaireResponseStore((state) => state.formChangesHistory);
-  const setUpdatableResponseAsSaved = useQuestionnaireResponseStore(
-    (state) => state.setUpdatableResponseAsSaved
-  );
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
+  const updatableResponse = useQuestionnaireResponseStore.use.updatableResponse();
+  const formChangesHistory = useQuestionnaireResponseStore.use.formChangesHistory();
+  const setUpdatableResponseAsSaved =
+    useQuestionnaireResponseStore.use.setUpdatableResponseAsSaved();
 
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
 

apps/smart-forms-app/src/features/renderer/components/RendererDebugFooter/RendererDebugBar.tsx

@@ -26,10 +26,8 @@ interface RendererDebugBarProps {
 function RendererDebugBar(props: RendererDebugBarProps) {
   const { isHidden, toggleIsHidden } = props;
 
-  const enableWhenIsActivated = useQuestionnaireStore((state) => state.enableWhenIsActivated);
-  const toggleEnableWhenActivation = useQuestionnaireStore(
-    (state) => state.toggleEnableWhenActivation
-  );
+  const enableWhenIsActivated = useQuestionnaireStore.use.enableWhenIsActivated();
+  const toggleEnableWhenActivation = useQuestionnaireStore.use.toggleEnableWhenActivation();
 
   return (
     <Box display="flex" flexDirection="row-reverse">

apps/smart-forms-app/src/features/renderer/components/RendererDebugFooter/RendererDebugFooter.tsx

@@ -31,14 +31,13 @@ const clearTopLevelQRItem: QuestionnaireResponseItem = {
 function RendererDebugFooter() {
   const [isHidden, setIsHidden] = useState(true);
 
-  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
-  const updatableResponse = useQuestionnaireResponseStore((state) => state.updatableResponse);
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
+  const updatableResponse = useQuestionnaireResponseStore.use.updatableResponse();
 
-  const fhirPathContext = useQuestionnaireStore((state) => state.fhirPathContext);
+  const fhirPathContext = useQuestionnaireStore.use.fhirPathContext();
 
-  const setUpdatableResponseAsEmpty = useQuestionnaireResponseStore(
-    (state) => state.setUpdatableResponseAsEmpty
-  );
+  const setUpdatableResponseAsEmpty =
+    useQuestionnaireResponseStore.use.setUpdatableResponseAsEmpty();
 
   function handleClearExistingResponse() {
     if (!updatableResponse.item || updatableResponse.item.length === 0) {

apps/smart-forms-app/src/features/renderer/components/RendererEmbeddedSpeedDial/RendererEmbeddedLaunchQuestionnaireActions.tsx

@@ -39,7 +39,7 @@ function RendererEmbeddedLaunchQuestionnaireActions(
 
   const { smartClient } = useSmartClient();
 
-  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
 
   const { existingResponses, fetchError, refetchResponses } = useFetchExistingResponses();
 

apps/smart-forms-app/src/features/renderer/components/RendererEmbeddedSpeedDial/RendererEmbeddedStandardActions.tsx

@@ -35,7 +35,7 @@ function RendererEmbeddedStandardActions(props: RendererEmbeddedStandardActionsP
 
   const { smartClient } = useSmartClient();
 
-  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
 
   const showSaveAndRepopulateActions = smartClient && sourceQuestionnaire.item;
 

apps/smart-forms-app/src/features/renderer/components/RendererHeader/RendererHeader.tsx

@@ -36,7 +36,7 @@ interface RendererHeaderProps {
 const RendererHeader = memo(function RendererHeader(props: RendererHeaderProps) {
   const { desktopNavCollapsed, onOpenMobileNav } = props;
 
-  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
 
   const theme = useTheme();
   const isDesktop = useResponsive('up', 'lg');

apps/smart-forms-app/src/features/renderer/components/RendererHeader/UpdatingIndicator.tsx

@@ -21,7 +21,7 @@ import useResponsive from '../../../../hooks/useResponsive.ts';
 import { useQuestionnaireResponseStore } from '@aehrc/smart-forms-renderer';
 
 function UpdatingIndicator() {
-  const updatableResponse = useQuestionnaireResponseStore((state) => state.updatableResponse);
+  const updatableResponse = useQuestionnaireResponseStore.use.updatableResponse();
 
   const [isUpdating, setIsUpdating] = useState(false);
 

apps/smart-forms-app/src/features/renderer/components/RendererLayout.styles.ts

@@ -23,7 +23,6 @@ import {
 
 export const Main = styled(Box)(({ theme }) => ({
   flexGrow: 1,
-  overflow: 'auto',
   minHeight: '100%',
   paddingTop: HEADER_MOBILE_HEIGHT + 16,
   paddingBottom: theme.spacing(4),

apps/smart-forms-app/src/features/renderer/components/RendererLayout.tsx

@@ -40,7 +40,7 @@ import RepopulateBackdrop from '../../repopulate/components/RepopulateBackdrop.t
 function RendererLayout() {
   const { smartClient, patient, user } = useSmartClient();
 
-  const sourceResponse = useQuestionnaireResponseStore((state) => state.sourceResponse);
+  const sourceResponse = useQuestionnaireResponseStore.use.sourceResponse();
 
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const [desktopNavCollapsed, setDesktopNavCollapsed] = useState(false);

apps/smart-forms-app/src/features/renderer/components/RendererNav/BlockerUnsavedFormDialog.tsx

@@ -49,11 +49,10 @@ function BlockerUnsavedFormDialog(props: Props) {
 
   const [isSaving, setIsSaving] = useState(false);
 
-  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
-  const updatableResponse = useQuestionnaireResponseStore((state) => state.updatableResponse);
-  const setUpdatableResponseAsSaved = useQuestionnaireResponseStore(
-    (state) => state.setUpdatableResponseAsSaved
-  );
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
+  const updatableResponse = useQuestionnaireResponseStore.use.updatableResponse();
+  const setUpdatableResponseAsSaved =
+    useQuestionnaireResponseStore.use.setUpdatableResponseAsSaved();
   const navigate = useNavigate();
 
   const isLaunched = !!(smartClient && patient && user);

apps/smart-forms-app/src/features/renderer/components/RendererNav/RendererNavLaunchQuestionnaireActions.tsx

@@ -37,7 +37,7 @@ function RendererNavLaunchQuestionnaireActions(props: RendererNavLaunchQuestionn
 
   const { smartClient } = useSmartClient();
 
-  const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
+  const sourceQuestionnaire = useQuestionnaireStore.use.sourceQuestionnaire();
 
   const { existingResponses, fetchError, refetchResponses } = useFetchExistingResponses();