@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/Typography/typography.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/utils';
+
+const typographyVariants = cva('', {
+  variants: {
+    variant: {
+      h1: 'text-5xl font-semibold leading-tight tracking-normal',
+      h2: 'text-4xl font-semibold leading-[1.3] tracking-normal',
+      h3: 'text-3xl font-semibold leading-snug tracking-normal',
+      h4: 'text-2xl font-semibold leading-snug tracking-normal',
+      h5: 'text-xl font-semibold leading-snug tracking-normal',
+      h6: 'text-base font-semibold leading-relaxed tracking-normal',
+      lead: 'text-xl font-normal leading-relaxed',
+      paragraph: 'text-base font-light leading-relaxed',
+      small: 'text-sm font-light leading-normal',
+    },
+  },
+  defaultVariants: {
+    variant: 'paragraph',
+  },
+});
+
+type TypographyProps = {
+  as?: React.ElementType;
+  className?: string;
+  children: React.ReactNode;
+} & VariantProps<typeof typographyVariants> &
+  Omit<React.ComponentPropsWithoutRef<'span'>, 'as'>;
+
+function getDefaultTag (
+  variant: TypographyProps['variant']
+): keyof React.JSX.IntrinsicElements {
+  if (!variant) return 'span';
+
+  if (variant.startsWith('h')) return variant as keyof React.JSX.IntrinsicElements;
+
+  if (variant === 'lead' || variant === 'paragraph') return 'p';
+
+  return 'span';
+}
+
+export const Typography: React.FC<TypographyProps> = ({
+  as,
+  variant = 'paragraph',
+  className,
+  children,
+  ...rest
+}) => {
+  const Tag = as ?? getDefaultTag(variant);
+
+  return (
+    <Tag
+      data-slot="typography"
+      className={cn(typographyVariants({ variant }), className)}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+};

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

@@ -0,0 +1 @@
+export * from './upload-image-field';

package/src/components/atoms/UploadImageField/upload-image-field.stories.tsx

@@ -0,0 +1,249 @@
+import { useState } from 'react';
+
+import { UploadImageField } from './upload-image-field';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof UploadImageField> = {
+  title: 'Components/Data Entry/UploadImageField',
+  component: UploadImageField,
+  tags: [ 'autodocs' ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'UploadImageField is a specialized image upload component with drag & drop support, full-container image preview, validation and loading states. When an image is selected, it fills the entire container and shows a hover button for replacement.',
+      },
+    },
+  },
+  argTypes: {
+    buttonText: { control: 'text' },
+    maxSize: { control: 'number' },
+    loading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    error: { control: 'text' },
+    accept: { control: 'text' },
+    helperText: { control: 'text' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CustomButtonText: Story = {
+  args: {
+    buttonText: 'Choose image',
+    maxSize: 10,
+  },
+};
+
+export const Default: Story = {
+  args: {
+    buttonText: 'Select image',
+    maxSize: 5,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    buttonText: 'Select image',
+    maxSize: 5,
+    disabled: true,
+    helperText: 'This field is temporarily unavailable',
+  },
+};
+
+export const DragAndDropExample: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="h-64">
+        <UploadImageField
+          buttonText="Select image"
+          maxSize={5}
+          helperText="Drag and drop an image here or click to select"
+        />
+      </div>
+
+      <div className="text-sm text-gray-500">
+        <p>• Drag images directly to the area</p>
+        <p>• Click the button to open the file picker</p>
+        <p>• Accepted formats: JPG, PNG, GIF, WebP</p>
+        <p>• Maximum size: 5MB</p>
+      </div>
+    </div>
+  ),
+};
+
+export const HoverPreviewExample: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="h-64">
+        <UploadImageField
+          buttonText="Choose image"
+          maxSize={5}
+          helperText="Select an image to see full-screen preview"
+        />
+      </div>
+
+      <div className="text-sm text-gray-500">
+        <p>• Select an image to see full-screen preview</p>
+        <p>• Hover over the image to see the "Choose image" button</p>
+        <p>• Image gets opacity and blur on hover</p>
+        <p>• Click the button to select a new image</p>
+      </div>
+    </div>
+  ),
+};
+
+export const InteractiveExample: Story = {
+  render: () => <InteractiveExampleComponent />,
+};
+
+function InteractiveExampleComponent() {
+  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">
+      <UploadImageField
+        buttonText="Choose image"
+        maxSize={5}
+        onFileSelect={handleFileSelect}
+        onError={handleError}
+        loading={loading}
+        error={error}
+        helperText="Drag and drop or click to select an image"
+      />
+
+      {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 Loading: Story = {
+  args: {
+    buttonText: 'Select image',
+    maxSize: 5,
+    loading: true,
+    helperText: 'Please wait while the image is being processed',
+  },
+};
+
+export const MultipleVariants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="h-48">
+          <UploadImageField
+            buttonText="Select image"
+            maxSize={5}
+          />
+        </div>
+
+        <div className="h-48">
+          <UploadImageField
+            buttonText="Choose image"
+            maxSize={10}
+            helperText="Larger size allowed"
+          />
+        </div>
+
+        <div className="h-48">
+          <UploadImageField
+            buttonText="Select image"
+            maxSize={1}
+            error="File too large"
+          />
+        </div>
+
+        <div className="h-48">
+          <UploadImageField
+            buttonText="Select image"
+            maxSize={5}
+            loading={true}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+function WithUploadFunctionComponent() {
+  const [ uploadedUrl, setUploadedUrl ] = useState<string>('');
+
+  const mockUploadFunction = async (file: File): Promise<string> => {
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    return `https://example.com/uploads/${file.name}`;
+  };
+
+  const handleUploadComplete = (url: string) => {
+    setUploadedUrl(url);
+  };
+
+  return (
+    <div className="space-y-4">
+      <UploadImageField
+        buttonText="Upload image"
+        maxSize={5}
+        uploadFunction={mockUploadFunction}
+        onUploadComplete={handleUploadComplete}
+        helperText="Image will be uploaded automatically"
+      />
+
+      {uploadedUrl && (
+        <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
+          <h4 className="font-medium text-green-900 mb-2">Upload completed!</h4>
+          <p className="text-sm text-green-700">
+            URL: {uploadedUrl}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const WithError: Story = {
+  args: {
+    buttonText: 'Select image',
+    maxSize: 5,
+    error: 'File too large. Maximum size: 5MB',
+  },
+};
+
+export const WithHelperText: Story = {
+  args: {
+    buttonText: 'Select image',
+    maxSize: 5,
+    helperText: 'We recommend images with 16:9 aspect ratio',
+  },
+};
+
+export const WithUploadFunction: Story = {
+  render: () => <WithUploadFunctionComponent />,
+};

package/src/components/atoms/UploadImageField/upload-image-field.test.tsx

@@ -0,0 +1,348 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+import { UploadImageField } from './upload-image-field';
+
+// Mock URL.createObjectURL and URL.revokeObjectURL
+const mockCreateObjectURL = vi.fn(() => 'mock-url');
+const mockRevokeObjectURL = vi.fn();
+
+Object.defineProperty(global, 'URL', {
+  value: {
+    createObjectURL: mockCreateObjectURL,
+    revokeObjectURL: mockRevokeObjectURL,
+  },
+  writable: true,
+});
+
+describe('UploadImageField', () => {
+  const mockFile = new File([ 'test content' ], 'test.jpg', { type: 'image/jpeg' });
+  const mockLargeFile = new File([ 'x'.repeat(6 * 1024 * 1024) ], 'large.jpg', { type: 'image/jpeg' });
+  const mockInvalidFile = new File([ 'test content' ], 'test.txt', { type: 'text/plain' });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockCreateObjectURL.mockReturnValue('mock-url');
+  });
+
+  it('renders with default props', () => {
+    render(<UploadImageField />);
+
+    expect(screen.getByText('Select image')).toBeInTheDocument();
+  });
+
+  it('renders with custom button text', () => {
+    render(<UploadImageField buttonText="Custom Button" />);
+
+    expect(screen.getByText('Custom Button')).toBeInTheDocument();
+  });
+
+  it('handles file selection via click', async () => {
+    const user = userEvent.setup();
+    const onFileSelect = vi.fn();
+
+    render(<UploadImageField onFileSelect={onFileSelect} />);
+
+    const button = screen.getByText('Select image');
+    await user.click(button);
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+    expect(input).toHaveAttribute('type', 'file');
+  });
+
+  it('handles file selection via input change', async () => {
+    const onFileSelect = vi.fn();
+
+    render(<UploadImageField onFileSelect={onFileSelect} />);
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [ mockFile ] } });
+
+    await waitFor(() => {
+      expect(onFileSelect).toHaveBeenCalledWith(mockFile, undefined);
+    });
+  });
+
+  it('validates file size when maxSize is provided', async () => {
+    const onError = vi.fn();
+
+    render(<UploadImageField maxSize={5} onError={onError} />);
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [ mockLargeFile ] } });
+
+    await waitFor(() => {
+      expect(onError).toHaveBeenCalledWith('Arquivo muito grande. Tamanho máximo: 5MB');
+    });
+  });
+
+  it('validates file type when accept is provided', async () => {
+    const onError = vi.fn();
+
+    render(<UploadImageField accept="image/*" onError={onError} />);
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [ mockInvalidFile ] } });
+
+    await waitFor(() => {
+      expect(onError).toHaveBeenCalledWith('Tipo de arquivo não suportado. Tipos aceitos: image/*');
+    });
+  });
+
+  it('shows error message when error prop is provided', () => {
+    const errorMessage = 'Test error message';
+    render(<UploadImageField error={errorMessage} />);
+
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+
+  it('shows loading state when loading prop is true', () => {
+    render(<UploadImageField loading={true} />);
+
+    expect(screen.getByText('Select image')).toBeInTheDocument();
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<UploadImageField disabled={true} />);
+
+    const button = screen.getByText('Select image');
+    expect(button).toBeDisabled();
+  });
+
+  it('handles drag and drop events', async () => {
+    const onFileSelect = vi.fn();
+
+    render(<UploadImageField onFileSelect={onFileSelect} />);
+
+    const container = screen.getByText('Select image').closest('div')?.parentElement;
+
+    fireEvent.dragOver(container!);
+    fireEvent.drop(container!, { dataTransfer: { files: [ mockFile ] } });
+
+    await waitFor(() => {
+      expect(onFileSelect).toHaveBeenCalledWith(mockFile, undefined);
+    });
+  });
+
+  it('shows image preview when image is selected', async () => {
+    const onFileSelect = vi.fn();
+
+    render(<UploadImageField onFileSelect={onFileSelect} />);
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [ mockFile ] } });
+
+    await waitFor(() => {
+      const image = screen.getByAltText('Image preview');
+      expect(image).toBeInTheDocument();
+    });
+  });
+
+  it('shows uploaded file when value is URL string', () => {
+    render(<UploadImageField value="https://example.com/image.jpg" />);
+
+    const image = screen.getByAltText('Image preview');
+    expect(image).toHaveAttribute('src', 'https://example.com/image.jpg');
+  });
+
+  it('calls onChange when file is selected', async () => {
+    const onChange = vi.fn();
+
+    render(<UploadImageField onChange={onChange} />);
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [ mockFile ] } });
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenCalledWith(mockFile);
+    });
+  });
+
+  it('calls onUploadComplete when upload is successful', async () => {
+    const onUploadComplete = vi.fn();
+    const mockUploadFunction = vi.fn().mockResolvedValue('https://example.com/uploaded.jpg');
+
+    render(
+      <UploadImageField
+        uploadFunction={mockUploadFunction}
+        onUploadComplete={onUploadComplete}
+      />
+    );
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [ mockFile ] } });
+
+    await waitFor(() => {
+      expect(mockUploadFunction).toHaveBeenCalledWith(mockFile);
+    });
+
+    await waitFor(() => {
+      expect(onUploadComplete).toHaveBeenCalledWith('https://example.com/uploaded.jpg');
+    });
+  });
+
+  it('calls onError when upload fails', async () => {
+    const onError = vi.fn();
+    const mockUploadFunction = vi.fn().mockRejectedValue(new Error('Upload failed'));
+
+    render(
+      <UploadImageField
+        uploadFunction={mockUploadFunction}
+        onError={onError}
+      />
+    );
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [ mockFile ] } });
+
+    await waitFor(() => {
+      expect(onError).toHaveBeenCalledWith('Upload failed');
+    });
+  });
+
+  it('shows helper text when provided', () => {
+    const helperText = 'We recommend images with 16:9 aspect ratio';
+    render(<UploadImageField helperText={helperText} />);
+
+    expect(screen.getByText(helperText)).toBeInTheDocument();
+  });
+
+  it('does not show helper text when error is present', () => {
+    const helperText = 'We recommend images with 16:9 aspect ratio';
+    render(<UploadImageField helperText={helperText} error="Test error" />);
+
+    expect(screen.queryByText(helperText)).not.toBeInTheDocument();
+  });
+
+  it('handles file deselection', async () => {
+    const onFileSelect = vi.fn();
+
+    render(<UploadImageField onFileSelect={onFileSelect} />);
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [ mockFile ] } });
+
+    await waitFor(() => {
+      expect(onFileSelect).toHaveBeenCalledWith(mockFile, undefined);
+    });
+
+    fireEvent.change(input, { target: { files: [] } });
+
+    await waitFor(() => {
+      expect(onFileSelect).toHaveBeenCalledWith(null);
+    });
+  });
+
+  it('prevents file selection when disabled', async () => {
+    const onFileSelect = vi.fn();
+
+    render(<UploadImageField disabled={true} onFileSelect={onFileSelect} />);
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [ mockFile ] } });
+
+    expect(onFileSelect).not.toHaveBeenCalled();
+  });
+
+  it('prevents file selection when loading', async () => {
+    const onFileSelect = vi.fn();
+
+    render(<UploadImageField loading={true} onFileSelect={onFileSelect} />);
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [ mockFile ] } });
+
+    expect(onFileSelect).not.toHaveBeenCalled();
+  });
+
+  it('shows full container image preview when image is selected', async () => {
+    const onFileSelect = vi.fn();
+
+    render(<UploadImageField onFileSelect={onFileSelect} />);
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [ mockFile ] } });
+
+    await waitFor(() => {
+      const image = screen.getByAltText('Image preview');
+      expect(image).toHaveClass('w-full', 'h-full', 'object-cover');
+    });
+  });
+
+  it('shows hover button when image is previewed', async () => {
+    const onFileSelect = vi.fn();
+
+    render(<UploadImageField onFileSelect={onFileSelect} />);
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [ mockFile ] } });
+
+    await waitFor(() => {
+      const container = screen.getByAltText('Image preview').closest('div');
+      fireEvent.mouseEnter(container!);
+
+      expect(screen.getByText('Select image')).toBeInTheDocument();
+    });
+  });
+
+  it('applies drag over styles', () => {
+    render(<UploadImageField />);
+
+    const container = screen.getByText('Select image').closest('div')?.parentElement;
+
+    fireEvent.dragOver(container!);
+
+    expect(container).toHaveClass('border-primary', 'bg-brand-50');
+  });
+
+  it('applies error styles when error is present', () => {
+    render(<UploadImageField error="Test error" />);
+
+    const container = screen.getByText('Select image').closest('div')?.parentElement;
+
+    expect(container).toHaveClass('border-error-500');
+  });
+
+  it('applies disabled styles when disabled', () => {
+    render(<UploadImageField disabled={true} />);
+
+    const container = screen.getByText('Select image').closest('div')?.parentElement;
+
+    expect(container).toHaveClass('opacity-50', 'cursor-not-allowed');
+  });
+
+  it('has default accept prop set to image/*', () => {
+    render(<UploadImageField />);
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    expect(input).toHaveAttribute('accept', 'image/*');
+  });
+
+  it('has default maxSize prop set to 5', async () => {
+    const onError = vi.fn();
+
+    render(<UploadImageField onError={onError} />);
+
+    const input = screen.getByDisplayValue('') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { files: [ mockLargeFile ] } });
+
+    await waitFor(() => {
+      expect(onError).toHaveBeenCalledWith('Arquivo muito grande. Tamanho máximo: 5MB');
+    });
+  });
+});