Parent: #5
Depends on: #46, #47
Goal
Deliver a minimal, executable example integration of @singleton-sd/post-kit-editor plus end-to-end component tests that exercise the full editing flow. This proves the epic's acceptance criteria — a consumer can install the package, load existing template sources, edit them visually, preview, validate, and save through consumer-supplied callbacks — without building a demo application.
Scope
Minimal example
- Path:
packages/post-kit-editor/examples/minimal/
- Content: a single small React entry file plus a short README showing the complete integration:
<EmailTemplateEditor
template={template}
availableVariables={variables}
onSave={async (files) => {
// Consumer commits files.templateJson / metadataJson / previewJson
// to its own repository (e.g. via its own server endpoint).
}}
onSendTest={async (files, recipient) => {
// Consumer POSTs to its own trusted server endpoint,
// which uses @singleton-sd/post-kit-client server-side.
}}
/>
- Include a sample template directory (
template.json, metadata.json, preview.json) with synthetic values that the example loads.
- The example is documentation-grade: readable in under a minute, no routing, no application shell, no styling framework, no build pipeline of its own beyond what the package already has.
- Exclude
examples/ from the published files array and from the package build output.
End-to-end component tests
Add src/e2e.spec.tsx (or an equivalently named suite) driving EmailTemplateEditor through the full flow with the same fixtures:
- Load a template source triple and assert the canvas, metadata, variables, and preview panels render populated.
- Edit metadata and preview data; assert changes reach the working state.
- Introduce an undeclared variable; assert the validation summary reports it and Save becomes disabled.
- Fix the issue; assert Save re-enables.
- Click Save; assert
onSave receives serialised file contents that round-trip back to the edited state without information loss.
- Provide
onSendTest; assert the control appears, validates the recipient, and invokes the callback.
- Assert no network request and no filesystem access occurs during the entire flow.
Documentation
- Update
packages/post-kit-editor/README.md with the complete usage example, the props table for the finalised public API, and a "what this package does not do" section (no persistence, no sending, no credentials).
- Link the example directory from the README.
Constraints
- Build an example, not a demo application — no dashboard, no multi-page shell, no mock backend server.
- The example must not include any credential, token, endpoint, or customer-identifying value; sample data must be synthetic and generic.
examples/ must not be published to npm and must not be part of the package's dist output.
- Do not add a browser-based test runner (Playwright, Cypress, jsdom-heavy stacks) — use the
node --test setup established by the scaffold.
- Do not change the public API in this issue except to correct genuine defects found while writing the example; substantive API changes belong in the issue that introduced the surface.
Acceptance criteria
Agent implementation notes
Read the finalised prop surface from #46 (save/send-test) and #47 (validation, loading/error states) before writing the example — the example must use the shipped API verbatim, not an idealised one. Reuse the fixtures added in the canvas/serialization issue rather than creating new ones. Read AGENTS.md "Public-repo safety" before adding any sample values. Branch: feat/<issue-number>-editor-example-and-e2e-tests.
Parent: #5
Depends on: #46, #47
Goal
Deliver a minimal, executable example integration of
@singleton-sd/post-kit-editorplus end-to-end component tests that exercise the full editing flow. This proves the epic's acceptance criteria — a consumer can install the package, load existing template sources, edit them visually, preview, validate, and save through consumer-supplied callbacks — without building a demo application.Scope
Minimal example
packages/post-kit-editor/examples/minimal/template.json,metadata.json,preview.json) with synthetic values that the example loads.examples/from the publishedfilesarray and from the package build output.End-to-end component tests
Add
src/e2e.spec.tsx(or an equivalently named suite) drivingEmailTemplateEditorthrough the full flow with the same fixtures:onSavereceives serialised file contents that round-trip back to the edited state without information loss.onSendTest; assert the control appears, validates the recipient, and invokes the callback.Documentation
packages/post-kit-editor/README.mdwith the complete usage example, the props table for the finalised public API, and a "what this package does not do" section (no persistence, no sending, no credentials).Constraints
examples/must not be published to npm and must not be part of the package'sdistoutput.node --testsetup established by the scaffold.Acceptance criteria
packages/post-kit-editor/examples/minimal/contains a runnable single-file integration plus a synthetic sample template directory and a short README.examples/is excluded from the published packagefilesand from build output.onSavereceives serialised contents that round-trip losslessly to the edited state.onSendTest, validates the recipient, and invokes the callback.pnpm -r --if-present run test,pnpm build,pnpm lint, andpnpm format:checkall pass.Agent implementation notes
Read the finalised prop surface from #46 (save/send-test) and #47 (validation, loading/error states) before writing the example — the example must use the shipped API verbatim, not an idealised one. Reuse the fixtures added in the canvas/serialization issue rather than creating new ones. Read
AGENTS.md"Public-repo safety" before adding any sample values. Branch:feat/<issue-number>-editor-example-and-e2e-tests.