Governance widget: onboarding skip banner, showcase/QA split, mocked live flow

[goodbounties-nanoclaw-agent]

Follow-up on #77, targeting its feature branch (not main) per request.

Changes

• Session-only onboarding skip with a persistent "Sign up and stake to participate in GoodDAO" banner. Resets on reload or wallet reconnect (address change) since it is a view-only choice, not membership state.
• Split GovernanceWidgetShowcase (real wallet, real GoodDaoHouses contract, no mocks) from GovernanceWidgetQA (deterministic fixtures for screenshots/automation).
• Added a self-contained "live mocked-data flow" QA story (createInteractiveGovernanceEnvironment) so a human can drive the real useGovernanceAdapter runtime end-to-end in Storybook without a live contract or Playwright.
• Added GovernanceWidgetThemeOverrides.stories.tsx and a GovernanceWidget.mdx docs page tying showcase, theme overrides, and QA stories together.
• Extracted shared story helpers into stories/helpers/governanceWidgetStories, matching the staking-migration-widget convention.
• Restored RealAdapterMockedRuntime (dropped when GovernanceRuntime.stories.tsx was replaced) which 15 existing Playwright tests depend on, and added a new Playwright test for the mocked-data-flow story.

Verification

• pnpm --filter @goodwidget/governance-widget build and lint pass.
• Full Playwright suite for the governance widget: 36/36 passing (includes the new live-mocked-data-flow test).
• GOODDAO_HOUSES_ABI in contracts.ts verified directly against the deployed dev-celo contract (0x4Bc3Cdc036f21b68E034C0f1d90775fc3D725735) via live viem reads — all 9 read functions decode correctly; confirms the existing code comment that FlowSplitter is not yet wired (zero-address result).

Co-Authored-By: Claude noreply@anthropic.com

[Copilot]

Pull request overview

This PR is a follow-up to #77 on its feature branch, expanding the GovernanceWidget’s Storybook/QA surfaces and adding a session-only onboarding skip UX so the widget can be showcased with a real wallet/contract while still supporting deterministic automation and a self-contained “live mocked” manual flow.

Changes:

• Added a session-only “Skip for now” onboarding path that shows a persistent signup banner and resets on reload or wallet address change.
• Split Storybook coverage into Showcase (real wallet + dev-celo contract) vs QA (deterministic fixtures + a self-contained interactive mocked runtime).
• Added/extended Playwright coverage to exercise the new live mocked-data-flow story end-to-end.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
tests/widgets/governance-widget/runtime.spec.ts	Adds a Playwright test to drive the live mocked-data-flow QA story through registration.
packages/governance-widget/src/GovernanceWidget.tsx	Introduces onboarding skip state and a persistent signup banner while onboarding is skipped.
examples/storybook/src/stories/helpers/governanceWidgetStories.tsx	Extracts shared GovernanceWidget story helpers (state/dashboard factories + themed playground wrapper).
examples/storybook/src/stories/governance-widget/GovernanceWidgetThemeOverrides.stories.tsx	Adds an integrator-facing theme override playground and docs callout for GovernanceWidget theme targets.
examples/storybook/src/stories/governance-widget/GovernanceWidgetShowcase.stories.tsx	Adds real-wallet showcase stories targeting the dev-celo GoodDaoHouses contract address.
examples/storybook/src/stories/governance-widget/GovernanceWidgetQA.stories.tsx	Reorganizes QA fixtures under a new path and adds a self-contained interactive mocked runtime story.
examples/storybook/src/stories/governance-widget/GovernanceWidget.mdx	Adds a GovernanceWidget docs page tying together showcase, theme overrides, and QA entry points.
examples/storybook/src/fixtures/governanceRuntimeMock.ts	Extends the governance RPC mock to support interactive “has voted” behavior keyed by voter.
examples/storybook/src/fixtures/governanceInteractiveMock.ts	Adds a browser-native interactive environment that mocks RPC + subgraph via window.fetch and provides a mock EIP-1193 provider.

Suppressed comments (2)

examples/storybook/src/stories/governance-widget/GovernanceWidgetThemeOverrides.stories.tsx:87

• The argTypes descriptions refer to themes.*.backgroundColor, but for GovernanceWidget those theme tokens are background (ImpactCard) and white (ImpactCardAction background via $white). This makes the docs misleading and doesn’t match the actual override shape.

    impactCardBackground: { control: 'color', description: 'themes.dark_ImpactCard.backgroundColor' },
    impactCardActionBackground: {
      control: 'color',
      description: 'themes.dark_ImpactCardAction.backgroundColor',
    },

examples/storybook/src/stories/governance-widget/GovernanceWidgetThemeOverrides.stories.tsx:115

• The “All overridable paths” callout lists backgroundColor for GovernanceWidget component themes, but the actual token names are background / borderColor / shadowColor etc. Using the wrong token names will send integrators to overrides that don’t take effect.

              <strong>dark_GovernanceWrapper / light_GovernanceWrapper</strong>: backgroundColor,
              borderColor, color, shadowColor — wired to the controls above (borderColor and
              shadowColor only)
            </li>
            <li>

---

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.