wca-designsystem 0.0.41 → 0.0.42

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.41",
+  "version": "0.0.42",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -93,16 +93,15 @@
     "@fullcalendar/interaction": "^6.1.15",
     "@fullcalendar/react": "^6.1.15",
     "@fullcalendar/timegrid": "^6.1.15",
-    "@mantine/core": "7.13.2",
-    "@mantine/dates": "^7.13.2",
-    "@mantine/form": "^7.13.2",
-    "@mantine/hooks": "7.13.2",
+    "@mantine/core": "7.13.4",
+    "@mantine/dates": "^7.13.4",
+    "@mantine/form": "^7.13.4",
+    "@mantine/hooks": "7.13.4",
     "@tanstack/query-sync-storage-persister": "^5.40.0",
     "@tanstack/react-query": "^5.40.1",
     "@tanstack/react-query-persist-client": "^5.40.1",
     "axios": "^1.7.2",
     "dayjs": "^1.11.13",
-    "mantine-react-table": "^2.0.0-beta.1",
     "react-router-dom": "^6.23.1",
     "styled-components": "^6.1.11",
     "xlsx": "^0.18.5"

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

@@ -1,88 +0,0 @@
-import React from 'react';
-import { Table } from '@mantine/core';
-import * as S from './styles';
-import {
-  MRT_RowData,
-  MRT_RowSelectionState,
-  MRT_TableBodyCellValue,
-  MRT_TableInstance,
-} from 'mantine-react-table';
-
-interface BodyTableProps<T extends MRT_RowData> {
-  table: MRT_TableInstance<T>;
-  fixedPosition: string[] | undefined;
-  calcStickPosition: (index: number) => number;
-  rowSelection: MRT_RowSelectionState;
-  setRowSelection:
-    | React.Dispatch<React.SetStateAction<MRT_RowSelectionState>>
-    | undefined;
-}
-
-function BodyTable<T extends MRT_RowData>({
-  table,
-  fixedPosition,
-  calcStickPosition,
-  rowSelection,
-  setRowSelection,
-}: BodyTableProps<T>) {
-  return (
-    <S.TabelaBody>
-      {/* Dados */}
-      {table.getRowModel().rows.map((row) => {
-        return (
-          <Table.Tr
-            key={row.id}
-            data-active={row.original.nome === rowSelection.nome}
-          >
-            {row.getVisibleCells().map((cell, index) => {
-              if (
-                cell.column.id !== 'mrt-row-expand' &&
-                cell.column.id !== 'mrt-row-select' &&
-                cell.column.id !== 'mrt-row-actions'
-              ) {
-                return (
-                  <Table.Td
-                    key={cell.id}
-                    onClick={() => setRowSelection!(row.original)}
-                    className={
-                      fixedPosition?.some((fixed) => cell.column.id === fixed)
-                        ? 'sticky'
-                        : ''
-                    }
-                    style={{
-                      right:
-                        cell.column.id === 'mrt-row-actions' ? 0 : undefined,
-                      left: fixedPosition?.some(
-                        (fixed) => cell.column.id === fixed
-                      )
-                        ? calcStickPosition(index)
-                        : 0,
-                    }}
-                  >
-                    <MRT_TableBodyCellValue cell={cell} table={table} />
-                  </Table.Td>
-                );
-              } else {
-                return (
-                  <Table.Td
-                    key={cell.id}
-                    className="sticky"
-                    style={{
-                      left: index === 0 ? '0' : '50px',
-                      right:
-                        cell.column.id === 'mrt-row-actions' ? '0' : undefined,
-                    }}
-                  >
-                    <MRT_TableBodyCellValue cell={cell} table={table} />
-                  </Table.Td>
-                );
-              }
-            })}
-          </Table.Tr>
-        );
-      })}
-    </S.TabelaBody>
-  );
-}
-
-export default BodyTable;

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

@@ -1,65 +0,0 @@
-import React from 'react';
-import { Table } from '@mantine/core';
-import * as S from './styles';
-import { MRT_ColumnDef, MRT_RowData } from 'mantine-react-table';
-
-interface FooterTableProps<T extends MRT_RowData> {
-  enableRowSelection: boolean;
-  enableExpanding: boolean;
-  columns: MRT_ColumnDef<T>[];
-  getValorTotalSelecionados: number | undefined;
-  hasTotalFooter: boolean | undefined;
-  data: any;
-}
-
-function FooterTable<T extends MRT_RowData>({
-  enableRowSelection,
-  enableExpanding,
-  getValorTotalSelecionados,
-  columns,
-  data,
-  hasTotalFooter,
-}: FooterTableProps<T>) {
-  return (
-    <S.TabelaFooter>
-      {enableRowSelection && (
-        <Table.Tr className="linhas-selecionadas">
-          <Table.Td style={{ minWidth: enableExpanding ? 300 : 250 }}>
-            Soma Linhas Selecionadas
-          </Table.Td>
-          <>
-            {columns.slice(1).map((column) => {
-              return (
-                <Table.Td key={column.id}>
-                  {column.footer ? <b>{getValorTotalSelecionados}</b> : '-'}
-                </Table.Td>
-              );
-            })}
-          </>
-        </Table.Tr>
-      )}
-      {hasTotalFooter && (
-        <Table.Tr className="soma-total">
-          <Table.Td
-            style={{
-              minWidth: enableRowSelection || enableExpanding ? 250 : 200,
-            }}
-          >
-            Soma Total
-          </Table.Td>
-          <>
-            {columns.slice(1).map((column) => {
-              return (
-                <Table.Td key={column.id}>
-                  {column.footer ? <b>{data?.total ?? 0}</b> : <>-</>}
-                </Table.Td>
-              );
-            })}
-          </>
-        </Table.Tr>
-      )}
-    </S.TabelaFooter>
-  );
-}
-
-export default FooterTable;

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

@@ -1,93 +0,0 @@
-import React from 'react';
-import { Table } from '@mantine/core';
-import * as S from './styles';
-import { MRT_RowData, MRT_TableInstance } from 'mantine-react-table';
-import { theme } from '../../../styles/theme';
-import Icone from '../../atomos/Icone';
-import InputDeTexto from '../../atomos/InputDeTexto';
-import buscar from '../../../assets/imagens/icons/Busca.svg';
-
-interface HeaderTableProps<T extends MRT_RowData> {
-  table: MRT_TableInstance<T>;
-  fixedPosition: string[] | undefined;
-  calcStickPosition: (index: number) => number;
-  toogleBuscarColuna: boolean;
-  onFilterColunas: (id: string, value: unknown) => void;
-}
-
-function HeaderTable<T extends MRT_RowData>({
-  table,
-  fixedPosition,
-  toogleBuscarColuna,
-  calcStickPosition,
-  onFilterColunas,
-}: HeaderTableProps<T>) {
-  return (
-    <S.TabelaHeader>
-      {table.getHeaderGroups().map((headerGroup) => (
-        <Table.Tr key={headerGroup.id}>
-          {headerGroup.headers.map((header, index) => {
-            if (
-              header.id !== 'mrt-row-expand' &&
-              header.id !== 'mrt-row-select' &&
-              header.id !== 'mrt-row-actions'
-            ) {
-              return (
-                <Table.Th
-                  key={header.id}
-                  className={
-                    fixedPosition?.some((fixed) => header.column.id === fixed)
-                      ? 'sticky'
-                      : ''
-                  }
-                  style={{
-                    left: fixedPosition?.some(
-                      (fixed) => header.column.id === fixed
-                    )
-                      ? calcStickPosition(index)
-                      : 0,
-                  }}
-                >
-                  {toogleBuscarColuna ? (
-                    <div className="input-header">
-                      <InputDeTexto
-                        tipo="table"
-                        placeholder={`Pesquisar por: ${
-                          header.id.charAt(0).toUpperCase() + header.id.slice(1)
-                        }`}
-                        onChange={(e) =>
-                          onFilterColunas(header.id, e.currentTarget.value)
-                        }
-                        leftSection={
-                          <Icone fill={theme.colors.alert} svg={buscar} />
-                        }
-                      />
-                    </div>
-                  ) : (
-                    <>{header.id}</>
-                  )}
-                </Table.Th>
-              );
-            } else {
-              return (
-                <Table.Th
-                  key={header.id}
-                  className={'especial sticky'}
-                  style={{
-                    left: index === 0 ? '0' : '50px',
-                    right:
-                      header.column.id === 'mrt-row-actions' ? '0' : undefined,
-                  }}
-                >
-                  <></>
-                </Table.Th>
-              );
-            }
-          })}
-        </Table.Tr>
-      ))}
-    </S.TabelaHeader>
-  );
-}
-
-export default HeaderTable;

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import { Skeleton, Table } from '@mantine/core';
-import * as S from './styles';
-import { MRT_RowData, MRT_TableInstance } from 'mantine-react-table';
-
-interface SkeletonTableProps<T extends MRT_RowData> {
-  table: MRT_TableInstance<T>;
-}
-
-function SkeletonTable<T extends MRT_RowData>({
-  table,
-}: SkeletonTableProps<T>) {
-  return (
-    <S.TabelaBody>
-      {table.getRowModel().rows.map((row) => {
-        return (
-          <Table.Tr key={row.id}>
-            {row.getVisibleCells().map((cell) => (
-              <Table.Td key={cell.id}>
-                <Skeleton height={19} radius="xl" animate={true} />
-              </Table.Td>
-            ))}
-          </Table.Tr>
-        );
-      })}
-    </S.TabelaBody>
-  );
-}
-
-export default SkeletonTable;

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

@@ -1,175 +0,0 @@
-import React from 'react';
-import Tabela, { TabelaProps } from './index';
-import { Meta } from '@storybook/react';
-import { TabelaAcoes, TabelaStoryContainer } from './styles';
-import IconeBotao from '../../atomos/IconeBotao';
-import Icone from '../../atomos/Icone';
-import { theme } from '../../../styles/theme';
-import editar from '../../../assets/imagens/icons/EditarPerfil.svg';
-import deletar from '../../../assets/imagens/icons/RemoveFIltro.svg';
-
-export default {
-  title: 'Components/organismos/Tabela',
-  component: Tabela,
-} as Meta;
-
-const columns: any = [
-  {
-    accessorKey: 'nome',
-    header: 'Nome',
-    filterVariant: 'autocomplete',
-  },
-  {
-    accessorKey: 'email',
-    header: 'Email',
-  },
-  {
-    accessorKey: 'genero',
-    header: 'Genero',
-  },
-  {
-    accessorKey: 'rua',
-    header: 'Rua',
-  },
-  {
-    accessorKey: 'estado',
-    header: 'Estado',
-  },
-  {
-    accessorKey: 'cidade',
-    header: 'Cidade',
-  },
-];
-
-const data: any = [
-  {
-    nome: 'exemplo',
-    email: 'exemplo@gmail.com',
-    genero: 'masculino',
-    rua: 'Alameda Olga',
-    estado: 'SP',
-    cidade: 'São Paulo',
-  },
-  {
-    nome: 'exemplo',
-    email: 'exemplo@gmail.com',
-    genero: 'masculino',
-    rua: 'Alameda Olga',
-    estado: 'SP',
-    cidade: 'São Paulo',
-  },
-  {
-    nome: 'exemplo',
-    email: 'exemplo@gmail.com',
-    genero: 'masculino',
-    rua: 'Alameda Olga',
-    estado: 'SP',
-    cidade: 'São Paulo',
-  },
-  {
-    nome: 'exemplo',
-    email: 'exemplo@gmail.com',
-    genero: 'masculino',
-    rua: 'Alameda Olga',
-    estado: 'SP',
-    cidade: 'São Paulo',
-  },
-  {
-    nome: 'exemplo',
-    email: 'exemplo@gmail.com',
-    genero: 'masculino',
-    rua: 'Alameda Olga',
-    estado: 'SP',
-    cidade: 'São Paulo',
-  },
-  {
-    nome: 'exemplo',
-    email: 'exemplo@gmail.com',
-    genero: 'masculino',
-    rua: 'Alameda Olga',
-    estado: 'SP',
-    cidade: 'São Paulo',
-  },
-  {
-    nome: 'exemplo',
-    email: 'exemplo@gmail.com',
-    genero: 'masculino',
-    rua: 'Alameda Olga',
-    estado: 'SP',
-    cidade: 'São Paulo',
-  },
-  {
-    nome: 'exemplo',
-    email: 'exemplo@gmail.com',
-    genero: 'masculino',
-    rua: 'Alameda Olga',
-    estado: 'SP',
-    cidade: 'São Paulo',
-  },
-  {
-    nome: 'exemplo',
-    email: 'exemplo@gmail.com',
-    genero: 'masculino',
-    rua: 'Alameda Olga',
-    estado: 'SP',
-    cidade: 'São Paulo',
-  },
-  {
-    nome: 'exemplo',
-    email: 'exemplo@gmail.com',
-    genero: 'masculino',
-    rua: 'Alameda Olga',
-    estado: 'SP',
-    cidade: 'São Paulo',
-  },
-  {
-    nome: 'exemplo',
-    email: 'exemplo@gmail.com',
-    genero: 'masculino',
-    rua: 'Alameda Olga',
-    estado: 'SP',
-    cidade: 'São Paulo',
-  },
-];
-
-const props: TabelaProps<any> = {
-  data: data,
-  btnAdicionar: false,
-  columns: columns,
-  setPagination: () => console.log('aqui'),
-  enableExpanding: false,
-  enableRowSelection: false,
-  enableRowActions: false,
-  tamanhoPaginacao: 10,
-  handleAdicionar: () => console.log('adicionar'),
-  acoes: ({ row }) => (
-    <TabelaAcoes>
-      <IconeBotao
-        tipo="table"
-        onClick={() => console.log('edit', row.original)}
-      >
-        <Icone svg={editar} fill={theme.colors.blue} width={20} height={20} />
-      </IconeBotao>
-      <IconeBotao
-        tipo="table"
-        onClick={() => console.log('delete', row.original)}
-      >
-        <Icone svg={deletar} fill={theme.colors.blue} width={20} height={20} />
-      </IconeBotao>
-    </TabelaAcoes>
-  ),
-};
-
-const Template: any = (args: TabelaProps<any>) => (
-  <TabelaStoryContainer>
-    <Tabela {...args} />
-  </TabelaStoryContainer>
-);
-
-export const TabelaStory = Template.bind({
-  ...props,
-});
-
-TabelaStory.args = {
-  ...props,
-};

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

@@ -1,68 +0,0 @@
-import React from 'react';
-import Tabela from './index';
-import { render } from '../../../test/render';
-
-describe('Tabela', () => {
-  const columns: any = [
-    {
-      accessorKey: 'nome',
-      header: 'Nome',
-      filterVariant: 'autocomplete',
-    },
-    {
-      accessorKey: 'email',
-      header: 'Email',
-    },
-    {
-      accessorKey: 'genero',
-      header: 'Genero',
-    },
-    {
-      accessorKey: 'rua',
-      header: 'Rua',
-    },
-    {
-      accessorKey: 'estado',
-      header: 'Estado',
-    },
-    {
-      accessorKey: 'cidade',
-      header: 'Cidade',
-    },
-  ];
-  it('Renderiza corretamente', () => {
-    const { getByText } = render(
-      <Tabela<any>
-        btnAdicionar={false}
-        setPagination={() => console.log('auqi')}
-        loading={false}
-        data={[]}
-        tituloTabela="Usuário"
-        enableExpanding={false}
-        enableRowSelection={false}
-        columns={columns}
-      />
-    );
-
-    const titulo = getByText('Usuário');
-    expect(titulo).toBeDefined();
-  });
-  it('Exporta xml', async () => {
-    jest.mock('xlsx');
-
-    const { getByText } = render(
-      <Tabela<any>
-        btnAdicionar={false}
-        setPagination={() => console.log('auqi')}
-        data={[]}
-        loading={false}
-        enableExpanding={false}
-        enableRowSelection={false}
-        tituloTabela="Usuário"
-        columns={columns}
-      />
-    );
-    const botaoPlanilha = getByText('Baixar Planilha de Dados');
-    botaoPlanilha.click();
-  });
-});

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

@@ -1,307 +0,0 @@
-import React from 'react';
-import {
-  type MRT_ColumnDef,
-  useMantineReactTable,
-  MRT_RowData,
-  MRT_ColumnFilterFnsState,
-  MRT_ColumnFiltersState,
-  MRT_SortingState,
-  MRT_ColumnOrderState,
-  MRT_RowSelectionState,
-  MRT_Cell,
-  MRT_Row,
-  MRT_TableInstance,
-  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';
-
-export interface TabelaProps<T extends MRT_RowData> {
-  data: Array<T>;
-  acoes?:
-    | ((props: {
-        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;
-  btnAdicionar: boolean;
-  quantidadeRegistros?: number;
-  setPagination: React.Dispatch<React.SetStateAction<MRT_PaginationState>>;
-  loading?: boolean;
-}
-
-function Tabela<T extends MRT_RowData>({
-  columns,
-  tituloTabela,
-  setRowSelection,
-  enableRowSelection,
-  acoes,
-  tamanhoPaginacao,
-  enableRowActions,
-  quantidadeRegistros,
-  hasTotalFooter,
-  setPagination,
-  loading,
-  handleAdicionar,
-  data,
-  btnAdicionar,
-  enableExpanding,
-  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 filtrosPelaTabela = useMemo(() => {
-    return columns.map((header) => {
-      return {
-        value: String(header.accessorKey),
-        label: header.header,
-      };
-    });
-  }, []);
-
-  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 [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 calcStickPosition = useCallback(
-    (index: number) => {
-      if (enableExpanding) {
-        index = index - 1;
-      }
-      if (enableRowSelection) {
-        index = index - 1;
-      }
-      const expanding = enableExpanding ? 50 : 0;
-      const selection = enableRowSelection ? 50 : 0;
-      const newIndex = index * 200;
-      const total = expanding + selection + newIndex;
-
-      return total;
-    },
-    [enableRowSelection]
-  );
-
-  const onFilterColunas = useCallback(
-    (id: string, value: unknown) => {
-      setColunaFiltros([{ id, value }]);
-    },
-    [columnFilters]
-  );
-
-  const fetchData = data ?? [];
-
-  const table = useMantineReactTable({
-    columns: columns,
-    data: fetchData,    
-    enableRowSelection: enableRowSelection,
-    onRowSelectionChange: setRowSelection,
-    getRowId: (row) => row.id,
-    enableColumnActions: true,
-    enableRowActions: enableRowActions,
-    enableGlobalFilterModes: false,
-    enableColumnFilterModes: true,
-    columnFilterModeOptions: [],
-    enableBottomToolbar: false,
-    enablePagination: true,
-    enableRowVirtualization: false,
-    enableColumnFilters: true,
-    enableSorting: true,
-    positionActionsColumn: 'last',
-    positionGlobalFilter: 'right',
-    enableDensityToggle: false,
-    enableFullScreenToggle: false,
-    enablePinning: true,
-    manualFiltering: true,
-    enableExpanding: enableExpanding,
-    enableStickyFooter: false,
-    onGlobalFilterChange: setGlobalFilter,
-    onSortingChange: setSorting,
-    onColumnFilterFnsChange: setFiltrosDeColunaFn,
-    onColumnFiltersChange: setColunaFiltros,
-    initialState: {
-      isLoading: loading,
-      showColumnFilters: false,
-      showGlobalFilter: false,
-      /*  pagination: {
-        pageIndex: 0,
-        pageSize: 10,
-      }, */
-    },
-    state: {
-      isLoading: loading,
-      showProgressBars: loading,
-      columnFilterFns,
-      columnFilters,
-      rowSelection: enableRowSelection ? rowSelection : {},
-      columnOrder,
-      globalFilter,
-      sorting: sorting,
-      pagination: {
-        pageIndex: 0,
-        pageSize: linhas,
-      },
-    },
-    onColumnOrderChange: setColumnOrder,
-    localization: MRT_Localization_PT_BR,
-
-    mantineTableBodyCellProps: ({ row }) => ({
-      align: 'center',
-      onClick: row.getToggleSelectedHandler(),
-    }),
-    mantineTableHeadCellProps: {
-      align: 'center',
-    },
-    mantineTableProps: {
-      highlightOnHover: true,
-      striped: 'odd',
-      bga: 'white',
-      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 getValorTotalSelecionados = useMemo(() => {
-    const columnsWithFooter = columns.find((column) => column.footer);
-    if (columnsWithFooter?.accessorKey) {
-      let total = 0;
-      data?.forEach((dado: T) => {
-        if (rowSelection[dado.id]) {
-          total += dado[columnsWithFooter?.accessorKey!];
-        }
-      });
-      return total;
-    }
-
-    return 0;
-  }, [rowSelection]);
-
-  return (
-    <S.TabelaWrapper>
-      {/* Filtros e titulo */}
-      <TabelaHeader<T>
-        btnAdicionar={btnAdicionar}
-        setSimples={() => console.log('aqui')}
-        setPagination={setPagination}
-        table={table}
-        toogleBuscarColuna={toogleBuscarColuna}
-        setToogleBuscarColuna={setToogleBuscarColuna}
-        handleAdicionar={handleAdicionar}
-        setGlobalFilter={setGlobalFilter}
-        filtrosPelaTabela={filtrosPelaTabela}
-        filtrosPor={filtrosPor}
-        ordenarPor={ordenarPor}
-        setFiltrosPor={setFiltrosPor}
-        setOrdenarPor={setOrdenarPor}
-        tituloTabela={tituloTabela}
-        exportarXlsx={exportarXlsx}
-      />
-      {/* Tabela com dados */}
-      <S.TabelaContainer style={{ height: hasTotalFooter ? '540px' : '100%' }}>
-        <Table
-          highlightOnHover
-          horizontalSpacing="xs"
-          striped
-          highlightOnHoverColor={'blue'}
-          fz={'xs'}
-        >
-          <HeaderTable
-            calcStickPosition={calcStickPosition}
-            fixedPosition={fixedPosition}
-            onFilterColunas={onFilterColunas}
-            table={table}
-            toogleBuscarColuna={toogleBuscarColuna}
-          />
-          {loading ? (
-            /* Skeleton */
-            <SkeletonTable table={table} />
-          ) : (
-            <BodyTable
-              calcStickPosition={calcStickPosition}
-              fixedPosition={fixedPosition}
-              rowSelection={rowSelection}
-              setRowSelection={setRowSelection}
-              table={table}
-            />
-          )}
-          <FooterTable
-            columns={columns}
-            data={data}
-            enableExpanding={enableExpanding}
-            enableRowSelection={enableRowSelection}
-            getValorTotalSelecionados={getValorTotalSelecionados}
-            hasTotalFooter={hasTotalFooter}
-          />
-        </Table>
-      </S.TabelaContainer>
-
-      {/* Paginação */}
-      <S.TabelaPaginationWrapper>
-        <Paginacao
-          setPagination={setPagination}
-          tamanhoPaginacao={tamanhoPaginacao}
-          quantidadeRegistros={quantidadeRegistros}
-          tabelaPaginacao={{
-            pageIndex: pagina,
-            pageSize: linhas,
-          }}
-        />
-      </S.TabelaPaginationWrapper>
-    </S.TabelaWrapper>
-  );
-}
-
-export default Tabela;

package/src/components/organismos/Tabela/styles.ts

@@ -1,191 +0,0 @@
-import { Table } from '@mantine/core';
-import styled, { css } from 'styled-components';
-
-export const TabelaWrapper = styled.div`
-  ${() => css`
-    max-width: 1500px;
-    border-radius: 5px;
-    font-family: 'Open Sans', sans-serif;
-  `}
-`;
-
-export const TabelaContainer = styled.div`
-  ${({ theme }) => css`
-    max-height: 620px;
-    max-width: 1500px;
-    overflow: auto;
-    position: relative;
-
-    .sticky {
-      position: sticky;
-      z-index: 3;
-      max-width: 200px;
-    }
-
-    .mantine-Table-td {
-      text-align: center;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-
-      p {
-        font-size: ${theme.sizes.small};
-      }
-    }
-
-    .mantine-active {
-      &:hover {
-        opacity: 0.7;
-        color: ${theme.colors.blue};
-      }
-    }
-  `}
-`;
-
-export const TabelaHeader = styled(Table.Thead)`
-  ${({ theme }) => css`
-    th {
-      min-width: 100%;
-      text-align: center;
-      text-transform: capitalize;
-      padding: 5px;
-      background-color: rgba(53, 50, 164, 0.2);
-      color: ${theme.colors.blue};
-      font-weight: bold;
-      /* border-radius: 5px; */
-    }
-
-    .sticky {
-      background-color: ${theme.colors.blue};
-      color: ${theme.colors.white};
-    }
-
-    .input-header {
-      background-color: ${theme.colors.white};
-      padding: 5px;
-      border-radius: 5px;
-      text-align: center;
-      display: flex;
-      justify-content: center;
-    }
-
-    .especial {
-      min-width: 50px;
-    }
-  `}
-`;
-
-export const TabelaAcoes = styled.div`
-  ${() => css`
-    display: flex;
-    gap: 8px;
-
-    td {
-      border: 1px solid red;
-      z-index: 3;
-      position: fixed;
-      right: 0;
-    }
-  `}
-`;
-
-export const TabelaBody = styled(Table.Tbody)`
-  ${({ theme }) => css`
-    min-height: 520px;
-    cursor: pointer;
-
-    tr {
-      background-color: ${theme.colors.gray['300']};
-
-      td {
-        max-width: 200px;
-        color: ${theme.colors.blackWca};
-      }
-      &:nth-child(odd) {
-        background-color: ${theme.colors.white};
-      }
-
-      &:hover {
-        opacity: 0.6;
-      }
-
-      &[data-active='true'] {
-        background-color: ${theme.colors.gray['700']};
-        color: ${theme.colors.white};
-      }
-    }
-
-    svg {
-      color: ${theme.colors.white};
-    }
-
-    .mantine-focus-auto {
-      &:hover {
-        opacity: 0.6;
-      }
-    }
-    .sticky {
-      background-color: rgba(53, 50, 164, 0.9);
-      color: ${theme.colors.white};
-      font-weight: bold;
-    }
-  `}
-`;
-
-export const TabelaFooter = styled(Table.Tfoot)`
-  ${({ theme }) => css`
-    position: absolute;
-    color: ${theme.colors.blackWca};
-
-    .linhas-selecionadas {
-      background-color: ${theme.colors.white};
-
-      td:first-child {
-        left: 0;
-        position: sticky;
-        z-index: 3;
-        text-align: end;
-        font-weight: 300;
-      }
-
-      td {
-        min-width: 200px;
-      }
-    }
-
-    .soma-total {
-      background-color: ${theme.colors.blue};
-
-      td {
-        min-width: 200px;
-        color: ${theme.colors.white};
-        font-weight: bold;
-        text-transform: uppercase;
-      }
-
-      td:first-child {
-        left: 0;
-        position: sticky;
-        z-index: 3;
-        text-align: end;
-      }
-    }
-  `}
-`;
-
-export const TabelaPaginationWrapper = styled.div`
-  ${() => css`
-    border: none;
-  `}
-`;
-
-export const TabelaStoryContainer = styled.div`
-  ${({ theme }) => css`
-    background-color: ${theme.colors.gray['300']};
-    .mrt-table-head-sort-button {
-      margin-left: 5px;
-      width: 15px;
-      height: 15px;
-    }
-  `}
-`;