react-vite-themes
Version:
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.
90 lines (87 loc) • 19 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import { Breadcrumb } from '../../components/atoms/Breadcrumb';
import { Card } from '../../components/atoms/Card';
import { Toggle } from '../../components/atoms/Toggle';
import { Select } from '../../components/atoms/Select';
import { Typography } from '../../components/atoms/Typography';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import './ComponentDocumentation.scss';
const BreadcrumbDocumentation = () => {
const [size, setSize] = useState('md');
const [variant, setVariant] = useState('default');
const [isRounded, setIsRounded] = useState(false);
const [separator, setSeparator] = useState('/');
const sampleItems = [
{ id: 'home', label: 'Home', href: '#', icon: 'home' },
{ id: 'products', label: 'Products', href: '#', icon: 'tag' },
{ id: 'category', label: 'Electronics', href: '#', icon: 'phone' },
{ id: 'product', label: 'Smartphone Pro', icon: 'phone' }
];
const navigationItems = [
{ id: 'dashboard', label: 'Dashboard', href: '#', icon: 'grid' },
{ id: 'users', label: 'Users', href: '#', icon: 'users' },
{ id: 'settings', label: 'Settings', href: '#', icon: 'settings' }
];
const ecommerceItems = [
{ id: 'home', label: 'Home', href: '#', icon: 'home' },
{ id: 'shop', label: 'Shop', href: '#', icon: 'shopping-cart' },
{ id: 'category', label: 'Clothing', href: '#', icon: 'tag' },
{ id: 'subcategory', label: 'Men', href: '#', icon: 'user' },
{ id: 'product', label: 'T-Shirt Collection', icon: 'tag' }
];
const codeExample = `import { Breadcrumb } from '@my-theme-system/components';
const MyComponent = () => {
const items = [
{ id: 'home', label: 'Home', href: '/', icon: 'home' },
{ id: 'products', label: 'Products', href: '/products', icon: 'package' },
{ id: 'category', label: 'Electronics', icon: 'smartphone' }
];
return (
<Breadcrumb
items={items}
separator="/"
size="md"
variant="default"
isRounded={false}
/>
);
};`;
const propsTable = [
{ prop: 'items', type: 'BreadcrumbItem[]', required: 'Yes', description: 'Array of breadcrumb items to display' },
{ prop: 'separator', type: 'string', required: 'No', description: 'Separator between breadcrumb items (default: "/")' },
{ prop: 'size', type: 'Size', required: 'No', description: 'Size variant: xs, sm, md, lg, xl (default: "md")' },
{ prop: 'variant', type: 'string', required: 'No', description: 'Visual variant: default, elevated, glass, bordered, or color names' },
{ prop: 'isRounded', type: 'boolean', required: 'No', description: 'Whether to use rounded corners for links (default: false)' },
{ prop: 'className', type: 'string', required: 'No', description: 'Additional CSS classes' }
];
const breadcrumbItemProps = [
{ prop: 'id', type: 'string', required: 'No', description: 'Unique identifier for the item' },
{ prop: 'label', type: 'string', required: 'Yes', description: 'Text to display for the breadcrumb item' },
{ prop: 'href', type: 'string', required: 'No', description: 'URL for clickable breadcrumb items' },
{ prop: 'icon', type: 'string', required: 'No', description: 'Icon name to display before the label' },
{ prop: 'onClick', type: '() => void', required: 'No', description: 'Click handler for the breadcrumb item' }
];
return (_jsxs("div", { className: "component-documentation", children: [_jsxs("div", { className: "component-documentation__header", children: [_jsx(Typography, { variant: "h1", className: "component-documentation__title", children: "Breadcrumb Component" }), _jsx(Typography, { variant: "p", size: "lg", className: "component-documentation__description", children: "A navigation component that helps users understand their current location within a website or application hierarchy." })] }), _jsxs("div", { className: "component-documentation__content", children: [_jsxs("section", { className: "component-documentation__section", children: [_jsx(Typography, { variant: "h2", className: "component-documentation__section-title", children: "Basic Usage" }), _jsx(Typography, { variant: "p", className: "component-documentation__section-description", children: "The Breadcrumb component displays a hierarchical navigation path with clickable links and separators." }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h3", children: "Default Breadcrumb" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems }) })] }), _jsx(CodeBlock, { code: codeExample, language: "tsx" })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx(Typography, { variant: "h2", className: "component-documentation__section-title", children: "Variants" }), _jsx(Typography, { variant: "p", className: "component-documentation__section-description", children: "Choose from different visual styles to match your design system." }), _jsxs("div", { className: "component-documentation__demo-grid", children: [_jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Default" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, variant: "default" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Elevated" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, variant: "elevated" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Glass" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, variant: "glass" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Bordered" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, variant: "bordered" }) })] })] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx(Typography, { variant: "h2", className: "component-documentation__section-title", children: "Sizes" }), _jsx(Typography, { variant: "p", className: "component-documentation__section-description", children: "Different size variants to accommodate various design contexts." }), _jsxs("div", { className: "component-documentation__demo-grid", children: [_jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Extra Small (xs)" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, size: "xs" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Small (sm)" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, size: "sm" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Medium (md)" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, size: "md" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Large (lg)" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, size: "lg" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Extra Large (xl)" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, size: "xl" }) })] })] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx(Typography, { variant: "h2", className: "component-documentation__section-title", children: "Color Variants" }), _jsx(Typography, { variant: "p", className: "component-documentation__section-description", children: "Apply theme colors to create branded breadcrumbs." }), _jsxs("div", { className: "component-documentation__demo-grid", children: [_jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Primary" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, variant: "primary" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Success" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, variant: "success" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Warning" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, variant: "warning" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Danger" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, variant: "error" }) })] })] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx(Typography, { variant: "h2", className: "component-documentation__section-title", children: "Custom Separators" }), _jsx(Typography, { variant: "p", className: "component-documentation__section-description", children: "Customize the separator between breadcrumb items." }), _jsxs("div", { className: "component-documentation__demo-grid", children: [_jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Forward Slash (/)" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, separator: "/" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Greater Than (>)" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, separator: ">" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Arrow (\u2192)" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, separator: "\u2192" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Bullet (\u2022)" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: sampleItems, separator: "\u2022" }) })] })] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx(Typography, { variant: "h2", className: "component-documentation__section-title", children: "Interactive Examples" }), _jsx(Typography, { variant: "p", className: "component-documentation__section-description", children: "Customize the breadcrumb appearance using the controls below." }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h3", children: "Customize Breadcrumb" }) }), _jsxs(Card.Body, { children: [_jsxs("div", { className: "component-documentation__controls", children: [_jsxs("div", { className: "component-documentation__control", children: [_jsx("label", { children: "Size:" }), _jsx(Select, { value: size, onChange: (value) => setSize(value), options: [
{ value: 'xs', label: 'Extra Small' },
{ value: 'sm', label: 'Small' },
{ value: 'md', label: 'Medium' },
{ value: 'lg', label: 'Large' },
{ value: 'xl', label: 'Extra Large' }
] })] }), _jsxs("div", { className: "component-documentation__control", children: [_jsx("label", { children: "Variant:" }), _jsx(Select, { value: variant, onChange: (value) => setVariant(value), options: [
{ value: 'default', label: 'Default' },
{ value: 'elevated', label: 'Elevated' },
{ value: 'glass', label: 'Glass' },
{ value: 'bordered', label: 'Bordered' }
] })] }), _jsxs("div", { className: "component-documentation__control", children: [_jsx("label", { children: "Separator:" }), _jsx(Select, { value: separator, onChange: (value) => setSeparator(value), options: [
{ value: '/', label: 'Forward Slash (/)' },
{ value: '>', label: 'Greater Than (>)' },
{ value: '→', label: 'Arrow (→)' },
{ value: '•', label: 'Bullet (•)' }
] })] }), _jsxs("div", { className: "component-documentation__control", children: [_jsx("label", { children: "Rounded:" }), _jsx(Toggle, { checked: isRounded, onChange: setIsRounded })] })] }), _jsx("div", { className: "component-documentation__demo-result", children: _jsx(Breadcrumb, { items: sampleItems, size: size, variant: variant, separator: separator, isRounded: isRounded }) })] })] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx(Typography, { variant: "h2", className: "component-documentation__section-title", children: "Real-world Examples" }), _jsx(Typography, { variant: "p", className: "component-documentation__section-description", children: "Common use cases and implementations for breadcrumbs." }), _jsxs("div", { className: "component-documentation__demo-grid", children: [_jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "E-commerce Navigation" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: ecommerceItems, variant: "primary", separator: ">" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Admin Dashboard" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: navigationItems, variant: "elevated", separator: "\u2192" }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h4", children: "Documentation Site" }) }), _jsx(Card.Body, { children: _jsx(Breadcrumb, { items: [
{ id: 'docs', label: 'Documentation', href: '#', icon: 'book' },
{ id: 'components', label: 'Components', href: '#', icon: 'tag' },
{ id: 'breadcrumb', label: 'Breadcrumb', icon: 'tag' }
], variant: "glass", separator: "\u2022" }) })] })] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx(Typography, { variant: "h2", className: "component-documentation__section-title", children: "Props" }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h3", children: "Breadcrumb Props" }) }), _jsx(Card.Body, { children: _jsx("div", { className: "component-documentation__props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Required" }), _jsx("th", { children: "Description" })] }) }), _jsx("tbody", { children: propsTable.map((row) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: row.prop }) }), _jsx("td", { children: _jsx("code", { children: row.type }) }), _jsx("td", { children: row.required }), _jsx("td", { children: row.description })] }, row.prop))) })] }) }) })] }), _jsxs(Card, { className: "component-documentation__demo-card", children: [_jsx(Card.Header, { children: _jsx(Typography, { variant: "h3", children: "BreadcrumbItem Props" }) }), _jsx(Card.Body, { children: _jsx("div", { className: "component-documentation__props-table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Prop" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Required" }), _jsx("th", { children: "Description" })] }) }), _jsx("tbody", { children: breadcrumbItemProps.map((row) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: row.prop }) }), _jsx("td", { children: _jsx("code", { children: row.type }) }), _jsx("td", { children: row.required }), _jsx("td", { children: row.description })] }, row.prop))) })] }) }) })] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx(Typography, { variant: "h2", className: "component-documentation__section-title", children: "Accessibility" }), _jsx(Typography, { variant: "p", className: "component-documentation__section-description", children: "The Breadcrumb component follows accessibility best practices:" }), _jsxs("ul", { className: "component-documentation__accessibility-list", children: [_jsxs("li", { children: ["Uses semantic ", _jsx("code", { children: "nav" }), " element with ", _jsx("code", { children: "aria-label=\"Breadcrumb\"" })] }), _jsxs("li", { children: ["Proper heading structure with ", _jsx("code", { children: "h1" }), " through ", _jsx("code", { children: "h6" }), " hierarchy"] }), _jsx("li", { children: "Focus management with visible focus indicators" }), _jsx("li", { children: "Keyboard navigation support" }), _jsx("li", { children: "Screen reader friendly with proper ARIA attributes" }), _jsx("li", { children: "High contrast ratios for text and interactive elements" })] })] })] })] }));
};
export default BreadcrumbDocumentation;