applerdotxyz / rn-composable-ui

react-native, starter-kit, template, multi-platform, expo, web, mobile, ios, android
https://liveedit.vercel.app
Mozilla Public License 2.0
1 stars 4 forks source link

JSONSchema for appConfig #73

Open saurshaz opened 3 years ago

saurshaz commented 3 years ago

generate perfect jsonschema validation for a layout config for any route in appConfig Site to use to understand what a jsonschema format would be like https://extendsclass.com/json-schema-validator.html example for config is below

{
  "tw": true,
  "componentsSet": {},
  "layout": {
    "0": {
      "0": {
        "layout": {
          "0": {
            "0": {
              "idx": "Home",
              "label": "left-nav",
              "colClass": "bg-blue-500 p-1 text-sm text-red",
              "size": 20
            }
          },
          "1": {
            "0": {
              "idx": "Home",
              "label": "body",
              "colClass": "bg-red-300 p-3 text-3xl y-10 bg-blue-light rounded font-bold text-red text-sm mr-2 flex",
              "size": 65
            }
          },
          "layoutConfig": {
            "layoutClass": "py-1 rounded bg-red-100 p-1 mr-3 ",
            "size": 10
          }
        }
      },
      "1": {
        "layout": {
          "0": {
            "0": {
              "layout": {
                "0": {
                  "0": {
                    "idx": "Home",
                    "label": "left-nav",
                    "size": 2,
                    "colClass": "bg-blue-300 p-1 text-2xl"
                  }
                },
                "1": {
                  "0": {
                    "idx": "About",
                    "label": "left-nav",
                    "size": 10,
                    "colClass": "bg-blue-500 p-1 text-2xl"
                  },
                  "1": {
                    "idx": "Home",
                    "label": "body",
                    "size": 60,
                    "colClass": "bg-gray-300 p-1 text-2xl"
                  }
                },
                "layoutConfig": {
                  "layoutClass": "py-1 bg-yellow-100 p-1 ",
                  "size": 15
                }
              }
            }
          },
          "1": {
            "0": {
              "layout": {
                "0": {
                  "0": {
                    "idx": "Home",
                    "label": "body",
                    "size": 8,
                    "colClass": "bg-green-300 p-1 text-2xl"
                  },
                  "1": {
                    "idx": "Home",
                    "label": "left-nav",
                    "size": 2,
                    "colClass": "bg-blue-500 p-1 text-2xl"
                  }
                },
                "1": {
                  "0": {
                    "idx": "Home",
                    "label": "left-nav",
                    "size": 35,
                    "colClass": "bg-green-500 p-1 text-2xl"
                  }
                },
                "layoutConfig": {
                  "layoutClass": "py-1 bg-yellow-100 p-1 ",
                  "size": 15
                }
              }
            },
            "1": {
              "layout": {
                "0": {
                  "0": {
                    "idx": "Home",
                    "label": "body",
                    "size": 8,
                    "colClass": "bg-green-300 p-1 text-2xl"
                  },
                  "1": {
                    "idx": "Home",
                    "label": "left-nav",
                    "size": 2,
                    "colClass": "bg-pink-500 p-1 text-2xl"
                  }
                },
                "1": {
                  "0": {
                    "idx": "Home",
                    "label": "left-nav",
                    "size": 35,
                    "colClass": "bg-yellow-500 p-1 text-2xl"
                  }
                },
                "layoutConfig": {
                  "layoutClass": "py-1 bg-yellow-100 p-1 ",
                  "size": 45
                }
              }
            }
          },
          "layoutConfig": {
            "layoutClass": "py-1 bg-yellow-100 p-1 ",
            "size": 40
          }
        }
      }
    },
    "layoutConfig": {
      "layoutClass": "py-1 rounded bg-red-100 p-1 mr-3 "
    }
  }
}

The schema will be used to check whether the entered values are correct or not

Current schema being used is like this

{
    type: "object",
    properties: {
      componentsSet: {
        type: "object",
      },
      layout: {
        type: "object",
        properties: {
          "0": {
            type: "object",
            properties: {
              "0": {
                type: "object",
                properties: {
                  layout: {
                    type: "object",
                    properties: {
                      "0": {
                        type: "object",
                        properties: {
                          "0": {
                            type: "object",
                            properties: {
                              idx: {
                                title: "Component",
                                enum: ["About", "Home"],
                                type: "string",
                              },
                              label: {
                                type: "string",
                              },
                              colClass: {
                                type: "string",
                              },
                              size: {
                                type: "integer",
                              },
                            },
                            required: ["idx", "label", "colClass", "size"],
                          },
                        },
                        required: ["0"],
                      },
                      "1": {
                        type: "object",
                        properties: {
                          "0": {
                            type: "object",
                            properties: {
                              idx: {
                                type: "string",
                              },
                              label: {
                                type: "string",
                              },
                              colClass: {
                                type: "string",
                              },
                              size: {
                                type: "integer",
                              },
                            },
                            required: ["idx", "label", "colClass", "size"],
                          },
                        },
                        required: ["0"],
                      },
                      layoutConfig: {
                        type: "object",
                        properties: {
                          layoutClass: {
                            type: "string",
                          },
                          size: {
                            type: "integer",
                          },
                        },
                        required: ["layoutClass", "size"],
                      },
                    },
                    required: ["0", "1", "layoutConfig"],
                  },
                },
                required: ["layout"],
              },
              "1": {
                type: "object",
                properties: {
                  layout: {
                    type: "object",
                    properties: {
                      "0": {
                        type: "object",
                        properties: {
                          "0": {
                            type: "object",
                            properties: {
                              layout: {
                                type: "object",
                                properties: {
                                  "0": {
                                    type: "object",
                                    properties: {
                                      "0": {
                                        type: "object",
                                        properties: {
                                          idx: {
                                            type: "string",
                                          },
                                          label: {
                                            type: "string",
                                          },
                                          size: {
                                            type: "integer",
                                          },
                                          colClass: {
                                            type: "string",
                                          },
                                        },
                                        required: [
                                          "idx",
                                          "label",
                                          "size",
                                          "colClass",
                                        ],
                                      },
                                    },
                                    required: ["0"],
                                  },
                                  "1": {
                                    type: "object",
                                    properties: {
                                      "0": {
                                        type: "object",
                                        properties: {
                                          idx: {
                                            type: "string",
                                          },
                                          label: {
                                            type: "string",
                                          },
                                          size: {
                                            type: "integer",
                                          },
                                          colClass: {
                                            type: "string",
                                          },
                                        },
                                        required: [
                                          "idx",
                                          "label",
                                          "size",
                                          "colClass",
                                        ],
                                      },
                                      "1": {
                                        type: "object",
                                        properties: {
                                          idx: {
                                            type: "string",
                                          },
                                          label: {
                                            type: "string",
                                          },
                                          size: {
                                            type: "integer",
                                          },
                                          colClass: {
                                            type: "string",
                                          },
                                        },
                                        required: [
                                          "idx",
                                          "label",
                                          "size",
                                          "colClass",
                                        ],
                                      },
                                    },
                                    required: ["0", "1"],
                                  },
                                  layoutConfig: {
                                    type: "object",
                                    properties: {
                                      layoutClass: {
                                        type: "string",
                                      },
                                      size: {
                                        type: "integer",
                                      },
                                    },
                                    required: ["layoutClass", "size"],
                                  },
                                },
                                required: ["0", "1", "layoutConfig"],
                              },
                            },
                            required: ["layout"],
                          },
                        },
                        required: ["0"],
                      },
                      "1": {
                        type: "object",
                        properties: {
                          "0": {
                            type: "object",
                            properties: {
                              layout: {
                                type: "object",
                                properties: {
                                  "0": {
                                    type: "object",
                                    properties: {
                                      "0": {
                                        type: "object",
                                        properties: {
                                          idx: {
                                            type: "string",
                                          },
                                          label: {
                                            type: "string",
                                          },
                                          size: {
                                            type: "integer",
                                          },
                                          colClass: {
                                            type: "string",
                                          },
                                        },
                                        required: [
                                          "idx",
                                          "label",
                                          "size",
                                          "colClass",
                                        ],
                                      },
                                      "1": {
                                        type: "object",
                                        properties: {
                                          idx: {
                                            type: "string",
                                          },
                                          label: {
                                            type: "string",
                                          },
                                          size: {
                                            type: "integer",
                                          },
                                          colClass: {
                                            type: "string",
                                          },
                                        },
                                        required: [
                                          "idx",
                                          "label",
                                          "size",
                                          "colClass",
                                        ],
                                      },
                                    },
                                    required: ["0", "1"],
                                  },
                                  "1": {
                                    type: "object",
                                    properties: {
                                      "0": {
                                        type: "object",
                                        properties: {
                                          idx: {
                                            type: "string",
                                          },
                                          label: {
                                            type: "string",
                                          },
                                          size: {
                                            type: "integer",
                                          },
                                          colClass: {
                                            type: "string",
                                          },
                                        },
                                        required: [
                                          "idx",
                                          "label",
                                          "size",
                                          "colClass",
                                        ],
                                      },
                                    },
                                    required: ["0"],
                                  },
                                  layoutConfig: {
                                    type: "object",
                                    properties: {
                                      layoutClass: {
                                        type: "string",
                                      },
                                      size: {
                                        type: "integer",
                                      },
                                    },
                                    required: ["layoutClass", "size"],
                                  },
                                },
                                required: ["0", "1", "layoutConfig"],
                              },
                            },
                            required: ["layout"],
                          },
                          "1": {
                            type: "object",
                            properties: {
                              layout: {
                                type: "object",
                                properties: {
                                  "0": {
                                    type: "object",
                                    properties: {
                                      "0": {
                                        type: "object",
                                        properties: {
                                          idx: {
                                            type: "string",
                                          },
                                          label: {
                                            type: "string",
                                          },
                                          size: {
                                            type: "integer",
                                          },
                                          colClass: {
                                            type: "string",
                                          },
                                        },
                                        required: [
                                          "idx",
                                          "label",
                                          "size",
                                          "colClass",
                                        ],
                                      },
                                      "1": {
                                        type: "object",
                                        properties: {
                                          idx: {
                                            type: "string",
                                          },
                                          label: {
                                            type: "string",
                                          },
                                          size: {
                                            type: "integer",
                                          },
                                          colClass: {
                                            type: "string",
                                          },
                                        },
                                        required: [
                                          "idx",
                                          "label",
                                          "size",
                                          "colClass",
                                        ],
                                      },
                                    },
                                    required: ["0", "1"],
                                  },
                                  "1": {
                                    type: "object",
                                    properties: {
                                      "0": {
                                        type: "object",
                                        properties: {
                                          idx: {
                                            type: "string",
                                          },
                                          label: {
                                            type: "string",
                                          },
                                          size: {
                                            type: "integer",
                                          },
                                          colClass: {
                                            type: "string",
                                          },
                                        },
                                        required: [
                                          "idx",
                                          "label",
                                          "size",
                                          "colClass",
                                        ],
                                      },
                                    },
                                    required: ["0"],
                                  },
                                  layoutConfig: {
                                    type: "object",
                                    properties: {
                                      layoutClass: {
                                        type: "string",
                                      },
                                      size: {
                                        type: "integer",
                                      },
                                    },
                                    required: ["layoutClass", "size"],
                                  },
                                },
                                required: ["0", "1", "layoutConfig"],
                              },
                            },
                            required: ["layout"],
                          },
                        },
                        required: ["0", "1"],
                      },
                      layoutConfig: {
                        type: "object",
                        properties: {
                          layoutClass: {
                            type: "string",
                          },
                          size: {
                            type: "integer",
                          },
                        },
                        required: ["layoutClass", "size"],
                      },
                    },
                    required: ["0", "1", "layoutConfig"],
                  },
                },
                required: ["layout"],
              },
            },
            required: ["0", "1"],
          },
          layoutConfig: {
            type: "object",
            properties: {
              layoutClass: {
                type: "string",
              },
            },
            required: ["layoutClass"],
          },
        },
        required: ["0", "layoutConfig"],
      },
    },
    required: ["componentsSet", "layout"],
  }
saurshaz commented 3 years ago

Also not to use enums to achive effect like this ![Uploading 05⁄03⁄212021-05-03Monday 3_1.png…]()

saurshaz commented 3 years ago

The schema above is very rigid, we need something which can have n no of nodes in place with correct grammer

                             "1": {
                                    type: "object",
                                    properties: {
                                      "0": {
                                        type: "object",
                                        properties: {
                                          idx: {
                                            type: "string",
                                          },
                                          label: {
                                            type: "string",
                                          },
                                          size: {
                                            type: "integer",
                                          },
                                          colClass: {
                                            type: "string",
                                          },
                                        },
                                        required: [
                                          "idx",
                                          "label",
                                          "size",
                                          "colClass",
                                        ],
                                      },
                                    },
                                    required: ["0"],
                                  },