Improve typing on generated storybook components (#6226)

Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>
Co-authored-by: Daniel Choudhury <dannychoudhury@gmail.com>
Co-authored-by: Dominic Saadi <dominiceliassaadi@gmail.com>

__fixtures__/test-project/api/src/services/posts/posts.scenarios.ts

@@ -10,7 +10,7 @@ export const standard = defineScenario<Prisma.PostCreateArgs>({
         body: 'String',
         author: {
           create: {
-            email: 'String1013854',
+            email: 'String1880855',
             hashedPassword: 'String',
             fullName: 'String',
             salt: 'String',
@@ -24,7 +24,7 @@ export const standard = defineScenario<Prisma.PostCreateArgs>({
         body: 'String',
         author: {
           create: {
-            email: 'String3666736',
+            email: 'String3103243',
             hashedPassword: 'String',
             fullName: 'String',
             salt: 'String',

__fixtures__/test-project/api/src/services/users/users.scenarios.ts

@@ -6,15 +6,15 @@ export const standard = defineScenario<Prisma.UserCreateArgs>({
   user: {
     one: {
       data: {
-        email: 'String7334627',
+        email: 'String8646974',
         hashedPassword: 'String',
         fullName: 'String',
         salt: 'String',
       },
     },
     two: {
       data: {
-        email: 'String8778585',
+        email: 'String1817344',
         hashedPassword: 'String',
         fullName: 'String',
         salt: 'String',

__fixtures__/test-project/web/src/components/Author/Author.stories.tsx

@@ -1,12 +1,30 @@
+// When you've added props to your component,
+// pass Storybook's `args` through this story to control it from the addons panel:
+//
+// ```tsx
+// import type { ComponentStory } from '@storybook/react'
+//
+// export const generated: ComponentStory<typeof Author> = (args) => {
+//   return <Author {...args} />
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { ComponentMeta } from '@storybook/react'
+
 import Author from './Author'
 
 const author = {
   email: 'story.user@email.com',
   fullName: 'Story User',
 }
 
-export const generated = (args) => {
-  return <Author {...args} author={author} />
+export const generated = () => {
+  return <Author author={author} />
 }
 
-export default { title: 'Components/Author' }
+export default {
+  title: 'Components/Author',
+  component: Author,
+} as ComponentMeta<typeof Author>

__fixtures__/test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx

@@ -1,20 +1,22 @@
+import type { ComponentStory } from '@storybook/react'
+
 import { Loading, Empty, Failure, Success } from './AuthorCell'
 import { standard } from './AuthorCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
-export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+export const failure: ComponentStory<typeof Failure> = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
-export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+export const success: ComponentStory<typeof Success> = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/AuthorCell' }

__fixtures__/test-project/web/src/components/BlogPost/BlogPost.stories.tsx

@@ -1,7 +1,25 @@
+// When you've added props to your component,
+// pass Storybook's `args` through this story to control it from the addons panel:
+//
+// ```tsx
+// import type { ComponentStory } from '@storybook/react'
+//
+// export const generated: ComponentStory<typeof BlogPost> = (args) => {
+//   return <BlogPost {...args} />
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { ComponentMeta } from '@storybook/react'
+
 import BlogPost from './BlogPost'
 
-export const generated = (args) => {
-  return <BlogPost {...args} />
+export const generated = () => {
+  return <BlogPost />
 }
 
-export default { title: 'Components/BlogPost' }
+export default {
+  title: 'Components/BlogPost',
+  component: BlogPost,
+} as ComponentMeta<typeof BlogPost>

__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx

@@ -1,20 +1,22 @@
+import type { ComponentStory } from '@storybook/react'
+
 import { Loading, Empty, Failure, Success } from './BlogPostCell'
 import { standard } from './BlogPostCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
-export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+export const failure: ComponentStory<typeof Failure> = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
-export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+export const success: ComponentStory<typeof Success> = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/BlogPostCell' }

__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx

@@ -1,20 +1,22 @@
+import type { ComponentStory } from '@storybook/react'
+
 import { Loading, Empty, Failure, Success } from './BlogPostsCell'
 import { standard } from './BlogPostsCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
-export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+export const failure: ComponentStory<typeof Failure> = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
-export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+export const success: ComponentStory<typeof Success> = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/BlogPostsCell' }

__fixtures__/test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx

@@ -1,20 +1,22 @@
+import type { ComponentStory } from '@storybook/react'
+
 import { Loading, Empty, Failure, Success } from './WaterfallBlogPostCell'
 import { standard } from './WaterfallBlogPostCell.mock'
 
-export const loading = (args) => {
-  return Loading ? <Loading {...args} /> : null
+export const loading = () => {
+  return Loading ? <Loading /> : <></>
 }
 
-export const empty = (args) => {
-  return Empty ? <Empty {...args} /> : null
+export const empty = () => {
+  return Empty ? <Empty /> : <></>
 }
 
-export const failure = (args) => {
-  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : null
+export const failure: ComponentStory<typeof Failure> = (args) => {
+  return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
 }
 
-export const success = (args) => {
-  return Success ? <Success {...standard()} {...args} /> : null
+export const success: ComponentStory<typeof Success> = (args) => {
+  return Success ? <Success {...standard()} {...args} /> : <></>
 }
 
 export default { title: 'Cells/WaterfallBlogPostCell' }

__fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.stories.tsx

@@ -1,7 +1,12 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+
 import BlogLayout from './BlogLayout'
 
-export const generated = (args) => {
+export const generated: ComponentStory<typeof BlogLayout> = (args) => {
   return <BlogLayout {...args} />
 }
 
-export default { title: 'Layouts/BlogLayout' }
+export default {
+  title: 'Layouts/BlogLayout',
+  component: BlogLayout,
+} as ComponentMeta<typeof BlogLayout>

__fixtures__/test-project/web/src/pages/AboutPage/AboutPage.stories.tsx

@@ -1,7 +1,12 @@
+import type { ComponentMeta } from '@storybook/react'
+
 import AboutPage from './AboutPage'
 
-export const generated = (args) => {
-  return <AboutPage {...args} />
+export const generated = () => {
+  return <AboutPage />
 }
 
-export default { title: 'Pages/AboutPage' }
+export default {
+  title: 'Pages/AboutPage',
+  component: AboutPage,
+} as ComponentMeta<typeof AboutPage>

__fixtures__/test-project/web/src/pages/BlogPostPage/BlogPostPage.stories.tsx

@@ -1,7 +1,12 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+
 import BlogPostPage from './BlogPostPage'
 
-export const generated = (args) => {
+export const generated: ComponentStory<typeof BlogPostPage> = (args) => {
   return <BlogPostPage id={42} {...args} />
 }
 
-export default { title: 'Pages/BlogPostPage' }
+export default {
+  title: 'Pages/BlogPostPage',
+  component: BlogPostPage,
+} as ComponentMeta<typeof BlogPostPage>

__fixtures__/test-project/web/src/pages/ContactPage/ContactPage.stories.tsx

@@ -1,7 +1,12 @@
+import type { ComponentMeta } from '@storybook/react'
+
 import ContactPage from './ContactPage'
 
-export const generated = (args) => {
-  return <ContactPage {...args} />
+export const generated = () => {
+  return <ContactPage />
 }
 
-export default { title: 'Pages/ContactPage' }
+export default {
+  title: 'Pages/ContactPage',
+  component: ContactPage,
+} as ComponentMeta<typeof ContactPage>

__fixtures__/test-project/web/src/pages/HomePage/HomePage.stories.tsx

@@ -1,7 +1,12 @@
+import type { ComponentMeta } from '@storybook/react'
+
 import HomePage from './HomePage'
 
-export const generated = (args) => {
-  return <HomePage {...args} />
+export const generated = () => {
+  return <HomePage />
 }
 
-export default { title: 'Pages/HomePage' }
+export default {
+  title: 'Pages/HomePage',
+  component: HomePage,
+} as ComponentMeta<typeof HomePage>

__fixtures__/test-project/web/src/pages/ProfilePage/ProfilePage.stories.tsx

@@ -1,7 +1,12 @@
+import type { ComponentMeta } from '@storybook/react'
+
 import ProfilePage from './ProfilePage'
 
-export const generated = (args) => {
-  return <ProfilePage {...args} />
+export const generated = () => {
+  return <ProfilePage />
 }
 
-export default { title: 'Pages/ProfilePage' }
+export default {
+  title: 'Pages/ProfilePage',
+  component: ProfilePage,
+} as ComponentMeta<typeof ProfilePage>

__fixtures__/test-project/web/src/pages/WaterfallPage/WaterfallPage.stories.tsx

@@ -1,7 +1,12 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react'
+
 import WaterfallPage from './WaterfallPage'
 
-export const generated = (args) => {
+export const generated: ComponentStory<typeof WaterfallPage> = (args) => {
   return <WaterfallPage id={42} {...args} />
 }
 
-export default { title: 'Pages/WaterfallPage' }
+export default {
+  title: 'Pages/WaterfallPage',
+  component: WaterfallPage,
+} as ComponentMeta<typeof WaterfallPage>