Create Component Library

.storybook/main.ts

@@ -1,4 +1,4 @@
-import type { StorybookConfig } from "@storybook/nextjs-vite";
+import type { StorybookConfig } from '@storybook/nextjs-vite';
 
 const config: StorybookConfig = {
   "stories": [
@@ -7,15 +7,12 @@ const config: StorybookConfig = {
   ],
   "addons": [
     "@chromatic-com/storybook",
-    "@storybook/addon-docs",
-    "@storybook/addon-onboarding",
+    "@storybook/addon-vitest",
     "@storybook/addon-a11y",
-    "@storybook/addon-vitest"
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding"
   ],
-  "framework": {
-    "name": "@storybook/nextjs-vite",
-    "options": {}
-  },
+  "framework": "@storybook/nextjs-vite",
   "staticDirs": [
     "../public"
   ]

.storybook/preview-head.html

@@ -0,0 +1,19 @@
+<style>
+  /* Ensure proper font loading and base styles */
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+
+  :root {
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  body {
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Add any global styles here */
+  #root {
+    padding: 2rem;
+  }
+</style>

package.json

@@ -86,7 +86,8 @@
     "tw-animate-css": "^1.4.0",
     "typescript": "^5",
     "vitest": "^4.0.12",
-    "vitest-fetch-mock": "^0.4.5"
+    "vitest-fetch-mock": "^0.4.5",
+    "vite": "^7.2.4"
   },
   "lint-staged": {
     "*.{ts,tsx}": [

src/components/wallet/WalletConnectModal.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import WalletConnectModal from './WalletConnectModal';
+
+const meta: Meta<typeof WalletConnectModal> = {
+  title: 'Components/WalletConnectModal',
+  component: WalletConnectModal,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    isOpen: { control: 'boolean' },
+    onClose: { action: 'closed' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WalletConnectModal>;
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+  },
+};
+
+export const Closed: Story = {
+  args: {
+    isOpen: false,
+  },
+};

vitest.config.ts

@@ -5,11 +5,11 @@ import react from '@vitejs/plugin-react';
 import { configDefaults } from 'vitest/config';
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
 // No need to import defineBrowser, using direct configuration
-
-const dirname = typeof __dirname !== 'undefined' 
-  ? __dirname 
-  : path.dirname(fileURLToPath(import.meta.url));
-
+import { playwright } from '@vitest/browser-playwright';
+const dirname =
+  typeof __dirname !== 'undefined'
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
 const setupFile = path.join(dirname, 'vitest.setup.ts');
 const coverageDir = path.join(dirname, 'coverage');
 
@@ -91,7 +91,6 @@ const storybookTestConfig = {
   },
   setupFiles: [path.join(dirname, '.storybook/vitest.setup.ts')],
 };
-
 export default defineConfig({
   plugins: [react()],
   test: {
@@ -100,6 +99,32 @@ export default defineConfig({
     globals: true,
     setupFiles: [setupFile],
     coverage: commonTestConfig.coverage,
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({
+            configDir: path.join(dirname, '.storybook'),
+          }),
+        ],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [
+              {
+                browser: 'chromium',
+              },
+            ],
+          },
+          setupFiles: ['.storybook/vitest.setup.ts'],
+        },
+      },
+    ],
   },
   resolve: {
     alias: {