wca-designsystem 0.0.15 → 0.0.17

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.15",
+  "version": "0.0.17",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -88,10 +88,10 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@mantine/core": "7.10.1",
-    "@mantine/dates": "^7.10.1",
-    "@mantine/form": "^7.9.2",
-    "@mantine/hooks": "7.10.1",
+    "@mantine/core": "7.12.2",
+    "@mantine/dates": "^7.12.2",
+    "@mantine/form": "^7.12.2",
+    "@mantine/hooks": "7.12.2",
     "@tanstack/query-sync-storage-persister": "^5.40.0",
     "@tanstack/react-query": "^5.40.1",
     "@tanstack/react-query-persist-client": "^5.40.1",

package/src/components/molecules/TabelaHeader/TabelaHeader.test.tsx

@@ -8,6 +8,7 @@ describe('Tabela Header', () => {
   it('Renderiza corretamente', () => {
     const { getByText } = render(
       <TabelaHeader
+        setPagination={() => console.log('auqi')}
         toogleBuscarColuna={false}
         setToogleBuscarColuna={() => console.log('aqui')}
         setGlobalFilter={() => console.log('aqui')}
@@ -28,6 +29,7 @@ describe('Tabela Header', () => {
 
     const { getByText } = render(
       <TabelaHeader
+        setPagination={() => console.log('auqi')}
         toogleBuscarColuna={false}
         setToogleBuscarColuna={() => console.log('aqui')}
         setGlobalFilter={() => console.log('aqui')}

package/src/components/molecules/TabelaHeader/index.tsx

@@ -11,6 +11,7 @@ import * as S from './styles';
 import Botao from '../../atomos/Botao';
 import InputDeTexto from '../../atomos/InputDeTexto';
 import {
+  MRT_PaginationState,
   MRT_RowData,
   MRT_TableInstance,
   MRT_ToggleFiltersButton,
@@ -36,6 +37,7 @@ export type TabelaHeaderProps<T extends MRT_RowData> = {
   setToogleBuscarColuna: React.Dispatch<React.SetStateAction<boolean>>;
   toogleBuscarColuna: boolean;
   table?: MRT_TableInstance<T>;
+  setPagination: React.Dispatch<React.SetStateAction<MRT_PaginationState>>;
 };
 const TabelaHeader = <T extends MRT_RowData>({
   tituloTabela,
@@ -43,6 +45,7 @@ const TabelaHeader = <T extends MRT_RowData>({
   ordenarPor,
   filtrosPor,
   setFiltrosPor,
+  setPagination,
   exportarXlsx,
   handleAdicionar,
   filtrosPelaTabela,
@@ -64,7 +67,10 @@ const TabelaHeader = <T extends MRT_RowData>({
             maw={180}
             tipo="table"
             leftSection={<Icone fill={theme.colors.blue} svg={buscar} />}
-            onChange={(e) => setGlobalFilter(e.currentTarget.value)}
+            onChange={(e) => {
+              setPagination({ pageIndex: 0, pageSize: 10 });
+              setGlobalFilter(e.currentTarget.value);
+            }}
           />
 
           <SelectCustomizado

package/src/components/organismos/Tabela/HeaderTable.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import { Table } from '@mantine/core';
 import * as S from './styles';
-import { MRT_RowData, MRT_TableInstance } from 'mantine-react-table';
+import {
+  MRT_PaginationState,
+  MRT_RowData,
+  MRT_TableInstance,
+} from 'mantine-react-table';
 import { theme } from '../../../styles/theme';
 import Icone from '../../atomos/Icone';
 import InputDeTexto from '../../atomos/InputDeTexto';

package/src/components/organismos/Tabela/Tabela.test.tsx

@@ -33,6 +33,7 @@ describe('Tabela', () => {
   it('Renderiza corretamente', () => {
     const { getByText } = render(
       <Tabela<any>
+        setPagination={() => console.log('auqi')}
         loading={false}
         data={[]}
         tituloTabela="Usuário"
@@ -50,6 +51,7 @@ describe('Tabela', () => {
 
     const { getByText } = render(
       <Tabela<any>
+        setPagination={() => console.log('auqi')}
         data={[]}
         loading={false}
         enableExpanding={false}

package/src/components/organismos/Tabela/index.tsx

@@ -1,9 +1,8 @@
-import React from 'react'
+import React from 'react';
 import {
   type MRT_ColumnDef,
   useMantineReactTable,
   MRT_RowData,
-  
   MRT_ColumnFilterFnsState,
   MRT_ColumnFiltersState,
   MRT_SortingState,
@@ -12,44 +11,46 @@ import {
   MRT_Cell,
   MRT_Row,
   MRT_TableInstance,
-} from 'mantine-react-table'
-import * as S from './styles'
-import { useCallback, useMemo, useState } from 'react'
-import { MRT_Localization_PT_BR } from '../../../utils/tableLocale'
+  MRT_PaginationState,
+} from 'mantine-react-table';
+import * as S from './styles';
+import { useCallback, useMemo, useState } from 'react';
+import { MRT_Localization_PT_BR } from '../../../utils/tableLocale';
 
-import { utils, writeFileXLSX } from 'xlsx'
-import { Table } from '@mantine/core'
-import SkeletonTable from './SkeletonTable'
-import HeaderTable from './HeaderTable'
-import BodyTable from './BodyTable'
-import FooterTable from './FooterTable'
-import { useSearchParams } from 'react-router-dom'
-import Paginacao from '../../molecules/Paginacao'
-import TabelaHeader, { SelectDataProps } from '../../molecules/TabelaHeader'
+import { utils, writeFileXLSX } from 'xlsx';
+import { Table } from '@mantine/core';
+import SkeletonTable from './SkeletonTable';
+import HeaderTable from './HeaderTable';
+import BodyTable from './BodyTable';
+import FooterTable from './FooterTable';
+import { useSearchParams } from 'react-router-dom';
+import Paginacao from '../../molecules/Paginacao';
+import TabelaHeader, { SelectDataProps } from '../../molecules/TabelaHeader';
 
 export interface TabelaProps<T extends MRT_RowData> {
-  data: Array<T>
+  data: Array<T>;
   acoes?:
     | ((props: {
-        cell: MRT_Cell<T, unknown>
-        renderedRowIndex?: number
-        row: MRT_Row<T>
-        table: MRT_TableInstance<T>
+        cell: MRT_Cell<T, unknown>;
+        renderedRowIndex?: number;
+        row: MRT_Row<T>;
+        table: MRT_TableInstance<T>;
       }) => React.ReactNode)
-    | undefined
-  handleAdicionar?: (() => void) | undefined
-  columns: MRT_ColumnDef<T>[]
-  tituloTabela?: string
-  enableRowSelection: boolean
-  setRowSelection?: React.Dispatch<React.SetStateAction<MRT_RowSelectionState>>
-  rowSelection?: MRT_RowSelectionState | undefined
-  enableExpanding: boolean
-  fixedPosition?: Array<string>
-  enableRowActions?: boolean
-  hasTotalFooter?: boolean
-  tamanhoPaginacao?: number
-  quantidadeRegistros?: number
-  loading?: boolean
+    | undefined;
+  handleAdicionar?: (() => void) | undefined;
+  columns: MRT_ColumnDef<T>[];
+  tituloTabela?: string;
+  enableRowSelection: boolean;
+  setRowSelection?: React.Dispatch<React.SetStateAction<MRT_RowSelectionState>>;
+  rowSelection?: MRT_RowSelectionState | undefined;
+  enableExpanding: boolean;
+  fixedPosition?: Array<string>;
+  enableRowActions?: boolean;
+  hasTotalFooter?: boolean;
+  tamanhoPaginacao?: number;
+  quantidadeRegistros?: number;
+  setPagination: React.Dispatch<React.SetStateAction<MRT_PaginationState>>;
+  loading?: boolean;
 }
 
 function Tabela<T extends MRT_RowData>({
@@ -62,6 +63,7 @@ function Tabela<T extends MRT_RowData>({
   enableRowActions,
   quantidadeRegistros,
   hasTotalFooter,
+  setPagination,
   loading,
   handleAdicionar,
   data,
@@ -69,66 +71,69 @@ function Tabela<T extends MRT_RowData>({
   rowSelection = {},
   fixedPosition,
 }: TabelaProps<T>) {
-  const [searchParams] = useSearchParams()
-  const pagina = searchParams.get('pagina') ? Number(searchParams.get('pagina')) : 0
-  const linhas = searchParams.get('linhas')? Number(searchParams.get('linhas')) : 10
-
-
+  const [searchParams] = useSearchParams();
+  const pagina = searchParams.get('pagina')
+    ? Number(searchParams.get('pagina'))
+    : 0;
+  const linhas = searchParams.get('linhas')
+    ? Number(searchParams.get('linhas'))
+    : 10;
 
   const filtrosPelaTabela = useMemo(() => {
     return columns.map((header) => {
       return {
         value: String(header.accessorKey),
         label: header.header,
-      }
-    })
-  }, [])
+      };
+    });
+  }, []);
 
-  const [columnFilters, setColunaFiltros] = useState<MRT_ColumnFiltersState>([])
+  const [columnFilters, setColunaFiltros] = useState<MRT_ColumnFiltersState>(
+    []
+  );
 
   const [columnFilterFns, setFiltrosDeColunaFn] =
     useState<MRT_ColumnFilterFnsState>(
       Object.fromEntries(
         columns.map(({ accessorKey }) => [accessorKey, 'contains'])
       )
-    )
-  const [globalFilter, setGlobalFilter] = useState('')
-  const [sorting, setSorting] = useState<MRT_SortingState>([])
+    );
+  const [globalFilter, setGlobalFilter] = useState('');
+  const [sorting, setSorting] = useState<MRT_SortingState>([]);
   const [ordenarPor, setOrdenarPor] = useState<SelectDataProps>({
     label: 'Ordenar por: Maior',
     value: 'Maior',
-  })
-  const [columnOrder, setColumnOrder] = useState<MRT_ColumnOrderState>([])
-  const [filtrosPor, setFiltrosPor] = useState(filtrosPelaTabela[0] ?? [])
-  const [toogleBuscarColuna, setToogleBuscarColuna] = useState(false)
+  });
+  const [columnOrder, setColumnOrder] = useState<MRT_ColumnOrderState>([]);
+  const [filtrosPor, setFiltrosPor] = useState(filtrosPelaTabela[0] ?? []);
+  const [toogleBuscarColuna, setToogleBuscarColuna] = useState(false);
 
   const calcStickPosition = useCallback(
     (index: number) => {
       if (enableExpanding) {
-        index = index - 1
+        index = index - 1;
       }
       if (enableRowSelection) {
-        index = index - 1
+        index = index - 1;
       }
-      const expanding = enableExpanding ? 50 : 0
-      const selection = enableRowSelection ? 50 : 0
-      const newIndex = index * 200
-      const total = expanding + selection + newIndex
+      const expanding = enableExpanding ? 50 : 0;
+      const selection = enableRowSelection ? 50 : 0;
+      const newIndex = index * 200;
+      const total = expanding + selection + newIndex;
 
-      return total
+      return total;
     },
     [enableRowSelection]
-  )
+  );
 
   const onFilterColunas = useCallback(
     (id: string, value: unknown) => {
-      setColunaFiltros([{ id, value }])
+      setColunaFiltros([{ id, value }]);
     },
     [columnFilters]
-  )
-
-  const fetchData = data ?? []
+  );
 
+  const fetchData = data ?? [];
 
   const table = useMantineReactTable({
     columns: columns,
@@ -162,7 +167,7 @@ function Tabela<T extends MRT_RowData>({
       isLoading: loading,
       showColumnFilters: false,
       showGlobalFilter: false,
-     /*  pagination: {
+      /*  pagination: {
         pageIndex: 0,
         pageSize: 10,
       }, */
@@ -198,34 +203,35 @@ function Tabela<T extends MRT_RowData>({
       fz: 'xs',
     },
     renderRowActions: acoes,
-  })
+  });
 
   const exportarXlsx = useCallback(() => {
-    const ws = utils.json_to_sheet(data)
-    const wb = utils.book_new()
-    utils.book_append_sheet(wb, ws, 'Data')
-    writeFileXLSX(wb, 'SheetJSReactAoO.xlsx')
-  }, [data])
+    const ws = utils.json_to_sheet(data);
+    const wb = utils.book_new();
+    utils.book_append_sheet(wb, ws, 'Data');
+    writeFileXLSX(wb, 'SheetJSReactAoO.xlsx');
+  }, [data]);
 
   const getValorTotalSelecionados = useMemo(() => {
-    const columnsWithFooter = columns.find((column) => column.footer)
+    const columnsWithFooter = columns.find((column) => column.footer);
     if (columnsWithFooter?.accessorKey) {
-      let total = 0
+      let total = 0;
       data?.forEach((dado: T) => {
         if (rowSelection[dado.id]) {
-          total += dado[columnsWithFooter?.accessorKey!]
+          total += dado[columnsWithFooter?.accessorKey!];
         }
-      })
-      return total
+      });
+      return total;
     }
 
-    return 0
-  }, [rowSelection])
+    return 0;
+  }, [rowSelection]);
 
   return (
     <S.TabelaWrapper>
       {/* Filtros e titulo */}
       <TabelaHeader<T>
+        setPagination={setPagination}
         table={table}
         toogleBuscarColuna={toogleBuscarColuna}
         setToogleBuscarColuna={setToogleBuscarColuna}
@@ -281,16 +287,17 @@ function Tabela<T extends MRT_RowData>({
       {/* Paginação */}
       <S.TabelaPaginationWrapper>
         <Paginacao
+          setPagination={setPagination}
           tamanhoPaginacao={tamanhoPaginacao}
           quantidadeRegistros={quantidadeRegistros}
           tabelaPaginacao={{
-            pageIndex:  pagina,
-            pageSize:linhas
+            pageIndex: pagina,
+            pageSize: linhas,
           }}
         />
       </S.TabelaPaginationWrapper>
     </S.TabelaWrapper>
-  )
+  );
 }
 
-export default Tabela
+export default Tabela;