Freeze docs for v5

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'));
+```