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

@@ -4,6 +4,7 @@ import { HashRouter as Router, 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';
 
@@ -17,6 +18,7 @@ function App(): ReactNode {
         <Router>
           <SentryRoutes>
             <Route element={<Home />} path="/" />
+            <Route element={<Register />} path="/register" />
           </SentryRoutes>
         </Router>
       </div>

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.module.scss

@@ -0,0 +1,133 @@
+@use '../../styles/global';
+@use '~styles/breakpoints.scss' as *;
+
+@mixin apply-color($color) {
+  &.containerFocus {
+    color: $color;
+  }
+
+  .inputWrapper {
+    .label {
+      &.labelAnimate {
+        color: $color;
+      }
+    }
+  }
+}
+
+.container {
+  display: grid;
+
+  &.containerError {
+    color: global.$secondaryRed;
+  }
+
+  &.containerFocus {
+    color: global.$secondaryPurple;
+  }
+
+  .innerContainer {
+    display: flex;
+    flex-direction: row;
+    grid-area: 1/1;
+
+    padding: 1rem;
+    border: 1px solid global.$secondaryGray;
+
+    border-radius: 4px;
+
+    &.innerContainerFocus {
+      border-color: global.$secondaryPurple;
+    }
+
+    &.innerContainerError {
+      border-color: global.$secondaryRed;
+    }
+
+    .input {
+      width: 100%;
+
+      font-size: 1rem;
+      font-weight: 400;
+
+      border: 0;
+      letter-spacing: 0.03rem;
+
+      &.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: 0.75rem;
+    font-weight: 400;
+
+    line-height: calc(0.75 / 2);
+
+    margin-left: 1rem;
+
+    padding: 0 0.25rem;
+
+    z-index: 1;
+
+    background-color: global.$primaryWhite;
+  }
+
+  .rightIcon {
+    width: 1.5rem;
+
+    display: flex;
+
+    align-items: center;
+
+    &.rightIconError {
+      color: global.$secondaryRed;
+    }
+  }
+
+  .rightIconButton {
+    width: 1.5rem;
+
+    transition: all 0.1s;
+
+    &:hover {
+      transform: scale(0.92);
+
+      cursor: pointer;
+    }
+  }
+
+  .supportText {
+    height: 1.5rem;
+
+    color: global.$secondaryGray;
+    font-size: 0.75rem;
+    font-weight: 400;
+
+    padding: 0.25rem 1rem;
+
+    visibility: hidden;
+
+    &.supportTextExists {
+      visibility: visible;
+    }
+
+    &.supportTextError {
+      color: global.$secondaryRed;
+    }
+  }
+}

src/components/TextInput/TextInput.spec.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import TextInput from './TextInput';
+
+const mockProps = {
+  error: false,
+  label: 'Test Label',
+  name: 'testInput',
+  onChange: vi.fn(),
+  onFocus: vi.fn(),
+  placeholder: 'Test Placeholder',
+  required: false,
+  supportText: 'Test Error Message',
+  type: 'text',
+  value: 'Value',
+};
+
+describe('TextInput component', () => {
+  it('renders the component', () => {
+    render(<TextInput {...mockProps} />);
+
+    const inputElement = screen.getByPlaceholderText('Test Placeholder');
+    const labelElement = screen.getByText('Test Label');
+
+    expect(inputElement).toBeInTheDocument();
+    expect(labelElement).toBeInTheDocument();
+  });
+
+  it('handles onFocus callback', async () => {
+    render(<TextInput {...mockProps} />);
+    const inputElement = screen.getByPlaceholderText('Test Placeholder');
+
+    await userEvent.click(inputElement);
+
+    expect(mockProps.onFocus).toHaveBeenCalled();
+  });
+
+  it('displays error message when errors prop is true', () => {
+    render(<TextInput {...mockProps} error />);
+
+    const errorMessage = screen.getByText('Test Error Message');
+
+    expect(errorMessage).toBeInTheDocument();
+  });
+
+  it('call right icon action correctly', async () => {
+    const handleRightIconClickMock = vi.fn();
+    render(
+      <TextInput
+        {...mockProps}
+        handleRightIconClick={handleRightIconClickMock}
+        rightIcon="close"
+      />
+    );
+
+    const icon = screen.getByRole('button');
+
+    await userEvent.click(icon);
+
+    expect(handleRightIconClickMock).toHaveBeenCalled();
+  });
+});

src/components/TextInput/TextInput.stories.tsx

@@ -0,0 +1,23 @@
+import { Story } from '@ladle/react';
+
+import TextInput from './TextInput';
+
+import { TInputProps } from './TextInput.types';
+
+export default {
+  component: TextInput,
+  title: 'TextInput',
+};
+
+const Template: Story<TInputProps> = (args) => (
+  <TextInput {...args} ref={undefined} />
+);
+
+export const InputSearchComponent = Template.bind({});
+InputSearchComponent.args = {
+  error: false,
+  name: 'Input Search',
+  placeholder: 'Search Social Media',
+  required: true,
+  supportText: 'Erro no campo de entrada',
+};