@brcarddev/frontend-commons 1.0.2

package/src/components/molecules/PDFViewer/index.ts

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

package/src/components/molecules/PDFViewer/pdf-viewer.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { PDFViewer } from './pdf-viewer';
+
+const meta: Meta<typeof PDFViewer> = {
+  title: 'Components/Data Display/PDFViewer',
+  component: PDFViewer,
+  tags: [ 'autodocs' ],
+  argTypes: {
+    fileUrl: {
+      control: 'text',
+      description: 'The URL of the PDF file to display',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'The PDFViewer component displays a PDF file.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PDFViewer>;
+
+export const Default: Story = {
+  render: (args) => <div className="w-full h-full p-4 rounded-lg"><PDFViewer {...args} /></div>,
+  args: {
+    fileUrl: '/pdf-example.pdf',
+    fileTitle: 'PDF Example',
+  },
+};

package/src/components/molecules/PDFViewer/pdf-viewer.test.tsx

@@ -0,0 +1,26 @@
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './pdf-viewer.stories';
+
+const { Default } = composeStories(stories);
+
+describe('<PDFViewer />', () => {
+  it('should render the PDFViewer', () => {
+    render(<Default />);
+
+    expect(screen.getByTestId('pdf-viewer')).toBeInTheDocument();
+  });
+
+  it('should render the PDFViewer with loading state', () => {
+    render(<Default />);
+
+    expect(screen.getByTestId('pdf-viewer-loading')).toBeInTheDocument();
+  });
+
+  it('matches snapshot', () => {
+    const { container } = render(<Default />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/PDFViewer/pdf-viewer.tsx

@@ -0,0 +1,358 @@
+import React, { ChangeEvent, useCallback, useRef, useState } from 'react';
+
+import {
+  FastForward,
+  Maximize2,
+  Minimize2,
+  MoreVertical,
+  Rewind,
+  RotateCw,
+  SkipBack,
+  SkipForward,
+  ZoomIn,
+  ZoomOut,
+} from 'lucide-react';
+import { Document, Page, pdfjs } from 'react-pdf';
+
+import { cn } from '@/utils/cn';
+
+import {
+  Box,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  Flex,
+  Grid,
+  Separator,
+} from '@/components';
+import { MAX_ZOOM, MIN_ZOOM, usePDFNavigation, usePDFZoom } from '@/hooks';
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+
+interface PDFViewerProps {
+  fileUrl: string;
+  fileTitle?: string;
+  className?: string;
+  texts?: {
+    loading?: string;
+    error?: string;
+    loadingPage?: string;
+    page?: string;
+    pages?: string;
+  };
+}
+
+interface PageControlsProps {
+  currentPage: number;
+  totalPages: number | null;
+  onPageChange: (page: number) => void;
+  pagesPerView?: number;
+}
+
+interface ZoomControlsProps {
+  scale: number;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onFitToSize?: () => void;
+  fitMode?: 'width' | 'height';
+  rotation: number;
+  onRotate: () => void;
+}
+
+interface RotationControlsProps {
+  rotation: number;
+  onRotate: () => void;
+}
+
+interface ViewModeMenuProps {
+  pagesPerView: number;
+  onPagesPerViewChange: (pages: number) => void;
+  texts: {
+    page: string;
+    pages: string;
+  };
+}
+
+const PageControls = ({ currentPage, totalPages, onPageChange, pagesPerView = 1 }: PageControlsProps) => {
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages;
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newPage = Number(e.target.value);
+    onPageChange(newPage);
+  };
+
+  const handlePrevious = () => {
+    if (pagesPerView === 2) {
+      // No modo de 2 páginas, volta 2 páginas
+      const newPage = Math.max(1, currentPage - 2);
+      onPageChange(newPage);
+    } else {
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (pagesPerView === 2) {
+      // No modo de 2 páginas, avança 2 páginas
+      const newPage = Math.min(totalPages || 1, currentPage + 2);
+      onPageChange(newPage);
+    } else {
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  return (
+    <Flex className="items-center gap-2">
+      <Button type='button' variant='ghost' size='icon' onClick={() => onPageChange(1)} aria-label="Go to first page" disabled={isFirstPage}>
+        <Rewind className='size-5' />
+      </Button>
+      <Button type='button' variant='ghost' size='icon' onClick={handlePrevious} aria-label="Go to previous page" disabled={isFirstPage}>
+        <SkipBack className='size-5' />
+      </Button>
+      <Flex className="items-center gap-2">
+        <input
+          name="pageNumber"
+          data-testid="pdf-viewer-page-number-input"
+          type="number"
+          min={1}
+          max={totalPages || 1}
+          value={currentPage}
+          onChange={handleInputChange}
+          className="w-16 border px-2 py-1 border-transparent"
+          aria-label="Page number"
+        />
+        <span className="whitespace-nowrap" data-testid="pdf-viewer-page-count">
+          / {totalPages}
+        </span>
+      </Flex>
+
+      <Button type='button' variant='ghost' size='icon' onClick={handleNext} aria-label="Go to next page" disabled={isLastPage} data-testid="pdf-viewer-next-button">
+        <SkipForward className='size-5' />
+      </Button>
+
+      <Button type='button' variant='ghost' size='icon' onClick={() => onPageChange(totalPages || 0)} aria-label="Go to last page" disabled={isLastPage} data-testid="pdf-viewer-last-button">
+        <FastForward className='size-5' />
+      </Button>
+    </Flex>
+  );
+};
+
+const ZoomControls = ({ scale, onZoomIn, onZoomOut, onFitToSize, fitMode = 'width', rotation, onRotate }: ZoomControlsProps) => {
+  const isMinZoom = scale <= MIN_ZOOM;
+  const isMaxZoom = scale >= MAX_ZOOM;
+
+  const fitAriaLabel = fitMode === 'width' ? 'Ajustar à largura' : 'Ajustar à altura';
+  const fitTestId = fitMode === 'width' ? 'pdf-viewer-fit-width-button' : 'pdf-viewer-fit-height-button';
+
+  return (
+    <Flex className="items-center gap-2 justify-center">
+      {onFitToSize && (
+        <Button type='button' variant='ghost' size='icon' onClick={onFitToSize} aria-label={fitAriaLabel} data-testid={fitTestId}>
+          {fitMode === 'width' ? <Maximize2 className='size-5' /> : <Minimize2 className='size-5' />}
+        </Button>
+      )}
+      <Separator orientation="vertical" className="h-7!" />
+      <Button type='button' variant='ghost' size='icon' onClick={onZoomOut} aria-label="Zoom out" disabled={isMinZoom}>
+        <ZoomOut className='size-5' />
+      </Button>
+      <span>{(scale * 100).toFixed()}%</span>
+      <Button type='button' variant='ghost' size='icon' onClick={onZoomIn} aria-label="Zoom in" disabled={isMaxZoom}>
+        <ZoomIn className='size-5' />
+      </Button>
+      <Separator orientation="vertical" className="h-7!" />
+
+      <RotationControls
+        rotation={rotation}
+        onRotate={onRotate}
+      />
+    </Flex>
+  );
+};
+
+const RotationControls = ({ rotation, onRotate }: RotationControlsProps) => {
+  return (
+    <Flex className="items-center gap-2">
+      <Button type='button' variant='ghost' size='icon' onClick={onRotate} aria-label="Rotate PDF" data-testid="pdf-viewer-rotate-button">
+        <RotateCw className='size-5' />
+      </Button>
+      <span className="text-sm">{rotation}°</span>
+    </Flex>
+  );
+};
+
+const ViewModeMenu = ({ pagesPerView, onPagesPerViewChange, texts }: ViewModeMenuProps) => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button type='button' variant='ghost' size='icon' aria-label="View options" data-testid="pdf-viewer-view-menu-button">
+          <MoreVertical className='size-5' />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuRadioGroup
+          value={pagesPerView.toString()}
+          onValueChange={(value) => onPagesPerViewChange(Number(value))}
+        >
+          <DropdownMenuRadioItem value="1">1 {texts.page}</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="2">2 {texts.pages}</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+function PDFViewerComponent({ fileUrl, fileTitle, className, texts = {
+  loading: 'Carregando PDF...',
+  error: 'Falha ao carregar PDF.',
+  loadingPage: 'Carregando página...',
+  page: 'Página',
+  pages: 'Páginas',
+} }: PDFViewerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [ pdfProperties, setPdfProperties ] = useState<{ width: number; height: number } | null>(null);
+
+  const [ numPages, setNumPages ] = useState<number | null>(null);
+  const [ rotation, setRotation ] = useState<number>(0);
+  const [ pagesPerView, setPagesPerView ] = useState<number>(1);
+  const [ fitMode, setFitMode ] = useState<'width' | 'height'>('width');
+
+  const { currentPage, handlePageChange } = usePDFNavigation(numPages);
+  const { scale, zoomIn, zoomOut, setScale } = usePDFZoom();
+
+  const onDocumentLoadSuccess = useCallback(({ numPages }: { numPages: number }) => {
+    setNumPages(numPages);
+  }, []);
+
+  const handleError = useCallback((error: Error) => {
+    console.error(error);
+  }, []);
+
+  const handleRotate = useCallback(() => {
+    setRotation((prevRotation) => (prevRotation + 90) % 360);
+  }, []);
+
+  const handlePagesPerViewChange = useCallback((pages: number) => {
+    setPagesPerView(pages);
+
+    if (pages === 2 && currentPage % 2 === 0 && currentPage > 1) {
+      handlePageChange(currentPage - 1);
+    }
+  }, [ currentPage, handlePageChange ]);
+
+  const handleFitToSize = useCallback(() => {
+    if (!containerRef.current || !pdfProperties?.width || !pdfProperties?.height) return;
+
+    const container = containerRef.current;
+    const containerWidth = container.clientWidth;
+    const padding = 40;
+    const availableWidth = containerWidth - padding;
+
+    let calculatedScale: number;
+
+    if (fitMode === 'width') {
+      const gap = pagesPerView === 2 ? 16 : 0;
+      const targetWidth = pagesPerView === 2
+        ? (availableWidth - gap) / 2
+        : availableWidth;
+      calculatedScale = targetWidth / pdfProperties.width;
+    } else {
+      calculatedScale = 1.0;
+    }
+
+    setScale(calculatedScale);
+
+    setFitMode(fitMode === 'width' ? 'height' : 'width');
+  }, [ pdfProperties, pagesPerView, setScale, fitMode ]);
+
+  const handlePageLoadSuccess = useCallback(({ width, height }: { width: number; height: number }) => {
+    setPdfProperties({ width, height });
+  }, []);
+
+  const controlContainerClassName = cn('w-full items-center bg-white border border-gray-200 p-1 rounded-md', className);
+
+  const getPagesToRender = useCallback(() => {
+    if (pagesPerView === 1) {
+      return [ currentPage ];
+    }
+
+    const firstPage = currentPage % 2 === 0 ? currentPage - 1 : currentPage;
+    const secondPage = firstPage + 1;
+
+    return [ firstPage, secondPage ].filter((page) => page <= (numPages || 0));
+  }, [ currentPage, pagesPerView, numPages ]);
+
+  const pagesToRender = getPagesToRender();
+
+  return (
+    <Box ref={containerRef} className="w-full items-center bg-gray-100 rounded-md" data-testid="pdf-viewer">
+      <Grid className={cn('w-full items-center bg-white border border-gray-200 p-1 rounded-md', className, 'grid-cols-3 gap-4')}>
+        <Flex className="justify-start">
+          <h2 className="text-sm pl-3 font-medium truncate">{fileTitle}</h2>
+        </Flex>
+
+        <ZoomControls
+          scale={scale}
+          onZoomIn={zoomIn}
+          onZoomOut={zoomOut}
+          onFitToSize={handleFitToSize}
+          fitMode={fitMode}
+          rotation={rotation}
+          onRotate={handleRotate}
+        />
+
+        <Flex className="justify-end">
+          <ViewModeMenu
+            pagesPerView={pagesPerView}
+            onPagesPerViewChange={handlePagesPerViewChange}
+            texts={{
+              page: texts.page ?? '',
+              pages: texts.pages ?? '',
+            }}
+          />
+        </Flex>
+      </Grid>
+
+      <Box className={cn('overflow-auto w-full h-[calc(100vh-100px)]')}>
+        <Document
+          file={fileUrl}
+          onLoadSuccess={onDocumentLoadSuccess}
+          onLoadError={handleError}
+          loading={<div className={cn('flex items-center justify-center bg-gray-100 text-gray-700 w-full h-svh')} data-testid="pdf-viewer-loading">{texts.loading}</div>}
+          error={<div className={cn('flex items-center justify-center bg-gray-100 text-gray-700 w-full h-svh')} data-testid="pdf-viewer-error">{texts.error}</div>}
+        >
+          <Flex className={cn('justify-center gap-4', pagesPerView === 2 && 'flex-row')}>
+            {pagesToRender.map((pageNumber) => (
+              <Page
+                key={pageNumber}
+                pageNumber={pageNumber}
+                scale={scale}
+                rotate={rotation}
+                renderAnnotationLayer={false}
+                renderTextLayer={false}
+                onLoadSuccess={handlePageLoadSuccess}
+                loading={<div className={cn('flex items-center justify-center bg-gray-100 text-gray-700 w-full h-svh')}>{texts.loadingPage}</div>}
+              />
+            ))}
+          </Flex>
+        </Document>
+      </Box>
+
+      <Flex className={cn(controlContainerClassName, 'justify-center')}>
+        <PageControls
+          currentPage={currentPage}
+          totalPages={numPages}
+          onPageChange={handlePageChange}
+          pagesPerView={pagesPerView}
+        />
+      </Flex>
+    </Box>
+  );
+}
+
+export const PDFViewer = React.memo(PDFViewerComponent);
+

package/src/components/molecules/Pagination/index.ts

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

package/src/components/molecules/Pagination/pagination.stories.tsx

@@ -0,0 +1,193 @@
+import { useState } from 'react';
+
+import { Pagination } from './pagination';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Pagination> = {
+  title: 'Components/Navigation/Pagination',
+  component: Pagination,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Advanced pagination component with customizable page sizes, accessibility features, and responsive design. Automatically shows first 3 pages, ellipsis, and last 3 pages for large page counts.',
+      },
+    },
+  },
+  argTypes: {
+    pageSizeOptions: {
+      control: 'object',
+      description: 'Array of available page size options',
+    },
+    maxVisiblePages: {
+      control: 'number',
+      description: 'Maximum number of pages to show before adding ellipsis',
+    },
+    showPageSizeSelector: {
+      control: 'boolean',
+      description: 'Whether to show the page size selector',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CustomTexts: Story = {
+  render: () => (
+    <Pagination
+      pageCount={12}
+      pageIndex={5}
+      setPageIndex={() => {}}
+      canPreviousPage={true}
+      canNextPage={true}
+      previousPage={() => {}}
+      nextPage={() => {}}
+      pageSize={25}
+      setPageSize={() => {}}
+      previousPageText="Voltar"
+      nextPageText="Avançar"
+      pageSizeLabel="registros"
+      pageSizeOptions={[ 25, 50, 75, 100 ]}
+    />
+  ),
+};
+
+export const Default: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [ pageIndex, setPageIndex ] = useState(0);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [ pageSize, setPageSize ] = useState(10);
+
+    return (
+      <Pagination
+        pageCount={10}
+        pageIndex={pageIndex}
+        setPageIndex={setPageIndex}
+        canPreviousPage={pageIndex > 0}
+        canNextPage={pageIndex < 9}
+        previousPage={() => setPageIndex(pageIndex - 1)}
+        nextPage={() => setPageIndex(pageIndex + 1)}
+        pageSize={pageSize}
+        setPageSize={setPageSize}
+      />
+    ); },
+};
+
+export const FewPages: Story = {
+  render: () => (
+    <Pagination
+      pageCount={5}
+      pageIndex={2}
+      setPageIndex={() => {}}
+      canPreviousPage={true}
+      canNextPage={true}
+      previousPage={() => {}}
+      nextPage={() => {}}
+      pageSize={10}
+      setPageSize={() => {}}
+    />
+  ),
+};
+
+export const FirstPage: Story = {
+  render: () => (
+    <Pagination
+      pageCount={20}
+      pageIndex={0}
+      setPageIndex={() => {}}
+      canPreviousPage={false}
+      canNextPage={true}
+      previousPage={() => {}}
+      nextPage={() => {}}
+      pageSize={10}
+      setPageSize={() => {}}
+    />
+  ),
+};
+
+export const LastPage: Story = {
+  render: () => (
+    <Pagination
+      pageCount={20}
+      pageIndex={19}
+      setPageIndex={() => {}}
+      canPreviousPage={true}
+      canNextPage={false}
+      previousPage={() => {}}
+      nextPage={() => {}}
+      pageSize={10}
+      setPageSize={() => {}}
+    />
+  ),
+};
+
+export const ManyPages: Story = {
+  render: () => (
+    <Pagination
+      pageCount={50}
+      pageIndex={24}
+      setPageIndex={() => {}}
+      canPreviousPage={true}
+      canNextPage={true}
+      previousPage={() => {}}
+      nextPage={() => {}}
+      pageSize={10}
+      setPageSize={() => {}}
+    />
+  ),
+};
+
+export const WhithoutPages: Story = {
+  render: () => (
+    <Pagination
+      pageCount={1}
+      pageIndex={0}
+      setPageIndex={() => {}}
+      canPreviousPage={false}
+      canNextPage={false}
+      previousPage={() => {}}
+      nextPage={() => {}}
+      pageSize={10}
+      setPageSize={() => {}}
+    />
+  ),
+};
+
+export const WithoutPageSizeSelector: Story = {
+  render: () => (
+    <Pagination
+      pageCount={15}
+      pageIndex={7}
+      setPageIndex={() => {}}
+      canPreviousPage={true}
+      canNextPage={true}
+      previousPage={() => {}}
+      nextPage={() => {}}
+      pageSize={10}
+      setPageSize={() => {}}
+      showPageSizeSelector={false}
+    />
+  ),
+};
+
+export const WithTotalItems: Story = {
+  render: () => (
+    <Pagination
+      pageCount={8}
+      pageIndex={2}
+      setPageIndex={() => {}}
+      canPreviousPage={true}
+      canNextPage={true}
+      previousPage={() => {}}
+      nextPage={() => {}}
+      pageSize={20}
+      setPageSize={() => {}}
+      pageSizeOptions={[ 10, 20, 50, 100 ]}
+    />
+  ),
+};