wca-designsystem 0.0.21 → 0.0.23

package/src/components/modules/Cabecalho/styles.ts

@@ -1,4 +1,8 @@
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components';
+
+type CabecalhoProps = {
+  color?: string;
+};
 
 export const CabecalhoContainer = styled.header`
   display: flex;
@@ -10,8 +14,8 @@ export const CabecalhoContainer = styled.header`
   position: relative;
 `;
 
-export const CabecalhoInfoWrapper = styled.div`
-  ${({ theme }) => css`
+export const CabecalhoInfoWrapper = styled.div<CabecalhoProps>`
+  ${({ theme, color }) => css`
     display: block;
 
     @media (min-width: ${theme.responsive.md}) {
@@ -28,7 +32,7 @@ export const CabecalhoInfoWrapper = styled.div`
       align-items: center;
       justify-content: center;
       border-radius: 8px;
-      background-color: ${theme.colors.blue};
+      background-color: ${color};
     }
 
     .info-wrapper {
@@ -36,7 +40,7 @@ export const CabecalhoInfoWrapper = styled.div`
 
       h1 {
         font-size: ${theme.sizes.large};
-        color: ${theme.colors.blue};
+        color: ${color};
         margin: 15px 0;
 
         @media (min-width: ${theme.responsive.md}) {
@@ -61,7 +65,7 @@ export const CabecalhoInfoWrapper = styled.div`
       display: flex;
       align-items: center;
       justify-content: center;
-      background-color: ${theme.colors.gray["500"]};
+      background-color: ${theme.colors.gray['500']};
       border-radius: 8px;
     }
   `}

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

@@ -6,6 +6,7 @@ import Cabecalho from '../Cabecalho';
 import { useLocation } from 'react-router-dom';
 import { NotificationsProps } from '../../atomos/UsuarioNotification';
 import { LinksProps } from '../../molecules/GrupoDeLinks';
+import { theme } from '../../../styles/theme';
 
 type ConchaAplicacaolType = {
   children: React.ReactNode;
@@ -17,6 +18,7 @@ type ConchaAplicacaolType = {
   temNotificacoes?: boolean;
   sairFunc: () => void;
   activeLink: string;
+  color?: string;
 };
 export function ConchaAplicacao({
   children,
@@ -25,6 +27,7 @@ export function ConchaAplicacao({
   isNavHover,
   sairFunc,
   activeLink,
+  color = theme.colors.blue,
   notificacoes,
   links,
   navbarRef,
@@ -43,7 +46,7 @@ export function ConchaAplicacao({
       transitionTimingFunction="ease-in"
       transitionDuration={3}
     >
-      <S.ConchaAplicacaoNavbarWrapper ref={navbarRef} data-active={isNavHover}>
+      <S.NavbarWrapper color={color} ref={navbarRef} data-active={isNavHover}>
         <Navbar
           sairFunc={sairFunc}
           activeLink={activeLink}
@@ -51,7 +54,7 @@ export function ConchaAplicacao({
           isHover={isNavHover}
           links={links}
         />
-      </S.ConchaAplicacaoNavbarWrapper>
+      </S.NavbarWrapper>
       <S.ConchaAplicacaoMainWrapper>
         <Container fluid>
           {paginaAtual.length > 0 && (

package/src/components/modules/ConchaAplicacao/styles.ts

@@ -2,6 +2,10 @@ import { AppShell } from '@mantine/core';
 import styled, { css } from 'styled-components';
 import fundo from '../../../assets/imagens/novos-icones/STI_iconePreto.svg';
 
+type ConchaAplicacaoProps = {
+  color?: string;
+};
+
 export const ConchaAplicacaoWrapper = styled(AppShell)`
   ${() => css`
     background-image: url(${fundo});
@@ -12,12 +16,12 @@ export const ConchaAplicacaoWrapper = styled(AppShell)`
   `}
 `;
 
-export const ConchaAplicacaoNavbarWrapper = styled(AppShell.Navbar)`
-  ${({ theme }) => css`
-    transition: all 0.2s; /* Transição suave de 0.1 segundos */
+export const NavbarWrapper = styled(AppShell.Navbar)<ConchaAplicacaoProps>`
+  ${({ color }) => css`
+    transition: all 0.5s; /* Transição suave de 0.1 segundos */
 
     &[data-active='true'] {
-      border-right: 5px solid ${theme.colors.blue};
+      border-right: 5px solid ${color};
     }
   `}
 `;

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

@@ -11,7 +11,6 @@ import CiclosEncerrados from '../../../assets/imagens/icons/CiclosEncerrados.svg
 import Logo from '../../../assets/imagens/novos-icones/STI_nomeCor.svg';
 import LogoInitial from '../../../assets/imagens/novos-icones/STI_iconeBranco.svg';
 import { useMemo } from 'react';
-import { FadingComponent } from '../../atomos/FadeAnimacao';
 import AjudaIcone from '../../atomos/AjudaIcone';
 
 export type NavbarType = {
@@ -20,6 +19,7 @@ export type NavbarType = {
   links?: LinksProps[];
   activeLink: string;
   sairFunc: () => void;
+  color?: string;
 };
 const Navbar = ({
   isHover,
@@ -27,6 +27,7 @@ const Navbar = ({
   links,
   modulo,
   activeLink,
+  color = theme.colors.blue,
 }: NavbarType) => {
   const LogoHeader = useMemo(() => (isHover ? Logo : LogoInitial), [isHover]);
 
@@ -34,7 +35,7 @@ const Navbar = ({
     <S.NavbarWrapper
       data-testid="navbar"
       data-active={isHover}
-      color={isHover ? theme.colors.white : theme.colors.blue}
+      color={isHover ? theme.colors.white : color}
     >
       <S.NavbarHeader className={isHover ? 'nav-hover' : ''}>
         <Icone
@@ -63,8 +64,8 @@ const Navbar = ({
         </IconeBotao>
       </S.NavbarHeader>
 
-      <FadingComponent duration={600}>
-        <S.NabarBody>
+      <>
+        <S.NabarBody color={color}>
           <NavbarTituloHeader
             isNavHover={isHover}
             modulo={modulo}
@@ -76,7 +77,7 @@ const Navbar = ({
             isNavHover={isHover}
           />
         </S.NabarBody>
-      </FadingComponent>
+      </>
 
       <S.NavbarFooter
         data-active={isHover}

package/src/components/modules/Navbar/styles.ts

@@ -1,22 +1,24 @@
-import styled, { css } from "styled-components";
+import styled, { css } from 'styled-components';
 
 type NavbarWrapperProps = {
-  color: string;
+  color?: string;
 };
 
 export const NavbarWrapper = styled.div<NavbarWrapperProps>`
-  ${({ theme, color }) => css`
+  ${({ color }) => css`
     padding: 0;
     text-align: center;
     background-color: ${color};
     box-shadow: 8px 0px 11px -7px rgba(0, 0, 0, 0.5);
     height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
 
     .logo {
       margin: 30px 0;
 
-      &[data-active="true"] {
-        border-right: 5px solid ${theme.colors.blue};
+      &[data-active='true'] {
+        border-right: 5px solid ${color};
       }
     }
   `}
@@ -36,10 +38,10 @@ export const NavbarHeader = styled.div`
   `}
 `;
 
-export const NabarBody = styled.div`
-  ${({ theme }) => css`
+export const NabarBody = styled.div<NavbarWrapperProps>`
+  ${({ theme, color }) => css`
     .selected {
-      background-color: ${theme.colors.blue};
+      background-color: ${color};
 
       p {
         color: ${theme.colors.white};
@@ -56,9 +58,8 @@ export const NabarBody = styled.div`
 export const NavbarFooter = styled.div`
   ${({ theme }) => css`
     text-align: center;
-    position: fixed;
-    bottom: 50px;
-    left: 0;
-    color: ${theme.colors.gray["700"]};
+    margin: 90% 0 15px 0;
+
+    color: ${theme.colors.gray['700']};
   `}
 `;

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

@@ -15,6 +15,7 @@ const props: CardInicialProps = {
   icone: remuneracao,
   link: '/exemplo',
   titulo: 'exemplo titulo',
+  acessoPermitido: false,
 };
 
 const Template: any = (args: CardInicialProps) => (

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import ModalCustom, { ModalProps } from './index';
+import { Meta } from '@storybook/react';
+import { theme } from '../../../styles/theme';
+
+export default {
+  title: 'Components/moleculas/ModalCustom',
+  component: ModalCustom,
+} as Meta;
+
+const props: ModalProps = {
+  children: <p>Exemplo</p>,
+  close: () => console.log('aqui'),
+  modalTitle: 'exemplo',
+  open: true,
+  color: theme.colors.blue,
+};
+
+const Template: any = (args: ModalProps) => (
+  <>
+    <ModalCustom {...args} />
+  </>
+);
+
+export const ModalInitialProps = Template.bind({
+  ...props,
+});
+
+ModalInitialProps.args = {
+  ...props,
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import ModalCustom, { ModalProps } from '.';
+import { theme } from '../../../styles/theme';
+import { render } from '../../../test/render';
+
+describe('ModalCustom', () => {
+  const props: ModalProps = {
+    children: <p>Exemplo</p>,
+    close: () => console.log('aqui'),
+    modalTitle: 'exemplo',
+    open: true,
+    color: theme.colors.blue,
+  };
+
+  it('Renderiza corretamente', () => {
+    const { getByText } = render(<ModalCustom {...props} />);
+
+    const descricao = getByText('exemplo');
+
+    expect(descricao).toBeDefined();
+  });
+});

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { MantineSize, Modal } from '@mantine/core';
+import * as S from './styles';
+
+export type ModalProps = {
+  open: boolean;
+  close: () => void;
+  children: React.ReactNode;
+  modalTitle: string;
+  color?: string;
+  size?: number | MantineSize | (string & {}) | undefined;
+};
+
+const ModalCustom = ({
+  close,
+  color,
+  open,
+  children,
+  modalTitle,
+  size,
+}: ModalProps) => {
+  return (
+    <Modal.Root
+      opened={open}
+      onClose={close}
+      size={size}
+      centered
+      transitionProps={{
+        transition: 'fade',
+        duration: 300,
+        timingFunction: 'linear',
+      }}
+    >
+      <Modal.Overlay />
+      <Modal.Content>
+        <S.ModalHeader color={color}>
+          <S.ModalTitle color={color}>{modalTitle}</S.ModalTitle>
+          <S.ModalCloseButton iconSize={30} />
+        </S.ModalHeader>
+        <Modal.Body>{children}</Modal.Body>
+      </Modal.Content>
+    </Modal.Root>
+  );
+};
+
+export default ModalCustom;

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

@@ -0,0 +1,34 @@
+import { Modal } from '@mantine/core';
+import styled, { css } from 'styled-components';
+import { theme } from '../../../styles/theme';
+
+type ModalProps = {
+  color?: string;
+};
+
+export const ModalHeader = styled(Modal.Header)<ModalProps>`
+  ${({ color }) => css`
+    background-color: ${color};
+  `}
+`;
+export const ModalTitle = styled(Modal.Title)`
+  ${() => css`
+    color: ${theme.colors.white};
+    font-weight: bold;
+  `}
+`;
+export const ModalCloseButton = styled(Modal.CloseButton)<ModalProps>`
+  ${({ color }) => css`
+    color: ${theme.colors.white};
+    font-weight: bold;
+
+    &:hover {
+      background-color: ${color};
+      opacity: 0.8;
+    }
+
+    svg {
+      width: ${theme.sizes.xLarge};
+    }
+  `}
+`;

package/src/components/organismos/Calendario/Calendario.modal.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import * as S from './styles';
+import SelectCustomizado from '../../atomos/Select';
+import InputDeData from '../../atomos/InputDeData';
+import Botao from '../../atomos/Botao';
+import { useForm } from '@mantine/form';
+import { ComboboxData } from '@mantine/core';
+
+type CalendarioModalProps = {
+  color?: string;
+  confirm: (form: any) => void;
+  perfilOptions: ComboboxData | undefined;
+  hierarquiaOptions: ComboboxData | undefined;
+};
+
+const CalendarioModal = ({
+  color,
+  confirm,
+  perfilOptions,
+  hierarquiaOptions,
+}: CalendarioModalProps) => {
+  const form = useForm({
+    mode: 'controlled',
+    initialValues: {
+      hierarquia: '',
+      perfil: '',
+      dataInicial: new Date(),
+      dataFinal: '',
+    },
+  });
+
+  return (
+    <S.CalendarioModalWrapper color={color}>
+      <h2>Adicionar Agenda</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <S.CalendarioModalInputs>
+        <SelectCustomizado
+          tipo="round"
+          placeholder="Selecione uma opção"
+          labelAbaixo="Hierarquia"
+          data={hierarquiaOptions}
+          {...form.getInputProps('hierarquia')}
+        />
+        <SelectCustomizado
+          tipo="round"
+          placeholder="Selecione uma opção"
+          labelAbaixo="Perfil"
+          data={perfilOptions}
+          {...form.getInputProps('perfil')}
+        />
+        <InputDeData
+          labelAbaixo="data inicial"
+          {...form.getInputProps('dataInicial')}
+        />
+        <InputDeData
+          labelAbaixo="data final"
+          {...form.getInputProps('dataFinal')}
+        />
+
+        <Botao
+          tipo="default"
+          color={color}
+          onClick={() => confirm(form.values)}
+        >
+          CONFIRMAR
+        </Botao>
+      </S.CalendarioModalInputs>
+    </S.CalendarioModalWrapper>
+  );
+};
+
+export default CalendarioModal;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import Calendario from './index';
+import { theme } from '../../../styles/theme';
+
+export default {
+  title: 'Components/organismos/Calendario',
+  component: Calendario,
+} as Meta;
+
+const events = [
+  { title: 'Meeting', start: new Date(), end: new Date('2024-09-29') },
+];
+
+const Template: any = (args: any) => (
+  <>
+    <Calendario {...args} />
+  </>
+);
+
+export const CardDestaqueStory = Template.bind({});
+
+CardDestaqueStory.args = {
+  events: events,
+  perfilOptions: [{ label: 'exemplo', value: 'exemplo' }],
+  hierarquiaOptions: [{ label: 'exemplo', value: 'exemplo' }],
+  color: theme.colors.magentaSec,
+  confirm: (form: any) => console.log(form),
+};

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

@@ -0,0 +1,111 @@
+import React, { useCallback, useRef, useState } from 'react';
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import {
+  CalendarApi,
+  EventContentArg,
+  EventSourceInput,
+} from '@fullcalendar/core';
+import * as S from './styles';
+import ptBrLocale from '@fullcalendar/core/locales/pt-br';
+import SelectCustomizado from '../../atomos/Select';
+import Botao from '../../atomos/Botao';
+import CalendarioModal from './Calendario.modal';
+import { ComboboxData } from '@mantine/core';
+
+interface CalendarioProps extends FullCalendar {
+  events: EventSourceInput | undefined;
+  confirm: (form: any) => void;
+  liberar: () => void;
+  perfilOptions: ComboboxData | undefined;
+  hierarquiaOptions: ComboboxData | undefined;
+  color?: string;
+}
+
+/* const events = [
+  { title: 'Meeting', start: new Date(), end: new Date('2024-09-29') },
+]; */
+// a custom render function
+function renderEventContent(eventInfo: EventContentArg) {
+  return (
+    <S.EventosWrapper>
+      <p>
+        {eventInfo.timeText} | {eventInfo.event.title}
+      </p>
+    </S.EventosWrapper>
+  );
+}
+const Calendario = ({
+  events,
+  confirm,
+  color,
+  liberar,
+  hierarquiaOptions,
+  perfilOptions,
+  ...props
+}: CalendarioProps) => {
+  const calendarRef = useRef<CalendarApi | null>(null);
+  const [adicionar, setAdicionar] = useState(false);
+
+  const handleViewChange = useCallback((view: string) => {
+    if (calendarRef.current) {
+      calendarRef.current.changeView(view);
+    }
+  }, []);
+
+  return (
+    <S.CalendarioWrapper color={color}>
+      <S.CalendarioHeaderButtons>
+        <Botao
+          onClick={() => setAdicionar(!adicionar)}
+          tipo="default"
+          color={color}
+        >
+          ADICIONAR
+        </Botao>
+        <Botao color={color} tipo="default" onClick={liberar}>
+          LIBERAR CRÍTICA
+        </Botao>
+      </S.CalendarioHeaderButtons>
+      {adicionar && (
+        <CalendarioModal
+          perfilOptions={perfilOptions}
+          hierarquiaOptions={hierarquiaOptions}
+          confirm={confirm}
+          color={color}
+        />
+      )}
+      <S.CalendarioHeaderControl>
+        <SelectCustomizado
+          tipo="table"
+          placeholder={`Visualizar: por dia`}
+          data={[
+            { label: 'Visualizar por mês', value: 'dayGridMonth' },
+            { label: 'Visualizar por semana', value: 'timeGridWeek' },
+            { label: 'Visualizar por dia', value: 'timeGridDay' },
+          ]}
+          onChange={(e) => handleViewChange(e!)}
+        />
+      </S.CalendarioHeaderControl>
+      <FullCalendar
+        ref={(element) => {
+          if (element) {
+            calendarRef.current = element.getApi(); // Armazena a API do calendário na ref
+          }
+        }}
+        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
+        initialView={'dayGridMonth'}
+        locales={[ptBrLocale]}
+        locale="pt-br"
+        weekends={true}
+        events={events}
+        eventContent={renderEventContent}
+        {...props}
+      />
+    </S.CalendarioWrapper>
+  );
+};
+
+export default Calendario;