wca-designsystem 0.0.42 → 0.0.43

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.42",
+  "version": "0.0.43",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/atomos/Notificacoes/Notificacoes.test.tsx

@@ -2,6 +2,20 @@ import React from 'react';
 import { render } from '../../../test/render';
 import Notificacoes, { NotificacoesProps } from './index';
 
+const mockFetch = (responseText: string) => {
+  global.fetch = jest.fn(() =>
+    Promise.resolve(({
+      ok: true,
+      status: 200,
+      text: async () => responseText,
+      headers: { get: () => 'application/xml' },
+      clone: () => this,
+    } as unknown) as Response)
+  );
+};
+
+mockFetch('');
+
 describe('Notificações', () => {
   it('Renderiza sem problemas', () => {
     const props: NotificacoesProps = {

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

@@ -3,12 +3,12 @@ import * as S from './styles';
 import { theme } from '../../../styles/theme';
 import Botao from '../../atomos/Botao';
 import SelectCustomizado from '../../atomos/Select';
-import { MRT_PaginationState } from 'mantine-react-table';
+// import { MRT_PaginationState } from 'mantine-react-table';
 
 export type PaginacaoProps = {
   tamanhoPaginacao?: number;
   quantidadeRegistros?: number;
-  setPagination: React.Dispatch<React.SetStateAction<MRT_PaginationState>>;
+  setPagination: React.Dispatch<React.SetStateAction<any>>;
   tabelaPaginacao: {
     pageIndex: number;
     pageSize: number;
@@ -57,7 +57,7 @@ const Paginacao = ({
         <div className="select-wrapper">
           <SelectCustomizado
             tipo="round"
-            onChange={(e) => changeLinhas(e!)}
+            onChange={e => changeLinhas(e!)}
             defaultValue={'10'}
             data={['10', '20', '30']}
             allowDeselect={false}
@@ -78,7 +78,7 @@ const Paginacao = ({
           value={
             tabelaPaginacao.pageIndex === 0 ? 1 : tabelaPaginacao.pageIndex
           }
-          onChange={(e) => {
+          onChange={e => {
             changePage(e);
           }}
           total={tamanhoPaginacao!}

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

@@ -22,7 +22,12 @@ describe('Relatorio Card Renderiza', () => {
   test('Relatorio criar renderiza certo', () => {
     const { getByTestId } = render(
       <>
-        <RelatorioCard {...relatorioProps} />
+        <RelatorioCard
+          relatorioTitle="Nome do Relatório 02"
+          type="criar"
+          ultimaEdicao="Editado em 02 de Abril de 2024 | 16:55"
+          color={theme.colors.blue}
+        />
       </>
     );
     const containerCriar = getByTestId('criar');

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Skeleton } from '@mantine/core';
+import * as S from './styles';
+import { Column } from '.';
+
+interface SkeletonTableProps<T extends { id: number | string }> {
+  data: Array<T>;
+  columns: Column<T>[];
+}
+
+function SkeletonTable<T extends { id: number | string }>({
+  data,
+  columns,
+}: SkeletonTableProps<T>) {
+  return (
+    <S.TabelaBody>
+      {columns?.map(row => {
+        return (
+          <tr key={row.header}>
+            {data.map(cell => (
+              <td key={cell.id}>
+                <Skeleton height={19} radius="xl" animate={true} />
+              </td>
+            ))}
+          </tr>
+        );
+      })}
+    </S.TabelaBody>
+  );
+}
+
+export default SkeletonTable;

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import Tabela from './index';
+import { theme } from '../../../styles/theme';
+
+export default {
+  title: 'Components/organismos/Tabela',
+  component: Tabela,
+} as Meta;
+
+const data: any[] = [
+  {
+    id: 1,
+    name: 'Produto 1',
+    price: '$10',
+    exemplo: 'opa',
+    exemplo2: 'opa2',
+  },
+  {
+    id: 2,
+    name: 'Produto 2',
+    price: '$15',
+    exemplo: 'opa',
+    exemplo2: 'opa2',
+  },
+  {
+    id: 3,
+    name: 'Produto 3',
+    price: '$20',
+    exemplo: 'opa',
+    exemplo2: 'opa2',
+  },
+  {
+    id: 4,
+    name: 'Produto 3',
+    price: '$20',
+    exemplo: 'opa',
+    exemplo2: 'opa2',
+  },
+  {
+    id: 5,
+    name: 'Produto 3',
+    price: '$20',
+    exemplo: 'opa',
+    exemplo2: 'opa2',
+  },
+  {
+    id: 6,
+    name: 'Produto 3',
+    price: '$20',
+    exemplo: 'opa',
+    exemplo2: 'opa2',
+  },
+];
+
+const columns: any = [
+  { key: 'id', header: 'ID' },
+  { key: 'name', header: 'Nome' },
+  { key: 'price', header: 'Preço' },
+  { key: 'exemplo', header: 'Exemplo' },
+  { key: 'exemplo2', header: 'Exemplo2' },
+];
+
+const Template: any = (args: any) => (
+  <>
+    <Tabela {...args} />
+  </>
+);
+
+export const TabelaProps = Template.bind({});
+
+TabelaProps.args = {
+  data: data,
+  columns: columns,
+  color: theme.colors.blue,
+  tabelaPaginacao: {
+    pageIndex: 1,
+    pageSize: 10,
+  },
+  setFiltrosPor: () => console.log('aqui'),
+  setGlobalFilter: () => console.log('aqui'),
+  setPagination: () => console.log('aqui'),
+  setSimples: () => console.log('aqui'),
+};

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import Tabela from '.';
+import { render } from '../../../test/render';
+
+describe('Paginação', () => {
+  const data: any[] = [
+    {
+      id: 1,
+      name: 'Produto 1',
+      price: '$10',
+      exemplo: 'opa',
+      exemplo2: 'opa2',
+    },
+    {
+      id: 2,
+      name: 'Produto 2',
+      price: '$15',
+      exemplo: 'opa',
+      exemplo2: 'opa2',
+    },
+    {
+      id: 3,
+      name: 'Produto 3',
+      price: '$20',
+      exemplo: 'opa',
+      exemplo2: 'opa2',
+    },
+    {
+      id: 4,
+      name: 'Produto 3',
+      price: '$20',
+      exemplo: 'opa',
+      exemplo2: 'opa2',
+    },
+    {
+      id: 5,
+      name: 'Produto 3',
+      price: '$20',
+      exemplo: 'opa',
+      exemplo2: 'opa2',
+    },
+    {
+      id: 6,
+      name: 'Produto 3',
+      price: '$20',
+      exemplo: 'opa',
+      exemplo2: 'opa2',
+    },
+  ];
+
+  const columns: any = [
+    { key: 'id', header: 'ID' },
+    { key: 'name', header: 'Nome' },
+    { key: 'price', header: 'Preço' },
+    { key: 'exemplo', header: 'Exemplo' },
+    { key: 'exemplo2', header: 'Exemplo2' },
+  ];
+
+  test('Renderizando corretamente', () => {
+    const { getByText } = render(
+      <Tabela
+        data={data}
+        columns={columns}
+        tabelaPaginacao={{
+          pageIndex: 1,
+          pageSize: 10,
+        }}
+        setSimples={() => console.log('aqui')}
+        filtrosPor={{ label: 'exemplo', value: 'exemplo' }}
+        setFiltrosPor={() => console.log('aqui')}
+        setGlobalFilter={() => console.log('aqui')}
+        setPagination={() => console.log('aqui')}
+      />
+    );
+
+    expect(getByText('Anterior')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Checkbox } from '@mantine/core';
+import { Column } from '.';
+import * as S from './styles';
+import { useCallback } from 'react';
+import { theme } from '../../../styles/theme';
+
+export interface BodyTableProps<T extends { id: string | number }> {
+  data: Array<T>;
+  columns: Column<T>[];
+  fixedPosition?: string[] | undefined;
+  color?: string;
+  acoesChildren?: JSX.Element;
+  calcStickPosition?: (index: number) => number;
+  hasSelect?: boolean;
+  rowSelection?: Array<T>;
+  setRowSelection?: React.Dispatch<React.SetStateAction<Array<T>>> | undefined;
+}
+
+function BodyTable<T extends { id: string | number }>({
+  data,
+  columns,
+  acoesChildren,
+  hasSelect,
+  rowSelection,
+  setRowSelection,
+  color,
+}: BodyTableProps<T>) {
+  const handleRowSelect = useCallback(
+    (item: T, checked: boolean) => {
+      if (checked) {
+        setRowSelection!(
+          rowSelection?.filter(rowSelect => rowSelect.id !== item.id) ?? []
+        );
+        return;
+      }
+      setRowSelection!(prev => [...prev, item]);
+    },
+    [rowSelection, setRowSelection]
+  );
+  return (
+    <S.TabelaBody>
+      {data.map((item, rowIndex) => (
+        <tr key={rowIndex}>
+          {hasSelect && (
+            <td className="select">
+              <Checkbox
+                size="md"
+                color={color}
+                type="checkbox"
+                checked={rowSelection!.some(
+                  itemSome => item.id === itemSome.id
+                )}
+                onChange={() =>
+                  handleRowSelect(
+                    item,
+                    rowSelection!.some(itemSome => item.id === itemSome.id)
+                  )
+                }
+              />
+            </td>
+          )}
+          {columns.map(column => (
+            <td
+              key={String(column.key)}
+              style={{
+                background: rowSelection?.some(row => row.id === item.id)
+                  ? theme.colors.gray['500']
+                  : 'transparent',
+              }}
+            >
+              {column.key === 'acoes' ? (
+                <>{acoesChildren}</>
+              ) : (
+                <>
+                  {column.render
+                    ? column.render(item[column.key])
+                    : String(item[column.key])}
+                </>
+              )}
+            </td>
+          ))}
+        </tr>
+      ))}
+    </S.TabelaBody>
+  );
+}
+
+export default BodyTable;

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

@@ -0,0 +1,153 @@
+import React from 'react';
+import { Switch } from '@mantine/core';
+import * as S from './styles';
+import { Column } from '.';
+import buscar from '../../../assets/imagens/icons/Busca.svg';
+import { useCallback } from 'react';
+import { theme } from '../../../styles/theme';
+import InputDeTexto from '../../atomos/InputDeTexto';
+import Icone from '../../atomos/Icone';
+
+type HeaderTabelaProps<T> = {
+  columns: Column<T>[];
+  fixedPosition: Array<String>;
+  calcStickPosition?: (index: number) => number;
+  onFilterColunas: (id: string, value: unknown) => void;
+  headerSelection?: Array<String>;
+  color?: string;
+  toogleFiltros: boolean;
+  hasSelect?: boolean;
+  setSimples: React.Dispatch<React.SetStateAction<boolean>>;
+  setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
+  setPagination: React.Dispatch<any>;
+  setFiltrosPor: React.Dispatch<
+    React.SetStateAction<{
+      value: string;
+      label: string;
+    }>
+  >;
+};
+const HeaderTabela = <T,>({
+  columns,
+  fixedPosition,
+  color,
+  hasSelect,
+  headerSelection,
+  toogleFiltros,
+  calcStickPosition,
+  setFiltrosPor,
+  setGlobalFilter,
+  setPagination,
+  setSimples,
+  onFilterColunas,
+}: HeaderTabelaProps<T>) => {
+  const coloredHeader = useCallback(
+    (key: string | number | symbol) => {
+      if (!headerSelection) {
+        return { background: color, color: theme.colors.white! };
+      }
+
+      const isHeaderSelect = headerSelection?.some(
+        headerSelect => headerSelect === key
+      );
+
+      if (isHeaderSelect) {
+        return { background: color!, color: theme.colors.white };
+      } else {
+        return { background: theme.colors.white, color: color! };
+      }
+    },
+    [headerSelection]
+  );
+  return (
+    <S.TabelaHeader color={color}>
+      <tr>
+        {hasSelect && <th className="select">*</th>}
+        {columns.map((header, index) => {
+          if (header.key !== 'acoes') {
+            return (
+              <th
+                key={index}
+                className={
+                  fixedPosition?.some(fixed => header.key === fixed)
+                    ? 'sticky'
+                    : ''
+                }
+                style={{
+                  background: coloredHeader(header.key).background,
+                  color: coloredHeader(header.key).color,
+                  left: fixedPosition?.some(fixed => header.key === fixed)
+                    ? calcStickPosition!(index)
+                    : 0,
+                }}
+              >
+                {toogleFiltros ? (
+                  <div className="input-header">
+                    {header.key === 'ativo' ? (
+                      <Switch
+                        defaultChecked
+                        label="ativo"
+                        color={color}
+                        onChange={e => {
+                          setSimples(false);
+                          setFiltrosPor({
+                            label: 'Ativo',
+                            value: 'ativo',
+                          });
+                          setGlobalFilter(String(e.currentTarget.checked));
+                          setPagination({ pageIndex: 0, pageSize: 10 });
+                        }}
+                      />
+                    ) : (
+                      <InputDeTexto
+                        color={color}
+                        disabled={
+                          header.key === 'email' || header.key === 'modulos'
+                        }
+                        tipo="table"
+                        placeholder={`Pesquisar por: ${header.header}`}
+                        onChange={e => {
+                          setPagination({ pageIndex: 0, pageSize: 10 });
+                          setFiltrosPor({
+                            label: header.header,
+                            value:
+                              header.key === 'nome'
+                                ? 'nomeCompleto'
+                                : String(header.key),
+                          });
+                          setGlobalFilter(e.currentTarget.value);
+                          onFilterColunas(
+                            String(header.key),
+                            e.currentTarget.value
+                          );
+                        }}
+                        leftSection={<Icone fill={color} svg={buscar} />}
+                      />
+                    )}
+                  </div>
+                ) : (
+                  <>{header.key === 'ativo' ? 'Status' : header.header}</>
+                )}
+              </th>
+            );
+          } else {
+            return (
+              <th
+                key={header.key}
+                className={'especial sticky'}
+                style={{
+                  left: index === 0 ? '0' : '50px',
+                  right: header.key === 'mrt-row-actions' ? '0' : undefined,
+                }}
+              >
+                <p>Ações</p>
+              </th>
+            );
+          }
+        })}
+      </tr>
+    </S.TabelaHeader>
+  );
+};
+
+export default HeaderTabela;

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import BodyTable from './body';
+import HeaderTabela from './header';
+import Paginacao from './pagination';
+import SkeletonTable from './SkeletonTable';
+import * as S from './styles';
+import filtrar from '../../../assets/imagens/icons/Filtrar.svg';
+import { useState } from 'react';
+import IconeBotao from '../../atomos/IconeBotao';
+import Icone from '../../atomos/Icone';
+
+// Tipo genérico para as colunas
+export type Column<T> = {
+  key: keyof T;
+  header: string;
+  render?: (value: T[keyof T]) => React.ReactNode;
+};
+
+export type CustomTableProps<T extends { id: string | number }> = {
+  data: T[];
+  columns: Column<T>[];
+  fixedPosition?: Array<String>;
+  acoesChildren?: JSX.Element;
+  hasSelect?: boolean;
+  headerSelection?: Array<String>;
+  rowSelection?: Array<T>;
+  setRowSelection?: React.Dispatch<React.SetStateAction<Array<T>>> | undefined;
+  isLoading?: boolean;
+  color?: string;
+  setSimples: React.Dispatch<React.SetStateAction<boolean>>;
+  setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
+  setPagination: React.Dispatch<any>;
+  filtrosPor: {
+    value: string;
+    label: string;
+  };
+  setFiltrosPor: React.Dispatch<
+    React.SetStateAction<{
+      value: string;
+      label: string;
+    }>
+  >;
+  tabelaPaginacao: {
+    pageIndex: number;
+    pageSize: number;
+  };
+};
+
+const Tabela = <T extends { id: string | number }>({
+  data,
+  columns,
+  setPagination,
+  acoesChildren,
+  color,
+  rowSelection,
+  setRowSelection,
+  isLoading,
+  hasSelect,
+  setFiltrosPor,
+  setGlobalFilter,
+  headerSelection,
+  setSimples,
+  tabelaPaginacao,
+  fixedPosition,
+}: CustomTableProps<T>) => {
+  const [toogleFiltros, setToogleFiltros] = useState(false);
+  return (
+    <S.TableWrapper>
+      <S.TableContainer>
+        <S.ToogleButton>
+          <IconeBotao
+            tipo="table"
+            color={color}
+            toolTipInfo="Filtros especificos"
+            onClick={() => setToogleFiltros(!toogleFiltros)}
+          >
+            <Icone svg={filtrar} fill={color} width={20} />
+          </IconeBotao>
+        </S.ToogleButton>
+        <S.StyledTable>
+          <HeaderTabela
+            headerSelection={headerSelection}
+            toogleFiltros={toogleFiltros}
+            setFiltrosPor={setFiltrosPor}
+            setGlobalFilter={setGlobalFilter}
+            setPagination={setPagination}
+            setSimples={setSimples}
+            color={color}
+            hasSelect={hasSelect}
+            columns={columns}
+            fixedPosition={fixedPosition!}
+            onFilterColunas={id => console.log(id)}
+          />
+          {isLoading ? (
+            <SkeletonTable columns={columns} data={data} />
+          ) : (
+            <BodyTable
+              color={color}
+              hasSelect={hasSelect}
+              rowSelection={rowSelection}
+              setRowSelection={setRowSelection}
+              acoesChildren={acoesChildren}
+              data={data}
+              columns={columns}
+            />
+          )}
+        </S.StyledTable>
+      </S.TableContainer>
+      <Paginacao
+        color={color}
+        setPagination={setPagination}
+        tabelaPaginacao={tabelaPaginacao}
+        quantidadeRegistros={10}
+        tamanhoPaginacao={5}
+      />
+    </S.TableWrapper>
+  );
+};
+
+export default Tabela;

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import * as S from './styles';
+import SelectCustomizado from '../../atomos/Select';
+import Botao from '../../atomos/Botao';
+
+export type PaginacaoProps = {
+  tamanhoPaginacao?: number;
+  color?: string;
+  quantidadeRegistros?: number;
+  setPagination: React.Dispatch<
+    React.SetStateAction<{ pageIndex: number; pageSize: number }>
+  >;
+  tabelaPaginacao: {
+    pageIndex: number;
+    pageSize: number;
+  };
+};
+
+const Paginacao = ({
+  tabelaPaginacao,
+  color,
+  tamanhoPaginacao,
+  setPagination,
+  quantidadeRegistros,
+}: PaginacaoProps) => {
+  function nextPage() {
+    if (tabelaPaginacao.pageIndex + 1 > tabelaPaginacao.pageSize) {
+      return;
+    }
+    setPagination({ pageIndex: tabelaPaginacao.pageIndex + 1, pageSize: 10 });
+  }
+
+  function previousPage() {
+    if (tabelaPaginacao.pageIndex <= 0) {
+      return;
+    }
+    setPagination({ pageIndex: tabelaPaginacao.pageIndex - 1, pageSize: 10 });
+  }
+
+  function changePage(e: number) {
+    setPagination({ pageIndex: e, pageSize: 10 });
+  }
+
+  function changeLinhas(e: string) {
+    setPagination({
+      pageIndex: tabelaPaginacao.pageIndex,
+      pageSize: Number(e),
+    });
+  }
+
+  return (
+    <S.PaginacaoWrapper color={color}>
+      <div className="pagination-header">
+        <p>
+          Exibindo{' '}
+          {tabelaPaginacao.pageIndex === 0 ? 1 : tabelaPaginacao.pageIndex} de{' '}
+          {quantidadeRegistros}
+        </p>
+        <div className="select-wrapper">
+          <SelectCustomizado
+            tipo="round"
+            onChange={e => changeLinhas(e!)}
+            defaultValue={'10'}
+            data={['10', '20', '30']}
+            allowDeselect={false}
+          />
+        </div>
+      </div>
+      <S.PaginationButtons color={color}>
+        <Botao
+          color={color}
+          data-testid="Anterior"
+          className="button-pagination"
+          tipo="default"
+          disabled={tabelaPaginacao.pageIndex === 1}
+          onClick={() => previousPage()}
+        >
+          Anterior
+        </Botao>
+        <S.PaginationMantine
+          value={
+            tabelaPaginacao.pageIndex === 0 ? 1 : tabelaPaginacao.pageIndex
+          }
+          onChange={e => {
+            changePage(e);
+          }}
+          total={tamanhoPaginacao!}
+          withControls={false}
+          color={color}
+        />
+        <Botao
+          color={color}
+          data-testid="Proximo"
+          tipo={'default'}
+          disabled={tamanhoPaginacao === tabelaPaginacao.pageIndex}
+          onClick={() => nextPage()}
+          className="button-pagination"
+        >
+          Próximo
+        </Botao>
+      </S.PaginationButtons>
+    </S.PaginacaoWrapper>
+  );
+};
+
+export default Paginacao;

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

@@ -0,0 +1,196 @@
+import styled, { css } from 'styled-components'
+import { Pagination } from '@mantine/core'
+
+type ColorsProp = {
+  color?: string
+  headerSelection?: Array<String>
+}
+
+export const TableWrapper = styled.div`
+  ${() => css`
+    max-width: 1500px;
+    overflow-x: hidden;
+  `}
+`
+
+export const TableContainer = styled.div`
+  overflow-x: auto;
+  border-radius: 5px;
+  font-family: 'Open Sans', sans-serif;
+`
+
+export const ToogleButton = styled.div`
+  ${() => css`
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    margin-left: auto;
+  `}
+`
+
+export const StyledTable = styled.table`
+  ${({ theme }) => css`
+    width: 100%;
+    border-collapse: collapse;
+
+    th,
+    td {
+      border-bottom: 1px solid ${theme.colors.gray['300']};
+      font-size: ${theme.sizes.meddium};
+    }
+
+    th {
+      background-color: ${theme.colors.gray['300']};
+      font-weight: 400;
+    }
+
+    tr:nth-child(even) {
+      background-color: ${theme.colors.white};
+    }
+
+    tr:hover {
+      background-color: ${theme.colors.gray['700']};
+    }
+
+    th.select {
+      min-width: 50px;
+      padding: 0;
+    }
+  `}
+`
+
+export const TabelaHeader = styled.thead<ColorsProp>`
+  ${({ theme, color }) => css`
+    th {
+      min-width: 200px;
+      text-align: center;
+      padding: 5px;
+      background-color: ${color};
+      opacity: 0.8;
+      color: ${theme.colors.white};
+      font-weight: bold;
+    }
+
+    .sticky {
+      background-color: ${color};
+      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 TabelaBody = styled.tbody`
+  ${({ theme }) => css`
+    /* height: 430px; */
+    width: 100%;
+
+    tr {
+      background-color: ${theme.colors.gray['300']};
+
+      td {
+        cursor: pointer;
+        text-align: center;
+        color: ${theme.colors.blackWca};
+        height: 40px;
+        font-size: ${theme.sizes.small};
+      }
+
+      &:hover {
+        opacity: 0.8;
+        background: ${theme.colors.white};
+      }
+
+      &[data-active='true'] {
+        background-color: ${theme.colors.gray['500']};
+        color: ${theme.colors.white};
+      }
+
+      td.select {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 42px;
+      }
+    }
+
+    svg {
+      color: ${theme.colors.white};
+    }
+
+    .sticky {
+      background-color:;
+      color: ${theme.colors.white};
+      font-weight: bold;
+    }
+  `}
+`
+
+export const PaginacaoWrapper = styled.div<ColorsProp>`
+  ${({ theme, color }) => css`
+    color: ${color};
+    font-size: ${theme.sizes.small};
+    font-weight: bold;
+    text-align: center;
+    margin: 30px auto;
+    max-width: 455px;
+
+    .pagination-header {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .select-wrapper {
+      width: 85px;
+      margin-left: 15px;
+    }
+  `}
+`
+
+export const PaginationMantine = styled(Pagination)`
+  ${({ theme }) => css`
+    margin: 15px 0;
+
+    button {
+      color: ${theme.colors.gray['700']};
+      font-weight: 500;
+      font-size: ${theme.sizes.meddium};
+
+      &[data-active='true'] {
+        color: ${theme.colors.white};
+      }
+    }
+  `}
+`
+
+export const PaginationButtons = styled.div<ColorsProp>`
+  ${({ theme, color }) => css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+
+    .button-pagination {
+      border: 1px solid red;
+      height: 32px;
+      border: none;
+      color: ${color};
+      background-color: ${theme.colors.white};
+      border-radius: 5px;
+      font-weight: 500;
+      font-size: ${theme.sizes.small};
+      padding: 0 15px;
+    }
+  `}
+`

package/src/test/render.tsx

@@ -62,7 +62,7 @@ beforeEach(() => {
   // Mock de matchMedia específico para esse teste
   Object.defineProperty(window, 'matchMedia', {
     writable: true,
-    value: jest.fn().mockImplementation((query) => ({
+    value: jest.fn().mockImplementation(query => ({
       matches: false, // Aqui você pode ajustar de acordo com suas necessidades de teste
       media: query,
       onchange: null,

package/src/utils/tableLocale.ts

@@ -1,6 +1,6 @@
-import { MRT_Localization } from 'mantine-react-table';
+// import { MRT_Localization } from 'mantine-react-table';
 
-export const MRT_Localization_PT_BR: MRT_Localization = {
+export const MRT_Localization_PT_BR = {
   actions: 'Ações',
   and: 'e',
   cancel: 'Cancelar',

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

@@ -1,36 +0,0 @@
-import React from 'react';
-import TabelaHeader, { TabelaHeaderProps } from './index';
-import { Meta } from '@storybook/react';
-
-export default {
-  title: 'Components/moleculas/TabelaHeader',
-  component: TabelaHeader,
-} as Meta;
-
-const props: TabelaHeaderProps<any> = {
-  setPagination: () => console.log('aqui'),
-  setSimples: () => console.log('aqui'),
-  filtrosPelaTabela: [{ label: 'exemplo', value: 'exemplo' }],
-  filtrosPor: { label: 'exemplo', value: 'exemplo' },
-  setGlobalFilter: () => console.log('aqui'),
-  ordenarPor: { label: 'exemplo', value: 'exemplo' },
-  setFiltrosPor: () => console.log('aqui'),
-  setOrdenarPor: () => console.log('aqui'),
-  setToogleBuscarColuna: () => console.log('aqui'),
-  toogleBuscarColuna: false,
-  btnAdicionar: false,
-};
-
-const Template: any = (args: TabelaHeaderProps<any>) => (
-  <>
-    <TabelaHeader {...args} />
-  </>
-);
-
-export const TabelaHeaderStory = Template.bind({
-  ...props,
-});
-
-TabelaHeaderStory.args = {
-  ...props,
-};

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

@@ -1,53 +0,0 @@
-import React from 'react';
-import { render } from '../../../test/render';
-import TabelaHeader, { SelectDataProps } from './index';
-
-describe('Tabela Header', () => {
-  const mockFilterPor: SelectDataProps = { value: 'exemplo', label: 'exemplo' };
-
-  it('Renderiza corretamente', () => {
-    const { getByText } = render(
-      <TabelaHeader
-        btnAdicionar={false}
-        setSimples={() => console.log('auqi')}
-        setPagination={() => console.log('auqi')}
-        toogleBuscarColuna={false}
-        setToogleBuscarColuna={() => console.log('aqui')}
-        setGlobalFilter={() => console.log('aqui')}
-        filtrosPelaTabela={[]}
-        filtrosPor={mockFilterPor}
-        ordenarPor={mockFilterPor}
-        setFiltrosPor={() => console.log('aqui')}
-        setOrdenarPor={() => console.log('aqui')}
-        tituloTabela="exemplo"
-      />
-    );
-
-    const titulo = getByText('exemplo');
-    expect(titulo).toBeDefined();
-  });
-  it('botões disparam', () => {
-    const onClickEvent = jest.fn();
-
-    const { getByText } = render(
-      <TabelaHeader
-        btnAdicionar={false}
-        setSimples={() => console.log('auqi')}
-        setPagination={() => console.log('auqi')}
-        toogleBuscarColuna={false}
-        setToogleBuscarColuna={() => console.log('aqui')}
-        setGlobalFilter={() => console.log('aqui')}
-        filtrosPelaTabela={[]}
-        filtrosPor={mockFilterPor}
-        ordenarPor={mockFilterPor}
-        setFiltrosPor={onClickEvent}
-        setOrdenarPor={onClickEvent}
-        tituloTabela="exemplo"
-        exportarXlsx={onClickEvent}
-      />
-    );
-    const botaoExportarXlsx = getByText('Baixar Planilha de Dados');
-    botaoExportarXlsx.click();
-    expect(onClickEvent).toHaveBeenCalled();
-  });
-});

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

@@ -1,178 +0,0 @@
-import React from 'react';
-import { theme } from '../../../styles/theme';
-import Icone from '../../atomos/Icone';
-import SelectCustomizado from '../../atomos/Select';
-import ordernar from '../../../assets/imagens/icons/Ordernar.svg';
-import filtrar from '../../../assets/imagens/icons/Filtrar.svg';
-import baixarDados from '../../../assets/imagens/icons/BaixarPlanilha.svg';
-import buscar from '../../../assets/imagens/icons/Busca.svg';
-import mais from '../../../assets/imagens/icons/Mais.svg';
-import * as S from './styles';
-import Botao from '../../atomos/Botao';
-import InputDeTexto from '../../atomos/InputDeTexto';
-import {
-  MRT_PaginationState,
-  MRT_RowData,
-  MRT_TableInstance,
-  MRT_ToggleFiltersButton,
-} from 'mantine-react-table';
-import { ComboboxData } from '@mantine/core';
-import { MRT_ShowHideColumnsButton } from 'mantine-react-table';
-
-export type SelectDataProps = {
-  label: string;
-  value: string;
-};
-
-export type TabelaHeaderProps<T extends MRT_RowData> = {
-  tituloTabela?: string;
-  setOrdenarPor: React.Dispatch<React.SetStateAction<SelectDataProps>>;
-  ordenarPor: SelectDataProps;
-  setFiltrosPor: React.Dispatch<React.SetStateAction<SelectDataProps>>;
-  filtrosPor: SelectDataProps;
-  btnAdicionar: boolean;
-  handleAdicionar?: () => void;
-  exportarXlsx?: () => void;
-  filtrosPelaTabela: ComboboxData | undefined;
-  setGlobalFilter: React.Dispatch<React.SetStateAction<string>>;
-  setToogleBuscarColuna: React.Dispatch<React.SetStateAction<boolean>>;
-  toogleBuscarColuna: boolean;
-  table?: MRT_TableInstance<T>;
-  setPagination: React.Dispatch<React.SetStateAction<MRT_PaginationState>>;
-  setSimples: React.Dispatch<React.SetStateAction<boolean>>;
-};
-const TabelaHeader = <T extends MRT_RowData>({
-  tituloTabela,
-  setOrdenarPor,
-  ordenarPor,
-  filtrosPor,
-  setFiltrosPor,
-  setPagination,
-  setSimples,
-  exportarXlsx,
-  btnAdicionar,
-  handleAdicionar,
-  filtrosPelaTabela,
-  setGlobalFilter,
-  setToogleBuscarColuna,
-  table,
-  toogleBuscarColuna,
-}: TabelaHeaderProps<T>) => {
-  /* exporta os dados para XLSX */
-
-  return (
-    <>
-      <S.TabelaHeaderContainer>
-        <h2>{tituloTabela}</h2>
-
-        <div className="direita">
-          <InputDeTexto
-            placeholder="Pesquisar na Tabela"
-            maw={180}
-            tipo="table"
-            leftSection={<Icone fill={theme.colors.blue} svg={buscar} />}
-            onChange={e => {
-              setSimples(true);
-              setPagination({ pageIndex: 0, pageSize: 10 });
-              setGlobalFilter(e.currentTarget.value);
-            }}
-          />
-
-          <SelectCustomizado
-            tipo="table"
-            maw={160}
-            data={filtrosPelaTabela}
-            onChange={(_value, option) => setFiltrosPor(option)}
-            value={filtrosPor ? filtrosPor.value : null}
-            placeholder={`Aplicar Filtros`}
-            allowDeselect={false}
-            comboboxProps={{
-              position: 'bottom',
-              middlewares: { flip: false, shift: false },
-              offset: 0,
-            }}
-            leftSection={
-              <Icone
-                width={15}
-                height={15}
-                fill={theme.colors.blue}
-                svg={filtrar}
-              />
-            }
-          />
-          <SelectCustomizado
-            tipo="table"
-            data={[
-              { value: 'Maior', label: 'Ordenar por: Maior' },
-              { value: 'Menor', label: 'Ordenar por: Menor' },
-            ]}
-            onChange={(_value, option) => setOrdenarPor(option)}
-            value={ordenarPor ? ordenarPor.value : null}
-            allowDeselect={false}
-            placeholder={`Ordenar por ${ordenarPor}`}
-            maw={200}
-            comboboxProps={{
-              position: 'bottom',
-              middlewares: { flip: false, shift: false },
-              offset: 0,
-            }}
-            leftSection={
-              <Icone
-                width={15}
-                height={15}
-                fill={theme.colors.blue}
-                svg={ordernar}
-              />
-            }
-          />
-          {exportarXlsx && (
-            <Botao
-              onClick={() => exportarXlsx!()}
-              leftSection={
-                <Icone
-                  svg={baixarDados}
-                  width={20}
-                  height={20}
-                  fill={theme.colors.blue}
-                />
-              }
-              tipo="table"
-            >
-              Baixar Planilha de Dados
-            </Botao>
-          )}
-
-          {btnAdicionar && (
-            <Botao
-              onClick={() => handleAdicionar!()}
-              tipo="default"
-              mah={35}
-              color={theme.colors.blue}
-              variant="outline"
-              leftSection={<Icone svg={mais} fill={theme.colors.blue} />}
-            >
-              Adicionar
-            </Botao>
-          )}
-        </div>
-      </S.TabelaHeaderContainer>
-      {table && (
-        <S.TabelaHeaderIcons>
-          <div className="mostrar-colunas">
-            <MRT_ShowHideColumnsButton table={table!} />
-          </div>
-          <div className="mostrar-colunas">
-            <MRT_ToggleFiltersButton
-              table={table!}
-              onClick={() => {
-                setToogleBuscarColuna(!toogleBuscarColuna);
-              }}
-            />
-          </div>
-        </S.TabelaHeaderIcons>
-      )}
-    </>
-  );
-};
-
-export default TabelaHeader;

package/src/components/molecules/TabelaHeader/styles.ts

@@ -1,51 +0,0 @@
-import styled, { css } from "styled-components";
-
-export const TabelaHeaderContainer = styled.div`
-  ${({ theme }) => css`
-    padding: 20px 0 15px 0;
-    /* border-bottom: 1px dotted ${theme.colors.blue}; */
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 20px;
-    max-width: 100%;
-    overflow: auto;
-    flex-wrap: wrap;
-
-    h2 {
-      font-size: ${theme.sizes.large};
-      color: ${theme.colors.blue};
-    }
-
-    .direita {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 20px;
-    }
-  `}
-`;
-
-export const TabelaHeaderIcons = styled.div`
-  ${({ theme }) => css`
-    margin-bottom: 5px;
-    display: flex;
-    align-items: end;
-    justify-content: end;
-    gap: 5px;
-
-    .mostrar-colunas {
-      border: 1px solid ${theme.colors.blue};
-      border-radius: 5px;
-      width: 32px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      svg {
-        color: ${theme.colors.blue};
-      }
-    }
-  `}
-`;