voa-ds-core 1.0.12 → 1.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/collection/components/GetStarted/ComoUsar.stories.js +32 -3
- package/dist/collection/components/GetStarted/ComoUsar.stories.js.map +1 -1
- package/dist/collection/components/voa-tag/voa-tag.stories.js +6 -6
- package/dist/collection/components/voa-tag/voa-tag.stories.js.map +1 -1
- package/dist/collection/index.js +2 -0
- package/dist/collection/index.js.map +1 -0
- package/dist/styles/voa-components.css +4 -6
- package/dist/types/index.d.ts +2 -0
- package/dist/types/types/index.d.ts +1 -0
- package/package.json +13 -2
- package/dist/collection/components/GetStarted/ImportandoEstilos.stories.js +0 -414
- package/dist/collection/components/GetStarted/ImportandoEstilos.stories.js.map +0 -1
- package/dist/types/components/GetStarted/ImportandoEstilos.stories.d.ts +0 -4
|
@@ -119,13 +119,42 @@ const Template = () => html `
|
|
|
119
119
|
|
|
120
120
|
<h2>Instalação</h2>
|
|
121
121
|
|
|
122
|
-
<h3>
|
|
122
|
+
<h3>Configuração do Repositório Privado (.npmrc)</h3>
|
|
123
|
+
|
|
124
|
+
<div class="warning-box">
|
|
125
|
+
<strong>Importante:</strong> Antes de instalar os pacotes, você precisa configurar o arquivo <code>.npmrc</code> na raiz do seu projeto.
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<p>
|
|
129
|
+
Este arquivo faz um <strong>override</strong> da configuração padrão do npm e instrui o gerenciador de pacotes
|
|
130
|
+
a usar o repositório privado da GAB para baixar todos os pacotes do escopo <code>@voa-ds</code>.
|
|
131
|
+
</p>
|
|
132
|
+
|
|
133
|
+
<h4>Crie o arquivo .npmrc na raiz do seu projeto:</h4>
|
|
134
|
+
<pre><code>@voa-ds:registry=https://proget-npm.aguiabranca.com.br/npm/npm-private/
|
|
135
|
+
strict-ssl=false</code></pre>
|
|
136
|
+
|
|
137
|
+
<p><strong>O que esse arquivo faz:</strong></p>
|
|
138
|
+
<ul>
|
|
139
|
+
<li>Configura o registro npm privado para todos os pacotes <code>@voa-ds</code></li>
|
|
140
|
+
<li>Permite a instalação mesmo sem certificado SSL válido (necessário para repositório interno)</li>
|
|
141
|
+
<li>Não afeta a instalação de outros pacotes npm públicos</li>
|
|
142
|
+
</ul>
|
|
143
|
+
|
|
144
|
+
<div class="success-box">
|
|
145
|
+
<strong>Dica:</strong> Se você clonou este repositório, o arquivo <code>.npmrc</code> já deve estar configurado.
|
|
146
|
+
Caso contrário, crie-o manualmente com o conteúdo acima.
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<h3>Instalando os Pacotes</h3>
|
|
150
|
+
|
|
151
|
+
<h4>React</h4>
|
|
123
152
|
<pre><code>npm install @voa-ds/react</code></pre>
|
|
124
153
|
|
|
125
|
-
<
|
|
154
|
+
<h4>Angular</h4>
|
|
126
155
|
<pre><code>npm install @voa-ds/angular</code></pre>
|
|
127
156
|
|
|
128
|
-
<
|
|
157
|
+
<h4>Vue</h4>
|
|
129
158
|
<pre><code>npm install @voa-ds/vue</code></pre>
|
|
130
159
|
|
|
131
160
|
<hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComoUsar.stories.js","sourceRoot":"","sources":["../../../src/components/GetStarted/ComoUsar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,eAAe;IACb,KAAK,EAAE,wBAAwB;CACxB,CAAC;AAEV,MAAM,QAAQ,GAAY,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkcnC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { Meta, StoryFn } from \"@storybook/web-components\";\r\nimport { html } from \"lit-html\";\r\n\r\nexport default {\r\n title: \"Documentação/Como Usar\",\r\n} as Meta;\r\n\r\nconst Template: StoryFn = () => html`\r\n <style>\r\n .guia-container {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n line-height: 1.7;\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n padding: 30px;\r\n color: #2d3748;\r\n }\r\n\r\n .guia-container h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n color: #1a202c;\r\n }\r\n\r\n .guia-container h2 {\r\n font-size: 1.8rem;\r\n margin-top: 40px;\r\n margin-bottom: 15px;\r\n color: #2d3748;\r\n border-bottom: 3px solid #3182ce;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .guia-container h3 {\r\n font-size: 1.4rem;\r\n margin-top: 30px;\r\n margin-bottom: 12px;\r\n color: #4a5568;\r\n }\r\n\r\n .guia-container h4 {\r\n font-size: 1.1rem;\r\n margin-top: 20px;\r\n margin-bottom: 8px;\r\n color: #718096;\r\n }\r\n\r\n .guia-container pre {\r\n background-color: #2d3748;\r\n color: #f7fafc;\r\n padding: 20px;\r\n border-radius: 8px;\r\n overflow-x: auto;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n margin: 15px 0;\r\n }\r\n\r\n .guia-container code {\r\n font-family: 'Fira Code', 'Courier New', monospace;\r\n }\r\n\r\n .guia-container ul {\r\n margin: 15px 0;\r\n padding-left: 25px;\r\n }\r\n\r\n .guia-container li {\r\n margin: 8px 0;\r\n }\r\n\r\n .alert-box {\r\n background: #ebf8ff;\r\n border-left: 4px solid #3182ce;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .warning-box {\r\n background: #fffaf0;\r\n border-left: 4px solid #ed8936;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .success-box {\r\n background: #f0fff4;\r\n border-left: 4px solid #48bb78;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .variants-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin: 15px 0;\r\n }\r\n\r\n .variants-table th,\r\n .variants-table td {\r\n padding: 12px;\r\n text-align: left;\r\n border-bottom: 1px solid #e2e8f0;\r\n }\r\n\r\n .variants-table th {\r\n background: #edf2f7;\r\n font-weight: 600;\r\n }\r\n </style>\r\n\r\n <div class=\"guia-container\">\r\n <h1>Como Usar o VOA Design System</h1>\r\n <p>Guia rápido e direto pra você sair usando os componentes.</p>\r\n\r\n <div class=\"alert-box\">\r\n <strong>Atenção:</strong> Precisa estar conectado na VPN da empresa pra instalar os pacotes!\r\n </div>\r\n\r\n <h2>Instalação</h2>\r\n\r\n <h3>React</h3>\r\n <pre><code>npm install @voa-ds/react</code></pre>\r\n\r\n <h3>Angular</h3>\r\n <pre><code>npm install @voa-ds/angular</code></pre>\r\n\r\n <h3>Vue</h3>\r\n <pre><code>npm install @voa-ds/vue</code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Exemplos Práticos</h2>\r\n\r\n <h3>React</h3>\r\n\r\n <h4>Botão</h4>\r\n <pre><code>import { VoaButton } from '@voa-ds/react';\r\n\r\nfunction MeuComponente() {\r\n return (\r\n <VoaButton\r\n variant=\"primary\"\r\n size=\"md\"\r\n onClick={() => alert('Clicou!')}\r\n >\r\n Salvar\r\n </VoaButton>\r\n );\r\n}</code></pre>\r\n\r\n <table class=\"variants-table\">\r\n <thead>\r\n <tr>\r\n <th>Variantes</th>\r\n <th>Quando usar</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td><code>primary</code></td>\r\n <td>Ação principal da tela</td>\r\n </tr>\r\n <tr>\r\n <td><code>secondary</code></td>\r\n <td>Ação secundária</td>\r\n </tr>\r\n <tr>\r\n <td><code>tonal</code></td>\r\n <td>Botão com fundo suave</td>\r\n </tr>\r\n <tr>\r\n <td><code>ghost</code></td>\r\n <td>Botão transparente</td>\r\n </tr>\r\n <tr>\r\n <td><code>link</code></td>\r\n <td>Parece um link</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <h4>Input</h4>\r\n <pre><code>import { VoaInput } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction Formulario() {\r\n const [nome, setNome] = useState('');\r\n\r\n return (\r\n <VoaInput\r\n label=\"Nome completo\"\r\n placeholder=\"Digite seu nome\"\r\n value={nome}\r\n onDsChange={(e) => setNome(e.detail)}\r\n required\r\n />\r\n );\r\n}</code></pre>\r\n\r\n <div class=\"warning-box\">\r\n <strong>Importante:</strong> O valor vem em <code>event.detail</code>, não em <code>event.target.value</code>\r\n </div>\r\n\r\n <h4>Input com Erro</h4>\r\n <pre><code><VoaInput\r\n label=\"Email\"\r\n type=\"email\"\r\n error\r\n helperText=\"Email inválido\"\r\n/></code></pre>\r\n\r\n <h4>Select</h4>\r\n <pre><code>import { VoaSelect, VoaOption } from '@voa-ds/react';\r\n\r\nfunction Dropdown() {\r\n return (\r\n <VoaSelect label=\"Escolha uma opção\">\r\n <VoaOption value=\"1\">Opção 1</VoaOption>\r\n <VoaOption value=\"2\">Opção 2</VoaOption>\r\n <VoaOption value=\"3\">Opção 3</VoaOption>\r\n </VoaSelect>\r\n );\r\n}</code></pre>\r\n\r\n <h4>Checkbox</h4>\r\n <pre><code>import { VoaCheckbox } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction MinhaLista() {\r\n const [aceito, setAceito] = useState(false);\r\n\r\n return (\r\n <VoaCheckbox\r\n checked={aceito}\r\n onDsChange={(e) => setAceito(e.detail)}\r\n >\r\n Aceito os termos de uso\r\n </VoaCheckbox>\r\n );\r\n}</code></pre>\r\n\r\n <h4>Alert</h4>\r\n <pre><code>import { VoaAlert } from '@voa-ds/react';\r\n\r\nfunction Notificacao() {\r\n return (\r\n <VoaAlert variant=\"success\">\r\n Dados salvos com sucesso!\r\n </VoaAlert>\r\n );\r\n}</code></pre>\r\n\r\n <h3>Angular</h3>\r\n\r\n <h4>Setup no Módulo</h4>\r\n <pre><code>// app.module.ts\r\nimport { VoaButton, VoaInput } from '@voa-ds/angular';\r\n\r\n@NgModule({\r\n declarations: [VoaButton, VoaInput],\r\n // ...\r\n})</code></pre>\r\n\r\n <h4>Usando no Template</h4>\r\n <pre><code><voa-button\r\n variant=\"primary\"\r\n size=\"md\"\r\n (dsClick)=\"salvar()\">\r\n Salvar\r\n</voa-button>\r\n\r\n<voa-input\r\n label=\"Nome completo\"\r\n placeholder=\"Digite seu nome\"\r\n [value]=\"nome\"\r\n (dsChange)=\"nome = $event.detail\"\r\n required>\r\n</voa-input></code></pre>\r\n\r\n <h4>No Componente</h4>\r\n <pre><code>export class MeuComponente {\r\n nome: string = '';\r\n\r\n salvar() {\r\n console.log('Nome:', this.nome);\r\n }\r\n}</code></pre>\r\n\r\n <h3>Vue</h3>\r\n\r\n <h4>Botão</h4>\r\n <pre><code><template>\r\n <VoaButton\r\n variant=\"primary\"\r\n size=\"md\"\r\n @dsClick=\"salvar\">\r\n Salvar\r\n </VoaButton>\r\n</template>\r\n\r\n<script>\r\nimport { VoaButton } from '@voa-ds/vue';\r\n\r\nexport default {\r\n components: { VoaButton },\r\n methods: {\r\n salvar() {\r\n console.log('Salvando...');\r\n }\r\n }\r\n}\r\n</script></code></pre>\r\n\r\n <h4>Input</h4>\r\n <pre><code><template>\r\n <VoaInput\r\n label=\"Nome completo\"\r\n placeholder=\"Digite seu nome\"\r\n :value=\"nome\"\r\n @dsChange=\"nome = $event.detail\"\r\n required\r\n />\r\n</template>\r\n\r\n<script>\r\nimport { VoaInput } from '@voa-ds/vue';\r\n\r\nexport default {\r\n components: { VoaInput },\r\n data() {\r\n return {\r\n nome: ''\r\n }\r\n }\r\n}\r\n</script></code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Eventos</h2>\r\n\r\n <div class=\"success-box\">\r\n Todos os eventos dos componentes usam o prefixo <code>ds</code>\r\n </div>\r\n\r\n <table class=\"variants-table\">\r\n <thead>\r\n <tr>\r\n <th>Evento</th>\r\n <th>Quando dispara</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td><code>dsClick</code></td>\r\n <td>Quando clica no componente</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsChange</code></td>\r\n <td>Quando o valor muda (após perder foco)</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsInput</code></td>\r\n <td>Enquanto está digitando</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsFocus</code></td>\r\n <td>Quando ganha o foco</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsBlur</code></td>\r\n <td>Quando perde o foco</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <h4>Como pegar o valor dos eventos:</h4>\r\n <pre><code>// React\r\n<VoaInput onDsChange={(e) => console.log(e.detail)} />\r\n\r\n// Angular\r\n<voa-input (dsChange)=\"handleChange($event.detail)\"></voa-input>\r\n\r\n// Vue\r\n<VoaInput @dsChange=\"valor = $event.detail\" /></code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Componentes Disponíveis</h2>\r\n\r\n <ul>\r\n <li><strong>VoaButton</strong> - Botões de vários tipos</li>\r\n <li><strong>VoaInput</strong> - Campos de texto</li>\r\n <li><strong>VoaTextArea</strong> - Área de texto grande</li>\r\n <li><strong>VoaCheckbox</strong> - Caixas de seleção</li>\r\n <li><strong>VoaRadio</strong> - Botões de rádio</li>\r\n <li><strong>VoaSelect / VoaOption</strong> - Dropdown</li>\r\n <li><strong>VoaSwitch</strong> - Interruptor on/off</li>\r\n <li><strong>VoaCard</strong> - Cards</li>\r\n <li><strong>VoaAlert</strong> - Alertas</li>\r\n <li><strong>VoaBadge</strong> - Badges/etiquetas</li>\r\n <li><strong>VoaTag</strong> - Tags</li>\r\n <li><strong>VoaAvatar</strong> - Avatar de usuário</li>\r\n <li><strong>VoaPagination</strong> - Paginação</li>\r\n <li><strong>VoaBreadcrumbs</strong> - Navegação</li>\r\n <li><strong>VoaAccordion</strong> - Acordeão</li>\r\n <li><strong>VoaTab / VoaTabItem</strong> - Abas</li>\r\n <li><strong>VoaTooltip</strong> - Dicas</li>\r\n </ul>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Problemas Comuns</h2>\r\n\r\n <h4>Não consigo instalar</h4>\r\n <ul>\r\n <li>Verifica se tá na VPN</li>\r\n <li>Verifica se tem o <code>.npmrc</code> configurado</li>\r\n </ul>\r\n\r\n <h4>Componente não aparece</h4>\r\n <ul>\r\n <li>Verifica se importou certo</li>\r\n <li>Em Angular, verifica se declarou no module</li>\r\n <li>Olha o console do navegador</li>\r\n </ul>\r\n\r\n <h4>Eventos não funcionam</h4>\r\n <ul>\r\n <li>Lembra do prefixo <code>ds</code>: <code>dsClick</code>, <code>dsChange</code></li>\r\n <li>O valor vem em <code>event.detail</code></li>\r\n </ul>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Dicas</h2>\r\n\r\n <div class=\"success-box\">\r\n <ul style=\"margin: 0; padding-left: 20px;\">\r\n <li>Sempre use VPN pra instalar</li>\r\n <li>Tamanhos padrão: <code>sm</code>, <code>md</code>, <code>lg</code></li>\r\n <li>Estados visuais: <code>error</code>, <code>valid</code>, <code>warning</code>, <code>disabled</code></li>\r\n <li>Veja o Storybook pra ver todos os componentes em ação</li>\r\n <li>Cada componente tem um README com mais detalhes</li>\r\n </ul>\r\n </div>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <div style=\"text-align: center; color: #718096; padding: 20px;\">\r\n <p>Precisa de ajuda? Veja o Storybook ou procura o time!</p>\r\n </div>\r\n </div>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\n"]}
|
|
1
|
+
{"version":3,"file":"ComoUsar.stories.js","sourceRoot":"","sources":["../../../src/components/GetStarted/ComoUsar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,eAAe;IACb,KAAK,EAAE,wBAAwB;CACxB,CAAC;AAEV,MAAM,QAAQ,GAAY,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+dnC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { Meta, StoryFn } from \"@storybook/web-components\";\r\nimport { html } from \"lit-html\";\r\n\r\nexport default {\r\n title: \"Documentação/Como Usar\",\r\n} as Meta;\r\n\r\nconst Template: StoryFn = () => html`\r\n <style>\r\n .guia-container {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n line-height: 1.7;\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n padding: 30px;\r\n color: #2d3748;\r\n }\r\n\r\n .guia-container h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n color: #1a202c;\r\n }\r\n\r\n .guia-container h2 {\r\n font-size: 1.8rem;\r\n margin-top: 40px;\r\n margin-bottom: 15px;\r\n color: #2d3748;\r\n border-bottom: 3px solid #3182ce;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .guia-container h3 {\r\n font-size: 1.4rem;\r\n margin-top: 30px;\r\n margin-bottom: 12px;\r\n color: #4a5568;\r\n }\r\n\r\n .guia-container h4 {\r\n font-size: 1.1rem;\r\n margin-top: 20px;\r\n margin-bottom: 8px;\r\n color: #718096;\r\n }\r\n\r\n .guia-container pre {\r\n background-color: #2d3748;\r\n color: #f7fafc;\r\n padding: 20px;\r\n border-radius: 8px;\r\n overflow-x: auto;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n margin: 15px 0;\r\n }\r\n\r\n .guia-container code {\r\n font-family: 'Fira Code', 'Courier New', monospace;\r\n }\r\n\r\n .guia-container ul {\r\n margin: 15px 0;\r\n padding-left: 25px;\r\n }\r\n\r\n .guia-container li {\r\n margin: 8px 0;\r\n }\r\n\r\n .alert-box {\r\n background: #ebf8ff;\r\n border-left: 4px solid #3182ce;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .warning-box {\r\n background: #fffaf0;\r\n border-left: 4px solid #ed8936;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .success-box {\r\n background: #f0fff4;\r\n border-left: 4px solid #48bb78;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .variants-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin: 15px 0;\r\n }\r\n\r\n .variants-table th,\r\n .variants-table td {\r\n padding: 12px;\r\n text-align: left;\r\n border-bottom: 1px solid #e2e8f0;\r\n }\r\n\r\n .variants-table th {\r\n background: #edf2f7;\r\n font-weight: 600;\r\n }\r\n </style>\r\n\r\n <div class=\"guia-container\">\r\n <h1>Como Usar o VOA Design System</h1>\r\n <p>Guia rápido e direto pra você sair usando os componentes.</p>\r\n\r\n <div class=\"alert-box\">\r\n <strong>Atenção:</strong> Precisa estar conectado na VPN da empresa pra instalar os pacotes!\r\n </div>\r\n\r\n <h2>Instalação</h2>\r\n\r\n <h3>Configuração do Repositório Privado (.npmrc)</h3>\r\n\r\n <div class=\"warning-box\">\r\n <strong>Importante:</strong> Antes de instalar os pacotes, você precisa configurar o arquivo <code>.npmrc</code> na raiz do seu projeto.\r\n </div>\r\n\r\n <p>\r\n Este arquivo faz um <strong>override</strong> da configuração padrão do npm e instrui o gerenciador de pacotes\r\n a usar o repositório privado da GAB para baixar todos os pacotes do escopo <code>@voa-ds</code>.\r\n </p>\r\n\r\n <h4>Crie o arquivo .npmrc na raiz do seu projeto:</h4>\r\n <pre><code>@voa-ds:registry=https://proget-npm.aguiabranca.com.br/npm/npm-private/\r\nstrict-ssl=false</code></pre>\r\n\r\n <p><strong>O que esse arquivo faz:</strong></p>\r\n <ul>\r\n <li>Configura o registro npm privado para todos os pacotes <code>@voa-ds</code></li>\r\n <li>Permite a instalação mesmo sem certificado SSL válido (necessário para repositório interno)</li>\r\n <li>Não afeta a instalação de outros pacotes npm públicos</li>\r\n </ul>\r\n\r\n <div class=\"success-box\">\r\n <strong>Dica:</strong> Se você clonou este repositório, o arquivo <code>.npmrc</code> já deve estar configurado.\r\n Caso contrário, crie-o manualmente com o conteúdo acima.\r\n </div>\r\n\r\n <h3>Instalando os Pacotes</h3>\r\n\r\n <h4>React</h4>\r\n <pre><code>npm install @voa-ds/react</code></pre>\r\n\r\n <h4>Angular</h4>\r\n <pre><code>npm install @voa-ds/angular</code></pre>\r\n\r\n <h4>Vue</h4>\r\n <pre><code>npm install @voa-ds/vue</code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Exemplos Práticos</h2>\r\n\r\n <h3>React</h3>\r\n\r\n <h4>Botão</h4>\r\n <pre><code>import { VoaButton } from '@voa-ds/react';\r\n\r\nfunction MeuComponente() {\r\n return (\r\n <VoaButton\r\n variant=\"primary\"\r\n size=\"md\"\r\n onClick={() => alert('Clicou!')}\r\n >\r\n Salvar\r\n </VoaButton>\r\n );\r\n}</code></pre>\r\n\r\n <table class=\"variants-table\">\r\n <thead>\r\n <tr>\r\n <th>Variantes</th>\r\n <th>Quando usar</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td><code>primary</code></td>\r\n <td>Ação principal da tela</td>\r\n </tr>\r\n <tr>\r\n <td><code>secondary</code></td>\r\n <td>Ação secundária</td>\r\n </tr>\r\n <tr>\r\n <td><code>tonal</code></td>\r\n <td>Botão com fundo suave</td>\r\n </tr>\r\n <tr>\r\n <td><code>ghost</code></td>\r\n <td>Botão transparente</td>\r\n </tr>\r\n <tr>\r\n <td><code>link</code></td>\r\n <td>Parece um link</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <h4>Input</h4>\r\n <pre><code>import { VoaInput } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction Formulario() {\r\n const [nome, setNome] = useState('');\r\n\r\n return (\r\n <VoaInput\r\n label=\"Nome completo\"\r\n placeholder=\"Digite seu nome\"\r\n value={nome}\r\n onDsChange={(e) => setNome(e.detail)}\r\n required\r\n />\r\n );\r\n}</code></pre>\r\n\r\n <div class=\"warning-box\">\r\n <strong>Importante:</strong> O valor vem em <code>event.detail</code>, não em <code>event.target.value</code>\r\n </div>\r\n\r\n <h4>Input com Erro</h4>\r\n <pre><code><VoaInput\r\n label=\"Email\"\r\n type=\"email\"\r\n error\r\n helperText=\"Email inválido\"\r\n/></code></pre>\r\n\r\n <h4>Select</h4>\r\n <pre><code>import { VoaSelect, VoaOption } from '@voa-ds/react';\r\n\r\nfunction Dropdown() {\r\n return (\r\n <VoaSelect label=\"Escolha uma opção\">\r\n <VoaOption value=\"1\">Opção 1</VoaOption>\r\n <VoaOption value=\"2\">Opção 2</VoaOption>\r\n <VoaOption value=\"3\">Opção 3</VoaOption>\r\n </VoaSelect>\r\n );\r\n}</code></pre>\r\n\r\n <h4>Checkbox</h4>\r\n <pre><code>import { VoaCheckbox } from '@voa-ds/react';\r\nimport { useState } from 'react';\r\n\r\nfunction MinhaLista() {\r\n const [aceito, setAceito] = useState(false);\r\n\r\n return (\r\n <VoaCheckbox\r\n checked={aceito}\r\n onDsChange={(e) => setAceito(e.detail)}\r\n >\r\n Aceito os termos de uso\r\n </VoaCheckbox>\r\n );\r\n}</code></pre>\r\n\r\n <h4>Alert</h4>\r\n <pre><code>import { VoaAlert } from '@voa-ds/react';\r\n\r\nfunction Notificacao() {\r\n return (\r\n <VoaAlert variant=\"success\">\r\n Dados salvos com sucesso!\r\n </VoaAlert>\r\n );\r\n}</code></pre>\r\n\r\n <h3>Angular</h3>\r\n\r\n <h4>Setup no Módulo</h4>\r\n <pre><code>// app.module.ts\r\nimport { VoaButton, VoaInput } from '@voa-ds/angular';\r\n\r\n@NgModule({\r\n declarations: [VoaButton, VoaInput],\r\n // ...\r\n})</code></pre>\r\n\r\n <h4>Usando no Template</h4>\r\n <pre><code><voa-button\r\n variant=\"primary\"\r\n size=\"md\"\r\n (dsClick)=\"salvar()\">\r\n Salvar\r\n</voa-button>\r\n\r\n<voa-input\r\n label=\"Nome completo\"\r\n placeholder=\"Digite seu nome\"\r\n [value]=\"nome\"\r\n (dsChange)=\"nome = $event.detail\"\r\n required>\r\n</voa-input></code></pre>\r\n\r\n <h4>No Componente</h4>\r\n <pre><code>export class MeuComponente {\r\n nome: string = '';\r\n\r\n salvar() {\r\n console.log('Nome:', this.nome);\r\n }\r\n}</code></pre>\r\n\r\n <h3>Vue</h3>\r\n\r\n <h4>Botão</h4>\r\n <pre><code><template>\r\n <VoaButton\r\n variant=\"primary\"\r\n size=\"md\"\r\n @dsClick=\"salvar\">\r\n Salvar\r\n </VoaButton>\r\n</template>\r\n\r\n<script>\r\nimport { VoaButton } from '@voa-ds/vue';\r\n\r\nexport default {\r\n components: { VoaButton },\r\n methods: {\r\n salvar() {\r\n console.log('Salvando...');\r\n }\r\n }\r\n}\r\n</script></code></pre>\r\n\r\n <h4>Input</h4>\r\n <pre><code><template>\r\n <VoaInput\r\n label=\"Nome completo\"\r\n placeholder=\"Digite seu nome\"\r\n :value=\"nome\"\r\n @dsChange=\"nome = $event.detail\"\r\n required\r\n />\r\n</template>\r\n\r\n<script>\r\nimport { VoaInput } from '@voa-ds/vue';\r\n\r\nexport default {\r\n components: { VoaInput },\r\n data() {\r\n return {\r\n nome: ''\r\n }\r\n }\r\n}\r\n</script></code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Eventos</h2>\r\n\r\n <div class=\"success-box\">\r\n Todos os eventos dos componentes usam o prefixo <code>ds</code>\r\n </div>\r\n\r\n <table class=\"variants-table\">\r\n <thead>\r\n <tr>\r\n <th>Evento</th>\r\n <th>Quando dispara</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td><code>dsClick</code></td>\r\n <td>Quando clica no componente</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsChange</code></td>\r\n <td>Quando o valor muda (após perder foco)</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsInput</code></td>\r\n <td>Enquanto está digitando</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsFocus</code></td>\r\n <td>Quando ganha o foco</td>\r\n </tr>\r\n <tr>\r\n <td><code>dsBlur</code></td>\r\n <td>Quando perde o foco</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <h4>Como pegar o valor dos eventos:</h4>\r\n <pre><code>// React\r\n<VoaInput onDsChange={(e) => console.log(e.detail)} />\r\n\r\n// Angular\r\n<voa-input (dsChange)=\"handleChange($event.detail)\"></voa-input>\r\n\r\n// Vue\r\n<VoaInput @dsChange=\"valor = $event.detail\" /></code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Componentes Disponíveis</h2>\r\n\r\n <ul>\r\n <li><strong>VoaButton</strong> - Botões de vários tipos</li>\r\n <li><strong>VoaInput</strong> - Campos de texto</li>\r\n <li><strong>VoaTextArea</strong> - Área de texto grande</li>\r\n <li><strong>VoaCheckbox</strong> - Caixas de seleção</li>\r\n <li><strong>VoaRadio</strong> - Botões de rádio</li>\r\n <li><strong>VoaSelect / VoaOption</strong> - Dropdown</li>\r\n <li><strong>VoaSwitch</strong> - Interruptor on/off</li>\r\n <li><strong>VoaCard</strong> - Cards</li>\r\n <li><strong>VoaAlert</strong> - Alertas</li>\r\n <li><strong>VoaBadge</strong> - Badges/etiquetas</li>\r\n <li><strong>VoaTag</strong> - Tags</li>\r\n <li><strong>VoaAvatar</strong> - Avatar de usuário</li>\r\n <li><strong>VoaPagination</strong> - Paginação</li>\r\n <li><strong>VoaBreadcrumbs</strong> - Navegação</li>\r\n <li><strong>VoaAccordion</strong> - Acordeão</li>\r\n <li><strong>VoaTab / VoaTabItem</strong> - Abas</li>\r\n <li><strong>VoaTooltip</strong> - Dicas</li>\r\n </ul>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Problemas Comuns</h2>\r\n\r\n <h4>Não consigo instalar</h4>\r\n <ul>\r\n <li>Verifica se tá na VPN</li>\r\n <li>Verifica se tem o <code>.npmrc</code> configurado</li>\r\n </ul>\r\n\r\n <h4>Componente não aparece</h4>\r\n <ul>\r\n <li>Verifica se importou certo</li>\r\n <li>Em Angular, verifica se declarou no module</li>\r\n <li>Olha o console do navegador</li>\r\n </ul>\r\n\r\n <h4>Eventos não funcionam</h4>\r\n <ul>\r\n <li>Lembra do prefixo <code>ds</code>: <code>dsClick</code>, <code>dsChange</code></li>\r\n <li>O valor vem em <code>event.detail</code></li>\r\n </ul>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Dicas</h2>\r\n\r\n <div class=\"success-box\">\r\n <ul style=\"margin: 0; padding-left: 20px;\">\r\n <li>Sempre use VPN pra instalar</li>\r\n <li>Tamanhos padrão: <code>sm</code>, <code>md</code>, <code>lg</code></li>\r\n <li>Estados visuais: <code>error</code>, <code>valid</code>, <code>warning</code>, <code>disabled</code></li>\r\n <li>Veja o Storybook pra ver todos os componentes em ação</li>\r\n <li>Cada componente tem um README com mais detalhes</li>\r\n </ul>\r\n </div>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <div style=\"text-align: center; color: #718096; padding: 20px;\">\r\n <p>Precisa de ajuda? Veja o Storybook ou procura o time!</p>\r\n </div>\r\n </div>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\n"]}
|
|
@@ -145,7 +145,7 @@ export const WithBothIcons = {
|
|
|
145
145
|
export const Small = {
|
|
146
146
|
args: {
|
|
147
147
|
size: 'sm',
|
|
148
|
-
label: 'v1.0.
|
|
148
|
+
label: 'v1.0.1',
|
|
149
149
|
shape: 'pill',
|
|
150
150
|
},
|
|
151
151
|
};
|
|
@@ -190,7 +190,7 @@ Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos
|
|
|
190
190
|
<voa-tag label="Beta Feature" shape="pill"></voa-tag>
|
|
191
191
|
|
|
192
192
|
<!-- Tag pequena -->
|
|
193
|
-
<voa-tag label="v1.0.
|
|
193
|
+
<voa-tag label="v1.0.1" size="sm" shape="pill"></voa-tag>
|
|
194
194
|
|
|
195
195
|
<!-- Tag com ícone à esquerda -->
|
|
196
196
|
<voa-tag variant="icons" label="Approved" icon-left>
|
|
@@ -222,7 +222,7 @@ function MyComponent() {
|
|
|
222
222
|
<VoaTag label="Beta Feature" shape="pill" />
|
|
223
223
|
|
|
224
224
|
{/* Tag pequena */}
|
|
225
|
-
<VoaTag label="v1.0.
|
|
225
|
+
<VoaTag label="v1.0.1" size="sm" shape="pill" />
|
|
226
226
|
|
|
227
227
|
{/* Tag com ícone à esquerda */}
|
|
228
228
|
<VoaTag variant="icons" label="Approved" iconLeft>
|
|
@@ -257,7 +257,7 @@ import { VoaTag } from '@voa-ds/angular';
|
|
|
257
257
|
<voa-tag label="Beta Feature" shape="pill"></voa-tag>
|
|
258
258
|
|
|
259
259
|
<!-- Tag pequena -->
|
|
260
|
-
<voa-tag label="v1.0.
|
|
260
|
+
<voa-tag label="v1.0.1" size="sm" shape="pill"></voa-tag>
|
|
261
261
|
|
|
262
262
|
<!-- Tag com ícone à esquerda -->
|
|
263
263
|
<voa-tag variant="icons" label="Approved" [iconLeft]="true">
|
|
@@ -282,7 +282,7 @@ export class ExampleComponent {}
|
|
|
282
282
|
<VoaTag label="Beta Feature" shape="pill" />
|
|
283
283
|
|
|
284
284
|
<!-- Tag pequena -->
|
|
285
|
-
<VoaTag label="v1.0.
|
|
285
|
+
<VoaTag label="v1.0.1" size="sm" shape="pill" />
|
|
286
286
|
|
|
287
287
|
<!-- Tag com ícone à esquerda -->
|
|
288
288
|
<VoaTag variant="icons" label="Approved" :icon-left="true">
|
|
@@ -335,7 +335,7 @@ npm install @voa-ds/components @voa-ds/vue
|
|
|
335
335
|
<div style="display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 2rem;">
|
|
336
336
|
<voa-tag label="Design System"></voa-tag>
|
|
337
337
|
<voa-tag label="Beta Feature" shape="pill"></voa-tag>
|
|
338
|
-
<voa-tag label="v1.0.
|
|
338
|
+
<voa-tag label="v1.0.1" size="sm" shape="pill"></voa-tag>
|
|
339
339
|
</div>
|
|
340
340
|
<div style="margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;">
|
|
341
341
|
<p style="margin: 0; font-weight: 600; margin-bottom: 0.5rem;">📚 Documentação Completa</p>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"voa-tag.stories.js","sourceRoot":"","sources":["../../../src/components/voa-tag/voa-tag.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport '../../Stories/styles/voa-tag.external.css';\r\n\r\n/**\r\n * **VoaTag**\r\n * A static component for categorization labels and status indicators.\r\n *\r\n * CSS Parts:\r\n * - `base`: The main container\r\n * - `label`: Text wrapper\r\n * - `icon-start`: Left icon wrapper\r\n * - `icon-end`: Right icon wrapper\r\n */\r\nconst meta = {\r\n title: \"Componentes/Display/Tag\",\r\n component: 'voa-tag',\r\n tags: ['autodocs'],\r\n parameters: {\r\n design: {\r\n type: 'figma',\r\n url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=1436-769',\r\n },\r\n },\r\n argTypes: {\r\n label: { control: 'text' },\r\n variant: {\r\n control: 'radio',\r\n options: ['plain', 'icons'],\r\n description: 'Controls layout for icons',\r\n },\r\n shape: {\r\n control: 'radio',\r\n options: ['default', 'pill'],\r\n description: 'Corner radius style',\r\n },\r\n size: {\r\n control: 'radio',\r\n options: ['sm', 'md'],\r\n },\r\n iconLeft: { control: 'boolean' },\r\n iconRight: { control: 'boolean' },\r\n },\r\n args: {\r\n label: 'Design System',\r\n variant: 'plain',\r\n shape: 'default',\r\n size: 'md',\r\n iconLeft: false,\r\n iconRight: false,\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconLeft=${args.iconLeft}\r\n .iconRight=${args.iconRight}\r\n >\r\n ${args.variant === 'icons' && args.iconLeft ? html`\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n </svg>\r\n ` : ''}\r\n ${args.variant === 'icons' && args.iconRight ? html`\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n ` : ''}\r\n </voa-tag>\r\n `,\r\n} satisfies Meta;\r\n\r\nexport default meta;\r\n\r\nexport const Default: StoryObj = {};\r\n\r\nexport const PillShape: StoryObj = {\r\n args: {\r\n shape: 'pill',\r\n label: 'Beta Feature',\r\n },\r\n};\r\n\r\nexport const WithStartIcon: StoryObj = {\r\n args: {\r\n variant: 'icons',\r\n iconLeft: true,\r\n label: 'Approved',\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconLeft=${args.iconLeft}\r\n >\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n `,\r\n};\r\n\r\nexport const WithEndIcon: StoryObj = {\r\n args: {\r\n variant: 'icons',\r\n iconRight: true,\r\n label: 'Filter',\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconRight=${args.iconRight}\r\n >\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n </svg>\r\n </voa-tag>\r\n `,\r\n};\r\n\r\nexport const WithBothIcons: StoryObj = {\r\n args: {\r\n variant: 'icons',\r\n iconLeft: true,\r\n iconRight: true,\r\n label: 'Complete',\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconLeft=${args.iconLeft}\r\n .iconRight=${args.iconRight}\r\n >\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n </svg>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n `,\r\n};\r\n\r\nexport const Small: StoryObj = {\r\n args: {\r\n size: 'sm',\r\n label: 'v1.0.0',\r\n shape: 'pill',\r\n },\r\n};\r\n\r\nexport const AllVariants: StoryObj = {\r\n render: () => html`\r\n <div style=\"display: flex; flex-wrap: wrap; gap: 16px; align-items: center;\">\r\n <voa-tag label=\"Default MD\"></voa-tag>\r\n <voa-tag label=\"Default SM\" size=\"sm\"></voa-tag>\r\n <voa-tag label=\"Pill MD\" shape=\"pill\"></voa-tag>\r\n <voa-tag label=\"Pill SM\" shape=\"pill\" size=\"sm\"></voa-tag>\r\n <voa-tag variant=\"icons\" label=\"Icons\" ?iconLeft=${true} ?iconRight=${true}>\r\n <voa-tag variant=\"icons\" label=\"Icons\" .iconLeft=${true} .iconRight=${true}>\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2z\" />\r\n </svg>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n </div>\r\n `,\r\n};\r\n\r\n// ============================================\r\n// Usage - Exemplos de Código\r\n// ============================================\r\n\r\nexport const Usage: StoryObj = {\r\n parameters: {\r\n docs: {\r\n description: {\r\n story: `\r\n## Uso do Componente\r\n\r\nEste componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:\r\n\r\n### HTML (Web Components)\r\n\r\n\\`\\`\\`html\r\n<!-- Tag básica -->\r\n<voa-tag label=\"Design System\"></voa-tag>\r\n\r\n<!-- Tag com formato pill -->\r\n<voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n\r\n<!-- Tag pequena -->\r\n<voa-tag label=\"v1.0.0\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n\r\n<!-- Tag com ícone à esquerda -->\r\n<voa-tag variant=\"icons\" label=\"Approved\" icon-left>\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n</voa-tag>\r\n\r\n<!-- Tag com ícone à direita -->\r\n<voa-tag variant=\"icons\" label=\"Filter\" icon-right>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n </svg>\r\n</voa-tag>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaTag } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n return (\r\n <>\r\n {/* Tag básica */}\r\n <VoaTag label=\"Design System\" />\r\n\r\n {/* Tag com formato pill */}\r\n <VoaTag label=\"Beta Feature\" shape=\"pill\" />\r\n\r\n {/* Tag pequena */}\r\n <VoaTag label=\"v1.0.0\" size=\"sm\" shape=\"pill\" />\r\n\r\n {/* Tag com ícone à esquerda */}\r\n <VoaTag variant=\"icons\" label=\"Approved\" iconLeft>\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </VoaTag>\r\n\r\n {/* Tag com ícone à direita */}\r\n <VoaTag variant=\"icons\" label=\"Filter\" iconRight>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n </svg>\r\n </VoaTag>\r\n </>\r\n );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaTag } from '@voa-ds/angular';\r\n\r\n@Component({\r\n selector: 'app-example',\r\n template: \\`\r\n <!-- Tag básica -->\r\n <voa-tag label=\"Design System\"></voa-tag>\r\n\r\n <!-- Tag com formato pill -->\r\n <voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n\r\n <!-- Tag pequena -->\r\n <voa-tag label=\"v1.0.0\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n\r\n <!-- Tag com ícone à esquerda -->\r\n <voa-tag variant=\"icons\" label=\"Approved\" [iconLeft]=\"true\">\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n \\`\r\n})\r\nexport class ExampleComponent {}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n <div>\r\n <!-- Tag básica -->\r\n <VoaTag label=\"Design System\" />\r\n\r\n <!-- Tag com formato pill -->\r\n <VoaTag label=\"Beta Feature\" shape=\"pill\" />\r\n\r\n <!-- Tag pequena -->\r\n <VoaTag label=\"v1.0.0\" size=\"sm\" shape=\"pill\" />\r\n\r\n <!-- Tag com ícone à esquerda -->\r\n <VoaTag variant=\"icons\" label=\"Approved\" :icon-left=\"true\">\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </VoaTag>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaTag } from '@voa-ds/vue';\r\n</script>\r\n\\`\\`\\`\r\n\r\n## Instalação\r\n\r\n### HTML\r\n\\`\\`\\`bash\r\n# NPM\r\nnpm install @voa-ds/components\r\n\r\n# Importar no HTML\r\n<script type=\"module\" src=\"https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js\"></script>\r\n\\`\\`\\`\r\n\r\n### React\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/react\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/angular\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/vue\r\n\\`\\`\\`\r\n `\r\n }\r\n }\r\n },\r\n render: () => html`\r\n <div style=\"padding: 2rem; max-width: 100%;\">\r\n <h2 style=\"margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;\">Uso do Componente</h2>\r\n <p style=\"margin-bottom: 2rem; color: #666;\">Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:</p>\r\n <h3 style=\"margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;\">Exemplo Interativo</h3>\r\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 2rem;\">\r\n <voa-tag label=\"Design System\"></voa-tag>\r\n <voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n <voa-tag label=\"v1.0.0\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n </div>\r\n <div style=\"margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;\">\r\n <p style=\"margin: 0; font-weight: 600; margin-bottom: 0.5rem;\">📚 Documentação Completa</p>\r\n <p style=\"margin: 0; color: #666; font-size: 0.9rem;\">Para ver exemplos de código completos para HTML, React, Angular e Vue, <a href=\"?path=/docs/components-voatag--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.</p>\r\n </div>\r\n </div>\r\n `\r\n};\r\n"]}
|
|
1
|
+
{"version":3,"file":"voa-tag.stories.js","sourceRoot":"","sources":["../../../src/components/voa-tag/voa-tag.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\r\nimport { html } from 'lit';\r\nimport '../../Stories/styles/voa-tag.external.css';\r\n\r\n/**\r\n * **VoaTag**\r\n * A static component for categorization labels and status indicators.\r\n *\r\n * CSS Parts:\r\n * - `base`: The main container\r\n * - `label`: Text wrapper\r\n * - `icon-start`: Left icon wrapper\r\n * - `icon-end`: Right icon wrapper\r\n */\r\nconst meta = {\r\n title: \"Componentes/Display/Tag\",\r\n component: 'voa-tag',\r\n tags: ['autodocs'],\r\n parameters: {\r\n design: {\r\n type: 'figma',\r\n url: 'https://www.figma.com/design/wDStUEuqpl7Tu1oHpiAml6/Voa-Design-System?node-id=1436-769',\r\n },\r\n },\r\n argTypes: {\r\n label: { control: 'text' },\r\n variant: {\r\n control: 'radio',\r\n options: ['plain', 'icons'],\r\n description: 'Controls layout for icons',\r\n },\r\n shape: {\r\n control: 'radio',\r\n options: ['default', 'pill'],\r\n description: 'Corner radius style',\r\n },\r\n size: {\r\n control: 'radio',\r\n options: ['sm', 'md'],\r\n },\r\n iconLeft: { control: 'boolean' },\r\n iconRight: { control: 'boolean' },\r\n },\r\n args: {\r\n label: 'Design System',\r\n variant: 'plain',\r\n shape: 'default',\r\n size: 'md',\r\n iconLeft: false,\r\n iconRight: false,\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconLeft=${args.iconLeft}\r\n .iconRight=${args.iconRight}\r\n >\r\n ${args.variant === 'icons' && args.iconLeft ? html`\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n </svg>\r\n ` : ''}\r\n ${args.variant === 'icons' && args.iconRight ? html`\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n ` : ''}\r\n </voa-tag>\r\n `,\r\n} satisfies Meta;\r\n\r\nexport default meta;\r\n\r\nexport const Default: StoryObj = {};\r\n\r\nexport const PillShape: StoryObj = {\r\n args: {\r\n shape: 'pill',\r\n label: 'Beta Feature',\r\n },\r\n};\r\n\r\nexport const WithStartIcon: StoryObj = {\r\n args: {\r\n variant: 'icons',\r\n iconLeft: true,\r\n label: 'Approved',\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconLeft=${args.iconLeft}\r\n >\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n `,\r\n};\r\n\r\nexport const WithEndIcon: StoryObj = {\r\n args: {\r\n variant: 'icons',\r\n iconRight: true,\r\n label: 'Filter',\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconRight=${args.iconRight}\r\n >\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n </svg>\r\n </voa-tag>\r\n `,\r\n};\r\n\r\nexport const WithBothIcons: StoryObj = {\r\n args: {\r\n variant: 'icons',\r\n iconLeft: true,\r\n iconRight: true,\r\n label: 'Complete',\r\n },\r\n render: (args) => html`\r\n <voa-tag\r\n .label=${args.label}\r\n .variant=${args.variant}\r\n .shape=${args.shape}\r\n .size=${args.size}\r\n .iconLeft=${args.iconLeft}\r\n .iconRight=${args.iconRight}\r\n >\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z\" />\r\n </svg>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n `,\r\n};\r\n\r\nexport const Small: StoryObj = {\r\n args: {\r\n size: 'sm',\r\n label: 'v1.0.1',\r\n shape: 'pill',\r\n },\r\n};\r\n\r\nexport const AllVariants: StoryObj = {\r\n render: () => html`\r\n <div style=\"display: flex; flex-wrap: wrap; gap: 16px; align-items: center;\">\r\n <voa-tag label=\"Default MD\"></voa-tag>\r\n <voa-tag label=\"Default SM\" size=\"sm\"></voa-tag>\r\n <voa-tag label=\"Pill MD\" shape=\"pill\"></voa-tag>\r\n <voa-tag label=\"Pill SM\" shape=\"pill\" size=\"sm\"></voa-tag>\r\n <voa-tag variant=\"icons\" label=\"Icons\" ?iconLeft=${true} ?iconRight=${true}>\r\n <voa-tag variant=\"icons\" label=\"Icons\" .iconLeft=${true} .iconRight=${true}>\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2z\" />\r\n </svg>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n </div>\r\n `,\r\n};\r\n\r\n// ============================================\r\n// Usage - Exemplos de Código\r\n// ============================================\r\n\r\nexport const Usage: StoryObj = {\r\n parameters: {\r\n docs: {\r\n description: {\r\n story: `\r\n## Uso do Componente\r\n\r\nEste componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:\r\n\r\n### HTML (Web Components)\r\n\r\n\\`\\`\\`html\r\n<!-- Tag básica -->\r\n<voa-tag label=\"Design System\"></voa-tag>\r\n\r\n<!-- Tag com formato pill -->\r\n<voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n\r\n<!-- Tag pequena -->\r\n<voa-tag label=\"v1.0.1\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n\r\n<!-- Tag com ícone à esquerda -->\r\n<voa-tag variant=\"icons\" label=\"Approved\" icon-left>\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n</voa-tag>\r\n\r\n<!-- Tag com ícone à direita -->\r\n<voa-tag variant=\"icons\" label=\"Filter\" icon-right>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n </svg>\r\n</voa-tag>\r\n\\`\\`\\`\r\n\r\n### React\r\n\r\n\\`\\`\\`tsx\r\nimport { VoaTag } from '@voa-ds/react';\r\n\r\nfunction MyComponent() {\r\n return (\r\n <>\r\n {/* Tag básica */}\r\n <VoaTag label=\"Design System\" />\r\n\r\n {/* Tag com formato pill */}\r\n <VoaTag label=\"Beta Feature\" shape=\"pill\" />\r\n\r\n {/* Tag pequena */}\r\n <VoaTag label=\"v1.0.1\" size=\"sm\" shape=\"pill\" />\r\n\r\n {/* Tag com ícone à esquerda */}\r\n <VoaTag variant=\"icons\" label=\"Approved\" iconLeft>\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </VoaTag>\r\n\r\n {/* Tag com ícone à direita */}\r\n <VoaTag variant=\"icons\" label=\"Filter\" iconRight>\r\n <svg slot=\"icon-end\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\" />\r\n </svg>\r\n </VoaTag>\r\n </>\r\n );\r\n}\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\r\n\\`\\`\\`typescript\r\nimport { VoaTag } from '@voa-ds/angular';\r\n\r\n@Component({\r\n selector: 'app-example',\r\n template: \\`\r\n <!-- Tag básica -->\r\n <voa-tag label=\"Design System\"></voa-tag>\r\n\r\n <!-- Tag com formato pill -->\r\n <voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n\r\n <!-- Tag pequena -->\r\n <voa-tag label=\"v1.0.1\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n\r\n <!-- Tag com ícone à esquerda -->\r\n <voa-tag variant=\"icons\" label=\"Approved\" [iconLeft]=\"true\">\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </voa-tag>\r\n \\`\r\n})\r\nexport class ExampleComponent {}\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\r\n\\`\\`\\`vue\r\n<template>\r\n <div>\r\n <!-- Tag básica -->\r\n <VoaTag label=\"Design System\" />\r\n\r\n <!-- Tag com formato pill -->\r\n <VoaTag label=\"Beta Feature\" shape=\"pill\" />\r\n\r\n <!-- Tag pequena -->\r\n <VoaTag label=\"v1.0.1\" size=\"sm\" shape=\"pill\" />\r\n\r\n <!-- Tag com ícone à esquerda -->\r\n <VoaTag variant=\"icons\" label=\"Approved\" :icon-left=\"true\">\r\n <svg slot=\"icon-start\" viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"100%\" height=\"100%\">\r\n <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />\r\n </svg>\r\n </VoaTag>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { VoaTag } from '@voa-ds/vue';\r\n</script>\r\n\\`\\`\\`\r\n\r\n## Instalação\r\n\r\n### HTML\r\n\\`\\`\\`bash\r\n# NPM\r\nnpm install @voa-ds/components\r\n\r\n# Importar no HTML\r\n<script type=\"module\" src=\"https://unpkg.com/@voa-ds/components/dist/voa-ds/voa-ds.esm.js\"></script>\r\n\\`\\`\\`\r\n\r\n### React\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/react\r\n\\`\\`\\`\r\n\r\n### Angular\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/angular\r\n\\`\\`\\`\r\n\r\n### Vue\r\n\\`\\`\\`bash\r\nnpm install @voa-ds/components @voa-ds/vue\r\n\\`\\`\\`\r\n `\r\n }\r\n }\r\n },\r\n render: () => html`\r\n <div style=\"padding: 2rem; max-width: 100%;\">\r\n <h2 style=\"margin-top: 0; margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600;\">Uso do Componente</h2>\r\n <p style=\"margin-bottom: 2rem; color: #666;\">Este componente pode ser usado em diferentes frameworks. Abaixo estão exemplos de código para cada um:</p>\r\n <h3 style=\"margin-top: 2rem; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600;\">Exemplo Interativo</h3>\r\n <div style=\"display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 2rem;\">\r\n <voa-tag label=\"Design System\"></voa-tag>\r\n <voa-tag label=\"Beta Feature\" shape=\"pill\"></voa-tag>\r\n <voa-tag label=\"v1.0.1\" size=\"sm\" shape=\"pill\"></voa-tag>\r\n </div>\r\n <div style=\"margin-top: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 4px; border-left: 4px solid #0064cb;\">\r\n <p style=\"margin: 0; font-weight: 600; margin-bottom: 0.5rem;\">📚 Documentação Completa</p>\r\n <p style=\"margin: 0; color: #666; font-size: 0.9rem;\">Para ver exemplos de código completos para HTML, React, Angular e Vue, <a href=\"?path=/docs/components-voatag--docs#usage\" style=\"color: #0064cb; text-decoration: none; font-weight: 600;\">clique aqui para ir à página Docs</a>.</p>\r\n </div>\r\n </div>\r\n `\r\n};\r\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\nexport { Components, JSX } from './components';\n"]}
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* VOA Design System - Consolidated Component Styles
|
|
3
3
|
*
|
|
4
|
-
* Este arquivo consolida todos os estilos visuais dos componentes
|
|
5
|
-
* para uso em aplicações que consomem o voa-ds-core.
|
|
6
4
|
*
|
|
7
5
|
* IMPORTANTE: Importe este arquivo APÓS os tokens:
|
|
8
|
-
* @import 'voa-ds-core/dist/voa/voa.css';
|
|
9
|
-
* @import 'voa-ds-core/components';
|
|
6
|
+
* @import 'voa-ds-core/dist/voa/voa.css';
|
|
7
|
+
* @import 'voa-ds-core/components';
|
|
10
8
|
*
|
|
11
|
-
* Versão: 1.0.
|
|
12
|
-
* Gerado automaticamente em:
|
|
9
|
+
* Versão: 1.0.14
|
|
10
|
+
* Gerado automaticamente em: 2026-01-26T16:40:10.134Z
|
|
13
11
|
*/
|
|
14
12
|
|
|
15
13
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '../components';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "voa-ds-core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.14",
|
|
4
4
|
"main": "dist/index.cjs.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"types": "dist/types/index.d.ts",
|
|
@@ -14,10 +14,18 @@
|
|
|
14
14
|
"require": "./dist/index.cjs.js",
|
|
15
15
|
"types": "./dist/types/index.d.ts"
|
|
16
16
|
},
|
|
17
|
+
"./components": {
|
|
18
|
+
"import": "./dist/custom-elements/index.js",
|
|
19
|
+
"types": "./dist/custom-elements/index.d.ts"
|
|
20
|
+
},
|
|
21
|
+
"./components/*": {
|
|
22
|
+
"import": "./dist/custom-elements/*",
|
|
23
|
+
"types": "./dist/custom-elements/*.d.ts"
|
|
24
|
+
},
|
|
17
25
|
"./styles": "./dist/voa/voa.css",
|
|
18
26
|
"./dist/voa/voa.css": "./dist/voa/voa.css",
|
|
19
27
|
"./tokens": "./dist/tokens/global.css",
|
|
20
|
-
"./components": "./dist/styles/voa-components.css",
|
|
28
|
+
"./components-css": "./dist/styles/voa-components.css",
|
|
21
29
|
"./dist/styles/voa-components.css": "./dist/styles/voa-components.css",
|
|
22
30
|
"./loader": {
|
|
23
31
|
"import": "./dist/esm/loader.js",
|
|
@@ -30,5 +38,8 @@
|
|
|
30
38
|
},
|
|
31
39
|
"dependencies": {
|
|
32
40
|
"@stencil/core": "^4.0.0"
|
|
41
|
+
},
|
|
42
|
+
"publishConfig": {
|
|
43
|
+
"registry": "https://proget-npm.aguiabranca.com.br/npm/npm-private/"
|
|
33
44
|
}
|
|
34
45
|
}
|
|
@@ -1,414 +0,0 @@
|
|
|
1
|
-
import { html } from "lit-html";
|
|
2
|
-
export default {
|
|
3
|
-
title: "Documentação/Importando Estilos CSS",
|
|
4
|
-
};
|
|
5
|
-
const Template = () => html `
|
|
6
|
-
<style>
|
|
7
|
-
.guia-container {
|
|
8
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
9
|
-
line-height: 1.7;
|
|
10
|
-
max-width: 1000px;
|
|
11
|
-
margin: 0 auto;
|
|
12
|
-
padding: 30px;
|
|
13
|
-
color: #2d3748;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.guia-container h1 {
|
|
17
|
-
font-size: 2.5rem;
|
|
18
|
-
margin-bottom: 10px;
|
|
19
|
-
color: #1a202c;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.guia-container h2 {
|
|
23
|
-
font-size: 1.8rem;
|
|
24
|
-
margin-top: 40px;
|
|
25
|
-
margin-bottom: 15px;
|
|
26
|
-
color: #2d3748;
|
|
27
|
-
border-bottom: 3px solid #3182ce;
|
|
28
|
-
padding-bottom: 10px;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.guia-container h3 {
|
|
32
|
-
font-size: 1.4rem;
|
|
33
|
-
margin-top: 30px;
|
|
34
|
-
margin-bottom: 12px;
|
|
35
|
-
color: #4a5568;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.guia-container h4 {
|
|
39
|
-
font-size: 1.1rem;
|
|
40
|
-
margin-top: 20px;
|
|
41
|
-
margin-bottom: 8px;
|
|
42
|
-
color: #718096;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.guia-container pre {
|
|
46
|
-
background-color: #2d3748;
|
|
47
|
-
color: #f7fafc;
|
|
48
|
-
padding: 20px;
|
|
49
|
-
border-radius: 8px;
|
|
50
|
-
overflow-x: auto;
|
|
51
|
-
font-size: 14px;
|
|
52
|
-
line-height: 1.5;
|
|
53
|
-
margin: 15px 0;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.guia-container code {
|
|
57
|
-
font-family: 'Fira Code', 'Courier New', monospace;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.guia-container ul {
|
|
61
|
-
margin: 15px 0;
|
|
62
|
-
padding-left: 25px;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.guia-container li {
|
|
66
|
-
margin: 8px 0;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.alert-box {
|
|
70
|
-
background: #ebf8ff;
|
|
71
|
-
border-left: 4px solid #3182ce;
|
|
72
|
-
padding: 15px 20px;
|
|
73
|
-
margin: 20px 0;
|
|
74
|
-
border-radius: 4px;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.warning-box {
|
|
78
|
-
background: #fffaf0;
|
|
79
|
-
border-left: 4px solid #ed8936;
|
|
80
|
-
padding: 15px 20px;
|
|
81
|
-
margin: 20px 0;
|
|
82
|
-
border-radius: 4px;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.success-box {
|
|
86
|
-
background: #f0fff4;
|
|
87
|
-
border-left: 4px solid #48bb78;
|
|
88
|
-
padding: 15px 20px;
|
|
89
|
-
margin: 20px 0;
|
|
90
|
-
border-radius: 4px;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
.error-box {
|
|
94
|
-
background: #fff5f5;
|
|
95
|
-
border-left: 4px solid #f56565;
|
|
96
|
-
padding: 15px 20px;
|
|
97
|
-
margin: 20px 0;
|
|
98
|
-
border-radius: 4px;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
.variants-table {
|
|
102
|
-
width: 100%;
|
|
103
|
-
border-collapse: collapse;
|
|
104
|
-
margin: 15px 0;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.variants-table th,
|
|
108
|
-
.variants-table td {
|
|
109
|
-
padding: 12px;
|
|
110
|
-
text-align: left;
|
|
111
|
-
border-bottom: 1px solid #e2e8f0;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.variants-table th {
|
|
115
|
-
background: #edf2f7;
|
|
116
|
-
font-weight: 600;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.code-inline {
|
|
120
|
-
background: #edf2f7;
|
|
121
|
-
padding: 2px 6px;
|
|
122
|
-
border-radius: 3px;
|
|
123
|
-
font-family: monospace;
|
|
124
|
-
font-size: 0.9em;
|
|
125
|
-
}
|
|
126
|
-
</style>
|
|
127
|
-
|
|
128
|
-
<div class="guia-container">
|
|
129
|
-
<h1>Como Importar os Estilos CSS</h1>
|
|
130
|
-
<p>
|
|
131
|
-
Se você está usando os componentes mas eles aparecem sem estilização,
|
|
132
|
-
provavelmente o CSS não está sendo carregado. Veja como resolver.
|
|
133
|
-
</p>
|
|
134
|
-
|
|
135
|
-
<div class="error-box">
|
|
136
|
-
<strong>Problema Comum:</strong> Componentes aparecem sem cores, espaçamento ou qualquer estilo visual.
|
|
137
|
-
</div>
|
|
138
|
-
|
|
139
|
-
<h2>Importação Automática (Recomendado)</h2>
|
|
140
|
-
|
|
141
|
-
<div class="success-box">
|
|
142
|
-
Os estilos são importados automaticamente quando você importa qualquer componente dos pacotes wrapper.
|
|
143
|
-
</div>
|
|
144
|
-
|
|
145
|
-
<h3>React</h3>
|
|
146
|
-
<pre><code>import { VoaButton } from 'voa-ds-react';
|
|
147
|
-
|
|
148
|
-
function App() {
|
|
149
|
-
return <VoaButton>Clique aqui</VoaButton>;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
// Os estilos já estão incluídos!</code></pre>
|
|
153
|
-
|
|
154
|
-
<h3>Angular</h3>
|
|
155
|
-
<p>No Angular, você precisa adicionar o CSS no arquivo <span class="code-inline">angular.json</span>:</p>
|
|
156
|
-
<pre><code>{
|
|
157
|
-
"projects": {
|
|
158
|
-
"seu-projeto": {
|
|
159
|
-
"architect": {
|
|
160
|
-
"build": {
|
|
161
|
-
"options": {
|
|
162
|
-
"styles": [
|
|
163
|
-
"node_modules/voa-ds-core/dist/voa/voa.css",
|
|
164
|
-
"src/styles.css"
|
|
165
|
-
]
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
}</code></pre>
|
|
172
|
-
|
|
173
|
-
<h3>Vue</h3>
|
|
174
|
-
<pre><code><template>
|
|
175
|
-
<VoaButton>Clique aqui</VoaButton>
|
|
176
|
-
</template>
|
|
177
|
-
|
|
178
|
-
<script>
|
|
179
|
-
import { VoaButton } from 'voa-ds-vue';
|
|
180
|
-
|
|
181
|
-
export default {
|
|
182
|
-
components: { VoaButton }
|
|
183
|
-
}
|
|
184
|
-
// Os estilos já estão incluídos!
|
|
185
|
-
</script></code></pre>
|
|
186
|
-
|
|
187
|
-
<hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
|
|
188
|
-
|
|
189
|
-
<h2>Importação Manual</h2>
|
|
190
|
-
|
|
191
|
-
<p>Se os estilos não estiverem sendo aplicados automaticamente, você pode importá-los manualmente.</p>
|
|
192
|
-
|
|
193
|
-
<h3>Opção 1: Importar do Pacote Wrapper</h3>
|
|
194
|
-
<pre><code>// React
|
|
195
|
-
import 'voa-ds-react/styles';
|
|
196
|
-
|
|
197
|
-
// Angular
|
|
198
|
-
import 'voa-ds-angular/styles';
|
|
199
|
-
|
|
200
|
-
// Vue
|
|
201
|
-
import 'voa-ds-vue/styles';</code></pre>
|
|
202
|
-
|
|
203
|
-
<h3>Opção 2: Importar Direto do Core</h3>
|
|
204
|
-
<pre><code>import 'voa-ds-core/dist/voa/voa.css';</code></pre>
|
|
205
|
-
|
|
206
|
-
<h3>Opção 3: Adicionar no HTML (Apenas para Testes)</h3>
|
|
207
|
-
<pre><code><link rel="stylesheet" href="node_modules/voa-ds-core/dist/voa/voa.css"></code></pre>
|
|
208
|
-
|
|
209
|
-
<div class="warning-box">
|
|
210
|
-
<strong>Atenção:</strong> A Opção 3 não é recomendada para produção, use apenas para testes rápidos.
|
|
211
|
-
</div>
|
|
212
|
-
|
|
213
|
-
<hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
|
|
214
|
-
|
|
215
|
-
<h2>Configuração de Bundlers</h2>
|
|
216
|
-
|
|
217
|
-
<h3>Vite (React/Vue)</h3>
|
|
218
|
-
<div class="success-box">
|
|
219
|
-
Vite processa CSS automaticamente. Não é necessária configuração adicional.
|
|
220
|
-
</div>
|
|
221
|
-
<pre><code>// vite.config.ts ou vite.config.js
|
|
222
|
-
import { defineConfig } from 'vite';
|
|
223
|
-
import react from '@vitejs/plugin-react'; // ou vue
|
|
224
|
-
|
|
225
|
-
export default defineConfig({
|
|
226
|
-
plugins: [react()]
|
|
227
|
-
// Pronto! Não precisa configurar mais nada
|
|
228
|
-
});</code></pre>
|
|
229
|
-
|
|
230
|
-
<h3>Webpack (React/Angular)</h3>
|
|
231
|
-
<p>Certifique-se de ter o <span class="code-inline">css-loader</span> e <span class="code-inline">style-loader</span> configurados:</p>
|
|
232
|
-
<pre><code>// webpack.config.js
|
|
233
|
-
module.exports = {
|
|
234
|
-
module: {
|
|
235
|
-
rules: [
|
|
236
|
-
{
|
|
237
|
-
test: /\\.css$/,
|
|
238
|
-
use: ['style-loader', 'css-loader']
|
|
239
|
-
}
|
|
240
|
-
]
|
|
241
|
-
}
|
|
242
|
-
};</code></pre>
|
|
243
|
-
|
|
244
|
-
<p>Se não tiver instalado:</p>
|
|
245
|
-
<pre><code>npm install --save-dev css-loader style-loader</code></pre>
|
|
246
|
-
|
|
247
|
-
<h3>Create React App</h3>
|
|
248
|
-
<div class="success-box">
|
|
249
|
-
O CRA já processa CSS automaticamente. Não é necessária configuração adicional.
|
|
250
|
-
</div>
|
|
251
|
-
|
|
252
|
-
<h3>Next.js</h3>
|
|
253
|
-
<p>Importe no arquivo <span class="code-inline">_app.tsx</span> ou <span class="code-inline">_app.jsx</span>:</p>
|
|
254
|
-
<pre><code>// pages/_app.tsx
|
|
255
|
-
import 'voa-ds-react/styles';
|
|
256
|
-
// ou
|
|
257
|
-
import 'voa-ds-core/dist/voa/voa.css';
|
|
258
|
-
|
|
259
|
-
function MyApp({ Component, pageProps }) {
|
|
260
|
-
return <Component {...pageProps} />;
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
export default MyApp;</code></pre>
|
|
264
|
-
|
|
265
|
-
<h3>Angular CLI</h3>
|
|
266
|
-
<p>Adicione os estilos no <span class="code-inline">angular.json</span>:</p>
|
|
267
|
-
<pre><code>{
|
|
268
|
-
"projects": {
|
|
269
|
-
"seu-projeto": {
|
|
270
|
-
"architect": {
|
|
271
|
-
"build": {
|
|
272
|
-
"options": {
|
|
273
|
-
"styles": [
|
|
274
|
-
"node_modules/voa-ds-core/dist/voa/voa.css",
|
|
275
|
-
"src/styles.css"
|
|
276
|
-
]
|
|
277
|
-
}
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
}</code></pre>
|
|
283
|
-
|
|
284
|
-
<h3>Nuxt.js (Vue)</h3>
|
|
285
|
-
<p>Adicione no arquivo <span class="code-inline">nuxt.config.js</span>:</p>
|
|
286
|
-
<pre><code>export default {
|
|
287
|
-
css: [
|
|
288
|
-
'voa-ds-core/dist/voa/voa.css'
|
|
289
|
-
]
|
|
290
|
-
}</code></pre>
|
|
291
|
-
|
|
292
|
-
<p>Para Nuxt 3:</p>
|
|
293
|
-
<pre><code>export default defineNuxtConfig({
|
|
294
|
-
css: [
|
|
295
|
-
'voa-ds-core/dist/voa/voa.css'
|
|
296
|
-
]
|
|
297
|
-
})</code></pre>
|
|
298
|
-
|
|
299
|
-
<hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
|
|
300
|
-
|
|
301
|
-
<h2>Verificando se os Estilos Estão Carregados</h2>
|
|
302
|
-
|
|
303
|
-
<h3>Método 1: DevTools - Network</h3>
|
|
304
|
-
<ol>
|
|
305
|
-
<li>Abra o DevTools do navegador (F12)</li>
|
|
306
|
-
<li>Vá na aba <strong>Network</strong></li>
|
|
307
|
-
<li>Filtre por <strong>CSS</strong></li>
|
|
308
|
-
<li>Recarregue a página</li>
|
|
309
|
-
<li>Verifique se o arquivo <span class="code-inline">voa.css</span> está sendo carregado</li>
|
|
310
|
-
</ol>
|
|
311
|
-
|
|
312
|
-
<h3>Método 2: Inspecionar Elemento</h3>
|
|
313
|
-
<ol>
|
|
314
|
-
<li>Clique com botão direito em um componente</li>
|
|
315
|
-
<li>Selecione <strong>Inspecionar</strong></li>
|
|
316
|
-
<li>Verifique se as classes CSS estão aplicadas</li>
|
|
317
|
-
<li>Veja se os estilos aparecem no painel direito</li>
|
|
318
|
-
</ol>
|
|
319
|
-
|
|
320
|
-
<div class="alert-box">
|
|
321
|
-
Se você vir classes como <span class="code-inline">voa-button</span>, <span class="code-inline">primary</span>, etc.,
|
|
322
|
-
mas sem estilos aplicados, o CSS não está carregando.
|
|
323
|
-
</div>
|
|
324
|
-
|
|
325
|
-
<hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
|
|
326
|
-
|
|
327
|
-
<h2>Problemas Comuns e Soluções</h2>
|
|
328
|
-
|
|
329
|
-
<h3>Componentes aparecem sem estilo</h3>
|
|
330
|
-
<div class="warning-box">
|
|
331
|
-
<strong>Solução:</strong>
|
|
332
|
-
<ul style="margin: 10px 0 0 0; padding-left: 20px;">
|
|
333
|
-
<li>Verifique se o CSS está sendo importado</li>
|
|
334
|
-
<li>Confirme que o bundler está processando arquivos CSS</li>
|
|
335
|
-
<li>Tente importar manualmente: <span class="code-inline">import 'voa-ds-core/dist/voa/voa.css'</span></li>
|
|
336
|
-
</ul>
|
|
337
|
-
</div>
|
|
338
|
-
|
|
339
|
-
<h3>Erro: "Cannot find module 'voa-ds-core/styles'"</h3>
|
|
340
|
-
<div class="warning-box">
|
|
341
|
-
<strong>Solução:</strong> Use o caminho completo em vez disso:
|
|
342
|
-
<pre style="margin-top: 10px;"><code>import 'voa-ds-core/dist/voa/voa.css';</code></pre>
|
|
343
|
-
</div>
|
|
344
|
-
|
|
345
|
-
<h3>Em Angular, os estilos não aparecem</h3>
|
|
346
|
-
<div class="warning-box">
|
|
347
|
-
<strong>Solução:</strong>
|
|
348
|
-
<ul style="margin: 10px 0 0 0; padding-left: 20px;">
|
|
349
|
-
<li>Certifique-se de adicionar o CSS no <span class="code-inline">angular.json</span></li>
|
|
350
|
-
<li>Reinicie o servidor de desenvolvimento após alterar o <span class="code-inline">angular.json</span></li>
|
|
351
|
-
<li>Verifique se o caminho está correto: <span class="code-inline">node_modules/voa-ds-core/dist/voa/voa.css</span></li>
|
|
352
|
-
</ul>
|
|
353
|
-
</div>
|
|
354
|
-
|
|
355
|
-
<h3>Estilos funcionam localmente mas não em produção</h3>
|
|
356
|
-
<div class="warning-box">
|
|
357
|
-
<strong>Solução:</strong>
|
|
358
|
-
<ul style="margin: 10px 0 0 0; padding-left: 20px;">
|
|
359
|
-
<li>Verifique se o CSS está incluído no build de produção</li>
|
|
360
|
-
<li>Confirme que o arquivo CSS está sendo copiado para a pasta de distribuição</li>
|
|
361
|
-
<li>Verifique se o Content Security Policy (CSP) não está bloqueando estilos inline</li>
|
|
362
|
-
</ul>
|
|
363
|
-
</div>
|
|
364
|
-
|
|
365
|
-
<hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
|
|
366
|
-
|
|
367
|
-
<h2>Resumo Rápido</h2>
|
|
368
|
-
|
|
369
|
-
<table class="variants-table">
|
|
370
|
-
<thead>
|
|
371
|
-
<tr>
|
|
372
|
-
<th>Framework</th>
|
|
373
|
-
<th>Configuração Necessária</th>
|
|
374
|
-
</tr>
|
|
375
|
-
</thead>
|
|
376
|
-
<tbody>
|
|
377
|
-
<tr>
|
|
378
|
-
<td><strong>React (Vite/CRA)</strong></td>
|
|
379
|
-
<td>Importação automática funciona</td>
|
|
380
|
-
</tr>
|
|
381
|
-
<tr>
|
|
382
|
-
<td><strong>React (Next.js)</strong></td>
|
|
383
|
-
<td>Importar em <span class="code-inline">_app.tsx</span></td>
|
|
384
|
-
</tr>
|
|
385
|
-
<tr>
|
|
386
|
-
<td><strong>Angular</strong></td>
|
|
387
|
-
<td>Adicionar CSS no <span class="code-inline">angular.json</span></td>
|
|
388
|
-
</tr>
|
|
389
|
-
<tr>
|
|
390
|
-
<td><strong>Vue (Vite)</strong></td>
|
|
391
|
-
<td>Importação automática funciona</td>
|
|
392
|
-
</tr>
|
|
393
|
-
<tr>
|
|
394
|
-
<td><strong>Vue (Nuxt)</strong></td>
|
|
395
|
-
<td>Adicionar no <span class="code-inline">nuxt.config.js</span></td>
|
|
396
|
-
</tr>
|
|
397
|
-
</tbody>
|
|
398
|
-
</table>
|
|
399
|
-
|
|
400
|
-
<div class="success-box">
|
|
401
|
-
<strong>Dica Final:</strong> Na dúvida, sempre pode importar manualmente:
|
|
402
|
-
<pre style="margin-top: 10px;"><code>import 'voa-ds-core/dist/voa/voa.css';</code></pre>
|
|
403
|
-
Isso funciona em todos os frameworks!
|
|
404
|
-
</div>
|
|
405
|
-
|
|
406
|
-
<hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
|
|
407
|
-
|
|
408
|
-
<div style="text-align: center; color: #718096; padding: 20px;">
|
|
409
|
-
<p>Ainda com problemas? Verifique a configuração do seu bundler ou procure o time!</p>
|
|
410
|
-
</div>
|
|
411
|
-
</div>
|
|
412
|
-
`;
|
|
413
|
-
export const Default = Template.bind({});
|
|
414
|
-
//# sourceMappingURL=ImportandoEstilos.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ImportandoEstilos.stories.js","sourceRoot":"","sources":["../../../src/components/GetStarted/ImportandoEstilos.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAEhC,eAAe;IACb,KAAK,EAAE,qCAAqC;CACrC,CAAC;AAEV,MAAM,QAAQ,GAAY,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuZnC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { Meta, StoryFn } from \"@storybook/web-components\";\r\nimport { html } from \"lit-html\";\r\n\r\nexport default {\r\n title: \"Documentação/Importando Estilos CSS\",\r\n} as Meta;\r\n\r\nconst Template: StoryFn = () => html`\r\n <style>\r\n .guia-container {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n line-height: 1.7;\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n padding: 30px;\r\n color: #2d3748;\r\n }\r\n\r\n .guia-container h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n color: #1a202c;\r\n }\r\n\r\n .guia-container h2 {\r\n font-size: 1.8rem;\r\n margin-top: 40px;\r\n margin-bottom: 15px;\r\n color: #2d3748;\r\n border-bottom: 3px solid #3182ce;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .guia-container h3 {\r\n font-size: 1.4rem;\r\n margin-top: 30px;\r\n margin-bottom: 12px;\r\n color: #4a5568;\r\n }\r\n\r\n .guia-container h4 {\r\n font-size: 1.1rem;\r\n margin-top: 20px;\r\n margin-bottom: 8px;\r\n color: #718096;\r\n }\r\n\r\n .guia-container pre {\r\n background-color: #2d3748;\r\n color: #f7fafc;\r\n padding: 20px;\r\n border-radius: 8px;\r\n overflow-x: auto;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n margin: 15px 0;\r\n }\r\n\r\n .guia-container code {\r\n font-family: 'Fira Code', 'Courier New', monospace;\r\n }\r\n\r\n .guia-container ul {\r\n margin: 15px 0;\r\n padding-left: 25px;\r\n }\r\n\r\n .guia-container li {\r\n margin: 8px 0;\r\n }\r\n\r\n .alert-box {\r\n background: #ebf8ff;\r\n border-left: 4px solid #3182ce;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .warning-box {\r\n background: #fffaf0;\r\n border-left: 4px solid #ed8936;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .success-box {\r\n background: #f0fff4;\r\n border-left: 4px solid #48bb78;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .error-box {\r\n background: #fff5f5;\r\n border-left: 4px solid #f56565;\r\n padding: 15px 20px;\r\n margin: 20px 0;\r\n border-radius: 4px;\r\n }\r\n\r\n .variants-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin: 15px 0;\r\n }\r\n\r\n .variants-table th,\r\n .variants-table td {\r\n padding: 12px;\r\n text-align: left;\r\n border-bottom: 1px solid #e2e8f0;\r\n }\r\n\r\n .variants-table th {\r\n background: #edf2f7;\r\n font-weight: 600;\r\n }\r\n\r\n .code-inline {\r\n background: #edf2f7;\r\n padding: 2px 6px;\r\n border-radius: 3px;\r\n font-family: monospace;\r\n font-size: 0.9em;\r\n }\r\n </style>\r\n\r\n <div class=\"guia-container\">\r\n <h1>Como Importar os Estilos CSS</h1>\r\n <p>\r\n Se você está usando os componentes mas eles aparecem sem estilização,\r\n provavelmente o CSS não está sendo carregado. Veja como resolver.\r\n </p>\r\n\r\n <div class=\"error-box\">\r\n <strong>Problema Comum:</strong> Componentes aparecem sem cores, espaçamento ou qualquer estilo visual.\r\n </div>\r\n\r\n <h2>Importação Automática (Recomendado)</h2>\r\n\r\n <div class=\"success-box\">\r\n Os estilos são importados automaticamente quando você importa qualquer componente dos pacotes wrapper.\r\n </div>\r\n\r\n <h3>React</h3>\r\n <pre><code>import { VoaButton } from 'voa-ds-react';\r\n\r\nfunction App() {\r\n return <VoaButton>Clique aqui</VoaButton>;\r\n}\r\n\r\n// Os estilos já estão incluídos!</code></pre>\r\n\r\n <h3>Angular</h3>\r\n <p>No Angular, você precisa adicionar o CSS no arquivo <span class=\"code-inline\">angular.json</span>:</p>\r\n <pre><code>{\r\n \"projects\": {\r\n \"seu-projeto\": {\r\n \"architect\": {\r\n \"build\": {\r\n \"options\": {\r\n \"styles\": [\r\n \"node_modules/voa-ds-core/dist/voa/voa.css\",\r\n \"src/styles.css\"\r\n ]\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}</code></pre>\r\n\r\n <h3>Vue</h3>\r\n <pre><code><template>\r\n <VoaButton>Clique aqui</VoaButton>\r\n</template>\r\n\r\n<script>\r\nimport { VoaButton } from 'voa-ds-vue';\r\n\r\nexport default {\r\n components: { VoaButton }\r\n}\r\n// Os estilos já estão incluídos!\r\n</script></code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Importação Manual</h2>\r\n\r\n <p>Se os estilos não estiverem sendo aplicados automaticamente, você pode importá-los manualmente.</p>\r\n\r\n <h3>Opção 1: Importar do Pacote Wrapper</h3>\r\n <pre><code>// React\r\nimport 'voa-ds-react/styles';\r\n\r\n// Angular\r\nimport 'voa-ds-angular/styles';\r\n\r\n// Vue\r\nimport 'voa-ds-vue/styles';</code></pre>\r\n\r\n <h3>Opção 2: Importar Direto do Core</h3>\r\n <pre><code>import 'voa-ds-core/dist/voa/voa.css';</code></pre>\r\n\r\n <h3>Opção 3: Adicionar no HTML (Apenas para Testes)</h3>\r\n <pre><code><link rel=\"stylesheet\" href=\"node_modules/voa-ds-core/dist/voa/voa.css\"></code></pre>\r\n\r\n <div class=\"warning-box\">\r\n <strong>Atenção:</strong> A Opção 3 não é recomendada para produção, use apenas para testes rápidos.\r\n </div>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Configuração de Bundlers</h2>\r\n\r\n <h3>Vite (React/Vue)</h3>\r\n <div class=\"success-box\">\r\n Vite processa CSS automaticamente. Não é necessária configuração adicional.\r\n </div>\r\n <pre><code>// vite.config.ts ou vite.config.js\r\nimport { defineConfig } from 'vite';\r\nimport react from '@vitejs/plugin-react'; // ou vue\r\n\r\nexport default defineConfig({\r\n plugins: [react()]\r\n // Pronto! Não precisa configurar mais nada\r\n});</code></pre>\r\n\r\n <h3>Webpack (React/Angular)</h3>\r\n <p>Certifique-se de ter o <span class=\"code-inline\">css-loader</span> e <span class=\"code-inline\">style-loader</span> configurados:</p>\r\n <pre><code>// webpack.config.js\r\nmodule.exports = {\r\n module: {\r\n rules: [\r\n {\r\n test: /\\\\.css$/,\r\n use: ['style-loader', 'css-loader']\r\n }\r\n ]\r\n }\r\n};</code></pre>\r\n\r\n <p>Se não tiver instalado:</p>\r\n <pre><code>npm install --save-dev css-loader style-loader</code></pre>\r\n\r\n <h3>Create React App</h3>\r\n <div class=\"success-box\">\r\n O CRA já processa CSS automaticamente. Não é necessária configuração adicional.\r\n </div>\r\n\r\n <h3>Next.js</h3>\r\n <p>Importe no arquivo <span class=\"code-inline\">_app.tsx</span> ou <span class=\"code-inline\">_app.jsx</span>:</p>\r\n <pre><code>// pages/_app.tsx\r\nimport 'voa-ds-react/styles';\r\n// ou\r\nimport 'voa-ds-core/dist/voa/voa.css';\r\n\r\nfunction MyApp({ Component, pageProps }) {\r\n return <Component {...pageProps} />;\r\n}\r\n\r\nexport default MyApp;</code></pre>\r\n\r\n <h3>Angular CLI</h3>\r\n <p>Adicione os estilos no <span class=\"code-inline\">angular.json</span>:</p>\r\n <pre><code>{\r\n \"projects\": {\r\n \"seu-projeto\": {\r\n \"architect\": {\r\n \"build\": {\r\n \"options\": {\r\n \"styles\": [\r\n \"node_modules/voa-ds-core/dist/voa/voa.css\",\r\n \"src/styles.css\"\r\n ]\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}</code></pre>\r\n\r\n <h3>Nuxt.js (Vue)</h3>\r\n <p>Adicione no arquivo <span class=\"code-inline\">nuxt.config.js</span>:</p>\r\n <pre><code>export default {\r\n css: [\r\n 'voa-ds-core/dist/voa/voa.css'\r\n ]\r\n}</code></pre>\r\n\r\n <p>Para Nuxt 3:</p>\r\n <pre><code>export default defineNuxtConfig({\r\n css: [\r\n 'voa-ds-core/dist/voa/voa.css'\r\n ]\r\n})</code></pre>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Verificando se os Estilos Estão Carregados</h2>\r\n\r\n <h3>Método 1: DevTools - Network</h3>\r\n <ol>\r\n <li>Abra o DevTools do navegador (F12)</li>\r\n <li>Vá na aba <strong>Network</strong></li>\r\n <li>Filtre por <strong>CSS</strong></li>\r\n <li>Recarregue a página</li>\r\n <li>Verifique se o arquivo <span class=\"code-inline\">voa.css</span> está sendo carregado</li>\r\n </ol>\r\n\r\n <h3>Método 2: Inspecionar Elemento</h3>\r\n <ol>\r\n <li>Clique com botão direito em um componente</li>\r\n <li>Selecione <strong>Inspecionar</strong></li>\r\n <li>Verifique se as classes CSS estão aplicadas</li>\r\n <li>Veja se os estilos aparecem no painel direito</li>\r\n </ol>\r\n\r\n <div class=\"alert-box\">\r\n Se você vir classes como <span class=\"code-inline\">voa-button</span>, <span class=\"code-inline\">primary</span>, etc.,\r\n mas sem estilos aplicados, o CSS não está carregando.\r\n </div>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Problemas Comuns e Soluções</h2>\r\n\r\n <h3>Componentes aparecem sem estilo</h3>\r\n <div class=\"warning-box\">\r\n <strong>Solução:</strong>\r\n <ul style=\"margin: 10px 0 0 0; padding-left: 20px;\">\r\n <li>Verifique se o CSS está sendo importado</li>\r\n <li>Confirme que o bundler está processando arquivos CSS</li>\r\n <li>Tente importar manualmente: <span class=\"code-inline\">import 'voa-ds-core/dist/voa/voa.css'</span></li>\r\n </ul>\r\n </div>\r\n\r\n <h3>Erro: \"Cannot find module 'voa-ds-core/styles'\"</h3>\r\n <div class=\"warning-box\">\r\n <strong>Solução:</strong> Use o caminho completo em vez disso:\r\n <pre style=\"margin-top: 10px;\"><code>import 'voa-ds-core/dist/voa/voa.css';</code></pre>\r\n </div>\r\n\r\n <h3>Em Angular, os estilos não aparecem</h3>\r\n <div class=\"warning-box\">\r\n <strong>Solução:</strong>\r\n <ul style=\"margin: 10px 0 0 0; padding-left: 20px;\">\r\n <li>Certifique-se de adicionar o CSS no <span class=\"code-inline\">angular.json</span></li>\r\n <li>Reinicie o servidor de desenvolvimento após alterar o <span class=\"code-inline\">angular.json</span></li>\r\n <li>Verifique se o caminho está correto: <span class=\"code-inline\">node_modules/voa-ds-core/dist/voa/voa.css</span></li>\r\n </ul>\r\n </div>\r\n\r\n <h3>Estilos funcionam localmente mas não em produção</h3>\r\n <div class=\"warning-box\">\r\n <strong>Solução:</strong>\r\n <ul style=\"margin: 10px 0 0 0; padding-left: 20px;\">\r\n <li>Verifique se o CSS está incluído no build de produção</li>\r\n <li>Confirme que o arquivo CSS está sendo copiado para a pasta de distribuição</li>\r\n <li>Verifique se o Content Security Policy (CSP) não está bloqueando estilos inline</li>\r\n </ul>\r\n </div>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <h2>Resumo Rápido</h2>\r\n\r\n <table class=\"variants-table\">\r\n <thead>\r\n <tr>\r\n <th>Framework</th>\r\n <th>Configuração Necessária</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td><strong>React (Vite/CRA)</strong></td>\r\n <td>Importação automática funciona</td>\r\n </tr>\r\n <tr>\r\n <td><strong>React (Next.js)</strong></td>\r\n <td>Importar em <span class=\"code-inline\">_app.tsx</span></td>\r\n </tr>\r\n <tr>\r\n <td><strong>Angular</strong></td>\r\n <td>Adicionar CSS no <span class=\"code-inline\">angular.json</span></td>\r\n </tr>\r\n <tr>\r\n <td><strong>Vue (Vite)</strong></td>\r\n <td>Importação automática funciona</td>\r\n </tr>\r\n <tr>\r\n <td><strong>Vue (Nuxt)</strong></td>\r\n <td>Adicionar no <span class=\"code-inline\">nuxt.config.js</span></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n\r\n <div class=\"success-box\">\r\n <strong>Dica Final:</strong> Na dúvida, sempre pode importar manualmente:\r\n <pre style=\"margin-top: 10px;\"><code>import 'voa-ds-core/dist/voa/voa.css';</code></pre>\r\n Isso funciona em todos os frameworks!\r\n </div>\r\n\r\n <hr style=\"margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;\">\r\n\r\n <div style=\"text-align: center; color: #718096; padding: 20px;\">\r\n <p>Ainda com problemas? Verifique a configuração do seu bundler ou procure o time!</p>\r\n </div>\r\n </div>\r\n`;\r\n\r\nexport const Default = Template.bind({});\r\n"]}
|