Desafio Concluido

jest.config.ts

@@ -0,0 +1,15 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  preset: 'ts-jest', // Configuração para TypeScript
+  testEnvironment: 'jsdom', // Ambiente necessário para testes com React
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1' // Mapeia os imports usando "@/"
+  },
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest' // Usa ts-jest para transformar arquivos TS/TSX
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'] // Configurações adicionais pós-env
+};
+
+export default config;

jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package.json

@@ -1,31 +1,32 @@
 {
-  "name": "my-app-ts",
+  "name": "diobank",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@chakra-ui/react": "^2.2.8",
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
+    "@chakra-ui/react": "^3.2.0",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.11.48",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "framer-motion": "^7.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@types/node": "^16.18.119",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "framer-motion": "^11.11.17",
+    "next-themes": "^0.4.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
     "react-scripts": "5.0.1",
-    "styled-components": "^5.3.5",
-    "typescript": "^4.7.4",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "test": "jest --config jest.config.ts",
+    "eject": "react-scripts eject",
+    "jest": "jest --config jest.config.ts"
   },
   "eslintConfig": {
     "extends": [
@@ -46,6 +47,10 @@
     ]
   },
   "devDependencies": {
-    "@types/styled-components": "^5.1.26"
+    "@types/jest": "^29.5.14",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.1"
   }
 }

src/App.tsx

@@ -1,30 +1,23 @@
-import { 
-  Center,
-  ChakraProvider,
-  Input,
-  Box,
-  Button
-} from '@chakra-ui/react'
+import { Box, ChakraProvider, defaultSystem, Flex, Grid, Image } from '@chakra-ui/react';
+import { Card } from './components/Card/Card';
+import { Header } from './components/Header/Header';
+import { Provider } from './components/ui/provider';
 import { login } from './services/login';
-
 function App() {
   return (
-    <ChakraProvider>
-      <Box minHeight='100vh' backgroundColor='#9413dc' padding='25px'>
-        <Box backgroundColor='#FFFFFF' borderRadius='25px' padding='15px' >
-          <Center>
-            <h1>Faça o login</h1>
-          </Center>
-          <Input placeholder="email" />
-          <Input placeholder="password" />
-          <Center>
-            <Button onClick={login} colorScheme='teal' size='sm' width='100%' marginTop='5px'>
-              Button
-            </Button>
-          </Center>
-        </Box>
-      </Box>
-    </ChakraProvider>
+    <>  
+        <ChakraProvider value={defaultSystem}>
+          <Header/>
+          <Grid height={'100vh'} width={'full'} bg={'green.400'} padding={'2em'}>
+            <Flex direction={'row'} justify={'center'} spaceX={'2em'}>
+              <Image rounded={'15px'} height={'90vh'} width={'150vh'} src="https://img.freepik.com/fotos-gratis/tabela-vazia-da-placa-de-madeira-na-frente-do-fundo-azul-do-mar-do-ceu-perspective-piso-de-madeira-sobre-o-mar-e-ceu-pode-ser-usado-para-exibicao-ou-montagem-seus-produtos-praia-e-conceitos-de-verao_1253-804.jpg?t=st=1732191440~exp=1732195040~hmac=b370e81c5661285930fc329674bedcabe7facdf2822d617dcc2a8e20ee426c3f&w=1380"/>
+              <Card/>
+            </Flex>
+
+          </Grid> 
+        </ChakraProvider>
+
+    </>
   );
 }
 

src/components/Card/Card.tsx

@@ -0,0 +1,32 @@
+import { 
+  Center,
+  ChakraProvider,
+  Input,
+  Box,
+  Button,
+  Heading,
+  Flex
+} from '@chakra-ui/react'
+// import { login } from '../../services/login';
+import { Header } from '../Header/Header';
+import { LoginButton } from './LoginButton';
+import { login } from '../../services/login';
+
+export const Card = () => {
+  return(
+    // <Box backgroundColor='green.400' padding='25px'>
+        <Flex direction={'column'} spaceY={'2em'} alignItems={'center'} bg={'green.500'} h={'90vh'} w={'40vh'} padding={'2em'} rounded={'md'}>
+
+          <Heading textStyle={'4xl'} color={'white'} fontWeight={'bold'}>Login</Heading>
+
+          <Input padding={'1em'} placeholder='Email' bg={'white'} variant={'subtle'} required/>
+          <Input padding={'1em'} placeholder='Senha' bg={'white'} variant={'subtle'} required/>
+
+          {/* <Button fontWeight={'semibold'} color={'white'} onClick={login} bg={'green.700'} padding={'1em'}>Entrar</Button> */}
+          <LoginButton loginFunction={login}/>
+
+        </Flex>
+    // </Box>
+
+)
+}

src/components/Card/LoginButton.tsx

@@ -0,0 +1,12 @@
+import { Button } from "@chakra-ui/react"
+import { jsx } from "@emotion/react"
+
+interface Button{
+    loginFunction: ()=>{} | void
+}
+
+export const LoginButton = ({loginFunction}:Button) => {
+    return(
+        <Button onClick={loginFunction} color='white' bg={'green.700'} size='sm' width='100%' marginTop='5px'>Entrar</Button>
+    )
+}

src/components/Footer.tsx

@@ -1,7 +1,7 @@
 export const Footer  = () => {
   return(
     <div>
-      Footer
+      asd
     </div>
   )
 }

src/components/Header/Header.tsx

@@ -1,9 +1,8 @@
-import './Header.css'
+import { Flex, Heading } from '@chakra-ui/react'
+// import './Header.css'
 
 export const Header  = () => {
   return(
-    <div className='header'>
-      Dio Bank
-    </div>
+    <Flex justify={'center'} padding={'0.5em'}><Heading textAlign={'center'}>Dio Bank</Heading></Flex>
   )
 }

src/components/Layout.tsx

@@ -4,8 +4,8 @@ import { Header } from "./Header/Header"
 export const Layout = ({ children }: any) => {
   return(
     <>
-      <Header />
-      { children }
+      <Header/>
+        { children }
       <Footer />
     </>
   )

src/components/ui/avatar.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import type { GroupProps, SlotRecipeProps } from "@chakra-ui/react"
+import { Avatar as ChakraAvatar, Group } from "@chakra-ui/react"
+import * as React from "react"
+
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>
+
+export interface AvatarProps extends ChakraAvatar.RootProps {
+  name?: string
+  src?: string
+  srcSet?: string
+  loading?: ImageProps["loading"]
+  icon?: React.ReactElement
+  fallback?: React.ReactNode
+}
+
+export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  function Avatar(props, ref) {
+    const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
+      props
+    return (
+      <ChakraAvatar.Root ref={ref} {...rest}>
+        <AvatarFallback name={name} icon={icon}>
+          {fallback}
+        </AvatarFallback>
+        <ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
+        {children}
+      </ChakraAvatar.Root>
+    )
+  },
+)
+
+interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
+  name?: string
+  icon?: React.ReactElement
+}
+
+const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
+  function AvatarFallback(props, ref) {
+    const { name, icon, children, ...rest } = props
+    return (
+      <ChakraAvatar.Fallback ref={ref} {...rest}>
+        {children}
+        {name != null && children == null && <>{getInitials(name)}</>}
+        {name == null && children == null && (
+          <ChakraAvatar.Icon asChild={!!icon}>{icon}</ChakraAvatar.Icon>
+        )}
+      </ChakraAvatar.Fallback>
+    )
+  },
+)
+
+function getInitials(name: string) {
+  const names = name.trim().split(" ")
+  const firstName = names[0] != null ? names[0] : ""
+  const lastName = names.length > 1 ? names[names.length - 1] : ""
+  return firstName && lastName
+    ? `${firstName.charAt(0)}${lastName.charAt(0)}`
+    : firstName.charAt(0)
+}
+
+interface AvatarGroupProps extends GroupProps, SlotRecipeProps<"avatar"> {}
+
+export const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+  function AvatarGroup(props, ref) {
+    const { size, variant, borderless, ...rest } = props
+    return (
+      <ChakraAvatar.PropsProvider value={{ size, variant, borderless }}>
+        <Group gap="0" spaceX="-3" ref={ref} {...rest} />
+      </ChakraAvatar.PropsProvider>
+    )
+  },
+)

src/components/ui/button.tsx

@@ -0,0 +1,40 @@
+import type { ButtonProps as ChakraButtonProps } from "@chakra-ui/react"
+import {
+  AbsoluteCenter,
+  Button as ChakraButton,
+  Span,
+  Spinner,
+} from "@chakra-ui/react"
+import * as React from "react"
+
+interface ButtonLoadingProps {
+  loading?: boolean
+  loadingText?: React.ReactNode
+}
+
+export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(props, ref) {
+    const { loading, disabled, loadingText, children, ...rest } = props
+    return (
+      <ChakraButton disabled={loading || disabled} ref={ref} {...rest}>
+        {loading && !loadingText ? (
+          <>
+            <AbsoluteCenter display="inline-flex">
+              <Spinner size="inherit" color="inherit" />
+            </AbsoluteCenter>
+            <Span opacity={0}>{children}</Span>
+          </>
+        ) : loading && loadingText ? (
+          <>
+            <Spinner size="inherit" color="inherit" />
+            {loadingText}
+          </>
+        ) : (
+          children
+        )}
+      </ChakraButton>
+    )
+  },
+)

src/components/ui/checkbox.tsx

@@ -0,0 +1,25 @@
+import { Checkbox as ChakraCheckbox } from "@chakra-ui/react"
+import * as React from "react"
+
+export interface CheckboxProps extends ChakraCheckbox.RootProps {
+  icon?: React.ReactNode
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  rootRef?: React.Ref<HTMLLabelElement>
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox(props, ref) {
+    const { icon, children, inputProps, rootRef, ...rest } = props
+    return (
+      <ChakraCheckbox.Root ref={rootRef} {...rest}>
+        <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
+        <ChakraCheckbox.Control>
+          {icon || <ChakraCheckbox.Indicator />}
+        </ChakraCheckbox.Control>
+        {children != null && (
+          <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
+        )}
+      </ChakraCheckbox.Root>
+    )
+  },
+)

src/components/ui/close-button.tsx

@@ -0,0 +1,17 @@
+import type { ButtonProps as ChakraCloseButtonProps } from "@chakra-ui/react"
+import { IconButton as ChakraIconButton } from "@chakra-ui/react"
+import * as React from "react"
+import { LuX } from "react-icons/lu"
+
+export interface CloseButtonProps extends ChakraCloseButtonProps {}
+
+export const CloseButton = React.forwardRef<
+  HTMLButtonElement,
+  CloseButtonProps
+>(function CloseButton(props, ref) {
+  return (
+    <ChakraIconButton variant="ghost" aria-label="Close" ref={ref} {...props}>
+      {props.children ?? <LuX />}
+    </ChakraIconButton>
+  )
+})