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

package/utils/basicConfig.ts

@@ -1,144 +0,0 @@
-
-
-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

@@ -1,298 +0,0 @@
-/* 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

@@ -1,147 +0,0 @@
-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")
-  }
-}