@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/src/ui/molecules/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,313 @@
+'use client';
+
+import { useState, useRef, useEffect, forwardRef, type ReactNode } from 'react';
+import Input from '../../atoms/Input/Input';
+import Chip from '../../atoms/Chip/Chip';
+import { ChevronDown, Check } from 'lucide-react';
+import AutocompleteList from '../Autocomplete/AutocompleteList';
+import type { AutocompleteOptionType } from '../Autocomplete/AutocompleteOption';
+import { cn } from '../../utils';
+import { getColorClass, getFocusColorClass } from '../../tokens';
+import { getSpacingClass } from '../../tokens';
+import { getRadiusClass } from '../../tokens';
+
+export interface MultiSelectProps {
+  options: AutocompleteOptionType[];
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (values: string[]) => void;
+  onSelect?: (options: AutocompleteOptionType[]) => void;
+  placeholder?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  emptyMessage?: string;
+  maxSelected?: number;
+  showSelectAll?: boolean;
+  className?: string;
+  inputClassName?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+/**
+ * MultiSelect Component
+ * 
+ * A multi-select component with chips for selected items.
+ * Supports keyboard navigation, loading states, and custom filtering.
+ * 
+ * @example
+ * ```tsx
+ * <MultiSelect
+ *   options={[
+ *     { value: '1', label: 'Option 1' },
+ *     { value: '2', label: 'Option 2' },
+ *   ]}
+ *   onSelect={(options) => console.log(options)}
+ * />
+ * ```
+ */
+const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
+  function MultiSelect(
+    {
+      options,
+      value: controlledValue,
+      defaultValue = [],
+      onChange,
+      onSelect,
+      placeholder = 'Select options...',
+      loading = false,
+      disabled = false,
+      emptyMessage = 'No options found',
+      maxSelected,
+      showSelectAll = false,
+      className = '',
+      inputClassName = '',
+      size = 'md',
+    },
+    ref
+  ) {
+    const [internalValue, setInternalValue] = useState<string[]>(defaultValue);
+    const [isOpen, setIsOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [searchValue, setSearchValue] = useState('');
+    const containerRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const listRef = useRef<HTMLDivElement>(null);
+
+    const isControlled = controlledValue !== undefined;
+    const selectedValues = isControlled ? controlledValue : internalValue;
+
+    // Get selected options
+    const selectedOptions = options.filter((opt) =>
+      selectedValues.includes(opt.value)
+    );
+
+    // Filter options (exclude already selected if needed, or show all)
+    const getFilteredOptions = (): AutocompleteOptionType[] => {
+      let filtered = options;
+
+      if (searchValue.trim()) {
+        filtered = options.filter((option) =>
+          option.label.toLowerCase().includes(searchValue.toLowerCase())
+        );
+      }
+
+      return filtered;
+    };
+
+    const filteredOptions = getFilteredOptions();
+    const hasOptions = filteredOptions.length > 0;
+
+    // Handle input change
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setSearchValue(newValue);
+      setIsOpen(true);
+      setHighlightedIndex(-1);
+    };
+
+    // Handle option toggle
+    const handleToggleOption = (option: AutocompleteOptionType) => {
+      if (option.disabled) return;
+      if (maxSelected && selectedValues.length >= maxSelected && !selectedValues.includes(option.value)) {
+        return;
+      }
+
+      const newValues = selectedValues.includes(option.value)
+        ? selectedValues.filter((v) => v !== option.value)
+        : [...selectedValues, option.value];
+
+      if (!isControlled) {
+        setInternalValue(newValues);
+      }
+
+      onChange?.(newValues);
+      onSelect?.(options.filter((opt) => newValues.includes(opt.value)));
+      setSearchValue('');
+    };
+
+    // Handle select all
+    const handleSelectAll = () => {
+      const allValues = filteredOptions
+        .filter((opt) => !opt.disabled)
+        .map((opt) => opt.value);
+      const newValues = [...new Set([...selectedValues, ...allValues])];
+
+      if (!isControlled) {
+        setInternalValue(newValues);
+      }
+
+      onChange?.(newValues);
+      onSelect?.(options.filter((opt) => newValues.includes(opt.value)));
+    };
+
+    // Handle deselect all
+    const handleDeselectAll = () => {
+      const filteredValues = filteredOptions.map((opt) => opt.value);
+      const newValues = selectedValues.filter(
+        (v) => !filteredValues.includes(v)
+      );
+
+      if (!isControlled) {
+        setInternalValue(newValues);
+      }
+
+      onChange?.(newValues);
+      onSelect?.(options.filter((opt) => newValues.includes(opt.value)));
+    };
+
+    // Handle remove chip
+    const handleRemoveChip = (value: string) => {
+      const newValues = selectedValues.filter((v) => v !== value);
+
+      if (!isControlled) {
+        setInternalValue(newValues);
+      }
+
+      onChange?.(newValues);
+      onSelect?.(options.filter((opt) => newValues.includes(opt.value)));
+    };
+
+    // Handle keyboard navigation
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!isOpen || filteredOptions.length === 0) {
+        if (e.key === 'ArrowDown' || e.key === 'Enter') {
+          setIsOpen(true);
+        }
+        // Remove last chip on backspace
+        if (e.key === 'Backspace' && searchValue === '' && selectedValues.length > 0) {
+          handleRemoveChip(selectedValues[selectedValues.length - 1]);
+        }
+        return;
+      }
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setHighlightedIndex((prev) =>
+            prev < filteredOptions.length - 1 ? prev + 1 : 0
+          );
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setHighlightedIndex((prev) =>
+            prev > 0 ? prev - 1 : filteredOptions.length - 1
+          );
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
+            handleToggleOption(filteredOptions[highlightedIndex]);
+          }
+          break;
+        case 'Escape':
+          e.preventDefault();
+          setIsOpen(false);
+          setHighlightedIndex(-1);
+          break;
+      }
+    };
+
+    // Close on click outside
+    useEffect(() => {
+      if (!isOpen) return;
+
+      const handleClickOutside = (e: MouseEvent) => {
+        if (
+          containerRef.current &&
+          !containerRef.current.contains(e.target as Node)
+        ) {
+          setIsOpen(false);
+          setHighlightedIndex(-1);
+          setSearchValue('');
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen]);
+
+    // Check if all filtered options are selected
+    const allSelected = filteredOptions
+      .filter((opt) => !opt.disabled)
+      .every((opt) => selectedValues.includes(opt.value));
+
+    const shouldShowList = isOpen && (hasOptions || loading || emptyMessage);
+
+    // Get focus-within classes using primary color
+    const primaryBorderColor = getColorClass('primary', 'DEFAULT', 'border');
+    const primaryRingColor = getColorClass('primary', 'DEFAULT', 'border').replace('border-', 'ring-');
+
+    return (
+      <div ref={containerRef} className={cn('relative', className)}>
+        <div className={cn(
+          'flex',
+          'flex-wrap',
+          getSpacingClass('sm', 'gap'),
+          getSpacingClass('sm', 'p'),
+          'border',
+          getColorClass('neutral', 'DEFAULT', 'border'),
+          getRadiusClass('md'),
+          'min-h-10',
+          'focus-within:outline-none',
+          'focus-within:ring-2',
+          'focus-within:ring-offset-2',
+          `focus-within:${primaryBorderColor}`,
+          `focus-within:${primaryRingColor}`
+        )}>
+          {selectedOptions.map((option) => (
+            <Chip
+              key={option.value}
+              onRemove={() => handleRemoveChip(option.value)}
+              size={size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'}
+            >
+              {option.label}
+            </Chip>
+          ))}
+          <input
+            ref={(node) => {
+              if (typeof ref === 'function') {
+                ref(node);
+              } else if (ref) {
+                (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;
+              }
+              inputRef.current = node;
+            }}
+            type="text"
+            value={searchValue}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            onFocus={() => setIsOpen(true)}
+            placeholder={selectedValues.length === 0 ? placeholder : ''}
+            disabled={disabled}
+            className={cn('flex-1', 'min-w-[120px]', 'outline-none', 'bg-transparent', inputClassName)}
+          />
+        </div>
+
+        {shouldShowList && (
+          <AutocompleteList
+            ref={listRef}
+            options={filteredOptions.map((opt) => ({
+              ...opt,
+              icon: selectedValues.includes(opt.value) ? (
+                <Check className={cn('h-4', 'w-4', getColorClass('primary', 'DEFAULT', 'text'))} />
+              ) : opt.icon,
+            }))}
+            highlightedIndex={highlightedIndex}
+            onSelect={handleToggleOption}
+            loading={loading}
+            emptyMessage={emptyMessage}
+            containerRef={containerRef}
+            showSelectAll={showSelectAll && filteredOptions.length > 0}
+            allSelected={allSelected}
+            onSelectAll={handleSelectAll}
+            onDeselectAll={handleDeselectAll}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+MultiSelect.displayName = 'MultiSelect';
+
+export default MultiSelect;

package/src/ui/molecules/MultiSelect/index.ts

@@ -0,0 +1,2 @@
+export { default as MultiSelect } from './MultiSelect';
+export type { MultiSelectProps } from './MultiSelect';

package/src/ui/molecules/Navigation/Navigation.accessibility.test.tsx

@@ -0,0 +1,125 @@
+/**
+ * Navigation Accessibility Tests
+ * 
+ * Accessibility tests for the Navigation component.
+ * Following TDD approach: tests first, then implementation improvements.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Navigation } from './Navigation';
+import type { NavItem } from './types';
+
+describe('Navigation Accessibility', () => {
+  describe('ARIA Labels and Roles', () => {
+    it('should have proper navigation role', () => {
+      // TDD: Test navigation role
+      const items: NavItem[] = [
+        { href: '/home', label: 'Home' },
+      ];
+
+      render(<Navigation items={items} />);
+      const nav = screen.getByRole('navigation', { name: 'Main navigation' });
+      expect(nav).toBeInTheDocument();
+    });
+
+    it('should allow custom aria-label', () => {
+      // TDD: Test custom aria-label
+      const items: NavItem[] = [
+        { href: '/home', label: 'Home' },
+      ];
+
+      render(<Navigation items={items} aria-label="Custom navigation" />);
+      const nav = screen.getByRole('navigation', { name: 'Custom navigation' });
+      expect(nav).toBeInTheDocument();
+    });
+
+    it('should have proper link roles for items', () => {
+      // TDD: Test link roles
+      const items: NavItem[] = [
+        { href: '/home', label: 'Home' },
+        { href: '/about', label: 'About' },
+      ];
+
+      render(<Navigation items={items} />);
+      expect(screen.getByRole('link', { name: 'Home' })).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'About' })).toBeInTheDocument();
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('should support Tab navigation through items', async () => {
+      // TDD: Test Tab navigation
+      const user = userEvent.setup();
+      const items: NavItem[] = [
+        { href: '/home', label: 'Home' },
+        { href: '/about', label: 'About' },
+      ];
+
+      render(<Navigation items={items} />);
+      
+      await user.tab();
+      const focusedElement = document.activeElement;
+      expect(focusedElement).toBeInTheDocument();
+    });
+
+    it('should support Enter and Space on navigation items', async () => {
+      // TDD: Test keyboard activation
+      const user = userEvent.setup();
+      const items: NavItem[] = [
+        { href: '/home', label: 'Home' },
+      ];
+
+      render(<Navigation items={items} />);
+
+      const link = screen.getByRole('link', { name: 'Home' });
+      link.focus();
+      await user.keyboard('{Enter}');
+      
+      // Link should still be in document and focusable
+      expect(link).toBeInTheDocument();
+    });
+  });
+
+  describe('Screen Reader Support', () => {
+    it('should announce navigation structure', () => {
+      // TDD: Test navigation announcement
+      const items: NavItem[] = [
+        { href: '/home', label: 'Home' },
+        { href: '/about', label: 'About' },
+      ];
+
+      render(<Navigation items={items} />);
+      const nav = screen.getByRole('navigation');
+      expect(nav).toBeInTheDocument();
+    });
+
+    it('should announce active items', () => {
+      // TDD: Test active state announcement
+      const items: NavItem[] = [
+        { href: '/home', label: 'Home', active: true },
+        { href: '/about', label: 'About' },
+      ];
+
+      render(<Navigation items={items} />);
+      const homeLink = screen.getByRole('link', { name: 'Home' });
+      expect(homeLink).toHaveAttribute('aria-current', 'page');
+    });
+  });
+
+  describe('Focus Management', () => {
+    it('should have visible focus indicators on items', () => {
+      // TDD: Test focus indicators
+      const items: NavItem[] = [
+        { href: '/home', label: 'Home' },
+      ];
+
+      render(<Navigation items={items} />);
+      const link = screen.getByRole('link', { name: 'Home' });
+      link.focus();
+      
+      expect(link).toHaveFocus();
+    });
+  });
+});

package/src/ui/molecules/Navigation/Navigation.active-state.test.tsx

@@ -0,0 +1,67 @@
+/**
+ * Navigation Active State Tests
+ * 
+ * Tests for automatic active state detection in Navigation component.
+ * Following TDD approach: tests first, then implementation.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Navigation } from './Navigation';
+import type { NavItem } from './types';
+
+describe('Navigation Active State Detection', () => {
+
+  it('should auto-detect active item when pathname is provided', () => {
+    // TDD: Test automatic active state detection via pathname prop
+    const items: NavItem[] = [
+      { href: '/home', label: 'Home' },
+      { href: '/about', label: 'About' },
+    ];
+
+    render(<Navigation items={items} pathname="/home" />);
+    
+    const homeLink = screen.getByText('Home').closest('a');
+    expect(homeLink).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('should respect manual active prop over auto-detect', () => {
+    // TDD: Test that manual active prop has priority
+    const items: NavItem[] = [
+      { href: '/home', label: 'Home' },
+      { href: '/about', label: 'About', active: true }, // Manual active
+    ];
+
+    render(<Navigation items={items} />);
+    
+    const aboutLink = screen.getByText('About').closest('a');
+    expect(aboutLink).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('should handle nested paths correctly', () => {
+    // TDD: Test that /home matches /home and /home/child
+    const items: NavItem[] = [
+      { href: '/home', label: 'Home' },
+      { href: '/about', label: 'About' },
+    ];
+
+    render(<Navigation items={items} pathname="/home/child" />);
+    
+    const homeLink = screen.getByText('Home').closest('a');
+    expect(homeLink).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('should work without Next.js (no usePathname)', () => {
+    // TDD: Test graceful degradation when Next.js is not available
+    const items: NavItem[] = [
+      { href: '/home', label: 'Home' },
+      { href: '/about', label: 'About' },
+    ];
+
+    // When Next.js is not available, should not crash
+    render(<Navigation items={items} />);
+    
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('About')).toBeInTheDocument();
+  });
+});