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

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

@@ -0,0 +1,128 @@
+'use client';
+
+import { useState, type HTMLAttributes, ReactNode } from 'react';
+import { getColorClass, getRadiusClass } from '../../tokens';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  src?: string;
+  alt?: string;
+  fallback?: string | ReactNode;
+  size?: AvatarSize;
+  variant?: 'circle' | 'square' | 'rounded';
+  'aria-label'?: string;
+}
+
+/**
+ * Avatar 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.
+ * 
+ * @example
+ * ```tsx
+ * // With image
+ * <Avatar src="/user.jpg" alt="John Doe" />
+ * 
+ * // With fallback initials
+ * <Avatar fallback="JD" alt="John Doe" />
+ * 
+ * // Custom size
+ * <Avatar src="/user.jpg" size="lg" />
+ * ```
+ */
+export default function Avatar({
+  src,
+  alt,
+  fallback,
+  size = 'md',
+  variant = 'circle',
+  'aria-label': ariaLabel,
+  className = '',
+  ...props
+}: AvatarProps) {
+  const [imageError, setImageError] = useState(false);
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  const sizeClasses: Record<AvatarSize, string> = {
+    xs: 'h-6 w-6 text-xs',
+    sm: 'h-8 w-8 text-sm',
+    md: 'h-10 w-10 text-base',
+    lg: 'h-12 w-12 text-lg',
+    xl: 'h-16 w-16 text-xl',
+  };
+
+  const variantClasses = {
+    circle: getRadiusClass('full'),
+    square: getRadiusClass('none'),
+    rounded: getRadiusClass('md'),
+  };
+
+  const showFallback = !src || imageError;
+  const displayFallback = typeof fallback === 'string' 
+    ? fallback.toUpperCase().slice(0, 2)
+    : fallback;
+
+  const defaultAriaLabel = ariaLabel || alt || 'User avatar';
+
+  return (
+    <div
+      className={`
+        relative
+        inline-flex
+        items-center
+        justify-center
+        flex-shrink-0
+        ${sizeClasses[size]}
+        ${variantClasses[variant]}
+        ${getColorClass('neutral', 'light', 'bg')}
+        ${getColorClass('neutral', 'dark', 'text')}
+        font-medium
+        overflow-hidden
+        ${className}
+      `}
+      role="img"
+      aria-label={defaultAriaLabel}
+      {...props}
+    >
+      {!showFallback && src && (
+        <img
+          src={src}
+          alt={alt || ''}
+          className={`
+            w-full
+            h-full
+            object-cover
+            ${variantClasses[variant]}
+            ${!imageLoaded ? 'opacity-0' : 'opacity-100'}
+            transition-opacity
+            duration-200
+          `}
+          onLoad={() => setImageLoaded(true)}
+          onError={() => {
+            setImageError(true);
+            setImageLoaded(false);
+          }}
+          aria-hidden="true"
+        />
+      )}
+      {showFallback && (
+        <span
+          className={`
+            flex
+            items-center
+            justify-center
+            w-full
+            h-full
+            ${variantClasses[variant]}
+          `}
+          aria-hidden="true"
+        >
+          {displayFallback || '?'}
+        </span>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,96 @@
+'use client';
+
+import { Children, type HTMLAttributes, ReactNode, isValidElement, cloneElement } from 'react';
+import Avatar, { type AvatarProps } from './Avatar';
+
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  max?: number; // Maximum number of avatars to show before collapsing
+  size?: AvatarProps['size'];
+  variant?: AvatarProps['variant'];
+  spacing?: 'none' | 'sm' | 'md' | 'lg'; // Negative margin between avatares
+}
+
+/**
+ * AvatarGroup Component
+ * 
+ * Container for displaying multiple avatars in a group.
+ * Supports collapsing when there are too many avatars.
+ * 
+ * @example
+ * ```tsx
+ * <AvatarGroup max={3}>
+ *   <Avatar src="/user1.jpg" alt="User 1" />
+ *   <Avatar src="/user2.jpg" alt="User 2" />
+ *   <Avatar src="/user3.jpg" alt="User 3" />
+ *   <Avatar src="/user4.jpg" alt="User 4" />
+ * </AvatarGroup>
+ * ```
+ */
+export function AvatarGroup({
+  children,
+  max = 3,
+  size = 'md',
+  variant = 'circle',
+  spacing = 'md',
+  className = '',
+  ...props
+}: AvatarGroupProps) {
+  const spacingClasses = {
+    none: '',
+    sm: '-space-x-1',
+    md: '-space-x-2',
+    lg: '-space-x-3',
+  };
+
+  // Convert children to array and filter out null/undefined
+  const avatars = Children.toArray(children).filter(Boolean);
+  const visibleAvatars = avatars.slice(0, max);
+  const remainingCount = avatars.length - max;
+
+  return (
+    <div
+      className={`
+        flex
+        items-center
+        ${spacingClasses[spacing]}
+        ${className}
+      `}
+      role="group"
+      aria-label={`${avatars.length} avatars`}
+      {...props}
+    >
+      {visibleAvatars.map((avatar, index) => {
+        // Clone avatar with consistent size and variant if needed
+        let avatarElement = avatar;
+        if (isValidElement(avatar) && avatar.type === Avatar) {
+          const avatarProps = avatar.props as AvatarProps;
+          avatarElement = cloneElement(avatar as React.ReactElement<AvatarProps>, {
+            size: avatarProps.size || size,
+            variant: avatarProps.variant || variant,
+          });
+        }
+
+        return (
+          <div
+            key={index}
+            className="ring-2 ring-white"
+            style={{ zIndex: avatars.length - index }}
+          >
+            {avatarElement}
+          </div>
+        );
+      })}
+      {remainingCount > 0 && (
+        <Avatar
+          size={size}
+          variant={variant}
+          fallback={`+${remainingCount}`}
+          aria-label={`${remainingCount} more avatars`}
+          className="ring-2 ring-white"
+          style={{ zIndex: 0 }}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Avatar Components
+ * 
+ * Avatar component with fallback, sizes, and group support.
+ */
+
+export { default as Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize } from './Avatar';
+
+export { AvatarGroup } from './AvatarGroup';
+export type { AvatarGroupProps } from './AvatarGroup';

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

@@ -1,86 +1,95 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Badge from "./Badge";
+import type { Meta, StoryObj } from '@storybook/react';
+import Badge from './Badge';
 
 const meta: Meta<typeof Badge> = {
-  title: "UI/Atoms/Badge",
+  title: 'Atoms/Badge',
   component: Badge,
-  parameters: {
-    docs: {
-      description: {
-        component: "A versatile badge component for displaying status, priority, and other labels. Supports multiple variants: success, warning, error, info, and neutral.",
-      },
-    },
-  },
+  tags: ['autodocs'],
   argTypes: {
     variant: {
-      control: "select",
-      options: ["success", "warning", "error", "info", "neutral"],
-      description: "Visual variant of the badge",
+      control: 'select',
+      options: ['success', 'warning', 'error', 'info', 'neutral', 'primary', 'secondary'],
     },
-    children: {
-      control: "text",
-      description: "Content to display inside the badge",
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    style: {
+      control: 'select',
+      options: ['solid', 'outline'],
     },
   },
 };
 
-export const Success: StoryObj<typeof Badge> = {
-  args: {
-    children: "Success",
-    variant: "success",
-  },
-};
-
-export const Warning: StoryObj<typeof Badge> = {
-  args: {
-    children: "Warning",
-    variant: "warning",
-  },
-};
-
-export const Error: StoryObj<typeof Badge> = {
-  args: {
-    children: "Error",
-    variant: "error",
-  },
-};
-
-export const Info: StoryObj<typeof Badge> = {
-  args: {
-    children: "Info",
-    variant: "info",
-  },
-};
+export default meta;
+type Story = StoryObj<typeof Badge>;
 
-export const Neutral: StoryObj<typeof Badge> = {
+export const Default: Story = {
   args: {
-    children: "Neutral",
-    variant: "neutral",
+    children: 'Badge',
   },
 };
 
-export const AllVariants: StoryObj<typeof Badge> = {
+export const Variants: Story = {
   render: () => (
-    <div className="flex gap-2 flex-wrap">
+    <div className="flex flex-wrap gap-2">
       <Badge variant="success">Success</Badge>
       <Badge variant="warning">Warning</Badge>
       <Badge variant="error">Error</Badge>
       <Badge variant="info">Info</Badge>
       <Badge variant="neutral">Neutral</Badge>
+      <Badge variant="primary">Primary</Badge>
+      <Badge variant="secondary">Secondary</Badge>
     </div>
   ),
 };
 
-export const WithCustomContent: StoryObj<typeof Badge> = {
+export const Sizes: Story = {
   render: () => (
-    <div className="flex gap-2 flex-wrap">
-      <Badge variant="success">Active</Badge>
-      <Badge variant="error">Critical</Badge>
-      <Badge variant="warning">Pending</Badge>
-      <Badge variant="info">New</Badge>
-      <Badge variant="neutral">Draft</Badge>
+    <div className="flex items-center gap-2">
+      <Badge size="sm">Small</Badge>
+      <Badge size="md">Medium</Badge>
+      <Badge size="lg">Large</Badge>
     </div>
   ),
 };
 
-export default meta;
+export const Styles: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="success" style="solid">Solid</Badge>
+      <Badge variant="success" style="outline">Outline</Badge>
+      <Badge variant="error" style="solid">Solid</Badge>
+      <Badge variant="error" style="outline">Outline</Badge>
+      <Badge variant="info" style="solid">Solid</Badge>
+      <Badge variant="info" style="outline">Outline</Badge>
+    </div>
+  ),
+};
+
+export const AllCombinations: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-medium mb-2">Solid Style</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="success" size="sm">Success</Badge>
+          <Badge variant="warning" size="md">Warning</Badge>
+          <Badge variant="error" size="lg">Error</Badge>
+          <Badge variant="info" size="md">Info</Badge>
+          <Badge variant="primary" size="md">Primary</Badge>
+        </div>
+      </div>
+      <div>
+        <h3 className="text-sm font-medium mb-2">Outline Style</h3>
+        <div className="flex flex-wrap gap-2">
+          <Badge variant="success" style="outline" size="sm">Success</Badge>
+          <Badge variant="warning" style="outline" size="md">Warning</Badge>
+          <Badge variant="error" style="outline" size="lg">Error</Badge>
+          <Badge variant="info" style="outline" size="md">Info</Badge>
+          <Badge variant="primary" style="outline" size="md">Primary</Badge>
+        </div>
+      </div>
+    </div>
+  ),
+};

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

@@ -1,63 +1,40 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import Badge from "./Badge";
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Badge from './Badge';
 
-describe("Badge", () => {
-  it("renders with default variant", () => {
-    render(<Badge>Test Badge</Badge>);
-    const badge = screen.getByText("Test Badge");
-    expect(badge).toBeInTheDocument();
-    expect(badge).toHaveClass("bg-gray-100");
-  });
-
-  it("renders with success variant", () => {
-    render(<Badge variant="success">Success</Badge>);
-    const badge = screen.getByText("Success");
-    expect(badge).toHaveClass("bg-green-100", "text-green-800", "border-green-500");
-  });
-
-  it("renders with warning variant", () => {
-    render(<Badge variant="warning">Warning</Badge>);
-    const badge = screen.getByText("Warning");
-    expect(badge).toHaveClass("bg-yellow-100", "text-yellow-800", "border-yellow-500");
+describe('Badge', () => {
+  it('renders badge with text', () => {
+    render(<Badge>Status</Badge>);
+    expect(screen.getByText('Status')).toBeInTheDocument();
   });
 
-  it("renders with error variant", () => {
-    render(<Badge variant="error">Error</Badge>);
-    const badge = screen.getByText("Error");
-    expect(badge).toHaveClass("bg-red-100", "text-red-800", "border-red-500");
+  it('applies variant classes', () => {
+    const { container } = render(<Badge variant="success">Active</Badge>);
+    const badge = container.querySelector('span');
+    expect(badge).toHaveClass('bg-green-300');
   });
 
-  it("renders with info variant", () => {
-    render(<Badge variant="info">Info</Badge>);
-    const badge = screen.getByText("Info");
-    expect(badge).toHaveClass("bg-blue-100", "text-blue-800", "border-blue-500");
+  it('applies size classes', () => {
+    const { container } = render(<Badge size="sm">Small</Badge>);
+    const badge = container.querySelector('span');
+    expect(badge).toHaveClass('px-1.5', 'py-0.5', 'text-xs');
   });
 
-  it("renders with neutral variant", () => {
-    render(<Badge variant="neutral">Neutral</Badge>);
-    const badge = screen.getByText("Neutral");
-    expect(badge).toHaveClass("bg-gray-100", "text-gray-800", "border-gray-500");
+  it('applies outline style', () => {
+    const { container } = render(<Badge variant="success" style="outline">Outline</Badge>);
+    const badge = container.querySelector('span');
+    expect(badge).toHaveClass('bg-transparent');
   });
 
-  it("applies custom className", () => {
-    render(<Badge className="custom-class">Test</Badge>);
-    const badge = screen.getByText("Test");
-    expect(badge).toHaveClass("custom-class");
-  });
-
-  it("has accessible role and aria-label for string children", () => {
-    render(<Badge>Accessible Badge</Badge>);
-    const badge = screen.getByRole("status");
-    expect(badge).toHaveAttribute("aria-label", "Accessible Badge");
+  it('has correct aria-label when children is string', () => {
+    render(<Badge>Status</Badge>);
+    const badge = screen.getByLabelText('Status');
+    expect(badge).toBeInTheDocument();
   });
 
-  it("renders with custom children", () => {
-    render(
-      <Badge>
-        <span>Custom Content</span>
-      </Badge>
-    );
-    expect(screen.getByText("Custom Content")).toBeInTheDocument();
+  it('has role="status"', () => {
+    render(<Badge>Status</Badge>);
+    const badge = screen.getByRole('status');
+    expect(badge).toBeInTheDocument();
   });
 });

package/src/ui/atoms/Badge/Badge.tsx

@@ -1,7 +1,18 @@
-import type { HTMLAttributes } from "react";
+'use client';
 
-interface Props extends HTMLAttributes<HTMLSpanElement> {
-  variant?: "success" | "warning" | "error" | "info" | "neutral";
+import { memo, useMemo } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { getColorClass } from '../../tokens/colors';
+
+export type BadgeVariant = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'secondary';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeStyle = 'solid' | 'outline';
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  style?: BadgeStyle;
+  children: ReactNode;
 }
 
 /**
@@ -9,52 +20,84 @@ interface Props extends HTMLAttributes<HTMLSpanElement> {
  * 
  * A versatile badge component for displaying status, priority, and other labels.
  * Follows Atomic Design principles as an Atom component.
+ * Uses tokens for consistent theming.
  * 
  * @example
  * ```tsx
  * <Badge variant="success">Active</Badge>
- * <Badge variant="error">Critical</Badge>
+ * <Badge variant="error" size="lg">Critical</Badge>
+ * <Badge variant="info" style="outline">New</Badge>
  * ```
  */
-export default function Badge({ 
-  variant = "neutral", 
-  className = "",
+const Badge = memo(function Badge({ 
+  variant = 'neutral',
+  size = 'md',
+  style = 'solid',
+  className = '',
   children,
   ...props 
-}: Props) {
+}: BadgeProps) {
   const baseClasses = [
-    "inline-flex",
-    "items-center",
-    "px-2",
-    "py-1",
-    "rounded",
-    "text-xs",
-    "font-medium",
-    "border",
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'font-medium',
+    'rounded-md',
+    'border',
   ];
 
-  const variantClasses: Record<NonNullable<Props["variant"]>, string> = {
-    success: "bg-green-100 text-green-800 border-green-500",
-    warning: "bg-yellow-100 text-yellow-800 border-yellow-500",
-    error: "bg-red-100 text-red-800 border-red-500",
-    info: "bg-blue-100 text-blue-800 border-blue-500",
-    neutral: "bg-gray-100 text-gray-800 border-gray-500",
+  // Size classes
+  const sizeClasses: Record<BadgeSize, string> = {
+    sm: 'px-1.5 py-0.5 text-xs',
+    md: 'px-2 py-1 text-xs',
+    lg: 'px-2.5 py-1.5 text-sm',
   };
 
-  const classes = [
+  // Map variant to color role
+  const variantToColorRole: Record<BadgeVariant, 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral'> = {
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+    info: 'info',
+    neutral: 'neutral',
+    primary: 'primary',
+    secondary: 'secondary',
+  };
+
+  const colorRole = variantToColorRole[variant];
+
+  // Style classes
+  const styleClasses = style === 'outline'
+    ? [
+        'bg-transparent',
+        getColorClass(colorRole, 'DEFAULT', 'border'),
+        getColorClass(colorRole, 'DEFAULT', 'text'),
+      ]
+    : [
+        getColorClass(colorRole, 'light', 'bg'),
+        getColorClass(colorRole, 'dark', 'text'),
+        getColorClass(colorRole, 'DEFAULT', 'border'),
+      ];
+
+  const classes = useMemo(() => [
     ...baseClasses,
-    variantClasses[variant as NonNullable<Props["variant"]>],
+    sizeClasses[size],
+    ...styleClasses,
     className,
-  ].filter(Boolean).join(" ");
+  ].filter(Boolean).join(' '), [size, styleClasses, className]);
 
   return (
     <span
       role="status"
-      aria-label={typeof children === "string" ? children : undefined}
+      aria-label={typeof children === 'string' ? children : undefined}
       className={classes}
       {...props}
     >
       {children}
     </span>
   );
-}
+});
+
+Badge.displayName = 'Badge';
+
+export default Badge;

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import BoxWrapper from "./BoxWrapper";
 
 const meta: Meta<typeof BoxWrapper> = {
-  title: "UI/Atoms/BoxWrapper",
+  title: "Atoms/BoxWrapper",
   component: BoxWrapper,
 };
 

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

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import BoxWrapper from './BoxWrapper';
+
+describe('BoxWrapper', () => {
+  it('renders children', () => {
+    render(<BoxWrapper>Test content</BoxWrapper>);
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+  });
+
+  it('applies default classes', () => {
+    const { container } = render(<BoxWrapper>Content</BoxWrapper>);
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper).toHaveClass('p-large', 'bg-bg', 'rounded', 'shadow-card');
+  });
+
+  it('applies custom className', () => {
+    const { container } = render(<BoxWrapper className="custom-class">Content</BoxWrapper>);
+    const wrapper = container.firstChild as HTMLElement;
+    expect(wrapper).toHaveClass('custom-class');
+  });
+
+  it('passes through HTML attributes', () => {
+    render(<BoxWrapper data-testid="box">Content</BoxWrapper>);
+    expect(screen.getByTestId('box')).toBeInTheDocument();
+  });
+});

package/src/ui/atoms/BoxWrapper/BoxWrapper.tsx

@@ -1,8 +1,11 @@
+import React from "react";
 import type { HTMLAttributes } from "react";
 
-type Props = HTMLAttributes<HTMLDivElement>;
+export interface BoxWrapperProps extends HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
 
-export default function BoxWrapper({ className, ...props }: Props) {
+export default function BoxWrapper({ className, ...props }: BoxWrapperProps): React.JSX.Element {
   const classNames = [className, "p-large", "bg-bg", "rounded", "shadow-card"];
 
   return <div className={classNames.join(" ")} {...props} />;