@govbr-ds/webcomponents 2.0.0-next.3 → 2.0.0-next.5

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 SERPRO
+Copyright (c) 2018
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,34 +1,76 @@
 # Web Components GovBR-DS
 
-Nosso objetivo é disponibilizar uma biblioteca de componentes baseada no [GovBR-DS](https://gov.br/ds 'GovBR-DS') que possa ser consumida independente de frameworks ou tecnologias utilizadas nos projetos.
+Biblioteca de Web Components do [GovBR-DS](https://gov.br/ds).
+
+## Objetivo
+
+Disponibilizar uma biblioteca de componentes baseada no [GovBR-DS](https://gov.br/ds 'GovBR-DS') que possa ser consumida independente de frameworks ou tecnologias utilizadas.
 
 ## Demonstração
 
 Acesse nossos sites e veja nossos componentes em ação:
 
-- [Storybook - Produção](https://gov.br/ds/webcomponents/)
-- [Storybook - Desenvolvimento](https://govbr-ds.gitlab.io/wbc/govbr-ds-wbc/)
+- [Produção](https://gov.br/ds/webcomponents/)
+- [Desenvolvimento](https://govbr-ds.gitlab.io/bibliotecas/wc/)
 
-## Tecnologias
+## O que são Web Components?
 
-Esse projeto é desenvolvido usando:
+São um conjunto de tecnologias que permitem aos desenvolvedores criar novos elementos HTML personalizados, reutilizáveis ​​e encapsulados para uso em páginas e aplicativos da web. Eles se baseiam em padrões da web existentes e são suportados por todos os navegadores modernos.
 
-1. [GovBR-DS](https://gov.br/ds/ 'GovBR-DS')
-2. [Font Awesome](https://fontawesome.com/ 'Font Awesome')
-3. [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline')
-4. [VueJS 3](https://v3.vuejs.org/ 'VueJS 3')
-5. [Storybook](https://storybook.js.org/ 'Storybook')
-6. [Jest](https://jestjs.io/ 'Jest')
+O diagrama mostra os três componentes principais dos Web Components:
 
-> Para saber mais detalhes sobre Web Components sugerimos que consulte o [MDN](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components 'Web Components | MDN').
+- Elementos HTML personalizados: tags HTML definidas usando JavaScript e podem ser usados ​​como qualquer outro elemento HTML.
+- Shadow DOM: é um espaço de nome encapsulado para cada elemento HTML personalizado. Isso significa que os estilos e o JavaScript do elemento não interferem no resto da página.
+- Templates: são fragmentos de HTML que podem ser reutilizados em vários elementos.
+- Slots: são áreas em um elemento HTML personalizado onde templates podem ser inseridos.
 
-## Documentações Complementares
+## Benefícios dos Web Components
+
+### Reusabilidade
+
+- Os componentes da web podem ser reutilizados em vários projetos, o que pode economizar tempo e esforço.
+- Isso significa que você não precisa escrever o mesmo código repetidamente, o que pode ajudá-lo a ser mais produtivo.
+- Além disso, os componentes da web podem ser facilmente compartilhados com outros desenvolvedores, o que pode ajudá-lo a colaborar em projetos de forma mais eficaz.
+
+### Modularidade
+
+- Os componentes da web são modulares, o que significa que podem ser facilmente combinados e combinados para criar interfaces de usuário complexas.
+- Isso torna mais fácil criar interfaces de usuário que sejam fáceis de entender e manter.
+- Além disso, os componentes da web podem ser facilmente reutilizados em diferentes partes de um aplicativo, o que pode ajudá-lo a reduzir a duplicação de código.
+
+### Encapsulamento
+
+- Os componentes da web são encapsulados, o que significa que seus estilos e JavaScript não interferem no resto da página.
+- Isso torna mais fácil criar interfaces de usuário que sejam robustas e confiáveis.
+- Além disso, o encapsulamento torna mais fácil depurar e solucionar problemas de componentes da web.
+
+### Compatibilidade
+
+- Os componentes da web são compatíveis com todos os navegadores modernos.
+- Isso significa que você não precisa se preocupar em testar seus componentes em diferentes navegadores.
+- Além disso, os componentes da web são atualizados automaticamente pelos navegadores, o que significa que você não precisa se preocupar em manter seus componentes compatíveis com as versões mais recentes dos navegadores.
 
-Consulte nossa a seção sobre Web Componente na nossa [Wiki](https://govbr-ds.gitlab.io/tools/wiki/hugo-cms/desenvolvimento/web-components) para obter mais informações.
+### Manutenabilidade
 
-## Uso
+- Os componentes da web são fáceis de manter, pois podem ser facilmente atualizados e modificados sem afetar o restante do código.
+- Isso torna mais fácil manter seus aplicativos da web atualizados e seguros.
+- Além disso, os componentes da web podem ser facilmente testados e depurados, o que pode ajudá-lo a identificar e corrigir bugs rapidamente.
 
-Existem 2 maneiras de usar nossos Web Components:
+## Integração com frameworks
+
+A integração entre Web Components e frameworks pode não ser fácil em determinadas situações. Por isso nós criamos as bibliotecas de integração (wrappers). Basicamente eles encapsulam os Web Components em uma biblioteca de componentes na tecnologia nativa de algum framework. Isso facilita a integração com funcionalidades nativas dos frameworks, como por exemplo o binding.
+
+Para mais detalhes sobre como o Stencil faz a integração consulte [a documentação do Stencil sobre integrações](https://stenciljs.com/docs/overview).
+
+Note que determinadas situações pode não ser possível fazer essa integração. Isso depende muito da evolução da especificação de Web Components e do suporte dos frameworks.
+
+## Font Awesome e Fonte Rawline
+
+Nossos componentes usam a [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline') juntamente com a [Font Awesome](https://fontawesome.com/ 'Font Awesome') padrão do DS.
+
+Consulte a documentação no site do [GovBR-DS](https://www.gov.br/ds/como-comecar/instalacao 'GovBR-DS') para mais detalhes sobre como importá-los de seus respectivos CDNs.
+
+## Instalação
 
 - Pacote NPM
 
@@ -39,76 +81,79 @@ npm install --save @govbr-ds/webcomponents
 Depois de instalada, importe a biblioteca de dentro da pasta *node_modules*:
 
 ```javascript
-@import "node_modules/@govbr-ds/webcomponents/dist/webcomponents.umd.min.js"
+@import "node_modules/@govbr-ds/webcomponents/dist/loader"
 ```
 
-- CDN
+- CDN (não mantidos por nossa equipe)
 
 ```html
-<script src="https://unpkg.com/@govbr-ds/webcomponents@VERSÃO/dist/webcomponents.umd.min.js"></script>
+<script src="https://unpkg.com/@govbr-ds/webcomponents@<VERSÃO>/loader/index.js"></script>
+
+ou
+
+<script src="https://cdn.jsdelivr.net/npm/@govbr-ds/webcomponents@<VERSÃO>/loader/index.js"></script>
 ```
 
-> Troque **versão** pela versão do pacote que deseja
+**Importante**: Dependendo do seu projeto pode ser necessário importar diretamente o arquivo `/dist/webcomponents/webcomponents.esm.js`. Observe as necessidades do seu projeto e importe os arquivos de acordo.
 
-**Importante**: O CDN <https://unpkg.com/> não é mantido por nossa equipe e portanto não podemos garantir um SLO. Considere importar os arquivos necessários para uma infraestrutura interna caso isso seja um impedimento para seu projeto.
+## VSCODE
 
-### Font Awesome e Fonte Rawline
+Ao criar nossos Web Components fazemos uso de custom elements. O VSCODE não conhece os componentes e por isso não consegue fazer sugestões inteligentes para usar no autocomplete. Para auxiliar com isso nós geramos um arquivo `vscode-data.json` com as definições dos componentes e disponibilizamos junto com o nosso pacote npm.
 
-Nossos componentes usam a [Fonte Rawline](https://www.cdnfonts.com/rawline.font/ 'Fonte Rawline') juntamente com a [Font Awesome](https://fontawesome.com/ 'Font Awesome') padrão do DS.
+Para importar no seu VSCODE, adicione o campo abaixo alterando o local onde o seu projeto armazena o `node_modules`.
 
-Consulte a documentação no site do [GovBR-DS](https://www.gov.br/ds/como-comecar/instalacao 'GovBR-DS') para mais detalhes sobre como importá-los de seus respectivos CDNs.
+```json
+{
+  "html.customData": ["./node_modules/@govbr-ds/webcomponents/vscode-data.json"]
+}
+```
 
 ### Exemplos de uso
 
-Disponibilizamos alguns exemplos de como usar esse projeto com algumas tecnologias. Consulte o [nosso grupo aqui no gitlab](https://gitlab.com/govbr-ds/dev/wbc 'GovBR-DS/DEV/WBC') e procure pelos projetos de 'Quickstart' para mais detalhes.
+Disponibilizamos alguns exemplos de como usar esse projeto com algumas tecnologias. Consulte o [nosso grupo aqui no gitlab](https://gitlab.com/govbr-ds/bibliotecas/wc 'GovBR-DS/WC') e procure pelos projetos de 'Quickstart' para mais detalhes.
 
 ## Estrutura de pastas
 
-> Vamos explicar apenas as pastas/arquivos que são importantes para o entendimento do projeto e contribuição.
+Explicamos apenas as pastas/arquivos que são importantes para o entendimento do projeto e contribuição.
 
 ```markdown
 /raiz
-└───src
-│───library
-│ │───lib.js
+│───src
+│ │───assets
 │ │───components
-│ │───mixins
-│ └───util
-└───stories
+│ │───pages
+│ └───utils
+│ └───components.d.ts
+│ └───index.html
+│ └───index.ts
+└───scripts
 ```
 
 - **src**
   - **assets**: pasta com arquivos estáticos
-  - **library**
-    - **lib.js**: inicializa todos os custom elements e define o que faz parte da biblioteca. É usado para fazer o build final.
-    - **components**: pasta com os componentes da biblioteca, seus testes e stories do storybook.
-    - **mixins**: mixins que são usados em vários componentes.
-    - **util**: funções criadas para facilitar ações dentro dos componentes
-  - **stories**: Arquivos com as stories gerais do storybook
-
-> Aplicação Vue é uma aplicação criada para testar rapidamente nossos componentes. Ela não é disponibilizada no build e nem disponibilizamos um site com ela.
+  - **components**: pasta com os componentes da biblioteca, seus testes e documentação gerada automaticamente.
+  - **pages**: arquivos de exemplos usados no desenvolvimento local e no site.
+  - **utils**: funções que são usados em vários componentes.
+  - **components.d.ts**: arquivo gerado pelo stencil com os tipos dos parâmetros dos componentes.
+  - **index.html**: arquivo inicial do ambiente de desenvolvimento.
+  - **index.ts**: arquivo gerado pelo stencil que exporta todos os componentes.
+- **scripts**: scripts usados durante alguma parte do fluxo do projeto
 
-## Rodar o projeto na máquina local
+## Testar os componentes no localhost
 
-Clone o projeto:
+De criar os componentes na pasta `src/components/`, crie as páginas de exemplos no `src/pages`. Essas páginas vão ser usadas também no site do docusaurus!
 
-```bash
-git clone git@gitlab.com:govbr-ds/dev/wbc/govbr-ds-wbc.git
+Depois de criar os exemplos inclua os arquivos e componentes criados no local correto no arquivo `src/index.html`.
 
-cd govbr-ds-wbc
+Agora para rodar o projeto e testar os componentes, execute `npx nx run @govbr-ds/webcomponents:dev`. Isso vai iniciar o servidor de desenvolvimento exclusivo do projeto de Web Components.
 
-npm install
-
-npm run storybook
-```
-
-## Documentação
+## Documentações Complementares
 
-Nossa documentação está disponível em <https://gov.br/ds/webcomponents/>.
+Consulte a seção sobre Web Componente na nossa [Wiki](https://gov.br/ds/wiki/desenvolvimento/web-components) para obter mais informações sobre esse projeto.
 
-> Para outras informações, consulte nossa [Wiki](https://gov.br/ds/wiki/desenvolvimento/web-components/).
+Para saber mais detalhes sobre a especificação Web Components sugerimos que consulte o [MDN](https://developer.mozilla.org/pt-BR/docs/Web/Web_Components 'Web Components | MDN').
 
-## Polyfill
+### Polyfill
 
 Acesse os seguintes links para entender mais sobre o suporte dos browsers a [Custom Elements](https://caniuse.com/custom-elementsv1) e a [Shadow Dom](https://caniuse.com/shadowdomv1).
 
@@ -116,41 +161,19 @@ Caso os requisitos do seu projeto incluam navegadores que não suportam completa
 
 Para aprender com instalar, consulte a [documentação oficial](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs 'Polyfills')
 
-## Contribuindo
-
-Antes de abrir um Merge Request tenha em mente algumas informações:
-
-- Esse é um projeto opensource e contribuições são bem-vindas.
-- Para facilitar a aprovação da sua contribuição, escolha um título curto, simples e explicativo para o MR, e siga os padrões da nossa [wiki](https://gov.br/ds/wiki/ 'Wiki').
-- Quer contribuir com o projeto? Confira o nosso guia [como contribuir](./CONTRIBUTING.md 'Como contribuir?').
-
-### Reportar bugs/necessidades
-
-Você pode usar as [issues](https://gitlab.com/govbr-ds/dev/wbc/govbr-ds-wbc/-/issues/new) para nos informar os problemas que tem enfrentado ao usar nossa biblioteca ou mesmo o que gostaria que fizesse parte do projeto. Por favor use o modelo que mais se encaixa na sua necessidade e preencha com o máximo de detalhes possível.
-
-Nos comprometemos a responder a todas as issues.
-
-## Commits
-
-Nesse projeto usamos um padrão para branches e commits. Por favor observe a documentação na nossa [wiki](https://gov.br/ds/wiki/ 'Wiki') para aprender sobre os nossos padrões.
-
 ## Precisa de ajuda?
 
-> Por favor **não** crie issues para fazer perguntas...
+Por favor **não** crie issues para fazer perguntas.
 
 Use nossos canais abaixo para obter tirar suas dúvidas:
 
-- Site do GovBR-DS <http://gov.br/ds>
-
-- Web Components <https://gov.br/ds/webcomponents/>
-
-- Pelo nosso email <govbr-ds@serpro.gov.br>
-
-- Usando nosso canal no discord <https://discord.gg/U5GwPfqhUP>
+- Site do GovBR-DS [http://gov.br/ds](http://gov.br/ds)
+- Web Components [https://gov.br/ds/webcomponents](https://gov.br/ds/webcomponents)
+- Usando nosso canal no discord [https://discord.gg/U5GwPfqhUP](https://discord.gg/U5GwPfqhUP)
 
 ## Créditos
 
-Os Web Components do [GovBR-DS](https://gov.br/ds/ 'GovBR-DS') são criados pelo [SERPRO](https://www.serpro.gov.br/ 'SERPRO | Serviço Federal de Processamento de Dados') e [Dataprev](https://www.dataprev.gov.br/ 'Dataprev | Empresa de Tecnologia e Informações da Previdência') juntamente com a participação da comunidade.
+Os Web Components do [GovBR-DS](https://gov.br/ds/ 'GovBR-DS') são criados pelo [SERPRO](https://www.serpro.gov.br/ 'SERPRO | Serviço Federal de Processamento de Dados') juntamente com a comunidade.
 
 ## Licença
 

package/dist/cjs/app-globals-3a1e7e63.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const globalScripts = () => {};
+
+exports.globalScripts = globalScripts;
+
+//# sourceMappingURL=app-globals-3a1e7e63.js.map

package/dist/cjs/app-globals-3a1e7e63.js.map

@@ -0,0 +1 @@
+{"file":"app-globals-3a1e7e63.js","mappings":";;AAAY,MAAC,aAAa,GAAG,MAAM;;;;","names":[],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"version":3}