Add a way to mark folders and complete components as having a status

[jwir3]

(See attached screenshot for this to make a bit more sense)

I have the following structure for my components in Storybook:

Atoms
  | --- ComponentName
          | ---- Specific Instance
Molecules
....

Right now, only Specific Instance can have a status. It would be really nice if (probably in the storybook preview.js file), I could specify the status of the ComponentName (the overall component) and Atoms (folder) that the component previews are defined within.

Mostly, I'm just looking for this to be on the left nav bar, so I can see, at a glance, which of my folders is completely finished, and which components I need to work on yet.

[gavmck]

Yeah that would be awesome! I spent a good few hours trying to figure out how, but I don't think it's possible right now.

Any ideas?

[deh4g]

Hi @etchteam,

It says on the Readme.md that "You'll get an awesome label injected in the top toolbar and the sidebar.".

But if I understand what going on so far this add-on only works for the toolbar, not the sidebar. Correct?

[gavmck]

Hi @etchteam,

It says on the Readme.md that "You'll get an awesome label injected in the top toolbar and the sidebar.".

But if I understand what going on so far this add-on only works for the toolbar, not the sidebar. Correct?

@rodneysim we add a status dot label to the sidebar as well here: https://github.com/etchteam/storybook-addon-status/blob/master/src/register.tsx#L29

[Perni1984]

@gavmck maybe we can invest some time looking into this problem - what approaches did you try out, which didn't work?

[gavmck]

@Perni1984 Looking at the storybook files, I think it might be possible. You get the renderLabel method available on Root/Group/Story so you just need to check if parameters.status is available at that level.

Can't remember why, but we only allow it on stories at the moment: https://github.com/etchteam/storybook-addon-status/blob/master/src/register.tsx#L33

Could just be out of date 🤷

Here is the tree construction file in storybook for reference: https://github.com/storybookjs/storybook/blob/aa74f4f6a05aec74068669d581f0abfa162ff6ec/lib/ui/src/components/sidebar/Tree.tsx

[Perni1984]

Hey @gavmck thanks for the fast response.

The problem is that storybook only "passes" viewMode and docsOnly parameters if the node is of type group (see https://github.com/storybookjs/storybook/blob/ad3e6f0829a03462102a4834fef9288fd1dddeb9/lib/api/src/lib/stories.ts#L269) - so the status parameter is not available.

I can see 3 options here:

1. Make a PR to the storybook repo which passes more parameters (the reduced parameters are there very likely by design, so I don't think they will accept it).
2. Overwrite the renderLabel function on a group level in the story file - so far I have not been succesful on that - I am not sure if this is even possible
3. Misuse the viewMode Parameter to pass an object which contains the status and make a PR against storybook-addon-status to also read the status out of the viewMode Parameter.

I am not a fan of either one - but would you be happy to accept a PR that goes for 3.? - or do you have any other idea on how to get this done?

[gavmck]

Probably best to give 1 a spin first just to make sure, you never know and it's the "real" solution.