fix: remove storybook

packages/react/.storybook/main.ts

@@ -1,30 +0,0 @@
-import type { StorybookConfig } from "@storybook/react-vite";
-
-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-onboarding"),
-    getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
-    getAbsolutePath("@chromatic-com/storybook"),
-    getAbsolutePath("@storybook/addon-interactions"),
-    "@storybook/addon-themes"
-  ],
-  framework: {
-    name: getAbsolutePath("@storybook/react-vite"),
-    options: {},
-  },
-};
-export default config

packages/react/.storybook/preview.tsx

@@ -1,158 +0,0 @@
-import React from "react";
-import type { Preview } from "@storybook/react";
-import type { DecoratorFunction, Renderer } from "@storybook/types";
-import { useEffect, addons, useParameter } from "@storybook/preview-api";
-import "../src/tailwind.css";
-import {
-  Controls,
-  Description,
-  Primary,
-  Stories,
-  Subtitle,
-  Title,
-} from "@storybook/blocks";
-
-const classStringToArray = (classString: string) =>
-  classString.split(" ").filter(Boolean);
-
-const withThemeByClassName = <TRenderer extends Renderer = any>(
-  themes: Record<string, string>,
-  defaultTheme: string,
-  parentSelector: string
-): DecoratorFunction<TRenderer> => {
-  addons.getChannel().emit("storybook/themes/REGISTER_THEMES", {
-    defaultTheme,
-    themes: Object.keys(themes),
-  });
-
-  return (storyFn, context) => {
-    const { themeOverride } = useParameter<{ themeOverride?: string }>(
-      "themes",
-      {}
-    ) as { themeOverride?: string };
-    const selected = context.globals["theme"] || "";
-
-    useEffect(() => {
-      const selectedThemeName = themeOverride || selected || defaultTheme;
-      const parentElement = document.querySelectorAll(parentSelector);
-
-      if (!parentElement) {
-        return;
-      }
-
-      Object.entries(themes)
-        .filter(([themeName]) => themeName !== selectedThemeName)
-        .forEach(([_, className]) => {
-          const classes = classStringToArray(className);
-          if (classes.length > 0) {
-            parentElement.forEach((element) =>
-              element.classList.remove(...classes)
-            );
-          }
-        });
-
-      const newThemeClasses = classStringToArray(themes[selectedThemeName]);
-
-      if (newThemeClasses.length > 0) {
-        parentElement.forEach((element) => {
-          element.classList.add(...newThemeClasses);
-        });
-      }
-    }, [themeOverride, selected, parentSelector]);
-
-    return storyFn();
-  };
-};
-
-export const decorators = [
-  withThemeByClassName(
-    {
-      light: "light",
-      dark: "dark",
-    },
-    "dark",
-    "html,.sbdocs.sbdocs-preview"
-  ),
-];
-
-const autoDocsTemplate = () => (
-  <>
-    <Title />
-    <Subtitle />
-    <Description />
-    <Primary />
-    <Controls />
-    <Stories />
-  </>
-);
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-    layout: "centered",
-    viewport: {
-      viewports: {
-        min: {
-          name: "min",
-          styles: {
-            width: "320px",
-            height: "100%",
-          },
-          type: "mobile",
-        },
-        sm: {
-          name: "sm",
-          styles: {
-            width: "640px",
-            height: "100%",
-          },
-          type: "mobile",
-        },
-        md: {
-          name: "md",
-          styles: {
-            width: "768px",
-            height: "100%",
-          },
-          type: "tablet",
-        },
-        lg: {
-          name: "lg",
-          styles: {
-            width: "1024px",
-            height: "100%",
-          },
-          type: "tablet",
-        },
-        xl: {
-          name: "xl",
-          styles: {
-            width: "1280px",
-            height: "100%",
-          },
-          type: "desktop",
-        },
-        "2xl": {
-          name: "2xl",
-          styles: {
-            width: "1536px",
-            height: "100%",
-          },
-          type: "desktop",
-        },
-      },
-      defaultViewport: "md",
-    },
-    docs: {
-      page: autoDocsTemplate,
-    },
-  },
-  tags: ["autodocs"],
-};
-
-export default preview;

packages/react/package.json

@@ -7,9 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@mdx-js/react": "^3.0.1",
@@ -19,17 +17,7 @@
     "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.5",
     "@mdx-js/rollup": "^3.0.1",
-    "@storybook/addon-essentials": "^8.1.0",
-    "@storybook/addon-interactions": "^8.1.0",
-    "@storybook/addon-links": "^8.1.0",
-    "@storybook/addon-onboarding": "^8.1.0",
-    "@storybook/addon-themes": "^8.1.0",
-    "@storybook/blocks": "^8.1.0",
-    "@storybook/react": "^8.1.0",
-    "@storybook/react-vite": "^8.1.0",
-    "@storybook/test": "^8.1.0",
     "@types/mdx": "^2.0.13",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
@@ -43,7 +31,6 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
     "postcss": "^8.4.38",
-    "storybook": "^8.1.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"