fix:storybook

Author: taku10101

.storybook/main.js

@@ -1,46 +1,18 @@
-const excludedProps = new Set([
-  'id',
-  'slot',
-  'onCopy',
-  'onCut',
-  'onPaste',
-  'onCompositionStart',
-  'onCompositionEnd',
-  'onCompositionUpdate',
-  'onSelect',
-  'onBeforeInput',
-  'onInput'
-]);
+import graphql from 'vite-plugin-graphql-loader';
 
-/** @type { import('@storybook/react-vite').StorybookConfig } */
-const config = {
-  stories: [
-    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-  ],
+export default {
+  // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
+  framework: '@storybook/react-vite',
+  stories: ['../src/**/*.mdx', '../*/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
+    '@storybook/addon-essentials',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
   ],
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
+  async viteFinal(config) {
+    return {
+      ...config,
+      plugins: [...(config.plugins ?? []), graphql()],
+    };
   },
-  typescript: {
-    reactDocgen: 'react-docgen-typescript',
-    reactDocgenTypescriptOptions: {
-      shouldExtractLiteralValuesFromEnum: true,
-      compilerOptions: {
-        allowSyntheticDefaultImports: false,
-        esModuleInterop: false,
-      },
-      propFilter: (prop) => !prop.name.startsWith('aria-') && !excludedProps.has(prop.name),
-    },
-  }
-};
-export default config;
+};

.storybook/preview.js

@@ -1,5 +1,3 @@
-import { themes } from "@storybook/theming";
-import '../src/index.css';
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {
@@ -8,9 +6,7 @@ const preview = {
     controls: {
       matchers: {},
     },
-    docs: {
-      theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? themes.dark : themes.light
-    }
+
   },
 };
 

package.json

@@ -50,6 +50,7 @@
     "react-router-dom": "^7.5.0",
     "tailwind-merge": "^3.1.0",
     "tailwind-variants": "^0.3.1",
+    "vite-plugin-graphql-loader": "^4.0.4",
     "zod": "^3.24.2"
   },
   "sideEffects": false,

pnpm-lock.yaml

@@ -1,14 +1,16 @@
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vitest/config';
+import graphqlLoader from 'vite-plugin-graphql-loader';
 
 const dirname =
-    typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 
 export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(dirname, 'src'),
     },
   },
+  plugins: [graphqlLoader()],
 });