iGRPIGRP 3.0Documentation

Custom Components

Escrever componentes, funções e tipos próprios em código e registá-los em igrp.config.ts para os usar no Page Builder do iGRP Studio.

Quando a Paleta de Widgets não tem o que precisas, escreve-o em código no projeto e regista-o em src/app/igrp.config.ts. O Studio lê esse registo e passa a oferecer:

Componentes
Na paleta, na categoria Componentes Personalizados, com as props editáveis na sidebar
Funções
No Código Personalizado e nas interações (Action Type → Function)
Tipos
Para tipar estados, funções e argumentos

Onde ficam os ficheiros

Tudo o que registas vive em src/app/(myapp)/. O exemplo deste guia:

igrp.config.ts
tag-estado.tsx
pedidos.ts
pedido.ts

1. Escrever o componente

Um componente é uma função React exportada, de preferência construída com o Design System — assim herda o tema e o dark mode. As props declaradas na assinatura passam a ser editáveis no Studio.

src/app/(myapp)/components/tag-estado.tsx
"use client";

import { IGRPBadge } from "@igrp/igrp-framework-react-design-system";

import type { EstadoPedido } from "../types/pedido";

const CORES = {
  pendente: "warning",
  aprovado: "success",
  rejeitado: "destructive",
} as const;

type TagEstadoProps = {
  estado: EstadoPedido;
  mostrarPonto?: boolean;
};

export function TagEstado({ estado, mostrarPonto = true }: TagEstadoProps) {
  return (
    <IGRPBadge variant="soft" color={CORES[estado]} dot={mostrarPonto}>
      {estado}
    </IGRPBadge>
  );
}

Partir de um componente existente

Podes copiar um componente do shadcn/ui ou gerá-lo com IA: os primitives do shadcn já existem no Design System (Button, Dialog…), por isso basta trocar os import para @igrp/igrp-framework-react-design-system. Ver Primitives e Custom.

2. Funções e tipos (opcional)

Funções e tipos registam-se da mesma forma — úteis para a lógica que os componentes e as páginas partilham:

src/app/(myapp)/types/pedido.ts
export type EstadoPedido = "pendente" | "aprovado" | "rejeitado";

export interface Pedido {
  id: number;
  requerente: string;
  tipo: string;
  data: string;
  estado: EstadoPedido;
}
src/app/(myapp)/functions/pedidos.ts
import type { Pedido } from "../types/pedido";

export async function listarPedidos(estado?: string): Promise<Pedido[]> {
  const query = estado ? `?estado=${estado}` : "";
  const response = await fetch(`/api/pedidos${query}`);
  if (!response.ok) throw new Error("Não foi possível carregar os pedidos");
  return response.json();
}

3. Registar em igrp.config.ts

src/app/igrp.config.ts
export default {
  types: ["types/pedido"],
  actions: [],
  functions: ["functions/pedidos"],
  components: ["components/tag-estado"],
};
Caminhos relativos a src/app/(myapp)
Sem ./, sem o prefixo src/app/(myapp) e sem extensão — components/tag-estado, não ./components/tag-estado.tsx.
Componentes em .tsx, o resto em .ts
O Studio procura .tsx para componentes e .ts para tipos, funções e actions.
Ficheiros fora de (myapp) são ignorados
Só é lido o que está dentro de src/app/(myapp).
actions
Server actions do projeto, registadas da mesma forma.

O comentário do ficheiro gerado está desatualizado

O igrp.config.ts do template ainda fala em src/app/[locale]/(myapp). A pasta certa é src/app/(myapp).

4. Usar no Studio

Reabre a página no Page Builder. O componente aparece no fim da paleta, em Componentes Personalizados, com o nome tirado da função (TagEstado → Tag Estado).

Paleta de Widgets com a categoria Componentes Personalizados e o widget Tag Estado

Arrasta-o para a página como qualquer widget. No canvas é mostrado como um bloco com o nome — o resultado vê-se na aplicação a correr.

Tag Estado largado na zona de ações da Page Header, mostrado como bloco TagEstado

Na sidebar de edição, as props da assinatura aparecem em Custom Properties (estado → Estado, mostrarPonto → Mostrar Ponto). Como qualquer prop, podem ser ligadas a um estado pelo ⋮.

Custom Properties do Tag Estado com Estado igual a pendente e Mostrar Ponto

Os tipos das props ainda não são usados

O Studio mostra todas as props como texto, mesmo as booleanas ou com valores fixos (mostrarPonto, estado). Escreve o valor tal como no código (true, pendente).

A função registada fica disponível no Código Personalizado, em Functions, ao lado das funções criadas no Studio:

Painel Código Personalizado com a função registada listarPedidos realçada
How is this guide?

Última atualização:

On this page

Onde ficam os ficheiros1. Escrever o componente2. Funções e tipos (opcional)3. Registar em igrp.config.ts4. Usar no Studio