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

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

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