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.
99 lines (98 loc) • 25.1 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Link } from 'react-router-dom';
import { Image } from '../../components/atoms/Image';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Card } from '../../components/atoms/Card';
import { Alert } from '../../components/atoms/Alert';
import { Icon } from '../../components/atoms/Icon';
const ImageDocumentation = () => {
const sampleImages = {
landscape: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop',
portrait: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=600&fit=crop',
square: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop',
nature: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&h=600&fit=crop',
city: 'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=800&h=600&fit=crop',
error: 'https://invalid-url-that-will-fail.com/image.jpg'
};
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: "Image Component" }), _jsx("p", { className: "component-description", children: "A flexible image component with loading states, error handling, responsive design, and multiple styling options. Perfect for displaying images with consistent behavior across your application." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { { Image } } from '../../components/atoms/Image';", language: "typescript" })] }), _jsxs("section", { className: "usage-section", children: [_jsx("h2", { children: "Basic Usage" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.landscape, alt: "Beautiful landscape", size: "md", style: "natural" }) }), _jsx(CodeBlock, { code: `<Image
src="https://example.com/image.jpg"
alt="Beautiful landscape"
size="md"
style="natural"
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "variants-section", children: [_jsx("h2", { children: "Variants" }), _jsx("p", { children: "Choose from different visual styles for the image container." }), _jsxs("div", { className: "variants-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: "Default" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.landscape, alt: "Default variant", variant: "default", size: "md" }) }), _jsx(CodeBlock, { code: `<Image variant="default" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: "Elevated" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.landscape, alt: "Elevated variant", variant: "elevated", size: "md" }) }), _jsx(CodeBlock, { code: `<Image variant="elevated" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: "Glass" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.landscape, alt: "Glass variant", variant: "glass", size: "md" }) }), _jsx(CodeBlock, { code: `<Image variant="glass" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: "Bordered" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.landscape, alt: "Bordered variant", variant: "bordered", size: "md" }) }), _jsx(CodeBlock, { code: `<Image variant="bordered" />`, language: "tsx" })] })] })] }), _jsxs("section", { className: "sizes-section", children: [_jsx("h2", { children: "Sizes" }), _jsx("p", { children: "Control the image size using the size prop." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' }, children: [_jsxs("div", { style: { textAlign: 'center' }, children: [_jsx(Image, { src: sampleImages.square, alt: "Extra small", size: "xs", style: "square" }), _jsx("p", { style: { fontSize: '0.875rem', marginTop: '0.5rem' }, children: "XS" })] }), _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx(Image, { src: sampleImages.square, alt: "Small", size: "sm", style: "square" }), _jsx("p", { style: { fontSize: '0.875rem', marginTop: '0.5rem' }, children: "SM" })] }), _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx(Image, { src: sampleImages.square, alt: "Medium", size: "md", style: "square" }), _jsx("p", { style: { fontSize: '0.875rem', marginTop: '0.5rem' }, children: "MD" })] }), _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx(Image, { src: sampleImages.square, alt: "Large", size: "lg", style: "square" }), _jsx("p", { style: { fontSize: '0.875rem', marginTop: '0.5rem' }, children: "LG" })] }), _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx(Image, { src: sampleImages.square, alt: "Extra large", size: "xl", style: "square" }), _jsx("p", { style: { fontSize: '0.875rem', marginTop: '0.5rem' }, children: "XL" })] })] }), _jsx(CodeBlock, { code: `<Image size="xs" />
<Image size="sm" />
<Image size="md" />
<Image size="lg" />
<Image size="xl" />`, language: "tsx" })] })] }), _jsxs("section", { className: "styles-section", children: [_jsx("h2", { children: "Styles" }), _jsx("p", { children: "Choose from different image aspect ratios and styling options." }), _jsxs("div", { className: "styles-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "style-card", children: [_jsx("h3", { children: "Natural" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.landscape, alt: "Natural style", style: "natural", size: "md" }) }), _jsx(CodeBlock, { code: `<Image style="natural" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "style-card", children: [_jsx("h3", { children: "Square" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.square, alt: "Square style", style: "square", size: "md" }) }), _jsx(CodeBlock, { code: `<Image style="square" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "style-card", children: [_jsx("h3", { children: "Rectangle" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.landscape, alt: "Rectangle style", style: "rectangle", size: "md" }) }), _jsx(CodeBlock, { code: `<Image style="rectangle" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "style-card", children: [_jsx("h3", { children: "Circle" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.square, alt: "Circle style", style: "circle", size: "md", isRounded: true }) }), _jsx(CodeBlock, { code: `<Image style="circle" isRounded />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "style-card", children: [_jsx("h3", { children: "Landscape" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.landscape, alt: "Landscape style", style: "landscape", size: "md" }) }), _jsx(CodeBlock, { code: `<Image style="landscape" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "style-card", children: [_jsx("h3", { children: "Portrait" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.portrait, alt: "Portrait style", style: "portrait", size: "md" }) }), _jsx(CodeBlock, { code: `<Image style="portrait" />`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "style-card", children: [_jsx("h3", { children: "Glass" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.landscape, alt: "Glass style", style: "glass", size: "md" }) }), _jsx(CodeBlock, { code: `<Image style="glass" />`, language: "tsx" })] })] })] }), _jsxs("section", { className: "rounded-section", children: [_jsx("h2", { children: "Rounded Images" }), _jsx("p", { children: "Add rounded corners to any image style." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' }, children: [_jsxs("div", { style: { textAlign: 'center' }, children: [_jsx(Image, { src: sampleImages.square, alt: "Rounded square", style: "square", size: "md", isRounded: true }), _jsx("p", { style: { fontSize: '0.875rem', marginTop: '0.5rem' }, children: "Rounded Square" })] }), _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx(Image, { src: sampleImages.landscape, alt: "Rounded landscape", style: "landscape", size: "md", isRounded: true }), _jsx("p", { style: { fontSize: '0.875rem', marginTop: '0.5rem' }, children: "Rounded Landscape" })] }), _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx(Image, { src: sampleImages.portrait, alt: "Rounded portrait", style: "portrait", size: "md", isRounded: true }), _jsx("p", { style: { fontSize: '0.875rem', marginTop: '0.5rem' }, children: "Rounded Portrait" })] })] }), _jsx(CodeBlock, { code: `<Image isRounded style="square" />
<Image isRounded style="landscape" />
<Image isRounded style="portrait" />`, language: "tsx" })] })] }), _jsxs("section", { className: "responsive-section", children: [_jsx("h2", { children: "Responsive Images" }), _jsx("p", { children: "Make images responsive to their container size." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsxs("div", { style: {
width: '100%',
maxWidth: '600px',
border: '1px solid var(--color-border)',
padding: '1rem',
borderRadius: '0.5rem'
}, children: [_jsx(Image, { src: sampleImages.landscape, alt: "Responsive image", style: "natural", isResponsive: true }), _jsx("p", { style: { fontSize: '0.875rem', marginTop: '0.5rem', textAlign: 'center' }, children: "This image will scale with its container" })] }) }), _jsx(CodeBlock, { code: `<Image
src="image.jpg"
alt="Responsive image"
isResponsive
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "loading-section", children: [_jsx("h2", { children: "Loading States" }), _jsx("p", { children: "Images show loading spinners while loading." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsx(Image, { src: "https://slow-loading-image.com/large-image.jpg", alt: "Loading image", size: "md", style: "square", isLoading: true }) }), _jsx(CodeBlock, { code: `<Image
src="image.jpg"
alt="Loading image"
isLoading
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "error-section", children: [_jsx("h2", { children: "Error Handling" }), _jsx("p", { children: "Handle image loading errors with fallbacks." }), _jsxs("div", { className: "error-examples", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Default Error State" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.error, alt: "Error image", size: "md", style: "square", isError: true }) }), _jsx(CodeBlock, { code: `<Image
src="invalid-url.jpg"
alt="Error image"
isError
/>`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Custom Fallback" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.error, alt: "Error image with fallback", size: "md", style: "square", fallback: _jsxs("div", { style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
padding: '1rem',
backgroundColor: 'var(--color-background-secondary)',
borderRadius: '0.5rem'
}, children: [_jsx(Icon, { name: "image", size: "lg", color: "var(--color-text-secondary)" }), _jsx("p", { style: { margin: '0.5rem 0 0 0', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }, children: "Image not found" })] }) }) }), _jsx(CodeBlock, { code: `<Image
src="invalid-url.jpg"
alt="Error image"
fallback={
<div>
<Icon name="image" />
<p>Image not found</p>
</div>
}
/>`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Fallback Image" }), _jsx("div", { className: "example-content", children: _jsx(Image, { src: sampleImages.error, alt: "Error image with fallback image", size: "md", style: "square", fallback: sampleImages.square }) }), _jsx(CodeBlock, { code: `<Image
src="invalid-url.jpg"
alt="Error image"
fallback="fallback-image.jpg"
/>`, language: "tsx" })] })] })] }), _jsxs("section", { className: "complex-examples-section", children: [_jsx("h2", { children: "Complex Examples" }), _jsx("p", { children: "Real-world image implementations." }), _jsxs("div", { className: "complex-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Profile Images" }), _jsx("p", { children: "User profile pictures with fallbacks." }), _jsx("div", { className: "example-content", children: _jsxs("div", { style: { display: 'flex', gap: '1rem', alignItems: 'center' }, children: [_jsx(Image, { src: sampleImages.portrait, alt: "User profile", style: "circle", size: "lg", isRounded: true, fallback: _jsx("div", { style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100%',
backgroundColor: 'var(--color-primary)',
color: 'white',
borderRadius: '50%',
fontSize: '1.5rem',
fontWeight: 'bold'
}, children: "JD" }) }), _jsxs("div", { children: [_jsx("h4", { style: { margin: '0 0 0.25rem 0' }, children: "John Doe" }), _jsx("p", { style: { margin: 0, fontSize: '0.875rem', color: 'var(--color-text-secondary)' }, children: "Software Developer" })] })] }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Gallery Grid" }), _jsx("p", { children: "Responsive image gallery with consistent sizing." }), _jsx("div", { className: "example-content", children: _jsxs("div", { style: {
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
gap: '1rem'
}, children: [_jsx(Image, { src: sampleImages.landscape, alt: "Gallery image 1", style: "square", size: "md", isRounded: true }), _jsx(Image, { src: sampleImages.nature, alt: "Gallery image 2", style: "square", size: "md", isRounded: true }), _jsx(Image, { src: sampleImages.city, alt: "Gallery image 3", style: "square", size: "md", isRounded: true }), _jsx(Image, { src: sampleImages.portrait, alt: "Gallery image 4", style: "square", size: "md", isRounded: true })] }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Hero Image" }), _jsx("p", { children: "Large hero image with overlay content." }), _jsx("div", { className: "example-content", children: _jsxs("div", { style: { position: 'relative', borderRadius: '0.5rem', overflow: 'hidden' }, children: [_jsx(Image, { src: sampleImages.landscape, alt: "Hero image", style: "landscape", size: "xl", variant: "elevated" }), _jsxs("div", { style: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
background: 'linear-gradient(transparent, rgba(0,0,0,0.7))',
color: 'white',
padding: '2rem',
textAlign: 'center'
}, children: [_jsx("h3", { style: { margin: '0 0 0.5rem 0' }, children: "Welcome to Our Site" }), _jsx("p", { style: { margin: 0, opacity: 0.9 }, children: "Discover amazing content and beautiful imagery" })] })] }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Product Images" }), _jsx("p", { children: "E-commerce product images with hover effects." }), _jsx("div", { className: "example-content", children: _jsxs("div", { style: {
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
gap: '1rem'
}, children: [_jsxs("div", { style: { textAlign: 'center' }, children: [_jsx(Image, { src: sampleImages.square, alt: "Product 1", style: "square", size: "lg", variant: "elevated" }), _jsx("h4", { style: { margin: '0.5rem 0 0 0' }, children: "Product Name" }), _jsx("p", { style: { margin: '0.25rem 0 0 0', color: 'var(--color-text-secondary)' }, children: "$29.99" })] }), _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx(Image, { src: sampleImages.square, alt: "Product 2", style: "square", size: "lg", variant: "elevated" }), _jsx("h4", { style: { margin: '0.5rem 0 0 0' }, children: "Product Name" }), _jsx("p", { style: { margin: '0.25rem 0 0 0', color: 'var(--color-text-secondary)' }, children: "$39.99" })] })] }) })] })] })] }), _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: "src" }), _jsx("td", { children: "string" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Image source URL (required)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "alt" }), _jsx("td", { children: "string" }), _jsx("td", { children: "''" }), _jsx("td", { children: "Alt text for accessibility" })] }), _jsxs("tr", { children: [_jsx("td", { children: "variant" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'default'" }), _jsx("td", { children: "Visual style variant (default, elevated, glass, bordered)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "Size" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Image size (xs, sm, md, lg, xl)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "style" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'natural'" }), _jsx("td", { children: "Image style (natural, square, rectangle, circle, landscape, portrait, glass)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isRounded" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Whether to apply rounded corners" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isResponsive" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Whether the image should be responsive" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isLoading" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Whether to show loading state" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isError" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Whether to show error state" })] }), _jsxs("tr", { children: [_jsx("td", { children: "fallback" }), _jsx("td", { children: "ReactNode | string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Fallback content for error states" })] }), _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: "Always provide meaningful alt text" }), _jsx("li", { children: "Use appropriate image sizes for performance" }), _jsx("li", { children: "Provide fallbacks for error states" }), _jsx("li", { children: "Use responsive images for mobile" }), _jsx("li", { children: "Optimize images for web delivery" }), _jsx("li", { children: "Use consistent aspect ratios" }), _jsx("li", { children: "Test loading states thoroughly" }), _jsx("li", { children: "Consider lazy loading for large galleries" })] })] }), _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 images without alt text" }), _jsx("li", { children: "Don't use overly large image files" }), _jsx("li", { children: "Don't ignore loading performance" }), _jsx("li", { children: "Don't use inconsistent image styles" }), _jsx("li", { children: "Don't forget to handle error states" }), _jsx("li", { children: "Don't use images for text content" }), _jsx("li", { children: "Don't ignore accessibility requirements" }), _jsx("li", { children: "Don't use images without proper optimization" })] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The Image component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Proper alt text support for screen readers" }), _jsx("li", { children: "Loading state announcements" }), _jsx("li", { children: "Error state handling with fallbacks" }), _jsx("li", { children: "Keyboard navigation support" }), _jsx("li", { children: "High contrast support for all variants" }), _jsx("li", { children: "Responsive design for all screen sizes" }), _jsx("li", { children: "Focus management for interactive elements" })] })] })] })] }) }));
};
export default ImageDocumentation;