- Updated MUI v6 for Smarts forms in React v18.

- Migrated @storybook/addon-stying to addon-styling-webpack and addon-themes - Minor version bumps of other libraries for consistancy
aehrc · Feb 28, 2025 · 86bfffa · 86bfffa
1 parent 44cb389
commit 86bfffa
Show file tree

Hide file tree

Showing 15 changed files with 17,927 additions and 21,487 deletions.
diff --git a/apps/demo-renderer-app/src/components/ui/button.tsx b/apps/demo-renderer-app/src/components/ui/button.tsx
@@ -37,10 +37,14 @@ export interface ButtonProps
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, 
+    // variant, size, 
+    asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
     return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+      <Comp className={cn(buttonVariants({ 
+        // variant, size, 
+        className }))} ref={ref} {...props} />
     );
   }
 );

diff --git a/apps/smart-forms-app/package.json b/apps/smart-forms-app/package.json
@@ -26,48 +26,49 @@
   "dependencies": {
     "@aehrc/sdc-assemble": "^1.3.1",
     "@aehrc/sdc-populate": "^3.0.1",
-    "@aehrc/smart-forms-renderer": "^1.0.0-alpha.22",
-    "@emotion/react": "^11.13.0",
-    "@emotion/styled": "^11.13.0",
-    "@fontsource/material-icons": "^5.0.18",
-    "@fontsource/roboto": "^5.0.12",
-    "@iconify/react": "^4.1.1",
+    "@aehrc/smart-forms-renderer": "^1.0.0-alpha.23",
+    "@dnd-kit/core": "^6.3.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/material-icons": "^5.1.1",
+    "@fontsource/roboto": "5.1.1",
+    "@iconify/react": "^5.2.0",
     "@microlink/react-json-view": "^1.23.1",
-    "@monaco-editor/react": "^4.6.0",
-    "@mui/icons-material": "^5.15.20",
-    "@mui/lab": "^5.0.0-alpha.151",
-    "@mui/material": "^5.16.7",
-    "@mui/x-date-pickers": "^6.10.1",
-    "@sentry/react": "^7.73.0",
-    "@sentry/tracing": "^7.101.0",
+    "@monaco-editor/react": "^4.7.0",
+    "@mui/icons-material": "^6.4.5",
+    "@mui/lab": "^6.0.0-beta.28",
+    "@mui/material": "^6.4.5",
+    "@mui/x-date-pickers": "^7.27.1",
+    "@sentry/react": "^9.2.0",
+    "@sentry/tracing": "^7.120.3",
     "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-table": "^8.19.3",
+    "@tanstack/react-table": "^8.21.2",
     "allotment": "^1.20.2",
     "dayjs": "^1.11.10",
     "fhirclient": "^2.5.2",
     "he": "^1.2.0",
     "html-react-parser": "4.2.10",
     "lodash.clonedeep": "^4.5.0",
-    "material-ui-popup-state": "^5.1.2",
+    "material-ui-popup-state": "^5.3.3",
     "moment": "^2.30.1",
-    "monaco-editor": "^0.47.0",
+    "monaco-editor": "^0.52.2",
     "nanoid": "^5.0.7",
     "notistack": "^3.0.1",
     "randomcolor": "^0.6.2",
     "react": "^18.2.0",
-    "react-confetti-explosion": "^2.1.2",
-    "react-cookie": "^7.1.4",
+    "react-confetti": "^6.2.3",
+    "react-cookie": "^7.2.2",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-json-tree": "^0.19.0",
-    "react-markdown": "^8.0.7",
-    "react-router-dom": "6.29.0",
-    "react-spinners": "^0.13.8",
-    "react-to-print": "^2.14.15",
-    "simplebar-react": "^3.2.4",
-    "usehooks-ts": "^2.9.1",
+    "react-markdown": "^10.0.0",
+    "react-router-dom": "^7.2.0",
+    "react-spinners": "^0.15.0",
+    "react-to-print": "^3.0.5",
+    "simplebar-react": "^3.3.0",
+    "usehooks-ts": "^3.1.1",
     "zustand": "^4.5.5"
   },
   "devDependencies": {
@@ -81,10 +82,10 @@
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/node": "^22.5.0",
     "@types/randomcolor": "^0.5.9",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.22",
-    "@types/react-helmet": "^6.1.6",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/react-helmet": "^6.1.11",
+    "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^8.52.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -95,7 +96,7 @@
     "ts-jest": "^29.1.1",
     "typescript": "^5.2.2",
     "vite": "^5.4.14",
-    "vite-plugin-svgr": "^4.2.0",
+    "vite-plugin-svgr": "^4.3.0",
     "yui-lint": "^0.2.0"
   },
   "eslintConfig": {

diff --git a/apps/smart-forms-app/src/components/Logos/CsiroLogo.tsx b/apps/smart-forms-app/src/components/Logos/CsiroLogo.tsx
@@ -18,7 +18,7 @@
 import { Box, Typography } from '@mui/material';
 import csiroLogo from '../../data/images/csiro-logo.png';
 import { useSnackbar } from 'notistack';
-import ConfettiExplosion from 'react-confetti-explosion';
+import Confetti from 'react-confetti';
 import useClickCounter from '../../features/easterEgg/hooks/useClickCounter.ts';
 import useDebugMode from '../../hooks/useDebugMode.ts';
 import CloseSnackbar from '../Snackbar/CloseSnackbar.tsx';
@@ -54,7 +54,7 @@ function CsiroLogo() {
         />
       </Box>
       {counter === 3 ? (
-        <ConfettiExplosion particleCount={400} width={2000} duration={3000} />
+        <Confetti width={2000} />
       ) : null}
     </>
   );

diff --git a/...src/features/dashboard/components/DashboardPages/QuestionnairePage/QuestionnaireTable.tsx b/...src/features/dashboard/components/DashboardPages/QuestionnairePage/QuestionnaireTable.tsx
@@ -23,7 +23,7 @@ import {
   getSortedRowModel,
   useReactTable
 } from '@tanstack/react-table';
-import { useDebounce } from 'usehooks-ts';
+import { useDebounceValue } from 'usehooks-ts';
 import useFetchQuestionnaires from '../../../hooks/useFetchQuestionnaires.ts';
 import { createQuestionnaireTableColumns } from '../../../utils/tableColumns.ts';
 import QuestionnaireTableView from './QuestionnaireTableView.tsx';
@@ -34,7 +34,7 @@ function QuestionnaireTable() {
 
   // search questionnaires
   const [searchInput, setSearchInput] = useState('');
-  const debouncedInput = useDebounce(searchInput, 300);
+  const debouncedInput = useDebounceValue(searchInput, 300);
 
   const {
     questionnaires,
@@ -43,7 +43,7 @@ function QuestionnaireTable() {
     isInitialLoading,
     isFetching,
     refetchQuestionnaires
-  } = useFetchQuestionnaires(searchInput, debouncedInput);
+  } = useFetchQuestionnaires(searchInput, debouncedInput[0]);
 
   const columns = useMemo(() => createQuestionnaireTableColumns(), []);
 
@@ -77,13 +77,13 @@ function QuestionnaireTable() {
     <QuestionnaireTableView
       table={table}
       searchInput={searchInput}
-      debouncedInput={debouncedInput}
+      debouncedInput={debouncedInput[0]}
       fetchStatus={fetchStatus}
       isInitialLoading={isInitialLoading}
       isFetching={isFetching}
       fetchError={fetchError}
       selectedQuestionnaire={selectedQuestionnaire}
-      onSearch={(input) => {
+      onSearch={(input:any) => {
         table.setPageIndex(0);
         setSearchInput(input);
       }}

diff --git a/...hboard/components/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireLabel.tsx b/...hboard/components/DashboardPages/QuestionnairePage/TableComponents/QuestionnaireLabel.tsx
@@ -17,7 +17,6 @@
 
 import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import { useTheme } from '@mui/material/styles';
 import type { SxProps, Theme } from '@mui/material';
 import { Box } from '@mui/material';
 import { QuestionnaireStyledLabel } from './QuestionnaireLabel.styles.ts';
@@ -35,7 +34,6 @@ interface QuestionnaireLabelProps {
 const QuestionnaireLabel = forwardRef((props: QuestionnaireLabelProps, ref) => {
   const { color, startIcon, endIcon, children, sx, ...other } = props;
 
-  const theme = useTheme();
 
   const iconStyle = {
     width: 16,
@@ -53,7 +51,6 @@ const QuestionnaireLabel = forwardRef((props: QuestionnaireLabelProps, ref) => {
         ...(endIcon && { pr: 0.75 }),
         ...sx
       }}
-      theme={theme}
       {...other}>
       {startIcon && <Box sx={{ mr: 0.75, ...iconStyle }}> {startIcon} </Box>}
 

diff --git a/...tures/dashboard/components/DashboardPages/ResponsesPage/TableComponents/ResponseLabel.tsx b/...tures/dashboard/components/DashboardPages/ResponsesPage/TableComponents/ResponseLabel.tsx
@@ -17,7 +17,7 @@
 
 import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import { useTheme } from '@mui/material/styles';
+// import { useTheme } from '@mui/material/styles';
 import type { SxProps, Theme } from '@mui/material';
 import { Box } from '@mui/material';
 import { ResponseStyledLabel } from './ResponseLabel.styles.ts';
@@ -34,7 +34,7 @@ interface Props {
 const ResponseLabel = forwardRef((props: Props, ref) => {
   const { color, startIcon, endIcon, children, sx, ...other } = props;
 
-  const theme = useTheme();
+  // const theme = useTheme();
 
   const iconStyle = {
     width: 16,
@@ -52,7 +52,7 @@ const ResponseLabel = forwardRef((props: Props, ref) => {
         ...(endIcon && { pr: 0.75 }),
         ...sx
       }}
-      theme={theme}
+      // theme={theme}
       {...other}>
       {startIcon && <Box sx={{ mr: 0.75, ...iconStyle }}> {startIcon} </Box>}
 

diff --git a/...ard/components/DashboardPages/ResponsesPage/TableComponents/ResponseListToolbarSearch.tsx b/...ard/components/DashboardPages/ResponsesPage/TableComponents/ResponseListToolbarSearch.tsx
@@ -22,7 +22,7 @@ import Autocomplete from '@mui/material/Autocomplete';
 import type { Questionnaire } from 'fhir/r4';
 import { InputAdornment, TextField } from '@mui/material';
 import { createResponseSearchOption } from '../../../../utils/dashboard.ts';
-import { useDebounce } from 'usehooks-ts';
+import { useDebounceValue } from 'usehooks-ts';
 import { useTheme } from '@mui/material/styles';
 import { getResponseSearchStyles } from '../../QuestionnairePage/TableComponents/QuestionnaireListToolbar.styles.ts';
 import Iconify from '../../../../../../components/Iconify/Iconify.tsx';
@@ -36,9 +36,9 @@ function ResponseListToolbarSearch(props: ResponseListToolbarSearchProps) {
   const { searchedQuestionnaire, onChangeQuestionnaire } = props;
 
   const [input, setInput] = useState('');
-  const debouncedInput = useDebounce(input, 300);
+  const debouncedInput = useDebounceValue(input, 300);
 
-  const { questionnaires, isFetching } = useFetchQuestionnaires(input, debouncedInput, 2);
+  const { questionnaires, isFetching } = useFetchQuestionnaires(input, debouncedInput[0], 2);
 
   const theme = useTheme();
 
@@ -58,7 +58,7 @@ function ResponseListToolbarSearch(props: ResponseListToolbarSearchProps) {
     <Autocomplete
       value={searchedQuestionnaire ?? null}
       options={questionnaires}
-      getOptionLabel={(questionnaire) => createResponseSearchOption(questionnaire)}
+      getOptionLabel={(questionnaire:any) => createResponseSearchOption(questionnaire)}
       loading={isFetching}
       loadingText="Fetching results..."
       noOptionsText="No results... yet."
@@ -70,7 +70,7 @@ function ResponseListToolbarSearch(props: ResponseListToolbarSearchProps) {
         maxWidth: 400,
         ...getResponseSearchStyles(theme)
       }}
-      renderInput={(params) => (
+      renderInput={(params:any) => (
         <TextField
           {...params}
           placeholder="Search responses..."

diff --git a/apps/smart-forms-app/src/main.tsx b/apps/smart-forms-app/src/main.tsx
@@ -20,14 +20,16 @@ import App from './App';
 import type { DefaultOptions } from '@tanstack/react-query';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as Sentry from '@sentry/react';
-import { BrowserTracing } from '@sentry/browser';
+import { browserTracingIntegration } from '@sentry/browser';
+
+const integration = browserTracingIntegration();
 
 if (process.env.NODE_ENV === 'production') {
   Sentry.init({
     dsn: process.env.REACT_APP_SENTRY_DSN,
     environment: process.env.REACT_APP_SENTRY_ENVIRONMENT,
     release: process.env.REACT_APP_SENTRY_RELEASE,
-    integrations: [new BrowserTracing()],
+    integrations: [integration],
     tracesSampleRate: 1.0
   });
 }

diff --git a/apps/smart-forms-app/vite.config.ts b/apps/smart-forms-app/vite.config.ts
@@ -18,7 +18,9 @@ export default ({ mode }) => {
       RENDERER_VERSION: JSON.stringify(packageJson.dependencies['@aehrc/smart-forms-renderer'])
     },
     optimizeDeps: {
-      include: ['@aehrc/sdc-assemble', '@aehrc/sdc-populate', '@emotion/react', '@emotion/styled']
+      include: ['@aehrc/sdc-assemble', '@aehrc/sdc-populate'
+        // , '@emotion/react', '@emotion/styled'
+      ]
     },
     build: {
       commonjsOptions: {