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

package/package.json

@@ -1,158 +1,53 @@
-{
-  "name": "impaktapps-ui-builder",
-  "version": "1.0.0",
-  "description": "<<<<<<< HEAD\r # Welcome to your Expo app 👋",
-  "repository": {
-    "type": "git",
-    "url": "https://git.act21.io/products/impaktapps-ui-builder.git"
-  },
-  "license": "ISC",
-  "author": "",
-  "type": "module",
-  "main": "expo-router/entry",
-  "directories": {
-    "lib": "lib"
-  },
-  "scripts": {
-    "start": "expo start",
-    "reset-project": "node ./scripts/reset-project.js",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "test": "jest --watchAll",
-    "lint": "expo lint",
-    "build": "tsc"
-  },
-  "dependencies": {
-    "@codemirror/autocomplete": "^6.4.0",
-    "@codemirror/commands": "^6.1.3",
-    "@codemirror/lang-html": "^6.4.0",
-    "@codemirror/lang-javascript": "^6.1.2",
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-sql": "^6.3.3",
-    "@codemirror/lang-xml": "^6.0.1",
-    "@codemirror/language": "^6.3.2",
-    "@codemirror/lint": "^6.1.0",
-    "@codemirror/search": "^6.2.3",
-    "@codemirror/state": "^6.2.0",
-    "@codemirror/view": "^6.7.2",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^7.0.0",
-    "@dnd-kit/sortable": "^8.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@draftbit/ui": "^52.1.6",
-    "@emotion/babel-preset-css-prop": "^11.12.0",
-    "@emotion/native": "^11.11.0",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@expo/vector-icons": "^14.0.2",
-    "@floating-ui/react": "^0.26.9",
-    "@mhoc/axios-digest-auth": "^0.8.0",
-    "@mui/icons-material": "^5.15.14",
-    "@mui/material": "^5.14.3",
-    "@mui/x-date-pickers": "^7.5.0",
-    "@react-navigation/bottom-tabs": "^7.2.0",
-    "@react-navigation/native": "^7.0.14",
-    "@react-navigation/stack": "^7.1.1",
-    "@reduxjs/toolkit": "^1.8.1",
-    "@tanstack/react-table": "^8.17.3",
-    "@types/papaparse": "^5.3.9",
-    "@uiw/color-convert": "^2.1.1",
-    "@uiw/react-color-sketch": "^2.1.1",
-    "axios": "^1.7.9",
-    "babel-plugin-module-resolver": "^5.0.2",
-    "babel-plugin-react-svg": "^3.0.3",
-    "chroma-js": "^2.4.2",
-    "clsx": "^2.1.1",
-    "color": "^4.2.3",
-    "dayjs": "^1.11.10",
-    "deep-diff": "^1.0.2",
-    "downloadjs": "^1.4.7",
-    "expo": "~52.0.32",
-    "expo-blur": "~14.0.3",
-    "expo-constants": "~17.0.5",
-    "expo-file-system": "~18.0.12",
-    "expo-font": "~13.0.3",
-    "expo-haptics": "~14.0.1",
-    "expo-linking": "~7.0.5",
-    "expo-router": "~4.0.17",
-    "expo-splash-screen": "~0.29.21",
-    "expo-status-bar": "~2.0.1",
-    "expo-symbols": "~0.2.2",
-    "expo-system-ui": "~4.0.8",
-    "expo-web-browser": "~14.0.2",
-    "expression-eval": "^5.0.1",
-    "framer-motion": "^10.15.0",
-    "i18next": "^23.7.6",
-    "install": "^0.13.0",
-    "klona": "^2.0.6",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "numbro": "^2.4.0",
-    "overlap-area": "^1.1.0",
-    "papaparse": "^5.4.1",
-    "qs": "^6.12.1",
-    "rc-virtual-list": "^3.14.2",
-    "re-resizable": "^6.9.9",
-    "react": "18.3.1",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "14.1.0",
-    "react-dom": "18.3.1",
-    "react-focus-lock": "^2.11.2",
-    "react-hook-form": "^7.51.5",
-    "react-hotkeys-hook": "^4.5.0",
-    "react-i18next": "^13.5.0",
-    "react-icons": "^5.5.0",
-    "react-international-phone": "^4.4.0",
-    "react-native": "0.76.7",
-    "react-native-css-interop": "^0.1.22",
-    "react-native-gesture-handler": "~2.20.2",
-    "react-native-get-random-values": "^1.11.0",
-    "react-native-keyboard-aware-scroll-view": "^0.9.5",
-    "react-native-paper": "^5.13.3",
-    "react-native-reanimated": "~3.16.1",
-    "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.4.0",
-    "react-native-web": "~0.19.13",
-    "react-native-webview": "^13.12.5",
-    "react-redux": "^8.0.1",
-    "react-rnd": "^10.4.1 ",
-    "react-router-native": "^6.29.0",
-    "react-selecto": "^1.26.3",
-    "react-use": "^17.5.0",
-    "react-use-measure": "^2.1.1",
-    "redux": "^4.2.0",
-    "redux-logger": "^3.0.6",
-    "regenerator-runtime": "^0.14.1",
-    "tern": "^0.24.3",
-    "toposort": "^2.0.2",
-    "ts-key-enum": "^2.0.12",
-    "unescape-js": "^1.1.4",
-    "util": "^0.10.4",
-    "uuid": "^9.0.1",
-    "xlsx": "^0.18.5"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@eslint/js": "^9.26.0",
-    "@types/deep-diff": "^1.0.5",
-    "@types/jest": "^29.5.12",
-    "@types/lodash-es": "^4.17.12",
-    "@types/react": "~18.3.12",
-    "@types/react-test-renderer": "^18.3.0",
-    "@types/uuid": "^10.0.0",
-    "babel-plugin-inline-react-svg": "^2.0.2",
-    "eslint": "^9.26.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-native": "^5.0.0",
-    "globals": "^16.1.0",
-    "jest": "^29.2.1",
-    "jest-expo": "~52.0.3",
-    "react-test-renderer": "18.3.1",
-    "typescript": "^5.3.3",
-    "typescript-eslint": "^8.32.0"
-  },
-  "jest": {
-    "preset": "jest-expo"
-  }
-}
+{
+    "name": "impaktapps-ui-builder",
+    "version": "1.0.1-alpha.2",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview"
+    },
+    "publishConfig": {
+        "tag": "alpha"
+    },
+
+    "dependencies": {
+        "@babel/core": "^7.16.12",
+        "@insertcoinab/gwen-react-components": "^1.2.65",
+        "@types/styled-components": "^5.1.21",
+        "@vitejs/plugin-react": "^1.1.4",
+        "acorn-jsx": "^5.3.2",
+        "babel-loader": "^8.2.3",
+        "lodash": "^4.17.21",
+        "react": "^18.2.0",
+        "react-ace": "^10.1.0",
+        "react-dom": "^18.2.0",
+        "react-router": "^6.0.0",
+        "react-router-dom": "^6.11.2"
+    },
+    "devDependencies": {
+        "@types/d3-array": "^3.0.4",
+        "@types/d3-time-format": "^4.0.0",
+        "@types/lodash": "^4.14.190",
+        "@types/node": "^17.0.12",
+        "@types/react": "^18.2.8",
+        "@types/react-dom": "^18.0.11",
+        "@types/react-router-dom": "^5.3.3",
+        "@types/react-slick": "^0.23.10",
+        "@types/styled-components": "^5.1.21",
+        "typescript": "^4.5.5",
+        "vite": "^2.7.13",
+        "vite-plugin-dts": "^0.9.9",
+        "vite-plugin-react": "^4.0.1",
+        "vite-plugin-style-import": "^2.0.0",
+        "vite-plugin-tsconfig-paths": "^1.3.1"
+    },
+    "license": "MIT",
+    "author": "Satendra Raghav",
+    "files": [
+        "dist",
+        "src"
+    ],
+    "main": "./dist/impaktapps-ui-builder.umd.js",
+    "module": "./dist/impaktapps-ui-builder.es.js",
+    "types": "./dist/impaktapps-ui-builder.d.ts"
+}

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

@@ -0,0 +1,67 @@
+import _ from "lodash";
+
+import { createLayoutFormat } from "./buildConfig";
+
+
+const TextField = {
+    "type": "Control",
+    "scope": "#/properties/AAdhar",
+    "layout": 12,
+    "options": {
+      "widget": "InputField"
+    },
+  config:{
+    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    main:{
+      label:"Adhaar Card",
+      formatStrArray:["9","9","9","9"," ","9","9","9","9"," ","X9","X9","X9","X9"],
+     placeholder:"XXXX XXXX XXXX"
+    }
+  }
+  };
+
+export const buildAdhaarField = (config: any, componentScope: string) => {
+    const inputField: any = _.cloneDeep(TextField);
+    inputField.config.main.label = config.label;
+    if (config.style) {
+        inputField.config.style = JSON.parse(config.style)
+    }
+    if (config.layout) {
+        inputField.config.layout = createLayoutFormat(config.layout)
+    }
+    inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
+    inputField.scope = componentScope;
+    return inputField;
+}
+
+
+const PanField = {
+    "type": "Control",
+    "scope": "#/properties/pan",
+    "layout": 12,
+    "options": {
+      "widget": "InputField"
+    },
+  config:{
+    layout: { xs: 12, sm: 6, md: 4, lg: 4 },
+    main:{
+      label:"Pan Card",
+      placeholder:"AAAAA0000A",
+      formatStrArray:["A","A","A","A","A","9","9","9","9","A"],
+    }
+  }
+  };
+
+export const buildPanField = (config: any, componentScope: string) => {
+    const inputField: any = _.cloneDeep(PanField);
+    inputField.config.main.label = config.label;
+    if (config.style) {
+        inputField.config.style = JSON.parse(config.style)
+    }
+    if (config.layout) {
+        inputField.config.layout = createLayoutFormat(config.layout)
+    }
+    inputField.config.main.errorMessage = `${config.name} is empty or invalid`;
+    inputField.scope = componentScope;
+    return inputField;
+}

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

@@ -0,0 +1,18 @@
+import _ from "lodash";
+
+const ArrayUiSchema = {
+            type: "Control",
+            scope: "#/properties/adjustments",
+            layout: 11.5,
+            options: {
+                detail: {
+                    type: "HorizontalLayout",
+                    elements: []
+                }
+            }
+        }
+export const buildArray = (config:any,componentScope:string)=>{
+ const array = _.cloneDeep(ArrayUiSchema);
+ array.scope = componentScope;
+return array;
+}

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

@@ -0,0 +1,10 @@
+export const buildBasicUiSchema = (config) => {
+    return {
+        "type": "HorizontalLayout",
+        pageName: config.name,
+        name: config.name,
+        accessorKey: config.name,
+        heading: config.label || config.name,
+        "elements": []
+    }
+}

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

@@ -0,0 +1,43 @@
+import Button from "./uischema/button";
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+export const buildButton = (config:any,componentScope:string) =>{
+    const button:any = _.cloneDeep(Button);
+    if (config.buttonType) {
+      button.options.widget = config.buttonType === "IconButton" ? "IconButton" : "Button";
+      config.buttonType === "ButtonWithIconAndText" ?
+        button.config.main.startIcon = config.iconName
+        : button.config.main.icon = config.iconName
+
+    }
+    if(config.layout){
+      button.config.layout = createLayoutFormat(config.layout)
+    }
+    if(config.tooltipMessage){
+        button.config.main.tooltipMessage = config.tooltipMessage
+    }
+  
+    if(config.defaultStyle){
+      if(config.buttonType === "IconButton"){
+        button.config.main.styleDefault = config.defaultStyle==="true"?true:false;
+      }else{
+        button.config.main.enableDefaultStyle = config.defaultStyle==="true"?false:true;
+      }
+     
+    }
+    button.scope = componentScope;
+    if (config.style) {
+      button.config.style = JSON.parse(config.style)
+    }
+    if (config.size) {
+      button.config.main.size = config.size
+    }
+    if (config.color) {
+      button.config.main.color = config.color
+    }
+    if(config.label){
+    button.config.main.name = config.label;
+    }
+    return button;
+}

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

@@ -0,0 +1,33 @@
+import Card from "./uischema/card";
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+export const buildCard = (config,componentScope,store) =>{
+    const card: any = _.cloneDeep(Card(store.theme.myTheme));
+    if (config.style) {
+      card.config.wrapperStyle = JSON.parse(config.style)
+    }
+    card.elements[0].elements[0].elements[0].elements[1].scope = `#/properties/${config.name}/properties/value`
+    card.elements[1].scope = `#/properties/${config.name}/properties/url`
+    card.elements[0].elements[0].elements[1].scope = `#/properties/${config.name}/properties/description`
+    if(config.layout){
+      card.config.layout = createLayoutFormat(config.layout)
+    }
+    if(config?.titleIcon){
+      card.elements[0].elements[0].elements[0].elements[0].config.main.heading = eval(`'\\${config.titleIcon}'`);
+      card.elements[0].elements[0].elements[0].elements[1].config.style.left = "24px"
+    }
+    if(config.label){
+      card.elements[0].elements[0].elements[0].elements[1].config.main.heading = config.label;
+    }
+    if(config.url){
+      card.elements[1].config.main.url = config.url;
+    }
+    if(config.description){
+      card.elements[0].elements[0].elements[1].config.main.heading = config.description;
+    }
+   
+  
+    
+    return card;
+}

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

@@ -0,0 +1,72 @@
+import  RankCard  from "./uischema/rankCard";
+
+
+
+import _ from "lodash";
+
+import CardSlider  from "./uischema/cardSlider";
+
+export const buildCardSlider = async (
+  formData: any,
+  components: any,
+  config: any,
+  identity: string[],
+  uiSchema: any,
+  myService
+) => {
+  const service = myService();
+  let body:any = undefined;
+  const cardSlider:any = _.cloneDeep(CardSlider);
+  // const params: any = getParams(formData, config, [...identity]);
+  for (let i in components) {
+    if (components[i].type === "CardSlider") {
+      if (!!components[i]?.api?.payload) {
+        body = {
+          payload: {
+            // params: params,
+            ...components[i]?.api?.payload,
+          },
+        };
+      }
+      // const response = 
+      // await axios[components[i]?.api?.method](
+      //   components[i]?.api?.path,
+      //   // !!body ? JSON.stringify(body) : "",
+      //   // { headers: components[i]?.api?.headers }
+      // )
+      //   .then((response: any) => {
+      //     const data = response?.data
+      //     // .map(
+      //     // // .payload?.reportData?.values?
+      //     // // .map(
+      //     //   (elem: any) => {
+      //     //     return {
+      //     //       rank: elem.rank,
+      //     //       name: elem.name,
+      //     //       description: elem.description,
+      //     //     };
+      //     //   }
+      //     // );
+      //     // let num = 1;
+      //     data.map((elem,i:number) => {
+      //       const rankCard:any = _.cloneDeep(RankCard);
+      //       if (elem?.image) {
+      //         rankCard.elements[0].config.main.url = elem?.image;
+      //       }
+      //       rankCard.elements[1].config.main.heading = elem?.name;
+      //       rankCard.elements[2].config.main.heading = elem?.description;
+      //       rankCard.elements[3].config.main.heading = "#" + elem?.rank;
+      //       // num++;
+      //       cardSlider.elements.push(rankCard);
+      //     });
+      //     uiSchema.elements[2].elements[i] = cardSlider;
+      //     return uiSchema;
+      //   })
+      //   .catch((err: any): any[] => {
+      //     return uiSchema;
+      //   });
+      // return response;
+    }
+  }
+  return uiSchema;
+};

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

@@ -0,0 +1,28 @@
+import Box from "./uischema/box";
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+const Checkbox =  {
+    "type": "Control",
+    "scope": "#/properties/username1",
+    "layout": 12,
+    "options": {
+      "widget": "CheckBox"
+    },
+    "config": {
+      "main": {
+        "label": "Welcome to Hyperform",
+      }
+    }
+  }
+export const buildCheckbox = (config,componentScope) => {
+    const check: any = _.cloneDeep(Checkbox);
+    check.scope = componentScope;
+    check.config.main.label = config.label
+    if(config.layout){
+        check.config.layout = createLayoutFormat(config.layout)
+    }
+    if (config.style) {
+        check.config.style = JSON.parse(config.style)
+    }
+    return check;
+}

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

@@ -0,0 +1,58 @@
+import _ from "lodash";
+
+export default (FormData: any) => {
+  const formData = _.cloneDeep(FormData)
+  let component: any = {};
+  if (formData.pageName) {
+    delete formData.pageName
+  }
+  if (formData.eventsSelected) {
+    delete formData.eventsSelected
+  }
+  if (formData.type === "Table" ||
+    formData.type === "WrapperSection" ||
+    formData.type === "TabSection"
+  ) {
+    component.elements = formData.elements || []
+    if (formData.elements) {
+      delete formData.elements
+    }
+  }
+  component.events = formData.events || [];
+  if (formData.events) {
+    delete formData.events
+  }
+  component = { ...formData, ...component };
+  return component;
+};
+
+export const createLayoutFormat = (config: any[]) => {
+  if (_.isEmpty(config)) {
+    return {
+      xs: 12,
+      sm: 12,
+      md: 12,
+      lg: 12,
+    }
+  }
+  let data: any = {
+    xs: 12,
+    sm: 12,
+    md: 6,
+    lg: 6,
+  };
+  config.map((e: any) => {
+    data[e.key || "xs"] = +e.value || 5.5
+  })
+  return data;
+};
+export const flatObjectValueInArray = (config: any[]=[]) => {
+  if (config.length < 1) {
+    return
+  }
+  const keyName = Object.keys(config[0])[0]
+  const data = config.map((e) => {
+    return e[keyName]
+  })
+  return data;
+}

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

@@ -0,0 +1,51 @@
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+const dataGrid = {
+    "type": "Control",
+    "scope": "#/properties/dataGrid",
+    "layout": 12,
+    "options": {
+        "widget": "DataGrid"
+    },
+    elements: [
+    ],
+    "config": {
+        "main": {
+            // "label": "Data Grid",
+            elevation: 0,
+            useWrapper: false
+        },
+        style: {
+
+        }
+    }
+};
+
+export const buildDataGrid = (config, componentScope) => {
+    const DataGrid: any = _.cloneDeep(dataGrid);
+    DataGrid.scope = componentScope;
+    if (config.elevation) {
+        DataGrid.config.main.elevation = +config.elevation;
+    }
+    DataGrid.config.main.divider = config.divider === "NO" ? false : true;
+    if (config.height) {
+        DataGrid.config.main.height = `${config.height}px`;
+    }
+    if (config.justifyContent) {
+        DataGrid.config.main.justifyContent = config.justifyContent;
+    }
+    if (config.label) {
+        DataGrid.config.main.label = config.label;
+    }
+    if (config.layout) {
+        DataGrid.config.layout = createLayoutFormat(config.layout)
+    }
+    if (config.cardLayout) {
+        DataGrid.config.cardLayout = createLayoutFormat(config.cardLayout)
+    }
+    if (config.style) {
+        DataGrid.config.style = JSON.parse(config.style)
+    }
+    return DataGrid;
+}

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

@@ -0,0 +1,24 @@
+import DateInputField, { DateTime } from "./uischema/dateInputField";
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+
+export const buildDate = (config:any,componentScope:string)=> {
+    const dateInputField: any = _.cloneDeep(DateInputField);
+    dateInputField.config.main.label = config.label;
+    dateInputField.config.main.errorMessage = `${config.name} is empty or invalid`;
+    dateInputField.scope = componentScope;
+    if(config.layout){
+        dateInputField.config.layout = createLayoutFormat(config.layout)
+      }
+    return dateInputField;
+}
+export const buildDateTime = (config:any,componentScope:string)=>{
+  const dateTimeInputField: any = _.cloneDeep(DateTime);
+  dateTimeInputField.config.main.label = config.label;
+  dateTimeInputField.config.main.errorMessage = `${config.name} is empty or invalid`;
+  dateTimeInputField.scope = componentScope;
+  if(config.layout){
+    dateTimeInputField.config.layout = createLayoutFormat(config.layout)
+    }
+  return dateTimeInputField;
+}

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

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

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

@@ -0,0 +1,11 @@
+import _ from "lodash";
+import { createLayoutFormat } from "./buildConfig";
+import emptyBox from "./uischema/emptyBox";
+
+export const buildEmptyBox = (config,componentScope) =>{
+    const EmptyBox: any = _.cloneDeep(emptyBox);
+      if (config.layout) {
+        EmptyBox.config.layout = createLayoutFormat(config.layout);
+      }
+      return EmptyBox;
+}