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

package/src/components/ui/theme-preview.tsx

@@ -0,0 +1,310 @@
+import React from 'react';
+import { useTheme } from '../../themes';
+import { Card, CardContent, CardHeader, CardTitle } from './card';
+import { Badge } from './badge';
+
+export interface ThemePreviewProps {
+  themeName?: string;
+  showColors?: boolean;
+  showFonts?: boolean;
+  showNavigation?: boolean;
+  showSpacing?: boolean;
+  className?: string;
+}
+
+export const ThemePreview: React.FC<ThemePreviewProps> = ({
+  themeName,
+  showColors = true,
+  showFonts = true,
+  showNavigation = true,
+  showSpacing = true,
+  className = ''
+}) => {
+  const { getTheme, currentTheme } = useTheme();
+  const targetTheme = themeName || currentTheme;
+  const themeConfig = getTheme(targetTheme);
+
+  if (!themeConfig) {
+    return (
+      <div className={`p-4 text-center text-gray-500 ${className}`}>
+        Theme "{targetTheme}" not found
+      </div>
+    );
+  }
+
+  const renderColorPreview = () => {
+    if (!showColors) return null;
+
+    const { colors } = themeConfig;
+    
+    return (
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold">Colors</h4>
+        
+        {/* Primary Colors */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Primary Colors
+          </h5>
+          <div className="grid grid-cols-5 gap-2">
+            {Object.entries(colors.primary).map(([shade, color]) => (
+              <div key={shade} className="text-center">
+                <div
+                  className="w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 mb-1"
+                  style={{ backgroundColor: color }}
+                />
+                <span className="text-xs text-gray-600 dark:text-gray-400">{shade}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Semantic Colors */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Semantic Colors
+          </h5>
+          <div className="grid grid-cols-2 gap-2">
+            {Object.entries(colors.semantic).map(([name, color]) => (
+              <div key={name} className="flex items-center gap-2">
+                <div
+                  className="w-6 h-6 rounded border border-gray-200 dark:border-gray-700"
+                  style={{ backgroundColor: color }}
+                />
+                <span className="text-sm text-gray-600 dark:text-gray-400 capitalize">
+                  {name.replace(/([A-Z])/g, ' $1').trim()}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Neutral Colors */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Neutral Colors
+          </h5>
+          <div className="grid grid-cols-5 gap-2">
+            {Object.entries(colors.neutral).map(([shade, color]) => (
+              <div key={shade} className="text-center">
+                <div
+                  className="w-12 h-12 rounded-lg border border-gray-200 dark:border-gray-700 mb-1"
+                  style={{ backgroundColor: color }}
+                />
+                <span className="text-xs text-gray-600 dark:text-gray-400">{shade}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderFontPreview = () => {
+    if (!showFonts) return null;
+
+    const { fonts } = themeConfig;
+    
+    return (
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold">Typography</h4>
+        
+        {/* Primary Font */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Primary Font: {fonts.primary.family}
+          </h5>
+          <div className="space-y-2">
+            {Object.entries(fonts.primary.sizes).map(([size, value]) => (
+              <div key={size} className="flex items-center gap-4">
+                <span className="text-xs text-gray-500 w-12">{size}:</span>
+                <span 
+                  className="font-primary"
+                  style={{ 
+                    fontSize: value,
+                    fontWeight: fonts.primary.weights[0] || 400
+                  }}
+                >
+                  The quick brown fox jumps over the lazy dog
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Font Weights */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Font Weights
+          </h5>
+          <div className="space-y-2">
+            {fonts.primary.weights.map((weight) => (
+              <div key={weight} className="flex items-center gap-4">
+                <span className="text-xs text-gray-500 w-12">{weight}:</span>
+                <span 
+                  className="font-primary"
+                  style={{ 
+                    fontSize: '1rem',
+                    fontWeight: weight
+                  }}
+                >
+                  The quick brown fox jumps over the lazy dog
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderNavigationPreview = () => {
+    if (!showNavigation) return null;
+
+    const { navigation } = themeConfig;
+    
+    return (
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold">Navigation</h4>
+        
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Configuration
+            </h5>
+            <div className="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark:text-gray-400">Layout:</span>
+                <Badge variant="outline">{navigation.layout}</Badge>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark:text-gray-400">Style:</span>
+                <Badge variant="outline">{navigation.style}</Badge>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark:text-gray-400">Behavior:</span>
+                <Badge variant="outline">{navigation.behavior}</Badge>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark:text-gray-400">Responsive:</span>
+                <Badge variant="outline">{navigation.responsive}</Badge>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Animations
+            </h5>
+            <div className="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark:text-gray-400">Duration:</span>
+                <span className="text-gray-900 dark:text-gray-100">
+                  {navigation.animations.duration.normal}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark:text-gray-400">Easing:</span>
+                <span className="text-gray-900 dark:text-gray-100">
+                  {navigation.animations.easing.ease}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark:text-gray-400">Stagger:</span>
+                <span className="text-gray-900 dark:text-gray-100">
+                  {navigation.animations.stagger.enabled ? 'Enabled' : 'Disabled'}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderSpacingPreview = () => {
+    if (!showSpacing) return null;
+
+    const { spacing } = themeConfig;
+    
+    return (
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold">Spacing</h4>
+        
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Scale
+          </h5>
+          <div className="space-y-2">
+            {Object.entries(spacing.scale).map(([size, value]) => (
+              <div key={size} className="flex items-center gap-4">
+                <span className="text-xs text-gray-500 w-12">{size}:</span>
+                <div 
+                  className="bg-blue-500 rounded"
+                  style={{ 
+                    width: value,
+                    height: '1rem'
+                  }}
+                />
+                <span className="text-sm text-gray-600 dark:text-gray-400">{value}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            Component Spacing
+          </h5>
+          <div className="space-y-2">
+            {Object.entries(spacing.component).map(([component, spacingConfig]) => (
+              <div key={component} className="border border-gray-200 dark:border-gray-700 rounded p-2">
+                <h6 className="text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 capitalize">
+                  {component}
+                </h6>
+                <div className="grid grid-cols-3 gap-2 text-xs">
+                  {Object.entries(spacingConfig).map(([prop, value]) => (
+                    <div key={prop} className="text-center">
+                      <div className="text-gray-500 capitalize">{prop}</div>
+                      <div className="text-gray-900 dark:text-gray-100">{String(value)}</div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={`theme-preview ${className}`}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span className="text-2xl">
+              {targetTheme === 'stan-design' ? '⚡' : 
+               targetTheme === 'enterprise' ? '🏢' : 
+               targetTheme === 'harvey' ? '🎨' : '🎯'}
+            </span>
+            {themeConfig.meta.name} Theme Preview
+          </CardTitle>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            {themeConfig.meta.description}
+          </p>
+          <div className="flex gap-2">
+            <Badge variant="outline">{themeConfig.meta.category}</Badge>
+            <Badge variant="secondary">v{themeConfig.meta.version}</Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {renderColorPreview()}
+          {renderFontPreview()}
+          {renderNavigationPreview()}
+          {renderSpacingPreview()}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/src/components/ui/theme-switcher.tsx

@@ -0,0 +1,264 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from './button';
+import { useTheme } from '../../themes';
+import type { MultiThemeConfig } from '../../themes';
+
+export interface ThemeSwitcherProps {
+  themes?: Record<string, MultiThemeConfig>;
+  showPreview?: boolean;
+  showSystemTheme?: boolean;
+  className?: string;
+  variant?: 'default' | 'compact' | 'detailed';
+}
+
+export const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({
+  showPreview = true,
+  showSystemTheme = true,
+  className = '',
+  variant = 'default'
+}) => {
+  const { currentTheme, availableThemes, setTheme, getTheme } = useTheme();
+  const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>('light');
+  const [showThemePreview, setShowThemePreview] = useState(false);
+
+  // Detect system theme preference
+  useEffect(() => {
+    if (!showSystemTheme) return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const updateSystemTheme = (e: MediaQueryListEvent | MediaQueryList) => {
+      setSystemTheme(e.matches ? 'dark' : 'light');
+    };
+
+    updateSystemTheme(mediaQuery);
+    mediaQuery.addEventListener('change', updateSystemTheme);
+
+    return () => mediaQuery.removeEventListener('change', updateSystemTheme);
+  }, [showSystemTheme]);
+
+  const getThemeDisplayName = (theme: string) => {
+    const themeNames: Record<string, string> = {
+      'stan-design': 'Stan Design',
+      'enterprise': 'Enterprise',
+      'harvey': 'Harvey Creative'
+    };
+    return themeNames[theme] || theme;
+  };
+
+  const getThemeEmoji = (theme: string) => {
+    const themeEmojis: Record<string, string> = {
+      'stan-design': '⚡',
+      'enterprise': '🏢',
+      'harvey': '🎨'
+    };
+    return themeEmojis[theme] || '🎯';
+  };
+
+  const getThemeDescription = (theme: string) => {
+    const themeConfig = getTheme(theme);
+    return themeConfig?.meta?.description || 'Custom theme';
+  };
+
+  const getThemeCategory = (theme: string) => {
+    const themeConfig = getTheme(theme);
+    return themeConfig?.meta?.category || 'custom';
+  };
+
+  const handleThemeSwitch = (themeName: string) => {
+    setTheme(themeName);
+    // Close preview if open
+    if (showThemePreview) {
+      setShowThemePreview(false);
+    }
+  };
+
+  const handleSystemThemeToggle = () => {
+    // For now, we'll just toggle between light/dark variants
+    // In a real implementation, this would switch to a system-aware theme
+    const currentConfig = getTheme(currentTheme);
+    if (currentConfig) {
+      // This is a placeholder - in practice, you'd have system-aware themes
+      console.log('System theme toggle - would switch to system-aware variant');
+    }
+  };
+
+  const renderCompactSwitcher = () => (
+    <div className="flex items-center gap-2">
+      <span className="text-sm text-gray-600 dark:text-gray-400">Theme:</span>
+      <div className="flex gap-1">
+        {availableThemes.map((theme) => (
+          <Button
+            key={theme}
+            variant={currentTheme === theme ? "default" : "outline"}
+            size="sm"
+            onClick={() => handleThemeSwitch(theme)}
+            className="text-xs"
+          >
+            {getThemeEmoji(theme)} {getThemeDisplayName(theme)}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+
+  const renderDetailedSwitcher = () => (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">Theme Selection</h3>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setShowThemePreview(!showThemePreview)}
+        >
+          {showThemePreview ? 'Hide' : 'Show'} Preview
+        </Button>
+      </div>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {availableThemes.map((theme) => {
+          const isActive = currentTheme === theme;
+          
+          return (
+            <div
+              key={theme}
+              className={`p-4 rounded-lg border-2 transition-all duration-200 cursor-pointer ${
+                isActive
+                  ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                  : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+              }`}
+              onClick={() => handleThemeSwitch(theme)}
+            >
+              <div className="flex items-center gap-3 mb-3">
+                <span className="text-2xl">{getThemeEmoji(theme)}</span>
+                <div>
+                  <h4 className="font-semibold text-gray-900 dark:text-gray-100">
+                    {getThemeDisplayName(theme)}
+                  </h4>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    {getThemeCategory(theme)}
+                  </p>
+                </div>
+              </div>
+              
+              <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
+                {getThemeDescription(theme)}
+              </p>
+              
+              {isActive && (
+                <div className="flex items-center gap-2 text-blue-600 dark:text-blue-400">
+                  <div className="w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full"></div>
+                  <span className="text-sm font-medium">Active</span>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {showSystemTheme && (
+        <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+          <div className="flex items-center justify-between">
+            <div>
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">
+                System Theme Detection
+              </h4>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                Current system preference: {systemTheme}
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleSystemThemeToggle}
+            >
+              Follow System
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  const renderDefaultSwitcher = () => (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Theme:</span>
+        <div className="flex gap-2">
+          {availableThemes.map((theme) => (
+            <Button
+              key={theme}
+              variant={currentTheme === theme ? "default" : "outline"}
+              size="sm"
+              onClick={() => handleThemeSwitch(theme)}
+              className="text-sm"
+            >
+              {getThemeEmoji(theme)} {getThemeDisplayName(theme)}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {showPreview && (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowThemePreview(!showThemePreview)}
+            className="text-xs"
+          >
+            {showThemePreview ? 'Hide' : 'Show'} Theme Details
+          </Button>
+        </div>
+      )}
+
+      {showThemePreview && (
+        <div className="mt-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {availableThemes.map((theme) => {
+              const isActive = currentTheme === theme;
+              
+              return (
+                <div
+                  key={theme}
+                  className={`p-2 rounded border text-xs ${
+                    isActive
+                      ? 'border-blue-300 bg-blue-50 dark:bg-blue-900/20'
+                      : 'border-gray-200 dark:border-gray-700'
+                  }`}
+                >
+                  <div className="flex items-center gap-2 mb-1">
+                    <span>{getThemeEmoji(theme)}</span>
+                    <span className="font-medium">{getThemeDisplayName(theme)}</span>
+                    {isActive && (
+                      <span className="text-blue-600 dark:text-blue-400 text-xs">●</span>
+                    )}
+                  </div>
+                  <p className="text-gray-600 dark:text-gray-400">
+                    {getThemeDescription(theme)}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  const renderContent = () => {
+    switch (variant) {
+      case 'compact':
+        return renderCompactSwitcher();
+      case 'detailed':
+        return renderDetailedSwitcher();
+      default:
+        return renderDefaultSwitcher();
+    }
+  };
+
+  return (
+    <div className={`theme-switcher ${className}`}>
+      {renderContent()}
+    </div>
+  );
+};

package/src/components/ui/theme-toggle.tsx

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from './button';
+import { Moon, Sun } from 'lucide-react';
+
+export const ThemeToggle: React.FC = () => {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    // Check initial theme
+    const isDarkMode = document.documentElement.classList.contains('dark');
+    setIsDark(isDarkMode);
+  }, []);
+
+  const toggleTheme = () => {
+    const newDarkMode = !isDark;
+    setIsDark(newDarkMode);
+    
+    if (newDarkMode) {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    }
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={toggleTheme}
+      className="h-8 w-8 px-0"
+      aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`}
+    >
+      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+    </Button>
+  );
+};