Core: Add renderLabel to customize sidebar tree labels

[tooppaaa]

Issue: Lack of capability to add elements to

(Updated after @ghengeveld work)

sidebar subheadings (most important one in my opinion)
sidebar items
folder
component
story
This PR aims as a proposal for this and basis of discussions

Should we keep double icons when prefix is set ?
Should it be called prefix ?

[github-actions]

	Fails
🚫	PR is marked with "in progress" label.

Generated by 🚫 dangerJS against 3901ddc

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

cc @domyen @ghengeveld let's see what we can do to get this over the line

[wKich]

Yeah. It would be great to add prefix for items.

[saulmases]

I comment here because there is also interest in being able to customise storybook sidebar, like adding a prefix before the items so we can add there things like component status in the sidebar.

[wKich]

@tooppaaa, @shilman, can we also add a method to the client API that allows changing prefixes from code?

[tooppaaa]

@wKich, that can be an interesting feature. I'd like to get this one merged before bringing more changes

[tooppaaa]

@shilman merged next into this one.

[tooppaaa]

@ghengeveld any update ?

[ghengeveld]

Hey, I would like to propose the following:

• We rename storyPrefix to sidebar in the config.
• This accepts an object, with a storyLabel property (and potentially other sidebar config options, later down the road).
• storyLabel is a function, which takes an Item (Root | Group | Story) and should return a string or ReactNode.
• The default implementation would be item => item.name.

This would allow much more flexibility in terms of how the label is rendered in the sidebar.