Chore/finalize governance onboarding

[HushLuxe]

Finalize governance onboarding UI/components (#58)

Overview

This PR finalizes the AI-generated onboarding widget from PR #57 for human review.
It modularizes a 870-line monolith into 9 focused files, fixes a real stale-closure
state-update bug, makes the wizard responsive on mobile, hardens the accessibility
wiring, and updates the public design-system primitives (PageWizard, Stepper)
to support the onboarding flow cleanly without leaking widget-specific knowledge.
Three follow-up commits align the UI to the Stitch + Figma references.

Fixes #58.
References #55 (parent spec)
and #56 (plan).

Changes Made

Modularization

• packages/governance-widget/src/GovernanceOnboardingWidget.tsx reduced from
  870 LOC → 67 LOC (just PageWizardProvider wiring).
• New packages/governance-widget/src/onboarding/ tree:
  • constants.ts — step list, required fields, defaults
  • copy.ts — house-specific copy
  • validation.ts — pure field validation
  • resolveStakeSummary.ts — pure stake status resolver
  • OnboardingNotice.tsx, HouseSelectionCard.tsx, ProfileField.tsx,
    ProfileTextAreaField.tsx — leaf primitives
  • GovernanceOnboardingFlow.tsx — orchestration
  • steps/{Welcome,House,Profile,Stake,Success}StepContent.tsx — per-step views

Bug fixes

• Stale-closure in updateProfileField — made PageWizard.setData accept a
  functional (prev) => patch form so rapid typing can't lose characters.
  Added a Playwright regression test (Profile field handles rapid typing)
  that types 90+ chars into three different fields with delay: 0 and
  asserts the full value round-trips. The test also exercises the
  clear-then-retype path (overwrite, not just incremental typing).
• resolveStakeSummary all-pending → "Stake confirmed" bug — added an
  explicit allCompleted guard so all-pending lists correctly resolve to
  "Stake not yet started" instead of falling through to success.
• ensureScrollbarHidden ran in render — moved into useEffect.
• Stepper useEffect deps included raw steps array — trimmed to
  [resolvedActiveStepId] so consumer re-renders don't fight user scroll position.
• Step id/label mismatch (success vs Complete) — renamed visible label
  to "Success".
• Duplicate @goodwidget/governance-widget workspace dep in
  examples/storybook/package.json — removed.

Mobile responsiveness

• PageWizard.tsx: replaced the always-rendered scroll-row with two
  mutually-exclusive presentations:
  • <sm (≤480px): compact "Step N of 5 — Title" summary only
  • >sm (≥481px): full 5-circle horizontal track with connectors
• Added media: { sm, md, gtSm, gtMd } breakpoints to createTamagui config
  to enable responsive props throughout the design system.
• Added 2 new mobile-viewport Storybook stories (CustodialMobileWelcome,
  CustodialMobileDarkProfile) at 328px width.

Accessibility

• HouseOptionButton: replaced aria-pressed with role="radio" +
  aria-checked (correct ARIA pattern for single-select).
• HouseStepContent: wrapped house cards in role="radiogroup" with
  aria-label="Select your governance house".
• PageWizard step circles: per-step data-testid="PageWizardStep-${id}" and
  data-state="active|completed|pending" for testability and screen-reader
  introspection.

Theme-correctness / contrast

• PageWizard completed-step circle: previously hardcoded $white text on
  solid $success background. This failed WCAG AA in both themes:
  • Light: #FFFFFF on #13C636 ≈ 2.0:1
  • Dark: #FFFFFF on #13C636 ≈ 3.0:1
    Now uses $successMuted background with theme-aware $color text.
    Verified contrast:
  • Light: $color (#0D182D) on alpha-composited $successMuted ≈ 15.2:1 (WCAG AAA)
  • Dark: $color (#FFFFFF) on alpha-composited $successMuted ≈ 14.3:1 (WCAG AAA)
• HouseOptionButton: dropped the name from createComponent() so it
  no longer pollutes the shared @goodwidget/ui manifest namespace with a
  widget-internal component.
• ProfileTextAreaField: replaced the hand-rolled Stack-as-textarea with
  Tamagui's native TextArea primitive, including label association and
  focus/error styling.

Polish

• WelcomeStepContent: removed the original PR Add governance onboarding UI flow and reusable wizard primitives #57 descriptive paragraph
  ("This onboarding flow stays UI-only for now…") that was AI-draft
  developer-facing copy leaking into end-user UI. The screen now renders
  the OnboardingNotice only; copy is driven entirely by the
  verified/unverified state.
• StakeStepContent: added inline comment explaining why maxHeight={320}
  overrides the Stepper default of 360 (wizard vertical budget on a 720px
  mobile frame).

Type hygiene

• Extracted PageWizardDataPatch type alias from the inline union on setData.
• Moved GovernanceWizardData from two duplicated local interfaces into
  types.ts, exported via index.ts.

Verification Checklist

• pnpm install — clean
• pnpm --filter @goodwidget/ui build — clean
• pnpm --filter @goodwidget/governance-widget build — clean
• pnpm --filter @goodwidget/governance-widget lint — 0 errors, 0 warnings
• pnpm run build (full monorepo) — 8/8 packages green
• pnpm --filter @goodwidget/storybook build-storybook — clean
• npx playwright test onboarding.spec.ts --workers=1 — 8/8 passed
  • Includes new regression test for the stale-closure bug
  • Includes the multi-line missionStatement rapid-typing assertion
  • Includes clear-then-retype assertion for overwrite reconciliation
  • Mobile dark profile story renders correctly

[L03TJ3]

Please read up on the following comment: #53 (comment)

The highest level of hard-coded styling should be on design-preset level. (eg: light_ProfileTextAreaField/dark_ProfileTextAreaField)

That way integrators have the ability to override styling where they see fit.

This is true for all components that you worked on in this PR.

Side note: Before requesting a review do a manual match against design reference vs output of stories.
you can easily see that the styling is not applied in the right way (dark buttons with dark text)
page-wizard does not align with the requested design (bullets 1 > X, horizontal at the top of the screen.

So definitely not ready for review yet this PR

[L03TJ3]

also, after doing all the fixes and before requesting review. follow these instructions for signing your commits:
https://github.com/GoodDollar/.github/blob/master/CONTRIBUTING.md#gpg-signing

[L03TJ3]

In case of using AI tooling to develop. most local agents are able to 'see' image references.
a flow that I have used that seemed to have reasonable success is:

1. place screenshots of the expected end-result in the repository (not commiting, only local)
2. make sure all tests and states produce the expected output screenshots
3. instruct the agent to keep matching your design references against the playwright screenshot outputs.

It is to certain extend reasonably able to work and make adjustments to align the design better.
but! UI/UX is something that needs human review and feedback, and we need critical assessment. both on the UI and matching against the shared references + reviewing the code critically.

@HushLuxe

[L03TJ3]

supporting docs for the design system: https://github.com/GoodDollar/GoodWidget/blob/main/docs/widget-author-instructions.md

@HushLuxe

[L03TJ3]

Hi, did you read my feedback and is it being worked on? @HushLuxe

[HushLuxe]

Yes @L03TJ3 .....am currently working on it.

[L03TJ3]

@HushLuxe Hey, is this ready for review or are there more commits expected?
if ready, don't forget to re-request review using the buttons on the right sidebar of the pull-request

[HushLuxe]

Hi @L03TJ3
I have addressed all feedback from the last review ,theme mismatches fixed, ESLint disable stubs removed, Storybook config reverted, blur validation wired correctly, and screenshots refreshed. Now ready for review.

[L03TJ3]

why? unrelated to your pull-request I believe.
either you should comment in your pull-request why these changes are not needed.
or not commit them.

are they conflicting with localized governance styling? something else?

[HushLuxe]

The governance* tokens were removed from the shared preset following one of your feedback asking that governance-specific styling be moved out of @goodwidget/ui and into the widget's own config. Those tokens now live in packages/governance-widget/src/config.ts and are composed at runtime throu GovernanceWidgetProvider + mergeOverrideMaps. I also updated the comments to show that the shared preset is now widget-agnostic as intended.

[L03TJ3]

@HushLuxe for the rest looks fine and the widget screenshots align as expected.

just a clean up of unrelated changes, or explaining why it was done/what its solving.
please keep it in mind when contributing: focus your pull-request on the task.
that makes review a bit more efficient and easy

[vercel]

@HushLuxe is attempting to deploy a commit to the GoodDollarTeam Team on Vercel.

A member of the Team first needs to authorize it.

[HushLuxe]

Thanks @L03TJ3 , I will keep that in mind. I've reverted those accidental out-of-scope linting changes, For presets.ts file, those changes were just moving the governance tokens into the widget config, as requested in the previous review

[L03TJ3]

@HushLuxe please revert the changes to presets.ts
Its expected that the presets.ts does not need any changes and should be aligned with master branch version

that does not change any localized styling you have done as far as I know.

[L03TJ3]

@HushLuxe the context being is that my comment was for any 'named-component' styling which you bubbled up to the presets.
the governance/light-theme was already like this and should not have changed.

the flow:

1. should use where possible default-preset semantic colors/sizing/fonts etc
2. whenever you need localized a recurrent styling you define the localized config and preset as you have done

but to keep it simple and move things forward. all is requested is revert presets.ts to its original state

[HushLuxe]

Understood. I have reverted presets.ts back to its original state.

[L03TJ3]

Looks great now, thanks for the contribution