impaktapps-ui-builder 0.0.382460 → 1.0.0

package/utils/basicConfig.ts

@@ -0,0 +1,144 @@
+
+
+import { CONTAINER_TYPE, ComponentTreeNode, ModalSectionNode, PADDING_MODE, SECTION_POSITION, SectionTreeNode } from "./generators/interface"
+
+  
+  export const DEFAULT_BODY_COLUMNS_NUMBER = 32
+  export const DEFAULT_ASIDE_COLUMNS_NUMBER = 8
+  
+  export const BASIC_BODY_SECTION_CONFIG: SectionTreeNode = {
+    displayName: "bodySection1",
+    parentNode: "page1",
+    showName: "bodySection",
+    type: "SECTION_NODE",
+    containerType: CONTAINER_TYPE.EDITOR_LAYOUT_SQUARE,
+    h: 0,
+    w: 0,
+    minH: 0,
+    minW: 0,
+    x: -1,
+    y: -1,
+    z: 0,
+    version: 0,
+    props: {
+      currentViewIndex: 0,
+      viewSortedKey: ["bodySection1-bodySectionContainer1"],
+      defaultViewKey: "sub-page1",
+      sectionViewConfigs: [
+        {
+          id: String(Math.random()),
+          viewDisplayName: "bodySection1-bodySectionContainer1",
+          key: "sub-page1",
+          path: "sub-page1",
+        },
+      ],
+      style: {
+        padding: {
+          mode: PADDING_MODE.ALL,
+          size: "24",
+        },
+      },
+    },
+    childrenNode: [
+      {
+        displayName: "bodySection1-bodySectionContainer1",
+        parentNode: "bodySection",
+        showName: "bodySection1-bodySectionContainer1",
+        type: "CONTAINER_NODE",
+        containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
+        h: 0,
+        w: 0,
+        minH: 0,
+        minW: 0,
+        x: -1,
+        y: -1,
+        z: 0,
+        version: 0,
+        childrenNode: [],
+        props: {},
+      },
+    ],
+  }
+  
+  export const BASIC_MODAL_SECTION_CONFIG: ModalSectionNode = {
+    displayName: "modalSection1",
+    parentNode: "page1",
+    showName: "modalSection",
+    type: "MODAL_SECTION_NODE",
+    containerType: CONTAINER_TYPE.EDITOR_LAYOUT_SQUARE,
+    h: 0,
+    w: 0,
+    minH: 0,
+    minW: 0,
+    x: -1,
+    y: -1,
+    z: 0,
+    version: 0,
+    props: {},
+    childrenNode: [],
+  }
+  
+  export const BASIC_APP_CONFIG: ComponentTreeNode = {
+    displayName: "root",
+    parentNode: "",
+    showName: "root",
+    type: "DOT_PANEL",
+    containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
+    h: 0,
+    w: 0,
+    minH: 0,
+    minW: 0,
+    x: -1,
+    y: -1,
+    z: 0,
+    version: 0,
+    props: {
+      currentPageIndex: 0,
+      pageSortedKey: ["page1"],
+    },
+    childrenNode: [
+      {
+        displayName: "page1",
+        parentNode: "root",
+        showName: "page",
+        type: "PAGE_NODE",
+        containerType: CONTAINER_TYPE.EDITOR_PAGE_SQUARE,
+        h: 0,
+        w: 0,
+        minH: 0,
+        minW: 0,
+        x: -1,
+        y: -1,
+        z: 0,
+        version: 0,
+        props: {
+          canvasSize: "auto",
+          canvasWidth: 100,
+          layout: "default",
+          leftPosition: SECTION_POSITION.NONE,
+          rightPosition: SECTION_POSITION.NONE,
+          hasFooter: false,
+          hasHeader: false,
+          hasLeft: false,
+          hasRight: false,
+          leftWidth: 0,
+          rightWidth: 0,
+          topHeight: 0,
+          bottomHeight: 0,
+          isLeftFixed: true,
+          isRightFixed: true,
+          isHeaderFixed: true,
+          isFooterFixed: true,
+          showLeftFoldIcon: false,
+          showRightFoldIcon: false,
+          leftColumns: DEFAULT_ASIDE_COLUMNS_NUMBER,
+          rightColumns: DEFAULT_ASIDE_COLUMNS_NUMBER,
+          headerColumns: DEFAULT_BODY_COLUMNS_NUMBER,
+          footerColumns: DEFAULT_BODY_COLUMNS_NUMBER,
+          bodyColumns: DEFAULT_BODY_COLUMNS_NUMBER,
+        },
+        childrenNode: [BASIC_BODY_SECTION_CONFIG, BASIC_MODAL_SECTION_CONFIG],
+      },
+    ],
+  }
+  

package/utils/changeDisplayNameHelper.ts

@@ -0,0 +1,298 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { get, toPath } from "lodash-es"
+
+import { UpdateComponentSlicePropsPayload } from "@/redux/currentApp/components/componentsPayload"
+import { getComponentMap, getRawTree } from "@/redux/currentApp/components/componentsSelector"
+import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
+import {
+  getInDependenciesMap,
+} from "@/redux/currentApp/executionTree/executionSelector"
+import { convertPathToString, hasDynamicStringSnippet } from "@/redux/utils"
+import { isAction, isWidget } from "./executionTreeHelper/utils"
+import { ComponentMapNode } from "./generators/interface"
+import { AppListenerEffectAPI, RootState } from "@/store"
+import { getActionList } from "@/redux/currentApp/action/actionSelector"
+import { actionActions } from "@/redux/currentApp/action/actionSlice"
+
+const changeDisplayNameHelper = (
+  independenciesMap: Record<string, string[]>,
+  seeds: Record<string, any>,
+  oldDisplayName: string,
+  newDisplayName: string,
+  type: "displayName" | "globalDataKey" = "displayName",
+) => {
+  const updateWidgetSlice: UpdateComponentSlicePropsPayload[] = []
+  const updateActionSlice: any[] = []
+  Object.keys(independenciesMap).forEach((inDepPath) => {
+    const paths = toPath(inDepPath)
+    if (
+      (type === "displayName" && oldDisplayName === paths[0]) ||
+      (type === "globalDataKey" && oldDisplayName === paths[1])
+    ) {
+      const usedPaths = independenciesMap[inDepPath]
+      usedPaths.forEach((usedPath) => {
+        const usedPathArray = toPath(usedPath)
+        const displayName =
+          usedPathArray[0] === oldDisplayName
+            ? newDisplayName
+            : usedPathArray[0]
+        const finalUsedPathArray = [...usedPathArray]
+        finalUsedPathArray.splice(0, 1, displayName)
+        const finalUsedPath = convertPathToString(finalUsedPathArray)
+        const maybeDynamicStringValue = get(seeds, finalUsedPath)
+        if (hasDynamicStringSnippet(maybeDynamicStringValue)) {
+          const newDynamicStringValue = maybeDynamicStringValue.replace(
+            oldDisplayName,
+            newDisplayName,
+          )
+          const propsPath = convertPathToString(usedPathArray.slice(1))
+          const seed = seeds[displayName]
+          if (isAction(seed)) {
+            updateActionSlice.push({
+              displayName: displayName,
+              actionID: seed.$actionID,
+              propsSlice: {
+                [propsPath]: newDynamicStringValue,
+              },
+            })
+          }
+          if (isWidget(seed)) {
+            updateWidgetSlice.push({
+              displayName: displayName,
+              propsSlice: {
+                [propsPath]: newDynamicStringValue,
+              },
+            })
+          }
+        }
+      })
+    }
+  })
+
+  return { updateWidgetSlice, updateActionSlice }
+}
+
+const changeEventUsedDisplayNameHelper = (
+  events: Record<string, unknown>[],
+  oldDisplayName: string,
+  newDisplayName: string,
+  prefix: string,
+) => {
+  const propsSlice: {
+    [x: string]: unknown
+  } = {}
+  events.forEach((event, index) => {
+    if (event.widgetID === oldDisplayName) {
+      const path = convertPathToString([prefix, index, "widgetID"])
+      propsSlice[path] = newDisplayName
+    }
+
+    if (event.queryID === oldDisplayName) {
+      const path = convertPathToString([prefix, index, "queryID"])
+      propsSlice[path] = newDisplayName
+    }
+
+    if (event.stateDisplayName === oldDisplayName) {
+      const path = convertPathToString([prefix, index, "stateDisplayName"])
+      propsSlice[path] = newDisplayName
+    }
+
+    // if (event.actionType === EVENT_ACTION_TYPE.SET_ROUTER) {
+    //   if (event.pagePath === oldDisplayName) {
+    //     const path = convertPathToString([prefix, index, "pagePath"])
+    //     propsSlice[path] = newDisplayName
+    //   }
+    //   if (event.viewPath === oldDisplayName) {
+    //     const path = convertPathToString([prefix, index, "viewPath"])
+    //     propsSlice[path] = newDisplayName
+    //   }
+    // }
+  })
+  return propsSlice
+}
+
+const changeEventHandlerReferenceHelper = (
+  oldDisplayName: string,
+  newDisplayName: string,
+  actionLists: any[],
+  componentMaps: Record<string, ComponentMapNode>,
+) => {
+  const updateWidgetSlice: UpdateComponentSlicePropsPayload[] = []
+  const updateActionSlice: any[] = []
+
+  actionLists.forEach((action) => {
+    const { content } = action
+    const { successEvent, failedEvent } = content as any
+    if (Array.isArray(successEvent)) {
+      const prefix = "content.successEvent"
+      const propsSlice = changeEventUsedDisplayNameHelper(
+        successEvent,
+        oldDisplayName,
+        newDisplayName,
+        prefix,
+      )
+      updateActionSlice.push({
+        displayName: action.displayName,
+        actionID: action.actionID,
+        propsSlice: propsSlice,
+      })
+    }
+
+    if (Array.isArray(failedEvent)) {
+      const prefix = "content.failedEvent"
+
+      const propsSlice = changeEventUsedDisplayNameHelper(
+        failedEvent,
+        oldDisplayName,
+        newDisplayName,
+        prefix,
+      )
+      updateActionSlice.push({
+        displayName: action.displayName,
+        actionID: action.actionID,
+        propsSlice: propsSlice,
+      })
+    }
+  })
+
+  Object.values(componentMaps).forEach((componentMap) => {
+    const { props } = componentMap
+    if (Array.isArray(props?.events)) {
+      const prefix = "events"
+      const propsSlice = changeEventUsedDisplayNameHelper(
+        props.events,
+        oldDisplayName,
+        newDisplayName,
+        prefix,
+      )
+      updateWidgetSlice.push({
+        displayName: componentMap.displayName,
+        propsSlice: propsSlice,
+      })
+    }
+  })
+  return { updateWidgetSlice, updateActionSlice }
+}
+
+const mergeUpdateSlice = (
+  updateWidgetSlice: UpdateComponentSlicePropsPayload[],
+  updateActionSlice: any[],
+) => {
+  const updateWidgetSliceMap: Record<string, UpdateComponentSlicePropsPayload> =
+    {}
+
+  updateWidgetSlice.forEach((item) => {
+    const { displayName } = item
+    if (updateWidgetSliceMap[displayName]) {
+      updateWidgetSliceMap[displayName].propsSlice = {
+        ...updateWidgetSliceMap[displayName].propsSlice,
+        ...item.propsSlice,
+      }
+    } else {
+      updateWidgetSliceMap[displayName] = item
+    }
+  })
+
+  const updateActionSliceMap: Record<string, any> = {}
+
+  updateActionSlice.forEach((item) => {
+    const { displayName } = item
+    if (updateActionSliceMap[displayName]) {
+      updateActionSliceMap[displayName].propsSlice = {
+        ...updateActionSliceMap[displayName].propsSlice,
+        ...item.propsSlice,
+      }
+    } else {
+      updateActionSliceMap[displayName] = item
+    }
+  })
+
+  return {
+    updateWidgetSlice: Object.values(updateWidgetSliceMap),
+    updateActionSlice: Object.values(updateActionSliceMap),
+  }
+}
+
+export const mixedChangeDisplayNameHelper = (
+  listenerApi: AppListenerEffectAPI,
+  oldDisplayName: string,
+  newDisplayName: string,
+  type: "displayName" | "globalDataKey" = "displayName",
+) => {
+  const rootState = listenerApi.getState()
+  const independenciesMap = getInDependenciesMap(rootState)
+  const seeds = getRawTree(rootState)
+  const { updateActionSlice, updateWidgetSlice } = changeDisplayNameHelper(
+    independenciesMap,
+    seeds,
+    oldDisplayName,
+    newDisplayName,
+    type,
+  )
+  const {
+    updateActionSlice: updateActionEventSlice,
+    updateWidgetSlice: updateWidgetEventSlice,
+  } = changeEventHandlerReferenceHelper(
+    oldDisplayName,
+    newDisplayName,
+    getActionList(rootState)
+    //[]
+    ,
+    getComponentMap(rootState),
+  )
+
+  const contactedUpdateActionSlices = updateActionSlice.concat(
+    ...updateActionEventSlice,
+  )
+  const contactedUpdateWidgetSlice = updateWidgetSlice.concat(
+    ...updateWidgetEventSlice,
+  )
+
+  const {
+    updateActionSlice: mergedActionSlice,
+    updateWidgetSlice: mergedWidgetSlice,
+  } = mergeUpdateSlice(contactedUpdateWidgetSlice, contactedUpdateActionSlices)
+  listenerApi.dispatch(
+    componentsActions.batchUpdateMultiComponentSlicePropsReducer(
+      mergedWidgetSlice,
+    ),
+  )
+  listenerApi.dispatch(
+    actionActions.batchUpdateMultiActionSlicePropsReducer(mergedActionSlice),
+  )
+}
+
+export const copyWidgetDisplayNameHelper = (
+  oldDisplayName: string,
+  newDisplayName: string,
+  rootState: RootState
+) => {
+
+  const independenciesMap = getInDependenciesMap(rootState)
+  const seeds = getRawTree(rootState)
+  const updatePathsMapValue: Record<string, unknown> = {}
+  Object.keys(independenciesMap).forEach((inDepPath) => {
+    const usedPaths = independenciesMap[inDepPath]
+    usedPaths.forEach((usedPath) => {
+      const usedPathArray = toPath(usedPath)
+      const displayName = usedPathArray[0]
+      if (displayName !== oldDisplayName) {
+        return
+      }
+      const finalUsedPathArray = [...usedPathArray]
+      const finalUsedPath = convertPathToString(finalUsedPathArray)
+      const maybeDynamicStringValue = get(seeds, finalUsedPath)
+      if (hasDynamicStringSnippet(maybeDynamicStringValue)) {
+        const newDynamicStringValue = maybeDynamicStringValue.replace(
+          oldDisplayName,
+          newDisplayName,
+        )
+        const propsPath = convertPathToString(usedPathArray.slice(1))
+        updatePathsMapValue[propsPath] = newDynamicStringValue
+      }
+    })
+  })
+
+  return updatePathsMapValue
+}

package/utils/color-palette.ts

@@ -0,0 +1,147 @@
+import Color from "color"
+// import { globalColor, hasGlobalColor, IMPAKTAPPSPrefix } from "./global-color"
+import chroma from "chroma-js"
+import { globalColor, hasGlobalColor } from "./colorBuilder"
+
+const formats = ["hex", "rgb", "hsl"]
+
+function getFormat(format: string) {
+  if (!format || formats.indexOf(format) < 0) {
+    return "hex"
+  }
+  return format
+}
+
+export const getColorString = (
+  color: {
+    [x: string]: any
+  },
+  format: string,
+  alpha?: number,
+) => {
+  const innerFormat = getFormat(format)
+
+  if (innerFormat === "hex") {
+    return color[innerFormat]()
+  }
+  return color[innerFormat]().alpha(alpha).round().string()
+}
+
+export function colorPalette(
+  originColor: string,
+  i: number,
+  format: "hex" | "rgb" | "hsl" = "hex",
+) {
+  const color = Color(originColor)
+
+  const alpha = color.alpha()
+  const h = color.hue()
+  const s = color.saturationv()
+  const v = color.value()
+
+  const hueStep = 2
+  const maxSaturationStep = 100
+  const minSaturationStep = 9
+
+  const maxValue = 100
+  const minValue = 30
+
+  function getNewHue(isLight: boolean, i: number) {
+    let hue
+    if (h >= 60 && h <= 240) {
+      hue = isLight ? h - hueStep * i : h + hueStep * i
+    } else {
+      hue = isLight ? h + hueStep * i : h - hueStep * i
+    }
+    if (hue < 0) {
+      hue += 360
+    } else if (hue >= 360) {
+      hue -= 360
+    }
+    return Math.round(hue)
+  }
+
+  function getNewSaturation(isLight: boolean, i: number) {
+    let newSaturation
+
+    if (isLight) {
+      newSaturation =
+        s <= minSaturationStep ? s : s - ((s - minSaturationStep) / 5) * i
+    } else {
+      newSaturation = s + ((maxSaturationStep - s) / 4) * i
+    }
+    return newSaturation
+  }
+
+  function getNewValue(isLight: boolean, i: number) {
+    return isLight
+      ? v + ((maxValue - v) / 5) * i
+      : v <= minValue
+      ? v
+      : v - ((v - minValue) / 4) * i
+  }
+
+  const isLight = i < 6
+  const index = isLight ? 6 - i : i - 6
+
+  const retColor =
+    i === 6
+      ? color
+      : Color({
+          h: getNewHue(isLight, index),
+          s: getNewSaturation(isLight, index),
+          v: getNewValue(isLight, index),
+        })
+
+  return getColorString(retColor, format, alpha)
+}
+
+const transRule: Record<string, number> = {
+  "n-01": 9,
+  "01": 8,
+  "02": 7,
+  "03": 6,
+  "04": 5,
+  "05": 4,
+  "06": 3,
+  "07": 2,
+  "08": 1,
+}
+
+export const getColor = (color: string, step: string) => {
+  let colorStyle
+  if (color === "transparent") {
+    return "#00000000"
+  }
+  if (!hasGlobalColor(`${color}-${step}`)) {
+    const formatStep = transRule[step]
+    const formatNum = formatStep ? formatStep : 6
+    try {
+      colorStyle = colorPalette(color, formatNum, "hsl")
+    } catch (e) {
+      colorStyle = "#00000000"
+    }
+  } else {
+    colorStyle = globalColor(`${color}-${step}`)
+  }
+  return colorStyle
+}
+
+export const getColorShadow = (color: string, step: string): string => {
+  return `0 0 8px 0
+        ${chroma(getColor(color, step)).alpha(0.15).hex()}`
+}
+
+export const getSpecialThemeColor = (color: string) => {
+  if (color === "white") {
+    return getColor("white", "01")
+  } else if (
+    color === "blackAlpha" ||
+    color === "gray" ||
+    color === "grayBlue"
+  ) {
+    return getColor(color, "02")
+  } else {
+    return getColor(color, "03")
+  }
+}