react-vite-themes/dist/pages/Documentation/ToggleDocumentation.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 { Toggle } from '../../components/atoms/Toggle';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import './ComponentDocumentation.scss';
const ToggleDocumentation = () => {
    const [controlledToggle, setControlledToggle] = useState(false);
    const [notifications, setNotifications] = useState(true);
    const [darkMode, setDarkMode] = useState(false);
    const [termsAccepted, setTermsAccepted] = useState(false);
    // Simulate user settings from database/API
    const userSettings = {
        soundEffects: true, // User has this saved as ON
        animations: false, // User has this saved as OFF
        autoSave: true, // User has this saved as ON
        notifications: true, // User has this saved as ON
        darkMode: false, // User has this saved as OFF
        marketingEmails: null // User hasn't set this preference yet
    };
    // Controlled settings state
    const [settings, setSettings] = useState({
        soundEffects: userSettings.soundEffects ?? true,
        animations: userSettings.animations ?? false,
        autoSave: userSettings.autoSave ?? true,
        notifications: userSettings.notifications ?? true,
        darkMode: userSettings.darkMode ?? false,
        marketingEmails: userSettings.marketingEmails ?? false
    });
    const handleToggleChange = (checked) => {
        setControlledToggle(checked);
    };
    const handleNotificationsChange = (checked) => {
        setNotifications(checked);
    };
    const handleDarkModeChange = (checked) => {
        setDarkMode(checked);
    };
    const handleTermsChange = (checked) => {
        setTermsAccepted(checked);
    };
    const handleSettingChange = (settingName, checked) => {
        setSettings(prev => ({ ...prev, [settingName]: checked }));
    };
    const handleSaveSettings = () => {
        // 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: "Toggle Component" }), _jsx("p", { className: "component-description", children: "A simple toggle/switch component for boolean inputs." })] }), _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(Toggle, { id: "simple-toggle", name: "simple-toggle", label: "Simple toggle", defaultChecked: true }), _jsx(Toggle, { id: "controlled-toggle", name: "controlled-toggle", label: "Controlled toggle", checked: controlledToggle, onChange: handleToggleChange }), _jsxs("p", { children: ["Controlled state: ", controlledToggle ? 'ON' : 'OFF'] })] }), _jsx(CodeBlock, { code: `// Uncontrolled
<Toggle 
  id="simple-toggle"
  name="simple-toggle"
  label="Simple toggle" 
  defaultChecked 
/>

// Controlled
const [checked, setChecked] = useState(false);
<Toggle 
  id="controlled-toggle"
  name="controlled-toggle"
  label="Controlled toggle"
  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(Toggle, { id: "small-toggle", name: "small-toggle", label: "Small toggle", size: "sm", defaultChecked: true }), _jsx(Toggle, { id: "medium-toggle", name: "medium-toggle", label: "Medium toggle (default)", size: "md", defaultChecked: true }), _jsx(Toggle, { id: "large-toggle", name: "large-toggle", label: "Large toggle", size: "lg", defaultChecked: true })] }), _jsx(CodeBlock, { code: `<Toggle 
  id="small-toggle"
  name="small-toggle"
  label="Small toggle" 
  size="sm" 
  defaultChecked 
/>
<Toggle 
  id="medium-toggle"
  name="medium-toggle"
  label="Medium toggle (default)" 
  size="md" 
  defaultChecked 
/>
<Toggle 
  id="large-toggle"
  name="large-toggle"
  label="Large toggle" 
  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(Toggle, { id: "primary-toggle", name: "primary-toggle", label: "Primary (default)", variant: "primary", defaultChecked: true }), _jsx(Toggle, { id: "secondary-toggle", name: "secondary-toggle", label: "Secondary", variant: "secondary", defaultChecked: true }), _jsx(Toggle, { id: "success-toggle", name: "success-toggle", label: "Success", variant: "success", defaultChecked: true }), _jsx(Toggle, { id: "warning-toggle", name: "warning-toggle", label: "Warning", variant: "warning", defaultChecked: true }), _jsx(Toggle, { id: "error-toggle", name: "error-toggle", label: "Error", variant: "error", defaultChecked: true }), _jsx(Toggle, { id: "info-toggle", name: "info-toggle", label: "Info", variant: "info", defaultChecked: true })] }), _jsx(CodeBlock, { code: `<Toggle 
  id="primary-toggle"
  name="primary-toggle"
  label="Primary (default)" 
  variant="primary" 
  defaultChecked 
/>
<Toggle 
  id="secondary-toggle"
  name="secondary-toggle"
  label="Secondary" 
  variant="secondary" 
  defaultChecked 
/>
<Toggle 
  id="success-toggle"
  name="success-toggle"
  label="Success" 
  variant="success" 
  defaultChecked 
/>
<Toggle 
  id="warning-toggle"
  name="warning-toggle"
  label="Warning" 
  variant="warning" 
  defaultChecked 
/>
<Toggle 
  id="error-toggle"
  name="error-toggle"
  label="Error" 
  variant="error" 
  defaultChecked 
/>
<Toggle 
  id="info-toggle"
  name="info-toggle"
  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(Toggle, { id: "label-right", name: "label-right", label: "Label on right (default)", labelPosition: "right", defaultChecked: true }), _jsx(Toggle, { id: "label-left", name: "label-left", label: "Label on left", labelPosition: "left", defaultChecked: true })] }), _jsx(CodeBlock, { code: `<Toggle 
  id="label-right"
  name="label-right"
  label="Label on right (default)"
  labelPosition="right"
  defaultChecked
/>
<Toggle 
  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(Toggle, { id: "enabled-toggle", name: "enabled-toggle", label: "Enabled toggle", defaultChecked: true }), _jsx(Toggle, { id: "disabled-toggle", name: "disabled-toggle", label: "Disabled toggle", disabled: true, defaultChecked: true }), _jsx(Toggle, { id: "disabled-unchecked", name: "disabled-unchecked", label: "Disabled unchecked", disabled: true })] }), _jsx(CodeBlock, { code: `<Toggle 
  id="enabled-toggle"
  name="enabled-toggle"
  label="Enabled toggle"
  defaultChecked
/>
<Toggle 
  id="disabled-toggle"
  name="disabled-toggle"
  label="Disabled toggle"
  disabled
  defaultChecked
/>
<Toggle 
  id="disabled-unchecked"
  name="disabled-unchecked"
  label="Disabled unchecked"
  disabled
/>`, language: "tsx" })] })] }), _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(Toggle, { id: "sound-effects", name: "sound-effects", label: "Sound effects", defaultChecked: true }), _jsx(Toggle, { id: "animations", name: "animations", label: "Animations", defaultChecked: true }), _jsx(Toggle, { id: "auto-save", name: "auto-save", label: "Auto-save", defaultChecked: true })] }), _jsx(CodeBlock, { code: `// Quick settings - uncontrolled
<Toggle id="sound-effects" name="sound-effects" label="Sound effects" defaultChecked />
<Toggle id="animations" name="animations" label="Animations" defaultChecked />
<Toggle id="auto-save" name="auto-save" label="Auto-save" defaultChecked />

// Simple, standalone toggles
// 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(Toggle, { id: "notifications", name: "notifications", label: "Email notifications", checked: notifications, onChange: handleNotificationsChange }), _jsx(Toggle, { id: "dark-mode", name: "dark-mode", label: "Dark theme", checked: darkMode, onChange: handleDarkModeChange }), _jsx(Toggle, { 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 ? 'ON' : 'OFF', ", Dark mode: ", darkMode ? 'ON' : 'OFF', ", Terms: ", termsAccepted ? 'Accepted' : 'Not accepted'] }), _jsx(CodeBlock, { code: `// Form settings - controlled
const [notifications, setNotifications] = useState(true);
const [darkMode, setDarkMode] = useState(false);
const [termsAccepted, setTermsAccepted] = useState(false);

<Toggle 
  id="notifications"
  name="notifications"
  label="Email notifications"
  checked={notifications}
  onChange={setNotifications}
/>
<Toggle 
  id="dark-mode"
  name="dark-mode"
  label="Dark theme"
  checked={darkMode}
  onChange={setDarkMode}
/>
<Toggle 
  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(Toggle, { id: "sound-effects-db", name: "sound-effects", label: "Sound effects", defaultChecked: userSettings.soundEffects ?? true }), _jsx(Toggle, { id: "animations-db", name: "animations", label: "Animations", defaultChecked: userSettings.animations ?? false }), _jsx(Toggle, { id: "auto-save-db", name: "auto-save", label: "Auto-save", defaultChecked: userSettings.autoSave ?? true }), _jsx(Toggle, { id: "marketing-emails-db", name: "marketing-emails", label: "Marketing emails", defaultChecked: userSettings.marketingEmails ?? false })] }), _jsxs("p", { children: [_jsx("strong", { children: "User settings from database:" }), " Sound: ", userSettings.soundEffects ? 'ON' : 'OFF', ", Animations: ", userSettings.animations ? 'ON' : 'OFF', ", Auto-save: ", userSettings.autoSave ? 'ON' : 'OFF', ", Marketing: ", userSettings.marketingEmails === null ? 'Not set' : (userSettings.marketingEmails ? 'ON' : 'OFF')] }), _jsx(CodeBlock, { code: `// Settings from database/API
const userSettings = {
  soundEffects: true,    // User has this saved as ON
  animations: false,      // User has this saved as OFF
  autoSave: true,        // User has this saved as ON
  marketingEmails: null  // User hasn't set this preference yet
};

// Component with real data
<Toggle 
  name="sound-effects"
  label="Sound effects"
  defaultChecked={userSettings.soundEffects ?? true}  // Use saved value or default
/>
<Toggle 
  name="animations" 
  label="Animations"
  defaultChecked={userSettings.animations ?? false}   // Use saved value or default
/>
<Toggle 
  name="auto-save"
  label="Auto-save"
  defaultChecked={userSettings.autoSave ?? true}      // Use saved value or default
/>
<Toggle 
  name="marketing-emails"
  label="Marketing emails"
  defaultChecked={userSettings.marketingEmails ?? 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(Toggle, { id: "sound-effects-controlled", name: "sound-effects", label: "Sound effects", checked: settings.soundEffects, onChange: (checked) => handleSettingChange('soundEffects', checked) }), _jsx(Toggle, { id: "animations-controlled", name: "animations", label: "Animations", checked: settings.animations, onChange: (checked) => handleSettingChange('animations', checked) }), _jsx(Toggle, { id: "auto-save-controlled", name: "auto-save", label: "Auto-save", checked: settings.autoSave, onChange: (checked) => handleSettingChange('autoSave', checked) }), _jsx(Toggle, { id: "marketing-emails-controlled", name: "marketing-emails", label: "Marketing emails", checked: settings.marketingEmails, onChange: (checked) => handleSettingChange('marketingEmails', checked) })] }), _jsxs("p", { children: [_jsx("strong", { children: "Current settings state:" }), " Sound: ", settings.soundEffects ? 'ON' : 'OFF', ", Animations: ", settings.animations ? 'ON' : 'OFF', ", Auto-save: ", settings.autoSave ? 'ON' : 'OFF', ", Marketing: ", settings.marketingEmails ? '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 = {
  soundEffects: true,
  animations: false,
  autoSave: true,
  marketingEmails: null
};

const [settings, setSettings] = useState({
  soundEffects: userSettings.soundEffects ?? true,
  animations: userSettings.animations ?? false,
  autoSave: userSettings.autoSave ?? true,
  marketingEmails: userSettings.marketingEmails ?? false
});

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

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

<Toggle 
  name="sound-effects"
  label="Sound effects"
  checked={settings.soundEffects}
  onChange={(checked) => handleSettingChange('soundEffects', checked)}
/>
<Toggle 
  name="animations"
  label="Animations"
  checked={settings.animations} 
  onChange={(checked) => handleSettingChange('animations', checked)}
/>

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