fix(docs): update quick start to fix Storybook start up (#9014)

Fixes
https://community.redwoodjs.com/t/quick-start-tutorial-storybook-section-throws-error/5175.

__fixtures__/test-project/README.md

@@ -4,7 +4,7 @@ Welcome to [RedwoodJS](https://redwoodjs.com)!
 
 > **Prerequisites**
 >
-> - Redwood requires [Node.js](https://nodejs.org/en/) (>=18.x) and [Yarn](https://yarnpkg.com/) (>=1.15)
+> - Redwood requires [Node.js](https://nodejs.org/en/) (=18.x) and [Yarn](https://yarnpkg.com/) (>=1.15)
 > - Are you on Windows? For best results, follow our [Windows development setup](https://redwoodjs.com/docs/how-to/windows-development-setup) guide
 
 Start by installing dependencies:
@@ -13,30 +13,29 @@ Start by installing dependencies:
 yarn install
 ```
 
-Then change into that directory and start the development server:
+Then start the development server:
 
 ```
-cd my-redwood-project
 yarn redwood dev
 ```
 
-Your browser should automatically open to http://localhost:8910 where you'll see the Welcome Page, which links to many great resources.
+Your browser should automatically open to [http://localhost:8910](http://localhost:8910) where you'll see the Welcome Page, which links out to many great resources.
 
 > **The Redwood CLI**
 >
-> Congratulations on running your first Redwood CLI command!
-> From dev to deploy, the CLI is with you the whole way.
-> And there's quite a few commands at your disposal:
+> Congratulations on running your first Redwood CLI command! From dev to deploy, the CLI is with you the whole way. And there's quite a few commands at your disposal:
+>
 > ```
 > yarn redwood --help
 > ```
+>
 > For all the details, see the [CLI reference](https://redwoodjs.com/docs/cli-commands).
 
 ## Prisma and the database
 
 Redwood wouldn't be a full-stack framework without a database. It all starts with the schema. Open the [`schema.prisma`](api/db/schema.prisma) file in `api/db` and replace the `UserExample` model with the following `Post` model:
 
-```
+```prisma
 model Post {
   id        Int      @id @default(autoincrement())
   title     String
@@ -62,39 +61,42 @@ You'll be prompted for the name of your migration. `create posts` will do.
 Now let's generate everything we need to perform all the CRUD (Create, Retrieve, Update, Delete) actions on our `Post` model:
 
 ```
-yarn redwood g scaffold post
+yarn redwood generate scaffold post
 ```
 
-Navigate to http://localhost:8910/posts/new, fill in the title and body, and click "Save":
+Navigate to [http://localhost:8910/posts/new](http://localhost:8910/posts/new), fill in the title and body, and click "Save".
 
-Did we just create a post in the database? Yup! With `yarn rw g scaffold <model>`, Redwood created all the pages, components, and services necessary to perform all CRUD actions on our posts table.
+Did we just create a post in the database? Yup! With `yarn rw generate scaffold <model>`, Redwood created all the pages, components, and services necessary to perform all CRUD actions on our posts table.
 
 ## Frontend first with Storybook
 
-Don't know what your data models look like?
-That's more than ok—Redwood integrates Storybook so that you can work on design without worrying about data.
-Mockup, build, and verify your React components, even in complete isolation from the backend:
+Don't know what your data models look like? That's more than ok—Redwood integrates Storybook so that you can work on design without worrying about data. Mockup, build, and verify your React components, even in complete isolation from the backend:
 
 ```
 yarn rw storybook
 ```
 
-Before you start, see if the CLI's `setup ui` command has your favorite styling library:
+Seeing "Couldn't find any stories"? That's because you need a `*.stories.{tsx,jsx}` file. The Redwood CLI makes getting one easy enough—try generating a [Cell](https://redwoodjs.com/docs/cells), Redwood's data-fetching abstraction:
+
+```
+yarn rw generate cell examplePosts
+```
+
+The Storybook server should hot reload and now you'll have four stories to work with. They'll probably look a little bland since there's no styling. See if the Redwood CLI's `setup ui` command has your favorite styling library:
 
 ```
 yarn rw setup ui --help
 ```
 
 ## Testing with Jest
 
-It'd be hard to scale from side project to startup without a few tests.
-Redwood fully integrates Jest with the front and the backends and makes it easy to keep your whole app covered by generating test files with all your components and services:
+It'd be hard to scale from side project to startup without a few tests. Redwood fully integrates Jest with both the front- and back-ends, and makes it easy to keep your whole app covered by generating test files with all your components and services:
 
 ```
 yarn rw test
 ```
 
-To make the integration even more seamless, Redwood augments Jest with database [scenarios](https://redwoodjs.com/docs/testing.md#scenarios)  and [GraphQL mocking](https://redwoodjs.com/docs/testing.md#mocking-graphql-calls).
+To make the integration even more seamless, Redwood augments Jest with database [scenarios](https://redwoodjs.com/docs/testing#scenarios)  and [GraphQL mocking](https://redwoodjs.com/docs/testing#mocking-graphql-calls).
 
 ## Ship it
 
@@ -104,8 +106,7 @@ Redwood is designed for both serverless deploy targets like Netlify and Vercel a
 yarn rw setup deploy --help
 ```
 
-Don't go live without auth!
-Lock down your front and backends with Redwood's built-in, database-backed authentication system ([dbAuth](https://redwoodjs.com/docs/authentication#self-hosted-auth-installation-and-setup)), or integrate with nearly a dozen third party auth providers:
+Don't go live without auth! Lock down your app with Redwood's built-in, database-backed authentication system ([dbAuth](https://redwoodjs.com/docs/authentication#self-hosted-auth-installation-and-setup)), or integrate with nearly a dozen third-party auth providers:
 
 ```
 yarn rw setup auth --help

__fixtures__/test-project/web/package.json

@@ -23,10 +23,9 @@
   "devDependencies": {
     "@redwoodjs/vite": "6.0.3",
     "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.25",
+    "postcss": "^8.4.27",
     "postcss-loader": "^7.3.3",
-    "prettier-plugin-tailwindcss": "^0.3.0",
-    "storybook": "^7.0.26",
-    "tailwindcss": "^3.3.2"
+    "prettier-plugin-tailwindcss": "^0.4.1",
+    "tailwindcss": "^3.3.3"
   }
 }

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

@@ -11,24 +11,24 @@ export default meta
 
 export const loading: StoryObj<typeof Loading> = {
   render: () => {
-    return Loading ? <Loading /> : <></>;
+    return Loading ? <Loading /> : <></>
   },
 }
 
 export const empty: StoryObj<typeof Empty> = {
   render: () => {
-    return Empty ? <Empty /> : <></>;
+    return Empty ? <Empty /> : <></>
   },
 }
 
 export const failure: StoryObj<typeof Failure> = {
   render: (args) => {
-    return Failure ? <Failure error={new Error("Oh no")} {...args} /> : <></>;
+    return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
   },
 }
 
 export const success: StoryObj<typeof Success> = {
   render: (args) => {
-    return Success ? <Success {...standard()} {...args} /> : <></>;
+    return Success ? <Success {...standard()} {...args} /> : <></>
   },
 }

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

@@ -11,24 +11,24 @@ export default meta
 
 export const loading: StoryObj<typeof Loading> = {
   render: () => {
-    return Loading ? <Loading /> : <></>;
+    return Loading ? <Loading /> : <></>
   },
 }
 
 export const empty: StoryObj<typeof Empty> = {
   render: () => {
-    return Empty ? <Empty /> : <></>;
+    return Empty ? <Empty /> : <></>
   },
 }
 
 export const failure: StoryObj<typeof Failure> = {
   render: (args) => {
-    return Failure ? <Failure error={new Error("Oh no")} {...args} /> : <></>;
+    return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
   },
 }
 
 export const success: StoryObj<typeof Success> = {
   render: (args) => {
-    return Success ? <Success {...standard()} {...args} /> : <></>;
+    return Success ? <Success {...standard()} {...args} /> : <></>
   },
 }

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

@@ -11,24 +11,24 @@ export default meta
 
 export const loading: StoryObj<typeof Loading> = {
   render: () => {
-    return Loading ? <Loading /> : <></>;
+    return Loading ? <Loading /> : <></>
   },
 }
 
 export const empty: StoryObj<typeof Empty> = {
   render: () => {
-    return Empty ? <Empty /> : <></>;
+    return Empty ? <Empty /> : <></>
   },
 }
 
 export const failure: StoryObj<typeof Failure> = {
   render: (args) => {
-    return Failure ? <Failure error={new Error("Oh no")} {...args} /> : <></>;
+    return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
   },
 }
 
 export const success: StoryObj<typeof Success> = {
   render: (args) => {
-    return Success ? <Success {...standard()} {...args} /> : <></>;
+    return Success ? <Success {...standard()} {...args} /> : <></>
   },
 }

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

@@ -11,24 +11,24 @@ export default meta
 
 export const loading: StoryObj<typeof Loading> = {
   render: () => {
-    return Loading ? <Loading /> : <></>;
+    return Loading ? <Loading /> : <></>
   },
 }
 
 export const empty: StoryObj<typeof Empty> = {
   render: () => {
-    return Empty ? <Empty /> : <></>;
+    return Empty ? <Empty /> : <></>
   },
 }
 
 export const failure: StoryObj<typeof Failure> = {
   render: (args) => {
-    return Failure ? <Failure error={new Error("Oh no")} {...args} /> : <></>;
+    return Failure ? <Failure error={new Error('Oh no')} {...args} /> : <></>
   },
 }
 
 export const success: StoryObj<typeof Success> = {
   render: (args) => {
-    return Success ? <Success {...standard()} {...args} /> : <></>;
+    return Success ? <Success {...standard()} {...args} /> : <></>
   },
 }

__fixtures__/test-project/web/src/index.css

@@ -1,13 +1,13 @@
 /**
  * START --- SETUP TAILWINDCSS EDIT
  *
- * `yarn rw setup ui tailwindcss` placed these imports here
+ * `yarn rw setup ui tailwindcss` placed these directives here
  * to inject Tailwind's styles into your CSS.
- * For more information, see: https://tailwindcss.com/docs/installation#include-tailwind-in-your-css
+ * For more information, see: https://tailwindcss.com/docs/installation
  */
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 /**
  * END --- SETUP TAILWINDCSS EDIT
  */

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

@@ -4,7 +4,7 @@ import AboutPage from './AboutPage'
 
 const meta: Meta<typeof AboutPage> = {
   component: AboutPage,
-};
+}
 
 export default meta
 

docs/docs/quick-start.md

@@ -102,7 +102,17 @@ Mockup, build, and verify your React components, even in complete isolation from
 yarn rw storybook
 ```
 
-Before you start, see if the CLI's `setup ui` command has your favorite styling library:
+Seeing "Couldn't find any stories"?
+That's because you need a `*.stories.{tsx,jsx}` file.
+The Redwood CLI makes getting one easy enough—try generating a [Cell](./cells), Redwood's data-fetching abstraction:
+
+```
+yarn rw generate cell examplePosts
+```
+
+The Storybook server should hot reload and now you'll have four stories to work with.
+They'll probably look a little bland since there's no styling.
+See if the Redwood CLI's `setup ui` command has your favorite styling library:
 
 ```
 yarn rw setup ui --help

packages/create-redwood-app/templates/js/README.md

@@ -4,7 +4,7 @@ Welcome to [RedwoodJS](https://redwoodjs.com)!
 
 > **Prerequisites**
 >
-> - Redwood requires [Node.js](https://nodejs.org/en/) (>=18.x) and [Yarn](https://yarnpkg.com/) (>=1.15)
+> - Redwood requires [Node.js](https://nodejs.org/en/) (=18.x) and [Yarn](https://yarnpkg.com/) (>=1.15)
 > - Are you on Windows? For best results, follow our [Windows development setup](https://redwoodjs.com/docs/how-to/windows-development-setup) guide
 
 Start by installing dependencies:
@@ -13,30 +13,29 @@ Start by installing dependencies:
 yarn install
 ```
 
-Then change into that directory and start the development server:
+Then start the development server:
 
 ```
-cd my-redwood-project
 yarn redwood dev
 ```
 
-Your browser should automatically open to http://localhost:8910 where you'll see the Welcome Page, which links to many great resources.
+Your browser should automatically open to [http://localhost:8910](http://localhost:8910) where you'll see the Welcome Page, which links out to many great resources.
 
 > **The Redwood CLI**
 >
-> Congratulations on running your first Redwood CLI command!
-> From dev to deploy, the CLI is with you the whole way.
-> And there's quite a few commands at your disposal:
+> Congratulations on running your first Redwood CLI command! From dev to deploy, the CLI is with you the whole way. And there's quite a few commands at your disposal:
+>
 > ```
 > yarn redwood --help
 > ```
+>
 > For all the details, see the [CLI reference](https://redwoodjs.com/docs/cli-commands).
 
 ## Prisma and the database
 
 Redwood wouldn't be a full-stack framework without a database. It all starts with the schema. Open the [`schema.prisma`](api/db/schema.prisma) file in `api/db` and replace the `UserExample` model with the following `Post` model:
 
-```
+```prisma
 model Post {
   id        Int      @id @default(autoincrement())
   title     String
@@ -62,39 +61,42 @@ You'll be prompted for the name of your migration. `create posts` will do.
 Now let's generate everything we need to perform all the CRUD (Create, Retrieve, Update, Delete) actions on our `Post` model:
 
 ```
-yarn redwood g scaffold post
+yarn redwood generate scaffold post
 ```
 
-Navigate to http://localhost:8910/posts/new, fill in the title and body, and click "Save":
+Navigate to [http://localhost:8910/posts/new](http://localhost:8910/posts/new), fill in the title and body, and click "Save".
 
-Did we just create a post in the database? Yup! With `yarn rw g scaffold <model>`, Redwood created all the pages, components, and services necessary to perform all CRUD actions on our posts table.
+Did we just create a post in the database? Yup! With `yarn rw generate scaffold <model>`, Redwood created all the pages, components, and services necessary to perform all CRUD actions on our posts table.
 
 ## Frontend first with Storybook
 
-Don't know what your data models look like?
-That's more than ok—Redwood integrates Storybook so that you can work on design without worrying about data.
-Mockup, build, and verify your React components, even in complete isolation from the backend:
+Don't know what your data models look like? That's more than ok—Redwood integrates Storybook so that you can work on design without worrying about data. Mockup, build, and verify your React components, even in complete isolation from the backend:
 
 ```
 yarn rw storybook
 ```
 
-Before you start, see if the CLI's `setup ui` command has your favorite styling library:
+Seeing "Couldn't find any stories"? That's because you need a `*.stories.{tsx,jsx}` file. The Redwood CLI makes getting one easy enough—try generating a [Cell](https://redwoodjs.com/docs/cells), Redwood's data-fetching abstraction:
+
+```
+yarn rw generate cell examplePosts
+```
+
+The Storybook server should hot reload and now you'll have four stories to work with. They'll probably look a little bland since there's no styling. See if the Redwood CLI's `setup ui` command has your favorite styling library:
 
 ```
 yarn rw setup ui --help
 ```
 
 ## Testing with Jest
 
-It'd be hard to scale from side project to startup without a few tests.
-Redwood fully integrates Jest with the front and the backends and makes it easy to keep your whole app covered by generating test files with all your components and services:
+It'd be hard to scale from side project to startup without a few tests. Redwood fully integrates Jest with both the front- and back-ends, and makes it easy to keep your whole app covered by generating test files with all your components and services:
 
 ```
 yarn rw test
 ```
 
-To make the integration even more seamless, Redwood augments Jest with database [scenarios](https://redwoodjs.com/docs/testing.md#scenarios)  and [GraphQL mocking](https://redwoodjs.com/docs/testing.md#mocking-graphql-calls).
+To make the integration even more seamless, Redwood augments Jest with database [scenarios](https://redwoodjs.com/docs/testing#scenarios)  and [GraphQL mocking](https://redwoodjs.com/docs/testing#mocking-graphql-calls).
 
 ## Ship it
 
@@ -104,8 +106,7 @@ Redwood is designed for both serverless deploy targets like Netlify and Vercel a
 yarn rw setup deploy --help
 ```
 
-Don't go live without auth!
-Lock down your front and backends with Redwood's built-in, database-backed authentication system ([dbAuth](https://redwoodjs.com/docs/authentication#self-hosted-auth-installation-and-setup)), or integrate with nearly a dozen third party auth providers:
+Don't go live without auth! Lock down your app with Redwood's built-in, database-backed authentication system ([dbAuth](https://redwoodjs.com/docs/authentication#self-hosted-auth-installation-and-setup)), or integrate with nearly a dozen third-party auth providers:
 
 ```
 yarn rw setup auth --help