Skip to content

feat(reativa): implement every remaining example — full parity with Xote#17

Merged
brnrdog merged 2 commits into
mainfrom
claude/reativa-components-batch-one-u2yady
Jul 25, 2026
Merged

feat(reativa): implement every remaining example — full parity with Xote#17
brnrdog merged 2 commits into
mainfrom
claude/reativa-components-batch-one-u2yady

Conversation

@brnrdog

@brnrdog brnrdog commented Jul 25, 2026

Copy link
Copy Markdown
Owner

Summary

Brings @prescriptive/reativa (OCaml + Melange) from 37 example implementations to full parity with @prescriptive/xote — every spec that has a Xote demo in website/src/Examples.res now has a matching Reativa preview, so the site can show the two implementations side by side for the whole catalogue.

Delivered in three reviewable commits (52 new example implementations):

Batch Count Specs
One 20 elements label legend logo typography; components breadcrumb button-group card empty-state footer input-group list pagination stat toolbar; blocks cta-section faq feature-grid hero pricing-table testimonial
Two 20 overlays/menus alert-dialog dropdown-menu context-menu popover hover-card sheet drawer toast; data/pickers table data-table chart carousel combobox command calendar date-picker; nav navbar menubar navigation-menu sidebar
Three 12 components form resizable search comment; pages dashboard landing-page pricing settings sign-in; flows authentication checkout onboarding

reativa now covers 26 elements, 42 components, 13 blocks, 5 pages, and 3 flows.

Approach

  • Each example mirrors its Xote twin exactly, composed over Reativa.View and reusing the existing components (Button, Badge, Avatar, Icon, IconButton, Separator, Input, Link, Backdrop, Switch, Field), styled against @prescriptive/tokens so a re-theme cascades through both implementations identically.
  • Added to Registry.mlx as inline *_example functions wired into example_for / example_ids (the ES surface the website consumes) — matching how the existing reativa examples and the Xote Examples.res modules are structured. No website code change needed; the Reativa tab is driven by example_ids from the bundle.
  • A small el helper wraps View.element for pure-structure demos so uncommon tags (table, h1, blockquote, nav, …) never depend on which JSX tag helpers the mlx layer exposes, plus a contains_ci substring helper for the filterable demos.

Reactive primitives used

View.show for the open/closed overlays (dismissed via Backdrop), View.for_ for the live-filtered lists (combobox, command, search, data-table), class_reactive for selected-day / active-dot state (calendar, date-picker, carousel), reactive style for the carousel track and resizable panels, View.On.on for the contextmenu / mouseenter / mouseleave / focus events, and View.On.submit + prevent_default for form.

Verification

  • API used was checked directly against the reativa source at the pinned build commit (c94697df), not from memory — confirmed View.for_, View.On.on, the polymorphic 'a value (for the reactive checked binding), and the tag/attr/event surface.
  • example_for match arms and example_ids were cross-checked to match exactly (89 = 89, both directions), catch-all last.
  • The only Xote demo ids left uncovered are account and password, which are not specs (no .md under specs/) and so never surface a Reativa tab — intentionally omitted.

⚠️ Not compiled locally: the melange build needs an opam/melange/mlx toolchain that isn't available in this environment, so I relied on the source-verified API plus review. CI compiles the reativa bundle, so this PR will exercise the real build. The checked-in website/src/reativa.bundle.js refreshes when CI rebuilds it.

Each batch adds a Changeset (@prescriptive/reativa minor).

🤖 Generated with Claude Code

https://claude.ai/code/session_012DYiHqv5HaSufQ5JH7Mokh


Generated by Claude Code

claude added 2 commits July 25, 2026 13:42
Bring the reativa (OCaml + Melange) previews further toward parity with the Xote
examples — the overlay, data, picker, and navigation components — mirroring
website/src/Examples.res.

- overlays & menus: alert-dialog, dropdown-menu, context-menu, popover,
  hover-card, sheet, drawer, toast
- data & pickers: table, data-table, chart, carousel, combobox, command,
  calendar, date-picker
- navigation: navbar, menubar, navigation-menu, sidebar

Uses View.show for the open/closed overlays (dismissed via the existing
Backdrop), View.for_ for the live-filtered lists (combobox, command,
data-table), class_reactive for selected-day / active-dot state, and a reactive
style for the carousel track. context-menu and hover-card use View.On.on for the
contextmenu / mouseenter / mouseleave events. Adds a small contains_ci substring
helper for the filterable demos. Registered in Registry's example_for /
example_ids. README coverage table updated to 26 elements, 38 components, 13
blocks.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012DYiHqv5HaSufQ5JH7Mokh
Complete the reativa (OCaml + Melange) example set: every spec that has a Xote
demo now has a matching Reativa implementation, mirroring
website/src/Examples.res.

- components: form, resizable, search, comment
- pages: dashboard, landing-page, pricing, settings, sign-in
- flows: authentication, checkout, onboarding

search filters live with View.for_; resizable binds a range input to a reactive
style on both panels; form submits via View.On.submit + prevent_default and
reveals a success message with View.show; sign-in wires a native checkbox
through a reactive checked binding; the authentication and onboarding flows step
through their states from a single step signal. Registered in Registry's
example_for / example_ids. reativa now covers 26 elements, 42 components, 13
blocks, 5 pages, and 3 flows — the same set Xote implements. Only the two
non-spec Xote sub-demos (account, password) are intentionally omitted.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012DYiHqv5HaSufQ5JH7Mokh
@brnrdog
brnrdog force-pushed the claude/reativa-components-batch-one-u2yady branch from af6b031 to ad6ef0b Compare July 25, 2026 13:43
@brnrdog
brnrdog merged commit 19d5252 into main Jul 25, 2026
1 check passed
@brnrdog
brnrdog deleted the claude/reativa-components-batch-one-u2yady branch July 25, 2026 13:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants