meta: bump the storybook group with 4 updates

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';
 

packages/ui-components/src/Containers/Sidebar/SidebarItem/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 SidebarItem from '#ui/Containers/Sidebar/SidebarItem';
 

packages/ui-components/src/Containers/Sidebar/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 Sidebar from '#ui/Containers/Sidebar';
 

packages/ui-components/src/Icons/HexagonGrid.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 HexagonGrid from '#ui/Icons/HexagonGrid';