@jmruthers/pace-core 0.5.75 → 0.5.76

package/src/components/Select/Select.refactored.tsx

@@ -1,497 +0,0 @@
-/**
- * @file Select Component - Refactored SOLID Implementation
- * @package @jmruthers/pace-core
- * @module Components/Select
- * @since 0.4.0
- *
- * Refactored Select component following SOLID principles:
- * - Single Responsibility: Each component has one clear purpose
- * - Open/Closed: Easy to extend without modification
- * - Liskov Substitution: Components can be substituted
- * - Interface Segregation: Small, focused interfaces
- * - Dependency Inversion: Depends on abstractions, not concretions
- */
-
-import * as React from "react";
-import { Search, X, ChevronDown, Check } from "lucide-react";
-import { Button, type ButtonProps } from "../Button/Button";
-import { cn } from "../../utils/cn";
-import { 
-  useSelectState, 
-  useSelectEvents, 
-  useSelectSearch,
-  type SelectState,
-  type SelectActions,
-  type UseSelectStateProps
-} from "./hooks";
-
-// ============================================================================
-// TYPES AND INTERFACES
-// ============================================================================
-
-export interface SelectContextValue extends SelectState {
-  actions: SelectActions;
-}
-
-export interface SelectProps extends Omit<React.HTMLAttributes<HTMLFormElement>, 'onChange' | 'onKeyDown' | 'onFocus' | 'onBlur'> {
-  children: React.ReactNode;
-  className?: string;
-}
-
-export interface SelectTriggerProps extends Omit<ButtonProps, 'onClick' | 'onKeyDown'> {
-  children: React.ReactNode;
-  asChild?: boolean;
-}
-
-export interface SelectValueProps {
-  placeholder?: string;
-  children?: React.ReactNode;
-}
-
-export interface SelectContentProps {
-  children: React.ReactNode;
-  className?: string;
-  searchable?: boolean;
-  searchPlaceholder?: string;
-  maxHeight?: string;
-  style?: React.CSSProperties;
-}
-
-export interface SelectItemProps {
-  value: string;
-  children: React.ReactNode;
-  disabled?: boolean;
-  className?: string;
-  onClick?: (e: React.MouseEvent) => void;
-}
-
-// ============================================================================
-// CONTEXT
-// ============================================================================
-
-const SelectContext = React.createContext<SelectContextValue | null>(null);
-
-const useSelectContext = () => {
-  const context = React.useContext(SelectContext);
-  if (!context) {
-    throw new Error('Select components must be used within a Select');
-  }
-  return context;
-};
-
-// ============================================================================
-// ROOT COMPONENT
-// ============================================================================
-
-export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectStateProps>(
-  ({ 
-    children,
-    className,
-    ...selectProps
-  }, ref) => {
-    const internalRef = React.useRef<HTMLFormElement>(null);
-    const selectRef = React.useMemo(() => {
-      if (ref && typeof ref === 'object' && 'current' in ref) {
-        return ref as React.RefObject<HTMLFormElement>;
-      }
-      return internalRef;
-    }, [ref]);
-
-    // Use custom hooks for state management
-    const { state, actions } = useSelectState(selectProps);
-    const { isSelecting } = useSelectEvents({ state, actions, selectRef });
-
-    // Find selected text when value changes
-    React.useEffect(() => {
-      if (state.value && !state.selectedText) {
-        // Find the SelectItem with the matching value and extract its text
-        const selectElement = selectRef.current;
-        if (selectElement) {
-          const selectItem = selectElement.querySelector(`[data-value="${state.value}"]`);
-          if (selectItem) {
-            const textContent = selectItem.textContent?.trim() || '';
-            if (textContent) {
-              actions.setSelectedText(textContent);
-            }
-          }
-        }
-      }
-    }, [state.value, state.selectedText, actions, selectRef]);
-
-    const contextValue = React.useMemo<SelectContextValue>(() => ({
-      ...state,
-      actions,
-    }), [state, actions]);
-
-    return (
-      <form
-        ref={selectRef}
-        className={cn("relative", className)}
-        data-value={state.value}
-        data-testid="select-root"
-      >
-        <SelectContext.Provider value={contextValue}>
-          {children}
-        </SelectContext.Provider>
-      </form>
-    );
-  }
-);
-Select.displayName = "Select";
-
-// ============================================================================
-// TRIGGER COMPONENT
-// ============================================================================
-
-export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
-  ({ children, className, variant = "outline", size = "default", asChild = false, ...props }, ref) => {
-    const { open, disabled, value, actions } = useSelectContext();
-
-    const handleClick = () => {
-      actions.setOpen(!open);
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-      if (disabled) return;
-
-      switch (e.key) {
-        case 'Enter':
-        case ' ':
-        case 'ArrowDown':
-        case 'ArrowUp':
-          e.preventDefault();
-          actions.setOpen(true);
-          break;
-        case 'Escape':
-          if (open) {
-            e.preventDefault();
-            actions.setOpen(false);
-          }
-          break;
-      }
-    };
-
-    const triggerProps = {
-      ref,
-      type: "button" as const,
-      role: "combobox",
-      "aria-expanded": open,
-      "aria-haspopup": "listbox",
-      disabled,
-      className: cn(
-        "!justify-between relative w-full",
-        "[&_svg]:pointer-events-none",
-        open && "!rounded-b-none !border-b-0",
-        className
-      ),
-      style: {
-        ...props.style,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-      },
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      "data-testid": "select-trigger",
-      "data-value": value,
-      ...props
-    };
-
-    if (asChild) {
-      const childChildren = React.Children.toArray((children as React.ReactElement).props.children);
-      const hasChevron = childChildren.some(child => 
-        React.isValidElement(child) && 
-        (child.type === ChevronDown || 
-         (child.type === 'svg' && child.props['data-testid'] === 'chevron-down') ||
-         (typeof child === 'object' && 'type' in child && typeof child.type === 'function' && child.type.name === 'ChevronDown'))
-      );
-
-      return React.cloneElement(children as React.ReactElement, {
-        ...triggerProps,
-        children: hasChevron ? childChildren : [
-          ...childChildren,
-          <ChevronDown 
-            key="chevron-down"
-            className={cn(
-              "h-4 w-4 opacity-50 transition-transform pointer-events-none float-right",
-              open && "rotate-180"
-            )} 
-          />
-        ]
-      });
-    }
-
-    return (
-      <Button
-        ref={ref}
-        type="button"
-        role="combobox"
-        aria-expanded={open}
-        aria-haspopup="listbox"
-        disabled={disabled}
-        variant={variant}
-        size={size}
-        className={cn(
-          "!justify-between relative w-full",
-          "[&_svg]:pointer-events-none",
-          open && "!rounded-b-none !border-b-0",
-          className
-        )}
-        style={{
-          ...props.style,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap'
-        }}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        data-testid="select-trigger"
-        data-value={value}
-        {...props}
-      >
-        {children}
-        <ChevronDown 
-          className={cn(
-            "h-4 w-4 opacity-50 transition-transform pointer-events-none float-right",
-            open && "rotate-180"
-          )} 
-        />
-      </Button>
-    );
-  }
-);
-SelectTrigger.displayName = "SelectTrigger";
-
-// ============================================================================
-// VALUE COMPONENT
-// ============================================================================
-
-export const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(
-  ({ placeholder = "Select an option...", children }, ref) => {
-    const { selectedText } = useSelectContext();
-
-    return (
-      <span ref={ref} data-testid="select-value">
-        {children || (selectedText ? selectedText : placeholder)}
-      </span>
-    );
-  }
-);
-SelectValue.displayName = "SelectValue";
-
-// ============================================================================
-// CONTENT COMPONENT
-// ============================================================================
-
-export const SelectContent = React.forwardRef<HTMLUListElement, SelectContentProps>(
-  ({ 
-    children, 
-    className, 
-    searchable = false,
-    searchPlaceholder = "Search...",
-    maxHeight = "20rem",
-    style
-  }, ref) => {
-    const { open, actions } = useSelectContext();
-    const { searchTerm, setSearchTerm, filteredChildren, searchInputRef } = useSelectSearch({
-      children,
-      searchable,
-    });
-
-    // Focus search input when dropdown opens
-    React.useEffect(() => {
-      if (open && searchable && searchInputRef.current) {
-        searchInputRef.current.focus();
-      }
-    }, [open, searchable]);
-
-    if (!open) {
-      return null;
-    }
-
-    return (
-      <ul
-        ref={ref}
-        className={cn(
-          "absolute z-[99999] w-full overflow-y-auto rounded-b-md border border-t-0 border-main-300 bg-main-50 shadow-lg",
-          "list-none p-0 m-0",
-          className
-        )}
-        style={{ 
-          top: '100%',
-          left: 0,
-          right: 0,
-          maxHeight,
-          position: 'absolute',
-          zIndex: 99999,
-          ...style
-        }}
-        data-testid="select-content"
-        role="listbox"
-      >
-        {searchable && (
-          <div className="p-2 border-b border-main-200">
-            <div className="relative">
-              <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-main-400" />
-              <input
-                ref={searchInputRef}
-                type="text"
-                placeholder={searchPlaceholder}
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Escape') {
-                    e.preventDefault();
-                    setSearchTerm('');
-                  }
-                }}
-                className="w-full pl-8 pr-8 py-1 text-sm border border-main-200 rounded focus:outline-none focus:ring-2 focus:ring-main-500"
-                data-testid="select-search-input"
-                aria-label="Search options"
-              />
-              {searchTerm && (
-                <button
-                  type="button"
-                  onClick={() => setSearchTerm('')}
-                  className="absolute right-2 top-1/2 transform -translate-y-1/2 text-main-400 hover:text-main-600"
-                  data-testid="select-clear-search"
-                  aria-label="Clear search"
-                >
-                  <X className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-          </div>
-        )}
-        {filteredChildren}
-      </ul>
-    );
-  }
-);
-SelectContent.displayName = "SelectContent";
-
-// ============================================================================
-// ITEM COMPONENT
-// ============================================================================
-
-export const SelectItem = React.forwardRef<HTMLLIElement, SelectItemProps>(
-  ({ value, children, disabled = false, className, onClick }, ref) => {
-    const { value: selectedValue, actions } = useSelectContext();
-    const isSelected = selectedValue === value;
-    
-    // Extract text content from children for display
-    const getTextContent = (children: React.ReactNode): string => {
-      if (typeof children === 'string') return children;
-      if (typeof children === 'number') return children.toString();
-      if (React.isValidElement(children) && children.props.children) {
-        return getTextContent(children.props.children);
-      }
-      if (Array.isArray(children)) {
-        return children.map(getTextContent).join('');
-      }
-      return '';
-    };
-    
-    const itemText = getTextContent(children);
-    
-    const handleMouseDown = (e: React.MouseEvent) => {
-      if (!disabled) {
-        const event = new CustomEvent('selectItemMouseDown', { detail: { value } });
-        document.dispatchEvent(event);
-      }
-    };
-
-    const handleClick = (e: React.MouseEvent) => {
-      if (!disabled) {
-        if (onClick) {
-          onClick(e);
-        }
-        actions.setValue(value, itemText);
-        actions.setOpen(false);
-      }
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-      if (disabled) return;
-
-      switch (e.key) {
-        case 'Enter':
-        case ' ':
-          e.preventDefault();
-          if (onClick) {
-            onClick(e as any);
-          }
-          actions.setValue(value, itemText);
-          actions.setOpen(false);
-          break;
-      }
-    };
-
-    return (
-      <li
-        ref={ref}
-        data-value={value}
-        className={cn(
-          "relative flex cursor-pointer select-none items-start rounded-sm px-2 py-1.5 text-sm outline-none",
-          "hover:bg-main-100 focus:bg-main-100",
-          "break-words min-w-0",
-          isSelected && "bg-main-100 text-main-900",
-          disabled && "pointer-events-none opacity-50",
-          className
-        )}
-        onMouseDown={handleMouseDown}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        data-testid="select-item"
-        data-disabled={disabled ? "true" : undefined}
-        role="option"
-        aria-selected={isSelected}
-      >
-        {children}
-        {isSelected && (
-          <Check className="absolute right-2 h-4 w-4 flex-shrink-0 mt-0.5" />
-        )}
-      </li>
-    );
-  }
-);
-SelectItem.displayName = "SelectItem";
-
-// ============================================================================
-// ADDITIONAL COMPONENTS (for backward compatibility)
-// ============================================================================
-
-export const SelectGroup = React.forwardRef<HTMLDivElement, { children: React.ReactNode; className?: string }>(
-  ({ children, className }, ref) => {
-    return (
-      <div ref={ref} className={cn("p-1", className)} data-testid="select-group">
-        {children}
-      </div>
-    );
-  }
-);
-SelectGroup.displayName = "SelectGroup";
-
-export const SelectLabel = React.forwardRef<HTMLDivElement, { children: React.ReactNode; className?: string }>(
-  ({ children, className }, ref) => {
-    return (
-      <div ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} data-testid="select-label">
-        {children}
-      </div>
-    );
-  }
-);
-SelectLabel.displayName = "SelectLabel";
-
-export const SelectSeparator = React.forwardRef<HTMLDivElement, { className?: string }>(
-  ({ className }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn("my-1 h-px bg-sec-200", className)}
-        data-testid="select-separator"
-      />
-    );
-  }
-);
-SelectSeparator.displayName = "SelectSeparator";