feat: Add comprehensive Lambda Curry theming to Storybook

apps/docs/.storybook/main.ts

@@ -9,8 +9,10 @@ function getAbsolutePath(value: string): string {
   return dirname(require.resolve(join(value, 'package.json')));
 }
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [getAbsolutePath('@storybook/addon-links'), getAbsolutePath('@storybook/addon-docs')],
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'), 
+  ],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),
     options: {},

apps/docs/.storybook/manager.ts

@@ -0,0 +1,56 @@
+import { addons } from 'storybook/internal/manager-api';
+import { create } from 'storybook/internal/theming';
+import lambdaCurryLogo from '../src/assets/lambda-curry-logo.png';
+import './storybook-theme.css';
+
+const theme = create({
+  base: 'light',
+
+  // Brand
+  brandTitle: 'Lambda Curry | Medusa Forms',
+  brandUrl: 'https://lambdacurry.com',
+  brandImage: lambdaCurryLogo,
+  brandTarget: '_self',
+
+  // Colors
+  colorPrimary: '#FF6B35', // Lambda Curry orange
+  colorSecondary: '#2D3748', // Dark gray
+
+  // UI
+  appBg: '#FFFFFF',
+  appContentBg: '#FFFFFF',
+  appPreviewBg: '#FFFFFF',
+  appBorderColor: '#E2E8F0',
+  appBorderRadius: 8,
+
+  // Text colors
+  textColor: '#2D3748',
+  textInverseColor: '#FFFFFF',
+  textMutedColor: '#718096',
+
+  // Toolbar default and active colors
+  barTextColor: '#718096',
+  barSelectedColor: '#FF6B35',
+  barHoverColor: '#FF6B35',
+  barBg: '#FFFFFF',
+
+  // Form colors
+  inputBg: '#FFFFFF',
+  inputBorder: '#E2E8F0',
+  inputTextColor: '#2D3748',
+  inputBorderRadius: 6,
+
+  // Fonts
+  fontBase: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  fontCode: '"Fira Code", "Consolas", "Monaco", monospace',
+});
+
+addons.setConfig({
+  theme,
+  panelPosition: 'bottom',
+  selectedPanel: 'controls',
+  sidebar: {
+    showRoots: false,
+    collapsedRoots: ['other'],
+  },
+});

apps/docs/.storybook/preview-head.html

@@ -0,0 +1,43 @@
+<!-- Lambda Curry Medusa Forms Storybook -->
+<link rel="icon" type="image/png" href="./favicon.png" />
+<link rel="shortcut icon" type="image/png" href="./favicon.png" />
+
+<!-- Meta tags -->
+<meta name="description" content="Lambda Curry Medusa Forms - Controlled form components for Medusa Admin and Medusa UI" />
+<meta name="keywords" content="medusa, forms, react, typescript, lambda curry, components" />
+<meta name="author" content="Lambda Curry" />
+
+<!-- Open Graph -->
+<meta property="og:title" content="Lambda Curry Medusa Forms" />
+<meta property="og:description" content="Controlled form components for Medusa Admin and Medusa UI applications" />
+<meta property="og:type" content="website" />
+<meta property="og:site_name" content="Lambda Curry Medusa Forms" />
+
+<!-- Twitter Card -->
+<meta name="twitter:card" content="summary" />
+<meta name="twitter:title" content="Lambda Curry Medusa Forms" />
+<meta name="twitter:description" content="Controlled form components for Medusa Admin and Medusa UI applications" />
+
+<!-- Fonts -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
+
+<!-- Custom styles for better Lambda Curry branding -->
+<style>
+  /* Ensure Inter font is loaded and applied */
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
+  }
+
+  /* Custom loading screen */
+  .sb-preparing-story {
+    background: linear-gradient(135deg, #FF6B35 0%, #FF8A5B 100%) !important;
+  }
+
+  .sb-preparing-story .sb-preparing-story-loader {
+    border-color: rgba(255, 255, 255, 0.3) !important;
+    border-top-color: white !important;
+  }
+</style>
+

apps/docs/.storybook/preview.ts

@@ -12,6 +12,84 @@ const preview: Preview = {
     options: {
       storySort: {
         method: 'alphabetical',
+        order: [
+          'Introduction',
+          ['Welcome', 'Getting Started', 'Installation'],
+          'Components',
+          ['Form Controls', '*'],
+          'Examples',
+          '*',
+        ],
+      },
+    },
+    docs: {
+      theme: {
+        base: 'light',
+        brandTitle: 'Lambda Curry | Medusa Forms',
+        brandUrl: 'https://lambdacurry.com',
+        colorPrimary: '#FF6B35',
+        colorSecondary: '#2D3748',
+        appBg: '#FFFFFF',
+        appContentBg: '#FFFFFF',
+        textColor: '#2D3748',
+        fontBase: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+      },
+    },
+    backgrounds: {
+      default: 'light',
+      values: [
+        {
+          name: 'light',
+          value: '#FFFFFF',
+        },
+        {
+          name: 'gray',
+          value: '#F7FAFC',
+        },
+        {
+          name: 'dark',
+          value: '#2D3748',
+        },
+      ],
+    },
+    viewport: {
+      viewports: {
+        mobile: {
+          name: 'Mobile',
+          styles: {
+            width: '375px',
+            height: '667px',
+          },
+        },
+        tablet: {
+          name: 'Tablet',
+          styles: {
+            width: '768px',
+            height: '1024px',
+          },
+        },
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '1200px',
+            height: '800px',
+          },
+        },
+      },
+    },
+  },
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        title: 'Theme',
+        icon: 'paintbrush',
+        items: [
+          { value: 'light', title: 'Light', icon: 'sun' },
+          { value: 'dark', title: 'Dark', icon: 'moon' },
+        ],
+        dynamicTitle: true,
       },
     },
   },