wca-designsystem 0.0.16 → 0.0.18

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.16",
+  "version": "0.0.18",
   "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/modules/ConchaAplicacao/ConchaAplicacao.test.tsx

@@ -25,6 +25,7 @@ describe('AppShelCollapsed rendering', () => {
 
     const { getByTestId } = render(
       <ConchaAplicacao
+        activeLink=""
         isNavHover={true}
         modulo="exemplo"
         notificacoes={mockNotifications}

package/src/components/modules/ConchaAplicacao/index.tsx

@@ -15,12 +15,14 @@ type ConchaAplicacaolType = {
   isNavHover: boolean;
   navbarRef?: React.RefObject<HTMLDivElement>;
   temNotificacoes?: boolean;
+  activeLink: string;
 };
 export function ConchaAplicacao({
   children,
   modulo,
   temNotificacoes,
   isNavHover,
+  activeLink,
   notificacoes,
   links,
   navbarRef,
@@ -40,7 +42,12 @@ export function ConchaAplicacao({
       transitionDuration={3}
     >
       <S.ConchaAplicacaoNavbarWrapper ref={navbarRef} data-active={isNavHover}>
-        <Navbar modulo={modulo} isHover={isNavHover} links={links} />
+        <Navbar
+          activeLink={activeLink}
+          modulo={modulo}
+          isHover={isNavHover}
+          links={links}
+        />
       </S.ConchaAplicacaoNavbarWrapper>
       <S.ConchaAplicacaoMainWrapper>
         <Container fluid>

package/src/components/modules/Navbar/Navbar.stories.tsx

@@ -12,6 +12,7 @@ const props = {
   isHover: true,
   links: LinksDinamicosMock,
   module: 'Exemplo',
+  activeLink: 'Usuários',
 };
 
 const Template: any = (args: NavbarType) => (

package/src/components/modules/Navbar/Navbar.test.tsx

@@ -7,14 +7,24 @@ import { LinksDinamicosMock } from './mocks';
 describe('Navbar está renderizando corretamente', () => {
   test('Renderizando todos componentes internos', () => {
     const { getByTestId } = render(
-      <Navbar modulo="exemplo" isHover={false} links={LinksDinamicosMock} />
+      <Navbar
+        activeLink=""
+        modulo="exemplo"
+        isHover={false}
+        links={LinksDinamicosMock}
+      />
     );
     expect(getByTestId('navbar')).toBeDefined();
   });
 
   test('Abre o navbar com hover', () => {
     const { getByTestId, queryByText } = render(
-      <Navbar modulo="exemplo" isHover={true} links={LinksDinamicosMock} />
+      <Navbar
+        activeLink=""
+        modulo="exemplo"
+        isHover={true}
+        links={LinksDinamicosMock}
+      />
     );
 
     const FooterNavbar = queryByText('Precisa de ajuda');

package/src/components/modules/Navbar/index.tsx

@@ -18,8 +18,9 @@ export type NavbarType = {
   isHover: boolean;
   modulo: string;
   links?: LinksProps[];
+  activeLink: string;
 };
-const Navbar = ({ isHover, links, modulo }: NavbarType) => {
+const Navbar = ({ isHover, links, modulo, activeLink }: NavbarType) => {
   const LogoHeader = useMemo(() => (isHover ? Logo : LogoInitial), [isHover]);
 
   return (
@@ -60,7 +61,11 @@ const Navbar = ({ isHover, links, modulo }: NavbarType) => {
             modulo={modulo}
             icon={CiclosEncerrados}
           />
-          <GrupoDeLinks links={links} isNavHover={isHover} />
+          <GrupoDeLinks
+            activeLink={activeLink}
+            links={links}
+            isNavHover={isHover}
+          />
         </S.NabarBody>
       </FadingComponent>
 

package/src/components/molecules/GrupoDeLinks/LinkGroup.test.tsx

@@ -6,7 +6,7 @@ import { render } from '../../../test/render';
 describe('LinkGroup está renderizando corretamente', () => {
   test('Renderizando todos Links internos', () => {
     const { getByText } = render(
-      <LinkGroup isNavHover={true} links={LinksDinamicosMock} />
+      <LinkGroup activeLink="" isNavHover={true} links={LinksDinamicosMock} />
     );
     expect(getByText('Usuários')).toBeDefined();
   });

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

@@ -1,7 +1,6 @@
 import React, { memo, useState } from 'react';
 import * as S from './styles';
 import LinkNavbar from '../../atomos/LinkNavbar';
-import { FadingComponent } from '../../atomos/FadeAnimacao';
 
 export interface LinksProps {
   label: string;
@@ -12,11 +11,12 @@ export interface LinksProps {
 }
 interface GrupoDeLinksProps {
   isNavHover: boolean;
+  activeLink: string;
   links?: LinksProps[];
 }
 
-const GrupoDeLinks = ({ links, isNavHover }: GrupoDeLinksProps) => {
-  const [selected, setSelected] = useState(links![0].label ?? '');
+const GrupoDeLinks = ({ links, isNavHover, activeLink }: GrupoDeLinksProps) => {
+  const [selected, setSelected] = useState(activeLink);
 
   const LinkToRender = links?.map((item) => (
     <S.LinkActive
@@ -29,11 +29,7 @@ const GrupoDeLinks = ({ links, isNavHover }: GrupoDeLinksProps) => {
     </S.LinkActive>
   ));
 
-  return (
-    <S.LinkGroupWrapper>
-      <FadingComponent duration={500}>{LinkToRender}</FadingComponent>
-    </S.LinkGroupWrapper>
-  );
+  return <S.LinkGroupWrapper>{LinkToRender}</S.LinkGroupWrapper>;
 };
 
 export default memo(GrupoDeLinks);

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

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

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

@@ -38,6 +38,7 @@ export type TabelaHeaderProps<T extends MRT_RowData> = {
   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,
@@ -46,6 +47,7 @@ const TabelaHeader = <T extends MRT_RowData>({
   filtrosPor,
   setFiltrosPor,
   setPagination,
+  setSimples,
   exportarXlsx,
   handleAdicionar,
   filtrosPelaTabela,
@@ -68,6 +70,7 @@ const TabelaHeader = <T extends MRT_RowData>({
             tipo="table"
             leftSection={<Icone fill={theme.colors.blue} svg={buscar} />}
             onChange={(e) => {
+              setSimples(true);
               setPagination({ pageIndex: 0, pageSize: 10 });
               setGlobalFilter(e.currentTarget.value);
             }}

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

@@ -1,11 +1,7 @@
 import React from 'react';
 import { Table } from '@mantine/core';
 import * as S from './styles';
-import {
-  MRT_PaginationState,
-  MRT_RowData,
-  MRT_TableInstance,
-} from 'mantine-react-table';
+import { 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/index.tsx

@@ -231,6 +231,7 @@ function Tabela<T extends MRT_RowData>({
     <S.TabelaWrapper>
       {/* Filtros e titulo */}
       <TabelaHeader<T>
+        setSimples={() => console.log('aqui')}
         setPagination={setPagination}
         table={table}
         toogleBuscarColuna={toogleBuscarColuna}