Storybook: Auto generate story hierarchy based on local directory structure

[barclayd]

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

I am really enjoying using Storybook. In order to organise my stories, I am using the React Atomic Design hierarchy solution, organising the stories in a folder per story within a directory of 'atoms', 'molecules', 'organisms' and 'templates' like so:

└── atoms
    ├── Button
       └── Button.js
       └── StyledButton.js
       └── Button.stories.js
└── molecules
    ├── Search
       └── Search.js
       └── StyledSearch.js
       └── Search.stories.js
    └── ActionButton
       └── ActionButton.js
       └── StyledActionButton.js
       └── ActionButton.stories.js

At the moment, in order to reflect the local directory structure of stories organised under atoms and molecules, I am using the story hierarchy such asstoriesOf(`atoms/Button`, module) within Button.stories.js for example.

Describe the solution you'd like

I was wondering if there was a way that this could be automated - saving manual work in having to manually state every directory name. This would allow for improved, easier organisation of stories whilst also minimising work that would be involved in categorising a story for example. This could be achieved through something like: storiesOf(`${parentDir}/Button`, module) when defining storiesOf in Button.stories.js where parentDir would return the directory name of the parent directory before the story was compiled - thus reflecting the local directory structure within Storybook.

Describe alternatives you've considered

The logic for obtaining the parent can be obtained and configured easily using basic array manipulation in JavaScript but I am unsure how this logic could be applied to Storybook after Webpack has configured the files.

const atomicDir = (file) => {
  const filePath = file.split('/');
  return filePath.slice(filePath.length - 2, filePath.length - 1)[0];
};

module.exports = { atomicDir };

Are you able to assist bring the feature to reality?
yes

[shilman]

Related: https://storybook.js.org/docs/basics/writing-stories/#generating-nesting-path-based-on-__dirname

[barclayd]

Many thanks for the guidance @shilman

Issue was resolved using the excellent paths.macro like so:

// Button.stories.js

import base from 'paths.macro';
import { atomicDir } from '../../../helpers/utils';

// where base returns the following string "/src/stories/atoms/Avatar/"

const stories = storiesOf(`${atomicDir(base)}/Button`, module);

// helpers/utils.js

const atomicDir = (file) => {
  const filePath = file.split('/');
  return filePath.slice(filePath.length - 3, filePath.length - 2)[0];
};

module.exports = { atomicDir };

[DragorWW]

We will can use mini helper for remove boilerplate

https://gist.github.com/DragorWW/cbf4b6a2d4543cb66552874527c89723

[mlenser]

@DragorWW your gist is now outdated as the readme has changed.