impaktapps-ui-builder 0.0.382460 → 1.0.0

package/utils/executionTreeHelper/utils.ts

@@ -0,0 +1,147 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { convertPathToString, isObject } from "@/redux/utils"
+import { extractIdentifierInfoFromCode } from "./ast"
+import { toPath } from "lodash"
+
+
+const IMMEDIATE_PARENT_REGEX = /^(.*)(\..*|\[.*\])$/
+
+export const extractReferencesFromScript = (script: string): string[] => {
+  const newReference = new Set<string>()
+
+  const { references } = extractIdentifierInfoFromCode(script)
+  references.forEach((identifier: string) => {
+    newReference.add(identifier)
+    const subPaths = toPath(identifier)
+    let current = ""
+    while (subPaths.length > 1) {
+      current = convertPathToString(subPaths)
+      newReference.add(current)
+      subPaths.pop()
+    }
+  })
+  return Array.from(newReference)
+}
+
+export function getDisplayNameAndPropertyPath(fullPath: string): {
+  displayName: string
+  attrPath: string
+} {
+  const indexOfFirstDot = fullPath.indexOf(".")
+  if (indexOfFirstDot === -1) {
+    return {
+      displayName: fullPath,
+      attrPath: "",
+    }
+  }
+  const displayName = fullPath.substring(0, indexOfFirstDot)
+  const attrPath = fullPath.substring(indexOfFirstDot + 1)
+  return { displayName, attrPath }
+}
+
+export function isWidget(entity: Record<string, any>) {
+  return (
+    typeof entity === "object" && "$type" in entity && entity.$type === "WIDGET"
+  )
+}
+
+export function isAction(entity: Record<string, any>) {
+  return (
+    typeof entity === "object" && "$type" in entity && entity.$type === "ACTION"
+  )
+}
+
+export const getImmediateParentsOfPropertyPaths = (
+  propertyPaths: string[],
+): string[] => {
+  const parents: Set<string> = new Set()
+
+  propertyPaths.forEach((path) => {
+    const matches = path.match(IMMEDIATE_PARENT_REGEX)
+
+    if (matches !== null) {
+      parents.add(matches[1])
+    }
+  })
+
+  return Array.from(parents)
+}
+
+export const removeIgnoredKeys = (result: Record<string, unknown>) => {
+  return Object.keys(result).reduce(
+    (acc: Record<string, unknown>, key: string) => {
+      const componentOrAction = result[key]
+      if (isObject(componentOrAction)) {
+        const updatedComponentOrAction = Object.keys(componentOrAction).reduce(
+          (obj: Record<string, unknown>, innerKey: string) => {
+            if (!innerKey.startsWith("$")) {
+              obj[innerKey] = componentOrAction[innerKey]
+            }
+            return obj
+          },
+          {},
+        )
+        acc[key] = updatedComponentOrAction
+      } else {
+        acc[key] = componentOrAction
+      }
+      return acc
+    },
+    {},
+  )
+}
+
+export const removeWidgetOrActionMethods = (
+  result: Record<string, unknown>,
+) => {
+  return Object.keys(result).reduce(
+    (acc: Record<string, unknown>, key: string) => {
+      if (key === "utils") return acc
+      const componentOrAction = result[key]
+      if (
+        isObject(componentOrAction) &&
+        (componentOrAction.$type === "WIDGET" ||
+          componentOrAction.$type === "ACTION")
+      ) {
+        const updatedComponentOrAction = Object.keys(componentOrAction).reduce(
+          (obj: Record<string, unknown>, innerKey: string) => {
+            const innerValue = componentOrAction[innerKey]
+            if (typeof innerValue !== "function") {
+              obj[innerKey] = componentOrAction[innerKey]
+            }
+            return obj
+          },
+          {},
+        )
+        acc[key] = updatedComponentOrAction
+      } else {
+        acc[key] = componentOrAction
+      }
+      return acc
+    },
+    {},
+  )
+}
+
+export function getObjectPaths(obj: Record<string, unknown>, currentPath = "") {
+  let paths: string[] = []
+
+  if (typeof obj === "object" && obj !== null) {
+    Object.keys(obj).forEach((key) => {
+      const value = obj[key]
+      const newPath = Array.isArray(obj)
+        ? `${currentPath}.${key}`
+        : `${currentPath ? currentPath + "." : ""}${key}`
+      if (typeof value === "object" && value !== null) {
+        paths = paths.concat(
+          getObjectPaths(value as Record<string, unknown>, newPath),
+        )
+      } else {
+        paths.push(newPath)
+      }
+    })
+  }
+
+  return paths.map((path) => (path.startsWith(".") ? path.substr(1) : path))
+}

package/utils/focusManager.ts

@@ -0,0 +1,37 @@
+export type IMPAKTAPPSPanelType =
+  | "none"
+  | "data_component"
+  | "data_action"
+  | "data_page"
+  | "data_global_state"
+  | "action"
+  | "canvas"
+  | "widget_picker"
+  | "components_config"
+  | "page_config"
+export interface ClickPosition {
+  displayName: string
+  type: "inner_container" | "component" | "group"
+  clickPosition: number[]
+}
+
+export class FocusManager {
+  private static currentFocus: IMPAKTAPPSPanelType = "none"
+  private static currentClickPosition?: ClickPosition
+
+  static switchFocus(
+    IMPAKTAPPSPanelType: IMPAKTAPPSPanelType,
+    clickPosition?: ClickPosition,
+  ) {
+    this.currentFocus = IMPAKTAPPSPanelType
+    this.currentClickPosition = clickPosition
+  }
+
+  static getClickPosition(): ClickPosition | undefined {
+    return this.currentClickPosition
+  }
+
+  static getFocus(): IMPAKTAPPSPanelType {
+    return this.currentFocus
+  }
+}

package/utils/generators/generateAllTypePathsFromWidgetConfig.ts

@@ -0,0 +1,127 @@
+
+import { convertPathToString, isObject } from "@/redux/utils"
+import { get, toPath } from "lodash-es"
+// import {
+//   PanelConfig,
+//   PanelFieldGroupConfig,
+// } from "@/page/app/components/InspectPanel/interface"
+// import { isObject } from "@/utils/typeHelper"
+// import { VALIDATION_TYPES } from "@/utils/validationFactory"
+
+export const generateAllTypePathsFromWidgetConfig = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  panelConfig: any[]=[],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  widgetOrAction: Record<string, any>,
+) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let validationPaths: Record<string, any> = {}
+  panelConfig.forEach((config) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if ((config as any).children) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const filedConfigs = (config as any).children
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      filedConfigs.forEach((filedConfig:any) => {
+        const attrPath = filedConfig.attrName
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const configValidationPaths: Record<string, any> = {}
+
+        if (Array.isArray(attrPath)) {
+          const expectedType = filedConfig.expectedType
+          if (Array.isArray(expectedType)) {
+            attrPath.forEach((path, i) => {
+              configValidationPaths[path] = expectedType[i]
+            })
+          } else if (expectedType) {
+            attrPath.forEach((path) => {
+              configValidationPaths[path] = expectedType
+            })
+          }
+        } else {
+          if (filedConfig.expectedType) {
+            const expectedType = filedConfig.expectedType
+
+            if (Array.isArray(expectedType)) {
+              configValidationPaths[attrPath] = expectedType[0]
+            } else if (expectedType) {
+              configValidationPaths[attrPath] = expectedType
+            }
+          }
+        }
+
+        if (filedConfig.childrenSetter) {
+          const basePropertyPath = filedConfig.attrName
+          const widgetPropertyValue = get(widgetOrAction, basePropertyPath, [])
+          if (Array.isArray(widgetPropertyValue)) {
+            Object.keys(widgetPropertyValue).forEach((key) => {
+              const objectIndexPropertyPath = convertPathToString(
+                toPath(`${basePropertyPath}.${key}`),
+              )
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              filedConfig.childrenSetter?.forEach((childConfig:any) => {
+                const childAttrPath = childConfig.attrName
+                const expectedType = childConfig.expectedType
+                if (Array.isArray(childAttrPath)) {
+                  if (Array.isArray(expectedType)) {
+                    childAttrPath.forEach((path, i) => {
+                      configValidationPaths[
+                        convertPathToString(
+                          toPath(`${objectIndexPropertyPath}.${path}`),
+                        )
+                      ] = expectedType[i]
+                    })
+                  } else if (expectedType) {
+                    childAttrPath.forEach((path) => {
+                      configValidationPaths[
+                        convertPathToString(
+                          toPath(`${objectIndexPropertyPath}.${path}`),
+                        )
+                      ] = expectedType
+                    })
+                  }
+                } else {
+                  if (expectedType) {
+                    if (Array.isArray(expectedType)) {
+                      configValidationPaths[
+                        convertPathToString(
+                          toPath(`${objectIndexPropertyPath}.${childAttrPath}`),
+                        )
+                      ] = expectedType[0]
+                    } else if (expectedType) {
+                      configValidationPaths[
+                        convertPathToString(
+                          toPath(`${objectIndexPropertyPath}.${childAttrPath}`),
+                        )
+                      ] = expectedType
+                    }
+                  }
+                }
+              })
+            })
+          }
+          if (isObject(widgetPropertyValue)) {
+            Object.keys(widgetPropertyValue).forEach((key) => {
+              const objectIndexPropertyPath = convertPathToString(
+                toPath(`${basePropertyPath}.${key}`),
+              )
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              filedConfig.childrenSetter?.forEach((childConfig:any) => {
+                const expectedType = childConfig.expectedType
+                if (!Array.isArray(expectedType) && expectedType) {
+                  configValidationPaths[objectIndexPropertyPath] = expectedType
+                }
+              })
+            })
+          }
+        }
+        validationPaths = {
+          ...validationPaths,
+          ...configValidationPaths,
+        }
+      })
+    }
+  })
+
+  return { validationPaths }
+}

package/utils/generators/generateComponentNode.ts

@@ -0,0 +1,269 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { klona } from "klona"
+import { buildInitDragInfo } from "@/page/App/components/componentPanel/componentListBuilder"
+// import { DEFAULT_MIN_COLUMN } from "@/page/app/components/ScaleSquare/constant/widget"
+
+import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName"
+import { WidgetConfig } from "@/widgetLibrary/interface"
+import {  widgetBuilder, WidgetType } from "@/widgetLibrary/widgetBuilder"
+import { isObject } from "@/redux/utils"
+import {  ComponentTreeNode, CONTAINER_TYPE } from "@/redux/currentApp/components/componentsState"
+import { get, set } from "lodash-es"
+export const TEMPLATE_DISPLAYNAME_KEY = "templateDisplayName"
+
+export const generateWidgetLayoutInfo = (
+  type: string,
+  baseDisplayName: string,
+  containerType: CONTAINER_TYPE = CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
+): any => {
+  const realDisplayName = DisplayNameGenerator.generateDisplayName(
+    type,
+    baseDisplayName,
+  )
+  const currentComponentConfig = buildInitDragInfo(type)
+  if (currentComponentConfig === undefined) {
+    return undefined
+  }
+
+  return {
+    displayName: realDisplayName,
+    widgetType:type,
+    containerType,
+    parentNode: "",
+    childrenNode: [] as string[],
+  }
+}
+
+export const generateComponentNodeByWidgetInfo = (
+  displayName: string,
+  widgetInfo: Omit<WidgetConfig, "icon" | "sessionType" | "keywords">,
+  parentNodeDisplayName: string,
+  pathToChildren: string[] = [],
+  scale: number = 1,
+) => {
+  let baseDSL: ComponentTreeNode
+  let childrenNodeDSL: ComponentTreeNode[] = []
+  const {
+    defaults,
+    type,
+    displayName: showName,
+    containerType = CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
+    version,
+  } = widgetInfo
+  let props: Record<string, any> | undefined = {}
+  if (typeof defaults === "function") {
+    props = klona(defaults())
+  } else {
+    props = klona(defaults)
+  }
+  if (isObject(props) && Object.prototype.hasOwnProperty.call(props, "formDataKey")) {
+    props.formDataKey = `{{${displayName}.displayName}}`
+  }
+
+  if (
+    isObject(props) &&
+    Object.prototype.hasOwnProperty.call(props, "events") &&
+    Array.isArray(props.events)
+  ) {
+    props.events = props.events.map((event) => {
+      if (event.actionType !== "widget") {
+        return event
+      } else {
+        return {
+          ...event,
+          widgetID: pathToChildren[pathToChildren.length - 1] || "unknown",
+        }
+      }
+    })
+  }
+
+  if (widgetInfo.childrenNode && Array.isArray(widgetInfo.childrenNode)) {
+    pathToChildren =
+      containerType === CONTAINER_TYPE.EDITOR_SCALE_SQUARE
+        ? [...pathToChildren, displayName]
+        : pathToChildren
+    widgetInfo.childrenNode.map((childNode) => {
+      if (!childrenNodeDSL) childrenNodeDSL = []
+      const child = newGenerateChildrenComponentNode(
+        childNode,
+        displayName,
+        pathToChildren,
+        scale,
+      )
+      childrenNodeDSL.push(child)
+    })
+  }
+
+  baseDSL = {
+    showName: showName,
+    type,
+    displayName: displayName,
+    containerType,
+    parentNode: parentNodeDisplayName,
+    childrenNode: childrenNodeDSL,
+    version,
+    props: props ?? {},
+  }
+  if (baseDSL.type === "LIST_WIDGET" || baseDSL.type === "GRID_LIST_WIDGET") {
+    baseDSL = transformListWidget(baseDSL)
+  }
+  return baseDSL
+}
+
+export const newGenerateChildrenComponentNode = (
+  widgetInfo: Omit<WidgetConfig, "icon" | "sessionType" | "keywords">,
+  parentNodeDisplayName: string,
+  pathToChildren: string[] = [],
+  scale: number = 1,
+): ComponentTreeNode => {
+  if (widgetInfo.type === "NATIVECANVAS" || widgetInfo.type === "CANVAS"||widgetInfo.type === "DIV") {
+    const realDisplayName = DisplayNameGenerator.generateDisplayName(
+      widgetInfo.type,
+      widgetInfo.displayName,
+    )
+    let childrenNodeDSL: ComponentTreeNode[] = []
+    if (
+      Array.isArray(widgetInfo.childrenNode) &&
+      widgetInfo.childrenNode.length > 0
+    ) {
+      widgetInfo.childrenNode.map((childNode) => {
+        if (!childrenNodeDSL) childrenNodeDSL = []
+        const child = newGenerateChildrenComponentNode(
+          childNode,
+          realDisplayName,
+          pathToChildren,
+          scale,
+        )
+        childrenNodeDSL.push(child)
+      })
+    }
+    return {
+      showName: widgetInfo.displayName,
+      type: widgetInfo.type,
+      containerType: widgetInfo.containerType as CONTAINER_TYPE,
+      parentNode: parentNodeDisplayName,
+      childrenNode: childrenNodeDSL,
+      displayName: realDisplayName,
+      props: {},
+      version: widgetInfo.version,
+    }
+  }
+  const layoutInfo = generateWidgetLayoutInfo(
+    widgetInfo.type,
+    widgetInfo.displayName,
+    widgetInfo.containerType,
+  )
+
+  return generateComponentNodeByWidgetInfo(
+    layoutInfo?.displayName || "",
+    widgetInfo,
+    parentNodeDisplayName,
+    pathToChildren,
+    scale,
+  )
+}
+
+export const newGenerateComponentNode = (
+  widgetType: WidgetType,
+  displayName: string,
+  parentNodeDisplayName: string,
+  pathToChildren: string[] = [],
+  scale: number = 1,
+) => {
+  let baseDSL: ComponentTreeNode
+  const baseConfig = widgetBuilder(widgetType).config
+  let childrenNodeDSL: ComponentTreeNode[] = []
+  const {
+    defaults,
+    type,
+    displayName: showName,
+    containerType = CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
+  } = baseConfig
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let props: Record<string, any> | undefined = {}
+  if (typeof defaults === "function") {
+    props = klona(defaults())
+  } else {
+    props = klona(defaults)
+  }
+  if (isObject(props) && Object.hasOwn(props, "formDataKey")) {
+    props.formDataKey = `{{${displayName}.displayName}}`
+  }
+
+  if (
+    isObject(props) &&
+    Object.prototype.hasOwnProperty.call(props, "events") &&
+    Array.isArray(props.events)
+  ) {
+    props.events = props.events.map((event) => {
+      if (event.actionType !== "widget") {
+        return event
+      } else {
+        return {
+          ...event,
+          widgetID: pathToChildren[pathToChildren.length - 1] || "unknown",
+        }
+      }
+    })
+  }
+
+  if (baseConfig.childrenNode && Array.isArray(baseConfig.childrenNode)) {
+    pathToChildren =
+      containerType === CONTAINER_TYPE.EDITOR_SCALE_SQUARE
+        ? [...pathToChildren, displayName]
+        : pathToChildren
+    baseConfig.childrenNode.map((childNode) => {
+      if (!childrenNodeDSL) childrenNodeDSL = []
+      const child = newGenerateChildrenComponentNode(
+        childNode,
+        displayName,
+        pathToChildren,
+        scale,
+      )
+      childrenNodeDSL.push(child)
+    })
+  }
+
+  baseDSL = {
+    showName: showName,
+    type,
+    displayName: displayName,
+    containerType,
+    parentNode: parentNodeDisplayName,
+    childrenNode: childrenNodeDSL,
+    props: props ?? {},
+  }
+  if (baseDSL.type === "LIST_WIDGET" || baseDSL.type === "GRID_LIST_WIDGET") {
+    baseDSL = transformListWidget(baseDSL)
+  } else {
+    baseDSL = transFormTemplateDisplayName(baseDSL)
+  }
+  return baseDSL
+}
+
+function transformListWidget(baseDSL: ComponentTreeNode) {
+  const container = baseDSL.childrenNode[0]
+  const templateChildren = container.childrenNode
+  templateChildren.map((node) => {
+    return transFormTemplateDisplayName(node, baseDSL.displayName)
+  })
+  return baseDSL
+}
+
+function transFormTemplateDisplayName(
+  baseDSL: ComponentTreeNode,
+  targetDisplayName: string = baseDSL.displayName,
+) {
+  const props = baseDSL.props
+  if (props && Array.isArray(props.$dynamicAttrPaths)) {
+    props.$dynamicAttrPaths.forEach((path) => {
+      const originValue = get(baseDSL, `props.${path}`, "")
+      const finalValue = originValue.replace(
+        TEMPLATE_DISPLAYNAME_KEY,
+        targetDisplayName,
+      )
+      set(baseDSL, `props.${path}`, finalValue)
+    })
+  }
+  return baseDSL
+}

package/utils/generators/generateDisplayName.ts

@@ -0,0 +1,98 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ComponentTreeNode } from "@/redux/currentApp/components/componentsState"
+export const ADD_DISPLAY_NAME = "addDisplayName"
+export const REMOVE_DISPLAY_NAME = "removeDisplayName"
+export const UPDATE_DISPLAY_NAME = "updateDisplayName"
+export const GENERATE_OR_UPDATE_DISPLAYNAME = "generateOrUpdateDisplayName"
+
+export const PLACEHOLDER_DISPLAYNAME = ["document", "utils"]
+
+export class DisplayNameGenerator {
+  static displayNameList = new Set<string>(PLACEHOLDER_DISPLAYNAME)
+  static appId: string = ""
+  static teamID: string = ""
+  static uid: string = ""
+  static namePrefix = ""
+  static isAlreadyGenerate(displayName: string): boolean {
+    return this.displayNameList.has(displayName)
+  }
+
+  static initApp(appId: string, teamID: string, uid: string, prefix) {
+    this.appId = appId
+    this.teamID = teamID
+    this.uid = uid
+    this.namePrefix = prefix
+  }
+  static removeNamePrefix (){
+    this.namePrefix = ""
+  }
+  static addNamePrefix (){
+    this.namePrefix = "impakt"
+  }
+  static generateDisplayName(type: string, showName?: string,): string {
+    let index = 1
+    let name = `${showName || type}${index}`
+    if (this.namePrefix) {
+      name = `${this.namePrefix}_${showName || type}${index}`
+    }
+    // check cache map
+    while (this.isAlreadyGenerate(name)) {
+      index = index + 1
+      if (this.namePrefix) {
+        name = `${this.namePrefix}_${showName || type}${index}`
+      } else {
+        name = `${showName || type}${index}`
+      }
+    }
+    this.displayNameList.add(name)
+    return name
+  }
+
+  static updateDisplayNameList(
+    componentNode: ComponentTreeNode,
+
+    actionList: any[],
+  ) {
+    this.displayNameList = new Set<string>(PLACEHOLDER_DISPLAYNAME)
+    actionList.forEach((action) => {
+      this.displayNameList.add(action.displayName)
+    })
+    this.addComponentDisplayName(componentNode)
+    const globalData = componentNode.props?.globalData ?? {}
+    Object.keys(globalData).forEach((key) => {
+      this.displayNameList.add(key)
+    })
+  }
+
+  static addComponentDisplayName(componentNode: ComponentTreeNode) {
+    this.displayNameList.add(componentNode.displayName)
+
+    componentNode.childrenNode?.forEach((child: any) => {
+      this.addComponentDisplayName(child)
+    })
+  }
+
+  static addDisplayNames(displayNames: string[]) {
+    displayNames.forEach((displayName) => {
+      this.displayNameList.add(displayName)
+    })
+  }
+
+  static updateOrGenerateDisplayName(displayName: string) {
+    if (this.displayNameList.has(displayName)) {
+      return this.generateDisplayName(displayName)
+    }
+    this.displayNameList.add(displayName)
+    return displayName
+  }
+
+  static removeDisplayName(displayName: string) {
+    this.displayNameList.delete(displayName)
+  }
+
+  static removeDisplayNameMulti(displayNames: string[]) {
+    displayNames.forEach((displayName) => {
+      this.displayNameList.delete(displayName)
+    })
+  }
+}