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

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

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

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

@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import Popover from './Popover';
+import Button from '../Button/Button';
+
+const meta: Meta<typeof Popover> = {
+  title: 'Atoms/Popover',
+  component: Popover,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    placement: {
+      control: 'select',
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+        'right',
+        'right-start',
+        'right-end',
+      ],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Popover>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Popover {...args} trigger={<Button>Open Popover</Button>}>
+      <p>This is popover content. It can contain any React elements.</p>
+    </Popover>
+  ),
+};
+
+export const WithTitle: Story = {
+  render: (args) => (
+    <Popover
+      {...args}
+      trigger={<Button>Open Popover</Button>}
+      title="Popover Title"
+    >
+      <p>This popover has a title and close button.</p>
+    </Popover>
+  ),
+  args: {
+    showCloseButton: true,
+  },
+};
+
+export const Placements: Story = {
+  render: () => {
+    return (
+      <div className="flex flex-col items-center gap-8 p-16">
+        <Popover
+          trigger={<Button>Top</Button>}
+          placement="top"
+          title="Top Placement"
+        >
+          <p>Popover appears above the trigger</p>
+        </Popover>
+        <div className="flex gap-8">
+          <Popover
+            trigger={<Button>Left</Button>}
+            placement="left"
+            title="Left Placement"
+          >
+            <p>Popover appears to the left</p>
+          </Popover>
+          <Popover
+            trigger={<Button>Right</Button>}
+            placement="right"
+            title="Right Placement"
+          >
+            <p>Popover appears to the right</p>
+          </Popover>
+        </div>
+        <Popover
+          trigger={<Button>Bottom</Button>}
+          placement="bottom"
+          title="Bottom Placement"
+        >
+          <p>Popover appears below the trigger</p>
+        </Popover>
+      </div>
+    );
+  },
+};
+
+export const RichContent: Story = {
+  render: () => (
+    <Popover
+      trigger={<Button>Open Rich Popover</Button>}
+      title="Rich Content Example"
+      showCloseButton
+    >
+      <div className="space-y-2">
+        <p className="text-sm">This popover contains rich content:</p>
+        <ul className="list-disc list-inside text-sm space-y-1">
+          <li>Lists</li>
+          <li>Multiple paragraphs</li>
+          <li>Any React components</li>
+        </ul>
+        <div className="mt-4 pt-4 border-t border-gray-200">
+          <Button size="sm" variant="primary">
+            Action Button
+          </Button>
+        </div>
+      </div>
+    </Popover>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div className="space-y-4">
+        <Popover
+          trigger={<Button>Toggle Popover</Button>}
+          open={open}
+          onOpenChange={setOpen}
+          title="Controlled Popover"
+          showCloseButton
+        >
+          <p>This popover is controlled by external state.</p>
+          <p className="mt-2 text-sm text-gray-600">Open: {open ? 'Yes' : 'No'}</p>
+        </Popover>
+        <Button onClick={() => setOpen(!open)} variant="outline">
+          External Toggle
+        </Button>
+      </div>
+    );
+  },
+};
+
+export const WithoutCloseButton: Story = {
+  render: () => (
+    <Popover
+      trigger={<Button>Open</Button>}
+      title="No Close Button"
+      showCloseButton={false}
+      closeOnClickOutside
+    >
+      <p>Click outside to close this popover.</p>
+    </Popover>
+  ),
+};

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

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import Popover from './Popover';
+import Button from '../Button/Button';
+
+describe('Popover', () => {
+  it('renders trigger correctly', () => {
+    render(
+      <Popover trigger={<Button>Open</Button>}>
+        <p>Content</p>
+      </Popover>
+    );
+    expect(screen.getByText('Open')).toBeInTheDocument();
+  });
+
+  it('opens popover on trigger click', async () => {
+    render(
+      <Popover trigger={<Button>Open</Button>}>
+        <p>Popover Content</p>
+      </Popover>
+    );
+    
+    const trigger = screen.getByText('Open');
+    fireEvent.click(trigger);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Popover Content')).toBeInTheDocument();
+    });
+  });
+
+  it('closes popover when close button is clicked', async () => {
+    render(
+      <Popover trigger={<Button>Open</Button>} showCloseButton>
+        <p>Popover Content</p>
+      </Popover>
+    );
+    
+    const trigger = screen.getByText('Open');
+    fireEvent.click(trigger);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Popover Content')).toBeInTheDocument();
+    });
+    
+    const closeButton = screen.getByLabelText('Close popover');
+    fireEvent.click(closeButton);
+    
+    await waitFor(() => {
+      expect(screen.queryByText('Popover Content')).not.toBeInTheDocument();
+    });
+  });
+
+  it('displays title when provided', async () => {
+    render(
+      <Popover trigger={<Button>Open</Button>} title="Popover Title">
+        <p>Content</p>
+      </Popover>
+    );
+    
+    const trigger = screen.getByText('Open');
+    fireEvent.click(trigger);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Popover Title')).toBeInTheDocument();
+    });
+  });
+
+  it('handles controlled open state', async () => {
+    const handleOpenChange = vi.fn();
+    render(
+      <Popover trigger={<Button>Open</Button>} open={true} onOpenChange={handleOpenChange}>
+        <p>Content</p>
+      </Popover>
+    );
+    
+    await waitFor(() => {
+      expect(screen.getByText('Content')).toBeInTheDocument();
+    });
+  });
+});

package/src/ui/atoms/Popover/Popover.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import { useState, useRef, useEffect, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { getSpacingClass } from '../../tokens/spacing';
+import { getRadiusClass } from '../../tokens/radius';
+import { getShadowClass } from '../../tokens/shadows';
+import { getZIndexClass } from '../../tokens/z-index';
+import { getAnimationClass } from '../../tokens/animations';
+import Button from '../Button/Button';
+
+export type PopoverPlacement = 
+  | 'top' 
+  | 'top-start' 
+  | 'top-end'
+  | 'bottom' 
+  | 'bottom-start' 
+  | 'bottom-end'
+  | 'left' 
+  | 'left-start' 
+  | 'left-end'
+  | 'right' 
+  | 'right-start' 
+  | 'right-end';
+
+export interface PopoverProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placement?: PopoverPlacement;
+  showCloseButton?: boolean;
+  title?: string;
+  closeOnClickOutside?: boolean;
+  closeOnEscape?: boolean;
+  className?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+}
+
+/**
+ * Popover Component
+ * 
+ * A popover component that displays content in a floating panel.
+ * Supports positioning, portal rendering, and keyboard navigation.
+ * Follows Atomic Design principles as an Atom component.
+ * 
+ * @example
+ * ```tsx
+ * <Popover
+ *   trigger={<Button>Open Popover</Button>}
+ *   title="Popover Title"
+ * >
+ *   <p>Popover content goes here</p>
+ * </Popover>
+ * ```
+ */
+export default function Popover({
+  trigger,
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  placement = 'bottom',
+  showCloseButton = false,
+  title,
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  className = '',
+  triggerClassName = '',
+  contentClassName = '',
+}: PopoverProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+
+  const updatePosition = () => {
+    if (!triggerRef.current || !popoverRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popoverRect = popoverRef.current.getBoundingClientRect();
+    const scrollY = window.scrollY;
+    const scrollX = window.scrollX;
+
+    let top = 0;
+    let left = 0;
+
+    // Calculate position based on placement
+    if (placement.startsWith('top')) {
+      top = triggerRect.top + scrollY - popoverRect.height - 8;
+      if (placement === 'top-start') left = triggerRect.left + scrollX;
+      else if (placement === 'top-end') left = triggerRect.right + scrollX - popoverRect.width;
+      else left = triggerRect.left + scrollX + (triggerRect.width - popoverRect.width) / 2;
+    } else if (placement.startsWith('bottom')) {
+      top = triggerRect.bottom + scrollY + 8;
+      if (placement === 'bottom-start') left = triggerRect.left + scrollX;
+      else if (placement === 'bottom-end') left = triggerRect.right + scrollX - popoverRect.width;
+      else left = triggerRect.left + scrollX + (triggerRect.width - popoverRect.width) / 2;
+    } else if (placement.startsWith('left')) {
+      left = triggerRect.left + scrollX - popoverRect.width - 8;
+      if (placement === 'left-start') top = triggerRect.top + scrollY;
+      else if (placement === 'left-end') top = triggerRect.bottom + scrollY - popoverRect.height;
+      else top = triggerRect.top + scrollY + (triggerRect.height - popoverRect.height) / 2;
+    } else if (placement.startsWith('right')) {
+      left = triggerRect.right + scrollX + 8;
+      if (placement === 'right-start') top = triggerRect.top + scrollY;
+      else if (placement === 'right-end') top = triggerRect.bottom + scrollY - popoverRect.height;
+      else top = triggerRect.top + scrollY + (triggerRect.height - popoverRect.height) / 2;
+    }
+
+    // Keep within viewport
+    const padding = 8;
+    top = Math.max(padding, Math.min(top, window.innerHeight + scrollY - popoverRect.height - padding));
+    left = Math.max(padding, Math.min(left, window.innerWidth + scrollX - popoverRect.width - padding));
+
+    setPosition({ top, left });
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+      const handleResize = () => updatePosition();
+      const handleScroll = () => updatePosition();
+      window.addEventListener('resize', handleResize);
+      window.addEventListener('scroll', handleScroll, true);
+      return () => {
+        window.removeEventListener('resize', handleResize);
+        window.removeEventListener('scroll', handleScroll, true);
+      };
+    }
+  }, [isOpen, placement]);
+
+  useEffect(() => {
+    if (isOpen && popoverRef.current) {
+      // Small delay to ensure DOM is ready
+      setTimeout(updatePosition, 0);
+    }
+  }, [isOpen]);
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  };
+
+  const handleClose = () => {
+    handleOpenChange(false);
+  };
+
+  useEffect(() => {
+    if (isOpen && closeOnEscape) {
+      const handleEscape = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          handleClose();
+        }
+      };
+      document.addEventListener('keydown', handleEscape);
+      return () => document.removeEventListener('keydown', handleEscape);
+    }
+  }, [isOpen, closeOnEscape]);
+
+  useEffect(() => {
+    if (isOpen && closeOnClickOutside) {
+      const handleClickOutside = (e: MouseEvent) => {
+        if (
+          popoverRef.current &&
+          triggerRef.current &&
+          !popoverRef.current.contains(e.target as Node) &&
+          !triggerRef.current.contains(e.target as Node)
+        ) {
+          handleClose();
+        }
+      };
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isOpen, closeOnClickOutside]);
+
+  const popoverContent = isOpen ? (
+    <div
+      ref={popoverRef}
+      className={`
+        absolute
+        ${getZIndexClass('popover')}
+        bg-white
+        ${getRadiusClass('lg')}
+        ${getShadowClass('lg')}
+        border
+        border-gray-200
+        min-w-[200px]
+        max-w-[400px]
+        ${getAnimationClass('base')}
+        ${contentClassName}
+      `}
+      style={{
+        top: `${position.top}px`,
+        left: `${position.left}px`,
+      }}
+      role="dialog"
+      aria-modal="false"
+    >
+      {(title || showCloseButton) && (
+        <div className={`
+          flex
+          items-center
+          justify-between
+          ${getSpacingClass('base', 'px')}
+          ${getSpacingClass('md', 'py')}
+          border-b
+          border-gray-200
+        `}>
+          {title && (
+            <h3 className="text-sm font-semibold text-gray-900">{title}</h3>
+          )}
+          {showCloseButton && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleClose}
+              className="h-auto p-1"
+              aria-label="Close popover"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      )}
+      <div className={`
+        ${getSpacingClass('base', 'p')}
+        ${title || showCloseButton ? '' : getSpacingClass('md', 'p')}
+      `}>
+        {children}
+      </div>
+    </div>
+  ) : null;
+
+  return (
+    <div className={`inline-block ${className}`}>
+      <div
+        ref={triggerRef}
+        className={triggerClassName}
+        onClick={() => handleOpenChange(!isOpen)}
+      >
+        {trigger}
+      </div>
+      {typeof window !== 'undefined' && createPortal(popoverContent, document.body)}
+    </div>
+  );
+}

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

@@ -0,0 +1,2 @@
+export { default } from './Popover';
+export type { PopoverProps, PopoverPlacement } from './Popover';

package/src/ui/atoms/Progress/Progress.css

@@ -0,0 +1,17 @@
+/**
+ * Progress Component Styles
+ * 
+ * CSS animations for indeterminate progress bar.
+ */
+
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(300%);
+  }
+}

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

@@ -0,0 +1,170 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import Progress from './Progress';
+
+const meta: Meta<typeof Progress> = {
+  title: 'Atoms/Progress',
+  component: Progress,
+  parameters: {
+    docs: {
+      description: {
+        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.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+      description: 'Progress value (0-100). Omit for indeterminate mode.',
+    },
+    max: {
+      control: 'number',
+      description: 'Maximum value (default: 100)',
+    },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
+      description: 'Color variant of the progress bar',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the progress bar',
+    },
+    showLabel: {
+      control: 'boolean',
+      description: 'Whether to show the label and percentage',
+    },
+    label: {
+      control: 'text',
+      description: 'Custom label text',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Progress>;
+
+export const Default: Story = {
+  args: {
+    value: 50,
+    variant: 'primary',
+    size: 'md',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    value: 75,
+    variant: 'primary',
+    showLabel: true,
+    label: 'Upload Progress',
+  },
+};
+
+export const Indeterminate: Story = {
+  args: {
+    variant: 'primary',
+    size: 'md',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Indeterminate progress bar for loading states where progress cannot be determined.',
+      },
+    },
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-4 w-full max-w-md">
+      <Progress value={60} variant="primary" showLabel label="Primary" />
+      <Progress value={60} variant="secondary" showLabel label="Secondary" />
+      <Progress value={60} variant="success" showLabel label="Success" />
+      <Progress value={60} variant="error" showLabel label="Error" />
+      <Progress value={60} variant="warning" showLabel label="Warning" />
+      <Progress value={60} variant="info" showLabel label="Info" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All available color variants of the progress bar.',
+      },
+    },
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-4 w-full max-w-md">
+      <Progress value={50} size="sm" showLabel label="Small" />
+      <Progress value={50} size="md" showLabel label="Medium" />
+      <Progress value={50} size="lg" showLabel label="Large" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Different sizes of the progress bar.',
+      },
+    },
+  },
+};
+
+export const States: Story = {
+  render: () => (
+    <div className="space-y-4 w-full max-w-md">
+      <Progress value={0} showLabel label="Not Started (0%)" />
+      <Progress value={25} showLabel label="In Progress (25%)" />
+      <Progress value={50} showLabel label="Halfway (50%)" />
+      <Progress value={75} showLabel label="Almost Done (75%)" />
+      <Progress value={100} showLabel label="Complete (100%)" />
+      <Progress variant="primary" showLabel label="Indeterminate" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Different progress states from 0% to 100%, plus indeterminate mode.',
+      },
+    },
+  },
+};
+
+export const Animated: Story = {
+  render: () => {
+    const [progress, setProgress] = React.useState(0);
+
+    React.useEffect(() => {
+      const timer = setInterval(() => {
+        setProgress((prev) => {
+          if (prev >= 100) {
+            return 0;
+          }
+          return prev + 10;
+        });
+      }, 500);
+
+      return () => clearInterval(timer);
+    }, []);
+
+    return (
+      <div className="space-y-4 w-full max-w-md">
+        <Progress value={progress} showLabel label="Animated Progress" />
+        <p className="text-sm text-gray-600">
+          Progress automatically updates every 500ms
+        </p>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Animated progress bar that updates automatically.',
+      },
+    },
+  },
+};