@dsgovbr/webcomponents NPM

Design System do Governo Federal - Web Components

Biblioteca de Web Components baseado no Design System do Governo Federal.

Objetivo

Construir uma biblioteca de componentes que faça uso das tecnologias de Web Components e que seja reutilizável em vários frameworks, bibliotecas e browsers.

Tecnologias

Esse projeto é desenvolvido usando:

Para saber mais detalhes sobre Web Components sugerimos que consulte o MDN.

Dependências

Para conseguir usar nossa biblioteca sem problemas temos as seguintes dependências:

O fontawesome e a fonte rawline podem ser importadas de um CDN. Consulte a documentação no site do Design System do Governo Federal para mais detalhes.

Como usar nossa biblioteca em seu projeto?

Uso de polyfill

Caso os requisitos to seu projeto incluam navegadores que não suportam completamente os Web Components, adicione os polyfills ao seu projeto.

Para aprender com instalar, consulta a documentação oficial

Instalação da biblioteca

Você pode instalar a nossa biblioteca de Web Components no seu projeto usando:

npm install --save @dsgovbr/webcomponents

Uso

Depois de instalada, importe a biblioteca de dentro da parta node_modules

@import "node_modules/@dsgovbr/webcomponents/dist/webcomponents.umd.min.js"

Documentações

A nossa documentação está disponível em duas versões:

Estável

Essa é a versão que recomendamos o uso. É a nossa versão já testada e pronta para uso.

Acesse o storybook e confira!

Em desenvolvimento

Essa é a versão que estamos construindo. Devido a natureza do projeto estamos constantemente atualizando essa documentação com as novas features, componentes e correções de bugs.

Não recomendamos essa versão para uso em produção.

Quando essa versão é considerada pronta para produção ela é promovida para "estável" e começamos a trabalhar na próxima versão .

Acesse o storybook e confira!

Como executar o projeto?

Para executar a nossa biblioteca a partir do código-fonte você tem 2 opções:

Executar como VueJS

Nessa visualização você executa o projeto em uma página auxiliar (fora do storybook) e sem compilar o resultado para Web Components.

npm run serve

Executar como Web Components

Nessa visualização o projeto é executado a partir do storybook e convertido para Web Components.

Aqui você consegue testar as configurações, obter snippets de código e visualizar os componentes rodando como nos ambientes de produção.

npm run storybook

Essa compilação pode demorar para refletir as alterações na página. Assim, recomendamos que utilizem primeiro a execução como VueJS durante o desenvolvimento e quando considerarem as alterações maduras o suficiente façam os testes como Web Components.

Compilar biblioteca

Gera o build da biblioteca dentro da pasta dist.

npm run build

Testes unitários

Executa os testes unitários e sava os resultados na pasta coverage.

npm run test:unit

Lints

Nesse projeto usamos diversos tipos de lints para automaticamente verificar o código antes de enviar para review. Para executá-los e obter os resultados execute o comando: