Freeze docs for v5 (#4565)

* Freeze docs for v5

Use `npm run docusaurus docs:version 5.24.9` to freeze docs for v5.24.9. Update the label for these frozen docs to 'v5'. Update the label for the current docs to indicate the current version. Update tsconfig to allow importing package.json to resolve the package version.

Any changes to v5 docs after this is merged must be made to the versioned copy.

* version should be 5.24.10

---------

Co-authored-by: Heath C <[email protected]>

Author: nickgros

packages/docs/docusaurus.config.js

@@ -4,6 +4,8 @@
 const lightCodeTheme = require('prism-react-renderer/themes/github');
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
+const currentProjectVersion = require('./package.json').version;
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'react-jsonschema-form',
@@ -44,9 +46,13 @@ const config = {
           lastVersion: 'current',
           versions: {
             current: {
-              label: 'v5',
+              label: `Current (v${currentProjectVersion})`,
               path: '',
             },
+            '5.24.10': {
+              label: 'v5',
+              path: 'version-5.24.10',
+            },
             '4.2.3': {
               label: 'v4',
               path: 'version-4.2.3',

packages/docs/tsconfig.json

@@ -2,6 +2,7 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@tsconfig/docusaurus/tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "resolveJsonModule": true
   }
 }

packages/docs/versioned_docs/version-5.24.10/00-introduction.mdx

@@ -0,0 +1,135 @@
+---
+id: intro
+title: Introduction
+slug: /
+---
+
+# react-jsonschema-form
+
+![Build Status](https://github.com/rjsf-team/react-jsonschema-form/workflows/CI/badge.svg)
+
+A simple [React](https://reactjs.org/) component capable of building HTML forms out of a [JSON schema](http://json-schema.org/).
+
+A [live playground](https://rjsf-team.github.io/react-jsonschema-form/) is hosted on GitHub Pages:
+
+<a target='_blank' href='https://rjsf-team.github.io/react-jsonschema-form/'>
+    <img alt='Playground' src='https://i.imgur.com/M8ZCES5.gif'/>
+</a>
+
+## Philosophy
+
+react-jsonschema-form is meant to automatically generate a React form based on a [JSON Schema](http://json-schema.org/). If you want to generate a form for any data, sight unseen, simply given a JSON schema, react-jsonschema-form may be for you. If you have _a priori_ knowledge of your data and want a toolkit for generating forms for it, you might look elsewhere.
+
+react-jsonschema-form also comes with tools such as `uiSchema` and other form props to customize the look and feel of the form beyond the default themes.
+
+## Installation
+
+First install the dependencies from npm, along with a validator implementation (such as `@rjsf/validator-ajv8`):
+
+```bash
+$ npm install @rjsf/core @rjsf/utils @rjsf/validator-ajv8 --save
+```
+
+Then import the dependencies as follows:
+
+```ts
+import Form from '@rjsf/core';
+import validator from '@rjsf/validator-ajv8';
+```
+
+Our latest version requires React 16+.
+
+## Usage
+
+```tsx
+import Form from '@rjsf/core';
+import { RJSFSchema } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+
+const schema: RJSFSchema = {
+  title: 'Todo',
+  type: 'object',
+  required: ['title'],
+  properties: {
+    title: { type: 'string', title: 'Title', default: 'A new task' },
+    done: { type: 'boolean', title: 'Done?', default: false },
+  },
+};
+
+const log = (type) => console.log.bind(console, type);
+
+render(
+  <Form
+    schema={schema}
+    validator={validator}
+    onChange={log('changed')}
+    onSubmit={log('submitted')}
+    onError={log('errors')}
+  />,
+  document.getElementById('app')
+);
+```
+
+## Theming
+
+For more information on what themes we support, see [Using Themes](usage/themes).
+
+<!--
+
+disabled until https://github.com/rjsf-team/react-jsonschema-form/issues/1584 is resolved
+
+## Useful samples
+
+ - Custom field template: <https://jsfiddle.net/hdp1kgn6/1/>
+ - Multi-step wizard: <https://jsfiddle.net/sn4bnw9h/1/>
+ - Using classNames with uiSchema: <https://jsfiddle.net/gfwp25we/1/>
+ - Conditional fields: <https://jsfiddle.net/69z2wepo/88541/>
+ - Advanced conditional fields: <https://jsfiddle.net/cowbellerina/zbfh96b1/>
+ - Use radio list for enums: <https://jsfiddle.net/f2y3fq7L/2/>
+ - Reading file input data: <https://jsfiddle.net/f9vcb6pL/1/>
+ - Custom errors messages with transformErrors: <https://jsfiddle.net/revolunet/5r3swnr4/>
+ - 2 columns form with CSS and FieldTemplate: <https://jsfiddle.net/n1k0/bw0ffnz4/1/>
+ - Validate and submit form from external control: <https://jsfiddle.net/spacebaboon/g5a1re63/>
+ - Custom component for Help text with `ui:help`: <https://codesandbox.io/s/14pqx97xl7/>
+ - Collapsing / Showing and Hiding individual fields: <https://codesandbox.io/s/examplereactjsonschemaformcollapsefieldtemplate-t41dn>
+
+-->
+
+## License
+
+Apache 2
+
+## Credits
+
+<table>
+    <tr>
+        <th>
+            <img src="https://avatars1.githubusercontent.com/u/1066228?s=200&v=4" alt="mozilla-services-logo" style={{maxHeight: '100px'}} />
+        </th>
+        <td>
+            This project initially started as a <a href="https://github.com/mozilla-services">mozilla-services</a> project.
+        </td>
+    </tr>
+    <tr>
+        <th>
+            <img src="https://user-images.githubusercontent.com/1689183/51487090-4ea04f80-1d57-11e9-9a91-79b7ef8d2013.png" alt='browserstack logo'  style={{maxHeight: '100px'}}/>
+        </th>
+        <td>
+            Testing is powered by <a href="https://www.browserstack.com/" >BrowserStack</a>.
+        </td>
+    </tr>
+    <tr>
+        <th>
+            <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt='netlify logo'  style={{maxHeight: '100px'}}/>
+        </th>
+        <td>
+            Deploy Previews are provided by <a href="https://www.netlify.com">Netlify</a>.
+        </td>
+    </tr>
+</table>
+
+## Who uses react-jsonschema-form?
+
+- ...
+
+Add your own company / organization by making a [pull request](https://github.com/rjsf-team/react-jsonschema-form/pulls).

packages/docs/versioned_docs/version-5.24.10/01-quickstart.md

@@ -0,0 +1,163 @@
+# Quickstart
+
+Let's walk through setup of a form after installing the dependency properly.
+NOTE: As of version 5, the `Form` now requires you to provide a `validator` implementation. We recommend the one from `@rjsf/validator-ajv8`.
+
+## Form schema
+
+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';
+
+const schema: RJSFSchema = {
+  title: 'Test form',
+  type: 'string',
+};
+
+render(<Form schema={schema} validator={validator} />, document.getElementById('app'));
+```
+
+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';
+
+const schema: RJSFSchema = {
+  title: 'Test form',
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+    },
+    age: {
+      type: 'number',
+    },
+  },
+};
+
+render(<Form schema={schema} validator={validator} />, document.getElementById('app'));
+```
+
+For more information and examples of JSON Schema properties that this library supports, see [Using JSON Schema](json-schema/single.md).
+
+## Form uiSchema
+
+The uiSchema is used to add more customization to the form's look and feel. Use the `classNames`
+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';
+
+const schema: RJSFSchema = {
+  title: 'Test form',
+  type: 'string',
+};
+
+const uiSchema: UiSchema = {
+  'ui:classNames': 'custom-css-class',
+};
+
+render(<Form schema={schema} uiSchema={uiSchema} validator={validator} />, document.getElementById('app'));
+```
+
+To customize object fields in the uiSchema, the structure of the
+uiSchema should be `{key: value}`, where `key` is the property key and `value` is an
+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';
+
+const schema: RJSFSchema = {
+  title: 'Test form',
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+    },
+    age: {
+      type: 'number',
+    },
+  },
+};
+
+const uiSchema: UiSchema = {
+  name: {
+    'ui:classNames': 'custom-class-name',
+  },
+  age: {
+    'ui:classNames': 'custom-class-age',
+  },
+};
+
+render(<Form schema={schema} uiSchema={uiSchema} validator={validator} />, document.getElementById('app'));
+```
+
+## Form initialization
+
+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';
+
+const schema: RJSFSchema = {
+  type: 'object',
+  properties: {
+    title: {
+      type: 'string',
+    },
+    done: {
+      type: 'boolean',
+    },
+  },
+};
+
+const formData = {
+  title: 'First task',
+  done: true,
+};
+
+render(<Form schema={schema} formData={formData} validator={validator} />, document.getElementById('app'));
+```
+
+> Note: If your form has a single field, pass a single value to `formData`. ex: `formData="Charlie"`
+
+> WARNING: If you have situations where your parent component can re-render, make sure you listen to the `onChange` event and update the data you pass to the `formData` attribute.
+
+### Form event handlers
+
+You can use event handlers such as `onChange`, `onError`, `onSubmit`, `onFocus`, and `onBlur` on the `<Form />` component; see the [Form Props Reference](./api-reference/form-props.md) for more details.
+
+### Controlled component
+
+By default, `<Form />` is an [uncontrolled component](https://reactjs.org/docs/uncontrolled-components.html). To make it a controlled component, use the
+`onChange` and `formData` props as in the below example:
+
+```tsx
+import Form from '@rjsf/core';
+import validator from '@rjsf/validator-ajv8';
+
+const App = () => {
+  const [formData, setFormData] = React.useState(null);
+  return (
+    <Form
+      schema={{ type: 'string' }}
+      formData={formData}
+      onChange={(e) => setFormData(e.formData)}
+      validator={validator}
+    />
+  );
+};
+
+render(<App />, document.getElementById('app'));
+```