react-vite-themes/dist/pages/Documentation/CheckboxDocumentation.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 { Card } from '../../components/atoms/Card';
import { Checkbox } from '../../components/atoms/Checkbox';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import './ComponentDocumentation.scss';
const CheckboxDocumentation = () => {
    const [controlledCheckbox, setControlledCheckbox] = useState(false);
    const [notifications, setNotifications] = useState(true);
    const [marketing, setMarketing] = useState(false);
    const [termsAccepted, setTermsAccepted] = useState(false);
    // Simulate user settings from database/API
    const userSettings = {
        emailNotifications: true, // User has this saved as ON
        pushNotifications: false, // User has this saved as OFF
        marketingEmails: true, // User has this saved as ON
        newsletter: null // User hasn't set this preference yet
    };
    // Controlled settings state
    const [settings, setSettings] = useState({
        emailNotifications: userSettings.emailNotifications ?? true,
        pushNotifications: userSettings.pushNotifications ?? false,
        marketingEmails: userSettings.marketingEmails ?? true,
        newsletter: userSettings.newsletter ?? false
    });
    const handleCheckboxChange = (checked) => {
        console.log('Documentation: Checkbox changed to:', checked);
        setControlledCheckbox(checked);
    };
    const handleNotificationsChange = (checked) => {
        setNotifications(checked);
        console.log('Notifications:', checked ? 'enabled' : 'disabled');
    };
    const handleMarketingChange = (checked) => {
        setMarketing(checked);
        console.log('Marketing emails:', checked ? 'enabled' : 'disabled');
    };
    const handleTermsChange = (checked) => {
        setTermsAccepted(checked);
        console.log('Terms accepted:', checked);
    };
    const handleSettingChange = (settingName, checked) => {
        setSettings(prev => ({ ...prev, [settingName]: checked }));
        console.log(`${settingName}:`, checked ? 'enabled' : 'disabled');
    };
    const handleSaveSettings = () => {
        console.log('Saving settings to database:', settings);
        // In real app: api.saveSettings(settings)
    };
    return (_jsx("div", { className: "component-documentation", children: _jsxs("div", { className: "container", children: [_jsxs("div", { className: "doc-header", children: [_jsx(Link, { to: "/documentation", className: "back-link", children: "\u2190 Back to Documentation" }), _jsx("h1", { children: "Checkbox Component" }), _jsx("p", { className: "component-description", children: "A flexible checkbox component for boolean inputs with multiple states." })] }), _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(Checkbox, { id: "simple-checkbox", name: "simple-checkbox", label: "Simple checkbox", defaultChecked: true }), _jsx(Checkbox, { id: "controlled-checkbox", name: "controlled-checkbox", label: "Controlled checkbox", checked: controlledCheckbox, onChange: handleCheckboxChange }), _jsxs("p", { children: ["Controlled state: ", controlledCheckbox ? 'checked' : 'unchecked'] })] }), _jsx(CodeBlock, { code: `// Uncontrolled
<Checkbox 
  id="simple-checkbox"
  name="simple-checkbox"
  label="Simple checkbox" 
  defaultChecked 
/>

// Controlled
const [checked, setChecked] = useState(false);
<Checkbox 
  id="controlled-checkbox"
  name="controlled-checkbox"
  label="Controlled checkbox"
  checked={checked}
  onChange={setChecked}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "sizes-section", children: [_jsx("h2", { children: "Size Variants" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Checkbox, { id: "small-checkbox", name: "small-checkbox", label: "Small checkbox", size: "sm", defaultChecked: true }), _jsx(Checkbox, { id: "medium-checkbox", name: "medium-checkbox", label: "Medium checkbox (default)", size: "md", defaultChecked: true }), _jsx(Checkbox, { id: "large-checkbox", name: "large-checkbox", label: "Large checkbox", size: "lg", defaultChecked: true })] }), _jsx(CodeBlock, { code: `<Checkbox 
  id="small-checkbox"
  name="small-checkbox"
  label="Small checkbox" 
  size="sm" 
  defaultChecked 
/>
<Checkbox 
  id="medium-checkbox"
  name="medium-checkbox"
  label="Medium checkbox (default)" 
  size="md" 
  defaultChecked 
/>
<Checkbox 
  id="large-checkbox"
  name="large-checkbox"
  label="Large checkbox" 
  size="lg" 
  defaultChecked 
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "variants-section", children: [_jsx("h2", { children: "Color Variants" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Checkbox, { id: "primary-checkbox", name: "primary-checkbox", label: "Primary (default)", variant: "primary", defaultChecked: true }), _jsx(Checkbox, { id: "secondary-checkbox", name: "secondary-checkbox", label: "Secondary", variant: "secondary", defaultChecked: true }), _jsx(Checkbox, { id: "success-checkbox", name: "success-checkbox", label: "Success", variant: "success", defaultChecked: true }), _jsx(Checkbox, { id: "warning-checkbox", name: "warning-checkbox", label: "Warning", variant: "warning", defaultChecked: true }), _jsx(Checkbox, { id: "error-checkbox", name: "error-checkbox", label: "Error", variant: "error", defaultChecked: true }), _jsx(Checkbox, { id: "info-checkbox", name: "info-checkbox", label: "Info", variant: "info", defaultChecked: true })] }), _jsx(CodeBlock, { code: `<Checkbox 
  id="primary-checkbox"
  name="primary-checkbox"
  label="Primary (default)" 
  variant="primary" 
  defaultChecked 
/>
<Checkbox 
  id="secondary-checkbox"
  name="secondary-checkbox"
  label="Secondary" 
  variant="secondary" 
  defaultChecked 
/>
<Checkbox 
  id="success-checkbox"
  name="success-checkbox"
  label="Success" 
  variant="success" 
  defaultChecked 
/>
<Checkbox 
  id="warning-checkbox"
  name="warning-checkbox"
  label="Warning" 
  variant="warning" 
  defaultChecked 
/>
<Checkbox 
  id="error-checkbox"
  name="error-checkbox"
  label="Error" 
  variant="error" 
  defaultChecked 
/>
<Checkbox 
  id="info-checkbox"
  name="info-checkbox"
  label="Info" 
  variant="info" 
  defaultChecked 
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "label-position-section", children: [_jsx("h2", { children: "Label Position" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Checkbox, { id: "label-right", name: "label-right", label: "Label on right (default)", labelPosition: "right", defaultChecked: true }), _jsx(Checkbox, { id: "label-left", name: "label-left", label: "Label on left", labelPosition: "left", defaultChecked: true })] }), _jsx(CodeBlock, { code: `<Checkbox 
  id="label-right"
  name="label-right"
  label="Label on right (default)"
  labelPosition="right"
  defaultChecked
/>
<Checkbox 
  id="label-left"
  name="label-left"
  label="Label on left"
  labelPosition="left"
  defaultChecked
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "disabled-section", children: [_jsx("h2", { children: "Disabled State" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Checkbox, { id: "enabled-checkbox", name: "enabled-checkbox", label: "Enabled checkbox", defaultChecked: true }), _jsx(Checkbox, { id: "disabled-checkbox", name: "disabled-checkbox", label: "Disabled checkbox", disabled: true, defaultChecked: true }), _jsx(Checkbox, { id: "disabled-unchecked", name: "disabled-unchecked", label: "Disabled unchecked", disabled: true })] }), _jsx(CodeBlock, { code: `<Checkbox 
  id="enabled-checkbox"
  name="enabled-checkbox"
  label="Enabled checkbox"
  defaultChecked
/>
<Checkbox 
  id="disabled-checkbox"
  name="disabled-checkbox"
  label="Disabled checkbox"
  disabled
  defaultChecked
/>
<Checkbox 
  id="disabled-unchecked"
  name="disabled-unchecked"
  label="Disabled unchecked"
  disabled
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "indeterminate-section", children: [_jsx("h2", { children: "Indeterminate State" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Checkbox, { id: "checked-checkbox", name: "checked-checkbox", label: "Checked checkbox", defaultChecked: true }), _jsx(Checkbox, { id: "indeterminate-checkbox", name: "indeterminate-checkbox", label: "Indeterminate checkbox", indeterminate: true }), _jsx(Checkbox, { id: "unchecked-checkbox", name: "unchecked-checkbox", label: "Unchecked checkbox" })] }), _jsx(CodeBlock, { code: `<Checkbox 
  id="checked-checkbox"
  name="checked-checkbox"
  label="Checked checkbox"
  defaultChecked
/>
<Checkbox 
  id="indeterminate-checkbox"
  name="indeterminate-checkbox"
  label="Indeterminate checkbox"
  indeterminate
/>
<Checkbox 
  id="unchecked-checkbox"
  name="unchecked-checkbox"
  label="Unchecked checkbox"
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "props-section", children: [_jsx("h2", { children: "Props Reference" }), _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: _jsx("code", { children: "checked" }) }), _jsx("td", { children: _jsx("code", { children: "boolean" }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsxs("td", { children: ["Controlled state. Use with ", _jsx("code", { children: "onChange" }), " for controlled components."] })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "defaultChecked" }) }), _jsx("td", { children: _jsx("code", { children: "boolean" }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Initial state for uncontrolled components." })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "onChange" }) }), _jsx("td", { children: _jsx("code", { children: `(checked: boolean) => void` }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Callback when checkbox state changes." })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "disabled" }) }), _jsx("td", { children: _jsx("code", { children: "boolean" }) }), _jsx("td", { children: _jsx("code", { children: "false" }) }), _jsx("td", { children: "Disables the checkbox and prevents interaction." })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "label" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Text label displayed next to the checkbox." })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "labelPosition" }) }), _jsx("td", { children: _jsx("code", { children: `'left' | 'right'` }) }), _jsx("td", { children: _jsx("code", { children: "'right'" }) }), _jsx("td", { children: "Position of the label relative to the checkbox." })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "size" }) }), _jsx("td", { children: _jsx("code", { children: `'sm' | 'md' | 'lg'` }) }), _jsx("td", { children: _jsx("code", { children: "'md'" }) }), _jsx("td", { children: "Size of the checkbox and icon." })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "variant" }) }), _jsx("td", { children: _jsx("code", { children: "Variant" }) }), _jsx("td", { children: _jsx("code", { children: "'primary'" }) }), _jsx("td", { children: "Color variant for the checkbox when checked." })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "id" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Unique identifier for the input element." })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "name" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Name attribute for form submission." })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "indeterminate" }) }), _jsx("td", { children: _jsx("code", { children: "boolean" }) }), _jsx("td", { children: _jsx("code", { children: "false" }) }), _jsx("td", { children: "Shows a partial state (useful for \"select all\" scenarios)." })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "className" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Additional CSS classes for the checkbox container." })] })] })] }) }) })] }), _jsxs("section", { className: "examples-section", children: [_jsx("h2", { children: "Real-world Examples" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Quick Settings (Uncontrolled)" }), _jsxs("p", { children: ["Use ", _jsx("code", { children: "defaultChecked" }), " for simple preferences that don't need form validation:"] }), _jsxs("div", { className: "example-content", children: [_jsx(Checkbox, { id: "email-notifications", name: "email-notifications", label: "Email notifications", defaultChecked: true }), _jsx(Checkbox, { id: "push-notifications", name: "push-notifications", label: "Push notifications", defaultChecked: true }), _jsx(Checkbox, { id: "marketing-emails", name: "marketing-emails", label: "Marketing emails", defaultChecked: true })] }), _jsx(CodeBlock, { code: `// Quick settings - uncontrolled
<Checkbox id="email-notifications" name="email-notifications" label="Email notifications" defaultChecked />
<Checkbox id="push-notifications" name="push-notifications" label="Push notifications" defaultChecked />
<Checkbox id="marketing-emails" name="marketing-emails" label="Marketing emails" defaultChecked />

// Simple, standalone checkboxes
// Component manages its own state
// No need to track or validate`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Form Settings (Controlled)" }), _jsxs("p", { children: ["Use ", _jsx("code", { children: "checked" }), " when you need to track state, validate, or save to database:"] }), _jsxs("div", { className: "example-content", children: [_jsx(Checkbox, { id: "notifications", name: "notifications", label: "Email notifications", checked: notifications, onChange: handleNotificationsChange }), _jsx(Checkbox, { id: "marketing", name: "marketing", label: "Marketing emails", checked: marketing, onChange: handleMarketingChange }), _jsx(Checkbox, { id: "terms", name: "terms", label: "I accept the terms and conditions", checked: termsAccepted, onChange: handleTermsChange, variant: "error" })] }), _jsxs("p", { children: [_jsx("strong", { children: "Current state:" }), " Notifications: ", notifications ? 'enabled' : 'disabled', ", Marketing: ", marketing ? 'enabled' : 'disabled', ", Terms: ", termsAccepted ? 'Accepted' : 'Not accepted'] }), _jsx(CodeBlock, { code: `// Form settings - controlled
const [notifications, setNotifications] = useState(true);
const [marketing, setMarketing] = useState(false);
const [termsAccepted, setTermsAccepted] = useState(false);

<Checkbox 
  id="notifications"
  name="notifications"
  label="Email notifications"
  checked={notifications}
  onChange={setNotifications}
/>
<Checkbox 
  id="marketing"
  name="marketing"
  label="Marketing emails"
  checked={marketing}
  onChange={setMarketing}
/>
<Checkbox 
  id="terms"
  name="terms"
  label="I accept the terms and conditions"
  checked={termsAccepted}
  onChange={setTermsAccepted}
  variant="error"
/>

// Can validate, save to database, sync with other components
// Parent component controls the state`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Database Integration (Real-world)" }), _jsx("p", { children: "Using saved user preferences with fallback defaults:" }), _jsxs("div", { className: "example-content", children: [_jsx(Checkbox, { id: "email-notifications-db", name: "email-notifications", label: "Email notifications", defaultChecked: userSettings.emailNotifications ?? true }), _jsx(Checkbox, { id: "push-notifications-db", name: "push-notifications", label: "Push notifications", defaultChecked: userSettings.pushNotifications ?? false }), _jsx(Checkbox, { id: "marketing-emails-db", name: "marketing-emails", label: "Marketing emails", defaultChecked: userSettings.marketingEmails ?? true }), _jsx(Checkbox, { id: "newsletter-db", name: "newsletter", label: "Newsletter subscription", defaultChecked: userSettings.newsletter ?? false })] }), _jsxs("p", { children: [_jsx("strong", { children: "User settings from database:" }), " Email: ", userSettings.emailNotifications ? 'ON' : 'OFF', ", Push: ", userSettings.pushNotifications ? 'ON' : 'OFF', ", Marketing: ", userSettings.marketingEmails ? 'ON' : 'OFF', ", Newsletter: ", userSettings.newsletter === null ? 'Not set' : (userSettings.newsletter ? 'ON' : 'OFF')] }), _jsx(CodeBlock, { code: `// Settings from database/API
const userSettings = {
  emailNotifications: true,    // User has this saved as ON
  pushNotifications: false,    // User has this saved as OFF
  marketingEmails: true,       // User has this saved as ON
  newsletter: null             // User hasn't set this preference yet
};

// Component with real data
<Checkbox 
  name="email-notifications"
  label="Email notifications"
  defaultChecked={userSettings.emailNotifications ?? true}  // Use saved value or default
/>
<Checkbox 
  name="push-notifications" 
  label="Push notifications"
  defaultChecked={userSettings.pushNotifications ?? false}   // Use saved value or default
/>
<Checkbox 
  name="marketing-emails"
  label="Marketing emails"
  defaultChecked={userSettings.marketingEmails ?? true}      // Use saved value or default
/>
<Checkbox 
  name="newsletter"
  label="Newsletter subscription"
  defaultChecked={userSettings.newsletter ?? false} // Use saved value or default
/>

// ?? operator provides fallback if value is null/undefined`, language: "tsx" })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("h3", { children: "Controlled Database Integration" }), _jsx("p", { children: "Better for forms where you need to save changes:" }), _jsxs("div", { className: "example-content", children: [_jsx(Checkbox, { id: "email-notifications-controlled", name: "email-notifications", label: "Email notifications", checked: settings.emailNotifications, onChange: (checked) => handleSettingChange('emailNotifications', checked) }), _jsx(Checkbox, { id: "push-notifications-controlled", name: "push-notifications", label: "Push notifications", checked: settings.pushNotifications, onChange: (checked) => handleSettingChange('pushNotifications', checked) }), _jsx(Checkbox, { id: "marketing-emails-controlled", name: "marketing-emails", label: "Marketing emails", checked: settings.marketingEmails, onChange: (checked) => handleSettingChange('marketingEmails', checked) }), _jsx(Checkbox, { id: "newsletter-controlled", name: "newsletter", label: "Newsletter subscription", checked: settings.newsletter, onChange: (checked) => handleSettingChange('newsletter', checked) })] }), _jsxs("p", { children: [_jsx("strong", { children: "Current settings state:" }), " Email: ", settings.emailNotifications ? 'ON' : 'OFF', ", Push: ", settings.pushNotifications ? 'ON' : 'OFF', ", Marketing: ", settings.marketingEmails ? 'ON' : 'OFF', ", Newsletter: ", settings.newsletter ? 'ON' : 'OFF'] }), _jsx("button", { onClick: handleSaveSettings, style: { marginTop: '1rem', padding: '0.5rem 1rem', backgroundColor: 'var(--color-primary-500)', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }, children: "Save Settings" }), _jsx(CodeBlock, { code: `// Controlled pattern for database integration
const userSettings = {
  emailNotifications: true,
  pushNotifications: false,
  marketingEmails: true,
  newsletter: null
};

const [settings, setSettings] = useState({
  emailNotifications: userSettings.emailNotifications ?? true,
  pushNotifications: userSettings.pushNotifications ?? false,
  marketingEmails: userSettings.marketingEmails ?? true,
  newsletter: userSettings.newsletter ?? false
});

const handleSettingChange = (settingName, checked) => {
  setSettings(prev => ({...prev, [settingName]: checked}));
};

const handleSaveSettings = () => {
  // Save to database
  api.saveSettings(settings);
};

<Checkbox 
  name="email-notifications"
  label="Email notifications"
  checked={settings.emailNotifications}
  onChange={(checked) => handleSettingChange('emailNotifications', checked)}
/>
<Checkbox 
  name="push-notifications"
  label="Push notifications"
  checked={settings.pushNotifications} 
  onChange={(checked) => handleSettingChange('pushNotifications', checked)}
/>

// Can save changes, validate, sync with other components
// Parent component controls the state`, language: "tsx" })] })] })] }) }));
};
export default CheckboxDocumentation;