Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
aizerin opened this issue Jan 21, 2020 · 15 comments
Closed

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

aizerin opened this issue Jan 21, 2020 · 15 comments
Assignees

Comments

@aizerin
Copy link

aizerin commented Jan 21, 2020

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

image

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
@ibrahimchraibi
Copy link

Same issue here :(

@shilman
Copy link
Member

shilman commented Jan 24, 2020

cc @atanasster

@atanasster
Copy link
Member

I can reproduce - source-loader is not loading locationsMap for such stories.
I will take a look again when we check in the new source-loader.

@shilman
Copy link
Member

shilman commented Jan 24, 2020

Yeah, just wanted to give you a head's up for the new one!

@atanasster atanasster self-assigned this Jan 24, 2020
@stale
Copy link

stale bot commented Feb 14, 2020

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!

@stale stale bot added the inactive label Feb 14, 2020
@TakenPilot
Copy link

Still true, still an issue.

@stale stale bot removed the inactive label Mar 9, 2020
@stale
Copy link

stale bot commented Mar 31, 2020

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!

@stale stale bot added the inactive label Mar 31, 2020
@DScheglov
Copy link

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:
image

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

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

The result:
image

Please fix it.

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

@stale stale bot removed the inactive label Mar 31, 2020
@shilman
Copy link
Member

shilman commented Apr 1, 2020

@DScheglov would you like to submit a PR for this?

@DScheglov
Copy link

@DScheglov would you like to submit a PR for this?

Oh! It's an interesting task due it requires deep diving in the source-loader. But I have lack of time for job projects ...

So, Sorry. For now, I cannot collaborate more then just register/comment issues.

@timmaloshtan
Copy link

Same issue :(

@stale
Copy link

stale bot commented Apr 23, 2020

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!

@stale stale bot added the inactive label Apr 23, 2020
@DScheglov
Copy link

it is still actual

@stale stale bot removed the inactive label Apr 23, 2020
@stale
Copy link

stale bot commented May 15, 2020

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!

@stale stale bot added the inactive label May 15, 2020
@deholger
Copy link

This topic is still actual with 6.0 betas

@stale stale bot removed the inactive label May 18, 2020
adamborowski added a commit to CloudinaryLtd/storybook that referenced this issue May 28, 2020
(snapshots were updated and manually compared because cases were reordered due to change in id (title was removed from key)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants