wca-designsystem 0.0.48 → 0.0.50

package/package.json

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

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

@@ -203,5 +203,7 @@ TabelaProps.args = {
   setFiltrosPor: () => console.log('aqui'),
   setGlobalFilter: () => console.log('aqui'),
   setPagination: () => console.log('aqui'),
+  quantidadeDeRegistros: 10,
+  tamanhoPaginacao: 97,
   setSimples: () => console.log('aqui'),
 };

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

@@ -3,8 +3,8 @@ import { Checkbox } from '@mantine/core';
 import { Column } from '.';
 import * as S from './styles';
 import { theme } from '../../../styles/theme';
-import Icone from '../../atomos/Icone';
 import SetaBaixo from '../../../assets/imagens/icons/SetaAbaixo.svg';
+import Icone from '../../atomos/Icone';
 
 export interface BodyTableProps<
   T extends { id: string | number; children: Array<T> }
@@ -187,7 +187,7 @@ function BodyTable<T extends { id: string | number; children: Array<T> }>(
     ];
   }
   return (
-    <S.TabelaBody color={color} hasselect={hasSelect ? 'true' : 'false'}>
+    <S.TabelaBody color={color} style={{ left: hasSelect ? '52px' : '17px' }}>
       {data.flatMap(item =>
         renderRows(
           item,

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

@@ -5,9 +5,9 @@ import { Column } from '.';
 import buscar from '../../../assets/imagens/icons/Busca.svg';
 import { useCallback } from 'react';
 import { theme } from '../../../styles/theme';
+import { Capitalize } from '../../../utils/functions';
 import InputDeTexto from '../../atomos/InputDeTexto';
 import Icone from '../../atomos/Icone';
-import { Capitalize } from '../../../utils/functions';
 
 type HeaderOptions = {
   [key: string | number | symbol]: string; // Um índice genérico para mapear headers a valores
@@ -77,7 +77,7 @@ const HeaderTabela = <T,>({
     return especialHeaders[header] ?? Capitalize(String(header));
   }, []);
   return (
-    <S.TabelaHeader color={color} style={{ minWidth: `${tdMinWidth}` }}>
+    <S.TabelaHeader color={color}>
       <tr>
         {hasExpand && <></>}
         {hasSelect && <></>}
@@ -94,6 +94,7 @@ const HeaderTabela = <T,>({
                     : ''
                 }
                 style={{
+                  minWidth: tdMinWidth,
                   background: coloredHeader(header.key).background,
                   color: coloredHeader(header.key).color,
                   left: fixedPosition?.some(fixed => header.key === fixed)
@@ -115,7 +116,7 @@ const HeaderTabela = <T,>({
                             value: 'ativo',
                           });
                           setGlobalFilter(String(e.currentTarget.checked));
-                          setPagination({ pageIndex: 0, pageSize: 10 });
+                          setPagination({ pageIndex: 1, pageSize: 10 });
                         }}
                       />
                     ) : (
@@ -127,7 +128,7 @@ const HeaderTabela = <T,>({
                         tipo="table"
                         placeholder={`Pesquisar por: ${header.header}`}
                         onChange={e => {
-                          setPagination({ pageIndex: 0, pageSize: 10 });
+                          setPagination({ pageIndex: 1, pageSize: 10 });
                           setFiltrosPor({
                             label: header.header,
                             value:

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

@@ -3,13 +3,16 @@ import * as S from './styles';
 import SelectCustomizado from '../../atomos/Select';
 import Botao from '../../atomos/Botao';
 
+export type PaginationProps = {
+  pageIndex: number;
+  pageSize: number;
+};
+
 export type PaginacaoProps = {
   tamanhoPaginacao?: number;
   color?: string;
   quantidadeRegistros?: number;
-  setPagination: React.Dispatch<
-    React.SetStateAction<{ pageIndex: number; pageSize: number }>
-  >;
+  setPagination: React.Dispatch<React.SetStateAction<PaginationProps>>;
   tabelaPaginacao: {
     pageIndex: number;
     pageSize: number;
@@ -27,18 +30,27 @@ const Paginacao = ({
     if (tabelaPaginacao.pageIndex + 1 > tabelaPaginacao.pageSize) {
       return;
     }
-    setPagination({ pageIndex: tabelaPaginacao.pageIndex + 1, pageSize: 10 });
+    setPagination({
+      pageIndex: tabelaPaginacao.pageIndex + 1,
+      pageSize: tabelaPaginacao.pageSize ?? 10,
+    });
   }
 
   function previousPage() {
     if (tabelaPaginacao.pageIndex <= 0) {
       return;
     }
-    setPagination({ pageIndex: tabelaPaginacao.pageIndex - 1, pageSize: 10 });
+    setPagination({
+      pageIndex: tabelaPaginacao.pageIndex - 1,
+      pageSize: tabelaPaginacao.pageSize ?? 10,
+    });
   }
 
   function changePage(e: number) {
-    setPagination({ pageIndex: e, pageSize: 10 });
+    setPagination({
+      pageIndex: e,
+      pageSize: tabelaPaginacao.pageSize ?? 10,
+    });
   }
 
   function changeLinhas(e: string) {
@@ -52,9 +64,7 @@ const Paginacao = ({
     <S.PaginacaoWrapper color={color}>
       <div className="pagination-header">
         <p>
-          Exibindo{' '}
-          {tabelaPaginacao.pageIndex === 0 ? 1 : tabelaPaginacao.pageIndex} de{' '}
-          {quantidadeRegistros}
+          Exibindo {tabelaPaginacao.pageIndex} de {quantidadeRegistros}
         </p>
         <div className="select-wrapper">
           <SelectCustomizado
@@ -81,9 +91,7 @@ const Paginacao = ({
           Anterior
         </Botao>
         <S.PaginationMantine
-          value={
-            tabelaPaginacao.pageIndex === 0 ? 1 : tabelaPaginacao.pageIndex
-          }
+          value={tabelaPaginacao.pageIndex}
           onChange={e => {
             changePage(e);
           }}

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

@@ -1,19 +1,19 @@
-import styled, { css } from 'styled-components';
-import { Pagination } from '@mantine/core';
+import styled, { css } from 'styled-components'
+import { Pagination } from '@mantine/core'
 
 type ColorsProp = {
-  color?: string;
-  headerSelection?: Array<String>;
-  hasselect?: string;
-  tdMinWidth?: string;
-};
+  color?: string
+  headerSelection?: Array<String>
+  hasselect?: string
+  tdMinWidth?: string
+}
 
 export const TableWrapper = styled.div`
   ${() => css`
     max-width: 1500px;
     overflow-x: hidden;
   `}
-`;
+`
 
 export const TableContainer = styled.div`
   overflow-x: auto;
@@ -21,7 +21,7 @@ export const TableContainer = styled.div`
   font-family: 'Open Sans', sans-serif;
   max-width: 1500px;
   width: 100%;
-`;
+`
 
 export const StyledTable = styled.table`
   ${({ theme }) => css`
@@ -52,7 +52,7 @@ export const StyledTable = styled.table`
       padding: 0;
     }
   `}
-`;
+`
 
 export const TabelaHeader = styled.thead<ColorsProp>`
   ${({ theme, color }) => css`
@@ -90,11 +90,11 @@ export const TabelaHeader = styled.thead<ColorsProp>`
       min-width: 50px;
     }
   `}
-`;
+`
 
 export const TabelaBody = styled.tbody<ColorsProp>`
   ${({ theme, color, hasselect }) => css`
-    height: 250px;
+    min-height: 100vh; /* Garante altura mínima igual à altura da viewport */
     width: 100%;
 
     .select {
@@ -142,12 +142,12 @@ export const TabelaBody = styled.tbody<ColorsProp>`
     }
 
     .sticky {
-      background-color: ;
+      background-color:;
       color: ${theme.colors.white};
       font-weight: bold;
     }
   `}
-`;
+`
 
 export const TabelaSemDados = styled.div<ColorsProp>`
   ${({ color, theme }) => css`
@@ -165,7 +165,7 @@ export const TabelaSemDados = styled.div<ColorsProp>`
       color: ${color};
     }
   `}
-`;
+`
 
 export const PaginacaoWrapper = styled.div<ColorsProp>`
   ${({ theme, color }) => css`
@@ -187,7 +187,7 @@ export const PaginacaoWrapper = styled.div<ColorsProp>`
       margin-left: 15px;
     }
   `}
-`;
+`
 
 export const PaginationMantine = styled(Pagination)`
   ${({ theme }) => css`
@@ -203,7 +203,7 @@ export const PaginationMantine = styled(Pagination)`
       }
     }
   `}
-`;
+`
 
 export const PaginationButtons = styled.div<ColorsProp>`
   ${({ theme, color }) => css`
@@ -223,4 +223,4 @@ export const PaginationButtons = styled.div<ColorsProp>`
       padding: 0 15px;
     }
   `}
-`;
+`