react-vite-themes/dist/pages/Documentation/CalendarDocumentation.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 { Calendar } from '../../components/atoms/Calendar';
import { DateInput } from '../../components/atoms/Input';
import { Card } from '../../components/atoms/Card';
import { Icon } from '../../components/atoms/Icon';
import { Button } from '../../components/atoms/Button';
import { Alert } from '../../components/atoms/Alert';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import './ComponentDocumentation.scss';
const CalendarDocumentation = () => {
    const [selectedDate, setSelectedDate] = useState(null);
    const [dateInputValue, setDateInputValue] = useState('');
    const handleDateChange = (date) => {
        setSelectedDate(date);
        console.log('Selected date:', date);
    };
    const handleDateInputChange = (value) => {
        setDateInputValue(value);
        console.log('Date input value:', value);
    };
    const sizes = [
        { name: 'sm', description: 'Small calendar' },
        { name: 'md', description: 'Medium calendar (default)' },
        { name: 'lg', description: 'Large calendar' }
    ];
    const variants = [
        { name: 'default', description: 'Default styling' },
        { name: 'elevated', description: 'Elevated with shadow' },
        { name: 'glass', description: 'Glass morphism effect' },
        { name: 'bordered', description: 'Bordered styling' }
    ];
    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: "Calendar Component" }), _jsx("p", { className: "component-description", children: "A modern, customizable calendar component that matches our design system. Perfect for date selection with beautiful animations and full accessibility support." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { Calendar } from '../../components/atoms/Calendar';", 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(Calendar, { value: selectedDate || undefined, onChange: handleDateChange, placeholder: "Select a date" }) }), _jsx(CodeBlock, { code: `const [selectedDate, setSelectedDate] = useState<Date | null>(null);

<Calendar 
  value={selectedDate}
  onChange={handleDateChange}
  placeholder="Select a date"
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "sizes-section", children: [_jsx("h2", { children: "Sizes" }), _jsx("p", { children: "Control the calendar size using the size prop." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: sizes.map((size) => (_jsx(Calendar, { placeholder: `${size.name} calendar`, size: size.name }, size.name))) }), _jsx(CodeBlock, { code: `<Calendar placeholder="small calendar" size="sm" />
<Calendar placeholder="medium calendar" size="md" />
<Calendar placeholder="large calendar" size="lg" />`, language: "tsx" })] })] }), _jsxs("section", { className: "variants-section", children: [_jsx("h2", { children: "Variants" }), _jsx("p", { children: "Different visual styles for the calendar component." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: variants.map((variant) => (_jsx(Calendar, { placeholder: `${variant.name} variant`, variant: variant.name }, variant.name))) }), _jsx(CodeBlock, { code: `<Calendar placeholder="default variant" variant="default" />
<Calendar placeholder="elevated variant" variant="elevated" />
<Calendar placeholder="glass variant" variant="glass" />
<Calendar placeholder="bordered variant" variant="bordered" />`, language: "tsx" })] })] }), _jsxs("section", { className: "constraints-section", children: [_jsx("h2", { children: "Date Constraints" }), _jsx("p", { children: "Set minimum and maximum dates to restrict date selection." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Calendar, { placeholder: "Future dates only", minDate: new Date() }), _jsx(Calendar, { placeholder: "Past dates only", maxDate: new Date() }), _jsx(Calendar, { placeholder: "Date range", minDate: new Date('2024-01-01'), maxDate: new Date('2024-12-31') })] }), _jsx(CodeBlock, { code: `// Future dates only
<Calendar 
  placeholder="Future dates only"
  minDate={new Date()}
/>

// Past dates only
<Calendar 
  placeholder="Past dates only"
  maxDate={new Date()}
/>

// Date range
<Calendar 
  placeholder="Date range"
  minDate={new Date('2024-01-01')}
  maxDate={new Date('2024-12-31')}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "date-input-section", children: [_jsx("h2", { children: "DateInput Component" }), _jsx("p", { children: "A wrapper component that provides a more traditional input interface with custom calendar dropdown." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(DateInput, { value: dateInputValue, onChange: handleDateInputChange, placeholder: "Select date", leftIcon: "calendar", leftIconSize: "sm" }), _jsx(DateInput, { value: dateInputValue, onChange: handleDateInputChange, placeholder: "Birth date", leftIcon: "user", leftIconSize: "sm", maxDate: new Date().toISOString().split('T')[0] }), _jsx(DateInput, { value: dateInputValue, onChange: handleDateInputChange, placeholder: "Event date", leftIcon: "calendar", leftIconSize: "sm", minDate: new Date().toISOString().split('T')[0], variant: "elevated" })] }), _jsx(CodeBlock, { code: `import { DateInput } from '../../components/atoms/Input';

const [dateValue, setDateValue] = useState<string>('');

<DateInput 
  value={dateValue}
  onChange={setDateValue}
  placeholder="Select date"
  leftIcon="calendar"
  leftIconSize="sm"
/>

<DateInput 
  value={dateValue}
  onChange={setDateValue}
  placeholder="Birth date"
  leftIcon="user"
  leftIconSize="sm"
  maxDate={new Date().toISOString().split('T')[0]}
/>

<DateInput 
  value={dateValue}
  onChange={setDateValue}
  placeholder="Event date"
  leftIcon="calendar"
  leftIconSize="sm"
  minDate={new Date().toISOString().split('T')[0]}
  variant="elevated"
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "controlled-section", children: [_jsx("h2", { children: "Controlled Calendar" }), _jsx("p", { children: "Use controlled calendar with state management." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Calendar, { value: selectedDate || undefined, onChange: handleDateChange, placeholder: "Controlled calendar" }), _jsxs("p", { style: { margin: '0.5rem 0', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }, children: ["Selected: ", selectedDate ? selectedDate.toLocaleDateString() : 'No date selected'] })] }), _jsx(CodeBlock, { code: `const [selectedDate, setSelectedDate] = useState<Date | null>(null);

<Calendar 
  value={selectedDate}
  onChange={setSelectedDate}
  placeholder="Controlled calendar"
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "form-integration-section", children: [_jsx("h2", { children: "Form Integration" }), _jsx("p", { children: "Integrate calendars with forms and validation." }), _jsxs("div", { className: "form-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "form-example-card", children: [_jsx("h3", { children: "Event Planning Form" }), _jsxs("form", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Event Start Date" }), _jsx(DateInput, { placeholder: "Select start date", minDate: new Date().toISOString().split('T')[0], leftIcon: "calendar", leftIconSize: "sm" })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Event End Date" }), _jsx(DateInput, { placeholder: "Select end date", minDate: new Date().toISOString().split('T')[0], leftIcon: "calendar", leftIconSize: "sm" })] }), _jsx(Button, { variant: "primary", size: "md", children: "Create Event" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "form-example-card", children: [_jsx("h3", { children: "User Profile Form" }), _jsxs("form", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Date of Birth" }), _jsx(DateInput, { placeholder: "Select birth date", maxDate: new Date().toISOString().split('T')[0], leftIcon: "user", leftIconSize: "sm" })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Anniversary Date" }), _jsx(DateInput, { placeholder: "Select anniversary", leftIcon: "heart", leftIconSize: "sm" })] }), _jsx(Button, { variant: "primary", size: "md", children: "Update Profile" })] })] })] })] }), _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: "value" }), _jsx("td", { children: "Date" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Selected date value" })] }), _jsxs("tr", { children: [_jsx("td", { children: "onChange" }), _jsx("td", { children: "(date: Date) => void" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Callback when date is selected" })] }), _jsxs("tr", { children: [_jsx("td", { children: "minDate" }), _jsx("td", { children: "Date" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Minimum selectable date" })] }), _jsxs("tr", { children: [_jsx("td", { children: "maxDate" }), _jsx("td", { children: "Date" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Maximum selectable date" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "'sm' | 'md' | 'lg'" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Calendar size" })] }), _jsxs("tr", { children: [_jsx("td", { children: "variant" }), _jsx("td", { children: "'default' | 'elevated' | 'glass' | 'bordered'" }), _jsx("td", { children: "'default'" }), _jsx("td", { children: "Visual style variant" })] }), _jsxs("tr", { children: [_jsx("td", { children: "placeholder" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'Select date'" }), _jsx("td", { children: "Placeholder text" })] }), _jsxs("tr", { children: [_jsx("td", { children: "disabled" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Disable calendar interaction" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isOpen" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Control dropdown open state" })] }), _jsxs("tr", { children: [_jsx("td", { children: "onOpenChange" }), _jsx("td", { children: "(isOpen: boolean) => void" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Callback when dropdown state changes" })] }), _jsxs("tr", { children: [_jsx("td", { children: "className" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Additional CSS classes" })] })] })] }) }) })] }), _jsxs("section", { className: "date-input-props-section", children: [_jsx("h2", { children: "DateInput 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: "value" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Date value in YYYY-MM-DD format" })] }), _jsxs("tr", { children: [_jsx("td", { children: "onChange" }), _jsx("td", { children: "(value: string) => void" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Callback when date is selected" })] }), _jsxs("tr", { children: [_jsx("td", { children: "placeholder" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'Select date'" }), _jsx("td", { children: "Placeholder text" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "'sm' | 'md' | 'lg'" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Input size" })] }), _jsxs("tr", { children: [_jsx("td", { children: "variant" }), _jsx("td", { children: "'default' | 'elevated' | 'glass' | 'bordered'" }), _jsx("td", { children: "'default'" }), _jsx("td", { children: "Visual style variant" })] }), _jsxs("tr", { children: [_jsx("td", { children: "minDate" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Minimum date in YYYY-MM-DD format" })] }), _jsxs("tr", { children: [_jsx("td", { children: "maxDate" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Maximum date in YYYY-MM-DD format" })] }), _jsxs("tr", { children: [_jsx("td", { children: "disabled" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Disable input interaction" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftIcon" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Left icon name" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftIconSize" }), _jsx("td", { children: "'sm' | 'md' | 'lg'" }), _jsx("td", { children: "'sm'" }), _jsx("td", { children: "Left icon size" })] }), _jsxs("tr", { children: [_jsx("td", { children: "rightIcon" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Right icon name" })] }), _jsxs("tr", { children: [_jsx("td", { children: "rightIconSize" }), _jsx("td", { children: "'sm' | 'md' | 'lg'" }), _jsx("td", { children: "'sm'" }), _jsx("td", { children: "Right icon size" })] }), _jsxs("tr", { children: [_jsx("td", { children: "isRounded" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Apply rounded corners" })] }), _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 appropriate date constraints for your use case" }), _jsx("li", { children: "Provide clear placeholder text" }), _jsx("li", { children: "Use icons to enhance visual clarity" }), _jsx("li", { children: "Handle date changes properly in forms" }), _jsx("li", { children: "Use controlled components for form integration" }), _jsx("li", { children: "Consider accessibility for date selection" }), _jsx("li", { children: "Use DateInput for traditional form layouts" })] })] }), _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 without proper date validation" }), _jsx("li", { children: "Don't forget to handle edge cases (past/future dates)" }), _jsx("li", { children: "Don't use too many date inputs in one form" }), _jsx("li", { children: "Don't ignore timezone considerations" }), _jsx("li", { children: "Don't use without proper error handling" }), _jsx("li", { children: "Don't forget to format dates consistently" }), _jsx("li", { children: "Don't use native date inputs when custom styling is needed" })] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The Calendar component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Keyboard navigation support (arrow keys, Enter, Escape)" }), _jsx("li", { children: "Proper ARIA attributes for date selection" }), _jsx("li", { children: "Screen reader support for calendar navigation" }), _jsx("li", { children: "Focus management with visible focus indicators" }), _jsx("li", { children: "High contrast support for all variants" }), _jsx("li", { children: "Proper label association" }), _jsx("li", { children: "Click outside to close functionality" })] })] })] })] }) }));
};
export default CalendarDocumentation;