YPE-1565: Show error when YouVersionProvider has no appKey

[cameronapak]

Empty/missing appKey rendered a blank page. Now: UI provider shows a styled "Missing app key" message; hooks provider throws.

• Styled MissingAppKey panel + Storybook story
• i18n (en/fr/es), example cleanup, unit + integration tests, changeset

YPE-1565

🤖 Generated with Claude Code

Greptile Summary

Replaces the silent blank-page failure when YouVersionProvider receives a missing or empty appKey with explicit, user-facing feedback. The UI package renders a styled, i18n-aware "Missing app key" panel; the hooks-only base provider throws a descriptive error for non-UI consumers.

• MissingAppKey component added with light/dark theming, ARIA role="alert", and translations for EN/ES/FR; the UI YouVersionProvider short-circuits before calling the base provider when appKey is absent.
• The hooks provider's guard throws before any hook calls — ensuring hooks-only consumers fail loudly rather than silently — and unit + Storybook integration tests cover all three invalid states (undefined, empty string, whitespace-only).

Confidence Score: 4/5

Safe to merge — the change is well-scoped and well-tested; one minor ARIA attribute conflict in the new component is the only issue found.

The two-layer guard (UI provider returns a styled panel; hooks provider throws) is a clean design and the tests cover all three invalid-key shapes. The only notable issue is that aria-live="polite" on the role="alert" element overrides the role's implicit assertive live region, making screen-reader announcements less urgent than intended for a configuration error. This is an accessibility polish item that doesn't affect functional correctness.

packages/ui/src/components/missing-app-key.tsx — the redundant aria-live attribute; all other files look correct.

Important Files Changed

Filename	Overview
packages/ui/src/components/missing-app-key.tsx	New styled panel component for the missing-appKey state; has a redundant aria-live="polite" that conflicts with the implicit assertive live region of role="alert"
packages/ui/src/components/YouVersionProvider.tsx	UI provider now intercepts the missing/empty appKey before delegating to the base provider; useEffect is correctly called before the early return, so no Rules of Hooks violation
packages/hooks/src/context/YouVersionProvider.tsx	Throws before any hook calls when appKey is missing/empty; throw-before-hooks pattern is safe for the intended "fail loudly" use case, though it requires an error boundary for graceful recovery
packages/ui/src/components/YouVersionProvider.test.tsx	Adds parametrised tests for undefined/empty/whitespace appKey; correctly verifies that the base provider mock is never called and the alert role is rendered
packages/hooks/src/context/YouVersionProvider.test.tsx	Adds parametrised throw test covering undefined, empty string, and whitespace-only appKey values; good coverage
packages/ui/src/components/missing-app-key.stories.tsx	Storybook stories for light/dark and an integration play test; straightforward and well-structured
examples/vite-react/src/ThemedApp.tsx	Example updated to pass appKey ?? '' to YouVersionProvider so a missing env var triggers the new error UI instead of a blank page
.changeset/missing-app-key-message.md	Changeset correctly bumps both packages as minor; description is accurate

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[YouVersionProvider UI] --> B{appKey empty\nor missing?}
    B -- Yes --> C[Render YvStyles + MissingAppKey panel]
    B -- No --> D[BaseYouVersionProvider hooks]
    D --> E{appKey empty\nor missing?}
    E -- Yes --> F[throw Error\nnon-empty appKey required]
    E -- No --> G[Render children\nwith context]
    C --> H[role=alert panel\nshown to user]
    F --> I[Error Boundary\nor app crash]

Loading

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
packages/ui/src/components/missing-app-key.tsx:24-25
`role="alert"` already carries an implicit `aria-live="assertive"` per the WAI-ARIA spec. Adding `aria-live="polite"` overrides that implicit value, which downgrades the announcement urgency — screen readers will wait for a pause in speech instead of interrupting immediately. For a configuration error that prevents the app from functioning, assertive is the right level. Remove the explicit `aria-live` attribute so the native alert role behaviour is preserved.

```suggestion
      role="alert"
```

_{Reviews (1): Last reviewed commit: "YPE-1565: fix(ui): show error when YouVe..." | Re-trigger Greptile}

Greptile also left 1 inline comment on this PR.

[changeset-bot]

🦋 Changeset detected

Latest commit: 6cd9b71

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@youversion/platform-react-hooks	Minor
@youversion/platform-react-ui	Minor
vite-react	Patch
@youversion/platform-core	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[greptile-apps]

role="alert" already carries an implicit aria-live="assertive" per the WAI-ARIA spec. Adding aria-live="polite" overrides that implicit value, which downgrades the announcement urgency — screen readers will wait for a pause in speech instead of interrupting immediately. For a configuration error that prevents the app from functioning, assertive is the right level. Remove the explicit aria-live attribute so the native alert role behaviour is preserved.

Suggested change

	role="alert"
	aria-live="polite"
	role="alert"

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/ui/src/components/missing-app-key.tsx
Line: 24-25

Comment:
`role="alert"` already carries an implicit `aria-live="assertive"` per the WAI-ARIA spec. Adding `aria-live="polite"` overrides that implicit value, which downgrades the announcement urgency — screen readers will wait for a pause in speech instead of interrupting immediately. For a configuration error that prevents the app from functioning, assertive is the right level. Remove the explicit `aria-live` attribute so the native alert role behaviour is preserved.

```suggestion
      role="alert"
```

How can I resolve this? If you propose a fix, please make it concise.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!