Shared UI tokens: unify web and mobile checkout - #4
Merged
Merged
Conversation
Co-authored-by: Cursor <cursoragent@cursor.com>
Move Button into atoms with disabled support; add Text, Banner, Notice, and Spinner using NativeWind token classes. TDD with 8 passing tests. Co-authored-by: Cursor <cursoragent@cursor.com>
Replace non-preset Tailwind grays and text-white with surface, border, and ink tokens so Button stays within @repo/tokens constraints. Co-authored-by: Cursor <cursoragent@cursor.com>
Compose atoms with formatCurrency for shared checkout layout primitives. Co-authored-by: Cursor <cursoragent@cursor.com>
Port session/error view mapping from mobile checkout into @repo/ui with centralized copy, TDD coverage, and @repo/api-contracts dependency. Co-authored-by: Cursor <cursoragent@cursor.com>
Use Banner with alert semantics for price_changed, keep copy.ts scoped to CheckoutCard only, and fix Notice double Text wrapping. Co-authored-by: Cursor <cursoragent@cursor.com>
Enable the web app to import @repo/ui by aliasing react-native to react-native-web, adding Tailwind/NativeWind config, and injecting shared cssVariables from @repo/tokens in the root layout. Co-authored-by: Cursor <cursoragent@cursor.com>
Use @repo/ui CheckoutCard and view mappers. SSR-first resume unchanged. Co-authored-by: Cursor <cursoragent@cursor.com>
Use @repo/ui CheckoutCard and view helpers. Keep mobile resume lifecycle. Co-authored-by: Cursor <cursoragent@cursor.com>
Mark FUTURE-IMPROVEMENTS item 1 done, note shared UI in decisions.md, and export session summary for the @repo/tokens + @repo/ui + RN-web work. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Adopt mint accent, black web CTAs, dark mobile canvas, and Gametime chrome from production screenshots; refresh mocks and store references. Co-authored-by: Cursor <cursoragent@cursor.com>
Use logo mint #19CE85, site ink #010314, CTA #141517, and dark surfaces Co-authored-by: Cursor <cursoragent@cursor.com> #0C0C0D / #1C1C20 sampled from the production homepage CSS and SVG.
Point root `dev` at the three apps via Turbo filters and document the one-command workflow so reviewers don't need three terminals. Co-authored-by: Cursor <cursoragent@cursor.com>
Add dev:servers for api+web and run mobile-web outside turbo so Expo CLI keypresses work. Co-authored-by: Cursor <cursoragent@cursor.com>
Prevent Metro from resolving incompatible Expo SDK 57 native modules that crash the mobile-web router. Co-authored-by: Cursor <cursoragent@cursor.com>
Drop the temporary @repo/config/tailwind shim so config no longer depends on tokens; apps already import @repo/tokens/preset directly. Co-authored-by: Cursor <cursoragent@cursor.com>
Collapse dual NativeWind/Appearance styling into Theme + StyleSheet, complete CheckoutView kinds, make tokens a single CJS source, move checkout into features/ with dotted role suffixes, and share client error/notice helpers. Co-authored-by: Cursor <cursoragent@cursor.com>
EliRobinson
commented
Jul 28, 2026
| import type { CheckoutSession } from '@repo/api-contracts'; | ||
| import { colors, spacePx } from '@repo/tokens'; | ||
| import type { CheckoutView } from '@repo/ui'; | ||
| import { CheckoutCard, priceUpdatedNotice, viewFromErrorCode, viewFromSession } from '@repo/ui'; |
Owner
Author
There was a problem hiding this comment.
Not a huge fan of exporting utils from UI, would make this better in another scenario.
First CheckoutScreen render under coverage can exceed 15s on loaded CI; defer resume resolution so the loading assertion stays deterministic. Co-authored-by: Cursor <cursoragent@cursor.com>
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
1 participant
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
@repo/tokensas the single source of design tokens (colors, spacing, type, Tailwind preset, CSS vars) and expand@repo/uiinto Atomic Design checkout components culminating inCheckoutCard.apps/web) to render shared RN/NativeWind UI viareact-native-web, preserving SSR resume with no client refetch flash; refactor both web and mobile checkout screens onto the shared organism.mocks/and document the design/plan/session notes underdocs/.Test plan
pnpm --filter @repo/tokens testpnpm --filter @repo/ui testpnpm --filter web test(includes SSR smoke)pnpm --filter mobile-web testhttp://localhost:3001/checkout/<id>and Expo web checkout; confirm shared card + price CTAmocks/web-checkout-active.pngandmocks/mobile-checkout-active.pnglook correctMade with Cursor