Feat: tela de registro

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/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/TextInput/TextInput.components.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import Icon from '~components/Icon/Icon';
+
+import scss from './TextInput.module.scss';
+
+import { RightIconProps } from './TextInput.types';
+
+export function RightIcon(props: RightIconProps): React.JSX.Element | null {
+  const { error, handleRightIconClick, rightIcon } = props;
+
+  const rightIconClass = [scss.rightIcon];
+
+  if (error) {
+    rightIconClass.push(scss.rightIconError);
+  }
+
+  let iconElement;
+
+  if (rightIcon)
+    iconElement = (
+      <Icon
+        aria-label="input icon"
+        className={classNames(rightIconClass)}
+        icon={rightIcon}
+      />
+    );
+
+  if (error)
+    iconElement = (
+      <Icon
+        aria-label="alert-icon"
+        className={classNames(rightIconClass)}
+        icon="alert"
+      />
+    );
+
+  if (!iconElement) return null;
+
+  return handleRightIconClick ? (
+    <button
+      className={scss.rightIconButton}
+      onClick={handleRightIconClick}
+      type="button"
+    >
+      {iconElement}
+    </button>
+  ) : (
+    iconElement
+  );
+}

src/components/TextInput/TextInput.module.scss

@@ -0,0 +1,119 @@
+@use '../../styles/global';
+@use '~styles/breakpoints.scss' as *;
+
+.container {
+  display: grid;
+
+  &.containerError {
+    color: global.$secondaryRed;
+  }
+
+  &.containerFocus {
+    color: global.$secondaryPurple;
+  }
+
+  .innerContainer {
+    display: flex;
+    flex-direction: row;
+    grid-area: 1/1;
+
+    padding: 1.6rem;
+    border: 1px solid global.$secondaryGray;
+
+    border-radius: 4px;
+
+    &.innerContainerFocus {
+      border-color: global.$secondaryPurple;
+    }
+
+    &.innerContainerError {
+      border-color: global.$secondaryRed;
+    }
+
+    .input {
+      width: 100%;
+
+      font-size: 1.6rem;
+      font-weight: 400;
+
+      border: 0;
+      letter-spacing: 0.05rem;
+
+      &.inputFocus {
+        caret-color: global.$secondaryPurple;
+      }
+
+      &.inputError {
+        caret-color: global.$secondaryRed;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  .label {
+    width: fit-content;
+    height: fit-content;
+
+    grid-area: 1/1;
+
+    font-size: 1.2rem;
+    font-weight: 400;
+
+    line-height: calc(0.75 / 2);
+
+    margin-left: 1.6rem;
+
+    padding: 0 0.4rem;
+
+    z-index: 1;
+
+    background-color: global.$primaryWhite;
+  }
+
+  .rightIcon {
+    width: 2.4rem;
+
+    display: flex;
+
+    align-items: center;
+
+    &.rightIconError {
+      color: global.$secondaryRed;
+    }
+  }
+
+  .rightIconButton {
+    width: 2.4rem;
+
+    transition: all 0.1s;
+
+    &:hover {
+      transform: scale(0.92);
+
+      cursor: pointer;
+    }
+  }
+
+  .supportText {
+    height: 2.4rem;
+
+    color: global.$secondaryGray;
+    font-size: 1.2rem;
+    font-weight: 400;
+
+    padding: 0.4rem 1.6rem;
+
+    visibility: hidden;
+
+    &.supportTextExists {
+      visibility: visible;
+    }
+
+    &.supportTextError {
+      color: global.$secondaryRed;
+    }
+  }
+}