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.
75 lines (72 loc) • 18.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { Modal } from '../../components/atoms/Modal';
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 { Button } from '../../components/atoms/Button';
import { Input } from '../../components/atoms/Input';
import './ComponentDocumentation.scss';
const ModalDocumentation = () => {
const [isBasicOpen, setIsBasicOpen] = useState(false);
const [isLargeOpen, setIsLargeOpen] = useState(false);
const [isSmallOpen, setIsSmallOpen] = useState(false);
const [isFormOpen, setIsFormOpen] = useState(false);
const [isConfirmOpen, setIsConfirmOpen] = useState(false);
const [isCustomOpen, setIsCustomOpen] = useState(false);
const sizes = [
{ name: 'sm', description: 'Small modal for simple content' },
{ name: 'md', description: 'Medium modal for standard content (default)' },
{ name: 'lg', description: 'Large modal for complex content' },
{ name: 'xl', description: 'Extra large modal for extensive content' },
{ name: 'full', description: 'Full screen modal' }
];
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: "Modal Component" }), _jsx("p", { className: "component-description", children: "A flexible modal dialog component for overlays, popups, and focused content. Supports multiple sizes, backdrop interactions, and keyboard navigation." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { { Modal } } from '../../components/atoms/Modal';", 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(Button, { variant: "primary", onClick: () => setIsBasicOpen(true), children: "Open Basic Modal" }) }), _jsx(CodeBlock, { code: `const [isOpen, setIsOpen] = useState(false);
<Button onClick={() => setIsOpen(true)}>
Open Modal
</Button>
<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Basic Modal"
>
<p>This is a basic modal dialog.</p>
<Button onClick={() => setIsOpen(false)}>
Close
</Button>
</Modal>`, language: "tsx" })] }), _jsxs(Modal, { isOpen: isBasicOpen, onClose: () => setIsBasicOpen(false), title: "Basic Modal", size: "md", children: [_jsx("p", { children: "This is a basic modal dialog with a title and content." }), _jsx("p", { children: "You can close it by clicking the X button, clicking outside the modal, or pressing the Escape key." }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', marginTop: '1rem' }, children: [_jsx(Button, { variant: "primary", onClick: () => setIsBasicOpen(false), children: "Close" }), _jsx(Button, { variant: "secondary", onClick: () => setIsBasicOpen(false), children: "Cancel" })] })] })] }), _jsxs("section", { className: "sizes-section", children: [_jsx("h2", { children: "Sizes" }), _jsx("p", { children: "Control the modal size using the size prop." }), _jsx("div", { className: "sizes-grid", children: sizes.map((size) => (_jsxs(Card, { variant: "neutral", style: "elevated", className: "size-card", children: [_jsx("h3", { children: size.name.toUpperCase() }), _jsx("p", { children: size.description }), _jsxs(Button, { variant: "primary", size: "sm", onClick: () => {
if (size.name === 'sm')
setIsSmallOpen(true);
else if (size.name === 'lg')
setIsLargeOpen(true);
}, children: ["Open ", size.name.toUpperCase(), " Modal"] }), _jsx(CodeBlock, { code: `<Modal size="${size.name}" title="Modal Title">`, language: "tsx" })] }, size.name))) }), _jsxs(Modal, { isOpen: isSmallOpen, onClose: () => setIsSmallOpen(false), title: "Small Modal", size: "sm", children: [_jsx("p", { children: "This is a small modal for simple content." }), _jsx(Button, { variant: "primary", size: "sm", onClick: () => setIsSmallOpen(false), children: "Close" })] }), _jsxs(Modal, { isOpen: isLargeOpen, onClose: () => setIsLargeOpen(false), title: "Large Modal", size: "lg", children: [_jsx("p", { children: "This is a large modal for complex content." }), _jsx("p", { children: "It provides more space for forms, tables, or detailed information." }), _jsxs("div", { style: { marginTop: '1rem' }, children: [_jsx("h4", { children: "Features:" }), _jsxs("ul", { children: [_jsx("li", { children: "More space for content" }), _jsx("li", { children: "Better for complex forms" }), _jsx("li", { children: "Suitable for data tables" }), _jsx("li", { children: "Good for detailed information" })] })] }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', marginTop: '1rem' }, children: [_jsx(Button, { variant: "primary", onClick: () => setIsLargeOpen(false), children: "Save Changes" }), _jsx(Button, { variant: "secondary", onClick: () => setIsLargeOpen(false), children: "Cancel" })] })] })] }), _jsxs("section", { className: "form-modal-section", children: [_jsx("h2", { children: "Form Modal" }), _jsx("p", { children: "Use modals for forms and data input." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsx(Button, { variant: "primary", onClick: () => setIsFormOpen(true), children: "Open Form Modal" }) }), _jsx(CodeBlock, { code: `<Modal isOpen={isFormOpen} onClose={() => setIsFormOpen(false)} title="User Form">
<form onSubmit={handleSubmit}>
<Input placeholder="Name" />
<Input placeholder="Email" />
<Button type="submit">Submit</Button>
</form>
</Modal>`, language: "tsx" })] }), _jsx(Modal, { isOpen: isFormOpen, onClose: () => setIsFormOpen(false), title: "User Registration", size: "md", children: _jsxs("form", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Full Name" }), _jsx(Input, { placeholder: "Enter your full name" })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Email Address" }), _jsx(Input, { placeholder: "Enter your email" })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Phone Number" }), _jsx(Input, { placeholder: "Enter your phone number" })] }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', marginTop: '1rem' }, children: [_jsx(Button, { variant: "primary", type: "submit", children: "Register" }), _jsx(Button, { variant: "secondary", onClick: () => setIsFormOpen(false), children: "Cancel" })] })] }) })] }), _jsxs("section", { className: "confirmation-modal-section", children: [_jsx("h2", { children: "Confirmation Modal" }), _jsx("p", { children: "Use modals for confirmations and destructive actions." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsx(Button, { variant: "error", onClick: () => setIsConfirmOpen(true), children: "Delete Item" }) }), _jsx(CodeBlock, { code: `<Modal isOpen={isConfirmOpen} onClose={() => setIsConfirmOpen(false)} title="Confirm Delete">
<p>Are you sure you want to delete this item?</p>
<Button variant="error">Delete</Button>
<Button variant="secondary">Cancel</Button>
</Modal>`, language: "tsx" })] }), _jsx(Modal, { isOpen: isConfirmOpen, onClose: () => setIsConfirmOpen(false), title: "Confirm Delete", size: "sm", children: _jsxs("div", { style: { textAlign: 'center' }, children: [_jsx("div", { style: { color: 'var(--color-warning)', marginBottom: '1rem' }, children: _jsx(Icon, { name: "warning", size: "lg" }) }), _jsx("h3", { style: { marginBottom: '0.5rem' }, children: "Delete Item" }), _jsx("p", { style: { marginBottom: '1.5rem', color: 'var(--color-text-secondary)' }, children: "Are you sure you want to delete this item? This action cannot be undone." }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', justifyContent: 'center' }, children: [_jsx(Button, { variant: "error", onClick: () => setIsConfirmOpen(false), children: "Delete" }), _jsx(Button, { variant: "secondary", onClick: () => setIsConfirmOpen(false), children: "Cancel" })] })] }) })] }), _jsxs("section", { className: "custom-modal-section", children: [_jsx("h2", { children: "Custom Modal" }), _jsx("p", { children: "Create custom modals with unique styling and content." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsx(Button, { variant: "primary", onClick: () => setIsCustomOpen(true), children: "Open Custom Modal" }) }), _jsx(CodeBlock, { code: `<Modal isOpen={isCustomOpen} onClose={() => setIsCustomOpen(false)}>
<div className="custom-modal-content">
<h2>Custom Content</h2>
<p>This modal has custom styling and content.</p>
</div>
</Modal>`, language: "tsx" })] }), _jsx(Modal, { isOpen: isCustomOpen, onClose: () => setIsCustomOpen(false), size: "md", children: _jsxs("div", { style: { textAlign: 'center', padding: '2rem' }, children: [_jsx("div", { style: {
width: '80px',
height: '80px',
borderRadius: '50%',
backgroundColor: 'var(--color-primary)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '0 auto 1rem',
color: 'white',
fontSize: '2rem'
}, children: "\u2713" }), _jsx("h2", { style: { marginBottom: '0.5rem' }, children: "Success!" }), _jsx("p", { style: { marginBottom: '1.5rem', color: 'var(--color-text-secondary)' }, children: "Your action has been completed successfully. You can now close this modal." }), _jsx(Button, { variant: "primary", onClick: () => setIsCustomOpen(false), children: "Continue" })] }) })] }), _jsxs("section", { className: "complex-examples-section", children: [_jsx("h2", { children: "Complex Examples" }), _jsx("p", { children: "Real-world examples of modal usage patterns." }), _jsxs("div", { className: "complex-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Settings Modal" }), _jsx("p", { children: "Complex modal with tabs and multiple sections." }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Account Settings" }), _jsx(Button, { variant: "primary", size: "sm", children: "Open" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Privacy Settings" }), _jsx(Button, { variant: "primary", size: "sm", children: "Open" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Notification Settings" }), _jsx(Button, { variant: "primary", size: "sm", children: "Open" })] })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Image Gallery Modal" }), _jsx("p", { children: "Modal for displaying images with navigation." }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Photo Viewer" }), _jsx(Button, { variant: "primary", size: "sm", children: "Open" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Lightbox Gallery" }), _jsx(Button, { variant: "primary", size: "sm", children: "Open" })] })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Data Table Modal" }), _jsx("p", { children: "Modal with data tables and pagination." }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "User List" }), _jsx(Button, { variant: "primary", size: "sm", children: "Open" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Product Catalog" }), _jsx(Button, { variant: "primary", size: "sm", children: "Open" })] })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Multi-step Modal" }), _jsx("p", { children: "Modal with multiple steps and progress." }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Wizard Setup" }), _jsx(Button, { variant: "primary", size: "sm", children: "Open" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx("span", { children: "Onboarding Flow" }), _jsx(Button, { variant: "primary", size: "sm", children: "Open" })] })] })] })] })] }), _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: "isOpen" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Controls modal visibility" })] }), _jsxs("tr", { children: [_jsx("td", { children: "onClose" }), _jsx("td", { children: '() => void' }), _jsx("td", { children: "-" }), _jsx("td", { children: "Callback when modal is closed" })] }), _jsxs("tr", { children: [_jsx("td", { children: "title" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Modal title (optional)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Modal size (sm, md, lg, xl, full)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "children" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Modal content" })] }), _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 modals for focused content" }), _jsx("li", { children: "Provide clear close actions" }), _jsx("li", { children: "Use appropriate sizes for content" }), _jsx("li", { children: "Include keyboard navigation" }), _jsx("li", { children: "Use backdrop for focus management" }), _jsx("li", { children: "Provide clear titles and descriptions" }), _jsx("li", { children: "Use modals sparingly" })] })] }), _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 modals for navigation" }), _jsx("li", { children: "Don't nest modals" }), _jsx("li", { children: "Don't use modals for large content" }), _jsx("li", { children: "Don't use modals without escape options" }), _jsx("li", { children: "Don't use modals for non-critical actions" }), _jsx("li", { children: "Don't use modals for primary content" }), _jsx("li", { children: "Don't use modals for simple confirmations" })] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The Modal component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Proper ARIA attributes for dialog roles" }), _jsx("li", { children: "Focus management and trapping" }), _jsx("li", { children: "Keyboard navigation (Escape to close)" }), _jsx("li", { children: "Screen reader support" }), _jsx("li", { children: "Backdrop click to close" }), _jsx("li", { children: "Proper focus restoration" })] })] })] })] }) }));
};
export default ModalDocumentation;