update storybook to 8.4.7

.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;
+};
+
+export default meta;
 
-const Template: Story<IFlashMessage> = (props) => <FlashMessage {...props} />;
+type Story = StoryObj<typeof FlashMessage>;
 
-export const Default = Template.bind({});
+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,26 +1,34 @@
 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: {
     title: "Test modal",
     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;
+};
+
+export default meta;
 
-const Template: Story = (args) => (
-  <ModalFooter primaryButtons={<></>} {...args} />
-);
+type Story = StoryObj<typeof ModalFooter>;
 
-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 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 WithTopScrolling = Template.bind({});
-WithTopScrolling.args = {
-  ...Default.args,
-  isTopScrolling: true,
+export const WithTopScrolling: Story = {
+  args: {
+    ...Default.args,
+    isTopScrolling: true,
+  },
 };
 
-export const WithoutSecondaryButtons = Template.bind({});
-WithoutSecondaryButtons.args = {
-  primaryButtons: Default.args.primaryButtons,
-  secondaryButtons: undefined,
-  isTopScrolling: false,
+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>
+    ),
+  ],
+};