atomic-design-poc/plop-templates/form-machine.hbs

import { Result, assertNever } from '@shared/kernel/fp';

/** What the user is typing (raw, possibly invalid). */
export interface Draft {
  veld: string;
}

/** After parsing — replace `string` with branded value objects (see value-object generator). */
export interface Valid {
  veld: string;
}

export type Errors = Partial<Record<keyof Draft, string>>;

/**
 * The {{name}} form as one tagged union — the house form idiom (Model/Msg/pure reduce, same
 * shape as the wizards). `draft`/`errors` exist only while Editing; Submitting/Submitted/Failed
 * carry the parsed `Valid`. Illegal states (submitting an invalid draft, a success screen with
 * errors) are unrepresentable. Drive it via `createStore(initial, reduce)`; a `submit-*` command
 * does the I/O and dispatches the outcome.
 */
export type {{pascalCase name}}State =
  | { tag: 'Editing'; draft: Draft; errors: Errors }
  | { tag: 'Submitting'; data: Valid }
  | { tag: 'Submitted'; data: Valid; referentie: string }
  | { tag: 'Failed'; data: Valid; error: string };

export const initial: {{pascalCase name}}State = {
  tag: 'Editing',
  draft: { veld: '' },
  errors: {},
};

/** Parse via value objects; on success a Valid, else per-field errors. */
function validate(draft: Draft): Result<Errors, Valid> {
  const veld = draft.veld.trim();
  if (!veld) {
    return { ok: false, error: { veld: $localize`:@@{{camelCase name}}.validation.veld:Vul dit veld in.` } };
  }
  return { ok: true, value: { veld } };
}

export type {{pascalCase name}}Msg =
  | { tag: 'SetField'; key: keyof Draft; value: string }
  | { tag: 'Submit' }
  | { tag: 'Retry' }
  | { tag: 'SubmitConfirmed'; referentie: string }
  | { tag: 'SubmitFailed'; error: string }
  | { tag: 'Reset' }
  | { tag: 'Seed'; state: {{pascalCase name}}State };

export function reduce(s: {{pascalCase name}}State, m: {{pascalCase name}}Msg): {{pascalCase name}}State {
  switch (m.tag) {
    case 'SetField':
      return s.tag === 'Editing' ? { ...s, draft: { ...s.draft, [m.key]: m.value } } : s;
    case 'Submit': {
      if (s.tag !== 'Editing') return s;
      const r = validate(s.draft);
      return r.ok ? { tag: 'Submitting', data: r.value } : { ...s, errors: r.error };
    }
    case 'Retry':
      return s.tag === 'Failed' ? { tag: 'Submitting', data: s.data } : s;
    case 'SubmitConfirmed':
      return s.tag === 'Submitting' ? { tag: 'Submitted', data: s.data, referentie: m.referentie } : s;
    case 'SubmitFailed':
      return s.tag === 'Submitting' ? { tag: 'Failed', data: s.data, error: m.error } : s;
    case 'Reset':
      return initial;
    case 'Seed':
      return m.state;
    default:
      return assertNever(m);
  }
}