[6.4.7] Automatic Prefix for Stories does not work.

[fenilli]

Describe the bug
When trying to add a prefix using the stories array, using the object sintax, it seens to not prefix the value to their story.

// main.js
stories: [
    {
      directory: '../stories',
      titlePrefix: 'Stepfy',
      files: '*.stories.*'
    },
  ],

// stories/StepfyLogo.stories.js
const storyMetadata = {
  title: 'StepfyLogo',
  component: StepfyLogo,
  argTypes: {
    size: {
      options: ['sm', 'md', 'lg'],
      control: { type: 'select' }
    }
  },
};

The resulting being this.

But when removing the title from StepfyLogo.stories.js, it breaks and never finds any story.

// main.js
stories: [
    {
      directory: '../stories',
      titlePrefix: 'Stepfy',
      files: '*.stories.*'
    },
  ],

// stories/StepfyLogo.stories.js
const storyMetadata = {
  component: StepfyLogo,
  argTypes: {
    size: {
      options: ['sm', 'md', 'lg'],
      control: { type: 'select' }
    }
  },
};

The resulting being this.

System
Environment Info:

System:
OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
Binaries:
Node: 16.5.0 - ~/.nvm/versions/node/v16.5.0/bin/node
npm: 7.20.0 - ~/.nvm/versions/node/v16.5.0/bin/npm
npmPackages:
@storybook/addon-actions: ^6.4.7 => 6.4.7
@storybook/addon-essentials: ^6.4.7 => 6.4.7
@storybook/addon-links: ^6.4.7 => 6.4.7
@storybook/builder-webpack5: ^6.4.7 => 6.4.7
@storybook/manager-webpack5: ^6.4.7 => 6.4.7
@storybook/vue3: ^6.4.7 => 6.4.7

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.8 containing PR #16913 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

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

[fenilli]

@shilman Is it intended that it does not concatenates with the title?

// ./storybook/main.js
{
      directory: '../components/tail',
      titlePrefix: 'Tail',
      files: '*.stories.*'
},

// components/tail/TailButton.stories.js
const storyMetadata = {
  title: 'Components/TailButton',
  component: TailButton,
  argTypes: {
    size: {
      options: ['md', 'sm'],
      control: { type: 'select' }
    },
    variant: {
      options: ['primary', 'secondary'],
      control: { type: 'select' }
    },
  }
};

What if I want Tail/Components and Tail/Layouts?

// .storybook/main.js
{
      directory: '../components/tail',
      titlePrefix: 'Tail/Components',
      files: '*.stories.*'
},

// components/tail/TailButton.stories.js
const storyMetadata = {
  component: TailButton,
  argTypes: {
    size: {
      options: ['md', 'sm'],
      control: { type: 'select' }
    },
    variant: {
      options: ['primary', 'secondary'],
      control: { type: 'select' }
    },
  }
};

Results on only Tail > TailButton being used and not Tail > Components > TailButton.

[shilman]

@GustavoFenilli do you have a reproduction you can share? it's working fine in my test project

See how to create a repro. Thank you! 🙏

[fenilli]

It seens that after working today on other components, the problem is not there anymore, I don't know what I did to reproduce that result, but I can't seen to reproduce anymore.

Maybe it was a code mistake from my part in a component.

[shilman]

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.2 containing PR #16913 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease