react-vite-themes/dist/pages/Documentation/AlertDocumentation.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, { useState } from 'react';
import { Link } from 'react-router-dom';
import { Alert } from '../../components/atoms/Alert';
import { Card } from '../../components/atoms/Card';
import { Icon } from '../../components/atoms/Icon';
import { Button } from '../../components/atoms/Button';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import './ComponentDocumentation.scss';
const AlertDocumentation = () => {
    const [isVisible, setIsVisible] = useState(true);
    const variants = [
        { name: 'primary', description: 'Primary information alerts' },
        { name: 'secondary', description: 'Secondary information alerts' },
        { name: 'neutral', description: 'Neutral themed alerts' },
        { name: 'white', description: 'White themed alerts' },
        { name: 'light', description: 'Light themed alerts' },
        { name: 'dark', description: 'Dark themed alerts' },
        { name: 'black', description: 'Black themed alerts' },
        { name: 'success', description: 'Success/positive alerts' },
        { name: 'warning', description: 'Warning alerts' },
        { name: 'error', description: 'Error/danger alerts' },
        { name: 'info', description: 'Informational alerts' },
        { name: 'custom', description: 'Custom themed alerts' },
        { name: 'gradient-primary', description: 'Primary gradient alerts' },
        { name: 'gradient-secondary', description: 'Secondary gradient alerts' },
        { name: 'gradient-wizard', description: 'Wizard gradient alerts' },
        { name: 'gradient-sunset', description: 'Sunset gradient alerts' },
        { name: 'gradient-ocean', description: 'Ocean gradient alerts' },
        { name: 'gradient-forest', description: 'Forest gradient alerts' },
        { name: 'gradient-fire', description: 'Fire gradient alerts' },
        { name: 'gradient-cosmic', description: 'Cosmic gradient alerts' },
        { name: 'gradient-aurora', description: 'Aurora gradient alerts' },
        { name: 'gradient-custom-gradient', description: 'Custom gradient alerts' },
        { name: 'gradient-rainbow', description: 'Rainbow gradient alerts' },
        { name: 'gradient-sunset-triple', description: 'Sunset triple gradient alerts' },
        { name: 'gradient-ocean-deep', description: 'Ocean deep gradient alerts' },
        { name: 'gradient-forest-rich', description: 'Forest rich gradient alerts' },
        { name: 'gradient-cosmic-vibrant', description: 'Cosmic vibrant gradient alerts' },
        { name: 'gradient-rainbow-burst', description: 'Rainbow burst gradient alerts' }
    ];
    const sizes = [
        { name: 'xs', description: 'Extra small alerts' },
        { name: 'sm', description: 'Small alerts' },
        { name: 'md', description: 'Medium alerts (default)' },
        { name: 'lg', description: 'Large alerts' },
        { name: 'xl', description: 'Extra large alerts' }
    ];
    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: "Alert Component" }), _jsx("p", { className: "component-description", children: "A flexible alert component for displaying important messages and notifications. Supports multiple variants, sizes, and can be closable." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { Alert } from '../../components/atoms/Alert';", language: "typescript" })] }), _jsxs("section", { className: "usage-section", children: [_jsx("h2", { children: "Basic Usage" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Alert, { variant: "success", title: "Success Alert", children: "This is a success alert with a title." }), _jsx(Alert, { variant: "warning", title: "Warning Alert", children: "This is a warning alert with a title." }), _jsx(Alert, { variant: "error", title: "Error Alert", children: "This is an error alert with a title." })] }), _jsx(CodeBlock, { code: `<Alert variant="success" title="Success Alert">
  This is a success alert with a title.
</Alert>

<Alert variant="warning" title="Warning Alert">
  This is a warning alert with a title.
</Alert>

<Alert variant="error" title="Error Alert">
  This is an error alert with a title.
</Alert>`, language: "tsx" })] })] }), _jsxs("section", { className: "variants-section", children: [_jsx("h2", { children: "Variants" }), _jsx("p", { children: "Alert variants define the semantic meaning and visual style of the alert." }), _jsx("div", { className: "variants-grid", children: variants.map((variant) => (_jsxs(Card, { variant: "neutral", style: "elevated", className: "variant-card", children: [_jsx("h3", { children: variant.name.charAt(0).toUpperCase() + variant.name.slice(1) }), _jsx("p", { children: variant.description }), _jsx("div", { className: "example-content", children: _jsxs(Alert, { variant: variant.name, title: `${variant.name.charAt(0).toUpperCase() + variant.name.slice(1)} Alert`, size: "sm", children: ["This is a ", variant.name, " alert example."] }) }), _jsx(CodeBlock, { code: `<Alert variant="${variant.name}" title="${variant.name.charAt(0).toUpperCase() + variant.name.slice(1)} Alert">
  This is a ${variant.name} alert example.
</Alert>`, language: "tsx" })] }, variant.name))) })] }), _jsxs("section", { className: "sizes-section", children: [_jsx("h2", { children: "Sizes" }), _jsx("p", { children: "Control the alert size using the size prop." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: sizes.map((size) => (_jsxs(Alert, { variant: "primary", title: `${size.name.toUpperCase()} Alert`, size: size.name, children: ["This is a ", size.name, " sized alert."] }, size.name))) }), _jsx(CodeBlock, { code: `<Alert variant="primary" title="XS Alert" size="xs">Extra small alert</Alert>
<Alert variant="primary" title="SM Alert" size="sm">Small alert</Alert>
<Alert variant="primary" title="MD Alert" size="md">Medium alert (default)</Alert>
<Alert variant="primary" title="LG Alert" size="lg">Large alert</Alert>
<Alert variant="primary" title="XL Alert" size="xl">Extra large alert</Alert>`, language: "tsx" })] })] }), _jsxs("section", { className: "closable-section", children: [_jsx("h2", { children: "Closable Alerts" }), _jsx("p", { children: "Make alerts closable by users with the isClosable prop." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [isVisible && (_jsx(Alert, { variant: "info", title: "Closable Alert", isClosable: true, onClose: () => setIsVisible(false), children: "This alert can be closed by clicking the X button." })), _jsx(Button, { variant: "primary", size: "sm", onClick: () => setIsVisible(true), style: { marginTop: '1rem' }, children: "Show Alert Again" })] }), _jsx(CodeBlock, { code: `const [isVisible, setIsVisible] = useState(true);

{isVisible && (
  <Alert 
    variant="info" 
    title="Closable Alert"
    isClosable
    onClose={() => setIsVisible(false)}
  >
    This alert can be closed by clicking the X button.
  </Alert>
)}`, language: "tsx" })] })] }), _jsxs("section", { className: "auto-dismiss-section", children: [_jsx("h2", { children: "Auto-dismiss Alerts" }), _jsx("p", { children: "Configure alerts to automatically dismiss after a specified time." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsx(Alert, { variant: "success", title: "Auto-dismiss Alert", autoDismiss: true, dismissDelay: 5000, onDismiss: () => console.log('Alert dismissed'), children: "This alert will automatically dismiss in 5 seconds." }) }), _jsx(CodeBlock, { code: `<Alert 
  variant="success" 
  title="Auto-dismiss Alert"
  autoDismiss
  dismissDelay={5000}
  onDismiss={() => console.log('Alert dismissed')}
>
  This alert will automatically dismiss in 5 seconds.
</Alert>`, language: "tsx" })] })] }), _jsxs("section", { className: "no-title-section", children: [_jsx("h2", { children: "Alerts without Title" }), _jsx("p", { children: "Use alerts without titles for simpler messages." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Alert, { variant: "info", children: "This is an informational alert without a title." }), _jsx(Alert, { variant: "warning", children: "This is a warning alert without a title." }), _jsx(Alert, { variant: "success", children: "This is a success alert without a title." })] }), _jsx(CodeBlock, { code: `<Alert variant="info">
  This is an informational alert without a title.
</Alert>

<Alert variant="warning">
  This is a warning alert without a title.
</Alert>

<Alert variant="success">
  This is a success alert without a title.
</Alert>`, language: "tsx" })] })] }), _jsxs("section", { className: "gradient-variants-section", children: [_jsx("h2", { children: "Gradient and Special Variants" }), _jsx("p", { children: "Use gradient variants for more visually appealing alerts with beautiful backgrounds." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Alert, { variant: "gradient-primary", title: "Primary Gradient", children: "This alert uses a primary gradient background." }), _jsx(Alert, { variant: "gradient-sunset", title: "Sunset Gradient", children: "This alert uses a beautiful sunset gradient." }), _jsx(Alert, { variant: "gradient-ocean", title: "Ocean Gradient", children: "This alert uses an ocean-themed gradient." }), _jsx(Alert, { variant: "gradient-rainbow", title: "Rainbow Gradient", children: "This alert uses a vibrant rainbow gradient." })] }), _jsx(CodeBlock, { code: `<Alert variant="gradient-primary" title="Primary Gradient">
  This alert uses a primary gradient background.
</Alert>

<Alert variant="gradient-sunset" title="Sunset Gradient">
  This alert uses a beautiful sunset gradient.
</Alert>

<Alert variant="gradient-ocean" title="Ocean Gradient">
  This alert uses an ocean-themed gradient.
</Alert>

<Alert variant="gradient-rainbow" title="Rainbow Gradient">
  This alert uses a vibrant rainbow gradient.
</Alert>`, language: "tsx" })] })] }), _jsxs("section", { className: "color-variants-section", children: [_jsx("h2", { children: "Color Variants" }), _jsx("p", { children: "Use different color variants for various styling needs." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Alert, { variant: "primary", title: "Primary Alert", children: "This is a primary colored alert." }), _jsx(Alert, { variant: "secondary", title: "Secondary Alert", children: "This is a secondary colored alert." }), _jsx(Alert, { variant: "neutral", title: "Neutral Alert", children: "This is a neutral colored alert." }), _jsx(Alert, { variant: "light", title: "Light Alert", children: "This is a light themed alert." }), _jsx(Alert, { variant: "dark", title: "Dark Alert", children: "This is a dark themed alert." })] }), _jsx(CodeBlock, { code: `<Alert variant="primary" title="Primary Alert">
  This is a primary colored alert.
</Alert>

<Alert variant="secondary" title="Secondary Alert">
  This is a secondary colored alert.
</Alert>

<Alert variant="neutral" title="Neutral Alert">
  This is a neutral colored alert.
</Alert>

<Alert variant="light" title="Light Alert">
  This is a light themed alert.
</Alert>

<Alert variant="dark" title="Dark Alert">
  This is a dark themed alert.
</Alert>`, language: "tsx" })] })] }), _jsxs("section", { className: "complex-examples-section", children: [_jsx("h2", { children: "Complex Alert Examples" }), _jsx("p", { children: "Real-world examples of alert usage patterns." }), _jsxs("div", { className: "complex-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Form Validation Alert" }), _jsx(Alert, { variant: "error", title: "Form Validation Error", isClosable: true, children: _jsxs("ul", { style: { margin: '0.5rem 0', paddingLeft: '1.5rem' }, children: [_jsx("li", { children: "Email is required" }), _jsx("li", { children: "Password must be at least 8 characters" }), _jsx("li", { children: "Please accept the terms and conditions" })] }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Success Action Alert" }), _jsx(Alert, { variant: "success", title: "Profile Updated Successfully", autoDismiss: true, dismissDelay: 3000, children: "Your profile has been updated. The changes will be reflected immediately." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Maintenance Alert" }), _jsx(Alert, { variant: "warning", title: "Scheduled Maintenance", isClosable: true, children: "We will be performing scheduled maintenance on Sunday, 2:00 AM - 4:00 AM EST. During this time, some features may be temporarily unavailable." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Info Alert with Action" }), _jsx(Alert, { variant: "info", title: "New Feature Available", children: _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '0.5rem' }, children: [_jsx("span", { children: "Check out our new dashboard features!" }), _jsx(Button, { variant: "primary", size: "sm", children: "Learn More" })] }) })] })] })] }), _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: "variant" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'info'" }), _jsx("td", { children: "Alert variant (primary, secondary, neutral, white, light, dark, black, success, warning, error, info, custom, and all gradient variants)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Alert size (xs, sm, md, lg, xl)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "title" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Alert title" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isClosable" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Show close button" })] }), _jsxs("tr", { children: [_jsx("td", { children: "autoDismiss" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Automatically dismiss the alert" })] }), _jsxs("tr", { children: [_jsx("td", { children: "dismissDelay" }), _jsx("td", { children: "number" }), _jsx("td", { children: "5000" }), _jsx("td", { children: "Delay before auto-dismiss (milliseconds)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "onClose" }), _jsx("td", { children: '() => void' }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Callback when alert is closed" })] }), _jsxs("tr", { children: [_jsx("td", { children: "onDismiss" }), _jsx("td", { children: '() => void' }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Callback when alert is auto-dismissed" })] }), _jsxs("tr", { children: [_jsx("td", { children: "children" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Alert 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 success alerts for positive feedback" }), _jsx("li", { children: "Use warning alerts for important notices" }), _jsx("li", { children: "Use danger alerts for errors and critical issues" }), _jsx("li", { children: "Use info alerts for general information" }), _jsx("li", { children: "Make alerts closable for non-critical messages" }), _jsx("li", { children: "Use auto-dismiss for temporary notifications" }), _jsx("li", { children: "Provide clear, actionable messages" })] })] }), _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 too many alerts on one page" }), _jsx("li", { children: "Don't use danger alerts for non-critical issues" }), _jsx("li", { children: "Don't use auto-dismiss for important information" }), _jsx("li", { children: "Don't use vague or unclear messages" }), _jsx("li", { children: "Don't use alerts for regular content" }), _jsx("li", { children: "Don't use alerts without proper context" }), _jsx("li", { children: "Don't use alerts for navigation" })] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The Alert component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Proper ARIA attributes for alert roles and states" }), _jsx("li", { children: "Keyboard navigation support for closable alerts" }), _jsx("li", { children: "Focus management for interactive alerts" }), _jsx("li", { children: "Screen reader support for alert content and states" }), _jsx("li", { children: "High contrast support for all variants" }), _jsx("li", { children: "Proper semantic structure with titles and content" })] })] })] })] }) }));
};
export default AlertDocumentation;