Docs tab shows 'no code available' when using dynamic title for story

Describe the bug When creating story with dynamic title, story shows no code available.

To Reproduce Steps to reproduce the behaviour:

1. Create story with dynamic title
2. Start storybook
3. See the docs tabs

Expected behaviour Code will be available

Screenshots

Code snippets

import React from "react";
import { Button } from "@storybook/react/demo";

const createTitle = title => `a/${title}`;

export default {
  title: createTitle("NokButton"),
  component: Button
};

export const Text = () => <Button>Hello Button</Button>;

System:

  System:
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 12.13.1 - ~/.nvm/versions/node/v12.13.1/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.12.1 - ~/.nvm/versions/node/v12.13.1/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 70.0.1
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-actions: ^5.3.7 => 5.3.7
    @storybook/addon-docs: ^5.3.7 => 5.3.7
    @storybook/addon-links: ^5.3.7 => 5.3.7
    @storybook/addons: ^5.3.7 => 5.3.7
    @storybook/react: ^5.3.7 => 5.3.7

[DScheglov]

It is still an issue.

The case:

File Structure:

./components/
├── atoms
│   └── Heading
│       ├── index.d.ts
│       ├── index.js
│       ├── index.stories.js
│       └── index.test.js
├── molecules
│   └── FormField
│       ├── index.d.ts
│       ├── index.js
│       ├── index.stories.js
│       └── index.test.js
└── story-names.js

./components/story-names.js:

export const ATOM = name => `1-Atoms/${name}`;
export const MOLECULE = name => `2-Molecules/${name}`;
export const ORGANISM = name => `3-Organisms/${name}`;
export const TEMPLATE = name => `4-Templates/${name}`;
export const PAGE = name => `5-Pages: ${name}`;

./components/atoms/Headings/index.stories.js

import React from "react";
import { ATOM } from "../../story-names";
import Heading from ".";

export default {
	component: Heading,
	title: ATOM("Heading"),
};

// some stories for Heading

The result:

Fix ./components/atoms/Headings/index.stories.js

// ...imports
export default {
	component: Heading,
	title: "1-Atoms/Heading"
};
// ...stories

The result:

Please fix it.

Motivation To reduce efforts required to keep stories in specific structure the story names are generated with functions.

[stale[bot]]

Hi everyone! Seems like there hasn’t been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don’t have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!