Blocos Pré-prontos

Blocos pré-prontos são grupos reutilizáveis de campos que cobrem seções comuns em formulários brasileiros. Permitem ao usuário adicionar um container inteiro de campos relacionados com um único clique no builder.

Blocos disponíveis

Chave	Nome	Campos incluídos
preset_personal	Dados Pessoais	nome, email, telefone, cpf, data_nascimento
preset_address	Endereço	cep, logradouro, numero, complemento, bairro, cidade, estado
preset_emergency	Contato de Emergência	nome, parentesco, telefone
preset_emergency_array	Contatos de Emergência (lista)	field_array com: nome, parentesco, telefone
preset_health	Informações de Saúde	tipo_sanguineo, plano_saude, alergias, medicamentos, obs
preset_responsible	Responsável	responsavel_nome, parentesco, telefone, cpf
preset_participation	Participação	restricao_alimentar, tamanho_camiseta, observacoes
preset_payment	Informações de Pagamento	forma_pagamento, comprovante_pagamento
preset_participation_type	Tipo de Participação	participation_type (locked)

Blocos de steps

Blocos que inserem múltiplos steps de uma vez:

Chave	Nome	Conteúdo
preset_steps_participation_payment	Participação + Pagamento	Step 1: tipo_participacao · Step 2: forma_pagamento

Usando blocos na Paleta

Os blocos pré-prontos aparecem no componente <Palette />. O usuário arrasta-os (ou clica em "Adicionar") para o canvas.

Você também pode adicioná-los programaticamente via useBuilder:

import { useBuilder } from "@schema-forms-data/builder";
import { getPresetById } from "@schema-forms-data/templates";

function MinhaToolbar({ stepId }: { stepId: string }) {
  const { addPresetBlock } = useBuilder();

  return (
    <button
      onClick={() => {
        const preset = getPresetById("preset_address");
        if (preset) addPresetBlock(preset, stepId);
      }}
    >
      + Bloco de Endereço
    </button>
  );
}

Usando um bloco diretamente no schema (sem o builder)

Se quiser incluir os campos de um bloco em um schema escrito manualmente:

import { PRESET_BLOCKS } from "@schema-forms-data/templates";
import { generateId } from "@schema-forms-data/core";
import type { FormContainer } from "@schema-forms-data/core";

function buildPresetContainer(presetId: string): FormContainer {
  const preset = PRESET_BLOCKS.find((b) => b.id === presetId)!;
  return {
    ...preset.containerTemplate,
    id: generateId(),
    campos: preset.containerTemplate.campos.map((f) => ({
      ...f,
      id: generateId(),
    })),
  };
}

// Uso:
const containerEndereco = buildPresetContainer("preset_address");

Listando e filtrando blocos disponíveis

import {
  PRESET_BLOCKS,
  getPresetById,
  getPresetsByCategory,
} from "@schema-forms-data/templates";

// Todos os blocos
console.log(PRESET_BLOCKS);

// Por ID
const personal = getPresetById("preset_personal");

// Por categoria: 'personal' | 'address' | 'health' | 'event' | 'payment' | 'emergency'
const blocosPagamento = getPresetsByCategory("payment");