@meetreeve/forms-kit

React forms kit for Reeve.Forms (DEV-3808) — a SurveyJS-backed renderer, a submit client (partial-on-blur + on-complete), and a minimal DNA theme mapper.

@meetreeve/forms-kit bundles survey-core + survey-react-ui (MIT — SurveyJS Form Library, not the paid Creator/designer product) behind <ReeveForm>. In-app hosts (e.g. Freya's exit survey, DEV-3590) import this directly; the iframe embed app (@meetreeve/forms-embed-app, and the deployed reeve-services frontend/apps/embed /forms/embed page) render it inside a sandboxed iframe for third-party sites.

Install

pnpm add @meetreeve/forms-kit

react/react-dom (^18 || ^19) are peer dependencies.

Quick start

import { ReeveForm } from '@meetreeve/forms-kit';

<ReeveForm
  definition={definition} // GET /api/forms/v1/public/forms/{id}/definition
  apiBase="https://api.meetreeve.com"
  onEvent={(event, meta) => trackLifecycle(event, meta)}
  onComplete={(answers) => console.log('done', answers)}
/>

<ReeveForm> renders the survey content only — popup/flyout/page chrome is a host or loader/iframe-app concern.

Public API contract (mocked pending DEV-3806)

DEV-3806 ("API: host-key CRUD + public definition/submit endpoints") is not live yet. createFormsApiClient (in ./submit-client) is the seam — swap baseUrl for the real deployment once it ships:

• GET /api/forms/v1/public/forms/{id}/definition — live-only, 404 for draft/archived/missing, cacheable.
• POST /api/forms/v1/public/forms/{id}/responses — partial-on-blur (complete: false) + on-complete (complete: true); contract says a constant 201 even when the downstream destination adapter fails.
• POST /api/forms/v1/public/forms/{id}/events — fire-and-forget lifecycle telemetry (shown/started/pageChanged/completed/dismissed) for DEV-3809's targeting engine.

Theme mapper

buildSurveyTheme (in ./theme) maps a minimal FormThemeTokens shape (colors + fonts, no full parity) to the { cssVariables } object survey.applyTheme() accepts. Unsafe values (CSS injection attempts) are dropped with a console.warn, falling back to the SurveyJS default theme — mirrors chat-embed-app/src/theme-apply.ts's guard.

Build

pnpm build      # vite build → dist/{index,theme,submit-client}.{mjs,cjs}
pnpm test       # vitest
pnpm typecheck  # tsc --noEmit