voa-ds-core 1.0.3

package/dist/collection/components/GetStarted/ComoUsar.stories.js

@@ -0,0 +1,486 @@
+import { html } from "lit-html";
+export default {
+    title: "Documentação/Como Usar",
+};
+const Template = () => html `
+  <style>
+    .guia-container {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      line-height: 1.7;
+      max-width: 1000px;
+      margin: 0 auto;
+      padding: 30px;
+      color: #2d3748;
+    }
+
+    .guia-container h1 {
+      font-size: 2.5rem;
+      margin-bottom: 10px;
+      color: #1a202c;
+    }
+
+    .guia-container h2 {
+      font-size: 1.8rem;
+      margin-top: 40px;
+      margin-bottom: 15px;
+      color: #2d3748;
+      border-bottom: 3px solid #3182ce;
+      padding-bottom: 10px;
+    }
+
+    .guia-container h3 {
+      font-size: 1.4rem;
+      margin-top: 30px;
+      margin-bottom: 12px;
+      color: #4a5568;
+    }
+
+    .guia-container h4 {
+      font-size: 1.1rem;
+      margin-top: 20px;
+      margin-bottom: 8px;
+      color: #718096;
+    }
+
+    .guia-container pre {
+      background-color: #2d3748;
+      color: #f7fafc;
+      padding: 20px;
+      border-radius: 8px;
+      overflow-x: auto;
+      font-size: 14px;
+      line-height: 1.5;
+      margin: 15px 0;
+    }
+
+    .guia-container code {
+      font-family: 'Fira Code', 'Courier New', monospace;
+    }
+
+    .guia-container ul {
+      margin: 15px 0;
+      padding-left: 25px;
+    }
+
+    .guia-container li {
+      margin: 8px 0;
+    }
+
+    .alert-box {
+      background: #ebf8ff;
+      border-left: 4px solid #3182ce;
+      padding: 15px 20px;
+      margin: 20px 0;
+      border-radius: 4px;
+    }
+
+    .warning-box {
+      background: #fffaf0;
+      border-left: 4px solid #ed8936;
+      padding: 15px 20px;
+      margin: 20px 0;
+      border-radius: 4px;
+    }
+
+    .success-box {
+      background: #f0fff4;
+      border-left: 4px solid #48bb78;
+      padding: 15px 20px;
+      margin: 20px 0;
+      border-radius: 4px;
+    }
+
+    .variants-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 15px 0;
+    }
+
+    .variants-table th,
+    .variants-table td {
+      padding: 12px;
+      text-align: left;
+      border-bottom: 1px solid #e2e8f0;
+    }
+
+    .variants-table th {
+      background: #edf2f7;
+      font-weight: 600;
+    }
+  </style>
+
+  <div class="guia-container">
+    <h1>Como Usar o VOA Design System</h1>
+    <p>Guia rápido e direto pra você sair usando os componentes.</p>
+
+    <div class="alert-box">
+      <strong>Atenção:</strong> Precisa estar conectado na VPN da empresa pra instalar os pacotes!
+    </div>
+
+    <h2>Instalação</h2>
+
+    <h3>Configuração do Repositório Privado (.npmrc)</h3>
+
+    <div class="warning-box">
+      <strong>Importante:</strong> Antes de instalar os pacotes, você precisa configurar o arquivo <code>.npmrc</code> na raiz do seu projeto.
+    </div>
+
+    <p>
+      Este arquivo faz um <strong>override</strong> da configuração padrão do npm e instrui o gerenciador de pacotes
+      a usar o repositório privado da GAB para baixar todos os pacotes do escopo <code>@voa-ds</code>.
+    </p>
+
+    <h4>Crie o arquivo .npmrc na raiz do seu projeto:</h4>
+    <pre><code>@voa-ds:registry=https://proget-npm.aguiabranca.com.br/npm/npm-private/
+strict-ssl=false</code></pre>
+
+    <p><strong>O que esse arquivo faz:</strong></p>
+    <ul>
+      <li>Configura o registro npm privado para todos os pacotes <code>@voa-ds</code></li>
+      <li>Permite a instalação mesmo sem certificado SSL válido (necessário para repositório interno)</li>
+      <li>Não afeta a instalação de outros pacotes npm públicos</li>
+    </ul>
+
+    <div class="success-box">
+      <strong>Dica:</strong> Se você clonou este repositório, o arquivo <code>.npmrc</code> já deve estar configurado.
+      Caso contrário, crie-o manualmente com o conteúdo acima.
+    </div>
+
+    <h3>Instalando os Pacotes</h3>
+
+    <h4>React</h4>
+    <pre><code>npm install @voa-ds/react</code></pre>
+
+    <h4>Angular</h4>
+    <pre><code>npm install @voa-ds/angular</code></pre>
+
+    <h4>Vue</h4>
+    <pre><code>npm install @voa-ds/vue</code></pre>
+
+    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
+
+    <h2>Exemplos Práticos</h2>
+
+    <h3>React</h3>
+
+    <h4>Botão</h4>
+    <pre><code>import { VoaButton } from '@voa-ds/react';
+
+function MeuComponente() {
+  return (
+    &lt;VoaButton
+      variant="primary"
+      size="md"
+      onClick={() => alert('Clicou!')}
+    &gt;
+      Salvar
+    &lt;/VoaButton&gt;
+  );
+}</code></pre>
+
+    <table class="variants-table">
+      <thead>
+        <tr>
+          <th>Variantes</th>
+          <th>Quando usar</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>primary</code></td>
+          <td>Ação principal da tela</td>
+        </tr>
+        <tr>
+          <td><code>secondary</code></td>
+          <td>Ação secundária</td>
+        </tr>
+        <tr>
+          <td><code>tonal</code></td>
+          <td>Botão com fundo suave</td>
+        </tr>
+        <tr>
+          <td><code>ghost</code></td>
+          <td>Botão transparente</td>
+        </tr>
+        <tr>
+          <td><code>link</code></td>
+          <td>Parece um link</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h4>Input</h4>
+    <pre><code>import { VoaInput } from '@voa-ds/react';
+import { useState } from 'react';
+
+function Formulario() {
+  const [nome, setNome] = useState('');
+
+  return (
+    &lt;VoaInput
+      label="Nome completo"
+      placeholder="Digite seu nome"
+      value={nome}
+      onDsChange={(e) => setNome(e.detail)}
+      required
+    /&gt;
+  );
+}</code></pre>
+
+    <div class="warning-box">
+      <strong>Importante:</strong> O valor vem em <code>event.detail</code>, não em <code>event.target.value</code>
+    </div>
+
+    <h4>Input com Erro</h4>
+    <pre><code>&lt;VoaInput
+  label="Email"
+  type="email"
+  error
+  helperText="Email inválido"
+/&gt;</code></pre>
+
+    <h4>Select</h4>
+    <pre><code>import { VoaSelect, VoaOption } from '@voa-ds/react';
+
+function Dropdown() {
+  return (
+    &lt;VoaSelect label="Escolha uma opção"&gt;
+      &lt;VoaOption value="1"&gt;Opção 1&lt;/VoaOption&gt;
+      &lt;VoaOption value="2"&gt;Opção 2&lt;/VoaOption&gt;
+      &lt;VoaOption value="3"&gt;Opção 3&lt;/VoaOption&gt;
+    &lt;/VoaSelect&gt;
+  );
+}</code></pre>
+
+    <h4>Checkbox</h4>
+    <pre><code>import { VoaCheckbox } from '@voa-ds/react';
+import { useState } from 'react';
+
+function MinhaLista() {
+  const [aceito, setAceito] = useState(false);
+
+  return (
+    &lt;VoaCheckbox
+      checked={aceito}
+      onDsChange={(e) => setAceito(e.detail)}
+    &gt;
+      Aceito os termos de uso
+    &lt;/VoaCheckbox&gt;
+  );
+}</code></pre>
+
+    <h4>Alert</h4>
+    <pre><code>import { VoaAlert } from '@voa-ds/react';
+
+function Notificacao() {
+  return (
+    &lt;VoaAlert variant="success"&gt;
+      Dados salvos com sucesso!
+    &lt;/VoaAlert&gt;
+  );
+}</code></pre>
+
+    <h3>Angular</h3>
+
+    <h4>Setup no Módulo</h4>
+    <pre><code>// app.module.ts
+import { VoaButton, VoaInput } from '@voa-ds/angular';
+
+@NgModule({
+  declarations: [VoaButton, VoaInput],
+  // ...
+})</code></pre>
+
+    <h4>Usando no Template</h4>
+    <pre><code>&lt;voa-button
+  variant="primary"
+  size="md"
+  (dsClick)="salvar()"&gt;
+  Salvar
+&lt;/voa-button&gt;
+
+&lt;voa-input
+  label="Nome completo"
+  placeholder="Digite seu nome"
+  [value]="nome"
+  (dsChange)="nome = $event.detail"
+  required&gt;
+&lt;/voa-input&gt;</code></pre>
+
+    <h4>No Componente</h4>
+    <pre><code>export class MeuComponente {
+  nome: string = '';
+
+  salvar() {
+    console.log('Nome:', this.nome);
+  }
+}</code></pre>
+
+    <h3>Vue</h3>
+
+    <h4>Botão</h4>
+    <pre><code>&lt;template&gt;
+  &lt;VoaButton
+    variant="primary"
+    size="md"
+    @dsClick="salvar"&gt;
+    Salvar
+  &lt;/VoaButton&gt;
+&lt;/template&gt;
+
+&lt;script&gt;
+import { VoaButton } from '@voa-ds/vue';
+
+export default {
+  components: { VoaButton },
+  methods: {
+    salvar() {
+      console.log('Salvando...');
+    }
+  }
+}
+&lt;/script&gt;</code></pre>
+
+    <h4>Input</h4>
+    <pre><code>&lt;template&gt;
+  &lt;VoaInput
+    label="Nome completo"
+    placeholder="Digite seu nome"
+    :value="nome"
+    @dsChange="nome = $event.detail"
+    required
+  /&gt;
+&lt;/template&gt;
+
+&lt;script&gt;
+import { VoaInput } from '@voa-ds/vue';
+
+export default {
+  components: { VoaInput },
+  data() {
+    return {
+      nome: ''
+    }
+  }
+}
+&lt;/script&gt;</code></pre>
+
+    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
+
+    <h2>Eventos</h2>
+
+    <div class="success-box">
+      Todos os eventos dos componentes usam o prefixo <code>ds</code>
+    </div>
+
+    <table class="variants-table">
+      <thead>
+        <tr>
+          <th>Evento</th>
+          <th>Quando dispara</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td><code>dsClick</code></td>
+          <td>Quando clica no componente</td>
+        </tr>
+        <tr>
+          <td><code>dsChange</code></td>
+          <td>Quando o valor muda (após perder foco)</td>
+        </tr>
+        <tr>
+          <td><code>dsInput</code></td>
+          <td>Enquanto está digitando</td>
+        </tr>
+        <tr>
+          <td><code>dsFocus</code></td>
+          <td>Quando ganha o foco</td>
+        </tr>
+        <tr>
+          <td><code>dsBlur</code></td>
+          <td>Quando perde o foco</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h4>Como pegar o valor dos eventos:</h4>
+    <pre><code>// React
+&lt;VoaInput onDsChange={(e) => console.log(e.detail)} /&gt;
+
+// Angular
+&lt;voa-input (dsChange)="handleChange($event.detail)"&gt;&lt;/voa-input&gt;
+
+// Vue
+&lt;VoaInput @dsChange="valor = $event.detail" /&gt;</code></pre>
+
+    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
+
+    <h2>Componentes Disponíveis</h2>
+
+    <ul>
+      <li><strong>VoaButton</strong> - Botões de vários tipos</li>
+      <li><strong>VoaInput</strong> - Campos de texto</li>
+      <li><strong>VoaTextArea</strong> - Área de texto grande</li>
+      <li><strong>VoaCheckbox</strong> - Caixas de seleção</li>
+      <li><strong>VoaRadio</strong> - Botões de rádio</li>
+      <li><strong>VoaSelect / VoaOption</strong> - Dropdown</li>
+      <li><strong>VoaSwitch</strong> - Interruptor on/off</li>
+      <li><strong>VoaCard</strong> - Cards</li>
+      <li><strong>VoaAlert</strong> - Alertas</li>
+      <li><strong>VoaBadge</strong> - Badges/etiquetas</li>
+      <li><strong>VoaTag</strong> - Tags</li>
+      <li><strong>VoaAvatar</strong> - Avatar de usuário</li>
+      <li><strong>VoaPagination</strong> - Paginação</li>
+      <li><strong>VoaBreadcrumbs</strong> - Navegação</li>
+      <li><strong>VoaAccordion</strong> - Acordeão</li>
+      <li><strong>VoaTab / VoaTabItem</strong> - Abas</li>
+      <li><strong>VoaTooltip</strong> - Dicas</li>
+    </ul>
+
+    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
+
+    <h2>Problemas Comuns</h2>
+
+    <h4>Não consigo instalar</h4>
+    <ul>
+      <li>Verifica se tá na VPN</li>
+      <li>Verifica se tem o <code>.npmrc</code> configurado</li>
+    </ul>
+
+    <h4>Componente não aparece</h4>
+    <ul>
+      <li>Verifica se importou certo</li>
+      <li>Em Angular, verifica se declarou no module</li>
+      <li>Olha o console do navegador</li>
+    </ul>
+
+    <h4>Eventos não funcionam</h4>
+    <ul>
+      <li>Lembra do prefixo <code>ds</code>: <code>dsClick</code>, <code>dsChange</code></li>
+      <li>O valor vem em <code>event.detail</code></li>
+    </ul>
+
+    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
+
+    <h2>Dicas</h2>
+
+    <div class="success-box">
+      <ul style="margin: 0; padding-left: 20px;">
+        <li>Sempre use VPN pra instalar</li>
+        <li>Tamanhos padrão: <code>sm</code>, <code>md</code>, <code>lg</code></li>
+        <li>Estados visuais: <code>error</code>, <code>valid</code>, <code>warning</code>, <code>disabled</code></li>
+        <li>Veja o Storybook pra ver todos os componentes em ação</li>
+        <li>Cada componente tem um README com mais detalhes</li>
+      </ul>
+    </div>
+
+    <hr style="margin: 50px 0; border: none; border-top: 1px solid #e2e8f0;">
+
+    <div style="text-align: center; color: #718096; padding: 20px;">
+      <p>Precisa de ajuda? Veja o Storybook ou procura o time!</p>
+    </div>
+  </div>
+`;
+export const Default = Template.bind({});
+//# sourceMappingURL=ComoUsar.stories.js.map

package/dist/collection/components/GetStarted/ComoUsar.stories.js.map

@@ -0,0 +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    &lt;VoaButton\r\n      variant=\"primary\"\r\n      size=\"md\"\r\n      onClick={() => alert('Clicou!')}\r\n    &gt;\r\n      Salvar\r\n    &lt;/VoaButton&gt;\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    &lt;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    /&gt;\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>&lt;VoaInput\r\n  label=\"Email\"\r\n  type=\"email\"\r\n  error\r\n  helperText=\"Email inválido\"\r\n/&gt;</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    &lt;VoaSelect label=\"Escolha uma opção\"&gt;\r\n      &lt;VoaOption value=\"1\"&gt;Opção 1&lt;/VoaOption&gt;\r\n      &lt;VoaOption value=\"2\"&gt;Opção 2&lt;/VoaOption&gt;\r\n      &lt;VoaOption value=\"3\"&gt;Opção 3&lt;/VoaOption&gt;\r\n    &lt;/VoaSelect&gt;\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    &lt;VoaCheckbox\r\n      checked={aceito}\r\n      onDsChange={(e) => setAceito(e.detail)}\r\n    &gt;\r\n      Aceito os termos de uso\r\n    &lt;/VoaCheckbox&gt;\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    &lt;VoaAlert variant=\"success\"&gt;\r\n      Dados salvos com sucesso!\r\n    &lt;/VoaAlert&gt;\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>&lt;voa-button\r\n  variant=\"primary\"\r\n  size=\"md\"\r\n  (dsClick)=\"salvar()\"&gt;\r\n  Salvar\r\n&lt;/voa-button&gt;\r\n\r\n&lt;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&gt;\r\n&lt;/voa-input&gt;</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>&lt;template&gt;\r\n  &lt;VoaButton\r\n    variant=\"primary\"\r\n    size=\"md\"\r\n    @dsClick=\"salvar\"&gt;\r\n    Salvar\r\n  &lt;/VoaButton&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\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&lt;/script&gt;</code></pre>\r\n\r\n    <h4>Input</h4>\r\n    <pre><code>&lt;template&gt;\r\n  &lt;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  /&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\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&lt;/script&gt;</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&lt;VoaInput onDsChange={(e) => console.log(e.detail)} /&gt;\r\n\r\n// Angular\r\n&lt;voa-input (dsChange)=\"handleChange($event.detail)\"&gt;&lt;/voa-input&gt;\r\n\r\n// Vue\r\n&lt;VoaInput @dsChange=\"valor = $event.detail\" /&gt;</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"]}