Custom component

Schema:

{
  "type": "object",
  "properties": {
    "type": {
      "type": "string",
      "pattern": "^custom_component$"
    },
    "id": {"type" : "string"},
    "data": {
      "type": "object",
      "properties": {
        "uid": {"type" : "string"},
        "title": {"type" : "string"},
        "field_data": {"type":"array"}
      }
    }
  },
  "required": ["id", "type", "data"]
}

Example output of a custom component with no form field values:

{
"type": "custom_component",
"id": "dc123a34-e70a-4d21-88b0-3364b026ecf4",
"data": {
"uid": "react",
"title": "React calculator"
}
}

Example output of a custom component with 3 form fields with Input, Text Area and Color Picker:

{
  "type": "custom_component",
  "id": "c05371b6-b20b-485f-a36d-f1c14eda9091",
  "data": {
    "uid": "js_component",
    "title": "Js custom component",
    "field_data": [
      {
        "type": "form-field",
        "id": "e85dcfcf-3e83-47fc-a697-e17f562eb090",
        "machine_name": "heading",
        "data": {
          "uid": "form-input",
          "title": "Input",
          "value": "Test input"
        }
      },
      {
        "type": "form-field",
        "id": "0e0f0ccb-edd3-43e2-81ec-7061ae230d9d",
        "machine_name": "content",
        "data": {
          "uid": "form-textarea",
          "title": "Plain text area",
          "value": "Some plain text"
        }
      },
      {
        "type": "form-field",
        "id": "e0d9c75b-2f64-4ba1-883d-10cc8f3406e3",
        "machine_name": "font-color",
        "data": {
          "uid": "form-colorpicker",
          "title": "Color picker",
          "value": {
            "hex": "#d14141",
            "rgba": "rgba(209, 65, 65, 1)"
          }
        }
      }
    ]
  }
}