impaktapps-ui-builder 0.0.1

package/src/impaktapps-ui-builder/componentsBasicUiSchema/leaderBoard.ts

@@ -0,0 +1,392 @@
+export default {
+    type: "WrapperLayout",
+    config: {
+        main: {
+            rowSpacing: 3,
+            header: true,
+            label: "LeaderBoard",
+          divider: true,
+        },
+        wrapperStyle: {
+            position: "relative",
+            width: "100%",
+            height: 1200
+        }
+    },
+    elements: [
+        {
+            type: "Control",
+            scope: "#/properties/leaderBoard/properties/firstImage",
+            config: {
+                main: {
+                    url: "https://my.alfred.edu/zoom/_images/foster-lake.jpg",
+                },
+                style: {
+                    objectFit: "cover",
+                    position: "absolute",
+                    top: "60px",
+                    left: 'calc(50% - 85px)',
+                    width: "180px",
+                    border: "5px solid #5065C7",
+                    height: "180px",
+                    borderRadius: "50%"
+
+                },
+                layout: 6,
+            },
+            options: {
+                widget: "Box",
+            },
+        },
+
+        {
+            type: "Control",
+            scope: "#/properties/leaderBoard/properties/secondImage",
+            config: {
+                main: {
+                    url: "https://my.alfred.edu/zoom/_images/foster-lake.jpg",
+                },
+                style: {
+                    objectFit: "cover",
+                    position: "absolute",
+                    top: "130px",
+                    left: 'calc(25% - 90px)',
+                    width: "180px",
+                    border: "5px solid #5065C7",
+                    height: "180px",
+                    borderRadius: "50%"
+
+                },
+                layout: 6,
+            },
+            options: {
+                widget: "Box",
+            },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/leaderBoard/properties/thirdImage",
+            config: {
+                main: {
+                    url: "https://my.alfred.edu/zoom/_images/foster-lake.jpg",
+                },
+                style: {
+                    objectFit: "cover",
+                    position: "absolute",
+                    top: "130px",
+                    left: 'calc(75% - 85px)',
+                    width: "170px",
+                    border: "5px solid #5065C7",
+                    height: "180px",
+                    borderRadius: "50%"
+
+                },
+                layout: 6,
+            },
+            options: {
+                widget: "Box",
+            },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/leaderBoard/properties/firstName",
+            config: {
+                main: {
+                    heading: "Satendra Raghav",
+                },
+                style: {
+                    objectFit: "cover",
+                    position: "absolute",
+                    top: "250px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    color: "black",
+                    left: 'calc(50% - 90px)',
+                    width: "180px",
+                    fontWeight: "bold",
+                    borderRadius: "50%"
+                },
+                layout: 6,
+            },
+            options: {
+                widget: "Box",
+            },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/leaderBoard/properties/secondName",
+            config: {
+                main: {
+                    heading: "Satendra Raghav",
+                },
+                style: {
+                    objectFit: "cover",
+                    position: "absolute",
+                    top: "320px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    color: "black",
+                    left: 'calc(25% - 90px)',
+                    width: "180px",
+                    fontWeight: "bold",
+                    borderRadius: "50%"
+                },
+                layout: 6,
+            },
+            options: {
+                widget: "Box",
+            },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/leaderBoard/properties/thirdName",
+            config: {
+                main: {
+                    heading: "Satendra Raghav",
+                },
+                style: {
+                    objectFit: "cover",
+                    position: "absolute",
+                    top: "320px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    color: "black",
+                    left: 'calc(75% - 90px)',
+                    width: "180px",
+                    fontWeight: "bold",
+                    borderRadius: "50%"
+                },
+                layout: 6,
+            },
+            options: {
+                widget: "Box",
+            },
+        },
+
+
+
+
+        {
+            type: "Control",
+            scope: "#/properties/econd",
+            config: {
+                main: {
+                    heading: "2",
+                },
+                style: {
+                    objectFit: "cover",
+                    position: "absolute",
+                    top: "280px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    textShadow: "2px 2px 5px #5065C7",
+                    background: "green",
+                    color: "white",
+                    left: 'calc(25% - 16px)',
+                    '@keyframes rotateAnimation': {
+                        from: {
+                            transform: 'rotate(0deg)',
+                        },
+                        to: {
+                            transform: 'rotate(360deg)',
+                        },
+                    },
+                    animation: 'rotateAnimation 4s infinite',
+                    width: "40px",
+                    border: "5px solid #5065C7",
+                    height: "40px",
+                    borderRadius: "50%"
+
+                },
+                layout: 6,
+            },
+            options: {
+                widget: "Box",
+            },
+        },
+
+        {
+            type: "Control",
+            scope: "#/properties/first",
+            config: {
+                main: {
+                    heading: "1",
+                },
+                style: {
+                    objectFit: "cover",
+                    position: "absolute",
+                    top: "210px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    textShadow: "2px 2px 5px #5065C7",
+                    background: "green",
+                    color: "white",
+                    left: 'calc(50% - 16px)',
+                    '@keyframes rotateAnimation': {
+                        from: {
+                            transform: 'rotate(0deg)',
+                        },
+                        to: {
+                            transform: 'rotate(360deg)',
+                        },
+                    },
+                    animation: 'rotateAnimation 4s infinite',
+                    width: "40px",
+                    border: "5px solid #5065C7",
+                    height: "40px",
+                    borderRadius: "50%"
+
+                },
+                layout: 6,
+            },
+            options: {
+                widget: "Box",
+            },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/third",
+            config: {
+                main: {
+                    heading: "3",
+                },
+                style: {
+                    objectFit: "cover",
+                    position: "absolute",
+                    top: "280px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    textShadow: "2px 2px 5px #5065C7",
+                    background: "green",
+                    color: "white",
+                    left: 'calc(75% - 20px)',
+                    '@keyframes rotateAnimation': {
+                        from: {
+                            transform: 'rotate(0deg)',
+                        },
+                        to: {
+                            transform: 'rotate(360deg)',
+                        },
+                    },
+                    animation: 'rotateAnimation 4s infinite',
+                    width: "40px",
+                    border: "5px solid #5065C7",
+                    height: "40px",
+                    borderRadius: "50%"
+
+                },
+                layout: 6,
+            },
+            options: {
+                widget: "Box",
+            },
+        },
+        {
+            type: "Control",
+            scope: "#/properties/leaderBoard/properties/table",
+            options: {
+                widget: "Table",
+
+            },
+            config: {
+                style: {
+                    tableHeadstyle:{fontWeight:900,
+                        background:"rgb(179, 198, 255)"},
+                    position: "absolute",
+                    top: "390px",
+                    border: "2px solid rgb(179, 198, 255)",
+                    // #5065C7",
+                    width: "95%",
+                    left: "2.5%"
+
+                },
+                main: {
+                    disableAction: true,
+                    disableSelection: true,
+                    columns: {
+                        dataColumns: [
+                            {
+                                accessorKey: "a",
+                                widgetWithData: true,
+                                size: 40,
+                                header: " ",
+                                widget: {
+                                    type: "Control",
+                                    scope: "#/properties/id",
+                                    options: {
+                                        widget: "Box",
+                                    },
+                                    config: {
+                                        style: {
+                                            // tableHeadstyle:{fontWeight:900,background:"green"},
+                                            objectFit: "cover",
+
+
+                                            width: "40px",
+                                            height: "40px",
+                                            borderRadius: "50%"
+
+                                        },
+                                        main: {
+                                            url: "https://www.svgrepo.com/show/484058/person.svg"
+                                        },
+                                    },
+                                },
+                            },
+                            {
+                                accessorKey: "name",
+
+                                header: "Name",
+                            },
+                            {
+                                accessorKey: "id",
+
+                                header: "Policy",
+                            },
+                            {
+                                accessorKey: "modifiedOn",
+
+                                header: "Incentice",
+                            },
+                            {
+                                accessorKey: "active",
+
+                                header: "active",
+                            },
+                            {
+                                accessorKey: "button",
+                                size: 80,
+                                header: "Compare",
+                                widget: {
+                                    type: "Control",
+                                    scope: "#/properties/id",
+                                    options: {
+                                        widget: "Button",
+                                    },
+                                    config: {
+                                        style: {
+                                            fontSize: "12px"
+
+                                        },
+                                        main: {
+
+                                            name: "Compare"
+                                        },
+                                    },
+                                },
+                            }
+                        ]
+                    }
+                },
+            },
+
+        }
+    ],
+}
+

package/src/impaktapps-ui-builder/componentsBasicUiSchema/multiSelect.ts

@@ -0,0 +1,18 @@
+export default {
+  type: "Control",
+  scope: "#/properties/path",
+
+  options: {
+    widget: "MultipleSelect",
+  },
+  config: {
+    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+    main: {
+      label: "",
+      type: "text",
+      multiple: true,
+      variant: "standard",
+      options: [],
+    },
+  },
+};

package/src/impaktapps-ui-builder/componentsBasicUiSchema/progressBar.ts

@@ -0,0 +1,16 @@
+export default {
+  type: "Control",
+  scope: "#/properties/pbc_progress",
+  options: {
+    widget: "ProgressBar",
+  },
+
+  config: {
+    layout: 6,
+    main: {
+      developOnlyProgresBar: true,
+      bottomLabel_3: "Remaining",
+      heading: "PBC Details",
+    },
+  },
+};

package/src/impaktapps-ui-builder/componentsBasicUiSchema/progressBarCard.ts

@@ -0,0 +1,27 @@
+export default {
+  type: "WrapperLayout",
+  config: {
+    layout: {
+      xs: 11,
+      sm: 11,
+      md: 5.5,
+      lg: 5.5,
+    },
+    main: {},
+    defaultStyle: true,
+  },
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/pbc_progress",
+      options: {
+        widget: "ProgressBar",
+      },
+
+      config: {
+        layout: 10,
+        main: {},
+      },
+    },
+  ],
+};

package/src/impaktapps-ui-builder/componentsBasicUiSchema/rankCard.ts

@@ -0,0 +1,140 @@
+
+
+export default {
+  type: "WrapperLayout",
+  config: {
+    wrapperStyle: {
+      width: 295,
+      height: 310,
+      position: "relative",
+      background: "white",
+      borderRadius: "12px",
+      boxShadow: "2px 2px 5px grey",
+      margin:"none",
+     
+    },
+    main: {},
+    layout: 4,
+  },
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/image",
+      config: {
+        main: {
+          url: "",
+        },
+        style: {
+          position:"absolute",
+          left:"calc(50% - 90px)",
+          top:"10px",
+          border:"1px solid blue",
+          objectFit: "cover",
+          width:"180px",
+          boxShadow:"1px 1px  2px blue",
+          // paddingTop: "15px",
+          height:"180px",
+          borderRadius:"50%",
+          marginLeft:"auto",
+          marginRight:"auto"
+        },
+        layout: 6,
+      },
+      options: {
+        widget: "Box",
+      },
+    },
+
+    {
+      type: "Control",
+      scope: "#/properties/name",
+      config: {
+        style: {
+          color: "white",
+          // backgroundColor: "rgb(57, 73, 171)",
+          position:"absolute",
+          width:"95%",
+          // left:"calc(50% - 90px)",
+          top:"200px",
+          padding: "0px 12px",
+          display: "inline-block",
+          borderRadius: "8px",
+          '@keyframes RankCardImage': {
+           from: {
+              backgroundColor:"green",
+            },
+            to: {
+              backgroundColor:"blue",
+            },
+            // "75%": {
+            //   backgroundColor:"orange",
+            // },
+            // "100%": {
+            //   backgroundColor:"rgb(57, 73, 171)",
+            // },
+        },
+        animation: 'RankCardImage 4s infinite alternate',
+        },
+        main: {
+          heading: "Prakhar",
+        },
+      },
+      options: {
+        widget: "Box",
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/description",
+      config: {
+        style: {
+          maxHeight: 120,
+          fontSize: "15px",
+          fontWeight: "400",
+          width:"95%",
+          //   padding: "4px 4px"
+          position:"absolute",
+          // left:"calc(50% - 90px)",
+          top:"240px",
+          color: "gray",
+          overflow: "auto",
+          wordWrap: "break-word",
+          "&::-webkit-scrollbar": { display: "none" },
+        },
+        main: {
+          heading: "sadnfikudfojbsvdjnblokvnjsdnvlkjm nlskjdnv",
+        },
+      },
+      options: {
+        widget: "Box",
+      },
+    },
+    {
+      type: "Control",
+      scope: "#/properties/rank",
+      config: {
+        style: {
+          position: "absolute",
+          top: "0px",
+          right: "0px",
+          width: "15%",
+          animation: 'RankCardImage 4s infinite alternate',
+          backgroundColor: "rgb(57, 73, 171)",
+          color: "white",
+          boxShadow:"2px 2px 5px gray",
+          padding: "4px 8px",
+          borderRadius: "4px 12px 4px 25px",
+          fontWeight: "bold",
+        },
+        main: {
+          heading: "#1",
+        },
+      },
+      options: {
+        widget: "Box",
+      },
+    },
+  ],
+};
+
+

package/src/impaktapps-ui-builder/componentsBasicUiSchema/refresh.ts

@@ -0,0 +1,40 @@
+import { getTextArea } from "./buildPropertiesSection";
+
+export const refreshSectionUiSchema = {
+  type: "HorizontalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/refreshElements",
+      layout: 11.5,
+      options: {
+        detail: {
+          type: "HorizontalLayout",
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/value",
+
+              options: {
+                widget: "InputField",
+              },
+              config: {
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5,
+                },
+                main: {
+                  label: "Value",
+                },
+              },
+            },
+          ],
+        },
+      },
+    }
+  ],
+};
+
+