Skip to content

Commit f10e4e1

Browse files
build(ui): migrate to React 19 and Primer React 38 (#3383)
* build(ui): migrate to React 19 and Primer React 38 Replace removed Box and sx APIs with native styles and CSS Modules, load Primer CSS tokens, use the CSS-based theme provider and Banner, and scope custom-element JSX types to the React runtime. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> * fix(ui): use CSS token for reviewer label backgrounds Replace leftover canvas.inset theme paths with the CSS custom property in PR creation and editing. Keep the reviewed native gaps unchanged. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
1 parent 36e5c48 commit f10e4e1

11 files changed

Lines changed: 1434 additions & 2661 deletions

File tree

‎CONTRIBUTING.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,14 @@ Type checking uses the native TypeScript 7 compiler through `tsc`; Vite handles
4040
transpilation and bundling separately. No TypeScript compiler API integration,
4141
typescript-eslint, or ts-node is required.
4242

43+
### MCP Apps UI
44+
45+
The `ui/` views use React 19 and Primer React 38. With Node.js 20.19+ or 22.12+, run `cd ui && npm ci && npm run typecheck && npm run build && npm audit` before `script/test`. The build writes self-contained HTML to `pkg/github/ui_dist/`, which the Go server embeds; these generated files are not committed.
46+
47+
Primer 38 no longer exports `Box` or accepts `sx`/styled-system props. Use semantic HTML, native `style` props for dynamic/layout styles, and CSS Modules for nested selectors. `AppProvider` loads Primer's primitive tokens and light/dark themes, so use CSS variables rather than JavaScript theme values. Custom element typings must augment `react/jsx-runtime` rather than the global `JSX` namespace.
48+
49+
For UI dependency upgrades, compare all four views (`get-me`, `issue-write`, `pr-write`, and `pr-edit`) in light/dark themes and at narrow widths in an MCP Apps host, including menus, Markdown editing/preview, and completed-result views. Include before/after screenshots in the pull request.
50+
4351
## Submitting a pull request
4452

4553
1. [Fork][fork] and clone the repository

0 commit comments

Comments
 (0)