fix(storybook): add args to auto generate docs (#5979)

* fix(storybook): add `args` to auto generate docs

see:
- storybookjs/storybook#8104 (comment)
- https://storybook.js.org/docs/react/writing-docs/doc-block-source

* test(unit): update snapshots

```sh
yarn workspace @redwoodjs/cli run test -u
```

see: redwoodjs/redwood#5979 (comment)

packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap

@@ -131,20 +131,20 @@ exports[`TypeScript: generates list cells if list flag passed in 3`] = `
 "import { Loading, Empty, Failure, Success } from './BazingaCell'
 import { standard } from './BazingaCell.mock'
 
-export const loading = () => {
-  return Loading ? <Loading /> : null
+export const loading = (args) => {
+  return Loading ? <Loading {...args} /> : null
 }
 
-export const empty = () => {
-  return Empty ? <Empty /> : null
+export const empty = (args) => {
+  return Empty ? <Empty {...args} /> : null
 }
 
-export const failure = () => {
-  return Failure ? <Failure error={new Error('Oh no')} /> : null
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
 }
 
-export const success = () => {
-  return Success ? <Success {...standard()} /> : null
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : null
 }
 
 export default { title: 'Cells/BazingaCell' }
@@ -363,20 +363,20 @@ exports[`creates a cell stories with a camelCase word name 1`] = `
 "import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
-export const loading = () => {
-  return Loading ? <Loading /> : null
+export const loading = (args) => {
+  return Loading ? <Loading {...args} /> : null
 }
 
-export const empty = () => {
-  return Empty ? <Empty /> : null
+export const empty = (args) => {
+  return Empty ? <Empty {...args} /> : null
 }
 
-export const failure = () => {
-  return Failure ? <Failure error={new Error('Oh no')} /> : null
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
 }
 
-export const success = () => {
-  return Success ? <Success {...standard()} /> : null
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : null
 }
 
 export default { title: 'Cells/UserProfileCell' }
@@ -387,20 +387,20 @@ exports[`creates a cell stories with a kebabCase word name 1`] = `
 "import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
-export const loading = () => {
-  return Loading ? <Loading /> : null
+export const loading = (args) => {
+  return Loading ? <Loading {...args} /> : null
 }
 
-export const empty = () => {
-  return Empty ? <Empty /> : null
+export const empty = (args) => {
+  return Empty ? <Empty {...args} /> : null
 }
 
-export const failure = () => {
-  return Failure ? <Failure error={new Error('Oh no')} /> : null
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
 }
 
-export const success = () => {
-  return Success ? <Success {...standard()} /> : null
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : null
 }
 
 export default { title: 'Cells/UserProfileCell' }
@@ -411,20 +411,20 @@ exports[`creates a cell stories with a multi word name 1`] = `
 "import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
-export const loading = () => {
-  return Loading ? <Loading /> : null
+export const loading = (args) => {
+  return Loading ? <Loading {...args} /> : null
 }
 
-export const empty = () => {
-  return Empty ? <Empty /> : null
+export const empty = (args) => {
+  return Empty ? <Empty {...args} /> : null
 }
 
-export const failure = () => {
-  return Failure ? <Failure error={new Error('Oh no')} /> : null
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
 }
 
-export const success = () => {
-  return Success ? <Success {...standard()} /> : null
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : null
 }
 
 export default { title: 'Cells/UserProfileCell' }
@@ -435,20 +435,20 @@ exports[`creates a cell stories with a single word name 1`] = `
 "import { Loading, Empty, Failure, Success } from './UserCell'
 import { standard } from './UserCell.mock'
 
-export const loading = () => {
-  return Loading ? <Loading /> : null
+export const loading = (args) => {
+  return Loading ? <Loading {...args} /> : null
 }
 
-export const empty = () => {
-  return Empty ? <Empty /> : null
+export const empty = (args) => {
+  return Empty ? <Empty {...args} /> : null
 }
 
-export const failure = () => {
-  return Failure ? <Failure error={new Error('Oh no')} /> : null
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
 }
 
-export const success = () => {
-  return Success ? <Success {...standard()} /> : null
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : null
 }
 
 export default { title: 'Cells/UserCell' }
@@ -459,20 +459,20 @@ exports[`creates a cell stories with a snakeCase word name 1`] = `
 "import { Loading, Empty, Failure, Success } from './UserProfileCell'
 import { standard } from './UserProfileCell.mock'
 
-export const loading = () => {
-  return Loading ? <Loading /> : null
+export const loading = (args) => {
+  return Loading ? <Loading {...args} /> : null
 }
 
-export const empty = () => {
-  return Empty ? <Empty /> : null
+export const empty = (args) => {
+  return Empty ? <Empty {...args} /> : null
 }
 
-export const failure = () => {
-  return Failure ? <Failure error={new Error('Oh no')} /> : null
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
 }
 
-export const success = () => {
-  return Success ? <Success {...standard()} /> : null
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : null
 }
 
 export default { title: 'Cells/UserProfileCell' }
@@ -776,20 +776,20 @@ exports[`generates a cell with a string primary id key 3`] = `
 "import { Loading, Empty, Failure, Success } from './AddressCell'
 import { standard } from './AddressCell.mock'
 
-export const loading = () => {
-  return Loading ? <Loading /> : null
+export const loading = (args) => {
+  return Loading ? <Loading {...args} /> : null
 }
 
-export const empty = () => {
-  return Empty ? <Empty /> : null
+export const empty = (args) => {
+  return Empty ? <Empty {...args} /> : null
 }
 
-export const failure = () => {
-  return Failure ? <Failure error={new Error('Oh no')} /> : null
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
 }
 
-export const success = () => {
-  return Success ? <Success {...standard()} /> : null
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : null
 }
 
 export default { title: 'Cells/AddressCell' }
@@ -884,20 +884,20 @@ exports[`generates list a cell with a string primary id keys 3`] = `
 "import { Loading, Empty, Failure, Success } from './AddressesCell'
 import { standard } from './AddressesCell.mock'
 
-export const loading = () => {
-  return Loading ? <Loading /> : null
+export const loading = (args) => {
+  return Loading ? <Loading {...args} /> : null
 }
 
-export const empty = () => {
-  return Empty ? <Empty /> : null
+export const empty = (args) => {
+  return Empty ? <Empty {...args} /> : null
 }
 
-export const failure = () => {
-  return Failure ? <Failure error={new Error('Oh no')} /> : null
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
 }
 
-export const success = () => {
-  return Success ? <Success {...standard()} /> : null
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : null
 }
 
 export default { title: 'Cells/AddressesCell' }
@@ -990,20 +990,20 @@ exports[`generates list cells if list flag passed in 3`] = `
 "import { Loading, Empty, Failure, Success } from './MembersCell'
 import { standard } from './MembersCell.mock'
 
-export const loading = () => {
-  return Loading ? <Loading /> : null
+export const loading = (args) => {
+  return Loading ? <Loading {...args} /> : null
 }
 
-export const empty = () => {
-  return Empty ? <Empty /> : null
+export const empty = (args) => {
+  return Empty ? <Empty {...args} /> : null
 }
 
-export const failure = () => {
-  return Failure ? <Failure error={new Error('Oh no')} /> : null
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
 }
 
-export const success = () => {
-  return Success ? <Success {...standard()} /> : null
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : null
 }
 
 export default { title: 'Cells/MembersCell' }

packages/cli/src/commands/generate/cell/templates/stories.js.template

@@ -1,20 +1,20 @@
 import { Loading, Empty, Failure, Success } from './${pascalName}Cell'
 import { standard } from './${pascalName}Cell.mock'
 
-export const loading = () => {
-  return Loading ? <Loading /> : null
+export const loading = (args) => {
+  return Loading ? <Loading {...args} /> : null
 }
 
-export const empty = () => {
-  return Empty ? <Empty /> : null
+export const empty = (args) => {
+  return Empty ? <Empty {...args} /> : null
 }
 
-export const failure = () => {
-  return Failure ? <Failure error={new Error("Oh no")} /> : null
+export const failure = (args) => {
+  return Failure ? <Failure error={new Error("Oh no")} {...args} /> : null
 }
 
-export const success = () => {
-  return Success ? <Success {...standard()} /> : null
+export const success = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : null
 }
 
 export default { title: 'Cells/${pascalName}Cell' }

packages/cli/src/commands/generate/component/__tests__/__snapshots__/component.test.ts.snap

@@ -49,8 +49,8 @@ export default UserProfile
 exports[`creates a multi word component story 1`] = `
 "import UserProfile from './UserProfile'
 
-export const generated = () => {
-  return <UserProfile />
+export const generated = (args) => {
+  return <UserProfile {...args} />
 }
 
 export default { title: 'Components/UserProfile' }
@@ -92,8 +92,8 @@ export default User
 exports[`creates a single word component story 1`] = `
 "import User from './User'
 
-export const generated = () => {
-  return <User />
+export const generated = (args) => {
+  return <User {...args} />
 }
 
 export default { title: 'Components/User' }

packages/cli/src/commands/generate/component/templates/stories.tsx.template

@@ -1,7 +1,7 @@
 import ${pascalName} from './${pascalName}'
 
-export const generated = () => {
-  return <${pascalName} />
+export const generated = (args) => {
+  return <${pascalName} {...args} />
 }
 
 export default { title: 'Components/${pascalName}' }

packages/cli/src/commands/generate/layout/__tests__/__snapshots__/layout.test.ts.snap

@@ -88,8 +88,8 @@ describe('SinglePageLayout', () => {
 exports[`creates a multi word layout test 2`] = `
 "import SinglePageLayout from './SinglePageLayout'
 
-export const generated = () => {
-  return <SinglePageLayout />
+export const generated = (args) => {
+  return <SinglePageLayout {...args} />
 }
 
 export default { title: 'Layouts/SinglePageLayout' }
@@ -108,8 +108,8 @@ export default AppLayout
 exports[`creates a single word layout stories 1`] = `
 "import AppLayout from './AppLayout'
 
-export const generated = () => {
-  return <AppLayout />
+export const generated = (args) => {
+  return <AppLayout {...args} />
 }
 
 export default { title: 'Layouts/AppLayout' }

packages/cli/src/commands/generate/layout/templates/stories.tsx.template

@@ -1,7 +1,7 @@
 import ${singularPascalName}Layout from './${pascalName}Layout'
 
-export const generated = () => {
-  return <${singularPascalName}Layout />
+export const generated = (args) => {
+  return <${singularPascalName}Layout {...args} />
 }
 
 export default { title: 'Layouts/${singularPascalName}Layout' }