From f1afd128c4d9e1a1eacfff91ea2d63ddf19f1ac4 Mon Sep 17 00:00:00 2001 From: Dominic Saadi Date: Tue, 8 Aug 2023 17:26:26 -0700 Subject: [PATCH] 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 | 41 ++++++------- __fixtures__/test-project/web/package.json | 7 +-- .../AuthorCell/AuthorCell.stories.tsx | 8 +-- .../BlogPostCell/BlogPostCell.stories.tsx | 8 +-- .../BlogPostsCell/BlogPostsCell.stories.tsx | 8 +-- .../WaterfallBlogPostCell.stories.tsx | 8 +-- __fixtures__/test-project/web/src/index.css | 10 ++-- .../src/pages/AboutPage/AboutPage.stories.tsx | 2 +- docs/docs/quick-start.md | 12 +++- .../create-redwood-app/templates/js/README.md | 41 ++++++------- .../create-redwood-app/templates/ts/README.md | 41 ++++++------- .../rebuild-test-project-fixture.js | 60 +++++++------------ 12 files changed, 121 insertions(+), 125 deletions(-) diff --git a/__fixtures__/test-project/README.md b/__fixtures__/test-project/README.md index 0b8e17b79a45..08f58865b056 100644 --- a/__fixtures__/test-project/README.md +++ b/__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,24 +61,28 @@ 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 `, 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 `, 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 @@ -87,14 +90,13 @@ 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 diff --git a/__fixtures__/test-project/web/package.json b/__fixtures__/test-project/web/package.json index 40bcc5bb06c0..60e9003439c7 100644 --- a/__fixtures__/test-project/web/package.json +++ b/__fixtures__/test-project/web/package.json @@ -23,10 +23,9 @@ "devDependencies": { "@redwoodjs/vite": "6.0.4", "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" } } diff --git a/__fixtures__/test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx b/__fixtures__/test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx index 3a5b334f6e03..8d535ed2fb9b 100644 --- a/__fixtures__/test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx +++ b/__fixtures__/test-project/web/src/components/AuthorCell/AuthorCell.stories.tsx @@ -11,24 +11,24 @@ export default meta export const loading: StoryObj = { render: () => { - return Loading ? : <>; + return Loading ? : <> }, } export const empty: StoryObj = { render: () => { - return Empty ? : <>; + return Empty ? : <> }, } export const failure: StoryObj = { render: (args) => { - return Failure ? : <>; + return Failure ? : <> }, } export const success: StoryObj = { render: (args) => { - return Success ? : <>; + return Success ? : <> }, } diff --git a/__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx b/__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx index 962c48fe5246..797fb9c7c1dc 100644 --- a/__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx +++ b/__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.stories.tsx @@ -11,24 +11,24 @@ export default meta export const loading: StoryObj = { render: () => { - return Loading ? : <>; + return Loading ? : <> }, } export const empty: StoryObj = { render: () => { - return Empty ? : <>; + return Empty ? : <> }, } export const failure: StoryObj = { render: (args) => { - return Failure ? : <>; + return Failure ? : <> }, } export const success: StoryObj = { render: (args) => { - return Success ? : <>; + return Success ? : <> }, } diff --git a/__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx b/__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx index 7c7a32dda115..75950a785a0e 100644 --- a/__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx +++ b/__fixtures__/test-project/web/src/components/BlogPostsCell/BlogPostsCell.stories.tsx @@ -11,24 +11,24 @@ export default meta export const loading: StoryObj = { render: () => { - return Loading ? : <>; + return Loading ? : <> }, } export const empty: StoryObj = { render: () => { - return Empty ? : <>; + return Empty ? : <> }, } export const failure: StoryObj = { render: (args) => { - return Failure ? : <>; + return Failure ? : <> }, } export const success: StoryObj = { render: (args) => { - return Success ? : <>; + return Success ? : <> }, } diff --git a/__fixtures__/test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx b/__fixtures__/test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx index 466e409b805e..e1781c510d54 100644 --- a/__fixtures__/test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx +++ b/__fixtures__/test-project/web/src/components/WaterfallBlogPostCell/WaterfallBlogPostCell.stories.tsx @@ -11,24 +11,24 @@ export default meta export const loading: StoryObj = { render: () => { - return Loading ? : <>; + return Loading ? : <> }, } export const empty: StoryObj = { render: () => { - return Empty ? : <>; + return Empty ? : <> }, } export const failure: StoryObj = { render: (args) => { - return Failure ? : <>; + return Failure ? : <> }, } export const success: StoryObj = { render: (args) => { - return Success ? : <>; + return Success ? : <> }, } diff --git a/__fixtures__/test-project/web/src/index.css b/__fixtures__/test-project/web/src/index.css index 027a7cd88a2a..b31cb3378fae 100644 --- a/__fixtures__/test-project/web/src/index.css +++ b/__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 */ diff --git a/__fixtures__/test-project/web/src/pages/AboutPage/AboutPage.stories.tsx b/__fixtures__/test-project/web/src/pages/AboutPage/AboutPage.stories.tsx index fcf2e0439eaa..b8259100eb85 100644 --- a/__fixtures__/test-project/web/src/pages/AboutPage/AboutPage.stories.tsx +++ b/__fixtures__/test-project/web/src/pages/AboutPage/AboutPage.stories.tsx @@ -4,7 +4,7 @@ import AboutPage from './AboutPage' const meta: Meta = { component: AboutPage, -}; +} export default meta diff --git a/docs/docs/quick-start.md b/docs/docs/quick-start.md index 2dbac26d6ff9..40f35f9134bf 100644 --- a/docs/docs/quick-start.md +++ b/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 diff --git a/packages/create-redwood-app/templates/js/README.md b/packages/create-redwood-app/templates/js/README.md index 0b8e17b79a45..08f58865b056 100644 --- a/packages/create-redwood-app/templates/js/README.md +++ b/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,24 +61,28 @@ 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 `, 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 `, 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 @@ -87,14 +90,13 @@ 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 diff --git a/packages/create-redwood-app/templates/ts/README.md b/packages/create-redwood-app/templates/ts/README.md index 0b8e17b79a45..08f58865b056 100644 --- a/packages/create-redwood-app/templates/ts/README.md +++ b/packages/create-redwood-app/templates/ts/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,24 +61,28 @@ 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 `, 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 `, 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 @@ -87,14 +90,13 @@ 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 diff --git a/tasks/test-project/rebuild-test-project-fixture.js b/tasks/test-project/rebuild-test-project-fixture.js index 1d26ecc07a9d..c4363c45689b 100755 --- a/tasks/test-project/rebuild-test-project-fixture.js +++ b/tasks/test-project/rebuild-test-project-fixture.js @@ -297,22 +297,6 @@ async function runCommand() { await tuiTask({ step: 1, - title: 'Temporary (v6): Add storybook and vite canary to web dependencies', - content: - 'Adding storybook and @redwoodjs/vite@6.0.0-canary.450\n' + - ' ⏱ This could take a while...', - task: () => { - return exec( - 'yarn', - ['workspace web add -D storybook @redwoodjs/vite@6.0.0-canary.450'], - getExecaOptions(OUTPUT_PROJECT_PATH) - ) - }, - skip: skipStep(startStep, 1), - }) - - await tuiTask({ - step: 2, title: '[link] Building Redwood framework', content: 'yarn build:clean && yarn build', task: async () => { @@ -322,11 +306,11 @@ async function runCommand() { getExecaOptions(RW_FRAMEWORKPATH) ) }, - skip: skipStep(startStep, 2), + skip: skipStep(startStep, 1), }) await tuiTask({ - step: 3, + step: 2, title: '[link] Adding framework dependencies to project', content: 'Adding framework dependencies to project...', task: () => { @@ -336,21 +320,21 @@ async function runCommand() { 'pipe' // TODO: Remove this when everything is using @rwjs/tui ) }, - skip: skipStep(startStep, 3), + skip: skipStep(startStep, 2), }) await tuiTask({ - step: 4, + step: 3, title: 'Installing node_modules', content: 'yarn install', task: () => { return exec('yarn install', getExecaOptions(OUTPUT_PROJECT_PATH)) }, - skip: skipStep(startStep, 4), + skip: skipStep(startStep, 3), }) await tuiTask({ - step: 5, + step: 4, title: 'Updating ports in redwood.toml...', task: () => { // We do this, to make it easier to run multiple test projects in parallel @@ -373,11 +357,11 @@ async function runCommand() { fs.writeFileSync(REDWOOD_TOML_PATH, newRedwoodToml) }, - skip: skipStep(startStep, 5), + skip: skipStep(startStep, 4), }) await tuiTask({ - step: 6, + step: 5, title: '[link] Copying framework packages to project', task: () => { return copyFrameworkPackages( @@ -386,12 +370,12 @@ async function runCommand() { 'pipe' ) }, - skip: skipStep(startStep, 6), + skip: skipStep(startStep, 5), }) // Note that we undo this at the end await tuiTask({ - step: 7, + step: 6, title: '[link] Add rwfw project:copy postinstall', task: () => { return updatePkgJsonScripts({ @@ -401,33 +385,33 @@ async function runCommand() { }, }) }, - skip: skipStep(startStep, 7), + skip: skipStep(startStep, 6), }) await tuiTask({ - step: 8, + step: 7, title: 'Apply web codemods', task: () => { return webTasks(OUTPUT_PROJECT_PATH, { linkWithLatestFwBuild: true, }) }, - skip: skipStep(startStep, 8), + skip: skipStep(startStep, 7), }) await tuiTask({ - step: 9, + step: 8, title: 'Apply api codemods', task: () => { return apiTasks(OUTPUT_PROJECT_PATH, { linkWithLatestFwBuild: true, }) }, - skip: skipStep(startStep, 9), + skip: skipStep(startStep, 8), }) await tuiTask({ - step: 10, + step: 9, title: 'Running prisma migrate reset', task: () => { return exec( @@ -436,11 +420,11 @@ async function runCommand() { getExecaOptions(OUTPUT_PROJECT_PATH) ) }, - skip: skipStep(startStep, 10), + skip: skipStep(startStep, 9), }) await tuiTask({ - step: 11, + step: 10, title: 'Lint --fix all the things', task: async () => { try { @@ -469,11 +453,11 @@ async function runCommand() { } } }, - skip: skipStep(startStep, 11), + skip: skipStep(startStep, 10), }) await tuiTask({ - step: 12, + step: 11, title: 'Replace and Cleanup Fixture', task: async () => { // @TODO: This only works on UNIX, we should use path.join everywhere @@ -507,11 +491,11 @@ async function runCommand() { // then removes new Project temp directory await copyProject() }, - skip: skipStep(startStep, 12), + skip: skipStep(startStep, 11), }) await tuiTask({ - step: 13, + step: 12, title: 'All done!', task: () => { console.log('-'.repeat(30))