@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/Badge/badge.stories.tsx

@@ -0,0 +1,80 @@
+import { Badge, badgeVariants } from './badge';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Components/General/Badge',
+  component: Badge,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Displays a badge or a component that looks like a badge.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [ 'default', 'secondary', 'destructive', 'outline' ],
+      description: 'Visual style of the badge',
+      table: {
+        type: { summary: 'default | secondary | destructive | outline' },
+        defaultValue: { summary: 'default' },
+      },
+    },
+    children: {
+      control: 'text',
+      description: 'Content of the badge',
+    },
+    asChild: {
+      control: false,
+      description: 'Uses Slot to render as another element',
+    },
+  },
+  args: {
+    variant: 'default',
+    children: 'Badge',
+    asChild: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const CustomLink: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'You can use the badgeVariants helper to create a link that looks like a badge.',
+      },
+    },
+  },
+  render: () => (
+    <a className={badgeVariants({ variant: 'outline' })}>Badge</a>
+  ),
+};
+
+export const Default: Story = {};
+
+export const Destructive: Story = {
+  args: {
+    variant: 'destructive',
+    children: 'Destructive',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    children: 'Outline',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Secondary',
+  },
+};
+

package/src/components/atoms/Badge/badge.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+
+import { Badge } from './badge';
+
+describe('<Badge />', () => {
+  it('renders with default variant', () => {
+    render(<Badge>Default Badge</Badge>);
+    const badge = screen.getByText('Default Badge');
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveAttribute('data-slot', 'badge');
+    expect(badge.className).toMatch(/bg-primary/);
+  });
+
+  it('renders with secondary variant', () => {
+    render(<Badge variant="secondary">Secondary Badge</Badge>);
+    const badge = screen.getByText('Secondary Badge');
+    expect(badge.className).toMatch(/bg-secondary/);
+  });
+
+  it('renders with destructive variant', () => {
+    render(<Badge variant="destructive">Destructive Badge</Badge>);
+    const badge = screen.getByText('Destructive Badge');
+    expect(badge.className).toMatch(/bg-destructive/);
+  });
+
+  it('renders with outline variant', () => {
+    render(<Badge variant="outline">Outline Badge</Badge>);
+    const badge = screen.getByText('Outline Badge');
+    expect(badge.className).toMatch(/text-foreground/);
+  });
+
+  it('accepts and merges custom className', () => {
+    render(<Badge className="custom-class">Custom Class</Badge>);
+    const badge = screen.getByText('Custom Class');
+    expect(badge.className).toMatch(/custom-class/);
+  });
+
+  it('renders using Slot when asChild is true', () => {
+    render(
+      <Badge asChild>
+        <button>Slot Button</button>
+      </Badge>
+    );
+    const slot = screen.getByText('Slot Button');
+    expect(slot.tagName).toBe('BUTTON');
+    expect(slot).toHaveAttribute('data-slot', 'badge');
+  });
+
+  it('renders children correctly', () => {
+    render(<Badge>Test Badge</Badge>);
+    expect(screen.getByText('Test Badge')).toBeInTheDocument();
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Badge>Default Badge</Badge>);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Badge/badge.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable react-refresh/only-export-components */
+import * as React from 'react';
+
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+function Badge ({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span';
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

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

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

package/src/components/atoms/Box/box.stories.tsx

@@ -0,0 +1,37 @@
+import { Box } from './box';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Box> = {
+  title: 'Components/Layout/Box',
+  component: Box,
+  tags: [ 'autodocs' ],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional Tailwind classes for styling',
+    },
+    children: {
+      control: false,
+      description: 'Internal content of the Box',
+    },
+  },
+  args: {
+    className: 'gap-4 p-4 bg-gray-100 rounded-md',
+    children: 'This is a Box',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Box is a generic container based on `<div>` with flexible layout. It accepts any `className` for customization.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Box>;
+
+export const Default: Story = {};
+

package/src/components/atoms/Box/box.test.tsx

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

package/src/components/atoms/Box/box.tsx

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

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

@@ -0,0 +1 @@
+export { Box } from './box';

package/src/components/atoms/Button/button.stories.tsx

@@ -0,0 +1,108 @@
+import { VariantProps } from 'class-variance-authority';
+import { Plus, Trash2 } from 'lucide-react';
+
+import { Button, buttonVariants } from './button';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/General/Button',
+  component: Button,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'Displays a button or a component that looks like a button.',
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [ 'default', 'outline', 'ghost', 'link' ],
+      description: 'Visual style of the button',
+      table: {
+        type: { summary: 'default | outline | ghost | link' },
+        defaultValue: { summary: 'default' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: [ 'default', 'sm', 'lg', 'icon' ],
+      description: 'Button size',
+      table: {
+        type: { summary: 'default | sm | lg | icon' },
+        defaultValue: { summary: 'default' },
+      },
+    },
+    children: {
+      control: 'text',
+      description: 'Button content',
+    },
+    onClick: { action: 'clicked' },
+    asChild: {
+      control: 'boolean',
+      description: 'Uses Slot to render as another element',
+    },
+  },
+  args: {
+    variant: 'primary',
+    size: 'md',
+    asChild: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: 'Click me',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+    disabled: false,
+  },
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+      {[ 'sm', 'md', 'lg', 'icon' ].map((size) => (
+        <Button key={size} {...args} size={size as VariantProps<typeof buttonVariants>['size']}>
+          {size === 'icon' ? <Plus /> : `Size: ${size}`}
+        </Button>
+      ))}
+    </div>
+  ),
+};
+
+export const Variants: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+      {[ 'primary', 'outline', 'ghost', 'link', 'error', 'success' ].map((variant) => (
+        <Button key={variant} {...args} variant={variant as VariantProps<typeof buttonVariants>['variant']}>
+          {variant}
+        </Button>
+      ))}
+      {[ 'google', 'linkedin', 'apple' ].map((variant) => (
+        <Button key={variant} {...args} variant={variant as VariantProps<typeof buttonVariants>['variant']}/>
+      ))}
+    </div>
+  ),
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <Trash2 />
+        Delete
+      </>
+    ),
+    variant: 'primary',
+  },
+};

package/src/components/atoms/Button/button.test.tsx

@@ -0,0 +1,54 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import * as stories from './button.stories';
+
+const { Default } = composeStories(stories);
+
+const renderDefaultButton = (props = {}) => render(<Default {...props} />);
+
+describe('<Button />', () => {
+  it('renders correctly with default props', () => {
+    renderDefaultButton();
+    const button = screen.getByTestId('button');
+
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Click me');
+  });
+
+  it('renders with custom className', () => {
+    renderDefaultButton({ className: 'rounded-full' });
+    const button = screen.getByTestId('button');
+
+    expect(button).toHaveClass('rounded-full');
+  });
+
+  it('renders children properly', () => {
+    renderDefaultButton({ children: <span>Nested Content</span> });
+    expect(screen.getByText('Nested Content')).toBeInTheDocument();
+  });
+
+  it('handles click events', async () => {
+    const handleClick = vi.fn();
+    renderDefaultButton({ onClick: handleClick });
+
+    await userEvent.click(screen.getByTestId('button'));
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('is disabled when the disabled prop is passed', () => {
+    renderDefaultButton({ disabled: true });
+    const button = screen.getByTestId('button');
+
+    expect(button).toBeDisabled();
+    expect(button).toHaveClass('disabled:pointer-events-none');
+  });
+
+  it('should match snapshot', () => {
+    const { container } = renderDefaultButton();
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Button/button.tsx

@@ -0,0 +1,96 @@
+/* eslint-disable react-refresh/only-export-components */
+import * as React from 'react';
+
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+
+import { LinkedinLogo, AppleLogo, Google } from '@/components/icons';
+
+import { RenderCondition } from '../RenderCondition';
+
+import { cn } from '@/utils';
+
+const buttonVariants = cva(
+  'cursor-pointer inline-flex items-center justify-center gap-1 whitespace-nowrap font-medium leading-none h-fit transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 aria-invalid:border-destructive',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-primary text-white hover:bg-primary/90 focus-visible-primary',
+        outline:
+          'border bg-white focus-visible-primary text-gray-700 hover:bg-gray-50',
+        ghost: 'hover:bg-accent hover:text-accent-foreground focus-visible:ring-primary focus-visible:ring-[2px]',
+        link: 'text-primary underline-offset-4 hover:underline focus-visible:border-ring focus-visible:ring-primary focus-visible:ring-[2px]',
+        google: 'bg-white text-gray-800 hover:bg-gray-50 min-w-[112px] border border-gray-300 focus-visible-primary',
+        linkedin: 'bg-[#0077B5] text-white hover:bg-[#0077B5]/90 min-w-[112px] focus-visible-primary',
+        apple: 'bg-black text-white hover:bg-black/90 min-w-[112px] focus-visible-primary',
+        error: 'bg-error-600 text-white hover:bg-error-600/90 min-w-[112px] focus-visible-primary',
+        success: 'bg-success-600 text-white hover:bg-success-600/90 min-w-[112px] focus-visible-primary',
+      },
+      size: {
+        sm: 'text-sm gap-1.5 px-3 py-2 rounded-2xl h-10',
+        md: 'text-base px-[14px] py-[10px] rounded-2xl',
+        lg: 'text-base px-4 py-[10px] rounded-2xl',
+        icon: 'min-w-10 h-10 rounded-full p-[10px]',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+    },
+  }
+);
+
+const ICON_SIZE_CLASSES = {
+  sm: 'size-5',
+  md: 'size-5',
+  lg: 'size-6',
+  icon: 'size-5',
+} as const;
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  isLoading = false,
+  disabled = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    isLoading?: boolean;
+    disabled?: boolean;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="button"
+      data-testid="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      disabled={isLoading || disabled}
+      {...props}
+    >
+      <RenderCondition condition={isLoading}>
+        <Loader2 className={cn('animate-spin', ICON_SIZE_CLASSES[size as keyof typeof ICON_SIZE_CLASSES])} />
+      </RenderCondition>
+
+      <RenderCondition condition={variant === 'google'}>
+        <Google className='size-6' />
+      </RenderCondition>
+
+      <RenderCondition condition={variant === 'linkedin'}>
+        <LinkedinLogo className='size-6' />
+      </RenderCondition>
+
+      <RenderCondition condition={variant === 'apple'}>
+        <AppleLogo className='size-6' />
+      </RenderCondition>
+
+      {props.children}
+    </Comp>
+  );
+}
+
+export { Button, buttonVariants };

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

@@ -0,0 +1 @@
+export { Button, buttonVariants } from './button';

package/src/components/atoms/ButtonUpload/button-upload.stories.tsx

@@ -0,0 +1,137 @@
+import { useState } from 'react';
+
+import { ButtonUpload, ButtonUploadProps } from './button-upload';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ButtonUpload> = {
+  title: 'Components/Data Entry/ButtonUpload',
+  component: ButtonUpload,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'ButtonUpload is a versatile component for file uploads with drag & drop support, validation and loading states.',
+      },
+    },
+  },
+  argTypes: {
+    buttonText: { control: 'text' },
+    maxSize: { control: 'number' },
+    label: { control: 'text' },
+    helperText: { control: 'text' },
+    loading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    error: { control: 'text' },
+    accept: { control: 'text' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CustomButtonText: Story = {
+  args: {
+    accept: '.csv,.xlsx',
+    maxSize: 20,
+    label: 'Data Spreadsheet',
+    buttonText: 'Choose File',
+    helperText: 'Import data from an Excel or CSV spreadsheet',
+  },
+};
+
+export const Default: Story = {
+  args: {
+    accept: '.jpg,.jpeg,.png,.pdf',
+    maxSize: 10,
+    label: 'File Upload',
+    helperText: 'Drag and drop a file or click to select',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    accept: 'image/*',
+    maxSize: 10,
+    label: 'Upload Disabled',
+    disabled: true,
+    helperText: 'This field is temporarily unavailable',
+  },
+};
+
+function InteractiveExampleComponent(args: ButtonUploadProps) {
+  const [ file, setFile ] = useState<File | null>(null);
+  const [ error, setError ] = useState<string>('');
+  const [ loading, setLoading ] = useState(false);
+
+  const handleFileSelect = (selectedFile: File | null) => {
+    setFile(selectedFile);
+    setError('');
+
+    if (selectedFile) {
+      setLoading(true);
+      setTimeout(() => {
+        setLoading(false);
+      }, 2000);
+    }
+  };
+
+  const handleError = (errorMessage: string) => {
+    setError(errorMessage);
+  };
+
+  return (
+    <div className="space-y-4 w-[500px]">
+      <ButtonUpload
+        label="Interactive Example"
+        accept="image/*,.pdf"
+        maxSize={5}
+        buttonText="Choose File"
+        helperText="Drag and drop or click to select"
+        onFileSelect={handleFileSelect}
+        onError={handleError}
+        loading={loading}
+        error={error}
+        {...args}
+      />
+
+      {file && (
+        <div className="p-4 bg-gray-50 rounded-lg">
+          <h4 className="font-medium text-gray-900 mb-2">Selected File:</h4>
+          <p className="text-sm text-gray-600">
+            Name: {file.name}<br />
+            Size: {(file.size / 1024 / 1024).toFixed(2)} MB<br />
+            Type: {file.type}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const InteractiveExample: Story = {
+  render: (args) => <InteractiveExampleComponent {...args} />,
+};
+
+export const Loading: Story = {
+  args: {
+    placeholder: 'Uploading...',
+    accept: 'image/*',
+    maxSize: 10,
+    label: 'Upload in Progress',
+    loading: true,
+    helperText: 'Please wait while the file is being processed',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    placeholder: 'Select a file',
+    accept: '.pdf,.doc,.docx',
+    maxSize: 5,
+    label: 'Document',
+    error: 'File too large. Maximum size: 5MB',
+  },
+};
+