Skip to content

Latest commit

 

History

History
101 lines (78 loc) · 5.15 KB

README.md

File metadata and controls

101 lines (78 loc) · 5.15 KB
Raw

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 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:

Badge Badge