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

Code preview in addon-docs only works for arrow functions in CSF #8401

Closed
cycleseven opened this issue Oct 12, 2019 · 2 comments · Fixed by #9092
Closed

Code preview in addon-docs only works for arrow functions in CSF #8401

cycleseven opened this issue Oct 12, 2019 · 2 comments · Fixed by #9092

Comments

@cycleseven
Copy link

cycleseven commented Oct 12, 2019

Describe the bug

The docs panel doesn't seem to display a code preview when using a regular old function in Component Story Format (CSF). Instead, "No code available" is displayed. Looks like it only works for arrow functions.

Not a huge deal of course, can work around it by just using arrows instead :)

To Reproduce

Here's a new story in a cra-kitchen-sink fork that demonstrates the issue.

Expected behavior

I'd have expected arrows and regular functions to be interchangeable in CSF.

Screenshots

Screenshot 2019-10-12 at 20 37 04

Code snippets

import { action } from '@storybook/addon-actions';
import { Button } from '@storybook/react/demo';
import React from 'react';

/* Code preview works */
export const usingArrowFunction = () => (
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="yolo">
      😀 😎 👍 💯
    </span>
  </Button>
);

/* Code preview works */
export const alsoUsingArrowFunction = () => {
  return (
    <Button onClick={action('clicked')}>
      <span role="img" aria-label="yolo">
        😀 😎 👍 💯
      </span>
    </Button>
  );
};

/* No code preview for this though. */
export function regularOldFunction() {
  return (
    <Button onClick={action('clicked')}>
      <span role="img" aria-label="yolo">
        😀 😎 👍 💯
      </span>
    </Button>
  );
}

export default {
  title: 'Code preview',
  component: Button,
};

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
  Binaries:
    Node: 12.11.1 - ~/n/bin/node
    Yarn: 1.19.0 - ~/.yarn/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 69.0.3
    Safari: 13.0.2
@stale
Copy link

stale bot commented Nov 28, 2019

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!

@shilman
Copy link
Member

shilman commented Dec 9, 2019

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-beta.20 containing PR #9092 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants