feat(docs): explain JSON Schema components

Signed-off-by: mathis-m <mathis.michel@outlook.de>

docs/customization/plug-points.md

@@ -41,3 +41,88 @@ const MultiplePhraseFilterPlugin = function() {
   }
 }
 ```
+
+### JSON Schema components
+JSON Schema components are components that are used to retrieve user input for a schema within parameters or request body (`application/x-www-form-urlencoded` | `multipart/*`).
+
+For each schema's type(eg. `string`, `array`, ...) and if defined schema's format (eg. 'date', 'uuid', ...) there is a corresponding component mapping:
+
+**If format defined:**
+```js
+`JsonSchema_${type}_${format}`
+```
+
+**Fallback if `JsonSchema_${type}_${format}` component does not exist or format not defined:**
+```js
+`JsonSchema_${type}`
+```
+
+**Default:**
+```js
+`JsonSchema_string`
+```
+
+With this one can define custom input components or override existing.
+
+#### Example Date-Picker plugin
+
+If one would like to input date values you could provide a custom plugin to integrate [react-datepicker](https://www.npmjs.com/package/react-datepicker) into swagger-ui.
+All you need to do is to create a component to wrap [react-datepicker](https://www.npmjs.com/package/react-datepicker) accordingly to the format.
+
+**There are two cases:**
+- ```yaml
+  type: string
+  format: date
+  ```
+  The resulting name for mapping to succeed: `JsonSchema_string_date`
+- ```yaml
+  type: string
+  format: date-time
+  ```
+  The resulting name for mapping to succeed: `JsonSchema_string_date-time`
+
+This creates the need for two components and simple logic to strip any time input in case the format is date:
+```js
+import React from "react";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+const JsonSchema_string_date = (props) => {
+  const dateNumber = Date.parse(props.value);
+  const date = dateNumber
+    ? new Date(dateNumber)
+    : new Date();
+
+  return (
+    <DatePicker
+      selected={date}
+      onChange={d => props.onChange(d.toISOString().substring(0, 10))}
+    />
+  );
+}
+
+const JsonSchema_string_date_time = (props) => {
+  const dateNumber = Date.parse(props.value);
+  const date = dateNumber
+    ? new Date(dateNumber)
+    : new Date();
+
+  return (
+    <DatePicker
+      selected={date}
+      onChange={d => props.onChange(d.toISOString())}
+      showTimeSelect
+      timeFormat="p"
+      dateFormat="Pp"
+    />
+  );
+}
+
+
+export const DateTimeSwaggerPlugin = {
+  components: {
+    JsonSchema_string_date: JsonSchema_string_date,
+    "JsonSchema_string_date-time": JsonSchema_string_date_time
+  }
+};
+```