"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ComponentShowcase = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * Component Showcase
 * Demonstrates all modern, accessible components with live examples and documentation
 */
const react_1 = require("react");
const AccessibilitySystem_1 = require("../accessibility/AccessibilitySystem");
const AccessibleButton_1 = require("./AccessibleButton");
const AccessibleInput_1 = require("./AccessibleInput");
const AccessibleSelect_1 = require("./AccessibleSelect");
const AccessibleCheckbox_1 = require("./AccessibleCheckbox");
// Preview mode descriptions
const previewModeDescriptions = {
    'normal': 'Default view with standard styling',
    'colorblind-protanopia': 'Simulates red-green color blindness (protanopia)',
    'colorblind-deuteranopia': 'Simulates red-green color blindness (deuteranopia)',
    'colorblind-tritanopia': 'Simulates blue-yellow color blindness (tritanopia)',
    'high-contrast-light': 'High contrast light theme for better visibility',
    'high-contrast-dark': 'High contrast dark theme for better visibility',
    'screen-reader': 'Screen reader optimized view with enhanced ARIA support',
    'reduced-motion': 'Reduced motion for users with vestibular disorders',
    'focus-visible': 'Enhanced focus indicators for keyboard navigation',
    'keyboard-only': 'Keyboard-only navigation mode',
    'zoom-200': '200% zoom level for low vision users',
    'zoom-300': '300% zoom level for low vision users',
    'grayscale': 'Grayscale mode for color contrast testing',
};
const ComponentShowcase = () => {
    const [selectedComponent, setSelectedComponent] = (0, react_1.useState)('button');
    const [previewMode, setPreviewMode] = (0, react_1.useState)('normal');
    const [showAccessibilityDetails, setShowAccessibilityDetails] = (0, react_1.useState)(false);
    const [showKeyboardShortcuts, setShowKeyboardShortcuts] = (0, react_1.useState)(false);
    const [activeTab, setActiveTab] = (0, react_1.useState)('preview');
    const { analyzeComponent } = (0, AccessibilitySystem_1.useAccessibility)();
    const examples = [
        {
            name: 'Button',
            description: 'A modern, accessible button component with loading states, icons, and variants.',
            component: ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(AccessibleButton_1.AccessibleButton, { variant: "primary", children: "Primary Button" }), (0, jsx_runtime_1.jsx)(AccessibleButton_1.AccessibleButton, { variant: "secondary", startIcon: "\uD83D\uDD0D", children: "Search" }), (0, jsx_runtime_1.jsx)(AccessibleButton_1.AccessibleButton, { variant: "danger", isLoading: true, children: "Delete" }), (0, jsx_runtime_1.jsx)(AccessibleButton_1.AccessibleButton, { variant: "success", disabled: true, children: "Save Changes" })] })),
            code: `
<AccessibleButton variant="primary">Primary Button</AccessibleButton>
<AccessibleButton variant="secondary" startIcon="🔍">Search</AccessibleButton>
<AccessibleButton variant="danger" isLoading>Delete</AccessibleButton>
<AccessibleButton variant="success" disabled>Save Changes</AccessibleButton>
      `.trim(),
        },
        {
            name: 'Input',
            description: 'A modern, accessible input component with validation, helper text, and icons.',
            component: ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(AccessibleInput_1.AccessibleInput, { label: "Username", placeholder: "Enter your username", helperText: "Must be at least 3 characters" }), (0, jsx_runtime_1.jsx)(AccessibleInput_1.AccessibleInput, { label: "Email", type: "email", error: "Please enter a valid email address", startIcon: "\u2709\uFE0F" }), (0, jsx_runtime_1.jsx)(AccessibleInput_1.AccessibleInput, { label: "Password", type: "password", required: true, showCounter: true, maxLength: 20 }), (0, jsx_runtime_1.jsx)(AccessibleInput_1.AccessibleInput, { label: "Search", placeholder: "Search...", startIcon: "\uD83D\uDD0D", endIcon: "\u2328\uFE0F" })] })),
            code: `
<AccessibleInput
  label="Username"
  placeholder="Enter your username"
  helperText="Must be at least 3 characters"
/>
<AccessibleInput
  label="Email"
  type="email"
  error="Please enter a valid email address"
  startIcon="✉️"
/>
<AccessibleInput
  label="Password"
  type="password"
  required
  showCounter
  maxLength={20}
/>
<AccessibleInput
  label="Search"
  placeholder="Search..."
  startIcon="🔍"
  endIcon="⌨️"
/>
      `.trim(),
        },
        {
            name: 'Select',
            description: 'A modern, accessible select component with search, groups, and custom options.',
            component: ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(AccessibleSelect_1.AccessibleSelect, { label: "Country", options: [
                            { value: 'us', label: 'United States' },
                            { value: 'ca', label: 'Canada' },
                            { value: 'uk', label: 'United Kingdom' },
                        ], placeholder: "Select a country" }), (0, jsx_runtime_1.jsx)(AccessibleSelect_1.AccessibleSelect, { label: "Category", options: [
                            {
                                label: 'Electronics',
                                options: [
                                    { value: 'phones', label: 'Phones' },
                                    { value: 'laptops', label: 'Laptops' },
                                ],
                            },
                            {
                                label: 'Clothing',
                                options: [
                                    { value: 'shirts', label: 'Shirts' },
                                    { value: 'pants', label: 'Pants' },
                                ],
                            },
                        ], searchable: true }), (0, jsx_runtime_1.jsx)(AccessibleSelect_1.AccessibleSelect, { label: "Status", options: [
                            { value: 'active', label: 'Active', description: 'Currently in use' },
                            { value: 'inactive', label: 'Inactive', description: 'Not currently in use' },
                        ], error: "Please select a status" })] })),
            code: `
<AccessibleSelect
  label="Country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
    { value: 'uk', label: 'United Kingdom' },
  ]}
  placeholder="Select a country"
/>
<AccessibleSelect
  label="Category"
  options={[
    {
      label: 'Electronics',
      options: [
        { value: 'phones', label: 'Phones' },
        { value: 'laptops', label: 'Laptops' },
      ],
    },
    {
      label: 'Clothing',
      options: [
        { value: 'shirts', label: 'Shirts' },
        { value: 'pants', label: 'Pants' },
      ],
    },
  ]}
  searchable
/>
<AccessibleSelect
  label="Status"
  options={[
    { value: 'active', label: 'Active', description: 'Currently in use' },
    { value: 'inactive', label: 'Inactive', description: 'Not currently in use' },
  ]}
  error="Please select a status"
/>
      `.trim(),
        },
        {
            name: 'Checkbox',
            description: 'A modern, accessible checkbox component with validation and states.',
            component: ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)(AccessibleCheckbox_1.AccessibleCheckbox, { label: "Accept terms and conditions", helperText: "You must accept to continue", required: true }), (0, jsx_runtime_1.jsx)(AccessibleCheckbox_1.AccessibleCheckbox, { label: "Subscribe to newsletter", defaultChecked: true }), (0, jsx_runtime_1.jsx)(AccessibleCheckbox_1.AccessibleCheckbox, { label: "Processing...", isLoading: true }), (0, jsx_runtime_1.jsx)(AccessibleCheckbox_1.AccessibleCheckbox, { label: "Indeterminate state", indeterminate: true })] })),
            code: `
<AccessibleCheckbox
  label="Accept terms and conditions"
  helperText="You must accept to continue"
  required
/>
<AccessibleCheckbox
  label="Subscribe to newsletter"
  defaultChecked
/>
<AccessibleCheckbox
  label="Processing..."
  isLoading
/>
<AccessibleCheckbox
  label="Indeterminate state"
  indeterminate
/>
      `.trim(),
        },
    ];
    const selectedExample = examples.find(ex => ex.name.toLowerCase() === selectedComponent) || examples[0];
    // Apply preview mode styles
    (0, react_1.useEffect)(() => {
        const root = document.documentElement;
        // Reset all preview mode classes
        Object.keys(previewModeDescriptions).forEach(mode => {
            root.classList.remove(`preview-${mode}`);
        });
        // Apply selected preview mode
        root.classList.add(`preview-${previewMode}`);
        // Apply zoom level
        if (previewMode.startsWith('zoom-')) {
            const zoomLevel = parseInt(previewMode.split('-')[1]) / 100;
            root.style.zoom = zoomLevel.toString();
        }
        else {
            root.style.zoom = '1';
        }
        return () => {
            root.style.zoom = '1';
            Object.keys(previewModeDescriptions).forEach(mode => {
                root.classList.remove(`preview-${mode}`);
            });
        };
    }, [previewMode]);
    // Keyboard shortcuts
    (0, react_1.useEffect)(() => {
        const handleKeyPress = (e) => {
            // Only handle keyboard shortcuts when not in an input
            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
                return;
            }
            switch (e.key) {
                case '1':
                    setActiveTab('preview');
                    break;
                case '2':
                    setActiveTab('code');
                    break;
                case '3':
                    setActiveTab('accessibility');
                    break;
                case '4':
                    setActiveTab('keyboard');
                    break;
                case 'h':
                    if (e.ctrlKey || e.metaKey) {
                        e.preventDefault();
                        setShowKeyboardShortcuts(!showKeyboardShortcuts);
                    }
                    break;
                case 'a':
                    if (e.ctrlKey || e.metaKey) {
                        e.preventDefault();
                        setShowAccessibilityDetails(!showAccessibilityDetails);
                    }
                    break;
            }
        };
        window.addEventListener('keydown', handleKeyPress);
        return () => window.removeEventListener('keydown', handleKeyPress);
    }, [showKeyboardShortcuts, showAccessibilityDetails]);
    return ((0, jsx_runtime_1.jsx)(AccessibilitySystem_1.AccessibilityProvider, { children: (0, jsx_runtime_1.jsxs)("div", { className: "min-h-screen bg-gray-50 dark:bg-gray-900", children: [(0, jsx_runtime_1.jsx)("header", { className: "bg-white dark:bg-gray-800 shadow", children: (0, jsx_runtime_1.jsx)("div", { className: "max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-3xl font-bold text-gray-900 dark:text-white", children: "Modern Component Showcase" }), (0, jsx_runtime_1.jsx)("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-300", children: "A collection of modern, accessible components with built-in WCAG 2.2 AA compliance" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex space-x-4", children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setShowKeyboardShortcuts(!showKeyboardShortcuts), className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", children: "Keyboard Shortcuts (\u2318H)" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowAccessibilityDetails(!showAccessibilityDetails), className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", children: "Accessibility Details (\u2318A)" })] })] }) }) }), (0, jsx_runtime_1.jsxs)("main", { className: "max-w-7xl mx-auto py-6 sm:px-6 lg:px-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-8 bg-white dark:bg-gray-800 shadow rounded-lg p-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "component-select", className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Select Component" }), (0, jsx_runtime_1.jsx)("select", { id: "component-select", value: selectedComponent, onChange: (e) => setSelectedComponent(e.target.value), className: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white", children: examples.map((example) => ((0, jsx_runtime_1.jsx)("option", { value: example.name.toLowerCase(), children: example.name }, example.name))) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "preview-mode", className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: "Preview Mode" }), (0, jsx_runtime_1.jsx)("select", { id: "preview-mode", value: previewMode, onChange: (e) => setPreviewMode(e.target.value), className: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md dark:bg-gray-700 dark:text-white", children: Object.entries(previewModeDescriptions).map(([mode, description]) => ((0, jsx_runtime_1.jsx)("option", { value: mode, children: description }, mode))) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-md", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 dark:text-gray-300", children: previewModeDescriptions[previewMode] }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "mb-8", children: (0, jsx_runtime_1.jsx)("nav", { className: "flex space-x-4", "aria-label": "Tabs", children: [
                                    { id: 'preview', label: 'Preview (1)', icon: '👁️' },
                                    { id: 'code', label: 'Code (2)', icon: '💻' },
                                    { id: 'accessibility', label: 'Accessibility (3)', icon: '♿' },
                                    { id: 'keyboard', label: 'Keyboard (4)', icon: '⌨️' },
                                ].map((tab) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setActiveTab(tab.id), className: `
                    px-4 py-2 text-sm font-medium rounded-md
                    ${activeTab === tab.id
                                        ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200'
                                        : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}
                    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
                  `, children: (0, jsx_runtime_1.jsxs)("span", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("span", { className: "mr-2", children: tab.icon }), tab.label] }) }, tab.id))) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-8", children: [activeTab === 'preview' && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white dark:bg-gray-800 shadow rounded-lg p-6", children: [(0, jsx_runtime_1.jsxs)("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-4", children: [selectedExample.name, " Preview"] }), (0, jsx_runtime_1.jsx)("div", { className: `preview-${previewMode}`, children: selectedExample.component })] })), activeTab === 'code' && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white dark:bg-gray-800 shadow rounded-lg p-6", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-4", children: "Example Code" }), (0, jsx_runtime_1.jsx)("div", { className: "prose dark:prose-invert max-w-none", children: (0, jsx_runtime_1.jsx)("pre", { className: "bg-gray-50 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto", children: (0, jsx_runtime_1.jsx)("code", { className: "text-sm text-gray-800 dark:text-gray-200", children: selectedExample.code }) }) })] })), activeTab === 'accessibility' && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white dark:bg-gray-800 shadow rounded-lg p-6", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-4", children: "Accessibility Information" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium text-gray-900 dark:text-white mb-2", children: "WCAG 2.2 AA Criteria" }), (0, jsx_runtime_1.jsx)("ul", { className: "list-disc pl-5 space-y-2 text-gray-600 dark:text-gray-300", children: selectedExample.wcagCriteria?.map((criterion, index) => ((0, jsx_runtime_1.jsx)("li", { children: criterion }, index))) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium text-gray-900 dark:text-white mb-2", children: "Accessibility Best Practices" }), (0, jsx_runtime_1.jsx)("ul", { className: "list-disc pl-5 space-y-2 text-gray-600 dark:text-gray-300", children: selectedExample.bestPractices?.map((practice, index) => ((0, jsx_runtime_1.jsx)("li", { children: practice }, index))) })] }), selectedExample.accessibilityScore !== undefined && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium text-gray-900 dark:text-white mb-2", children: "Accessibility Score" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-blue-500", style: { width: `${selectedExample.accessibilityScore}%` } }) }), (0, jsx_runtime_1.jsxs)("span", { className: "ml-4 text-sm font-medium text-gray-700 dark:text-gray-300", children: [selectedExample.accessibilityScore, "%"] })] })] }))] })] })), activeTab === 'keyboard' && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white dark:bg-gray-800 shadow rounded-lg p-6", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-4", children: "Keyboard Navigation" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium text-gray-900 dark:text-white mb-2", children: "Keyboard Shortcuts" }), (0, jsx_runtime_1.jsx)("ul", { className: "space-y-2", children: selectedExample.keyboardShortcuts?.map((shortcut, index) => ((0, jsx_runtime_1.jsx)("li", { className: "text-gray-600 dark:text-gray-300", children: shortcut }, index))) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-medium text-gray-900 dark:text-white mb-2", children: "Navigation Guide" }), (0, jsx_runtime_1.jsxs)("div", { className: "prose dark:prose-invert max-w-none text-gray-600 dark:text-gray-300", children: [(0, jsx_runtime_1.jsx)("p", { children: "Use the following keys to navigate this component:" }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: "Tab: Move focus between interactive elements" }), (0, jsx_runtime_1.jsx)("li", { children: "Space/Enter: Activate buttons and checkboxes" }), (0, jsx_runtime_1.jsx)("li", { children: "Arrow keys: Navigate select options and radio buttons" }), (0, jsx_runtime_1.jsx)("li", { children: "Escape: Close dropdowns and modals" })] })] })] })] })] }))] })] }), showKeyboardShortcuts && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 max-w-lg w-full", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-4", children: "Keyboard Shortcuts" }), (0, jsx_runtime_1.jsxs)("ul", { className: "space-y-2 text-gray-600 dark:text-gray-300", children: [(0, jsx_runtime_1.jsx)("li", { children: "\u23181: Switch to Preview tab" }), (0, jsx_runtime_1.jsx)("li", { children: "\u23182: Switch to Code tab" }), (0, jsx_runtime_1.jsx)("li", { children: "\u23183: Switch to Accessibility tab" }), (0, jsx_runtime_1.jsx)("li", { children: "\u23184: Switch to Keyboard tab" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2318H: Toggle keyboard shortcuts" }), (0, jsx_runtime_1.jsx)("li", { children: "\u2318A: Toggle accessibility details" }), (0, jsx_runtime_1.jsx)("li", { children: "Tab: Navigate between components" }), (0, jsx_runtime_1.jsx)("li", { children: "Space/Enter: Activate components" }), (0, jsx_runtime_1.jsx)("li", { children: "Escape: Close modals and dropdowns" })] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowKeyboardShortcuts(false), className: "mt-4 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", children: "Close" })] }) })), (0, jsx_runtime_1.jsx)("footer", { className: "bg-white dark:bg-gray-800 shadow mt-8", children: (0, jsx_runtime_1.jsx)("div", { className: "max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: "Built with accessibility in mind. WCAG 2.2 AA compliant." }), (0, jsx_runtime_1.jsxs)("div", { className: "flex space-x-4", children: [(0, jsx_runtime_1.jsx)("a", { href: "#", className: "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300", children: "Documentation" }), (0, jsx_runtime_1.jsx)("a", { href: "#", className: "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300", children: "GitHub" }), (0, jsx_runtime_1.jsx)("a", { href: "#", className: "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300", children: "Report Issues" })] })] }) }) })] }) }));
};
exports.ComponentShowcase = ComponentShowcase;
//# sourceMappingURL=ComponentShowcase.js.map