Uh oh!
There was an error while loading. Please reload this page.
feat(swingset): add collapsible code footer to component examples - #8891
Merged
Conversation
Each `<Story>` example in the Components layer now renders a 'View code' footer that expands to show a clean usage snippet of the example. Story modules expose their own source via a `?raw` self-import; `StoryEmbed` extracts the previewed story function and strips its knob-harness scaffolding before display.
🦋 Changeset detectedLatest commit: 3071ac4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types 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 |
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📝 WalkthroughWalkthroughAdds an opt-in "View code" footer to Swingset story embeds. Story files self-export raw source via a ChangesStory code footer feature
Sequence Diagram(s)sequenceDiagram
participant Browser
participant StoryEmbed
participant exampleSnippet as toUsageSnippet
participant CodeFooter
participant useShikiHtml
participant Shiki
Browser->>StoryEmbed: render <Story name="X" />
StoryEmbed->>exampleSnippet: extractStorySource(__source, name) → fnSource
exampleSnippet-->>StoryEmbed: toUsageSnippet(fnSource) → snippet
StoryEmbed->>CodeFooter: source=snippet
CodeFooter->>useShikiHtml: code, lang="tsx"
useShikiHtml->>Shiki: codeToHtml()
Shiki-->>useShikiHtml: highlighted HTML
useShikiHtml-->>CodeFooter: html state
CodeFooter-->>Browser: collapsible "View code" footer
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
Comment |
@clerk/astro@clerk/backend@clerk/chrome-extension@clerk/clerk-js@clerk/expo@clerk/expo-passkeys@clerk/express@clerk/fastify@clerk/hono@clerk/localizations@clerk/nextjs@clerk/nuxt@clerk/react@clerk/react-router@clerk/shared@clerk/tanstack-react-start@clerk/testing@clerk/ui@clerk/upgrade@clerk/vuecommit: |
kylemac
enabled auto-merge (squash)
June 17, 2026 13:32
alexcarpenter
approved these changes
Jun 17, 2026
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 freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
TLDR
Description
Adds a shadcn-style collapsible "code" footer to
<Story>examples on the Components layer of the swingset docs app (Button, Input, Dialog, Heading, Tabs, Text). Each example is collapsed by default to a full-width "View code" toggle that expands with a height animation to reveal a clean usage snippet of that example. The snippet is derived by having each story module expose its own source via a?rawself-import (wired through a webpackasset/sourcerule that also excludes?rawfrom Next's SWC loader so the source isn't transpiled first);StoryEmbedthen extracts the previewed story function andtoUsageSnippetstrips its knob-harness scaffolding ({...knobsAsProps(props)}and the function wrapper) down to the returned JSX. Shiki highlighting is shared with the existingCodeBlockvia a newuseShikiHtmlhook, and the CLAUDE.md house-style guide is updated so the footer is added to every Components example going forward. To test:pnpm run dev:swingsetand open/components/text(or any Components page) — each example shows a "View code" toggle that animates open.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Documentation