feat: web storybook setup

apps/web/.storybook/main.ts

@@ -0,0 +1,49 @@
+import type { StorybookConfig } from "@storybook/nextjs-vite";
+import { join, dirname } from "path"
+import { mergeConfig } from "vite";
+
+/**
+* This function is used to resolve the absolute path of a package.
+* It is needed in projects that use Yarn PnP or are set up within a monorepo.
+*/
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+const config: StorybookConfig = {
+  "stories": [
+    "../core/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../app/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../ee/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../ce/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-vitest")
+  ],
+  "framework": {
+    "name": getAbsolutePath("@storybook/nextjs-vite"),
+    "options": {}
+  },
+  "staticDirs": [
+    "../public"
+  ],
+  viteFinal: async (config) => {
+    const path = require('path');
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          '@plane/utils': path.resolve(__dirname, '../../../packages/utils/src/index.ts'),
+          '@plane/types': path.resolve(__dirname, '../../../packages/types/src/index.ts'),
+          '@plane/ui': path.resolve(__dirname, '../../../packages/ui/src/index.ts'),
+          '@plane/constants': path.resolve(__dirname, '../../../packages/constants/src/index.ts')
+        }
+      },
+      optimizeDeps: {
+        include: ['@plane/utils', '@plane/types', '@plane/ui', '@plane/constants']
+      }
+    });
+  }
+};
+export default config;

apps/web/.storybook/preview.ts

@@ -0,0 +1,22 @@
+import type { Preview } from '@storybook/nextjs-vite';
+import '../styles/globals.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+    },
+  },
+};
+
+export default preview;

apps/web/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/nextjs-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

apps/web/core/components/empty-state/comic-box-button.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Plus } from "lucide-react";
+import { ComicBoxButton } from "./comic-box-button";
+
+const meta: Meta<typeof ComicBoxButton> = {
+  title: "Core/Components/Buttons/ComicBoxButton",
+  component: ComicBoxButton,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Button label text",
+    },
+    title: {
+      control: "text",
+      description: "Tooltip title",
+    },
+    description: {
+      control: "text",
+      description: "Tooltip description",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the button is disabled",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ComicBoxButton>;
+
+export const Default: Story = {
+  args: {
+    label: "Create Project",
+    title: "Start your first project",
+    description: "Create a project to organize your work and collaborate with your team.",
+    icon: <Plus className="h-4 w-4" />,
+  },
+};
+
+export const WithoutIcon: Story = {
+  args: {
+    label: "Add Members",
+    title: "Invite team members",
+    description: "Collaborate with your team by inviting them to join your workspace.",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Create Project",
+    title: "Start your first project",
+    description: "Create a project to organize your work and collaborate with your team.",
+    icon: <Plus className="h-4 w-4" />,
+    disabled: true,
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    label: "A Very Long Button Label That Might Need to Wrap",
+    title: "This is a very long title that demonstrates how the component handles long content",
+    description: "This is a detailed description that contains multiple sentences to show how the tooltip handles longer content. It should wrap properly and maintain readability.",
+    icon: <Plus className="h-4 w-4" />,
+  },
+};

apps/web/package.json

@@ -12,7 +12,8 @@
     "check:types": "tsc --noEmit",
     "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
     "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\""
+    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "storybook": "storybook dev -p 7007"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "catalog:",
@@ -66,18 +67,25 @@
     "swr": "catalog:",
     "tailwind-merge": "^2.0.0",
     "use-font-face-observer": "^1.2.2",
-    "uuid": "catalog:"
+    "uuid": "catalog:",
+    "vite": "catalog:"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "4.1.0",
     "@plane/eslint-config": "workspace:*",
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
+    "@storybook/addon-a11y": "9.1.1",
+    "@storybook/addon-docs": "9.1.1",
+    "@storybook/addon-vitest": "9.1.1",
+    "@storybook/nextjs-vite": "9.1.1",
     "@types/lodash-es": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "catalog:",
     "prettier": "^3.2.5",
+    "storybook": "9.1.1",
     "typescript": "catalog:"
   }
-}
+}