impaktapps-ui-builder 1.0.0 → 1.0.1-alpha.2

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

@@ -0,0 +1,128 @@
+export const ValidationSection = {
+  type: "WrapperLayout",
+  config: {
+    main: {
+      label: " ",
+      gap: "8px"
+    }
+  },
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/validation",
+      layout: 11.5,
+      options: {
+        "elementLabelProp": "validationType",
+        detail: {
+          type: "HorizontalLayout",
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/validationType",
+
+              options: {
+                widget: "SelectInputField",
+              },
+              config: {
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                main: {
+                  label: "Validation Type",
+                },
+              },
+            },
+            {
+              type: "Control",
+              scope: "#/properties/validationValue",
+
+              options: {
+                widget: "InputField",
+              },
+              config: {
+                layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                main: {
+                  label: "Validation Value",
+                },
+              },
+            },
+            {
+              type: "Control",
+              scope: "#/properties/emptyBox",
+              options: {
+                widget: "EmptyBox"
+              },
+              config: {
+                layout: {xs: 0, sm: 0, md: 4}
+              }
+            }
+          ],
+        },
+      },
+
+    },
+
+  //  {
+  //   type: "Control",
+  //   scope: "#/properties/validation",
+  //   options: {
+  //     widget: "Array",
+  //   },
+  //   config: {
+  //     layout: 12,
+  //     main: {
+  //       label: "Validation",
+  //       childElementLabel: "Validation",
+  //     },
+  //     style: {
+  //       marginLeft: "-24px",
+  //       marginBottom: "24px !important",
+  //       labelStyle: {
+  //         marginLeft: "24px",
+  //       },
+  //       detailsStyle: {
+  //         marginLeft: "24px",
+  //       }
+  //     }
+  //   },
+  //   elements: [
+  //     {
+  //       type: "Control",
+  //       scope: "#/properties/validationType",
+  //       options: {
+  //         widget: "SelectInputField",
+  //       },
+  //       config: {
+  //         layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+  //         main: {
+  //           label: "Validation Type",
+  //         },
+  //       },
+  //     },
+  //     {
+  //       type: "Control",
+  //       scope: "#/properties/validationValue",
+
+  //       options: {
+  //         widget: "InputField",
+  //       },
+  //       config: {
+  //         layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+  //         main: {
+  //           label: "Validation Value",
+  //         },
+  //       },
+  //     },
+  //     {
+  //       type: "Control",
+  //       scope: "#/properties/emptyBox",
+  //       options: {
+  //         widget: "EmptyBox"
+  //       },
+  //       config: {
+  //         layout: {xs: 0, sm: 0, md: 4, lg: 4}
+  //       }
+  //     }
+  //   ],
+  // },
+
+  ]
+};

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

@@ -0,0 +1,75 @@
+export const ValueTab = {
+  type: "WrapperLayout",
+  config: {
+    main: {
+      label: " ",
+      gap: "8px"
+    }
+  },
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/value",
+      options: {
+        widget: "Array",
+      },
+      config: {
+        layout: 12,
+        main: {
+          label: "Value",
+          childElementLabel: "Value",
+        },
+        style: {
+          marginLeft: "-24px",
+          marginBottom: "24px !important",
+          labelStyle: {
+            marginLeft: "24px",
+          },
+          detailsStyle: {
+            marginLeft: "24px",
+          }
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/label",
+          options: {
+            widget: "InputField",
+          },
+          config: {
+            layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            main: {
+              label: "Label",
+            },
+          },
+        },
+        {
+          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 },
+          }
+        }
+      ],
+    }
+  ],
+};

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

@@ -0,0 +1,11 @@
+export default {
+    type: "WrapperLayout",
+    config: {
+      main: {
+        rowSpacing: 3,
+        divider: true,
+        label: "Default Label",
+      },
+      defaultStyle: true,
+    },
+    elements: []}

package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/schema.ts

@@ -0,0 +1,359 @@
+//headerIcons //action //elements
+export const ComponentSchema: any = {
+  type: "object",
+  properties: {
+    type: {
+      oneOf: [
+        { title: "Masked Aadhar Card", const: "AadharcardText" },
+        { title: "Array", const: "Array" },
+        { title: "Button", const: "Button" },
+        { title: "Data Card", const: "card" },
+        { title: "Check Box", const: "CheckBox" },
+        { title: "Container", const: "WrapperSection" },
+        { title: "Data Grid", const: "DataGrid" },
+        { title: "Date", const: "Date" },
+        { title: "Time Stamp", const: "DateTime" },
+        { title: "Download", const: "DownloadFile" },
+        { title: "Empty Box", const: "EmptyBox" },
+        { title: "File Handler", const: "FileInput" },
+        { title: "Graph", const: "Graph" },
+        { title: "Input Slider", const: "InputSlider" },
+        { title: "Label", const: "Box" },
+        { title: "Leaderboard", const: "LeaderBoard" },
+        { title: "Multi-Select Dropdown", const: "MultipleSelect" },
+        { title: "Pan Card Masked", const: "PanCardText" },
+        { title: "Pop Up", const: "PopUp" },
+        { title: "Progress Bar", const: "ProgressBar" },
+        { title: "Progress Bar Card", const: "ProgressBarCard" },
+        { title: "Dropdown", const: "Select" },
+        { title: "Slider", const: "Slider" },
+        { title: "Speedometer", const: "SpeedoMeter" },
+        { title: "Stepper Container", const: "Stepper" },
+        { title: "Radio", const: "Radio" },
+        { title: "Rank", const: "Rank" },
+        { title: "Rank Card", const: "RankCard" },
+        { title: "Runner Boy", const: "RunnerBoyProgressBar" },
+        { title: "Table", const: "Table" },
+        { title: "Tabs", const: "TabSection" },
+        { title: "Text", const: "Text" },
+        { title: "Text Area", const: "TextArea" },
+        { title: "Timer", const: "Timer" },
+        { title: "Upload", const: "UploadFile" },
+        { title: "Tree ", const: "TreeMap" },
+        { title: "Column Group", const: "ColumnGroup" },
+        { title: "Thought of the day", const: "Thought" },
+        { title: "Phone Input", const: "PhoneInput" }
+      ]
+    },
+    elementType: {
+      oneOf: [
+        { title: "Table Action Element", const: "action" },
+        { title: "Table Header Element", const: "tableHeader" },
+        { title: "Table Element", const: "element" },
+      ]
+    },
+    columnFormat: {
+      oneOf: [
+        { title: "Date Column", const: "date" },
+        { title: "DateTime Column", const: "dateTime" },
+        { title: "Amount Column", const: "amount" },
+      ]
+    },
+    orientation: {
+      oneOf: [
+        { title: "Horizontal", const: "horizontal" },
+        { title: "Vertical", const: "vertical" },
+      ]
+    },
+    method: {
+      type: "string",
+      oneOf: [
+        { title: "Get", const: "get" },
+        { title: "Post", const: "post" },
+        { title: "Delete", const: "delete" },
+        { title: "Put", const: "put" },
+      ]
+    },
+    layout: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          key: {
+            type: "string",
+            oneOf: [
+              { title: "Extra Small", const: "xs" },
+              { title: "Small", const: "sm" },
+              { title: "Medium", const: "md" },
+              { title: "Large", const: "lg" },
+            ],
+          },
+          value: {
+
+          },
+        },
+      },
+    },
+    cardLayout: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          key: {
+            type: "string",
+            oneOf: [
+              { title: "Extra Small", const: "xs" },
+              { title: "Small", const: "sm" },
+              { title: "Medium", const: "md" },
+              { title: "Large", const: "lg" },
+            ],
+          },
+          value: {
+
+          },
+        },
+      },
+    },
+    value: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          label: {
+            type: "string",
+          },
+          value: {
+            type: "string",
+          },
+        },
+      },
+    },
+    columns: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          header: {
+            type: "string",
+          },
+          accessorKey: {
+            type: "string",
+          },
+          widgetType: {
+            type: "string",
+          },
+        },
+      },
+    },
+    events: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          eventType: {
+            type: "string",
+          },
+          configType: {
+            type: "string",
+          },
+        },
+      },
+    },
+    sectionLabels: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          label: {
+            type: "string",
+          },
+
+        },
+      },
+    },
+    Table_Download_Keys_Name: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          KeyName: {
+            type: "string",
+          },
+
+        },
+      },
+    },
+    sizeHolder: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          keyName: {
+            type: "string",
+          },
+          value: {
+            type: "string"
+          }
+        },
+      },
+    },
+    enableColumnFilter: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          keyName: {
+            type: "string",
+          },
+        },
+      },
+    },
+    filteringOptions: {
+      oneOf: [
+        { const: 'fuzzy', title: 'Fuzzy' },
+        { const: 'contains', title: 'Contain' },
+        { const: 'startsWith', title: 'Starts with' },
+        { const: 'endsWith', title: 'Ends with' },
+        { const: 'equals', title: 'Equals' },
+        { const: 'notEquals', title: 'Not Equals' },
+        { const: 'between', title: 'Between' },
+        { const: 'betweenInclusive', title: 'Between inclusive' },
+        { const: 'greaterThan', title: 'Greater than' },
+        { const: 'greaterThanOrEqualTo', title: 'Greater than or equal to' },
+        { const: 'lessThan', title: 'Less than' },
+        { const: 'lessThanOrEqualTo', title: 'Less than or equal to' },
+      ]
+    },
+
+    legendLabels: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          label: {
+            type: "string",
+          },
+
+        },
+      },
+    },
+    pieArcColors: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          label: {
+            type: "string",
+          },
+
+        },
+      },
+    },
+    InputFormatingAndMasking: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          formatElement: {
+            type: "string",
+          },
+
+        },
+      },
+    },
+    validation: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          componentName: {
+            type: "string",
+
+          },
+          validationType: {
+            type: "string",
+            oneOf: [
+              { const: "required", title: "Required" },
+              { const: "minLength", title: "Minimum Length" },
+              { const: "maxLength", title: "Maximum Length" },
+              { const: "pattern", title: "Pattern" },
+            ]
+          },
+          validationValue: {
+            type: "string",
+          },
+        },
+      },
+    },
+    buttonType: {
+      type: "string",
+      oneOf: [
+        { title: "Button", const: "Button" },
+        { title: "IconButton", const: "IconButton" },
+        { title: "HybridButton", const: "ButtonWithIconAndText" },
+      ]
+    },
+    defaultStyle: {
+      type: "string",
+      oneOf: [
+        { title: "Apply Default Style", const: "true" },
+        { title: "No Style", const: "false" },
+      ]
+    },
+    graphType: {
+      type: "string",
+      oneOf: [
+        { title: "Bar Graph", const: "BarGraph" },
+        { title: "Stack Bar Graph", const: "StackBarGraph" },
+        { title: "Line Graph", const: "LineGraph" },
+        { title: "Pie Graph", const: "PieGraph" },
+        { title: "Horizontal Bar Graph", const: "HorizontalBarGraph" },
+        { title: "Stack Horizontal Bar Graph", const: "HorizontalStackBarGraph" }
+      ]
+    },
+    iconName: {
+      type: "string",
+      oneOf: [
+        { title: "Search Icon", const: "SearchIcon" },
+        { title: "Edit Icon", const: "EditIcon" },
+        { title: "Add Icon", const: "AddIcon" },
+        { title: "Send Icon", const: "SendIcon" },
+        { title: "Approve Icon", const: "ApproveIcon" },
+        { title: "RejectIcon", const: "RejectIcon" },
+        { title: "Back Icon", const: "BackIcon" },
+        { title: "Back Icon Second ", const: "BackIcon2" },
+        { title: "Pending Icon", const: "PendingIcon" },
+        { title: "View Icon", const: "ViewIcon" },
+        { title: "Notification Icon", const: "NotificationIcon" },
+        { title: "Person Icon", const: "PersonIcon" },
+        { title: "Report Icon", const: "ReportIcon" },
+        { title: "Error Icon", const: "ErrorIcon" },
+        { title: "Refresh Icon", const: "RefreshIcon" },
+        { title: "Download Icon", const: "DownloadIcon" },
+        { title: "Exception Icon", const: "ExceptionIcon" },
+      ]
+    },
+    color: {
+      type: "string",
+      oneOf: [
+        { title: "Primary", const: "primary" },
+        { title: "Secondary", const: "secondary" },
+        { title: "Error", const: "error" },
+        { title: "Success", const: "success" },
+        { title: "Info", const: "info" },
+      ]
+    },
+    pageName: {
+      path: []
+    },
+    name: {
+      type: "string",
+    },
+    label: { type: 'string' },
+    RemoveItemButton: {
+      disabled: true,
+    },
+  },
+
+  required: ["name",]
+};