Substories/Hierarchy

[joeruello]

Would be nice to be able to have "Substories" or a Hierarchy of stories. My case involves various mini "apps" being contained in the same repo. A simple solution would be an option to display stores named like ui.core.foo and ui.core.bar like:

ui
└── core
    ├── bar
    └── foo

With support for expanding and collapsing nodes.

[arunoda]

Currently, we've no plan to implement that. That's because it makes navigation harder. You can namespace story kinds with dot like "ui.core", "ui.app". Then you can filter them as you need.

If there are a lot of stories, you can start a few storybook instances. You can do that by having two storybook config directories. But, anyway that's an extreme case.

[zeroasterisk]

I'm willing to concede this point, and thought I'd just make a different config and run it on a different port and whatnot...

But I think it'd be much better to allow storybook to take multiple config files... and then toggle between named config files, perhaps reloading...

As for UI to switch configs, it would only appear if your config file "loaded" other config files, and it could be sidebar items at the top or bottom of the sidebar nav.

Anyway - I think for larger apps, if you can't (or don't) split out configs, it's kinda crazy.

[joeruello]

Adding additional configs seems to be overly complex. What about a toggle for classic/hierarchy view? I'm happy spike out an implementation over the next few days.

[travi]

This would be a very valuable feature to me as well, but for organization of component types within a single app rather than for multiple apps.

I would be more than happy to provide any help in shaping an implementation that could work for both use cases if this is able to move forward.

[arunoda]

@travi One of our another idea is to provide a drop down menu just below the filter box to select the category.

A category is assigned in the config.js and different set of files. So, we can have a another layer of grouping.

[travi]

I think that type of solution would be enough to satisfy my needs at this point. In addition, I think the namespacing convention mentioned above could still be a reasonable way to assign the category that could be interpreted into the choices in the drop down. Such a solution would enable linking across categories to still remain simple as well.

[sethkinast]

The way that we're getting around this in the app I'm building (hundreds of components, organized inside loose "pillar" areas) is with a script that dynamically writes out the stories for the area we're currently working on.

find.file(
  /\.story\.js/,
  path.resolve(__dirname, '../src/app/components', targetComponentPath),
  function(files) {
    var requires = files.map(function(file) {
      return "require('" + path.relative(__dirname, file) + "');";
    });
    fs.writeFileSync(path.resolve(__dirname, '../.storybook/stories.js'), requires.join("\n"));
  }
);

This means that Storybook doesn't even have to build the other components. I would love some level of support for this as a built-in option.

[zvictor]

#201 could help on this.

[markopavlovic]

any updates on this one?

[AndruBot]

+1

[AtNovember]

I'm argee thats a very useful feature!

[danielbartsch]

+1

[lnmunhoz]

+1

[isuvorov]

+1

[noahprince22]

+1

[mystetskyivlad]

+1

[FranziAndFinn]

+1

[majapw]

Hey @arunoda, has there been any progress on the categories implementation front?

If not, does anyone else have an example app that toggles between two storybook configs?

[TheSisb]

+1 I absolutely need one additional level of nesting :/

[johnnyghost]

+1

[iaanvn]

+1

[mzedeler]

+1

[hadfieldn]

+1

[imsnif]

+1

[1i1it]

+1

[revolunet]

well looks like while your app grows, the components list grows too, and you need some more nesting. 1 more level would already cover much cases

[nirhart]

+1

[igor-dv]

@TheSisb , thanks, will be fixed in the official release.

@psimyn , in the current implementation it's not possible.. but might be changed.. @usulpro mentioned this in the initial PR too.
IMO this is not a good behavior (and brings more complexity). Comparing it to the every IDE, there are namespaces (dirs/folders/packages) and could be some items in those namespaces (or near by) with the same name..
Anyway, if this is a desired behavior of the community, it should be changed, but I wouldn't like it be stopper for the release =)

[TimothyKrajewski]

This is the exact solution I needed !!! thank you +1

[ndelangen]

@psimyn Please open a new issue describing the feature? This issue will be closed real soon with the release of 3.2.0

[gaurav5430]

is having multiple level of nesting now possible with the new CSF format ?

[ndelangen]

@gaurav5430 it's been possible for some time, see our example here:

CSF:

import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '@storybook/react/demo';

export default {
  title: 'Other/Demo/Welcome',
  component: Welcome,
};

export const ToStorybook = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;
ToStorybook.storyName = 'to Storybook';

[gaurav5430]

Hey @ndelangen
Thanks i get that from here: https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy

I think what I want is the ability to create sub-folders based on story.name and not only the default export title

export default {
  title: 'Other/Demo/Welcome',
  component: Welcome,
};

export const ToStorybook = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;
ToStorybook.story = { name: 'to/Storybook' };

would show up as Other/Demo/Welcome/To/Storybook

[gaurav5430]

I think a workaround for the above issue would be to create multiple story files and export default with the correct hierarchy in each of them.

like in one.stories.js:

export default {
  title: 'Other/Demo/Welcome/One',
  component: Welcome,
};

export const ToStorybookOne = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;

and in two.stories.js

export default {
  title: 'Other/Demo/Welcome/Two',
  component: Welcome,
};

export const ToStorybookTwo = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;

That way, both the stories would show up as expected in the storybook folder structure

[shilman]

@gaurav5430 that's the recommended usage, and not a workaround. 😄

[gaurav5430]

@gaurav5430 that's the recommended usage, and not a workaround. 😄

Yes, I was just hesitant to do that as both these files are for different states of the same component. In my case, the component has 2 main states and multiple sub states based on those 2 main states. Usually I would keep all the states of the component in the same file, but in this case i would need to have a separate file for hierarchy in stories.

[andre-brdoch]

Hey @ndelangen Thanks i get that from here: https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy

I think what I want is the ability to create sub-folders based on story.name and not only the default export title

export default {
  title: 'Other/Demo/Welcome',
  component: Welcome,
};

export const ToStorybook = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;
ToStorybook.story = { name: 'to/Storybook' };

would show up as Other/Demo/Welcome/To/Storybook

I would also like to see something like this. Having to create a new file just to create some visual hierarchy is really cumbersome. On the other hand, our storybook gets cluttered really quickly if we dont create subfolders - Designers want an easy to understand storybook where they know where to click, and Developers want to cover all their test states, leading to dozens of stories per component. Being able to group those easily would help a lot with this problem.