Code preview in Docs only shows render block of Story Component when using args

[tobiaskraus]

Describe the bug
When I write a story in the syntax export const ExampleStory: Story<ExampleProps> = (args) => { ... } the code output (preview) is only the render part of JSX (with args applied to its components properties), but local states and functions are missing / not shown:

Example 1: Bug

Story

export const ExampleStory: Story<ExampleProps> = (args) => {
  const [open, setOpen] = useState(false);

  const onToggle = () => {
    setOpen((open) => !open);
  };
  return <Example {...args} isOpen={open} onToggle={onToggle} />;
};
ExampleStory.args = {
  label: 'Example',
};

Code Preview in Docs-Addon

Example 2: Works (without args)

when I don't use args as story param, then the whole FunctionComponent of the story (with functions and state) gets shown as Code Preview:

Story

export const ExampleStory: Story<ExampleProps> = () => {
  const [open, setOpen] = useState(false);

  const onToggle = () => {
    setOpen((open) => !open);
  };
  return <Example label="Example" isOpen={open} onToggle={onToggle} />;
};

Code Preview in Docs-Addon

Expected behavior
The whole Story (not only the render part) should always be shown. Also when args are getting applied.

System

System:
  OS: macOS 10.15.7
  CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
  Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
  Yarn: 1.22.0 - /usr/local/bin/yarn
  npm: 6.14.5 - ~/.nvm/versions/node/v12.18.1/bin/npm
Browsers:
  Chrome: 86.0.4240.75
  Safari: 14.0
npmPackages:
  @storybook/addon-actions: ^6.0.26 => 6.0.26 
  @storybook/addon-essentials: ^6.0.26 => 6.0.26 
  @storybook/addon-links: ^6.0.26 => 6.0.26 
  @storybook/node-logger: ^6.0.26 => 6.0.26 
  @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
  @storybook/react: ^6.0.26 => 6.0.26

[shilman]

There's a parameter docs.source.type which controls how the story is rendered, but isn't documented yet. There's a heuristic in the Source block that goes:

• If it's an args story, render it with type 'dynamic'
• Otherwise, render it with type 'code'

If you want your args story to render like the bottom example, you can force it:

export const ExampleStory: Story<ExampleProps> = (args) => {
  const [open, setOpen] = useState(false);

  const onToggle = () => {
    setOpen((open) => !open);
  };
  return <Example {...args} isOpen={open} onToggle={onToggle} />;
};
ExampleStory.args = {
  label: 'Example',
};
ExampleStory.parameters = {
  docs: { source: { type: 'code } } },
};

[jonniebigodes]

@tobiaskraus thanks for bringing this to our attention. I've recently created a pull request to better document this feature. Hopefully it will be merged soon and not only you but the rest of the community will benefit from this feature.

Stay safe

[jonniebigodes]

@tobiaskraus closing this as the pull request was merged and the documentation is updated to include the issue you've raised. Once again thank you for bringing this to our attention.

Stay safe