@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/components/ui/color-preview.tsx

@@ -0,0 +1,411 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { Badge } from './badge';
+import { useTheme } from '../../themes';
+import { ColorScale, SemanticColors } from '../../themes/types';
+import { ColorManager } from '../../themes/colorManager';
+
+export interface ColorPreviewProps {
+  colorScale?: ColorScale;
+  semanticColors?: SemanticColors;
+  scaleName?: string;
+  showAccessibility?: boolean;
+  className?: string;
+}
+
+export const ColorPreview: React.FC<ColorPreviewProps> = ({
+  colorScale,
+  semanticColors,
+  scaleName = 'Color Scale',
+  showAccessibility = true,
+  className = ''
+}) => {
+  const { currentThemeConfig } = useTheme();
+  
+  // Use provided colors or get from current theme
+  const colors = colorScale || currentThemeConfig?.colors.primary;
+  const semantic = semanticColors || currentThemeConfig?.colors.semantic;
+  
+  // Type guard to ensure semantic colors are strings
+  const isStringColor = (color: unknown): color is string => 
+    typeof color === 'string' && color.length > 0;
+  
+  if (!colors) {
+    return (
+      <Card className={className}>
+        <CardContent className="p-4">
+          <p className="text-sm text-muted-foreground">Color configuration not available</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Color scale shades
+  const scaleShades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+  
+
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span>{scaleName}</span>
+          <div className="flex gap-2">
+            <Badge variant="outline" className="text-xs">
+              {scaleShades.length} shades
+            </Badge>
+            {showAccessibility && (
+              <Badge variant="secondary" className="text-xs">
+                WCAG AA/AAA
+              </Badge>
+            )}
+          </div>
+        </CardTitle>
+        <CardDescription>
+          Color scale with accessibility information and contrast ratios
+        </CardDescription>
+      </CardHeader>
+      
+      <CardContent className="space-y-6">
+        {/* Color Scale Preview */}
+        <div>
+          <h4 className="text-sm font-medium mb-3">Color Scale</h4>
+          <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
+            {scaleShades.map(shade => {
+              const color = colors[shade as keyof ColorScale];
+              if (!color) return null;
+              
+              const accessibility = showAccessibility 
+                ? ColorManager.checkColorContrast(color, '#ffffff')
+                : null;
+              
+              return (
+                <div key={shade} className="space-y-2">
+                  <div 
+                    className="w-full h-16 rounded-lg border border-gray-200 dark:border-gray-700"
+                    style={{ backgroundColor: color }}
+                  />
+                  <div className="text-center">
+                    <div className="text-xs font-mono font-medium">{shade}</div>
+                    <div className="text-xs text-muted-foreground font-mono">{color}</div>
+                    {showAccessibility && accessibility && (
+                      <div className="mt-1">
+                        <Badge 
+                          variant={accessibility.aa ? 'default' : 'destructive'} 
+                          className="text-xs"
+                        >
+                          {accessibility.contrastRatio.toFixed(1)}:1
+                        </Badge>
+                        <div className="text-xs mt-1">
+                          {accessibility.aa ? 'AA' : 'Fail'}
+                          {accessibility.aaa && ' AAA'}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          
+          {/* Additional color variations */}
+          {(colors.light || colors.dark || colors.contrast) && (
+            <div className="mt-4">
+              <h5 className="text-sm font-medium mb-2">Additional Variations</h5>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                {colors.light && (
+                  <div className="space-y-2">
+                    <div 
+                      className="w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700"
+                      style={{ backgroundColor: colors.light }}
+                    />
+                    <div className="text-center">
+                      <div className="text-xs font-medium">Light</div>
+                      <div className="text-xs text-muted-foreground font-mono">{colors.light}</div>
+                    </div>
+                  </div>
+                )}
+                
+                {colors.dark && (
+                  <div className="space-y-2">
+                    <div 
+                      className="w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700"
+                      style={{ backgroundColor: colors.dark }}
+                    />
+                    <div className="text-center">
+                      <div className="text-xs font-medium">Dark</div>
+                      <div className="text-xs text-muted-foreground font-mono">{colors.dark}</div>
+                    </div>
+                  </div>
+                )}
+                
+                {colors.contrast && (
+                  <div className="space-y-2">
+                    <div 
+                      className="w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700"
+                      style={{ backgroundColor: colors.contrast }}
+                    />
+                    <div className="text-center">
+                      <div className="text-xs font-medium">Contrast</div>
+                      <div className="text-xs text-muted-foreground font-mono">{colors.contrast}</div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Semantic Colors */}
+        {semantic && (
+          <div>
+            <h4 className="text-sm font-medium mb-3">Semantic Colors</h4>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+              {Object.entries(semantic).map(([name, color]) => {
+                if (!isStringColor(color) || name.includes('Light') || name.includes('Dark')) return null;
+                
+                const accessibility = showAccessibility 
+                  ? ColorManager.checkColorContrast(color, '#ffffff')
+                  : null;
+                
+                return (
+                  <div key={name} className="space-y-2">
+                    <div 
+                      className="w-full h-16 rounded-lg border border-gray-200 dark:border-gray-700"
+                      style={{ backgroundColor: color }}
+                    />
+                    <div className="text-center">
+                      <div className="text-xs font-medium capitalize">
+                        {name.replace(/([A-Z])/g, ' $1').trim()}
+                      </div>
+                      <div className="text-xs text-muted-foreground font-mono">{color}</div>
+                      {showAccessibility && accessibility && (
+                        <div className="mt-1">
+                          <Badge 
+                            variant={accessibility.aa ? 'default' : 'destructive'} 
+                            className="text-xs"
+                          >
+                            {accessibility.contrastRatio.toFixed(1)}:1
+                          </Badge>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            
+            {/* Light and Dark variants */}
+            <div className="mt-4">
+              <h5 className="text-sm font-medium mb-2">Semantic Variants</h5>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+                {Object.entries(semantic).map(([name, color]) => {
+                  if (!isStringColor(color) || !name.includes('Light') && !name.includes('Dark')) return null;
+                  
+                  return (
+                    <div key={name} className="space-y-2">
+                      <div 
+                        className="w-full h-12 rounded-lg border border-gray-200 dark:border-gray-700"
+                        style={{ backgroundColor: color }}
+                      />
+                      <div className="text-center">
+                        <div className="text-xs font-medium capitalize">
+                          {name.replace(/([A-Z])/g, ' $1').trim()}
+                        </div>
+                        <div className="text-xs text-muted-foreground font-mono">{color}</div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Accessibility Information */}
+        {showAccessibility && (
+          <div className="pt-4 border-t">
+            <h4 className="text-sm font-medium mb-2">Accessibility Information</h4>
+            <div className="space-y-2 text-xs text-muted-foreground">
+              <div className="flex items-center gap-2">
+                <Badge variant="default" className="text-xs">AA</Badge>
+                <span>WCAG AA standard: 4.5:1 contrast ratio</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Badge variant="secondary" className="text-xs">AAA</Badge>
+                <span>WCAG AAA standard: 7:1 contrast ratio</span>
+              </div>
+              <div className="text-xs">
+                <strong>Note:</strong> Colors are tested against white background. 
+                For dark themes, test against appropriate dark backgrounds.
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Color Usage Examples */}
+        <div className="pt-4 border-t">
+          <h4 className="text-sm font-medium mb-2">Usage Examples</h4>
+          <div className="space-y-3">
+            {/* Primary color usage */}
+            <div className="p-3 rounded-lg border" style={{ backgroundColor: colors[100] }}>
+              <div className="space-y-2">
+                <h5 className="font-medium" style={{ color: colors[900] }}>
+                  Primary Color Usage
+                </h5>
+                <p className="text-sm" style={{ color: colors[700] }}>
+                  This is an example of how the primary color scale can be used for text and backgrounds.
+                </p>
+                <div className="flex gap-2">
+                  <Badge style={{ backgroundColor: colors[500], color: '#ffffff' }}>
+                    Primary Button
+                  </Badge>
+                  <Badge variant="outline" style={{ borderColor: colors[500], color: colors[700] }}>
+                    Secondary Button
+                  </Badge>
+                </div>
+              </div>
+            </div>
+
+            {/* Semantic color usage */}
+            {semantic && (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div className="p-3 rounded-lg border" style={{ backgroundColor: semantic.successLight }}>
+                  <div className="space-y-2">
+                    <h5 className="font-medium" style={{ color: semantic.successDark }}>
+                      Success State
+                    </h5>
+                    <p className="text-sm" style={{ color: semantic.success }}>
+                      This shows how semantic colors can be used for different states.
+                    </p>
+                  </div>
+                </div>
+                
+                <div className="p-3 rounded-lg border" style={{ backgroundColor: semantic.errorLight }}>
+                  <div className="space-y-2">
+                    <h5 className="font-medium" style={{ color: semantic.errorDark }}>
+                      Error State
+                    </h5>
+                    <p className="text-sm" style={{ color: semantic.error }}>
+                      Error messages and validation feedback use semantic colors.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+// Multi-color preview component
+export interface ColorShowcaseProps {
+  showAccessibility?: boolean;
+  className?: string;
+}
+
+export const ColorShowcase: React.FC<ColorShowcaseProps> = ({
+  showAccessibility = true,
+  className = ''
+}) => {
+  const { currentThemeConfig } = useTheme();
+  
+  if (!currentThemeConfig?.colors) {
+    return (
+      <div className={className}>
+        <p className="text-sm text-muted-foreground">No color configuration available</p>
+      </div>
+    );
+  }
+
+  const { primary, secondary, semantic, neutral, surface, text } = currentThemeConfig.colors;
+  
+  // Type guard to ensure colors are strings
+  const isStringColor = (color: unknown): color is string => 
+    typeof color === 'string' && color.length > 0;
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      <ColorPreview 
+        colorScale={primary} 
+        scaleName="Primary Colors" 
+        showAccessibility={showAccessibility}
+      />
+      
+      <ColorPreview 
+        colorScale={secondary} 
+        scaleName="Secondary Colors" 
+        showAccessibility={showAccessibility}
+      />
+      
+      <ColorPreview 
+        colorScale={neutral} 
+        scaleName="Neutral Colors" 
+        showAccessibility={showAccessibility}
+      />
+      
+      <ColorPreview 
+        semanticColors={semantic} 
+        scaleName="Semantic Colors" 
+        showAccessibility={showAccessibility}
+      />
+      
+      {/* Surface and Text Colors */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Surface & Text Colors</CardTitle>
+          <CardDescription>
+            Background, surface, and text color combinations
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-3">
+              <h4 className="text-sm font-medium">Surface Colors</h4>
+              <div className="space-y-2">
+                {Object.entries(surface).map(([name, color]) => {
+                  if (!isStringColor(color)) return null;
+                  return (
+                    <div key={name} className="flex items-center gap-3">
+                      <div 
+                        className="w-8 h-8 rounded border"
+                        style={{ backgroundColor: color }}
+                      />
+                      <div>
+                        <div className="text-sm font-medium capitalize">{name}</div>
+                        <div className="text-xs text-muted-foreground font-mono">{color}</div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+            
+            <div className="space-y-3">
+              <h4 className="text-sm font-medium">Text Colors</h4>
+              <div className="space-y-2">
+                {Object.entries(text).map(([name, color]) => {
+                  if (!isStringColor(color)) return null;
+                  return (
+                    <div key={name} className="flex items-center gap-3">
+                      <div 
+                        className="w-8 h-8 rounded border"
+                        style={{ backgroundColor: color }}
+                      />
+                      <div>
+                        <div className="text-sm font-medium capitalize">{name}</div>
+                        <div className="text-xs text-muted-foreground font-mono">{color}</div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};