react-vite-themes/dist/pages/Documentation/SelectDocumentation.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 { Select } from '../../components/atoms/Select';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Card } from '../../components/atoms/Card';
import { Icon } from '../../components/atoms/Icon';
import { Alert } from '../../components/atoms/Alert';
import { Button } from '../../components/atoms/Button';
import './ComponentDocumentation.scss';
const SelectDocumentation = () => {
    const [selectedValue, setSelectedValue] = useState('');
    const sizes = [
        { name: 'sm', description: 'Small select dropdown' },
        { name: 'md', description: 'Medium select dropdown (default)' },
        { name: 'lg', description: 'Large select dropdown' }
    ];
    const variants = [
        { name: 'primary', description: 'Primary themed select' },
        { name: 'secondary', description: 'Secondary themed select' },
        { name: 'success', description: 'Success themed select' },
        { name: 'warning', description: 'Warning themed select' },
        { name: 'error', description: 'Error themed select' }
    ];
    const basicOptions = [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
        { value: 'option4', label: 'Option 4' }
    ];
    const countryOptions = [
        { value: 'us', label: 'United States' },
        { value: 'ca', label: 'Canada' },
        { value: 'uk', label: 'United Kingdom' },
        { value: 'de', label: 'Germany' },
        { value: 'fr', label: 'France' },
        { value: 'jp', label: 'Japan' }
    ];
    const categoryOptions = [
        { value: 'electronics', label: 'Electronics' },
        { value: 'clothing', label: 'Clothing' },
        { value: 'books', label: 'Books' },
        { value: 'home', label: 'Home & Garden' },
        { value: 'sports', label: 'Sports & Outdoors' }
    ];
    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: "Select Component" }), _jsx("p", { className: "component-description", children: "A flexible select dropdown component with search support and custom options. Supports multiple variants, sizes, and validation states." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "import-section", children: [_jsx("h2", { children: "Import" }), _jsx(CodeBlock, { code: "import { { Select } } from '../../components/atoms/Select';", 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(Select, { placeholder: "Choose an option", options: basicOptions, value: selectedValue, onChange: setSelectedValue }) }), _jsx(CodeBlock, { code: `const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' }
];

<Select
  placeholder="Choose an option"
  options={options}
  value={selectedValue}
  onChange={setSelectedValue}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "variants-section", children: [_jsx("h2", { children: "Variants" }), _jsx("p", { children: "Select variants define the visual style and semantic meaning." }), _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: _jsx(Select, { placeholder: `${variant.name} select`, options: basicOptions, variant: variant.name, size: "md" }) }), _jsx(CodeBlock, { code: `<Select variant="${variant.name}" options={options} />`, language: "tsx" })] }, variant.name))) })] }), _jsxs("section", { className: "sizes-section", children: [_jsx("h2", { children: "Sizes" }), _jsx("p", { children: "Control the select 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(Select, { placeholder: `${size.name} select`, options: basicOptions, size: size.name }, size.name))) }), _jsx(CodeBlock, { code: `<Select size="sm" options={options} />
<Select size="md" options={options} />
<Select size="lg" options={options} />`, language: "tsx" })] })] }), _jsxs("section", { className: "icons-section", children: [_jsx("h2", { children: "Icons" }), _jsx("p", { children: "Add icons to the select dropdown for better visual context." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Select, { placeholder: "Select country", options: countryOptions, leftIcon: _jsx(Icon, { name: "globe", size: "sm" }), size: "md" }), _jsx(Select, { placeholder: "Select category", options: categoryOptions, rightIcon: _jsx(Icon, { name: "chevron-down", size: "sm" }), size: "md" })] }), _jsx(CodeBlock, { code: `<Select
  placeholder="Select country"
  options={countryOptions}
  leftIcon={<Icon name="globe" size="sm" />}
/>

<Select
  placeholder="Select category"
  options={categoryOptions}
  rightIcon={<Icon name="chevron-down" size="sm" />}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "validation-section", children: [_jsx("h2", { children: "Validation States" }), _jsx("p", { children: "Use different variants to indicate validation states." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Select, { placeholder: "Valid select", options: basicOptions, variant: "success", size: "md" }), _jsx(Select, { placeholder: "Invalid select", options: basicOptions, variant: "error", size: "md" }), _jsx(Select, { placeholder: "Disabled select", options: basicOptions, disabled: true, size: "md" })] }), _jsx(CodeBlock, { code: `<Select variant="success" options={options} />
<Select variant="error" options={options} />
<Select disabled options={options} />`, language: "tsx" })] })] }), _jsxs("section", { className: "controlled-section", children: [_jsx("h2", { children: "Controlled Select" }), _jsx("p", { children: "Use controlled select with state management." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsxs("div", { className: "example-content", children: [_jsx(Select, { placeholder: "Choose a country", options: countryOptions, value: selectedValue, onChange: setSelectedValue, size: "md" }), _jsxs("p", { style: { margin: '0.5rem 0', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }, children: ["Selected: ", selectedValue || '(none)'] })] }), _jsx(CodeBlock, { code: `const [selectedValue, setSelectedValue] = useState('');

<Select
  placeholder="Choose a country"
  options={countryOptions}
  value={selectedValue}
  onChange={setSelectedValue}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "form-integration-section", children: [_jsx("h2", { children: "Form Integration" }), _jsx("p", { children: "Integrate select components within forms." }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "example-card", children: [_jsx("div", { className: "example-content", children: _jsxs("form", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Country" }), _jsx(Select, { placeholder: "Select your country", options: countryOptions, required: true, size: "md" })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: '0.5rem', fontWeight: '500' }, children: "Category" }), _jsx(Select, { placeholder: "Select a category", options: categoryOptions, required: true, size: "md" })] }), _jsx(Button, { variant: "primary", type: "submit", size: "md", children: "Submit" })] }) }), _jsx(CodeBlock, { code: `<form>
  <div>
    <label>Country</label>
    <Select
      placeholder="Select your country"
      options={countryOptions}
      required
    />
  </div>
  <div>
    <label>Category</label>
    <Select
      placeholder="Select a category"
      options={categoryOptions}
      required
    />
  </div>
  <Button type="submit">Submit</Button>
</form>`, language: "tsx" })] })] }), _jsxs("section", { className: "complex-examples-section", children: [_jsx("h2", { children: "Complex Examples" }), _jsx("p", { children: "Real-world examples of select usage patterns." }), _jsxs("div", { className: "complex-examples-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Multi-level Select" }), _jsx("p", { children: "Select with dependent options and categories." }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(Select, { placeholder: "Select continent", options: [
                                                        { value: 'europe', label: 'Europe' },
                                                        { value: 'asia', label: 'Asia' },
                                                        { value: 'americas', label: 'Americas' }
                                                    ], leftIcon: _jsx(Icon, { name: "globe", size: "sm" }) }), _jsx(Select, { placeholder: "Select country", options: countryOptions, leftIcon: _jsx(Icon, { name: "flag", size: "sm" }) })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Search Select" }), _jsx("p", { children: "Select with search functionality and filtering." }), _jsx(Select, { placeholder: "Search countries...", options: countryOptions, leftIcon: _jsx(Icon, { name: "search", size: "sm" }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Status Select" }), _jsx("p", { children: "Select for status and state management." }), _jsx(Select, { placeholder: "Select status", options: [
                                                { value: 'active', label: 'Active' },
                                                { value: 'inactive', label: 'Inactive' },
                                                { value: 'pending', label: 'Pending' },
                                                { value: 'suspended', label: 'Suspended' }
                                            ], leftIcon: _jsx(Icon, { name: "status", size: "sm" }) })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "complex-card", children: [_jsx("h3", { children: "Filter Select" }), _jsx("p", { children: "Select for data filtering and sorting." }), _jsx(Select, { placeholder: "Filter by category", options: categoryOptions, leftIcon: _jsx(Icon, { name: "filter", size: "sm" }) })] })] })] }), _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: "options" }), _jsx("td", { children: "SelectOption[]" }), _jsx("td", { children: "-" }), _jsx("td", { children: "Array of select options (required)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "value" }), _jsx("td", { children: "string" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Current selected value" })] }), _jsxs("tr", { children: [_jsx("td", { children: "onChange" }), _jsx("td", { children: '(value: string) => void' }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Callback when selection changes" })] }), _jsxs("tr", { children: [_jsx("td", { children: "placeholder" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'Select an option...'" }), _jsx("td", { children: "Placeholder text" })] }), _jsxs("tr", { children: [_jsx("td", { children: "size" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'md'" }), _jsx("td", { children: "Select size (sm, md, lg)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "variant" }), _jsx("td", { children: "string" }), _jsx("td", { children: "'primary'" }), _jsx("td", { children: "Select variant (primary, secondary, success, warning, error)" })] }), _jsxs("tr", { children: [_jsx("td", { children: "disabled" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Disable the select" })] }), _jsxs("tr", { children: [_jsx("td", { children: "leftIcon" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Icon to display on the left" })] }), _jsxs("tr", { children: [_jsx("td", { children: "rightIcon" }), _jsx("td", { children: "ReactNode" }), _jsx("td", { children: "undefined" }), _jsx("td", { children: "Icon to display on the right" })] }), _jsxs("tr", { children: [_jsx("td", { children: "required" }), _jsx("td", { children: "boolean" }), _jsx("td", { children: "false" }), _jsx("td", { children: "Make the select required" })] }), _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 clear, descriptive placeholder text" }), _jsx("li", { children: "Group related options logically" }), _jsx("li", { children: "Use icons for better visual context" }), _jsx("li", { children: "Provide appropriate validation states" }), _jsx("li", { children: "Use controlled components for forms" }), _jsx("li", { children: "Include required fields when necessary" }), _jsx("li", { children: "Use appropriate sizes for the context" })] })] }), _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 options in one select" }), _jsx("li", { children: "Don't use unclear option labels" }), _jsx("li", { children: "Don't use select for simple toggles" }), _jsx("li", { children: "Don't use select for navigation" }), _jsx("li", { children: "Don't use select without proper labels" }), _jsx("li", { children: "Don't use select for binary choices" }), _jsx("li", { children: "Don't use select for search-only functionality" })] })] })] })] }), _jsxs("section", { className: "accessibility-section", children: [_jsx("h2", { children: "Accessibility" }), _jsxs(Alert, { variant: "info", title: "Accessibility Features", children: ["The Select component includes several accessibility features:", _jsxs("ul", { children: [_jsx("li", { children: "Proper ARIA attributes for combobox roles" }), _jsx("li", { children: "Keyboard navigation support" }), _jsx("li", { children: "Screen reader support for options" }), _jsx("li", { children: "High contrast support for all variants" }), _jsx("li", { children: "Focus management and trapping" }), _jsx("li", { children: "Proper labeling and descriptions" })] })] })] })] }) }));
};
export default SelectDocumentation;