Repository navigation
feat(stories): MobileBaseline contract for interactive primitives - #8
Merged
Merged
Conversation
…005)
Mobile-first contract — every interactive primitive must publish a
MobileBaseline story at 375px (iPhone SE) so the floor is visible at
story-review time, not after a real device exposes the regression.
Changes:
- src/stories/_shared/viewports.ts — canonical viewport constants (NEW)
- src/stories/chat-widget/FloatingWidget.stories.tsx — refactor to import
from _shared (was the only positive case; 4 constants migrated)
- src/stories/ui/Button.stories.tsx — MobileBaseline (lg ≥ 44 px tap target)
- src/stories/ui/Input.stories.tsx — MobileBaseline (16 px font floor)
- src/stories/navigation/NavDropdown.stories.tsx — MobileBaseline
- CLAUDE.md — Mobile-state stories contract section + pilot scope note
Tier-1 pilot: Button, Input, NavDropdown. Remaining 91 stories backfill in
Tier 2. Source: docs-ai .cofoundy/specs/architecture-v1.md §8 + published
PRD at docs.cofoundy.dev/team/docs-ai/mobile-first-contract-v1.
Co-authored-by: contract-author <agent@cofoundy.dev>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Companion to docs-ai PR #46 (mobile-first Tier 1 contract). Lands the
MobileBaselinestory pattern in@cofoundy/uiso the mobile-first contract is enforced at story-review time, not after a real device exposes a regression.Changes
src/stories/_shared/viewports.ts(NEW) — canonical viewport constants (VIEWPORT_MOBILE= 375 px iPhone SE,VIEWPORT_MOBILE_LANDSCAPE= 414 px,VIEWPORT_TABLET= 768 px iPad,VIEWPORT_DESKTOP= responsive). String values match@storybook/addon-viewportdefaults bundled by addon-essentials.src/stories/chat-widget/FloatingWidget.stories.tsx— the only existing positive case (4 inline viewport constants) refactored to import from_sharedso we have a single SSOT.src/stories/ui/Button.stories.tsx— newMobileBaselinestory verifyingsize='lg'keeps ≥ 44×44 px tap target on mobile.src/stories/ui/Input.stories.tsx— newMobileBaselinestory verifying the 16 px font-size floor (prevents iOS auto-zoom).src/stories/navigation/NavDropdown.stories.tsx— newMobileBaselinestory that makes the component's self-asserted "44 px touch targets" visually auditable at 375 px.CLAUDE.md— new "Mobile-state stories — MobileBaseline contract" section mandating the pattern for every interactive primitive + cross-link to the canonical PRD.Pilot scope
Tier-1 ships 3 primitives only (Button / Input / NavDropdown — the three R5 flagged as zero-baseline). Backfill of the remaining 91 stories is deferred to Tier 2, one task per category, to keep the contract PR reviewable.
Spec
Source of truth: docs-ai
.cofoundy/specs/architecture-v1.md§8 + the canonical PRD at https://docs.cofoundy.dev/team/docs-ai/mobile-first-contract-v1 (§7).Test plan
_shared/viewports.tsexports VIEWPORT_MOBILE / _LANDSCAPE / TABLET / DESKTOPMobileBaselineusingVIEWPORT_MOBILEpnpm storybook→ check each new story renders at 375 px