Repository navigation
fix(examples): Tailwind 4 auth-demo restyle, component gallery and screenshot script - #48
Merged
Merged
Conversation
The demo kept a v3-style tailwind.config.ts whose content glob pointed at the SDK's dist; Tailwind 4 ignores it, so the SDK components rendered unstyled. The config is gone, globals.css is CSS-first with Hypery's tokens, the app imports @hyperyai/sdk/styles.css, and every page is redesigned in the hypery.ai look with light and dark themes. Needs the SDK release that ships styles.css.
/gallery renders every SDK component in its own frame, signed in as a sample user through HyperyTestProvider with sample gateway data, with ?theme= and ?shot= to show one at a time. scripts/screenshots.mjs captures each frame in light and dark at 2x with Playwright, which is how the SDK's docs images are made.
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.
The demo's sign-in modal rendered nearly unstyled.
auth-demohad a v3-styletailwind.config.tswhosecontentglob pointed at the SDK's dist, and Tailwind 4 ignores that file.Needs the SDK release from hyperyai/hypery-sdk#36 (
@hyperyai/sdk/styles.cssand@hyperyai/sdk/testing). Until it's published, the build fails on those imports.package.jsonkeeps the published^1.0.0range; it was verified against a localnpm packof that branch.Changes
tailwind.config.tsis gone.app/globals.cssuses@import "tailwindcss", Hypery's design tokens and@theme inline. The layout imports@hyperyai/sdk/styles.cssonce.AuthButton/UserButton;ModernAuthForm;/gallery. Every SDK component in its owndata-shotframe, signed in as a sample user ("Ada Lovelace") throughHyperyTestProvider, with sample gateway data, so it works without an account.?theme=light|darkpicks the theme and?shot=<name>shows one component.scripts/screenshots.mjs(npm run screenshots -- <out-dir>). Playwright, using the installed Chrome. It captures each frame in light and dark at 2x, tightly cropped on a transparent background with the full shadow. It's how the SDK'sdocs/imagesare made.playwrightis a dev dependency.lucide-reactis a direct dependency for the demo's icons.npm run buildpasses.