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

package/src/styles/utilities/touch-optimization.css

@@ -0,0 +1,165 @@
+/* Touch Optimization & Gesture Support - Story 5 */
+
+/* Touch target optimization */
+.touch-target {
+  min-height: 44px;
+  min-width: 44px;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+/* Touch feedback animations */
+.touch-feedback {
+  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
+  will-change: transform;
+}
+
+.touch-feedback:active {
+  transform: scale(0.95);
+  opacity: 0.8;
+}
+
+.touch-feedback.touch-pressed {
+  transform: scale(0.95);
+  opacity: 0.8;
+}
+
+/* Touch ripple effect */
+.touch-ripple {
+  position: relative;
+  overflow: hidden;
+}
+
+.touch-ripple::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  transform: translate(-50%, -50%);
+  transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out;
+  opacity: 0;
+}
+
+.touch-ripple.touch-active::after {
+  width: 100px;
+  height: 100px;
+  opacity: 1;
+}
+
+/* Touch-friendly button variants */
+.touch-button {
+  @apply touch-target touch-feedback touch-ripple;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 500;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.touch-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+/* Touch-friendly input fields */
+.touch-input {
+  @apply touch-target;
+  padding: 12px 16px;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
+}
+
+.touch-input:focus {
+  outline: none;
+  border-color: var(--cs-primary);
+  box-shadow: 0 0 0 3px rgba(var(--cs-primary-rgb), 0.1);
+}
+
+/* Touch-friendly card interactions */
+.touch-card {
+  @apply touch-feedback;
+  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
+}
+
+.touch-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+}
+
+.touch-card:active {
+  transform: translateY(0) scale(0.98);
+}
+
+/* Touch gesture indicators */
+.touch-gesture-hint {
+  position: relative;
+}
+
+.touch-gesture-hint::before {
+  content: '';
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 16px;
+  height: 16px;
+  background: var(--cs-accent);
+  border-radius: 50%;
+  opacity: 0.8;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.4;
+  }
+}
+
+/* Touch-friendly spacing utilities */
+.touch-spacing-xs { padding: 8px; }
+.touch-spacing-sm { padding: 12px; }
+.touch-spacing-md { padding: 16px; }
+.touch-spacing-lg { padding: 20px; }
+.touch-spacing-xl { padding: 24px; }
+
+/* Touch-friendly margins */
+.touch-margin-xs { margin: 8px; }
+.touch-margin-sm { margin: 12px; }
+.touch-margin-md { margin: 16px; }
+.touch-margin-lg { margin: 20px; }
+.touch-margin-xl { margin: 24px; }
+
+/* Touch-friendly grid layouts */
+.touch-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.touch-grid-compact {
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+.touch-grid-spacious {
+  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}

package/src/test-utils/index.ts

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

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