Upgrade to Storybook 8 (#387)

.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(ts|tsx)"],
+
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+    "@storybook/addon-webpack5-compiler-swc"
+  ],
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  }
+};
+
+export default config;

.storybook/preview.js

@@ -1,12 +1,3 @@
-import { addDecorator } from "@storybook/react"
-import { themeDecorator } from "../src/theme"
+import { themeDecorator } from "../src/theme";
 
-export const parameters = {
-  options: {
-    storySort: {
-      order: ['Welcome'],
-    },
-  },
-}
-
-addDecorator(themeDecorator);
+export const decorators = [themeDecorator];

jest.config.js

@@ -3,10 +3,9 @@ module.exports = {
         "^@/(.*)$": "<rootDir>/src/$1",
     },
     testEnvironment: "jsdom",
-    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "mdx"],
+    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
     transform: {
         "\\.[jt]sx?$": "babel-jest",
-	"^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx",
         ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
             "jest-transform-stub"
     },
@@ -19,7 +18,7 @@ module.exports = {
         "!<rootDir>/src/store/**",
         "!<rootDir>/src/features/**/*.ts",// ignore rtk query files
         "!<rootDir>/src/**/*.stories.{ts,tsx}", // ignore storybook files,
-	"!<rootDir>/src/**/*.stories.{ts,tsx}", 
+	"!<rootDir>/src/**/*.stories.{ts,tsx}",
     ],
     moduleDirectories: ["node_modules", __dirname],
     modulePathIgnorePatterns: ["<rootDir>/lib/"],

package.json

@@ -22,8 +22,8 @@
     "start:ui": "REACT_APP_VERSION=$npm_package_version webpack server --history-api-fallback",
     "start:chromium": "webpack serve --open 'chromium'",
     "start:prod": "NODE_ENV=production webpack serve",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
     "test": "jest --coverage",
     "report": "open ./coverage/lcov-report/index.html",
     "watch": "npm-run-all -p *:watch",
@@ -86,17 +86,16 @@
     "@babel/preset-env": "^7.18.9",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@mdx-js/loader": "^2.3.0",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/mdx1-csf": "^0.0.4",
-    "@storybook/node-logger": "^6.5.16",
-    "@storybook/react": "^6.5.16",
+    "@storybook/addon-a11y": "^8.0.4",
+    "@storybook/addon-actions": "^8.0.4",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/node-logger": "^8.0.4",
+    "@storybook/preview-api": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-webpack5": "^8.0.4",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.4.3",
@@ -132,6 +131,7 @@
     "remark-gfm": "^3.0.1",
     "rimraf": "^3.0.2",
     "source-map-loader": "^3.0.1",
+    "storybook": "^8.0.4",
     "ts-loader": "^8.0.17",
     "typescript": "^4.6.3",
     "webpack": "^5.72.0",

src/docs/Welcome.stories.mdx → src/Welcome.mdx

@@ -1,16 +1,3 @@
-import { Meta } from "@storybook/addon-docs";
-
-<Meta
-  title="Welcome"
-  parameters = {{
-     previewTabs: {
-      'storybook/docs/panel': { index: -1 },
-      'canvas': { disable: true }
-     },
-    viewMode: 'docs'
-  }}
-/>
-
 # conda-store-ui component documentation
 
 conda-store-ui is a frontend for conda-store-server API.

src/features/artifacts/stories/ArtifactsList.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { ArtifactList } from "../components";
 
@@ -23,8 +23,6 @@ const artifactList = [
 
 export default {
   component: ArtifactList
-} as ComponentMeta<typeof ArtifactList>;
+} as Meta<typeof ArtifactList>;
 
-export const Primary: ComponentStory<typeof ArtifactList> = () => (
-  <ArtifactList artifacts={artifactList} />
-);
+export const Primary = () => <ArtifactList artifacts={artifactList} />;

src/features/channels/stories/ChannelsEdit.stories.tsx

@@ -1,13 +1,13 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { ChannelsEdit } from "../components";
 
 const channelsList = ["conda-store", "default", "conda forge"];
 
 export default {
   component: ChannelsEdit
-} as ComponentMeta<typeof ChannelsEdit>;
+} as Meta<typeof ChannelsEdit>;
 
-export const Primary: ComponentStory<typeof ChannelsEdit> = () => (
+export const Primary = () => (
   <ChannelsEdit channelsList={channelsList} updateChannels={() => ({})} />
 );

src/features/channels/stories/ChannelsList.stories.tsx

@@ -1,13 +1,11 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { ChannelsList } from "../components";
 
 const channelsList = ["conda-store", "default", "conda forge"];
 
 export default {
   component: ChannelsList
-} as ComponentMeta<typeof ChannelsList>;
+} as Meta<typeof ChannelsList>;
 
-export const Primary: ComponentStory<typeof ChannelsList> = () => (
-  <ChannelsList channelList={channelsList} />
-);
+export const Primary = () => <ChannelsList channelList={channelsList} />;

src/features/dependencies/stories/Dependencies.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import { Provider } from "react-redux";
 import React from "react";
 
@@ -8,7 +8,7 @@ import { store } from "../../../store";
 
 export default {
   component: Dependencies
-} as ComponentMeta<typeof Dependencies>;
+} as Meta<typeof Dependencies>;
 
 const Template = (args: IDependenciesProps) => (
   <Provider store={store}>
@@ -20,7 +20,7 @@ const Template = (args: IDependenciesProps) => (
   </Provider>
 );
 
-export const Primary: ComponentStory<typeof Dependencies> = Template.bind({});
+export const Primary = Template.bind({});
 
 Primary.args = {
   mode: "edit",

src/features/environments/stories/Environments.stories.tsx

@@ -1,4 +1,4 @@
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import { Provider } from "react-redux";
 import React from "react";
 
@@ -7,7 +7,7 @@ import { store } from "../../../store";
 
 export default {
   component: Environments
-} as ComponentMeta<typeof Environments>;
+} as Meta<typeof Environments>;
 
 const Template = () => (
   <Provider store={store}>
@@ -18,4 +18,4 @@ const Template = () => (
   </Provider>
 );
 
-export const Primary: ComponentStory<typeof Environments> = Template.bind({});
+export const Primary = Template.bind({});

src/features/metadata/components/EnvBuilds.tsx

@@ -5,7 +5,7 @@ import { Build as IBuild } from "../../../common/models";
 import { BuildDropdown } from "../../../features/metadata/components";
 import { EnvBuildStatus } from "./EnvBuildStatus";
 
-export interface IData {
+export interface IEnvBuildsProps {
   currentBuildId: number;
   selectedBuildId: number;
   builds: IBuild[];
@@ -17,7 +17,7 @@ export const EnvBuilds = ({
   selectedBuildId,
   builds,
   mode
-}: IData) => {
+}: IEnvBuildsProps) => {
   const selectedBuild = builds.find(build => build.id === selectedBuildId);
   return (
     <>

src/features/metadata/stories/EnvBuilds.stories.tsx

@@ -1,27 +1,44 @@
-import type { Story, ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useArgs } from "@storybook/preview-api";
+
 import { Provider } from "react-redux";
 import React from "react";
 
 import { store } from "../../../store";
-import { EnvBuilds } from "../components";
-import { mockBuilds } from "../mocks";
+import { EnvBuilds, IEnvBuildsProps } from "../components/EnvBuilds";
+import { mockBuilds } from "../mocks/mockBuilds";
 
 export default {
-  component: EnvBuilds
-} as ComponentMeta<typeof EnvBuilds>;
+  component: EnvBuilds,
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+} as Meta<typeof EnvBuilds>;
 
-export const Primary = {
+type Story = StoryObj<typeof EnvBuilds>;
+
+export const Primary: Story = {
   args: {
     currentBuildId: 1,
     selectedBuildId: 1,
     mode: "read-only",
     builds: mockBuilds
   },
-  decorators: [
-    (Story: Story) => (
-      <Provider store={store}>
-        <Story />
-      </Provider>
-    )
-  ]
+  render: function Render(args: IEnvBuildsProps) {
+    const [{ selectedBuildId = args.selectedBuildId }, updateArgs] = useArgs();
+
+    const handleChangeToSelectedBuildId = () => {
+      const { id: nextSelectedBuildId = args.selectedBuildId } =
+        store.getState().enviroments.currentBuild;
+      updateArgs({ selectedBuildId: nextSelectedBuildId });
+    };
+
+    store.subscribe(handleChangeToSelectedBuildId);
+
+    return <EnvBuilds {...args} selectedBuildId={selectedBuildId} />;
+  }
 };