[WEB-4255] chore: upgrade storybook to v9 in ui package

packages/ui/.eslintrc.js

@@ -1,7 +1,7 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ["@plane/eslint-config/library.js"],
+  extends: ["@plane/eslint-config/library.js", "plugin:storybook/recommended"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: "./tsconfig.json",

packages/ui/.storybook/main.ts

@@ -13,16 +13,37 @@ const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
-    getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@chromatic-com/storybook"),
-    getAbsolutePath("@storybook/addon-interactions"),
-    "@storybook/addon-styling-webpack"
+    getAbsolutePath("@storybook/addon-docs")
   ],
   framework: {
     name: getAbsolutePath("@storybook/react-webpack5"),
     options: {},
   },
+  webpackFinal: async (config) => {
+    if (!config.module) config.module = { rules: [] };
+    if (!config.module.rules) config.module.rules = [];
+    // Find the existing CSS rule
+    const cssRule = config.module.rules.find(
+      (rule) =>
+        typeof rule === 'object' &&
+        rule !== null &&
+        'test' in rule &&
+        rule.test instanceof RegExp &&
+        rule.test.test('test.css')
+    );
+    if (cssRule && typeof cssRule === 'object' && 'use' in cssRule) {
+      cssRule.use = [
+        'style-loader',
+        {
+          loader: 'css-loader',
+          options: { importLoaders: 1 }
+        },
+        'postcss-loader'
+      ];
+    }
+    return config;
+  },
 };
 export default config;

packages/ui/.storybook/preview.ts

@@ -1,5 +1,5 @@
-import type { Preview } from "@storybook/react";
-import "../styles/output.css";
+import "../styles/globals.css";
+import type { Preview } from "@storybook/react-webpack5";
 const preview: Preview = {
   parameters: {
     controls: {

packages/ui/package.json

@@ -47,20 +47,14 @@
     "use-font-face-observer": "^1.2.2"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.4.0",
+    "@chromatic-com/storybook": "^4.0.0",
     "@plane/eslint-config": "*",
     "@plane/tailwind-config": "*",
     "@plane/typescript-config": "*",
-    "@storybook/addon-essentials": "^8.1.1",
-    "@storybook/addon-interactions": "^8.1.1",
-    "@storybook/addon-links": "^8.1.1",
-    "@storybook/addon-onboarding": "^8.1.1",
-    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/blocks": "^8.1.1",
-    "@storybook/react": "^8.1.1",
-    "@storybook/react-webpack5": "^8.1.1",
-    "@storybook/test": "^8.1.1",
+    "@storybook/addon-docs": "^9.0.4",
+    "@storybook/addon-links": "^9.0.4",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/react-webpack5": "^9.0.4",
     "@types/lodash": "^4.17.6",
     "@types/node": "^20.5.2",
     "@types/react": "^18.3.11",
@@ -68,9 +62,11 @@
     "@types/react-dom": "^18.2.18",
     "autoprefixer": "^10.4.19",
     "classnames": "^2.3.2",
+    "eslint-plugin-storybook": "9.0.4",
     "postcss-cli": "^11.0.0",
+    "postcss-loader": "^8.1.1",
     "postcss-nested": "^6.0.1",
-    "storybook": "^8.1.1",
+    "storybook": "^9.0.4",
     "tsup": "8.4.0",
     "typescript": "5.3.3"
   }

packages/ui/src/avatar/avatar.stories.tsx

@@ -1,18 +1,22 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import { Avatar } from "./avatar";
 
 const meta: Meta<typeof Avatar> = {
   title: "Avatar",
   component: Avatar,
+  args: {
+    name: "John Doe",
+  },
 };
 
 export default meta;
+
 type Story = StoryObj<typeof Avatar>;
 
-export const Default: Story = {
-  args: { name: "John Doe" },
-};
+export const Default: Story = {};
 
 export const Large: Story = {
-  args: { name: "John Doe" },
+  args: {
+    size: "lg",
+  }
 };

packages/ui/src/popovers/popover-menu.stories.tsx

@@ -1,44 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
 import { PopoverMenu } from "./popover-menu";
 
-const meta: Meta<typeof PopoverMenu> = {
-  title: "PopoverMenu",
-  component: PopoverMenu,
-};
-
-export default meta;
-
-// types
-type TPopoverMenu = {
-  id: number;
-  name: string;
-};
-
-type Story = StoryObj<typeof PopoverMenu<TPopoverMenu>>;
-
-// data
-const data: TPopoverMenu[] = [
+const data = [
   { id: 1, name: "John Doe" },
   { id: 2, name: "Jane Doe" },
   { id: 3, name: "John Smith" },
   { id: 4, name: "Jane Smith" },
 ];
 
-// components
-const PopoverMenuItemRender = (item: TPopoverMenu) => (
-  <div className="text-sm text-gray-600 hover:text-gray-700 rounded-sm cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize">
-    {item.name}
-  </div>
-);
-
-// stories
-export const Default: Story = {
+const meta: Meta<typeof PopoverMenu<(typeof data)[number]>> = {
+  title: "PopoverMenu",
+  component: PopoverMenu,
   args: {
+    data,
     popperPosition: "bottom-start",
     panelClassName: "rounded bg-gray-100 p-2",
-    data: data,
-    keyExtractor: (item, index: number) => `${item.id}-${index}`,
-    render: (item) => PopoverMenuItemRender(item),
+    keyExtractor: (item, index) => `${item.id}-${index}`,
+    render: (item) => (
+      <div className="text-sm text-gray-600 hover:text-gray-700 rounded-sm cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize">
+        {item.name}
+      </div>
+    ),
   },
 };
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

packages/ui/src/popovers/popover.stories.tsx

@@ -1,54 +1,43 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import React from "react";
 import { Popover } from "./popover";
 
 const meta: Meta<typeof Popover> = {
   title: "Popover",
   component: Popover,
+  args: {
+    popperPosition: "bottom-start",
+    panelClassName: "rounded bg-gray-100 p-2",
+    children: (
+      <div className="space-y-2">
+        <div className="text-sm font-medium text-gray-500">Your custom component</div>
+        <div>
+          {["option1", "option2", "option3"].map((option) => (
+            <div
+              key={option}
+              className="text-sm text-gray-600 hover:text-gray-700 rounded-sm cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize"
+            >
+              {option}
+            </div>
+          ))}
+        </div>
+      </div>
+    ),
+  },
 };
 
 export default meta;
 
-// types
-type Story = StoryObj<typeof Popover>;
+type Story = StoryObj<typeof meta>;
 
-// data
-
-// components
-const RenderCustomPopoverComponent = (
-  <div className="space-y-2">
-    <div className="text-sm font-medium text-gray-500">Your custom component</div>
-    <div>
-      {["option1", "option2", "option3"].map((option) => (
-        <div
-          key={option}
-          className="text-sm text-gray-600 hover:text-gray-700 rounded-sm cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize"
-        >
-          {option}
-        </div>
-      ))}
-    </div>
-  </div>
-);
-
-// stories
-export const Default: Story = {
-  args: {
-    popperPosition: "bottom-start",
-    panelClassName: "rounded bg-gray-100 p-2",
-    children: RenderCustomPopoverComponent,
-  },
-};
+export const Default: Story = {};
 
 export const CustomMenuButton: Story = {
   args: {
-    popperPosition: "bottom-start",
     button: (
       <div className="p-2 text-sm font-medium rounded bg-gray-100 hover:bg-gray-200 transition-all">
         Custom Menu Button
       </div>
     ),
-    panelClassName: "rounded bg-gray-100 p-2",
-    children: RenderCustomPopoverComponent,
   },
 };

packages/ui/src/sortable/sortable.stories.tsx

@@ -1,15 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import React from "react";
 import { Sortable } from "./sortable";
 
-const meta: Meta<typeof Sortable> = {
-  title: "Sortable",
-  component: Sortable,
-};
-
-export default meta;
-type Story = StoryObj<typeof Sortable>;
-
 const data = [
   { id: "1", name: "John Doe" },
   { id: "2", name: "Satish" },
@@ -17,17 +9,28 @@ const data = [
   { id: "4", name: "Bob" },
   { id: "5", name: "Charlie" },
 ];
-export const Default: Story = {
+
+const meta: Meta<typeof Sortable<(typeof data)[number]>> = {
+  title: "Sortable",
+  component: Sortable,
   args: {
     data,
-    render: (item: any) => (
+    render: (item) => (
       // <Draggable data={item} className="rounded-lg">
       <div className="border ">{item.name}</div>
       // </Draggable>
     ),
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onChange: (data) => console.log(data.map(({ id }: any) => id)),
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    keyExtractor: (item: any) => item.id,
+    keyExtractor: (item) => item.id,
+  },
+  argTypes: {
+    onChange: {
+      action: true,
+    },
   },
 };
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

packages/ui/src/tables/table.stories.tsx

@@ -1,25 +1,9 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 import React from "react";
 import { Table } from "./table";
+import { TTableColumn } from "./types";
 
-const meta: Meta<typeof Table> = {
-  title: "Table",
-  component: Table,
-};
-
-export default meta;
-
-// types
-type TTableData = {
-  id: string;
-  name: string;
-  age: number;
-};
-
-type Story = StoryObj<typeof Table<TTableData>>;
-
-// data
-const tableData: TTableData[] = [
+const tableData = [
   { id: "1", name: "Ernest", age: 25 },
   { id: "2", name: "Ann", age: 30 },
   { id: "3", name: "Russell", age: 35 },
@@ -30,22 +14,23 @@ const tableColumns = [
   {
     key: "id",
     content: "Id",
-    tdRender: (rowData: TTableData) => <span>{rowData.id}</span>,
+    tdRender: (rowData) => <span>{rowData.id}</span>,
   },
   {
     key: "name",
     content: "Name",
-    tdRender: (rowData: TTableData) => <span>{rowData.name}</span>,
+    tdRender: (rowData) => <span>{rowData.name}</span>,
   },
   {
     key: "age",
     content: "Age",
-    tdRender: (rowData: TTableData) => <span>{rowData.age}</span>,
+    tdRender: (rowData) => <span>{rowData.age}</span>,
   },
-];
+] satisfies TTableColumn<typeof tableData[number]>[];
 
-// stories
-export const Default: Story = {
+const meta: Meta<typeof Table<typeof tableData[number]>> = {
+  title: "Table",
+  component: Table,
   args: {
     data: tableData,
     columns: tableColumns,
@@ -59,3 +44,9 @@ export const Default: Story = {
     tdClassName: "font-medium",
   },
 };
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};