@tabl.io/ui

v0.8.0

Published

a day ago

Design system compartilhado e Storybook para os apps Tabl

Downloads

1,213

0High
0Medium
0Low

carlos.shirasawa

🎨 Tabl UI - Design System Components

Sistema de componentes React para as aplicações Tabl (PDV, KDS, Manager).

Storybook

Acesse a documentação visual dos componentes: README.stories.md

📦 Estrutura dos Arquivos

src/
├── components/
│   └── app/
│       ├── layout/          # Componentes de layout
│       │   ├── app-header.tsx
│       │   ├── cart-indicator.tsx
│       │   ├── quantity-stepper.tsx
│       │   └── index.ts
│       ├── table/           # Componentes de mesa
│       │   ├── table-grid.tsx
│       │   ├── table-card.tsx
│       │   ├── table-badge.tsx
│       │   └── index.ts
│       ├── category/        # Componentes de categoria
│       │   ├── category-tabs.tsx
│       │   ├── category-pill.tsx
│       │   └── index.ts
│       ├── product/         # Componentes de produto
│       │   ├── product-grid.tsx
│       │   ├── product-card.tsx
│       │   ├── product-price-display.tsx
│       │   ├── product-detail-modal.tsx
│       │   ├── ingredient-list.tsx
│       │   ├── ingredient-checkbox.tsx
│       │   ├── extra-checkbox.tsx
│       │   └── index.ts
│       ├── cart/            # Componentes de carrinho
│       │   ├── cart-sheet.tsx
│       │   ├── cart-item.tsx
│       │   ├── cart-summary.tsx
│       │   ├── cart-empty-state.tsx
│       │   └── index.ts
│       ├── order/           # Componentes de pedido
│       │   ├── order-confirmation-modal.tsx
│       │   ├── order-loading-state.tsx
│       │   └── index.ts
│       └── index.ts
├── lib/
│   └── format.ts            # Helpers de formatação
└── foundation/
    └── tokens.css           # Sistema de tokens modulares

🎯 Instalação dos Componentes Shadcn

Execute no terminal do pacote @tabl.io/ui:

# Componentes primitivos necessários
npx shadcn@latest add card
npx shadcn@latest add badge
npx shadcn@latest add dialog
npx shadcn@latest add sheet
npx shadcn@latest add scroll-area
npx shadcn@latest add separator
npx shadcn@latest add skeleton
npx shadcn@latest add sonner
npx shadcn@latest add checkbox
npx shadcn@latest add label

🔧 Configuração

1. Substituir `src/foundation/tokens.css`

Copie o novo arquivo tokens.css para src/foundation/tokens.css.

Este arquivo adiciona suporte a temas por módulo usando o atributo data-module:

data-module="core" → Verde (Emerald)
data-module="pdv" → Laranja (Orange)
data-module="kds" → Azul (Blue)
data-module="manager" → Roxo (Violet)
data-module="analytics" → Âmbar (Amber)

2. Adicionar `src/lib/format.ts`

Copie o arquivo format.ts para src/lib/format.ts.

Contém helpers de formatação:

formatCurrency(value) → "R$ 1.234,56"
formatTime(seconds) → "01:30"
formatDuration(seconds) → "1h 30min"
formatPhone(phone) → "(11) 98765-4321"
truncate(text, maxLength) → "Lorem ipsu..."
pluralize(count, singular, plural?) → "2 itens"

3. Copiar componentes para `src/components/app/`

Copie toda a estrutura de pastas components/app/ mantendo a hierarquia.

4. Atualizar `src/lib/utils.ts`

Adicione o export do format.ts:

export * from "./format"

5. Atualizar `src/components/index.ts`

Já deve estar correto:

export * from "./ui"
export * from "./app"

🚀 Uso no PDV

Configuração do Módulo

No HTML root ou componente principal do PDV, adicione o atributo data-module:

// pdv/src/App.tsx ou index.html
<html data-module="pdv">
  {/* ... */}
</html>

Ou via React:

useEffect(() => {
  document.documentElement.setAttribute('data-module', 'pdv')
}, [])

Exemplo: Página de Mesas

import { AppHeader, TableGrid, TableCard } from "@tabl.io/ui"

function TablesPage() {
  return (
    <div className="h-screen flex flex-col">
      <AppHeader title="Mesas" />
      
      <TableGrid>
        {tables.map(table => (
          <TableCard
            key={table.id}
            number={table.number}
            status={table.status}
            onClick={() => handleSelectTable(table)}
          />
        ))}
      </TableGrid>
    </div>
  )
}

Exemplo: Página de Produtos

import {
  AppHeader,
  CartIndicator,
  CategoryTabs,
  ProductGrid,
  ProductCard,
  ProductDetailModal,
  CartSheet,
} from "@tabl.io/ui"

function ProductsPage() {
  const [selectedProduct, setSelectedProduct] = useState(null)
  const [isCartOpen, setIsCartOpen] = useState(false)
  
  return (
    <div className="h-screen flex flex-col">
      <AppHeader
        title={`Mesa ${tableNumber}`}
        showBack
        onBack={() => navigate('/tables')}
        actions={
          <CartIndicator
            count={cartItems.length}
            total={cartTotal}
            onClick={() => setIsCartOpen(true)}
          />
        }
      />
      
      <CategoryTabs
        categories={categories}
        activeCategory={activeCategory}
        onSelectCategory={setActiveCategory}
      />
      
      <ProductGrid>
        {products.map(product => (
          <ProductCard
            key={product.id}
            product={product}
            onClick={() => setSelectedProduct(product)}
          />
        ))}
      </ProductGrid>
      
      <ProductDetailModal
        open={!!selectedProduct}
        onOpenChange={(open) => !open && setSelectedProduct(null)}
        product={selectedProduct}
        removableIngredients={removableIngredients}
        availableExtras={availableExtras}
        onAddToCart={handleAddToCart}
      />
      
      <CartSheet
        open={isCartOpen}
        onOpenChange={setIsCartOpen}
        items={cartItems}
        onQuantityChange={handleUpdateQuantity}
        onRemoveItem={handleRemoveItem}
        onConfirmOrder={handleConfirmOrder}
        loading={isSubmitting}
      />
    </div>
  )
}

📚 Componentes Disponíveis

Layout

AppHeader - Cabeçalho padrão com título, voltar e actions
CartIndicator - Badge flutuante de carrinho
QuantityStepper - Controle de quantidade

Table

TableGrid - Grid responsivo de mesas
TableCard - Card individual de mesa
TableBadge - Badge de status

Product

ProductGrid - Grid responsivo de produtos
ProductCard - Card de produto com imagem e preço
ProductPriceDisplay - Exibe cálculo de preço
ProductDetailModal - Modal de customização
IngredientList - Wrapper de lista de ingredientes
IngredientCheckbox - Checkbox de ingrediente removível
ExtraCheckbox - Checkbox de extra pago

Cart

CartSheet - Sheet lateral completo
CartItem - Item individual no carrinho
CartSummary - Resumo e botão de confirmar
CartEmptyState - Estado vazio

Order

OrderConfirmationModal - Modal de sucesso
OrderLoadingState - Estado de loading

🎨 Sistema de Cores por Módulo

| Módulo | Cor | Uso | |--------|-----|-----| | Core | Emerald (#10B981) | Base, configurações, sync | | PDV | Orange (#F97316) | Ponto de venda, vendas | | KDS | Blue (#3B82F6) | Cozinha, produção | | Manager | Violet (#8B5CF6) | Backoffice, cadastros | | Analytics | Amber (#F59E0B) | IA, insights (futuro) |

🔄 Próximos Passos

✅ Instalar componentes Shadcn
✅ Copiar arquivos para o pacote
✅ Configurar data-module="pdv" no PDV
🚧 Implementar páginas do PDV
🚧 Criar hooks customizados (useCart, useOrder, etc)
🚧 Adicionar testes
🚧 Documentar no Storybook

📝 Notas Importantes

Todos os componentes suportam dark mode automático via prefers-color-scheme
Use data-module para trocar entre temas de módulos
Componentes são totalmente tipados com TypeScript
Helpers de formatação estão em @tabl.io/ui/lib/format
Siga o padrão de imports: import { Component } from "@tabl.io/ui"

🐛 Troubleshooting

Componentes não encontrados?

Verifique se os exports estão corretos nos index.ts
Confira o package.json do @tabl.io/ui

Cores não mudando?

Verifique se data-module está no elemento raiz
Confirme que tokens.css foi substituído

Helpers não disponíveis?

Certifique-se que format.ts está em src/lib/
Verifique export em src/lib/utils.ts

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme