react-vite-themes/dist/pages/Documentation/StatCardDocumentation.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Link } from 'react-router-dom';
import { StatCard } from '../../components/molecules/StatCard';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Card } from '../../components/atoms/Card';
import { Icon } from '../../components/atoms/Icon';
import { Alert } from '../../components/atoms/Alert';
import './ComponentDocumentation.scss';
const StatCardDocumentation = () => {
    const sizes = [
        { name: 'sm', description: 'Small stat cards for compact layouts' },
        { name: 'md', description: 'Medium stat cards (default)' },
        { name: 'lg', description: 'Large stat cards for emphasis' }
    ];
    const styles = [
        { name: 'elevated', description: 'Elevated cards with shadow' },
        { name: 'glass', description: 'Glass morphism effect' },
        { name: 'bordered', description: 'Cards with border outline' },
        { name: 'filled', description: 'Filled cards with background' }
    ];
    return (_jsx("div", { className: "component-documentation", children: _jsxs("div", { className: "container", children: [_jsxs("div", { className: "doc-header", children: [_jsxs(Link, { to: "/documentation", className: "back-link", children: [_jsx(Icon, { name: "arrow-left", size: "sm" }), "Back to Documentation"] }), _jsx("h1", { children: "StatCard Component" }), _jsx("p", { className: "component-description", children: "A flexible statistics card component for displaying metrics, data, and key performance indicators. Supports multiple styles, sizes, and trend indicators." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { { StatCard } } from '../../components/atoms/StatCard';", language: "typescript" })] }), _jsxs("section", { className: "usage-section", children: [_jsx("h2", { children: "Basic Usage" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(StatCard, { value: "1,234", subtitle: "Total Users", style: "elevated" }), _jsx(StatCard, { value: "89%", subtitle: "Success Rate", style: "elevated" }), _jsx(StatCard, { value: "$12,345", subtitle: "Revenue", style: "elevated" })] }), _jsx(CodeBlock, { code: `<StatCard
  value="1,234"
  subtitle="Total Users"
  style="elevated"
/>

<StatCard
  value="89%"
  subtitle="Success Rate"
  style="elevated"
/>

<StatCard
  value="$12,345"
  subtitle="Revenue"
  style="elevated"
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "sizes-section", children: [_jsx("h2", { children: "Sizes" }), _jsx("p", { children: "Control the stat card size using the size prop." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }, children: sizes.map((size) => (_jsx(StatCard, { value: "1,234", subtitle: "Total Users", style: "elevated", size: size.name }, size.name))) }), _jsx(CodeBlock, { code: `<StatCard value="1,234" subtitle="Total Users" size="sm" />
<StatCard value="1,234" subtitle="Total Users" size="md" />
<StatCard value="1,234" subtitle="Total Users" size="lg" />`, language: "tsx" })] })] }), _jsxs("section", { className: "styles-section", children: [_jsx("h2", { children: "Styles" }), _jsx("p", { children: "Different visual styles for stat cards." }), _jsx("div", { className: "styles-grid", children: styles.map((style) => (_jsxs(Card, { variant: "neutral", style: "elevated", className: "style-card", children: [_jsx("h3", { children: style.name.charAt(0).toUpperCase() + style.name.slice(1) }), _jsx("p", { children: style.description }), _jsx("div", { className: "example-content", children: _jsx(StatCard, { value: "1,234", subtitle: "Total Users", style: style.name, size: "md" }) }), _jsx(CodeBlock, { code: `<StatCard value="1,234" subtitle="Total Users" style="${style.name}" />`, language: "tsx" })] }, style.name))) })] }), _jsxs("section", { className: "trend-section", children: [_jsx("h2", { children: "Trend Indicators" }), _jsx("p", { children: "Show trend direction and percentage changes." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }, children: [_jsx(StatCard, { value: "1,234", subtitle: "Total Users", trend: "up", trendValue: "12.5%", style: "elevated" }), _jsx(StatCard, { value: "89%", subtitle: "Success Rate", trend: "down", trendValue: "3.2%", style: "elevated" }), _jsx(StatCard, { value: "$12,345", subtitle: "Revenue", trend: "up", trendValue: "8.7%", style: "elevated" })] }), _jsx(CodeBlock, { code: `<StatCard
  value="1,234"
  subtitle="Total Users"
  trend="up"
  trendValue="12.5%"
/>

<StatCard
  value="89%"
  subtitle="Success Rate"
  trend="down"
  trendValue="3.2%"
/>

<StatCard
  value="$12,345"
  subtitle="Revenue"
  trend="up"
  trendValue="8.7%"
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "icons-section", children: [_jsx("h2", { children: "Icons" }), _jsx("p", { children: "Add icons to stat cards for better visual context." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }, children: [_jsx(StatCard, { value: "1,234", subtitle: "Total Users", icon: "user", style: "elevated" }), _jsx(StatCard, { value: "89%", subtitle: "Success Rate", icon: "check", style: "elevated" }), _jsx(StatCard, { value: "$12,345", subtitle: "Revenue", icon: "dollar-sign", style: "elevated" })] }), _jsx(CodeBlock, { code: `<StatCard
  value="1,234"
  subtitle="Total Users"
  icon="user"
/>

<StatCard
  value="89%"
  subtitle="Success Rate"
  icon="check"
/>

<StatCard
  value="$12,345"
  subtitle="Revenue"
  icon="dollar-sign"
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "hover-section", children: [_jsx("h2", { children: "Hover Effects" }), _jsx("p", { children: "Enable hover effects for interactive stat cards." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }, children: [_jsx(StatCard, { value: "1,234", subtitle: "Total Users", style: "elevated", isHoverable: true }), _jsx(StatCard, { value: "89%", subtitle: "Success Rate", style: "glass", isHoverable: true }), _jsx(StatCard, { value: "$12,345", subtitle: "Revenue", style: "bordered", isHoverable: true })] }), _jsx(CodeBlock, { code: `<StatCard
  value="1,234"
  subtitle="Total Users"
  isHoverable
/>

<StatCard
  value="89%"
  subtitle="Success Rate"
  style="glass"
  isHoverable
/>

<StatCard
  value="$12,345"
  subtitle="Revenue"
  style="bordered"
  isHoverable
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "complex-examples-section", children: [_jsx("h2", { children: "Complex Examples" }), _jsx("p", { children: "Real-world examples of stat card usage patterns." }), _jsxs("div", { className: "complex-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Dashboard Overview" }), _jsx("p", { children: "Key metrics for a business dashboard." }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }, children: [_jsx(StatCard, { value: "1,234", subtitle: "Total Users", trend: "up", trendValue: "12.5%", icon: "user", style: "elevated", isHoverable: true }), _jsx(StatCard, { value: "89%", subtitle: "Success Rate", trend: "up", trendValue: "2.1%", icon: "check", style: "elevated", isHoverable: true }), _jsx(StatCard, { value: "$12,345", subtitle: "Revenue", trend: "up", trendValue: "8.7%", icon: "dollar-sign", style: "elevated", isHoverable: true }), _jsx(StatCard, { value: "156", subtitle: "Active Sessions", trend: "down", trendValue: "3.2%", icon: "activity", style: "elevated", isHoverable: true })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "E-commerce Metrics" }), _jsx("p", { children: "Key performance indicators for online stores." }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }, children: [_jsx(StatCard, { value: "2,847", subtitle: "Orders", trend: "up", trendValue: "15.3%", icon: "shopping-cart", style: "glass", isHoverable: true }), _jsx(StatCard, { value: "$45,678", subtitle: "Sales", trend: "up", trendValue: "22.1%", icon: "dollar-sign", style: "glass", isHoverable: true }), _jsx(StatCard, { value: "4.8", subtitle: "Avg Rating", trend: "up", trendValue: "0.2", icon: "star", style: "glass", isHoverable: true }), _jsx(StatCard, { value: "1,234", subtitle: "Customers", trend: "up", trendValue: "8.9%", icon: "users", style: "glass", isHoverable: true })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Analytics Dashboard" }), _jsx("p", { children: "Website and application analytics." }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }, children: [_jsx(StatCard, { value: "45,678", subtitle: "Page Views", trend: "up", trendValue: "18.7%", icon: "eye", style: "bordered", isHoverable: true }), _jsx(StatCard, { value: "3,456", subtitle: "Unique Visitors", trend: "up", trendValue: "12.3%", icon: "users", style: "bordered", isHoverable: true }), _jsx(StatCard, { value: "2.3s", subtitle: "Avg Load Time", trend: "down", trendValue: "15.2%", icon: "clock", style: "bordered", isHoverable: true }), _jsx(StatCard, { value: "78%", subtitle: "Bounce Rate", trend: "down", trendValue: "5.4%", icon: "trending-down", style: "bordered", isHoverable: true })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "System Monitoring" }), _jsx("p", { children: "Server and application performance metrics." }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1rem' }, children: [_jsx(StatCard, { value: "99.9%", subtitle: "Uptime", trend: "up", trendValue: "0.1%", icon: "check-circle", style: "filled", isHoverable: true }), _jsx(StatCard, { value: "85%", subtitle: "CPU Usage", trend: "up", trendValue: "5.2%", icon: "cpu", style: "filled", isHoverable: true }), _jsx(StatCard, { value: "2.1GB", subtitle: "Memory Usage", trend: "down", trendValue: "12.8%", icon: "hard-drive", style: "filled", isHoverable: true }), _jsx(StatCard, { value: "156ms", subtitle: "Response Time", trend: "down", trendValue: "8.3%", icon: "zap", style: "filled", isHoverable: true })] })] })] })] }), _jsxs("section", { className: "props-section", children: [_jsx("h2", { children: "Props" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "props-card", children: _jsx("div", { className: "props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Default" }), _jsx("th", { children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: "value" }), _jsx("td", { children: "string | number" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Main value to display (required)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "subtitle" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Subtitle text below the value" })] }), _jsxs("tr", { children: [_jsx("td", { children: "style" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'elevated'" }), _jsx("td", { children: "Card style (elevated, glass, bordered, flat)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Card size (sm, md, lg)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "trend" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Trend direction (up, down, neutral)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "trendValue" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Trend percentage or value" })] }), _jsxs("tr", { children: [_jsx("td", { children: "icon" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Icon name to display" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isHoverable" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Enable hover effects" })] }), _jsxs("tr", { children: [_jsx("td", { children: "className" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Additional CSS classes" })] })] })] }) }) })] }), _jsxs("section", { className: "best-practices-section", children: [_jsx("h2", { children: "Best Practices" }), _jsxs("div", { className: "practices-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u2705 Do" }), _jsxs("ul", { children: [_jsx("li", { children: "Use clear, descriptive subtitles" }), _jsx("li", { children: "Use appropriate icons for context" }), _jsx("li", { children: "Show trend indicators for important metrics" }), _jsx("li", { children: "Use consistent formatting for values" }), _jsx("li", { children: "Group related metrics together" }), _jsx("li", { children: "Use hover effects for interactive dashboards" }), _jsx("li", { children: "Use appropriate sizes for the layout" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "practice-card", children: [_jsx("h3", { children: "\u274C Don't" }), _jsxs("ul", { children: [_jsx("li", { children: "Don't use too many stat cards in one view" }), _jsx("li", { children: "Don't use unclear or ambiguous subtitles" }), _jsx("li", { children: "Don't use inconsistent formatting" }), _jsx("li", { children: "Don't use stat cards for non-numeric data" }), _jsx("li", { children: "Don't use inappropriate icons" }), _jsx("li", { children: "Don't use stat cards for navigation" }), _jsx("li", { children: "Don't use stat cards for detailed information" })] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The StatCard component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Proper ARIA attributes for card roles" }), _jsx("li", { children: "Screen reader support for values and trends" }), _jsx("li", { children: "High contrast support for all styles" }), _jsx("li", { children: "Keyboard navigation support" }), _jsx("li", { children: "Semantic color usage for trends" }), _jsx("li", { children: "Proper focus management for hoverable cards" })] })] })] })] }) }));
};
export default StatCardDocumentation;