Repository navigation
feat: add the React UI packages - #37
Merged
Merged
Conversation
Headless React hooks and unstyled function components over the process model, the first package in the ui layer. useModel follows a model through any GraphStore client: it subscribes to the model's changes before the first load and loads again on each change newer than the revision it shows. The reasoning hooks wrap graph-domain over a run of model, overlay and facts (statuses, ready set, blocked chain, per-element blockers, impact, status explanation, critical path), useProjection wraps graph-projection, and useElementFilter and useGraphSelection hold filter and selection state, the latter following the WAI-ARIA listbox pattern with a roving tab stop. The components (status badge, element card, transition item, lane, legend, filter panel, detail panel) render semantic markup with roles, names and stable data-* attributes, and take a class per part; they carry no styles. The shared lint config gains a react option that applies @exadev/eslint-config's React block to .tsx files with the version passed in, since eslint-plugin-react's version detection fails under ESLint 10, and the isomorphism rules now cover .tsx sources. The package is private: it reaches consumers through the process-graph package.
Styled components over graph-react, in Vanilla Extract. One theme shape defines the theme contract (createThemeContract) and the ThemeValues type, so the contract and the light and dark themes (createTheme) cannot disagree; every style reads the contract, and a consumer restyles by assigning it. Recipes give the badge its status variants and the element card its status, kind and critical path variants; parts whose status the wrapper cannot see, such as legend swatches, are coloured by their data-status attribute. SequenceDiagram draws a sequence projection as SVG: lifelines in order of first appearance, a message per row, self-messages as loops, replies dashed, and fragments as framed operands. The drawing is hidden from assistive technology, which reads the same steps from a visually hidden list. The package builds with Vite in library mode and the Vanilla Extract plugin, so dist holds plain class names and a compiled style.css, and a consumer needs no build plugin; tsc emits the declarations, with its build info inside dist so that emptying dist rebuilds them. The tests run the same plugin with CSS processing on: every contract variable resolves to the theme's value under both themes, and each status colour reaches the WCAG 2.2 minimum text contrast on the background and on a surface.
useGraphSelection takes an options object in place of its initial selection: the initial selection, an onChange listener called with each selection a click or key makes, and a focus function for a renderer that draws its own focusable items, such as a React Flow canvas, where no element carries itemProps to be focused.
React Flow views of the process model, composed from graph-react and graph-ui and laid out by graph-layout. ProcessFlow draws a flowchart, a swimlane or a state machine. toFlow turns the projected, laid-out view and the run into nodes and edges: each element a graph-ui element card at its laid-out position and size, with its handles given up front so edges route without measuring; each swimlane lane a group node holding its participant's elements at relative positions; hand-offs and the steps of the critical path marked on the edges. The layout engine is injected through the layout options, so the tests lay out with a stub engine. A filter hides elements and every edge with a hidden end, selection follows useGraphSelection and focuses React Flow's nodes, and a failed layout throws to the nearest error boundary. ProcessView sends a sequence projection to graph-ui's SVG sequence diagram instead. The build bundles React Flow's stylesheet once, with this package's own Vanilla Extract rules, into style.css; the import is added at build time rather than in the source, since TypeScript would otherwise keep a CSS import in the emitted declarations.
The core packages released while this work was in progress; each sibling dependency follows the workspace version, as syncpack requires.
Mearman
force-pushed
the
feat/react-ui
branch
from
October 11, 2026 01:30
d842485 to
96334ce
Compare
Mearman
marked this pull request as ready for review
October 11, 2026 01:41
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
Member
Author
|
@codex security review |
🛡️ Codex Security ReviewSecurity review completed. No security issues were found in this pull request. Reviewed commit: Only the user who started this review can view the report in Codex. ℹ️ About Codex security reviews in GitHubThis is an experimental Codex feature. Security reviews are triggered when:
Once complete, Codex will leave suggestions, or a comment if no findings are found. |
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.
The React half of phase 5: the ui layer's three packages, each private and reaching consumers through the
process-graphpackage.graph-react: headless hooks over aGraphStoreclient and a run (model, overlay, facts) wrappinggraph-domainandgraph-projection, filter and selection state with listbox keyboard navigation, and unstyled components with ARIA roles and stabledata-*attributes.graph-ui: Vanilla Extract theme contract with light and dark themes, recipes, styled components overgraph-reactand the SVG sequence diagram, built so the package ships compiled CSS.graph-react-flow:@xyflow/reactflowchart, swimlane and state machine views laid out bygraph-layoutwith an injectable engine.The shared lint config gains a
reactoption for.tsxpackages.