Primitives e Custom

Além dos componentes IGRP* da camada Horizon, o Design System exporta duas camadas: os Primitives, os blocos de base, e os Custom, composições próprias da plataforma. Todos saem da raiz do pacote:

'use client';

import { Button, Dialog, DialogContent, DialogTitle } from '@igrp/igrp-framework-react-design-system';
import { IGRPStatsCardMini } from '@igrp/igrp-framework-react-design-system';

Os Primitives são exportados com o nome do shadcn, sem prefixo nem sufixo: Button, Dialog, Table, Sheet… Os Horizon e os Custom usam o prefixo IGRP.

Primitive ou HorizonCopy Anchor Link

// Primitive — um botão estilizado; tudo o resto é contigo
<Button variant="outline" size="sm">Guardar</Button>

// Horizon — ícone, estado de carregamento e atributos iGRP
<IGRPButton showIcon iconName="ArrowRight" loading={isSubmitting} loadingText="A guardar...">
  Guardar
</IGRPButton>

Catálogo dos PrimitivesCopy Anchor Link

Cada linha é um ficheiro em src/components/primitives/. A coluna Exports lista o componente raiz; as partes (DialogTitle, TableRow…) seguem a nomenclatura do shadcn.

FormulárioCopy Anchor Link

OverlaysCopy Anchor Link

NavegaçãoCopy Anchor Link

Dados e layoutCopy Anchor Link

FeedbackCopy Anchor Link

OutrosCopy Anchor Link

Diferenças face ao shadcnCopy Anchor Link

Estes Primitives divergem de propósito do shadcn — tem-nas em conta antes de copiar código do site do shadcn.

Componentes CustomCopy Anchor Link

Composições iGRP sobre os Horizon e os Primitives, em src/components/custom/. As cores aceitam primary, secondary, success, warning, info, destructive e indigo; os estilos aceitam solid, soft e outline.

IGRPStatsCardMiniCopy Anchor Link

Cartão de indicador compacto: título, valor e ícone com contorno, numa só cor. Aceita as props de conteúdo do IGRPStatsCard, mas a aparência resume-se a variant.

<IGRPStatsCardMini title="Pedidos abertos" value={128} iconName="Inbox" variant="info" />

IGRPStatsCardTopBorderColoredCopy Anchor Link

Cartão de indicador com uma borda colorida no topo e o ícone à direita.

<IGRPStatsCardTopBorderColored title="Concluídos" value="94%" iconName="CircleCheck" cardVariant="success" />

IGRPStatusBannerCopy Anchor Link

Faixa de estado: um IGRPAlert com um ponto colorido e o texto, mais um IGRPBadge à direita.

<IGRPStatusBanner text="Pedido em análise" color="warning" badgeText="Em curso" badgeColor="warning" />

IGRPUserAvatarCopy Anchor Link

Avatar de utilizador: mostra a imagem e, se não houver ou falhar, o conteúdo de fallback.

<IGRPUserAvatar image={user.avatarUrl} alt={user.name} fallbackContent="AS" />

Acrescentar um componenteCopy Anchor Link

Cada Primitive guarda no comentário inicial a data da última sincronização com o shadcn (por exemplo /* shadcn: 2026-09-15 */; // shadcn: … também é aceite). Para saber se o upstream mudou desde então, a partir de packages/design-system/:

pnpm drift:shadcn          # node scripts/check-shadcn-drift.mjs
pnpm drift:shadcn:update   # novo baseline, depois de rever as mudanças

Se o upstream mudou algo de que divergimos de propósito, regista a diferença em COMPONENTS.md antes de atualizar o baseline.

Explorar no StorybookCopy Anchor Link

O monorepo tem um Storybook com os componentes, no pacote packages/design-system-storybook:

cd shared/frontend/nextjs/packages/design-system-storybook
pnpm storybook   # http://localhost:6006