Merge pull request #307 from cellajs/development

react 19 🎊
cellajs · Dec 13, 2024 · 8fcadeb · 8fcadeb
2 parents d28fffb + 49d705d
commit 8fcadeb
Show file tree

Hide file tree

Showing 22 changed files with 2,242 additions and 1,505 deletions.
diff --git a/backend/package.json b/backend/package.json
@@ -51,7 +51,7 @@
     "@oslojs/encoding": "^1.1.0",
     "@oslojs/webauthn": "^1.0.0",
     "@paddle/paddle-node-sdk": "^1.10.0",
-    "@scalar/hono-api-reference": "^0.5.163",
+    "@scalar/hono-api-reference": "^0.5.164",
     "@sendgrid/mail": "^8.1.4",
     "@sentry/cli": "^2.39.1",
     "@t3-oss/env-core": "^0.11.1",
@@ -66,7 +66,7 @@
     "isbot": "^5.1.17",
     "jsdom": "^25.0.1",
     "jsonwebtoken": "^9.0.2",
-    "jsx-email": "^2.5.3",
+    "jsx-email": "^2.5.4",
     "locales": "workspace:*",
     "lucia": "^3.2.2",
     "nanoid": "^5.0.9",
@@ -75,9 +75,9 @@
     "postgres": "^3.4.5",
     "prom-client": "^15.1.3",
     "rate-limiter-flexible": "^5.0.4",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-i18next": "^15.1.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^15.2.0",
     "slugify": "^1.6.6",
     "ua-parser-js": "^1.0.39",
     "zod": "3.23.8"
@@ -89,11 +89,11 @@
     "@types/node": "^22.10.2",
     "@types/papaparse": "^5.3.15",
     "@types/pg": "^8.11.10",
-    "@types/react": "^18.3.16",
+    "@types/react": "^19.0.1",
     "@types/ua-parser-js": "^0.7.39",
     "chalk": "^5.3.0",
     "commander": "^12.1.0",
-    "drizzle-kit": "^0.30.0",
+    "drizzle-kit": "^0.30.1",
     "hanji": "^0.0.5",
     "jszip": "^3.10.1",
     "papaparse": "^5.4.1",

diff --git a/backend/src/modules/general/index.ts b/backend/src/modules/general/index.ts
@@ -230,9 +230,9 @@ const generalRoutes = app
     try {
       if (signature && rawRequestBody) {
         const eventData = paddle.webhooks.unmarshal(rawRequestBody, env.PADDLE_WEBHOOK_KEY || '', signature);
-        switch (eventData?.eventType) {
+        switch ((await eventData)?.eventType) {
           case EventName.SubscriptionCreated:
-            logEvent(`Subscription ${eventData.data.id} was created`, {
+            logEvent(`Subscription ${(await eventData)?.data.id} was created`, {
               ecent: JSON.stringify(eventData),
             });
             break;

diff --git a/frontend/package.json b/frontend/package.json
@@ -18,47 +18,49 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@blocknote/core": "^0.20.0",
-    "@blocknote/react": "^0.20.0",
-    "@blocknote/shadcn": "^0.20.0",
-    "@electric-sql/client": "^1.0.0-beta.1",
+    "@blocknote/core": "^0.21.0",
+    "@blocknote/react": "^0.21.0",
+    "@blocknote/shadcn": "^0.21.0",
+    "@electric-sql/client": "1.0.0-beta.1",
+    "@emotion/react": "^11.14.0",
     "@floating-ui/react": "^0.27.0",
     "@github/mini-throttle": "^2.1.1",
     "@hookform/resolvers": "^3.9.1",
     "@oslojs/encoding": "^1.1.0",
     "@paddle/paddle-js": "^1.3.3",
-    "@radix-ui/react-accordion": "^1.2.1",
-    "@radix-ui/react-alert-dialog": "^1.1.2",
-    "@radix-ui/react-avatar": "^1.1.1",
-    "@radix-ui/react-checkbox": "^1.1.2",
-    "@radix-ui/react-collapsible": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-hover-card": "^1.1.2",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-popover": "^1.1.2",
-    "@radix-ui/react-radio-group": "^1.2.1",
-    "@radix-ui/react-scroll-area": "^1.2.1",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slider": "^1.2.1",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.1",
-    "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-toast": "^1.2.2",
-    "@radix-ui/react-toggle": "^1.1.0",
-    "@radix-ui/react-toggle-group": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.4",
-    "@radix-ui/react-visually-hidden": "^1.1.0",
-    "@sentry/react": "^8.44.0",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.3",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.3",
+    "@radix-ui/react-hover-card": "^1.1.3",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.3",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.3",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.3",
+    "@radix-ui/react-toggle": "^1.1.1",
+    "@radix-ui/react-toggle-group": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.5",
+    "@radix-ui/react-visually-hidden": "^1.1.1",
+    "@sentry/react": "^8.45.0",
     "@t3-oss/env-core": "^0.11.1",
     "@tailwindcss/typography": "^0.5.15",
     "@tanstack/query-sync-storage-persister": "^5.62.7",
     "@tanstack/react-query": "^5.62.7",
     "@tanstack/react-query-devtools": "^5.62.7",
     "@tanstack/react-query-persist-client": "^5.62.7",
-    "@tanstack/react-router": "^1.87.9",
-    "@tanstack/router-devtools": "^1.87.9",
+    "@tanstack/react-router": "^1.88.0",
+    "@tanstack/router-devtools": "^1.88.0",
+    "@types/lodash": "^4.17.13",
     "@uppy/audio": "^2.0.2",
     "@uppy/core": "^4.3.0",
     "@uppy/dashboard": "^4.1.3",
@@ -82,7 +84,7 @@
     "embla-carousel-autoplay": "^8.5.1",
     "embla-carousel-react": "^8.5.1",
     "emblor": "^1.4.7",
-    "framer-motion": "^11.14.0",
+    "framer-motion": "^11.14.4",
     "gleap": "^14.1.0",
     "hono": "4.6.13",
     "i18next": "^23.16.8",
@@ -93,23 +95,23 @@
     "jspdf": "^2.5.2",
     "jspdf-autotable": "^3.8.4",
     "locales": "workspace:*",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.468.0",
     "nanoid": "^5.0.9",
     "pdfjs-dist": "^4.9.155",
     "player.style": "^0.1.0",
-    "react": "^18.3.1",
-    "react-confetti-explosion": "^2.1.2",
+    "react": "^19.0.0",
     "react-data-grid": "7.0.0-beta.47",
     "react-day-picker": "^9.4.3",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
     "react-error-boundary": "^4.1.2",
-    "react-hook-form": "^7.54.0",
-    "react-i18next": "^15.1.4",
+    "react-hook-form": "^7.54.1",
+    "react-i18next": "^15.2.0",
     "react-intersection-observer": "^9.13.1",
     "react-lazy-with-preload": "^2.2.1",
     "react-pdf": "^9.1.1",
     "react-resizable-panels": "^2.1.7",
-    "recharts": "^2.14.1",
+    "recharts": "^2.15.0",
     "slugify": "1.6.6",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.5",
@@ -127,18 +129,18 @@
     "@redux-devtools/extension": "^3.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@sentry/vite-plugin": "^2.22.7",
-    "@tanstack/router-plugin": "^1.87.11",
+    "@tanstack/router-plugin": "^1.87.13",
     "@types/lodash.clonedeep": "^4.5.9",
     "@types/node": "^22.10.2",
-    "@types/react": "^18.3.16",
+    "@types/react": "^19.0.1",
     "@types/react-dom": "^18.3.5",
     "@types/zxcvbn": "^4.4.5",
     "@vitejs/plugin-basic-ssl": "^1.2.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49",
     "postcss-import": "^16.1.0",
-    "postcss-preset-env": "^10.1.1",
+    "postcss-preset-env": "^10.1.2",
     "postgres": "^3.4.5",
     "rollup-plugin-visualizer": "^5.12.0",
     "tailwindcss": "^3.4.16",

diff --git a/frontend/src/hooks/use-measure.tsx b/frontend/src/hooks/use-measure.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 interface MeasureResult<T extends Element> {
-  ref: React.RefObject<T>;
+  ref: React.RefObject<T | null>;
   bounds: DOMRectReadOnly;
 }
 

diff --git a/frontend/src/hooks/use-update-tab-index.ts b/frontend/src/hooks/use-update-tab-index.ts
@@ -0,0 +1,11 @@
+import type React from 'react';
+import { useEffect } from 'react';
+
+const useUpdateTabIndex = (ref: React.RefObject<HTMLDivElement>, isVisible: boolean) => {
+  useEffect(() => {
+    if (!ref.current) return;
+    // ... rest of implementation
+  }, [isVisible, ref]);
+};
+
+export default useUpdateTabIndex;
diff --git a/frontend/src/hooks/use-update-tab-index.tsx b/frontend/src/hooks/use-update-tab-index.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
 // Custom hook for set or remove 'tabindex' attribute
-const useUpdateTabIndex = (ref: React.RefObject<HTMLElement>, isVisible: boolean) => {
+const useUpdateTabIndex = (ref: React.RefObject<HTMLDivElement | null>, isVisible: boolean) => {
   useEffect(() => {
     if (!ref.current) return;
 

diff --git a/frontend/src/modules/attachments/image-viewer/image-viewer-setup.tsx b/frontend/src/modules/attachments/image-viewer/image-viewer-setup.tsx
@@ -129,12 +129,14 @@ export default class ReactPanZoom extends React.PureComponent<IReactPanZoomProps
           userSelect: 'none',
           width: this.props.width,
         }}
-        // biome-ignore lint/suspicious/noAssignInExpressions: by author
-        ref={(ref) => (this.panWrapper = ref)}
+        ref={(ref: HTMLDivElement | null): void => {
+          this.panWrapper = ref;
+        }}
       >
         <div
-          // biome-ignore lint/suspicious/noAssignInExpressions: by author
-          ref={(ref) => (this.panContainer = ref)}
+          ref={(ref: HTMLDivElement | null): void => {
+            this.panContainer = ref;
+          }}
           style={{
             transform: `matrix(${this.state.matrixData.join(',')})`,
           }}

diff --git a/frontend/src/modules/common/blocknote/custom-slash-menu/custom-slash-menu.tsx b/frontend/src/modules/common/blocknote/custom-slash-menu/custom-slash-menu.tsx
@@ -74,8 +74,9 @@ export const slashMenu = (
         <div key={item.title}>
           {!isMobile && index === indexedItemCount && items.length === originalItemCount && <hr className="slash-menu-separator" />}
           <div
-            // biome-ignore lint/suspicious/noAssignInExpressions: to enable scroll into selected item
-            ref={(el) => (itemRefs.current[index] = el)}
+            ref={(el) => {
+              itemRefs.current[index] = el;
+            }}
             className="slash-menu-item"
             aria-selected={selectedIndex === index}
             onMouseDown={(e) => triggerItemClick(item, e)}

diff --git a/frontend/src/modules/common/blocknote/index.tsx b/frontend/src/modules/common/blocknote/index.tsx
@@ -62,7 +62,7 @@ type BlockNoteProps = {
 } & (
   | {
       // filePanel and allowedFileBlockTypes req to add together
-      filePanel: (props: FilePanelProps) => JSX.Element;
+      filePanel: (props: FilePanelProps) => React.ReactElement;
       allowedFileBlockTypes: BasicFileBlockTypes[];
     }
   | {
@@ -238,6 +238,7 @@ export const BlockNote = ({
   }, [onBeforeLoadHandle]);
 
   return (
+    // @ts-ignore
     <BlockNoteView
       id={id}
       data-color-scheme={mode}

diff --git a/frontend/src/modules/common/blocknote/types.ts b/frontend/src/modules/common/blocknote/types.ts
@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { customSchema } from '~/modules/common/blocknote/blocknote-config';
 
 export type CustomBlockNoteSchema = typeof customSchema.BlockNoteEditor;
@@ -28,7 +29,7 @@ interface IconBaseProps extends React.SVGAttributes<SVGElement> {
   title?: string;
 }
 
-export type IconType = (props: IconBaseProps) => JSX.Element;
+export type IconType = (props: IconBaseProps) => React.ReactElement;
 
 export type BaseCustomBlockTypes = 'notify';