UI: Simple tag filtering #29333
UI: Simple tag filtering #29333
Conversation
☁️ Nx Cloud ReportCI is running/has finished running commands for commit 816e595. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
shilman
force-pushed
the
shilman/simple-tag-filter
branch
from
d7baa28 to
e8a505c
Compare
shilman
force-pushed
the
shilman/simple-tag-filter
branch
from
3acf141 to
2b53b6e
Compare
| import { TagsFilter } from './TagsFilter'; | ||
|
|
||
| const meta = { | ||
| component: TagsFilter, |
There was a problem hiding this comment.
I guess you have to put the title explicitly to get these components to land in the same sidebar entry as the other Sidebar components?
vs 
There was a problem hiding this comment.
I want our Storybooks to use auto-title as much as possible. I'll move the other stories over in a separate PR.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
9 file(s) reviewed, 16 comment(s)
Edit PR Review Bot Settings | Greptile
| // we can filter out the primary story, but we still want to show autodocs | ||
| (tags.includes('dev') || item.type === 'docs') && | ||
| tags.filter((tag) => excludeTags[tag]).length === 0 | ||
| tags.filter((tag) => staticExcludeTags[tag]).length === 0 | ||
| ); |
There was a problem hiding this comment.
style: Consider extracting this logic into a separate function for better readability
| const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT'; | ||
| const isRendererReact = global.STORYBOOK_RENDERER === 'react'; |
There was a problem hiding this comment.
style: Consider using environment variables or a configuration file for these global flags
| <WithTooltip | ||
| placement="bottom" | ||
| trigger="click" | ||
| onVisibleChange={setExpanded} |
There was a problem hiding this comment.
style: The onVisibleChange prop is set to setExpanded, but expanded state is not used anywhere in the component. Consider removing this state if it's not needed.
| toggleTag: fn(), | ||
| api: { | ||
| getDocsUrl: () => 'https://storybook.js.org/docs/', | ||
| } as any, |
There was a problem hiding this comment.
style: Consider using a more specific type for the api object instead of 'any'
| toggleTag, | ||
| }: TagsFilterPanelProps) => { | ||
| const theme = useTheme(); | ||
| const userTags = allTags.filter((tag) => tag === 'play-fn' || !BUILT_IN_TAGS.has(tag)).toSorted(); |
There was a problem hiding this comment.
style: Consider using Array.prototype.sort() instead of .toSorted() for better browser compatibility
| return { | ||
| id, | ||
| title: tag, | ||
| right: <input type="checkbox" id={id} name={id} value={tag} checked={checked} />, |
There was a problem hiding this comment.
style: Consider using a controlled component for the checkbox
| // FIXME: This is the actual `index.json` index where the `index` below | ||
| // is actually the stories hash. We should fix this up and make it consistent. | ||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| internal_index, |
There was a problem hiding this comment.
style: Consider renaming 'internal_index' to a more descriptive name like 'indexJson' for clarity
shilman
force-pushed
the
shilman/simple-tag-filter
branch
from
e7ba7f5 to
7a90232
Compare
Closes #
QA
https://deploy-preview-234--storybook-frontpage.netlify.app/docs/8.4/writing-stories/tags#filtering-by-custom-tags
What I did
Design
Implementation
play-fnbuilt in tag (if any stories have play functions) but hides other "system" tagsFor later
storyanddocstags automaticallyChecklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
Documentation
🦋 Canary release
This pull request has been released as version
0.0.0-pr-29333-sha-c7603f3d. Try it out in a new sandbox by runningnpx [email protected] sandboxor in an existing project withnpx [email protected] upgrade.More information
0.0.0-pr-29333-sha-c7603f3dshilman/simple-tag-filterc7603f3d1728888615)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=29333Greptile Summary
This PR introduces a simple tag filtering feature to the Storybook UI, enhancing the sidebar's functionality for filtering stories based on tags.
TagsFilterandTagsFilterPanelcomponents in/code/core/src/manager/components/sidebar/Sidebarcomponent to integrate tag filtering and remove 'Create New Story' buttonexperimental_setFilterinTagsFilter.tsxSTATIC_FILTERtoTAG_FILTERSincommon-manager.tsfor consistencyTagsFilterandTagsFilterPanelcomponents to showcase different states