react-vite-themes/dist/pages/Documentation/SearchBarDocumentation.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 { SearchBar } from '../../components/atoms/SearchBar';
import { Card } from '../../components/atoms/Card';
import './ComponentDocumentation.scss';
const SearchBarDocumentation = () => {
    const [searchResults, setSearchResults] = useState([]);
    const [isSearching, setIsSearching] = useState(false);
    const handleSearch = (query) => {
        if (!query.trim()) {
            setSearchResults([]);
            return;
        }
        setIsSearching(true);
        // Simulate API call
        setTimeout(() => {
            const mockResults = [
                `Result for "${query}" - Item 1`,
                `Result for "${query}" - Item 2`,
                `Result for "${query}" - Item 3`,
            ];
            setSearchResults(mockResults);
            setIsSearching(false);
        }, 1000);
    };
    const handleClear = () => {
        setSearchResults([]);
    };
    return (_jsxs("div", { className: "component-documentation", children: [_jsxs("div", { className: "component-documentation__header", children: [_jsx("h1", { children: "SearchBar Component" }), _jsx("p", { children: "A comprehensive search input component with built-in search icon, clear button, loading states, and debounced search functionality. Built using composition pattern with the existing Input component." })] }), _jsxs("div", { className: "component-documentation__content", children: [_jsxs("section", { className: "component-documentation__section", children: [_jsx("h2", { children: "Basic Usage" }), _jsx("p", { children: "The SearchBar component provides a complete search experience with minimal setup." }), _jsxs(Card, { style: "elevated", className: "component-documentation__example", children: [_jsx("h3", { children: "Default SearchBar" }), _jsx(SearchBar, { placeholder: "Search products...", onSearch: handleSearch, onClear: handleClear }), searchResults.length > 0 && (_jsxs("div", { className: "search-results", children: [_jsx("h4", { children: "Search Results:" }), _jsx("ul", { children: searchResults.map((result, index) => (_jsx("li", { children: result }, index))) })] }))] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx("h2", { children: "Size Variants" }), _jsx("p", { children: "SearchBar supports three size variants to match your design needs." }), _jsxs(Card, { style: "elevated", className: "component-documentation__example", children: [_jsx("h3", { children: "Small Size" }), _jsx(SearchBar, { size: "sm", placeholder: "Small search...", onSearch: console.log }), _jsx("h3", { children: "Medium Size (Default)" }), _jsx(SearchBar, { size: "md", placeholder: "Medium search...", onSearch: console.log }), _jsx("h3", { children: "Large Size" }), _jsx(SearchBar, { size: "lg", placeholder: "Large search...", onSearch: console.log })] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx("h2", { children: "Style Variants" }), _jsx("p", { children: "Different visual styles for various contexts and designs." }), _jsxs(Card, { style: "elevated", className: "component-documentation__example", children: [_jsx("h3", { children: "Default Style" }), _jsx(SearchBar, { variant: "default", placeholder: "Default style...", onSearch: console.log }), _jsx("h3", { children: "Filled Style" }), _jsx(SearchBar, { variant: "filled", placeholder: "Filled style...", onSearch: console.log }), _jsx("h3", { children: "Outlined Style" }), _jsx(SearchBar, { variant: "outlined", placeholder: "Outlined style...", onSearch: console.log })] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx("h2", { children: "Loading State" }), _jsx("p", { children: "Show a loading spinner while search is in progress." }), _jsxs(Card, { style: "elevated", className: "component-documentation__example", children: [_jsx("h3", { children: "Loading SearchBar" }), _jsx(SearchBar, { placeholder: "Search with loading...", loading: isSearching, onSearch: handleSearch }), _jsx("p", { className: "mt-2 text-sm text-gray-600", children: "Type something to see the loading state in action." })] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx("h2", { children: "Controlled vs Uncontrolled" }), _jsx("p", { children: "SearchBar supports both controlled and uncontrolled modes." }), _jsxs(Card, { style: "elevated", className: "component-documentation__example", children: [_jsx("h3", { children: "Uncontrolled (Default)" }), _jsx(SearchBar, { placeholder: "Uncontrolled search...", onSearch: console.log }), _jsx("h3", { children: "Controlled" }), _jsx(ControlledSearchBar, {})] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx("h2", { children: "Customization Options" }), _jsx("p", { children: "Various options to customize the SearchBar behavior and appearance." }), _jsxs(Card, { style: "elevated", className: "component-documentation__example", children: [_jsx("h3", { children: "Without Clear Button" }), _jsx(SearchBar, { placeholder: "No clear button...", showClearButton: false, onSearch: console.log }), _jsx("h3", { children: "Custom Debounce" }), _jsx(SearchBar, { placeholder: "Fast search (100ms debounce)...", debounceMs: 100, onSearch: console.log }), _jsx("h3", { children: "Disabled State" }), _jsx(SearchBar, { placeholder: "Disabled search...", disabled: true, onSearch: console.log })] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx("h2", { children: "Props Reference" }), _jsx(Card, { style: "elevated", className: "component-documentation__props", 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: "placeholder" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "\"Search...\"" }) }), _jsx("td", { children: "Placeholder text for the search input" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "value" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Controlled value for the search input" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "defaultValue" }) }), _jsx("td", { children: _jsx("code", { children: "string" }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Default value for uncontrolled mode" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "onSearch" }) }), _jsx("td", { children: _jsx("code", { children: '(query: string) => void' }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Callback fired when search is triggered (debounced)" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "onClear" }) }), _jsx("td", { children: _jsx("code", { children: '() => void' }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Callback fired when clear button is clicked" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "onChange" }) }), _jsx("td", { children: _jsx("code", { children: '(value: string) => void' }) }), _jsx("td", { children: _jsx("code", { children: "undefined" }) }), _jsx("td", { children: "Callback fired on every input change" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "loading" }) }), _jsx("td", { children: _jsx("code", { children: "boolean" }) }), _jsx("td", { children: _jsx("code", { children: "false" }) }), _jsx("td", { children: "Show loading spinner" })] }), _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: "Disable the search input" })] }), _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 variant of the search bar" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "variant" }) }), _jsx("td", { children: _jsx("code", { children: "'default' | 'filled' | 'outlined'" }) }), _jsx("td", { children: _jsx("code", { children: "'default'" }) }), _jsx("td", { children: "Visual style variant" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "showClearButton" }) }), _jsx("td", { children: _jsx("code", { children: "boolean" }) }), _jsx("td", { children: _jsx("code", { children: "true" }) }), _jsx("td", { children: "Show/hide the clear button" })] }), _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: "debounceMs" }) }), _jsx("td", { children: _jsx("code", { children: "number" }) }), _jsx("td", { children: _jsx("code", { children: "300" }) }), _jsx("td", { children: "Debounce delay in milliseconds" })] })] })] }) })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx("h2", { children: "Best Practices" }), _jsxs(Card, { style: "elevated", className: "component-documentation__example", children: [_jsx("h3", { children: "\u2705 Do's" }), _jsxs("ul", { children: [_jsx("li", { children: "Use descriptive placeholder text" }), _jsx("li", { children: "Implement proper loading states for API calls" }), _jsx("li", { children: "Provide clear feedback for search results" }), _jsx("li", { children: "Use appropriate debounce timing (300ms is usually good)" }), _jsx("li", { children: "Handle empty search queries gracefully" })] }), _jsx("h3", { children: "\u274C Don'ts" }), _jsxs("ul", { children: [_jsx("li", { children: "Don't trigger search on every keystroke without debouncing" }), _jsx("li", { children: "Don't forget to handle loading and error states" }), _jsx("li", { children: "Don't use generic placeholder text like \"Search\"" }), _jsx("li", { children: "Don't disable the search without clear indication" })] })] })] }), _jsxs("section", { className: "component-documentation__section", children: [_jsx("h2", { children: "Integration Examples" }), _jsxs(Card, { style: "elevated", className: "component-documentation__example", children: [_jsx("h3", { children: "In Navigation Bar" }), _jsxs("div", { className: "mock-navbar", children: [_jsx("div", { className: "mock-navbar__brand", children: "My App" }), _jsx("div", { className: "mock-navbar__search", children: _jsx(SearchBar, { placeholder: "Search...", size: "sm", variant: "filled", onSearch: console.log }) }), _jsx("div", { className: "mock-navbar__user", children: "\uD83D\uDC64" })] }), _jsx("h3", { children: "In Content Area" }), _jsx("div", { className: "mock-content", children: _jsx(SearchBar, { placeholder: "Search articles, products, or help...", size: "lg", onSearch: console.log }) })] })] })] })] }));
};
// Controlled SearchBar Example Component
const ControlledSearchBar = () => {
    const [value, setValue] = useState('');
    const handleSearch = (query) => {
        console.log('Searching:', query);
    };
    const handleChange = (newValue) => {
        setValue(newValue);
    };
    return (_jsx(SearchBar, { value: value, onChange: handleChange, placeholder: "Controlled search...", onSearch: handleSearch }));
};
export default SearchBarDocumentation;