Update Storybook to v8 (#20)

* fix ScrapGitHubReleaseTags story's tags fetch * update to storybook v8 and a few fixes
dhenry123 · May 4, 2024 · 3a844eb · 3a844eb
1 parent 9d34720
commit 3a844eb
Show file tree

Hide file tree

Showing 36 changed files with 2,584 additions and 3,006 deletions.
diff --git a/client/.storybook/main.ts b/client/.storybook/main.ts
@@ -1,15 +1,15 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   core: {
     disableTelemetry: true, // 👈 Disables telemetry
   },
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "storybook-addon-react-router-v6",
+    "storybook-addon-remix-react-router",
   ],
   framework: {
     name: "@storybook/react-vite",

diff --git a/client/.storybook/preview.tsx b/client/.storybook/preview.tsx
@@ -12,7 +12,6 @@ import "../src/app/css/root.scss";
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -26,13 +26,14 @@
     "react-router-dom": "^6.22.3"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/blocks": "^7.6.15",
-    "@storybook/react": "^7.6.15",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/preview-api": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-vite": "^8.0.8",
+    "@storybook/test": "^8.0.8",
     "@types/react": "^18.2.75",
     "@types/react-dom": "^18.2.24",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -41,10 +42,10 @@
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "sass": "^1.74.1",
-    "storybook": "^7.6.17",
-    "storybook-addon-react-router-v6": "^2.0.15",
+    "storybook": "^8.0.8",
+    "storybook-addon-remix-react-router": "^3.0.0",
     "typescript": "^5.4.4",
     "vite": "^4.5.3"
   },

diff --git a/client/src/components/ActionsSettings.stories.tsx b/client/src/components/ActionsSettings.stories.tsx
@@ -4,8 +4,9 @@ import { ActionsSettings } from "./ActionsSettings";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 import { STORYBOOK_UPTODATEFORM } from "../../../src/Constants-dev";
+import { fn } from "@storybook/test";
 
 const meta = {
   title: "Forms/ActionsSettings",
@@ -27,6 +28,7 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     activeUptodateForm: { ...STORYBOOK_UPTODATEFORM },
-    handleOnChange: () => {},
+    handleOnChange: fn(),
+    onDone: fn(),
   },
 };
diff --git a/client/src/components/Badge.stories.tsx b/client/src/components/Badge.stories.tsx
@@ -4,7 +4,7 @@ import { Badge } from "./Badge";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 const meta = {
   title: "Ui/Badge",

diff --git a/client/src/components/Block.stories.tsx b/client/src/components/Block.stories.tsx
@@ -4,7 +4,7 @@ import { Block } from "./Block";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 const meta = {
   title: "Ui/Block",

diff --git a/client/src/components/CheckBox.stories.tsx b/client/src/components/CheckBox.stories.tsx
@@ -4,7 +4,7 @@ import { CheckBox } from "./CheckBox";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 const meta = {
   title: "Components/Input/CheckBox",

diff --git a/client/src/components/ConfirmDialog.stories.tsx b/client/src/components/ConfirmDialog.stories.tsx
@@ -4,7 +4,7 @@ import { ConfirmDialog } from "./ConfirmDialog";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 const meta = {
   title: "Ui/ConfirmDialog",

diff --git a/client/src/components/Control.stories.tsx b/client/src/components/Control.stories.tsx
@@ -4,7 +4,7 @@ import { Control } from "./Control";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 import { STORYBOOK_UPTODATEFORM } from "../../../src/Constants-dev";
 
 const meta = {

diff --git a/client/src/components/Dialog.stories.tsx b/client/src/components/Dialog.stories.tsx
@@ -4,7 +4,8 @@ import { Dialog } from "./Dialog";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
+import { fn } from "@storybook/test";
 
 const meta = {
   title: "Ui/Dialog",
@@ -29,5 +30,6 @@ export const Primary: Story = {
     visible: true,
     header: "Header Dialog",
     closeButton: true,
+    onHide: fn()
   },
 };
diff --git a/client/src/components/FieldSet.stories.tsx b/client/src/components/FieldSet.stories.tsx
@@ -4,7 +4,7 @@ import { FieldSet } from "./FieldSet";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 const meta = {
   title: "Ui/FieldSet",

diff --git a/client/src/components/FieldSetApiEntrypoint.stories.tsx b/client/src/components/FieldSetApiEntrypoint.stories.tsx
@@ -4,7 +4,7 @@ import { FieldSetApiEntrypoint } from "./FieldSetApiEntrypoint";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 const meta = {
   title: "Ui/FieldSetApiEntrypoint",

diff --git a/client/src/components/FieldSetAuthorizationHeader.stories.tsx b/client/src/components/FieldSetAuthorizationHeader.stories.tsx
@@ -4,7 +4,7 @@ import { FieldSetAuthorizationHeader } from "./FieldSetAuthorizationHeader";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 const meta = {
   title: "Ui/FieldSetAuthorizationHeader",

diff --git a/client/src/components/FieldSetClickableUrl.stories.tsx b/client/src/components/FieldSetClickableUrl.stories.tsx
@@ -4,7 +4,7 @@ import { FieldSetClickableUrl } from "./FieldSetClickableUrl";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 const meta = {
   title: "Ui/FieldSetClickableUrl",

diff --git a/client/src/components/Header.stories.tsx b/client/src/components/Header.stories.tsx
@@ -4,7 +4,7 @@ import { Header } from "./Header";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 const meta = {
   title: "Components/Navigation/Header",

diff --git a/client/src/components/HttpHeader.stories.tsx b/client/src/components/HttpHeader.stories.tsx
@@ -5,7 +5,7 @@ import { HttpHeader } from "./HttpHeader";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {

diff --git a/client/src/components/IconWithTooltip.stories.tsx b/client/src/components/IconWithTooltip.stories.tsx
@@ -5,7 +5,7 @@ import { IconWithTooltip } from "./IconWithTooltip";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {

diff --git a/client/src/components/ImageUploader.stories.tsx b/client/src/components/ImageUploader.stories.tsx
@@ -4,7 +4,7 @@ import { ImageUploader } from "./ImageUploader";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 import { useState } from "react";
 
 const meta = {

diff --git a/client/src/components/InputIcon.stories.tsx b/client/src/components/InputIcon.stories.tsx
@@ -4,7 +4,7 @@ import { InputIcon } from "./InputIcon";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 const meta = {
   title: "Components/Input/InputIcon",

diff --git a/client/src/components/LoginBlock.stories.tsx b/client/src/components/LoginBlock.stories.tsx
@@ -4,7 +4,7 @@ import { LoginBlock } from "./LoginBlock";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 const meta = {
   title: "Forms/LoginBlock",

diff --git a/client/src/components/ResultCompare.stories.tsx b/client/src/components/ResultCompare.stories.tsx
@@ -4,7 +4,7 @@ import { ResultCompare } from "./ResultCompare";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 import {
   STORYBOOK_UPDATEORNOTSTATE,
   STORYBOOK_UPTODATEFORM,

diff --git a/client/src/components/ScrapGitHubReleaseTags.stories.tsx b/client/src/components/ScrapGitHubReleaseTags.stories.tsx
@@ -7,28 +7,12 @@ import {
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 import { useAppDispatch } from "../app/hook";
 import { updateKeyUptodateFrom } from "../app/contextSlice";
 import { UptodateForm, UptodateFormFields } from "../../../src/Global.types";
 import { INITIALIZED_UPTODATEFORM } from "../../../src/Constants";
-
-const meta = {
-  title: "Forms/ScrapGitHubReleaseTags",
-  component: ScrapGitHubReleaseTags,
-  decorators: [withRouter],
-  parameters: {
-    layout: "fullscreen",
-    reactRouter: reactRouterParameters({
-      location: { path: "/" },
-    }),
-  },
-  tags: ["autodocs"],
-  argTypes: {},
-} satisfies Meta<typeof ScrapGitHubReleaseTags>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+import { fn } from "@storybook/test";
 
 const releaseTagNameSample = [
   {
@@ -109,16 +93,36 @@ const Component = (args: ScrapGitHubReleaseTagsProps) => {
   };
   return <ScrapGitHubReleaseTags {...args} />;
 };
-export const Primary: Story = {
+
+
+const meta = {
+  title: "Forms/ScrapGitHubReleaseTags",
+  component: ScrapGitHubReleaseTags,
+  decorators: [withRouter],
+  parameters: {
+    layout: "fullscreen",
+    reactRouter: reactRouterParameters({
+      location: { path: "/" },
+    }),
+  },
   args: {
     activeUptodateForm: activeUptodateForm,
     scrapUrl: (url: string) => {
       console.log(url);
       return new Promise((resolv) => {
-        resolv(releaseTagNameSample);
+        resolv(JSON.stringify(releaseTagNameSample));
       });
     },
-    onDone: (stepId) => console.log(stepId),
+    onDone: fn(),
+    handleOnChange: fn(),
+    displayError: fn(),
   },
   render: (args) => Component(args),
-};
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof ScrapGitHubReleaseTags>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
diff --git a/client/src/components/ScrapProduction.stories.tsx b/client/src/components/ScrapProduction.stories.tsx
@@ -4,10 +4,11 @@ import { ScrapProduction, ScrapProductionProps } from "./ScrapProduction";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 import { UptodateForm, UptodateFormFields } from "../../../src/Global.types";
 import { INITIALIZED_UPTODATEFORM } from "../../../src/Constants";
 import { useState } from "react";
+import { fn } from "@storybook/test";
 
 const meta = {
   title: "Forms/ScrapProduction",
@@ -19,6 +20,11 @@ const meta = {
       location: { path: "/" },
     }),
   },
+  args: {
+    onDone: fn(),
+    handleOnChange: fn(),
+    displayError: fn(),
+  },
   tags: ["autodocs"],
   argTypes: {},
 } satisfies Meta<typeof ScrapProduction>;
@@ -61,8 +67,6 @@ export const ScrapAsText: Story = {
       `);
       });
     },
-
-    onDone: () => {},
   },
   render: (args) => Component(args),
 };
@@ -75,12 +79,10 @@ export const ScrapAsJSON: Story = {
         resolv(
           JSON.stringify({
             version: "3.0.1",
-          })
+          }),
         );
       });
     },
-
-    onDone: () => {},
   },
   render: (args) => Component(args),
 };
diff --git a/client/src/components/Search.stories.tsx b/client/src/components/Search.stories.tsx
@@ -5,7 +5,7 @@ import { Search } from "./Search";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {

diff --git a/client/src/components/Stepper.stories.tsx b/client/src/components/Stepper.stories.tsx
@@ -4,7 +4,7 @@ import { Stepper } from "./Stepper";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 const meta = {
   title: "Components/Navigation/Stepper",

diff --git a/client/src/components/StepperStep.stories.tsx b/client/src/components/StepperStep.stories.tsx
@@ -4,7 +4,7 @@ import { StepperStep } from "./StepperStep";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 
 const meta = {
   title: "Components/Navigation/StepperStep",

diff --git a/client/src/components/Summary.stories.tsx b/client/src/components/Summary.stories.tsx
@@ -4,7 +4,7 @@ import { Summary } from "./Summary";
 import {
   reactRouterParameters,
   withRouter,
-} from "storybook-addon-react-router-v6";
+} from "storybook-addon-remix-react-router";
 import { INITIALIZED_UPTODATEFORM } from "../../../src/Constants";
 import { UptoDateOrNotState, UptodateForm } from "../../../src/Global.types";