Updated Storybook Template files to for CSF 3 (#8788)

[Notion
Task](https://www.notion.so/redwoodjs/generators-to-CSF-3-444966a53e5a462eab5d4c3f093ebbb3?pvs=4)

## Feature description

Updated storybook stories for CSF 3

- Updated stories for cells, components, layouts, and pages

Tested TypeScript
- [x] cells 
- [x] components
- [x] layouts
- [x] pages

Tested JavaScript
- [x] cells 
- [x] components
- [x] layouts
- [x] pages

Author: ahaywood

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,12 +1,13 @@
-import type { ComponentMeta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import AboutPage from './AboutPage'
 
-export const generated = () => {
-  return <AboutPage />
-}
-
-export default {
-  title: 'Pages/AboutPage',
+const meta: Meta<typeof AboutPage> = {
   component: AboutPage,
-} as ComponentMeta<typeof AboutPage>
+};
+
+export default meta
+
+type Story = StoryObj<typeof AboutPage>
+
+export const Primary: Story = {}

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

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

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

@@ -1,12 +1,13 @@
-import type { ComponentMeta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import ContactUsPage from './ContactUsPage'
 
-export const generated = () => {
-  return <ContactUsPage />
+const meta: Meta<typeof ContactUsPage> = {
+  component: ContactUsPage,
 }
 
-export default {
-  title: 'Pages/ContactUsPage',
-  component: ContactUsPage,
-} as ComponentMeta<typeof ContactUsPage>
+export default meta
+
+type Story = StoryObj<typeof ContactUsPage>
+
+export const Primary: Story = {}