feat: add custom component by id

[lironhl]

Reasons for making this change

Hi!
I added a feature that let's you render a custom field component for a schema, according to a schema $id
I added this feature because in my use case I had two string fields that needed to be rendered in different ways -
Let me demonstrate, suppose I have this json-schema:

{
  "type": "object",
  "properties": {
    "customerName": {
      "type": "string"
    },
    "firstDish": {
      "type": "string"
    },
    "seconDish": {
      "type": "string"
    }
  }
}

Let's treat this json-schema as json-schema that represents a customer order in my restaurant website.
I'd want react-jsonschema-form to render the first property customerName as regular field of string input.
But to maximize the customer UX I'd want react-jsonschema-form to be able to let me render the fields firstDish and secondDish with custom components that also auto-complete the user input with dishes name from the restaurant.

In the current way of using react-jsonschema-form I suppose I could achieve this behaviour by iterating over my json-schema and building uiSchema according to my wishes.
But I find iterating over json-schema hard because of ref keyword and it's general nested structure.
I thought that because of the reason that react-jsonschema-form has option to render custom field according to schema type, a good and valuable addition would be to render custom field according to schema $id.

So now instead of the json-schema above, you could enter this json-schema:

{
 "type": "object",
 "definitions": {
   "dish": {
       "$id": "/schemas/dish",
       "type": "string"
   }
 },
 "properties": {
   "customerName": {
     "type": "string"
   },
   "firstDish": {
     "$ref": "#/definitions/dish"
   },
   "seconDish": {
     "$ref": "#/definitions/dish"
   }
 },
}

And add this prop to the Form component:

<Form
  fields={{  "/schemas/dish": DishComponent }}
>

And then have the customerName field render as planned and firstDish and secondDish render differently as planned.

I'd love to hear feedback and change my code if needed :)

Screencast.from.24-06-23.16.13.45.webm

How do I added it to the Agenda? I'll leave a message about this PR on the discord community

Checklist

• I'm updating documentation
  • I've checked the rendering of the Markdown text I've added
• I'm adding or updating code
  • I've added and/or updated tests. I've run npm run test:update to update snapshots, if needed.
  • I've updated docs if needed
  • I've updated the changelog with a description of the PR
• I'm adding a new feature
  • I've updated the playground with an example use of the feature

[nickgros]

Hi @lironhl this is a great idea! Can you fix the lint errors and add a test to SchemaField.test.jsx to verify that a custom field that matches an ID is used?

[heath-freenome]

Hi @lironhl this is a great idea! Can you fix the lint errors and add a test to SchemaField.test.jsx to verify that a custom field that matches an ID is used?

I agree! Also please update the CHANGELOG.md file to add 5.10.0 for this feature

[lironhl]

Thanks! I really appreciate the encouragement guys!
I think I applied all the changes you wanted, let me know if any further action is needed from my side :)
I even tried to document the change in the docs.

[heath-freenome]

@lironhl Looks good, I'll let @nickgros also take a peek and give his approval

[lironhl]

Also if you want to rephrase my English you're more than welcome :)

[nickgros]

@lironhl I made a few small changes on the typos and docs but this looks great to me! I'll merge as soon as the build passes.

[nickgros]

By the way, thanks for adding this missing test!