Add support for JSON form

[oliviertassinari]

Summary 💡

https://github.com/rjsf-team/react-jsonschema-form is relatively popular.

Examples 🌈

• https://docs.retool.com/private/create-forms-using-json-schema-form-component

Motivation 🔦

I imagine that the use case is to have the server define what the forms should be based on the page that is shown. So it's used for dynamic use cases, not static ones (view hard-coded by a developer).

This could also maybe share the same underlying code with https://github.com/mui/mui-toolpad/issues/1770.

[Janpot]

Related https://github.com/mui/mui-toolpad/issues/1770

[apedroferreira]

Internal document with possible steps for this feature: https://www.notion.so/mui-org/Improve-Form-experience-032a09f2316b4c5d92b33ca754dc6927

Step 1 - Raw schema prop

By using https://github.com/rjsf-team/react-jsonschema-form we can allow the user to directly provide any schema as a prop to customize the fields and their validation.

There is already an MUI 5 implementation at https://www.npmjs.com/package/@rjsf/mui, but it is still to be determined if it’s customizable enough for our needs, and how easily it can inherit our theming. The alternative is to not fully support all possible features of a form JSON schema from the start, but to gradually implement the ones we identify as most important and create our own custom templates/widgets with our own code.

Issues to be solved in this feature:

1. Make it so that the generated form uses the theme from the Toolpad app
2. It should be possible to customize the variant/size of the text fields in the generated form, for example. If such customization is not possible, we would need to create our own widgets/templates using https://github.com/rjsf-team/react-jsonschema-form, and possibly use some kind of context to apply these settings.
   • We could start with a small list of widgets such as text field, number input, select, autocomplete, checkbox, file picker, date picker and password field, as these correspond to components that we already have.

Step 2 - Form field controls

A form’s underlying JSON schema should also be viewable/editable through a UI abstraction in the form prop controls, as an option.

These controls would allow the user to pick which fields to show/hide and completely customize them, such as their type or their validation rules. These controls should be similar to the columns control in a DataGrid.

To be explored what exact customization we can provide for each field, but we could easily benchmark other tools and find a good starting implementation.