refactor(frontend): migrate to next15 and react 19

.nvmrc

@@ -0,0 +1 @@
+v22.16.0

package.json

@@ -17,5 +17,5 @@
   "devDependencies": {
     "typescript": "^5.2.2"
   },
-  "packageManager": "pnpm@8.6.12"
+  "packageManager": "pnpm@10.12.1"
 }

packages/cli/package.json

@@ -13,11 +13,11 @@
     "commander": "^11.0.0",
     "glob": "^10.3.10",
     "liquidjs": "^10.9.2",
-    "next": "^13.5.2",
+    "next": "^15.3.4",
     "pino": "^8.15.7",
     "pino-pretty": "^10.2.3"
   },
   "devDependencies": {
-    "@types/node": "20.4.2"
+    "@types/node": "22.15.32"
   }
 }

packages/compose/src/components.tsx

@@ -29,7 +29,7 @@ export function Card ({
 }: CardProps) {
   return (
     <flex direction="vertical" padding={padding} gap={gap}>
-      <CardHeading title={title} subtitle={subtitle} size={headerHeight} />
+      <CardHeading title={title ?? ''} subtitle={subtitle} size={headerHeight} />
       {children}
     </flex>
   );

packages/compose/src/factory.ts

@@ -2,7 +2,7 @@ import { BuiltinWidgetsMap } from '@ossinsight/widgets-core/src/renderer/builtin
 import { isEmptyData } from '@ossinsight/widgets-core/src/utils/datasource';
 import { FlexBaseLayout, GridLayout, Layout, WidgetLayout } from '@ossinsight/widgets-utils/src/compose';
 
-function Compose (component: any, props: any, ...children: any): Layout {
+function Compose (component: any, props: any, ...children: any): Layout | null {
   const { padding = 0, gap = 0, size = undefined, grow = undefined, data, ifEmpty, ...restProps } = props;
   if (ifEmpty) {
     if (isEmptyData(data)) {
@@ -12,7 +12,7 @@ function Compose (component: any, props: any, ...children: any): Layout {
             layout: 'widget',
             widget: 'builtin:empty',
             data: {},
-            parameters: undefined,
+            parameters: {},
             children: [],
           };
         }
@@ -34,7 +34,7 @@ function Compose (component: any, props: any, ...children: any): Layout {
   }
 
   // flatten children to a single array and remove falsy values.
-  children = children.filter(Boolean).flatMap(child => child);
+  children = children.filter(Boolean).flatMap((child: any) => child);
 
   if (typeof component === 'function') {
     return component({ ...props, children });

packages/compose/tsconfig.json

@@ -8,7 +8,9 @@
     "outDir": "dist",
     "rootDir": "src",
     "sourceMap": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true
   },
   "include": ["src"],
   "exclude": [

packages/eslint-plugin/package.json

@@ -8,11 +8,12 @@
     "dev": "tsc -w"
   },
   "devDependencies": {
+    "@types/eslint": "^9.6.1",
     "@types/node": "20.4.2",
-    "eslint": "8.45.0"
+    "eslint": "^9.29.0"
   },
   "peerDependencies": {
-    "eslint": "8.45.0"
+    "eslint": "^9.29.0"
   },
   "dependencies": {
     "@stoplight/json": "^3.21.0",

packages/eslint-plugin/src/index.ts

@@ -44,6 +44,8 @@ const plugin: ESLint.Plugin = {
                 return [];
               case 'ref':
                 return validateRefDatasource(result, datasource, i);
+              default:
+                return [];
             }
           }
         }

packages/eslint-plugin/src/rules/datasource-ref.ts

@@ -20,7 +20,7 @@ export function validateRefDatasource (result: JsonParserResult<any>, datasource
     return [{
       ruleId: 'ossinsight/datasource-ref',
       ...transformJsonRange(location),
-      message: e.message,
+      message: (((e as Error)?.message ?? 'Unknown Error') || String(e)),
       severity: 2,
     }];
   }

packages/eslint-plugin/src/rules/datasource-schema.ts

@@ -8,7 +8,7 @@ export function validateDatasourceSchema (result: JsonParserResult<any>): Linter
   const res = datasourceSchema(result.data);
 
   if (!res) {
-    return transformJsonSchemaErrorObject('ossinsight/datasource-schema', result, datasourceSchema.errors);
+    return transformJsonSchemaErrorObject('ossinsight/datasource-schema', result, datasourceSchema.errors ?? []);
   }
 
   return [];

packages/eslint-plugin/src/rules/params-schema.ts

@@ -8,7 +8,7 @@ export function validateParamsSchema (result: JsonParserResult<any>): Linter.Lin
   const res = paramsSchema(result.data);
 
   if (!res) {
-    return transformJsonSchemaErrorObject('ossinsight/params-schema', result, paramsSchema.errors);
+    return transformJsonSchemaErrorObject('ossinsight/params-schema', result, paramsSchema.errors ?? []);
   }
 
   return [];

packages/eslint-plugin/tsconfig.json

@@ -3,7 +3,7 @@
     "module": "NodeNext",
     "lib": ["ESNext"],
     "target": "ESNext",
-    "strict": false,
+    "strict": true,
     "moduleResolution": "nodenext",
     "isolatedModules": false,
     "esModuleInterop": true,

packages/ui/package.json

@@ -7,60 +7,38 @@
     "@headlessui/react": "^1.7.17",
     "@ossinsight/widgets-utils": "workspace:^",
     "@primer/octicons-react": "^19.7.0",
-    "@radix-ui/react-avatar": "^1.0.3",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-menubar": "^1.0.3",
-    "@radix-ui/react-popover": "^1.0.6",
-    "@radix-ui/react-select": "^1.2.2",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toggle-group": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.6",
+    "radix-ui": "^1.4.2",
     "clsx": "^2.0.0",
     "react-transition-state": "^2.1.1",
     "react-window": "^1.8.9",
     "rehype-react": "^7.2.0",
     "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",
-    "tailwind-merge": "^1.14.0",
+    "tailwind-merge": "^2.6.0",
     "unified": "^10.1.2"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.1.0",
-    "@storybook/addon-essentials": "^7.4.3",
-    "@storybook/addon-interactions": "^7.4.3",
-    "@storybook/addon-links": "^7.4.3",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.4.3",
-    "@storybook/nextjs": "^7.4.3",
-    "@storybook/react": "^7.4.3",
-    "@storybook/testing-library": "^0.2.1",
-    "@storybook/theming": "^7.4.3",
     "@svgr/webpack": "^8.1.0",
     "@types/mdast": "^4.0.0",
-    "@types/react": "18.2.15",
-    "@types/react-dom": "18.2.7",
+    "@types/react": "19.1.0",
+    "@types/react-dom": "^19.1.6",
     "@types/react-window": "^1.8.5",
     "autoprefixer": "10.4.14",
     "bootstrap-icons": "^1.11.1",
     "highlight.js": "^11.8.0",
-    "next": "^13.5.2",
+    "next": "^15.3.4",
     "postcss": "8.4.26",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.2.0-canary-3fbfb9ba-20250409",
+    "react-dom": "19.2.0-canary-3fbfb9ba-20250409",
     "sass": "^1.68.0",
-    "storybook": "^7.4.3",
     "tailwindcss": "3.3.3"
   },
   "peerDependencies": {
     "bootstrap-icons": "^1.10.5",
-    "next": "^13.5.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "tailwindcss": "3.3.3"
-  },
-  "scripts": {
-    "storybook": "storybook dev --no-open -p 6006",
-    "build-storybook": "storybook build"
+    "next": "^15.3.4",
+    "react": "19.2.0-canary-3fbfb9ba-20250409",
+    "react-dom": "19.2.0-canary-3fbfb9ba-20250409",
+    "tailwindcss": "3.4.17"
   }
 }

packages/ui/src/components/Button/styles.scss

@@ -1,4 +1,5 @@
-@import "../../styles/controls";
+@use "../../styles/theme" as *;
+@use "../../styles/controls" as *;
 
 .Button {
   @apply px-2 py-1 text-sm border transition inline-flex items-center justify-center gap-1;

packages/ui/src/components/GHAvatar/GHAvatar.tsx

@@ -1,4 +1,4 @@
-import * as RuiAvatar from '@radix-ui/react-avatar';
+import { Avatar as RuiAvatar } from 'radix-ui';
 import { AvatarSkeleton } from '../Skeleton';
 
 export interface GHAvatarProps {