docs: add prev/next navigation to guide doc pages - #14
Merged
Conversation
Follow enum-plus convention: append a static markdown table (Previous | Next) at the bottom of each guide doc page (Introduce/Install/Get Started/Changelog), linking via ?path=/docs/<story>--api with lang:zh-CN globals for CN docs. - Introduce: prev placeholder (- -), next -> Install - Install: prev -> Introduce, next -> Get Started - Get Started: prev -> Install, next -> Changelog - Changelog: prev -> Get Started, next placeholder (- -)
|
Warning Review limit reached
Next review available in: 39 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (5)
📝 WalkthroughWalkthroughStorybook documentation now includes localized previous/next navigation, story-based navigation for component pages, GitHub-Flavored Markdown support, and updated documentation styling and locale labels. ChangesStorybook documentation updates
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant DocsPage
participant StoryIndex
participant StorybookLink
Browser->>DocsPage: Open story URL
DocsPage->>StoryIndex: Resolve component, hook, and utility stories
StoryIndex-->>DocsPage: Return navigation metadata
DocsPage->>StorybookLink: Render localized previous/next links
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.storybook/docs-localized/GetStarted.en-US.mdx:
- Around line 61-63: Update the next-link target in
.storybook/docs-localized/GetStarted.en-US.mdx lines 61-63 to the Changelog
story with the en-US global. Apply the corresponding change in
.storybook/docs-localized/GetStarted.zh-CN.mdx lines 61-63, using the zh-CN
global instead of the BreakLines target.
In @.storybook/lazy-docs.tsx:
- Around line 23-45: Update the navigation lookup around currentStory,
allStories, and findIndex so guide routes without a matching story do not throw.
Only build and validate component, hook, or utility story navigation when
currentStory matches a supported story route; otherwise allow guide
documentation such as introduce, install, get-started, and changelog to render
without the lookup.
In @.storybook/preview.css:
- Around line 18-35: Move the generic `#storybook-docs` table:last-child td rule
before the td:first-child and td:last-child rules, preserving its font-weight
and font-size declarations so Stylelint selector-order checks pass.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: bcca3a1b-2cb5-4306-9732-fc6949e528bf
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (15)
.storybook/docs-localized/GetStarted.en-US.mdx.storybook/docs-localized/GetStarted.zh-CN.mdx.storybook/docs-localized/Install.en-US.mdx.storybook/docs-localized/Install.zh-CN.mdx.storybook/docs-localized/Introduce.en-US.mdx.storybook/docs-localized/Introduce.zh-CN.mdx.storybook/docs/Changelog.mdx.storybook/lazy-docs.tsx.storybook/locales/langs/en-US.ts.storybook/locales/langs/zh-CN.ts.storybook/main.ts.storybook/preview-head.html.storybook/preview.css.storybook/preview.tsxpackage.json
💤 Files with no reviewable changes (1)
- .storybook/preview-head.html
Comment on lines
+61
to
+63
| | Previous | Next | | ||
| | -------------------------------------------------------- | ------------------------------------------------------------------------- | | ||
| | [← Install](?path=/docs/install--api&globals=lang:en-US) | [BreakLines →](?path=/docs/components-breaklines--api&globals=lang:en-US) | |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Link Get Started to Changelog.
Both next links bypass the final guide page and open the BreakLines component story. This breaks the declared sequence: Introduce, Install, Get Started, Changelog.
.storybook/docs-localized/GetStarted.en-US.mdx#L61-L63: replace the BreakLines target with?path=/docs/changelog--api&globals=lang:en-US..storybook/docs-localized/GetStarted.zh-CN.mdx#L61-L63: replace the BreakLines target with?path=/docs/changelog--api&globals=lang:zh-CN.
📍 Affects 2 files
.storybook/docs-localized/GetStarted.en-US.mdx#L61-L63(this comment).storybook/docs-localized/GetStarted.zh-CN.mdx#L61-L63
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @.storybook/docs-localized/GetStarted.en-US.mdx around lines 61 - 63, Update
the next-link target in .storybook/docs-localized/GetStarted.en-US.mdx lines
61-63 to the Changelog story with the en-US global. Apply the corresponding
change in .storybook/docs-localized/GetStarted.zh-CN.mdx lines 61-63, using the
zh-CN global instead of the BreakLines target.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR enhances the Storybook documentation experience by adding previous/next navigation to the guide docs (Introduce/Install/Get Started/Changelog) and introducing a bottom navigator in the custom Storybook DocsPage, supported by GFM table rendering and new styling.
Changes:
- Added prev/next navigation blocks to localized guide MDX pages and the Changelog page.
- Introduced a bottom navigator in
.storybook/lazy-docs.tsxwith i18n labels, plus global docs CSS styling via.storybook/preview.css. - Enabled GitHub-flavored markdown tables in Storybook MDX via
remark-gfm, and migrated inline head styles intopreview.css.
Reviewed changes
Copilot reviewed 15 out of 16 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Adds remark-gfm to support GFM tables in Storybook MDX. |
| package-lock.json | Locks remark-gfm and its transitive dependencies. |
| .storybook/main.ts | Configures @storybook/addon-docs MDX compilation to use remark-gfm. |
| .storybook/preview.tsx | Loads preview.css and updates the zh-CN toolbar label. |
| .storybook/preview.css | Adds global docs styling, including formatting for the bottom navigation table. |
| .storybook/preview-head.html | Removes inline docs padding CSS (moved to preview.css). |
| .storybook/lazy-docs.tsx | Adds a bottom prev/next navigator for API docs pages with i18n labels. |
| .storybook/locales/langs/en-US.ts | Adds translations for docs navigator labels. |
| .storybook/locales/langs/zh-CN.ts | Adds translations for docs navigator labels. |
| .storybook/docs/Changelog.mdx | Appends a prev/next navigation table under the changelog. |
| .storybook/docs-localized/Introduce.en-US.mdx | Appends guide navigation table (Introduce → Install). |
| .storybook/docs-localized/Introduce.zh-CN.mdx | Appends guide navigation table (介绍 → 安装). |
| .storybook/docs-localized/Install.en-US.mdx | Appends guide navigation table (Introduce ↔ Get Started). |
| .storybook/docs-localized/Install.zh-CN.mdx | Appends guide navigation table (介绍 ↔ 快速开始). |
| .storybook/docs-localized/GetStarted.en-US.mdx | Appends guide navigation table (currently points to BreakLines). |
| .storybook/docs-localized/GetStarted.zh-CN.mdx | Appends guide navigation table (currently points to BreakLines). |
Suppressed comments (3)
.storybook/lazy-docs.tsx:78
- Avoid
@ts-expect-error+ unsupportedstyleprop on the next link as well; keepLinkToprops type-safe by styling a child element.
{index < allStories.length - 1 ? (
// @ts-expect-error: because style props exists but not exposed
<LinkTo kind={allStories[index + 1].url} story="api" style={{ fontSize: 18, fontWeight: 600 }}>
{allStories[index + 1].name} →
.storybook/lazy-docs.tsx:40
LinkToexpectskindto match the Storybook story title (e.g.Components/BreakLines,Hooks/useDebounce). Buildingurlascomponents/BreakLines(lowercase group) will not match existing story titles, so prev/next navigation won’t resolve.
const allStories = useMemo(
() =>
[...componentPaths, ...hookPaths, ...utilPaths].map((path) => {
const parts = path.split('/');
return {
path: path.toLowerCase(),
name: parts[3],
.storybook/lazy-docs.tsx:72
- The fallback previous link uses
kind="get-started", but Storybook kinds are thetitlestrings (here the guide page title isGet Started). Using the slug will preventLinkTofrom navigating.
) : (
// @ts-expect-error: because style props exists but not exposed
<LinkTo kind="get-started" story="api" style={{ fontSize: 18, fontWeight: 600 }}>
← {t('storybook.stories.nav.getStarted')}
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+23
to
+30
| const currentStory = useMemo(() => { | ||
| const path = new URLSearchParams(top?.location.search).get('path'); | ||
| const matches = path?.match(/\/docs\/(components|hooks|utils)-(\w+?)--api/); | ||
| if (matches && matches.length > 2) { | ||
| return `./stories/${matches[1]}/${matches[2]}/index.stories.tsx`; | ||
| } | ||
| return null; | ||
| }, []); |
Comment on lines
+64
to
+67
| // @ts-expect-error: because style props exists but not exposed | ||
| <LinkTo kind={allStories[index - 1].url} story="api" style={{ fontSize: 18, fontWeight: 600 }}> | ||
| ← {allStories[index - 1].name} | ||
| </LinkTo> |
|
|
||
| | 上一篇 | 下一篇 | | ||
| | ----------------------------------------------------- | ------------------------------------------------------------------------- | | ||
| | [← 安装](?path=/docs/install--api&globals=lang:zh-CN) | [BreakLines →](?path=/docs/components-breaklines--api&globals=lang:zh-CN) | |
|
|
||
| | Previous | Next | | ||
| | -------------------------------------------------------- | ------------------------------------------------------------------------- | | ||
| | [← Install](?path=/docs/install--api&globals=lang:en-US) | [BreakLines →](?path=/docs/components-breaklines--api&globals=lang:en-US) | |
|
|
||
| | Previous | Next | | ||
| | --------------------------------------------- | ----- | | ||
| | [← Get Started](?path=/docs/get-started--api) | \- \- | |
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
Add previous/next navigation to the four guide doc pages (Introduce, Install, Get Started, Changelog) so readers can browse the documentation sequentially.
Changes
d7f01cd)lazy-docs.tsx+preview.csswith bilingual labels (en-US/zh-CN) (cc7fbd7)5cf8d49)remark-gfmdev dependency; replacepreview-head.htmlwithpreview.cssFiles
16 files changed, +703 / -18:
.storybook/docs-localized/*.mdx,.storybook/lazy-docs.tsx,.storybook/main.ts,.storybook/preview.tsx,.storybook/preview.css,.storybook/locales/langs/*.ts,package.json.Verification
Summary by CodeRabbit
New Features
Style
Documentation