Storybook: Hierarchy of stories ?

[Safa2222]

Hi guys ! I need to find a way to create nested stories for my storybook, i have the 3.4.3 version. I tried adding simple '/' in stories kind but it didn't work and the addon 'storybook-chapter' is giving me the error Uncaught TypeError: (0 , _addonLinks.register) is not a function

Is there any fix ?
Thanks !

[Keraito]

Hey @Safa2222, what do you mean exactly with nested stories? Do you mean how the stories are organised on the left in: http://storybooks-official.netlify.com/, or are you referring to something else?

[wuweiweiwu]

Hi @Safa2222,

I would recommend checking out the options addon

Specifically using the hierarchySeparator or hierarchyRootSeparator options:

ex: (in your configs)

import { setOptions } from '@storybook/addon-options';

setOptions({
  hierarchySeparator: /\/|\./, // matches a . or /
  hierarchyRootSeparator: /\|/, //matches a |
});

and then when writing stories

storiesOf('Addons|Links.Select', module)

would nest Links section under Addons and the Select stories will appear in that section.

Hope that helps!

[igor-dv]

As far as I remember, the "/" should be a default.

[Safa2222]

@Keraito : yes it was about the nesting options in the left menu of storybook.
@wuweiweiwu : Thanks a lot ... it worked ;)
@igor-dv : in my setOptions, hierarchySeparator and hierarchyRootSeparator were set to null that's why it didn't work by default.

[mohnish34]

Hi,

I created a storybook with stories with categories like Core, Forms and Primitives. Under each category there are separate stories. I need to change the pattern to Primitives, Core and Forms. Currently it is following alphabetical order which i don't want to follow. I want to implement my own ordering pattern

How can we achieve it in storybook? Please advice

[lyqht]

Currently the simple way out i can think of is to include a number in front of the category / story e.g.

I would like to know if there is any method to sort and display the stories manually to our own priority!

[shilman]

@lyqht there's a PR for it that will get merged as part of 5.2 (should be available next week after 5.1 is released)

[lyqht]

Alright, i look forward to it ^^ thank you!

[sanyamdogra]

Hello, how can I get this root 1 and root 3 to display in my project?

[dgana]

Hello, how can I get this root 1 and root 3 to display in my project?

storiesOf("Root1|Child A2", module).add('GrandChild A1.1" .......)

.storybook/config.js

import { addParameters } from "@storybook/react";

addParameters({
/**
     * regex for finding the hierarchy separator
     * @example:
     *   null - turn off hierarchy
     *   /\// - split by `/`
     *   /\./ - split by `.`
     *   /\/|\./ - split by `/` or `.`
     * @type {Regex}
     */
    hierarchySeparator: /\/|\./,
    /**
     * regex for finding the hierarchy root separator
     * @example:
     *   null - turn off multiple hierarchy roots
     *   /\|/ - split by `|`
     * @type {Regex}
     */
    hierarchyRootSeparator: /\|/
});

[StephanBijzitter]

For Storybook 5.x:

manager.js:

const {addons} = require('@storybook/addons');

addons.setConfig({
    hierarchySeparator: /\//,
    hierarchyRootSeparator: /\|/
});