Setting inlineStories to false causes the documentation code snippet to be generated incorrectly

[dylanclaywell]

Describe the bug
Setting { docs: { inlineStories: false } } is causing the code snippet on the component DocsPage to be generated incorrectly. Additionally, if I change anything regarding what the story renders (such as parameters, the shape of the rendered output, etc.), it generates correctly until I refresh the page, click on another component and return to this one, or restart Storybook. If I don't set inlineStories to false, it generates correctly.

To Reproduce
Steps to reproduce the behavior:

1. Set the inlineStories parameter to false.

Expected behavior
I expect the component snippet to just contain the component and the parameters passed in; instead, it's rendering the function definition for the story.

Screenshots
This is what I expect the output to be (this screenshot is taken when not setting inlineStories to false:

This is what is generated when inlineStories is false:

Code snippets

import React from "react";
import { Story, Meta } from "@storybook/react";
import SaveIcon from "@material-ui/icons/Save";

import StyledAppFab, { AppFab, Props as AppFabProps } from "./AppFab";

export default {
  title: "Global/AppFab",
  component: AppFab,
  argTypes: {
    onClick: { action: "click" },
  },
} as Meta;

const Template: Story<AppFabProps> = (args: any) => <StyledAppFab {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  accessibilityLabel: "Button",
  children: <SaveIcon />,
};
Primary.parameters = {
  docs: {
    inlineStories: false,
  },
};

System

Environment Info:

  System:
    OS: Windows 10 10.0.19041
    CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz
  Binaries:
    Node: 14.12.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - C:\sandbox\projects\internal-admin-web\node_modules\.bin\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 86.0.4240.193
    Edge: Spartan (44.19041.423.0)
  npmPackages:
    @storybook/addon-actions: ^6.0.28 => 6.0.28
    @storybook/addon-essentials: ^6.0.28 => 6.0.28
    @storybook/addon-links: ^6.0.28 => 6.0.28
    @storybook/node-logger: ^6.0.28 => 6.0.28
    @storybook/preset-create-react-app: ^3.1.5 => 3.1.5
    @storybook/react: ^6.0.28 => 6.0.28

[dylanclaywell]

One additional point: if I click the Reset Controls button on the DocsPage, the code snippet regenerates to what I expect it to generate on page load.

On initial page load:

After clicking Reset Controls:

Just for clarification, I'm clicking the refresh button in the upper right corner of this screenshot:

[stale]

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!

[mjmcgrath2010]

+1

[neldeles]

Experienced this issue today as well. I was using inlineStories for the position:fixed leaks issue. As a workaround, I used an alternative solution mentioned in that thread which uses decorators. This solves both the position:fixed leaks and incorrect code snippet issue.

My code snippet:

const styles = {
  transform: "scale(1)",
  height: "100vh",
};

export default {
  title: "Components/Molecules/DashboardContainer",
  component: DashboardContainer,
  parameters: {
    componentSubtitle: "Container for the different dashboard pages",
    docs: {
      // page: DashboardContainerMdx,
      source: {
        type: "dynamic",
        excludeDecorators: true,
      },
    },
  },
  decorators: [(storyFn) => <div style={styles}>{storyFn()}</div>],
} as Meta;

[mojabyte]

The problem still exists.

https://stackblitz.com/edit/github-jad43t?file=src%2Fstories%2FButton.stories.ts

One workaround I've found is to set the docs.soruce.type to dynamic when using docs.story.inline: false.

[asso1985]

+1