Este desafio é o Stage 1, parte do conteúdo do evento NWL Return organizado pela Rocketseat, na trilha Impulse.

1. Criando com Vite, dê o nome, escolha o tipo react-ts para utilizar o projeto do React com Typescript.

npm create vite@lates

1. Rodando comandos complementares

• Vite

  Getting Started | Vite

• Commit do projeto

  https://github.com/deyvsonaguiar/desafio-1/commit/8d910645db80d4006cf35280bbc7355d45261d6e

1. Instalação do Tailwind e inicialização do projeto com a biblioteca postcss

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

1. Siga a documentação para fazer as configurações finais

Installation: Using PostCSS - Tailwind CSS

1. Configurando as configurações de path para todos os seus templates para trabalhar com arquivos .tsx

1. Adicionando as diretivas para trabalhar com layers no seu arquivo CSS

• Commit do projeto

  https://github.com/deyvsonaguiar/desafio-1/commit/998c90c64b318ef1bd6a4a92323785c453c7a1bc

1. Instalando a biblioteca

npm install --save phosphor-react****

1. Importando a biblioteca de ícones dentro do componente Widget.tsx

import { ChatTeardropDots } from "phosphor-react";

1. Após importar qualquer ícone necessário, adicione-o onde você precisa dentro do seu método render.

• Documentação Phosphor

  https://github.com/phosphor-icons/phosphor-react

• Commit do projeto

  https://github.com/deyvsonaguiar/desafio-1/commit/5577d530d23c40e66dceda018901640d02531be6

1. Reescreva seus elementos com acessibilidade através do Headless, que trás entre outros componentes prontos e que empregam conceitos de acessibilidade como aria-expanded em nossos elementos HTML, sem a necessidade de codar do zero.

Aqui utilizamos component Popover encapsulando nosso botão que irá automaticamente abrir/fechar mostrando nosso elemento Popover.Panel que é nosso texto a ser exibido. Sem a necessidade de implementar condicionais e evento click, por exemplo.

• Documentação Popover

  Headless UI

• Commit do projeto

  https://github.com/deyvsonaguiar/desafio-1/commit/854841171d5dfcdb8cc9e4c4ef561db2bcae2d7e