Drag 'n Drop Form + JSON-Schema Builder

[elbakerino]

This serves as discussion for what is required to get a full Drag 'n Drop Form Builder included as UI-Schema packages.

Note: this focuses on a lowlevel implementation, as interoperable as possible.

Currently there is no need for me to build the FormBuilder, thus not on roadmap atm., but as I also want one maybe sometime, I've already thought about that while writing UI-Schema - if others solve the problems, it could be possible in the near future.

Object Schemas

My biggest issue: dnd should use array to work correctly and very safe, thus "add new property schema" would need to "add new item to array" and not just a new keyword to the properties key.

• it should be possible to rename a property to an existing name and show the user that there is an error
• with existing data { abc: 1, abcd: 2}, the user must be able to rename abcd to ab with deleting the last characters
• if an actual property would be used, it would be impossible to delete the d from abcd (or the other property would be overwritten)

Conditional Schemas

// todo

Drag 'n Drop

The @ui-schema/kit-dnd implementation will get a leaner and fixed implementation - internally already done in the last months, moved milestone to v0.5.x.

Endless nestable drag 'n drop grids, compatible with the UI-Schema store, using pointer/edge-detection for "merge or insert between or append" rules, allowing to restrict droppable things by schema.

First Target

The first step towards this is to define a schema and data structure which has JSON-Schema as input and JSON-Schema as output - with basic support for all types: object, array, string, number etc.

Together with ideas on how the object widget should work with adding/changing properties - atm. there is no widget that can change/add storeKeys, e.g. { properties: { <new-key>: {} } } with arbitrary user-input.

Example: Table of Tuples

It is already possible to define a JSON-Schema, which provides an UI that produces JSON-Schema, it only works in simple special cases like array tuples with the Table widget.

Copy and paste this schema into the live editor:

{
  "type": "object",
  "definitions": {
    "uiView": {
      "type": "object",
      "properties": {
        "dense": {
          "type": "boolean",
          "view": {
            "sizeMd": 3
          }
        }
      }
    },
    "uiTranslate": {
      "type": "object",
      "widget": "Accordions",
      "properties": {
        "en": {
          "type": "object",
          "title": "English Translations",
          "properties": {
            "title": {
              "type": "string",
              "deleteOnEmpty": true
            }
          }
        },
        "de": {
          "type": "object",
          "title": "German Translations",
          "properties": {
            "title": {
              "type": "string",
              "deleteOnEmpty": true
            }
          }
        }
      }
    },
    "numberTypeValidation": {
      "properties": {
        "minimum": {
          "type": "number",
          "view": {
            "sizeMd": 4
          }
        },
        "maximum": {
          "type": "number",
          "view": {
            "sizeMd": 4
          }
        }
      }
    },
    "stringTypeValidation": {
      "properties": {
        "minLength": {
          "type": "number",
          "view": {
            "sizeMd": 4
          }
        },
        "maxLength": {
          "type": "number",
          "view": {
            "sizeMd": 4
          }
        }
      }
    },
    "jsonSchemaScalar": {
      "type": "object",
      "properties": {
        "type": {
          "type": "string",
          "enum": [
            "string",
            "number",
            "boolean",
            "null"
          ],
          "widget": "Select",
          "view": {
            "sizeMd": 6
          }
        }
      },
      "allOf": [
        {
          "properties": {
            "title": {
              "type": "string",
              "view": {
                "sizeMd": 6
              }
            }
          }
        },
        {
          "properties": {
            "t": {
              "$ref": "#/definitions/uiTranslate"
            }
          }
        },
        {
          "if": {
            "properties": {
              "type": {
                "const": "string"
              }
            },
            "required": [
              "type"
            ]
          },
          "then": {
            "$ref": "#/definitions/stringTypeValidation"
          }
        },
        {
          "if": {
            "properties": {
              "type": {
                "const": "number"
              }
            },
            "required": [
              "type"
            ]
          },
          "then": {
            "$ref": "#/definitions/numberTypeValidation"
          }
        }
      ]
    }
  },
  "properties": {
    "type": {
      "type": "string",
      "const": "array",
      "default": "array",
      "hidden": true
    },
    "widget": {
      "type": "string",
      "const": "Table",
      "default": "Table",
      "hidden": true
    },
    "title": {
      "type": "string",
      "default": "Table of Tuples",
      "view": {
        "sizeXs": 8
      }
    },
    "view": {
      "$ref": "#/definitions/uiView",
      "view": {
        "sizeXs": 4
      }
    },
    "t": {
      "$ref": "#/definitions/uiTranslate"
    },
    "items": {
      "type": "object",
      "properties": {
        "type": {
          "type": "string",
          "const": "array",
          "default": "array",
          "hidden": true
        },
        "items": {
          "type": "array",
          "widget": "GenericList",
          "title": "Cells",
          "items": {
            "$ref": "#/definitions/jsonSchemaScalar"
          }
        }
      }
    }
  }
}

Under data you see the produced schema, similiar to this:

{
  "type": "array",
  "widget": "Table",
  "title": "Table of Tuples",
  "items": {
    "type": "array",
    "items": [
      {
        "type": "string",
        "maxLength": 15,
        "title": "Name",
        "minLength": 3
      },
      {
        "type": "number",
        "title": "Score",
        "maximum": 100,
        "minimum": 0
      }
    ]
  }
}

This schema you can now copy and paste again into the schema input, now you see your just configured table.