[Ignte Lab] Design System: Do Figma ao React

Tópicos 📋

• Sobre 📖

• Layout 🎨

• Tecnologias 🛠️

• Features 📋

• Primeiros Passos 🚀

• Como Contribuir 💪

• Licença 📝

---

Sobre 📖

Esse projeto foi desenvolvido durante o Ignite Lab 3, um evento online produzido pela Rocketseat, durante os dias 10 a 14 de outubro de 2022.

Essa aplicação consiste em um Design System. Para isso, inicialmente foram desenvolvidos os componentes e suas variações no Figma, e em seguida implementados no código, utilizando o React e a ferramenta Storybook para a documentação dos componentes.

---

Layout 🎨

O Layout desenvolvido em conjunto com Rocketseat, para acessar no Figma:

• Ignite Lab Design System 🚀

---

Tecnologias 🛠️

• Figma: ferramenta de prototipação e design de interfaces.

• React: uma biblioteca JavaScript de código aberto com foco em criar interfaces de usuário (frontend) em páginas web. É mantido pelo Facebook, Instagram, outras empresas e uma comunidade de desenvolvedores individuais. É utilizado nos sites da Netflix, Imgur, Feedly, Airbnb, SeatGeek, HelloSign, Walmart e outros;

• TypeScript: um super conjunto da linguagem JavaScript que fornece classes, interfaces e tipagem estática opcional. Utilizado em conjunto com React no frontend web;

• Vite.JS: ferramenta de construção para front-end moderna que oferece uma experiência de desenvolvimento mais rápida e mais eficiente;

• TailwindCSS: um framework CSS muito flexível que permite criar rapidamente interfaces de usuário complexas e responsivas;

• Storybook: uma ferramenta voltada para o desenvolvimento de componentes de interface de usuário isolados, usada por empresas como GitHub, Dropbox, airbnb, Mozilla, entre outras;

• RadixUI: um conjunto de componentes React acessíveis, flexíveis e com baixo acoplamento, que podem ser usados ​​para construir interfaces de usuário complexas.

• Visual Studio Code: um editor de código-fonte desenvolvido pela Microsoft para Windows, Linux e macOS, recomendado para o desenvolvimento de aplicações web;

---

Features ✨

• Criação de tokens personalizados no design system utilizando o TailwindCSS;
• Implementação do design pattern de composição no React (Compound Component);
• Documentação dos componentes e suas variantes no Storybook;
• CI/CD: configuração do deploy do Storybook por meio de um workflow do Github Actions para o Github Pages;
• Utilização do storybook-addon-a11y para testar os componentes em relação aos padrões de acessibilidade na web;
• Implementação de testes de interações automatizados utilizando a integração do Jest com o Storybook e o Test Runner;
• Implementação de uma API Mock com o Mock Service Worker para simular requisições HTTP, por meio do MSW Storybook Addon;

---

Primeiros Passos 🚀

Clone

git clone https://github.com/ErickSilva2605/rocketseat-ignite-lab-design-system.git

cd rocketseat-ignite-lab-design-system

Instalar as dependências

npm install

Inicia o projeto

npm run dev

Inicia a interface do Storybook

npm run storybook

Executa os testes

npm run test-storybook

---

Como Contribuir 💪

- Clone o projeto 

- Cria uma nova branch com suas mudanças:
$ git checkout -b my-feature

- Salve suas mudanças e crie uma mensagem de commit falando o que fez:
$ git commit -m "feature: My new feature"

- Envie suas mudanças:
$ git push origin my-feature

---

Licença 📝

Este repositório está sob licença MIT. Você pode ver o arquivo LICENSE para mais detalhes.

---

Esse projeto foi desenvolvido por @Erick Augusto, com os instrutores da Rocketseat, no #IgniteLabDesignSystem.
Se isso te ajudou, dê uma ⭐, isso vai me ajudar também! 😉

---