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

package/src/ui/atoms/Chip/Chip.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import { forwardRef, type ReactNode } from 'react';
+import { X } from 'lucide-react';
+import { getColorClass } from '../../tokens/colors';
+import { getRadiusClass } from '../../tokens/radius';
+import { getSpacingClass } from '../../tokens/spacing';
+import { getTypographySize } from '../../tokens/typography';
+import { cn, cva } from '../../utils';
+
+export type ChipVariant = 'default' | 'outlined' | 'filled';
+export type ChipSize = 'sm' | 'md' | 'lg';
+
+export interface ChipProps {
+  children: ReactNode;
+  variant?: ChipVariant;
+  size?: ChipSize;
+  onRemove?: () => void;
+  selected?: boolean;
+  disabled?: boolean;
+  className?: string;
+  'aria-label'?: string;
+  onClick?: () => void;
+  tabIndex?: number;
+}
+
+/**
+ * Chip Component
+ * 
+ * A chip/tag component for displaying labels, filters, or selected items.
+ * Follows Atomic Design principles as an Atom component.
+ * 
+ * @example
+ * ```tsx
+ * <Chip>Tag</Chip>
+ * <Chip onRemove={() => console.log('removed')}>Removable</Chip>
+ * ```
+ */
+// Chip variants using CVA
+const chipVariants = cva(
+  // Base classes
+  cn(
+    'inline-flex',
+    'items-center',
+    'font-medium',
+    getRadiusClass('full'),
+    getSpacingClass('xs', 'gap')
+  ),
+  {
+    variants: {
+      variant: {
+        default: cn(
+          getColorClass('neutral', 'light', 'bg'),
+          getColorClass('neutral', 'dark', 'text'),
+          'border',
+          getColorClass('neutral', 'DEFAULT', 'border')
+        ),
+        outlined: cn(
+          'bg-transparent',
+          getColorClass('neutral', 'dark', 'text'),
+          'border',
+          getColorClass('neutral', 'DEFAULT', 'border')
+        ),
+        filled: cn(
+          getColorClass('primary', 'DEFAULT', 'bg'),
+          'text-white',
+          'border',
+          'border-transparent'
+        ),
+      },
+      size: {
+        sm: cn(
+          getSpacingClass('xs', 'px'),
+          getSpacingClass('xs', 'py'),
+          getTypographySize('caption')
+        ),
+        md: cn(
+          getSpacingClass('sm', 'px'),
+          getSpacingClass('xs', 'py'),
+          getTypographySize('bodySmall')
+        ),
+        lg: cn(
+          getSpacingClass('md', 'px'),
+          getSpacingClass('sm', 'py'),
+          getTypographySize('body')
+        ),
+      },
+      selected: {
+        true: cn(
+          getColorClass('primary', 'DEFAULT', 'bg'),
+          'text-white',
+          'border',
+          getColorClass('primary', 'DEFAULT', 'border')
+        ),
+        false: '',
+      },
+      disabled: {
+        true: 'opacity-50 cursor-not-allowed',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      {
+        selected: true,
+        variant: 'default',
+        class: '', // Override variant when selected
+      },
+      {
+        selected: true,
+        variant: 'outlined',
+        class: '', // Override variant when selected
+      },
+      {
+        selected: true,
+        variant: 'filled',
+        class: '', // Override variant when selected
+      },
+    ],
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+      selected: false,
+      disabled: false,
+    },
+  }
+);
+
+const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(
+  {
+    children,
+    variant = 'default',
+    size = 'md',
+    onRemove,
+    selected = false,
+    disabled = false,
+    className = '',
+    'aria-label': ariaLabel,
+    onClick,
+    tabIndex,
+    ...props
+  },
+  ref
+) {
+  // Determine if chip is interactive (has onClick or is explicitly selectable)
+  const isInteractive = onClick !== undefined || (selected !== false && selected !== undefined);
+  const role = selected ? 'option' : (isInteractive ? 'button' : undefined);
+  
+  // Generate accessible label
+  const getAccessibleLabel = (): string | undefined => {
+    if (ariaLabel) return ariaLabel;
+    if (typeof children === 'string') return children;
+    // For non-string children, try to extract text content
+    if (typeof children === 'object' && children !== null && 'props' in children) {
+      const childProps = (children as unknown).props;
+      if (childProps?.children && typeof childProps.children === 'string') {
+        return childProps.children;
+      }
+    }
+    return undefined;
+  };
+
+  const accessibleLabel = getAccessibleLabel();
+  const shouldHaveAriaLabel = role === 'button' && !accessibleLabel;
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      if (onClick) {
+        onClick();
+      }
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        chipVariants({ variant, size, selected, disabled }),
+        onRemove && getSpacingClass('xs', 'pr'),
+        isInteractive && !disabled && 'cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2',
+        className
+      )}
+      role={role}
+      aria-selected={selected ? true : undefined}
+      aria-disabled={disabled}
+      aria-label={shouldHaveAriaLabel ? 'Chip' : ariaLabel || (role === 'button' ? accessibleLabel : undefined)}
+      tabIndex={tabIndex !== undefined ? tabIndex : (isInteractive && !disabled ? 0 : undefined)}
+      onClick={disabled ? undefined : onClick}
+      onKeyDown={handleKeyDown}
+      {...props}
+    >
+      <span>{children}</span>
+      {onRemove && !disabled && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+          className={cn(
+            getSpacingClass('xs', 'ml'),
+            'hover:bg-black/10',
+            getRadiusClass('full'),
+            getSpacingClass('xs', 'p'),
+            'transition-colors',
+            'focus:outline-none',
+            'focus:ring-2',
+            'focus:ring-indigo-500',
+            'focus:ring-offset-1'
+          )}
+          aria-label={`Remove ${accessibleLabel || 'chip'}`}
+        >
+          <X className="h-3 w-3" aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  );
+});
+
+Chip.displayName = 'Chip';
+
+export default Chip;

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

@@ -0,0 +1,2 @@
+export { default as Chip } from './Chip';
+export type { ChipProps, ChipVariant, ChipSize } from './Chip';

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

@@ -1,31 +1,75 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from '@storybook/test';
+import { expect, userEvent, within, waitFor } from '@storybook/test';
 import { useState } from "react";
 import Collapsible from "./Collapsible";
 import { Button, Text } from "../../atoms";
 
 const meta: Meta<typeof Collapsible> = {
-  title: "UI/Atoms/Collapsible",
+  title: "Atoms/Collapsible",
   component: Collapsible,
   parameters: {
     docs: {
       description: {
-        component: "A generic, reusable collapsible component for any content. Supports both controlled and uncontrolled modes.",
+        component: `
+## Collapsible
+
+A generic, reusable collapsible component for any content. Supports both controlled and uncontrolled modes.
+
+### Events
+
+| Event | Description | Parameters | When Fired |
+|-------|-------------|------------|------------|
+| \`onOpenChange\` | Estado de abertura muda | \`(open: boolean) => void\` | Quando o collapsible abre/fecha |
+
+### States
+
+| State | Description | How to Activate | Visual |
+|-------|-------------|-----------------|--------|
+| \`closed\` | Collapsible fechado | Estado inicial ou \`open={false}\` | Conteúdo oculto |
+| \`open\` | Collapsible aberto | \`open={true}\` ou clicar | Conteúdo visível |
+| \`disabled\` | Desabilitado | \`disabled={true}\` | Collapsible não interativo |
+        `,
       },
     },
   },
   argTypes: {
+    trigger: {
+      control: false,
+      description: "Content for the toggle button (ReactNode)",
+    },
+    children: {
+      control: false,
+      description: "Content to show/hide (ReactNode)",
+    },
     defaultOpen: {
       control: "boolean",
       description: "Initial open state (uncontrolled mode)",
     },
+    open: {
+      control: "boolean",
+      description: "Controlled open state",
+    },
+    onOpenChange: {
+      description: 'Callback fired when the collapsible open state changes',
+      action: 'onOpenChange',
+      table: {
+        type: { summary: '(open: boolean) => void' },
+        category: 'Events',
+      },
+    },
     disabled: {
       control: "boolean",
-      description: "Whether the collapsible is disabled",
+      description: "Disable the collapsible",
     },
     duration: {
       control: "number",
       description: "Animation duration in milliseconds",
     },
+    storageKey: {
+      control: "text",
+      description: "localStorage key for persisting state",
+    },
   },
 };
 
@@ -121,4 +165,194 @@ export const Disabled: StoryObj<typeof Collapsible> = {
   },
 };
 
+export const Accessibility: StoryObj<typeof Collapsible> = {
+  args: {
+    defaultOpen: false,
+    trigger: (
+      <div className="px-4 py-2 bg-gray-100 rounded-md">
+        <Text as="span" className="font-medium">Accessible Collapsible</Text>
+      </div>
+    ),
+    children: (
+      <div className="px-4 py-2">
+        <Text>This collapsible has proper ARIA attributes: aria-expanded, aria-controls, and keyboard support (Enter/Space).</Text>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates accessibility features: aria-expanded indicates state, aria-controls links trigger to content, and keyboard support (Enter/Space to toggle).',
+      },
+    },
+  },
+};
+
+export const KeyboardNavigation: StoryObj<typeof Collapsible> = {
+  args: {
+    defaultOpen: false,
+    trigger: (
+      <div className="px-4 py-2 bg-gray-100 rounded-md">
+        <Text as="span" className="font-medium">Try Keyboard Navigation</Text>
+      </div>
+    ),
+    children: (
+      <div className="px-4 py-2">
+        <Text>Tab to focus, then press Enter or Space to toggle. The aria-expanded attribute updates automatically.</Text>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Use Tab to focus the trigger, then Enter or Space to toggle. Screen readers will announce the state change.',
+      },
+    },
+  },
+};
+
+export const Uncontrolled: StoryObj<typeof Collapsible> = {
+  args: {
+    defaultOpen: false,
+    trigger: (
+      <div className="px-4 py-2 bg-gray-100 rounded-md">
+        <Text as="span" className="font-medium">Uncontrolled Collapsible</Text>
+      </div>
+    ),
+    children: (
+      <div className="px-4 py-2">
+        <Text>This collapsible uses defaultOpen and manages its own state internally.</Text>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates uncontrolled mode using defaultOpen prop.',
+      },
+    },
+  },
+};
+
+// Event Stories
+export const WithEvents: StoryObj<typeof Collapsible> = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    
+    const handleOpenChange = fn((open: boolean) => {
+      setIsOpen(open);
+      console.log('Collapsible open state changed:', open);
+    });
+    
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-gray-600">
+          Click the trigger below. Check the Actions panel to see events being fired.
+        </p>
+        <Collapsible
+          open={isOpen}
+          onOpenChange={handleOpenChange}
+          trigger={
+            <div className="px-4 py-2 bg-gray-100 rounded-md">
+              <Text as="span" className="font-medium">Interactive Collapsible</Text>
+            </div>
+          }
+        >
+          <div className="px-4 py-2">
+            <Text>This collapsible demonstrates events.</Text>
+          </div>
+        </Collapsible>
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByText('Interactive Collapsible').closest('button') || canvas.getByRole('button');
+    
+    // Test click
+    await userEvent.click(trigger);
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates collapsible events. Click the trigger and check the Actions panel to see events being logged.',
+      },
+    },
+  },
+};
+
+// State Stories
+export const ClosedState: StoryObj<typeof Collapsible> = {
+  args: {
+    defaultOpen: false,
+    trigger: (
+      <div className="px-4 py-2 bg-gray-100 rounded-md">
+        <Text as="span" className="font-medium">Closed Collapsible</Text>
+      </div>
+    ),
+    children: (
+      <div className="px-4 py-2">
+        <Text>This collapsible starts closed.</Text>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Closed state - collapsible is collapsed, content is hidden.',
+      },
+    },
+  },
+};
+
+export const OpenState: StoryObj<typeof Collapsible> = {
+  args: {
+    defaultOpen: true,
+    trigger: (
+      <div className="px-4 py-2 bg-gray-100 rounded-md">
+        <Text as="span" className="font-medium">Open Collapsible</Text>
+      </div>
+    ),
+    children: (
+      <div className="px-4 py-2">
+        <Text>This collapsible starts open.</Text>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Open state - collapsible is expanded, content is visible.',
+      },
+    },
+  },
+};
+
+export const DisabledState: StoryObj<typeof Collapsible> = {
+  args: {
+    defaultOpen: true,
+    disabled: true,
+    trigger: (
+      <div className="px-4 py-2 bg-gray-100 rounded-md opacity-50">
+        <Text as="span" className="font-medium">Disabled Collapsible</Text>
+      </div>
+    ),
+    children: (
+      <div className="px-4 py-2">
+        <Text>This collapsible is disabled and cannot be toggled.</Text>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled state - collapsible is not interactive, shows reduced opacity.',
+      },
+    },
+  },
+};
+
 export default meta;

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

@@ -5,17 +5,28 @@ import Collapsible from './Collapsible';
 describe('Collapsible', () => {
   beforeEach(() => {
     // Clear localStorage before each test
-    localStorage.clear();
+    try {
+      localStorage.clear();
+    } catch {
+      // If clear is not available, remove items manually
+      Object.keys(localStorage).forEach(key => localStorage.removeItem(key));
+    }
   });
 
   afterEach(() => {
-    localStorage.clear();
+    // Clear localStorage after each test
+    try {
+      localStorage.clear();
+    } catch {
+      // If clear is not available, remove items manually
+      Object.keys(localStorage).forEach(key => localStorage.removeItem(key));
+    }
   });
 
   it('renders trigger and children', () => {
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
       >
         <div>Content</div>
@@ -29,43 +40,43 @@ describe('Collapsible', () => {
   it('starts open when defaultOpen is true', () => {
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
       >
         <div>Content</div>
       </Collapsible>
     );
 
-    const content = screen.getByText('Content').parentElement;
+    const content = screen.getByText('Content').parentElement?.parentElement;
     expect(content).toHaveAttribute('aria-hidden', 'false');
   });
 
   it('starts closed when defaultOpen is false', () => {
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={false}
       >
         <div>Content</div>
       </Collapsible>
     );
 
-    const content = screen.getByText('Content').parentElement;
+    const content = screen.getByText('Content').parentElement?.parentElement;
     expect(content).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('toggles content when trigger is clicked', async () => {
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
       >
         <div>Content</div>
       </Collapsible>
     );
 
-    const button = screen.getByText('Toggle');
-    const content = screen.getByText('Content').parentElement;
+    const button = screen.getByText('Toggle').closest('button');
+    const content = screen.getByText('Content').parentElement?.parentElement;
 
     expect(content).toHaveAttribute('aria-hidden', 'false');
 
@@ -80,7 +91,7 @@ describe('Collapsible', () => {
     const handleOpenChange = vi.fn();
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         open={true}
         onOpenChange={handleOpenChange}
       >
@@ -88,8 +99,8 @@ describe('Collapsible', () => {
       </Collapsible>
     );
 
-    const button = screen.getByText('Toggle');
-    fireEvent.click(button);
+    const button = screen.getByText('Toggle').closest('button');
+    fireEvent.click(button!);
 
     expect(handleOpenChange).toHaveBeenCalledWith(false);
   });
@@ -99,7 +110,7 @@ describe('Collapsible', () => {
     
     const { rerender } = render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
         storageKey={storageKey}
       >
@@ -107,8 +118,8 @@ describe('Collapsible', () => {
       </Collapsible>
     );
 
-    const button = screen.getByText('Toggle');
-    fireEvent.click(button);
+    const button = screen.getByText('Toggle').closest('button');
+    fireEvent.click(button!);
 
     await waitFor(() => {
       expect(localStorage.getItem(storageKey)).toBe('false');
@@ -117,7 +128,7 @@ describe('Collapsible', () => {
     // Re-render and check state is restored
     rerender(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
         storageKey={storageKey}
       >
@@ -125,14 +136,14 @@ describe('Collapsible', () => {
       </Collapsible>
     );
 
-    const content = screen.getByText('Content').parentElement;
+    const content = screen.getByText('Content').parentElement?.parentElement;
     expect(content).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('does not toggle when disabled', async () => {
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
         disabled={true}
       >
@@ -140,13 +151,13 @@ describe('Collapsible', () => {
       </Collapsible>
     );
 
-    const button = screen.getByText('Toggle');
-    const content = screen.getByText('Content').parentElement;
+    const button = screen.getByText('Toggle').closest('button');
+    const content = screen.getByText('Content').parentElement?.parentElement;
 
     expect(button).toBeDisabled();
     expect(content).toHaveAttribute('aria-hidden', 'false');
 
-    fireEvent.click(button);
+    fireEvent.click(button!);
 
     // State should not change
     await waitFor(() => {
@@ -157,18 +168,19 @@ describe('Collapsible', () => {
   it('has correct ARIA attributes', () => {
     render(
       <Collapsible
-        trigger={<button>Toggle</button>}
+        trigger={<span>Toggle</span>}
         defaultOpen={true}
       >
         <div>Content</div>
       </Collapsible>
     );
 
-    const button = screen.getByText('Toggle');
+    const button = screen.getByText('Toggle').closest('button');
     const content = screen.getByText('Content').parentElement?.parentElement;
 
     expect(button).toHaveAttribute('aria-expanded', 'true');
     expect(button).toHaveAttribute('aria-controls');
     expect(content).toHaveAttribute('id');
+    expect(content).toHaveAttribute('aria-hidden', 'false');
   });
 });