Story roots not working as expected with 5.3

[vidarc]

Describe the bug
I have several stories in the form of Root/Story || Root/Submenu/Story || Root/Submenu/Submenu/Story
Before 5.3, this worked fine with the different hierarchy specifiers I could use. Just trying to recreate that in the new setup.

Example Story Names Being Used

• Introduction/Getting Started
• Introduction/Framework Integration/React
• Design System/Components/Button

Below screenshot is how they currently show up. Would expect Design System to also be a root level and not within Others. Can't share my repo, but will try and share whatever I can.

Also using the sort function within the preview.js file.

 storySort: ([first], [second]) => {
      const [firstType] = first.split('-');
      const [secondType] = second.split('-');

      if (firstType === 'introduction') return -1;
      if (firstType === secondType) return 0;

      return 1;
    }

[tmeasday]

Hi, this is odd. Can you reproduce on a simple project with just those story names?

Are you using hierarchy separators now? Are you using the showRoots option?

[assimovt]

We've just upgraded to 5.3 and bumped into the same problem. Previously, our Intro doc (similar to the storybook's design system), has been first in the ToC, now it's at the end. Is there a way to define the positions of the story MDX files?

[shilman]

@assimovt Just released a fix for #9477 in 5.3.4 .. does that fix your problem?

[assimovt]

@shilman Ha, it seems like when I reported it, I've installed 5.3.4 and yeah I still have the same problem:

    "@storybook/addon-actions": "^5.3.4",
    "@storybook/addon-docs": "^5.3.4",
    "@storybook/addon-knobs": "^5.3.4",
    "@storybook/addon-links": "^5.3.4",
    "@storybook/addon-storysource": "^5.3.4",
    "@storybook/addons": "^5.3.4",
    "@storybook/react": "^5.3.4",
    "@storybook/source-loader": "^5.3.4",

[shilman]

@assimovt RATS. 😭 So things are getting grouped under "OTHERS" like in the issue description?

[assimovt]

Nope, the MDX files just dropped to the bottom. We use a similar kind of set up as the Storybook Design system having an Intro file and then more docs inside the components dir.

[shilman]

@assimovt can you share your config (before & after)?

[alazurenko]

I faced with something similar.
Please, make sure that you have in your preview.js:

addParameters({
    options: {
        showRoots: true
    },
});

[teddywsi]

For me it seems like #9482 fixes sorting for CSF stories, but MDX stories are still being sorted in reverse order.

[shilman]

@teddywsi can repro. will dig in and fix!

[shilman]

Yay!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.6 containing PR #9504 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Fixed the sorting issue, but I think the original "Others" issue is still outstanding.

[vidarc]

trying to make a small repo that can reproduce the issue, but not having much luck.

main.js

const path = require('path');
const stringStyleToJsx = require('./stringStyleToJsx');

module.exports = {
  stories: [
    '../src/storybook/stories/getting-started.stories.mdx',
    '../src/storybook/stories/testing.stories.mdx',
    '../src/storybook/stories/framework-integration/*.stories.mdx',
    '../src/storybook/stories/colors.stories.mdx',
    '../src/storybook/stories/spacing.stories.mdx',
    '../src/storybook/stories/text.stories.mdx',
    '../src/components/**/*.stories.(js|ts|jsx|tsx|mdx)'
  ],
  addons: [
    '@storybook/addon-knobs',
    '@storybook/addon-options',
    '@storybook/addon-a11y',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    {
      name: '@storybook/addon-docs',
      options: {
        configureJSX: true
      }
    }
  ],
  webpack: async config => {
    // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    const mdx = config.module.rules.find(rule => rule.test.toString() === /\.mdx$/.toString());
    mdx.test = /\.(md|mdx)$/;
    const babelLoader = mdx.use.find(loader => loader.loader === 'babel-loader');
    babelLoader.options.plugins.push(stringStyleToJsx);

    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      loaders: ['awesome-typescript-loader'],
      include: path.resolve(__dirname, '../src')
    });

    config.module.rules.push({
      test: /\.scss$/,
      loaders: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            implementation: require('sass'),
            prependData: `
              @import 'src/globals/styles/colors';
              @import 'src/globals/styles/typography';
            `
          }
        }
      ],
      include: path.resolve(__dirname, '../src')
    });

    config.resolve.extensions.push('.ts', '.tsx', '.md', '.mdx');

    config.performance.hints = false;

    config.optimization.splitChunks = {
      chunks: 'all'
    };

    const filteredRules = config.module.rules.filter(rule => rule.test.toString() !== /\.md$/.toString());

    // Return the altered config
    return {
      ...config,
      node: {
        fs: 'empty'
      },
      module: {
        ...config.module,
        rules: [...filteredRules]
      }
    };
  }
};

manager.js

import { create } from '@storybook/theming/create';
import { addons } from '@storybook/addons';

const pkg = require('../package.json');

addons.setConfig({
  theme: create({
    base: 'light',
    fontCode: 'monospace',
    colorPrimary: '#003362',
    colorSecondary: '#0d74af',
    textColor: '#141414',
    textInverseColor: '#ffffff'
  })
});

preview.js

import { addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

import './somecss.css';

addParameters({
  options: {
    panelPosition: 'bottom',
    storySort: ([first], [second]) => {
      const [firstType] = first.split('-');
      const [secondType] = second.split('-');

      if (firstType === 'introduction') return -1;
      if (firstType === secondType) return 0;

      return 1;
    }
  },
  docs: {
    container: DocsContainer,
    page: DocsPage
  }
});

all my storybook related configs. story wise, i'm using both mdx and csf styles

[shilman]

@vidarc does it fix the problem if you update preview.js with this:

addParameters({
  options: {
    showRoots: true
...

[vidarc]

adding in showRoots worked out. ended up having some stories that I didn't convert over (still had | instead of /). think that was the main cause for the Others grouping? works great now though

[tmeasday]

@vidarc yeah if you have any kind (component) names that include the old separators, the behaviour in 5.3 is to simply act like 5.2 (with a deprecation warning). In 6.0 we'll get rid of the old behaviour entirely so it's good you migrated 👍