@brcarddev/frontend-commons 1.0.2

package/src/components/organisms/Table/table.stories.tsx

@@ -0,0 +1,86 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './table';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Box, Checkbox, Pagination } from '@/components';
+
+const meta: Meta<typeof Table> = {
+  title: 'Components/Data Display/Table',
+  component: Table,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Table with support for visual states, accessibility, and custom styles.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+export const Default: Story = {
+  name: 'Default',
+  render: () => (
+    <TableContainer className='w-[700px]'>
+      <h1 className='px-6 py-4'>Header</h1>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>
+              <Checkbox aria-label="Select all" />
+            </TableHead>
+            <TableHead>Name</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead className="text-right">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <Checkbox aria-label="Select João" />
+            </TableCell>
+            <TableCell>João Silva</TableCell>
+            <TableCell>joao@email.com</TableCell>
+            <TableCell className="text-right">Edit | Remove</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Checkbox aria-label="Select Maria" />
+            </TableCell>
+            <TableCell>Maria Oliveira</TableCell>
+            <TableCell>maria@email.com</TableCell>
+            <TableCell className="text-right">Edit | Remove</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+
+      <Box className='px-6 py-4'>
+        <Pagination
+          pageCount={2}
+          pageIndex={0}
+          setPageIndex={() => {}}
+          canPreviousPage={false}
+          canNextPage={true}
+          previousPage={() => {}}
+          nextPage={() => {}}
+          pageSize={10}
+          setPageSize={() => {}}
+        />
+      </Box>
+    </TableContainer>
+
+  ),
+};

package/src/components/organisms/Table/table.test.tsx

@@ -0,0 +1,42 @@
+import { composeStories } from '@storybook/react';
+import { render, within } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './table.stories';
+
+const { Default } = composeStories(stories);
+
+const renderTable = () => render(<Default />);
+
+describe('<Table />', () => {
+  it('renders all structural parts with correct roles', () => {
+    const { getByTestId } = renderTable();
+
+    expect(getByTestId('table')).toBeInTheDocument();
+    expect(getByTestId('table-header')).toBeInTheDocument();
+    expect(getByTestId('table-body')).toBeInTheDocument();
+  });
+
+  it('renders the correct headers and cells', () => {
+    const { getAllByTestId } = renderTable();
+
+    const headers = getAllByTestId('table-head');
+    expect(headers).toHaveLength(4);
+
+    const cells = getAllByTestId('table-cell');
+    expect(cells).toHaveLength(8);
+  });
+
+  it('renders multiple rows correctly', () => {
+    const { getByTestId } = renderTable();
+
+    const body = getByTestId('table-body');
+    const rows = within(body).getAllByTestId('table-row');
+    expect(rows).toHaveLength(2);
+  });
+
+  it('matches snapshot', () => {
+    const { container } = renderTable();
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/organisms/Table/table.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+
+import { cn } from '@/utils';
+
+interface TableContainerProps extends React.ComponentProps<'div'> {
+  hasRoundedTop?: boolean;
+}
+
+function TableContainer({ className, children, hasRoundedTop = true, ...props }: TableContainerProps) {
+  return (
+    <div
+      data-testid="table-container"
+      data-slot="table-container"
+      className={cn('rounded-b-lg bg-gray-50 border-[0.5px] border-gray-200 shadow-xs', className, {
+        'rounded-t-lg': hasRoundedTop,
+      })}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div data-testid="table-container" data-slot="table-container" className="overflow-hidden bg-white rounded-lg relative w-full overflow-x-auto">
+      <table
+        data-slot="table"
+        data-testid="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      data-testid="table-header"
+      className={cn('bg-white sticky top-0 [&_tr]:border-b', className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      data-testid="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      data-testid="table-footer"
+      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      data-testid="table-row"
+      className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className)}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      data-testid="table-head"
+      className={cn(
+        'text-gray-500 h-10 px-6 py-3 text-left text-xs align-middle font-semibold whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      data-testid="table-cell"
+      className={cn(
+        'px-6 py-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      data-testid="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow };

package/src/components/organisms/index.ts

@@ -0,0 +1,6 @@
+export * from '@/components/organisms/Carousel';
+export * from '@/components/organisms/Chart';
+export * from '@/components/organisms/FileUpload';
+export * from '@/components/organisms/Form';
+export * from '@/components/organisms/Sidebar';
+export * from '@/components/organisms/Table';

package/src/constants/brazilian-states.ts

@@ -0,0 +1,29 @@
+export const brazilianStates = [
+  { 'label': 'Acre', 'value': 'AC' },
+  { 'label': 'Alagoas', 'value': 'AL' },
+  { 'label': 'Amapá', 'value': 'AP' },
+  { 'label': 'Amazonas', 'value': 'AM' },
+  { 'label': 'Bahia', 'value': 'BA' },
+  { 'label': 'Ceará', 'value': 'CE' },
+  { 'label': 'Distrito Federal', 'value': 'DF' },
+  { 'label': 'Espírito Santo', 'value': 'ES' },
+  { 'label': 'Goiás', 'value': 'GO' },
+  { 'label': 'Maranhão', 'value': 'MA' },
+  { 'label': 'Mato Grosso', 'value': 'MT' },
+  { 'label': 'Mato Grosso do Sul', 'value': 'MS' },
+  { 'label': 'Minas Gerais', 'value': 'MG' },
+  { 'label': 'Pará', 'value': 'PA' },
+  { 'label': 'Paraíba', 'value': 'PB' },
+  { 'label': 'Paraná', 'value': 'PR' },
+  { 'label': 'Pernambuco', 'value': 'PE' },
+  { 'label': 'Piauí', 'value': 'PI' },
+  { 'label': 'Rio de Janeiro', 'value': 'RJ' },
+  { 'label': 'Rio Grande do Norte', 'value': 'RN' },
+  { 'label': 'Rio Grande do Sul', 'value': 'RS' },
+  { 'label': 'Rondônia', 'value': 'RO' },
+  { 'label': 'Roraima', 'value': 'RR' },
+  { 'label': 'Santa Catarina', 'value': 'SC' },
+  { 'label': 'São Paulo', 'value': 'SP' },
+  { 'label': 'Sergipe', 'value': 'SE' },
+  { 'label': 'Tocantins', 'value': 'TO' },
+];

package/src/constants/index.ts

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

package/src/hooks/index.ts

@@ -0,0 +1,10 @@
+export * from '@/hooks/useEditorActiveMarks';
+export * from '@/hooks/useForm';
+export * from '@/hooks/useFormContext';
+export * from '@/hooks/useFormField';
+export * from '@/hooks/useMobile';
+export * from '@/hooks/useOnToggle';
+export * from '@/hooks/usePDFNavigation';
+export * from '@/hooks/usePDFZoom';
+export * from '@/hooks/useSidebar';
+export * from '@/hooks/useToast';

package/src/hooks/useEditorActiveMarks.ts

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { Editor } from '@tiptap/react';
+
+interface ActiveMarks {
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  bulletList: boolean;
+  align: 'left' | 'center';
+}
+
+export const useEditorActiveMarks = (editor: Editor | null) => {
+  const [ active, setActive ] = useState<ActiveMarks>({
+    bold: false,
+    italic: false,
+    underline: false,
+    bulletList: false,
+    align: 'left',
+  });
+
+  const previousActiveRef = useRef<ActiveMarks>(active);
+
+  const update = useCallback(() => {
+    if (!editor) return;
+
+    const newActive: ActiveMarks = {
+      bold: editor.isActive('bold'),
+      italic: editor.isActive('italic'),
+      underline: editor.isActive('underline'),
+      bulletList: editor.isActive('bulletList'),
+      align: (editor.isActive({ textAlign: 'left' }) ? 'left' : 'center'),
+    };
+
+    const hasChanged =
+      previousActiveRef.current.bold !== newActive.bold ||
+      previousActiveRef.current.italic !== newActive.italic ||
+      previousActiveRef.current.underline !== newActive.underline ||
+      previousActiveRef.current.bulletList !== newActive.bulletList ||
+      previousActiveRef.current.align !== newActive.align;
+
+    if (hasChanged) {
+      previousActiveRef.current = newActive;
+      setActive(newActive);
+    }
+  }, [ editor ]);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    update();
+
+    editor.on('selectionUpdate', update);
+    editor.on('transaction', update);
+
+    return () => {
+      editor.off('selectionUpdate', update);
+      editor.off('transaction', update);
+    };
+  }, [ editor, update ]);
+
+  return active;
+};

package/src/hooks/useForm.ts

@@ -0,0 +1,8 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { DefaultValues, useForm as hookForm } from 'react-hook-form';
+import * as z from 'zod';
+
+export const useForm = <T extends z.ZodRawShape>(
+  schema: z.ZodEffects<z.ZodObject<T>> | z.ZodObject<T>,
+  defaultValues?: DefaultValues<z.infer<typeof schema>>
+) => hookForm <z.infer<typeof schema>>({ resolver: zodResolver(schema), defaultValues });

package/src/hooks/useFormContext.ts

@@ -0,0 +1,7 @@
+import { useFormContext as hookFormContext } from 'react-hook-form';
+
+export const useFormContext = () => {
+  const formContext = hookFormContext();
+
+  return formContext;
+};

package/src/hooks/useFormField.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { FieldPath, FieldValues, useFormContext, useFormState } from 'react-hook-form';
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+export const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+type FormItemContextValue = {
+  id: string;
+};
+
+export const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+export const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};

package/src/hooks/useMobile.ts

@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react';
+
+const BREAKPOINTS = {
+  mobile: 768,
+  tablet: 1024,
+  desktop: 1440,
+  fullHd: 1920,
+} as const;
+
+interface ScreenSizes {
+  isMobile: boolean;
+  isTablet: boolean;
+  isDesktop: boolean;
+  isFullHd: boolean;
+  width: number;
+}
+
+export function useIsMobile(): boolean {
+  const { isMobile } = useScreenSize();
+  return isMobile;
+}
+
+export function useScreenSize(): ScreenSizes {
+  const [ screenData, setScreenData ] = useState<ScreenSizes>({
+    isMobile: false,
+    isTablet: false,
+    isDesktop: false,
+    isFullHd: false,
+    width: 0,
+  });
+
+  useEffect(() => {
+    const updateScreenSize = () => {
+      const width = window.innerWidth;
+      setScreenData({
+        isMobile: width < BREAKPOINTS.mobile,
+        isTablet: width >= BREAKPOINTS.mobile && width < BREAKPOINTS.desktop,
+        isDesktop: width >= BREAKPOINTS.desktop && width < BREAKPOINTS.fullHd,
+        isFullHd: width >= BREAKPOINTS.fullHd,
+        width,
+      });
+    };
+
+    updateScreenSize();
+
+    const mediaQueries = [
+      window.matchMedia(`(max-width: ${BREAKPOINTS.mobile - 1}px)`),
+      window.matchMedia(`(min-width: ${BREAKPOINTS.mobile}px) and (max-width: ${BREAKPOINTS.desktop - 1}px)`),
+      window.matchMedia(`(min-width: ${BREAKPOINTS.desktop}px) and (max-width: ${BREAKPOINTS.fullHd - 1}px)`),
+      window.matchMedia(`(min-width: ${BREAKPOINTS.fullHd}px)`),
+    ];
+
+    mediaQueries.forEach(mq => mq.addEventListener('change', updateScreenSize));
+
+    return () => {
+      mediaQueries.forEach(mq => mq.removeEventListener('change', updateScreenSize));
+    };
+  }, []);
+
+  return screenData;
+}

package/src/hooks/useOnToggle.ts

@@ -0,0 +1,28 @@
+import { useCallback, useState } from 'react';
+
+interface UseToggleReturn {
+  /** Current boolean state */
+  state: boolean;
+  /** Toggle the state */
+  toggle: () => void;
+  /** Set state to a specific value */
+  setValue: (value: boolean) => void;
+}
+
+export const useOnToggle = (initialState: boolean = false): UseToggleReturn => {
+  const [ state, setState ] = useState<boolean>(initialState);
+
+  const toggle = useCallback(() => {
+    setState(prev => !prev);
+  }, []);
+
+  const setValue = useCallback((value: boolean) => {
+    setState(value);
+  }, []);
+
+  return {
+    state,
+    toggle,
+    setValue,
+  };
+};

package/src/hooks/usePDFNavigation.ts

@@ -0,0 +1,41 @@
+import { useCallback, useState } from 'react';
+
+export const usePDFNavigation = (totalPages: number | null) => {
+  const [ currentPage, setCurrentPage ] = useState(1);
+
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages;
+
+  const goToFirstPage = useCallback(() => {
+    if (!isFirstPage) setCurrentPage(1);
+  }, [ isFirstPage ]);
+
+  const goToPreviousPage = useCallback(() => {
+    if (!isFirstPage) setCurrentPage(currentPage - 1);
+  }, [ currentPage, isFirstPage ]);
+
+  const goToNextPage = useCallback(() => {
+    if (!isLastPage) setCurrentPage(currentPage + 1);
+  }, [ currentPage, isLastPage ]);
+
+  const goToLastPage = useCallback(() => {
+    if (!isLastPage && totalPages) setCurrentPage(totalPages);
+  }, [ isLastPage, totalPages ]);
+
+  const handlePageChange = useCallback((newPage: number) => {
+    if (newPage >= 1 && newPage <= (totalPages || 1)) {
+      setCurrentPage(newPage);
+    }
+  }, [ totalPages ]);
+
+  return {
+    currentPage,
+    isFirstPage,
+    isLastPage,
+    goToFirstPage,
+    goToPreviousPage,
+    goToNextPage,
+    goToLastPage,
+    handlePageChange,
+  };
+};

package/src/hooks/usePDFZoom.ts

@@ -0,0 +1,35 @@
+import { useCallback, useState } from 'react';
+
+export const MAX_ZOOM = 3.0;
+export const MIN_ZOOM = 0.6;
+
+export const usePDFZoom = () => {
+  const [ scale, setScale ] = useState(1.0);
+
+  const isMinZoom = scale <= MIN_ZOOM;
+  const isMaxZoom = scale >= MAX_ZOOM;
+
+  const zoomOut = useCallback(() => {
+    if (!isMinZoom) setScale(scale - ZOOM_STEP);
+  }, [ scale, isMinZoom ]);
+
+  const zoomIn = useCallback(() => {
+    if (!isMaxZoom) setScale(scale + ZOOM_STEP);
+  }, [ scale, isMaxZoom ]);
+
+  const setScaleValue = useCallback((newScale: number) => {
+    const clampedScale = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, newScale));
+    setScale(clampedScale);
+  }, []);
+
+  return {
+    scale,
+    isMinZoom,
+    isMaxZoom,
+    zoomIn,
+    zoomOut,
+    setScale: setScaleValue,
+  };
+};
+
+export const ZOOM_STEP = 0.1;

package/src/hooks/useSidebar.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export type SidebarContextProps = {
+  state: 'expanded' | 'collapsed';
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+export const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+export function useSidebar() {
+  const context = React.useContext(SidebarContext);
+
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.');
+  }
+
+  return context;
+}

package/src/hooks/useToast.tsx

@@ -0,0 +1,63 @@
+import { ExternalToast, toast } from 'sonner';
+
+import { AlertCircle, CheckCircle } from '@/components';
+
+export const useToast = () => {
+  const success = (message: string, options?: ExternalToast) => {
+    toast.success(message, {
+      icon: <CheckCircle className="size-5 text-success-500" />,
+      closeButton: true,
+      ...options,
+    });
+  };
+
+  const error = (message: string, options?: ExternalToast) => {
+    toast.error(message, {
+      icon: <AlertCircle className="size-5 text-error-500" />,
+      closeButton: true,
+      ...options,
+    });
+  };
+
+  const warning = (message: string, options?: ExternalToast) => {
+    toast.warning(message, {
+      icon: <AlertCircle className="size-5 text-warning-500" />,
+      closeButton: true,
+      ...options,
+    });
+  };
+
+  const info = (message: string, options?: ExternalToast) => {
+    toast(message, {
+      closeButton: true,
+      ...options,
+    });
+  };
+
+  const loading = (message: string, options?: ExternalToast) => {
+    return toast.loading(message, {
+      closeButton: true,
+      ...options,
+    });
+  };
+
+  const promise = (promise: Promise<unknown>, options?: { success: string; error: string, loading: string }) => {
+    return toast.promise(promise, {
+      success: {
+        richColors: true,
+        message: options?.success,
+      },
+      error: {
+        richColors: true,
+        message: options?.error,
+      },
+      loading: options?.loading,
+    });
+  };
+
+  const dismiss = (id?: string | number) => {
+    toast.dismiss(id);
+  };
+
+  return { success, error, warning, info, loading, promise, dismiss };
+};