Um Design System é um conjuto 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.
Esse projeto está configurado para ser executado através do docker-compose.
Para iniciar o serviço utilize:
docker-compose up
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
O deploy do Design System é dividido em duas partes, publicação no NPM e deploy do Storybook.
Antes da publicação ou deploy, altere a versão do packpage.json e execute os comandos abaixo:
docker-compose up
docker-compose exec web npm run build
Antes da publicação é necessário fazer login no NPM, utilize:
docker-compose exec web npm login
Após inserir as credenciais de acesso, execute o comando abaixo:
docker-compose exec web npm publish --access public
Pronto, uma nova versão do Design System deve ter sido publicada.
Utilize o docker-compose exec para fazer a publicação, pois o docker-compose run --rm perde a referência do login.
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/