impaktapps-ui-builder 1.0.0 → 1.0.1

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

@@ -0,0 +1,623 @@
+export const componentBasicUiSchema: any = (theme) => {
+  const uiSchema = {
+  type: "HorizontalLayout",
+  heading: "Page-Component",
+  elements: [
+    {
+      type: "TabLayout",
+      config: {
+        main: {
+          tabLabels: ["Core"],
+          id:`component`
+        },
+        style: {
+          TabPanelStyle: {
+            padding: 0,
+          }
+        },
+        TabsStyle: {
+          marginBottom: "3px",
+          paddingBottom: "4px",
+          boxShadow: "0px 3px 4px #afafaf80",
+          "& .MuiTabs-indicator": {
+            bottom: "6px",
+          }
+        },
+      },
+
+      elements: [
+        {
+          type: "WrapperLayout",
+          config: {
+            main: {
+              label: " ",
+              gap: "8px"
+            }
+          },
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/type",
+              options: {
+                widget: "SelectInputField",
+              },
+              config: {
+                layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+                main: {
+                  label: "Type",
+                },
+              },
+            },
+            {
+              type: "Control",
+              scope: "#/properties/proc",
+              config: {
+                layout: { xs: 6, sm: 0, md: 0, lg: 0 },
+              },
+              options: {
+                widget: "EmptyBox",
+              },
+            },
+            {
+              type: "Control",
+              scope: "#/properties/name",
+
+              options: {
+                widget: "InputField",
+              },
+              config: {
+                layout: { xs: 12, sm: 6, md: 4, lg: 3 },
+                main: {
+                  label: "Component ID",
+                  required: true,
+                },
+              },
+            },
+            {
+              type: "Control",
+              scope: "#/properties/label",
+
+              options: {
+                widget: "InputField",
+              },
+              config: {
+                layout: { xs: 6, sm: 6, md: 4, lg: 3 },
+                main: {
+                  label: "Label",
+                  options: [],
+                  color: "secondary",
+                  required: true,
+                },
+              },
+            },
+            {
+              type: "Control",
+              scope: "#/properties/proc",
+              config: {
+                layout: { xs: 6, sm: 6, md: 0, lg: 3 },
+              },
+              options: {
+                widget: "EmptyBox",
+              },
+            },
+            // {
+            //   type: "Control",
+            //   scope: "#/properties/layout",
+            //   options: {
+            //     widget: "Array",
+            //   },
+            //   config: {
+            //     layout: 12,
+            //     main: {
+            //       label: "Layout",
+            //       childElementLabel: "Layout",
+            //     },
+            //     style: {
+            //       marginLeft: "-24px",
+            //       marginBottom: "24px !important",
+            //       labelStyle: {
+            //         marginLeft: "24px",
+            //       },
+            //       detailsStyle: {
+            //         marginLeft: "24px",
+            //       }
+            //     }
+            //   },
+            //   elements: [
+            //     {
+            //       type: "Control",
+            //       scope: "#/properties/key",
+            //       options: {
+            //         widget: "SelectInputField",
+            //       },
+            //       config: {
+            //         layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            //         main: {
+            //           label: "Screen Size",
+                    
+            //         },
+            //       },
+            //     },
+            //     {
+            //       type: "Control",
+            //       scope: "#/properties/value",
+
+            //       options: {
+            //         widget: "InputField",
+            //       },
+            //       config: {
+            //         layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+            //         main: {
+            //           label: "Value",
+            //           type:"number",
+            //           helperText:'Number should be in range of 0 to 12',
+            //           errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
+                     
+            //         },
+            //       },
+            //     },
+            //     {
+            //       type: "Control",
+            //       scope: "#/properties/proc",
+            //       config: {
+            //         layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+            //       },
+            //       options: {
+            //         widget: "EmptyBox",
+            //       },
+            //     },
+            //   ],
+            // },
+            {
+                type: "Control",
+                scope: "#/properties/layout",
+                layout: 12,
+                options: {
+                  detail: {
+                    type: "HorizontalLayout",
+                    elements: [
+                      {
+                        type: "Control",
+                        scope: "#/properties/key",
+                        options: {
+                          widget: "SelectInputField",
+                        },
+                        config: {
+                          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                          main: {
+                            label: "Screen Size",
+
+                          },
+                        },
+                      },
+                      {
+                        type: "Control",
+                        scope: "#/properties/value",
+
+                        options: {
+                          widget: "InputField",
+                        },
+                        config: {
+                          layout: { xs: 6, sm: 6, md: 4, lg: 4 },
+                          main: {
+                            label: "Value",
+                            type: "number",
+                            // freeSolo:true,
+                            helperText: 'Number should be in range of 0 to 12',
+                            errorMessage: "Number Can't be greater than 12 and can't be less than 0.",
+
+                          },
+                        },
+                      },
+                      {
+                        type: "Control",
+                        scope: "#/properties/proc",
+                        config: {
+                          layout: { xs: 0, sm: 0, md: 4, lg: 4 },
+                        },
+                        options: {
+                          widget: "EmptyBox",
+                        },
+                      },
+                    ],
+                  },
+                },
+              },
+          ],
+        },
+      ],
+    },
+    {
+      type: "WrapperLayout",
+      config: {
+        main: {
+          gap: "8px"
+        }
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/btn",
+          options: {
+            widget: "Button",
+          },
+
+          config: {
+            layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
+            main: {
+              name: "Ok",
+              variant: "contained",
+              type: "text",
+              onClick: "okHandler",
+              size: "medium",
+            },
+          },
+        },
+        {
+          type: "Control",
+          scope: "#/properties/btnSubmit",
+          options: {
+            widget: "Button",
+          },
+
+          config: {
+            layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
+            main: {
+              name: "Save & Exit",
+              variant: "contained",
+              type: "text",
+              onClick: "saveHandler",
+              size: "medium",
+            },
+          },
+        },
+        {
+          type: "Control",
+          scope: "#/properties/EmptyBox",
+          config: {
+            layout: { xs: 4, sm:7, md: 8, lg: 9 },
+          },
+          options: {
+            widget: "EmptyBox",
+          },
+        },
+      ],
+    },
+    {
+      type: "Control",
+      scope: "#/properties/popUpComponentSection",
+      options: {
+        widget: "PopUp"
+      },
+      config: {
+        layout: {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12,
+        },
+        main: {
+          title: "WARNING!"
+        },
+        style: {
+        }
+      },
+      elements:
+        [
+          {
+            type: "Control",
+            scope: "#/properties/popupText",
+            options: {
+              widget: "Box",
+            },
+            config: {
+              layout: 11,
+              main: {
+                heading: "Are you sure you want to delete this Component ?",
+              },
+              style:{
+                "&.MuiTypography-root": {
+                  padding: "0px 20px",
+                  textAlign: "center",
+                  lineHeight: "1.2",
+                  fontWeight: "normal",
+                  fontSize: "18px",
+                  marginBottom: theme.spacing(5)
+                }
+              }
+            },
+          },
+          {
+            type: "WrapperLayout",
+            config: {
+              layout: 11,
+              main: {},
+
+            },
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/CancelDeleteCompButton",
+                options: {
+                  widget: "Button",
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "No",
+                    variant: "contained",
+                    type: "text",
+                    onClick: "deletePopUpComponent",
+                    size: "large",
+                  },
+                  style: {
+                    position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
+                    bottom: 0,
+                    left: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.primary.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    borderRight: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.primary.contrastText,
+                      backgroundColor: theme.palette.primary.main,
+                      boxShadow: "none"
+                    }
+                  }
+                },
+              },
+              {
+                type: "Control",
+                scope: "#/properties/ConfirmDeleteCompButton",
+                options: {
+                  widget: "Button",
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "Yes",
+                    variant: "contained",
+                    color: "error",
+                    type: "text",
+                    onClick: "deleteComponents",
+                    size: "large",
+                  },
+                  style: {
+                    position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
+                    bottom: 0,
+                    right: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.error.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.error.contrastText,
+                      backgroundColor: theme.palette.error.main,
+                      boxShadow: "none"
+                    }
+                  }
+                },
+              },
+            ]
+          },
+        ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/popUpEventSection",
+      options: {
+        widget: "PopUp"
+      },
+      config: {
+        layout: {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12,
+        },
+        main: {
+          title: "WARNING!"
+        },
+        style: {
+        }
+      },
+      elements:
+        [
+          {
+            type: "Control",
+            scope: "#/properties/popupText1",
+            options: {
+              widget: "Box",
+            },
+            config: {
+              layout: 11,
+              main: {
+                heading: "Are you sure you want to delete this Event ?",
+              },
+              style:{
+                fontSize: "20px",
+                "&.MuiTypography-root": {
+                  padding: "0px 20px",
+                  textAlign: "center",
+                  lineHeight: "1.2",
+                  fontWeight: "normal",
+                  fontSize: "18px",
+                  marginBottom: theme.spacing(5)
+                }
+              }
+            },
+          },
+          {
+            type: "WrapperLayout",
+            config: {
+              layout: 11,
+              main: {},
+
+            },
+            elements: [
+              {
+                type: "Control",
+                scope: "#/properties/CancelDeleteEventButton",
+                options: {
+                  widget: "Button",
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "No",
+                    variant: "contained",
+                    type: "text",
+                    onClick: "deletePopUpEvent",
+                    size: "large",
+                  },
+                  style: {
+                    position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
+                    bottom: 0,
+                    left: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.primary.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    borderRight: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.primary.contrastText,
+                      backgroundColor: theme.palette.primary.main,
+                      boxShadow: "none"
+                    }
+                  }
+                },
+              },
+              {
+                type: "Control",
+                scope: "#/properties/ConfirmDeleteEventButton",
+                options: {
+                  widget: "Button",
+                },
+                config: {
+                  layout: 6,
+                  main: {
+                    name: "Yes",
+                    variant: "contained",
+                    color: "error",
+                    type: "text",
+                    onClick: "deleteEvent",
+                    size: "large",
+                  },
+                  style: {
+                    position: "absolute",
+                    padding: "8px 0px",
+                    fontSize: "16px",
+                    bottom: 0,
+                    right: 0,
+                    width: "50%",
+                    borderRadius: 0,
+                    boxShadow: 0,
+                    backgroundColor: "transparent",
+                    color: theme.palette.error.main,
+                    borderTop: `0.5px solid ${theme.palette.grey[600]}`,
+                    "&:hover": {
+                      color: theme.palette.error.contrastText,
+                      backgroundColor: theme.palette.error.main,
+                      boxShadow: "none"
+                    }
+                  }
+                },
+              },
+            ]
+          },
+        ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/pageName",
+     
+      options: {
+        widget: "Breadcrumb",
+      },
+      config: {
+        layout: 12,
+        main: {
+          onNavigatePopupNo: "onNavigatePopupNo",
+          onNavigatePopupYes: "onNavigatePopupYes"
+        },
+        style: {
+          paddingLeft: theme.spacing(3),
+          color:theme.palette.grey[600],
+          fontSize:"10px",
+          position: "fixed",
+          bottom: "24px",
+          borderBottom: `1px solid ${theme.palette.common.black}29`,
+          borderTop: `1px solid ${theme.palette.common.black}29`,
+          backgroundColor: theme.palette.background.default,
+        },
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/notify",
+      options: {
+        widget: "Notify",
+      },
+      layout: 6,
+    },
+    {
+      type: "HorizontalLayout",
+      config: {
+        main: {
+          direction: "row",
+        },
+        style: {
+          flexDirection: "row",
+          position: "absolute",
+          bottom: 10,
+          height: "fit-content",
+          overflow: "hidden",
+          zIndex: 1000,
+          width: "inherit",
+        },
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/FooterText",
+          options: {
+            widget: "Box",
+          },
+          config: {
+            main: {
+              heading: "Copywriter@ACT21.IO",
+            },
+            style: {
+              color: theme?.palette?.text.disabled || "#AFAFAF",
+              fontSize: "11px",
+              textAlign: "center",
+              lineHeight: 0,
+              width: "fit-content",
+              left: "50%",
+              position: "relative",
+              margin: "revert",
+              flexGrow: 1,
+              height: 0,
+              transform: "translate(-50%, 0%)",
+            },
+          },
+        },
+      ],
+    }
+  ],
+};
+return uiSchema
+}

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

@@ -0,0 +1,49 @@
+export const PageMasterSchema  = {
+    type: "object",
+    properties: {
+      name:{
+     type:"string",
+     minLength: 6,
+    //  pattern: '^page_\\w+$'
+      },
+      label:{
+        type:"string",
+      },
+      layout: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            layout_key: {
+              type: "string",
+            },
+            layout_value: {
+              type: "string",
+            },
+          },
+        },
+      },
+      template: {
+        oneOf: [
+          { const: "Template-1", title: "template1" },
+          { const: "Template-2", title: "template2" },
+          { const: "Template-3", title: "template3" }
+        ]
+      },
+    sectionLabels: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            label: {
+              type: "string",
+            }
+          },
+        },
+      },
+    RemoveItemButton:{
+      disabled: true
+    }
+},
+required:["template","name", "label"]
+}