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

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

@@ -4,30 +4,34 @@ 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?;
-  onThemeChange?) => void;
-  showPreview?;
-  allowCustomization?;
-  className?;
+  initialTheme?: string;
+  onThemeChange?: (theme: CompleteThemeConfig) => void;
+  showPreview?: boolean;
+  allowCustomization?: boolean;
+  className?: string;
 }
 
 export interface CustomizationState {
-  colors;
-    secondary;
+  colors: {
+    primary: string;
+    secondary: string;
   };
-  fonts;
-    secondary;
+  fonts: {
+    primary: string;
+    secondary: string;
   };
-  spacing;
+  spacing: {
+    scale: number;
   };
-  shadows;
+  shadows: {
+    intensity: number;
   };
 }
 
-export const ThemeCustomizer= ({
+export const ThemeCustomizer: React.FC<ThemeCustomizerProps> = ({
   initialTheme = 'stan-design',
   onThemeChange,
   showPreview = true,
@@ -36,12 +40,20 @@ export const ThemeCustomizer= ({
 }) => {
   const { getTheme } = useTheme();
   const [customizationState, setCustomizationState] = useState<CustomizationState>({
-    colors,
-      secondary},
-    fonts,
-      secondary},
-    spacing},
-    shadows}
+    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');
@@ -55,11 +67,13 @@ export const ThemeCustomizer= ({
     }
   }, [initialTheme]); // Removed getTheme from dependencies as it's stable
 
-  const handleCustomizationChange = useCallback((key, subKey, value) => {
+  const handleCustomizationChange = useCallback((key: keyof CustomizationState, subKey: string, value: any) => {
     setCustomizationState(prev => ({
       ...prev,
-      [key]],
-        [subKey]}
+      [key]: {
+        ...prev[key],
+        [subKey]: value
+      }
     }));
   }, []);
 
@@ -67,7 +81,7 @@ export const ThemeCustomizer= ({
     if (!customTheme) return;
 
     // Create a deep copy of the current theme
-    const newTheme= JSON.parse(JSON.stringify(customTheme));
+    const newTheme: CompleteThemeConfig = JSON.parse(JSON.stringify(customTheme));
     
     // Apply customizations
     // Generate color scales based on the selected primary color
@@ -75,18 +89,18 @@ export const ThemeCustomizer= ({
     const secondaryColor = customizationState.colors.secondary;
     
     // Simple color scale generation (in a real app, you'd use a color library)
-    const generateColorScale = (baseColor) => {
+    const generateColorScale = (baseColor: string) => {
       return {
-        50}0a`,
-        100}1a`,
-        200}33`,
-        300}4d`,
-        400}66`,
-        500,
-        600}99`,
-        700}b3`,
-        800}cc`,
-        900}e6`
+        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`
       };
     };
 
@@ -110,14 +124,14 @@ export const ThemeCustomizer= ({
     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);
+      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);
+      console.log('Shadow intensity updated to:', customizationState.shadows.intensity);
     }
 
     setCustomTheme(newTheme);
@@ -131,7 +145,7 @@ export const ThemeCustomizer= ({
     if (!customTheme) return;
     
     const themeData = JSON.stringify(customTheme, null, 2);
-    const blob = new Blob([themeData], { type});
+    const blob = new Blob([themeData], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
@@ -147,12 +161,20 @@ export const ThemeCustomizer= ({
     if (originalTheme) {
       setCustomTheme(originalTheme);
       setCustomizationState({
-        colors,
-          secondary},
-        fonts,
-          secondary},
-        spacing},
-        shadows}
+        colors: {
+          primary: '#3b82f6',
+          secondary: '#10b981'
+        },
+        fonts: {
+          primary: 'Inter',
+          secondary: 'Roboto'
+        },
+        spacing: {
+          scale: 1.25
+        },
+        shadows: {
+          intensity: 0.1
+        }
       });
     }
   }, [initialTheme, getTheme]);
@@ -172,33 +194,38 @@ export const ThemeCustomizer= ({
           <CardTitle className="flex items-center gap-2">
             🎨 Theme Customizer
           </CardTitle>
-          <p className="text-sm text-gray-600 dark}
+          <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' }
+                  variant={activeTab === 'colors' ? 'default' : 'ghost'}
                   size="sm"
                   onClick={() => setActiveTab('colors')}
                 >
                   Colors
                 </Button>
                 <Button
-                  variant={activeTab === 'fonts' ? 'default' }
+                  variant={activeTab === 'fonts' ? 'default' : 'ghost'}
                   size="sm"
                   onClick={() => setActiveTab('fonts')}
                 >
                   Fonts
                 </Button>
                 <Button
-                  variant={activeTab === 'spacing' ? 'default' }
+                  variant={activeTab === 'spacing' ? 'default' : 'ghost'}
                   size="sm"
                   onClick={() => setActiveTab('spacing')}
                 >
                   Spacing
                 </Button>
                 <Button
-                  variant={activeTab === 'shadows' ? 'default' }
+                  variant={activeTab === 'shadows' ? 'default' : 'ghost'}
                   size="sm"
                   onClick={() => setActiveTab('shadows')}
                 >
@@ -208,7 +235,7 @@ export const ThemeCustomizer= ({
             )}
             {showPreview && (
               <Button
-                variant={activeTab === 'preview' ? 'default' }
+                variant={activeTab === 'preview' ? 'default' : 'ghost'}
                 size="sm"
                 onClick={() => setActiveTab('preview')}
               >
@@ -222,7 +249,9 @@ export const ThemeCustomizer= ({
             {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>
+                <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}
@@ -261,7 +290,9 @@ export const ThemeCustomizer= ({
             {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>
+                <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)}
@@ -314,7 +345,8 @@ export const ThemeCustomizer= ({
                       onChange={(e) => handleCustomizationChange('shadows', 'intensity', Number(e.target.value))}
                       className="w-full"
                     />
-                    <span className="text-sm text-gray-600 dark}
+                    <span className="text-sm text-gray-600 dark:text-gray-400">
+                      {customizationState.shadows.intensity}
                     </span>
                   </div>
                 </div>

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

@@ -4,15 +4,15 @@ import { Card, CardContent, CardHeader, CardTitle } from './card';
 import { Badge } from './badge';
 
 export interface ThemePreviewProps {
-  themeName?;
-  showColors?;
-  showFonts?;
-  showNavigation?;
-  showSpacing?;
-  className?;
+  themeName?: string;
+  showColors?: boolean;
+  showFonts?: boolean;
+  showNavigation?: boolean;
+  showSpacing?: boolean;
+  className?: string;
 }
 
-export const ThemePreview= ({
+export const ThemePreview: React.FC<ThemePreviewProps> = ({
   themeName,
   showColors = true,
   showFonts = true,
@@ -43,13 +43,17 @@ export const ThemePreview= ({
         
         {/* Primary Colors */}
         <div>
-          <h5 className="text-sm font-medium text-gray-700 dark="grid grid-cols-5 gap-2">
+          <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={{ backgroundColor}}
+                  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}</span>
+                <span className="text-xs text-gray-600 dark:text-gray-400">{shade}</span>
               </div>
             ))}
           </div>
@@ -57,13 +61,18 @@ export const ThemePreview= ({
 
         {/* Semantic Colors */}
         <div>
-          <h5 className="text-sm font-medium text-gray-700 dark="grid grid-cols-2 gap-2">
+          <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={{ backgroundColor}}
+                  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])/g, ' $1').trim()}
+                <span className="text-sm text-gray-600 dark:text-gray-400 capitalize">
+                  {name.replace(/([A-Z])/g, ' $1').trim()}
                 </span>
               </div>
             ))}
@@ -72,13 +81,17 @@ export const ThemePreview= ({
 
         {/* Neutral Colors */}
         <div>
-          <h5 className="text-sm font-medium text-gray-700 dark="grid grid-cols-5 gap-2">
+          <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={{ backgroundColor}}
+                  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}</span>
+                <span className="text-xs text-gray-600 dark:text-gray-400">{shade}</span>
               </div>
             ))}
           </div>
@@ -98,15 +111,18 @@ export const ThemePreview= ({
         
         {/* Primary Font */}
         <div>
-          <h5 className="text-sm font-medium text-gray-700 dark}
+          <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}="font-primary"
+                <span className="text-xs text-gray-500 w-12">{size}:</span>
+                <span 
+                  className="font-primary"
                   style={{ 
-                    fontSize,
-                    fontWeight] || 400
+                    fontSize: value,
+                    fontWeight: fonts.primary.weights[0] || 400
                   }}
                 >
                   The quick brown fox jumps over the lazy dog
@@ -118,13 +134,19 @@ export const ThemePreview= ({
 
         {/* Font Weights */}
         <div>
-          <h5 className="text-sm font-medium text-gray-700 dark="space-y-2">
+          <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}="font-primary"
+                <span className="text-xs text-gray-500 w-12">{weight}:</span>
+                <span 
+                  className="font-primary"
                   style={{ 
-                    fontSize,
-                    fontWeight}}
+                    fontSize: '1rem',
+                    fontWeight: weight
+                  }}
                 >
                   The quick brown fox jumps over the lazy dog
                 </span>
@@ -147,34 +169,50 @@ export const ThemePreview= ({
         
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <h5 className="text-sm font-medium text-gray-700 dark="space-y-2 text-sm">
+            <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="outline">{navigation.layout}</Badge>
+                <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="outline">{navigation.style}</Badge>
+                <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="outline">{navigation.behavior}</Badge>
+                <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="outline">{navigation.responsive}</Badge>
+                <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="space-y-2 text-sm">
+            <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-900 dark}
+                <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-900 dark}
+                <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-900 dark}
+                <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>
@@ -194,30 +232,41 @@ export const ThemePreview= ({
         <h4 className="text-lg font-semibold">Spacing</h4>
         
         <div>
-          <h5 className="text-sm font-medium text-gray-700 dark="space-y-2">
+          <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}="bg-blue-500 rounded"
+                <span className="text-xs text-gray-500 w-12">{size}:</span>
+                <div 
+                  className="bg-blue-500 rounded"
                   style={{ 
-                    width,
-                    height}}
+                    width: value,
+                    height: '1rem'
+                  }}
                 />
-                <span className="text-sm text-gray-600 dark}</span>
+                <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="space-y-2">
+          <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="text-xs font-medium text-gray-700 dark}
+              <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)}</div>
+                      <div className="text-gray-900 dark:text-gray-100">{String(value)}</div>
                     </div>
                   ))}
                 </div>
@@ -235,11 +284,14 @@ export const ThemePreview= ({
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <span className="text-2xl">
-              {targetTheme === 'stan-design' ? '⚡' === 'enterprise' ? '🏢' === 'harvey' ? '🎨' }
+              {targetTheme === 'stan-design' ? '⚡' : 
+               targetTheme === 'enterprise' ? '🏢' : 
+               targetTheme === 'harvey' ? '🎨' : '🎯'}
             </span>
             {themeConfig.meta.name} Theme Preview
           </CardTitle>
-          <p className="text-sm text-gray-600 dark}
+          <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>