BaryoDev / BaryoDev/barakoBrew
Adopt react-hook-form and zod as the form and validation layer
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 2
- Avg merge
- 4h 34m
- Merged PRs (30d)
- 60
Description
**Target release: 0.3.0**
The console has **no form library and no validation library**. Every form is hand-rolled `useState`, and nothing validates an API response before it is rendered.
## Why this one first
It is the foundation the redesign sits on, and it touches three open issues at once:
- **#5** — the extractable content-type form renderer is, structurally, a form library problem. Extracting it on top of hand-rolled `useState` means extracting the hand-rolling too.
- **#12** — inline field editing in the content-type builder needs per-field validation and dirty state.
- **#1** — `RUN_STATUSES` has no check against the server enum since the split. A `zod` schema at the API boundary is exactly that check.
That last one generalises into the more valuable point. The History panel bug — reading `versions` from a response that had returned `items` since the envelope change — rendered an empty list rather than failing, and every mocked spec stayed green because the mock returned `versions` too. **A `zod` parse at the boundary turns that class of bug from a silent empty state into a loud failure**, in the mocked suite as well as against the real API. It is a second line of defence behind the smoke pack (#31), and unlike the smoke pack it runs on every test.
## The picks
| Package | Licence | Health |
|---|---|---|
| `react-hook-form` 7.87.0 | MIT | ~1,098 releases, last publish 2026-08-30 |
| `zod` 4.5.4 | MIT | ~1,005 releases, last publish 2026-08-29 |
| `@hookform/resolvers` | MIT | bridges the two |
Both pass the dependency policy in #39 on all three rules: permissive licence, no vendor and therefore no runtime gate or upsell path, and active maintenance. Neither has a commercial entity behind it that could introduce a paid tier.
React 19 peer ranges confirmed on both (`^16.8.0 || ^17 || ^18 || ^19`).
## Scope
1. Add the three packages.
2. Define `zod` schemas for the API envelopes the console reads, and parse at the boundary in `src/lib/api.ts` — starting with the response shapes that have already caused bugs (entry versions, run statuses).
3. Convert **one** form as the pattern, ideally the content-type field editor, since #5 will extract it.
4. Write the pattern into CONTRIBUTING (#28) so the next form follows it rather than reinventing `useState`.
Do not convert every form in one pass. The E2E pack is the safety net and it should stay green at each step.
## Two cautions
- **React Compiler is on** (`reactCompiler: true`). It is stricter about ref mutation and render purity than most libraries were written against. Introduce these one at a time behind the E2E pack, not as a batch.
- **A `zod` parse that throws where the old code silently coped is a behaviour change.** Decide deliberately whether a malformed response should surface an error state or be logged and tolerated, and make it consistent. Silently tolerating it recreates the bug this is meant to catch.
## Licence note for #5
Both are MIT, which keeps the extracted renderer's MIT option open. Taking an MPL or GPL dependency into the renderer would foreclose it — see the licensing comment on #5.
Follows the policy in #39. Serves #5, #12 and #1.
Contributor guide
Assessment
This issue has not been assessed yet.