@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/components/ui/tablet-layout.tsx

@@ -0,0 +1,192 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { useDevice } from "../../hooks/use-device"
+
+interface TabletLayoutProps {
+  children: React.ReactNode
+  className?: string
+  orientation?: 'auto' | 'portrait' | 'landscape'
+  adaptive?: boolean
+}
+
+/**
+ * Tablet-optimized layout container that adapts to orientation changes
+ * Provides optimal layouts for both portrait and landscape tablet modes
+ */
+export const TabletLayout: React.FC<TabletLayoutProps> = ({
+  children,
+  className,
+  orientation = 'auto',
+  adaptive = true
+}) => {
+  const device = useDevice()
+  
+  const getLayoutClasses = () => {
+    const classes = ['coach-stan-tablet-layout']
+    
+    // Add device-specific classes
+    if (device.isTablet) {
+      classes.push('tablet-optimized')
+      
+      // Handle orientation-specific layouts
+      const targetOrientation = orientation === 'auto' ? device.orientation : orientation
+      classes.push(`orientation-${targetOrientation}`)
+      
+      if (adaptive) {
+        classes.push('adaptive-layout')
+      }
+    }
+    
+    return classes
+  }
+
+  return (
+    <div className={cn(getLayoutClasses(), className)}>
+      {children}
+    </div>
+  )
+}
+
+interface TabletGridProps {
+  children: React.ReactNode
+  columns?: {
+    portrait: number
+    landscape: number
+  }
+  gap?: string
+  className?: string
+}
+
+/**
+ * Responsive grid component optimized for tablet orientations
+ */
+export const TabletGrid: React.FC<TabletGridProps> = ({
+  children,
+  columns = { portrait: 1, landscape: 2 },
+  gap = '1rem',
+  className
+}) => {
+  const device = useDevice()
+  
+  const gridStyle: React.CSSProperties = {
+    display: 'grid',
+    gap,
+    gridTemplateColumns: device.orientation === 'portrait' 
+      ? `repeat(${columns.portrait}, 1fr)`
+      : `repeat(${columns.landscape}, 1fr)`
+  }
+  
+  return (
+    <div 
+      className={cn('coach-stan-tablet-grid', className)}
+      style={gridStyle}
+    >
+      {children}
+    </div>
+  )
+}
+
+interface TabletSidebarProps {
+  children: React.ReactNode
+  side?: 'left' | 'right'
+  collapsible?: boolean
+  width?: string
+  className?: string
+}
+
+/**
+ * Tablet-optimized sidebar that adapts to orientation
+ * In portrait mode, sidebar can collapse or stack vertically
+ */
+export const TabletSidebar: React.FC<TabletSidebarProps> = ({
+  children,
+  side = 'left',
+  collapsible = false,
+  width = '280px',
+  className
+}) => {
+  const device = useDevice()
+  
+  const getSidebarClasses = () => {
+    const classes = ['coach-stan-tablet-sidebar']
+    
+    if (device.isTablet) {
+      classes.push('tablet-optimized')
+      
+      if (device.orientation === 'portrait') {
+        classes.push('orientation-portrait')
+      } else {
+        classes.push('orientation-landscape')
+      }
+    }
+    
+    if (side === 'right') {
+      classes.push('sidebar-right')
+    }
+    
+    return classes
+  }
+  
+  const sidebarStyle: React.CSSProperties = {
+    width: device.orientation === 'portrait' && collapsible ? '60px' : width,
+    transition: 'width 0.3s ease'
+  }
+  
+  return (
+    <div 
+      className={cn(getSidebarClasses(), className)}
+      style={sidebarStyle}
+    >
+      {children}
+    </div>
+  )
+}
+
+interface TabletStackProps {
+  children: React.ReactNode
+  direction?: 'auto' | 'horizontal' | 'vertical'
+  className?: string
+}
+
+/**
+ * Responsive stack component that adapts to tablet orientation
+ */
+export const TabletStack: React.FC<TabletStackProps> = ({
+  children,
+  direction = 'auto',
+  className
+}) => {
+  const device = useDevice()
+  
+  const getStackClasses = () => {
+    const classes = ['coach-stan-tablet-stack']
+    
+    if (device.isTablet) {
+      classes.push('tablet-optimized')
+      
+      const targetDirection = direction === 'auto' 
+        ? (device.orientation === 'portrait' ? 'vertical' : 'horizontal')
+        : direction
+      
+      classes.push(`stack-${targetDirection}`)
+    }
+    
+    return classes
+  }
+  
+  const stackStyle: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: device.orientation === 'portrait' ? 'column' : 'row',
+    gap: device.orientation === 'portrait' ? '1rem' : '1.5rem',
+    transition: 'flex-direction 0.3s ease'
+  }
+  
+  return (
+    <div 
+      className={cn(getStackClasses(), className)}
+      style={stackStyle}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/ui/theme-customizer.tsx

@@ -0,0 +1,386 @@
+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';
+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({
+        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>
+  );
+};