feat: update tooling dependencies (#310)

Author: spawnia

package.json

@@ -63,12 +63,12 @@
     "react-image-size": "^2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/eslint-parser": "^7.23.10",
-    "@babel/plugin-transform-runtime": "^7.23.9",
-    "@babel/preset-env": "^7.23.9",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/runtime": "^7.23.9",
+    "@babel/core": "^7.26.10",
+    "@babel/eslint-parser": "^7.26.10",
+    "@babel/plugin-transform-runtime": "^7.26.10",
+    "@babel/preset-env": "^7.26.10",
+    "@babel/preset-react": "^7.26.10",
+    "@babel/runtime": "^7.26.10",
     "@mll-lab/eslint-config": "^3.1.0",
     "@mll-lab/eslint-plugin": "^1.3.4",
     "@mll-lab/prettier-config": "^1.0.0",
@@ -79,13 +79,13 @@
     "@rollup/plugin-typescript": "^11.1.6",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addons": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0",
     "@storybook/storybook-deployer": "^2.8.16",
     "@testing-library/dom": "^9.3.3",
-    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
@@ -95,7 +95,6 @@
     "@types/react": "^18.2.38",
     "@types/react-datepicker": "^4.19.3",
     "@types/react-dom": "^18.2.17",
-    "@types/testing-library__jest-dom": "^6.0.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-import": "^1.13.8",
@@ -121,18 +120,18 @@
     "react-is": "^18.2.0",
     "require-from-string": "^2.0.2",
     "rimraf": "^6.0.1",
-    "rollup": "^4.9.6",
+    "rollup": "^4.22.4",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-styles": "^4.0.0",
     "semantic-release": "^25.0.1",
-    "storybook": "^7.6.12",
+    "storybook": "^8.0.0",
     "style-loader": "^3.3.3",
     "styled-components": "^6.1.1",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.3.2",
-    "webpack": "^5.89.0"
+    "webpack": "^5.97.0"
   },
   "packageManager": "yarn@4.10.3"
 }

src/Alert/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { Alert, AlertProps } from './index';
@@ -21,7 +21,7 @@ export default {
   },
 };
 
-export const Default: Story<AlertProps> = function Default(args) {
+export const Default: StoryFn<AlertProps> = function Default(args) {
   return (
     <Alert message="Warning Text" type="warning" closable showIcon {...args} />
   );

src/Autocomplete/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { toFormInputOption } from '../Form';
@@ -9,7 +9,7 @@ export default {
   title: 'Autocomplete',
 };
 
-export const WithOptions: Story<AutocompleteProps> = function WithOptions(
+export const WithOptions: StoryFn<AutocompleteProps> = function WithOptions(
   args,
 ) {
   return (

src/Avatar/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import { range } from 'lodash';
 import React from 'react';
 
@@ -15,7 +15,7 @@ export default {
   },
 };
 
-export const Default: Story<AvatarProps> = function Default(args) {
+export const Default: StoryFn<AvatarProps> = function Default(args) {
   return (
     <Avatar
       style={{
@@ -29,12 +29,12 @@ export const Default: Story<AvatarProps> = function Default(args) {
   );
 };
 
-export const CustomizableUserAvatar: Story<UserAvatarProps> =
+export const CustomizableUserAvatar: StoryFn<UserAvatarProps> =
   function CustomizableUserAvatar(args) {
     return <UserAvatar {...args} />;
   };
 
-export const VariableUserAvatars: Story<Omit<UserAvatarProps, 'username'>> =
+export const VariableUserAvatars: StoryFn<Omit<UserAvatarProps, 'username'>> =
   function VariableUserAvatars(args) {
     return (
       <>

src/BackTop/index.stories.tsx

@@ -1,5 +1,5 @@
 import { VerticalAlignTopOutlined } from '@ant-design/icons';
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { BackTop, BackTopProps } from './index';
@@ -8,7 +8,7 @@ export default {
   title: 'BackTop',
 };
 
-export const Default: Story<BackTopProps> = function Default(args) {
+export const Default: StoryFn<BackTopProps> = function Default(args) {
   return (
     <div>
       <div style={{ height: '1600px' }}>

src/Badge/index.stories.tsx

@@ -1,5 +1,5 @@
 import { BellOutlined } from '@ant-design/icons';
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { Badge, BadgeProps } from './index';
@@ -8,7 +8,7 @@ export default {
   title: 'Badge',
 };
 
-export const Default: Story<BadgeProps> = function Default(args) {
+export const Default: StoryFn<BadgeProps> = function Default(args) {
   return (
     <div>
       <Badge size="small" count={5} offset={[5, 0]} {...args}>

src/Breadcrumb/index.stories.tsx

@@ -1,5 +1,5 @@
 import { HomeOutlined } from '@ant-design/icons';
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { Breadcrumb, BreadcrumbProps } from './index';
@@ -8,7 +8,7 @@ export default {
   title: 'Breadcrumb',
 };
 
-export const Default: Story<BreadcrumbProps> = function Default(args) {
+export const Default: StoryFn<BreadcrumbProps> = function Default(args) {
   return (
     <Breadcrumb {...args}>
       <Breadcrumb.Item>

src/Button/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 
 import {
@@ -36,16 +36,16 @@ export default {
   },
 };
 
-export const Default: Story<ButtonProps> = function Default(args) {
+export const Default: StoryFn<ButtonProps> = function Default(args) {
   return <Button {...args}>Default</Button>;
 };
-export const Create: Story<ButtonProps> = function Create(args) {
+export const Create: StoryFn<ButtonProps> = function Create(args) {
   return <CreateButton {...args} />;
 };
-export const Save: Story<ButtonProps> = function Save(args) {
+export const Save: StoryFn<ButtonProps> = function Save(args) {
   return <SaveButton {...args} />;
 };
-export const SaveWithHotkey: Story<SaveButtonByNumpadEnterProps> =
+export const SaveWithHotkey: StoryFn<SaveButtonByNumpadEnterProps> =
   function SaveWithHotkey(args) {
     return (
       <div>
@@ -56,26 +56,26 @@ export const SaveWithHotkey: Story<SaveButtonByNumpadEnterProps> =
       </div>
     );
   };
-export const Info: Story<ButtonProps> = function Info(args) {
+export const Info: StoryFn<ButtonProps> = function Info(args) {
   return <InfoButton {...args}>Info</InfoButton>;
 };
-export const Edit: Story<ButtonProps> = function Edit(args) {
+export const Edit: StoryFn<ButtonProps> = function Edit(args) {
   return <EditButton {...args} />;
 };
-export const Warning: Story<ButtonProps> = function Warning(args) {
+export const Warning: StoryFn<ButtonProps> = function Warning(args) {
   return (
     <WarningButton {...args}>Do something slightly dangerous</WarningButton>
   );
 };
-export const Cancel: Story<ButtonProps> = function Cancel(args) {
+export const Cancel: StoryFn<ButtonProps> = function Cancel(args) {
   return <CancelButton {...args} />;
 };
-export const Reset: Story<ButtonProps> = function Reset(args) {
+export const Reset: StoryFn<ButtonProps> = function Reset(args) {
   return <ResetButton {...args} />;
 };
-export const Delete: Story<ButtonProps> = function Delete(args) {
+export const Delete: StoryFn<ButtonProps> = function Delete(args) {
   return <DeleteButton {...args} />;
 };
-export const Send: Story<ButtonProps> = function Send(args) {
+export const Send: StoryFn<ButtonProps> = function Send(args) {
   return <SendButton {...args} />;
 };

src/Card/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { THEME } from '../theme';
@@ -9,23 +9,23 @@ export default {
   title: 'Card',
 };
 
-export const Default: Story<CardProps> = function Default(args) {
+export const Default: StoryFn<CardProps> = function Default(args) {
   return (
     <Card title="Default size card" {...args}>
       <p>Card content</p>
     </Card>
   );
 };
 
-export const InnerCard: Story<CardProps> = function InnerCard(args) {
+export const InnerCard: StoryFn<CardProps> = function InnerCard(args) {
   return (
     <Card type="inner" title="Inner Card title" extra="Extra content" {...args}>
       Inner Card content
     </Card>
   );
 };
 
-export const TabsCard: Story<CardProps> = function TabsCard(args) {
+export const TabsCard: StoryFn<CardProps> = function TabsCard(args) {
   return (
     <Card
       title="Card with Tabs"
@@ -51,7 +51,7 @@ const gridStyle = {
   width: '25%',
 };
 
-export const CardsGrid: Story<CardProps> = function CardsGrid(args) {
+export const CardsGrid: StoryFn<CardProps> = function CardsGrid(args) {
   return (
     <Card title="Cards Grid" {...args} style={{ width: 400 }}>
       <Card.Grid style={gridStyle}>Content</Card.Grid>
@@ -63,15 +63,15 @@ export const CardsGrid: Story<CardProps> = function CardsGrid(args) {
   );
 };
 
-export const CardMeta: Story<CardProps> = function CardMeta(args) {
+export const CardMeta: StoryFn<CardProps> = function CardMeta(args) {
   return (
     <Card hoverable style={{ width: 240 }} cover="Some cover" {...args}>
       <Card.Meta title="Europe Street beat" description="www.google.com" />
     </Card>
   );
 };
 
-export const CardOnColoredBackground: Story<CardProps> =
+export const CardOnColoredBackground: StoryFn<CardProps> =
   function CardOnColoredBackground(args) {
     return (
       <div style={{ background: THEME.backgroundColor, padding: 20 }}>

src/Checkbox/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { Form } from '../Form';
@@ -9,25 +9,24 @@ export default {
   title: 'Checkbox',
 };
 
-export const Default: Story<CheckboxProps> = function Default(args) {
+export const Default: StoryFn<CheckboxProps> = function Default(args) {
   return (
     <Checkbox defaultChecked {...args}>
       Checkbox
     </Checkbox>
   );
 };
 
-export const DisabledCheckbox: Story<CheckboxProps> = function DisabledCheckbox(
-  args,
-) {
-  return (
-    <Checkbox defaultChecked disabled {...args}>
-      Checkbox
-    </Checkbox>
-  );
-};
+export const DisabledCheckbox: StoryFn<CheckboxProps> =
+  function DisabledCheckbox(args) {
+    return (
+      <Checkbox defaultChecked disabled {...args}>
+        Checkbox
+      </Checkbox>
+    );
+  };
 
-export const IndeterminateCheckbox: Story<CheckboxProps> =
+export const IndeterminateCheckbox: StoryFn<CheckboxProps> =
   function IndeterminateCheckbox(args) {
     return (
       <Checkbox indeterminate {...args}>
@@ -36,11 +35,13 @@ export const IndeterminateCheckbox: Story<CheckboxProps> =
     );
   };
 
-export const WithoutLabel: Story<CheckboxProps> = function WithoutLabel(args) {
+export const WithoutLabel: StoryFn<CheckboxProps> = function WithoutLabel(
+  args,
+) {
   return <Checkbox defaultChecked {...args} />;
 };
 
-export const WithFormLabel: Story<CheckboxProps> = function WithFormLabel(
+export const WithFormLabel: StoryFn<CheckboxProps> = function WithFormLabel(
   args,
 ) {
   return (