Fix documentation to add missing Form imports (#4131)

Fix #4127 to add missing `Form` import in documentation
- Updated many of the documentation files to add missing imports of `Form`
- Updated the `CHANGELOG.md` accordingly

Co-authored-by: Kevin Burnett <18027+burnettk@users.noreply.github.com>

CHANGELOG.md

@@ -29,6 +29,7 @@ should change the heading of the (upcoming) version to include a major version b
 ## Dev / docs / playground
 
 - Updated the documentation to describe how to use the `skipEmptyDefault` option.
+- Fixed missing import of `Form` in usage documentation - fixing [#4127](https://github.com/rjsf-team/react-jsonschema-form/issues/4127)
 
 # 5.17.1
 

packages/docs/docs/00-introduction.mdx

@@ -33,15 +33,16 @@ $ npm install @rjsf/core @rjsf/utils @rjsf/validator-ajv8 --save
 Then import the dependencies as follows:
 
 ```ts
-import validator from '@rjsf/validator-ajv8';
 import Form from '@rjsf/core';
+import validator from '@rjsf/validator-ajv8';
 ```
 
-Our latest version requires React 16+. You can also install `react-jsonschema-form` (the 1.x version) which works with React 15+.
+Our latest version requires React 16+.
 
 ## Usage
 
 ```tsx
+import Form from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 

packages/docs/docs/01-quickstart.md

@@ -8,6 +8,7 @@ NOTE: As of version 5, the `Form` now requires you to provide a `validator` impl
 First, specify a schema using the [JSON Schema specification](https://json-schema.org/). The below schema renders a single string field:
 
 ```tsx
+import Form from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -22,6 +23,7 @@ render(<Form schema={schema} validator={validator} />, document.getElementById('
 You can also render an object with multiple fields with the below schema:
 
 ```tsx
+import Form from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -49,6 +51,7 @@ The uiSchema is used to add more customization to the form's look and feel. Use
 attribute of the uiSchema to add a custom CSS class name to the form:
 
 ```tsx
+import Form from '@rjsf/core';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -69,6 +72,7 @@ uiSchema should be `{key: value}`, where `key` is the property key and `value` i
 object with the uiSchema configuration for that particular property. For example:
 
 ```tsx
+import Form from '@rjsf/core';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -102,6 +106,7 @@ render(<Form schema={schema} validator={validator} />, document.getElementById('
 Often you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema:
 
 ```tsx
+import Form from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -139,6 +144,7 @@ By default, `<Form />` is an [uncontrolled component](https://reactjs.org/docs/u
 `onChange` and `formData` props as in the below example:
 
 ```tsx
+import Form from '@rjsf/core';
 import validator from '@rjsf/validator-ajv8';
 
 const App = () => {

packages/docs/docs/api-reference/form-props.md

@@ -33,6 +33,7 @@ You can provide custom buttons to your form via the `Form` component's `children
 For other ways to modify the default `Submit` button, see both the [Submit Button Options](./uiSchema.md#submitbuttonoptions) and the [SubmitButton Template](../advanced-customization/custom-templates.md#submitbutton) documentation.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -102,6 +103,7 @@ Optional enumerated flag controlling how empty object fields are populated, defa
 | `skipEmptyDefaults`        | Does not set an empty default. It will still apply the default value if a default property is defined in your schema        |
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -133,6 +135,7 @@ Optional enumerated flag controlling how empty defaults are populated when `allO
 | `populateDefaults` | Generate default values for properties in the `allOf` schema including `if-then-else` syntax |
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -190,6 +193,7 @@ render(
 It's possible to disable the whole form by setting the `disabled` prop. The `disabled` prop is then forwarded down to each field of the form.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -207,6 +211,7 @@ If you just want to disable some fields, see the `ui:disabled` parameter in `uiS
 It's possible to make the whole form read-only by setting the `readonly` prop. The `readonly` prop is then forwarded down to each field of the form.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -244,7 +249,9 @@ If set to true, then the first field with an error will receive the focus when t
 You can also provide a custom callback function to handle what happens when this function is called.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema, RJSFValidationError } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
 
 const schema: RJSFSchema = {
   type: 'string',
@@ -254,7 +261,7 @@ const focusOnError = (error: RJSFValidationError) => {
   console.log('I need to handle focusing this error');
 };
 
-render(<Form schema={schema} focusOnFirstError={focusOnError} />, document.getElementById('app'));
+render(<Form schema={schema} validator={validator} focusOnFirstError={focusOnError} />, document.getElementById('app'));
 ```
 
 ## formContext
@@ -277,6 +284,7 @@ The value of this prop will be passed to the `id` [HTML attribute on the form](h
 To avoid collisions with existing ids in the DOM, it is possible to change the prefix used for ids (the default is `root`).
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -294,6 +302,7 @@ This will render `<input id="rjsf_prefix_key">` instead of `<input id="root_key"
 To avoid using a path separator that is present in field names, it is possible to change the separator used for ids (the default is `_`).
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -356,6 +365,7 @@ In the case of adding/removing of new fields in arrays or objects with `addition
 To react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of encountered errors:
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -378,6 +388,7 @@ It will be passed a result object having a `formData` attribute, which is the va
 The original event will also be passed as a second parameter:
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 

packages/docs/docs/api-reference/uiSchema.md

@@ -293,6 +293,7 @@ Field labels are rendered by default.
 Labels may be omitted on a per-field by setting the `label` option to `false` in the `ui:options` uiSchema directive.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -309,6 +310,7 @@ render(<Form schema={schema} uiSchema={uiSchema} validator={validator} />, docum
 They can also be omitted globally by setting the `label` option to `false` in the `ui:globalOptions` uiSchema directive.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -331,6 +333,7 @@ This property allows you to reorder the properties that are shown for a particul
 You can add placeholder text to an input by using the `ui:placeholder` uiSchema directive:
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -345,6 +348,7 @@ render(<Form schema={schema} uiSchema={uiSchema} validator={validator} />, docum
 Fields using `enum` can also use `ui:placeholder`. The value will be used as the text for the empty option in the select widget.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -367,6 +371,7 @@ The `ui:readonly` uiSchema directive will mark all child widgets from a given fi
 You can set the initial height of a textarea widget by specifying `rows` option.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 

packages/docs/docs/json-schema/objects.md

@@ -5,6 +5,7 @@
 Objects are defined with a type equal to `object` and properties specified in the `properties` keyword.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -30,6 +31,7 @@ render(<Form schema={schema} validator={validator} />, document.getElementById('
 You can specify which properties are required using the `required` attribute:
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -56,6 +58,7 @@ render(<Form schema={schema} validator={validator} />, document.getElementById('
 Since the order of object properties in Javascript and JSON is not guaranteed, the `uiSchema` object spec allows you to define the order in which properties are rendered using the `ui:order` property:
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -89,6 +92,7 @@ const uiSchema: UiSchema = {
 The `additionalProperties` keyword allows the user to add properties with arbitrary key names. Set this keyword equal to a schema object:
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 

packages/docs/docs/usage/validation.md

@@ -229,6 +229,7 @@ You can enable live form data validation by passing a `liveValidate` prop to the
 Be warned that this is an expensive strategy, with possibly strong impact on performances.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -251,6 +252,7 @@ If you have provided an `onError` callback it will be called with the list of er
 
 ```tsx
 import { createRef } from 'react';
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -273,6 +275,7 @@ if (formRef.current.validateForm()) {
 By default, the form uses HTML5 validation. This may cause unintuitive results because the HTML5 validation errors (such as when a field is `required`) may be displayed before the form is submitted, and thus these errors will display differently from the react-jsonschema-form validation errors. You can turn off HTML validation by setting the `noHtml5Validate` to `true`.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -297,6 +300,7 @@ But it is possible to define your own custom validation rules that will run in a
 This is especially useful when the validation depends on several interdependent fields.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -331,6 +335,7 @@ Validation error messages are provided by the JSON Schema validation by default.
 If you need to change these messages or make any other modifications to the errors from the JSON Schema validation, you can define a transform function that receives the list of JSON Schema errors and returns a new list.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -379,6 +384,7 @@ This list is the form global error list that appears at the top of your forms.
 An error list template is basically a React stateless component being passed errors as props, so you can render them as you like:
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema, ErrorListProps } from "@rjsf/utils";
 import validator from "@rjsf/validator-ajv8";
 
@@ -461,6 +467,7 @@ const metaSchemaDraft04 = require('ajv/lib/refs/json-schema-draft-04.json');
 In this example `schema` passed as props to `Form` component can be validated against draft-07 (default) and by draft-04 (added), depending on the value of `$schema` attribute.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import { customizeValidator } from '@rjsf/validator-ajv6';
 
@@ -479,6 +486,7 @@ return <Form schema={schema} validator={validator} />;
 NOTE: This syntax works only for the `@rjsf/validator-ajv6` validator; if you only use the `draft-04` schema, and you want to use the `@rjsf/validator-ajv8` you can do the following:
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import { customizeValidator } from '@rjsf/validator-ajv8';
 import AjvDraft04 from 'ajv-draft-04';
@@ -500,6 +508,7 @@ react-jsonschema-form adds two formats, `color` and `data-url`, to support certa
 To add formats of your own, you can create and pass to the `Form` component a customized `@rjsf/validator-ajv8`:
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import { customizeValidator } from '@rjsf/validator-ajv8';
 
@@ -526,6 +535,7 @@ Handling async errors is an important part of many applications. Support for thi
 For example, a request could be made to some backend when the user submits the form. If that request fails, the errors returned by the backend should be formatted like in the following example.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema, ErrorSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -568,6 +578,7 @@ In version 5, with the advent of the decoupling of the validation implementation
 For instance, if you need more information from `ajv` about errors via the `verbose` option, now you can turn it on!
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import { customizeValidator } from '@rjsf/validator-ajv8';
 
@@ -621,6 +632,7 @@ Finally, the Ajv 8 validator supports the localization of error messages.
 By default, ALL formats are being added to the default `@rjsf/validator-ajv8` that you get when you import it.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import validator from '@rjsf/validator-ajv8';
 
@@ -635,6 +647,7 @@ render(<Form schema={schema} validator={validator} />, document.getElementById('
 If you don't actually need any of the [ajv-formats](https://github.com/ajv-validator/ajv-formats#formats) and want to reduce the memory footprint, then you can turn it off as follows:
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import { customizeValidator } from '@rjsf/validator-ajv8';
 
@@ -650,6 +663,7 @@ render(<Form schema={schema} validator={validator} />, document.getElementById('
 If you only need some of them, you can pass any of the [options](https://github.com/ajv-validator/ajv-formats#options) to the formatter:
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import { customizeValidator } from '@rjsf/validator-ajv8';
 
@@ -672,6 +686,7 @@ It is possible to use one of the other version it supports, like `draft-2019-09`
 NOTE: `draft-2020-12` has breaking changes and hasn't been fully tested with `@rjsf`.
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import { customizeValidator } from '@rjsf/validator-ajv8';
 import Ajv2019 from 'ajv/dist/2019';
@@ -707,6 +722,7 @@ NOTE: The `ajv-i18n` validators implement the `Localizer` interface.
 Using a specific locale while including all of `ajv-i18n`:
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import { customizeValidator } from '@rjsf/validator-ajv8';
 import localizer from 'ajv-i18n';
@@ -723,6 +739,7 @@ render(<Form schema={schema} validator={validator} />, document.getElementById('
 Using a specific locale minimizing the bundle size
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import { customizeValidator } from '@rjsf/validator-ajv8';
 import spanishLocalizer from 'ajv-i18n/localize/es';
@@ -739,6 +756,7 @@ render(<Form schema={schema} validator={validator} />, document.getElementById('
 An example of a custom `Localizer` implementation:
 
 ```tsx
+import { Form } from '@rjsf/core';
 import { RJSFSchema } from '@rjsf/utils';
 import { customizeValidator } from '@rjsf/validator-ajv8';
 import { ErrorObject } from 'ajv';