impaktapps-ui-builder 1.0.0 → 1.0.1

package/TabHolder.tsx

@@ -1,758 +0,0 @@
-import { useEffect, useState } from "react";
-import { Builder, createStoreInstance } from "./lib";
-import { Provider } from "react-redux";
-import axios from "axios";
-// import { useParams } from "react-router-dom";
-import { CircularProgress, ThemeProvider } from "@mui/material";
-import theme from "./theme";
-import { ConfigProvider, enUS } from "./utils/configProvider";
-import { Global } from "@emotion/react";
-import { globalStyle } from "./style";
-import { NotificationGroup } from "./utils/Notification";
-import { ModalGroup } from "./utils/model/src";
-const data = {
-  $type: "ViewModelDescription",
-  appInfo: {},
-  "action": [
-    {
-      "actionType": "restapi",
-      "displayName": "restapi1",
-      "resourceID": "f090edd8-9040-4f27-ad80-6a402613b330",
-      "actionID": "aa9b9004-3351-458a-9052-2ee48febc2a7",
-      "content": {
-        "resourceName": "authenticate",
-        "urlParams": [],
-        "headers": [],
-        "cookies": [],
-        "authentication": "none",
-        "baseUrl": "http://52.183.132.161/walletBackend/auth/authenticate?ruleId=main_rule&groupId=com&artifactId=wallet&version=1.0.0",
-        "authContent": {},
-        "certs": {
-          "caCert": "",
-          "clientKey": "",
-          "clientCert": "",
-          "mode": "verify-full"
-        },
-        "method": "POST",
-        "bodyType": "form-data",
-        "body": [
-          {
-            "key": "message_type",
-            "type": "String",
-            "value": "Authenticate"
-          },
-          {
-            "key": "pin",
-            "type": "Number",
-            "value": "{{+InputNativeWidget2.value}}"
-          },
-          {
-            "key": "phone_number",
-            "type": "String",
-            "value": "{{phone_number.value}}"
-          }
-        ],
-        "successEvent": [
-          {
-            "actionType": "showNotification",
-            "id": "events-cf61f0f2-eb89-4dc9-9d46-82f75f36be45",
-            "eventType": "success",
-            "title": "api success",
-            "notificationType": "success"
-          }
-        ],
-        "$dynamicAttrPaths": [],
-        "failedEvent": [
-          {
-            "actionType": "showNotification",
-            "id": "events-8bd249be-f6df-41dd-be31-5db7868a0f11",
-            "eventType": "fail",
-            "title": "api failed",
-            "notificationType": "error"
-          }
-        ]
-      },
-      "isVirtualResource": false,
-      "transformer": {
-        "rawData": "",
-        "enable": false
-      },
-      "triggerMode": "manually",
-      "config": {
-        "public": false,
-        "advancedConfig": {
-          "runtime": "none",
-          "pages": [],
-          "delayWhenLoaded": "",
-          "displayLoadingPage": false,
-          "isPeriodically": false,
-          "periodInterval": ""
-        },
-        "mockConfig": {
-          "enabled": false,
-          "enableForReleasedApp": false,
-          "mockData": ""
-        }
-      }
-    }
-  ],
-  "components": {
-    "root": {
-      "version": 0,
-      "displayName": "root",
-      "parentNode": "",
-      "showName": "root",
-      "childrenNode": [
-        "page1"
-      ],
-      "namePrefix": "impakt",
-      "type": "DOT_PANEL",
-      "containerType": "EDITOR_DOT_PANEL",
-      "h": 0,
-      "w": 0,
-      "minH": 0,
-      "minW": 0,
-      "x": -1,
-      "y": -1,
-      "z": 0,
-      "props": {
-        "currentPageIndex": 0,
-        "pageSortedKey": [
-          "page1"
-        ],
-        "$dynamicAttrPaths": []
-      }
-    },
-    "page1": {
-      "version": 0,
-      "displayName": "page1",
-      "parentNode": "root",
-      "showName": "page",
-      "childrenNode": [
-        "bodySection1"
-      ],
-      "type": "PAGE_NODE",
-      "containerType": "EDITOR_PAGE_SQUARE",
-      "h": 0,
-      "w": 0,
-      "minH": 0,
-      "minW": 0,
-      "x": -1,
-      "y": -1,
-      "z": 0,
-      "props": {
-        "layout": "default",
-        "mode": "page",
-        "templateName": "layout2"
-      }
-    },
-    "bodySection1": {
-      "version": 0,
-      "displayName": "bodySection1",
-      "parentNode": "page1",
-      "showName": "bodySection",
-      "childrenNode": [
-        "bodySection1-bodySectionContainer1"
-      ],
-      "type": "SECTION_NODE",
-      "containerType": "EDITOR_LAYOUT_SQUARE",
-      "h": 0,
-      "w": 0,
-      "minH": 0,
-      "minW": 0,
-      "x": -1,
-      "y": -1,
-      "z": 0,
-      "props": {
-        "currentViewIndex": 0,
-        "defaultViewKey": "sub-page1",
-        "sectionViewConfigs": [
-          {
-            "id": "9ac3c766-3320-4f0f-a119-cd57b621127b",
-            "key": "sub-page1",
-            "path": "sub-page1",
-            "viewDisplayName": "bodySection1-bodySectionContainer1"
-          }
-        ],
-        "style": {
-          "padding": {
-            "mode": "all",
-            "size": "24"
-          }
-        },
-        "viewSortedKey": [
-          "bodySection1-bodySectionContainer1"
-        ]
-      }
-    },
-    "bodySection1-bodySectionContainer1": {
-      "h": 0,
-      "w": 0,
-      "x": -1,
-      "y": -1,
-      "z": 0,
-      "minH": 0,
-      "minW": 0,
-      "type": "CONTAINER_NODE",
-      "props": {},
-      "version": 0,
-      "showName": "bodySection1-bodySectionContainer1",
-      "parentNode": "bodySection1",
-      "displayName": "bodySection1-bodySectionContainer1",
-      "childrenNode": [
-        "NativeContainer1"
-      ],
-      "containerType": "EDITOR_DOT_PANEL"
-    },
-    "LabelNative1": {
-      "showName": "LabelNative",
-      "type": "LABEL_NATIVE_WIDGET",
-      "displayName": "LabelNative1",
-      "containerType": "EDITOR_SCALE_SQUARE",
-      "parentNode": "ViewNative1",
-      "childrenNode": [],
-      "props": {
-        "label": "Welcome Back",
-        "size": "displayMedium",
-        "align": "left",
-        "$dynamicAttrPaths": [
-          "label"
-        ],
-        "trueClasses": [
-          {
-            "title": "marginLeftExtraLargeMobile",
-            "value": "marginLeftExtraLargeMobile"
-          }
-        ]
-      }
-    },
-    "NativeContainer1": {
-      "showName": "NativeContainer",
-      "type": "NATIVE_CONTAINER_WIDGET",
-      "displayName": "NativeContainer1",
-      "containerType": "EDITOR_SCALE_SQUARE",
-      "parentNode": "bodySection1-bodySectionContainer1",
-      "childrenNode": [
-        "ViewNative1",
-        "ViewNative2"
-      ],
-      "props": {
-        "direction": "column",
-        "justify": "flex-start",
-        "align": "stretch",
-        "padding": 0,
-        "rowGap": 0,
-        "columnGap": 0,
-        "isEditMode": false,
-        "label": "Custom View",
-        "$dynamicAttrPaths": []
-      }
-    },
-    "ViewNative1": {
-      "showName": "ViewNative",
-      "type": "NATIVECANVAS",
-      "containerType": "EDITOR_DOT_PANEL",
-      "parentNode": "NativeContainer1",
-      "childrenNode": [
-        "ImageNative1",
-        "LabelNative1",
-        "LabelNative2",
-        "LabelNative3",
-        "phone_number",
-        "LabelNative4",
-        "InputNativeWidget2",
-        "LabelNative5"
-      ],
-      "displayName": "ViewNative1",
-      "props": {
-        "flex": 3
-      },
-      "version": 0
-    },
-    "ViewNative2": {
-      "showName": "ViewNative",
-      "type": "NATIVECANVAS",
-      "containerType": "EDITOR_DOT_PANEL",
-      "parentNode": "NativeContainer1",
-      "childrenNode": [
-        "NativeContainer2",
-        "ButtonWidgetNative1"
-      ],
-      "displayName": "ViewNative2",
-      "props": {},
-      "version": 0
-    },
-    "ImageNative1": {
-      "showName": "ImageNative",
-      "type": "IMAGE_NATIVE_WIDGET",
-      "displayName": "ImageNative1",
-      "containerType": "EDITOR_SCALE_SQUARE",
-      "parentNode": "ViewNative1",
-      "childrenNode": [],
-      "props": {
-        "imageUrl": "https://static-cdn.jtvnw.net/jtv_user_pictures/b4cabdb0-b761-4b6c-a90c-d5a380ecbe40-profile_banner-480.jpeg",
-        "classes": [
-          {}
-        ],
-        "$dynamicAttrPaths": [],
-        "trueClasses": [
-          {
-            "title": "heightFixed140Mobile",
-            "value": "heightFixed140Mobile"
-          },
-          {
-            "title": "marginAutoMobile",
-            "value": "marginAutoMobile"
-          },
-          {
-            "title": "widthFullMobile",
-            "value": "widthFullMobile"
-          }
-        ]
-      }
-    },
-    "LabelNative2": {
-      "showName": "LabelNative",
-      "type": "LABEL_NATIVE_WIDGET",
-      "displayName": "LabelNative2",
-      "containerType": "EDITOR_SCALE_SQUARE",
-      "parentNode": "ViewNative1",
-      "childrenNode": [],
-      "props": {
-        "label": "Enter your details to get sign into your account.",
-        "size": "titleMedium",
-        "align": "left",
-        "$dynamicAttrPaths": [],
-        "trueClasses": [
-          {
-            "title": "marginLeftExtraLargeMobile",
-            "value": "marginLeftExtraLargeMobile"
-          }
-        ]
-      }
-    },
-    "LabelNative3": {
-      "showName": "LabelNative",
-      "type": "LABEL_NATIVE_WIDGET",
-      "displayName": "LabelNative3",
-      "containerType": "EDITOR_SCALE_SQUARE",
-      "parentNode": "ViewNative1",
-      "childrenNode": [],
-      "props": {
-        "label": "Enter your phone number",
-        "size": "bodyMedium",
-        "align": "left",
-        "$dynamicAttrPaths": [],
-        "trueClasses": [
-          {
-            "title": "marginLeftExtraLargeMobile",
-            "value": "marginLeftExtraLargeMobile"
-          },
-          {
-            "title": "fontBold800",
-            "value": "fontBold800"
-          },
-          {
-            "title": "marginTopExtraLargeMobile",
-            "value": "marginTopExtraLargeMobile"
-          }
-        ]
-      }
-    },
-    "LabelNative4": {
-      "showName": "LabelNative",
-      "type": "LABEL_NATIVE_WIDGET",
-      "displayName": "LabelNative4",
-      "containerType": "EDITOR_SCALE_SQUARE",
-      "parentNode": "ViewNative1",
-      "childrenNode": [],
-      "props": {
-        "label": "Enter your Pin",
-        "size": "bodyMedium",
-        "align": "left",
-        "$dynamicAttrPaths": [],
-        "trueClasses": [
-          {
-            "title": "marginLeftExtraLargeMobile",
-            "value": "marginLeftExtraLargeMobile"
-          },
-          {
-            "title": "fontBold800",
-            "value": "fontBold800"
-          },
-          {
-            "title": "marginTopExtraLargeMobile",
-            "value": "marginTopExtraLargeMobile"
-          }
-        ]
-      }
-    },
-    "InputNativeWidget2": {
-      "showName": "InputNativeWidget",
-      "type": "INPUT_NATIVE_WIDGET",
-      "displayName": "InputNativeWidget2",
-      "containerType": "EDITOR_SCALE_SQUARE",
-      "parentNode": "ViewNative1",
-      "childrenNode": [],
-      "props": {
-        "value": "",
-        "defaultValue": "",
-        "label": "",
-        "styles": {},
-        "margin": "normal",
-        "variant": "outlined",
-        "type": "text",
-        "color": "success",
-        "size": "small",
-        "$dynamicAttrPaths": [],
-        "trueClasses": [
-          {
-            "title": "width80PercentageMobile",
-            "value": "width80PercentageMobile"
-          },
-          {
-            "title": "marginLeftExtraLargeMobile",
-            "value": "marginLeftExtraLargeMobile"
-          }
-        ]
-      }
-    },
-    "LabelNative5": {
-      "showName": "LabelNative",
-      "type": "LABEL_NATIVE_WIDGET",
-      "displayName": "LabelNative5",
-      "containerType": "EDITOR_SCALE_SQUARE",
-      "parentNode": "ViewNative1",
-      "childrenNode": [],
-      "props": {
-        "label": "Forgot Pin?",
-        "size": "labelSmall",
-        "align": "left",
-        "$dynamicAttrPaths": [],
-        "trueClasses": [
-          {
-            "title": "marginLeftExtraLargeMobile",
-            "value": "marginLeftExtraLargeMobile"
-          }
-        ],
-        "colorScheme": "red"
-      }
-    },
-    "NativeContainer2": {
-      "showName": "NativeContainer",
-      "type": "NATIVE_CONTAINER_WIDGET",
-      "displayName": "NativeContainer2",
-      "containerType": "EDITOR_SCALE_SQUARE",
-      "parentNode": "ViewNative2",
-      "childrenNode": [
-        "ViewNative3",
-        "ViewNative4"
-      ],
-      "props": {
-        "direction": "row",
-        "justify": "flex-start",
-        "align": "stretch",
-        "padding": 0,
-        "rowGap": 0,
-        "columnGap": 0,
-        "isEditMode": false,
-        "label": "Custom View",
-        "$dynamicAttrPaths": [],
-        "trueClasses": [
-          {
-            "title": "marginTopExtraLargeMobile",
-            "value": "marginTopExtraLargeMobile"
-          }
-        ]
-      }
-    },
-    "ViewNative3": {
-      "showName": "ViewNative",
-      "type": "NATIVECANVAS",
-      "containerType": "EDITOR_DOT_PANEL",
-      "parentNode": "NativeContainer2",
-      "childrenNode": [
-        "LabelNative6"
-      ],
-      "displayName": "ViewNative3",
-      "props": {},
-      "version": 0
-    },
-    "ViewNative4": {
-      "showName": "ViewNative",
-      "type": "NATIVECANVAS",
-      "containerType": "EDITOR_DOT_PANEL",
-      "parentNode": "NativeContainer2",
-      "childrenNode": [
-        "LabelNative7"
-      ],
-      "displayName": "ViewNative4",
-      "props": {},
-      "version": 0
-    },
-    "LabelNative6": {
-      "showName": "LabelNative",
-      "type": "LABEL_NATIVE_WIDGET",
-      "displayName": "LabelNative6",
-      "containerType": "EDITOR_SCALE_SQUARE",
-      "parentNode": "ViewNative3",
-      "childrenNode": [],
-      "props": {
-        "label": "Don't have an account",
-        "size": "bodyMedium",
-        "align": "right",
-        "$dynamicAttrPaths": [],
-        "trueClasses": [
-          {
-            "title": "marginTopExtraLargePlusMobile",
-            "value": "marginTopExtraLargePlusMobile"
-          }
-        ]
-      }
-    },
-    "LabelNative7": {
-      "showName": "LabelNative",
-      "type": "LABEL_NATIVE_WIDGET",
-      "displayName": "LabelNative7",
-      "containerType": "EDITOR_SCALE_SQUARE",
-      "parentNode": "ViewNative4",
-      "childrenNode": [],
-      "props": {
-        "label": "Request New?",
-        "size": "bodyMedium",
-        "align": "left",
-        "$dynamicAttrPaths": [],
-        "colorScheme": "red",
-        "trueClasses": [
-          {
-            "title": "marginTopExtraLargePlusMobile",
-            "value": "marginTopExtraLargePlusMobile"
-          }
-        ]
-      }
-    },
-    "ButtonWidgetNative1": {
-      "showName": "ButtonWidgetNative",
-      "type": "BUTTON_NATIVE_WIDGET",
-      "displayName": "ButtonWidgetNative1",
-      "containerType": "EDITOR_SCALE_SQUARE",
-      "parentNode": "ViewNative2",
-      "childrenNode": [],
-      "props": {
-        "text": "Login",
-        "variant": "contained",
-        "hidden": false,
-        "$dynamicAttrPaths": [
-
-        ],
-        "trueClasses": [
-          {
-            "title": "width90PercentageMobile",
-            "value": "width90PercentageMobile"
-          },
-          {
-            "title": "marginAutoMobile",
-            "value": "marginAutoMobile"
-          },
-          {
-            "title": "marginBottomExtraLargeMobile",
-            "value": "marginBottomExtraLargeMobile"
-          }
-        ],
-        "events": [
-          {
-            "actionType": "datasource",
-            "eventType": "click",
-            "queryID": "restapi1"
-          }
-        ]
-      }
-    },
-    "phone_number": {
-      "showName": "InputNativeWidget",
-      "type": "INPUT_NATIVE_WIDGET",
-      "displayName": "phone_number",
-      "containerType": "EDITOR_SCALE_SQUARE",
-      "parentNode": "ViewNative1",
-      "childrenNode": [],
-      "props": {
-        "value": "",
-        "defaultValue": "",
-        "label": "",
-        "styles": {},
-        "margin": "normal",
-        "variant": "outlined",
-        "type": "text",
-        "color": "success",
-        "size": "small",
-        "$dynamicAttrPaths": [],
-        "trueClasses": [
-          {
-            "title": "width80PercentageMobile",
-            "value": "width80PercentageMobile"
-          },
-          {
-            "title": "marginLeftExtraLargeMobile",
-            "value": "marginLeftExtraLargeMobile"
-          }
-        ]
-      }
-    }
-  },
-  dependenciesState: {},
-  dragShadowState: {},
-  dottedLineSquareState: {},
-  displayNameState: [],
-};
-
-const TabsComponent = () => {
-  const [model1, setModel1] = useState(data);
-  const [loading, setLoading] = useState(false);
-  const store1 = createStoreInstance();
-  return (
-    <div>
-      <div>
-        {loading ? (
-          <div
-            style={{
-              fontSize: "16px",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              width: "100vw",
-              height: "100vh",
-            }}
-          >
-            <CircularProgress />
-          </div>
-        ) : (
-
-          <ThemeProvider theme={theme}>
-            <Provider store={store1}>
-              <ConfigProvider locale={enUS}>
-                <Global styles={globalStyle} />
-                <NotificationGroup pt={"46px"} />
-                <ModalGroup />
-                <Builder
-                    model={model1}
-                    getResource={async () => ({
-                      baseUrl: "http://localhost:8081/api/execution/execute",
-                      urlParams: [
-                        {
-                          key: "groupId",
-                          value: "com",
-                        },
-                        {
-                          key: "artifactId",
-                          value: "test_demo",
-                        },
-                        {
-                          key: "version",
-                          value: "0.0.2",
-                        },
-                      ],
-                      body: {},
-                    })}
-                    getRules={async () => [
-               
-                    ]}
-                    getPages={async () => [
-                      { $refText: "login", $ref: "login" },
-                      { $refText: "userInfoSave", $ref: "login" },
-                      { $refText: "initialUserRegister", $ref: "login" },
-                      { $refText: "otpVerification", $ref: "login" },
-                      { $refText: "userPinSet", $ref: "login" },
-                      { $refText: "created", $ref: "login" },
-                      { $refText: "walletMainPage", $ref: "login" },
-                      { $refText: "transSuccessWallet", $ref: "login" },
-                      { $refText: "sendMoney", $ref: "login" },
-                      { $refText: "addMoney", $ref: "login" },
-                      { $refText: "transfailed", $ref: "login" },
-                      { $refText: "moneySentSuccess", $ref: "login" },
-                      { $refText: "walletPin", $ref: "login" },
-                      { $refText: "addMoneyCreditCard", $ref: "login" },
-                      { $refText: "cardTransOTP", $ref: "login" },
-                      { $refText: "moneySentSuccessFinal", $ref: "login" },
-                    ]}
-                    onModelUpdate={function (model: any): void {
-                      // setModel1(model);
-                    } }
-                    onModelSave={function (): Promise<void> {
-                      return null;
-                    } }
-                    getStyles={async (): Promise<any> => {
-                      return {
-                        classes: {}
-                      };
-                    } }
-                    mode={"edit"} setStyles={function (style: any): void {
-                      throw new Error("Function not implemented.");
-                    } } onModelUpdatefunction={function (model: any): void {
-                      throw new Error("Function not implemented.");
-                    } }                />
-              </ConfigProvider>
-            </Provider>
-          </ThemeProvider>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default TabsComponent;
-
-
-
-const bv = {
-  model: "model1",
-  getResource: async () => ({
-    baseUrl: "http://localhost:8081/api/execution/execute",
-    urlParams: [
-      {
-        key: "groupId",
-        value: "com",
-      },
-      {
-        key: "artifactId",
-        value: "test_demo",
-      },
-      {
-        key: "version",
-        value: "0.0.2",
-      },
-    ],
-    body: {},
-  }),
-  getRules: async () => [
-    { $refText: "login", $ref: "login" },
-    { $refText: "userInfoSave", $ref: "login" },
-    { $refText: "initialUserRegister", $ref: "login" },
-    { $refText: "otpVerification", $ref: "login" },
-  ],
-  getPages: async () => [
-    { $refText: "login", $ref: "login" },
-    { $refText: "userInfoSave", $ref: "login" },
-    { $refText: "initialUserRegister", $ref: "login" },
-    { $refText: "otpVerification", $ref: "login" },
-    { $refText: "userPinSet", $ref: "login" },
-    { $refText: "created", $ref: "login" },
-    { $refText: "walletMainPage", $ref: "login" },
-    { $refText: "transSuccessWallet", $ref: "login" },
-    { $refText: "sendMoney", $ref: "login" },
-    { $refText: "addMoney", $ref: "login" },
-    { $refText: "transfailed", $ref: "login" },
-    { $refText: "moneySentSuccess", $ref: "login" },
-    { $refText: "walletPin", $ref: "login" },
-    { $refText: "addMoneyCreditCard", $ref: "login" },
-    { $refText: "cardTransOTP", $ref: "login" },
-    { $refText: "moneySentSuccessFinal", $ref: "login" }
-  ],
-  onModelUpdatefunction: (model: any): void => {
-    // setModel1(model);
-  },
-  onModelSave: async function (): Promise<void> {
-
-  },
-  getStyles: async () => ({ classes: {} }),
-  mode: "edit"
-}