Merge branch 'main' into patch-1

.eslintrc.js

@@ -31,39 +31,6 @@ module.exports = {
   ],
   rules: {
     '@typescript-eslint/no-explicit-any': 'off',
-    'import/order': [
-      'error',
-      {
-        'newlines-between': 'always',
-        pathGroupsExcludedImportTypes: ['react'],
-        pathGroups: [
-          {
-            pattern: 'react',
-            group: 'builtin',
-            position: 'after',
-          },
-          {
-            pattern: '@redwoodjs/**',
-            group: 'external',
-            position: 'after',
-          },
-          {
-            pattern: 'src/lib/test',
-            group: 'parent',
-            position: 'before',
-          },
-          {
-            pattern: 'src/**',
-            group: 'parent',
-            position: 'before',
-          },
-        ],
-        alphabetize: {
-          order: 'asc',
-          caseInsensitive: true,
-        },
-      },
-    ],
     curly: 'error',
   },
   overrides: [

README.md

@@ -667,6 +667,9 @@ And there you have it.
     <td align="center"><a href="https://github.com/antonmihaylov"><img src="https://avatars.githubusercontent.com/u/57956282?v=4" width="100px;" alt=""/><br /><sub><b>Anton Mihaylov</b></sub></a></td>
     <td align="center"><a href="https://github.com/mparramont"><img src="https://avatars.githubusercontent.com/u/636075?v=4" width="100px;" alt=""/><br /><sub><b>Miguel Parramón</b></sub></a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="https://fabiolazzaroni.dev/"><img src="https://avatars.githubusercontent.com/u/15056746?v=4" width="100px;" alt=""/><br /><sub><b>Fabio Lazzaroni</b></sub></a></td>
+  </tr>
 </table>
 
 <!-- markdownlint-restore -->

__fixtures__/test-project/api/package.json

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

__fixtures__/test-project/package.json

@@ -8,7 +8,7 @@
     ]
   },
   "devDependencies": {
-    "@redwoodjs/core": "1.4.2"
+    "@redwoodjs/core": "1.5.1"
   },
   "eslintConfig": {
     "extends": "@redwoodjs/eslint-config",
@@ -25,4 +25,4 @@
   "scripts": {
     "postinstall": ""
   }
-}
+}

__fixtures__/test-project/web/package.json

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

__fixtures__/test-project/web/src/Redwood.stories.mdx

@@ -0,0 +1,15 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="Redwood" />
+
+<p align="center">
+  <img src="https://avatars2.githubusercontent.com/u/45050444?v=4" width="200" />
+  <h1 align="center">Redwood</h1>
+</p>
+
+_by Tom Preston-Werner, Peter Pistorius, Rob Cameron, David Price, and more than
+250 amazing contributors (see end of file for a full list)._
+
+**Redwood is an opinionated, full-stack, JavaScript/TypeScript web application
+framework designed to keep you moving fast as your app grows from side project
+to startup.**

docs/docs/contributing-overview.md

@@ -88,20 +88,22 @@ What you want to do not on the roadmap? Well, still go for it! We love spikes an
 ### RedwoodJS Framework Packages
 |Package|Description|
 |:-|:-|
-|[`@redwoodjs/api-server`](https://github.com/redwoodjs/redwood/blob/main/packages/api-server/README.md)|Run a Redwood app using Express server (alternative to serverless API)|
-|[`@redwoodjs/api`](https://github.com/redwoodjs/redwood/blob/main/packages/api/README.md)|Infrastruction components for your applications UI including logging, webhooks, authentication decoders and parsers, as well as tools to test custom serverless functions and webhooks|
+|[`@redwoodjs/api-server`](https://github.com/redwoodjs/redwood/blob/main/packages/api-server/README.md)|Run a Redwood app using Fastify server (alternative to serverless API)|
+|[`@redwoodjs/api`](https://github.com/redwoodjs/redwood/blob/main/packages/api/README.md)|Infrastructure components for your applications UI including logging, webhooks, authentication decoders and parsers, as well as tools to test custom serverless functions and webhooks|
 |[`@redwoodjs/auth`](https://github.com/redwoodjs/redwood/blob/main/packages/auth/README.md#contributing)|A lightweight wrapper around popular SPA authentication libraries|
 |[`@redwoodjs/cli`](https://github.com/redwoodjs/redwood/blob/main/packages/cli/README.md)|All the commands for Redwood's built-in CLI|
+|[`@redwoodjs/codemods`](https://github.com/redwoodjs/redwood/blob/main/packages/codemods/README.md)|Codemods that automate upgrading a Redwood project|
 |[`@redwoodjs/core`](https://github.com/redwoodjs/redwood/blob/main/packages/core/README.md)|Defines babel plugins and config files|
 |[`@redwoodjs/create-redwood-app`](https://github.com/redwoodjs/redwood/blob/main/packages/create-redwood-app/README.md)|Enables `yarn create redwood-app`—downloads the latest release of Redwood and extracts it into the supplied directory|
-|[`@redwoodjs/dev-server`](https://github.com/redwoodjs/redwood/blob/main/packages/dev-server/README.md)|Configuration for the local development server|
 |[`@redwoodjs/eslint-config`](https://github.com/redwoodjs/redwood/blob/main/packages/eslint-config/README.md)|Defines Redwood's eslint config|
-|[`@redwoodjs/eslint-plugin-redwood`](https://github.com/redwoodjs/redwood/blob/main/packages/eslint-plugin-redwood/README.md)|Defines eslint plugins; currently just prohibits the use of non-existent pages in `Routes.js`|
 |[`@redwoodjs/forms`](https://github.com/redwoodjs/redwood/blob/main/packages/forms/README.md)|Provides Form helpers|
 |[`@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/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|
 |[`@redwoodjs/testing`](https://github.com/redwoodjs/redwood/blob/main/packages/testing/README.md)|Provides helpful defaults when testing a Redwood project's web side|
 |[`@redwoodjs/web`](https://github.com/redwoodjs/redwood/blob/main/packages/web/README.md)|Configures a Redwood's app web side: wraps the Apollo Client in `RedwoodApolloProvider`; defines the Cell HOC|
 

docs/docs/deploy/baremetal.md

@@ -26,7 +26,7 @@ yarn rw deploy baremetal production
 
 The Baremetal deploy runs several commands in sequence. These can be customized, to an extent, and some of them skipped completely:
 
-1. `git clone --depth=1` to retieve the latest code
+1. `git clone --depth=1` to retrieve the latest code
 2. Symlink the latest deploy `.env` to the shared `.env` in the app dir
 3. `yarn install` - installs dependencies
 4. Runs prisma DB migrations
@@ -287,7 +287,7 @@ This may also be a one-liner like:
 + # [ -z "$PS1" ] && return
 ```
 
-There are techniques for getting `node`, `npm` and `yarn` to be availble without loading everything in `.bashrc`. See [this comment](https://github.com/nvm-sh/nvm/issues/1290#issuecomment-427557733) for some ideas.
+There are techniques for getting `node`, `npm` and `yarn` to be available without loading everything in `.bashrc`. See [this comment](https://github.com/nvm-sh/nvm/issues/1290#issuecomment-427557733) for some ideas.
 
 :::
 
@@ -470,7 +470,7 @@ host = 'server.com'
 # ...
 ```
 
-Server specific commands are defined with a `before.command` and `after.commmand` key directly in your server config:
+Server specific commands are defined with a `before.command` and `after.command` key directly in your server config:
 
 ```toml
 [[production.servers]]

docs/docs/forms.md

@@ -335,6 +335,54 @@ For example:
 ```
 will return `undefined` if the field is empty.
 
+### Custom Input Fields
+
+You can create a custom field that integrates with Redwood through the use of Redwood's `useRegister` and `useErrorStyles` hooks. Each of these serving a different purpose depending on what you are trying to build.
+
+`useRegister` registers the field with react-hook-form and is a wrapper for [`register`](https://react-hook-form.com/api/useform/register).
+
+`useErrorStyles` sets up error styling for your custom input field.
+
+Using these two together you can create custom input fields that replicate a Redwood input field while also allowing for custom domain logic.
+
+In the following example we have an all-in-one custom required input field with label, input, and error display.
+
+```jsx
+import { FieldError, useErrorStyles, useRegister } from '@redwoodjs/forms'
+
+const RequiredField = ({ label, name, validation }) => {
+  const register = useRegister({
+    name,
+    validation: {...validation, required: true}
+  })
+
+  const { className: labelClassName, style: labelStyle } = useErrorStyles({
+    className: `my-label-class`,
+    errorClassName: `my-label-error-class`,
+    name,
+  })
+
+  const { className: inputClassName, style: inputStyle } = useErrorStyles({
+    className: `my-input-class`,
+    errorClassName: `my-input-error-class`,
+    name,
+  })
+
+  return (
+    <>
+      <label className={labelClassName} style={labelStyle}>{label}</label>
+      <input
+        className={inputClassName}
+        style={inputStyle}
+        type="text"
+        {...register}
+      />
+      <FieldError name={name}>
+    </>
+  )
+}
+```
+
 ## `<SelectField>`
 
 Renders an HTML `<select>` tag.

docs/docs/how-to/role-based-access-control.md

@@ -59,7 +59,7 @@ If your 🏠 could enforce RBAC, it needs to know the rules.
 | -------- | :-----: | :------: | :----: | :------: | :-----: | :-----: |
 | Neighbor |    ✅    |          |   ✅    |    ✅     |         |         |
 | Plumber  |    ✅    |    ✅     |        |    ✅     |    ✅    |         |
-| Owner    |    ✅    |    ✅     |   ✅    |    ✅     |    ✅    |         |
+| Owner    |    ✅    |    ✅     |   ✅    |    ✅     |    ✅    |    ✅    |
 
 #### RBAC Example: Blog
 

docs/docs/mocking-graphql-requests.md

@@ -83,6 +83,25 @@ mockGraphQLQuery('OperationName', (_variables, { ctx }) => {
 })
 ```
 
+## TypeScript
+You can get stricter types by passing types when mocking the query, mutation and its variables:
+
+```tsx
+import type { UserProfileQuery, UserProfileQueryVariables } from 'types/graphql'
+
+mockGraphQLQuery<UserProfileQuery, UserProfileQueryVariables>('UserProfileQuery', { /*... */ })
+```
+or, you can manually pass your own types:
+
+```tsx
+mockGraphQLQuery<{
+  userProfile: {
+    id: number,
+    name: string,
+  }
+}>('UserProfileQuery', { /*... */ })
+```
+
 ## Global mock-requests vs local mock-requests
 
 Placing your mock-requests in `"<name>.mock.js"` will cause them to be globally scoped in Storybook, making them available to all stories.

docs/docs/project-configuration-dev-test-build.mdx

@@ -162,6 +162,6 @@ You can also pass a flag when you launch your dev servers, for example:
 ```bash
 yarn rw dev --debugPort 75028
 ```
-The flag passed in the CLI will always take precendence over your setting in the redwood.toml
+The flag passed in the CLI will always take precedence over your setting in the `redwood.toml`
 
 Just remember to also change the port you are attaching to in your `./vscode/launch.json`

docs/docs/testing.md

@@ -350,7 +350,7 @@ describe('useAccumulator hook example in docs', () => {
     expect(result.current.total).toBe(15)
   })
 
-  it('re-initializes the accumulator if passed a new initilizing value', () => {
+  it('re-initializes the accumulator if passed a new initializing value', () => {
     const { result, rerender } = renderHook(
       (initialValue) => useAccumulator(initialValue),
       {

docs/docs/tutorial/chapter1/file-structure.md

@@ -14,7 +14,7 @@ Don't worry about trying to memorize this directory structure right now, it's ju
 ```
 ├── api
 │   ├── db
-│   │   ├── schema.prisma
+│   │   └── schema.prisma
 │   ├── dist
 │   ├── src
 │   │   ├── directives

docs/docs/tutorial/chapter1/prerequisites.md

@@ -23,7 +23,7 @@ If you have an existing site created with a prior version, you'll need to upgrad
 
 1. For _each_ version included in your upgrade, follow the "Code Modifications" section of the specific version's Release Notes:
    - [Redwood Releases](https://github.com/redwoodjs/redwood/releases)
-2. The upgrade to the latest version. Run the command:
+2. Then upgrade to the latest version. Run the command:
    - `yarn redwood upgrade`
 
 ### Node.js and Yarn Versions

docs/docs/tutorial/chapter2/routing-params.md

@@ -731,7 +731,7 @@ Last but not least we can update the `ArticleCell` to properly display our blog
 import Article from 'src/components/Article'
 
 export const QUERY = gql`
-  query ArticleQuery {
+  query ArticleQuery($id: Int!) {
     article: post(id: $id) {
       id
       title
@@ -749,7 +749,7 @@ export const Failure = ({ error }) => (
   <div style={{ color: 'red' }}>Error: {error.message}</div>
 )
 
-export const Success = ({ articles }) => (
+export const Success = ({ article }) => (
   // highlight-next-line
   <Article article={article} />
 )
@@ -766,7 +766,7 @@ import type { ArticleQuery } from 'types/graphql'
 import type { CellSuccessProps, CellFailureProps } from '@redwoodjs/web'
 
 export const QUERY = gql`
-  query ArticleQuery {
+  query ArticleQuery($id: Int!) {
     article: post(id: $id) {
       id
       title
@@ -784,7 +784,7 @@ export const Failure = ({ error }: CellFailureProps) => (
   <div style={{ color: 'red' }}>Error: {error.message}</div>
 )
 
-export const Success = ({ articles }: CellSuccessProps<ArticleQuery>) => (
+export const Success = ({ article }: CellSuccessProps<ArticleQuery>) => (
   // highlight-next-line
   <Article article={article} />
 )

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

@@ -173,7 +173,7 @@ You'd only get a single `contacts` type to return them all.
 
 :::
 
-We'll only need `createContact` for our contact page. It accepts a single variable, `input`, that is an object that conforms to what we expect for a `CreateContactInput`, namely `{ name, email, message }`. This mutation should be able to be accessed by anyone, so we'll need want to change `@requireAuth` to `@skipAuth`. This one says that authentication is *not* required and will allow anyone to anonymously send us a message. Note that having at least one schema directive is required for each `Query` and `Mutation` or you'll get an error: Redwood embraces the idea of "secure by default" meaning that we try and keep your application safe, even if you do nothing special to prevent access. In this case it's much safer to throw an error than to accidentally expose all of your users' data to the internet!
+We'll only need `createContact` for our contact page. It accepts a single variable, `input`, that is an object that conforms to what we expect for a `CreateContactInput`, namely `{ name, email, message }`. This mutation should be able to be accessed by anyone, so we'll need to change `@requireAuth` to `@skipAuth`. This one says that authentication is *not* required and will allow anyone to anonymously send us a message. Note that having at least one schema directive is required for each `Query` and `Mutation` or you'll get an error: Redwood embraces the idea of "secure by default" meaning that we try and keep your application safe, even if you do nothing special to prevent access. In this case it's much safer to throw an error than to accidentally expose all of your users' data to the internet!
 
 :::info
 

docs/docs/tutorial/chapter4/authentication.md

@@ -774,6 +774,16 @@ export const requireAuth = ({ roles }) => {
 }
 ```
 
+:::caution
+
+At this point of the tutorial we have **not added roles** to our user model yet, therefore you can ignore the `hasRole` method in `api/src/lib/auth.js` for now.
+
+If this bothers you, feel free to peek into [the tutorial chapter about Authorization](../chapter7/rbac.md) and add the missing field as described there.
+:::
+
+
+
+
 </TabItem>
 <TabItem value="ts" label="TypeScript">
 
@@ -840,9 +850,22 @@ export const requireAuth = ({ roles }: { roles?: AllowedRoles } = {}) => {
 }
 ```
 
+:::caution
+
+At this point of the tutorial we have **not added roles** to our user model yet, therefore you can ignore the following error:
+
+`Property 'roles' does not exist on type '{ id: number; email: string; }'.`
+
+in the `hasRole` method in `api/src/lib/auth.ts` for now.
+
+If this bothers you, feel free to peek into [the tutorial chapter about Authorization](../chapter7/rbac.md) and add the missing field as described there.
+:::
+
 </TabItem>
 </Tabs>
 
+
+
 The `getCurrentUser()` function is where the magic happens: whatever is returned by this function is the content of `currentUser`, in both the web and api sides! In the case of dbAuth, the single argument passed in, `session`, contains the `id` of the user that's logged in. It then looks up the user in the database with Prisma, selecting just the `id`. Let's add `email` to this list:
 
 <Tabs groupId="js-ts">

docs/docs/tutorial/chapter6/comment-form.md

@@ -1362,7 +1362,7 @@ Each scenario here is associated with its own post, so rather than counting all
 ```jsx title="api/src/services/comments/comments.test.js"
 import { comments, createComment } from './comments'
 // highlight-next-line
-import { db } from 'api/src/lib/db'
+import { db } from 'src/lib/db'
 
 describe('comments', () => {
   scenario('returns all comments', async (scenario) => {
@@ -1386,7 +1386,7 @@ describe('comments', () => {
 ```tsx title="api/src/services/comments/comments.test.ts"
 import { comments, createComment } from './comments'
 // highlight-next-line
-import { db } from 'api/src/lib/db'
+import { db } from 'src/lib/db'
 
 import type { StandardScenario } from './comments.scenarios'