Design System

Sobre • Tecnologias • Instalação • Interface gráfica e deploy • Agradecimento • Licença • Autor

Sobre

Criação de um design system a partir de uma interface gráfica

O propósito deste projeto é analisar a interface de uma aplicação no figma e utilizar o Storybook para desenvolver nossos componentes com testes e documentações de uso. A documentação ajuda designers e desenvolvedores permitindo a reutilização e a padronização de suas criações. O primeiro passo é identificar os tokens, que são dados que armazenam propriedades CSS e que substituem valores fixos dentro do código fonte e integram aplicações e plataformas garantindo a consistência visual, com os tokens cria-se os componentes e a partir disso criamos a documentação. Em posse da documentação o desenvolvedor é beneficiado pois terá padrões a seguir.

O projeto possui estrutura de um monorepo, isto é, o projeto é dividido em pacotes que podem ser aplicações dependentes entre si em um mesmo repositório no github. O monorepo está dividido em:

1. Pacotes eslint-config e ts-config que contam com a configuração do eslint e prettier e do typescript que servem de base para todos os outros pacotes.
2. Pacote tokens que compreende os valores padrões para algumas propriedades CSS como fonte e espaçamento.
3. Pacote react que possui o conjunto de componentes que foram construídos utilizando o pacote de tokens e respeitando o design da aplicação.
4. E no pacote docs que é onde trabalhamos com o Storybook, nele documentamos todos nossos tokens e componentes.

Acesse o Readme.md dos pacotes para maiores detalhes.

Tecnologias

• turbo — Simplifica o gerenciamento do monorepo utilizando recursos como cache remoto e execução paralela. Com a execução paralela temos um script único para dev e build, executando o script dev da raiz principal, executamos todos os dev's de todos os pacotes paralelamente. Com o cache remoto melhoramos a performance do Github Actions.

Veja o arquivo package.json

Instalação

• Pré-requisitos

  • É necessário possuir o Git instalado e configurado no computador.
  • É necessário ter o gerenciador de pacotes Npm.

• Próximo passo

1. Faça um clone deste repositório:

   $ git clone https://github.com/die-goncalves/project-design-system.git

2. Instale as dependências:

   # Entre no diretório do repositório clonado
   $ cd project-design-system
   # Instale as dependências do projeto.
   $ npm install

3. Execute a aplicação:

   # Na raiz do projeto abra o terminal e execute o comando 
   $ npm run dev
   # A aplicação inciará automaticamente na porta 6006 - acesse <http://localhost:6006>

Interface gráfica e deploy

Clique nos links abaixo para ver a interface da aplicação e a documentação publicada.

Agradecimento

Rocketseat

Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Autor

Feito por Diego Gonçalves, contato: