wca-designsystem 1.0.42 → 1.0.44

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.42",
+  "version": "1.0.44",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -30,12 +30,6 @@
       "pre-commit": "tsdx lint"
     }
   },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
   "name": "wca-designsystem",
   "author": "wca.dev",
   "module": "dist/components.esm.js",
@@ -70,6 +64,7 @@
     "@types/jest": "^29.5.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/parser": "^8.33.0",
     "babel-jest": "^29.0.0",
     "babel-loader": "^9.1.3",
     "husky": "^9.0.11",
@@ -77,6 +72,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss-preset-mantine": "1.13.0",
+    "prettier": "^3.5.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",

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

@@ -1,19 +1,22 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Cabecalho from '.';
-import { NotificacaoProp } from '../../atomos/UsuarioNotification';
+import type { Meta, StoryObj } from '@storybook/react'
+import Cabecalho from '.'
 import iconExample from '../../../assets/imagens/icons/PrevisaoVendas.svg'
+import { NotificacaoProp } from '../../atomos/UsuarioNotification'
 
 const meta: Meta<typeof Cabecalho> = {
   component: Cabecalho,
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Cabecalho>;
+type Story = StoryObj<typeof Cabecalho>
 
 export const Primary: Story = {
   args: {
-    subTitulo: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
+    subTitulo:
+      'Lorem Ipsum is simply dummy text of the printing and typesetting industry.' +
+      'Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,' +
+      'when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
     temNotificacoes: false,
     temChatBot: true,
     icone: iconExample,
@@ -28,7 +31,14 @@ export const Primary: Story = {
       setAbre: (state: boolean) => console.log(state),
       setNotificacao: (state: NotificacaoProp) => console.log(state),
       setNotificacoes: (state: NotificacaoProp[]) => console.log(state),
-      notificacoes: [],
+      notificacoes: [
+        {
+          mensagem: 'Exemplo de mensagem de alerta',
+          tipo: 'warning',
+          titulo: 'Exemplo',
+          tempo: '10:00:00 pm',
+        },
+      ],
     },
   },
-};
+}

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

@@ -1,16 +1,16 @@
-import React, { useState } from 'react';
-import { Meta } from '@storybook/react';
-import ChatBot, { MensagemChat } from '.';
-import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
-import ModalCustom from '../Modal';
-import { theme } from '../../../styles/theme';
+import React, { useState } from 'react'
+import { Meta } from '@storybook/react'
+import ChatBot, { MensagemChat } from '.'
+import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css'
+import ModalCustom from '../Modal'
+import { theme } from '../../../styles/theme'
 
 export default {
   title: 'Components/modules/ChatBot',
   component: ChatBot,
-} as Meta;
+} as Meta
 
-const props = {};
+const props = {}
 
 const Template: any = (args: any) => {
   const [messages, setMessages] = useState<MensagemChat[]>([
@@ -38,9 +38,9 @@ const Template: any = (args: any) => {
         'Outra',
       ],
     },
-  ]);
-  const [respostaUser, setRespostaUser] = useState<string>('');
-  const [isTyping, setIsTyping] = useState<boolean>(false);
+  ])
+  const [respostaUser, setRespostaUser] = useState<string>('')
+  const [isTyping, setIsTyping] = useState<boolean>(false)
 
   return (
     <ModalCustom
@@ -50,30 +50,31 @@ const Template: any = (args: any) => {
       hasClose={true}
       modalTitle={'CHATBOT'}
       color={theme.colors.yellowWca}
-      close={function(): void {
-        throw new Error('Function not implemented.');
+      close={function (): void {
+        throw new Error('Function not implemented.')
       }}
-      onClose={function(): void {
-        throw new Error('Function not implemented.');
+      onClose={function (): void {
+        throw new Error('Function not implemented.')
       }}
     >
       <ChatBot
         {...args}
         messages={messages}
         isTyping={isTyping}
+        disabledInputUser={true}
         setMessages={setMessages}
         setIsTyping={setIsTyping}
         respostaUser={respostaUser}
         setRespostaUser={setRespostaUser}
       />
     </ModalCustom>
-  );
-};
+  )
+}
 
 export const ChatBotStory = Template.bind({
   ...props,
-});
+})
 
 ChatBotStory.args = {
   ...props,
-};
+}

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

@@ -5,59 +5,62 @@ import {
   ChatContainer,
   TypingIndicator,
   Avatar,
-} from '@chatscope/chat-ui-kit-react';
-import React from 'react';
-import { BotaoChat, ChatWrapper } from './styles';
-import { Flex } from '@mantine/core';
-import icon from '../../../assets/imagens/WCA/wca_inteligencia_comercial_logo.png';
+} from '@chatscope/chat-ui-kit-react'
+import React from 'react'
+import { BotaoChat, ChatWrapper } from './styles'
+import { Flex } from '@mantine/core'
+import icon from '../../../assets/imagens/WCA/wca_inteligencia_comercial_logo.png'
+import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css'
 
 export type MensagemChat = {
-  idChat: string;
-  text: string;
-  options?: string[];
-  type: 'bot' | 'user';
-};
+  idChat: string
+  text: string
+  options?: string[]
+  type: 'bot' | 'user'
+}
 
 type ChatBotProps = {
-  isTyping: boolean;
-  setIsTyping: React.Dispatch<React.SetStateAction<boolean>>;
-  respostaUser: string;
-  setRespostaUser: React.Dispatch<React.SetStateAction<string>>;
-  messages: MensagemChat[];
-  setMessages: React.Dispatch<React.SetStateAction<MensagemChat[]>>;
-};
+  isTyping: boolean
+  setIsTyping: React.Dispatch<React.SetStateAction<boolean>>
+  respostaUser: string
+  setRespostaUser: React.Dispatch<React.SetStateAction<string>>
+  messages: MensagemChat[]
+  setMessages: React.Dispatch<React.SetStateAction<MensagemChat[]>>
+  disabledInputUser?: boolean
+}
 
 const ChatBot = ({
+  messages,
   isTyping,
+  setMessages,
   setIsTyping,
   respostaUser,
   setRespostaUser,
-  messages,
-  setMessages,
+  disabledInputUser = false,
 }: ChatBotProps) => {
   const handleOptionSelect = (option: any) => {
-    const indexWithOptions = messages.findIndex((msg: any) => msg.options);
+    const indexWithOptions = messages.findIndex((msg: any) => msg.options)
 
     if (indexWithOptions !== -1) {
       const updatedMessages = messages.map((msg: any, i: number) => {
         if (i === indexWithOptions) {
-          const { options, ...rest } = msg;
-          return rest;
+          const { options, ...rest } = msg
+          return rest
         }
-        return msg;
-      });
+        return msg
+      })
 
-      updatedMessages.push({ type: 'user', text: option });
-      setMessages(updatedMessages);
-      setIsTyping(true);
+      updatedMessages.push({ type: 'user', text: option })
+      setMessages(updatedMessages)
+      setIsTyping(true)
     }
-  };
+  }
 
   const handleSend = (innerHtml: string) => {
-    setMessages((prev: any) => [...prev, { type: 'user', text: innerHtml }]);
-    setRespostaUser('');
-    setIsTyping(true);
-  };
+    setMessages((prev: any) => [...prev, { type: 'user', text: innerHtml }])
+    setRespostaUser('')
+    setIsTyping(true)
+  }
 
   return (
     <ChatWrapper>
@@ -71,66 +74,64 @@ const ChatBot = ({
         >
           {messages.map((msg: any, index: number) =>
             msg.options ? (
-              <>
-                <Message
-                  avatarPosition="top-left"
-                  key={index}
-                  model={{
-                    direction: msg.type === 'user' ? 'outgoing' : 'incoming',
-                    position: 'single',
-                  }}
-                >
-                  <Avatar src={icon} name="ChatBot" />
+              <Message
+                avatarPosition="top-left"
+                key={index}
+                model={{
+                  direction: msg.type === 'user' ? 'outgoing' : 'incoming',
+                  position: 'single',
+                }}
+              >
+                <Avatar src={icon} name="ChatBot" />
 
-                  <Message.CustomContent>
-                    <div style={{ fontSize: '13px' }}>{msg.text}</div>
-                  </Message.CustomContent>
+                <Message.CustomContent>
+                  <div style={{ fontSize: '13px' }}>{msg.text}</div>
+                </Message.CustomContent>
 
-                  <Message.Footer>
-                    <Flex mt={5} gap={5} direction={'column'}>
-                      {msg.options.map((opt: any, i: number) => (
-                        <>
-                          <BotaoChat
-                            key={opt}
-                            onClick={() => handleOptionSelect(opt)}
-                          >
-                            {i + 1}. {opt}
-                          </BotaoChat>
-                        </>
-                      ))}
-                    </Flex>
-                  </Message.Footer>
-                </Message>
-              </>
+                <Message.Footer>
+                  <Flex mt={5} gap={5} direction={'column'}>
+                    {msg.options.map((opt: any, i: number) => (
+                      <BotaoChat
+                        key={opt}
+                        onClick={() => handleOptionSelect(opt)}
+                      >
+                        {i + 1}. {opt}
+                      </BotaoChat>
+                    ))}
+                  </Flex>
+                </Message.Footer>
+              </Message>
             ) : (
-              <>
-                <Message
-                  key={index}
-                  style={{ fontSize: '13px' }}
-                  model={{
-                    message: msg.text,
-                    direction: msg.type === 'user' ? 'outgoing' : 'incoming',
-                    position: 'single',
-                  }}
-                >
-                  {msg.type == 'bot' && <Avatar src={icon} name="ChatBot" />}
-                </Message>
-              </>
+              <Message
+                key={index}
+                style={{ fontSize: '13px' }}
+                model={{
+                  message: msg.text,
+                  direction: msg.type === 'user' ? 'outgoing' : 'incoming',
+                  position: 'single',
+                }}
+              >
+                {msg.type == 'bot' && <Avatar src={icon} name="ChatBot" />}
+              </Message>
             )
           )}
         </MessageList>
 
         <MessageInput
           value={respostaUser}
-          onChange={val => setRespostaUser(val)}
-          onSend={msg => handleSend(msg)}
+          onChange={(val) => setRespostaUser(val)}
+          onSend={(msg) => handleSend(msg)}
           attachButton={false}
-          placeholder="Escreva sua dúvida aqui"
-          disabled={false}
+          placeholder={
+            disabledInputUser
+              ? 'Indisponível no momento'
+              : 'Escreva sua dúvida aqui'
+          }
+          disabled={disabledInputUser}
         />
       </ChatContainer>
     </ChatWrapper>
-  );
-};
+  )
+}
 
-export default ChatBot;
+export default ChatBot

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

@@ -1,12 +1,13 @@
-import styled from 'styled-components';
-import fundo from '../../../assets/imagens/novos-icones/STI_iconePreto.svg';
+import styled from 'styled-components'
+import fundo from '../../../assets/imagens/novos-icones/STI_iconePreto.svg'
 
 export const BotaoChat = styled.button`
   width: fit-content;
   max-width: 250px;
   border-radius: 5px;
   background: #6ea9d7;
-`;
+  padding: 1px 6px;
+`
 
 export const ChatWrapper = styled.div`
   margin: 20px 5px;
@@ -17,4 +18,4 @@ export const ChatWrapper = styled.div`
     background-position: center;
     background-blend-mode: exclusion;
   }
-`;
+`

package/src/styles/global.tsx

@@ -1,5 +1,5 @@
-import { createGlobalStyle } from "styled-components";
-import { theme } from "./theme";
+import { createGlobalStyle } from 'styled-components';
+import { theme } from './theme';
 
 export const GlobalStyles = createGlobalStyle`
   html,
@@ -39,22 +39,25 @@ export const GlobalStyles = createGlobalStyle`
   }
 
   * {
+      margin: 0;
+      padding: 0;
       box-sizing: border-box;
-  }
+    
 
      &::-webkit-scrollbar {
-      background-color: ${theme.colors.white};
-      width: 10px;
-      height: 10px;
-      border-radius: 5px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: ${theme.colors.blue}; /* Cor do indicador */
-      border-radius: 5px;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background: rgba(53, 50, 164, 0.7); /* Cor do indicador quando hover */
+        background-color: ${theme.colors.white};
+        width: 10px;
+        height: 10px;
+        border-radius: 5px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: ${theme.colors.blue}; /* Cor do indicador */
+        border-radius: 5px;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background: rgba(53, 50, 164, 0.7); /* Cor do indicador quando hover */
+      }
     }
 `;