search

tajo / ladle

🥄 Develop, test and document your React story components faster.
https://www.ladle.dev
MIT License
2.62k stars 91 forks source link

Some way to customize the story navigation tree #569

Open hiddenist opened 3 months ago

hiddenist commented 3 months ago

Is your feature request related to a problem? Please describe.

The story navigation in Ladle has become fairly cluttered, because we have a lot of stories in the project that I'm using. Right now it takes a lot of discipline to keep the story titles to change the navigation folders

Describe the solution you'd like

I would like to be able to use the existing folder structure of stories to help organize the story navigation.

I think an ideal situation would be to allow some kind of custom filtering to determine the folder structure (similar to "storyOrder" from the config), because just using the raw folder structure as is might not make for very good sidebar navigation in the UI.

Describe alternatives you've considered

Using the levels that get built into the meta.json instead of building it strictly from the story name seems like it would be useful. This would still require some kind of custom filtering to be able to adjust the tree structure, though.

(As a side note, because the stories are built out from the story keys, capitalization and symbols are lost in the sidebar navigation, and it would be nice to have those. I could open a separate issue for that, it would be nice to have the full titles displayed as they were originally written in the story default export's title)

Additional context

In my project, we have two separate packages, so one big thing I want to be able to do is have a top-level folder in the sidebar navigation for each package. I think this is part of why it would be a bit more challenging to auto-detect a navigation structure just based on file structure. But if I had the ability to take the the full path of the story, I could use my own knowledge of my project's organizational structure to build out a sane nav tree that made sense for my particular case.

Since we're using visual snapshot tests, I would personally prefer if the story keys themselves didn't have to change for me to reorganize the sidebar structure (since this would end up changing all of our snapshot image filenames).

I started looking into how to implement this. I found that the nav tree structure is based strictly on the sorted story keys right now, so it looks like there would be a fair bit of work involved here.

tajo commented 3 months ago

As a side note, because the stories are built out from the story keys, capitalization and symbols are lost in the sidebar navigation, and it would be nice to have those. I could open a separate issue for that, it would be nice to have the full titles displayed as they were originally written in the story default export's title

Yea, we could enhance the internal story representation to preserve storyName as a label that can be later used in the side navigation. There used be an issue open for that.

https://ladle.dev/docs/stories#name-customization

I feel like you can pretty much achieve an arbitrary hierarchy by setting title/storyName and combination of / already. But it's going to impact the story keys. That would be actually really hard to disconnect at this point (a massive breaking change down the ecosystem).

hiddenist commented 2 months ago

I think preserving the title / story name, and using those for the navigation tree would be a great.

That might be a good first step here and I think would be an improvement in the way the navigation displays.