mathrb22/IgniteLab-Design-System

design-system frontend ignite-lab react storybook tailwindcss figma component-driven-design documentation typescript vite radix-ui

Ignite Lab - Do Figma ao React (Design System)

📃 Sobre

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

O projeto consiste na criação e implementação de 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.

🚀 Tecnologias e ferramentas utilizadas

Este projeto foi desenvolvido com as seguintes tecnologias e ferramentas:

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;

🎨 Design

O design do projeto foi desenvolvido no Figma, e pode ser acessado através do link: Ignite Lab - Design System.

🎉 Demo

Clique nos links para acessar o design system e a interface do projeto:

🔧 Instalação e execução

Para baixar o código-fonte do projeto em sua máquina, primeiramente terá que ter instalado o Git.

Com o Git instalado, em seu terminal execute o seguinte comando:

git clone https://github.com/mathrb22/IgniteLab-Design-System.git

Para instalar as dependências e executar o projeto terá que ter instalado em sua máquina o Node.js, que vem acompanhado do NPM. Com ele instalado:

Instale as dependências do projeto:
```
npm install
```
Execute o projeto:
```
npm run dev
```
Execute a interface do Storybook:
```
npm run storybook
```

💡 Como contribuir

Faça um fork desse repositório;
Crie um branch para a sua feature: git checkout -b minha-feature;
Faça um commit com suas alterações: git commit -m 'feat: Minha nova feature';
Faça um push para o seu branch: git push origin minha-feature;
Faça um pull request com sua feature;