@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

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

@@ -1,386 +1,138 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { 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';
-import type { CompleteThemeConfig } from '../../themes/types';
-
-export interface ThemeCustomizerProps {
-  initialTheme?: string;
-  onThemeChange?: (theme: CompleteThemeConfig) => void;
-  showPreview?: boolean;
-  allowCustomization?: boolean;
-  className?: string;
-}
-
-export interface CustomizationState {
-  colors: {
-    primary: string;
-    secondary: string;
-  };
-  fonts: {
-    primary: string;
-    secondary: string;
-  };
-  spacing: {
-    scale: number;
-  };
-  shadows: {
-    intensity: number;
-  };
-}
-
-export const ThemeCustomizer: React.FC<ThemeCustomizerProps> = ({
-  initialTheme = 'stan-design',
-  onThemeChange,
-  showPreview = true,
-  allowCustomization = true,
-  className = ''
-}) => {
-  const { getTheme } = useTheme();
-  const [customizationState, setCustomizationState] = useState<CustomizationState>({
-    colors: {
-      primary: '#3b82f6',
-      secondary: '#10b981'
-    },
-    fonts: {
-      primary: 'Inter',
-      secondary: 'Roboto'
-    },
-    spacing: {
-      scale: 1.25
-    },
-    shadows: {
-      intensity: 0.1
-    }
-  });
-
-  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: keyof CustomizationState, subKey: string, value: any) => {
-    setCustomizationState(prev => ({
-      ...prev,
-      [key]: {
-        ...prev[key],
-        [subKey]: value
-      }
-    }));
-  }, []);
-
-  const generateCustomTheme = useCallback(() => {
-    if (!customTheme) return;
-
-    // Create a deep copy of the current theme
-    const newTheme: CompleteThemeConfig = 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: string) => {
-      return {
-        50: `${baseColor}0a`,
-        100: `${baseColor}1a`,
-        200: `${baseColor}33`,
-        300: `${baseColor}4d`,
-        400: `${baseColor}66`,
-        500: baseColor,
-        600: `${baseColor}99`,
-        700: `${baseColor}b3`,
-        800: `${baseColor}cc`,
-        900: `${baseColor}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: 'application/json' });
-    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({
+export const ThemeCustomizer = ({ initialTheme = 'stan-design', onThemeChange, showPreview = true, allowCustomization = true, className = '' }) => {
+    const { getTheme } = useTheme();
+    const [customizationState, setCustomizationState] = useState({
         colors: {
-          primary: '#3b82f6',
-          secondary: '#10b981'
+            primary: '#3b82f6',
+            secondary: '#10b981'
         },
         fonts: {
-          primary: 'Inter',
-          secondary: 'Roboto'
+            primary: 'Inter',
+            secondary: 'Roboto'
         },
         spacing: {
-          scale: 1.25
+            scale: 1.25
         },
         shadows: {
-          intensity: 0.1
+            intensity: 0.1
+        }
+    });
+    const [activeTab, setActiveTab] = useState('colors');
+    const [customTheme, setCustomTheme] = useState(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]: {
+                ...prev[key],
+                [subKey]: value
+            }
+        }));
+    }, []);
+    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: `${baseColor}0a`,
+                100: `${baseColor}1a`,
+                200: `${baseColor}33`,
+                300: `${baseColor}4d`,
+                400: `${baseColor}66`,
+                500: baseColor,
+                600: `${baseColor}99`,
+                700: `${baseColor}b3`,
+                800: `${baseColor}cc`,
+                900: `${baseColor}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: 'application/json' });
+        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: {
+                    primary: '#3b82f6',
+                    secondary: '#10b981'
+                },
+                fonts: {
+                    primary: 'Inter',
+                    secondary: 'Roboto'
+                },
+                spacing: {
+                    scale: 1.25
+                },
+                shadows: {
+                    intensity: 0.1
+                }
+            });
         }
-      });
+    }, [initialTheme, getTheme]);
+    if (!customTheme) {
+        return (_jsx("div", { className: `p-4 text-center text-gray-500 ${className}`, children: "Loading theme..." }));
     }
-  }, [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:text-gray-400">
-            Customize and preview themes in real-time
-          </p>
-        </CardHeader>
-        <CardContent>
-          {/* Tab Navigation */}
-          <div className="flex space-x-1 mb-6 border-b">
-            {allowCustomization && (
-              <>
-                <Button
-                  variant={activeTab === 'colors' ? 'default' : 'ghost'}
-                  size="sm"
-                  onClick={() => setActiveTab('colors')}
-                >
-                  Colors
-                </Button>
-                <Button
-                  variant={activeTab === 'fonts' ? 'default' : 'ghost'}
-                  size="sm"
-                  onClick={() => setActiveTab('fonts')}
-                >
-                  Fonts
-                </Button>
-                <Button
-                  variant={activeTab === 'spacing' ? 'default' : 'ghost'}
-                  size="sm"
-                  onClick={() => setActiveTab('spacing')}
-                >
-                  Spacing
-                </Button>
-                <Button
-                  variant={activeTab === 'shadows' ? 'default' : 'ghost'}
-                  size="sm"
-                  onClick={() => setActiveTab('shadows')}
-                >
-                  Shadows
-                </Button>
-              </>
-            )}
-            {showPreview && (
-              <Button
-                variant={activeTab === 'preview' ? 'default' : 'ghost'}
-                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:grid-cols-3 gap-4">
-                  <div>
-                    <label className="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:grid-cols-2 gap-4">
-                  <div>
-                    <label className="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:text-gray-400">
-                      {customizationState.shadows.intensity}
-                    </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>
-  );
+    return (_jsx("div", { className: `theme-customizer ${className}`, children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "flex items-center gap-2", children: "\uD83C\uDFA8 Theme Customizer" }), _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Customize and preview themes in real-time" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "flex space-x-1 mb-6 border-b", children: [allowCustomization && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: activeTab === 'colors' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('colors'), children: "Colors" }), _jsx(Button, { variant: activeTab === 'fonts' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('fonts'), children: "Fonts" }), _jsx(Button, { variant: activeTab === 'spacing' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('spacing'), children: "Spacing" }), _jsx(Button, { variant: activeTab === 'shadows' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('shadows'), children: "Shadows" })] })), showPreview && (_jsx(Button, { variant: activeTab === 'preview' ? 'default' : 'ghost', size: "sm", onClick: () => setActiveTab('preview'), children: "Preview" }))] }), _jsxs("div", { className: "min-h-[400px]", children: [activeTab === 'colors' && allowCustomization && (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Color Customization" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Primary Color" }), _jsx(Input, { type: "color", value: customizationState.colors.primary, onChange: (e) => handleCustomizationChange('colors', 'primary', e.target.value), className: "w-full h-12" }), _jsx(Input, { type: "text", value: customizationState.colors.primary, onChange: (e) => handleCustomizationChange('colors', 'primary', e.target.value), placeholder: "#3b82f6", className: "mt-2" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Secondary Color" }), _jsx(Input, { type: "color", value: customizationState.colors.secondary, onChange: (e) => handleCustomizationChange('colors', 'secondary', e.target.value), className: "w-full h-12" }), _jsx(Input, { type: "text", value: customizationState.colors.secondary, onChange: (e) => handleCustomizationChange('colors', 'secondary', e.target.value), placeholder: "#10b981", className: "mt-2" })] })] })] })), activeTab === 'fonts' && allowCustomization && (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Font Customization" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Primary Font" }), _jsx(Input, { value: customizationState.fonts.primary, onChange: (e) => handleCustomizationChange('fonts', 'primary', e.target.value), placeholder: "Inter" })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Secondary Font" }), _jsx(Input, { value: customizationState.fonts.secondary, onChange: (e) => handleCustomizationChange('fonts', 'secondary', e.target.value), placeholder: "Roboto" })] })] })] })), activeTab === 'spacing' && allowCustomization && (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Spacing Customization" }), _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Scale Factor" }), _jsx(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" })] }) })] })), activeTab === 'shadows' && allowCustomization && (_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Shadow Customization" }), _jsx("div", { className: "grid grid-cols-1 gap-4", children: _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Shadow Intensity" }), _jsx(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" }), _jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: customizationState.shadows.intensity })] }) })] })), activeTab === 'preview' && showPreview && (_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Theme Preview" }), _jsx(ThemePreview, { themeName: customTheme.meta.name })] }))] }), allowCustomization && (_jsxs("div", { className: "flex justify-between items-center pt-6 border-t", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "outline", onClick: resetTheme, children: "Reset" }), _jsx(Button, { onClick: generateCustomTheme, children: "Apply Changes" })] }), _jsx("div", { className: "flex gap-2", children: _jsx(Button, { variant: "secondary", onClick: exportTheme, children: "Export Theme" }) })] }))] })] }) }));
 };