UI: Simple tag filtering #29333

shilman · 2024-10-11T10:09:24Z

Closes #

What I did

Design

Implementation

Shows number of selected tags
Shows the play-fn built in tag (if any stories have play functions) but hides other "system" tags
Scrolling bug when you remove all tags

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

Open the UI Sandbox
Try the various filters

Documentation

Needs 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 running npx storybook@0.0.0-pr-29333-sha-c7603f3d sandbox or in an existing project with npx storybook@0.0.0-pr-29333-sha-c7603f3d upgrade.

More information


Published version	`0.0.0-pr-29333-sha-c7603f3d`
Triggered by	@shilman
Repository	storybookjs/storybook
Branch	`shilman/simple-tag-filter`
Commit	`c7603f3d`
Datetime	Mon Oct 14 06:50:15 UTC 2024 (`1728888615`)
Workflow run	11322402774

To request a new release of this pull request, mention the @storybookjs/core team.

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=29333

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	78.7 MB	78.7 MB	0 B	1.28	0%
initSize	147 MB	147 MB	3.69 kB	-0.78	0%
diffSize	68.3 MB	68.3 MB	3.69 kB	-0.79	0%
buildSize	6.79 MB	6.8 MB	3.58 kB	1.19	0.1%
buildSbAddonsSize	1.5 MB	1.5 MB	16 B	-0.79	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.83 MB	1.84 MB	3.56 kB	43.1	0.2%
buildSbPreviewSize	270 kB	270 kB	0 B	-	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.8 MB	3.8 MB	3.58 kB	27.35	0.1%
buildPreviewSize	2.99 MB	2.99 MB	0 B	0.8	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	6.2s	20.8s	14.6s	1.34	🔺70.2%
generateTime	21s	20.3s	-710ms	-0.24	-3.5%
initTime	14.9s	13.5s	-1s -318ms	-0.21	-9.7%
buildTime	8s	9.6s	1.6s	0.05	16.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	6.4s	6.9s	513ms	0.03	7.4%
devManagerResponsive	4.3s	4.4s	62ms	-0.06	1.4%
devManagerHeaderVisible	747ms	604ms	-143ms	-0.32	-23.7%
devManagerIndexVisible	783ms	645ms	-138ms	-0.25	-21.4%
devStoryVisibleUncached	1s	1s	34ms	-0.02	3.1%
devStoryVisible	793ms	645ms	-148ms	-0.26	-22.9%
devAutodocsVisible	623ms	515ms	-108ms	-0.33	-21%
devMDXVisible	592ms	539ms	-53ms	-0.14	-9.8%
buildManagerHeaderVisible	656ms	566ms	-90ms	-0.07	-15.9%
buildManagerIndexVisible	714ms	568ms	-146ms	-0.16	-25.7%
buildStoryVisible	711ms	598ms	-113ms	-0.34	-18.9%
buildAutodocsVisible	440ms	460ms	20ms	-0.52	4.3%
buildMDXVisible	474ms	530ms	56ms	0.15	10.6%

Greptile Summary

This PR introduces a simple tag filtering feature to the Storybook UI, enhancing the sidebar's functionality for filtering stories based on tags.

Added new TagsFilter and TagsFilterPanel components in /code/core/src/manager/components/sidebar/
Updated Sidebar component to integrate tag filtering and remove 'Create New Story' button
Implemented logic to filter stories based on selected tags using experimental_setFilter in TagsFilter.tsx
Renamed STATIC_FILTER to TAG_FILTERS in common-manager.ts for consistency
Added new stories for TagsFilter and TagsFilterPanel components to showcase different states

nx-cloud · 2024-10-11T10:13:42Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 812f9d9. 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 target

nx run-many -t build --parallel=3

Sent with 💌 from NxCloud.

Sidnioulz

🤩 it's looking great!

I have a feeling that some users will want to filter by entry type (docs only or stories only). Do you reckon it could make sense, in a separate branch, to expose them as tags (type:story and type:docs) like you expose play-fn?

Sidnioulz · 2024-10-12T06:33:22Z

code/core/src/manager/components/sidebar/TagsFilter.stories.tsx

+import { TagsFilter } from './TagsFilter';
+
+const meta = {
+  component: TagsFilter,


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

I want our Storybooks to use auto-title as much as possible. I'll move the other stories over in a separate PR.

code/core/src/manager/components/sidebar/Sidebar.tsx

Sidnioulz · 2024-10-12T06:50:40Z

code/core/src/manager/components/sidebar/TagsFilter.stories.tsx

+  play: Open.play,
+};
+
+export const OpenEmpty: Story = {


I would if there shoould also be an empty state for when only internal tags are present, and users haven't yet defined custom tags? You mentioned wanting to show the play-fn tag but it would be a shame if it got in the way of feature onboarding.

greptile-apps

_{9 file(s) reviewed, 16 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2024-10-12T13:39:59Z

code/core/src/core-server/presets/common-manager.ts

      // 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
    );


style: Consider extracting this logic into a separate function for better readability

greptile-apps · 2024-10-12T13:40:58Z

code/core/src/manager/components/sidebar/Sidebar.tsx

+const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT';
+const isRendererReact = global.STORYBOOK_RENDERER === 'react';


style: Consider using environment variables or a configuration file for these global flags

greptile-apps · 2024-10-12T13:40:59Z

code/core/src/manager/components/sidebar/Sidebar.tsx

@@ -126,13 +163,15 @@ export const Sidebar = React.memo(function Sidebar({
  enableShortcuts = true,
  refs = {},
  onMenuClick,
-  showCreateStoryButton,
+  showCreateStoryButton = isDevelopment && isRendererReact,


logic: Default value depends on global variables, which might cause issues if they're not set correctly

greptile-apps · 2024-10-12T13:40:59Z

code/core/src/manager/components/sidebar/Sidebar.tsx

+const updateQueryParams = (params: Record<string, string>) => {
+  const url = new URL(window.location.href);
+  Object.entries(params).forEach(([key, value]) => {
+    if (value) {
+      url.searchParams.set(key, value);
+    } else {
+      url.searchParams.delete(key);
+    }
+  });
+  window.history.pushState({}, '', url);
+};


style: This function modifies the browser history directly. Consider using a routing library or API for better maintainability

greptile-apps · 2024-10-12T13:41:21Z

code/core/src/manager/components/sidebar/TagsFilter.stories.tsx

+
+const meta = {
+  component: TagsFilter,
+  tags: ['haha'],


style: consider removing this tag as it's not relevant to the component's functionality

greptile-apps · 2024-10-12T13:41:42Z

code/core/src/manager/components/sidebar/TagsFilter.tsx

+    <WithTooltip
+      placement="bottom"
+      trigger="click"
+      onVisibleChange={setExpanded}


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.

greptile-apps · 2024-10-12T13:41:57Z

code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx

+    toggleTag: fn(),
+    api: {
+      getDocsUrl: () => 'https://storybook.js.org/docs/',
+    } as any,


style: Consider using a more specific type for the api object instead of 'any'

greptile-apps · 2024-10-12T13:42:15Z

code/core/src/manager/components/sidebar/TagsFilterPanel.tsx

+  toggleTag,
+}: TagsFilterPanelProps) => {
+  const theme = useTheme();
+  const userTags = allTags.filter((tag) => tag === 'play-fn' || !BUILT_IN_TAGS.has(tag)).toSorted();


style: Consider using Array.prototype.sort() instead of .toSorted() for better browser compatibility

greptile-apps · 2024-10-12T13:42:16Z

code/core/src/manager/components/sidebar/TagsFilterPanel.tsx

+          return {
+            id,
+            title: tag,
+            right: <input type="checkbox" id={id} name={id} value={tag} checked={checked} />,


style: Consider using a controlled component for the checkbox

greptile-apps · 2024-10-12T13:42:34Z

code/core/src/manager/container/Sidebar.tsx

+      // 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,


style: Consider renaming 'internal_index' to a more descriptive name like 'indexJson' for clarity

shilman added 12 commits February 16, 2024 17:15

UI WIP

216f3d6

Merge branch 'next' into shilman/tags-filter

b2d4754

Merge branch 'next' into shilman/tags-filter

4cff5e1

Tag UI: state management

a5f8eb1

TagsFilter: Initial implementation and stories

be48b2b

Merge branch 'next' into shilman/tags-filter

eb4715e

Only show filter after index has bene created

7b69bae

Add count of selected filters

b8af895

Fix re-rendering bug

22a699b

TagsFilter: Don't use filtered index to generate tags

141aeeb

ignore cache & logs

8065a82

Merge branch 'next' into shilman/tags-filter

6017849

shilman and others added 3 commits October 11, 2024 19:01

Simplified design WIP

b96bcb7

Fix search bar structure and styling

e319c52

Tweaks

5529530

shilman added feature request ui ui: search tags labels Oct 12, 2024

Tags filter: Use built in menu components

e8a505c

shilman force-pushed the shilman/simple-tag-filter branch from d7baa28 to e8a505c Compare October 12, 2024 01:55

Cleanup

2b53b6e

shilman force-pushed the shilman/simple-tag-filter branch from 3acf141 to 2b53b6e Compare October 12, 2024 01:58

shilman added the ci:normal label Oct 12, 2024

shilman changed the title ~~UI WIP~~ UI: Simple tag filtering Oct 12, 2024

shilman mentioned this pull request Oct 12, 2024

UI: Interactive tag filtering #29279

Closed

14 tasks

Sidnioulz reviewed Oct 12, 2024

View reviewed changes

shilman marked this pull request as ready for review October 12, 2024 13:39

greptile-apps bot reviewed Oct 12, 2024

View reviewed changes

shilman added 6 commits October 12, 2024 22:00

Merge branch 'next' into shilman/simple-tag-filter

04bcaaa

Fix check

8d1fe91

Merge branch 'next' into shilman/simple-tag-filter

ff6d217

Add navigation options to applyQueryParams API

763e95e

Tags filter: Use built-in queryParams API

c7603f3

Fix TagsFilter stories

812f9d9

shilman self-assigned this Oct 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Simple tag filtering #29333

UI: Simple tag filtering #29333

shilman commented Oct 11, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Oct 11, 2024 •

edited

Loading

Sidnioulz left a comment

Sidnioulz Oct 12, 2024

shilman Oct 13, 2024

Sidnioulz Oct 12, 2024

shilman Oct 13, 2024

greptile-apps bot left a comment

greptile-apps bot Oct 12, 2024

greptile-apps bot Oct 12, 2024

greptile-apps bot Oct 12, 2024

greptile-apps bot Oct 12, 2024

greptile-apps bot Oct 12, 2024

greptile-apps bot Oct 12, 2024

greptile-apps bot Oct 12, 2024

greptile-apps bot Oct 12, 2024

greptile-apps bot Oct 12, 2024

greptile-apps bot Oct 12, 2024

		const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT';
		const isRendererReact = global.STORYBOOK_RENDERER === 'react';

UI: Simple tag filtering #29333

Are you sure you want to change the base?

UI: Simple tag filtering #29333

Conversation

shilman commented Oct 11, 2024 • edited by storybook-pr-benchmarking bot Loading

What I did

Design

Implementation

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

🦋 Canary release

Greptile Summary

nx-cloud bot commented Oct 11, 2024 • edited Loading

☁️ Nx Cloud Report

Sidnioulz left a comment

Choose a reason for hiding this comment

Sidnioulz Oct 12, 2024

Choose a reason for hiding this comment

shilman Oct 13, 2024

Choose a reason for hiding this comment

Sidnioulz Oct 12, 2024

Choose a reason for hiding this comment

shilman Oct 13, 2024

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot Oct 12, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 12, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 12, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 12, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 12, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 12, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 12, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 12, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 12, 2024

Choose a reason for hiding this comment

greptile-apps bot Oct 12, 2024

Choose a reason for hiding this comment

shilman commented Oct 11, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Oct 11, 2024 •

edited

Loading