react-vite-themes/dist/pages/Documentation/DocumentationLanding.js

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.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '../../components/atoms/Button';
import { Card } from '../../components/atoms/Card';
import { Icon } from '../../components/atoms/Icon';
import { StatCard } from '../../components/molecules/StatCard';
import { Badge } from '../../components/atoms/Badge';
import { Input } from '../../components/atoms/Input';
import { Select } from '../../components/atoms/Select';
import { Modal } from '../../components/atoms/Modal';
import { Form } from '../../components/molecules/Form';
import { Sidebar } from '../../components/organisms/Sidebar';
import { Tabs } from '../../components/molecules/Tabs';
import './DocumentationLanding.scss';
const DocumentationLanding = () => {
    const [isModalOpen, setIsModalOpen] = React.useState(false);
    const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
    // Organize components by atomic design levels
    const componentCategories = {
        atoms: [
            {
                name: 'Alert',
                description: 'Display important messages and notifications',
                icon: 'alert',
                path: '/documentation/alert',
                features: ['Multiple variants', 'Closable', 'Auto-dismiss', 'Icon support', 'Size options']
            },
            {
                name: 'Badge',
                description: 'Show status, counts, and labels',
                icon: 'badge',
                path: '/documentation/badge',
                features: ['Multiple variants', 'Size options', 'Rounded style', 'Outline style', 'Color schemes']
            },
            {
                name: 'Button',
                description: 'Interactive buttons with multiple variants',
                icon: 'components',
                path: '/documentation/button',
                features: ['Multiple variants', 'Size options', 'Color schemes', 'Icon support', 'Loading states']
            },
            {
                name: 'Calendar',
                description: 'Date picker and calendar component',
                icon: 'calendar',
                path: '/documentation/calendar',
                features: ['Date selection', 'Range picker', 'Custom formats', 'Validation', 'Accessibility']
            },
            {
                name: 'Card',
                description: 'Content containers with various styles',
                icon: 'card',
                path: '/documentation/card',
                features: ['Multiple styles', 'Header/Footer', 'Image support', 'Hover effects', 'Padding options']
            },
            {
                name: 'Checkbox',
                description: 'Boolean input with multiple states and modern styling',
                icon: 'check',
                path: '/documentation/checkbox',
                features: ['Multiple sizes', 'Color variants', 'Label positions', 'Indeterminate state', 'Form integration', 'Icon-based checkmark']
            },
            {
                name: 'Icon',
                description: 'SVG icons with customizable properties',
                icon: 'icon',
                path: '/documentation/icon',
                features: ['Multiple sizes', 'Color support', 'Scalable', 'Consistent', 'Easy to use']
            },
            {
                name: 'Image',
                description: 'Responsive image component',
                icon: 'image',
                path: '/documentation/image',
                features: ['Loading states', 'Error handling', 'Multiple styles', 'Responsive', 'Fallback support']
            },
            {
                name: 'Input',
                description: 'Text input fields with variants',
                icon: 'input',
                path: '/documentation/input',
                features: ['Multiple variants', 'Icon support', 'Validation states', 'Size options', 'Helper text']
            },
            {
                name: 'Modal',
                description: 'Overlay dialogs and popups',
                icon: 'modal',
                path: '/documentation/modal',
                features: ['Multiple sizes', 'Backdrop support', 'Keyboard navigation', 'Focus management', 'Customizable']
            },
            {
                name: 'ProgressBar',
                description: 'Progress indicators',
                icon: 'progress',
                path: '/documentation/progress-bar',
                features: ['Multiple variants', 'Size options', 'Animated', 'Label support', 'Color schemes']
            },
            {
                name: 'Select',
                description: 'Dropdown selection component',
                icon: 'select',
                path: '/documentation/select',
                features: ['Search support', 'Multi-select', 'Custom options', 'Validation', 'Keyboard navigation']
            },
            {
                name: 'Toggle',
                description: 'Switch/toggle component',
                icon: 'toggle',
                path: '/documentation/toggle',
                features: ['Multiple sizes', 'Color variants', 'Label positions', 'Accessibility', 'Form integration']
            },
            {
                name: 'Typography',
                description: 'Flexible typography component with semantic HTML support',
                icon: 'text',
                path: '/documentation/typography',
                features: ['Semantic HTML', 'Multiple sizes', 'Font weights', 'Color variants', 'Text alignment', 'Responsive design']
            },
            {
                name: 'CodeBlock',
                description: 'Syntax-highlighted code display component',
                icon: 'code',
                path: '/documentation/code-block',
                features: ['Syntax highlighting', 'Multiple languages', 'Copy functionality', 'Line numbers', 'Theme support']
            }
        ],
        molecules: [
            {
                name: 'Form',
                description: 'Form wrapper with validation',
                icon: 'form',
                path: '/documentation/form',
                features: ['Validation support', 'Loading states', 'Multiple styles', 'Error handling', 'Submission']
            },
            {
                name: 'StatCard',
                description: 'Statistics display cards',
                icon: 'stats',
                path: '/documentation/stat-card',
                features: ['Trend indicators', 'Icon support', 'Multiple styles', 'Hover effects', 'Responsive']
            },
            {
                name: 'Tabs',
                description: 'Tabbed content organization',
                icon: 'tabs',
                path: '/documentation/tabs',
                features: ['Multiple variants', 'Content prop', 'Target ID', 'Auto-detection', 'Accessible']
            },
            {
                name: 'GroupedInput',
                description: 'Input field with grouped elements',
                icon: 'input',
                path: '/documentation/input',
                features: ['Prefix/Suffix support', 'Multiple variants', 'Validation states', 'Size options', 'Form integration']
            },
            {
                name: 'FormField',
                description: 'Form field wrapper with label and validation',
                icon: 'form',
                path: '/documentation/form',
                features: ['Label support', 'Error display', 'Helper text', 'Required indicators', 'Accessibility']
            }
        ],
        organisms: [
            {
                name: 'Footer',
                description: 'Page footer with links and information',
                icon: 'footer',
                path: '/documentation/footer',
                features: ['Multiple sections', 'Social links', 'Responsive design', 'Brand support', 'Customizable']
            },
            {
                name: 'Navbar',
                description: 'Navigation header component',
                icon: 'navbar',
                path: '/documentation/navbar',
                features: ['Responsive design', 'Mobile menu', 'Brand support', 'Navigation links', 'User actions']
            },
            {
                name: 'Sidebar',
                description: 'Collapsible sidebar navigation',
                icon: 'sidebar',
                path: '/documentation/sidebar',
                features: ['Multiple directions', 'Size options', 'Header support', 'Overlay mode', 'Responsive']
            }
        ]
    };
    const renderComponentCard = (component) => (_jsxs(Card, { variant: "neutral", style: "elevated", isHoverable: true, className: "component-card", children: [_jsxs("div", { className: "component-card-header", children: [_jsx(Icon, { name: component.icon, size: "lg" }), _jsx("h3", { className: "component-name", children: component.name })] }), _jsx("p", { className: "component-description", children: component.description }), _jsx("div", { className: "component-features", children: component.features.map((feature, index) => (_jsx(Badge, { variant: "neutral", size: "sm", children: feature }, index))) }), _jsx("div", { className: "component-actions", children: _jsx(Link, { to: component.path, style: { textDecoration: 'none' }, children: _jsx(Button, { variant: "primary", size: "sm", rightIcon: "arrow-right", children: "View Documentation" }) }) })] }, component.name));
    // Create tabs for atomic design levels
    const atomicDesignTabs = [
        {
            id: 'atoms',
            label: 'Atoms',
            icon: 'atom',
            content: (_jsxs("div", { className: "components-tab-content", children: [_jsx("div", { className: "tab-description", children: _jsx("p", { children: "Basic building blocks - the smallest functional components that can't be broken down further." }) }), _jsx("div", { className: "components-grid", children: componentCategories.atoms.map(renderComponentCard) })] }))
        },
        {
            id: 'molecules',
            label: 'Molecules',
            icon: 'molecule',
            content: (_jsxs("div", { className: "components-tab-content", children: [_jsx("div", { className: "tab-description", children: _jsx("p", { children: "Simple combinations of atoms that work together as a unit." }) }), _jsx("div", { className: "components-grid", children: componentCategories.molecules.map(renderComponentCard) })] }))
        },
        {
            id: 'organisms',
            label: 'Organisms',
            icon: 'organism',
            content: (_jsxs("div", { className: "components-tab-content", children: [_jsx("div", { className: "tab-description", children: _jsx("p", { children: "Complex UI components composed of molecules and/or atoms." }) }), _jsx("div", { className: "components-grid", children: componentCategories.organisms.map(renderComponentCard) })] }))
        }
    ];
    return (_jsxs("div", { className: "documentation-landing", children: [_jsx("section", { className: "hero-section", children: _jsx("div", { className: "container", children: _jsxs("div", { className: "hero-content", children: [_jsx("h1", { className: "hero-title", children: "Component Documentation" }), _jsx("p", { className: "hero-description", children: "Comprehensive guide to all available components organized by atomic design levels. Each component is fully customizable with multiple variants, sizes, and color schemes." }), _jsxs("div", { className: "hero-stats", children: [_jsx(StatCard, { value: "15", subtitle: "Atoms", style: "glass", isHoverable: true, size: "sm" }), _jsx(StatCard, { value: "5", subtitle: "Molecules", style: "glass", isHoverable: true, size: "sm" }), _jsx(StatCard, { value: "3", subtitle: "Organisms", style: "glass", isHoverable: true, size: "sm" }), _jsx(StatCard, { value: "23", subtitle: "Total", style: "glass", isHoverable: true, size: "sm" })] })] }) }) }), _jsx("section", { className: "components-section", children: _jsxs("div", { className: "container", children: [_jsxs("div", { className: "section-header", children: [_jsx("h2", { className: "section-title", children: "Available Components" }), _jsx("p", { className: "section-description", children: "Browse components by their complexity level using the tabs below" })] }), _jsx("div", { className: "components-tabs", children: _jsx(Tabs, { tabs: atomicDesignTabs, variant: "pills", showIcons: true }) })] }) }), _jsx("section", { className: "demo-section", children: _jsxs("div", { className: "container", children: [_jsx("h2", { className: "section-title", children: "Interactive Demo" }), _jsxs("div", { className: "demo-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "demo-card", children: [_jsx("h3", { children: "Modal Component" }), _jsx("p", { children: "Click the button to open a modal dialog" }), _jsx(Button, { variant: "primary", onClick: () => setIsModalOpen(true), children: "Open Modal" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "demo-card", children: [_jsx("h3", { children: "Sidebar Component" }), _jsx("p", { children: "Click the button to open a sidebar" }), _jsx(Button, { variant: "secondary", onClick: () => setIsSidebarOpen(true), children: "Open Sidebar" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "demo-card", children: [_jsx("h3", { children: "Form Component" }), _jsxs(Form, { variant: "elevated", onSubmit: (data) => console.log(data), children: [_jsx(Input, { placeholder: "Enter your name", size: "sm", className: "mb-3" }), _jsx(Select, { placeholder: "Choose an option", size: "sm", options: [
                                                        { value: 'option1', label: 'Option 1' },
                                                        { value: 'option2', label: 'Option 2' },
                                                        { value: 'option3', label: 'Option 3' }
                                                    ] }), _jsx(Button, { variant: "primary", size: "sm", type: "submit", children: "Submit" })] })] })] })] }) }), _jsxs(Modal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: "Demo Modal", size: "md", children: [_jsx("p", { children: "This is a demo modal. You can close it by clicking the X button or clicking outside the modal." }), _jsx("div", { className: "modal-actions", children: _jsx(Button, { variant: "secondary", onClick: () => setIsModalOpen(false), children: "Close" }) })] }), _jsx(Sidebar, { isOpen: isSidebarOpen, onClose: () => setIsSidebarOpen(false), direction: "left", showHeader: true, headerContent: "Demo Sidebar", children: _jsxs("div", { className: "sidebar-content", children: [_jsx("h3", { children: "Sidebar Content" }), _jsx("p", { children: "This is a demo sidebar. You can close it by clicking the X button or clicking outside the sidebar." }), _jsx(Button, { variant: "primary", onClick: () => setIsSidebarOpen(false), children: "Close Sidebar" })] }) })] }));
};
export default DocumentationLanding;