Teddy Design System

Uma biblioteca de componentes Angular otimizada para melhor performance e tree-shaking.

📦 Tamanho Otimizado

A biblioteca foi otimizada para reduzir significativamente o tamanho do bundle:

• Antes: ~119MB
• Depois: ~30MB (75% de redução)

🚀 Instalação

npm install @cloud-teddy/teddy-ds

📖 Uso

Importação Completa (Não Recomendado)

import { TeddyDsModule } from '@cloud-teddy/teddy-ds';

@NgModule({
  imports: [TeddyDsModule]
})
export class AppModule { }

Importação Seletiva (Recomendado)

Para melhor tree-shaking, importe apenas os componentes que você precisa:

import { ButtonComponent } from '@cloud-teddy/teddy-ds';
import { InputComponent } from '@cloud-teddy/teddy-ds';
import { CardComponent } from '@cloud-teddy/teddy-ds';
import { AlertComponent } from '@cloud-teddy/teddy-ds';
import { BadgeComponent } from '@cloud-teddy/teddy-ds';
import { SpinnerComponent } from '@cloud-teddy/teddy-ds';
import { IconComponent } from '@cloud-teddy/teddy-ds';
import { DivisorComponent } from '@cloud-teddy/teddy-ds';

@NgModule({
  imports: [
    ButtonComponent,
    InputComponent,
    CardComponent,
    AlertComponent,
    BadgeComponent,
    SpinnerComponent,
    IconComponent,
    DivisorComponent
  ]
})
export class AppModule { }

Estilos

// Importe os estilos globais
import '@cloud-teddy/teddy-ds/styles';

🎯 Componentes Disponíveis

Componentes Essenciais (Exportados por Padrão)

• ButtonComponent - Botões
• InputComponent - Campos de entrada
• CardComponent - Cards
• AlertComponent - Alertas
• BadgeComponent - Badges
• SpinnerComponent - Spinners
• IconComponent - Ícones
• DivisorComponent - Divisores

Outros Componentes

Para usar outros componentes, você pode importá-los diretamente dos arquivos individuais:

import { CheckboxComponent } from '@cloud-teddy/teddy-ds/lib/components/checkbox/checkbox.component';
import { SelectComponent } from '@cloud-teddy/teddy-ds/lib/components/select/select.component';
// ... outros componentes

🔧 Otimizações Implementadas

1. Exportação Seletiva: Apenas componentes essenciais são exportados por padrão
2. Tree-Shaking: Configuração otimizada para permitir tree-shaking
3. Side Effects: Configurado como false para melhor tree-shaking
4. Build Otimizado: Configurações de produção para reduzir tamanho
5. Assets Otimizados: Apenas assets essenciais incluídos

📊 Comparação de Performance

| Métrica | Antes | Depois | Melhoria | |---------|-------|--------|----------| | Tamanho Total | 119MB | 30MB | 75% | | Tempo de Build | 38s | 14s | 63% | | Bundle ESM | 59MB | 15MB | 75% | | Bundle FESM | 58MB | 14MB | 76% |

🛠️ Desenvolvimento

# Build da biblioteca
npm run build:lib

# Build de desenvolvimento
npm run build:lib:dev

# Storybook
npm run storybook

# Testes
npm run test

📝 Notas

• Todos os componentes são standalone para melhor tree-shaking
• Use importações seletivas para minimizar o tamanho do bundle
• Os estilos são incluídos separadamente para permitir customização
• A biblioteca é compatível com Angular 16+