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

package/src/ui/atoms/Accordion/Accordion.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+import { ChevronDown } from 'lucide-react';
+import { getColorClass } from '../../tokens/colors';
+import { getSpacingClass } from '../../tokens/spacing';
+import { getAnimationClass } from '../../tokens/animations';
+import { getTypographyClasses } from '../../tokens/typography';
+
+export type AccordionType = 'single' | 'multiple';
+
+export interface AccordionItem {
+  id: string;
+  title: string;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+export interface AccordionProps {
+  items: AccordionItem[];
+  type?: AccordionType;
+  defaultOpen?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  className?: string;
+}
+
+/**
+ * Accordion Component
+ * 
+ * A collapsible content component that can display multiple items.
+ * Supports single and multiple selection modes.
+ * Follows Atomic Design principles as an Atom component.
+ * 
+ * @example
+ * ```tsx
+ * <Accordion
+ *   type="single"
+ *   items={[
+ *     { id: '1', title: 'Item 1', content: 'Content 1' },
+ *     { id: '2', title: 'Item 2', content: 'Content 2' },
+ *   ]}
+ * />
+ * ```
+ */
+export default function Accordion({
+  items,
+  type = 'single',
+  defaultOpen,
+  onValueChange,
+  className = '',
+}: AccordionProps) {
+  const getInitialOpen = (): string[] => {
+    if (defaultOpen === undefined) return [];
+    return Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen];
+  };
+
+  const [openItems, setOpenItems] = useState<string[]>(getInitialOpen);
+
+  const handleToggle = (itemId: string) => {
+    if (items.find(item => item.id === itemId)?.disabled) return;
+
+    let newOpenItems: string[];
+
+    if (type === 'single') {
+      newOpenItems = openItems.includes(itemId) ? [] : [itemId];
+    } else {
+      newOpenItems = openItems.includes(itemId)
+        ? openItems.filter(id => id !== itemId)
+        : [...openItems, itemId];
+    }
+
+    setOpenItems(newOpenItems);
+    onValueChange?.(type === 'single' ? newOpenItems[0] || '' : newOpenItems);
+  };
+
+  return (
+    <div className={`space-y-1 ${className}`}>
+      {items.map((item) => {
+        const isOpen = openItems.includes(item.id);
+        const isDisabled = item.disabled;
+
+        return (
+          <div
+            key={item.id}
+            className="border border-gray-200 rounded-md overflow-hidden"
+          >
+            <button
+              type="button"
+              onClick={() => handleToggle(item.id)}
+              disabled={isDisabled}
+              className={`
+                w-full
+                flex
+                items-center
+                justify-between
+                ${getSpacingClass('base', 'px')}
+                ${getSpacingClass('md', 'py')}
+                ${getTypographyClasses('label')}
+                text-left
+                ${getColorClass('neutral', 'dark', 'text')}
+              bg-white
+                hover:bg-gray-50
+                focus:outline-none
+                focus:ring-2
+                focus:ring-offset-2
+                ${getColorClass('primary', 'DEFAULT', 'focus:ring')}
+                ${getAnimationClass('base')}
+                ${isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+              `}
+              aria-expanded={isOpen}
+              aria-controls={`accordion-content-${item.id}`}
+              aria-disabled={isDisabled}
+            >
+              <span>{item.title}</span>
+              <ChevronDown
+                className={`
+                  ${getSpacingClass('sm', 'ml')}
+                  ${getAnimationClass('base')}
+                  ${isOpen ? 'transform rotate-180' : ''}
+                  ${isDisabled ? 'opacity-50' : ''}
+                `}
+                aria-hidden="true"
+              />
+            </button>
+            <div
+              id={`accordion-content-${item.id}`}
+              className={`
+                overflow-hidden
+                ${getAnimationClass('base')}
+                ${isOpen ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'}
+              `}
+              aria-hidden={!isOpen}
+            >
+              <div className={`
+                ${getSpacingClass('base', 'px')}
+                ${getSpacingClass('md', 'py')}
+                ${getColorClass('neutral', 'DEFAULT', 'text')}
+              `}>
+                {item.content}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { default } from './Accordion';
+export type { AccordionProps, AccordionItem, AccordionType } from './Accordion';

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

@@ -0,0 +1,226 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Avatar from './Avatar';
+import { AvatarGroup } from './AvatarGroup';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Atoms/Avatar',
+  component: Avatar,
+  parameters: {
+    docs: {
+      description: {
+        component: 'A versatile avatar component for displaying user profile images or initials. Supports fallback display when image fails to load or is not provided. Fully accessible with ARIA attributes.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    src: {
+      control: 'text',
+      description: 'Image source URL',
+    },
+    alt: {
+      control: 'text',
+      description: 'Alt text for the image',
+    },
+    fallback: {
+      control: 'text',
+      description: 'Fallback text or element when image is not available',
+    },
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: 'Size of the avatar',
+    },
+    variant: {
+      control: 'select',
+      options: ['circle', 'square', 'rounded'],
+      description: 'Shape variant of the avatar',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    fallback: 'JD',
+    alt: 'John Doe',
+    size: 'md',
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    src: 'https://i.pravatar.cc/150?img=1',
+    alt: 'User avatar',
+    fallback: 'JD',
+    size: 'md',
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar fallback="XS" size="xs" alt="Extra small" />
+      <Avatar fallback="SM" size="sm" alt="Small" />
+      <Avatar fallback="MD" size="md" alt="Medium" />
+      <Avatar fallback="LG" size="lg" alt="Large" />
+      <Avatar fallback="XL" size="xl" alt="Extra large" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All available sizes of the avatar component.',
+      },
+    },
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar fallback="C" variant="circle" alt="Circle" />
+      <Avatar fallback="R" variant="rounded" alt="Rounded" />
+      <Avatar fallback="S" variant="square" alt="Square" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Different shape variants: circle, rounded, and square.',
+      },
+    },
+  },
+};
+
+export const WithFallback: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar fallback="JD" alt="John Doe" />
+      <Avatar fallback="AB" alt="Alice Brown" />
+      <Avatar fallback="CD" alt="Charlie Davis" />
+      <Avatar fallback="EF" alt="Emma Foster" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Avatars with fallback initials when no image is provided.',
+      },
+    },
+  },
+};
+
+export const ImageError: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar
+        src="https://invalid-url.com/image.jpg"
+        fallback="JD"
+        alt="John Doe"
+      />
+      <Avatar
+        src=""
+        fallback="AB"
+        alt="Alice Brown"
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Avatars automatically fall back to initials when image fails to load or is not provided.',
+      },
+    },
+  },
+};
+
+export const Group: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Small group (3 avatars)</p>
+        <AvatarGroup max={3} size="md">
+          <Avatar src="https://i.pravatar.cc/150?img=1" alt="User 1" fallback="U1" />
+          <Avatar src="https://i.pravatar.cc/150?img=2" alt="User 2" fallback="U2" />
+          <Avatar src="https://i.pravatar.cc/150?img=3" alt="User 3" fallback="U3" />
+        </AvatarGroup>
+      </div>
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Large group with overflow (max 3)</p>
+        <AvatarGroup max={3} size="md">
+          <Avatar src="https://i.pravatar.cc/150?img=1" alt="User 1" fallback="U1" />
+          <Avatar src="https://i.pravatar.cc/150?img=2" alt="User 2" fallback="U2" />
+          <Avatar src="https://i.pravatar.cc/150?img=3" alt="User 3" fallback="U3" />
+          <Avatar src="https://i.pravatar.cc/150?img=4" alt="User 4" fallback="U4" />
+          <Avatar src="https://i.pravatar.cc/150?img=5" alt="User 5" fallback="U5" />
+        </AvatarGroup>
+      </div>
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Group with fallbacks only</p>
+        <AvatarGroup max={4} size="md">
+          <Avatar fallback="JD" alt="John Doe" />
+          <Avatar fallback="AB" alt="Alice Brown" />
+          <Avatar fallback="CD" alt="Charlie Davis" />
+          <Avatar fallback="EF" alt="Emma Foster" />
+          <Avatar fallback="GH" alt="George Hill" />
+        </AvatarGroup>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'AvatarGroup displays multiple avatars with automatic overflow handling. Shows a "+N" avatar when there are more than the max number.',
+      },
+    },
+  },
+};
+
+export const GroupSpacing: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-sm text-gray-600 mb-2">No spacing</p>
+        <AvatarGroup max={5} spacing="none">
+          <Avatar fallback="1" />
+          <Avatar fallback="2" />
+          <Avatar fallback="3" />
+        </AvatarGroup>
+      </div>
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Small spacing</p>
+        <AvatarGroup max={5} spacing="sm">
+          <Avatar fallback="1" />
+          <Avatar fallback="2" />
+          <Avatar fallback="3" />
+        </AvatarGroup>
+      </div>
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Medium spacing (default)</p>
+        <AvatarGroup max={5} spacing="md">
+          <Avatar fallback="1" />
+          <Avatar fallback="2" />
+          <Avatar fallback="3" />
+        </AvatarGroup>
+      </div>
+      <div>
+        <p className="text-sm text-gray-600 mb-2">Large spacing</p>
+        <AvatarGroup max={5} spacing="lg">
+          <Avatar fallback="1" />
+          <Avatar fallback="2" />
+          <Avatar fallback="3" />
+        </AvatarGroup>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Different spacing options for AvatarGroup.',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,233 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import Avatar from './Avatar';
+import { AvatarGroup } from './AvatarGroup';
+
+describe('Avatar', () => {
+  it('renders avatar with fallback text', () => {
+    render(<Avatar fallback="JD" alt="John Doe" />);
+    expect(screen.getByText('JD')).toBeInTheDocument();
+  });
+
+  it('renders avatar with image when src is provided', () => {
+    render(<Avatar src="/test.jpg" alt="Test User" />);
+    const img = screen.getByAltText('Test User');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', '/test.jpg');
+  });
+
+  it('shows fallback when image fails to load', async () => {
+    const { container } = render(
+      <Avatar src="/invalid.jpg" fallback="JD" alt="John Doe" />
+    );
+    
+    const img = container.querySelector('img');
+    expect(img).toBeInTheDocument();
+    
+    // Simulate image error
+    if (img) {
+      fireEvent.error(img);
+    }
+    
+    await waitFor(() => {
+      expect(screen.getByText('JD')).toBeInTheDocument();
+    });
+  });
+
+  it('applies correct size classes', () => {
+    const { container, rerender } = render(<Avatar fallback="JD" size="xs" />);
+    let avatar = container.querySelector('div[role="img"]');
+    expect(avatar).toHaveClass('h-6', 'w-6', 'text-xs');
+
+    rerender(<Avatar fallback="JD" size="sm" />);
+    avatar = container.querySelector('div[role="img"]');
+    expect(avatar).toHaveClass('h-8', 'w-8', 'text-sm');
+
+    rerender(<Avatar fallback="JD" size="md" />);
+    avatar = container.querySelector('div[role="img"]');
+    expect(avatar).toHaveClass('h-10', 'w-10', 'text-base');
+
+    rerender(<Avatar fallback="JD" size="lg" />);
+    avatar = container.querySelector('div[role="img"]');
+    expect(avatar).toHaveClass('h-12', 'w-12', 'text-lg');
+
+    rerender(<Avatar fallback="JD" size="xl" />);
+    avatar = container.querySelector('div[role="img"]');
+    expect(avatar).toHaveClass('h-16', 'w-16', 'text-xl');
+  });
+
+  it('applies correct variant classes', () => {
+    const { container, rerender } = render(<Avatar fallback="JD" variant="circle" />);
+    let avatar = container.querySelector('div[role="img"]');
+    expect(avatar).toHaveClass('rounded-full');
+
+    rerender(<Avatar fallback="JD" variant="square" />);
+    avatar = container.querySelector('div[role="img"]');
+    expect(avatar).toHaveClass('rounded-none');
+
+    rerender(<Avatar fallback="JD" variant="rounded" />);
+    avatar = container.querySelector('div[role="img"]');
+    expect(avatar).toHaveClass('rounded-md');
+  });
+
+  it('truncates fallback text to 2 characters', () => {
+    render(<Avatar fallback="John Doe" />);
+    expect(screen.getByText('JO')).toBeInTheDocument();
+  });
+
+  it('shows question mark when no fallback is provided', () => {
+    render(<Avatar alt="User" />);
+    expect(screen.getByText('?')).toBeInTheDocument();
+  });
+
+  it('has correct aria-label', () => {
+    render(<Avatar fallback="JD" alt="John Doe" />);
+    const avatar = screen.getByLabelText('John Doe');
+    expect(avatar).toBeInTheDocument();
+    expect(avatar).toHaveAttribute('role', 'img');
+  });
+
+  it('uses custom aria-label when provided', () => {
+    render(<Avatar fallback="JD" aria-label="Custom label" />);
+    const avatar = screen.getByLabelText('Custom label');
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('uses default aria-label when neither alt nor aria-label is provided', () => {
+    render(<Avatar fallback="JD" />);
+    const avatar = screen.getByLabelText('User avatar');
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('handles ReactNode fallback', () => {
+    render(<Avatar fallback={<span data-testid="custom-fallback">Custom</span>} />);
+    expect(screen.getByTestId('custom-fallback')).toBeInTheDocument();
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<Avatar fallback="JD" className="custom-class" />);
+    const avatar = container.querySelector('div[role="img"]');
+    expect(avatar).toHaveClass('custom-class');
+  });
+
+  it('passes through HTML attributes', () => {
+    const { container } = render(<Avatar fallback="JD" data-testid="avatar" />);
+    const avatar = container.querySelector('[data-testid="avatar"]');
+    expect(avatar).toBeInTheDocument();
+  });
+});
+
+describe('AvatarGroup', () => {
+  it('renders multiple avatars', () => {
+    render(
+      <AvatarGroup>
+        <Avatar fallback="U1" alt="User 1" />
+        <Avatar fallback="U2" alt="User 2" />
+        <Avatar fallback="U3" alt="User 3" />
+      </AvatarGroup>
+    );
+    
+    expect(screen.getByText('U1')).toBeInTheDocument();
+    expect(screen.getByText('U2')).toBeInTheDocument();
+    expect(screen.getByText('U3')).toBeInTheDocument();
+  });
+
+  it('shows overflow indicator when max is exceeded', () => {
+    render(
+      <AvatarGroup max={2}>
+        <Avatar fallback="U1" alt="User 1" />
+        <Avatar fallback="U2" alt="User 2" />
+        <Avatar fallback="U3" alt="User 3" />
+        <Avatar fallback="U4" alt="User 4" />
+      </AvatarGroup>
+    );
+    
+    expect(screen.getByText('U1')).toBeInTheDocument();
+    expect(screen.getByText('U2')).toBeInTheDocument();
+    expect(screen.getByText('+2')).toBeInTheDocument();
+    expect(screen.queryByText('U3')).not.toBeInTheDocument();
+    expect(screen.queryByText('U4')).not.toBeInTheDocument();
+  });
+
+  it('applies correct spacing classes', () => {
+    const { container, rerender } = render(
+      <AvatarGroup spacing="none">
+        <Avatar fallback="U1" />
+        <Avatar fallback="U2" />
+      </AvatarGroup>
+    );
+    let group = container.querySelector('div[role="group"]');
+    expect(group).not.toHaveClass('-space-x-1', '-space-x-2', '-space-x-3');
+
+    rerender(
+      <AvatarGroup spacing="sm">
+        <Avatar fallback="U1" />
+        <Avatar fallback="U2" />
+      </AvatarGroup>
+    );
+    group = container.querySelector('div[role="group"]');
+    expect(group).toHaveClass('-space-x-1');
+
+    rerender(
+      <AvatarGroup spacing="md">
+        <Avatar fallback="U1" />
+        <Avatar fallback="U2" />
+      </AvatarGroup>
+    );
+    group = container.querySelector('div[role="group"]');
+    expect(group).toHaveClass('-space-x-2');
+
+    rerender(
+      <AvatarGroup spacing="lg">
+        <Avatar fallback="U1" />
+        <Avatar fallback="U2" />
+      </AvatarGroup>
+    );
+    group = container.querySelector('div[role="group"]');
+    expect(group).toHaveClass('-space-x-3');
+  });
+
+  it('has correct aria-label with avatar count', () => {
+    render(
+      <AvatarGroup>
+        <Avatar fallback="U1" />
+        <Avatar fallback="U2" />
+        <Avatar fallback="U3" />
+      </AvatarGroup>
+    );
+    
+    const group = screen.getByLabelText('3 avatars');
+    expect(group).toBeInTheDocument();
+    expect(group).toHaveAttribute('role', 'group');
+  });
+
+  it('applies size and variant to overflow avatar', () => {
+    render(
+      <AvatarGroup max={1} size="lg" variant="square">
+        <Avatar fallback="U1" />
+        <Avatar fallback="U2" />
+      </AvatarGroup>
+    );
+    
+    const overflowAvatar = screen.getByText('+1');
+    const overflowContainer = overflowAvatar.closest('div[role="img"]');
+    expect(overflowContainer).toHaveClass('h-12', 'w-12', 'text-lg', 'rounded-none');
+  });
+
+  it('handles empty children gracefully', () => {
+    const { container } = render(<AvatarGroup>{null}</AvatarGroup>);
+    const group = container.querySelector('div[role="group"]');
+    expect(group).toBeInTheDocument();
+    expect(group?.children.length).toBe(0);
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(
+      <AvatarGroup className="custom-group">
+        <Avatar fallback="U1" />
+      </AvatarGroup>
+    );
+    const group = container.querySelector('div[role="group"]');
+    expect(group).toHaveClass('custom-group');
+  });
+});