@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.5 → 0.1.7

package/src/index.ts

@@ -9,6 +9,11 @@
  * - 30 theme system components
  * - 131 TypeScript types
  * - 4 design tokens
+ * - 0 build plugins
+ * - 0 test utilities
+ * - 2 testing tools
+ * - 0 development tools
+ * - Complete CSS system (59+ files)
  */
 
 // UI Components
@@ -169,6 +174,19 @@ export { TokenGenerator } from './tokens/tokenGenerator';
 export { TokenManager } from './tokens/tokenManager';
 export { TokenValidator } from './tokens/tokenValidator';
 
+// Build Plugins
+
+
+// Test Utilities
+
+
+// Testing Framework
+export { TestAutomation } from './testing/test-automation';
+export { TestCLI } from './testing/test-automation';
+
+// Development Tools
+
+
 // Types
 export type { NavigationBaseProps } from './components/ui/navigation/types';
 export type { NavigationItem } from './components/ui/navigation/types';

package/src/plugins/theme-css-generator.ts

@@ -0,0 +1,354 @@
+import { resolve } from 'path'
+import { existsSync, mkdirSync, writeFileSync } from 'fs'
+import type { Plugin } from 'vite'
+import type { MultiThemeConfig } from '../themes/types'
+import { defaultThemes } from '../themes/base-themes'
+
+export default function themeCSSGenerator(): Plugin {
+  let config: any
+
+  // Helper function to safely convert values to strings
+  const valueToString = (value: any): string => {
+    if (Array.isArray(value)) {
+      return value.join(', ')
+    }
+    if (typeof value === 'object' && value !== null) {
+      return JSON.stringify(value)
+    }
+    return String(value)
+  }
+
+  // Helper function to create CSS variable name
+  const createCSSVarName = (path: string[]): string => {
+    return `--cs-${path.join('-').replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}`
+  }
+
+  // Generate @font-face declarations from font configuration
+  const generateFontFaces = (themeObj: MultiThemeConfig): string => {
+    let css = ''
+    
+    if (!themeObj.fonts) return css
+    
+    Object.entries(themeObj.fonts).forEach(([, fontConfig]) => {
+      if (fontConfig.source?.type === 'custom' && fontConfig.source.files?.woff2) {
+        const { family, source, weights, display } = fontConfig
+        
+        if (weights && Array.isArray(weights) && weights.length > 0) {
+          const minWeight = Math.min(...weights)
+          const maxWeight = Math.max(...weights)
+          
+          css += `\n@font-face {\n`
+          css += `  font-family: '${family}';\n`
+          css += `  src: url('${source.files.woff2}') format('woff2-variations');\n`
+          css += `  font-weight: ${minWeight} ${maxWeight};\n`
+          css += `  font-display: ${display || 'swap'};\n`
+          css += `}\n`
+        }
+      }
+    })
+    
+    return css
+  }
+
+  // NEW: Extract breakpoints from anywhere in the theme object
+  const extractBreakpoints = (obj: any): any => {
+    let breakpoints: any = {}
+    
+    const searchForBreakpoints = (currentObj: any, currentPath: string[] = []) => {
+      if (typeof currentObj !== 'object' || currentObj === null) {
+        return
+      }
+      
+      Object.entries(currentObj).forEach(([key, value]) => {
+        if (key === 'breakpoints' && typeof value === 'object' && value !== null) {
+          // Found breakpoints, extract them
+          Object.entries(value).forEach(([bpKey, bpValue]) => {
+            if (typeof bpValue === 'string' || typeof bpValue === 'number') {
+              breakpoints[bpKey] = bpValue
+            }
+          })
+        } else if (typeof value === 'object' && value !== null) {
+          // Recursively search deeper
+          searchForBreakpoints(value, [...currentPath, key])
+        }
+      })
+    }
+    
+    searchForBreakpoints(obj)
+    return breakpoints
+  }
+
+  // NEW: Generate breakpoint CSS variables and @custom-media queries
+  const generateBreakpointVariables = (breakpoints: any): string => {
+    let css = ''
+    if (Object.keys(breakpoints).length === 0) { return css }
+    
+    css += `  /* Breakpoint Variables */\n`
+    Object.entries(breakpoints).forEach(([key, value]) => {
+      css += `  --cs-breakpoints-${key}: ${value};\n`
+    })
+    css += '\n'
+    
+    // NEW: Generate @custom-media queries for use in media queries
+    css += `  /* Custom Media Queries for Breakpoints */\n`
+    Object.entries(breakpoints).forEach(([key, value]) => {
+      css += `  @custom-media --bp-${key} (min-width: ${value});\n`
+    })
+    css += '\n'
+    
+    return css
+  }
+
+  // Recursively generate CSS variables from theme object
+  const generateCSSVariables = (obj: any, path: string[] = []): string => {
+    let css = ''
+    
+    if (typeof obj !== 'object' || obj === null) {
+      return css
+    }
+    
+    Object.entries(obj).forEach(([key, value]) => {
+      const currentPath = [...path, key]
+      
+      if (typeof value === 'string' || typeof value === 'number') {
+        // Generate CSS variable for primitive values
+        const cssVarName = createCSSVarName(currentPath)
+        css += `  ${cssVarName}: ${value};\n`
+      } else if (Array.isArray(value)) {
+        // Handle arrays (like font weights, tags)
+        const cssVarName = createCSSVarName(currentPath)
+        css += `  ${cssVarName}: ${valueToString(value)};\n`
+      } else if (typeof value === 'object' && value !== null) {
+        // Recursively process nested objects
+        css += generateCSSVariables(value, currentPath)
+      }
+    })
+    
+    return css
+  }
+
+  // Generate CSS from theme object using structured traversal
+  const generateSingleThemeCSS = (themeName: string, themeObj: MultiThemeConfig): string => {
+    // Always generate light + dark mode CSS
+    return generateLightDarkCSS(themeName, themeObj)
+  }
+
+  // Generate light and dark mode CSS
+  const generateLightDarkCSS = (themeName: string, themeObj: MultiThemeConfig): string => {
+    let css = `/* ${themeName} Theme - Light & Dark Modes */\n`
+    
+    // Generate @font-face declarations
+    css += generateFontFaces(themeObj)
+    
+    // NEW: Extract breakpoints from anywhere in the theme
+    const breakpoints = extractBreakpoints(themeObj)
+    
+    // Generate light mode variables (default)
+    css += `:root {\n`
+    css += `  /* Light Mode Variables */\n`
+    
+    // NEW: Generate breakpoint variables first
+    css += generateBreakpointVariables(breakpoints)
+    
+    // Generate all other CSS variables
+    css += generateCSSVariables(themeObj)
+    css += '}\n\n'
+    
+    // Generate dark mode variables
+    css += `.dark {\n`
+    css += `  /* Dark Mode Variables */\n`
+    
+    if (themeObj.modes?.dark?.colors && Object.keys(themeObj.modes.dark.colors).length > 0) {
+      // Use custom dark mode colors if defined
+      css += generateDarkModeColors(themeObj.modes.dark.colors)
+    } else {
+      // Generate automatic dark mode by adapting colors
+      css += generateDarkModeVariables(themeObj)
+    }
+    
+    css += '}\n'
+    return css
+  }
+
+  // Generate dark mode colors from explicit color definitions
+  const generateDarkModeColors = (darkColors: any): string => {
+    let css = ''
+    
+    Object.entries(darkColors).forEach(([colorKey, colorValue]) => {
+      if (typeof colorValue === 'object' && colorValue !== null) {
+        // Handle nested color objects (like surface, text, etc.)
+        Object.entries(colorValue).forEach(([subKey, subValue]) => {
+          if (typeof subValue === 'string' || typeof subValue === 'number') {
+            css += `  --cs-colors-${colorKey}-${subKey}: ${subValue};\n`
+          }
+        })
+      } else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
+        // Handle direct color values
+        css += `  --cs-colors-${colorKey}: ${colorValue};\n`
+      }
+    })
+    
+    return css
+  }
+
+  // Generate dark mode variables by adapting light mode colors
+  const generateDarkModeVariables = (themeObj: MultiThemeConfig): string => {
+    // Create a dark variant of the theme by adapting colors
+    const darkTheme = adaptThemeForDarkMode(themeObj)
+    
+    // Generate CSS variables only for the properties that exist in the dark theme
+    let css = ''
+    
+    if (darkTheme.colors) {
+      // Generate CSS variables for colors
+      Object.entries(darkTheme.colors).forEach(([colorKey, colorValue]) => {
+        if (typeof colorValue === 'object' && colorValue !== null) {
+          // Handle nested color objects (like surface, text, etc.)
+          Object.entries(colorValue).forEach(([subKey, subValue]) => {
+            if (typeof subValue === 'string' || typeof subValue === 'number') {
+              css += `  --cs-colors-${colorKey}-${subKey}: ${subValue};\n`
+            }
+          })
+        } else if (typeof colorValue === 'string' || typeof colorValue === 'number') {
+          // Handle direct color values
+          css += `  --cs-colors-${colorKey}: ${colorValue};\n`
+        }
+      })
+    }
+    
+    // Add some basic dark mode variables for testing
+    css += `  --cs-colors-surface-background: #0f172a;\n`
+    css += `  --cs-colors-surface-surface: #1e293b;\n`
+    css += `  --cs-colors-surface-border: #334155;\n`
+    css += `  --cs-colors-surface-divider: #475569;\n`
+    css += `  --cs-colors-text-primary: #f8fafc;\n`
+    css += `  --cs-colors-text-secondary: #cbd5e1;\n`
+    css += `  --cs-colors-text-muted: #94a3b8;\n`
+    
+    return css
+  }
+
+  // Adapt theme for dark mode
+  const adaptThemeForDarkMode = (_themeObj: MultiThemeConfig): Partial<MultiThemeConfig> => {
+    // This would implement your dark mode color adaptation logic
+    // You can use the existing ColorManager or implement custom logic
+    return {
+      colors: {
+        surface: {
+          background: '#0f172a', // Dark background
+          surface: '#1e293b',    // Dark surface
+          border: '#334155',     // Dark border
+          divider: '#475569'     // Dark divider
+        },
+        text: {
+          primary: '#f8fafc',    // Light text
+          secondary: '#cbd5e1',  // Muted text
+          muted: '#94a3b8',      // Muted text
+          inverse: '#0f172a',    // Dark text for light backgrounds
+          onPrimary: '#0f172a',  // Text on primary color
+          onSecondary: '#0f172a', // Text on secondary color
+          onSurface: '#f8fafc'   // Text on surface
+        }
+        // ... other color adaptations
+      } as any // Type assertion to bypass strict typing for now
+    }
+  }
+
+  // Generate CSS for all themes using structured approach
+  const generateAllThemesCSS = () => {
+    try {
+      // Create themes directory if it doesn't exist
+      const themesDir = resolve(config.root, 'src/styles/themes')
+      if (!existsSync(themesDir)) {
+        mkdirSync(themesDir, { recursive: true })
+      }
+      
+      let indexCSS = '/* Theme Index - Import all themes */\n'
+      let defaultThemeCSS = '/* Default Theme Variables (Coach-Stan) */\n'
+
+      // Use defaultThemes instead of hardcoded themeFiles
+      for (const [themeKey, themeObj] of Object.entries(defaultThemes)) {
+        try {
+          // Generate CSS for this specific theme
+          const themeCSS = generateSingleThemeCSS(themeObj.meta.name, themeObj)
+          
+          // Write individual theme file
+          const themeFileName = `${themeKey}.css`
+          const themeOutputPath = resolve(themesDir, themeFileName)
+          writeFileSync(themeOutputPath, themeCSS, 'utf-8')
+          
+          console.log(`✅ Generated dual-mode CSS for theme: ${themeObj.meta.name} -> ${themeFileName}`)
+
+          // Add import to index file
+          indexCSS += `@import './${themeFileName}';\n`
+
+          // Set stan-design theme as default
+          if (themeKey === 'stan-design') {
+            defaultThemeCSS += themeCSS
+          }
+          
+        } catch (error) {
+          console.error(`❌ Error processing ${themeKey}:`, error)
+        }
+      }
+
+      // Write theme index file
+      const indexPath = resolve(config.root, 'src/styles/themes/index.css')
+      writeFileSync(indexPath, indexCSS, 'utf-8')
+
+      // Write default theme file (for backward compatibility)
+      const defaultPath = resolve(config.root, 'src/styles/generated-theme-variables.css')
+      writeFileSync(defaultPath, defaultThemeCSS, 'utf-8')
+
+      console.log('✅ Theme CSS Generator: Generated all dual-mode theme files successfully')
+      
+    } catch (error) {
+      console.error('❌ Theme CSS Generator Error:', error)
+    }
+  }
+
+  // Main function to generate theme CSS
+  const generateThemeCSS = () => {
+    try {
+      // Check if themes directory exists
+      const themesSourceDir = resolve(config.root, 'src/themes/themes')
+      
+      if (!existsSync(themesSourceDir)) {
+        console.warn('⚠️  Theme CSS Generator: themes/themes/ directory not found')
+        return
+      }
+
+      // Generate CSS for all themes
+      generateAllThemesCSS()
+      
+    } catch (error) {
+      console.error('❌ Theme CSS Generator Error:', error)
+    }
+  }
+
+  return {
+    name: 'theme-css-generator',
+    
+    configResolved(resolvedConfig) {
+      config = resolvedConfig
+    },
+
+    buildStart() {
+      generateThemeCSS()
+    },
+
+    handleHotUpdate({ file }) {
+      // Use defaultThemes keys instead of hardcoded file paths
+      const themeKeys = Object.keys(defaultThemes)
+      const shouldRegenerate = themeKeys.some(themeKey => 
+        file.includes(`themes/${themeKey}.ts`) ||
+        file.includes('inheritance.ts') ||
+        file.includes('types.ts')
+      )
+      
+      if (shouldRegenerate) {
+        generateThemeCSS()
+      }
+    }
+  }
+}

package/src/setupTests.ts

@@ -0,0 +1,124 @@
+import '@testing-library/jest-dom';
+
+// Mock localStorage for Jest environment
+const localStorageMock = {
+  getItem: jest.fn(),
+  setItem: jest.fn(),
+  removeItem: jest.fn(),
+  clear: jest.fn(),
+  length: 0,
+  key: jest.fn(),
+};
+
+Object.defineProperty(window, 'localStorage', {
+  value: localStorageMock,
+  writable: true,
+});
+
+// Mock sessionStorage for Jest environment
+const sessionStorageMock = {
+  getItem: jest.fn(),
+  setItem: jest.fn(),
+  removeItem: jest.fn(),
+  clear: jest.fn(),
+  length: 0,
+  key: jest.fn(),
+};
+
+Object.defineProperty(window, 'sessionStorage', {
+  value: sessionStorageMock,
+  writable: true,
+});
+
+// Mock performance API for Jest environment
+Object.defineProperty(window, 'performance', {
+  value: {
+    now: jest.fn(() => Date.now()),
+    memory: {
+      usedJSHeapSize: 1000000,
+      totalJSHeapSize: 2000000,
+      jsHeapSizeLimit: 3000000,
+    },
+  },
+  writable: true,
+});
+
+// Mock ResizeObserver for Jest environment
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
+// Mock IntersectionObserver for Jest environment
+global.IntersectionObserver = jest.fn().mockImplementation(() => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+
+// Mock React 18 createRoot for Jest environment
+const mockCreateRoot = jest.fn(() => ({
+  render: jest.fn(),
+  unmount: jest.fn(),
+}));
+
+Object.defineProperty(window, 'createRoot', {
+  value: mockCreateRoot,
+  writable: true,
+});
+
+// Suppress console warnings for expected test behavior
+const originalWarn = console.warn;
+const originalError = console.error;
+
+beforeAll(() => {
+  // Suppress specific warnings that are expected in tests
+  console.warn = jest.fn((...args) => {
+    const message = args[0];
+    if (
+      typeof message === 'string' && (
+        message.includes('Failed to read theme from storage') ||
+        message.includes('Failed to store theme preference') ||
+        message.includes('Failed to read system theme preference from storage')
+      )
+    ) {
+      return; // Suppress expected storage warnings
+    }
+    originalWarn(...args);
+  });
+
+  // Suppress specific errors that are expected in tests
+  console.error = jest.fn((...args) => {
+    const message = args[0];
+    if (
+      typeof message === 'string' && (
+        message.includes('Warning: An update to ThemeProvider inside a test was not wrapped in act') ||
+        message.includes('createRoot') ||
+        message.includes('Target container is not a DOM element')
+      )
+    ) {
+      return; // Suppress expected React act warnings and createRoot errors
+    }
+    originalError(...args);
+  });
+});
+
+afterAll(() => {
+  // Restore original console methods
+  console.warn = originalWarn;
+  console.error = originalError;
+});
+
+// Reset mocks before each test
+beforeEach(() => {
+  localStorageMock.getItem.mockClear();
+  localStorageMock.setItem.mockClear();
+  localStorageMock.removeItem.mockClear();
+  localStorageMock.clear.mockClear();
+  
+  sessionStorageMock.getItem.mockClear();
+  sessionStorageMock.setItem.mockClear();
+  sessionStorageMock.removeItem.mockClear();
+  sessionStorageMock.clear.mockClear();
+});

package/src/stories/README.md

@@ -0,0 +1,39 @@
+# Storybook Stories
+
+This directory contains all the Storybook stories for the Roger UI Bank design system.
+
+## Structure
+
+- `components/` - Component stories organized by category
+  - `ui/` - Basic UI component stories
+  - `layouts/` - Layout component stories
+  - `feedback/` - Feedback component stories
+  - `navigation/` - Navigation component stories
+  - `overlay/` - Overlay component stories
+  - `data-display/` - Data display component stories
+- `themes/` - Theme documentation and examples
+- `decorators/` - Story decorators for common functionality
+
+## Usage
+
+1. Start Storybook: `npm run storybook`
+2. Navigate to http://localhost:6006
+3. Use the theme switcher in the toolbar to see different themes
+4. Explore component variations and documentation
+
+## Adding New Stories
+
+1. Create a new story file in the appropriate category
+2. Import the component and create stories
+3. Add theme decorator for multi-theme support
+4. Include comprehensive documentation
+5. Test with all available themes
+
+## Theme Support
+
+All components support three themes:
+- **Stan Design** - Modern, professional design
+- **Enterprise** - Corporate, business-focused design
+- **Harvey Creative** - Creative, vibrant design
+
+Use the theme decorator to ensure proper theme integration in your stories.

package/src/stories/components/ThemeDebugger.tsx

@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from 'react';
+import { useTheme } from '../../themes';
+
+/**
+ * Theme Debugger Component for Storybook
+ * Shows current theme state and CSS variables for debugging
+ */
+export const ThemeDebugger: React.FC = () => {
+  const { currentTheme, currentThemeConfig, availableThemes } = useTheme();
+  const [cssVariables, setCssVariables] = useState<Record<string, string>>({});
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Extract CSS variables from document root
+  useEffect(() => {
+    const extractCSSVariables = () => {
+      const root = document.documentElement;
+      const variables: Record<string, string> = {};
+      
+      // Get all CSS custom properties
+      const styles = getComputedStyle(root);
+      
+      // Method 1: Try to get all CSS properties
+      try {
+        for (let i = 0; i < styles.length; i++) {
+          const property = styles[i];
+          if (property.startsWith('--cs-')) {
+            variables[property] = styles.getPropertyValue(property);
+          }
+        }
+      } catch (error) {
+        console.warn('Could not iterate through styles:', error);
+      }
+      
+      // Method 2: Try to get specific known CSS variables
+      const knownVariables = [
+        '--cs-primary-500', '--cs-secondary-500', '--cs-success', '--cs-warning', '--cs-error', '--cs-info',
+        '--cs-text-primary', '--cs-text-secondary', '--cs-surface-bg', '--cs-border',
+        '--cs-fonts-primary-family', '--cs-fonts-primary-sizes-md', '--cs-spacing-4'
+      ];
+      
+      knownVariables.forEach(varName => {
+        try {
+          const value = styles.getPropertyValue(varName);
+          if (value && value.trim() !== '') {
+            variables[varName] = value;
+          }
+        } catch (error) {
+          // Variable doesn't exist
+        }
+      });
+      
+      // Method 3: Check if variables are set via inline styles
+      const inlineVars = root.style.cssText.match(/--cs-[^:]+:[^;]+/g) || [];
+      inlineVars.forEach(varDeclaration => {
+        const [name, value] = varDeclaration.split(':');
+        if (name && value) {
+          variables[name.trim()] = value.trim();
+        }
+      });
+      
+      console.log('Extracted CSS variables:', variables);
+      setCssVariables(variables);
+    };
+
+    extractCSSVariables();
+    
+    // Listen for theme changes
+    const handleThemeChange = () => {
+      setTimeout(extractCSSVariables, 200); // Increased delay to ensure CSS is updated
+    };
+    
+    window.addEventListener('themeChange', handleThemeChange);
+    
+    // Also check periodically for changes
+    const interval = setInterval(extractCSSVariables, 1000);
+    
+    return () => {
+      window.removeEventListener('themeChange', handleThemeChange);
+      clearInterval(interval);
+    };
+  }, [currentTheme]);
+
+  if (!isVisible) {
+    return (
+      <button
+        onClick={() => setIsVisible(true)}
+        className="fixed bottom-4 right-4 bg-blue-600 text-white px-3 py-2 rounded-lg text-sm z-50"
+      >
+        🐛 Debug Theme
+      </button>
+    );
+  }
+
+  return (
+    <div className="fixed bottom-4 right-4 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg p-4 max-w-md max-h-96 overflow-auto shadow-lg z-50">
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="font-semibold text-gray-900 dark:text-white">Theme Debugger</h3>
+        <button
+          onClick={() => setIsVisible(false)}
+          className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+        >
+          ✕
+        </button>
+      </div>
+      
+      <div className="space-y-3 text-sm">
+        <div>
+          <strong>Current Theme:</strong> {currentTheme}
+        </div>
+        
+        <div>
+          <strong>Available Themes:</strong> {availableThemes.join(', ')}
+        </div>
+        
+        {currentThemeConfig && (
+          <div>
+            <strong>Theme Config:</strong>
+            <pre className="mt-1 p-2 bg-gray-100 dark:bg-gray-700 rounded text-xs overflow-auto max-h-20">
+              {JSON.stringify({
+                name: currentThemeConfig.meta?.name,
+                description: currentThemeConfig.meta?.description,
+                category: currentThemeConfig.meta?.category,
+                primaryColor: currentThemeConfig.colors?.primary?.[500],
+                fontFamily: currentThemeConfig.fonts?.primary?.family
+              }, null, 2)}
+            </pre>
+          </div>
+        )}
+        
+        <div>
+          <strong>CSS Variables ({Object.keys(cssVariables).length}):</strong>
+          <div className="mt-1 max-h-32 overflow-auto">
+            {Object.entries(cssVariables).map(([variable, value]) => (
+              <div key={variable} className="text-xs font-mono">
+                <span className="text-blue-600">{variable}:</span> {value}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};