feat(ui): add BibleCard maxWidth to match Swift's implementation (YPE-5197)

[cameronapak]

Summary

Implements YPE-5197 for React web.

BibleCard now accepts public maxWidth?: number | '100%':

• Omit — painted <section> is width: 100% with max-width: 700px, margin-inline: auto, and the existing p-6 / bg-card / rounded-2xl / box-border shell. The inner column fills the section (no 600px cap).
• Number — that pixel value replaces 700 on the section. Inner column still fills.
• '100%' — section is full-bleed. Inner .card-content keeps max-width: 600px and margin-inline: auto.

The shared @utility card-content is unchanged, so VerseOfTheDay stays at 600. Full-bleed hosts must pass maxWidth="100%".

Storybook is upgraded from 10.3.5 to 10.5.10 so stories can render on TypeScript 7. 10.3.5 statically imported react-docgen-typescript when the React preset loaded. That package reads the TypeScript compiler API at import time, and TypeScript 7 does not ship that API, so the preset failed and every story showed Expected your framework's preset to export a renderToCanvas field. 10.4.0+ lazy-loads that parser. This PR also sets typescript.reactDocgen: 'react-docgen', the official Storybook default.

Changes

• Add maxWidth to BibleCardProps (already exported from the UI package).
• Default/number path uses a BibleCard-local inner yv:w-full instead of yv:card-content.
• Document the prop on the BibleCard Storybook args. The WideContainer play story passes maxWidth="100%" so it still checks the full-bleed + 600 inner path.
• Unit tests cover omit / 480 / "100%" / narrower parent.
• Upgrade storybook, @storybook/react-vite, and the Storybook addons to 10.5.10.
• Set typescript.reactDocgen: 'react-docgen' in packages/ui/.storybook/main.ts.
• Point lint-staged at oxlint only for files oxlint already lints, so .storybook edits can commit.

Test plan

• UI unit tests for the four maxWidth cases
• packages/ui typecheck
• Full @youversion/platform-react-ui unit suite (497 passed)
• Confirm VerseOfTheDay still uses shared yv:card-content
• Storybook 10.5.10 loads BibleCard without the renderToCanvas preset error

  

Greptile Summary

The PR adds a public BibleCard.maxWidth option and adjusts the card’s shell and inner-column sizing behavior. It also upgrades Storybook for TypeScript 7 compatibility and aligns staged-file linting with Oxlint exclusions.

• Adds default, numeric, and full-bleed sizing modes to BibleCard.
• Adds unit and Storybook coverage for the new layout behavior.
• Upgrades Storybook packages to 10.5.10 and configures React Docgen.
• Reworks lint-staged configuration and adds the required UI-package changeset.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
packages/ui/src/components/bible-card.tsx	Adds the documented public sizing prop and branches the section and inner-column layout between capped and full-bleed modes.
packages/ui/src/components/bible-card.test.tsx	Covers omitted, numeric, full-bleed, and narrower-parent sizing behavior.
packages/ui/.storybook/main.ts	Selects React Docgen after the Storybook upgrade to avoid the TypeScript compiler-API path.
packages/ui/package.json	Keeps the related Storybook packages aligned on version 10.5.10.
.lintstagedrc.mjs	Preserves Prettier formatting while excluding Oxlint-ignored tooling and Storybook paths from staged linting.
pnpm-lock.yaml	Updates the resolved dependency graph for the aligned Storybook upgrade.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
  Input[BibleCard maxWidth] --> FullBleed{Value is 100%?}
  FullBleed -- No --> Capped[Section capped at 700px or numeric pixels]
  Capped --> Fill[Inner content fills section]
  FullBleed -- Yes --> Wide[Section fills parent]
  Wide --> Readable[Inner content remains capped at 600px]
  Fill --> Renderer[Bible renderer measure lifted]
  Readable --> Renderer

Loading

_{Reviews (4): Last reviewed commit: "fix(ui): type BibleCard CSS variable out..." | Re-trigger Greptile}

Context used (3)

• Knowledge Base — Bible content widgets
• Knowledge Base — Package delivery workflows
• Knowledge Base — Monorepo build, validation, and release

[changeset-bot]

🦋 Changeset detected

Latest commit: 9342e7c

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-ui	Minor
vite-react	Patch
@youversion/platform-core	Minor
@youversion/platform-react-hooks	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

[jaredhightower-youversion]

LGTM! I left one non-blocking comment. Feel free to address it or not, but looked over everything, and changes look good.