diff --git a/.eslintrc.js b/.eslintrc.js index 0e7cb92fa6e4..699c3a42ec98 100644 --- a/.eslintrc.js +++ b/.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: [ diff --git a/__fixtures__/test-project/api/package.json b/__fixtures__/test-project/api/package.json index ccd38df7afbd..477c923e20a3 100644 --- a/__fixtures__/test-project/api/package.json +++ b/__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" } } diff --git a/__fixtures__/test-project/api/src/functions/auth.ts b/__fixtures__/test-project/api/src/functions/auth.ts index 471f5a232bdb..8c8b2f2d11cf 100644 --- a/__fixtures__/test-project/api/src/functions/auth.ts +++ b/__fixtures__/test-project/api/src/functions/auth.ts @@ -64,14 +64,14 @@ export const handler = async (event, context) => { const resetPasswordOptions = { // handler() is invoked after the password has been successfully updated in - // the database. Returning anything truthy will automatically logs the user + // the database. Returning anything truthy will automatically log the user // in. Return `false` otherwise, and in the Reset Password page redirect the // user to the login page. handler: (user) => { return user }, - // If `false` then the new password MUST be different than the current one + // If `false` then the new password MUST be different from the current one allowReusedPassword: true, errors: { @@ -125,7 +125,7 @@ export const handler = async (event, context) => { db: db, // The name of the property you'd call on `db` to access your user table. - // ie. if your Prisma model is named `User` this value would be `user`, as in `db.user` + // i.e. if your Prisma model is named `User` this value would be `user`, as in `db.user` authModelAccessor: 'user', // A map of what dbAuth calls a field to what your database calls it. diff --git a/__fixtures__/test-project/package.json b/__fixtures__/test-project/package.json index 40def92fd63a..d90330f0f604 100644 --- a/__fixtures__/test-project/package.json +++ b/__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", diff --git a/__fixtures__/test-project/web/package.json b/__fixtures__/test-project/web/package.json index 9946c47f392d..205a91ed6a1a 100644 --- a/__fixtures__/test-project/web/package.json +++ b/__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" diff --git a/docs/docs/a11y.md b/docs/docs/a11y.md index 3a1e352ce216..8129c4c7bd73 100644 --- a/docs/docs/a11y.md +++ b/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.
- +
diff --git a/docs/docs/authentication.md b/docs/docs/authentication.md index 64b97bc5c40c..8f38daafb5c0 100644 --- a/docs/docs/authentication.md +++ b/docs/docs/authentication.md @@ -100,7 +100,7 @@ Read the post-install instructions carefully as they contain instructions for ad > > Need simple Login, Signup and Forgot Password pages? Of course we have a generator for those: > -> yarn rw generate dbAuth +> yarn rw generate dbAuth Note that if you change the fields named `hashedPassword` and `salt`, and you have some verbose logging in your app, you'll want to scrub those fields from appearing in your logs. See the [Redaction](logger.md#redaction) docs for info. diff --git a/docs/docs/connection-pooling.md b/docs/docs/connection-pooling.md index a6bcbed12075..7b78bad546c0 100644 --- a/docs/docs/connection-pooling.md +++ b/docs/docs/connection-pooling.md @@ -24,7 +24,7 @@ To use Prisma Client with PgBouncer from a serverless function, add the `?pgboun postgresql://USER:PASSWORD@HOST:PORT/DATABASE?pgbouncer=true ``` -Typically, your PgBouncer port will be 6543 which is different than the Postgres default of 5432. +Typically, your PgBouncer port will be 6543 which is different from the Postgres default of 5432. > Note that since Prisma Migrate uses database transactions to check out the current state of the database and the migrations table, if you attempt to run Prisma Migrate commands in any environment that uses PgBouncer for connection pooling, you might see an error. > diff --git a/docs/docs/contributing-overview.md b/docs/docs/contributing-overview.md index d8b79e00c341..ad656540981d 100644 --- a/docs/docs/contributing-overview.md +++ b/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 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| |[`@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| diff --git a/docs/docs/contributing-walkthrough.md b/docs/docs/contributing-walkthrough.md index 9f3e7b00b148..2c215e757612 100644 --- a/docs/docs/contributing-walkthrough.md +++ b/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" > ## 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.) diff --git a/docs/docs/deploy/baremetal.md b/docs/docs/deploy/baremetal.md index 6cbd5d06e7b9..63046a6c3a2a 100644 --- a/docs/docs/deploy/baremetal.md +++ b/docs/docs/deploy/baremetal.md @@ -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]] diff --git a/docs/docs/forms.md b/docs/docs/forms.md index 6eae1a2fcd31..e9e8d18b14ce 100644 --- a/docs/docs/forms.md +++ b/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 ( + <> + + + + + ) +} +``` + ## `` Renders an HTML ` + +
+ + +
+ + + +) + diff --git a/docs/docs/typescript.md b/docs/docs/typescript.md index cff72cd0963c..8f031546d173 100644 --- a/docs/docs/typescript.md +++ b/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 diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 00c9d5f00751..3a55b2a5d416 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -115,6 +115,7 @@ const config = { sidebarPath: require.resolve('./sidebars.js'), // ? — blob? tree? editUrl: 'https://github.com/redwoodjs/redwood/blob/main/docs', // base path for repo edit pages + editCurrentVersion: true, remarkPlugins: [autoImportTabs, fileExtSwitcher], versions: { current: { diff --git a/docs/package.json b/docs/package.json index 1076dbb3b4b2..a73cc6552fbe 100644 --- a/docs/package.json +++ b/docs/package.json @@ -36,6 +36,6 @@ "devDependencies": { "@docusaurus/module-type-aliases": "2.0.0-beta.21", "@tsconfig/docusaurus": "1.0.5", - "typescript": "4.7.2" + "typescript": "4.7.3" } } diff --git a/docs/versioned_docs/version-1.0/contributing-walkthrough.md b/docs/versioned_docs/version-1.0/contributing-walkthrough.md index 5c38570314f5..e0e186ea0768 100644 --- a/docs/versioned_docs/version-1.0/contributing-walkthrough.md +++ b/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" > ## Prologue: Getting Started with Redwood and GitHub (and git) diff --git a/docs/versioned_docs/version-1.0/deploy.md b/docs/versioned_docs/version-1.0/deploy.md index f693bc4e1fbb..069ce759828c 100644 --- a/docs/versioned_docs/version-1.0/deploy.md +++ b/docs/versioned_docs/version-1.0/deploy.md @@ -209,7 +209,7 @@ There are even more places you can get environment variables from, check out Ser > **Note:** > Serverless Dashboard CI/CD does not support projects structured like Redwood, although they're working on it. For CD, you'll need to use something like GitHub Actions. > -> It can still be worthwhile to integrate your project with Serverless Dashboard — you'll have features like deploy logs and monitoring, analytics, secret management, and AWS account integration. You can also [authenticate into your Serverless acount within a CI context](https://www.serverless.com/framework/docs/guides/cicd/running-in-your-own-cicd). Just remember that if you do use the Dashboard to manage secrets, you'll need to use the `${param:VAR_NAME}` syntax. +> It can still be worthwhile to integrate your project with Serverless Dashboard — you'll have features like deploy logs and monitoring, analytics, secret management, and AWS account integration. You can also [authenticate into your Serverless account within a CI context](https://www.serverless.com/framework/docs/guides/cicd/running-in-your-own-cicd). Just remember that if you do use the Dashboard to manage secrets, you'll need to use the `${param:VAR_NAME}` syntax. To integrate your site into the Serverless Dashboard, there are two ways: diff --git a/docs/versioned_docs/version-1.0/deploy/serverless.md b/docs/versioned_docs/version-1.0/deploy/serverless.md index bd66a0b17fdf..eb9eaec88048 100644 --- a/docs/versioned_docs/version-1.0/deploy/serverless.md +++ b/docs/versioned_docs/version-1.0/deploy/serverless.md @@ -68,7 +68,7 @@ There are even more places you can get environment variables from, check out Ser > **Note:** > Serverless Dashboard CI/CD does not support projects structured like Redwood, although they're working on it. For CD, you'll need to use something like GitHub Actions. > -> It can still be worthwhile to integrate your project with Serverless Dashboard — you'll have features like deploy logs and monitoring, analytics, secret management, and AWS account integration. You can also [authenticate into your Serverless acount within a CI context](https://www.serverless.com/framework/docs/guides/cicd/running-in-your-own-cicd). Just remember that if you do use the Dashboard to manage secrets, you'll need to use the `${param:VAR_NAME}` syntax. +> It can still be worthwhile to integrate your project with Serverless Dashboard — you'll have features like deploy logs and monitoring, analytics, secret management, and AWS account integration. You can also [authenticate into your Serverless account within a CI context](https://www.serverless.com/framework/docs/guides/cicd/running-in-your-own-cicd). Just remember that if you do use the Dashboard to manage secrets, you'll need to use the `${param:VAR_NAME}` syntax. To integrate your site into the Serverless Dashboard, there are two ways: diff --git a/docs/versioned_docs/version-1.0/graphql.md b/docs/versioned_docs/version-1.0/graphql.md index 2090f9bee9ec..0e736736f39a 100644 --- a/docs/versioned_docs/version-1.0/graphql.md +++ b/docs/versioned_docs/version-1.0/graphql.md @@ -149,7 +149,7 @@ model User { } ``` -If you create your Services for this model using Redwood's generator (`yarn rw g services user`), your Services will look like this: +If you create your Services for this model using Redwood's generator (`yarn rw g service user`), your Services will look like this: ```javascript // api/src/services/user/user.js @@ -299,7 +299,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...
- +
- todo diff --git a/docs/versioned_docs/version-1.0/tutorial/chapter3/saving-data.md b/docs/versioned_docs/version-1.0/tutorial/chapter3/saving-data.md index 40831763e8a6..286c6f9577c2 100644 --- a/docs/versioned_docs/version-1.0/tutorial/chapter3/saving-data.md +++ b/docs/versioned_docs/version-1.0/tutorial/chapter3/saving-data.md @@ -767,7 +767,7 @@ We get that error message at the top saying something went wrong in plain Englis > - `listStyle` / `listClassName`: the `