[Bug]: 🐞🔥🐞 "Show Code" for stories written using CSF is not displaying arrow functions

[dbaitech]

Describe the bug

I have several components written using Component Story Format that contain arrow functions as prop values passed into the component. However, they are not being shown in the "Show Code" area in Storybook.

I know there is a workaround using JSX formatting to create a functional component instead of CSF and passing in docs.source.type: "code" into the component's parameters. However, I would prefer CSF formatting since it hides the "args" parameter and "{...args}" prop. I would prefer this since I'd like for users to copy the pure HTML or at the very least a functional component with no parameters that could break their code.

For example, I have the Link BasicUsage Story which is written in CSF as:

export const BasicUsage = {
  args: {},
  render: (args) => (
    <Link onClick={() => alert("basic link clicked")} {...args}>
      This is a basic link
    </Link>
  ),
};

However, in "Show Code" the onClick arrow function is empty:

If I write it using JSX like so:

export default {
  title: "Navigation/Link",
  component: Link,
  autodocs: "auto",
  tags: ["autodocs"],
  argTypes: {
    kind: {
      options: ["default", "red"],
      control: { type: "inline-radio" },
    },
    disabled: {
      control: { type: "boolean" },
    },
  },
  parameters: {
    docs: {
      source: {
        type: "code",
      },
    },
  },
};

export const BasicUsage = (args) => {
  return (
    <Link onClick={() => alert("basic link clicked")} {...args}>
      This is a basic link
    </Link>
  );
};

Then, the arrow function is being displayed but it also displays the "args" parameter and "{...args}" prop which I do not want:

Overall, I'd like for the CSF formatting to allow for arrow functions to be displayed in the "Show Code" section like this:

<Link onClick={() => alert("basic link clicked")} >
      This is a basic link
</Link>

To Reproduce

1. Create a story using CSF
2. Pass in an arrow function as a prop value to the component in the story
3. Run the Storybook, navigate to the component and click "Show Code"

It can also be viewed in Storybook 7 by clicking "Show Code" in the sample Button component provided by Storybook. The onClick prop's arrow function is empty.

System

No response

Additional context

No response

[shilman]

You can customize the source output using the docs.source.transform parameter or by providing the code directly.

We'll be taking another pass at the source block later, but for now that's your best bet to get exactly what you want.

[simonerlandsen]

If anyone gets this working, please post a repro, or a code example. When I try this I either get the same as before (functions in props replaced with empty functions) with:

parameters: { docs: { source: { transform: (code) => code, }, }, },

or I get compiled code if I try to pass the component code directly with:

parameters: { docs: { source: { transform: (code) => MyComponentExampleImplementation, }, }, },

none of which is a good starting point for editing in the correct code.

I would think that having the actual source code behind the rendered example, is what most people would want to have shown in the "show code" block. Or am I missing something?

[dbaitech]

The same thing is happening for me as well, I'm not able to modify the original code using docs.source.transform into what is shown in the "Show Code" block.

[bdenham]

Anyone find a workaround to this yet? Our entire component library is Preact, which means we only see the Story objects in "Show code". I'll be glad to work with someone to add this missing feature for the @storybook/preact-webpack5 framework.

[petegivens]

Still seeing this on 8.1.0, any workarounds or fix in sight?

[i-mo-gupta]

We recently migrated to 8.2.4. This issue has been a bottleneck for us. Is there any workaround for this?

• Tried the transform key, didn't really work.
• Passing code again & again is tedious.

Team please prioritise this issue!