meta: upgraded react 19 next 15.2 (#7531)

* meta: upgraded react 19 next 15.2 * chore: just a tiny bit of a type improvement * chore: simplify link props * chore: fix package order * chore: fix tests * chore: remove act warns
nodejs · Mar 1, 2025 · 2c6dd62 · 2c6dd62
1 parent 267eb73
commit 2c6dd62
Show file tree

Hide file tree

Showing 14 changed files with 2,561 additions and 2,274 deletions.
diff --git a/apps/site/.stylelintrc.mjs b/apps/site/.stylelintrc.mjs
@@ -41,5 +41,7 @@ export default {
     'media-feature-range-notation': 'prefix',
     // Adopts the import notation from `postcss-import`
     'import-notation': 'string',
+    // Allow the `@apply` at rule as its part of Tailwind
+    'at-rule-no-deprecated': [true, { ignoreAtRules: ['apply'] }],
   },
 };
diff --git a/apps/site/components/Common/AvatarGroup/__tests__/index.test.mjs b/apps/site/components/Common/AvatarGroup/__tests__/index.test.mjs
@@ -1,9 +1,9 @@
 import { render, fireEvent } from '@testing-library/react';
 
-import { getGitHubAvatarUrl } from '@/util/gitHubUtils';
-
 import AvatarGroup from '../index';
 
+import { getGitHubAvatarUrl } from '@/util/gitHubUtils';
+
 const names = [
   'ovflowd',
   'bmuenzenmeyer',

diff --git a/apps/site/components/Common/CodeBox/index.tsx b/apps/site/components/Common/CodeBox/index.tsx
@@ -1,12 +1,12 @@
 'use client';
 
 import {
-  DocumentDuplicateIcon,
   CodeBracketIcon,
+  DocumentDuplicateIcon,
 } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
 import { useTranslations } from 'next-intl';
-import type { FC, PropsWithChildren, ReactNode } from 'react';
+import type { FC, PropsWithChildren, ReactElement } from 'react';
 import { Fragment, isValidElement, useRef } from 'react';
 
 import Button from '@/components/Common/Button';
@@ -16,7 +16,10 @@ import styles from './index.module.css';
 
 // Transforms a code element with plain text content into a more structured
 // format for rendering with line numbers
-const transformCode = (code: ReactNode, language: string): ReactNode => {
+const transformCode = <T extends ReactElement<PropsWithChildren>>(
+  code: T,
+  language: string
+): ReactElement<HTMLElement> | T => {
   if (!isValidElement(code)) {
     // Early return when the `CodeBox` child is not a valid element since the
     // type is a ReactNode, and can assume any value
@@ -106,7 +109,7 @@ const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
         tabIndex={0}
         dir="ltr"
       >
-        {transformCode(children, language)}
+        {transformCode(children as ReactElement<PropsWithChildren>, language)}
       </pre>
 
       {language && (

diff --git a/apps/site/components/Common/Tabs/__tests__/index.test.mjs b/apps/site/components/Common/Tabs/__tests__/index.test.mjs
@@ -1,34 +1,32 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import Link from '../../../Link';
 import Tabs from '../index';
 
+const Sut = ({ addons }) => {
+  const tabs = [
+    { key: 'package', label: 'Package Manager' },
+    { key: 'prebuilt', label: 'Prebuilt Installer' },
+    { key: 'source', label: 'Source Code' },
+  ];
+
+  return (
+    <Tabs tabs={tabs} defaultValue="package" addons={addons}>
+      <TabsPrimitive.Content value="package">
+        Package Manager
+      </TabsPrimitive.Content>
+      <TabsPrimitive.Content value="prebuilt">
+        Prebuilt Installer
+      </TabsPrimitive.Content>
+      <TabsPrimitive.Content value="source">Source Code</TabsPrimitive.Content>
+    </Tabs>
+  );
+};
+
 describe('Tabs', () => {
-  const Sut = ({ addons }) => {
-    const tabs = [
-      { key: 'package', label: 'Package Manager' },
-      { key: 'prebuilt', label: 'Prebuilt Installer' },
-      { key: 'source', label: 'Source Code' },
-    ];
-
-    return (
-      <Tabs tabs={tabs} defaultValue="package" addons={addons}>
-        <TabsPrimitive.Content value="package">
-          Package Manager
-        </TabsPrimitive.Content>
-        <TabsPrimitive.Content value="prebuilt">
-          Prebuilt Installer
-        </TabsPrimitive.Content>
-        <TabsPrimitive.Content value="source">
-          Source Code
-        </TabsPrimitive.Content>
-      </Tabs>
-    );
-  };
-
-  it('should render the correct number of tabs', () => {
+  it('should render the correct number of tabs', async () => {
     render(<Sut />);
 
     expect(screen.getAllByRole('tab')).toHaveLength(3);
@@ -39,9 +37,7 @@ describe('Tabs', () => {
 
     expect(screen.getByRole('tabpanel')).toHaveTextContent('Package Manager');
 
-    await act(async () => {
-      await userEvent.click(screen.getByRole('tab', { name: 'Source Code' }));
-    });
+    await userEvent.click(screen.getByRole('tab', { name: 'Source Code' }));
 
     expect(screen.getByRole('tabpanel')).toHaveTextContent('Source Code');
   });

diff --git a/apps/site/components/Common/Tooltip/index.tsx b/apps/site/components/Common/Tooltip/index.tsx
@@ -1,14 +1,14 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import classNames from 'classnames';
-import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
 
 import styles from './index.module.css';
 
 type TooltipProps = {
   asChild?: boolean;
   content: ReactNode;
   kind?: 'default' | 'warning' | 'error';
-  side?: ComponentProps<typeof TooltipPrimitive.Content>['side'];
+  side?: TooltipPrimitive.TooltipContentProps['side'];
   container?: HTMLElement | null;
 };
 

diff --git a/apps/site/components/Link.tsx b/apps/site/components/Link.tsx
@@ -1,12 +1,12 @@
-import type { FC, ComponentProps } from 'react';
+import type { FC, HTMLProps } from 'react';
 
 import { Link as LocalizedLink } from '@/navigation.mjs';
 
-type LinkProps = Omit<ComponentProps<typeof LocalizedLink>, 'href'> & {
-  href?: string;
-};
-
-const Link: FC<LinkProps> = ({ children, href, ...props }) => {
+const Link: FC<HTMLProps<HTMLAnchorElement>> = ({
+  children,
+  href,
+  ...props
+}) => {
   if (!href || href.toString().startsWith('http')) {
     return (
       <a href={href} {...props}>

diff --git a/apps/site/components/MDX/CodeTabs/index.tsx b/apps/site/components/MDX/CodeTabs/index.tsx
@@ -7,7 +7,7 @@ type MDXCodeTabsProps = Pick<
   ComponentProps<typeof CodeTabs>,
   'linkText' | 'linkUrl'
 > & {
-  children: Array<ReactElement>;
+  children: Array<ReactElement<unknown>>;
   languages: string;
   displayNames?: string;
   defaultTab?: string;

diff --git a/apps/site/eslint.config.js b/apps/site/eslint.config.js
@@ -37,11 +37,7 @@ export default tseslint.config(
       '@next/next/no-duplicate-head': 'off',
       'import-x/no-duplicates': 'off',
     },
-    settings: {
-      react: {
-        version: 'detect',
-      },
-    },
+    settings: { react: { version: 'detect' } },
   },
   {
     files: ['**/*.{md,mdx}'],

diff --git a/apps/site/jest.setup.mjs b/apps/site/jest.setup.mjs
@@ -1 +1,3 @@
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
 import '@testing-library/jest-dom';
diff --git a/apps/site/package.json b/apps/site/package.json
@@ -28,90 +28,88 @@
     "@node-core/website-i18n": "*",
     "@nodevu/core": "0.3.0",
     "@opentelemetry/api": "1.9.0",
-    "@orama/react-components": "^0.3.2",
+    "@orama/react-components": "^0.5.1",
     "@oramacloud/client": "^2.1.4",
-    "@radix-ui/react-accessible-icon": "^1.1.0",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-scroll-area": "^1.2.1",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-toast": "^1.2.5",
+    "@radix-ui/react-accessible-icon": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@savvywombat/tailwindcss-grid-areas": "~4.0.0",
     "@tailwindcss/container-queries": "~0.1.1",
     "@vcarl/remark-headings": "~0.1.0",
-    "@vercel/analytics": "~1.4.1",
+    "@vercel/analytics": "~1.5.0",
     "@vercel/otel": "~1.10.1",
-    "@vercel/speed-insights": "~1.1.0",
+    "@vercel/speed-insights": "~1.2.0",
     "autoprefixer": "~10.4.20",
     "classnames": "~2.5.1",
     "cross-env": "7.0.3",
     "dedent": "1.5.3",
     "feed": "~4.2.2",
     "github-slugger": "~2.0.0",
-    "glob": "~11.0.0",
+    "glob": "~11.0.1",
     "gray-matter": "~4.0.3",
-    "next": "15.1.6",
-    "next-intl": "~3.26.3",
-    "next-themes": "~0.4.3",
-    "postcss": "~8.4.49",
-    "postcss-calc": "~10.0.2",
+    "next": "15.2.0",
+    "next-intl": "~3.26.5",
+    "next-themes": "~0.4.4",
+    "postcss": "~8.5.3",
+    "postcss-calc": "~10.1.1",
     "postcss-import": "~16.1.0",
     "postcss-loader": "~8.1.1",
     "postcss-mixins": "~11.0.3",
     "postcss-simple-vars": "~7.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "rehype-autolink-headings": "~7.1.0",
     "rehype-slug": "~6.0.0",
-    "remark-gfm": "~4.0.0",
+    "remark-gfm": "~4.0.1",
     "remark-reading-time": "~2.0.1",
     "semver": "~7.7.1",
-    "shiki": "~2.2.0",
-    "sval": "^0.5.2",
-    "tailwindcss": "~3.4.15",
+    "shiki": "~3.1.0",
+    "sval": "^0.6.1",
+    "tailwindcss": "~3.4.17",
     "unist-util-visit": "~5.0.0",
     "vfile": "~6.0.3",
     "vfile-matter": "~5.0.0"
   },
   "devDependencies": {
-    "@eslint/compat": "~1.2.3",
-    "@next/eslint-plugin-next": "15.1.6",
-    "@storybook/addon-controls": "^8.5.2",
-    "@storybook/addon-interactions": "^8.5.2",
+    "@eslint/compat": "~1.2.7",
+    "@next/eslint-plugin-next": "15.2.0",
+    "@storybook/addon-controls": "^8.6.3",
+    "@storybook/addon-interactions": "^8.6.3",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^8.5.2",
-    "@storybook/addon-viewport": "^8.5.2",
-    "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
-    "@storybook/react-webpack5": "^8.5.2",
+    "@storybook/addon-themes": "^8.6.3",
+    "@storybook/addon-viewport": "^8.6.3",
+    "@storybook/addon-webpack5-compiler-swc": "^2.1.0",
+    "@storybook/react-webpack5": "^8.6.3",
     "@testing-library/jest-dom": "~6.6.3",
     "@testing-library/react": "~16.2.0",
     "@testing-library/user-event": "~14.6.1",
     "@types/jest": "29.5.14",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
     "@types/semver": "~7.5.8",
-    "eslint-config-next": "15.1.3",
-    "eslint-import-resolver-typescript": "~3.7.0",
+    "eslint-config-next": "15.2.0",
+    "eslint-import-resolver-typescript": "~3.8.3",
     "eslint-plugin-mdx": "~3.1.5",
-    "eslint-plugin-react": "~7.37.2",
-    "eslint-plugin-react-hooks": "5.1.0",
-    "eslint-plugin-storybook": "~0.11.0",
+    "eslint-plugin-react": "~7.37.4",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-storybook": "~0.11.3",
     "handlebars": "4.7.8",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "16.0.0",
     "remark-frontmatter": "5.0.0",
     "remark-preset-lint-node": "5.1.2",
-    "storybook": "^8.4.4",
-    "stylelint": "16.12.0",
-    "stylelint-config-standard": "36.0.1",
+    "storybook": "^8.6.3",
+    "stylelint": "16.15.0",
+    "stylelint-config-standard": "37.0.0",
     "stylelint-order": "6.0.4",
     "stylelint-selector-bem-pattern": "4.0.1",
     "typescript": "~5.7.2",
-    "typescript-eslint": "~8.19.0",
+    "typescript-eslint": "~8.25.0",
     "user-agent-data-types": "0.4.2"
   }
 }
diff --git a/apps/site/providers/__tests__/matterProvider.test.mjs b/apps/site/providers/__tests__/matterProvider.test.mjs
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
 
 import { MatterProvider, MatterContext } from '@/providers/matterProvider';
 
@@ -9,21 +9,23 @@ const mockContext = {
   readingTime: { text: '', minutes: 0, time: 0, words: 0 },
   filename: '',
   os: 'LOADING',
-  architecture: '',
-  bitness: '',
+  architecture: expect.any(String),
+  bitness: expect.any(String),
 };
 
 describe('MatterProvider', () => {
-  it('renders the provider with the provided context value', () => {
-    render(
-      <MatterProvider os="LOADING">
-        <MatterContext.Consumer>
-          {value => {
-            expect(value).toEqual(mockContext);
-            return null;
-          }}
-        </MatterContext.Consumer>
-      </MatterProvider>
+  it('renders the provider with the provided context value', async () => {
+    await act(async () =>
+      render(
+        <MatterProvider os="LOADING">
+          <MatterContext.Consumer>
+            {value => {
+              expect(value).toEqual(mockContext);
+              return null;
+            }}
+          </MatterContext.Consumer>
+        </MatterProvider>
+      )
     );
   });
 });
diff --git a/apps/site/providers/__tests__/themeProvider.test.mjs b/apps/site/providers/__tests__/themeProvider.test.mjs
@@ -23,7 +23,7 @@ describe('ThemeProvider', () => {
         storageKey: 'theme',
         children: <div>Mock Component</div>,
       },
-      expect.any(Object)
+      undefined
     );
     expect(container.firstChild).toHaveTextContent('Mock Component');
   });
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		globalThis.IS_REACT_ACT_ENVIRONMENT = true;

		import '@testing-library/jest-dom';