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

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

@@ -0,0 +1,258 @@
+import React from 'react';
+import { useTheme } from '../../themes';
+import { Card, CardContent, CardHeader, CardTitle } from './card';
+import { Badge } from './badge';
+
+export interface ThemePreviewProps {
+  themeName?;
+  showColors?;
+  showFonts?;
+  showNavigation?;
+  showSpacing?;
+  className?;
+}
+
+export const ThemePreview= ({
+  themeName,
+  showColors = true,
+  showFonts = true,
+  showNavigation = true,
+  showSpacing = true,
+  className = ''
+}) => {
+  const { getTheme, currentTheme } = useTheme();
+  const targetTheme = themeName || currentTheme;
+  const themeConfig = getTheme(targetTheme);
+
+  if (!themeConfig) {
+    return (
+      <div className={`p-4 text-center text-gray-500 ${className}`}>
+        Theme "{targetTheme}" not found
+      </div>
+    );
+  }
+
+  const renderColorPreview = () => {
+    if (!showColors) return null;
+
+    const { colors } = themeConfig;
+    
+    return (
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold">Colors</h4>
+        
+        {/* Primary Colors */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark="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}}
+                />
+                <span className="text-xs text-gray-600 dark}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Semantic Colors */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark="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}}
+                />
+                <span className="text-sm text-gray-600 dark])/g, ' $1').trim()}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Neutral Colors */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark="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}}
+                />
+                <span className="text-xs text-gray-600 dark}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderFontPreview = () => {
+    if (!showFonts) return null;
+
+    const { fonts } = themeConfig;
+    
+    return (
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold">Typography</h4>
+        
+        {/* Primary Font */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark}
+          </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"
+                  style={{ 
+                    fontSize,
+                    fontWeight] || 400
+                  }}
+                >
+                  The quick brown fox jumps over the lazy dog
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Font Weights */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark="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"
+                  style={{ 
+                    fontSize,
+                    fontWeight}}
+                >
+                  The quick brown fox jumps over the lazy dog
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderNavigationPreview = () => {
+    if (!showNavigation) return null;
+
+    const { navigation } = themeConfig;
+    
+    return (
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold">Navigation</h4>
+        
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <h5 className="text-sm font-medium text-gray-700 dark="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="outline">{navigation.layout}</Badge>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="outline">{navigation.style}</Badge>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="outline">{navigation.behavior}</Badge>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="outline">{navigation.responsive}</Badge>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h5 className="text-sm font-medium text-gray-700 dark="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="text-gray-900 dark}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="text-gray-900 dark}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="text-gray-900 dark}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderSpacingPreview = () => {
+    if (!showSpacing) return null;
+
+    const { spacing } = themeConfig;
+    
+    return (
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold">Spacing</h4>
+        
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark="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"
+                  style={{ 
+                    width,
+                    height}}
+                />
+                <span className="text-sm text-gray-600 dark}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark="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}
+                </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>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={`theme-preview ${className}`}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span className="text-2xl">
+              {targetTheme === 'stan-design' ? '⚡' === 'enterprise' ? '🏢' === 'harvey' ? '🎨' }
+            </span>
+            {themeConfig.meta.name} Theme Preview
+          </CardTitle>
+          <p className="text-sm text-gray-600 dark}
+          </p>
+          <div className="flex gap-2">
+            <Badge variant="outline">{themeConfig.meta.category}</Badge>
+            <Badge variant="secondary">v{themeConfig.meta.version}</Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {renderColorPreview()}
+          {renderFontPreview()}
+          {renderNavigationPreview()}
+          {renderSpacingPreview()}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

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

@@ -0,0 +1,258 @@
+import React from 'react';
+import { useTheme } from '../../themes';
+import { Card, CardContent, CardHeader, CardTitle } from './card';
+import { Badge } from './badge';
+
+export interface ThemePreviewProps {
+  themeName?;
+  showColors?;
+  showFonts?;
+  showNavigation?;
+  showSpacing?;
+  className?;
+}
+
+export const ThemePreview= ({
+  themeName,
+  showColors = true,
+  showFonts = true,
+  showNavigation = true,
+  showSpacing = true,
+  className = ''
+}) => {
+  const { getTheme, currentTheme } = useTheme();
+  const targetTheme = themeName || currentTheme;
+  const themeConfig = getTheme(targetTheme);
+
+  if (!themeConfig) {
+    return (
+      <div className={`p-4 text-center text-gray-500 ${className}`}>
+        Theme "{targetTheme}" not found
+      </div>
+    );
+  }
+
+  const renderColorPreview = () => {
+    if (!showColors) return null;
+
+    const { colors } = themeConfig;
+    
+    return (
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold">Colors</h4>
+        
+        {/* Primary Colors */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark="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}}
+                />
+                <span className="text-xs text-gray-600 dark}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Semantic Colors */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark="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}}
+                />
+                <span className="text-sm text-gray-600 dark])/g, ' $1').trim()}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Neutral Colors */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark="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}}
+                />
+                <span className="text-xs text-gray-600 dark}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderFontPreview = () => {
+    if (!showFonts) return null;
+
+    const { fonts } = themeConfig;
+    
+    return (
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold">Typography</h4>
+        
+        {/* Primary Font */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark}
+          </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"
+                  style={{ 
+                    fontSize,
+                    fontWeight] || 400
+                  }}
+                >
+                  The quick brown fox jumps over the lazy dog
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Font Weights */}
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark="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"
+                  style={{ 
+                    fontSize,
+                    fontWeight}}
+                >
+                  The quick brown fox jumps over the lazy dog
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderNavigationPreview = () => {
+    if (!showNavigation) return null;
+
+    const { navigation } = themeConfig;
+    
+    return (
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold">Navigation</h4>
+        
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <h5 className="text-sm font-medium text-gray-700 dark="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="outline">{navigation.layout}</Badge>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="outline">{navigation.style}</Badge>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="outline">{navigation.behavior}</Badge>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="outline">{navigation.responsive}</Badge>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h5 className="text-sm font-medium text-gray-700 dark="space-y-2 text-sm">
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="text-gray-900 dark}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="text-gray-900 dark}
+                </span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-600 dark="text-gray-900 dark}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderSpacingPreview = () => {
+    if (!showSpacing) return null;
+
+    const { spacing } = themeConfig;
+    
+    return (
+      <div className="space-y-4">
+        <h4 className="text-lg font-semibold">Spacing</h4>
+        
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark="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"
+                  style={{ 
+                    width,
+                    height}}
+                />
+                <span className="text-sm text-gray-600 dark}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <h5 className="text-sm font-medium text-gray-700 dark="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}
+                </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>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={`theme-preview ${className}`}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <span className="text-2xl">
+              {targetTheme === 'stan-design' ? '⚡' === 'enterprise' ? '🏢' === 'harvey' ? '🎨' }
+            </span>
+            {themeConfig.meta.name} Theme Preview
+          </CardTitle>
+          <p className="text-sm text-gray-600 dark}
+          </p>
+          <div className="flex gap-2">
+            <Badge variant="outline">{themeConfig.meta.category}</Badge>
+            <Badge variant="secondary">v{themeConfig.meta.version}</Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {renderColorPreview()}
+          {renderFontPreview()}
+          {renderNavigationPreview()}
+          {renderSpacingPreview()}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};