better "Show code" -- whole render() function

[abernier]

Is your feature request related to a problem? Please describe.

pmndrs/drei uses Storybook to test their React components: https://drei.pmnd.rs/?path=%2Fdocs%2Fstaging-cloud--docs

We use CSF3 story format.

As already discussed with @shilman when pressing "Show code", for cloud.stories.tsx, we can see:

{
  render: args => <CloudScene {...args} />,
  name: 'Default'
} satisfies Story

❌ which is correct, but not great

Describe the solution you'd like

✅ what would be more useful:

function CloudScene(props: ComponentProps<typeof Cloud>) {
  return (
    <>
      <React.Suspense fallback={null}>
        <Cloud {...props} position={[-4, -2, 0]} />
        <Cloud {...props} position={[-4, 2, 0]} />
        <Cloud {...props} />
        <Cloud {...props} position={[4, -2, 0]} />
        <Cloud {...props} position={[4, 2, 0]} />
      </React.Suspense>
      <OrbitControls enablePan={false} zoomSpeed={0.5} />
    </>
  )
}

export const CloudSt = {
  render: (args) => <CloudScene {...args} />,
  name: 'Default',
} satisfies Story

Ie: showing/including the Story tested-component instantiation, here <Cloud ... />, hence the whole CloudScene.

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

https://discord.com/channels/486522875931656193/1251527964353495070

[abernier]

of course this problem wouldn't be if we render() the component directly

But

having a "Scene" (as the render() func, that receive same args as the component) is super important to us, as we more than often, have to setup/use hook inside before instantiating