### Describe the bug I have several stories for components that are written using React functional components since they require React hooks such as useState. When viewing the code in Storybook under the "Show Code" tab, it displays the entire function including the "args" parameter of the function as well as the "{...args}" props passed into the component. I need args to set up controls for the component. However, because args is just for the Storybook implementation of the component and will not be used by developers in their own projects, I'd would like so that "Show Code" removes them the way that render does in CSF. This way developers that copy the code won't get confused about how they are supposed to use "args" when in fact they do not need it at all. I still would like for "Show Code" to display the story as a functional component rather than just the pure HTML since the user needs to see what expressions are being used before the return statement (e.g. useState expressions). For example, the Tabs component below uses useState to create a variable and function to update the active tab: ``` export default { title: "Navigation/Tabs", component: Tabs, autodocs: "auto", tags: ["autodocs"], argTypes: { placement: { options: ["left", "top"], control: { type: "inline-radio" }, }, }, parameters: { docs: { source: { type: "code", }, }, }, }; export const BasicUsage = (args) => { const [activeId, setActiveId] = useState("2"); const _onClick = (id) => { setActiveId(id); }; return ( Tab Tab Tab Tab ); }; ``` In "Show Code", it displays as: ![image](https://github.com/storybookjs/storybook/assets/75461349/e6afb69f-1881-4d55-ae93-da75e2cee778) However, I'd like for it to show up without the args parameter and without the {...args} prop like so: ``` () => { const [activeId, setActiveId] = useState("2"); const _onClick = id => { setActiveId(id); }; return Tab Tab Tab Tab ; } ``` ### To Reproduce 1. Create a story using React functional components 2. Add "args" as a parameter to the functional component 3. Pass {...args} as a prop inside component inside the return expression 4. View the component in Storybook and click "Show Code" ### System _No response_ ### Additional context _No response_

[Bug]: 🔥🐞🔥 Removing args in "Show Code" for stories written using React functional components #23367

Company

Community

Support

Connect