impaktapps-ui-builder 1.0.0 → 1.0.1

package/src/impaktapps-ui-builder/builder/build/buildUiSchema.ts

@@ -0,0 +1,405 @@
+import _ from "lodash";
+import emptyBox from "./uischema/emptyBox";
+import cardSlider from "./uischema/cardSlider";
+import { buildLeaderBoard } from "./buildLeaderboard";
+import { buildProgressBarCard } from "./buildProgressBarCard";
+import { buildProgressBar } from "./buildProgressBar";
+import buildHorizontalBarGraph from "./buildHorizontalBarGraph";
+import { buildSpeedoMeter } from "./buildSpeedoMeter";
+import { buildPieGraph } from "./buildPieGraph";
+import { buildStackbarGraph } from "./buildStackBarGraph";
+import { RunnerBoyProgressbar } from "./buildRunnerBoyProgrssBar";
+import { buildTabSection } from "./buildTabSection";
+import { buildWrapperSection } from "./buildWrapperSection";
+import { buildTextField } from "./buildText";
+import { buildSelect } from "./buildSelect";
+import { buildButton } from "./buildButton";
+import { buildTable } from "./buildTable";
+import { buildLabel } from "./buildLabel";
+import { buildUploadFile } from "./buildUplaodFile";
+import { buildDownloadFile } from "./buildDownloadFile";
+import { buildCard } from "./buildCard";
+import { buildDate, buildDateTime } from "./buildDate";
+import { buildRankCard } from "./buildRankCard";
+import { buildRollAndDice } from "./buildRollAndDice";
+import { buildTimer } from "./buildTimer";
+import { buildMultiSelect } from "./buildMultiSelect";
+import { buildBasicUiSchema } from "./buildBasicUiSchema";
+import { buildTextArea } from "./buildTextArea";
+import { buildSlider } from "./buildSlider";
+import { buildCheckbox } from "./buildCheckbox";
+import { buildLineGraph } from "./buildLineGraph";
+import { buildRadio } from "./buildRadio";
+import { buildEmptyBox } from "./buildEmptyBox";
+import { buildArray } from "./buildArray";
+import { buildAdhaarField, buildPanField } from "./buildAadharCard";
+import { buildFileInput } from "./buildFileInput";
+import { buildStepper } from "./buildStepper";
+import { buildPopUp } from "./buildPop";
+import { buildDataGrid } from "./buildDataGrid";
+import { buildInputSlider } from "./buildInputSlider";
+import { buildTreeMap } from "./buildTreeMap";
+import { buildThoughtOfTheDay } from "./buildThoughtOfTheDay";
+export let schema = {
+  type: "object",
+  properties: {},
+  required: []
+};
+//MultipleSelect
+function buildRule(configObj: any, tableName?: string, arrayHolderName?: boolean) {
+  if (arrayHolderName) {
+    if (schema.properties?.[tableName]?.items?.properties) {
+      if (!schema.properties?.[tableName]?.items?.properties?.[configObj.name]) {
+        schema.properties[tableName].items.properties[configObj.name] = {};
+        if (configObj.type === "Select" && configObj.value?.length > 0) {
+          schema.properties[tableName].items.properties[configObj.name] = {
+            oneOf: configObj.value.map((e) => {
+              return { const: e.value, title: e.label }
+            })
+          }
+        }
+        else if (configObj.type === "MultipleSelect" && configObj.value?.length > 0) {
+          schema.properties[tableName].items.properties[configObj.name] = {
+            items: {
+              oneOf: configObj.value.map((e) => {
+                return { const: e.value, title: e.label }
+              })
+            }
+          }
+        }
+      }
+    }
+  } else if ((configObj.type === "Select" || configObj.type === "MultipleSelect") && configObj.value?.length > 0) {
+    if (configObj.type === "Select") {
+      schema.properties[configObj.name] = {
+        oneOf: configObj.value.map((e) => {
+          return { const: e.value, title: e.label }
+        })
+      }
+    }
+    else if (configObj.type === "MultipleSelect") {
+      schema.properties[configObj.name] = {
+        items: {
+          oneOf: configObj.value.map((e) => {
+            return { const: e.value, title: e.label }
+          })
+        }
+      }
+    }
+  }
+  if (configObj.validation) {
+    configObj.validation.forEach((rule: any) => {
+      if (tableName) {
+        if (schema.properties?.[tableName]?.items?.properties) {
+          if (!schema.properties?.[tableName]?.items?.properties?.[configObj.name]) {
+            schema.properties[tableName].items.properties[configObj.name] = {};
+            if (configObj.type === "Select" || configObj.value?.length > 0) {
+              schema.properties[tableName].items.properties[configObj.name] = {
+                oneOf: configObj.value.map((e) => {
+                  return { const: e.value, title: e.label }
+                })
+              }
+            }
+            else if (configObj.type === "MultipleSelect" || configObj.value?.length > 0) {
+              schema.properties[tableName].items.properties[configObj.name] = {
+                items: {
+                  oneOf: configObj.value.map((e) => {
+                    return { const: e.value, title: e.label }
+                  })
+                }
+              }
+            }
+          }
+          if (rule.validationType === "required") {
+            schema.properties?.[tableName]?.items?.required.push(configObj.name)
+          } else {
+            schema.properties[tableName].items.properties[configObj.name]["type"] = "string"
+            schema.properties[tableName].items.properties[configObj.name][rule.validationType] =
+              isNaN(rule.validationValue) ?
+                rule.validationValue : Number(rule.validationValue)
+          }
+
+        }
+      } else {
+        if (!schema.properties[configObj.name]) {
+          schema.properties[configObj.name] = {};
+        }
+        if (rule.validationType === "required") {
+          schema.required.push(configObj.name)
+        } else {
+          schema.properties[configObj.name]["type"] = "string"
+          schema.properties[configObj.name][rule.validationType] =
+            isNaN(rule.validationValue) ?
+              rule.validationValue : Number(rule.validationValue)
+        }
+      }
+    });
+  }
+
+
+}
+export const buildSchema = (config: any, tableName?: string, isArrayType?: boolean) => {
+  buildRule(config, tableName, isArrayType);
+  if (config?.elements) {
+    if (config.type == "Table" || config.type == "Array") {
+      if (!schema.properties[config.name]) {
+        schema.properties[config.name] = {
+          type: "array",
+          items: {
+            type: "object",
+            properties: {},
+            required: []
+          }
+        }
+      }
+      config.elements.map((e, elemInd) => {
+        buildSchema(e, config.name, config.type === "Array" ? true : false)
+      })
+    }
+    else {
+      config.elements.map((e, elemInd) => {
+        buildSchema(e)
+      })
+    }
+  }
+  return schema;
+}
+
+
+const buildUiSchema = (config: any, store?: any) => {
+  let elements: any = {};
+  const componentScope = `#/properties/${config.name}`;
+  switch (config.type) {
+    case "TreeMap":
+      elements = buildTreeMap(config, componentScope)
+      break;
+    case "DateTime":
+      elements = buildDateTime(config, componentScope);
+      break;
+    case "InputSlider":
+      elements = buildInputSlider(config, componentScope);
+      break;
+    case "DataGrid":
+      elements = buildDataGrid(config, componentScope);
+      break;
+    case "Stepper":
+      elements = buildStepper(config, componentScope);
+      break;
+    case "PopUp":
+      elements = buildPopUp(config, componentScope);
+      break;
+    case "FileInput":
+      elements = buildFileInput(config, componentScope);
+      break;
+    case "AadharcardText":
+      elements = buildAdhaarField(config, componentScope);
+      break;
+    case "PanCardText":
+      elements = buildPanField(config, componentScope);
+      break;
+    case "TabSection":
+      elements = buildTabSection(config, componentScope);
+      break;
+    case "RunnerBoyProgressBar":
+      elements = RunnerBoyProgressbar(config, componentScope);
+      break;
+    case "WrapperSection":
+      elements = buildWrapperSection(config, componentScope);
+      break;
+    case "Text":
+      elements = buildTextField(config, componentScope);
+      break;
+    case "TextArea":
+      elements = buildTextArea(config, componentScope)
+      break;
+    case "Date":
+      elements = buildDate(config, componentScope);
+      break;
+    case "Select":
+      elements = buildSelect(config, componentScope);
+      break;
+    case "Radio":
+      elements = buildRadio(config, componentScope);
+      break;
+    case "Button":
+
+      elements = buildButton(config, componentScope);
+      break;
+    case "Table":
+      elements = buildTable(config, componentScope);
+      break;
+    case "Array":
+      elements = buildArray(config, componentScope);
+      break;
+    case "Box":
+      elements = buildLabel(config, componentScope);
+      break;
+    case "CheckBox":
+      elements = buildCheckbox(config, componentScope);
+      break;
+    case "UploadFile":
+      elements = buildUploadFile(config, componentScope);
+      break;
+    case "DownloadFile":
+      elements = buildDownloadFile(config, componentScope);
+      break;
+    case "EmptyBox":
+      elements = buildEmptyBox(config, componentScope);
+      break;
+    case "card":
+      elements = buildCard(config, componentScope, store);
+      break;
+    case "Graph":
+      switch (config.graphType) {
+        case "BarGraph":
+        case "StackBarGraph":
+          elements = buildStackbarGraph(config, componentScope);
+          break;
+        case "LineGraph":
+          elements = buildLineGraph(config, componentScope);
+          break;
+        case "PieGraph":
+          elements = buildPieGraph(config, componentScope);
+          break;
+        case "HorizontalBarGraph":
+        case "HorizontalStackBarGraph":
+          elements = buildHorizontalBarGraph(config, componentScope);
+          break;
+        default:
+          elements = buildStackbarGraph(config, componentScope);
+          break;
+      }
+      break;
+    case "ProgressBar":
+      elements = buildProgressBar(config, componentScope);
+      break;
+    case "SpeedoMeter":
+      elements = buildSpeedoMeter(config, componentScope);
+      break;
+    case "ProgressBarCard":
+      elements = buildProgressBarCard(config, componentScope);
+      break;
+    case "RankCard":
+      elements = buildRankCard(config, componentScope);
+      break;
+    case "Rank":
+      elements = buildRollAndDice(config, componentScope);
+      break;
+    case "Slider":
+      elements = buildSlider(config, componentScope);
+      break;
+    case "Timer":
+      elements = buildTimer(config, componentScope);
+      break;
+    case "ColumnGroup":
+      elements = {
+        accessorKey: config.name,
+        header: config.label || config.name,
+        elements: [],
+      }
+      break;
+    case "MultipleSelect":
+      elements = buildMultiSelect(config, componentScope);
+      break;
+    case "LeaderBoard":
+      elements = buildLeaderBoard(config);
+      break;
+    case "Thought":
+      elements = buildThoughtOfTheDay(config, componentScope);
+      break;
+      break;
+    default:
+      schema = {
+        type: "object",
+        properties: {},
+        required: []
+      };
+      elements = buildBasicUiSchema(config)
+  }
+
+  if (config?.elements) {
+    if (config?.type === "LeaderBoard") {
+      return elements;
+    }
+    else if (config.type == "ColumnGroup") {
+      const sizeMap = {}
+      if (config.sizeHolder) {
+        config.sizeHolder.map((e, i) => {
+          sizeMap[e.keyName] = e.value
+        });
+      }
+      elements.elements = config.elements.map((cellElem, elemInd) => {
+        return {
+          accessorKey: cellElem.name,
+          header: cellElem.label || cellElem.name,
+          size: sizeMap[cellElem.name] || 180,
+          type: cellElem.columnFormat,
+          elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store)) : []
+        }
+      })
+    } else if (config.type == "Table") {
+      const sizeMap = {}
+
+      if (config.sizeHolder) {
+        config.sizeHolder.map((e, i) => {
+          sizeMap[e.keyName] = e.value
+        });
+      }
+      const tableHeaderElements = [];
+      const tableActionElement = [];
+      const rowElements = []
+      config.elements.filter((cellElem, elemInd) => {
+        const commonProperties = {
+          accessorKey: cellElem.name,
+          type: cellElem.columnFormat,
+          header: cellElem.label || cellElem.name,
+          size: sizeMap[cellElem.name] || 180,
+          enableColumnFilter: cellElem.enableFilter === "No" ? false : true,
+          columnFilterModeOptions: cellElem.filteringOptions,
+          enableSorting: cellElem.enableSorting === "No" ? false : true,
+          columnKey: cellElem.columnKey
+        }
+        if (cellElem.type) {
+          if (cellElem.elementType == "action") {
+            const actionElem = buildUiSchema(cellElem, store);
+            tableActionElement.push(actionElem);
+            return false;
+          }
+          if (cellElem.elementType == "tableHeader") {
+            const headerElem = buildUiSchema(cellElem, store);
+            tableHeaderElements.push({widget:headerElem});
+            return false;
+          }
+          const tableElem = {
+            widget: cellElem.type != "ColumnGroup" ? buildUiSchema(cellElem, store) : undefined,
+            elements: cellElem.type == "ColumnGroup" ? cellElem.elements.map((childCellElem) => buildUiSchema(childCellElem, store)) : [],
+            ...commonProperties
+
+          }
+          rowElements.push(tableElem)
+        } else {
+          rowElements.push({ ...commonProperties })
+        }
+
+      })
+      elements.elements = rowElements;
+      elements.config.action = tableActionElement;
+      elements.config.main.headerIcons.elements = tableHeaderElements;
+    }
+
+    else if (config.type == "Array") {
+      elements.options.detail.elements = config.elements.map((e: any, elemInd: number) => {
+        return buildUiSchema(e, store)
+      });
+    }
+    else {
+      elements.elements = config.elements.map((e: any, elemInd: number) => {
+        return buildUiSchema(e, store)
+      });
+    }
+  }
+  return elements;
+}
+
+
+export default buildUiSchema;

package/src/impaktapps-ui-builder/builder/build/buildUplaodFile.ts

@@ -0,0 +1,21 @@
+import { uploadFile } from "./uischema/file";
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+export const buildUploadFile = (config, componentScope) => {
+  const UploadFile: any = _.cloneDeep(uploadFile);
+
+  UploadFile.scope = componentScope;
+  UploadFile.config.main.label = config.label;
+  if (config.layout) {
+    UploadFile.config.layout = createLayoutFormat(config.layout)
+  }
+  if (config.style) {
+    UploadFile.config.style = config.style;
+  }
+  if (config.required) {
+    UploadFile.config.main.required = true;
+  }
+  UploadFile.config.main.errorMessage = config.errorMessage;
+  return UploadFile;
+}

package/src/impaktapps-ui-builder/builder/build/buildWrapperSection.ts

@@ -0,0 +1,21 @@
+import { createLayoutFormat } from "./buildConfig";
+import WrapperSection from "./uischema/wrapperSection";
+import _ from "lodash";
+
+export const buildWrapperSection = (config, componentScope) => {
+  const wrapper: any = _.cloneDeep(WrapperSection);
+  wrapper.scope = componentScope;
+  wrapper.config.main.label = config.label;
+  wrapper.config.main.divider = config.divider === "YES" ? true : false;
+  wrapper.config.main.isAccordion = config.isAccordion === "No" ? false : true;
+  if(config.defaultStyle){
+  wrapper.config.defaultStyle = config.defaultStyle ==="YES" ? true : false;
+  }
+  if (config.style) {
+    wrapper.config.style = JSON.parse(config.style)
+  }
+  if (config.layout) {
+    wrapper.config.layout = createLayoutFormat(config.layout)
+  }
+  return wrapper;
+}

package/src/impaktapps-ui-builder/builder/build/schema/arraySchemaBuilder.ts

@@ -0,0 +1,18 @@
+import _ from "lodash";
+
+const arraySchema = 
+// {
+//     "comments":
+     {
+        "type": "array",
+        "items": {
+            "type": "object",
+            "properties": {}
+        }
+    }
+// }
+
+export const buildArraySchema = (config:any) => {
+  const array = _.cloneDeep(arraySchema);
+   return array;
+}

package/src/impaktapps-ui-builder/builder/build/uischema/apiSection.ts

@@ -0,0 +1,210 @@
+import { getTextArea } from "./buildPropertiesSection";
+
+export const APISection = {
+  type: "HorizontalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/method",
+
+      options: {
+        widget: "SelectInputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Method",
+          type: "text",
+        },
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/path",
+
+      options: {
+        widget: "InputField",
+      },
+      config: {
+        layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+        main: {
+          label: "Path",
+          type: "text",
+          multiple: false,
+          options: [],
+        },
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/emptyBox",
+
+      options: {
+        widget: "EmptyBox",
+      },
+      config: {
+        layout: { xs: 0, sm: 0, md: 4, lg: 6 },
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/headers",
+      options: {
+        widget: "Array",
+      },
+      config: {
+        layout: 12,
+        main: {
+          label: "Headers",
+          childElementLabel: "Headers",
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px",
+          },
+          detailsStyle: {
+            marginLeft: "24px",
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/key",
+          options: {
+            widget: "InputField",
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Key",
+            },
+          },
+        },
+        {
+          type: "Control",
+          scope: "#/properties/value",
+
+          options: {
+            widget: "InputField",
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Value",
+            },
+          },
+        },
+        {
+          type: "Control",
+          scope: "#/properties/emptyBox",
+    
+          options: {
+            widget: "EmptyBox",
+          },
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+          },
+        },
+      ],
+    },
+    {
+      type: "Control",
+      scope: "#/properties/body",
+      options: {
+        widget: "Array",
+      },
+      config: {
+        layout: 12,
+        main: {
+          label: "Body",
+          childElementLabel: "Body",
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px",
+          },
+          detailsStyle: {
+            marginLeft: "24px",
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/key",
+          options: {
+            widget: "InputField",
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Key",
+            },
+          },
+        },
+        {
+          type: "Control",
+          scope: "#/properties/value",
+
+          options: {
+            widget: "InputField",
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Value",
+            },
+          },
+        },
+        {
+          type: "Control",
+          scope: "#/properties/emptyBox",
+    
+          options: {
+            widget: "EmptyBox",
+          },
+          config: {
+            layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+          },
+        },
+      ],
+    },
+    getTextArea("apiBody", "Transformer", true,12),
+  ],
+};
+
+export const APISectionSchema = {
+  headers: {
+    type: "array",
+    items: {
+      type: "object",
+      properties: {
+        key: {
+          type: "string",
+        },
+        value: {
+          type: "string",
+        },
+      },
+    },
+  },
+  body: {
+    type: "array",
+    items: {
+      type: "object",
+      properties: {
+        key: {
+          type: "string",
+        },
+        value: {
+          type: "string",
+        },
+      },
+    },
+  },
+};

package/src/impaktapps-ui-builder/builder/build/uischema/array.ts

@@ -0,0 +1,14 @@
+export const ArrayLayout = {
+    "type": "Control",
+        "scope": "#/properties/adjustments",
+            "config": {
+        "layout": 11.5
+    },
+    "options": {
+        "name": "adjustments",
+            "detail": {
+            "type": "HorizontalLayout",
+                "elements": [{}]
+        }
+    }
+}

package/src/impaktapps-ui-builder/builder/build/uischema/box.ts

@@ -0,0 +1,16 @@
+
+   const Box =  {
+    type: "Control",
+    scope: "#/properties/emptyBox",
+    options: {
+      widget: "Box",
+    },
+   
+    config: { layout: 12,
+      main: {},
+      style:{
+        // fontWeight:300
+      }
+    },
+  };
+  export default Box;