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.
118 lines (117 loc) • 14.3 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Card } from '../../components/atoms/Card';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { PageHeader } from '../../components/organisms/PageHeader';
import './ComponentDocumentation.scss';
const PageHeaderDocumentation = () => {
return (_jsx("div", { className: "component-documentation", children: _jsxs("div", { className: "container", children: [_jsxs("div", { className: "doc-header", children: [_jsx("h1", { children: "PageHeader Component" }), _jsx("p", { className: "component-description", children: "A flexible and feature-rich page header component that provides various layouts and configurations for different use cases." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { language: "tsx", code: `import { PageHeader } from 'react-vite-themes';` })] }), _jsxs("section", { className: "usage-section", children: [_jsx("h2", { children: "Usage Examples" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Basic Page Header" }), _jsx("div", { className: "example-content", children: _jsx(PageHeader, { title: "Dashboard", subtitle: "Overview", description: "Welcome to your dashboard. Here you can manage your projects and view important metrics." }) }), _jsx(CodeBlock, { language: "tsx", code: `<PageHeader
title="Dashboard"
subtitle="Overview"
description="Welcome to your dashboard. Here you can manage your projects and view important metrics."
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Page Header with Actions" }), _jsx("div", { className: "example-content", children: _jsx(PageHeader, { title: "Projects", subtitle: "Management", description: "Create and manage your projects", actions: [
{
label: 'New Project',
onClick: () => console.log('New Project clicked'),
icon: 'plus',
variant: 'primary'
},
{
label: 'Import',
onClick: () => console.log('Import clicked'),
icon: 'download',
variant: 'secondary'
}
] }) }), _jsx(CodeBlock, { language: "tsx", code: `<PageHeader
title="Projects"
subtitle="Management"
description="Create and manage your projects"
actions={[
{
label: 'New Project',
onClick: () => handleNewProject(),
icon: 'plus',
variant: 'primary'
},
{
label: 'Import',
onClick: () => handleImport(),
icon: 'download',
variant: 'secondary'
}
]}
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Page Header with Breadcrumbs" }), _jsx("div", { className: "example-content", children: _jsx(PageHeader, { title: "Project Settings", breadcrumbs: [
{ label: 'Projects', href: '/projects', icon: 'folder' },
{ label: 'My Project', href: '/projects/123' },
{ label: 'Settings' }
], actions: [
{
label: 'Save Changes',
onClick: () => console.log('Save clicked'),
icon: 'save',
variant: 'primary'
}
] }) }), _jsx(CodeBlock, { language: "tsx", code: `<PageHeader
title="Project Settings"
breadcrumbs={[
{ label: 'Projects', href: '/projects', icon: 'folder' },
{ label: 'My Project', href: '/projects/123' },
{ label: 'Settings' }
]}
actions={[
{
label: 'Save Changes',
onClick: () => handleSave(),
icon: 'save',
variant: 'primary'
}
]}
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Minimal Header with Back Button" }), _jsx("div", { className: "example-content", children: _jsx(PageHeader, { title: "Edit Profile", variant: "minimal", size: "sm", showBackButton: true, backButtonText: "Back to Profile", onBackClick: () => console.log('Back clicked'), actions: [
{
label: 'Save',
onClick: () => console.log('Save clicked'),
icon: 'check',
variant: 'primary'
}
] }) }), _jsx(CodeBlock, { language: "tsx", code: `<PageHeader
title="Edit Profile"
variant="minimal"
size="sm"
showBackButton={true}
backButtonText="Back to Profile"
onBackClick={() => navigate('/profile')}
actions={[
{
label: 'Save',
onClick: () => handleSave(),
icon: 'check',
variant: 'primary'
}
]}
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Page Header with Custom Content" }), _jsx("div", { className: "example-content", children: _jsx(PageHeader, { title: "Analytics Dashboard", subtitle: "Performance", description: "Track your application performance and user engagement metrics.", children: _jsxs("div", { style: {
display: 'flex',
gap: 'var(--spacing-lg)',
marginTop: 'var(--spacing-md)',
justifyContent: 'center'
}, children: [_jsxs("div", { style: { textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 'var(--font-size-2xl)', fontWeight: 'var(--font-weight-bold)', color: 'var(--color-primary-600)' }, children: "1,234" }), _jsx("div", { style: { fontSize: 'var(--font-size-sm)', color: 'var(--color-text-secondary)' }, children: "Active Users" })] }), _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 'var(--font-size-2xl)', fontWeight: 'var(--font-weight-bold)', color: 'var(--color-success-600)' }, children: "98.5%" }), _jsx("div", { style: { fontSize: 'var(--font-size-sm)', color: 'var(--color-text-secondary)' }, children: "Uptime" })] }), _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx("div", { style: { fontSize: 'var(--font-size-2xl)', fontWeight: 'var(--font-weight-bold)', color: 'var(--color-warning-600)' }, children: "2.3s" }), _jsx("div", { style: { fontSize: 'var(--font-size-sm)', color: 'var(--color-text-secondary)' }, children: "Avg Response" })] })] }) }) }), _jsx(CodeBlock, { language: "tsx", code: `<PageHeader
title="Analytics Dashboard"
subtitle="Performance"
description="Track your application performance and user engagement metrics."
>
<div className="analytics-summary">
<div className="metric">
<span className="metric-value">1,234</span>
<span className="metric-label">Active Users</span>
</div>
<div className="metric">
<span className="metric-value">98.5%</span>
<span className="metric-label">Uptime</span>
</div>
<div className="metric">
<span className="metric-value">2.3s</span>
<span className="metric-label">Avg Response</span>
</div>
</div>
</PageHeader>` })] })] }), _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: _jsx("code", { children: "title" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "required" }) }), _jsx("td", { children: "The main page title" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "subtitle" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Optional subtitle text" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "description" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Optional description text" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "actions" }) }), _jsx("td", { children: _jsx("code", { children: "PageHeaderAction[]" }) }), _jsx("td", { children: _jsx("code", { children: "[]" }) }), _jsx("td", { children: "Array of action buttons" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "breadcrumbs" }) }), _jsx("td", { children: _jsx("code", { children: "PageHeaderBreadcrumb[]" }) }), _jsx("td", { children: _jsx("code", { children: "[]" }) }), _jsx("td", { children: "Array of breadcrumb items" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "variant" }) }), _jsx("td", { children: _jsx("code", { children: 'default | centered | minimal' }) }), _jsx("td", { children: _jsx("code", { children: "default" }) }), _jsx("td", { children: "Header layout variant" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "size" }) }), _jsx("td", { children: _jsx("code", { children: 'sm | md | lg | xl' }) }), _jsx("td", { children: _jsx("code", { children: "md" }) }), _jsx("td", { children: "Header size" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "showBackButton" }) }), _jsx("td", { children: _jsx("code", { children: "boolean" }) }), _jsx("td", { children: _jsx("code", { children: "false" }) }), _jsx("td", { children: "Whether to show back button" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "onBackClick" }) }), _jsx("td", { children: _jsx("code", { children: '() => void' }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Custom back button handler" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "backButtonText" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "Back" }) }), _jsx("td", { children: "Back button text" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "className" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "''" }) }), _jsx("td", { children: "Additional CSS classes" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "children" }) }), _jsx("td", { children: _jsx("code", { children: "React.ReactNode" }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Custom content" })] })] })] }) }) })] }), _jsxs("section", { className: "styling-section", children: [_jsx("h2", { children: "Styling" }), _jsx("p", { children: "The PageHeader component uses CSS custom properties for theming and integrates seamlessly with the design system. All variants support light and dark themes automatically." }), _jsx("h3", { children: "Variants" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Default:" }), " Standard layout with title on the left and actions on the right"] }), _jsxs("li", { children: [_jsx("strong", { children: "Centered:" }), " Centered layout with title and actions in the middle"] }), _jsxs("li", { children: [_jsx("strong", { children: "Minimal:" }), " Compact layout with minimal padding and no border"] })] }), _jsx("h3", { children: "Sizes" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Small (sm):" }), " Compact header with smaller text"] }), _jsxs("li", { children: [_jsx("strong", { children: "Medium (md):" }), " Standard size (default)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Large (lg):" }), " Larger text and spacing"] }), _jsxs("li", { children: [_jsx("strong", { children: "Extra Large (xl):" }), " Maximum size for hero sections"] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs("ul", { children: [_jsxs("li", { children: ["Proper semantic HTML structure with ", _jsx("code", { children: "<header>" }), " element"] }), _jsx("li", { children: "ARIA labels for breadcrumb navigation" }), _jsx("li", { children: "Keyboard navigation support" }), _jsx("li", { children: "Focus management for interactive elements" }), _jsx("li", { children: "Screen reader friendly structure" })] })] }), _jsxs("section", { className: "browser-support-section", children: [_jsx("h2", { children: "Browser Support" }), _jsxs("ul", { children: [_jsx("li", { children: "Chrome 60+" }), _jsx("li", { children: "Firefox 55+" }), _jsx("li", { children: "Safari 12+" }), _jsx("li", { children: "Edge 79+" })] })] })] }) }));
};
export default PageHeaderDocumentation;