fix(storybook): add args to auto generate docs

[virtuoushub]

Without this, we don't get the Doc Block / "Show code" feature Storybook provides without having the framework user modify their stories files.

see:

• Docs tab shows 'no code available' when using CSF format storybookjs/storybook#8104 (comment)
• https://storybook.js.org/docs/react/writing-docs/doc-block-source

[netlify]

✅ Deploy Preview for redwoodjs-docs canceled.

Name	Link
🔨 Latest commit	ff515b1
🔍 Latest deploy log	https://app.netlify.com/sites/redwoodjs-docs/deploys/62da91e762278c0009b24d1e

[jtoar]

@virtuoushub nice! You'll have to update the CLI's fixtures to get tests passing:

yarn workspace @redwoodjs/cli run test -u

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit ff515b1. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 14 targets

• cli run test --concurrency 2 -- --colors --maxWorkers 2
• cli run test --concurrency 2 -- --colors --maxWorkers 2
• cli run test --concurrency 2 -- --colors --maxWorkers 2
• cli run build
• cli run build
• cli run build
• cli run test --concurrency 2 -- --colors --maxWorkers 2
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build
• cli run build

---

Sent with 💌 from NxCloud.

[jtoar]

Works!

Note that I almost bikeshed (bikeshed-ed?) and suggested we rename args to props, but storybook refers to it consistently as args, so let's follow thier lead.

[Philzen]

Just accidentally browsing across these changes as i was made aware of this issue before. Just wondered: does this issue happen at all using CSFv3?

See https://storybook.js.org/blog/component-story-format-3-0/

With CSFv3, the whole story boils down to even less code:

export const Loading = {}

... that's it, that's the default story :)

Wondering whether this behaves correctly even if Error is not implemented in the cell. Otherwise, we'd need to add the check to the render function:

export const Loading = {
  render: (args) => Loading ? <Loading {...args} /> : null
}

so we wouldn't win a lot in the Cell story generators, but still a whole lot in all the others.

[virtuoushub]

Just accidentally browsing across these changes as i was made aware of this issue before. Just wondered: does this issue happen at all using CSFv3?

See https://storybook.js.org/blog/component-story-format-3-0/

With CSFv3, the whole story boils down to even less code:

export const Loading = {}

... that's it, that's the default story :)

Wondering whether this behaves correctly even if Error is not implemented in the cell. Otherwise, we'd need to add the check to the render function:

export const Loading = {
  render: (args) => Loading ? <Loading {...args} /> : null
}

so we wouldn't win a lot in the Cell story generators, but still a whole lot in all the others.

Hi @Philzen - I started going down this path, and yes; I think I got slowed up on the Cells and never finished it. I agree we gain a lot by adopting CSF 3.0 in terms of boilerplate reduction. Will add it to #5269 so we track