Skip to content

Map GoodWalletV2 UI components to GoodWidget Tamagui primitives#7

Merged
L03TJ3 merged 5 commits into
mainfrom
copilot/map-goodwalletv2-ui-components
Apr 28, 2026
Merged

Map GoodWalletV2 UI components to GoodWidget Tamagui primitives#7
L03TJ3 merged 5 commits into
mainfrom
copilot/map-goodwalletv2-ui-components

Conversation

Copy link
Copy Markdown

Copilot AI commented Apr 23, 2026

Iterative first wave of GoodWalletV2 design elements applied to GoodWidget's component library — new components added to packages/ui/src/components/, existing ones promoted with new variants. Old components-test/ scaffolds for promoted components have been removed.

Theme system

  • colorSoft / colorDim semantic keys added to light/dark base themes and THEME_KEY_NAMES — distinct light/dark values, not duplicated
  • light_Toast / dark_Toast, light_Dialog / dark_Dialog component sub-themes in both presets.ts and theme.ts
  • defaultTokenValues extended with full radius (9999) and icon{2xs,Xs,Sm,Md,Lg,Xl,2xl} size tokens — was preset-only before

New components

Icon

Named 'Icon', inline SVG registry (20+ paths on a 24×24 viewbox), size maps to icon* token scale, color roles resolve through useTheme() via resolveIconStrokeColor(). spin injects a CSS keyframe once via a module-level flag.

<Icon name="check" size="sm" color="success" />
<Icon name="loader" size="md" color="primary" spin />
<Icon name="x" size="xs" color="muted" round />

Dialog

Tamagui Dialog base. DialogOverlay / DialogFrame named for component sub-themes. Imperative store:

createDialog({ title: 'Confirm', onAccept: async () => { /* ... */ }, showClose: true })
updateDialogStatus('pending' | 'success' | 'error')
closeDialog()
useDialog() // reactive hook

onAccept returning a Promise auto-drives pending → success | error status. Uses Promise.resolve() identity check for cross-realm safety.

Toast + ToastContainer

Named ToastFrame + queue-based store with monotonic counter IDs. status variant drives border accent + status icon. Auto-close progress bar via a module-level CSS keyframe.

const id = createToast({ message: 'Saving…', status: 'pending' })
updateToast(id, { status: 'success', message: 'Saved' })
// Mount once at widget boundary:
<ToastContainer />

Promoted components (moved from components-test/ to components/)

The old components-test/ files for these components have been deleted. The components/ versions are now the single source of truth.

Component Changes
Button Default borderRadius$full; new variants: pill, text, list, iconSize; explicit radius documented per variant
Text truncate (single-line ellipsis), noWrap, semantic color variant (default / secondary / soft / dim)
Separator Tamagui native Separator base; size (sm/md/lg) and color (default/muted/primary) variants
Toast Replaced by the new components/Toast.tsx with ToastContainer and queue store

Copilot AI and others added 3 commits April 23, 2026 10:31
- Add colorSoft/colorDim semantic theme keys to light/dark themes (presets.ts, theme.ts)
- Add THEME_KEY_NAMES entries for colorSoft/colorDim (createComponent.ts)
- Add light_Toast/dark_Toast, light_Dialog/dark_Dialog component themes to presets.ts and theme.ts
- Add full radius and icon* size tokens to defaultTokenValues (theme.ts)
- Create components/Text.ts with truncate, noWrap, colorSoft, colorDim variants
- Create components/Button.tsx with pill, icon, text, list variants; default radius → $full
- Create components/Separator.ts using Tamagui Separator base with size/color variants
- Create components/Icon.tsx with inline SVG registry, size/color/spin/round props
- Create components/Dialog.tsx with imperative store (createDialog, updateDialogStatus, closeDialog, useDialog)
- Create components/Toast.tsx with ToastContainer, queue store, status variant, progress bar
- Update index.ts to export all new components from components/"

Agent-Logs-Url: https://github.com/GoodDollar/GoodWidget/sessions/5517c699-b8e4-49fc-b0e8-d993b89f2d7f

Co-authored-by: L03TJ3 <6606028+L03TJ3@users.noreply.github.com>
- Use distinct textSoft/textDim colors for light vs dark modes in theme.ts
- Update presets.ts comment to explain dark-only GW preset contrast rationale
- Fix Toast ID generation: use monotonic counter instead of Math.random()
- Fix keyframe injection: use module-level flags instead of repeated DOM lookups
- Fix Promise detection in Dialog: use instanceof instead of duck-typing
- Clarify Button variant radius inheritance with explicit comments and borderRadius

Agent-Logs-Url: https://github.com/GoodDollar/GoodWidget/sessions/5517c699-b8e4-49fc-b0e8-d993b89f2d7f

Co-authored-by: L03TJ3 <6606028+L03TJ3@users.noreply.github.com>
- Rename Text component from GWText to Text for naming consistency
- Expand Button variant comment to explain Theme reset rationale
- Extract resolveIconStrokeColor helper function for testability
- Fix cross-realm Promise detection with Promise.resolve() identity check
- Add imageAlt to DialogConfig for image accessibility
- Update Dialog image rendering to use imageAlt

Agent-Logs-Url: https://github.com/GoodDollar/GoodWidget/sessions/5517c699-b8e4-49fc-b0e8-d993b89f2d7f

Co-authored-by: L03TJ3 <6606028+L03TJ3@users.noreply.github.com>
Copilot AI changed the title [WIP] Map GoodWalletV2 UI components to GoodWidget Tamagui primitives Map GoodWalletV2 UI components to GoodWidget Tamagui primitives Apr 23, 2026
Copilot AI requested a review from L03TJ3 April 23, 2026 10:40
@L03TJ3
Copy link
Copy Markdown
Contributor

L03TJ3 commented Apr 23, 2026

@copilot can you go over your changes and make sure we don't have any 'backward compatbility' support.
there is nothing backwards to support and it should work as-is.

- Delete components-test/Button.tsx (replaced by components/Button.tsx)
- Delete components-test/Text.ts (replaced by components/Text.ts)
- Delete components-test/Separator.ts (replaced by components/Separator.ts)
- Delete components-test/Toast.tsx (replaced by components/Toast.tsx)
- Remove "now in components/" migration comments from index.ts

Agent-Logs-Url: https://github.com/GoodDollar/GoodWidget/sessions/b666b2f0-148c-4526-a177-60b4d1b654d4

Co-authored-by: L03TJ3 <6606028+L03TJ3@users.noreply.github.com>
Copy link
Copy Markdown
Author

Copilot AI commented Apr 23, 2026

@copilot can you go over your changes and make sure we don't have any 'backward compatbility' support.
there is nothing backwards to support and it should work as-is.

Done in 22b00e1. Deleted the four old components-test/ files (Button.tsx, Text.ts, Separator.ts, Toast.tsx) that were superseded by their components/ counterparts, and removed the migration-flavor comments from index.ts. The new component versions in components/ are now the single source of truth.

@L03TJ3 L03TJ3 marked this pull request as ready for review April 28, 2026 09:01
@L03TJ3 L03TJ3 merged commit b297dd5 into main Apr 28, 2026
1 check passed
@L03TJ3 L03TJ3 requested a review from sirpy April 29, 2026 11:25
@L03TJ3 L03TJ3 linked an issue Apr 29, 2026 that may be closed by this pull request
9 tasks
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.

[BOUNTY] Migrate First-Wave UI Primitives To Tamagui-Native Wrappers Map GoodWalletV2 UI components to GoodWidget Tamagui primitives

2 participants