[pull] main from nodejs:main

apps/site/hooks/react-client/__tests__/useDetectOS.test.mjs

@@ -71,8 +71,8 @@ describe('useDetectOS', () => {
     await waitFor(() => {
       assert.deepEqual(result.current, {
         os: 'MAC',
-        bitness: '32',
-        architecture: 'x86',
+        bitness: '64',
+        architecture: 'arm',
       });
     });
   });

apps/site/hooks/react-client/useDetectOS.ts

@@ -7,7 +7,7 @@ import type {
   Bitness,
   OperatingSystem,
 } from '#site/types/userAgent';
-import { getHighEntropyValues, detectOS } from '#site/util/userAgent';
+import { detectOS, getHighEntropyValues } from '#site/util/userAgent';
 
 type UserOSState = {
   os: OperatingSystem | 'LOADING';
@@ -28,10 +28,12 @@ const useDetectOS = () => {
       navigator.userAgent
     );
 
+    const os = detectOS();
+
     // We immediately set the OS to LOADING, and then we update it with the detected OS.
     // This is due to that initial render set within the state will indicate a mismatch from
     // the server-side rendering versus what the initial state is from the client-side
-    setUserOSState(current => ({ ...current, os: detectOS() }));
+    setUserOSState(current => ({ ...current, os }));
 
     // We attempt to get the high entropy values from the Browser and set the User OS State
     // based from the values we get from the Browser, if it fails we fallback to the User Agent
@@ -40,8 +42,9 @@ const useDetectOS = () => {
       ({
         // If there is no getHighEntropyValues API on the Browser or it failed to resolve
         // we attempt to fallback to what the User Agent indicates
-        bitness = uaIndicates64 ? '64' : '32',
-        architecture = 'x86',
+        bitness = os === 'MAC' || uaIndicates64 ? '64' : '32',
+        // we assume that MacOS has moved to arm64 by default now
+        architecture = os === 'MAC' ? 'arm' : 'x86',
       }) => {
         setUserOSState(current => ({
           ...current,

apps/site/pages/en/blog/migrations/v22-to-v24.mdx

@@ -157,10 +157,10 @@ The [`fs.truncate`](https://nodejs.org/api/fs.html#fs_fs_truncate_path_len_callb
 
 The source code for this codemod can be found in the [fs-truncate-fd-deprecation directory](https://github.com/nodejs/userland-migrations/tree/main/recipes/fs-truncate-fd-deprecation).
 
-You can find this codemod in the [Codemod Registry](https://app.codemod.com/registry/@nodejs/fs-truncate-to-ftruncate).
+You can find this codemod in the [Codemod Registry](https://app.codemod.com/registry/@nodejs/fs-truncate-fd-deprecation).
 
 ```bash
-npx codemod run @nodejs/fs-truncate-to-ftruncate
+npx codemod run @nodejs/fs-truncate-fd-deprecation
 ```
 
 #### Example:

packages/ui-components/.storybook/preview.tsx

@@ -1,5 +1,5 @@
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
-import type { Preview, ReactRenderer } from '@storybook/react';
+import type { Preview, ReactRenderer } from '@storybook/react-webpack5';
 
 import { NotificationProvider } from '#ui/Providers/NotificationProvider';
 
@@ -10,8 +10,11 @@ import '#ui/styles/index.css';
 const preview: Preview = {
   parameters: {
     chromatic: { modes: STORYBOOK_MODES },
-    viewport: { defaultViewport: 'large', viewports: STORYBOOK_SIZES },
+    viewport: {
+      options: STORYBOOK_SIZES,
+    },
   },
+
   decorators: [
     Story => (
       <NotificationProvider>
@@ -27,6 +30,13 @@ const preview: Preview = {
     // this can be removed, since `withThemeByDataAttribute`
     // will return the same type that is accepted by `Preview`
   ] as Preview['decorators'],
+
+  initialGlobals: {
+    viewport: {
+      value: 'large',
+      isRotated: false,
+    },
+  },
 };
 
 export default preview;

packages/ui-components/__design__/colors.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 export const Colors: StoryObj = {
   render: () => (

packages/ui-components/__design__/effects.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 export const H1Special: StoryObj = {
   render: () => <h1 className="special">Special H1</h1>,

packages/ui-components/__design__/font-family.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 export const FontFamily: StoryObj = {
   render: () => (

packages/ui-components/__design__/list.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 export const OrderedLists: StoryObj = {
   render: () => (

packages/ui-components/__design__/node-logos.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import { JsWhite, Nodejs } from '#ui/Icons/Logos';
 

packages/ui-components/__design__/platform-logos.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import {
   Docker,

packages/ui-components/__design__/social-logos.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import {
   Bluesky,

packages/ui-components/__design__/table.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 const tableData = [
   ['Data 1', 'Data 2', 'Data 3'],

packages/ui-components/__design__/text.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 export const Anchor: StoryObj = {
   render: () => (

packages/ui-components/package.json

@@ -53,23 +53,22 @@
   },
   "devDependencies": {
     "@storybook/addon-styling-webpack": "^2.0.0",
-    "@storybook/addon-themes": "^9.1.10",
+    "@storybook/addon-themes": "^10.0.2",
     "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
-    "@storybook/react": "^9.1.10",
-    "@storybook/react-webpack5": "^9.1.10",
+    "@storybook/react-webpack5": "^10.0.2",
     "@testing-library/user-event": "~14.6.1",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "cross-env": "catalog:",
     "css-loader": "~7.1.2",
     "eslint-plugin-react": "~7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-storybook": "~9.0.3",
+    "eslint-plugin-storybook": "~10.0.2",
     "global-jsdom": "^27.0.0",
     "postcss-cli": "^11.0.1",
     "postcss-loader": "~8.2.0",
     "react": "catalog:",
-    "storybook": "^9.1.10",
+    "storybook": "^10.0.2",
     "style-loader": "~4.0.0",
     "stylelint": "^16.24.0",
     "stylelint-config-standard": "^39.0.0",

packages/ui-components/src/Common/AlertBox/index.stories.tsx

@@ -1,5 +1,5 @@
 import { ExclamationCircleIcon } from '@heroicons/react/24/solid';
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import AlertBox from '#ui/Common/AlertBox';
 

packages/ui-components/src/Common/AvatarGroup/Avatar/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import Avatar from '#ui/Common/AvatarGroup/Avatar';
 

packages/ui-components/src/Common/AvatarGroup/Overlay/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import AvatarOverlay from '#ui/Common/AvatarGroup/Overlay';
 

packages/ui-components/src/Common/AvatarGroup/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import AvatarGroup from '#ui/Common/AvatarGroup';
 

packages/ui-components/src/Common/Badge/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import Badge from '#ui/Common/Badge';
 

packages/ui-components/src/Common/BadgeGroup/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import BadgeGroup from '#ui/Common/BadgeGroup';
 

packages/ui-components/src/Common/Banner/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import Banner from '#ui/Common/Banner';
 

packages/ui-components/src/Common/BaseButton/index.stories.tsx

@@ -1,5 +1,5 @@
 import { ArrowRightIcon } from '@heroicons/react/24/solid';
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import BaseButton from '#ui/Common/BaseButton';
 

packages/ui-components/src/Common/BaseCodeBox/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import BaseCodeBox from '#ui/Common/BaseCodeBox';
 

packages/ui-components/src/Common/BaseCrossLink/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import BaseCrossLink from '#ui/Common/BaseCrossLink';
 

packages/ui-components/src/Common/BaseLinkTabs/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import BaseLinkTabs from '#ui/Common/BaseLinkTabs';
 

packages/ui-components/src/Common/BasePagination/Ellipsis/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import Ellipsis from '#ui/Common/BasePagination/Ellipsis';
 

packages/ui-components/src/Common/BasePagination/PaginationListItem/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import PaginationListItem from '#ui/Common/BasePagination/PaginationListItem';
 

packages/ui-components/src/Common/BasePagination/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import BasePagination from '#ui/Common/BasePagination';
 

packages/ui-components/src/Common/Blockquote/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import Blockquote from '#ui/Common/Blockquote';
 

packages/ui-components/src/Common/Breadcrumbs/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import Breadcrumbs from '#ui/Common/Breadcrumbs';
 

packages/ui-components/src/Common/ChangeHistory/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import ChangeHistory from '#ui/Common/ChangeHistory';
 

packages/ui-components/src/Common/CodeTabs/index.stories.tsx

@@ -1,5 +1,5 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 import type { FC } from 'react';
 
 import BaseCodeBox from '#ui/Common/BaseCodeBox';

packages/ui-components/src/Common/DataTag/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import DataTag, { type DataTagProps } from '#ui/Common/DataTag';
 

packages/ui-components/src/Common/GlowingBackdrop/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import GlowingBackdrop from '#ui/Common/GlowingBackdrop';
 

packages/ui-components/src/Common/LanguageDropDown/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import LanguageDropDown from '#ui/Common/LanguageDropDown';
 

packages/ui-components/src/Common/Modal/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import { Modal, Title, Description, Content } from '#ui/Common/Modal';
 

packages/ui-components/src/Common/NodejsLogo/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import NodejsLogo from '#ui/Common/NodejsLogo';
 

packages/ui-components/src/Common/Notification/index.stories.tsx

@@ -1,5 +1,5 @@
 import { CodeBracketIcon } from '@heroicons/react/24/solid';
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import Notification from '#ui/Common/Notification';
 

packages/ui-components/src/Common/Preview/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import Preview from '#ui/Common/Preview';
 

packages/ui-components/src/Common/Select/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import Select from '#ui/Common/Select';
 import StatelessSelect from '#ui/Common/Select/StatelessSelect';

packages/ui-components/src/Common/Separator/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import Separator from '#ui/Common/Separator';
 

packages/ui-components/src/Common/Tabs/index.stories.tsx

@@ -1,5 +1,5 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 import type { ComponentProps } from 'react';
 
 import Tabs from '#ui/Common/Tabs';

packages/ui-components/src/Common/ThemeToggle/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import ThemeToggle from '#ui/Common/ThemeToggle';
 

packages/ui-components/src/Common/Tooltip/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import Tooltip from '#ui/Common/Tooltip';
 

packages/ui-components/src/Containers/Article/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import Article from '.';
 

packages/ui-components/src/Containers/Footer/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import Footer from '#ui/Containers/Footer';
 

packages/ui-components/src/Containers/MetaBar/index.stories.tsx

@@ -1,5 +1,5 @@
 import { CodeBracketIcon } from '@heroicons/react/24/outline';
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import MetaBar from '#ui/Containers/MetaBar';
 import GitHubIcon from '#ui/Icons/Social/GitHub';

packages/ui-components/src/Containers/NavBar/NavItem/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import NavItem from '#ui/Containers/NavBar/NavItem';
 

packages/ui-components/src/Containers/NavBar/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import NavBar from '#ui/Containers/NavBar';
 

packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
 
 import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';