Merge branch 'main' into spelling

__fixtures__/test-project/api/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "@redwoodjs/api": "1.5.1",
-    "@redwoodjs/graphql-server": "1.5.1"
+    "@redwoodjs/api": "1.5.2",
+    "@redwoodjs/graphql-server": "1.5.2"
   }
 }

__fixtures__/test-project/package.json

@@ -8,7 +8,7 @@
     ]
   },
   "devDependencies": {
-    "@redwoodjs/core": "1.5.1"
+    "@redwoodjs/core": "1.5.2"
   },
   "eslintConfig": {
     "extends": "@redwoodjs/eslint-config",

__fixtures__/test-project/web/package.json

@@ -13,10 +13,10 @@
     ]
   },
   "dependencies": {
-    "@redwoodjs/auth": "1.5.1",
-    "@redwoodjs/forms": "1.5.1",
-    "@redwoodjs/router": "1.5.1",
-    "@redwoodjs/web": "1.5.1",
+    "@redwoodjs/auth": "1.5.2",
+    "@redwoodjs/forms": "1.5.2",
+    "@redwoodjs/router": "1.5.2",
+    "@redwoodjs/web": "1.5.2",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2"

docs/docs/a11y.md

@@ -166,5 +166,5 @@ export default ContactPage
 `RouteFocus` tells the router to send focus to it's child on page change. In the example above, when the user navigates to the contact page, the name text field on the form is focused—the first field of the form they're here to fill out.
 
 <div class="video-container">
-  <iframe src="https://www.youtube.com/embed/T1zs77LU68w?t=3240" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0" allowfullscreen></iframe>
+  <iframe src="https://www.youtube.com/embed/T1zs77LU68w?t=3240" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0; fullscreen"></iframe>
 </div>

docs/docs/contributing-overview.md

@@ -100,7 +100,7 @@ What you want to do not on the roadmap? Well, still go for it! We love spikes an
 |[`@redwoodjs/graphql-server`](https://github.com/redwoodjs/redwood/blob/main/packages/graphql-server/README.md)|Exposes functions to build the GraphQL API, provides services with `context`, and a set of envelop plugins to supercharge your GraphQL API with logging, authentication, error handling, directives and more|
 |[`@redwoodjs/internal`](https://github.com/redwoodjs/redwood/blob/main/packages/internal/README.md)|Provides tooling to parse Redwood configs and get a project's paths|
 |[`@redwoodjs/prerender`](https://github.com/redwoodjs/redwood/blob/main/packages/prerender/README.md)|Defines functionality for prerendering static content|
-|[`@redwoodjs/record`](https://github.com/redwoodjs/redwood/blob/main/packages/record/README.md)|ORM bult on top of Prisma. It may be extended in the future to wrap other database access packages|
+|[`@redwoodjs/record`](https://github.com/redwoodjs/redwood/blob/main/packages/record/README.md)|ORM built on top of Prisma. It may be extended in the future to wrap other database access packages|
 |[`@redwoodjs/router`](https://github.com/redwoodjs/redwood/blob/main/packages/router/README.md)|The built-in router for Redwood|
 |[`@redwoodjs/structure`](https://github.com/redwoodjs/redwood/blob/main/packages/structure/README.md)|Provides a way to build, validate and inspect an object graph that represents a complete Redwood project|
 |[`@redwoodjs/telemetry`](https://github.com/redwoodjs/redwood/blob/main/packages/telemetry/README.md)|Provides functionality for anonymous data collection|

docs/docs/contributing-walkthrough.md

@@ -26,8 +26,7 @@ The following recording is from a Contributing Workshop, following through the e
   style={{ height: '24rem' }}
   src="https://www.youtube.com/embed/aZs_9g-5Ms8"
   frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0"
-  allowfullscreen
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0; fullscreen"
 ></iframe>
 
 ## Prologue: Getting Started with Redwood and GitHub (and git)
@@ -71,11 +70,11 @@ This has quickly become the de facto editor for JavaScript and TypeScript. Addit
 
 **GitHub Desktop**
 [Download GitHub Desktop](https://desktop.github.com)
-You’ll need to be comfortable using Git at the command line. But the thing ew like best about GitHub Desktop is how easy it makes workflow across GitHub -- GitHub Desktop -- VS Code. You don’t have to worry about syncing permissions or finding things. You can start from a repo on GitHub.com and use Desktop to do everything from “clone and open on your computer” to returning back to the site to “open a PR on GitHub”.
+You’ll need to be comfortable using Git at the command line. But the thing we like best about GitHub Desktop is how easy it makes workflow across GitHub -- GitHub Desktop -- VS Code. You don’t have to worry about syncing permissions or finding things. You can start from a repo on GitHub.com and use Desktop to do everything from “clone and open on your computer” to returning back to the site to “open a PR on GitHub”.
 
 **[Mac OS] iTerm and Oh-My-Zsh**
-There’s nothing wrong with Terminal (on Mac) and bash. (If you’re on Windows, we highly recommend using Git for Windows and Git bash.) But we enjoy using iTerm ([download](https://iterm2.com)) and Zsh much more (use [Oh My Zsh](https://ohmyz.sh)). Heads up, you can get lost in the world of theming and adding plugins. We recommend keeping it simple for awhile before taking the customization deep dive
-😉
+There’s nothing wrong with Terminal (on Mac) and plain zsh or bash. (If you’re on Windows, we highly recommend using Git for Windows and Git bash.) But we enjoy using iTerm2 ([download](https://iterm2.com)) and zsh much more (combined with [Oh My Zsh](https://ohmyz.sh)). Heads up, you can get lost in the world of theming and adding plugins. We recommend keeping it simple for awhile before taking the customization deep dive
+😉.
 
 **[Windows] Git for Windows with Git Bash or WSL(2)**
 Unfortunately, there are a lot of “gotchas” when it comes to working with Javascript-based frameworks on Windows. We do our best to point out (and resolve) issues, but our priority focus is on developing a Redwood app vs contributing to the Framework. (If you’re interested, there’s a lengthy Forum conversation about this with many suggestions.)

docs/docs/graphql.md

@@ -118,9 +118,9 @@ Note that if you don't import `RedwoodApolloProvider`, it won't be included in y
 
 ### Understanding Default Resolvers
 
-According to the spec, for every field in your sdl, there has to be a resolver in your Services. But you'll usually see fewer resolvers in your Services than you technically should. And that's because if you don't define a resolver, [Apollo Server will](https://www.apollographql.com/docs/apollo-server/data/resolvers/#default-resolvers).
+According to the spec, for every field in your sdl, there has to be a resolver in your Services. But you'll usually see fewer resolvers in your Services than you technically should. And that's because if you don't define a resolver, GraphQL Yoga server will.
 
-The key question Apollo Server asks is: "Does the parent argument (in Redwood apps, the `parent` argument is named `root`—see [Redwood's Resolver Args](#redwoods-resolver-args)) have a property with this resolver's exact name?" Most of the time, especially with Prisma Client's ergonomic returns, the answer is yes.
+The key question the Yoga server asks is: "Does the parent argument (in Redwood apps, the `parent` argument is named `root`—see [Redwood's Resolver Args](#redwoods-resolver-args)) have a property with this resolver's exact name?" Most of the time, especially with Prisma Client's ergonomic returns, the answer is yes.
 
 Let's walk through an example. Say our sdl looks like this:
 
@@ -161,7 +161,7 @@ export const users = () => {
 Which begs the question: where are the resolvers for the User fields—`id`, `email`, and `name`?
 All we have is the resolver for the Query field, `users`.
 
-As we just mentioned, Apollo defines them for you. And since the `root` argument for `id`, `email`, and `name` has a property with each resolvers' exact name (i.e. `root.id`, `root.email`, `root.name`), it'll return the property's value (instead of returning `undefined`, which is what Apollo would do if that weren't the case).
+As we just mentioned, GraphQL Yoga defines them for you. And since the `root` argument for `id`, `email`, and `name` has a property with each resolvers' exact name (i.e. `root.id`, `root.email`, `root.name`), it'll return the property's value (instead of returning `undefined`, which is what Yoga would do if that weren't the case).
 
 But, if you wanted to be explicit about it, this is what it would look like:
 
@@ -221,7 +221,7 @@ Of the four, you'll see `args` and `root` being used a lot.
 
 > **There's so many terms!**
 >
-> Half the battle here is really just coming to terms. To keep your head from spinning, keep in mind that everybody tends to rename `obj` to something else: Redwood calls it `root`, Apollo calls it `parent`. `obj` isn't exactly the most descriptive name in the world.
+> Half the battle here is really just coming to terms. To keep your head from spinning, keep in mind that everybody tends to rename `obj` to something else: Redwood calls it `root`, GraphQL Yoga calls it `parent`. `obj` isn't exactly the most descriptive name in the world.
 
 ### Context
 
@@ -292,7 +292,7 @@ Now that you've seen the sdl, be sure to check out [the resolvers](https://githu
 The GraphQL Playground's nice, but if you're a power user, you'll want to be using something a little more dedicated and always on; where you can save things like environments...
 
 <div class="relative pb-9/16">
-  <iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/watch?v=SU4g9_K0H1c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0" allowfullscreen></iframe>
+  <iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/watch?v=SU4g9_K0H1c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0; fullscreen"></iframe>
 </div>
 
 - todo
@@ -1017,7 +1017,7 @@ export const handler = createGraphQLHandler({
 
 #### Redwood Errors
 
-Redwood Errors are derived from [Apollo Server Error codes](https://www.apollographql.com/docs/apollo-server/data/errors/#error-codes) for common use cases:
+Redwood Errors are inspired from [Apollo Server Error codes](https://www.apollographql.com/docs/apollo-server/data/errors/#error-codes) for common use cases:
 
 To use a Redwood Error, import each from `@redwoodjs/graphql-server`.
 

docs/docs/how-to/sending-emails.md

@@ -243,7 +243,7 @@ Now is a good time to go get a fresh cup of coffee, or other beverage of choice.
 
 ## SendInBlue
 
-To actually send an email you need a mail server that you can talk to using SMTP. `nodemailer` has a really [simple example](https://nodemailer.com/about/#example) on their webpage that uses Ethereal. But that's only for test messages. The emails will never actually be delivered beyond Ethereal. Another option is to use your own GMail address (if you have one). But to get that working reliably you need to set up Oauth2, which isn't very straight forward. So your best bet here is actually to use a dedicated Cloud/SaaS solution. A lot of them have a free tier that lets you send enough emails for a small production app. We'll be using SendInBlue that offers 300 free emails per day.
+To actually send an email you need a mail server that you can talk to using SMTP. `nodemailer` has a really [simple example](https://nodemailer.com/about/#example) on their webpage that uses Ethereal. But that's only for test messages. The emails will never actually be delivered beyond Ethereal. Another option is to use your own GMail address (if you have one). But to get that working reliably you need to set up OAuth2, which isn't very straight forward. So your best bet here is actually to use a dedicated Cloud/SaaS solution. A lot of them have a free tier that lets you send enough emails for a small production app. We'll be using SendInBlue that offers 300 free emails per day.
 
 So go ahead and create an account with SendInBlue. They'll ask for an address and a phone number. They need it to prevent users from creating accounts to send spam emails from. When your account is created and set up you need to click on the menu in the upper right with your company name and select the "SMTP & API" option.
 

docs/docs/tutorial/chapter1/prerequisites.md

@@ -1,7 +1,7 @@
 # Prerequisites
 
 <div class="video-container">
-  <iframe src="https://www.youtube.com/embed/HJOzmp8oCIQ?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0" allowfullscreen></iframe>
+  <iframe src="https://www.youtube.com/embed/HJOzmp8oCIQ?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0; fullscreen"></iframe>
 </div>
 
 Redwood is composed of several popular libraries to make full-stack web development easier. Unfortunately, we can't teach all of those technologies from scratch during this tutorial, so we're going to assume you are already familiar with a few core concepts:

docs/docs/tutorial/chapter2/getting-dynamic.md

@@ -1,7 +1,7 @@
 # Getting Dynamic
 
 <div class="video-container">
-  <iframe src="https://www.youtube.com/embed/cb_PseqpoG8?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0" allowfullscreen></iframe>
+  <iframe src="https://www.youtube.com/embed/cb_PseqpoG8?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0; fullscreen"></iframe>
 </div>
 
 These two pages are great and all but where are the actual blog posts in this blog? Let's work on those next.

docs/docs/tutorial/chapter3/forms.md

@@ -1,7 +1,7 @@
 # Building a Form
 
 <div class="video-container">
-  <iframe src="https://www.youtube.com/embed/b0x8an_UZ98?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0" allowfullscreen></iframe>
+  <iframe src="https://www.youtube.com/embed/b0x8an_UZ98?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0; fullscreen"></iframe>
 </div>
 
 Wait, don't close your browser! You had to know this was coming eventually, didn't you? And you've probably realized by now we wouldn't even have this section in the tutorial unless Redwood had figured out a way to make forms less soul-sucking than usual. In fact, Redwood might even make you _love_ building forms.

docs/docs/tutorial/chapter3/saving-data.md

@@ -353,7 +353,7 @@ Before we plug this into the UI, let's take a look at a nifty GUI you get just b
 
 Often it's nice to experiment and call your API in a more "raw" form before you get too far down the path of implementation only to find out something is missing. Is there a typo in the API layer or the web layer? Let's find out by accessing just the API layer.
 
-When you started development with `yarn redwood dev` (or `yarn rw dev`) you actually started a second process running at the same time. Open a new browser tab and head to [http://localhost:8911/graphql](http://localhost:8911/graphql) This is Apollo Server's [GraphQL Playground](https://www.apollographql.com/docs/apollo-server/testing/graphql-playground/), a web-based GUI for GraphQL APIs:
+When you started development with `yarn redwood dev` (or `yarn rw dev`) you actually started a second process running at the same time. Open a new browser tab and head to [http://localhost:8911/graphql](http://localhost:8911/graphql) This is GraphQL Yoga's [GraphiQL](https://www.graphql-yoga.com/docs/features/graphiql), a web-based GUI for GraphQL APIs:
 
 <img width="1410" alt="image" src="https://user-images.githubusercontent.com/32992335/161488164-37663b8a-0bfa-4d52-8312-8cfaac7c2915.png" />
 

docs/docs/tutorial/chapter6/multiple-comments.md

@@ -30,6 +30,14 @@ Let's generate a **CommentsCell**:
 yarn rw g cell Comments
 ```
 
+:::caution What's with these errors and warnings after generating this cell?
+
+Redwood will try to generate types to go along with your cell. However, we haven't generated an SDL file for the Comment model yet, so types can't be created. This is safe to ignore for now as we're building out our UI in Storybook. 
+
+You may also see some red squiggles in your IDE: same thing, types couldn't be generated.
+
+:::
+
 Storybook updates with a new **CommentsCell** under the **Cells** folder, and it's actually showing something:
 
 ![image](https://user-images.githubusercontent.com/300/153477642-0d5a15a5-f96f-485a-b8b0-dbc1c4515279.png)

docs/docs/tutorial/foreword.md

@@ -6,6 +6,12 @@ In this tutorial we're going to build a blog engine. In reality a blog is probab
 
 If you went through an earlier version of this tutorial you may remember it being split into parts 1 and 2. That was an artifact of the fact that most features demonstrated in part 2 didn't exist in the framework when part 1 was written. Once they were added we created part 2 to contain just those new features. Now that everything is integrated and working well we've moved each section into logically grouped chapters.
 
+## Sign Up for Tutorial Reminders
+
+There's a new Javascript framework coming out every week, we know it can be hard to keep up. If you'd like some non-spammy emails reminding you to go through the tutorial, give us your email below:
+
+<MailchimpForm />
+
 ## Callouts
 
 You'll find some callouts throughout the text to draw your attention:
@@ -37,3 +43,42 @@ This tutorial assumes you are using version 1.0.0 or greater of RedwoodJS.
 :::
 
 Let's get started!
+
+export const MailchimpForm = () => (
+  <>
+    <div id="mc_embed_signup">
+      <form
+        action="https://thedavidprice.us19.list-manage.com/subscribe/post?u=0c27354a06a7fdf4d83ce07fc&amp;id=a94da1950a"
+        method="post"
+        name="mc-embedded-subscribe-form"
+        target="_blank"
+      >
+        <div style={{ position: 'absolute', left: '-5000px' }} aria-hidden="true">
+          <input
+            type="text"
+            name="b_0c27354a06a7fdf4d83ce07fc_a94da1950a"
+            tabIndex="-1"
+            defaultValue=""
+          />
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', justify: 'center' }}>
+          <input
+            type="email"
+            defaultValue=""
+            placeholder="Email Address"
+            required={true}
+            name="EMAIL"
+            style={{  width: '100%', padding: '0.75rem', border: '1px solid #cccccc', borderRadius: '0.25rem', fontSize: '100%' }}
+          />
+          <input
+            type="submit"
+            value="Subscribe"
+            name="subscribe"
+            style={{ cursor: 'pointer', marginLeft: '0.5rem', padding: '0.8rem 2rem', fontSize: '100%', fontWeight: 'bold', color: '#ffffff', backgroundColor: '#4cb3d4', border: 'none', borderRadius: '0.25rem' }}
+          />
+        </div>
+      </form>
+    </div>
+  </>
+)
+

docs/docs/typescript.md

@@ -17,7 +17,7 @@ yarn create redwood-app my-redwood-app --typescript
 ## Converting a JavaScript Project to TypeScript
 
 Started your project in JavaScript but want to switch to TypeScript?
-Start by using the tsconfig setup command:
+Start by using the `tsconfig` setup command:
 
 ```
 yarn rw setup tsconfig

docs/versioned_docs/version-1.0/contributing-walkthrough.md

@@ -21,8 +21,7 @@ The following recording is from a Contributing Workshop, following through the e
   style={{ height: '24rem' }}
   src="https://www.youtube.com/embed/aZs_9g-5Ms8"
   frameborder="0"
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0"
-  allowfullscreen
+  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; modestbranding; showinfo=0; fullscreen"
 ></iframe>
 
 ## Prologue: Getting Started with Redwood and GitHub (and git)