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

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

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Spinner from './Spinner';
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Atoms/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'neutral'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+    variant: 'primary',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Spinner size="sm" />
+      <Spinner size="md" />
+      <Spinner size="lg" />
+    </div>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Spinner variant="primary" />
+      <Spinner variant="secondary" />
+      <Spinner variant="neutral" />
+    </div>
+  ),
+};
+
+export const WithLabel: Story = {
+  args: {
+    size: 'md',
+    variant: 'primary',
+    label: 'Loading content...',
+  },
+};

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

@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Spinner from './Spinner';
+
+describe('Spinner', () => {
+  it('renders spinner', () => {
+    render(<Spinner />);
+    const spinner = screen.getByRole('status');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('has correct aria-label', () => {
+    render(<Spinner label="Loading data" />);
+    const spinner = screen.getByLabelText('Loading data');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('has default aria-label when no label provided', () => {
+    render(<Spinner />);
+    const spinner = screen.getByLabelText('Loading');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('applies size classes correctly', () => {
+    const { container } = render(<Spinner size="sm" />);
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('h-4', 'w-4');
+  });
+
+  it('applies variant classes correctly', () => {
+    const { container } = render(<Spinner variant="primary" />);
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('text-indigo-500');
+  });
+});

package/src/ui/atoms/Spinner/Spinner.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { memo, useMemo } from 'react';
+import type { HTMLAttributes } from 'react';
+import { getColorClass } from '../../tokens/colors';
+
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+export type SpinnerVariant = 'primary' | 'secondary' | 'neutral';
+
+export interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
+  size?: SpinnerSize;
+  variant?: SpinnerVariant;
+  label?: string;
+}
+
+/**
+ * Spinner Component
+ * 
+ * A loading spinner component for indicating loading states.
+ * Follows Atomic Design principles as an Atom component.
+ * Uses Strategy Pattern for different size/variant combinations.
+ * 
+ * @example
+ * ```tsx
+ * <Spinner size="md" variant="primary" label="Loading..." />
+ * ```
+ */
+const Spinner = memo(function Spinner({
+  size = 'md',
+  variant = 'primary',
+  label,
+  className = '',
+  ...props
+}: SpinnerProps) {
+  const sizeClasses: Record<SpinnerSize, string> = {
+    sm: 'h-4 w-4',
+    md: 'h-5 w-5',
+    lg: 'h-8 w-8',
+  };
+
+  const variantColorClass = useMemo(() => 
+    variant === 'neutral' 
+      ? 'text-gray-500' 
+      : variant === 'secondary'
+      ? getColorClass('secondary', 'DEFAULT', 'text')
+      : getColorClass('primary', 'DEFAULT', 'text'),
+    [variant]
+  );
+
+  return (
+    <div
+      className={`inline-flex items-center ${className}`}
+      role="status"
+      aria-label={label || 'Loading'}
+      aria-live="polite"
+      {...props}
+    >
+      <svg
+        className={`animate-spin ${sizeClasses[size]} ${variantColorClass}`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <circle
+          className="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          strokeWidth="4"
+        />
+        <path
+          className="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+      {label && (
+        <span className="ml-2 text-sm text-gray-600 sr-only">{label}</span>
+      )}
+    </div>
+  );
+});
+
+Spinner.displayName = 'Spinner';
+
+export default Spinner;

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

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import Switch from './Switch';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Atoms/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    checked: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    error: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [checked, setChecked] = useState(args.checked || false);
+    return (
+      <Switch
+        {...args}
+        checked={checked}
+        onChange={(e) => setChecked(e.target.checked)}
+      />
+    );
+  },
+  args: {
+    checked: false,
+  },
+};
+
+export const WithLabel: Story = {
+  render: (args) => {
+    const [checked, setChecked] = useState(args.checked || false);
+    return (
+      <Switch
+        {...args}
+        checked={checked}
+        onChange={(e) => setChecked(e.target.checked)}
+      />
+    );
+  },
+  args: {
+    label: 'Enable notifications',
+    checked: false,
+  },
+};
+
+export const WithDescription: Story = {
+  render: (args) => {
+    const [checked, setChecked] = useState(args.checked || false);
+    return (
+      <Switch
+        {...args}
+        checked={checked}
+        onChange={(e) => setChecked(e.target.checked)}
+      />
+    );
+  },
+  args: {
+    label: 'Enable notifications',
+    description: 'Receive email notifications about your account activity',
+    checked: false,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => {
+    const [smChecked, setSmChecked] = useState(false);
+    const [mdChecked, setMdChecked] = useState(false);
+    const [lgChecked, setLgChecked] = useState(false);
+    
+    return (
+      <div className="flex flex-col gap-4">
+        <Switch
+          size="sm"
+          label="Small"
+          checked={smChecked}
+          onChange={(e) => setSmChecked(e.target.checked)}
+        />
+        <Switch
+          size="md"
+          label="Medium"
+          checked={mdChecked}
+          onChange={(e) => setMdChecked(e.target.checked)}
+        />
+        <Switch
+          size="lg"
+          label="Large"
+          checked={lgChecked}
+          onChange={(e) => setLgChecked(e.target.checked)}
+        />
+      </div>
+    );
+  },
+};
+
+export const States: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(true);
+    const [unchecked, setUnchecked] = useState(false);
+    const [errorChecked, setErrorChecked] = useState(false);
+    
+    return (
+      <div className="flex flex-col gap-4">
+        <Switch
+          label="Checked"
+          checked={checked}
+          onChange={(e) => setChecked(e.target.checked)}
+        />
+        <Switch
+          label="Unchecked"
+          checked={unchecked}
+          onChange={(e) => setUnchecked(e.target.checked)}
+        />
+        <Switch
+          label="Error state"
+          checked={errorChecked}
+          onChange={(e) => setErrorChecked(e.target.checked)}
+          error
+        />
+        <Switch
+          label="Disabled (checked)"
+          checked={true}
+          onChange={() => {}}
+          disabled
+        />
+        <Switch
+          label="Disabled (unchecked)"
+          checked={false}
+          onChange={() => {}}
+          disabled
+        />
+      </div>
+    );
+  },
+};
+
+export const Accessibility: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    
+    return (
+      <div className="space-y-4">
+        <div>
+          <p className="text-sm text-gray-600 mb-2">
+            Switch with proper ARIA attributes and keyboard navigation:
+          </p>
+          <Switch
+            label="Accessible switch"
+            description="This switch supports keyboard navigation (Enter/Space)"
+            checked={checked}
+            onChange={(e) => setChecked(e.target.checked)}
+          />
+        </div>
+        <div className="text-xs text-gray-500">
+          <p>Keyboard shortcuts:</p>
+          <ul className="list-disc list-inside mt-1">
+            <li>Enter or Space: Toggle switch</li>
+            <li>Tab: Navigate to switch</li>
+          </ul>
+        </div>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,90 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Switch from './Switch';
+
+describe('Switch', () => {
+  it('renders correctly', () => {
+    render(<Switch checked={false} onChange={() => {}} />);
+    const switchElement = screen.getByRole('switch');
+    expect(switchElement).toBeInTheDocument();
+  });
+
+  it('handles checked state', () => {
+    render(<Switch checked={true} onChange={() => {}} />);
+    const switchElement = screen.getByRole('switch');
+    expect(switchElement).toHaveAttribute('aria-checked', 'true');
+  });
+
+  it('handles unchecked state', () => {
+    render(<Switch checked={false} onChange={() => {}} />);
+    const switchElement = screen.getByRole('switch');
+    expect(switchElement).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('calls onChange when clicked', () => {
+    const handleChange = vi.fn();
+    render(<Switch checked={false} onChange={handleChange} />);
+    const switchElement = screen.getByRole('switch');
+    fireEvent.click(switchElement);
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays label when provided', () => {
+    render(<Switch label="Enable feature" checked={false} onChange={() => {}} />);
+    expect(screen.getByText('Enable feature')).toBeInTheDocument();
+  });
+
+  it('displays description when provided', () => {
+    render(
+      <Switch
+        label="Enable feature"
+        description="This will enable the feature"
+        checked={false}
+        onChange={() => {}}
+      />
+    );
+    expect(screen.getByText('This will enable the feature')).toBeInTheDocument();
+  });
+
+  it('handles disabled state', () => {
+    render(<Switch checked={false} onChange={() => {}} disabled />);
+    const switchElement = screen.getByRole('switch');
+    expect(switchElement).toHaveAttribute('disabled');
+  });
+
+  it('does not call onChange when disabled', () => {
+    const handleChange = vi.fn();
+    render(<Switch checked={false} onChange={handleChange} disabled />);
+    const switchElement = screen.getByRole('switch');
+    fireEvent.click(switchElement);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it('handles keyboard navigation', () => {
+    const handleChange = vi.fn();
+    render(<Switch checked={false} onChange={handleChange} />);
+    const switchElement = screen.getByRole('switch');
+    fireEvent.keyDown(switchElement, { key: 'Enter' });
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('handles different sizes', () => {
+    const { rerender } = render(<Switch size="sm" checked={false} onChange={() => {}} />);
+    let switchElement = screen.getByRole('switch');
+    expect(switchElement).toBeInTheDocument();
+
+    rerender(<Switch size="md" checked={false} onChange={() => {}} />);
+    switchElement = screen.getByRole('switch');
+    expect(switchElement).toBeInTheDocument();
+
+    rerender(<Switch size="lg" checked={false} onChange={() => {}} />);
+    switchElement = screen.getByRole('switch');
+    expect(switchElement).toBeInTheDocument();
+  });
+
+  it('handles error state', () => {
+    render(<Switch checked={false} onChange={() => {}} error />);
+    const switchElement = screen.getByRole('switch');
+    expect(switchElement).toBeInTheDocument();
+  });
+});

package/src/ui/atoms/Switch/Switch.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+import { forwardRef } from 'react';
+import type { InputHTMLAttributes } from 'react';
+import { getColorClass } from '../../tokens/colors';
+import { getAnimationClass } from '../../tokens/animations';
+
+export type SwitchSize = 'sm' | 'md' | 'lg';
+
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+  size?: SwitchSize;
+  label?: string;
+  description?: string;
+  error?: boolean;
+}
+
+/**
+ * Switch Component
+ * 
+ * A toggle switch component for on/off states.
+ * Follows Atomic Design principles as an Atom component.
+ * 
+ * @example
+ * ```tsx
+ * <Switch checked={isEnabled} onChange={(e) => setIsEnabled(e.target.checked)} />
+ * 
+ * <Switch 
+ *   label="Enable notifications"
+ *   description="Receive email notifications"
+ *   checked={notifications}
+ *   onChange={(e) => setNotifications(e.target.checked)}
+ * />
+ * ```
+ */
+const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch({
+  size = 'md',
+  label,
+  description,
+  error = false,
+  className = '',
+  disabled = false,
+  checked,
+  onChange,
+  id,
+  ...props
+}, ref) {
+  const switchId = id || `switch-${Math.random().toString(36).substr(2, 9)}`;
+  const labelId = label ? `${switchId}-label` : undefined;
+  const descriptionId = description ? `${switchId}-description` : undefined;
+
+  // Size configurations
+  const sizeConfig = {
+    sm: {
+      track: 'w-9 h-5',
+      thumb: 'w-4 h-4',
+      translate: 'translate-x-4',
+    },
+    md: {
+      track: 'w-11 h-6',
+      thumb: 'w-5 h-5',
+      translate: 'translate-x-5',
+    },
+    lg: {
+      track: 'w-14 h-7',
+      thumb: 'w-6 h-6',
+      translate: 'translate-x-7',
+    },
+  };
+
+  const config = sizeConfig[size];
+
+  const trackClasses = [
+    'relative',
+    'inline-flex',
+    'flex-shrink-0',
+    'cursor-pointer',
+    'rounded-full',
+    'border-2',
+    'border-transparent',
+    getAnimationClass('base'),
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-offset-2',
+    config.track,
+    checked
+      ? getColorClass('primary', 'DEFAULT', 'bg')
+      : 'bg-gray-200',
+    error && !checked ? 'border-red-500' : '',
+    disabled ? 'opacity-50 cursor-not-allowed' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const thumbClasses = [
+    'pointer-events-none',
+    'inline-block',
+    'rounded-full',
+    'bg-white',
+    'shadow',
+    'transform',
+    getAnimationClass('base'),
+    config.thumb,
+    checked ? config.translate : 'translate-x-0',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className="flex items-start gap-3">
+      <div className="flex items-center">
+        <button
+          type="button"
+          className={trackClasses}
+          role="switch"
+          aria-checked={checked}
+          aria-labelledby={labelId}
+          aria-describedby={descriptionId}
+          disabled={disabled}
+          onClick={(e) => {
+            if (!disabled && onChange) {
+              const syntheticEvent = {
+                ...e,
+                target: { ...e.target, checked: !checked },
+                currentTarget: { ...e.currentTarget, checked: !checked },
+              } as React.ChangeEvent<HTMLInputElement>;
+              onChange(syntheticEvent);
+            }
+          }}
+          onKeyDown={(e) => {
+            if ((e.key === 'Enter' || e.key === ' ') && !disabled && onChange) {
+              e.preventDefault();
+              const syntheticEvent = {
+                ...e,
+                target: { ...e.target, checked: !checked },
+                currentTarget: { ...e.currentTarget, checked: !checked },
+              } as React.ChangeEvent<HTMLInputElement>;
+              onChange(syntheticEvent);
+            }
+          }}
+        >
+          <span className={thumbClasses} />
+        </button>
+        <input
+          ref={ref}
+          type="checkbox"
+          id={switchId}
+          checked={checked}
+          onChange={onChange}
+          disabled={disabled}
+          className="sr-only"
+          aria-hidden="true"
+          {...props}
+        />
+      </div>
+      {(label || description) && (
+        <div className="flex-1">
+          {label && (
+            <label
+              id={labelId}
+              htmlFor={switchId}
+              className={`block text-sm font-medium ${
+                error ? getColorClass('error', 'DEFAULT', 'text') : 'text-gray-700'
+              } ${disabled ? 'opacity-50' : 'cursor-pointer'}`}
+            >
+              {label}
+            </label>
+          )}
+          {description && (
+            <p
+              id={descriptionId}
+              className={`mt-1 text-sm ${error ? getColorClass('error', 'DEFAULT', 'text') : 'text-gray-500'}`}
+            >
+              {description}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
+
+Switch.displayName = 'Switch';
+
+export default Switch;

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

@@ -0,0 +1,2 @@
+export { default } from './Switch';
+export type { SwitchProps, SwitchSize } from './Switch';

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Text from "./Text";
 
 const meta: Meta<typeof Text> = {
-  title: "UI/Atoms/Text",
+  title: "Atoms/Text",
   component: Text,
 };