react-vite-themes/dist/pages/Documentation/ProgressBarDocumentation.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, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { ProgressBar } from '../../components/atoms/ProgressBar';
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 ProgressBarDocumentation = () => {
    const [progress, setProgress] = useState(0);
    useEffect(() => {
        const interval = setInterval(() => {
            setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
        }, 1000);
        return () => clearInterval(interval);
    }, []);
    const variants = [
        { name: 'primary', description: 'Primary themed progress bars' },
        { name: 'secondary', description: 'Secondary themed progress bars' },
        { name: 'success', description: 'Success themed progress bars' },
        { name: 'error', description: 'Error themed progress bars' },
        { name: 'warning', description: 'Warning themed progress bars' },
        { name: 'info', description: 'Info themed progress bars' },
        { name: 'light', description: 'Light themed progress bars' },
        { name: 'dark', description: 'Dark themed progress bars' },
        { name: 'neutral', description: 'Neutral themed progress bars (default)' }
    ];
    const sizes = [
        { name: 'xs', description: 'Extra small progress bars' },
        { name: 'sm', description: 'Small progress bars' },
        { name: 'md', description: 'Medium progress bars (default)' },
        { name: 'lg', description: 'Large progress bars' },
        { name: 'xl', description: 'Extra large progress bars' }
    ];
    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: "ProgressBar Component" }), _jsx("p", { className: "component-description", children: "A flexible progress bar component for showing completion status and loading states. Supports multiple variants, sizes, and animations." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { { ProgressBar } } from '../../components/atoms/ProgressBar';", 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(ProgressBar, { value: 75, variant: "primary" }), _jsx(ProgressBar, { value: 50, variant: "success" }), _jsx(ProgressBar, { value: 25, variant: "warning" }), _jsx(ProgressBar, { value: 10, variant: "error" })] }), _jsx(CodeBlock, { code: `<ProgressBar value={75} variant="primary" />
<ProgressBar value={50} variant="success" />
<ProgressBar value={25} variant="warning" />
<ProgressBar value={10} variant="error" />`, language: "tsx" })] })] }), _jsxs("section", { className: "variants-section", children: [_jsx("h2", { children: "Variants" }), _jsx("p", { children: "Progress bar variants define the semantic meaning and color scheme." }), _jsx("div", { className: "variants-grid", children: variants.map((variant) => (_jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: variant.name.charAt(0).toUpperCase() + variant.name.slice(1) }), _jsx("p", { children: variant.description }), _jsx("div", { className: "example-content", children: _jsx(ProgressBar, { value: 65, variant: variant.name, size: "md" }) }), _jsx(CodeBlock, { code: `<ProgressBar value={65} variant="${variant.name}" />`, language: "tsx" })] }, variant.name))) })] }), _jsxs("section", { className: "sizes-section", children: [_jsx("h2", { children: "Sizes" }), _jsx("p", { children: "Control the progress bar size using the size prop." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: sizes.map((size) => (_jsx(ProgressBar, { value: 60, variant: "primary", size: size.name }, size.name))) }), _jsx(CodeBlock, { code: `<ProgressBar value={60} variant="primary" size="xs" />
<ProgressBar value={60} variant="primary" size="sm" />
<ProgressBar value={60} variant="primary" size="md" />
<ProgressBar value={60} variant="primary" size="lg" />
<ProgressBar value={60} variant="primary" size="xl" />`, language: "tsx" })] })] }), _jsxs("section", { className: "labels-section", children: [_jsx("h2", { children: "Labels" }), _jsx("p", { children: "Show progress labels with the showLabel prop." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(ProgressBar, { value: 75, variant: "primary", showLabel: true }), _jsx(ProgressBar, { value: 50, variant: "success", showLabel: true }), _jsx(ProgressBar, { value: 25, variant: "warning", showLabel: true })] }), _jsx(CodeBlock, { code: `<ProgressBar value={75} variant="primary" showLabel />
<ProgressBar value={50} variant="success" showLabel />
<ProgressBar value={25} variant="warning" showLabel />`, language: "tsx" })] })] }), _jsxs("section", { className: "label-position-section", children: [_jsx("h2", { children: "Label Position" }), _jsx("p", { children: "Control the position of the progress label." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(ProgressBar, { value: 75, variant: "primary", showLabel: true, labelPosition: "top" }), _jsx(ProgressBar, { value: 50, variant: "success", showLabel: true, labelPosition: "bottom" })] }), _jsx(CodeBlock, { code: `<ProgressBar value={75} variant="primary" showLabel labelPosition="top" />
<ProgressBar value={50} variant="success" showLabel labelPosition="bottom" />`, language: "tsx" })] })] }), _jsxs("section", { className: "animated-section", children: [_jsx("h2", { children: "Animated Progress Bars" }), _jsx("p", { children: "Use the isAnimated prop for smooth progress animations." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(ProgressBar, { value: progress, variant: "primary", isAnimated: true, showLabel: true }), _jsx(ProgressBar, { value: progress, variant: "success", isAnimated: true, showLabel: true }), _jsx(ProgressBar, { value: progress, variant: "warning", isAnimated: true, showLabel: true })] }), _jsx(CodeBlock, { code: `const [progress, setProgress] = useState(0);

<ProgressBar value={progress} variant="primary" isAnimated showLabel />
<ProgressBar value={progress} variant="success" isAnimated showLabel />
<ProgressBar value={progress} variant="warning" isAnimated showLabel />`, language: "tsx" })] })] }), _jsxs("section", { className: "custom-max-section", children: [_jsx("h2", { children: "Custom Max Value" }), _jsx("p", { children: "Use the max prop to set a custom maximum value." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(ProgressBar, { value: 7, max: 10, variant: "primary", showLabel: true }), _jsx(ProgressBar, { value: 150, max: 200, variant: "success", showLabel: true }), _jsx(ProgressBar, { value: 3, max: 5, variant: "warning", showLabel: true })] }), _jsx(CodeBlock, { code: `<ProgressBar value={7} max={10} variant="primary" showLabel />
<ProgressBar value={150} max={200} variant="success" showLabel />
<ProgressBar value={3} max={5} variant="warning" showLabel />`, language: "tsx" })] })] }), _jsxs("section", { className: "complex-examples-section", children: [_jsx("h2", { children: "Complex Examples" }), _jsx("p", { children: "Real-world examples of progress bar usage patterns." }), _jsxs("div", { className: "complex-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "File Upload Progress" }), _jsxs("div", { style: { marginBottom: '1rem' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }, children: [_jsx("span", { children: "document.pdf" }), _jsx("span", { style: { fontSize: '0.875rem', color: 'var(--color-text-secondary)' }, children: "75%" })] }), _jsx(ProgressBar, { value: 75, variant: "primary", size: "sm" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }, children: [_jsx("span", { children: "image.jpg" }), _jsx("span", { style: { fontSize: '0.875rem', color: 'var(--color-text-secondary)' }, children: "45%" })] }), _jsx(ProgressBar, { value: 45, variant: "success", size: "sm" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Task Completion" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }, children: [_jsx("span", { children: "Project Setup" }), _jsx("span", { style: { fontSize: '0.875rem', color: 'var(--color-success)' }, children: "Complete" })] }), _jsx(ProgressBar, { value: 100, variant: "success", size: "sm" })] }), _jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }, children: [_jsx("span", { children: "Testing" }), _jsx("span", { style: { fontSize: '0.875rem', color: 'var(--color-warning)' }, children: "In Progress" })] }), _jsx(ProgressBar, { value: 65, variant: "warning", size: "sm" })] }), _jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }, children: [_jsx("span", { children: "Documentation" }), _jsx("span", { style: { fontSize: '0.875rem', color: 'var(--color-error)' }, children: "Pending" })] }), _jsx(ProgressBar, { value: 0, variant: "error", size: "sm" })] })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "System Resources" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }, children: [_jsx("span", { children: "CPU Usage" }), _jsx("span", { style: { fontSize: '0.875rem', color: 'var(--color-warning)' }, children: "85%" })] }), _jsx(ProgressBar, { value: 85, variant: "warning", size: "sm" })] }), _jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }, children: [_jsx("span", { children: "Memory Usage" }), _jsx("span", { style: { fontSize: '0.875rem', color: 'var(--color-success)' }, children: "45%" })] }), _jsx(ProgressBar, { value: 45, variant: "success", size: "sm" })] }), _jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }, children: [_jsx("span", { children: "Disk Space" }), _jsx("span", { style: { fontSize: '0.875rem', color: 'var(--color-error)' }, children: "95%" })] }), _jsx(ProgressBar, { value: 95, variant: "error", size: "sm" })] })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Quiz Progress" }), _jsxs("div", { style: { textAlign: 'center', marginBottom: '1rem' }, children: [_jsx("div", { style: { fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }, children: "Question 7 of 10" }), _jsx(ProgressBar, { value: 70, variant: "primary", size: "lg", showLabel: true })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }, children: [_jsx("span", { children: "Correct: 5" }), _jsx("span", { children: "Incorrect: 1" }), _jsx("span", { children: "Skipped: 1" })] })] })] })] }), _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: "number" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Current progress value (required)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "max" }), _jsx("td", { children: "number" }), _jsx("td", { children: "100" }), _jsx("td", { children: "Maximum progress value" })] }), _jsxs("tr", { children: [_jsx("td", { children: "variant" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'neutral'" }), _jsx("td", { children: "Progress bar variant (primary, secondary, success, error, warning, info, light, dark, neutral)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Progress bar size (xs, sm, md, lg, xl)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "showLabel" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Show progress percentage label" })] }), _jsxs("tr", { children: [_jsx("td", { children: "labelPosition" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'top'" }), _jsx("td", { children: "Label position (top, bottom)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isAnimated" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Enable smooth progress animations" })] }), _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 success variant for completed tasks" }), _jsx("li", { children: "Use warning variant for in-progress items" }), _jsx("li", { children: "Use error variant for failed or blocked items" }), _jsx("li", { children: "Show labels for important progress indicators" }), _jsx("li", { children: "Use animations for dynamic progress updates" }), _jsx("li", { children: "Provide context with descriptive labels" }), _jsx("li", { children: "Use appropriate sizes for the context" })] })] }), _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 progress bars for navigation" }), _jsx("li", { children: "Don't use error variant for normal progress" }), _jsx("li", { children: "Don't use too many animated progress bars" }), _jsx("li", { children: "Don't use progress bars without context" }), _jsx("li", { children: "Don't use very small progress bars for important data" }), _jsx("li", { children: "Don't use progress bars for static content" }), _jsx("li", { children: "Don't use progress bars for decorative purposes" })] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The ProgressBar component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Proper ARIA attributes for progress roles" }), _jsx("li", { children: "Screen reader support for progress values" }), _jsx("li", { children: "High contrast support for all variants" }), _jsx("li", { children: "Keyboard navigation support" }), _jsx("li", { children: "Semantic color usage for different states" })] })] })] })] }) }));
};
export default ProgressBarDocumentation;