TL Foundry

TL Foundry é uma plataforma de componentes e aceleradores para aplicações corporativas React.

Projetada para sistemas ERP, plataformas de gestão, portais administrativos e dashboards complexos, a TL Foundry combina Design System, componentes avançados, motores de dados e orquestradores de interface em uma arquitetura única baseada nos princípios da Clean Architecture.

Mais do que uma biblioteca de componentes, a TL Foundry fornece uma fundação completa para acelerar o desenvolvimento de aplicações empresariais escaláveis, consistentes e de alta performance. Foco exclusivo no React puro e no Tailwind CSS para o estilo.

Acesse nossa documentação interativa para explorar a anatomia, as propriedades e as variações de todos os componentes da fundação:

👉 Explorar TL Foundry no Storybook

Visão Geral

• Componentes e orquestradores prontos para fluxos de negócio complexos.

• Design Sistemático: Foco exclusivo em React + Tailwind CSS para um design leve e performático.

• Acessibilidade (a11y), modularidade e alto desempenho.

Domínios de Funcionalidades

A biblioteca está organizada em 10 domínios lógicos para facilitar a manutenção e escalabilidade:

1. Fundamentos e Estrutura: Layouts (AppShell), Temas, Cards e elementos de interface atómica.

2. Dados Avançados: Motores de análise (DataTable, TreeTable, TreeView, OrgChart).

3. Engenharia de Formulários: Inputs validados, Máscaras financeiras, selects complexos e DynamicForm baseado em schemas.

4. Agendamento: Gestão de tempo com Calendários, Agendas, Kanban e QueryBuilders.

5. Fluxos e Navegação: Steppers, Timelines, Breadcrumbs e Menus Multinível com deteção de colisão.

6. Feedback e Overlays: Modais, Toasts (com Provider), Tooltips e indicadores de estado (Skeleton, Progress).

7. Utilitários Enterprise: Ferramentas de suporte (Terminal, CopyToClipboard, ConfirmDialog).

8. Aceleradores CRUD: Componentes prontos para operações de interface com botões de ação contextuais.

9. Diretivas de Renderização: Componentes de controle de fluxo (Can para permissões, Case para lógica condicional).

10. Hooks Globais: Utilitários para gestão de estado (Debounce, ClickOutside, LongPress).

O Que Compõe

• A biblioteca foi desenhada como uma arquitetura de camadas, onde a estabilidade é a prioridade:

• Core (Foundations): Tokens de design, tipografia, paleta de cores e sistema de espaçamento baseados em CSS variáveis.

• Components (UI): Blocos atómicos (botões, inputs) e moléculas (modais, tabelas) construídos com Composição de Componentes.

• Hooks & Utils: Lógica de negócio agnóstica de UI (gestão de estados complexos, transformações de dados, máscaras monetárias).

• Orquestradores: Componentes de alto nível (como TreeTable) que gerem estados de orquestração de dados complexos de forma declarativa.

graph TD
  A[Foundations] --> B[UI Components]
  B --> C[Orchestrators]
  A --> D[Hooks & Utils]
  D --> C

Qualidade e Estabilidade

A confiança no código é o pilar da TL Foundry.

• Tipagem Forte: 100% escrita em TypeScript com exportação de tipos rigorosa.

• Zero-Dependency Design: Otimizada para evitar o dependency hell; utilizamos apenas o essencial.

• Acessibilidade (a11y): Foco em conformidade com WCAG, utilizando estados ARIA apropriados.

• Testabilidade: Estrutura preparada para testes unitários com Vitest.

• Modularidade (Tree-shaking): Suporte nativo a ESM para bundles leves.

Instalação e Uso

A TL Foundry assume que o seu projeto hospedeiro já possui o motor do React e o ecossistema de estilos configurado. Para evitar duplicação de pacotes e peso desnecessário no seu bundle final, o seu projeto deve ter:

react (>= 18.0.0)

react-dom (>= 18.0.0)

lucide-react (para a renderização dos ícones modulares)

tailwindcss (para a injeção do sistema de design)

1. Instale as dependências peer (se necessário):

npm install react react-dom lucide-react tailwindcss

2. Instale o pacote:

npm install tl-foundry

3. Uso básico

Importe a partir do barrel file:

import { Button, DataTable } from 'tl-foundry';
import { Mail } from 'lucide-react';

export default function Demo() {
  const data = [{ id: 1, valor: 100 }];
  const columns = [
    { key: 'id', title: 'Código' },
    { key: 'valor', title: 'Valor Nominal' }
  ];

  return (
    <div className="p-6">
      <Button variant="primary" iconLeft={<Mail />}>Enviar Relatório</Button>
      <div className="mt-4">
        <DataTable data={data} columns={columns} isVirtualized resizableColumns />
      </div>
    </div>
  );
}

4. Scripts úteis

npm run storybook    # abre Storybook local
npm run build        # build da lib (dist)
npm run test         # Vitest

Tabela de Tecnologias

| Tecnologia | Função | | ---------- |:-------------:| |React | UI Framework | |TypeScript| Tipagem | |Tailwind | CSS Estilização | |Vite | Build Tool |

Qualidade e Estabilidade

A TL Foundry é mantida sob um rigoroso padrão de qualidade.

• Storybook: Todos os estados de interação, propriedades e exemplos de código estão documentados visualmente no ambiente isolado do Storybook.

• Testes Unitários: Construído em cima do ecossistema Vitest + @testing-library/react. O foco de cobertura (Coverage) baseia-se em caminhos críticos (validação de fallbacks, renderização condicional e integridade a nível de DOM).

(Os testes rodam de forma passiva no ambiente local de desenvolvimento através do comando npm run test e bloqueiam fusões de código na pipeline caso quebrem contratos existentes).

🌟 Casos de Uso (Showcase)

Veja o poder do TL Foundry aplicado em cenários reais de produção. Abaixo estão aplicações completas desenvolvidas utilizando exclusivamente nossa fundação de componentes:

📊 TaskFlow - Dashboard Gerencial

Um painel administrativo focado em acompanhamento de métricas, gestão de equipe e faturamento.

👉 Acessar a Demonstração ao Vivo

🎟️ Checkbet - Conferência de Loterias

Interface B2C responsiva demonstrando o uso de formulários dinâmicos, tabelas de histórico e consumo de APIs externas.

👉 Acessar a Demonstração ao Vivo