iGRPIGRP 3.0Documentation

Visão geral

O Design System do iGRP (@igrp/igrp-framework-react-design-system) — os componentes React que as aplicações Next.js e o gerador do Studio usam, organizados em três camadas.

O Design System do iGRP é o conjunto de componentes React de todas as aplicações frontend da plataforma. Assenta em Radix UI, Tailwind CSS v4 e ícones Lucide, segue as convenções do shadcn/ui e vive em shared/frontend/nextjs/packages/design-system.

pnpm add @igrp/igrp-framework-react-design-system

É o que o Studio gera

Cada widget que arrastas no Page Builder é gerado como um componente deste pacote — IGRPForm, IGRPInputText, IGRPDataTable, IGRPButton… O código gerado e o código que escreves à mão usam os mesmos componentes, por isso podes editar uma página gerada sem sair do Design System. A configuração de cada widget no Studio está em Widgets.

Secção em construção

Esta secção cobre a instalação e os componentes principais de cada área. O catálogo completo será acrescentado aos poucos.

As três camadas

Por defeitoHorizon

Componentes IGRP* de alto nível com as convenções iGRP: label, texto de ajuda, ícone, estado de carregamento e ligação ao formulário. São os que o gerador usa.

Quando é precisoPrimitives

Blocos de base (Button, Dialog, Table…), alinhados com o shadcn. Para composições próprias, quando um Horizon é demasiado opinativo.

Domínio iGRPCustom

Composições específicas da plataforma: IGRPStatsCardMini, IGRPStatusBanner, IGRPUserAvatar…

O mesmo campo nas duas camadas:

// Primitive — um input estilizado; tudo o resto é contigo
<Input placeholder="Email" />

// Horizon — label, ajuda, ícone, ligação ao formulário e erro de validação
<IGRPInputText
  name="email"
  label="Email"
  helperText="Nunca partilhamos o teu email"
  showIcon
  iconName="Mail"
/>

Regras

Prefere sempre o Horizon
Desce para os Primitives só quando o Horizon não serve; usa Custom para composições iGRP.
Os IGRP* são componentes de cliente
Um ficheiro que importa da raiz do pacote precisa de 'use client'.
Formulários são sempre IGRPForm + Zod
Nunca <form> cru nem react-hook-form diretamente — ver Formulários.
Cores por tokens semânticos
bg-background, text-foreground, bg-primary… nunca cores Tailwind cruas — ver Instalação e tema.
cn() para juntar classes
size-* para larguras e alturas iguais; flex gap-* para espaçamentos.

Componentes por área

Formulários

IGRPForm, inputs, seleção, datas, ficheiros, texto rico, listas repetitivas.

Dados

IGRPDataTable (células, filtros, ações), gráficos, cards e indicadores.

Layout e navegação

Cabeçalho e rodapé de página, menus, tabs, accordion, dropdowns, command.

Feedback e diálogos

Toasts, alertas, banners, diálogos modais e de confirmação, notificações.

Conteúdo e media

Tipografia, ícones, imagens, PDF, vídeo, chat, processos.

Primitives e Custom

Os blocos de base e as composições iGRP, e quando usá-los.

How is this guide?

Última atualização:

On this page

As três camadasRegrasComponentes por área