From dea3714eb1f6e3e823cf3cf4a58e3ca4f4126c9e Mon Sep 17 00:00:00 2001
From: Peter Colapietro <petercolapietro+spacehippie@gmail.com>
Date: Fri, 22 Jul 2022 08:30:37 -0400
Subject: [PATCH] fix(storybook): add `args` to auto generate docs (#5979)

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

see:
- https://github.com/storybookjs/storybook/issues/8104#issuecomment-932279083
- https://storybook.js.org/docs/react/writing-docs/doc-block-source

* test(unit): update snapshots

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

see: https://github.com/redwoodjs/redwood/pull/5979#issuecomment-1186174105
---
 .../__tests__/__snapshots__/cell.test.js.snap | 144 +++++++++---------
 .../cell/templates/stories.js.template        |  16 +-
 .../__snapshots__/component.test.ts.snap      |   8 +-
 .../component/templates/stories.tsx.template  |   4 +-
 .../__snapshots__/layout.test.ts.snap         |   8 +-
 .../layout/templates/stories.tsx.template     |   4 +-
 .../__tests__/__snapshots__/page.test.js.snap |  20 +--
 .../page/templates/stories.tsx.template       |   4 +-
 8 files changed, 104 insertions(+), 104 deletions(-)

diff --git a/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap b/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap
index 97107233ee..ba8c5a1155 100644
--- a/packages/cli/src/commands/generate/cell/__tests__/__snapshots__/cell.test.js.snap
+++ b/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' }
diff --git a/packages/cli/src/commands/generate/cell/templates/stories.js.template b/packages/cli/src/commands/generate/cell/templates/stories.js.template
index 82d9829a44..b2bd74c3d8 100644
--- a/packages/cli/src/commands/generate/cell/templates/stories.js.template
+++ b/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' }
diff --git a/packages/cli/src/commands/generate/component/__tests__/__snapshots__/component.test.ts.snap b/packages/cli/src/commands/generate/component/__tests__/__snapshots__/component.test.ts.snap
index 0abf59b240..8986b6d9f8 100644
--- a/packages/cli/src/commands/generate/component/__tests__/__snapshots__/component.test.ts.snap
+++ b/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' }
diff --git a/packages/cli/src/commands/generate/component/templates/stories.tsx.template b/packages/cli/src/commands/generate/component/templates/stories.tsx.template
index 13ad91df87..108123534f 100644
--- a/packages/cli/src/commands/generate/component/templates/stories.tsx.template
+++ b/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}' }
diff --git a/packages/cli/src/commands/generate/layout/__tests__/__snapshots__/layout.test.ts.snap b/packages/cli/src/commands/generate/layout/__tests__/__snapshots__/layout.test.ts.snap
index d0d3cfb785..40f5c2262e 100644
--- a/packages/cli/src/commands/generate/layout/__tests__/__snapshots__/layout.test.ts.snap
+++ b/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' }
diff --git a/packages/cli/src/commands/generate/layout/templates/stories.tsx.template b/packages/cli/src/commands/generate/layout/templates/stories.tsx.template
index 087fbdfa0e..7975cb26d3 100644
--- a/packages/cli/src/commands/generate/layout/templates/stories.tsx.template
+++ b/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' }
diff --git a/packages/cli/src/commands/generate/page/__tests__/__snapshots__/page.test.js.snap b/packages/cli/src/commands/generate/page/__tests__/__snapshots__/page.test.js.snap
index ab6d962f4d..b10b103973 100644
--- a/packages/cli/src/commands/generate/page/__tests__/__snapshots__/page.test.js.snap
+++ b/packages/cli/src/commands/generate/page/__tests__/__snapshots__/page.test.js.snap
@@ -104,8 +104,8 @@ export default PostPage
 exports[`creates a page story 1`] = `
 "import HomePage from './HomePage'
 
-export const generated = () => {
-  return <HomePage />
+export const generated = (args) => {
+  return <HomePage {...args} />
 }
 
 export default { title: 'Pages/HomePage' }
@@ -115,8 +115,8 @@ export default { title: 'Pages/HomePage' }
 exports[`creates a page story 2`] = `
 "import ContactUsPage from './ContactUsPage'
 
-export const generated = () => {
-  return <ContactUsPage />
+export const generated = (args) => {
+  return <ContactUsPage {...args} />
 }
 
 export default { title: 'Pages/ContactUsPage' }
@@ -181,8 +181,8 @@ exports[`file generation 1`] = `
 Object {
   "fileContent": "import HomePage from './HomePage'
 
-export const generated = () => {
-  return <HomePage />
+export const generated = (args) => {
+  return <HomePage {...args} />
 }
 
 export default { title: 'Pages/HomePage' }
@@ -263,8 +263,8 @@ exports[`file generation with route params 1`] = `
 Object {
   "fileContent": "import PostPage from './PostPage'
 
-export const generated = () => {
-  return <PostPage id={'42'} />
+export const generated = (args) => {
+  return <PostPage id={'42'} {...args} />
 }
 
 export default { title: 'Pages/PostPage' }
@@ -347,8 +347,8 @@ exports[`generates typescript pages 1`] = `undefined`;
 exports[`generates typescript pages 2`] = `
 "import TsFilesPage from './TsFilesPage'
 
-export const generated = () => {
-  return <TsFilesPage />
+export const generated = (args) => {
+  return <TsFilesPage  {...args} />
 }
 
 export default { title: 'Pages/TsFilesPage' }
diff --git a/packages/cli/src/commands/generate/page/templates/stories.tsx.template b/packages/cli/src/commands/generate/page/templates/stories.tsx.template
index 62a80ac0bd..c503e52703 100644
--- a/packages/cli/src/commands/generate/page/templates/stories.tsx.template
+++ b/packages/cli/src/commands/generate/page/templates/stories.tsx.template
@@ -1,7 +1,7 @@
 import ${pascalName}Page from './${pascalName}Page'
 
-export const generated = () => {
-  return <${pascalName}Page ${propValueParam}/>
+export const generated = (args) => {
+  return <${pascalName}Page ${propValueParam} {...args} />
 }
 
 export default { title: 'Pages/${pascalName}Page' }