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

Stories are not appearing in the manager preview pane #9412

Closed
JonnyPS opened this issue Jan 13, 2020 · 4 comments
Closed

Stories are not appearing in the manager preview pane #9412

JonnyPS opened this issue Jan 13, 2020 · 4 comments

Comments

@JonnyPS
Copy link

JonnyPS commented Jan 13, 2020

Describe the bug
Since updating to 5.3.1, stories are not appearing in the manager preview panel on the left.
I believe this is to do with how they are being exported, although the same method works in 5.2.8.

To Reproduce
Create file named button.js and add:

import React from 'react';

export default function Button( { className, id, style, content } ) {
  return (
    <button className={className} id={id} style={style}>{content}</button>
  );
}

Create file named button.stories.js and add:

import React from 'react';
import { action } from '@storybook/addon-actions';
import Button from './button';
import { withKnobs, text } from '@storybook/addon-knobs/react';

export default {
  title: 'Foundation/Button',
  component: Button,
  decorators: [withKnobs],
}

const Basic = () => <Button className={text("ClassName-Basic", "button basic")} id={text("ID", "Hello-id-basic")} content={text('Content', 'some text for Basic button here')}/>;
const Primary = () => <Button className={text("ClassName-Primary", "button primary")} id={text("ID", "Hello-id-primary")} content={text('Content', 'some text for Primary button here')}/>;
const Secondary = () => <Button className={text("ClassName-Secondary", "button secondary")} id={text("ID", "Hello-id-secondary")} content={text('Content', 'some text for Secondary button here')}/>;
const Disabled = () => <Button className={text("ClassName-Disabled", "button disabled")} id={text("ID", "Hello-id-disabled")} content={text('Content', 'some text for Disabled button here')}/>;
const All = () => <div><Basic /><br /><Primary /><br /><Secondary /><br /><Disabled /></div>;

export  {Basic, Primary, Secondary, Disabled, All}; // export all components individually, and then export them all together

Expected behavior
I expect this to produce five previews in the manage preview panel on the left:
For each of the Basic, Primary, Secondary & Disabled named components, I would expect them to show up in their individual previews.
For the component named 'All'. I would expect this to show up in its own preview, rendering all the previous named components together. This is how it behaved in 5.2.8

System:
Environment Info:

System:
OS: macOS Sierra 10.12.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.11.3 - ~/.nvm/versions/node/v12.11.1/bin/npm
Browsers:
Chrome: 79.0.3945.117
Firefox: 60.7.2
Safari: 12.1.1

Additional context
Add any other context about the problem here.

@shilman
Copy link
Member

shilman commented Jan 13, 2020

Can you try removing node_modules and reinstalling? If that doesn't fix it, can you provide a reproduction and we can look at it? Thanks!

@shilman
Copy link
Member

shilman commented Jan 16, 2020

Possible dupe to #9457 cc @atanasster

@JonnyPS
Copy link
Author

JonnyPS commented Jan 16, 2020

@shilman - I have resolved this to an extent - when I remove the Docs addon the stories all appear - Put the Docs addon back in again and they disappear

@shilman
Copy link
Member

shilman commented Jan 17, 2020

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.6 containing PR #9505 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.

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

2 participants