CSF3: Programmatic Title Generation

From what I read, the CSF3 automatic title generation is based on the path and a potential prefix to it? I see, this might work for some frameworks but surely not for all. Also monorepos with workspaces might be affected by this (unless you name each package explcitely - which you don’t want, because you choose the workspaces already).

An idea to give an options where the existing generation is not feasible is to provide a generation function, this signature:

function generateStoryTitle(path: string): string;

A function that takes the path as input and returns the title of the story. I can see that in either .storybook/preview.ts (more likely here) or .storybook/main.ts.

[steven-prybylynskyi]

Downgraded to alpha35 and it works again. One suggestion though

In our codebase files are structured in a way that all component-related files (component, unit tests, stories, helpers) that belong together are placed in a single folder

With the automatic title generation we have this structure with unnecessary duplication of the component name, e.g. Navbar/Navbar instead of just Navbar

[lunelson]

With the automatic title generation we have this structure with unnecessary duplication of the component name, e.g. Navbar/Navbar instead of just Navbar

This was my first observation when I tried this feature too. I would prefer to have a function option that receives the title (whether a generated one, or a declared one; along with a flag to indicate which) and which then could modify it:

module.exports = {
  stories: [
    {
      directory: '/some/path',
      titleFn(title, isAutoGenerated) {
        return !isAutoGenerated ? title : title.replace(/\/\w+$/, '');
      },
      files: '*.somepattern.whatever',
    },
  ],
};