Merge pull request #1130 from joshunrau/update-react-and-tailwind

update react to v19 and tailwind to v4

Author: joshunrau

.gitignore

@@ -65,3 +65,7 @@ sqlite/
 
 # runtime core intermediate build
 packages/runtime-core/lib/
+
+# storybook
+*storybook.log
+storybook-static

apps/api/package.json

@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@douglasneuroinformatics/libcrypto": "catalog:",
-    "@douglasneuroinformatics/libjs": "^2.4.0",
-    "@douglasneuroinformatics/libnest": "^3.0.1",
+    "@douglasneuroinformatics/libjs": "catalog:",
+    "@douglasneuroinformatics/libnest": "^5.2.0",
     "@douglasneuroinformatics/libpasswd": "catalog:",
     "@douglasneuroinformatics/libstats": "catalog:",
     "@faker-js/faker": "^9.4.0",

apps/api/src/main.ts

@@ -1,4 +1,4 @@
-import { AppContainer } from '@douglasneuroinformatics/libnest';
+import { AppFactory } from '@douglasneuroinformatics/libnest';
 
 import { AssignmentsModule } from './assignments/assignments.module';
 import { $Env } from './core/env.schema';
@@ -13,7 +13,7 @@ import { SummaryModule } from './summary/summary.module';
 import { UsersModule } from './users/users.module';
 import { ConfiguredAuthModule } from './vendor/configured.auth.module';
 
-export default AppContainer.create({
+export default AppFactory.create({
   docs: {
     contact: {
       email: '[email protected]',

apps/api/src/vendor/configured.auth.module.ts

@@ -20,7 +20,7 @@ import { z } from 'zod';
                 ability.can('manage', 'all');
                 break;
               case 'GROUP_MANAGER':
-                ability.can('manage', 'Assignment');
+                ability.can('manage', 'Assignment', { groupId: { in: groupIds } });
                 ability.can('manage', 'Group', { id: { in: groupIds } });
                 ability.can('read', 'Instrument');
                 ability.can('create', 'InstrumentRecord');

apps/gateway/package.json

@@ -17,8 +17,7 @@
   },
   "dependencies": {
     "@douglasneuroinformatics/libcrypto": "catalog:",
-    "@douglasneuroinformatics/libui": "catalog:",
-    "@opendatacapture/instrument-renderer": "workspace:*",
+    "@douglasneuroinformatics/libui": "^4.2.1",
     "@opendatacapture/react-core": "workspace:*",
     "@opendatacapture/runtime-core": "workspace:*",
     "@opendatacapture/runtime-v1": "workspace:*",
@@ -30,8 +29,8 @@
     "lodash-es": "workspace:lodash-es__4.x@*",
     "pino-http": "^10.4.0",
     "pino-pretty": "^11.2.2",
-    "react": "workspace:react__18.x@*",
-    "react-dom": "workspace:react-dom__18.x@*",
+    "react": "workspace:react__19.x@*",
+    "react-dom": "workspace:react-dom__19.x@*",
     "sirv": "^2.0.4",
     "sqlite3": "^5.1.7",
     "zod": "workspace:zod__3.23.x@*"
@@ -40,15 +39,14 @@
     "@douglasneuroinformatics/esbuild-plugin-prisma": "catalog:",
     "@opendatacapture/release-info": "workspace:*",
     "@opendatacapture/vite-plugin-runtime": "workspace:*",
+    "@tailwindcss/vite": "catalog:",
     "@types/compression": "^1.7.5",
     "@types/express": "^4.17.21",
     "@vitejs/plugin-react-swc": "^3.7.2",
-    "autoprefixer": "^10.4.20",
     "esbuild": "catalog:",
     "nodemon": "catalog:",
-    "postcss": "^8.5.1",
     "prisma": "catalog:",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "catalog:",
     "type-fest": "workspace:type-fest__4.x@*",
     "vite": "catalog:"
   },

apps/gateway/src/Root.tsx

@@ -2,9 +2,8 @@ import { useEffect, useRef } from 'react';
 
 import { LanguageToggle, NotificationHub, ThemeToggle } from '@douglasneuroinformatics/libui/components';
 import { useNotificationsStore } from '@douglasneuroinformatics/libui/hooks';
-import { InstrumentRenderer } from '@opendatacapture/instrument-renderer';
-import type { InstrumentSubmitHandler } from '@opendatacapture/instrument-renderer';
-import { Branding } from '@opendatacapture/react-core';
+import { Branding, InstrumentRenderer } from '@opendatacapture/react-core';
+import type { InstrumentSubmitHandler } from '@opendatacapture/react-core';
 import type { UpdateRemoteAssignmentData } from '@opendatacapture/schemas/assignment';
 import type { InstrumentBundleContainer } from '@opendatacapture/schemas/instrument';
 import axios from 'axios';
@@ -54,7 +53,7 @@ export const Root = ({ id, initialSeriesIndex, target, token }: RootProps) => {
 
   return (
     <div className="flex h-screen flex-col" ref={ref} style={{ display: 'none' }}>
-      <header className="fixed top-0 z-10 w-full bg-white/80 text-slate-700 shadow backdrop-blur-lg dark:bg-slate-800/75 dark:text-slate-300">
+      <header className="fixed top-0 z-10 w-full bg-white/80 text-slate-700 shadow-sm backdrop-blur-lg dark:bg-slate-800/75 dark:text-slate-300">
         <div className="container flex items-center justify-between py-3 font-medium">
           <Branding className="[&>span]:hidden sm:[&>span]:block" fontSize="md" />
           <div className="flex gap-3">
@@ -69,7 +68,7 @@ export const Root = ({ id, initialSeriesIndex, target, token }: RootProps) => {
           </div>
         </div>
       </header>
-      <main className="container flex min-h-0 max-w-3xl flex-grow flex-col pb-16 pt-32 xl:max-w-5xl">
+      <main className="container flex min-h-0 max-w-3xl grow flex-col pb-16 pt-32 xl:max-w-5xl">
         <InstrumentRenderer
           className="min-h-full w-full"
           initialSeriesIndex={initialSeriesIndex}

apps/gateway/tailwind.config.cjs

@@ -7,5 +7,5 @@
       "/runtime/v1/*": ["../../runtime/v1/dist/*"]
     }
   },
-  "include": ["scripts/*", "src/**/*", "tailwind.config.cjs", "vite.config.ts"]
+  "include": ["scripts/*", "src/**/*", "vite.config.ts"]
 }

apps/gateway/tsconfig.json

@@ -1,9 +1,8 @@
 import path from 'path';
 
 import { runtime } from '@opendatacapture/vite-plugin-runtime';
+import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react-swc';
-import autoprefixer from 'autoprefixer';
-import tailwindcss from 'tailwindcss';
 import { defineConfig } from 'vite';
 
 export default defineConfig(({ mode }) => ({
@@ -13,11 +12,6 @@ export default defineConfig(({ mode }) => ({
     sourcemap: true,
     target: 'es2022'
   },
-  css: {
-    postcss: {
-      plugins: [autoprefixer(), tailwindcss()]
-    }
-  },
   optimizeDeps: {
     esbuildOptions: {
       target: 'es2022'
@@ -28,7 +22,8 @@ export default defineConfig(({ mode }) => ({
     react(),
     runtime({
       disabled: mode === 'test'
-    })
+    }),
+    tailwindcss()
   ],
   resolve: {
     alias: {

apps/gateway/vite.config.ts

@@ -4,7 +4,7 @@ import path from 'path';
 
 import sitemap from '@astrojs/sitemap';
 import starlight from '@astrojs/starlight';
-import tailwind from '@astrojs/tailwind';
+import tailwind from '@tailwindcss/vite';
 import { defineConfig, sharpImageService } from 'astro/config';
 import { toString } from 'mdast-util-to-string';
 import getReadingTime from 'reading-time';
@@ -99,18 +99,18 @@ export default defineConfig({
         },
         starlightTypeDocSidebarGroup
       ],
-      social: {
-        github: 'https://github.com/DouglasNeuroInformatics/OpenDataCapture'
-      },
+      social: [
+        {
+          href: 'https://github.com/DouglasNeuroInformatics/OpenDataCapture',
+          icon: 'github',
+          label: 'GitHub'
+        }
+      ],
       tableOfContents: {
         maxHeadingLevel: 4,
         minHeadingLevel: 2
       },
       title: 'Open Data Capture'
-    }),
-    tailwind({
-      applyBaseStyles: false,
-      configFile: path.resolve(import.meta.dirname, 'tailwind.config.cjs')
     })
   ],
   markdown: {
@@ -143,7 +143,8 @@ export default defineConfig({
           'docs/en/docs': '../../docs/en',
           'docs/fr/docs': '../../docs/fr'
         }
-      })
+      }),
+      tailwind()
     ],
     // this is necessary because the MDX imports will attempt to resolve from their actual location
     resolve: {