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

package/src/ui/atoms/Select/Select.test.tsx

@@ -1,63 +1,179 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import Select from "./Select";
-
-describe("Select", () => {
-  const options = [
-    { value: "1", label: "Option 1" },
-    { value: "2", label: "Option 2" },
-    { value: "3", label: "Option 3" },
-  ];
-
-  it("renders with options", () => {
+import { describe, it, expect } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Select from './Select';
+
+const options = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+  { value: '3', label: 'Option 3' },
+];
+
+describe('Select', () => {
+  it('renders select with options', () => {
     render(<Select options={options} />);
-    const select = screen.getByRole("combobox");
-    expect(select).toBeInTheDocument();
-    expect(screen.getByText("Option 1")).toBeInTheDocument();
-    expect(screen.getByText("Option 2")).toBeInTheDocument();
-    expect(screen.getByText("Option 3")).toBeInTheDocument();
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+    expect(screen.getByText('Option 2')).toBeInTheDocument();
+  });
+
+  it('renders with label', () => {
+    render(<Select label="Choose option" options={options} />);
+    expect(screen.getByText('Choose option')).toBeInTheDocument();
+  });
+
+  it('renders placeholder', () => {
+    render(<Select placeholder="Select..." options={options} />);
+    expect(screen.getByText('Select...')).toBeInTheDocument();
   });
 
-  it("renders with placeholder", () => {
-    render(<Select options={options} placeholder="Select an option" />);
-    const placeholder = screen.getByText("Select an option");
-    expect(placeholder).toBeInTheDocument();
-    expect(placeholder).toBeDisabled();
+  it('shows error state', () => {
+    const { container } = render(<Select error helperText="Error message" options={options} />);
+    const select = container.querySelector('select');
+    expect(select).toHaveAttribute('aria-invalid', 'true');
+    expect(screen.getByText('Error message')).toBeInTheDocument();
   });
 
-  it("applies error styling when error is true", () => {
-    render(<Select options={options} error />);
-    const select = screen.getByRole("combobox");
-    expect(select).toHaveClass("border-red-500");
-    expect(select).toHaveAttribute("aria-invalid", "true");
+  it('shows success state', () => {
+    render(<Select success helperText="Valid" options={options} />);
+    expect(screen.getByText('Valid')).toBeInTheDocument();
   });
 
-  it("applies custom className", () => {
-    render(<Select options={options} className="custom-class" />);
-    const select = screen.getByRole("combobox");
-    expect(select).toHaveClass("custom-class");
+  it('renders option groups', () => {
+    const optionGroups = [
+      {
+        label: 'Group 1',
+        options: [
+          { value: '1', label: 'Option 1' },
+          { value: '2', label: 'Option 2' },
+        ],
+      },
+    ];
+    const { container } = render(<Select optionGroups={optionGroups} />);
+    const optgroup = container.querySelector('optgroup[label="Group 1"]');
+    expect(optgroup).toBeInTheDocument();
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+  });
+
+  it('applies size classes', () => {
+    const { container } = render(<Select size="sm" options={options} />);
+    const select = container.querySelector('select');
+    expect(select).toHaveClass('h-8', 'text-sm');
   });
 
-  it("renders disabled options", () => {
+  it('disables options correctly', () => {
     const optionsWithDisabled = [
-      { value: "1", label: "Option 1" },
-      { value: "2", label: "Option 2", disabled: true },
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2', disabled: true },
     ];
-    render(<Select options={optionsWithDisabled} />);
-    const option2 = screen.getByText("Option 2");
-    expect(option2).toBeDisabled();
+    const { container } = render(<Select options={optionsWithDisabled} />);
+    const disabledOption = container.querySelector('option[value="2"]');
+    expect(disabledOption).toBeDisabled();
   });
 
-  it("supports defaultValue", () => {
-    render(<Select options={options} defaultValue="2" />);
-    const select = screen.getByRole("combobox") as HTMLSelectElement;
-    expect(select.value).toBe("2");
+  describe('Keyboard Navigation', () => {
+    it('is focusable', () => {
+      render(<Select options={options} />);
+      const select = screen.getByRole('combobox');
+      select.focus();
+      expect(document.activeElement).toBe(select);
+    });
+
+    it('is not focusable when disabled', () => {
+      render(<Select disabled options={options} />);
+      const select = screen.getByRole('combobox');
+      expect(select).toBeDisabled();
+    });
+
+    it('handles Arrow key navigation', () => {
+      const handleChange = vi.fn();
+      render(<Select options={options} onChange={handleChange} />);
+      const select = screen.getByRole('combobox');
+      select.focus();
+      fireEvent.keyDown(select, { key: 'ArrowDown' });
+      // Arrow keys should navigate options
+      expect(select).toBeInTheDocument();
+    });
   });
 
-  it("has accessible attributes when error", () => {
-    render(<Select options={options} error id="test-select" />);
-    const select = screen.getByRole("combobox");
-    expect(select).toHaveAttribute("aria-invalid", "true");
-    expect(select).toHaveAttribute("aria-describedby", "test-select-error");
+  describe('Accessibility', () => {
+    it('has correct role', () => {
+      render(<Select options={options} />);
+      const select = screen.getByRole('combobox');
+      expect(select).toBeInTheDocument();
+    });
+
+    it('associates label with select', () => {
+      render(<Select label="Choose option" id="select" options={options} />);
+      const select = screen.getByLabelText('Choose option');
+      expect(select).toBeInTheDocument();
+      expect(select).toHaveAttribute('id', 'select');
+    });
+
+    it('has aria-invalid when error', () => {
+      render(<Select error options={options} />);
+      const select = screen.getByRole('combobox');
+      expect(select).toHaveAttribute('aria-invalid', 'true');
+    });
+
+    it('has aria-describedby when helperText is provided', () => {
+      render(<Select helperText="Helper text" id="test-select" options={options} />);
+      const select = screen.getByRole('combobox');
+      expect(select).toHaveAttribute('aria-describedby', 'test-select-helper');
+    });
+
+    it('has aria-describedby for error message', () => {
+      render(<Select error helperText="Error message" id="test-select" options={options} />);
+      const select = screen.getByRole('combobox');
+      expect(select).toHaveAttribute('aria-describedby', 'test-select-error');
+    });
+
+    it('has aria-required when required', () => {
+      render(<Select required options={options} />);
+      const select = screen.getByRole('combobox');
+      expect(select).toHaveAttribute('aria-required', 'true');
+      expect(select).toHaveAttribute('required');
+    });
+
+    it('has aria-label when provided', () => {
+      render(<Select aria-label="Select option" options={options} />);
+      const select = screen.getByLabelText('Select option');
+      expect(select).toBeInTheDocument();
+    });
+
+    it('has correct name attribute', () => {
+      render(<Select name="test-select" options={options} />);
+      const select = screen.getByRole('combobox');
+      expect(select).toHaveAttribute('name', 'test-select');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles controlled select', () => {
+      const { rerender } = render(<Select value="1" options={options} onChange={vi.fn()} />);
+      const select = screen.getByRole('combobox') as HTMLSelectElement;
+      expect(select.value).toBe('1');
+      
+      rerender(<Select value="2" options={options} onChange={vi.fn()} />);
+      expect(select.value).toBe('2');
+    });
+
+    it('handles uncontrolled select', () => {
+      render(<Select defaultValue="1" options={options} />);
+      const select = screen.getByRole('combobox') as HTMLSelectElement;
+      expect(select.value).toBe('1');
+    });
+
+    it('handles empty options array', () => {
+      render(<Select options={[]} />);
+      const select = screen.getByRole('combobox');
+      expect(select).toBeInTheDocument();
+    });
+
+    it('handles onChange event', () => {
+      const handleChange = vi.fn();
+      render(<Select options={options} onChange={handleChange} />);
+      const select = screen.getByRole('combobox');
+      fireEvent.change(select, { target: { value: '2' } });
+      expect(handleChange).toHaveBeenCalled();
+    });
   });
 });

package/src/ui/atoms/Select/Select.tsx

@@ -1,15 +1,32 @@
-import type { SelectHTMLAttributes } from "react";
+'use client';
 
-interface Option {
+import { forwardRef } from 'react';
+import type { SelectHTMLAttributes, ReactNode } from 'react';
+import { getTypographyClasses } from '../../tokens/typography';
+import { getColorClass } from '../../tokens/colors';
+
+export type SelectSize = 'sm' | 'md' | 'lg';
+
+export interface SelectOption {
   value: string;
   label: string;
   disabled?: boolean;
 }
 
-interface Props extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"> {
-  options: Option[];
+export interface SelectOptionGroup {
+  label: string;
+  options: SelectOption[];
+}
+
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children' | 'size'> {
+  options: SelectOption[];
+  optionGroups?: SelectOptionGroup[];
   placeholder?: string;
+  label?: ReactNode;
   error?: boolean;
+  success?: boolean;
+  helperText?: string;
+  size?: SelectSize;
 }
 
 /**
@@ -17,10 +34,12 @@ interface Props extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"
  * 
  * A styled select dropdown component for forms.
  * Follows Atomic Design principles as an Atom component.
+ * Supports both flat options and option groups.
  * 
  * @example
  * ```tsx
  * <Select 
+ *   label="Choose option"
  *   options={[
  *     { value: "1", label: "Option 1" },
  *     { value: "2", label: "Option 2" }
@@ -29,57 +48,136 @@ interface Props extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"
  * />
  * ```
  */
-export default function Select({
+const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select({
   options,
+  optionGroups,
   placeholder,
+  label,
   error = false,
-  className = "",
+  success = false,
+  helperText,
+  size = 'md',
+  className = '',
+  disabled = false,
+  id,
   ...props
-}: Props) {
+}, ref) {
+  const selectId = id || `select-${Math.random().toString(36).substr(2, 9)}`;
+  const errorId = error ? `${selectId}-error` : undefined;
+  const helperId = helperText ? `${selectId}-helper` : undefined;
+
+  // Size classes
+  const sizeClasses: Record<SelectSize, string> = {
+    sm: 'h-8 text-sm px-3',
+    md: 'h-10 text-base px-4',
+    lg: 'h-12 text-lg px-5',
+  };
+
+  // State classes
+  const stateClasses = error
+    ? 'border-red-500 focus:ring-red-500'
+    : success
+    ? 'border-green-500 focus:ring-green-500'
+    : 'border-gray-300 focus:ring-indigo-500';
+
   const baseClasses = [
-    "block",
-    "w-full",
-    "rounded",
-    "h-form-element",
-    "px-large",
-    "border",
-    "text-base",
-    "focus:outline-none",
-    "focus:ring-2",
-    "focus:ring-offset-2",
+    'block',
+    'w-full',
+    'rounded-md',
+    'border',
+    'bg-white',
+    'transition-colors',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-offset-2',
+    'disabled:opacity-50',
+    'disabled:cursor-not-allowed',
+    sizeClasses[size],
+    stateClasses,
   ];
 
-  const errorClasses = error
-    ? "border-red-500 focus:ring-red-500"
-    : "border-gray-300 focus:ring-indigo-500";
-
-  const classes = [
+  const selectClasses = [
     ...baseClasses,
-    errorClasses,
     className,
-  ].filter(Boolean).join(" ");
+  ].filter(Boolean).join(' ');
+
+  const labelClasses = [
+    'block',
+    getTypographyClasses('label'),
+    'mb-1',
+    disabled ? 'opacity-50' : '',
+  ].filter(Boolean).join(' ');
 
   return (
-    <select
-      className={classes}
-      aria-invalid={error}
-      aria-describedby={error ? `${props.id}-error` : undefined}
-      {...props}
-    >
-      {placeholder && (
-        <option value="" disabled>
-          {placeholder}
-        </option>
+    <div className="w-full">
+      {label && (
+        <label
+          htmlFor={selectId}
+          className={labelClasses}
+        >
+          {label}
+        </label>
       )}
-      {options.map((option) => (
-        <option
-          key={option.value}
-          value={option.value}
-          disabled={option.disabled}
+      <select
+        id={selectId}
+        ref={ref}
+        className={selectClasses}
+        disabled={disabled}
+        aria-invalid={error}
+        aria-required={props.required}
+        aria-describedby={errorId || helperId}
+        {...props}
+      >
+        {placeholder && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
+        {optionGroups ? (
+          optionGroups.map((group, groupIndex) => (
+            <optgroup key={groupIndex} label={group.label}>
+              {group.options.map((option) => (
+                <option
+                  key={option.value}
+                  value={option.value}
+                  disabled={option.disabled}
+                >
+                  {option.label}
+                </option>
+              ))}
+            </optgroup>
+          ))
+        ) : (
+          options.map((option) => (
+            <option
+              key={option.value}
+              value={option.value}
+              disabled={option.disabled}
+            >
+              {option.label}
+            </option>
+          ))
+        )}
+      </select>
+      {(error || success || helperText) && (
+        <div
+          id={errorId || helperId}
+          className={`mt-1 ${getTypographyClasses('caption')} ${
+            error 
+              ? getColorClass('error', 'DEFAULT', 'text')
+              : success
+              ? getColorClass('success', 'DEFAULT', 'text')
+              : 'text-gray-500'
+          }`}
+          role={error || success ? 'alert' : undefined}
         >
-          {option.label}
-        </option>
-      ))}
-    </select>
+          {helperText || (error ? 'Error' : success ? 'Success' : '')}
+        </div>
+      )}
+    </div>
   );
-}
+});
+
+Select.displayName = 'Select';
+
+export default Select;

package/src/ui/atoms/Separator/Separator.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Separator from './Separator';
+
+const meta: Meta<typeof Separator> = {
+  title: 'Atoms/Separator',
+  component: Separator,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+    variant: {
+      control: 'select',
+      options: ['solid', 'dashed', 'dotted'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Separator>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Horizontal: Story = {
+  render: () => (
+    <div className="w-64 space-y-4">
+      <p>Content above</p>
+      <Separator />
+      <p>Content below</p>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex items-center gap-4 h-32">
+      <p>Left content</p>
+      <Separator orientation="vertical" />
+      <p>Right content</p>
+    </div>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="w-64 space-y-4">
+      <div>
+        <p className="mb-2">Solid</p>
+        <Separator variant="solid" />
+      </div>
+      <div>
+        <p className="mb-2">Dashed</p>
+        <Separator variant="dashed" />
+      </div>
+      <div>
+        <p className="mb-2">Dotted</p>
+        <Separator variant="dotted" />
+      </div>
+    </div>
+  ),
+};
+
+export const InContext: Story = {
+  render: () => (
+    <div className="w-96 space-y-4 p-4">
+      <div>
+        <h3 className="text-lg font-semibold">Section 1</h3>
+        <p className="text-sm text-gray-600">Content for section 1</p>
+      </div>
+      <Separator />
+      <div>
+        <h3 className="text-lg font-semibold">Section 2</h3>
+        <p className="text-sm text-gray-600">Content for section 2</p>
+      </div>
+      <Separator variant="dashed" />
+      <div>
+        <h3 className="text-lg font-semibold">Section 3</h3>
+        <p className="text-sm text-gray-600">Content for section 3</p>
+      </div>
+    </div>
+  ),
+};

package/src/ui/atoms/Separator/Separator.test.tsx

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Separator from './Separator';
+
+describe('Separator', () => {
+  it('renders correctly', () => {
+    render(<Separator />);
+    const separator = screen.getByRole('separator');
+    expect(separator).toBeInTheDocument();
+  });
+
+  it('renders horizontal separator by default', () => {
+    render(<Separator />);
+    const separator = screen.getByRole('separator');
+    expect(separator).toHaveAttribute('aria-orientation', 'horizontal');
+  });
+
+  it('renders vertical separator', () => {
+    render(<Separator orientation="vertical" />);
+    const separator = screen.getByRole('separator');
+    expect(separator).toHaveAttribute('aria-orientation', 'vertical');
+  });
+
+  it('handles different variants', () => {
+    const { rerender } = render(<Separator variant="solid" />);
+    expect(screen.getByRole('separator')).toBeInTheDocument();
+
+    rerender(<Separator variant="dashed" />);
+    expect(screen.getByRole('separator')).toBeInTheDocument();
+
+    rerender(<Separator variant="dotted" />);
+    expect(screen.getByRole('separator')).toBeInTheDocument();
+  });
+});

package/src/ui/atoms/Separator/Separator.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { memo, useMemo } from 'react';
+import type { HTMLAttributes } from 'react';
+import { getColorClass } from '../../tokens/colors';
+
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+export type SeparatorVariant = 'solid' | 'dashed' | 'dotted';
+
+export interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {
+  orientation?: SeparatorOrientation;
+  variant?: SeparatorVariant;
+}
+
+/**
+ * Separator Component
+ * 
+ * A visual separator component for dividing content.
+ * Follows Atomic Design principles as an Atom component.
+ * Optimized with React.memo to prevent unnecessary re-renders.
+ * 
+ * @example
+ * ```tsx
+ * <Separator />
+ * 
+ * <Separator orientation="vertical" variant="dashed" />
+ * ```
+ */
+const Separator = memo(function Separator({
+  orientation = 'horizontal',
+  variant = 'solid',
+  className = '',
+  ...props
+}: SeparatorProps) {
+  const baseClasses = [
+    'border-0',
+    getColorClass('neutral', 'DEFAULT', 'border'),
+  ];
+
+  const orientationClasses = {
+    horizontal: 'w-full border-t',
+    vertical: 'h-full border-l self-stretch',
+  };
+
+  const variantClasses = {
+    solid: 'border-solid',
+    dashed: 'border-dashed',
+    dotted: 'border-dotted',
+  };
+
+  const classes = useMemo(() => [
+    ...baseClasses,
+    orientationClasses[orientation],
+    variantClasses[variant],
+    className,
+  ].filter(Boolean).join(' '), [orientation, variant, className]);
+
+  if (orientation === 'vertical') {
+    return (
+      <div
+        className={classes}
+        role="separator"
+        aria-orientation="vertical"
+        {...(props as HTMLAttributes<HTMLDivElement>)}
+      />
+    );
+  }
+
+  return (
+    <hr
+      className={classes}
+      role="separator"
+      aria-orientation="horizontal"
+      {...props}
+    />
+  );
+});
+
+Separator.displayName = 'Separator';
+
+export default Separator;

package/src/ui/atoms/Separator/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Separator';
+export type { SeparatorProps, SeparatorOrientation, SeparatorVariant } from './Separator';