Integration

Prev Next

Integration

Recommended integration model: caller owns preset orchestration; UI shells stay presentational.

Recommended Pattern

Use this split in module implementations:

  1. Caller module owns useSaveAsPreset()
  2. Import UX uses a file input trigger controlled by the caller module
  3. Caller invokes importPreset({ inputRef, expectedResource }) from the CTA
  4. Caller validates imported payload against module schema before form.reset()
  5. Export dialog (if enabled) remains presentational and callback-driven

This keeps transport parsing reusable and keeps domain hydration ownership in the module.

Example Flow (Import -> Parse -> Hydrate)

ExampleWorkflowModule can wire import flow directly from its CTA.

Download/export capability still exists in useSaveAsPreset and can be enabled separately when needed.

Image

Integration Example (Caller-owned Hook)

const { importPreset } = useSaveAsPreset();
const importInputRef = useRef<HTMLInputElement>(null);

async function handlePresetImportClick() {
  const imported = await importPreset({
    inputRef: importInputRef,
    expectedResource: 'example.workflow',
  });

  if (!imported) return;

  // Transport parse succeeded. Domain schema validation remains caller-owned.
  const parsed = ExampleWorkflowSchema.safeParse(imported.preset.payload);
  if (!parsed.success) return;

  form.reset(parsed.data);
}

return <input ref={importInputRef} type="file" className="hidden" accept="application/json,.json" />;

Optional Export Dialog Contract

If a module enables download/export UX, dialog components should only manage local UI input state and emit callbacks.

type SaveAsPresetDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  config: {
    resource?: string;
    workflowName?: string;
    fileName?: string;
  };
  onDownload: (presetName: string) => void | Promise<void>;
};

The dialog should not import or call useSaveAsPreset() directly; caller modules remain the orchestration boundary.

Import Boundary Checklist

When consuming imported presets:

  1. Parse transport via importPreset(...)
  2. Validate resource compatibility via expectedResource
  3. Validate preset.payload via module schema
  4. Call form.reset(...) only when schema parse succeeds

This keeps transport concerns and domain concerns cleanly separated.

Error Handling Guidance

Always surface deterministic messages returned by useSaveAsPreset() (internally mapped via getPresetUserMessage).

For module schema failures (after transport success), emit module-specific validation guidance instead of transport errors.