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

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

@@ -0,0 +1,134 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Progress from './Progress';
+
+describe('Progress', () => {
+  it('renders progress bar with value', () => {
+    render(<Progress value={50} />);
+    const progressBar = screen.getByRole('progressbar');
+    expect(progressBar).toBeInTheDocument();
+    expect(progressBar).toHaveAttribute('aria-valuenow', '50');
+    expect(progressBar).toHaveAttribute('aria-valuemin', '0');
+    expect(progressBar).toHaveAttribute('aria-valuemax', '100');
+  });
+
+  it('renders with label when provided', () => {
+    render(<Progress value={50} label="Loading..." showLabel />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('calculates percentage correctly', () => {
+    const { container } = render(<Progress value={25} max={50} />);
+    const progressBar = screen.getByRole('progressbar');
+    expect(progressBar).toHaveAttribute('aria-valuenow', '25');
+    expect(progressBar).toHaveAttribute('aria-valuemax', '50');
+    
+    const fill = container.querySelector('div[aria-hidden="true"]');
+    expect(fill).toHaveStyle({ width: '50%' });
+  });
+
+  it('renders indeterminate progress', () => {
+    render(<Progress />);
+    const progressBar = screen.getByRole('progressbar');
+    expect(progressBar).not.toHaveAttribute('aria-valuenow');
+    expect(progressBar).not.toHaveAttribute('aria-valuemin');
+    expect(progressBar).not.toHaveAttribute('aria-valuemax');
+    
+    const { container } = render(<Progress />);
+    const fill = container.querySelector('div[style*="animation"]');
+    expect(fill).toBeInTheDocument();
+  });
+
+  it('applies correct variant classes', () => {
+    const { container, rerender } = render(<Progress value={50} variant="primary" />);
+    let fill = container.querySelector('div[aria-hidden="true"]');
+    expect(fill).toHaveClass('bg-indigo-500');
+
+    rerender(<Progress value={50} variant="secondary" />);
+    fill = container.querySelector('div[aria-hidden="true"]');
+    expect(fill).toHaveClass('bg-violet-500');
+
+    rerender(<Progress value={50} variant="success" />);
+    fill = container.querySelector('div[aria-hidden="true"]');
+    expect(fill).toHaveClass('bg-green-500');
+
+    rerender(<Progress value={50} variant="error" />);
+    fill = container.querySelector('div[aria-hidden="true"]');
+    expect(fill).toHaveClass('bg-red-500');
+
+    rerender(<Progress value={50} variant="warning" />);
+    fill = container.querySelector('div[aria-hidden="true"]');
+    expect(fill).toHaveClass('bg-yellow-500');
+
+    rerender(<Progress value={50} variant="info" />);
+    fill = container.querySelector('div[aria-hidden="true"]');
+    expect(fill).toHaveClass('bg-blue-500');
+  });
+
+  it('applies correct size classes', () => {
+    const { container, rerender } = render(<Progress value={50} size="sm" />);
+    let progressBar = container.querySelector('div[role="progressbar"]');
+    expect(progressBar).toHaveClass('h-1');
+
+    rerender(<Progress value={50} size="md" />);
+    progressBar = container.querySelector('div[role="progressbar"]');
+    expect(progressBar).toHaveClass('h-2');
+
+    rerender(<Progress value={50} size="lg" />);
+    progressBar = container.querySelector('div[role="progressbar"]');
+    expect(progressBar).toHaveClass('h-3');
+  });
+
+  it('clamps value to 0-100 range', () => {
+    const { container } = render(<Progress value={-10} />);
+    const fill = container.querySelector('div[aria-hidden="true"]');
+    expect(fill).toHaveStyle({ width: '0%' });
+
+    const { container: container2 } = render(<Progress value={150} />);
+    const fill2 = container2.querySelector('div[aria-hidden="true"]');
+    expect(fill2).toHaveStyle({ width: '100%' });
+  });
+
+  it('handles zero value', () => {
+    render(<Progress value={0} />);
+    const progressBar = screen.getByRole('progressbar');
+    expect(progressBar).toHaveAttribute('aria-valuenow', '0');
+  });
+
+  it('handles 100% value', () => {
+    const { container } = render(<Progress value={100} />);
+    const fill = container.querySelector('div[aria-hidden="true"]');
+    expect(fill).toHaveStyle({ width: '100%' });
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Progress value={50} className="custom-class" />);
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper).toHaveClass('custom-class');
+  });
+
+  it('has correct accessibility attributes', () => {
+    render(<Progress value={50} aria-label="Loading progress" />);
+    const progressBar = screen.getByLabelText('Loading progress');
+    expect(progressBar).toBeInTheDocument();
+    expect(progressBar).toHaveAttribute('role', 'progressbar');
+  });
+
+  it('displays percentage when showLabel is true', () => {
+    render(<Progress value={75} showLabel />);
+    expect(screen.getByText(/75%/)).toBeInTheDocument();
+  });
+
+  it('displays both label and percentage when showLabel is true', () => {
+    render(<Progress value={75} label="Uploading" showLabel />);
+    expect(screen.getByText('Uploading')).toBeInTheDocument();
+    expect(screen.getByText(/75%/)).toBeInTheDocument();
+  });
+
+  it('renders without label', () => {
+    const { container } = render(<Progress value={50} />);
+    const label = container.querySelector('label, span, p');
+    // Should not have a visible label element
+    expect(label).not.toBeInTheDocument();
+  });
+});

package/src/ui/atoms/Progress/Progress.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import type { HTMLAttributes } from 'react';
+import { getColorClass, getRadiusClass } from '../../tokens';
+import './Progress.css';
+
+export type ProgressVariant = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+export type ProgressSize = 'sm' | 'md' | 'lg';
+
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  value?: number; // 0-100, undefined for indeterminate
+  max?: number; // Default 100
+  variant?: ProgressVariant;
+  size?: ProgressSize;
+  showLabel?: boolean;
+  label?: string;
+  'aria-label'?: string;
+}
+
+/**
+ * Progress Component
+ * 
+ * A progress bar component for displaying progress or loading states.
+ * Supports both determinate (with value) and indeterminate (without value) modes.
+ * Fully accessible with ARIA attributes.
+ * 
+ * @example
+ * ```tsx
+ * // Determinate progress
+ * <Progress value={75} variant="primary" />
+ * 
+ * // Indeterminate progress
+ * <Progress variant="primary" />
+ * 
+ * // With label
+ * <Progress value={50} showLabel label="Uploading..." />
+ * ```
+ */
+export default function Progress({
+  value,
+  max = 100,
+  variant = 'primary',
+  size = 'md',
+  showLabel = false,
+  label,
+  'aria-label': ariaLabel,
+  className = '',
+  ...props
+}: ProgressProps) {
+  const isIndeterminate = value === undefined;
+  const percentage = isIndeterminate ? undefined : Math.min(Math.max((value / max) * 100, 0), 100);
+
+  const sizeClasses: Record<ProgressSize, string> = {
+    sm: 'h-1',
+    md: 'h-2',
+    lg: 'h-3',
+  };
+
+  const variantColorClasses: Record<ProgressVariant, string> = {
+    primary: getColorClass('primary', 'DEFAULT', 'bg'),
+    secondary: getColorClass('secondary', 'DEFAULT', 'bg'),
+    success: getColorClass('success', 'DEFAULT', 'bg'),
+    error: getColorClass('error', 'DEFAULT', 'bg'),
+    warning: getColorClass('warning', 'DEFAULT', 'bg'),
+    info: getColorClass('info', 'DEFAULT', 'bg'),
+  };
+
+  const trackColorClass = variant === 'primary' || variant === 'secondary'
+    ? 'bg-gray-200'
+    : `${getColorClass(variant, 'light', 'bg')}`;
+
+  const defaultAriaLabel = ariaLabel || (isIndeterminate 
+    ? 'Loading in progress' 
+    : `Progress: ${percentage?.toFixed(0)}%`);
+
+  return (
+    <div className={`w-full ${className}`} {...props}>
+      {showLabel && (label || !isIndeterminate) && (
+        <div className="flex items-center justify-between mb-1">
+          {label && (
+            <span className="text-sm font-medium text-gray-700">{label}</span>
+          )}
+          {!isIndeterminate && percentage !== undefined && (
+            <span className="text-sm text-gray-500">{percentage.toFixed(0)}%</span>
+          )}
+        </div>
+      )}
+      <div
+        role="progressbar"
+        aria-valuemin={isIndeterminate ? undefined : 0}
+        aria-valuemax={isIndeterminate ? undefined : max}
+        aria-valuenow={isIndeterminate ? undefined : value}
+        aria-label={defaultAriaLabel}
+        aria-busy={isIndeterminate}
+        className={`
+          relative
+          w-full
+          overflow-hidden
+          ${sizeClasses[size]}
+          ${trackColorClass}
+          ${getRadiusClass('full')}
+        `}
+      >
+        {isIndeterminate ? (
+          <div
+            className={`
+              absolute
+              top-0
+              left-0
+              bottom-0
+              ${variantColorClasses[variant]}
+              ${getRadiusClass('full')}
+            `}
+            style={{
+              width: '30%',
+              animation: 'progress-indeterminate 1.5s ease-in-out infinite',
+            }}
+          />
+        ) : (
+          <div
+            className={`
+              h-full
+              ${variantColorClasses[variant]}
+              ${getRadiusClass('full')}
+              transition-all
+              duration-300
+              ease-out
+            `}
+            style={{
+              width: `${percentage}%`,
+            }}
+            aria-hidden="true"
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ui/atoms/Radio/Radio.tsx

@@ -96,7 +96,7 @@ export default function Radio({
           className={`mt-1 ${getTypographyClasses('caption')} ${error ? 'text-red-600' : 'text-gray-500'}`}
           role={error ? 'alert' : undefined}
         >
-          {error || helperText}
+          {helperText || (error ? 'Error' : '')}
         </div>
       )}
     </div>

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

@@ -1,93 +1,128 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Select from "./Select";
+import type { Meta, StoryObj } from '@storybook/react';
+import Select from './Select';
+
+const options = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+  { value: '3', label: 'Option 3' },
+];
+
+const manyOptions = Array.from({ length: 20 }, (_, i) => ({
+  value: String(i + 1),
+  label: `Option ${i + 1}`,
+}));
+
+const optionGroups = [
+  {
+    label: 'Fruits',
+    options: [
+      { value: 'apple', label: 'Apple' },
+      { value: 'banana', label: 'Banana' },
+      { value: 'orange', label: 'Orange' },
+    ],
+  },
+  {
+    label: 'Vegetables',
+    options: [
+      { value: 'carrot', label: 'Carrot' },
+      { value: 'lettuce', label: 'Lettuce' },
+      { value: 'tomato', label: 'Tomato' },
+    ],
+  },
+];
 
 const meta: Meta<typeof Select> = {
-  title: "UI/Atoms/Select",
+  title: 'Atoms/Select',
   component: Select,
-  parameters: {
-    docs: {
-      description: {
-        component: "A styled select dropdown component for forms. Supports options, placeholder, and error states.",
-      },
-    },
-  },
+  tags: ['autodocs'],
   argTypes: {
-    options: {
-      control: "object",
-      description: "Array of options to display",
-    },
-    placeholder: {
-      control: "text",
-      description: "Placeholder text for the select",
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
     },
     error: {
-      control: "boolean",
-      description: "Whether the select is in an error state",
+      control: 'boolean',
+    },
+    success: {
+      control: 'boolean',
     },
   },
 };
 
-const defaultOptions = [
-  { value: "1", label: "Option 1" },
-  { value: "2", label: "Option 2" },
-  { value: "3", label: "Option 3" },
-];
+export default meta;
+type Story = StoryObj<typeof Select>;
 
-export const Primary: StoryObj<typeof Select> = {
+export const Default: Story = {
   args: {
-    options: defaultOptions,
-    placeholder: "Select an option",
+    label: 'Choose option',
+    options,
+    placeholder: 'Select an option',
   },
 };
 
-export const WithSelectedValue: StoryObj<typeof Select> = {
+export const WithError: Story = {
   args: {
-    options: defaultOptions,
-    defaultValue: "2",
+    label: 'Choose option',
+    options,
+    placeholder: 'Select an option',
+    error: true,
+    helperText: 'Please select an option',
   },
 };
 
-export const WithError: StoryObj<typeof Select> = {
+export const WithSuccess: Story = {
   args: {
-    options: defaultOptions,
-    placeholder: "Select an option",
-    error: true,
+    label: 'Choose option',
+    options,
+    placeholder: 'Select an option',
+    success: true,
+    helperText: 'Selection is valid',
+    value: '1',
   },
 };
 
-export const WithDisabledOption: StoryObj<typeof Select> = {
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Select label="Small" size="sm" options={options} placeholder="Select..." />
+      <Select label="Medium" size="md" options={options} placeholder="Select..." />
+      <Select label="Large" size="lg" options={options} placeholder="Select..." />
+    </div>
+  ),
+};
+
+export const WithOptionGroups: Story = {
   args: {
-    options: [
-      { value: "1", label: "Option 1" },
-      { value: "2", label: "Option 2 (Disabled)", disabled: true },
-      { value: "3", label: "Option 3" },
-    ],
-    placeholder: "Select an option",
+    label: 'Choose category',
+    optionGroups,
+    placeholder: 'Select a category',
   },
 };
 
-export const StatusOptions: StoryObj<typeof Select> = {
+export const WithManyOptions: Story = {
   args: {
-    options: [
-      { value: "DRAFT", label: "Draft" },
-      { value: "ACTIVE", label: "Active" },
-      { value: "COMPLETED", label: "Completed" },
-      { value: "ARCHIVED", label: "Archived" },
-    ],
-    placeholder: "Select status",
+    label: 'Choose option',
+    options: manyOptions,
+    placeholder: 'Select an option',
   },
 };
 
-export const PriorityOptions: StoryObj<typeof Select> = {
+export const Disabled: Story = {
   args: {
-    options: [
-      { value: "LOW", label: "Low" },
-      { value: "MEDIUM", label: "Medium" },
-      { value: "HIGH", label: "High" },
-      { value: "CRITICAL", label: "Critical" },
-    ],
-    placeholder: "Select priority",
+    label: 'Disabled Select',
+    options,
+    placeholder: 'This select is disabled',
+    disabled: true,
   },
 };
 
-export default meta;
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <Select label="Default" options={options} placeholder="Select..." />
+      <Select label="Error" error helperText="This field has an error" options={options} />
+      <Select label="Success" success helperText="Selection is valid" options={options} value="1" />
+      <Select label="Disabled" disabled options={options} />
+    </div>
+  ),
+};