npm - voa-ds-core - Versions diffs - 1.0.8 → 1.0.10 - Mend

voa-ds-core 1.0.8 → 1.0.10

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.

Files changed (49) hide show

package/dist/collection/components/GetStarted/ImportandoEstilos.stories.js CHANGED Viewed

@@ -214,18 +214,20 @@ import 'voa-ds-vue/styles';</code></pre>
     <h2>Configuração de Bundlers</h2>
-    <h3>Vite</h3>
+    <h3>Vite (React/Vue)</h3>
     <div class="success-box">
       Vite processa CSS automaticamente. Não é necessária configuração adicional.
     </div>
-    <pre><code>// vite.config.js - nenhuma configuração especial necessária
+    <pre><code>// vite.config.ts ou vite.config.js
 import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react'; // ou vue
 export default defineConfig({
-  // suas configurações
+  plugins: [react()]
+  // Pronto! Não precisa configurar mais nada
 });</code></pre>
-    <h3>Webpack</h3>
+    <h3>Webpack (React/Angular)</h3>
     <p>Certifique-se de ter o <span class="code-inline">css-loader</span> e <span class="code-inline">style-loader</span> configurados:</p>
     <pre><code>// webpack.config.js
 module.exports = {
@@ -261,11 +263,23 @@ function MyApp({ Component, pageProps }) {
 export default MyApp;</code></pre>
     <h3>Angular CLI</h3>
-    <p>Já mostrado acima, mas repetindo: adicione no <span class="code-inline">angular.json</span>:</p>
-    <pre><code>"styles": [
-  "node_modules/voa-ds-core/dist/voa/voa.css",
-  "src/styles.css"
-]</code></pre>
+    <p>Adicione os estilos no <span class="code-inline">angular.json</span>:</p>
+    <pre><code>{
+  "projects": {
+    "seu-projeto": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": [
+              "node_modules/voa-ds-core/dist/voa/voa.css",
+              "src/styles.css"
+            ]
+          }
+        }
+      }
+    }
+  }
+}</code></pre>
     <h3>Nuxt.js (Vue)</h3>
     <p>Adicione no arquivo <span class="code-inline">nuxt.config.js</span>:</p>
@@ -275,6 +289,13 @@ export default MyApp;</code></pre>
   ]
 }</code></pre>
+    <p>Para Nuxt 3:</p>
+    <pre><code>export default defineNuxtConfig({
+  css: [
+    'voa-ds-core/dist/voa/voa.css'
+  ]
+})</code></pre>
     <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
     <h2>Verificando se os Estilos Estão Carregados</h2>
@@ -349,7 +370,7 @@ export default MyApp;</code></pre>
       <thead>
         <tr>
           <th>Framework</th>
-          <th>Solução Recomendada</th>
+          <th>Configuração Necessária</th>
         </tr>
       </thead>
       <tbody>
@@ -363,7 +384,7 @@ export default MyApp;</code></pre>
         </tr>
         <tr>
           <td><strong>Angular</strong></td>
-          <td>Adicionar no <span class="code-inline">angular.json</span></td>
+          <td>Adicionar CSS no <span class="code-inline">angular.json</span></td>
         </tr>
         <tr>
           <td><strong>Vue (Vite)</strong></td>

package/dist/collection/components/GetStarted/ImportandoEstilos.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkYnC,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</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.js - nenhuma configuração especial necessária\r\nimport { defineConfig } from 'vite';\r\n\r\nexport default defineConfig({\r\n // suas configurações\r\n});</code></pre>\r\n\r\n <h3>Webpack</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>Já mostrado acima, mas repetindo: adicione no <span class=\"code-inline\">angular.json</span>:</p>\r\n <pre><code>\"styles\": [\r\n \"node_modules/voa-ds-core/dist/voa/voa.css\",\r\n \"src/styles.css\"\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 <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>Solução Recomendada</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 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"]}
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"]}