impaktapps-ui-builder 0.0.382457 → 1.0.0

package/i18n/react-i18next.d.ts

@@ -0,0 +1,9 @@
+import "react-i18next"
+import { resources } from "./config"
+
+declare module "react-i18next" {
+  interface CustomTypeOptions {
+    resources: (typeof resources)["en-US"]
+    returnNull: false
+  }
+}

package/lib/index.ts

@@ -0,0 +1,12 @@
+export { default as Builder } from '../core/Builder';
+export * from "../store"
+export * from "../redux/resource/resourceReducer"
+export * from "../redux/currentApp/action/actionReducer"
+export * from "../redux/currentApp/executionTree/executionReducer"
+export * from "../redux/config/configReducer"
+export * from "../redux/currentApp/executionController/controllerReducer"
+export * from "../redux/currentApp/components/componentsSlice"
+export * from "../redux/currentApp/executionController/interface"
+export * from "../redux/currentApp/executionController/controllerSlice"
+export * from "../redux/currentApp/style/styleState"
+export * from "../redux/currentApp/style/styleReducer"

package/main.css

@@ -0,0 +1,14 @@
+/* Add this to your global styles or CSS file
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  html, body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  }
+   */

package/main.tsx

@@ -0,0 +1,11 @@
+// import React from "react";
+// import ReactDOM from "react-dom/client";
+// import "./main.css";
+
+// import MasterRouter from "./MasterRouter.tsx";
+
+// ReactDOM.createRoot(document.getElementById("root")!).render(
+//   <React.StrictMode>
+//     <MasterRouter />
+//   </React.StrictMode>
+// );

package/metro.config.js

@@ -0,0 +1,20 @@
+// metro.config.js
+const { getDefaultConfig } = require('expo/metro-config');
+const defaultConfig = getDefaultConfig(__dirname);
+ 
+defaultConfig.resolver = {
+  ...defaultConfig.resolver,
+  resolverMainFields: ['react-native', 'browser', 'main'],
+};
+ 
+defaultConfig.transformer = {
+  ...defaultConfig.transformer,
+  getTransformOptions: async () => ({
+    transform: {
+      experimentalImportSupport: false,
+      inlineRequires: true,
+    },
+  }),
+};
+ 
+module.exports = defaultConfig;

package/middleware/reduxAsync/index.ts

@@ -0,0 +1,68 @@
+import * as Redux from "@reduxjs/toolkit"
+// import { cloneDeep } from "lodash"
+import { diff } from "deep-diff";
+// action components style
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import { executionActions } from "@/redux/currentApp/executionTree/executionSlice";
+import { CUSTOM_STORAGE_PREFIX } from "@/redux/currentApp/executionTree/executionReducer";
+
+export const reduxAsync: Redux.Middleware = (store) => (next) => async (action) => {
+    const result = next(action)
+    if (
+        action.type === executionActions.setLocalStorageInExecutionReducer.type &&
+        action.payload
+    ) {
+        try {
+            
+            const state= store.getState()
+            const updatedStorage =  state.currentApp.execution.result.localStorage;
+            await AsyncStorage.setItem(
+                CUSTOM_STORAGE_PREFIX, 
+                JSON.stringify(updatedStorage)
+            );
+        } catch (err) {
+            console.error('AsyncStorage persistence failed:', err);
+        }
+    }
+    if (action.type === executionActions.clearLocalStorageInExecutionReducer.type) {
+        try {
+            await AsyncStorage.removeItem(CUSTOM_STORAGE_PREFIX);
+        } catch (err) {
+            console.error('Failed to clear AsyncStorage:', err);
+        }
+    }
+
+    return result;
+}
+
+
+export function deepDiffToJsonPatch(lhs: any, rhs: any): any[] {
+    const differences = diff(lhs, rhs);
+    if (!differences) return [];
+
+    return differences.map(change => {
+        const path = "/" + change.path?.join("/"); // Convert path array to JSON Patch format
+
+        switch (change.kind) {
+            case "N": // New property added
+                return { op: "add", path, value: change.rhs };
+
+            case "D": // Property deleted
+                return { op: "remove", path };
+
+            case "E": // Property edited (changed value)
+                return { op: "replace", path, value: change.rhs };
+
+            case "A": // Array modification
+                if (change.item.kind === "N") {
+                    return { op: "add", path: `${path}/${change.index}`, value: change.item.rhs };
+                }
+                if (change.item.kind === "D") {
+                    return { op: "remove", path: `${path}/${change.index}` };
+                }
+                if (change.item.kind === "E") {
+                    return { op: "replace", path: `${path}/${change.index}`, value: change.item.rhs };
+                }
+        }
+    }).filter(Boolean); // Remove undefined values
+}

package/middleware/undoRedo/index.ts

@@ -0,0 +1,16 @@
+import { Middleware } from "@reduxjs/toolkit"
+import { cloneDeep } from "lodash"
+import { REDUX_ACTION_FROM } from "./interface"
+import { undoRedoMethod } from "./method"
+
+export const UndoRedo: Middleware = (store) => (next) => (action) => {
+  if (action.from && action.from === REDUX_ACTION_FROM.WS) {
+    const resp = next(action)
+    return resp
+  }
+  const prevRootState = cloneDeep(store.getState())
+  const resp = next(action)
+  const nextRootState = store.getState()
+  undoRedoMethod(prevRootState, nextRootState, action)
+  return resp
+}

package/middleware/undoRedo/interface.ts

@@ -0,0 +1,5 @@
+export enum REDUX_ACTION_FROM {
+  UNDO = "undo",
+  REDO = "redo",
+  WS = "ws",
+}

package/middleware/undoRedo/method/action.tsx

@@ -0,0 +1,97 @@
+import { AnyAction } from "@reduxjs/toolkit"
+import { REDUX_ACTION_FROM } from "@/middleware/undoRedo/interface"
+import { getActionList } from "@/redux/currentApp/action/actionSelector"
+import { RootState } from "@/store"
+import IMPAKTAPPSUndoRedoManager from "@/utils/undoRedo/undo"
+
+export const actionsSnapShot = (
+  reduxAction: string,
+  action: AnyAction,
+  _prevRootState: RootState,
+  _nextRootState: RootState,
+) => {
+  switch (reduxAction) {
+    case "addActionItemReducer": {
+      const newAction = {
+        type: "action/removeActionItemReducer",
+        payload: {
+          actionID: action.payload.actionId,
+          displayName: action.payload.displayName,
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "removeActionItemReducer": {
+      const originAction = getActionList(_prevRootState).find(
+        (item) => item.displayName === action.payload.displayName,
+      )
+      const newAction = {
+        type: "action/addActionItemReducer",
+        payload: originAction,
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "updateActionItemReducer": {
+      const originAction = getActionList(_prevRootState).find(
+        (item) => item.displayName === action.payload.displayName,
+      )
+      const newAction = {
+        type: "action/updateActionItemReducer",
+        payload: originAction,
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "updateActionDisplayNameReducer": {
+      const newAction = {
+        type: "action/updateActionDisplayNameReducer",
+        payload: {
+          newDisplayName: action.payload.oldDisplayName,
+          oldDisplayName: action.payload.newDisplayName,
+          actionID: action.payload.actionID,
+        },
+        from: action.from,
+      }
+
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+  }
+}

package/middleware/undoRedo/method/components.tsx

@@ -0,0 +1,412 @@
+import { AnyAction } from "@reduxjs/toolkit"
+import { REDUX_ACTION_FROM } from "@/middleware/undoRedo/interface"
+
+import { RootState } from "@/store"
+import IMPAKTAPPSUndoRedoManager from "@/utils/undoRedo/undo"
+import { ComponentMapNode } from "@/redux/currentApp/components/componentsState"
+import { getCanvas, searchDSLByDisplayName } from "@/redux/currentApp/components/componentsSelector"
+
+export const componentsSnapShot = (
+  reduxAction: string,
+  action: AnyAction,
+  _prevRootState: RootState,
+  _nextRootState: RootState,
+) => {
+  switch (reduxAction) {
+    // COMPONENT
+    case "addComponentReducer": {
+      const newAction = {
+        type: "components/deleteComponentNodeReducer",
+        payload: {
+          displayNames: action.payload.map(
+            (item: ComponentMapNode) => item.displayName,
+          ),
+          source: "undoRedo",
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "deleteComponentNodeReducer": {
+      const originActionComponentNode = action.payload.displayNames
+        .map((displayName: string) => {
+          return searchDSLByDisplayName(displayName, _prevRootState)
+        })
+        .filter((item: ComponentMapNode | null) => item != undefined)
+      const newAction = {
+        type: "components/addComponentReducer",
+        payload: originActionComponentNode,
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "addModalComponentReducer": {
+      const newAction = {
+        type: "components/deleteComponentNodeReducer",
+        payload: {
+          displayNames: [action.payload.modalComponentNode.displayName],
+          source: "undoRedo",
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "updateComponentLayoutInfoReducer": {
+      const originActionComponentNode = searchDSLByDisplayName(
+        action.payload.displayName,
+        _prevRootState,
+      )
+      if (!originActionComponentNode) break
+      const newAction = {
+        type: "components/updateComponentLayoutInfoReducer",
+        payload: {
+          displayName: action.payload.displayName,
+          layoutInfo: {
+            x: originActionComponentNode.x,
+            y: originActionComponentNode.y,
+            w: originActionComponentNode.w,
+            h: originActionComponentNode.h,
+          },
+          parentNode: originActionComponentNode.parentNode,
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "updateComponentContainerReducer": {
+      const originNodeLayoutInfos = (
+        action.payload 
+      ).updateSlices
+        .map((item) => {
+          return searchDSLByDisplayName(item.displayName, _prevRootState)
+        })
+        .filter((item) => item !== null) as ComponentMapNode[]
+      const newUpdateSlices = originNodeLayoutInfos.map((item) => {
+        return {
+          displayName: item.displayName,
+          x: item.x,
+          y: item.y,
+          w: item.w,
+          h: item.h,
+        }
+      })
+      const newAction = {
+        type: "components/updateComponentContainerReducer",
+        payload: {
+          oldParentNodeDisplayName: action.payload.newParentNodeDisplayName,
+          newParentNodeDisplayName: action.payload.oldParentNodeDisplayName,
+          updateSlices: newUpdateSlices,
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "updateComponentDisplayNameReducer": {
+      const { displayName, newDisplayName } = action.payload
+
+      const newAction = {
+        type: "components/updateComponentDisplayNameReducer",
+        payload: {
+          displayName: newDisplayName,
+          newDisplayName: displayName,
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "setComponentPropsReducer":
+    case "updateComponentPropsReducer": {
+      const { displayName, notUseUndoRedo } = action.payload
+      if (notUseUndoRedo) break
+      const originNode = searchDSLByDisplayName(displayName, _prevRootState)
+      if (!originNode) break
+      const newAction = {
+        type: "components/setComponentPropsReducer",
+        payload: {
+          displayName,
+          updateSlice: originNode.props,
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    // PAGE
+    case "addTargetPageSectionReducer": {
+      const { pageName, addedSectionName } = action.payload
+      const newAction = {
+        type: "components/deleteTargetPageSectionReducer",
+        payload: {
+          pageName,
+          deleteSectionName: addedSectionName,
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "deleteTargetPageSectionReducer": {
+      const { pageName, deleteSectionName } = action.payload
+
+      const currentTargeNode = searchDSLByDisplayName(pageName, _prevRootState)
+      if (!currentTargeNode) break
+      const originSectionNode = currentTargeNode.childrenNode.find(
+        (node:any) => node.showName === deleteSectionName,
+      )
+      if (!originSectionNode) break
+
+      const newAction = {
+        type: "components/addTargetPageSectionReducer",
+        payload: {
+          pageName,
+          addedSectionName: deleteSectionName,
+          originSectionNode,
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "addSectionViewReducer": {
+      const { parentNodeName } = action.payload
+
+      const originParentNode = searchDSLByDisplayName(
+        parentNodeName,
+        _nextRootState,
+      )
+      if (!originParentNode) break
+      const { props } = originParentNode
+      if (!props) break
+      const { viewSortedKey } = props
+      if (!Array.isArray(viewSortedKey)) break
+
+      const lastViewSortedKey = (viewSortedKey as string[]).at(-1)
+      if (!lastViewSortedKey) break
+      const newAction = {
+        type: "components/deleteSectionViewReducer",
+        payload: {
+          viewDisplayName: lastViewSortedKey,
+          parentNodeName,
+          originPageSortedKey: viewSortedKey,
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "deleteSectionViewReducer": {
+      const { parentNodeName, viewDisplayName } = action.payload
+      const originParentNode = searchDSLByDisplayName(
+        parentNodeName,
+        _prevRootState,
+      )
+
+      if (!originParentNode) break
+
+      const viewNode:any = originParentNode.childrenNode.find(
+        (node:any) => node.displayName === viewDisplayName,
+      )
+      if (!viewNode) break
+      const originChildrenNode = viewNode.childrenNode
+
+      const newAction = {
+        type: "components/addSectionViewReducer",
+        payload: {
+          parentNodeName,
+          sectionName: originParentNode.showName,
+          originChildrenNode: originChildrenNode,
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "updateTargetPagePropsReducer": {
+      const { pageName, notUseUndoRedo } = action.payload
+      if (notUseUndoRedo) break
+      const originPage = searchDSLByDisplayName(pageName, _prevRootState)
+      if (!originPage) break
+      const newAction = {
+        type: "components/updateTargetPagePropsReducer",
+        payload: {
+          pageName,
+          newProps: originPage.props,
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "addPageNodeWithSortOrderReducer": {
+      const { displayName } = action.payload
+      const rootNode:any = getCanvas(_nextRootState)
+      if (!rootNode || !rootNode.props) break
+
+      const newAction = {
+        type: "components/deletePageNodeReducer",
+        payload: {
+          displayName: displayName,
+          originPageSortedKey: rootNode.props.pageSortedKey,
+        },
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "deletePageNodeReducer": {
+      const originPageNode = searchDSLByDisplayName(
+        action.payload.displayName,
+        _prevRootState,
+      )
+      if (!originPageNode) break
+      const newAction = {
+        type: "components/addPageNodeWithSortOrderReducer",
+        payload: originPageNode,
+        from: action.from,
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+    case "updateTargetPageLayoutReducer": {
+      const { pageName } = action.payload
+      const originPageNode = searchDSLByDisplayName(pageName, _prevRootState)
+      if (!originPageNode || !originPageNode.props) break
+      const newAction = {
+        type: "components/updateTargetPageLayoutReducer",
+        payload: {
+          pageName: pageName,
+          layout: originPageNode.props.layout,
+          originPageNode,
+        },
+      }
+      if (action.from === REDUX_ACTION_FROM.UNDO) {
+        IMPAKTAPPSUndoRedoManager.pushToRedoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      } else {
+        IMPAKTAPPSUndoRedoManager.pushToUndoStack([
+          JSON.parse(JSON.stringify(newAction)),
+        ])
+      }
+      break
+    }
+  }
+}

package/middleware/undoRedo/method/index.tsx

@@ -0,0 +1,27 @@
+import { AnyAction } from "@reduxjs/toolkit"
+import { RootState } from "@/store"
+import { actionsSnapShot } from "./action"
+import { componentsSnapShot } from "./components"
+
+export const undoRedoMethod = (
+  prevRootState: RootState,
+  nextRootState: RootState,
+  action: AnyAction,
+) => {
+  const { type } = action
+  const typeList = type.split("/")
+  const reduxType = typeList[0]
+  const reduxAction = typeList[1]
+  switch (reduxType) {
+    case "components": {
+      componentsSnapShot(reduxAction, action, prevRootState, nextRootState)
+      break
+    }
+    case "action": {
+      actionsSnapShot(reduxAction, action, prevRootState, nextRootState)
+      break
+    }
+    default:
+      break
+  }
+}