From 584d8a285f958bb0eeb9e0f3194b759193b205ab Mon Sep 17 00:00:00 2001 From: Robson Natanael Date: Tue, 5 Apr 2022 21:18:00 -0300 Subject: [PATCH] feat: create modal and form --- .eslintcache | 2 +- package.json | 3 + src/App.tsx | 22 ++++- src/components/Header/index.tsx | 8 +- src/components/NewTransactionModal/index.tsx | 98 ++++++++++++++++++++ src/components/NewTransactionModal/styles.ts | 96 +++++++++++++++++++ src/components/TransactionsTable/index.tsx | 44 ++++++--- src/index.tsx | 42 +++++++-- src/styles/global.ts | 34 +++++++ yarn.lock | 47 +++++++++- 10 files changed, 366 insertions(+), 30 deletions(-) create mode 100644 src/components/NewTransactionModal/index.tsx create mode 100644 src/components/NewTransactionModal/styles.ts diff --git a/.eslintcache b/.eslintcache index e027f91..63c7bd0 100644 --- a/.eslintcache +++ b/.eslintcache @@ -1 +1 @@ -[{"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/index.tsx":"1","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/App.tsx":"2","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/styles/global.ts":"3","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Header/index.tsx":"4","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Header/styles.ts":"5","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Dashboard/index.tsx":"6","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Dashboard/styles.ts":"7","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Summary/index.tsx":"8","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Summary/styles.ts":"9","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/TransactionsTable/index.tsx":"10","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/TransactionsTable/styles.ts":"11","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/services/api.ts":"12"},{"size":556,"mtime":1648952246282,"results":"13","hashOfConfig":"14"},{"size":262,"mtime":1648938300862,"results":"15","hashOfConfig":"14"},{"size":909,"mtime":1648944108002,"results":"16","hashOfConfig":"14"},{"size":324,"mtime":1648779011418,"results":"17","hashOfConfig":"14"},{"size":543,"mtime":1648943023772,"results":"18","hashOfConfig":"14"},{"size":263,"mtime":1648947003732,"results":"19","hashOfConfig":"14"},{"size":145,"mtime":1648937924902,"results":"20","hashOfConfig":"14"},{"size":800,"mtime":1648943380912,"results":"21","hashOfConfig":"14"},{"size":632,"mtime":1648943356142,"results":"22","hashOfConfig":"14"},{"size":948,"mtime":1648953717462,"results":"23","hashOfConfig":"14"},{"size":638,"mtime":1648948051382,"results":"24","hashOfConfig":"14"},{"size":106,"mtime":1648953563212,"results":"25","hashOfConfig":"14"},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"16wifw6",{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"43","messages":"44","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"45","messages":"46","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"47","messages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"49","messages":"50","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/App.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/styles/global.ts",[],["51","52"],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Header/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Header/styles.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Dashboard/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Dashboard/styles.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Summary/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Summary/styles.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/TransactionsTable/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/TransactionsTable/styles.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/services/api.ts",[],{"ruleId":"53","replacedBy":"54"},{"ruleId":"55","replacedBy":"56"},"no-native-reassign",["57"],"no-negated-in-lhs",["58"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file +[{"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/index.tsx":"1","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/App.tsx":"2","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/styles/global.ts":"3","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Header/index.tsx":"4","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Header/styles.ts":"5","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Dashboard/index.tsx":"6","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Dashboard/styles.ts":"7","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Summary/index.tsx":"8","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Summary/styles.ts":"9","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/TransactionsTable/index.tsx":"10","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/TransactionsTable/styles.ts":"11","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/services/api.ts":"12","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/NewTransactionModal/index.tsx":"13","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/NewTransactionModal/styles.ts":"14"},{"size":1108,"mtime":1649204161600,"results":"15","hashOfConfig":"16"},{"size":894,"mtime":1649123706128,"results":"17","hashOfConfig":"16"},{"size":1511,"mtime":1649126788408,"results":"18","hashOfConfig":"16"},{"size":470,"mtime":1649013876991,"results":"19","hashOfConfig":"16"},{"size":543,"mtime":1648943023772,"results":"20","hashOfConfig":"16"},{"size":263,"mtime":1648947003732,"results":"21","hashOfConfig":"16"},{"size":145,"mtime":1648937924902,"results":"22","hashOfConfig":"16"},{"size":800,"mtime":1648943380912,"results":"23","hashOfConfig":"16"},{"size":632,"mtime":1648943356142,"results":"24","hashOfConfig":"16"},{"size":1393,"mtime":1649204195950,"results":"25","hashOfConfig":"16"},{"size":638,"mtime":1648948051382,"results":"26","hashOfConfig":"16"},{"size":106,"mtime":1648953563212,"results":"27","hashOfConfig":"16"},{"size":2582,"mtime":1649199540280,"results":"28","hashOfConfig":"16"},{"size":1719,"mtime":1649198533310,"results":"29","hashOfConfig":"16"},{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"16wifw6",{"filePath":"32","messages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"43","messages":"44","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"45","messages":"46","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"47","messages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"49","messages":"50","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"51","messages":"52","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"53","messages":"54","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"55","messages":"56","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"57","messages":"58","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/App.tsx",[],["59","60"],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/styles/global.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Header/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Header/styles.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Dashboard/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Dashboard/styles.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Summary/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Summary/styles.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/TransactionsTable/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/TransactionsTable/styles.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/services/api.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/NewTransactionModal/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/NewTransactionModal/styles.ts",[],{"ruleId":"61","replacedBy":"62"},{"ruleId":"63","replacedBy":"64"},"no-native-reassign",["65"],"no-negated-in-lhs",["66"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/package.json b/package.json index 10f7df2..a1074d1 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,10 @@ "dependencies": { "axios": "^0.26.1", "miragejs": "^0.1.43", + "polished": "^4.2.1", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-modal": "^3.14.4", "react-scripts": "4.0.1", "styled-components": "^5.3.5", "web-vitals": "^0.2.4" @@ -19,6 +21,7 @@ "@types/node": "^12.0.0", "@types/react": "^16.9.53", "@types/react-dom": "^16.9.8", + "@types/react-modal": "^3.13.1", "@types/styled-components": "^5.1.24", "typescript": "^4.0.3" }, diff --git a/src/App.tsx b/src/App.tsx index b36fb17..6d754ac 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,32 @@ +import { useState } from 'react'; +import Modal from 'react-modal'; import { Dashboard } from "./components/Dashboard"; import { Header } from "./components/Header"; +import { NewTransactionModal } from './components/NewTransactionModal'; + import { GlobalStyle } from "./styles/global"; +Modal.setAppElement('#root'); + export function App() { + const [isNewTransactionModalOpen, setIsNewTransactionModalOpen] = useState(false); + + function handleOpenNewTransactionModal() { + setIsNewTransactionModalOpen(true); + } + + function handleCloseNewTransactionModal() { + setIsNewTransactionModalOpen(false); + } + return ( <> -
+
+ ); diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 92f784c..0202551 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,12 +1,16 @@ import logoImg from '../../assets/logo.svg'; import { Container, Content } from './styles'; -export function Header() { +interface HeaderProps { + onOpenNewTransactionModal: () => void; +} + +export function Header({ onOpenNewTransactionModal }: HeaderProps) { return ( dt money - diff --git a/src/components/NewTransactionModal/index.tsx b/src/components/NewTransactionModal/index.tsx new file mode 100644 index 0000000..616387a --- /dev/null +++ b/src/components/NewTransactionModal/index.tsx @@ -0,0 +1,98 @@ +import { FormEvent, useState } from 'react'; +import Modal from 'react-modal'; +import closeImg from '../../assets/close.svg'; +import incomeImg from '../../assets/income.svg'; +import outcomeImg from '../../assets/outcome.svg'; +import { api } from '../../services/api'; +import { Container, TransactionTypeContainer, RadioBox } from './styles'; + +interface NewTransactionModalProps { + isOpen: boolean; + onRequestClose: () => void; +} + +export function NewTransactionModal({ isOpen, onRequestClose }: NewTransactionModalProps) { + const [title, setTitle] = useState(''); + const [value, setValue] = useState(0); + const [category, setCategory] = useState(''); + const [type, setType] = useState('deposit'); + + function handleCreateNewTransaction(event: FormEvent) { + event.preventDefault(); + + const data = { + title, + value, + category, + type + } + + api.post('/transactions', data); + } + + return ( + + + + +

Cadastrar transação

+ + setTitle(event.target.value)} + /> + + setValue(Number(event.target.value))} + /> + + + { setType('deposit'); }} + isActive={type === 'deposit'} + activeColor="green" + > + Entrada + Entrada + + + { setType('withdraw'); }} + isActive={type === 'withdraw'} + activeColor="red" + > + Saída + Saída + + + + setCategory(event.target.value)} + /> + + + + + ); +} diff --git a/src/components/NewTransactionModal/styles.ts b/src/components/NewTransactionModal/styles.ts new file mode 100644 index 0000000..104b6b5 --- /dev/null +++ b/src/components/NewTransactionModal/styles.ts @@ -0,0 +1,96 @@ +import styled from "styled-components"; +import { darken, transparentize } from "polished"; + +export const Container = styled.form` + h2 { + color: var(--text-title); + font-size: 1.5rem; + margin-bottom: 2rem; + } + + input { + width: 100%; + padding: 0 1.5rem; + height: 4rem; + border-radius: 0.25rem; + border: 1px solid #d7d7d7; + background: #e7e9ee; + font-weight: 400; + font-size: 1rem; + + &::placeholder { + color: var(--text-body); + } + + & + input { + margin-top: 1rem; + } + } + + button[type="submit"] { + width: 100%; + padding: 0 1.5rem; + height: 4rem; + background: var(--green); + color: #fff; + border-radius: 0.25rem; + border: 0; + font-size: 1rem; + font-weight: 600; + margin-top: 1.5rem; + transition: filter 0.2s; + + &:hover { + filter: brightness(0.9); + } + } +`; + +export const TransactionTypeContainer = styled.div` + margin: 1rem 0px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.5rem; +`; + +interface RadioBoxProps { + isActive: boolean; + activeColor: "green" | "red"; +} + +const colors = { + green: "#33cc95", + red: "#e52e4d", +}; + +export const RadioBox = styled.button` + height: 4rem; + border: 1px solid #d7d7d7; + border-radius: 0.25rem; + + background: ${(props) => + props.isActive + ? transparentize(0.9, colors[props.activeColor]) + : "transparent"}; + + display: flex; + align-items: center; + justify-content: center; + transition: border-color 0.2s; + + &:hover { + border-color: ${darken(0.1, "#d7d7d7")}; + } + + img { + width: 20px; + height: 20px; + } + + span { + display: inline-block; + margin-left: 1rem; + font-size: 1rem; + color: var(--text-title); + } +`; diff --git a/src/components/TransactionsTable/index.tsx b/src/components/TransactionsTable/index.tsx index 2fb6da5..deccc94 100644 --- a/src/components/TransactionsTable/index.tsx +++ b/src/components/TransactionsTable/index.tsx @@ -1,11 +1,22 @@ -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { api } from "../../services/api"; import { Container } from "./styles"; +interface Transaction { + id: number; + title: string; + amount: number; + type: string; + category: string; + createdAt: string; +} + export function TransactionsTable() { + const [transactions, setTransactions] = useState([]); + useEffect(() => { api.get('transactions') - .then(response => console.log(response.data)) + .then(response => setTransactions(response.data.transactions)); }, []) return ( @@ -20,18 +31,23 @@ export function TransactionsTable() { - - Desenvolvimento de website - R$12.000 - Desenvolvimento - 02/04/2022 - - - Financiamento Imobiliário - - R$700 - Financiamento - 05/04/2022 - + {transactions.map(transaction => ( + + {transaction.title} + + {new Intl.NumberFormat('pt-BR', { + style: 'currency', + currency: 'BRL' + }).format(transaction.amount)} + + {transaction.category} + + {new Intl.DateTimeFormat('pt-BR').format( + new Date(transaction.createdAt) + )} + + + ))} diff --git a/src/index.tsx b/src/index.tsx index 0fe7d9c..af6a226 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,24 +1,48 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { createServer } from 'miragejs'; +import { createServer, Model } from 'miragejs'; import { App } from './App'; createServer({ - routes() { - this.namespace = 'api'; + models: { + transaction: Model, + }, - this.get('/transactions', () => { - return [ + seeds(server) { + server.db.loadData({ + transactions: [ { id: 1, - title: 'Transaction 1', - amount: 400, + title: 'Freelance de website', type: 'deposit', - category: 'Food', - createdAt: new Date() + category: 'Dev', + amount: 6000, + createdAt: new Date('2022-04-05 20:35:00'), + }, + { + id: 2, + title: 'Aluguel', + type: 'withdraw', + category: 'Casa', + amount: 1100, + createdAt: new Date('2022-04-04 11:00:00'), } ] }) + }, + + routes() { + this.namespace = 'api'; + + this.get('/transactions', () => { + return this.schema.all('transaction'); + }); + + this.post('/transactions', (schema, request) => { + const data = JSON.parse(request.requestBody); + + return schema.create('transaction', data); + }); } }) diff --git a/src/styles/global.ts b/src/styles/global.ts index bfa887b..9011b38 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -54,4 +54,38 @@ export const GlobalStyle = createGlobalStyle` opacity: 0.6; cursor: not-allowed; } + + .react-modal-overlay { + background: rgba(0, 0, 0, 0.5); + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + } + + .react-modal-content { + width: 100%; + max-width: 576px; + background: var(--background); + padding: 3rem; + position: relative; + border-radius: 0.25rem; + } + + .react-modal-close { + position: absolute; + right: 1.5rem; + top: 1.5rem; + border: 0; + background: transparent; + transition: filter 0.2s; + + &:hover { + filter: brightness(0.8); + } + } `; diff --git a/yarn.lock b/yarn.lock index 181b838..80a5f30 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1042,7 +1042,7 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.8", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.17.8" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.8.tgz#3e56e4aff81befa55ac3ac6a0967349fd1c5bca2" integrity sha512-dQpEpK0O9o6lj6oPu0gRDbbnk+4LeHlNcBpspf6Olzt3GIX4P1lWF1gS+pHLDFlaJvbR6q7jCfQ08zA4QJBnmA== @@ -1830,6 +1830,13 @@ dependencies: "@types/react" "^16" +"@types/react-modal@^3.13.1": + version "3.13.1" + resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-3.13.1.tgz#5b9845c205fccc85d9a77966b6e16dc70a60825a" + integrity sha512-iY/gPvTDIy6Z+37l+ibmrY+GTV4KQTHcCyR5FIytm182RQS69G5ps4PH2FxtC7bAQ2QRHXMevsBgck7IQruHNg== + dependencies: + "@types/react" "*" + "@types/react@*": version "17.0.43" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55" @@ -4853,6 +4860,11 @@ execa@^4.0.0: signal-exit "^3.0.2" strip-final-newline "^2.0.0" +exenv@^1.2.0: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= + exit@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c" @@ -7223,7 +7235,7 @@ loglevel@^1.6.8: resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.0.tgz#e7ec73a57e1e7b419cb6c6ac06bf050b67356114" integrity sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA== -loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -8313,6 +8325,13 @@ pnp-webpack-plugin@1.6.4: dependencies: ts-pnp "^1.1.6" +polished@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/polished/-/polished-4.2.1.tgz#e38cdf4244b3bea63f77b0f8ab2335e22a66bd08" + integrity sha512-vRkUnHBwVX7kIeCzCghcLCWoDenV+sV7lkItnmTc7bb6Uzbe8ogU1FxqEW8+dXCxUX8YW8vusQ0HTk2yES7bfQ== + dependencies: + "@babel/runtime" "^7.17.8" + portfinder@^1.0.26: version "1.0.28" resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778" @@ -9091,7 +9110,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.8.1: +prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -9316,6 +9335,21 @@ react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== +react-lifecycles-compat@^3.0.0: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + +react-modal@^3.14.4: + version "3.14.4" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.14.4.tgz#2ca7e8e9a180955e5c9508c228b73167c1e6f6a3" + integrity sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg== + dependencies: + exenv "^1.2.0" + prop-types "^15.7.2" + react-lifecycles-compat "^3.0.0" + warning "^4.0.3" + react-refresh@^0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" @@ -11223,6 +11257,13 @@ walker@^1.0.7, walker@~1.0.5: dependencies: makeerror "1.0.12" +warning@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + watchpack-chokidar2@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"