Merge branch 'master' into issue-551

package.json

@@ -35,6 +35,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@hookform/resolvers": "3.9.0",
     "@redux-devtools/extension": "3.3.0",
     "@sentry/react": "7.102.0",
     "classnames": "2.5.1",
@@ -52,8 +53,10 @@
     "normalize.css": "8.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "7.53.0",
     "react-i18next": "13.5.0",
     "react-router-dom": "6.22.1",
+    "zod": "3.23.8",
     "zustand": "4.5.1"
   },
   "devDependencies": {

src/App.tsx

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
-import { HashRouter as Router, Route } from 'react-router-dom';
+import { BrowserRouter, Route } from 'react-router-dom';
 
 import { ErrorBoundary } from '@sentry/react';
 
 import Home from './pages/home/home';
+import Register from './pages/register/register';
 
 import SentryRoutes from '~components/SentrySetup/SentrySetup';
 
@@ -13,13 +14,12 @@ import './styles/base.scss';
 function App(): ReactNode {
   return (
     <ErrorBoundary fallback={<p>Ocorreu um erro inesperado!</p>}>
-      <div>
-        <Router>
-          <SentryRoutes>
-            <Route element={<Home />} path="/" />
-          </SentryRoutes>
-        </Router>
-      </div>
+      <BrowserRouter>
+        <SentryRoutes>
+          <Route element={<Home />} path="/" />
+          <Route element={<Register />} path="/register" />
+        </SentryRoutes>
+      </BrowserRouter>
     </ErrorBoundary>
   );
 }

src/components/Button/Button.module.scss

@@ -213,6 +213,10 @@
       @include text($primaryWhite, rgba(255, 255, 255, 0.15));
     }
 
+    &.gray {
+      @include text($secondaryGray, $primaryGray);
+    }
+
     &.disabled {
       &:hover {
         background: none;

src/components/Button/Button.types.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes, ReactElement } from 'react';
 
 export type IButtonProps = HTMLAttributes<HTMLButtonElement> & {
-  color?: 'primary' | 'secondary';
+  color?: 'gray' | 'primary' | 'secondary';
   disabled?: boolean;
   type?: 'button' | 'reset' | 'submit';
   variant?: 'container' | 'outlined' | 'text';

src/components/FeedbackError/FeedbackError.stories.tsx

@@ -9,12 +9,16 @@ import FeedbackError from './FeedbackError';
 import { TFeedbackErrorProps } from './FeedbackError.type';
 
 export const FeedbackErrorComponent: Story<TFeedbackErrorProps> = (props) => {
-  const setErrors = useError((state) => state.setError);
+  const { addError, removeError } = useError();
+
   useEffect(() => {
-    for (const error of props.errors) {
-      setErrors(error.message);
-    }
-  }, [props.errors, setErrors]);
+    const newErrorIds = props.errors.map((error) => addError(error));
+
+    return (): void => {
+      for (const errorId of newErrorIds) removeError(errorId);
+    };
+  }, []);
+
   return <FeedbackError />;
 };
 

src/components/FeedbackError/FeedbackError.tsx

@@ -24,7 +24,7 @@ function FeedbackError(): ReactNode {
         variants={animationVariants}
       >
         {Object.values(errors).map((error) => (
-          <li key={error.id}>{error.message}</li>
+          <li key={error.message}>{error.message}</li>
         ))}
       </motion.ul>
     </AnimatePresence>

src/components/FeedbackError/components/FeedbackErrorMobile.stories.tsx

@@ -7,9 +7,15 @@ import { useError } from '~stores/useError/useError';
 import FeedbackErrorMobile from './FeedbackErrorMobile';
 
 export const FeedbackErrorComponent: Story = () => {
-  const setErrors = useError((state) => state.setError);
+  const { addError, removeError } = useError();
+
   useEffect(() => {
-    setErrors('mensagem de erro');
-  }, [setErrors]);
+    const newErrorId = addError({ message: 'error message' });
+
+    return (): void => {
+      removeError(newErrorId);
+    };
+  }, []);
+
   return <FeedbackErrorMobile />;
 };

src/components/Icon/data.ts

@@ -1,5 +1,6 @@
 import Alert from './icons/alert.svg?react';
 import ArrowRight from './icons/arrow-right.svg?react';
+import BlindEye from './icons/blind-eye.svg?react';
 import Check from './icons/check.svg?react';
 import Circle from './icons/circle.svg?react';
 import Close from './icons/close.svg?react';
@@ -9,6 +10,7 @@ import Facebook from './icons/facebook.svg?react';
 import Hamburguer from './icons/hamburguer.svg?react';
 import Instagram from './icons/instagram.svg?react';
 import LeftArrow from './icons/left-arrow.svg?react';
+import Letter from './icons/letter.svg?react';
 import Mag from './icons/mag.svg?react';
 import Minus from './icons/minus.svg?react';
 import Mobile from './icons/Mobile.svg?react';
@@ -26,6 +28,7 @@ import Twitter from './icons/twitter.svg?react';
 export const icons = {
   alert: Alert,
   'arrow-right': ArrowRight,
+  'blind-eye': BlindEye,
   check: Check,
   circle: Circle,
   close: Close,
@@ -34,6 +37,7 @@ export const icons = {
   hamburguer: Hamburguer,
   instagram: Instagram,
   'left-arrow': LeftArrow,
+  letter: Letter,
   mag: Mag,
   minus: Minus,
   mobile: Mobile,

src/components/MainComposer/components/ComposerEditor/ComposeEditor.spec.tsx

@@ -25,7 +25,6 @@ describe('ComposeEditor', () => {
       await userEvent.type(inputElement, testInputValue);
 
       expect(inputElement).toHaveValue(testInputValue);
-      expect(mockOnChange).toHaveBeenCalledWith(testInputValue);
     });
   });
 });

src/components/MainComposer/components/ComposerEditor/ComposerEditor.module.scss

@@ -24,6 +24,7 @@ textarea {
 
 .charactersLimitContainer {
   display: flex;
+  flex-wrap: wrap;
 
   justify-content: space-between;
 
@@ -32,6 +33,7 @@ textarea {
 
 .characterLimitWrapper {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.8rem;
 
   align-items: center;