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

package/src/ui/molecules/Rating/Rating.test.tsx

@@ -0,0 +1,60 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Rating from './Rating';
+
+describe('Rating', () => {
+  it('renders correctly', () => {
+    render(<Rating value={3} max={5} />);
+    const stars = screen.getAllByRole('button');
+    expect(stars.length).toBeGreaterThan(0);
+  });
+
+  it('displays correct number of stars', () => {
+    render(<Rating value={0} max={5} />);
+    const stars = screen.getAllByRole('button');
+    expect(stars).toHaveLength(5);
+  });
+
+  it('calls onChange when star is clicked', () => {
+    const handleChange = vi.fn();
+    render(<Rating value={0} onChange={handleChange} />);
+    const stars = screen.getAllByRole('button');
+    fireEvent.click(stars[2]);
+    expect(handleChange).toHaveBeenCalledWith(3);
+  });
+
+  it('handles read-only mode', () => {
+    render(<Rating value={4} readOnly />);
+    const container = screen.getByRole('img');
+    expect(container).toBeInTheDocument();
+    const stars = screen.queryAllByRole('button');
+    expect(stars).toHaveLength(0);
+  });
+
+  it('displays value when showValue is true', () => {
+    render(<Rating value={3.5} max={5} showValue allowHalf />);
+    expect(screen.getByText('3.5/5')).toBeInTheDocument();
+  });
+
+  it('handles different sizes', () => {
+    const { rerender, container } = render(<Rating value={3} size="sm" />);
+    const ratingContainer = container.querySelector('div[role="img"]') || container.querySelector('div');
+    expect(ratingContainer).toBeInTheDocument();
+
+    rerender(<Rating value={3} size="md" />);
+    const ratingContainer2 = container.querySelector('div[role="img"]') || container.querySelector('div');
+    expect(ratingContainer2).toBeInTheDocument();
+
+    rerender(<Rating value={3} size="lg" />);
+    const ratingContainer3 = container.querySelector('div[role="img"]') || container.querySelector('div');
+    expect(ratingContainer3).toBeInTheDocument();
+  });
+
+  it('handles keyboard navigation', () => {
+    const handleChange = vi.fn();
+    render(<Rating value={0} onChange={handleChange} />);
+    const stars = screen.getAllByRole('button');
+    fireEvent.keyDown(stars[2], { key: 'Enter' });
+    expect(handleChange).toHaveBeenCalledWith(3);
+  });
+});

package/src/ui/molecules/Rating/Rating.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+import { Star } from 'lucide-react';
+import { getColorClass } from '../../tokens/colors';
+import { getSpacingClass } from '../../tokens/spacing';
+import { getAnimationClass } from '../../tokens/animations';
+
+export type RatingSize = 'sm' | 'md' | 'lg';
+export type RatingVariant = 'filled' | 'outlined';
+
+export interface RatingProps {
+  value?: number;
+  defaultValue?: number;
+  max?: number;
+  size?: RatingSize;
+  variant?: RatingVariant;
+  readOnly?: boolean;
+  allowHalf?: boolean;
+  showValue?: boolean;
+  onChange?: (value: number) => void;
+  onHover?: (value: number) => void;
+  className?: string;
+  icon?: ReactNode;
+  emptyIcon?: ReactNode;
+}
+
+/**
+ * Rating Component
+ * 
+ * A rating component for displaying and selecting ratings.
+ * Supports filled and outlined variants, half ratings, and read-only mode.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <Rating value={4} max={5} onChange={(value) => console.log(value)} />
+ * 
+ * <Rating value={3.5} readOnly showValue />
+ * ```
+ */
+export default function Rating({
+  value: controlledValue,
+  defaultValue = 0,
+  max = 5,
+  size = 'md',
+  variant = 'filled',
+  readOnly = false,
+  allowHalf = false,
+  showValue = false,
+  onChange,
+  onHover,
+  className = '',
+  icon,
+  emptyIcon,
+}: RatingProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [hoverValue, setHoverValue] = useState<number | null>(null);
+
+  const isControlled = controlledValue !== undefined;
+  const displayValue = hoverValue ?? (isControlled ? controlledValue : internalValue);
+
+  const sizeConfig = {
+    sm: 'h-4 w-4',
+    md: 'h-5 w-5',
+    lg: 'h-6 w-6',
+  };
+
+  const handleClick = (newValue: number) => {
+    if (readOnly) return;
+
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+
+  const handleMouseEnter = (newValue: number) => {
+    if (readOnly) return;
+    setHoverValue(newValue);
+    onHover?.(newValue);
+  };
+
+  const handleMouseLeave = () => {
+    if (readOnly) return;
+    setHoverValue(null);
+  };
+
+  const renderStar = (index: number) => {
+    const starValue = index + 1;
+    const isHalf = allowHalf && displayValue >= starValue - 0.5 && displayValue < starValue;
+    const isFilled = displayValue >= starValue;
+
+    const starClasses = [
+      sizeConfig[size],
+      getAnimationClass('base'),
+      !readOnly && 'cursor-pointer',
+      isFilled || isHalf
+        ? variant === 'filled'
+          ? getColorClass('warning', 'DEFAULT', 'text')
+          : getColorClass('warning', 'DEFAULT', 'text')
+        : 'text-gray-300',
+    ].filter(Boolean).join(' ');
+
+    const CustomIcon = icon || <Star className={starClasses} fill={isFilled ? 'currentColor' : 'none'} />;
+    const CustomEmptyIcon = emptyIcon || <Star className={starClasses} fill="none" />;
+
+    return (
+      <span
+        key={index}
+        className="relative inline-block"
+        onClick={() => handleClick(starValue)}
+        onMouseEnter={() => handleMouseEnter(starValue)}
+        onMouseLeave={handleMouseLeave}
+        role={readOnly ? undefined : 'button'}
+        tabIndex={readOnly ? undefined : 0}
+        aria-label={`Rate ${starValue} out of ${max}`}
+        onKeyDown={(e) => {
+          if (!readOnly && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            handleClick(starValue);
+          }
+        }}
+      >
+        {isHalf ? (
+          <span className="relative inline-block">
+            <span className="absolute inset-0 overflow-hidden" style={{ width: '50%' }}>
+              {variant === 'filled' ? (
+                <Star className={starClasses} fill="currentColor" />
+              ) : (
+                CustomIcon
+              )}
+            </span>
+            {variant === 'filled' ? (
+              <Star className={starClasses} fill="none" />
+            ) : (
+              CustomEmptyIcon
+            )}
+          </span>
+        ) : isFilled ? (
+          variant === 'filled' ? (
+            <Star className={starClasses} fill="currentColor" />
+          ) : (
+            CustomIcon
+          )
+        ) : (
+          variant === 'filled' ? (
+            <Star className={starClasses} fill="none" />
+          ) : (
+            CustomEmptyIcon
+          )
+        )}
+      </span>
+    );
+  };
+
+  return (
+    <div className={`inline-flex items-center gap-1 ${className}`}>
+      <div
+        className="flex items-center"
+        role={readOnly ? 'img' : undefined}
+        aria-label={readOnly ? `Rating: ${displayValue} out of ${max}` : undefined}
+      >
+        {Array.from({ length: max }, (_, i) => renderStar(i))}
+      </div>
+      {showValue && (
+        <span className={`${getSpacingClass('sm', 'ml')} text-sm text-gray-600`}>
+          {displayValue.toFixed(allowHalf ? 1 : 0)}/{max}
+        </span>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { default } from './Rating';
+export type { RatingProps, RatingSize, RatingVariant } from './Rating';

package/src/ui/molecules/SearchInput/SearchInput.stories.tsx

@@ -0,0 +1,146 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import SearchInput from './SearchInput';
+
+const meta: Meta<typeof SearchInput> = {
+  title: 'Molecules/SearchInput',
+  component: SearchInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    loading: {
+      control: 'boolean',
+    },
+    showClearButton: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchInput>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <div className="w-64">
+        <SearchInput
+          {...args}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onSearch={(val) => console.log('Search:', val)}
+        />
+        <p className="mt-2 text-sm text-gray-600">Value: {value}</p>
+      </div>
+    );
+  },
+  args: {
+    placeholder: 'Search...',
+  },
+};
+
+export const WithLoading: Story = {
+  render: (args) => {
+    const [loading, setLoading] = useState(false);
+    const [value, setValue] = useState('');
+    
+    const handleSearch = (_val: string) => {
+      setLoading(true);
+      setTimeout(() => setLoading(false), 2000);
+    };
+    
+    return (
+      <div className="w-64">
+        <SearchInput
+          {...args}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onSearch={handleSearch}
+          loading={loading}
+        />
+      </div>
+    );
+  },
+  args: {
+    placeholder: 'Search with loading...',
+  },
+};
+
+export const WithoutClearButton: Story = {
+  render: (args) => {
+    const [value, setValue] = useState('test');
+    return (
+      <div className="w-64">
+        <SearchInput
+          {...args}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          showClearButton={false}
+        />
+      </div>
+    );
+  },
+  args: {
+    placeholder: 'Search without clear...',
+  },
+};
+
+export const WithDebounce: Story = {
+  render: (args) => {
+    const [value, setValue] = useState('');
+    const [searchResults, setSearchResults] = useState<string[]>([]);
+    
+    const handleSearch = (val: string) => {
+      setSearchResults([`Result 1 for "${val}"`, `Result 2 for "${val}"`]);
+    };
+    
+    return (
+      <div className="w-64 space-y-4">
+        <SearchInput
+          {...args}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onSearch={handleSearch}
+          debounceMs={500}
+        />
+        {searchResults.length > 0 && (
+          <div className="border border-gray-200 rounded-md p-2">
+            <p className="text-sm font-medium mb-2">Results:</p>
+            <ul className="text-sm space-y-1">
+              {searchResults.map((result, i) => (
+                <li key={i}>{result}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    );
+  },
+  args: {
+    placeholder: 'Search with 500ms debounce...',
+  },
+};
+
+export const InForm: Story = {
+  render: () => {
+    const [searchValue, setSearchValue] = useState('');
+    
+    return (
+      <div className="w-96 space-y-4 p-4 border border-gray-200 rounded-lg">
+        <h3 className="text-lg font-semibold">Search Form</h3>
+        <SearchInput
+          placeholder="Search products..."
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          onSearch={(val) => console.log('Searching for:', val)}
+        />
+        <p className="text-sm text-gray-600">
+          Press Enter or wait for debounce to trigger search
+        </p>
+      </div>
+    );
+  },
+};

package/src/ui/molecules/SearchInput/SearchInput.test.tsx

@@ -0,0 +1,82 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import SearchInput from './SearchInput';
+
+describe('SearchInput', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  it('renders correctly', () => {
+    render(<SearchInput />);
+    const input = screen.getByRole('searchbox') || screen.getByRole('textbox') || document.querySelector('input[type="search"]');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('calls onSearch with debounce', async () => {
+    const handleSearch = vi.fn();
+    render(<SearchInput onSearch={handleSearch} debounceMs={300} />);
+    
+    const input = screen.getByRole('searchbox') || screen.getByRole('textbox') || document.querySelector('input[type="search"]') as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+    
+    act(() => {
+      fireEvent.change(input, { target: { value: 'test' } });
+    });
+    
+    expect(handleSearch).not.toHaveBeenCalled();
+    
+    // Advance timers for debounce - need to advance more than debounceMs
+    act(() => {
+      vi.advanceTimersByTime(350);
+    });
+    
+    // Run all pending timers to ensure debounce completes
+    act(() => {
+      vi.runOnlyPendingTimers();
+    });
+    
+    // Check if callback was called
+    expect(handleSearch).toHaveBeenCalledWith('test');
+  }, 10000);
+
+  it('calls onSearch on Enter key', () => {
+    const handleSearch = vi.fn();
+    render(<SearchInput onSearch={handleSearch} defaultValue="test" />);
+    
+    const input = screen.getByRole('searchbox') || screen.getByRole('textbox') || document.querySelector('input[type="search"]') as HTMLInputElement;
+    fireEvent.keyDown(input, { key: 'Enter' });
+    
+    expect(handleSearch).toHaveBeenCalledWith('test');
+  });
+
+  it('shows clear button when value exists', () => {
+    render(<SearchInput defaultValue="test" showClearButton />);
+    expect(screen.getByLabelText('Clear search')).toBeInTheDocument();
+  });
+
+  it('calls onClear when clear button is clicked', () => {
+    const handleClear = vi.fn();
+    render(<SearchInput defaultValue="test" onClear={handleClear} />);
+    
+    const clearButton = screen.getByLabelText('Clear search');
+    fireEvent.click(clearButton);
+    
+    expect(handleClear).toHaveBeenCalled();
+  });
+
+  it('shows loading state', () => {
+    render(<SearchInput loading />);
+    const input = screen.getByRole('searchbox') || screen.getByRole('textbox') || document.querySelector('input[type="search"]');
+    expect(input).toBeInTheDocument();
+    // Check for loading indicator (spinner)
+    const spinner = document.querySelector('.animate-spin');
+    expect(spinner).toBeInTheDocument();
+  });
+});

package/src/ui/molecules/SearchInput/SearchInput.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useState, forwardRef } from 'react';
+import type { InputHTMLAttributes } from 'react';
+import { Search, X } from 'lucide-react';
+import Input from '../../atoms/Input/Input';
+import Button from '../../atoms/Button/Button';
+
+export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+  onSearch?: (value: string) => void;
+  onClear?: () => void;
+  loading?: boolean;
+  showClearButton?: boolean;
+  debounceMs?: number;
+}
+
+/**
+ * SearchInput Component
+ * 
+ * A search input component with icon, clear button, and loading state.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <SearchInput
+ *   placeholder="Search..."
+ *   onSearch={(value) => console.log(value)}
+ * />
+ * ```
+ */
+const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(function SearchInput({
+  onSearch,
+  onClear,
+  loading = false,
+  showClearButton = true,
+  debounceMs = 300,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  className = '',
+  ...props
+}, ref) {
+  const [internalValue, setInternalValue] = useState<string>(
+    typeof defaultValue === 'string' ? defaultValue : ''
+  );
+  const [debounceTimer, setDebounceTimer] = useState<NodeJS.Timeout | null>(null);
+
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const hasValue = currentValue !== undefined && currentValue !== null && String(currentValue).length > 0;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+
+    onChange?.(e);
+
+    // Debounce search
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+
+    const timer = setTimeout(() => {
+      onSearch?.(newValue);
+    }, debounceMs);
+
+    setDebounceTimer(timer);
+  };
+
+  const handleClear = () => {
+    if (!isControlled) {
+      setInternalValue('');
+    }
+
+    // Create synthetic event for onChange
+    const syntheticEvent = {
+      target: { value: '' },
+      currentTarget: { value: '' },
+    } as React.ChangeEvent<HTMLInputElement>;
+    onChange?.(syntheticEvent);
+
+    onClear?.();
+    onSearch?.('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && onSearch) {
+      onSearch(String(currentValue || ''));
+    }
+    props.onKeyDown?.(e);
+  };
+
+  return (
+    <div className={`relative ${className}`}>
+      <Input
+        ref={ref}
+        {...props}
+        type="search"
+        value={currentValue}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        leftIcon={loading ? (
+          <div className="animate-spin">
+            <Search className="h-4 w-4" />
+          </div>
+        ) : (
+          <Search className="h-4 w-4" />
+        )}
+        rightIcon={
+          showClearButton && hasValue && !loading ? (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleClear}
+              className="h-auto p-1"
+              aria-label="Clear search"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          ) : undefined
+        }
+        className="pr-10"
+      />
+    </div>
+  );
+});
+
+SearchInput.displayName = 'SearchInput';
+
+export default SearchInput;

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

@@ -0,0 +1,2 @@
+export { default } from './SearchInput';
+export type { SearchInputProps } from './SearchInput';