Roll out real device screenshots across the Edge Component docs - #511
Open
lessevv wants to merge 9 commits into
Open
Roll out real device screenshots across the Edge Component docs#511lessevv wants to merge 9 commits into
lessevv wants to merge 9 commits into
Conversation
…mponent screenshots Adds an Artisan command that drives a local super-native checkout's native:run/native:screenshot commands per screen and platform, stages results under storage/docs-screenshots, and (with --publish) copies them into public/img/docs. The 9 captured screens live in App\Support\DocsScreenshotManifest, one entry per route in super-native's Edge Component showcase. Guards against the ways this can go wrong when run unattended: an ambiguous device without --udid can make the underlying native:run prompt interactively with no attached terminal, so that timeout is now caught instead of crashing the command; a screen whose drawer needs a manual open is skipped with a clear message rather than silently publishing a closed-drawer screenshot when run non-interactively; and --publish checks each source file exists and each copy actually succeeds before reporting success. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
… options Splits CaptureDocsScreenshots into three focused, independently-testable services (ScreenshotCapturer, ScreenshotPublisher), and the manifest now records each screen's crop direction. Cropping itself is delegated to mobile-air's own native:screenshot --crop/--crop-percent flags rather than duplicated here, so every NativePHP developer gets it, not just this pipeline. --full skips cropping, --crop-percent overrides the configured default, and --dry-run prints the plan without running anything. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
0.25 pulled in whatever sat just below/above the top/bottom bar on a real device capture (verified against a booted iOS simulator) — 0.15 is the tightest value that still keeps the full bar on both the top-bar and bottom-nav reference screens. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…approach The inline <native:side-nav> element the old example and props table documented renders nothing on either platform (its own admonition said so) — there was no working example to preserve parity with, so this replaces it with the Drawer-builder approach that actually works, matching the reference screen in NativePHP/super-native. Also fixes <native:horizontal-divider>, a stale tag name with no real element behind it — <native:divider> is the real element. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
For developers without Herd's own database service running — matches .env.example's default DB_* values, so `docker compose -f docker-compose.local.yml up -d && php artisan migrate` is enough to get a working local database. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Replace the bare two-up image grid with a tabbed iOS/Android preview card: a device-style frame, a link to the exact reference-screen file in super-native so the example can be seen running for real, and a decorative (non-captured) chrome strip so the crop is unmistakably a phone screen without embedding real device data (time, battery %, carrier). Screenshots are regenerated with --crop-offset to exclude the real status bar / OS nav bar entirely. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Lets a capture skip the OS status bar/nav bar before measuring crop-percent, mirroring native:screenshot's own --crop-offset option. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Add screenshots for bottom-sheet, modal, menus, list, refreshable, virtual-list, slider, toggle, checkbox, select, radio-group, web-view, gesture-area, tab-row, and text, alongside the existing top-bar/ bottom-nav/side-nav coverage, all captured from real iOS/Android devices via native:screenshot and wired through DocsScreenshotManifest. Fix edge-preview's device chrome: - Add a live clock and percentage-based (not fixed-px) sizing for the Dynamic Island/camera cutout and home indicator, so they scale with the screenshot instead of a fixed size - Fix a browser bug where pairing a percentage width with aspect-square on the Android bottom-nav icons made the fake chrome bar's shrink-to- fit width diverge from the actual screenshot width, leaving a visible gap; swapped to a fixed height instead - Add sidebarWidthIos/sidebarWidthAndroid props so the fake status/ home-indicator bars can match a partial-width drawer's dimming scrim Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
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
1 participant
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
docs:capture-screenshots, which drives a local super-native checkout vianative:run/native:screenshotto regenerate every Edge Component doc screenshot from real iOS/Android devices, with--crop/--crop-percent/--crop-offsetto trim OS chrome and a--dry-run/--publishflowDocsScreenshotManifestfor future regeneration<x-docs.edge-preview>): adds a live clock, switches the Dynamic Island/camera cutout and home indicator to percentage-based sizing so they scale with the screenshot instead of a fixed pixel size, and addssidebarWidthIos/sidebarWidthAndroidprops so the fake status/home-indicator bars can match a partial-width drawer's dimming scrimaspect-squareon the Android bottom-nav icons made the fake chrome bar's shrink-to-fit width diverge from the actual screenshot widthTest plan
php artisan test --filter=Docspasses (95 tests)🤖 Generated with Claude Code