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.
299 lines (295 loc) • 25.8 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 { Hero } from '../../components/organisms/Hero';
import { Icon } from '../../components/atoms/Icon';
import './ComponentDocumentation.scss';
const HeroDocumentation = () => {
return (_jsx("div", { className: "component-documentation", children: _jsxs("div", { className: "container", children: [_jsxs("div", { className: "doc-header", children: [_jsx("h1", { children: "Hero Component" }), _jsx("p", { className: "component-description", children: "A modern, welcoming hero component designed to create impactful first impressions. Features gradient backgrounds, smooth animations, and responsive layouts that adapt beautifully across all devices. Color variants are automatically generated from your design system's color definitions." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { language: "tsx", code: `import { Hero } 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: "Simple Hero" }), _jsx("div", { className: "example-content", children: _jsx(Hero, { title: "Welcome to the Future", subtitle: "Getting Started", description: "Experience the next generation of design with our modern hero components.", size: "md", background: "gradient", variant: "primary" }) }), _jsx(CodeBlock, { language: "tsx", code: `<Hero
title="Welcome to the Future"
subtitle="Getting Started"
description="Experience the next generation of design with our modern hero components."
size="md"
background="gradient"
variant="primary"
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Hero with Actions" }), _jsx("div", { className: "example-content", children: _jsx(Hero, { title: "Build Something Amazing", subtitle: "Modern Development", description: "Create stunning applications with our comprehensive toolkit and modern design system.", size: "lg", background: "gradient", variant: "secondary", actions: [
{
label: 'Get Started',
onClick: () => console.log('Get Started clicked'),
icon: 'arrow-right',
variant: 'primary',
size: 'lg'
},
{
label: 'View Documentation',
onClick: () => console.log('Documentation clicked'),
variant: 'secondary',
size: 'lg'
}
] }) }), _jsx(CodeBlock, { language: "tsx", code: `<Hero
title="Build Something Amazing"
subtitle="Modern Development"
description="Create stunning applications with our comprehensive toolkit and modern design system."
size="lg"
background="gradient"
variant="secondary"
actions={[
{
label: 'Get Started',
onClick: () => handleGetStarted(),
icon: 'arrow-right',
variant: 'primary',
size: 'lg'
},
{
label: 'View Documentation',
onClick: () => handleDocumentation(),
variant: 'secondary',
size: 'lg'
}
]}
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Color Variants" }), _jsx("div", { className: "example-content", children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-lg)' }, children: [_jsx(Hero, { title: "Success Hero", subtitle: "Achievement", description: "Celebrate your accomplishments with our success-themed hero.", size: "md", background: "gradient", variant: "success" }), _jsx(Hero, { title: "Warning Hero", subtitle: "Attention", description: "Important information that requires your attention.", size: "md", background: "gradient", variant: "warning" }), _jsx(Hero, { title: "Error Hero", subtitle: "Critical", description: "Critical issues that need immediate resolution.", size: "md", background: "gradient", variant: "error" }), _jsx(Hero, { title: "Custom Hero", subtitle: "Brand", description: "Showcase your brand with custom color variants.", size: "md", background: "gradient", variant: "custom" })] }) }), _jsx(CodeBlock, { language: "tsx", code: `<Hero
title="Success Hero"
subtitle="Achievement"
description="Celebrate your accomplishments with our success-themed hero."
size="md"
background="gradient"
variant="success"
/>
<Hero
title="Warning Hero"
subtitle="Attention"
description="Important information that requires your attention."
size="md"
background="gradient"
variant="warning"
/>
<Hero
title="Error Hero"
subtitle="Critical"
description="Critical issues that need immediate resolution."
size="md"
background="gradient"
variant="error"
/>
<Hero
title="Custom Hero"
subtitle="Brand"
description="Showcase your brand with custom color variants."
size="md"
background="gradient"
variant="custom"
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Solid Background Hero" }), _jsx("div", { className: "example-content", children: _jsx(Hero, { title: "Premium Experience", subtitle: "Enterprise Ready", description: "Built for scale with enterprise-grade features and modern architecture.", size: "lg", background: "solid", variant: "primary", actions: [
{
label: 'Start Free Trial',
onClick: () => console.log('Trial clicked'),
icon: 'star',
variant: 'primary',
size: 'lg'
}
] }) }), _jsx(CodeBlock, { language: "tsx", code: `<Hero
title="Premium Experience"
subtitle="Enterprise Ready"
description="Built for scale with enterprise-grade features and modern architecture."
size="lg"
background="solid"
actions={[
{
label: 'Start Free Trial',
onClick: () => handleTrial(),
icon: 'star',
variant: 'primary',
size: 'lg'
}
]}
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "None Background Hero" }), _jsx("div", { className: "example-content", children: _jsx(Hero, { title: "None Background Hero", background: "none" }) }), _jsx(CodeBlock, { language: "tsx", code: `<Hero
title="None Background Hero"
background="none"
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Hero with Visual Content" }), _jsx("div", { className: "example-content", children: _jsx(Hero, { title: "Visual Impact", subtitle: "Design First", description: "Combine powerful visuals with compelling content to create unforgettable experiences.", size: "xl", background: "gradient", actions: [
{
label: 'Explore Features',
onClick: () => console.log('Explore clicked'),
icon: 'eye',
variant: 'primary',
size: 'lg'
}
], children: _jsxs("div", { style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: 'var(--spacing-lg)',
padding: 'var(--spacing-xl)',
background: 'rgba(255, 255, 255, 0.1)',
borderRadius: 'var(--border-radius-lg)',
backdropFilter: 'blur(10px)',
border: '1px solid rgba(255, 255, 255, 0.2)'
}, children: [_jsx("div", { style: {
display: 'flex',
gap: 'var(--spacing-md)',
flexWrap: 'wrap',
justifyContent: 'center'
}, children: ['star', 'heart', 'check', 'zap'].map((icon, index) => (_jsxs("div", { style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: 'var(--spacing-xs)',
padding: 'var(--spacing-md)',
background: 'rgba(255, 255, 255, 0.1)',
borderRadius: 'var(--border-radius-md)',
minWidth: '80px'
}, children: [_jsx(Icon, { name: icon, size: "lg", color: "var(--color-white)" }), _jsxs("span", { style: {
fontSize: 'var(--font-size-xs)',
color: 'var(--color-white)',
textAlign: 'center'
}, children: ["Feature ", index + 1] })] }, index))) }), _jsx("p", { style: {
color: 'var(--color-white)',
textAlign: 'center',
fontSize: 'var(--font-size-sm)',
opacity: 0.9
}, children: "Modern design meets powerful functionality" })] }) }) }), _jsx(CodeBlock, { language: "tsx", code: `<Hero
title="Visual Impact"
subtitle="Design First"
description="Combine powerful visuals with compelling content to create unforgettable experiences."
size="xl"
background="gradient"
actions={[
{
label: 'Explore Features',
onClick: () => handleExplore(),
icon: 'eye',
variant: 'primary',
size: 'lg'
}
]}
>
<div className="hero-visual-content">
<div className="feature-grid">
{features.map((feature, index) => (
<div key={index} className="feature-item">
<Icon name={feature.icon} size="lg" />
<span>{feature.label}</span>
</div>
))}
</div>
<p className="hero-tagline">
Modern design meets powerful functionality
</p>
</div>
</Hero>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Image Background Hero" }), _jsx("div", { className: "example-content", children: _jsx(Hero, { title: "Immersive Experience", subtitle: "Visual Storytelling", description: "Create compelling narratives with stunning imagery and modern typography.", size: "xl", background: "image", backgroundImage: "https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1200&h=800&fit=crop", actions: [
{
label: 'Learn More',
onClick: () => console.log('Learn More clicked'),
icon: 'book-open',
variant: 'primary',
size: 'lg'
},
{
label: 'Watch Demo',
onClick: () => console.log('Watch Demo clicked'),
icon: 'play',
variant: 'secondary',
size: 'lg'
}
] }) }), _jsx(CodeBlock, { language: "tsx", code: `<Hero
title="Immersive Experience"
subtitle="Visual Storytelling"
description="Create compelling narratives with stunning imagery and modern typography."
size="xl"
background="image"
backgroundImage="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1200&h=800&fit=crop"
actions={[
{
label: 'Learn More',
onClick: () => handleLearnMore(),
icon: 'book-open',
variant: 'primary',
size: 'lg'
},
{
label: 'Watch Demo',
onClick: () => handleWatchDemo(),
icon: 'play',
variant: 'secondary',
size: 'lg'
}
]}
/>` })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Complex Hero with Multiple Elements" }), _jsx("div", { className: "example-content", children: _jsx(Hero, { title: "Enterprise Platform", subtitle: "Scale with Confidence", description: "The complete solution for modern enterprises. Built for performance, designed for growth.", size: "xl", background: "gradient", actions: [
{
label: 'Request Demo',
onClick: () => console.log('Demo clicked'),
icon: 'calendar',
variant: 'primary',
size: 'lg'
},
{
label: 'Contact Sales',
onClick: () => console.log('Sales clicked'),
icon: 'phone',
variant: 'secondary',
size: 'lg'
}
], children: _jsx("div", { style: {
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
gap: 'var(--spacing-lg)',
width: '100%',
maxWidth: '600px'
}, children: [
{ icon: 'users', label: '10K+ Users', value: 'Active' },
{ icon: 'zap', label: '99.9% Uptime', value: 'Reliable' },
{ icon: 'shield', label: 'Enterprise', value: 'Secure' }
].map((stat, index) => (_jsxs("div", { style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: 'var(--spacing-lg)',
background: 'rgba(255, 255, 255, 0.1)',
borderRadius: 'var(--border-radius-lg)',
backdropFilter: 'blur(10px)',
border: '1px solid rgba(255, 255, 255, 0.2)',
textAlign: 'center'
}, children: [_jsx(Icon, { name: stat.icon, size: "xl", color: "var(--color-white)" }), _jsx("div", { style: {
fontSize: 'var(--font-size-lg)',
fontWeight: 'var(--font-weight-bold)',
color: 'var(--color-white)',
marginBottom: 'var(--spacing-xs)'
}, children: stat.label }), _jsx("div", { style: {
fontSize: 'var(--font-size-sm)',
color: 'var(--color-white)',
opacity: 0.8
}, children: stat.value })] }, index))) }) }) }), _jsx(CodeBlock, { language: "tsx", code: `<Hero
title="Enterprise Platform"
subtitle="Scale with Confidence"
description="The complete solution for modern enterprises. Built for performance, designed for growth."
size="xl"
background="gradient"
actions={[
{
label: 'Request Demo',
onClick: () => handleDemo(),
icon: 'calendar',
variant: 'primary',
size: 'lg'
},
{
label: 'Contact Sales',
onClick: () => handleSales(),
icon: 'phone',
variant: 'secondary',
size: 'lg'
}
]}
>
<div className="stats-grid">
{stats.map((stat, index) => (
<div key={index} className="stat-card">
<Icon name={stat.icon} size="xl" />
<div className="stat-value">{stat.label}</div>
<div className="stat-label">{stat.value}</div>
</div>
))}
</div>
</Hero>` })] })] }), _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 hero title with gradient text effect" })] }), _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 with accent line decoration" })] }), _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: "Hero description text" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "actions" }) }), _jsx("td", { children: _jsx("code", { children: "HeroAction[]" }) }), _jsx("td", { children: _jsx("code", { children: "[]" }) }), _jsx("td", { children: "Array of action buttons with hover effects" })] }), _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: "Hero size affecting height and typography" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "background" }) }), _jsx("td", { children: _jsx("code", { children: 'gradient | solid | image' }) }), _jsx("td", { children: _jsx("code", { children: "gradient" }) }), _jsx("td", { children: "Background style with modern effects" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "backgroundImage" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Image URL for image background variant" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "variant" }) }), _jsx("td", { children: _jsx("code", { children: "Variant" }) }), _jsx("td", { children: _jsx("code", { children: "primary" }) }), _jsx("td", { children: "Color variant for accent elements (subtitle, title underline)" })] }), _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 visual content (icons, stats, etc.)" })] })] })] }) }) })] }), _jsxs("section", { className: "styling-section", children: [_jsx("h2", { children: "Styling" }), _jsx("p", { children: "The Hero component features modern design patterns with gradient text effects, smooth animations, and responsive layouts." }), _jsx("h3", { children: "Background Variants" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Gradient:" }), " Multi-color gradient with subtle patterns and radial overlays"] }), _jsxs("li", { children: [_jsx("strong", { children: "Solid:" }), " Solid color with gradient overlays and modern typography"] }), _jsxs("li", { children: [_jsx("strong", { children: "Image:" }), " Image background with gradient overlay for text readability"] })] }), _jsx("h3", { children: "Modern Features" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Gradient Text:" }), " Titles use gradient text effects for visual appeal"] }), _jsxs("li", { children: [_jsx("strong", { children: "Accent Lines:" }), " Subtle decorative elements on subtitles and titles"] }), _jsxs("li", { children: [_jsx("strong", { children: "Smooth Animations:" }), " Staggered entrance animations for all elements"] }), _jsxs("li", { children: [_jsx("strong", { children: "Hover Effects:" }), " Interactive buttons with shine effects and icon animations"] }), _jsxs("li", { children: [_jsx("strong", { children: "Glass Morphism:" }), " Support for backdrop blur and transparency effects"] })] }), _jsx("h3", { children: "Sizes" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Small (sm):" }), " Compact 60vh height for minimal hero sections"] }), _jsxs("li", { children: [_jsx("strong", { children: "Medium (md):" }), " Standard 70vh height (default)"] }), _jsxs("li", { children: [_jsx("strong", { children: "Large (lg):" }), " Prominent 80vh height for featured content"] }), _jsxs("li", { children: [_jsx("strong", { children: "Extra Large (xl):" }), " Full 100vh height for immersive experiences"] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs("ul", { children: [_jsx("li", { children: "Semantic HTML structure with proper heading hierarchy" }), _jsx("li", { children: "High contrast text with gradient fallbacks for screen readers" }), _jsx("li", { children: "Keyboard navigation support for all interactive elements" }), _jsx("li", { children: "Focus management and visible focus indicators" }), _jsx("li", { children: "ARIA labels for decorative elements" }), _jsx("li", { children: "Responsive design that works across all devices" })] })] }), _jsxs("section", { className: "browser-support-section", children: [_jsx("h2", { children: "Browser Support" }), _jsxs("ul", { children: [_jsx("li", { children: "Chrome 60+ (Full support for all features)" }), _jsx("li", { children: "Firefox 55+ (Full support for all features)" }), _jsx("li", { children: "Safari 12+ (Full support for all features)" }), _jsx("li", { children: "Edge 79+ (Full support for all features)" }), _jsx("li", { children: "Mobile browsers with full responsive support" })] })] })] }) }));
};
export default HeroDocumentation;