Adiciona botão de adicionar nova conta

package.json

@@ -32,17 +32,16 @@
     "electron-reload": "^2.0.0-alpha.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-vitest": "^0.3.10",
-    "jsdom": "^22.1.0",
     "framer-motion": "^10.16.5",
     "i18next": "^23.7.6",
     "i18next-browser-languagedetector": "^7.2.0",
+    "jsdom": "^22.1.0",
     "nanoid": "^5.0.3",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.5.0",
-    "react-router-dom": "^6.20.0",
-    "react-scripts": "5.0.1"
+    "react-router-dom": "^6.20.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
@@ -51,14 +50,13 @@
     "@playwright/test": "^1.40.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.1.2",
-    "@vitejs/plugin-react-swc": "^3.5.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/electron-devtools-installer": "^2.2.5",
-    "@types/jest": "^29.5.10",
     "@types/node": "^20.10.0",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
     "commitizen": "^4.3.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
@@ -67,25 +65,22 @@
     "electron-builder": "^24.9.1",
     "electron-is-dev": "^2.0.0",
     "eslint": "^8.54.0",
-    "eslint-define-config": "^2.0.0",
     "eslint-config-next": "^14.0.3",
+    "eslint-define-config": "^2.0.0",
     "eslint-plugin-import-helpers": "^1.3.1",
     "eslint-plugin-prettier": "^5.0.1",
     "husky": "^8.0.3",
-    "jest": "^29.7.0",
     "lint-staged": "^15.1.0",
     "prettier": "^3.1.0",
-    "react-app-rewired": "^2.2.1",
     "sass": "^1.69.5",
     "stylelint": "^15.11.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
     "stylelint-order": "^6.0.3",
+    "typescript": "^5.3.2",
     "vite": "^5.0.0",
     "vite-plugin-electron": "^0.15.4",
-    "vite-plugin-native": "^0.2.0",
     "vite-tsconfig-paths": "^4.2.1",
     "vitest": "^0.34.6",
-    "typescript": "^5.3.2",
     "wait-on": "^7.2.0",
     "zustand": "^4.4.6"
   },

src/App.tsx

@@ -18,7 +18,7 @@ import scss from './App.module.scss';
 import './styles/base.scss';
 
 Sentry.init({
-  dsn: process.env.REACT_APP_SENTRY_KEY,
+  dsn: import.meta.env.REACT_APP_SENTRY_KEY,
   integrations: [
     new Sentry.BrowserTracing({
       routingInstrumentation: Sentry.reactRouterV6Instrumentation(

src/components/Accordion/Accordion.module.scss

@@ -7,5 +7,7 @@
 }
 
 .content {
+  overflow: hidden;
+
   flex-grow: 1;
 }

src/components/Accordion/Accordion.stories.tsx

@@ -1,16 +1,24 @@
+import React from 'react';
+
 import { Story } from '@ladle/react';
 
 import Accordion from './Accordion';
 
 import { TAccordionProps } from './Accordion.types';
 
 export const AccordionStories: Story<TAccordionProps> = (props) => {
+  const [isOpen, setOpen] = React.useState(false);
+
   return (
     <Accordion
       {...props}
       duration={0.3}
-      isOpen
-      header={<button>Click to open!</button>}
+      isOpen={isOpen}
+      header={
+        <button onClick={() => setOpen((isOpen) => !isOpen)}>
+          Click to open!
+        </button>
+      }
       content={
         <div>
           Lorem ipsum dolor sit, amet consectetur adipisicing elit. od quis

src/components/Accordion/Accordion.tsx

@@ -15,7 +15,7 @@ function computeVariants(duration: number) {
 function Accordion(props: TAccordionProps) {
   return (
     <section className={classNames(props.className, styles.container)}>
-      <header className={styles.header}>{props.header}</header>
+      <div className={styles.header}>{props.header}</div>
       <AnimatePresence>
         {props.isOpen && (
           <motion.div

src/components/AccordionTab/AccordionTab.module.scss

@@ -0,0 +1,69 @@
+@use '../../styles/global.scss' as *;
+
+.container {
+  display: flex;
+  flex-direction: column;
+
+  align-items: stretch;
+
+  font-family: $mainFont;
+
+  font-size: 1.6rem;
+
+  border: 1px solid #cbc4cf;
+
+  background-color: $primaryWhite;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  border-radius: 17px 17px 0 0;
+}
+
+.header {
+  width: 100%;
+
+  display: flex;
+  flex-flow: row nowrap;
+
+  align-items: center;
+
+  justify-content: space-between;
+
+  color: $primaryWhite;
+  font-size: 1.6rem;
+  line-height: 1;
+
+  padding: 1.2rem;
+
+  position: relative;
+
+  background-color: $secondaryPurple;
+  border-radius: 17px 17px 0 0;
+
+  &::before {
+    font-size: 1.8rem;
+
+    margin-right: 1rem;
+
+    content: '⬤';
+  }
+}
+
+.headerTitle {
+  flex-grow: 1;
+}
+
+.closeButton {
+  width: min-content;
+
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  color: $primaryWhite;
+  font-size: 4rem;
+  font-weight: 900;
+
+  margin-right: 2rem;
+
+  cursor: pointer;
+}

src/components/AccordionTab/AccordionTab.spec.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+
+import AccordionTab from './AccordionTab';
+
+beforeEach(() => {
+  // https://github.com/vitest-dev/vitest/issues/4223
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  window.scrollTo = vi.fn<any>();
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('AccordionTab', () => {
+  describe('when [hideCloseButton] is false', () => {
+    it('not render close button', () => {
+      render(<AccordionTab />);
+
+      const button = screen.getByRole('button');
+
+      expect(button).toBeInTheDocument();
+    });
+  });
+});

src/components/AccordionTab/AccordionTab.stories.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+import { Story } from '@ladle/react';
+
+import AccordionTab from './AccordionTab';
+
+import { TAccordionTabProps } from './AccordionTab.types';
+
+export const AccordionTabStories: Story<TAccordionTabProps> = (props) => {
+  const [isOpen, setOpen] = useState(true);
+
+  return (
+    <AccordionTab
+      title="Accordion Tab"
+      onChangeOpen={() => setOpen((isOpen) => !isOpen)}
+      isOpen={isOpen}
+      {...props}
+    >
+      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam autem
+      soluta labore nulla, nam quisquam sed, nostrum ab vero suscipit quae
+      debitis inventore velit iste iusto earum, iure aspernatur provident.
+    </AccordionTab>
+  );
+};

src/components/AccordionTab/AccordionTab.tsx

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+
+import Accordion from '../Accordion/Accordion';
+
+import scss from './AccordionTab.module.scss';
+
+import { TAccordionTabProps } from './AccordionTab.types';
+
+function AccordionTab(props: TAccordionTabProps) {
+  const handleClose = () => {
+    if (props.onChangeOpen) props.onChangeOpen(!props.isOpen);
+  };
+
+  const renderCloseButton = () => {
+    if (props.hideCloseButton) return null;
+    return (
+      <button onClick={handleClose} className={scss.closeButton}>
+        -
+      </button>
+    );
+  };
+
+  const renderHeader = () => (
+    <div className={scss.header}>
+      <p className={scss.headerTitle}>{props.title}</p>
+      {renderCloseButton()}
+    </div>
+  );
+
+  return (
+    <Accordion
+      className={classNames(scss.container, props.className)}
+      isOpen={props.isOpen ?? true}
+      header={renderHeader()}
+      content={props.children}
+    />
+  );
+}
+
+export default AccordionTab;

src/components/AccordionTab/AccordionTab.types.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+
+type TOnChangeOpen = (newIsOpen: boolean) => void;
+
+export type TAccordionTabProps = PropsWithChildren<{
+  title?: string;
+  className?: string;
+  isOpen?: boolean;
+  hideCloseButton?: boolean;
+  onChangeOpen?: TOnChangeOpen;
+}>;

src/components/InputSearch/InputSearch.module.scss

@@ -15,10 +15,12 @@
 }
 
 .container {
+  width: 100%;
+
   color: global.$secondaryGray;
   font-size: 1.4rem;
 
-  margin-top: 3rem;
+  margin-top: 1rem;
 
   margin-bottom: 2.4rem;
   letter-spacing: 0;
@@ -36,7 +38,7 @@
   }
 
   .inputWrapper {
-    width: 28.2rem;
+    width: 100%;
     height: 5.6rem;
 
     display: flex;

src/components/MainComposer/MainComposer.module.scss

@@ -1,67 +1,15 @@
 @use '../../styles/global';
 
-.wrapper {
-  width: 100%;
-}
-
-.innerHeader {
-  padding: 1rem 3rem;
-  border: 0.1rem solid global.$primaryGray;
-  border-bottom: 0;
-
-  background-color: global.$secondaryPurple;
-  border-radius: 2rem 2rem 0 0;
-}
-
-.innerHeader .mainContent {
-  .mainText {
-    color: global.$primaryWhite;
-    font-size: 2.2rem;
-    font-weight: 400;
-    font-style: normal;
-    line-height: 2.8rem;
-  }
-
-  .mainText::before {
-    width: 1.5rem;
-    height: 1.5rem;
-
-    display: inline-block;
-
-    float: left;
+.header {
+  font-size: 2rem;
 
-    margin-top: 0.7rem;
+  padding: 1rem 2rem;
 
-    margin-right: 1rem;
-
-    background-color: global.$primaryWhite;
-    border-radius: 50%;
-
-    content: '';
-  }
-
-  .mainText::after {
-    width: 2rem;
-    height: 0.5rem;
-
-    display: inline-block;
-
-    float: right;
-
-    margin-top: 1.4rem;
-    margin-left: 1rem;
-
-    background-color: global.$primaryWhite;
-
-    content: '';
-  }
+  column-gap: 1rem;
 }
 
 .content {
   padding: 2.4rem 1.6rem;
-  border: 0.1rem solid global.$primaryGray;
-
-  border-radius: 0 0 0.5rem 0.5rem;
 }
 
 .textInput textarea {