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

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

@@ -6,12 +6,34 @@ const meta = {
   component: Skeleton,
   parameters: {
     layout: "centered",
+    docs: {
+      description: {
+        component: "A skeleton loader component for displaying loading states. Includes proper ARIA attributes (role='status', aria-busy='true') to indicate loading state to screen readers.",
+      },
+    },
   },
   tags: ["autodocs"],
   argTypes: {
     variant: {
       control: "select",
       options: ["text", "card", "list", "circle"],
+      description: "Visual variant of the skeleton",
+    },
+    width: {
+      control: "text",
+      description: "Custom width (e.g., '200px', '50%')",
+    },
+    height: {
+      control: "text",
+      description: "Custom height (e.g., '20px', '100px')",
+    },
+    lines: {
+      control: "number",
+      description: "Number of lines for text variant",
+    },
+    'aria-label': {
+      control: "text",
+      description: "Accessible label describing what is loading",
     },
   },
 } satisfies Meta<typeof Skeleton>;
@@ -59,3 +81,43 @@ export const CustomSize: Story = {
     height: "20px",
   },
 };
+
+export const WithAriaLabel: Story = {
+  args: {
+    variant: "card",
+    'aria-label': "Loading user profile card",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Skeleton with custom aria-label for better screen reader experience.",
+      },
+    },
+  },
+};
+
+export const LoadingStates: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium mb-2">Loading User List</h3>
+        <Skeleton variant="list" aria-label="Loading user list" />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2">Loading Content</h3>
+        <Skeleton variant="text" lines={3} aria-label="Loading article content" />
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2">Loading Avatar</h3>
+        <Skeleton variant="circle" width="48px" height="48px" aria-label="Loading user avatar" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Example of using multiple skeleton loaders together to show a loading state.",
+      },
+    },
+  },
+};

package/src/ui/atoms/Skeleton/Skeleton.tsx

@@ -25,6 +25,7 @@ export default function Skeleton({
   height,
   lines = 1,
   className = "",
+  'aria-label': ariaLabel,
   ...props
 }: SkeletonProps) {
   const baseClasses = [
@@ -50,14 +51,23 @@ export default function Skeleton({
   if (width) style.width = width;
   if (height) style.height = height;
 
+  const defaultAriaLabel = ariaLabel || `Loading ${variant} content`;
+
   if (variant === "text" && lines > 1) {
     return (
-      <div className="space-y-2" {...props}>
+      <div
+        className="space-y-2"
+        role="status"
+        aria-busy="true"
+        aria-label={defaultAriaLabel}
+        {...props}
+      >
         {Array.from({ length: lines }).map((_, index) => (
           <div
             key={index}
             className={classes}
             style={index === lines - 1 ? { width: "75%" } : style}
+            aria-hidden="true"
           />
         ))}
       </div>
@@ -65,6 +75,13 @@ export default function Skeleton({
   }
 
   return (
-    <div className={classes} style={style} {...props} />
+    <div
+      className={classes}
+      style={style}
+      role="status"
+      aria-busy="true"
+      aria-label={defaultAriaLabel}
+      {...props}
+    />
   );
 }

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

@@ -0,0 +1,205 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import Slider from './Slider';
+
+const meta: Meta<typeof Slider> = {
+  title: 'Atoms/Slider',
+  component: Slider,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['single', 'range'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    min: {
+      control: 'number',
+    },
+    max: {
+      control: 'number',
+    },
+    step: {
+      control: 'number',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.defaultValue || 50);
+    return (
+      <div className="w-64">
+        <Slider {...args} value={value} onChange={setValue} />
+        <p className="mt-4 text-sm text-gray-600">Value: {value}</p>
+      </div>
+    );
+  },
+  args: {
+    min: 0,
+    max: 100,
+    step: 1,
+    defaultValue: 50,
+  },
+};
+
+export const WithLabel: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.defaultValue || 50);
+    return (
+      <div className="w-64">
+        <Slider {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    label: 'Volume',
+    min: 0,
+    max: 100,
+    defaultValue: 50,
+    showValue: true,
+  },
+};
+
+export const Range: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<[number, number]>(args.defaultValue as [number, number] || [20, 80]);
+    return (
+      <div className="w-64">
+        <Slider {...args} value={value} onChange={setValue} />
+        <p className="mt-4 text-sm text-gray-600">
+          Range: {value[0]} - {value[1]}
+        </p>
+      </div>
+    );
+  },
+  args: {
+    variant: 'range',
+    min: 0,
+    max: 100,
+    defaultValue: [20, 80],
+    showValue: true,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => {
+    const [smValue, setSmValue] = useState(50);
+    const [mdValue, setMdValue] = useState(50);
+    const [lgValue, setLgValue] = useState(50);
+    
+    return (
+      <div className="w-64 space-y-6">
+        <div>
+          <Slider
+            size="sm"
+            label="Small"
+            value={smValue}
+            onChange={setSmValue}
+            showValue
+          />
+        </div>
+        <div>
+          <Slider
+            size="md"
+            label="Medium"
+            value={mdValue}
+            onChange={setMdValue}
+            showValue
+          />
+        </div>
+        <div>
+          <Slider
+            size="lg"
+            label="Large"
+            value={lgValue}
+            onChange={setLgValue}
+            showValue
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const WithMarks: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.defaultValue || 50);
+    return (
+      <div className="w-64">
+        <Slider {...args} value={value} onChange={setValue} />
+      </div>
+    );
+  },
+  args: {
+    label: 'Temperature',
+    min: 0,
+    max: 100,
+    step: 10,
+    defaultValue: 50,
+    marks: [0, 25, 50, 75, 100],
+    showValue: true,
+  },
+};
+
+export const WithSteps: Story = {
+  render: (args) => {
+    const [value, setValue] = useState(args.defaultValue || 2);
+    return (
+      <div className="w-64">
+        <Slider {...args} value={value} onChange={setValue} />
+        <p className="mt-4 text-sm text-gray-600">Value: {value}</p>
+      </div>
+    );
+  },
+  args: {
+    label: 'Rating',
+    min: 0,
+    max: 5,
+    step: 0.5,
+    defaultValue: 2.5,
+    showValue: true,
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <div className="w-64 space-y-4">
+        <Slider label="Disabled" defaultValue={50} disabled />
+        <Slider label="Disabled Range" variant="range" defaultValue={[20, 80]} disabled />
+      </div>
+    );
+  },
+};
+
+export const CustomRange: Story = {
+  render: () => {
+    const [value, setValue] = useState<[number, number]>([1000, 5000]);
+    return (
+      <div className="w-64">
+        <Slider
+          label="Price Range"
+          variant="range"
+          min={0}
+          max={10000}
+          step={100}
+          value={value}
+          onChange={setValue}
+          showValue
+        />
+        <p className="mt-4 text-sm text-gray-600">
+          ${value[0].toLocaleString()} - ${value[1].toLocaleString()}
+        </p>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,53 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Slider from './Slider';
+
+describe('Slider', () => {
+  it('renders correctly', () => {
+    render(<Slider defaultValue={50} />);
+    const slider = screen.getByRole('slider');
+    expect(slider).toBeInTheDocument();
+  });
+
+  it('handles single value', () => {
+    const handleChange = vi.fn();
+    render(<Slider value={50} onChange={handleChange} />);
+    const slider = screen.getByRole('slider');
+    expect(slider).toHaveAttribute('aria-valuenow', '50');
+  });
+
+  it('handles range value', () => {
+    render(<Slider variant="range" value={[20, 80]} />);
+    const sliders = screen.getAllByRole('slider');
+    expect(sliders).toHaveLength(2);
+    expect(sliders[0]).toHaveAttribute('aria-valuenow', '20');
+    expect(sliders[1]).toHaveAttribute('aria-valuenow', '80');
+  });
+
+  it('displays label when provided', () => {
+    render(<Slider label="Volume" defaultValue={50} />);
+    expect(screen.getByText('Volume')).toBeInTheDocument();
+  });
+
+  it('handles disabled state', () => {
+    render(<Slider defaultValue={50} disabled />);
+    const slider = screen.getByRole('slider');
+    expect(slider).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('handles different sizes', () => {
+    const { rerender } = render(<Slider size="sm" defaultValue={50} />);
+    expect(screen.getByRole('slider')).toBeInTheDocument();
+
+    rerender(<Slider size="md" defaultValue={50} />);
+    expect(screen.getByRole('slider')).toBeInTheDocument();
+
+    rerender(<Slider size="lg" defaultValue={50} />);
+    expect(screen.getByRole('slider')).toBeInTheDocument();
+  });
+
+  it('shows value when showValue is true', () => {
+    render(<Slider label="Volume" value={50} showValue />);
+    expect(screen.getByText('50')).toBeInTheDocument();
+  });
+});

package/src/ui/atoms/Slider/Slider.tsx

@@ -0,0 +1,307 @@
+'use client';
+
+import { useRef, useState, forwardRef } from 'react';
+import type { HTMLAttributes } from 'react';
+import { getColorClass } from '../../tokens/colors';
+import { getAnimationClass } from '../../tokens/animations';
+
+export type SliderVariant = 'single' | 'range';
+export type SliderSize = 'sm' | 'md' | 'lg';
+
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  value?: number | [number, number];
+  defaultValue?: number | [number, number];
+  min?: number;
+  max?: number;
+  step?: number;
+  variant?: SliderVariant;
+  size?: SliderSize;
+  disabled?: boolean;
+  showValue?: boolean;
+  marks?: number[];
+  onChange?: (value: number | [number, number]) => void;
+  onValueChange?: (value: number | [number, number]) => void;
+  label?: string;
+}
+
+/**
+ * Slider Component
+ * 
+ * A range input component for selecting numeric values.
+ * Supports single and dual thumb (range) modes.
+ * Follows Atomic Design principles as an Atom component.
+ * 
+ * @example
+ * ```tsx
+ * <Slider
+ *   value={50}
+ *   min={0}
+ *   max={100}
+ *   onChange={(value) => console.log(value)}
+ * />
+ * 
+ * <Slider
+ *   variant="range"
+ *   value={[20, 80]}
+ *   min={0}
+ *   max={100}
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider({
+  value: controlledValue,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  variant = 'single',
+  size = 'md',
+  disabled = false,
+  showValue = false,
+  marks = [],
+  onChange,
+  onValueChange,
+  label,
+  className = '',
+  ...props
+}, ref) {
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const [internalValue, setInternalValue] = useState<number | [number, number]>(
+    defaultValue || (variant === 'range' ? [min, max] : min)
+  );
+  const [isDragging, setIsDragging] = useState(false);
+  const [activeThumb, setActiveThumb] = useState<'min' | 'max' | null>(null);
+
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  const getPercentage = (val: number) => ((val - min) / (max - min)) * 100;
+
+  const getValueFromPosition = (clientX: number): number => {
+    if (!sliderRef.current) return min;
+    const rect = sliderRef.current.getBoundingClientRect();
+    const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const rawValue = min + percentage * (max - min);
+    return Math.round(rawValue / step) * step;
+  };
+
+  const handleMouseDown = (e: React.MouseEvent, thumb: 'min' | 'max' = 'min') => {
+    if (disabled) return;
+    e.preventDefault();
+    setIsDragging(true);
+    setActiveThumb(thumb);
+
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      if (!sliderRef.current) return;
+      const newValue = getValueFromPosition(moveEvent.clientX);
+      updateValue(newValue, thumb);
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      setActiveThumb(null);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const updateValue = (newValue: number, thumb: 'min' | 'max' = 'min') => {
+    const clampedValue = Math.max(min, Math.min(max, newValue));
+
+    if (variant === 'range') {
+      const [minVal, maxVal] = Array.isArray(currentValue) ? currentValue : [min, max];
+      let updatedValue: [number, number];
+
+      if (thumb === 'min') {
+        updatedValue = [Math.min(clampedValue, maxVal), maxVal];
+      } else {
+        updatedValue = [minVal, Math.max(clampedValue, minVal)];
+      }
+
+      if (!isControlled) {
+        setInternalValue(updatedValue);
+      }
+      onChange?.(updatedValue);
+      onValueChange?.(updatedValue);
+    } else {
+      if (!isControlled) {
+        setInternalValue(clampedValue);
+      }
+      onChange?.(clampedValue);
+      onValueChange?.(clampedValue);
+    }
+  };
+
+  const handleTrackClick = (e: React.MouseEvent) => {
+    if (disabled || isDragging) return;
+    const newValue = getValueFromPosition(e.clientX);
+    updateValue(newValue);
+  };
+
+  const sizeConfig = {
+    sm: { track: 'h-1', thumb: 'w-3 h-3' },
+    md: { track: 'h-2', thumb: 'w-4 h-4' },
+    lg: { track: 'h-3', thumb: 'w-5 h-5' },
+  };
+
+  const config = sizeConfig[size];
+  const singleValue = typeof currentValue === 'number' ? currentValue : currentValue[0];
+  const minValue = Array.isArray(currentValue) ? currentValue[0] : min;
+  const maxValue = Array.isArray(currentValue) ? currentValue[1] : singleValue;
+
+  const minPercentage = getPercentage(minValue);
+  const maxPercentage = getPercentage(maxValue);
+
+  return (
+    <div ref={ref} className={`w-full ${className}`} {...props}>
+      {label && (
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          {label}
+          {showValue && (
+            <span className="ml-2 text-gray-500">
+              {variant === 'range'
+                ? `${minValue} - ${maxValue}`
+                : singleValue}
+            </span>
+          )}
+        </label>
+      )}
+      <div
+        ref={sliderRef}
+        className={`
+          relative
+          ${config.track}
+          ${getColorClass('neutral', 'light', 'bg')}
+          rounded-full
+          cursor-pointer
+          ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+        `}
+        onClick={handleTrackClick}
+        role={variant === 'range' ? undefined : 'slider'}
+        aria-valuemin={variant === 'range' ? undefined : min}
+        aria-valuemax={variant === 'range' ? undefined : max}
+        aria-valuenow={variant === 'range' ? undefined : singleValue}
+        aria-disabled={variant === 'range' ? undefined : disabled}
+        aria-label={variant === 'range' ? undefined : label}
+      >
+        {/* Active track */}
+        <div
+          className={`
+            absolute
+            ${config.track}
+            ${getColorClass('primary', 'DEFAULT', 'bg')}
+            rounded-full
+            ${getAnimationClass('base')}
+          `}
+          style={{
+            left: `${minPercentage}%`,
+            width: `${maxPercentage - minPercentage}%`,
+          }}
+        />
+
+        {/* Marks */}
+        {marks.map((mark) => {
+          const markPercentage = getPercentage(mark);
+          return (
+            <div
+              key={mark}
+              className="absolute w-1 h-1 bg-gray-400 rounded-full -translate-x-1/2"
+              style={{ left: `${markPercentage}%`, top: '50%', transform: 'translate(-50%, -50%)' }}
+            />
+          );
+        })}
+
+        {/* Thumbs */}
+        {variant === 'range' ? (
+          <>
+            <div
+              className={`
+                absolute
+                ${config.thumb}
+                ${getColorClass('primary', 'DEFAULT', 'bg')}
+                rounded-full
+                border-2
+                border-white
+                shadow-md
+                cursor-grab
+                active:cursor-grabbing
+                ${getAnimationClass('base')}
+                ${activeThumb === 'min' ? 'ring-2 ring-offset-2 ring-indigo-500' : ''}
+                -translate-x-1/2
+                -translate-y-1/2
+                top-1/2
+              `}
+              style={{ left: `${minPercentage}%` }}
+              onMouseDown={(e) => handleMouseDown(e, 'min')}
+              role="slider"
+              aria-valuemin={min}
+              aria-valuemax={maxValue}
+              aria-valuenow={minValue}
+            />
+            <div
+              className={`
+                absolute
+                ${config.thumb}
+                ${getColorClass('primary', 'DEFAULT', 'bg')}
+                rounded-full
+                border-2
+                border-white
+                shadow-md
+                cursor-grab
+                active:cursor-grabbing
+                ${getAnimationClass('base')}
+                ${activeThumb === 'max' ? 'ring-2 ring-offset-2 ring-indigo-500' : ''}
+                -translate-x-1/2
+                -translate-y-1/2
+                top-1/2
+              `}
+              style={{ left: `${maxPercentage}%` }}
+              onMouseDown={(e) => handleMouseDown(e, 'max')}
+              role="slider"
+              aria-valuemin={minValue}
+              aria-valuemax={max}
+              aria-valuenow={maxValue}
+            />
+          </>
+        ) : (
+          <div
+            className={`
+              absolute
+              ${config.thumb}
+              ${getColorClass('primary', 'DEFAULT', 'bg')}
+              rounded-full
+              border-2
+              border-white
+              shadow-md
+              cursor-grab
+              active:cursor-grabbing
+              ${getAnimationClass('base')}
+              ${isDragging ? 'ring-2 ring-offset-2 ring-indigo-500' : ''}
+              -translate-x-1/2
+              -translate-y-1/2
+              top-1/2
+            `}
+            style={{ left: `${maxPercentage}%` }}
+            onMouseDown={(e) => handleMouseDown(e)}
+          />
+        )}
+
+        {showValue && !label && (
+          <div className="absolute -top-6 left-0 right-0 flex justify-center">
+            <span className="text-xs text-gray-600 bg-white px-2 py-1 rounded shadow">
+              {variant === 'range' ? `${minValue} - ${maxValue}` : singleValue}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
+
+Slider.displayName = 'Slider';
+
+export default Slider;

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

@@ -0,0 +1,2 @@
+export { default } from './Slider';
+export type { SliderProps, SliderVariant, SliderSize } from './Slider';