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

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

@@ -1,378 +1,27 @@
+import React from 'react';
+import type { CompleteThemeConfig } from '../../themes/types';
 export interface ThemeCustomizerProps {
-  initialTheme?: string;
-  onThemeChange?: (theme: CompleteThemeConfig) => void;
-  showPreview?: boolean;
-  allowCustomization?: boolean;
-  className?: string;
+    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'
-    },
+        primary: string;
+        secondary: string;
+    };
     fonts: {
-      primary: 'Inter',
-      secondary: 'Roboto'
-    },
+        primary: string;
+        secondary: string;
+    };
     spacing: {
-      scale: 1.25
-    },
+        scale: number;
+    };
     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`
-      };
+        intensity: number;
     };
-
-    // 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
-
-    }
-
-    // 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
-
-    }
-
-    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 (
-      <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>
-  );
-};
+}
+export declare const ThemeCustomizer: React.FC<ThemeCustomizerProps>;
+//# sourceMappingURL=theme-customizer.d.ts.map

package/dist/components/ui/theme-customizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-customizer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/theme-customizer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,MAAM,WAAW,oBAAoB;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,KAAK,EAAE;QACL,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,OAAO,EAAE;QACP,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgW1D,CAAC"}