wca-designsystem 0.0.21 → 0.0.22

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.21",
+  "version": "0.0.22",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -13,7 +13,7 @@
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
-    "test": "jest --silent",
+    "test": "jest --watchAll=false",
     "lint": "tsdx lint",
     "prepare": "tsdx build",
     "size": "size-limit",
@@ -88,14 +88,20 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@mantine/core": "7.12.2",
-    "@mantine/dates": "^7.12.2",
-    "@mantine/form": "^7.12.2",
-    "@mantine/hooks": "7.12.2",
+    "@fullcalendar/core": "^6.1.15",
+    "@fullcalendar/daygrid": "^6.1.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",
     "@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",

package/src/components/atomos/BadgeModulos/Badge.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import BadgeModulos from '.';
+import { render } from '../../../test/render';
+
+describe('BadgeModulos', () => {
+  it('Renderiza corretamente', () => {
+    const { getByText } = render(
+      <BadgeModulos color="#000" colored title="exemplo" svg="" />
+    );
+    expect(getByText('exemplo')).toBeDefined();
+  });
+});

package/src/components/atomos/BadgeModulos/BadgeModulos.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import BadgeModulos from '.';
+import { theme } from '../../../styles/theme';
+import Ajuda from '../../../assets/imagens/icons/Ajuda.svg';
+
+const meta: Meta<typeof BadgeModulos> = {
+  component: BadgeModulos,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BadgeModulos>;
+
+export const Primary: Story = {
+  args: {
+    colored: true,
+    color: theme.colors.blue,
+    title: 'exemplo',
+    svg: Ajuda,
+  },
+};

package/src/components/atomos/BadgeModulos/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import * as S from './styles';
+import { theme } from '../../../styles/theme';
+import Icone from '../Icone';
+
+type BadgeModulosProps = {
+  svg: string;
+  title: string;
+  color: string;
+  colored: boolean;
+};
+
+const BadgeModulos = ({ svg, color, title, colored }: BadgeModulosProps) => {
+  return (
+    <S.BadgeModulosWrapper
+      style={{
+        boxShadow: `0px 2px 0px ${colored ? color : theme.colors.gray['500']}`,
+      }}
+    >
+      <Icone
+        svg={svg}
+        fill={colored ? color : theme.colors.gray['500']}
+        width={15}
+        height={15}
+      />
+      <p style={{ color: colored ? color : theme.colors.gray['500'] }}>
+        {title}
+      </p>
+    </S.BadgeModulosWrapper>
+  );
+};
+
+export default BadgeModulos;

package/src/components/atomos/BadgeModulos/styles.ts

@@ -0,0 +1,16 @@
+import styled, { css } from 'styled-components';
+
+export const BadgeModulosWrapper = styled.div`
+  ${({ theme }) => css`
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    padding: 6px 8px;
+    background: ${theme.colors.gray['300']};
+    border-radius: 4px;
+
+    p {
+      font-weight: bold;
+    }
+  `}
+`;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import Botao from './index';
 import { render } from '../../../test/render';
-import { MantineProvider } from '@mantine/core';
 
 describe('Botão', () => {
   it('Renderiza corretamente', () => {
@@ -18,11 +17,9 @@ describe('Botão', () => {
   it('Dispara evento onClick', () => {
     const onClickEvent = jest.fn();
     const { getByText } = render(
-      <MantineProvider>
-        <Botao onClick={onClickEvent} tipo="default">
-          default
-        </Botao>
-      </MantineProvider>
+      <Botao onClick={onClickEvent} tipo="default">
+        default
+      </Botao>
     );
     const botaoDefault = getByText('default');
     botaoDefault.click();

package/src/components/atomos/Botao/index.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import { ButtonProps } from '@mantine/core';
 import { useCallback } from 'react';
 import * as S from './styles';
+import { theme } from '../../../styles/theme';
 
 export interface BotaoProps extends ButtonProps {
   tipo: 'table' | 'default' | 'round';
   children: React.ReactNode;
   onClick?: () => void;
   type?: string;
+  color?: string;
 }
 
 const Botao = ({
@@ -15,6 +17,7 @@ const Botao = ({
   children,
   onClick,
   type,
+  color = theme.colors.blue,
   ...buttonProps
 }: BotaoProps) => {
   const renderButton = useCallback(
@@ -22,6 +25,7 @@ const Botao = ({
       const botaoTipos = {
         default: (
           <S.BotaoDefault
+            color={color}
             type={type}
             tipo="default"
             onClick={onClick}
@@ -33,6 +37,7 @@ const Botao = ({
         table: (
           <S.BotaoTabela
             type={type}
+            color={color}
             tipo="table"
             onClick={onClick}
             {...buttonProps}
@@ -43,6 +48,7 @@ const Botao = ({
         round: (
           <S.BotaoRound
             type={type}
+            color={color}
             tipo="round"
             onClick={onClick}
             {...buttonProps}

package/src/components/atomos/Botao/styles.ts

@@ -7,10 +7,10 @@ export const BotaoDefault = styled(Button)<BotaoProps>`
     font-weight: bold;
 
     &:hover {
-      border: 1px solid ${color ?? theme.colors.blue};
-      color: ${color ?? theme.colors.blue};
+      border: 1px solid ${color};
+      color: ${color};
       background-color: ${theme.colors.white};
-      box-shadow: 0px 2px 3px 0px ${color ?? theme.colors.blue};
+      box-shadow: 0px 2px 3px 0px ${color};
     }
     &:disabled {
       border: 1px solid ${theme.colors.gray['500']};
@@ -29,19 +29,19 @@ export const BotaoDefault = styled(Button)<BotaoProps>`
 export const BotaoRound = styled(Button)<BotaoProps>`
   ${({ theme, color }) => css`
     background-color: ${theme.colors.gray['300']};
-    border: 1px solid ${color ?? theme.colors.blue};
-    color: ${color ?? theme.colors.blue};
+    border: 1px solid ${color};
+    color: ${color};
 
     font-weight: bold;
 
     &:hover {
       background: ${theme.colors.white};
-      box-shadow: 0px 2px 2px 0px ${color ?? theme.colors.blue};
-      color: ${color ?? theme.colors.blue};
+      box-shadow: 0px 2px 2px 0px ${color};
+      color: ${color};
     }
 
     &:active {
-      box-shadow: 0px 2px 3px 0px ${color ?? theme.colors.blue};
+      box-shadow: 0px 2px 3px 0px ${color};
     }
 
     &:disabled {
@@ -62,14 +62,14 @@ export const BotaoTabela = styled(Button)<BotaoProps>`
   ${({ theme, color }) => css`
     height: 25px;
     background: ${theme.colors.gray['300']};
-    box-shadow: 0px 2px 3px 0px ${color ?? theme.colors.blue};
-    color: ${color ?? theme.colors.blue};
+    box-shadow: 0px 2px 3px 0px ${color};
+    color: ${color};
     font-weight: bold;
 
     &:hover {
       background-color: ${theme.colors.white};
-      box-shadow: 0px 1px 2px 0px ${color ?? theme.colors.blue};
-      color: ${color ?? theme.colors.blue};
+      box-shadow: 0px 1px 2px 0px ${color};
+      color: ${color};
     }
 
     &:disabled {

package/src/components/atomos/IconeBotao/index.tsx

@@ -10,18 +10,23 @@ export interface IconeBotaoProps extends ActionIconProps {
   toolTipInfo?: string;
 }
 
-const IconeBotao = ({ tipo, toolTipInfo, ...props }: IconeBotaoProps) => {
+const IconeBotao = ({
+  tipo,
+  color,
+  toolTipInfo,
+  ...props
+}: IconeBotaoProps) => {
   const renderIconButton = useCallback(
     (tipo: 'table' | 'round') => {
       const selectsTipos = {
         round: (
           <HoverPopUp texto={toolTipInfo!} width={75}>
-            <S.IconeBotaoDefault {...props} data-testid="round" />
+            <S.IconeBotaoDefault color={color} {...props} data-testid="round" />
           </HoverPopUp>
         ),
         table: (
           <HoverPopUp texto={toolTipInfo!} width={100}>
-            <S.IconeBotaoTable {...props} data-testid="table" />
+            <S.IconeBotaoTable color={color} {...props} data-testid="table" />
           </HoverPopUp>
         ),
       };

package/src/components/atomos/IconeBotao/styles.ts

@@ -1,10 +1,14 @@
 import { ActionIcon } from '@mantine/core';
 import styled, { css } from 'styled-components';
 
-export const IconeBotaoDefault = styled(ActionIcon)`
-  ${({ theme }) => css`
+type ActionIconProps = {
+  color?: string;
+};
+
+export const IconeBotaoDefault = styled(ActionIcon)<ActionIconProps>`
+  ${({ theme, color }) => css`
     &:hover {
-      border-left: 2px solid ${theme.colors.blue};
+      border-left: 2px solid ${color};
     }
 
     &:disabled {
@@ -19,10 +23,10 @@ export const IconeBotaoDefault = styled(ActionIcon)`
   `}
 `;
 
-export const IconeBotaoTable = styled(ActionIcon)`
-  ${({ theme }) => css`
+export const IconeBotaoTable = styled(ActionIcon)<ActionIconProps>`
+  ${({ theme, color }) => css`
     background-color: ${theme.colors.gray['300']};
-    box-shadow: -2px 0px 0px 0px ${theme.colors.blue};
+    box-shadow: -2px 0px 0px 0px ${color};
 
     &:hover {
       background-color: ${theme.colors.white};

package/src/components/atomos/InputDeData/InputDeData.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import InputDeData from '.';
+
+const meta: Meta<typeof InputDeData> = {
+  component: InputDeData,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputDeData>;
+
+export const Primary: Story = {
+  args: {
+    labelAbaixo: 'exemplo',
+  },
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '../../../test/render';
+import InputDeData from './index';
+
+describe('InputDeData rendering', () => {
+  it('renders without crashing', () => {
+    const { getByTestId } = render(<InputDeData labelAbaixo="exemplo" />);
+
+    const inputDeArquivo = getByTestId('label-abaixo');
+    expect(inputDeArquivo).toBeDefined();
+  });
+});

package/src/components/atomos/InputDeData/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { DateInput, DateInputProps, DatesProvider } from '@mantine/dates';
+import * as S from './styles';
+import '@mantine/dates/styles.css';
+import 'dayjs/locale/pt-br';
+
+interface InputDeDataProps extends DateInputProps {
+  labelAbaixo?: string;
+}
+
+const InputDeData = ({ labelAbaixo, ...props }: InputDeDataProps) => {
+  return (
+    <S.InputDeDataWrapper>
+      <DatesProvider settings={{ locale: 'pt-br' }}>
+        <DateInput {...props} />
+        {labelAbaixo?.length! > 0 && (
+          <label className="label-abaixo" data-testid={'label-abaixo'}>
+            {labelAbaixo}
+          </label>
+        )}
+      </DatesProvider>
+    </S.InputDeDataWrapper>
+  );
+};
+
+export default InputDeData;

package/src/components/atomos/InputDeData/styles.ts

@@ -0,0 +1,16 @@
+import styled, { css } from 'styled-components';
+
+export const InputDeDataWrapper = styled.div`
+  ${({ theme }) => css`
+    .mantine-InputPlaceholder-placeholder {
+      padding-left: 105px;
+      color: ${theme.colors.gray['700']};
+    }
+
+    .label-abaixo {
+      color: ${theme.colors.gray['700']};
+      font-size: ${theme.sizes.xSmall};
+      font-family: 'Ubunto Mono', monospace;
+    }
+  `}
+`;

package/src/components/atomos/InputDeTexto/InputDeTexto.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import InputDeTexto from '.';
+import { theme } from '../../../styles/theme';
 
 const meta: Meta<typeof InputDeTexto> = {
   component: InputDeTexto,
@@ -11,6 +12,7 @@ type Story = StoryObj<typeof InputDeTexto>;
 
 export const Primary: Story = {
   args: {
+    color: theme.colors.red,
     tipo: 'round',
   },
 };

package/src/components/atomos/InputDeTexto/index.tsx

@@ -10,12 +10,14 @@ export interface InputDeTextoProps extends TextInputProps {
   tipo: 'table' | 'round' | 'login' | 'password';
   labelAbaixo?: string;
   placeholder?: string;
+  color?: string;
 }
 
 const InputDeTexto = ({
   tipo,
   labelAbaixo,
   placeholder,
+  color = theme.colors.blue,
   ...props
 }: InputDeTextoProps) => {
   /* Renderiza conforme o tipo que você escolher */
@@ -23,7 +25,7 @@ const InputDeTexto = ({
     (tipo: 'table' | 'round' | 'login' | 'password') => {
       const selectsTipos = {
         round: (
-          <S.InputDeTextoRoundWrapper>
+          <S.InputDeTextoRoundWrapper color={color}>
             <S.InputDeTextoRound
               radius={8}
               data-testid="round"
@@ -37,6 +39,7 @@ const InputDeTexto = ({
         ),
         table: (
           <S.InputDeTextoTabela
+            color={color}
             placeholder={placeholder}
             {...props}
             data-testid="table"
@@ -46,6 +49,7 @@ const InputDeTexto = ({
           <S.InputDeTextoLogin
             radius={8}
             placeholder={placeholder}
+            color={color}
             leftSection={
               <div
                 className="left-section"
@@ -69,6 +73,7 @@ const InputDeTexto = ({
         ),
         password: (
           <S.InputDePassword
+            color={color}
             placeholder={placeholder}
             onChange={props.onChange}
             error={props.error}
@@ -78,9 +83,7 @@ const InputDeTexto = ({
               <div
                 className="right-section"
                 style={{
-                  background: props.error
-                    ? theme.colors.red
-                    : theme.colors.blue,
+                  background: props.error ? theme.colors.red : color,
                 }}
               >
                 <Icone

package/src/components/atomos/InputDeTexto/styles.ts

@@ -1,6 +1,10 @@
 import { PasswordInput, TextInput } from '@mantine/core';
 import styled, { css } from 'styled-components';
 
+type InputDeTextProps = {
+  color?: string;
+};
+
 export const InputDeTextoRoundWrapper = styled.div`
   ${({ theme }) => css`
     .label-abaixo {
@@ -31,8 +35,8 @@ export const RightSelect = styled.div`
   `}
 `;
 
-export const InputDeTextoTabela = styled(TextInput)`
-  ${({ theme }) => css`
+export const InputDeTextoTabela = styled(TextInput)<InputDeTextProps>`
+  ${({ color }) => css`
     border-radius: 5px;
 
     .mantine-TextInput-error {
@@ -43,25 +47,25 @@ export const InputDeTextoTabela = styled(TextInput)`
       min-height: 25px;
       max-width: 200px;
       height: 25px;
-      box-shadow: 0px 2px 3px 0px ${theme.colors.blue};
+      box-shadow: 0px 2px 3px 0px ${color};
       border: none;
-      color: ${theme.colors.blue};
+      color: ${color};
       background-color: transparent;
       font-weight: bold;
 
       &::placeholder {
-        color: ${theme.colors.blue};
+        color: ${color};
       }
     }
   `}
 `;
 
-export const InputDeTextoLogin = styled(TextInput)`
-  ${({ theme }) => css`
+export const InputDeTextoLogin = styled(TextInput)<InputDeTextProps>`
+  ${({ color, theme }) => css`
     .left-section {
       width: 40px;
       height: 100%;
-      background-color: ${theme.colors.blue};
+      background-color: ${color};
       display: flex;
       align-items: center;
       justify-content: center;
@@ -93,6 +97,9 @@ export const InputDePassword = styled(PasswordInput)`
       border-radius: 8px 0 0 8px;
     }
 
+    .left-section {
+      background-color: red;
+    }
     .mantine-PasswordInput-error {
       text-align: start;
     }

package/src/components/atomos/LinkNavbar/index.tsx

@@ -12,12 +12,14 @@ export type LinkNavbarProps = {
   initiallyOpened?: boolean;
   to?: string;
   linksExpand?: { label: string; to: string }[];
+  color?: string;
 };
 
 const LinkNavbar = ({
   icon,
   label,
   initiallyOpened,
+  color = theme.colors.blue,
   to,
   navHoverIsOpen,
   linksExpand,
@@ -64,7 +66,7 @@ const LinkNavbar = ({
       >
         <S.LinkWrapper data-active={navHoverIsOpen}>
           <S.LinkSvg data-active={navHoverIsOpen}>
-            <Icone fill={theme.colors.blue} width={25} height={25} svg={icon} />
+            <Icone fill={color} width={25} height={25} svg={icon} />
           </S.LinkSvg>
           <p>{label}</p>
         </S.LinkWrapper>
@@ -73,7 +75,7 @@ const LinkNavbar = ({
           <Icone
             svg={Arrow}
             className="chevron"
-            fill={theme.colors.blue}
+            fill={color}
             style={{
               transform: opened ? 'rotate(90deg)' : 'none',
               transition: 'transform 200ms ease',

package/src/components/atomos/MultiSelect/MultiSelect.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MultiSelectCustom from '.';
+
+const meta: Meta<typeof MultiSelectCustom> = {
+  component: MultiSelectCustom,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MultiSelectCustom>;
+
+export const Primary: Story = {
+  args: {},
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import MultiSelectCustom from './index';
+import { render } from '../../../test/render';
+
+describe('LinkNavbar rendering', () => {
+  it('renders without crashing', () => {
+    const { getByText } = render(
+      <MultiSelectCustom value={[]} label="Usuários" />
+    );
+
+    const label = getByText('Usuários');
+    expect(label).toBeDefined();
+  });
+});

package/src/components/atomos/MultiSelect/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ComboboxData, MultiSelect } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import * as S from './styles';
+
+type MultiSelectProps = {
+  data?: ComboboxData;
+  label?: string;
+  value: Array<string>;
+  onChange?: ((value: string[]) => void) | undefined;
+};
+const MultiSelectCustom = ({
+  data,
+  label,
+  value,
+  onChange,
+}: MultiSelectProps) => {
+  const [dropdownOpened, { toggle }] = useDisclosure();
+
+  return (
+    <S.MultiSelectWrapper onClick={toggle}>
+      <MultiSelect
+        data={data}
+        dropdownOpened={dropdownOpened}
+        value={value}
+        onChange={(e) => onChange!(e)}
+      />
+      <label className="label-abaixo">{label}</label>
+    </S.MultiSelectWrapper>
+  );
+};
+
+export default MultiSelectCustom;

package/src/components/atomos/MultiSelect/styles.ts

@@ -0,0 +1,14 @@
+import styled, { css } from 'styled-components';
+
+export const MultiSelectWrapper = styled.div`
+  ${() => css`
+    .mantine-Input-input {
+      min-width: 185px;
+    }
+    .label-abaixo {
+      color: #87868a;
+      font-size: 0.625rem;
+      font-family: 'Ubunto Mono', monospace;
+    }
+  `}
+`;

package/src/components/atomos/NavbarTituloHeader/styles.ts

@@ -30,6 +30,7 @@ export const LinkText = styled.div`
     p {
       font-size: ${theme.sizes?.xSmall};
       font-weight: 400;
+      text-wrap: nowrap;
     }
 
     &[data-active='true'] {

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

@@ -26,9 +26,14 @@ type OpcoesCabecalho = {
 export interface CabecalhoProps {
   notificacoes: NotificationsProps;
   temNotificacoes?: boolean;
+  color?: string;
 }
 
-const Cabecalho = ({ notificacoes, temNotificacoes }: CabecalhoProps) => {
+const Cabecalho = ({
+  notificacoes,
+  temNotificacoes,
+  color = theme.colors.blue,
+}: CabecalhoProps) => {
   const rotaAcessada = useLocation();
   const paginaAtual = rotaAcessada.pathname.replace('/', '');
   const CabecalhoInfos = useCallback(
@@ -79,7 +84,7 @@ const Cabecalho = ({ notificacoes, temNotificacoes }: CabecalhoProps) => {
 
   return (
     <S.CabecalhoContainer>
-      <S.CabecalhoInfoWrapper>
+      <S.CabecalhoInfoWrapper color={color}>
         <div className="icon-wrapper">
           <Icone
             fill={theme.colors.white}