Repository navigation
feat: support story tags and hide !dev stories from the sidebar - #969
Open
officialasishkumar wants to merge 1 commit into
Open
officialasishkumar wants to merge 1 commit into
officialasishkumar wants to merge 1 commit into
Conversation
Every entry in the on-device story index was given the fixed tags `['story']`, so the `tags` set in preview, meta and stories were lost and Storybook's tag semantics did not work on device. Most visibly, the documented `tags: ['!dev']` way to keep a story out of the sidebar had no effect. Index entries now get their tags the way Storybook's index generator does for the web: the default `dev`, `test` and `manifest` tags, then the project, meta and story tags, combined with `combineTags` so `!tag` removes a tag added at a higher level. Metas and stories with a play function get `play-fn` after their own tags, like CsfFile does. - prepareStories reads the tags of plain CSF and CSF factories (from `input`), and takes the project tags as a new optional `projectTags` option. start() and updateView() pass the tags of the preview annotations. - buildIndex, used by the channel server's /index.json and the MCP server, reads the meta and story tags parsed by CsfFile and the static `tags` of the preview file, so it reports the same tags. - The sidebar uses a static filter like the web manager: entries without the `dev` tag are left out of the story hash, and so are groups that only hold hidden stories. When there is no initial or persisted selection, the first story shown in the sidebar is selected instead of the first entry in the index. Hidden stories can still be selected by id, for example from a deep link or `initialSelection`. The writing stories docs gain a "Using tags" section. Refs storybookjs#866
🦋 Changeset detectedLatest commit: f28594d The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Codex Review Summary: ❌ FailedThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
Member
|
could you include screenshots please? |
This branch has not been deployed
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.
Issue: #866
What I did
Every entry in the on-device story index got the fixed tags
['story'], so thetagsset inpreview, meta and stories never reached the index and Storybook's tag behaviour didn't work on device. The most visible gap istags: ['!dev'], the documented way to keep a story out of the sidebar, which did nothing.This puts the real tags in the index, the same way Storybook's
StoryIndexGeneratordoes for the web, and makes the sidebar respectdevlike the web manager's static filter. It's the groundwork #866 needs: tags now exist in the index for the UI and tools to use. It doesn't add tag badges to the sidebar, since how they should look still needs deciding.Changes:
storyTags.ts(new):combineStoryTagsstarts from the defaultdev,testandmanifesttags, then applies the project, meta and story tags withcombineTagsfromstorybook/internal/csf, so!tagremoves a tag added higher up. Metas and stories with a play function getplay-fnafter their own tags, asCsfFiledoes.prepareStories: reads tags from plain CSF and from CSF factories (oninput, including.extend()), and takes a new optionalprojectTagsoption.start()andupdateView()pass thetagsof the preview annotations, which covers both a plain preview anddefinePreview.buildIndex: this backs the channel server's/index.jsonand the MCP server. It uses the meta and story tags thatCsfFilealready parses, and reads the statictagsof the preview file withreadConfig, as the web does. Iftagsexists but isn't a static string array, it warns. A preview that can't be read statically adds no tags.Viewpasses astatic-filtertotransformStoryIndexToStoriesHash, so entries withoutdevare left out, along with any groups that would be empty. With no initial or persisted selection, the first story shown in the sidebar is selected rather than the first entry in the index, so a hidden story isn't opened on launch. Hidden stories stay in the index and can still be selected by id, for example from a deep link,initialSelectionor the websocket channel.docs/docs/intro/writing-stories.md.@storybook/react-native.Tests:
prepareStories.test.ts: project, meta and story tags with negation, CSF2 function stories,play-fn, and CSF factories including.extend().storyTags.test.ts: the tag helpers, andSIDEBAR_FILTERSpassed throughtransformStoryIndexToStoriesHash.View.test.ts: the default selection skips a!devstory.buildIndexhas no jest test becausestorybook/internal/commonandcsf-toolsonly load as ESM under this jest setup. That's also whychannelServer.test.tsmocks it.How to test
pnpm build pnpm --filter @storybook/react-native testI ran the
@storybook/react-nativejest suite (15 suites, 88 tests),check:types, ESLint and Prettier on the changed files. I also calledbuildIndexfrom the built package againstexamples/expo-example. With a temporarytags: ['custom']in itsdefinePreviewpreview and a temporarytags: ['!dev']story, every entry gotcustom, the hidden story lostdev, and the factory story with a play function gotplay-fn.To try it on device, add
tags: ['!dev']to a story inexamples/expo-exampleand runpnpm example. The story disappears from the sidebar and search, and a component whose stories are all hidden disappears too.