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

package/src/setupTests.ts

@@ -1,124 +0,0 @@
-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

@@ -1,39 +0,0 @@
-# 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

@@ -1,143 +0,0 @@
-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>
-  );
-};

package/src/stories/index.ts

@@ -1,29 +0,0 @@
-// Stories index file
-// Export all story-related utilities and decorators
-
-
-
-// Theme stories
-export * from './themes/theme-showcase.stories';
-export * from './themes/theme-documentation.stories';
-
-// Core UI Component Stories
-export * from './components/ui/button.stories';
-export * from './components/ui/card.stories';
-export * from './components/ui/input.stories';
-export * from './components/ui/mobile-input.stories';
-export * from './components/ui/checkbox.stories';
-export * from './components/ui/badge.stories';
-export * from './components/ui/label.stories';
-
-// Theme System Component Stories
-
-export * from './components/ui/theme-preview.stories';
-export * from './components/ui/color-preview.stories';
-export * from './components/ui/font-preview.stories';
-
-// Theme utilities
-
-
-// This file will be expanded as we add more stories
-// and utilities for the design system

package/src/stories/storybook-theme-imports.css

@@ -1,51 +0,0 @@
-/* Storybook Theme CSS Imports - Stan Design Only */
-/* This file ensures Stan Design theme styles are available in Storybook */
-
-/* Import Stan Design theme styles directly (bypassing theme index to avoid Harvey theme) */
-@import '../styles/themes/stan-design.css';
-
-/* Import additional theme-related styles (excluding theme.css to avoid Harvey import) */
-@import '../styles/base/fonts.css';
-
-/* Ensure Stan Design theme variables are available in Storybook iframe */
-:root {
-  /* Stan Design theme variables for Storybook */
-  --cs-theme-active: 'stan-design';
-  --cs-theme-available: 'stan-design';
-}
-
-/* Apply Stan Design theme globally to all Storybook content */
-body {
-  background-color: var(--cs-colors-surface-background, #f8fafc);
-  color: var(--cs-colors-text-primary, #0f172a);
-}
-
-/* Ensure all stories inherit the Stan Design theme */
-#storybook-panel-root,
-#storybook-preview-wrapper,
-#storybook-preview-iframe {
-  background-color: var(--cs-colors-surface-background, #f8fafc) !important;
-}
-
-/* Dark mode overrides for Storybook */
-.dark body {
-  background-color: var(--cs-colors-surface-background, #0f172a) !important;
-  color: var(--cs-colors-text-primary, #f8fafc) !important;
-}
-
-.dark #storybook-panel-root,
-.dark #storybook-preview-wrapper,
-.dark #storybook-preview-iframe {
-  background-color: var(--cs-colors-surface-background, #0f172a) !important;
-}
-
-/* Stan Design theme overrides for Storybook */
-[data-theme="stan-design"] {
-  /* Stan Design theme specific styles */
-}
-
-/* Storybook-specific theme indicator */
-[data-storybook-theme="stan-design"] {
-  /* Visual indicator that Stan Design theme is active in Storybook */
-  position: relative;
-}

package/src/test-utils/index.ts

@@ -1,7 +0,0 @@
-// Test utilities for theme-aware testing
-export * from './theme-testing';
-
-// Re-export common testing utilities
-export { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
-export { userEvent } from '@testing-library/user-event';
-export type { RenderResult, RenderOptions } from '@testing-library/react';

package/src/test-utils/theme-testing.tsx

@@ -1,219 +0,0 @@
-import React from 'react';
-import { render, RenderOptions, RenderResult } from '@testing-library/react';
-import { ThemeProvider } from '../themes/ThemeProvider';
-import { defaultThemes } from '../themes/base-themes';
-import type { MultiThemeConfig } from '../themes/types';
-
-// Mock window.matchMedia for Jest environment
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});
-
-// Test utilities for theme-aware component testing
-
-export interface ThemeTestingOptions extends Omit<RenderOptions, 'wrapper'> {
-  theme?: string;
-  themes?: Record<string, MultiThemeConfig>;
-  persistTheme?: boolean;
-}
-
-/**
- * Renders a component wrapped with ThemeProvider for testing
- */
-export const renderWithTheme = (
-  component: React.ReactElement,
-  options: ThemeTestingOptions = {}
-): RenderResult => {
-  const {
-    theme = 'stan-design',
-    themes = defaultThemes,
-    persistTheme = false,
-    ...renderOptions
-  } = options;
-
-  const ThemeWrapper = ({ children }: { children: React.ReactNode }) => (
-    <ThemeProvider
-      defaultTheme={theme}
-      themes={themes}
-      persistTheme={persistTheme}
-    >
-      {children}
-    </ThemeProvider>
-  );
-
-  return render(component, {
-    wrapper: ThemeWrapper,
-    ...renderOptions,
-  });
-};
-
-/**
- * Renders a component in all available themes for comprehensive testing
- */
-export const renderWithAllThemes = (
-  component: React.ReactElement,
-  options: Omit<ThemeTestingOptions, 'theme'> = {}
-): Record<string, RenderResult> => {
-  const { themes = defaultThemes, ...renderOptions } = options;
-  const results: Record<string, RenderResult> = {};
-
-  Object.keys(themes).forEach(themeName => {
-    // Create a unique container for each theme to avoid conflicts
-    const container = document.createElement('div');
-    container.id = `theme-test-${themeName}`;
-    document.body.appendChild(container);
-    
-    results[themeName] = render(component, {
-      container,
-      wrapper: ({ children }) => (
-        <ThemeProvider
-          defaultTheme={themeName}
-          themes={themes}
-          persistTheme={false}
-        >
-          {children}
-        </ThemeProvider>
-      ),
-      ...renderOptions,
-    });
-  });
-
-  return results;
-};
-
-/**
- * Cleanup function to remove theme test containers
- */
-export const cleanupThemeTests = (): void => {
-  const containers = document.querySelectorAll('[id^="theme-test-"]');
-  containers.forEach(container => {
-    container.remove();
-  });
-};
-
-/**
- * Test helper to switch themes during testing
- */
-export const createThemeSwitcher = (initialTheme: string = 'stan-design') => {
-  let currentTheme = initialTheme;
-  
-  return {
-    getCurrentTheme: () => currentTheme,
-    switchTo: (newTheme: string) => {
-      currentTheme = newTheme;
-      return currentTheme;
-    },
-    renderWithCurrentTheme: (component: React.ReactElement, options: Omit<ThemeTestingOptions, 'theme'> = {}) => {
-      return renderWithTheme(component, { theme: currentTheme, ...options });
-    }
-  };
-};
-
-/**
- * Helper to test theme-specific styles and properties
- */
-export const getThemeStyles = (themeName: string, themes = defaultThemes) => {
-  const theme = themes[themeName];
-  if (!theme) {
-    throw new Error(`Theme '${themeName}' not found in provided themes`);
-  }
-  return theme;
-};
-
-/**
- * Helper to test CSS custom properties applied by themes
- */
-export const getThemeCSSVariables = (element: Element): Record<string, string> => {
-  const computedStyle = window.getComputedStyle(element);
-  const cssVariables: Record<string, string> = {};
-  
-  // Get all CSS custom properties (variables starting with --)
-  for (let i = 0; i < computedStyle.length; i++) {
-    const property = computedStyle[i];
-    if (property.startsWith('--')) {
-      cssVariables[property] = computedStyle.getPropertyValue(property).trim();
-    }
-  }
-  
-  return cssVariables;
-};
-
-/**
- * Helper to wait for theme transitions to complete
- */
-export const waitForThemeTransition = async (duration: number = 300): Promise<void> => {
-  return new Promise(resolve => {
-    setTimeout(resolve, duration);
-  });
-};
-
-/**
- * Mock localStorage for theme persistence testing
- */
-export const createThemeStorageMock = () => {
-  const storage: Record<string, string> = {};
-  
-  return {
-    getItem: jest.fn((key: string) => storage[key] || null),
-    setItem: jest.fn((key: string, value: string) => {
-      storage[key] = value;
-    }),
-    removeItem: jest.fn((key: string) => {
-      delete storage[key];
-    }),
-    clear: jest.fn(() => {
-      Object.keys(storage).forEach(key => delete storage[key]);
-    }),
-    get storage() {
-      return { ...storage };
-    }
-  };
-};
-
-/**
- * Mock matchMedia for responsive and system theme testing
- */
-export const createMatchMediaMock = (matches: boolean = false) => {
-  return jest.fn().mockImplementation((query: string) => ({
-    matches,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(),
-    removeListener: jest.fn(),
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  }));
-};
-
-/**
- * Test themes for consistent testing across all theme tests
- */
-export const getTestThemes = () => Object.keys(defaultThemes);
-
-/**
- * Helper to test theme contrast and accessibility
- */
-export const getThemeContrastInfo = (themeName: string, themes = defaultThemes) => {
-  const theme = themes[themeName];
-  if (!theme) {
-    throw new Error(`Theme '${themeName}' not found`);
-  }
-
-  return {
-    primaryColor: theme.colors.primary[500],
-    backgroundColor: theme.colors.text.primary,
-    textColor: theme.colors.text.primary,
-    borderColor: theme.colors.surface.border,
-  };
-};