feat: BREAKTHROUGH

.cache/storybook/dev-server/a5a8bf6e622aef57065c6498611f40c911543d7d-3920d97c51b8ad2521918fb1205babd22b0ed3d7

@@ -0,0 +1 @@
+{"value":{"id":"BvLLAsdFfs5SdeYZ5pVG-","lastUsed":1735085325960},"type":"Object","created":"2024-12-25T00:08:45.960Z","ttl":0}

.cache/storybook/dev-server/a5a8bf6e622aef57065c6498611f40c911543d7d-43fdebe5fc35e4e9fabee9a83c7faea931b05ea0

@@ -0,0 +1 @@
+{"value":1735085325593,"type":"Number","created":"2024-12-25T00:08:45.593Z","ttl":0}

.cache/storybook/dev-server/a5a8bf6e622aef57065c6498611f40c911543d7d-f086b87885981c04ce7a583ff90a49313de83de7

@@ -0,0 +1 @@
+{"value":{"boot":{"body":{"eventType":"boot","eventId":"Sqsuq7v4Bwy_vM-lhB_B6","sessionId":"BvLLAsdFfs5SdeYZ5pVG-","payload":{"eventType":"init"},"context":{"inCI":false,"isTTY":true,"platform":"macOS","cliVersion":"7.6.19"}},"timestamp":1735085297232},"error":{"body":{"eventType":"error","eventId":"O_52UzwoSFtzGAlrqgZyF","sessionId":"BvLLAsdFfs5SdeYZ5pVG-","payload":{"name":"Error","eventType":"init","error":{"handled":true,"cause":{"handled":true,"cause":{"handled":true,"cause":{}}},"message":"NPM error\n\nPlease check the logfile generated at ./storybook.log for troubleshooting and try again.","stack":"Error: NPM error\n\nPlease check the logfile generated at ./storybook.log for troubleshooting and try again.\n    at installStorybook ($SNIP/.npm/_npx/b6da11605fa9b6a2/node_modules/@storybook/cli/dist/generate.js:109:48)\n    at async doInitiate ($SNIP/.npm/_npx/b6da11605fa9b6a2/node_modules/@storybook/cli/dist/generate.js:132:845)\n    at async withTelemetry ($SNIP/.npm/_npx/b6da11605fa9b6a2/node_modules/@storybook/core-server/dist/index.js:65:3948)\n    at async initiate ($SNIP/.npm/_npx/b6da11605fa9b6a2/node_modules/@storybook/cli/dist/generate.js:156:250)","name":"Error"},"errorHash":"b3bb6723c3d1906f068c2570374fbdd17b847833319237f3786a41450bb879f2","isErrorInstance":true,"metadataErrorMessage":"No configuration files have been found in your configDir ($SNIP/.storybook).\nStorybook needs \"main.js\" file, please add it (or pass a custom config dir flag to Storybook to tell where your main.js file is located at).","metadataError":{"message":"No configuration files have been found in your configDir ($SNIP/.storybook).\nStorybook needs \"main.js\" file, please add it (or pass a custom config dir flag to Storybook to tell where your main.js file is located at).","stack":"Error: No configuration files have been found in your configDir ($SNIP/.storybook).\nStorybook needs \"main.js\" file, please add it (or pass a custom config dir flag to Storybook to tell where your main.js file is located at).\n    at validateConfigurationFiles ($SNIP/.npm/_npx/b6da11605fa9b6a2/node_modules/@storybook/core-common/dist/index.js:9:30)\n    at async loadMainConfig ($SNIP/.npm/_npx/b6da11605fa9b6a2/node_modules/@storybook/core-common/dist/index.js:19:6723)\n    at async getStorybookMetadata ($SNIP/.npm/_npx/b6da11605fa9b6a2/node_modules/@storybook/telemetry/dist/index.js:12:12496)\n    at async telemetry ($SNIP/.npm/_npx/b6da11605fa9b6a2/node_modules/@storybook/telemetry/dist/index.js:14:6818)\n    at async sendTelemetryError ($SNIP/.npm/_npx/b6da11605fa9b6a2/node_modules/@storybook/core-server/dist/index.js:65:3128)\n    at async withTelemetry ($SNIP/.npm/_npx/b6da11605fa9b6a2/node_modules/@storybook/core-server/dist/index.js:65:4090)\n    at async initiate ($SNIP/.npm/_npx/b6da11605fa9b6a2/node_modules/@storybook/cli/dist/generate.js:156:250)","name":"Error"}},"context":{"inCI":false,"isTTY":true,"platform":"macOS","cliVersion":"7.6.19","anonymousId":"856f45a0234ef1824741669094cb427e5c07905717554a70ebd3f1f031a1370f"}},"timestamp":1735085325964}},"type":"Object","created":"2024-12-25T00:08:45.964Z","ttl":0}

.storybook/main.ts

@@ -1,16 +1,22 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: [
+    "../packages/**/*.stories.@(js|jsx|ts|tsx|mdx)", // Include MDX files explicitly
+    "../packages/**/*.mdx" // Ensure loose .mdx files are covered
+  ],
   addons: [
-    "@storybook/addon-onboarding",
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    '@storybook/addon-docs',
   ],
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
 };
 export default config;

.storybook/preview.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {Provider} from '@react-spectrum/provider';
+import theme from '../packages/fds-theme/dist/index.es.js';
+import {theme as adobeTheme} from '@react-spectrum/theme-default'
+import type {Preview} from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+// Define parameters for controls and actions
+const preview: Preview = {
+  parameters: {
+    actions: {
+      handles: ['onClick', 'onChange'], // Specify explicit actions
+      log: action('log'), // Logs actions
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+
+  // Apply decorators
+  decorators: [
+    (Story, context) => {
+      // Detect Storybook dark mode from globals
+      const isDarkMode = context.globals.theme === 'dark';
+
+      // Apply global body classes for Spectrum CSS themes
+      document.body.classList.remove('spectrum--light', 'spectrum--dark');
+      document.body.classList.add(isDarkMode ? 'spectrum--dark' : 'spectrum--light');
+
+      console.log("my: ", theme)
+      console.log("adobe ", adobeTheme)
+      // Use React Spectrum's Provider for additional context
+      return (
+        <Provider theme={theme} colorScheme={isDarkMode ? 'dark' : 'light'}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
+  tags: ['autodocs'], // Enable auto-documentation
+};
+
+// Add global types for theme switching
+export const globalTypes = {
+  theme: {
+    name: 'Theme', // Label in Storybook UI
+    description: 'Global theme for components',
+    defaultValue: 'light', // Default theme
+    toolbar: {
+      icon: 'circlehollow', // Toolbar icon in Storybook
+      items: ['light', 'dark'], // Available options
+      showName: true, // Display the selected option name
+    },
+  },
+};
+
+export default preview;