@bethasistemas/estrutura-componentes v1.0.2

Estrutura Componentes

Coleção de Web Components para compor a estrutura de uma aplicação front-end da Betha Sistemas.

Compatível com qualquer stack front-end que utilize HTML, CSS e JavaScript.

Componentes 📦

Estrutura

• bth-app
• bth-menu-ferramenta
• bth-menu-ferramenta-icone
• bth-menu-painel-lateral

Marca e produto

• bth-marca-produto

Ferramentas

• bth-conta-usuario
• bth-notificacoes
• bth-novidades
• bth-ajuda
• bth-utilitarios

Comuns

⚠️ Estes componentes são utilizados internamente e serão disponibilizados em um projeto separado num futuro próximo. ☠️ Utilize por sua conta e risco.

• bth-avatar
• bth-empty-state
• bth-icone
• bth-loader
• bth-selecao-contexto
• bth-navbar-pill-group
• bth-navbar-pill-item

Compatibilidade 📜

Para entender melhor a abrangência de suporte entre navegadores, consulte a tabela no site oficial do Stencil.

Como usar 🔨

Requisitos

Fonte

Deve conter a fonte Open Sans

O Framework Design já possui essa fonte e suas variações.

Entretanto, caso não utilize o framework, é possível obter as definições nos arquivos de distribuição ao instalar este projeto.

• Ex: node_modules/@bethasistemas/estrutura-componentes/dist/collection/assets/fonts.css

Ícones

Deve conter a fonte Material Design Icons instalada

• A versão suportada é a 5.0.45
• A tabela de referência de ícones disponíveis na página oficial pode ser acessada para encontrar os ícones desejados

Essa biblioteca de ícones pode ser instalada através de um gerenciador de pacotes

• Ex: npm install @mdi/font@5.0.45

Instalando

NPM

Basta executar npm install @bethasistemas/estrutura-componentes

Yarn

Basta executar yarn add @bethasistemas/estrutura-componentes

Bower

Caso seja necessário instalar através do Bower, será necessário utilizar um npm resolver, verificar documentação oficial.

Coleção de Componentes

Os componentes são distribuídos no formato de coleção através de um único arquivo que serve como entrada para registrar os componentes no navegador. A partir do momento em que os componentes estejam sendo utilizados no DOM, os seus respectivos bundles são baixados, otimizando a performance das aplicações. Veja mais sobre o mecanismo de lazy-loading do StencilJS

Distribuição ⚠️

Em projetos mais antigos, onde o processo de distribuição é realizado por task runners como o Grunt ou Gulpjs, é necessário estar atento a cópia correta de todos os módulos disponíveis no /dist do projeto, evitando problemas com o mecanismo de lazy-loading do Stenciljs

Module bundlers modernos, como webpack ou rollup, já resolvem automaticamente a importação desses módulos.

Estilos

Estilos globais do componente devem ser importados:

• [LIBS_PROJETO]/@bethasistemas/estrutura-componentes/dist/estrutura-componentes/estrutura-componentes.css

Também é distribuído um diretório com as fontes de Open Sans, com suas devidas estilizações

• [LIBS_PROJETO]/@bethasistemas/estrutura-componentes/dist/collection/assets/fonts.css

Registrando componentes

A integração com frameworks frontend, podem exigir algumas configurações específicas.

• Registrando componentes em uma aplicação vanilla JavaScript
• Registrando componentes em Angular
• Registrando componentes em Vue
• Registrando componentes em React

Mais informações sobre integração com frameworks podem ser vistas na documentação oficial do StencilJS

Showcases 💡

Veja nos projetos abaixo como fazer a instalação dos componentes em alguns frameworks.

• Showcase Angular.js
• Showcase Angular
• Showcase Vue

Configurando Componentes

A comunicação com os componentes é feita através de propriedades, atributos, métodos e eventos do DOM, e cada componente tem suas específicações documentadas individualmente, siga o índice no topo deste documento ou navegue através dos diretórios para consultar.

Alguns componentes são autocontidos, necessitando somente de variáveis de ambiente, como URL para serviços, que por padrão, são obtidas do env.js configurado no window. Entretanto é possível configurá-las através de propriedades caso não queira utilizar o env.js.

GIFs

Desktop

Mobile

Contribuindo 👥

Contribua para a evolução dos componentes Como contribuir.