✨ Storybook

frontend/components/.gitignore

@@ -1,2 +1,4 @@
 # node
 node_modules/
+
+*storybook.log

frontend/components/.storybook/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/components/.storybook/main.ts

@@ -0,0 +1,40 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+import tsConfigPaths from "vite-tsconfig-paths";
+
+import { join, dirname } from "path";
+
+/**
+ * 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: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/experimental-addon-test"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  viteFinal: async (config) => {
+    return mergeConfig(config, {
+      plugins: [tsConfigPaths()],
+    });
+  },
+  typescript: {
+    reactDocgenTypescriptOptions: {
+      tsconfigPath: "./tsconfig.json",
+    },
+  },
+};
+export default config;

frontend/components/.storybook/preview.ts

@@ -0,0 +1,17 @@
+import type { Preview } from "@storybook/react";
+import "./index.css";
+import "@styles/colors.css";
+import "@styles/main.css";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

frontend/components/.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react';
+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
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

frontend/components/base/Buttons/IconButton.tsx

@@ -12,7 +12,6 @@ export type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
     iconClassName?: string;
     loading?: boolean;
   };
-
 const IconButton = ({
   icon: Icon,
   size,

frontend/components/base/Buttons/button.variants.ts

@@ -89,7 +89,7 @@ export const iconButtonVariants = tv({
         icon: "size-4",
       },
       xs: {
-        base: "size-6",
+        base: "size-5",
         icon: "size-[14px]",
       },
       sm: {

frontend/components/base/dialog/alert-dialog-provider.tsx

@@ -20,7 +20,7 @@ import {
 import { alertDialog, OpenAlertDialogProps } from "./alert-dialog-store";
 import { Spinner } from "../spinner";
 
-type AlertDialogProps = OpenAlertDialogProps & {
+export type AlertDialogProps = OpenAlertDialogProps & {
   isOpen: boolean;
 };
 

frontend/components/base/icons/greater-than-operator-icon.tsx

@@ -9,7 +9,7 @@ const GreaterThanOperatorIcon = ({
   <svg
     height={size}
     width={size}
-    viewBox="0 0 14 14"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >

frontend/components/base/icons/greater-than-or-equal-operator-icon.tsx

@@ -9,7 +9,7 @@ const GreaterThanOrEqualOperatorIcon = ({
   <svg
     height={size}
     width={size}
-    viewBox="0 0 14 14"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >

frontend/components/base/icons/less-than-operator-icon.tsx

@@ -9,7 +9,7 @@ const LessThanOperatorIcon = ({
   <svg
     height={size}
     width={size}
-    viewBox="0 0 14 14"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >

frontend/components/base/icons/less-than-or-equal-operator-icon.tsx

@@ -9,7 +9,7 @@ const LessThanOrEqualOperatorIcon = ({
   <svg
     height={size}
     width={size}
-    viewBox="0 0 14 14"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >

frontend/components/package.json

@@ -4,15 +4,29 @@
   "main": "index.js",
   "scripts": {
     "test": "vite-jest",
-    "dev": "tailwindcss -i ./style/styles.css -o ./style/dist/styles.css"
+    "storybook": "THEME=radiant storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "description": "",
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.5",
+    "@storybook/addon-essentials": "^8.6.3",
+    "@storybook/addon-onboarding": "^8.6.3",
+    "@storybook/blocks": "^8.6.3",
+    "@storybook/experimental-addon-test": "^8.6.3",
+    "@storybook/react": "^8.6.3",
+    "@storybook/react-vite": "^8.6.3",
+    "@storybook/test": "^8.6.3",
     "@types/lodash": "^4.17.14",
-    "tailwindcss": "^3.4.16"
+    "@vitest/browser": "^3.0.7",
+    "@vitest/coverage-v8": "^3.0.7",
+    "playwright": "^1.50.1",
+    "storybook": "^8.6.3",
+    "tailwindcss": "^3.4.16",
+    "vitest": "^3.0.7"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -33,6 +47,7 @@
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tanstack/react-table": "^8.20.6",
+    "@vitejs/plugin-react": "^4.3.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lodash": "^4.17.21",

frontend/components/stories/base/buttons/action-button.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import ActionButton from "@/components/base/Buttons/ActionButton";
+
+const meta = {
+  title: "Base/Buttons/Action Button",
+  component: ActionButton,
+  tags: ["autodocs"],
+  args: { onClick: fn(), size: "default", actions: [], onDefaultAction: fn() },
+} satisfies Meta<typeof ActionButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+    variant: "default",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: "Button",
+    variant: "outline",
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    children: "Button",
+    variant: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: "Button",
+    variant: "secondary",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: "Button",
+    variant: "ghost",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: "Button",
+    variant: "destructive",
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    children: "Button",
+    variant: "primary",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: "Button",
+    variant: "primary",
+    disabled: true,
+  },
+};
+
+export const Sizes: Story = {
+  args: {
+    children: "Button",
+  },
+  render: (args) => (
+    <div className="flex gap-2">
+      <ActionButton {...args} size="default" variant="primary">
+        Default
+      </ActionButton>
+      <ActionButton {...args} size="xs" variant="primary">
+        AButton xs
+      </ActionButton>
+      <ActionButton {...args} size="sm" variant="primary">
+        AButton sm
+      </ActionButton>
+      <ActionButton {...args} size="md" variant="primary">
+        AButton md
+      </ActionButton>
+      <ActionButton {...args} size="lg" variant="primary">
+        AButton lg
+      </ActionButton>
+    </div>
+  ),
+};

frontend/components/stories/base/buttons/button.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { Button } from "@/components/base/ui/button";
+
+const meta = {
+  title: "Base/Buttons/Button",
+  component: Button,
+  tags: ["autodocs"],
+  args: { onClick: fn(), size: "default" },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+    variant: "default",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: "Button",
+    variant: "outline",
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    children: "Button",
+    variant: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: "Button",
+    variant: "secondary",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: "Button",
+    variant: "ghost",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: "Button",
+    variant: "destructive",
+  },
+};
+
+export const Link: Story = {
+  args: {
+    children: "Button",
+    variant: "link",
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    children: "Button",
+    variant: "primary",
+    loading: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: "Button",
+    variant: "primary",
+    disabled: true,
+  },
+};
+
+export const Sizes: Story = {
+  args: {},
+  render: () => (
+    <div className="flex gap-2">
+      <Button size="default" variant="primary">
+        Default
+      </Button>
+      <Button size="xs" variant="primary">
+        Button xs
+      </Button>
+      <Button size="sm" variant="primary">
+        Button sm
+      </Button>
+      <Button size="md" variant="primary">
+        Button md
+      </Button>
+      <Button size="lg" variant="primary">
+        Button lg
+      </Button>
+    </div>
+  ),
+};