DS Repositories Components

Um Design System é um conjunto de componentes reutilizáveis, documentos e testados.

Utilizamos React para manipular os componentes, Material UI como base e o Storybook para documentação.

Para publicar os componentes utilizamos o NPM.

Primeiros passos

Instalação

Para instalar o pacote em um projeto RoR, é preciso que o sistema seja configurado com as gems:

• webpack
• react-rails
• yarn (opcional)

Passo a passo para instalação:

• Webpack: https://github.com/rails/webpacker
• React: https://github.com/reactjs/react-rails

Exemplo mais detalhado: recurrent/design-system

Após ambiente configurado, instale o pacote:

yarn add vindi-ds-components @material-ui/core

Configurações iniciais

Ao adicionar o projeto os componentes, precisamos configurar as fontes do DS. Para isso, adicione ao application.html.erb (ou arquivos raíz do layout) o link abaixo:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet" />

Construindo primeiro componente com DS

Para que as configurações sejam aplicadas os seu componente, é preciso envolver o seu componente com o Container que vem no pacote vindi-ds-components, semelhante a esse exemplo:

import { Container } from 'vindi-ds-components'

function Page(){
  return (
    <Container>
      /* Seus componentes */
    </Container>
  )
}

Em houver a necessidade de utilizar ícones, utilize o pacote vindi-ds-icons:

import { Container } from 'vindi-ds-components'
import { VdVindiColor } from 'vindi-ds-icons'

function Page(){
  return (
    <Container>
       <VdVindiColor width={108} height="auto" />
      /* Seus componentes */
    </Container>
  )
}

Para mais informações, acesse a documentação de ícones.

Com essas configurações realizadas, basta seguir o seu protótipo. 🎉

Para acesso a mais componentes, acesse a documentação de componentes.

Desenvolvimento

Esse projeto está configurado para ser executado através do docker-compose.

Serviço

Para iniciar o serviço utilize:

docker-compose build
docker-compose up

Dependências

Para instalar novas dependências utilize:

docker-compose run --rm web npm install packpage-name

Para atualizar todas as dependências utilize:

docker-compose run --rm web npm install

Contribuição do projeto

O projeto conta com ferramentas que validam a semântica do código, mas também do commit.

Commit com commitlint

Com o commitlint instalado e configurado com o husky, instruções são executadas antes e durante o commite, sendo:

1. pré-commit: Valida se o lint está sem necessidade de alterações
2. commit-msg: Valida se a mensagem está no padrão commitlint

Para gerar um commit padronizado, o boilerplate disponibiliza o comando: npm run gc. Ele auxilia na contrução da mensagem do commit. O padão aceitado pelo commitlint é similar a esse:

fix: mensagem sem letras maiusculas

Caso não queria colocar alguma das parte do commite, utilize :skip, contudo é necessesário escolher o tipo (fix) e o subject (mensagem do commit, mesma -m "mensagem sem letras maiusculas". Para mais detalhes no link

Push

Antes de publicarmos uma branch, serão rodados os testes do projeto antes da publicação.

Deploy

O deploy do Design System é dividido em duas partes, publicação no NPM e deploy do Storybook.

Antes da publicação ou deploy execute os comandos abaixo:

docker-compose up
docker-compose exec web npm run build

Publicação no NPM

Antes da publicação é necessário fazer login no NPM, utilize:

docker-compose exec web npm login

Para obter as credencias, contacte o time de design system ops pelo slack.

Após inserir as credenciais de acesso, execute o comando abaixo para atualizar a versão e publicar:

docker-compose exec web npm version [major | minor | patch ] && npm publish --access public

Visionamento:

Utilizamos o SEMVER para atualizarmos o projeto, com isso a versão deve ser alterada quando:

• major: quando a alteração deixar parte, ou todo, o pacote deixando incompatível as versões anteriores
• minor: ao incrementarmos com algum componente e com uma nova versão das lib ou tokens.
• patch: incrementos de baixo impacto ou correção de falhas.

Pronto, uma nova versão do Design System deve ter sido publicada.

PS.: Utilize o docker-compose exec para fazer a publicação, pois o docker-compose run --rm perde a referência do login.

Deploy Storybook

O Storybook é um livro de histórias que conta todos os estados possíveis de um componente, é uma documentação para o desenvolvedor.

Para realizar o deploy é necessário configurar o AWS CLI, para isso vai ser necessário criar chaves de acesso ou utilizar as já existentes.

Configure as credenciais das contas AWS no arquivo ~/.aws/credentials seguindo o modelo abaixo:

[vindi-dev]
aws_access_key_id =
aws_secret_access_key =
region = us-east-1

Agora, faça o build do Storybook, utilize:

docker-compose exec web npm run-script build-storybook

E por último, envie os arquivos para o s3:

npm run-script deploy-storybook

Pronto, uma nova versão do Storybook deve ter sido publicada.

Link de acesso: http://vindi-storybook-staging.s3-website-us-east-1.amazonaws.com/