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

package/src/ui/molecules/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import type { HTMLAttributes, ReactNode } from "react";
-import { useState, useRef, useEffect } from "react";
+import type { HTMLAttributes, ReactNode, KeyboardEvent } from "react";
+import React, { useState, useRef, useEffect } from "react";
 
 export interface DropdownItem {
   label: string;
@@ -15,6 +15,7 @@ export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
   items: DropdownItem[];
   align?: "left" | "right";
   variant?: "default" | "minimal";
+  'aria-label'?: string;
 }
 
 /**
@@ -38,54 +39,213 @@ export default function Dropdown({
   trigger,
   items,
   align = "right",
-  variant = "default",
+  variant: _variant = "default",
   className = "",
+  'aria-label': ariaLabel,
   ...props
 }: DropdownProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState<number>(-1);
   const dropdownRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  // Generate unique IDs
+  const menuId = `dropdown-menu-${Math.random().toString(36).substr(2, 9)}`;
+  const triggerId = `dropdown-trigger-${Math.random().toString(36).substr(2, 9)}`;
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
         setIsOpen(false);
+        setActiveIndex(-1);
       }
     };
 
     if (isOpen) {
       document.addEventListener("mousedown", handleClickOutside);
+      // Focus first item when opening
+      setTimeout(() => {
+        const firstEnabledIndex = items.findIndex(item => !item.disabled);
+        if (firstEnabledIndex >= 0) {
+          setActiveIndex(firstEnabledIndex);
+          itemRefs.current[firstEnabledIndex]?.focus();
+        }
+      }, 0);
     }
 
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [isOpen]);
+  }, [isOpen, items]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+      const enabledItems = items.map((item, index) => ({ item, index })).filter(({ item }) => !item.disabled);
+      const currentEnabledIndex = enabledItems.findIndex(({ index }) => index === activeIndex);
+
+      switch (e.key) {
+        case 'ArrowDown': {
+          e.preventDefault();
+          const nextIndex = currentEnabledIndex < enabledItems.length - 1 
+            ? enabledItems[currentEnabledIndex + 1].index 
+            : enabledItems[0].index;
+          setActiveIndex(nextIndex);
+          itemRefs.current[nextIndex]?.focus();
+          break;
+        }
+        case 'ArrowUp': {
+          e.preventDefault();
+          const prevIndex = currentEnabledIndex > 0 
+            ? enabledItems[currentEnabledIndex - 1].index 
+            : enabledItems[enabledItems.length - 1].index;
+          setActiveIndex(prevIndex);
+          itemRefs.current[prevIndex]?.focus();
+          break;
+        }
+        case 'Home': {
+          e.preventDefault();
+          const firstIndex = enabledItems[0].index;
+          setActiveIndex(firstIndex);
+          itemRefs.current[firstIndex]?.focus();
+          break;
+        }
+        case 'End': {
+          e.preventDefault();
+          const lastIndex = enabledItems[enabledItems.length - 1].index;
+          setActiveIndex(lastIndex);
+          itemRefs.current[lastIndex]?.focus();
+          break;
+        }
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          if (activeIndex >= 0 && !items[activeIndex].disabled) {
+            handleItemClick(items[activeIndex]);
+          }
+          break;
+        case 'Escape':
+          e.preventDefault();
+          setIsOpen(false);
+          setActiveIndex(-1);
+          // Restore focus to trigger after closing
+          setTimeout(() => {
+            triggerRef.current?.focus();
+          }, 0);
+          break;
+      }
+    };
+
+    const menuElement = menuRef.current;
+    if (menuElement) {
+      const typedHandleKeyDown = handleKeyDown as unknown as (e: Event) => void;
+      menuElement.addEventListener('keydown', typedHandleKeyDown);
+      return () => {
+        menuElement.removeEventListener('keydown', typedHandleKeyDown);
+      };
+    }
+  }, [isOpen, activeIndex, items]);
 
   const handleItemClick = (item: DropdownItem) => {
     if (!item.disabled) {
       item.onClick();
       setIsOpen(false);
+      setActiveIndex(-1);
+      // Restore focus to trigger after item selection
+      setTimeout(() => {
+        triggerRef.current?.focus();
+      }, 0);
+    }
+  };
+
+  const handleTriggerClick = () => {
+    setIsOpen(!isOpen);
+    setActiveIndex(-1);
+  };
+
+  const handleTriggerKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+      e.preventDefault();
+      setIsOpen(true);
     }
   };
 
   const alignClasses = align === "right" ? "right-0" : "left-0";
 
+  // Clone trigger to add accessibility props
+  // Handle both Button component and native button elements
+  const triggerWithProps = React.isValidElement(trigger)
+    ? React.cloneElement(trigger as React.ReactElement<unknown>, {
+        onClick: (e: React.MouseEvent) => {
+          handleTriggerClick();
+          // Call original onClick if it exists
+          if (trigger.props.onClick) {
+            trigger.props.onClick(e);
+          }
+        },
+        onKeyDown: (e: React.KeyboardEvent) => {
+          handleTriggerKeyDown(e);
+          // Call original onKeyDown if it exists
+          if (trigger.props.onKeyDown) {
+            trigger.props.onKeyDown(e);
+          }
+        },
+        'aria-haspopup': 'menu',
+        'aria-expanded': isOpen,
+        'aria-controls': menuId,
+        'aria-label': ariaLabel || trigger.props['aria-label'] || 'Open menu',
+        id: triggerId,
+        ref: (node: HTMLElement | null) => {
+          triggerRef.current = node;
+          // Forward ref if trigger has one
+          if (typeof trigger.ref === 'function') {
+            trigger.ref(node);
+          } else if (trigger.ref) {
+            (trigger.ref as React.MutableRefObject<HTMLElement | null>).current = node;
+          }
+        },
+      })
+    : <div
+        ref={triggerRef}
+        onClick={handleTriggerClick}
+        onKeyDown={handleTriggerKeyDown}
+        role="button"
+        tabIndex={0}
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+        aria-controls={menuId}
+        aria-label={ariaLabel || 'Open menu'}
+        id={triggerId}
+      >
+        {trigger}
+      </div>;
+
   return (
     <div className={`relative inline-block ${className}`} ref={dropdownRef} {...props}>
-      <div onClick={() => setIsOpen(!isOpen)}>
-        {trigger}
-      </div>
+      {triggerWithProps}
 
       {isOpen && (
         <>
           <div
             className="fixed inset-0 z-10"
-            onClick={() => setIsOpen(false)}
+            onClick={() => {
+              setIsOpen(false);
+              setActiveIndex(-1);
+            }}
+            aria-hidden="true"
           />
           <div
+            ref={menuRef}
+            id={menuId}
             className={`absolute z-20 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 ${alignClasses}`}
             role="menu"
             aria-orientation="vertical"
+            aria-labelledby={triggerId}
+            aria-activedescendant={activeIndex >= 0 ? `${menuId}-item-${activeIndex}` : undefined}
           >
             <div className="py-1" role="none">
               {items.map((item, index) => {
@@ -96,21 +256,27 @@ export default function Dropdown({
                   "text-sm",
                   "w-full",
                   "text-left",
+                  "focus:outline-none",
+                  "focus:bg-gray-100",
                   item.disabled
-                    ? "text-gray-400 cursor-not-allowed"
+                    ? "text-gray-400 cursor-not-allowed opacity-50"
                     : item.variant === "danger"
-                    ? "text-red-700 hover:bg-red-50"
+                    ? "text-red-700 hover:bg-red-50 focus:bg-red-50"
                     : "text-gray-700 hover:bg-gray-100",
                 ].filter(Boolean).join(" ");
 
                 return (
                   <button
                     key={index}
+                    id={`${menuId}-item-${index}`}
+                    ref={(el) => { itemRefs.current[index] = el; }}
                     type="button"
                     className={itemClasses}
                     onClick={() => handleItemClick(item)}
                     disabled={item.disabled}
                     role="menuitem"
+                    aria-disabled={item.disabled}
+                    tabIndex={item.disabled ? -1 : activeIndex === index ? 0 : -1}
                   >
                     {item.label}
                   </button>

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

@@ -6,12 +6,34 @@ const meta = {
   component: EmptyState,
   parameters: {
     layout: "centered",
+    docs: {
+      description: {
+        component: "A component for displaying empty states when there's no content. Includes proper ARIA attributes (role='status', aria-live='polite') for screen reader announcements.",
+      },
+    },
   },
   tags: ["autodocs"],
   argTypes: {
     variant: {
       control: "select",
       options: ["default", "withAction", "withIllustration"],
+      description: "Visual variant of the empty state",
+    },
+    title: {
+      control: "text",
+      description: "Title text displayed prominently",
+    },
+    message: {
+      control: "text",
+      description: "Descriptive message text",
+    },
+    actionLabel: {
+      control: "text",
+      description: "Label for the action button",
+    },
+    onAction: {
+      action: "onAction",
+      description: "Callback when action button is clicked",
     },
   },
 } satisfies Meta<typeof EmptyState>;
@@ -31,7 +53,7 @@ export const WithAction: Story = {
     title: "No epics yet",
     message: "Get started by creating your first epic to organize your work.",
     actionLabel: "Create Epic",
-    onAction: () => console.log("Action clicked"),
+    onAction: () => {},
     variant: "withAction",
   },
 };
@@ -41,7 +63,7 @@ export const WithIllustration: Story = {
     title: "No stories found",
     message: "This epic doesn't have any stories yet. Add a story to get started.",
     actionLabel: "Add Story",
-    onAction: () => console.log("Action clicked"),
+    onAction: () => {},
     variant: "withIllustration",
     illustration: (
       <svg

package/src/ui/molecules/EmptyState/EmptyState.tsx

@@ -58,9 +58,15 @@ export default function EmptyState({
   const showIllustration = variant === "withIllustration" || illustration;
 
   return (
-    <div className={classes} {...props}>
+    <div
+      className={classes}
+      role="status"
+      aria-live="polite"
+      aria-label={`${title}. ${message}`}
+      {...props}
+    >
       {showIllustration && illustration && (
-        <div className="mb-4">
+        <div className="mb-4" aria-hidden="true">
           {illustration}
         </div>
       )}
@@ -74,7 +80,7 @@ export default function EmptyState({
       </Text>
       
       {showAction && actionLabel && onAction && (
-        <Button variant="regular" onClick={onAction}>
+        <Button variant="primary" onClick={onAction}>
           {actionLabel}
         </Button>
       )}

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

@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import FileUpload from './FileUpload';
+import type { FileUploadFile } from './FileUpload';
+
+const meta: Meta<typeof FileUpload> = {
+  title: 'Molecules/FileUpload',
+  component: FileUpload,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    multiple: {
+      control: 'boolean',
+    },
+    showPreview: {
+      control: 'boolean',
+    },
+    showProgress: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FileUpload>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [files, setFiles] = useState<FileUploadFile[]>([]);
+    return (
+      <div className="w-full max-w-md">
+        <FileUpload
+          {...args}
+          onFilesChange={setFiles}
+        />
+        {files.length > 0 && (
+          <div className="mt-4 text-sm text-gray-600">
+            {files.length} file(s) selected
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const WithLabel: Story = {
+  render: (args) => {
+    const [_files, setFiles] = useState<FileUploadFile[]>([]);
+    return (
+      <div className="w-full max-w-md">
+        <FileUpload
+          {...args}
+          onFilesChange={setFiles}
+          label="Upload Documents"
+          description="Upload PDF, DOC, or DOCX files"
+        />
+      </div>
+    );
+  },
+  args: {
+    accept: '.pdf,.doc,.docx',
+  },
+};
+
+export const ImageUpload: Story = {
+  render: (args) => {
+    const [_files, setFiles] = useState<FileUploadFile[]>([]);
+    return (
+      <div className="w-full max-w-md">
+        <FileUpload
+          {...args}
+          onFilesChange={setFiles}
+          label="Upload Images"
+          description="Upload JPG, PNG, or GIF files"
+          accept="image/*"
+          maxSize={5 * 1024 * 1024} // 5MB
+          showPreview
+        />
+      </div>
+    );
+  },
+};
+
+export const MultipleFiles: Story = {
+  render: (args) => {
+    const [files, setFiles] = useState<FileUploadFile[]>([]);
+    return (
+      <div className="w-full max-w-md">
+        <FileUpload
+          {...args}
+          onFilesChange={setFiles}
+          label="Upload Multiple Files"
+          multiple
+          maxFiles={5}
+        />
+        {files.length > 0 && (
+          <div className="mt-4 text-sm text-gray-600">
+            {files.length} of 5 files selected
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const WithProgress: Story = {
+  render: (args) => {
+    const [_files, setFiles] = useState<FileUploadFile[]>([]);
+    
+    const handleFilesChange = (newFiles: FileUploadFile[]) => {
+      setFiles(newFiles);
+      // Simulate progress
+      newFiles.forEach((file) => {
+        if (!file.progress) return;
+        let progress = 0;
+        const interval = setInterval(() => {
+          progress += 10;
+          setFiles((prev) =>
+            prev.map((f) =>
+              f.id === file.id ? { ...f, progress } : f
+            )
+          );
+          if (progress >= 100) {
+            clearInterval(interval);
+          }
+        }, 200);
+      });
+    };
+    
+    return (
+      <div className="w-full max-w-md">
+        <FileUpload
+          {...args}
+          onFilesChange={handleFilesChange}
+          showProgress
+        />
+      </div>
+    );
+  },
+};
+
+export const WithValidation: Story = {
+  render: () => {
+    const [files, setFiles] = useState<FileUploadFile[]>([]);
+    return (
+      <div className="w-full max-w-md">
+        <FileUpload
+          onFilesChange={setFiles}
+          label="Upload File"
+          description="Maximum file size: 2MB"
+          maxSize={2 * 1024 * 1024} // 2MB
+          accept=".pdf,.doc,.docx"
+        />
+        {files.some((f) => f.error) && (
+          <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-md">
+            <p className="text-sm text-red-800">
+              Some files failed validation. Please check the errors above.
+            </p>
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-full max-w-md">
+      <FileUpload
+        label="Upload Disabled"
+        disabled
+      />
+    </div>
+  ),
+};

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

@@ -0,0 +1,114 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import FileUpload from './FileUpload';
+
+// Mock FileReader
+global.FileReader = class FileReader {
+  result: string | null = null;
+  onload: ((this: FileReader, ev: ProgressEvent<FileReader>) => void) | null = null;
+  
+  readAsDataURL(_file: Blob) {
+    setTimeout(() => {
+      this.result = 'data:image/png;base64,mock';
+      if (this.onload) {
+        this.onload({} as ProgressEvent<FileReader>);
+      }
+    }, 0);
+  }
+} as unknown as typeof FileReader;
+
+describe('FileUpload', () => {
+  it('renders correctly', () => {
+    render(<FileUpload />);
+    expect(screen.getByText(/Click to upload/i)).toBeInTheDocument();
+  });
+
+  it('handles file selection', async () => {
+    const handleFilesChange = vi.fn();
+    const file = new File(['content'], 'test.txt', { type: 'text/plain' });
+    
+    const { container } = render(<FileUpload onFilesChange={handleFilesChange} />);
+    
+    const input = container.querySelector('input[type="file"]') as HTMLInputElement;
+    expect(input).toBeInTheDocument();
+    
+    // Create a mock FileList
+    const fileList = {
+      0: file,
+      length: 1,
+      item: (index: number) => index === 0 ? file : null,
+      [Symbol.iterator]: function* () { yield file; },
+    } as FileList;
+    
+    Object.defineProperty(input, 'files', {
+      value: fileList,
+      writable: false,
+      configurable: true,
+    });
+    
+    fireEvent.change(input);
+    
+    await waitFor(() => {
+      expect(handleFilesChange).toHaveBeenCalled();
+      const callArgs = handleFilesChange.mock.calls[0];
+      expect(callArgs).toBeDefined();
+      expect(Array.isArray(callArgs[0])).toBe(true);
+    }, { timeout: 3000 });
+  });
+
+  it('validates file size', async () => {
+    const handleFilesChange = vi.fn();
+    const largeFile = new File(['x'.repeat(10 * 1024 * 1024)], 'large.txt', {
+      type: 'text/plain',
+    });
+    
+    render(<FileUpload maxSize={5 * 1024 * 1024} onFilesChange={handleFilesChange} />);
+    
+    const input = document.querySelector('input[type="file"]');
+    if (input) {
+      Object.defineProperty(input, 'files', {
+        value: [largeFile],
+        writable: false,
+      });
+      
+      fireEvent.change(input);
+      
+      await waitFor(() => {
+        expect(handleFilesChange).toHaveBeenCalled();
+        const files = handleFilesChange.mock.calls[0][0];
+        expect(files[0].error).toBeTruthy();
+      });
+    }
+  });
+
+  it('handles drag and drop', () => {
+    const handleFilesChange = vi.fn();
+    const file = new File(['content'], 'test.txt', { type: 'text/plain' });
+    
+    render(<FileUpload onFilesChange={handleFilesChange} />);
+    
+    const dropZone = screen.getByText(/Click to upload/i).closest('div');
+    
+    if (dropZone) {
+      fireEvent.dragOver(dropZone);
+      fireEvent.drop(dropZone, {
+        dataTransfer: {
+          files: [file],
+        },
+      });
+      
+      expect(handleFilesChange).toHaveBeenCalled();
+    }
+  });
+
+  it('displays label and description', () => {
+    render(
+      <FileUpload
+        label="Upload Files"
+        description="Select files to upload"
+      />
+    );
+    expect(screen.getByText('Upload Files')).toBeInTheDocument();
+    expect(screen.getByText('Select files to upload')).toBeInTheDocument();
+  });
+});