feat: nested grouping of stories with "group/story" syntax

[dannyhw]

Issue: #205

What I did

thanks to @Jonatthu for getting this started with #457

This adds an initial version of categories/nested stories in the sidebar

How to test

• run example project and see the sidebar and storylist story

Screen.Recording.2023-06-18.at.20.45.42.mov

[socket-security]

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

Ignoring: [email protected]

Next steps

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore [email protected] bar@* or ignore all packages with @SocketSecurity ignore-all

[socket-security]

New and updated dependency changes detected. Learn more about Socket for GitHub ↗︎

Packages		Version	New capabilities	Transitives1	Size	Publisher
@types/jest	🆕	29.5.2	None	+0	79.3 kB	types
react-native	⬆️	0.71.3...0.71.8	None	+8/-10	60.4 MB	react-native-bot

Footnotes

1. https://docs.socket.dev ↩

[dannyhw]

@SocketSecurity ignore [email protected]

[jonathanj]

I just have two questions, one of which I commented on the changes for. I think that item.stories changes only when necessary instead of being recomputed on render, but thought I would ask anyway. The app in the video still looks snappy though, so there's probably not a serious performance regression, feel free to resolve my comment.

My other question is more of a (hypothetical) UX question: What happens if you have a few levels of nesting and medium length story names? Will list items end up squished towards the right? Might be easier to see what problems people run into and address them when/if they happen.

Otherwise this looks like a really nice improvement!

[jonathanj]

It's not super clear from reading the calling code whether item.stories is a stable reference. Does it only change when Storybook core needs to update (because of HMR or whatever else)?

[dannyhw]

When filtering the tree can be recreated, its based on the 'data' state which gets set when filtering

[dannyhw]

added flex-srhink and maximum lines for story headers so we get elipsis when it goes over

[dannyhw]

Going to merge and make a new alpha version with these changes.