Draft: Add docs headings to search results #33593
Conversation
|
View your CI Pipeline Execution ↗ for commit a72e7f4
☁️ Nx Cloud last updated this comment at |
📝 WalkthroughWalkthroughThis change introduces searchable document headings throughout the story system. Headings are extracted from story names during indexing, propagated through API and manager types, and integrated into the sidebar search functionality with separate weighting. Search results display headings alongside story names, with a new heading variant added for UI rendering. Changes
Sequence DiagramsequenceDiagram
participant IndexGen as Indexing Engine
participant API as API Types
participant Search as Search Component
participant UI as UI Renderer
Note over IndexGen,UI: Document Heading Search Feature
IndexGen->>API: Extract & attach headings from story names
API->>Search: Provide DocsIndexEntry with headings
Search->>Search: Initialize Fuse with expanded keys<br/>(name: 0.6, headings: 0.1)
Note over Search: User enters search query
Search->>Search: Match against index +<br/>generate per-heading results
Search->>UI: Return results (docs items + heading variants)
UI->>UI: Render heading-typed icons &<br/>display heading text in results
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes ✨ Finishing touches
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: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
code/core/src/manager/components/sidebar/SearchResults.tsx (1)
181-211: Avoid rendering the entire headings array (and duplicates) in search results.Line 185 uses
item.headingsdirectly, which is likely an array; this renders a comma-joined list and can duplicate text for heading-specific results whereitem.namealready contains the heading. Consider rendering only the matched heading and skipping if already present in the name.🔧 Suggested adjustment
- const [icon] = item.status ? getStatus(theme, item.status) : []; - const heading = item.type === 'docs' && item.headings ? ` ${item.headings}` : undefined; + const [icon] = item.status ? getStatus(theme, item.status) : []; + const headingMatch = matches.find((match: Match) => match.key === 'headings'); + const heading = + item.type === 'docs' && headingMatch?.value && !item.name.includes(headingMatch.value) + ? ` ${headingMatch.value}` + : undefined;
🤖 Fix all issues with AI agents
In `@code/core/src/manager/components/sidebar/Search.tsx`:
- Around line 212-220: Search.tsx is generating heading anchor IDs with
heading.replaceAll(' ', '-').toLowerCase(), which diverges from Heading.tsx's
github-slugger logic and breaks navigation for punctuation/special chars and
duplicate headings; fix by using the same slugger used in Heading.tsx (import
and call slugs.slug(heading.toLowerCase())) when building the id in the
headings.forEach block (or alternatively use a precomputed heading ID from the
indexer), ensuring the id format matches Heading.tsx so anchors resolve
correctly.
🧹 Nitpick comments (1)
code/core/src/manager/utils/tree.ts (1)
67-69: Redundantnameproperty assignment.The
nameproperty is already included in the spread of...item. Addingname: item.nameexplicitly is redundant sinceItemalready containsname.🔧 Suggested simplification
export const searchItem = (item: Item, ref: Parameters<typeof getPath>[1]): SearchItem => { - return { ...item, refId: ref.id, name: item.name, path: getPath(item, ref) }; + return { ...item, refId: ref.id, path: getPath(item, ref) }; };
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 49 | 49 | 0 |
| Self size | 20.30 MB | 20.36 MB | 🚨 +60 KB 🚨 |
| Dependency size | 16.52 MB | 16.52 MB | 🎉 -4 B 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 159 | 159 | 0 |
| Self size | 30 KB | 30 KB | 🚨 +8 B 🚨 |
| Dependency size | 23.00 MB | 23.12 MB | 🚨 +115 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 183 | 183 | 0 |
| Self size | 775 KB | 775 KB | 🚨 +139 B 🚨 |
| Dependency size | 67.38 MB | 67.51 MB | 🚨 +130 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 176 | 176 | 0 |
| Self size | 30 KB | 30 KB | 🎉 -4 B 🎉 |
| Dependency size | 65.95 MB | 66.08 MB | 🚨 +130 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 50 | 50 | 0 |
| Self size | 1000 KB | 1000 KB | 🎉 -6 B 🎉 |
| Dependency size | 36.82 MB | 36.88 MB | 🚨 +60 KB 🚨 |
| Bundle Size Analyzer | node | node |
|
Hey @kroeder Do you want to schedule a pairing session about this? |
Closes N/A
Created from #26531
What I did
I started #26531 from scratch since it was hard to merge next into the original PR.
This PR adds docs-mode headings to the search results and makes it possible to not only search for the main title of a docs story. This aims to improve UX
Example
Given a story with the title "Table" and a docs heading "## Filtering", today it's not possible to search for "Filtering" or "Table Filtering".
With this PR, it should be possible to search for exactly that.
Checklist for Contributors
Todo's
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Caution
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.