Merge pull request #1071 from joshunrau/refine

Author: joshunrau

.env.template

@@ -88,6 +88,8 @@ VITE_DEV_PASSWORD=Password12345678
 API_BASE_URL=http://localhost:5500
 # The number of miliseconds to delay the result of HTTP requests in development
 VITE_DEV_NETWORK_LATENCY=0
+# Whether to force clear queries when the pathname changes
+VITE_DEV_FORCE_CLEAR_QUERY_CACHE=false
 # Plausable analytics config (optional, set both to an empty string to disable)
 PLAUSIBLE_BASE_URL=
 PLAUSIBLE_WEB_DATA_DOMAIN=

apps/playground/package.json

@@ -25,13 +25,13 @@
     "@opendatacapture/schemas": "workspace:*",
     "axios": "catalog:",
     "esbuild-wasm": "catalog:",
-    "framer-motion": "^11.5.4",
     "immer": "^10.1.1",
     "jszip": "^3.10.1",
     "lodash-es": "workspace:lodash-es__4.x@*",
     "lucide-react": "^0.439.0",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.51.0",
+    "motion": "^11.15.0",
     "prettier": "^3.3.3",
     "react": "workspace:react__18.x@*",
     "react-dom": "workspace:react-dom__18.x@*",

apps/playground/src/components/Editor/Editor.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { extractInputFileExtension } from '@opendatacapture/instrument-bundler';
-import { motion } from 'framer-motion';
 import { Columns3Icon, FilePlusIcon, FileUpIcon } from 'lucide-react';
+import { motion } from 'motion/react';
 import { useShallow } from 'zustand/react/shallow';
 
 import { useAppStore } from '@/store';

apps/playground/src/components/Viewer/ViewerErrorFallback/ToggledContent.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 
 import { cn } from '@douglasneuroinformatics/libui/utils';
-import { motion } from 'framer-motion';
 import { ChevronUpIcon } from 'lucide-react';
+import { motion } from 'motion/react';
 
 export const ToggledContent: React.FC<{ children: React.ReactNode; label: string }> = ({ children, label }) => {
   const [isOpen, setIsOpen] = useState(false);

apps/web/package.json

@@ -38,12 +38,12 @@
     "@tanstack/react-query-devtools": "^5.55.4",
     "axios": "catalog:",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.5.4",
     "html2canvas": "^1.4.1",
     "immer": "^10.1.1",
     "jwt-decode": "^4.0.0",
     "lodash-es": "workspace:lodash-es__4.x@*",
     "lucide-react": "^0.439.0",
+    "motion": "^11.15.0",
     "papaparse": "workspace:papaparse__5.x@*",
     "react": "workspace:react__18.x@*",
     "react-dom": "workspace:react-dom__18.x@*",

apps/web/src/App.tsx

@@ -8,10 +8,11 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { BrowserRouter } from 'react-router-dom';
 
 import { LoadingFallback } from '@/components/LoadingFallback';
-import { SetupProvider } from '@/features/setup';
 import { Routes } from '@/Routes';
 import { queryClient } from '@/services/react-query';
 
+import { SetupProvider } from './features/setup';
+
 import './services/axios';
 import './services/i18n';
 import './services/zod';

apps/web/src/Routes.tsx

@@ -16,6 +16,7 @@ import { sessionRoute } from './features/session';
 import { uploadRoute } from './features/upload';
 import { userRoute } from './features/user';
 import { DisclaimerProvider } from './providers/DisclaimerProvider';
+import { ForceClearQueryCacheProvider } from './providers/ForceClearQueryCacheProvider';
 import { WalkthroughProvider } from './providers/WalkthroughProvider';
 import { useAppStore } from './store';
 
@@ -33,7 +34,9 @@ const protectedRoutes: RouteObject[] = [
     element: (
       <DisclaimerProvider>
         <WalkthroughProvider>
-          <Layout />
+          <ForceClearQueryCacheProvider>
+            <Layout />
+          </ForceClearQueryCacheProvider>
         </WalkthroughProvider>
       </DisclaimerProvider>
     ),

apps/web/src/components/IdentificationForm/IdentificationForm.tsx

@@ -20,6 +20,7 @@ export const IdentificationForm = ({ onSubmit }: IdentificationFormProps) => {
   return (
     <Form
       preventResetValuesOnReset
+      suspendWhileSubmitting
       content={[
         {
           title: t('common.identificationMethod'),

apps/web/src/components/Sidebar/Sidebar.tsx

@@ -3,8 +3,8 @@ import { AlertDialog, LanguageToggle, ThemeToggle } from '@douglasneuroinformati
 import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
 import { Branding } from '@opendatacapture/react-core';
 import { isSubjectWithPersonalInfo, removeSubjectIdScope } from '@opendatacapture/subject-utils';
-import { AnimatePresence, motion } from 'framer-motion';
 import { StopCircle } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { useNavItems } from '@/hooks/useNavItems';

apps/web/src/config.ts

@@ -11,6 +11,7 @@ const $Config = z.object({
     .optional(),
   dev: z.object({
     isBypassAuthEnabled: $BooleanString.optional(),
+    isForceClearQueryCacheEnabled: $BooleanString.optional(),
     networkLatency: z.coerce.number().int().nonnegative().optional(),
     password: z.string().min(1).optional(),
     username: z.string().min(1).optional()
@@ -38,6 +39,7 @@ export const config = await $Config
         : undefined,
     dev: {
       isBypassAuthEnabled: import.meta.env.VITE_DEV_BYPASS_AUTH,
+      isForceClearQueryCacheEnabled: import.meta.env.VITE_DEV_FORCE_CLEAR_QUERY_CACHE,
       networkLatency: import.meta.env.VITE_DEV_NETWORK_LATENCY,
       password: import.meta.env.VITE_DEV_PASSWORD,
       username: import.meta.env.VITE_DEV_USERNAME