@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/Flex/flex.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+import { Flex } from './flex';
+
+describe('<Flex />', () => {
+  const renderFlex = (props = {}) => render(<Flex data-testid="flex" {...props} />);
+
+  it('renders with default classes', () => {
+    renderFlex();
+    const Flex = screen.getByTestId('flex');
+
+    expect(Flex).toBeInTheDocument();
+    expect(Flex).toHaveClass('flex');
+  });
+
+  it('applies custom className when provided', () => {
+    renderFlex({ className: 'bg-blue-500 p-4' });
+    const Flex = screen.getByTestId('flex');
+
+    expect(Flex).toHaveClass('bg-blue-500', 'p-4');
+    expect(Flex).toHaveClass('flex');
+  });
+
+  it('renders children correctly', () => {
+    render(
+      <Flex>
+        <p>Child content</p>
+      </Flex>
+    );
+    expect(screen.getByText('Child content')).toBeInTheDocument();
+  });
+
+  it('forwards additional props to the div element', () => {
+    renderFlex({ 'id': 'custom-id', 'role': 'region', 'aria-label': 'test-flex' });
+    const Flex = screen.getByTestId('flex');
+
+    expect(Flex).toHaveAttribute('id', 'custom-id');
+    expect(Flex).toHaveAttribute('role', 'region');
+    expect(Flex).toHaveAttribute('aria-label', 'test-flex');
+  });
+
+  it('should match snapshot', () => {
+    const { container } = renderFlex();
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Flex/flex.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/utils';
+
+function Flex ({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div {...props} className={cn('flex', className)}></div>;
+}
+
+export { Flex };

package/src/components/atoms/Flex/index.ts

@@ -0,0 +1 @@
+export { Flex } from './flex';

package/src/components/atoms/Grid/grid.stories.tsx

@@ -0,0 +1,33 @@
+import { Grid } from './grid';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Grid> = {
+  title: 'Components/Layout/Grid',
+  component: Grid,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Grid is a layout component that displays its children in a grid.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Grid>;
+
+export const Default: Story = {
+  args: {
+    className: 'grid-cols-2 gap-2 p-4 bg-gray-100',
+    children: (
+      <>
+        <div className="w-10 h-10 bg-red-500" />
+        <div className="w-10 h-10 bg-green-500" />
+        <div className="w-10 h-10 bg-blue-500" />
+      </>
+    ),
+  },
+};

package/src/components/atoms/Grid/grid.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+import { Grid } from './grid';
+
+describe('<Grid />', () => {
+  const renderGrid = (props = {}) => render(<Grid data-testid="grid" {...props} />);
+
+  it('renders with default classes', () => {
+    renderGrid();
+    const Grid = screen.getByTestId('grid');
+
+    expect(Grid).toBeInTheDocument();
+    expect(Grid).toHaveClass('grid');
+  });
+
+  it('applies custom className when provided', () => {
+    renderGrid({ className: 'bg-blue-500 p-4' });
+    const Grid = screen.getByTestId('grid');
+
+    expect(Grid).toHaveClass('bg-blue-500', 'p-4');
+    expect(Grid).toHaveClass('grid');
+  });
+
+  it('renders children correctly', () => {
+    render(
+      <Grid>
+        <p>Child content</p>
+      </Grid>
+    );
+    expect(screen.getByText('Child content')).toBeInTheDocument();
+  });
+
+  it('forwards additional props to the div element', () => {
+    renderGrid({ 'id': 'custom-id', 'role': 'region', 'aria-label': 'test-grid' });
+    const Grid = screen.getByTestId('grid');
+
+    expect(Grid).toHaveAttribute('id', 'custom-id');
+    expect(Grid).toHaveAttribute('role', 'region');
+    expect(Grid).toHaveAttribute('aria-label', 'test-grid');
+  });
+
+  it('should match snapshot', () => {
+    const { container } = renderGrid();
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Grid/grid.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/utils';
+
+function Grid ({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div {...props} className={cn('grid', className)}></div>;
+}
+
+export { Grid };

package/src/components/atoms/Grid/index.ts

@@ -0,0 +1 @@
+export * from './grid';

package/src/components/atoms/Icon/icon.stories.tsx

@@ -0,0 +1,169 @@
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  Building2,
+  Heart,
+  Settings,
+  Star,
+  Bell,
+  User,
+  Home,
+  Search,
+} from 'lucide-react';
+
+import { Icon } from './icon';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Components/Data Display/Icon',
+  component: Icon,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A flexible and optimized icon component with support for multiple variants, sizes, and visual effects. Built with performance and consistency in mind.',
+      },
+    },
+  },
+  argTypes: {
+    icon: {
+      description: 'The icon component to render (from lucide-react or similar)',
+      control: { type: 'select' },
+      options: [ 'Building2', 'Heart', 'Settings', 'Star', 'Bell' ],
+      mapping: {
+        Building2,
+        Heart,
+        Settings,
+        Star,
+        Bell,
+      },
+    },
+    variant: {
+      control: { type: 'select' },
+      options: [ 'primary', 'secondary', 'outline', 'success', 'error' ],
+      description: 'Visual variant of the icon container',
+    },
+    size: {
+      control: { type: 'select' },
+      options: [ 'small', 'medium', 'large' ],
+      description: 'Size of the icon and its container',
+    },
+    hasSpiralEffect: {
+      control: { type: 'boolean' },
+      description: 'Whether to show the animated spiral effect',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: Building2,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    icon: Search,
+    size: 'large',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    icon: Home,
+    size: 'medium',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    icon: Settings,
+    variant: 'outline',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    icon: Heart,
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    icon: Bell,
+    variant: 'secondary',
+  },
+};
+
+// Showcase Story - Multiple Icons
+export const Showcase: Story = {
+  name: 'All Variants Showcase',
+  render: () => (
+    <div className="grid grid-cols-3 gap-8 p-8">
+      {/* Row 1: Variants */}
+      <div className="text-center">
+        <Icon icon={Heart} variant="primary" />
+        <p className="mt-2 text-sm text-gray-600">Primary</p>
+      </div>
+      <div className="text-center">
+        <Icon icon={Bell} variant="secondary" />
+        <p className="mt-2 text-sm text-gray-600">Secondary</p>
+      </div>
+      <div className="text-center">
+        <Icon icon={Settings} variant="outline" />
+        <p className="mt-2 text-sm text-gray-600">Outline</p>
+      </div>
+      <div className="text-center">
+        <Icon icon={Settings} variant="success" />
+        <p className="mt-2 text-sm text-gray-600">Success</p>
+      </div>
+      <div className="text-center">
+        <Icon icon={Settings} variant="error" />
+        <p className="mt-2 text-sm text-gray-600">Error</p>
+      </div>
+      <div className="text-center">
+        <Icon icon={Settings} variant="warning" />
+        <p className="mt-2 text-sm text-gray-600">Warning</p>
+      </div>
+      {/* Row 2: Sizes */}
+      <div className="text-center">
+        <Icon icon={Star} size="small" />
+        <p className="mt-2 text-sm text-gray-600">Small</p>
+      </div>
+      <div className="text-center">
+        <Icon icon={Star} size="medium" />
+        <p className="mt-2 text-sm text-gray-600">Medium</p>
+      </div>
+      <div className="text-center">
+        <Icon icon={Star} size="large" />
+        <p className="mt-2 text-sm text-gray-600">Large</p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'A comprehensive showcase of all available variants, sizes, and effects.',
+      },
+    },
+  },
+};
+
+export const Small: Story = {
+  args: {
+    icon: User,
+    size: 'small',
+  },
+};
+
+export const WithSpiralEffect: Story = {
+  name: 'With Spiral Effect',
+  render: (args) => (
+    <div className="flex justify-center items-center h-screen bg-white">
+      <Icon icon={Star} hasSpiralEffect {...args} />
+    </div>
+  ),
+};

package/src/components/atoms/Icon/icon.test.tsx

@@ -0,0 +1,272 @@
+import { ComponentProps } from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+import { User03 } from '@/components/icons/user-03';
+
+import { Icon, IconProps } from './icon';
+
+const MockIcon = (props: ComponentProps<'div'>) => <div data-testid="mock-icon" {...props} />;
+
+type ExtendedIconProps = IconProps & ComponentProps<'div'>;
+
+describe('<Icon />', () => {
+  const defaultProps: IconProps = {
+    icon: MockIcon,
+  };
+
+  const renderIcon = (props: Partial<ExtendedIconProps> = {}) =>
+    render(<Icon data-testid="icon-container" {...defaultProps} {...props} />);
+
+  describe('Rendering', () => {
+    it('renders correctly with default props', () => {
+      renderIcon();
+
+      const container = screen.getByTestId('icon-container');
+      const icon = screen.getByTestId('mock-icon');
+
+      expect(container).toBeInTheDocument();
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('renders with a real icon component', () => {
+      renderIcon({ icon: User03 });
+
+      const container = screen.getByTestId('icon-container');
+      const svg = container.querySelector('svg');
+
+      expect(container).toBeInTheDocument();
+      expect(svg).toBeInTheDocument();
+      expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
+    });
+
+    it('applies custom className to container', () => {
+      renderIcon({ className: 'custom-class' });
+
+      const container = screen.getByTestId('icon-container');
+      expect(container).toHaveClass('custom-class');
+    });
+
+    it('forwards additional props to container', () => {
+      renderIcon({ 'aria-label': 'test-icon', 'role': 'img' });
+
+      const container = screen.getByTestId('icon-container');
+      expect(container).toHaveAttribute('aria-label', 'test-icon');
+      expect(container).toHaveAttribute('role', 'img');
+    });
+  });
+
+  describe('Sizes', () => {
+    it.each([
+      [ 'small', 'size-8' ],
+      [ 'medium', 'size-12' ],
+      [ 'large', 'size-16' ],
+    ] as const)('applies correct container size class for %s size', (size, expectedClass) => {
+      renderIcon({ size });
+
+      const container = screen.getByTestId('icon-container');
+      expect(container).toHaveClass(expectedClass);
+    });
+
+    it('uses medium size as default', () => {
+      renderIcon();
+
+      const container = screen.getByTestId('icon-container');
+      expect(container).toHaveClass('size-12');
+    });
+  });
+
+  describe('Variants', () => {
+    it('applies primary variant styles by default', () => {
+      renderIcon();
+
+      const container = screen.getByTestId('icon-container');
+      expect(container).toHaveClass('bg-primary/10', 'rounded-full');
+    });
+
+    it('applies primary variant styles', () => {
+      renderIcon({ variant: 'primary' });
+
+      const container = screen.getByTestId('icon-container');
+      expect(container).toHaveClass('bg-primary/10', 'rounded-full');
+    });
+
+    it('applies secondary variant styles', () => {
+      renderIcon({ variant: 'secondary' });
+
+      const container = screen.getByTestId('icon-container');
+      expect(container).toHaveClass('bg-gray-100', 'rounded-full');
+    });
+
+    it('applies outline variant styles', () => {
+      renderIcon({ variant: 'outline' });
+
+      const container = screen.getByTestId('icon-container');
+      expect(container).toHaveClass('bg-white', 'rounded-lg', 'border', 'border-gray-200');
+    });
+  });
+
+  describe('Icon Styling', () => {
+    it('applies primary text color for primary variant', () => {
+      renderIcon({ variant: 'primary', icon: User03 });
+
+      const svg = screen.getByTestId('icon-container').querySelector('svg');
+      expect(svg).toHaveClass('text-primary');
+    });
+
+    it('applies gray text color for secondary variant', () => {
+      renderIcon({ variant: 'secondary', icon: User03 });
+
+      const svg = screen.getByTestId('icon-container').querySelector('svg');
+      expect(svg).toHaveClass('text-gray-700');
+    });
+
+    it('applies gray text color for outline variant', () => {
+      renderIcon({ variant: 'outline', icon: User03 });
+
+      const svg = screen.getByTestId('icon-container').querySelector('svg');
+      expect(svg).toHaveClass('text-gray-700');
+    });
+
+    it('applies correct size class to icon', () => {
+      renderIcon({ size: 'large', icon: User03 });
+
+      const svg = screen.getByTestId('icon-container').querySelector('svg');
+      expect(svg).toHaveClass('size-8');
+    });
+  });
+
+  describe('Spiral Effect', () => {
+    it('does not render spiral circles by default', () => {
+      renderIcon();
+
+      const container = screen.getByTestId('icon-container');
+      const spiralBox = container.querySelector('.absolute.inset-0');
+
+      expect(spiralBox).not.toBeInTheDocument();
+    });
+
+    it('does not render spiral circles when hasSpiralEffect is false', () => {
+      renderIcon({ hasSpiralEffect: false });
+
+      const container = screen.getByTestId('icon-container');
+      const spiralBox = container.querySelector('.absolute.inset-0');
+
+      expect(spiralBox).not.toBeInTheDocument();
+    });
+
+    it('renders spiral circles when hasSpiralEffect is true', () => {
+      renderIcon({ hasSpiralEffect: true });
+
+      const container = screen.getByTestId('icon-container');
+      const spiralBox = container.querySelector('.absolute.inset-0');
+      const circles = container.querySelectorAll('.border.border-gray-200.rounded-full');
+
+      expect(spiralBox).toBeInTheDocument();
+      expect(circles).toHaveLength(7); // SPIRAL_CONFIG.CIRCLE_COUNT
+    });
+
+    it('applies correct styles to spiral circles', () => {
+      renderIcon({ hasSpiralEffect: true });
+
+      const container = screen.getByTestId('icon-container');
+      const circles = container.querySelectorAll('.border.border-gray-200.rounded-full');
+
+      circles.forEach((circle, index) => {
+        const style = window.getComputedStyle(circle);
+        expect(style.top).toBe('50%');
+        expect(style.left).toBe('50%');
+        expect(style.transform).toBe('translate(-50%, -50%)');
+
+        const { animationDelay } = (circle as HTMLElement).style;
+        expect(animationDelay).toBe(`${index * 0.1}s`);
+      });
+    });
+
+    it('calculates spiral circle sizes and opacities correctly', () => {
+      renderIcon({ hasSpiralEffect: true });
+
+      const container = screen.getByTestId('icon-container');
+      const circles = container.querySelectorAll('.border.border-gray-200.rounded-full');
+
+      circles.forEach((circle, index) => {
+        const expectedSize = 100 + index * 100;
+        const expectedOpacity = Math.max(0, 1 - index * 0.2);
+
+        const { style } = (circle as HTMLElement);
+        expect(style.width).toBe(`${expectedSize}px`);
+        expect(style.height).toBe(`${expectedSize}px`);
+        expect(parseFloat(style.opacity)).toBeCloseTo(expectedOpacity, 1);
+      });
+    });
+  });
+
+  describe('Container Classes', () => {
+    it('applies base container classes', () => {
+      renderIcon();
+
+      const container = screen.getByTestId('icon-container');
+      expect(container).toHaveClass('relative', 'flex', 'justify-center', 'items-center');
+    });
+
+    it('combines custom className with base classes', () => {
+      renderIcon({ className: 'custom-class' });
+
+      const container = screen.getByTestId('icon-container');
+      expect(container).toHaveClass('relative', 'flex', 'justify-center', 'items-center', 'custom-class');
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('has correct component display name', () => {
+      expect(Icon.displayName).toBe('Icon');
+    });
+
+    it('is memoized', () => {
+      const props1 = { icon: MockIcon };
+      const props2 = { icon: MockIcon };
+
+      const { rerender } = render(<Icon {...props1} />);
+      const component1 = Icon;
+
+      rerender(<Icon {...props2} />);
+      const component2 = Icon;
+
+      expect(component1).toBe(component2);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('maintains proper structure for screen readers', () => {
+      renderIcon({ 'icon': User03, 'aria-label': 'User profile' });
+
+      const container = screen.getByTestId('icon-container');
+      const svg = container.querySelector('svg');
+
+      expect(container).toHaveAttribute('aria-label', 'User profile');
+      expect(svg).toBeInTheDocument();
+    });
+  });
+
+  describe('Snapshots', () => {
+    it('matches snapshot with default props', () => {
+      const { container } = renderIcon();
+      expect(container).toMatchSnapshot();
+    });
+
+    it('matches snapshot with spiral effect', () => {
+      const { container } = renderIcon({ hasSpiralEffect: true });
+      expect(container).toMatchSnapshot();
+    });
+
+    it('matches snapshot with all variants', () => {
+      const variants: Array<IconProps['variant']> = [ 'primary', 'secondary', 'outline' ];
+
+      variants.forEach(variant => {
+        const { container } = renderIcon({ variant });
+        expect(container).toMatchSnapshot(`variant-${variant}`);
+      });
+    });
+  });
+});