BuilderProvider

O provider de contexto que alimenta o editor visual de schemas com drag-and-drop.

Import

import {
  BuilderProvider,
  Canvas,
  ConfigPanel,
  Palette,
} from "@schema-forms-data/builder";

Configuração mínima

<BuilderProvider onSchemaChange={(schema) => console.log(schema)}>
  <div style={{ display: "flex", height: "100vh" }}>
    <Palette />
    <Canvas />
    <ConfigPanel />
  </div>
</BuilderProvider>

Props

Prop	Tipo	Padrão	Descrição
initialConfigs	Record<string, ItemConfig>	{}	Pré-carrega o builder a partir de um FormSchema salvo. Use formSchemaToBuilder(schema).configs.
initialContainers	ContainersTree	{ root: { children: [] } }	Estrutura de árvore de um schema salvo. Use formSchemaToBuilder(schema).dndState.containers.
initialTemplateId	string	"moderno"	Pré-seleciona um template visual no preview do builder.
schemaId	string	undefined	ID do schema sendo editado. Necessário para uploadTermsPdf funcionar.
uploadTermsPdf	(file: File) => Promise<string>	—	Faz upload de um PDF para um campo Terms. Retorne o uploadId.
onSchemaChange	(schema: FormSchema) => void	—	Disparado a cada mudança com o schema atual.

Carregar schema existente

import {
  BuilderProvider,
  formSchemaToBuilder,
} from "@schema-forms-data/builder";

const schemaExistente: FormSchema = await buscarSchema("meu-schema-id");
const { dndState, configs, templateId } = formSchemaToBuilder(schemaExistente);

<BuilderProvider
  initialConfigs={configs}
  initialContainers={dndState.containers}
  initialTemplateId={templateId ?? "moderno"}
  schemaId="meu-schema-id"
  uploadTermsPdf={async (file) => minhaApi.uploadPdf(file)}
  onSchemaChange={(schema) => minhaApi.salvarSchema(schema)}
>
  {/* ... */}
</BuilderProvider>;

Exportar schema programaticamente

import { useBuilder, builderToFormSchema } from "@schema-forms-data/builder";

function BotaoSalvar() {
  const { dndState, configs, previewTemplateId } = useBuilder();

  const handleSalvar = () => {
    const schema = builderToFormSchema(dndState, configs, {
      id: "meu-schema",
      nome: "Meu Formulário",
      status: "ativo",
      template: previewTemplateId,
    });
    minhaApi.salvar(schema);
  };

  return <button onClick={handleSalvar}>Salvar</button>;
}

Sub-componentes

Componente	Descrição
<Palette />	Sidebar esquerda com tipos de campo e blocos pré-prontos para arrastar
<Canvas />	Área principal drag-and-drop — exibe steps, containers e campos
<ConfigPanel />	Sidebar direita — exibe opções de configuração do item selecionado
<TemplateSelector />	Menu para trocar o template do preview

Hook useBuilder

Acessa o estado completo do builder em qualquer componente dentro do BuilderProvider:

const {
  selectedId, // ID do campo/container/step selecionado
  configs, // Record<string, ItemConfig> — todas as configs
  dndState, // DndState — estrutura de árvore
  schemaId, // string | undefined
  addItem, // adiciona novo campo/container/step
  removeItem, // remove item e todos os descendentes
  updateConfig, // atualiza config de um item
  undo, // desfaz última alteração
  redo, // refaz
  canUndo, // boolean
  canRedo, // boolean
} = useBuilder();