feat(docs): interactive story previews for react components#1779
Draft
te6-in wants to merge 11 commits into
Draft
feat(docs): interactive story previews for react components#1779te6-in wants to merge 11 commits into
te6-in wants to merge 11 commits into
Conversation
Replace the static preview ComponentExample with @fumadocs/story WithControl on the action-button page. - register the story webpack loader manually; createNextStory passes its glob filter straight to webpack `test`, which rejects non-absolute strings - add a controls filter loader that drops props declared in node_modules, mirroring react-type-table's filtering - add withStoryPreview to wrap stories with the ComponentExample canvas and redeclare call-site props (e.g. children) so they survive the filter - bump fumadocs-core/ui to 16.11.3 (story peer requires ^16.10) with follow-up fixes: blog publishedAt schema (js-yaml 5 parses timestamps as strings), tailwindcss 4.3 (fumadocs-ui uses inset-s utilities), and shiki 4 (rehypeCode option types) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
FieldSet already supports `collapsible`, but WithControl hardcodes the call without it — pass `collapsible: false` so the props panel starts open. Worth upstreaming as a defineStory option. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Copy the story render subtree (WithControl, arg-form FieldSet, select, input, defineStoryFactory) into docs/components/story so the Story UI can be customized directly instead of patching the package. lib/story.ts now uses the vendored factory, routing all story pages through the owned render layer. type-tree and the webpack story loader stay on the published package; the loader still injects _generated because it detects stories by the defineStory call name, not import source. Bake collapsible: false into the vendored FieldSet call and drop the now-unused @fumadocs/story@1.2.0 patch that set it on the package's WithControl. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…oader
The controls filter drops props declared only in node_modules, which
includes React's `children`. Special-case `children` so it survives and
renders as a string control (via ReplaceReactNode), removing the need for
a per-story withStoryPreview<{ children?: string }>() override.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Convert the hero preview of each non-deprecated react component doc from
the static ComponentExample to an @fumadocs/story interactive preview.
- add preview.story.tsx for every remaining component and wire each MDX
hero to <Preview />; preview.tsx is kept (still used by Examples sections)
- drop the withStoryPreview<{ children?: string }>() overrides from
badge/text/action-button (children now surfaces via the filter loader)
- drop dead children controls on progress-circle/identity-placeholder via
children?: never (they type but never render children)
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Import the type-tree runtime helpers from the client-safe sampler/stringify/validator submodules instead of the barrel, whose builder.js re-export drags ts-morph (a Node-only compiler using node: builtins) into the browser bundle and breaks `next build` with output: export. Patch @fumadocs/story to expose those submodule subpaths. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Snackbar reads useSnackbarContext, so the statically-rendered preview needs a SnackbarProvider ancestor; without it the static export prerender of /react/components/snackbar throws. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the hand-written control interfaces with the components' real prop types (ComponentPropsWithoutRef / withStoryPreview<Extra> extra-key validation) so the controls panel drives actual props, drop the now-unused displayName, and split the select-box preview into Check and Radio panels. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The controls filter loader now reads each surviving prop's `@default` JSDoc tag (SEED recipe types tag their variants) and emits a `defaults` map into `_generated`. The story factory merges it under `initial` with precedence component @default < story initial < fixed, so a Chip Radio or Switch preselects the component's real default instead of the first member/off state. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add a shared `icon-set` (mirrored fill/line sets keyed by icon component name) so story icon slots become a Chip Radio picker: arg-form detects an icon enum when every member resolves to a known icon, rendering the real glyph as a prefix with a prettified label, plus an "Unset" chip for optional slots via the NO_ICON sentinel. Rewire the FAB, list, swipeable-menu-sheet, and tag-group previews onto it. Also treat SEED boolean props (`true | false` literal enums) as a Switch, wrap the enum/variant chip rows in ScrollFog so they scroll horizontally instead of wrapping, swap the field unset control to an ActionButton, and drop the unused JsonInput. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Contributor
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
Alpha Preview (Storybook)
|
Contributor
Alpha Preview (Stackflow SPA)
|
Contributor
Alpha Preview (Docs)
|
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.
No description provided.