@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.9

package/dist/components/ui/font-preview.d.ts

@@ -0,0 +1,282 @@
+export interface FontPreviewProps {
+  fontConfig?: FontConfig;
+  fontType?: 'primary' | 'secondary' | 'display' | 'body' | 'mono';
+  showAllVariations?: boolean;
+  className?: string;
+}
+
+export const FontPreview: React.FC<FontPreviewProps> = ({
+  fontConfig,
+  fontType = 'primary',
+  showAllVariations = false,
+  className = ''
+}) => {
+  const { currentThemeConfig } = useTheme();
+
+  // Use provided fontConfig or get from current theme
+  const config = fontConfig || currentThemeConfig?.fonts[fontType];
+
+  if (!config) {
+    return (
+      <Card className={className}>
+        <CardContent className="p-4">
+          <p className="text-sm text-muted-foreground">Font configuration not available</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const { family, weights, sizes, lineHeights, letterSpacing, fallbacks, source } = config;
+
+  // Build full font family string with fallbacks
+  const fullFontFamily = fallbacks 
+    ? `${family}, ${fallbacks.join(', ')}`
+    : family;
+
+  // Sample text for preview
+  const sampleText = "The quick brown fox jumps over the lazy dog";
+  const sampleNumbers = "1234567890";
+  const sampleSpecial = "!@#$%^&*()_+-={}[]|\\:;\"'<>,.?/";
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span className="capitalize">{fontType} Font</span>
+          <div className="flex gap-2">
+            {source && (
+              <Badge variant="outline" className="text-xs">
+                {source.type}
+              </Badge>
+            )}
+            <Badge variant="secondary" className="text-xs">
+              {weights?.length || 0} weights
+            </Badge>
+          </div>
+        </CardTitle>
+        <CardDescription>
+          <span className="font-mono text-xs">{family}</span>
+          {fallbacks && fallbacks.length > 0 && (
+            <div className="mt-1 text-xs text-muted-foreground">
+              Fallbacks: {fallbacks.slice(0, 3).join(', ')}
+              {fallbacks.length > 3 && ` (+${fallbacks.length - 3} more)`}
+            </div>
+          )}
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent className="space-y-6">
+        {/* Font Weights Preview */}
+        <div>
+          <h4 className="text-sm font-medium mb-3">Font Weights</h4>
+          <div className="space-y-2">
+            {weights?.map(weight => (
+              <div key={weight} className="flex items-center gap-4">
+                <Badge variant="outline" className="text-xs w-12 justify-center">
+                  {weight}
+                </Badge>
+                <p 
+                  style={{ 
+                    fontFamily: fullFontFamily,
+                    fontWeight: weight,
+                    fontSize: sizes?.md || '1rem'
+                  }}
+                  className="flex-1"
+                >
+                  {sampleText}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {showAllVariations && (
+          <>
+            {/* Font Sizes Preview */}
+            <div>
+              <h4 className="text-sm font-medium mb-3">Font Sizes</h4>
+              <div className="space-y-2">
+                {Object.entries(sizes || {}).map(([size, value]) => (
+                  <div key={size} className="flex items-center gap-4">
+                    <Badge variant="outline" className="text-xs w-12 justify-center">
+                      {size}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground w-16">{value}</span>
+                    <p 
+                      style={{ 
+                        fontFamily: fullFontFamily,
+                        fontSize: value,
+                        fontWeight: weights?.[0] || 400
+                      }}
+                    >
+                      Sample text
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Line Heights Preview */}
+            <div>
+              <h4 className="text-sm font-medium mb-3">Line Heights</h4>
+              <div className="space-y-4">
+                {Object.entries(lineHeights || {}).map(([height, value]) => (
+                  <div key={height} className="space-y-2">
+                    <div className="flex items-center gap-2">
+                      <Badge variant="outline" className="text-xs">
+                        {height}
+                      </Badge>
+                      <span className="text-xs text-muted-foreground">{value}</span>
+                    </div>
+                    <p 
+                      style={{ 
+                        fontFamily: fullFontFamily,
+                        fontSize: sizes?.md || '1rem',
+                        lineHeight: value,
+                        fontWeight: weights?.[0] || 400
+                      }}
+                      className="text-sm border-l-2 border-muted pl-4"
+                    >
+                      This is a multiline text example to demonstrate how line height affects the spacing between lines of text. 
+                      The line height setting controls the vertical space between each line, which is crucial for readability and 
+                      overall typography appearance.
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Letter Spacing Preview */}
+            <div>
+              <h4 className="text-sm font-medium mb-3">Letter Spacing</h4>
+              <div className="space-y-2">
+                {Object.entries(letterSpacing || {}).map(([spacing, value]) => (
+                  <div key={spacing} className="flex items-center gap-4">
+                    <Badge variant="outline" className="text-xs w-16 justify-center">
+                      {spacing}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground w-16">{value}</span>
+                    <p 
+                      style={{ 
+                        fontFamily: fullFontFamily,
+                        fontSize: sizes?.md || '1rem',
+                        letterSpacing: value,
+                        fontWeight: weights?.[0] || 400
+                      }}
+                      className="flex-1"
+                    >
+                      Letter spacing example
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Character Set Preview */}
+        <div>
+          <h4 className="text-sm font-medium mb-3">Character Support</h4>
+          <div className="space-y-3">
+            <div>
+              <span className="text-xs text-muted-foreground block mb-1">Alphabet</span>
+              <p 
+                style={{ 
+                  fontFamily: fullFontFamily,
+                  fontSize: sizes?.md || '1rem',
+                  fontWeight: weights?.[0] || 400
+                }}
+                className="text-sm"
+              >
+                {sampleText}
+              </p>
+            </div>
+
+            <div>
+              <span className="text-xs text-muted-foreground block mb-1">Numbers</span>
+              <p 
+                style={{ 
+                  fontFamily: fullFontFamily,
+                  fontSize: sizes?.lg || '1.125rem',
+                  fontWeight: weights?.[0] || 400,
+                  letterSpacing: letterSpacing?.wide || '0.025em'
+                }}
+                className="text-sm"
+              >
+                {sampleNumbers}
+              </p>
+            </div>
+
+            <div>
+              <span className="text-xs text-muted-foreground block mb-1">Special Characters</span>
+              <p 
+                style={{ 
+                  fontFamily: fullFontFamily,
+                  fontSize: sizes?.sm || '0.875rem',
+                  fontWeight: weights?.[0] || 400
+                }}
+                className="text-sm"
+              >
+                {sampleSpecial}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Font Loading Information */}
+        {source && (
+          <div className="pt-4 border-t">
+            <h4 className="text-sm font-medium mb-2">Font Loading</h4>
+            <div className="space-y-1 text-xs text-muted-foreground">
+              <div>Source: <span className="capitalize">{source.type}</span></div>
+              {source.url && <div>URL: {source.url}</div>}
+              {source.files && (
+                <div>
+                  Files: {Object.keys(source.files).join(', ')}
+                </div>
+              )}
+              {config.display && (
+                <div>Display: {config.display}</div>
+              )}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+// Multi-font preview component
+export interface FontShowcaseProps {
+  showAllVariations?: boolean;
+  className?: string;
+}
+
+export const FontShowcase: React.FC<FontShowcaseProps> = ({
+  showAllVariations = false,
+  className = ''
+}) => {
+  const { currentThemeConfig } = useTheme();
+
+  if (!currentThemeConfig?.fonts) {
+    return (
+      <div className={className}>
+        <p className="text-sm text-muted-foreground">No font configuration available</p>
+      </div>
+    );
+  }
+
+  const fontTypes: Array<keyof typeof currentThemeConfig.fonts> = ['primary', 'secondary', 'display', 'body', 'mono'];
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      {fontTypes.map(fontType => (
+        <FontPreview
+          key={fontType}
+          fontType={fontType}
+          showAllVariations={showAllVariations}
+        />
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,286 @@
+import React from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { Badge } from './badge';
+import { useTheme } from '../../themes';
+import { FontConfig } from '../../themes/types';
+
+export interface FontPreviewProps {
+  fontConfig?;
+  fontType?;
+  showAllVariations?;
+  className?;
+}
+
+export const FontPreview= ({
+  fontConfig,
+  fontType = 'primary',
+  showAllVariations = false,
+  className = ''
+}) => {
+  const { currentThemeConfig } = useTheme();
+  
+  // Use provided fontConfig or get from current theme
+  const config = fontConfig || currentThemeConfig?.fonts[fontType];
+  
+  if (!config) {
+    return (
+      <Card className={className}>
+        <CardContent className="p-4">
+          <p className="text-sm text-muted-foreground">Font configuration not available</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const { family, weights, sizes, lineHeights, letterSpacing, fallbacks, source } = config;
+  
+  // Build full font family string with fallbacks
+  const fullFontFamily = fallbacks 
+    ? `${family}, ${fallbacks.join(', ')}`
+    ;
+
+  // Sample text for preview
+  const sampleText = "The quick brown fox jumps over the lazy dog";
+  const sampleNumbers = "1234567890";
+  const sampleSpecial = "!@#$%^&*()_+-={}[]|\\:;\"'<>,.?/";
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between">
+          <span className="capitalize">{fontType} Font</span>
+          <div className="flex gap-2">
+            {source && (
+              <Badge variant="outline" className="text-xs">
+                {source.type}
+              </Badge>
+            )}
+            <Badge variant="secondary" className="text-xs">
+              {weights?.length || 0} weights
+            </Badge>
+          </div>
+        </CardTitle>
+        <CardDescription>
+          <span className="font-mono text-xs">{family}</span>
+          {fallbacks && fallbacks.length > 0 && (
+            <div className="mt-1 text-xs text-muted-foreground">
+              Fallbacks, 3).join(', ')}
+              {fallbacks.length > 3 && ` (+${fallbacks.length - 3} more)`}
+            </div>
+          )}
+        </CardDescription>
+      </CardHeader>
+      
+      <CardContent className="space-y-6">
+        {/* Font Weights Preview */}
+        <div>
+          <h4 className="text-sm font-medium mb-3">Font Weights</h4>
+          <div className="space-y-2">
+            {weights?.map(weight => (
+              <div key={weight} className="flex items-center gap-4">
+                <Badge variant="outline" className="text-xs w-12 justify-center">
+                  {weight}
+                </Badge>
+                <p 
+                  style={{ 
+                    fontFamily,
+                    fontWeight,
+                    fontSize}}
+                  className="flex-1"
+                >
+                  {sampleText}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {showAllVariations && (
+          <>
+            {/* Font Sizes Preview */}
+            <div>
+              <h4 className="text-sm font-medium mb-3">Font Sizes</h4>
+              <div className="space-y-2">
+                {Object.entries(sizes || {}).map(([size, value]) => (
+                  <div key={size} className="flex items-center gap-4">
+                    <Badge variant="outline" className="text-xs w-12 justify-center">
+                      {size}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground w-16">{value}</span>
+                    <p 
+                      style={{ 
+                        fontFamily,
+                        fontSize,
+                        fontWeight] || 400
+                      }}
+                    >
+                      Sample text
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Line Heights Preview */}
+            <div>
+              <h4 className="text-sm font-medium mb-3">Line Heights</h4>
+              <div className="space-y-4">
+                {Object.entries(lineHeights || {}).map(([height, value]) => (
+                  <div key={height} className="space-y-2">
+                    <div className="flex items-center gap-2">
+                      <Badge variant="outline" className="text-xs">
+                        {height}
+                      </Badge>
+                      <span className="text-xs text-muted-foreground">{value}</span>
+                    </div>
+                    <p 
+                      style={{ 
+                        fontFamily,
+                        fontSize,
+                        lineHeight,
+                        fontWeight] || 400
+                      }}
+                      className="text-sm border-l-2 border-muted pl-4"
+                    >
+                      This is a multiline text example to demonstrate how line height affects the spacing between lines of text. 
+                      The line height setting controls the vertical space between each line, which is crucial for readability and 
+                      overall typography appearance.
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Letter Spacing Preview */}
+            <div>
+              <h4 className="text-sm font-medium mb-3">Letter Spacing</h4>
+              <div className="space-y-2">
+                {Object.entries(letterSpacing || {}).map(([spacing, value]) => (
+                  <div key={spacing} className="flex items-center gap-4">
+                    <Badge variant="outline" className="text-xs w-16 justify-center">
+                      {spacing}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground w-16">{value}</span>
+                    <p 
+                      style={{ 
+                        fontFamily,
+                        fontSize,
+                        letterSpacing,
+                        fontWeight] || 400
+                      }}
+                      className="flex-1"
+                    >
+                      Letter spacing example
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </>
+        )}
+
+        {/* Character Set Preview */}
+        <div>
+          <h4 className="text-sm font-medium mb-3">Character Support</h4>
+          <div className="space-y-3">
+            <div>
+              <span className="text-xs text-muted-foreground block mb-1">Alphabet</span>
+              <p 
+                style={{ 
+                  fontFamily,
+                  fontSize,
+                  fontWeight] || 400
+                }}
+                className="text-sm"
+              >
+                {sampleText}
+              </p>
+            </div>
+            
+            <div>
+              <span className="text-xs text-muted-foreground block mb-1">Numbers</span>
+              <p 
+                style={{ 
+                  fontFamily,
+                  fontSize,
+                  fontWeight] || 400,
+                  letterSpacing}}
+                className="text-sm"
+              >
+                {sampleNumbers}
+              </p>
+            </div>
+
+            <div>
+              <span className="text-xs text-muted-foreground block mb-1">Special Characters</span>
+              <p 
+                style={{ 
+                  fontFamily,
+                  fontSize,
+                  fontWeight] || 400
+                }}
+                className="text-sm"
+              >
+                {sampleSpecial}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Font Loading Information */}
+        {source && (
+          <div className="pt-4 border-t">
+            <h4 className="text-sm font-medium mb-2">Font Loading</h4>
+            <div className="space-y-1 text-xs text-muted-foreground">
+              <div>Source="capitalize">{source.type}</span></div>
+              {source.url && <div>URL}</div>}
+              {source.files && (
+                <div>
+                  Files).join(', ')}
+                </div>
+              )}
+              {config.display && (
+                <div>Display}</div>
+              )}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+// Multi-font preview component
+export interface FontShowcaseProps {
+  showAllVariations?;
+  className?;
+}
+
+export const FontShowcase= ({
+  showAllVariations = false,
+  className = ''
+}) => {
+  const { currentThemeConfig } = useTheme();
+  
+  if (!currentThemeConfig?.fonts) {
+    return (
+      <div className={className}>
+        <p className="text-sm text-muted-foreground">No font configuration available</p>
+      </div>
+    );
+  }
+
+  const fontTypes= ['primary', 'secondary', 'display', 'body', 'mono'];
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      {fontTypes.map(fontType => (
+        <FontPreview
+          key={fontType}
+          fontType={fontType}
+          showAllVariations={showAllVariations}
+        />
+      ))}
+    </div>
+  );
+};