feat(reativa): implement every remaining example — full parity with Xote#17
Merged
Merged
Conversation
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
force-pushed
the
claude/reativa-components-batch-one-u2yady
branch
from
July 25, 2026 13:43
af6b031 to
ad6ef0b
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Brings
@prescriptive/reativa(OCaml + Melange) from 37 example implementations to full parity with@prescriptive/xote— every spec that has a Xote demo inwebsite/src/Examples.resnow 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):
labellegendlogotypography; componentsbreadcrumbbutton-groupcardempty-statefooterinput-grouplistpaginationstattoolbar; blockscta-sectionfaqfeature-gridheropricing-tabletestimonialalert-dialogdropdown-menucontext-menupopoverhover-cardsheetdrawertoast; data/pickerstabledata-tablechartcarouselcomboboxcommandcalendardate-picker; navnavbarmenubarnavigation-menusidebarformresizablesearchcomment; pagesdashboardlanding-pagepricingsettingssign-in; flowsauthenticationcheckoutonboardingreativa now covers 26 elements, 42 components, 13 blocks, 5 pages, and 3 flows.
Approach
Reativa.Viewand reusing the existing components (Button,Badge,Avatar,Icon,IconButton,Separator,Input,Link,Backdrop,Switch,Field), styled against@prescriptive/tokensso a re-theme cascades through both implementations identically.Registry.mlxas inline*_examplefunctions wired intoexample_for/example_ids(the ES surface the website consumes) — matching how the existing reativa examples and the XoteExamples.resmodules are structured. No website code change needed; the Reativa tab is driven byexample_idsfrom the bundle.elhelper wrapsView.elementfor pure-structure demos so uncommon tags (table,h1,blockquote,nav, …) never depend on which JSX tag helpers the mlx layer exposes, plus acontains_cisubstring helper for the filterable demos.Reactive primitives used
View.showfor the open/closed overlays (dismissed viaBackdrop),View.for_for the live-filtered lists (combobox,command,search,data-table),class_reactivefor selected-day / active-dot state (calendar,date-picker,carousel), reactivestylefor the carousel track and resizable panels,View.On.onfor thecontextmenu/mouseenter/mouseleave/focusevents, andView.On.submit+prevent_defaultforform.Verification
c94697df), not from memory — confirmedView.for_,View.On.on, the polymorphic'a value(for the reactivecheckedbinding), and the tag/attr/event surface.example_formatch arms andexample_idswere cross-checked to match exactly (89 = 89, both directions), catch-all last.accountandpassword, which are not specs (no.mdunderspecs/) and so never surface a Reativa tab — intentionally omitted.website/src/reativa.bundle.jsrefreshes when CI rebuilds it.Each batch adds a Changeset (
@prescriptive/reativaminor).🤖 Generated with Claude Code
https://claude.ai/code/session_012DYiHqv5HaSufQ5JH7Mokh
Generated by Claude Code