EI,Beleza? Component Library System

Este projeto é uma biblioteca de componentes para aplicações web desenvolvidas com o framework Svelte.

Instalação

Para instalar as dependências, use o seguinte comando:

npm install

Para iniciar o ambiente de desenvolvimento, execute:

npm run dev

Para construir o projeto para produção, utilize:

npm run build

Documentação

Componente AnnouncementBar

O componente AnnouncementBar é uma barra de anúncios com timer de contagem regressiva que pode ser usada para promoções, ofertas limitadas ou avisos importantes.

Propriedades

| Propriedade | Tipo | Obrigatória | Padrão | Descrição | |-------------|------|-------------|--------|-----------| | text | string | ✅ | 'Este é um texto de exemplo' | Texto principal do anúncio | | animate | boolean | ❌ | false | Se deve animar com efeito pulse | | timerActive | boolean | ❌ | false | Se o timer deve estar ativo | | timerDuration | number | ❌ | 600 | Duração inicial do timer em segundos |

Funcionalidades

🎯 Timer de Contagem Regressiva

• Formato: Exibe o tempo no formato mm:ss (ex: "10:00", "05:30", "00:15")
• Funcionamento: Decrementa 1 segundo a cada 1000ms quando timerActive={true}
• Auto-ocultação: O componente desaparece automaticamente quando o timer chega a "00:00"
• Prevenção de vazamentos: Limpa automaticamente os intervalos para evitar memory leaks

🎨 Estilos e Animações

• Tema escuro/claro: Suporte automático para dark mode
• Posicionamento: Fica fixo no topo da página (sticky top-0)
• Animação pulse: Opcional através da propriedade animate
• Responsivo: Layout adaptável para diferentes tamanhos de tela

Exemplos de Uso

Exemplo Básico

<AnnouncementBar text="Oferta especial disponível!" />

Com Timer de 10 Minutos

<AnnouncementBar 
  text="As ofertas irão terminar em:" 
  timerActive={true} 
  timerDuration={600} 
/>

Com Animação

<AnnouncementBar 
  text="⚡ Flash Sale!" 
  animate={true}
  timerActive={true} 
  timerDuration={300}
/>

Comportamento do Timer

1. Início: O timer começa com o valor definido em timerDuration (em segundos)
2. Contagem: Decrementa 1 segundo a cada 1000ms
3. Formatação: Converte automaticamente para formato mm:ss
4. Parada: Para automaticamente quando chega a 00:00
5. Ocultação: O componente inteiro desaparece quando o timer termina
6. Limpeza: Remove automaticamente os intervalos para evitar problemas de performance

Tabs

O componente de Abas é um sistema completo e acessível para criar seções de conteúdo com abas. Ele é composto por três partes: Tabs, TabTrigger, e TabContent.

Como usar:

A estrutura é projetada para ser declarativa e fácil de ler. Você envolve tudo com o componente Tabs, que gerencia o estado. Dentro dele, você coloca seus TabTrigger (os botões) e TabContent (os painéis de conteúdo).

A conexão entre um gatilho e seu conteúdo é feita através da propriedade value, que deve ser a mesma para ambos.

Exemplo de implementação:

<script>
  import { Tabs, TabTrigger, TabContent } from 'eib-component-library-system';
</script>

<Tabs value={"geral"}>
  <!-- Gatilhos das Abas -->
  <div class="flex gap-2 border-b">
    <TabTrigger value={"geral"}>Geral</TabTrigger>
    <TabTrigger value={"pagamentos"}>Pagamentos</TabTrigger>
    <TabTrigger value={"tecnico"}>Técnico</TabTrigger>
  </div>

  <!-- Conteúdo das Abas -->
  <div class="mt-4">
    <TabContent value={"geral"}>
      <p>Aqui vai o conteúdo da aba Geral.</p>
    </TabContent>
    <TabContent value={"pagamentos"}>
      <p>Aqui vai o conteúdo sobre Pagamentos.</p>
    </TabContent>
    <TabContent value={"tecnico"}>
      <p>Aqui vai o conteúdo técnico.</p>
    </TabContent>
  </div>
</Tabs>

Props

<Tabs>

| Propriedade | Tipo | Obrigatório | Descrição | | :--- | :--- | :--- | :--- | | value | string \| number | Sim | O value da aba que deve ser exibida inicialmente. |

<TabTrigger>

| Propriedade | Tipo | Obrigatório | Descrição | | :--- | :--- | :--- | :--- | | value | string \| number | Sim | Identificador único para o gatilho. Deve corresponder ao value do TabContent associado. |

<TabContent>

| Propriedade | Tipo | Obrigatório | Descrição | | :--- | :--- | :--- | :--- | | value | string \| number | Sim | Identificador único para o conteúdo. Deve corresponder ao value do TabTrigger associado. |