@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

package/dist/components/ui/theme-customizer.js

@@ -0,0 +1,354 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { useTheme } from '../../themes';
+import { Card, CardContent, CardHeader, CardTitle } from './card';
+import { Button } from './button';
+import { Input } from './input';
+import { ThemePreview } from './theme-preview';
+
+
+export interface ThemeCustomizerProps {
+  initialTheme?;
+  onThemeChange?) => void;
+  showPreview?;
+  allowCustomization?;
+  className?;
+}
+
+export interface CustomizationState {
+  colors;
+    secondary;
+  };
+  fonts;
+    secondary;
+  };
+  spacing;
+  };
+  shadows;
+  };
+}
+
+export const ThemeCustomizer= ({
+  initialTheme = 'stan-design',
+  onThemeChange,
+  showPreview = true,
+  allowCustomization = true,
+  className = ''
+}) => {
+  const { getTheme } = useTheme();
+  const [customizationState, setCustomizationState] = useState<CustomizationState>({
+    colors,
+      secondary},
+    fonts,
+      secondary},
+    spacing},
+    shadows}
+  });
+
+  const [activeTab, setActiveTab] = useState<'colors' | 'fonts' | 'spacing' | 'shadows' | 'preview'>('colors');
+  const [customTheme, setCustomTheme] = useState<CompleteThemeConfig | null>(null);
+
+  // Initialize with the initial theme
+  useEffect(() => {
+    const theme = getTheme(initialTheme);
+    if (theme) {
+      setCustomTheme(theme);
+    }
+  }, [initialTheme]); // Removed getTheme from dependencies as it's stable
+
+  const handleCustomizationChange = useCallback((key, subKey, value) => {
+    setCustomizationState(prev => ({
+      ...prev,
+      [key]],
+        [subKey]}
+    }));
+  }, []);
+
+  const generateCustomTheme = useCallback(() => {
+    if (!customTheme) return;
+
+    // Create a deep copy of the current theme
+    const newTheme= JSON.parse(JSON.stringify(customTheme));
+    
+    // Apply customizations
+    // Generate color scales based on the selected primary color
+    const primaryColor = customizationState.colors.primary;
+    const secondaryColor = customizationState.colors.secondary;
+    
+    // Simple color scale generation (in a real app, you'd use a color library)
+    const generateColorScale = (baseColor) => {
+      return {
+        50}0a`,
+        100}1a`,
+        200}33`,
+        300}4d`,
+        400}66`,
+        500,
+        600}99`,
+        700}b3`,
+        800}cc`,
+        900}e6`
+      };
+    };
+
+    // Update primary colors
+    newTheme.colors.primary = generateColorScale(primaryColor);
+    
+    // Update secondary colors if they exist
+    if (newTheme.colors.secondary) {
+      newTheme.colors.secondary = generateColorScale(secondaryColor);
+    }
+
+    // Update fonts
+    if (newTheme.fonts.primary) {
+      newTheme.fonts.primary.family = customizationState.fonts.primary;
+    }
+    if (newTheme.fonts.secondary) {
+      newTheme.fonts.secondary.family = customizationState.fonts.secondary;
+    }
+
+    // Update spacing scale (we'll adjust the existing scale)
+    if (newTheme.spacing && newTheme.spacing.scale) {
+      // This is a simplified approach - in reality you'd want to recalculate all spacing values
+      // For now, we'll just note that the scale factor has changed
+      console.log('Spacing scale factor updated to, customizationState.spacing.scale);
+    }
+
+    // Update shadow intensity (we'll adjust the existing shadows)
+    if (newTheme.shadows) {
+      // This is a simplified approach - in reality you'd want to recalculate all shadow values
+      // For now, we'll just note that the intensity has changed
+      console.log('Shadow intensity updated to, customizationState.shadows.intensity);
+    }
+
+    setCustomTheme(newTheme);
+    
+    if (onThemeChange) {
+      onThemeChange(newTheme);
+    }
+  }, [customTheme, customizationState, onThemeChange]);
+
+  const exportTheme = useCallback(() => {
+    if (!customTheme) return;
+    
+    const themeData = JSON.stringify(customTheme, null, 2);
+    const blob = new Blob([themeData], { type});
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${customTheme.meta.name.toLowerCase().replace(/\s+/g, '-')}-theme.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, [customTheme]);
+
+  const resetTheme = useCallback(() => {
+    const originalTheme = getTheme(initialTheme);
+    if (originalTheme) {
+      setCustomTheme(originalTheme);
+      setCustomizationState({
+        colors,
+          secondary},
+        fonts,
+          secondary},
+        spacing},
+        shadows}
+      });
+    }
+  }, [initialTheme, getTheme]);
+
+  if (!customTheme) {
+    return (
+      <div className={`p-4 text-center text-gray-500 ${className}`}>
+        Loading theme...
+      </div>
+    );
+  }
+
+  return (
+    <div className={`theme-customizer ${className}`}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            🎨 Theme Customizer
+          </CardTitle>
+          <p className="text-sm text-gray-600 dark}
+          <div className="flex space-x-1 mb-6 border-b">
+            {allowCustomization && (
+              <>
+                <Button
+                  variant={activeTab === 'colors' ? 'default' }
+                  size="sm"
+                  onClick={() => setActiveTab('colors')}
+                >
+                  Colors
+                </Button>
+                <Button
+                  variant={activeTab === 'fonts' ? 'default' }
+                  size="sm"
+                  onClick={() => setActiveTab('fonts')}
+                >
+                  Fonts
+                </Button>
+                <Button
+                  variant={activeTab === 'spacing' ? 'default' }
+                  size="sm"
+                  onClick={() => setActiveTab('spacing')}
+                >
+                  Spacing
+                </Button>
+                <Button
+                  variant={activeTab === 'shadows' ? 'default' }
+                  size="sm"
+                  onClick={() => setActiveTab('shadows')}
+                >
+                  Shadows
+                </Button>
+              </>
+            )}
+            {showPreview && (
+              <Button
+                variant={activeTab === 'preview' ? 'default' }
+                size="sm"
+                onClick={() => setActiveTab('preview')}
+              >
+                Preview
+              </Button>
+            )}
+          </div>
+
+          {/* Tab Content */}
+          <div className="min-h-[400px]">
+            {activeTab === 'colors' && allowCustomization && (
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold">Color Customization</h3>
+                <div className="grid grid-cols-1 md="block text-sm font-medium mb-2">Primary Color</label>
+                                         <Input
+                       type="color"
+                       value={customizationState.colors.primary}
+                       onChange={(e) => handleCustomizationChange('colors', 'primary', e.target.value)}
+                       className="w-full h-12"
+                     />
+                     <Input
+                       type="text"
+                       value={customizationState.colors.primary}
+                       onChange={(e) => handleCustomizationChange('colors', 'primary', e.target.value)}
+                       placeholder="#3b82f6"
+                       className="mt-2"
+                     />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium mb-2">Secondary Color</label>
+                                         <Input
+                       type="color"
+                       value={customizationState.colors.secondary}
+                       onChange={(e) => handleCustomizationChange('colors', 'secondary', e.target.value)}
+                       className="w-full h-12"
+                     />
+                     <Input
+                       type="text"
+                       value={customizationState.colors.secondary}
+                       onChange={(e) => handleCustomizationChange('colors', 'secondary', e.target.value)}
+                       placeholder="#10b981"
+                       className="mt-2"
+                     />
+                  </div>
+                  
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'fonts' && allowCustomization && (
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold">Font Customization</h3>
+                <div className="grid grid-cols-1 md="block text-sm font-medium mb-2">Primary Font</label>
+                                         <Input
+                       value={customizationState.fonts.primary}
+                       onChange={(e) => handleCustomizationChange('fonts', 'primary', e.target.value)}
+                       placeholder="Inter"
+                     />
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium mb-2">Secondary Font</label>
+                                         <Input
+                       value={customizationState.fonts.secondary}
+                       onChange={(e) => handleCustomizationChange('fonts', 'secondary', e.target.value)}
+                       placeholder="Roboto"
+                     />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'spacing' && allowCustomization && (
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold">Spacing Customization</h3>
+                                <div className="grid grid-cols-1 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-2">Scale Factor</label>
+                    <Input
+                      type="number"
+                      value={customizationState.spacing.scale}
+                      onChange={(e) => handleCustomizationChange('spacing', 'scale', Number(e.target.value))}
+                      min="1.1"
+                      max="2.0"
+                      step="0.05"
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'shadows' && allowCustomization && (
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold">Shadow Customization</h3>
+                                <div className="grid grid-cols-1 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-2">Shadow Intensity</label>
+                    <Input
+                      type="range"
+                      min="0"
+                      max="0.5"
+                      step="0.01"
+                      value={customizationState.shadows.intensity}
+                      onChange={(e) => handleCustomizationChange('shadows', 'intensity', Number(e.target.value))}
+                      className="w-full"
+                    />
+                    <span className="text-sm text-gray-600 dark}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {activeTab === 'preview' && showPreview && (
+              <div>
+                <h3 className="text-lg font-semibold mb-4">Theme Preview</h3>
+                <ThemePreview themeName={customTheme.meta.name} />
+              </div>
+            )}
+          </div>
+
+          {/* Action Buttons */}
+          {allowCustomization && (
+            <div className="flex justify-between items-center pt-6 border-t">
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={resetTheme}>
+                  Reset
+                </Button>
+                <Button onClick={generateCustomTheme}>
+                  Apply Changes
+                </Button>
+              </div>
+              <div className="flex gap-2">
+                <Button variant="secondary" onClick={exportTheme}>
+                  Export Theme
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/dist/components/ui/theme-preview.d.ts

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