update storybook to 8.4.7 (#25451)

For #25349

This updates storybook and its addons to 8.4.7. This is done to remove
the transitive dependency on path-to-regexp,
which is no longer used in this version of storybook.

This will fix the original vulnerability issue for `path-to-regexp`

.eslintrc.js

@@ -81,8 +81,7 @@ module.exports = {
     "jsx-a11y/heading-has-content": "off",
     "jsx-a11y/anchor-has-content": "off",
   },
-  overrides: [
-  ],
+  overrides: [],
   settings: {
     "import/resolver": {
       webpack: {

.github/workflows/test-js.yml

@@ -58,7 +58,7 @@ jobs:
             **/node_modules
           key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-modules-
+            ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install JS Dependencies
         if: steps.js-cache.outputs.cache-hit != 'true'

.storybook/main.ts

@@ -53,6 +53,7 @@ const config: StorybookConfig = {
     "@storybook/addon-a11y",
     "@storybook/test-runner",
     "@storybook/addon-designs",
+    "@storybook/addon-webpack5-compiler-babel"
   ],
   typescript: {
     check: false,
@@ -68,9 +69,7 @@ const config: StorybookConfig = {
     name: "@storybook/react-webpack5",
     options: {},
   },
-  docs: {
-    autodocs: true,
-  },
+  docs: {},
 };
 
 export default config;

.storybook/preview.js

@@ -1,9 +1,9 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};
+export const tags = ["autodocs"];

frontend/components/FlashMessage/FlashMessage.stories.tsx

@@ -1,14 +1,11 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { noop } from "lodash";
+import { Meta, StoryObj } from "@storybook/react";
 
 import FlashMessage from ".";
 
-import { IFlashMessage } from "./FlashMessage";
-
 import "../../index.scss";
 
-export default {
+const meta: Meta<typeof FlashMessage> = {
   component: FlashMessage,
   title: "Components/FlashMessage",
   argTypes: {
@@ -28,8 +25,10 @@ export default {
       isVisible: true,
     },
   },
-} as Meta;
+};
 
-const Template: Story<IFlashMessage> = (props) => <FlashMessage {...props} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof FlashMessage>;
+
+export const Default: Story = {};

frontend/components/FleetAce/FleetAce.stories.tsx

@@ -1,13 +1,12 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
 import FleetAce from ".";
-import { IFleetAceProps } from "./FleetAce";
 
 import "../../index.scss";
 
-export default {
+const meta: Meta<typeof FleetAce> = {
   component: FleetAce,
   title: "Components/FleetAce",
   args: {
@@ -26,8 +25,10 @@ export default {
     onChange: noop,
     handleSubmit: noop,
   },
-} as Meta;
+};
 
-const Template: Story<IFleetAceProps> = (props) => <FleetAce {...props} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof FleetAce>;
+
+export const Default: Story = {};

frontend/components/InfoBanner/InfoBanner.stories.tsx

@@ -1,20 +1,21 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import InfoBanner from ".";
-import { IInfoBannerProps } from "./InfoBanner";
 
 import "../../index.scss";
 
-export default {
+const meta: Meta<typeof InfoBanner> = {
   component: InfoBanner,
   title: "Components/InfoBanner",
-} as Meta;
+};
 
-const Template: Story<IInfoBannerProps> = (props) => (
-  <InfoBanner {...props}>
-    <div>This is an Info Banner.</div>
-  </InfoBanner>
-);
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof InfoBanner>;
+
+export const Default: Story = {
+  args: {
+    children: <div>This is an Info Banner.</div>,
+  },
+};

frontend/components/Modal/Modal.stories.tsx

@@ -1,13 +1,12 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
 import Modal from ".";
-import { IModalProps } from "./Modal";
 
 import "../../index.scss";
 
-export default {
+const meta: Meta<typeof Modal> = {
   component: Modal,
   title: "Components/Modal",
   args: {
@@ -15,12 +14,21 @@ export default {
     className: "",
     onExit: noop,
   },
-} as Meta;
+};
 
-const Template: Story<IModalProps> = (props) => (
-  <Modal {...props}>
-    <div>This is a test description with lots of information.</div>
-  </Modal>
-);
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof Modal>;
+
+export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ height: "300px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    children: <div>This is a test description with lots of information.</div>,
+  },
+};

frontend/components/ModalFooter/ModalFooter.stories.tsx

@@ -1,63 +1,66 @@
 /* eslint-disable no-alert */
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import Button from "components/buttons/Button";
 import Icon from "components/Icon";
 import ActionsDropdown from "components/ActionsDropdown";
 import ModalFooter from "./ModalFooter";
 
-export default {
+const meta: Meta<typeof ModalFooter> = {
   title: "Components/ModalFooter",
   component: ModalFooter,
-} as Meta;
-
-const Template: Story = (args) => (
-  <ModalFooter primaryButtons={<></>} {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  primaryButtons: (
-    <>
-      <ActionsDropdown
-        className="modal-footer__manage-automations-dropdown"
-        onChange={(value) => alert(`Selected action: ${value}`)}
-        placeholder="More actions"
-        isSearchable={false}
-        options={[
-          { value: "action1", label: "Action 1" },
-          { value: "action2", label: "Action 2" },
-        ]}
-        menuPlacement="top"
-      />
-      <Button onClick={() => alert("Done clicked")} variant="brand">
-        Done
-      </Button>
-    </>
-  ),
-  secondaryButtons: (
-    <>
-      <Button variant="icon" onClick={() => alert("Download clicked")}>
-        <Icon name="download" />
-      </Button>
-      <Button variant="icon" onClick={() => alert("Delete clicked")}>
-        <Icon name="trash" color="ui-fleet-black-75" />
-      </Button>
-    </>
-  ),
-  isTopScrolling: false,
 };
 
-export const WithTopScrolling = Template.bind({});
-WithTopScrolling.args = {
-  ...Default.args,
-  isTopScrolling: true,
+export default meta;
+
+type Story = StoryObj<typeof ModalFooter>;
+
+export const Default: Story = {
+  args: {
+    primaryButtons: (
+      <>
+        <ActionsDropdown
+          className="modal-footer__manage-automations-dropdown"
+          onChange={(value) => alert(`Selected action: ${value}`)}
+          placeholder="More actions"
+          isSearchable={false}
+          options={[
+            { value: "action1", label: "Action 1" },
+            { value: "action2", label: "Action 2" },
+          ]}
+          menuPlacement="top"
+        />
+        <Button onClick={() => alert("Done clicked")} variant="brand">
+          Done
+        </Button>
+      </>
+    ),
+    secondaryButtons: (
+      <>
+        <Button variant="icon" onClick={() => alert("Download clicked")}>
+          <Icon name="download" />
+        </Button>
+        <Button variant="icon" onClick={() => alert("Delete clicked")}>
+          <Icon name="trash" color="ui-fleet-black-75" />
+        </Button>
+      </>
+    ),
+    isTopScrolling: false,
+  },
 };
 
-export const WithoutSecondaryButtons = Template.bind({});
-WithoutSecondaryButtons.args = {
-  primaryButtons: Default.args.primaryButtons,
-  secondaryButtons: undefined,
-  isTopScrolling: false,
+export const WithTopScrolling: Story = {
+  args: {
+    ...Default.args,
+    isTopScrolling: true,
+  },
+};
+
+export const WithoutSecondaryButtons: Story = {
+  args: {
+    primaryButtons: Default.args?.primaryButtons,
+    secondaryButtons: undefined,
+    isTopScrolling: false,
+  },
 };

frontend/components/Pagination/Pagination.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import { noop } from "lodash";
 
 // @ts-ignore
@@ -14,7 +14,7 @@ interface IPaginationProps {
   onPaginationChange: () => void;
 }
 
-export default {
+const meta: Meta<IPaginationProps> = {
   component: Pagination,
   title: "Components/Pagination",
   args: {
@@ -23,8 +23,12 @@ export default {
     resultsOnCurrentPage: 10,
     onPaginationChange: noop,
   },
-} as Meta;
+};
 
-const Template: Story<IPaginationProps> = (props) => <Pagination {...props} />;
+export default meta;
+
+const Template: StoryFn<IPaginationProps> = (props) => (
+  <Pagination {...props} />
+);
 
 export const Default = Template.bind({});

frontend/components/TooltipWrapper/TooltipWrapper.stories.tsx

@@ -1,21 +1,13 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 import TooltipWrapper from ".";
 
 import "../../index.scss";
 
-interface ITooltipWrapperProps {
-  children: React.ReactNode;
-  tipContent: React.ReactNode;
-}
-
-export default {
+const meta: Meta<typeof TooltipWrapper> = {
   component: TooltipWrapper,
   title: "Components/TooltipWrapper",
-  args: {
-    tipContent: "This is an example tooltip.",
-  },
   argTypes: {
     position: {
       options: [
@@ -35,21 +27,22 @@ export default {
       control: "radio",
     },
   },
-} as Meta;
+};
 
-// using line breaks to create space for top position
-const Template: Story<ITooltipWrapperProps> = (props) => (
-  <>
-    <br />
-    <br />
-    <br />
-    <br />
-    <TooltipWrapper {...props}>Example text</TooltipWrapper>
-    <br />
-    <br />
-    <br />
-    <br />
-  </>
-);
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof TooltipWrapper>;
+
+export const Default: Story = {
+  args: {
+    tipContent: "This is an example tooltip.",
+    children: "Example text",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ margin: "4rem 0" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

frontend/components/buttons/Button/Button.stories.tsx

@@ -1,14 +1,14 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
 import Button from ".";
-import { IButtonProps } from "./Button";
 
 import "../../../index.scss";
 
-export default {
-  component: Button,
+const meta: Meta<typeof Button> = {
+  // TODO: change this after button is updated to a functional component. For
+  // some reason the typing is incorrect becuase Button is a class component.
+  component: Button as any,
   title: "Components/Button",
   argTypes: {
     variant: {
@@ -47,14 +47,23 @@ export default {
     title: "",
     onClick: noop,
   },
-} as Meta;
+};
 
-const Template: Story<IButtonProps> = (props) => (
-  <Button {...props}>Click Here</Button>
-);
+export default meta;
 
-export const Default = Template.bind({});
-Default.args = { variant: "brand", type: "button" };
+type Story = StoryObj<typeof Button>;
 
-export const Disabled = Template.bind({});
-Disabled.args = { ...Default.args, disabled: true };
+export const Default: Story = {
+  args: {
+    variant: "brand",
+    type: "button",
+    children: "Click Here",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};

frontend/components/buttons/DropdownButton/DropdownButton.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
 import { DEFAULT_GRAVATAR_LINK } from "utilities/constants";
@@ -9,23 +9,6 @@ import DropdownButton from ".";
 
 import "../../../index.scss";
 
-interface IOptions {
-  disabled: boolean;
-  label: string;
-  onClick: (evt: React.MouseEvent<HTMLButtonElement>) => void;
-}
-
-interface IDropdownButtonProps {
-  children: React.ReactChild;
-  className?: string;
-  disabled?: boolean;
-  options: IOptions[];
-  size?: string;
-  tabIndex?: number;
-  type?: string;
-  variant?: string;
-}
-
 const options = [
   {
     label: "My account",
@@ -41,7 +24,7 @@ const options = [
   },
 ];
 
-export default {
+const meta: Meta<typeof DropdownButton> = {
   component: DropdownButton,
   title: "Components/DropdownButton",
   argTypes: {
@@ -90,15 +73,23 @@ export default {
     tabIndex: 0,
     options,
   },
-} as Meta;
+};
 
-const Template: Story<IDropdownButtonProps> = (props) => (
-  <DropdownButton {...props}>
-    <Avatar user={{ gravatar_url: DEFAULT_GRAVATAR_LINK }} size="small" />
-  </DropdownButton>
-);
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof DropdownButton>;
 
-export const Disabled = Template.bind({});
-Disabled.args = { ...Default.args, disabled: true };
+export const Default: Story = {
+  args: {
+    children: (
+      <Avatar user={{ gravatar_url: DEFAULT_GRAVATAR_LINK }} size="small" />
+    ),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};

frontend/components/forms/fields/Dropdown/Dropdown.stories.tsx

@@ -1,39 +1,18 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
-import { IDropdownOption } from "interfaces/dropdownOption";
 // @ts-ignore
 import Dropdown from ".";
 
 import "../../../../index.scss";
 
-interface IDropdownProps {
-  className?: string;
-  clearable?: boolean;
-  searchable?: boolean;
-  disabled?: boolean;
-  error?: string;
-  label?: string | string[];
-  labelClassName?: string;
-  multi?: boolean;
-  name?: string;
-  options: IDropdownOption[];
-  placeholder?: string | string[];
-  value?: string | string[] | number;
-  wrapperClassName?: string;
-  onChange: () => void;
-  onOpen: () => void;
-  onClose: () => void;
-}
-
 const authMethodOptions = [
   { label: "Plain", value: "authmethod_plain" },
   { label: "Cram MD5", value: "authmethod_cram_md5" },
   { label: "Login", value: "authmethod_login" },
 ];
 
-export default {
+const meta: Meta<typeof Dropdown> = {
   component: Dropdown,
   title: "Components/FormFields/Dropdown",
   args: {
@@ -54,8 +33,10 @@ export default {
     onOpen: noop,
     onClose: noop,
   },
-} as Meta;
+};
 
-const Template: Story<IDropdownProps> = (props) => <Dropdown {...props} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof Dropdown>;
+
+export const Default: Story = {};

frontend/components/forms/fields/InputField/InputField.stories.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
 // @ts-ignore
@@ -7,23 +6,7 @@ import InputField from ".";
 
 import "../../../../index.scss";
 
-interface IInputFieldProps {
-  autofocus?: boolean;
-  readOnly?: boolean;
-  disabled?: boolean;
-  error?: string;
-  inputClassName?: string;
-  inputWrapperClass?: string;
-  inputOptions?: Record<string, unknown>; // other html input props
-  name?: string;
-  placeholder: string;
-  type?: string;
-  value: string;
-  onFocus?: () => void;
-  onChange?: (value: string) => void;
-}
-
-export default {
+const meta: Meta<typeof InputField> = {
   component: InputField,
   title: "Components/FormFields/Input",
   args: {
@@ -33,7 +16,7 @@ export default {
     error: "",
     inputClassName: "",
     inputWrapperClass: "",
-    inputOptions: "",
+    inputOptions: {},
     name: "",
     placeholder: "Type here...",
     type: "",
@@ -41,8 +24,10 @@ export default {
     onFocus: noop,
     onChange: noop,
   },
-} as Meta;
+};
 
-const Template: Story<IInputFieldProps> = (props) => <InputField {...props} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof InputField>;
+
+export const Default: Story = {};

frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.stories.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
 // @ts-ignore
@@ -7,23 +6,7 @@ import InputFieldWithIcon from ".";
 
 import "../../../../index.scss";
 
-interface IInputFieldWithIconProps {
-  autofocus?: boolean;
-  error?: string;
-  helpText?: string | string[];
-  iconName?: string;
-  label?: string;
-  name?: string;
-  placeholder?: string;
-  tabIndex?: number;
-  type?: string;
-  className?: string;
-  disabled?: boolean;
-  iconPosition?: "start" | "end";
-  onChange?: () => void;
-}
-
-export default {
+const meta: Meta<typeof InputFieldWithIcon> = {
   component: InputFieldWithIcon,
   title: "Components/FormFields/InputWithIcon",
   argTypes: {
@@ -132,10 +115,10 @@ export default {
     className: "",
     onChange: noop,
   },
-} as Meta;
+};
 
-const Template: Story<IInputFieldWithIconProps> = (props) => (
-  <InputFieldWithIcon {...props} />
-);
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof InputFieldWithIcon>;
+
+export const Default: Story = {};

frontend/components/forms/fields/Radio/Radio.stories.tsx

@@ -1,13 +1,11 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
 import Radio from ".";
-import { IRadioProps } from "./Radio";
 
 import "../../../../index.scss";
 
-export default {
+const meta: Meta<typeof Radio> = {
   component: Radio,
   title: "Components/FormFields/Radio",
   args: {
@@ -20,8 +18,10 @@ export default {
     className: "",
     onChange: noop,
   },
-} as Meta;
+};
 
-const Template: Story<IRadioProps> = (props) => <Radio {...props} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof Radio>;
+
+export const Default: Story = {};

frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsDropdown.stories.tsx

@@ -1,26 +1,12 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
-import { ITarget } from "interfaces/target";
 // @ts-ignore
 import SelectedTargetsDropdown from ".";
 
 import "../../../../index.scss";
 
-interface ISelectedTargetsDropdownProps {
-  disabled?: boolean;
-  error?: string;
-  label?: string;
-  selectedTargets?: ITarget[];
-  targetsCount?: number;
-  queryId?: number;
-  isPremiumTier?: boolean;
-  onSelect: () => void;
-  onFetchTargets?: () => void;
-}
-
-export default {
+const meta: Meta<typeof SelectedTargetsDropdown> = {
   component: SelectedTargetsDropdown,
   title: "Components/SelectTargetsDropdown",
   args: {
@@ -32,10 +18,10 @@ export default {
     onFetchTargets: noop,
     onSelect: noop,
   },
-} as Meta;
+};
 
-const Template: Story<ISelectedTargetsDropdownProps> = (props) => (
-  <SelectedTargetsDropdown {...props} />
-);
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof SelectedTargetsDropdown>;
+
+export const Default: Story = {};

frontend/components/forms/fields/Slider/Slider.stories.tsx

@@ -1,19 +1,11 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { noop } from "lodash";
 
 import Slider from ".";
 
 import "../../../../index.scss";
 
-interface ISliderProps {
-  value: boolean;
-  inactiveText: string;
-  activeText: string;
-  onChange: () => void;
-}
-
-export default {
+const meta: Meta<typeof Slider> = {
   component: Slider,
   title: "Components/FormFields/Slider",
   args: {
@@ -22,8 +14,10 @@ export default {
     activeText: "On",
     onChange: noop,
   },
-} as Meta;
+};
 
-const Template: Story<ISliderProps> = (props) => <Slider {...props} />;
+export default meta;
 
-export const Default = Template.bind({});
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {};

frontend/test/jest.config.ts

@@ -34,11 +34,6 @@ const config: Config = {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "<rootDir>/frontend/__mocks__/fileMock.js",
     "\\.(css|scss|sass)$": "identity-obj-proxy",
-    // "react-markdown":
-    //   "<rootDir>/node_modules/react-markdown/react-markdown.min.js",
-    // "remark-gfm": "<rootDir>/node_modules/remark-gfm/index.js",
-    // "micromark-extension-gfm":
-    //   "<rootDir>/node_models/micromark-extension-gfm/index.js",
   },
   testMatch: ["**/*tests.[jt]s?(x)"],
   setupFilesAfterEnv: ["<rootDir>/frontend/test/test-setup.ts"],
@@ -47,7 +42,6 @@ const config: Config = {
     url: "http://localhost:8080",
     customExportConditions: [""],
   },
-  // transformIgnorePatterns: ["node_modules/(?!react-markdown/)"],
   transformIgnorePatterns: [`/node_modules/(?!(${esModules})/)`],
   globals: {
     TransformStream,

package.json

@@ -84,15 +84,16 @@
     "@babel/preset-env": "7.21.5",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.21.5",
-    "@storybook/addon-a11y": "7.5.2",
-    "@storybook/addon-actions": "7.5.2",
-    "@storybook/addon-designs": "7.0.5",
-    "@storybook/addon-essentials": "7.5.2",
-    "@storybook/addon-links": "7.5.2",
-    "@storybook/addon-mdx-gfm": "7.5.2",
-    "@storybook/react": "7.5.2",
-    "@storybook/react-webpack5": "7.5.2",
-    "@storybook/test-runner": "0.13.0",
+    "@storybook/addon-a11y": "8.4.7",
+    "@storybook/addon-actions": "8.4.7",
+    "@storybook/addon-designs": "8.0.4",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/addon-mdx-gfm": "8.4.7",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.5",
+    "@storybook/react": "8.4.7",
+    "@storybook/react-webpack5": "8.4.7",
+    "@storybook/test-runner": "0.21.0",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "15.0.2",
     "@testing-library/user-event": "14.5.2",
@@ -111,7 +112,7 @@
     "@types/node": "14.18.12",
     "@types/prop-types": "15.7.4",
     "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react-dom": "18.2.0",
     "@types/react-router": "3.0.28",
     "@types/react-select": "1.3.0",
     "@types/react-table": "7.7.7",
@@ -142,7 +143,7 @@
     "eslint-plugin-prettier": "3.4.1",
     "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-hooks": "4.3.0",
-    "eslint-plugin-storybook": "0.6.11",
+    "eslint-plugin-storybook": "0.9.0",
     "expect": "1.20.2",
     "fork-ts-checker-webpack-plugin": "6.5.0",
     "html-webpack-plugin": "5.5.0",
@@ -162,7 +163,7 @@
     "react-docgen-typescript-plugin": "1.0.5",
     "regenerator-runtime": "0.13.9",
     "sass-loader": "13.2.2",
-    "storybook": "7.5.2",
+    "storybook": "8.4.7",
     "trace-unhandled": "2.0.1",
     "ts-loader": "6.2.2",
     "ts-node": "10.7.0",