diff --git a/package-lock.json b/package-lock.json index edd0367..cfca1f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,19 +1,22 @@ { - "name": "organograma", + "name": "organo", "version": "0.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "organograma", + "name": "organo", "version": "0.1.0", "dependencies": { "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.2.0", "@testing-library/user-event": "^13.5.0", + "hex-to-rgba": "^2.0.1", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-icons": "^4.10.1", "react-scripts": "5.0.1", + "uuid": "^9.0.0", "web-vitals": "^2.1.4" } }, @@ -8040,6 +8043,11 @@ "he": "bin/he" } }, + "node_modules/hex-to-rgba": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/hex-to-rgba/-/hex-to-rgba-2.0.1.tgz", + "integrity": "sha512-5XqPJBpsEUMsseJUi2w2Hl7cHFFi3+OO10M2pzAvKB1zL6fc+koGMhmBqoDOCB4GemiRM/zvDMRIhVw6EkB8dQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -13432,6 +13440,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz", + "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -14263,6 +14279,14 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", @@ -15300,9 +15324,9 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", "bin": { "uuid": "dist/bin/uuid" } @@ -21963,6 +21987,11 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, + "hex-to-rgba": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/hex-to-rgba/-/hex-to-rgba-2.0.1.tgz", + "integrity": "sha512-5XqPJBpsEUMsseJUi2w2Hl7cHFFi3+OO10M2pzAvKB1zL6fc+koGMhmBqoDOCB4GemiRM/zvDMRIhVw6EkB8dQ==" + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -25721,6 +25750,12 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-icons": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz", + "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -26334,6 +26369,13 @@ "faye-websocket": "^0.11.3", "uuid": "^8.3.2", "websocket-driver": "^0.7.4" + }, + "dependencies": { + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + } } }, "source-list-map": { @@ -27114,9 +27156,9 @@ "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" }, "uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", + "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==" }, "v8-compile-cache": { "version": "2.3.0", diff --git a/package.json b/package.json index 61e46f8..7b490c0 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,12 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.2.0", "@testing-library/user-event": "^13.5.0", + "hex-to-rgba": "^2.0.1", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-icons": "^4.10.1", "react-scripts": "5.0.1", + "uuid": "^9.0.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/src/App.js b/src/App.js index d914398..ccc063d 100644 --- a/src/App.js +++ b/src/App.js @@ -3,187 +3,243 @@ import Banner from "./componentes/Banner"; import Formulario from "./componentes/Formulario"; import Rodape from "./componentes/Rodape"; import Time from "./componentes/Time"; +import { v4 as uuidv4 } from 'uuid'; function App() { - const times = [ + const [times, setTimes] = useState( [ { + id: uuidv4(), + favorito: false, nome: 'Programação', - corPrimaria: '#D9F7E9', - corSecundaria: '#57C278' + cor: '#57C278' }, { + id: uuidv4(), + favorito: false, nome: 'Front-End', - corPrimaria: '#E8F8FF', - corSecundaria: '#82CFFA' + cor: '#82CFFA' }, { + id: uuidv4(), + favorito: false, nome: 'Data Science', - corPrimaria: '#F0F8E2', - corSecundaria: '#A6D157' + cor: '#A6D157' }, { + id: uuidv4(), + favorito: false, nome: 'Devops', - corPrimaria: '#FDE7E8', - corSecundaria: '#E06B69' + cor: '#E06B69' }, { + id: uuidv4(), + favorito: false, nome: 'UX e Design', - corPrimaria: '#FAE9F5', - corSecundaria: '#DB6EBF' + cor: '#DB6EBF' }, { + id: uuidv4(), + favorito: false, nome: 'Mobile', - corPrimaria: '#FFF5D9', - corSecundaria: '#FFBA05' + cor: '#FFBA05' }, { + id: uuidv4(), + favorito: false, nome: 'Inovação e Gestão', - corPrimaria: '#FFEEDF', - corSecundaria: '#FF8A29' + cor: '#FF8A29' }, - ] + ]) const inicial = [ { + id: uuidv4(), + favorito: false, nome: 'JULIANA AMOASEI', cargo: 'Desenvolvedora de software e instrutora', imagem: 'https://www.alura.com.br/assets/img/lideres/juliana-amoasei.1647533644.jpeg', time: times[0].nome }, { + id: uuidv4(), + favorito: false, nome: 'DANIEL ARTINE', cargo: 'Engenheiro de Software na Stone Age', imagem: 'https://www.alura.com.br/assets/img/lideres/daniel-artine.1647533644.jpeg', time: times[0].nome }, { + id: uuidv4(), + favorito: false, nome: 'GUILHERME LIMA', cargo: 'Desenvolvedor Python e JavaScript na Alura', imagem: ' https://www.alura.com.br/assets/img/lideres/guilherme-lima.1647533644.jpeg', time: times[0].nome }, { + id: uuidv4(), + favorito: false, nome: 'PAULO SILVEIRA', cargo: 'Hipster e CEO da Alura', imagem: 'https://www.alura.com.br/assets/img/lideres/paulo-silveira.1647533644.jpeg', time: times[0].nome }, { + id: uuidv4(), + favorito: false, nome: 'JULIANA AMOASEI', cargo: 'Desenvolvedora de software e instrutora', imagem: 'https://www.alura.com.br/assets/img/lideres/juliana-amoasei.1647533644.jpeg', time: times[1].nome }, { + id: uuidv4(), + favorito: false, nome: 'DANIEL ARTINE', cargo: 'Engenheiro de Software na Stone Age', imagem: 'https://www.alura.com.br/assets/img/lideres/daniel-artine.1647533644.jpeg', time: times[1].nome }, { + id: uuidv4(), + favorito: false, nome: 'GUILHERME LIMA', cargo: 'Desenvolvedor Python e JavaScript na Alura', imagem: ' https://www.alura.com.br/assets/img/lideres/guilherme-lima.1647533644.jpeg', time: times[1].nome }, { + id: uuidv4(), + favorito: false, nome: 'PAULO SILVEIRA', cargo: 'Hipster e CEO da Alura', imagem: 'https://www.alura.com.br/assets/img/lideres/paulo-silveira.1647533644.jpeg', time: times[1].nome }, { + id: uuidv4(), + favorito: false, nome: 'JULIANA AMOASEI', cargo: 'Desenvolvedora de software e instrutora', imagem: 'https://www.alura.com.br/assets/img/lideres/juliana-amoasei.1647533644.jpeg', time: times[2].nome }, { + id: uuidv4(), + favorito: false, nome: 'DANIEL ARTINE', cargo: 'Engenheiro de Software na Stone Age', imagem: 'https://www.alura.com.br/assets/img/lideres/daniel-artine.1647533644.jpeg', time: times[2].nome }, { + id: uuidv4(), + favorito: false, nome: 'GUILHERME LIMA', cargo: 'Desenvolvedor Python e JavaScript na Alura', imagem: ' https://www.alura.com.br/assets/img/lideres/guilherme-lima.1647533644.jpeg', time: times[2].nome }, { + id: uuidv4(), + favorito: false, nome: 'PAULO SILVEIRA', cargo: 'Hipster e CEO da Alura', imagem: 'https://www.alura.com.br/assets/img/lideres/paulo-silveira.1647533644.jpeg', time: times[2].nome }, { + id: uuidv4(), + favorito: false, nome: 'JULIANA AMOASEI', cargo: 'Desenvolvedora de software e instrutora', imagem: 'https://www.alura.com.br/assets/img/lideres/juliana-amoasei.1647533644.jpeg', time: times[3].nome }, { + id: uuidv4(), + favorito: false, nome: 'DANIEL ARTINE', cargo: 'Engenheiro de Software na Stone Age', imagem: 'https://www.alura.com.br/assets/img/lideres/daniel-artine.1647533644.jpeg', time: times[3].nome }, { + id: uuidv4(), + favorito: false, nome: 'GUILHERME LIMA', cargo: 'Desenvolvedor Python e JavaScript na Alura', imagem: ' https://www.alura.com.br/assets/img/lideres/guilherme-lima.1647533644.jpeg', time: times[3].nome }, { + id: uuidv4(), + favorito: false, nome: 'PAULO SILVEIRA', cargo: 'Hipster e CEO da Alura', imagem: 'https://www.alura.com.br/assets/img/lideres/paulo-silveira.1647533644.jpeg', time: times[3].nome }, { + id: uuidv4(), + favorito: false, nome: 'JULIANA AMOASEI', cargo: 'Desenvolvedora de software e instrutora', imagem: 'https://www.alura.com.br/assets/img/lideres/juliana-amoasei.1647533644.jpeg', time: times[4].nome }, { + id: uuidv4(), + favorito: false, nome: 'DANIEL ARTINE', cargo: 'Engenheiro de Software na Stone Age', imagem: 'https://www.alura.com.br/assets/img/lideres/daniel-artine.1647533644.jpeg', time: times[4].nome }, { + id: uuidv4(), + favorito: false, nome: 'GUILHERME LIMA', cargo: 'Desenvolvedor Python e JavaScript na Alura', imagem: ' https://www.alura.com.br/assets/img/lideres/guilherme-lima.1647533644.jpeg', time: times[4].nome }, { + id: uuidv4(), + favorito: false, nome: 'PAULO SILVEIRA', cargo: 'Hipster e CEO da Alura', imagem: 'https://www.alura.com.br/assets/img/lideres/paulo-silveira.1647533644.jpeg', time: times[4].nome }, { + id: uuidv4(), + favorito: false, nome: 'JULIANA AMOASEI', cargo: 'Desenvolvedora de software e instrutora', imagem: 'https://www.alura.com.br/assets/img/lideres/juliana-amoasei.1647533644.jpeg', time: times[5].nome }, { + id: uuidv4(), + favorito: false, nome: 'DANIEL ARTINE', cargo: 'Engenheiro de Software na Stone Age', imagem: 'https://www.alura.com.br/assets/img/lideres/daniel-artine.1647533644.jpeg', time: times[5].nome }, { + id: uuidv4(), + favorito: false, nome: 'GUILHERME LIMA', cargo: 'Desenvolvedor Python e JavaScript na Alura', imagem: ' https://www.alura.com.br/assets/img/lideres/guilherme-lima.1647533644.jpeg', time: times[5].nome }, { + id: uuidv4(), + favorito: false, nome: 'PAULO SILVEIRA', cargo: 'Hipster e CEO da Alura', imagem: 'https://www.alura.com.br/assets/img/lideres/paulo-silveira.1647533644.jpeg', @@ -193,14 +249,50 @@ function App() { const [colaboradores, setColaboradores] = useState(inicial) + function deletarColaborador(id) { + setColaboradores(colaboradores.filter(colaborador => colaborador.id !== id)); + } + + function mudarCorDoTime(cor, id) { + setTimes(times.map(time => { + if (time.id === id){ + time.cor = cor; + } + return time + })); + } + + function cadastrarTime(novoTime) { + setTimes([...times, { ...novoTime, id: uuidv4() } ]) + } + function resolverFavorito(id) { + setColaboradores(colaboradores.map(colaborador => { + if(colaborador.id === id) colaborador.favorito = !colaborador.favorito; + return colaborador + })) + } + return (
- time.nome)} aoCadastrar={colaborador => setColaboradores([...colaboradores, colaborador])} /> + time.nome)} + aoCadastrar={colaborador => setColaboradores([...colaboradores, colaborador])} + />

Minha organização

- {times.map((time, indice) =>
diff --git a/src/componentes/CampoTexto/campo-texto.css b/src/componentes/Campo/campo.css similarity index 74% rename from src/componentes/CampoTexto/campo-texto.css rename to src/componentes/Campo/campo.css index 770cacf..38fdaa6 100644 --- a/src/componentes/CampoTexto/campo-texto.css +++ b/src/componentes/Campo/campo.css @@ -1,14 +1,14 @@ -.campo-texto { +.campo { margin: 24px 0; } -.campo-texto label { +.campo label { display: block; margin-bottom: 8px; font-size: 24px; } -.campo-texto input { +.campo input { background: #FFFFFF; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.06); border-radius: 0px; @@ -17,4 +17,9 @@ font-size: 24px; padding: 24px; box-sizing: border-box; +} + +.campo-color input { + height: 40px; + padding: 5px 24px; } \ No newline at end of file diff --git a/src/componentes/Campo/index.js b/src/componentes/Campo/index.js new file mode 100644 index 0000000..83e7ae7 --- /dev/null +++ b/src/componentes/Campo/index.js @@ -0,0 +1,16 @@ +import './campo.css' + +const Campo = ({ type = 'text', label, placeholder, valor, aoAlterado, obrigatorio = false }) => { + return ( +
+ + aoAlterado(evento.target.value)} + required={obrigatorio} + placeholder={placeholder} /> +
) +} + +export default Campo \ No newline at end of file diff --git a/src/componentes/CampoTexto/index.js b/src/componentes/CampoTexto/index.js deleted file mode 100644 index 7a53f47..0000000 --- a/src/componentes/CampoTexto/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import './campo-texto.css' - -const CampoTexto = ({ label, placeholder, valor, aoAlterado, obrigatorio = false }) => { - return (
- - aoAlterado(evento.target.value)} required={obrigatorio} placeholder={placeholder}/> -
) -} - -export default CampoTexto \ No newline at end of file diff --git a/src/componentes/Colaborador/colaborador.css b/src/componentes/Colaborador/colaborador.css index 7c46f22..52b1ec8 100644 --- a/src/componentes/Colaborador/colaborador.css +++ b/src/componentes/Colaborador/colaborador.css @@ -1,5 +1,7 @@ .colaborador { + position: relative; width: 280px; + margin: 20px 20px; } .colaborador .cabecalho { @@ -34,4 +36,14 @@ line-height: 22px; color: #212121; padding: 0 16px; +} + +.deletar { + position: absolute; + right: -10px; + top: -10px; +} + +.favoritar { + margin-top: 20px; } \ No newline at end of file diff --git a/src/componentes/Colaborador/index.js b/src/componentes/Colaborador/index.js index 80eec04..5cae9df 100644 --- a/src/componentes/Colaborador/index.js +++ b/src/componentes/Colaborador/index.js @@ -1,13 +1,34 @@ +import { AiFillCloseCircle, AiFillHeart, AiOutlineHeart } from 'react-icons/ai' import './colaborador.css' -const Colaborador = ({ colaborador, corDeFundo }) => { +const Colaborador = ({ colaborador, corDeFundo, aoDeletar, aoFavoritar }) => { + function favoritar() { + aoFavoritar(colaborador.id); + } + +const propsfavorito = { + size:25, + onClick: favoritar +} + return (
+ aoDeletar(colaborador.id)} + />
{colaborador.nome}

{colaborador.nome}

{colaborador.cargo}
+
+ {colaborador.favorito + ? + : + } +
) } diff --git a/src/componentes/Formulario/formulario.css b/src/componentes/Formulario/formulario.css index 139d2ce..9053cde 100644 --- a/src/componentes/Formulario/formulario.css +++ b/src/componentes/Formulario/formulario.css @@ -1,14 +1,16 @@ .formulario-container { display: flex; + gap: 20px; + flex-wrap: wrap; justify-content: center; - margin: 80px 0; + margin: 80px 50px; } .formulario-container .formulario { - max-width: 80%; background: #F7F7F7; box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.08); border-radius: 20px; + flex: 1; padding: 36px 64px; } .formulario-container .formulario h2 { diff --git a/src/componentes/Formulario/index.js b/src/componentes/Formulario/index.js index b1a9f7d..c97d947 100644 --- a/src/componentes/Formulario/index.js +++ b/src/componentes/Formulario/index.js @@ -1,15 +1,17 @@ import { useState } from 'react' import Botao from '../Botao' -import CampoTexto from '../CampoTexto' +import Campo from '../Campo' import ListaSuspensa from '../ListaSuspensa' import './formulario.css' -const Formulario = ({aoCadastrar, times}) => { +const Formulario = ({aoCadastrar, times, cadastrarTime}) => { const [nome, setNome] = useState('') const [cargo, setCargo] = useState('') const [imagem, setImagem] = useState('') const [time, setTime] = useState('') + const [nomeTime, setNomeTime] = useState('') + const [corTime, setCorTime] = useState('') const aoSubmeter = (evento) => { evento.preventDefault() @@ -26,19 +28,19 @@ const Formulario = ({aoCadastrar, times}) => {

Preencha os dados para criar o card do colaborador.

- setNome(valor)}/> - setCargo(valor)}/> - setImagem(valor)}/> @@ -50,6 +52,28 @@ const Formulario = ({aoCadastrar, times}) => { aoAlterado={valor => setTime(valor)}/> +
{ + evento.preventDefault() + cadastrarTime({ nome: nomeTime, cor: corTime }) + }}> +

Preencha os dados para criar um novo Times.

+ setNomeTime(valor)} + /> + setCorTime(valor)} + /> + +
) } diff --git a/src/componentes/Time/index.js b/src/componentes/Time/index.js index df0e062..af967a7 100644 --- a/src/componentes/Time/index.js +++ b/src/componentes/Time/index.js @@ -1,13 +1,24 @@ import Colaborador from '../Colaborador' import './time.css' +import hexToRgba from 'hex-to-rgba'; -const Time = ({ time, colaboradores }) => { +const Time = ({ time, colaboradores, aoDeletar, mudarCor, aoFavoritar }) => { return ( - - colaboradores.length > 0 &&
-

{time.nome}

+ colaboradores.length > 0 &&
+ mudarCor(evento.target.value, time.id)} value={time.cor} type='color' className='input-cor' /> +

{time.nome}

- {colaboradores.map((colaborador, indice) => )} + {colaboradores.map((colaborador, indice) => { + return ( + + ); + })}
diff --git a/src/componentes/Time/time.css b/src/componentes/Time/time.css index 17e8c5f..17ff615 100644 --- a/src/componentes/Time/time.css +++ b/src/componentes/Time/time.css @@ -2,6 +2,7 @@ text-align: center; padding: 32px; background-blend-mode: multiply; + position: relative; } .time h3 { @@ -17,4 +18,10 @@ justify-content: space-around; margin-top: 32px; flex-wrap: wrap; +} + +.input-cor { + position: absolute; + top: 20px; + right: 50px; } \ No newline at end of file