impaktapps-ui-builder 0.0.382460 → 1.0.0

package/redux/config/configReducer.ts

@@ -0,0 +1,337 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { CaseReducer, PayloadAction } from "@reduxjs/toolkit"
+import {
+  ConfigInitialState,
+  ConfigState,
+  ImpaktMode,
+} from "@/redux/config/configState"
+import {
+  UpdateCanvasShapePayload,
+  // UpdateWSStatusPayload,
+} from "./configPayload"
+export interface Transformer {
+  rawData: string
+  enable: boolean
+}
+
+export interface IAdvancedConfig {
+  runtime: ACTION_RUN_TIME
+  pages: string[]
+  delayWhenLoaded: string
+  displayLoadingPage: boolean
+  isPeriodically: boolean
+  periodInterval: string
+}
+
+export enum ACTION_RUN_TIME {
+  APP_LOADED = "appLoaded",
+  PAGE_LOADING = "pageLoading",
+  NONE = "none",
+}
+export const INIT_ACTION_ADVANCED_CONFIG: IAdvancedConfig = {
+  runtime: ACTION_RUN_TIME.NONE,
+  pages: [],
+  delayWhenLoaded: "",
+  displayLoadingPage: false,
+  isPeriodically: false,
+  periodInterval: "",
+}
+export const updateCopiedWidget: CaseReducer<
+  ConfigState,
+  PayloadAction<string >
+> = (state, action) => {
+  state.copiedWidgetDisplayName = action.payload
+}
+export const updateMovedWidget: CaseReducer<
+  ConfigState,
+  PayloadAction<string >
+> = (state, action) => {
+  state.moveWidgetDisplayName = action.payload
+}
+export const updateLeftPanel: CaseReducer<
+  ConfigState,
+  PayloadAction<boolean>
+> = (state, action) => {
+  state.openLeftPanel = action.payload
+}
+export interface IMockConfig {
+  enabled: boolean
+  mockData: string
+  enableForReleasedApp: boolean
+}
+export const INIT_ACTION_MOCK_CONFIG: IMockConfig = {
+  enabled: false,
+  enableForReleasedApp: false,
+  mockData: "",
+}
+export const updateImpaktAppsMode: CaseReducer<
+  ConfigState,
+  PayloadAction<ImpaktMode>
+> = (state, action) => {
+  state.mode = action.payload
+}
+
+export const resetConfig: CaseReducer<ConfigState, PayloadAction> = () => {
+  return ConfigInitialState
+}
+
+export const updateRightPanel: CaseReducer<
+  ConfigState,
+  PayloadAction<boolean>
+> = (state, action) => {
+  state.openRightPanel = action.payload
+}
+export const updateLayoutSection: CaseReducer<
+  ConfigState,
+  PayloadAction<{ sectionName: string, value: "disable" | "active" }>
+> = (state, action) => {
+  state.layoutSectionState[action.payload.sectionName] = action.payload.value;
+}
+export const resetLayoutSection: CaseReducer<
+  ConfigState,
+  PayloadAction<Record<string, "disable" | "active"> | undefined
+  >> = (state, action) => {
+    state.layoutSectionState = action.payload || { body: "active", "other": "disable" };
+  }
+export const updateStylePanel: CaseReducer<
+  ConfigState,
+  PayloadAction<boolean>
+> = (state, action) => {
+  state.openStylePanel = action.payload
+}
+export const updateThemePanel: CaseReducer<
+  ConfigState, PayloadAction<boolean>
+> = (state, action) => {
+  state.openThemePanel = action.payload;
+}
+export const updateScreenPanel: CaseReducer<
+  ConfigState, PayloadAction<boolean>
+> = (state, action) => {
+  state.openScreenPanel = action.payload;
+}
+export const updateBottomPanel: CaseReducer<
+  ConfigState,
+  PayloadAction<boolean>
+> = (state, action) => {
+  state.openBottomPanel = action.payload
+}
+export const updateSelectedThemePanel: CaseReducer<
+  ConfigState,
+  PayloadAction<string>
+> = (state, action) => {
+
+  state.selectedThemePanel = action.payload
+}
+
+export const updateSelectedClass: CaseReducer<
+  ConfigState,
+  PayloadAction<string>
+> = (state, action) => {
+  state.selectedClass = action.payload
+}
+export const updateDebuggerVisible: CaseReducer<
+  ConfigState,
+  PayloadAction<boolean>
+> = (state, action) => {
+  state.openDebugger = action.payload
+}
+
+export const updateSelectedComponent: CaseReducer<
+  ConfigState,
+  PayloadAction<string[]>
+> = (state, action) => {
+
+  state.selectedComponents = action.payload
+
+}
+
+export const updateSelectedScreen: CaseReducer<
+  ConfigState,
+  PayloadAction<"Mobile" | "Tablet" | "Desktop">
+> = (state, action) => {
+  state.screen = action.payload
+}
+export const changeSelectedAction: CaseReducer<
+  ConfigState,
+  PayloadAction<any>
+> = (state, action) => {
+  state.selectedAction = action.payload
+}
+
+export const updateCachedAction: CaseReducer<
+  ConfigState,
+  PayloadAction<unknown | null>
+> = (state, action) => {
+  state.cachedAction = action.payload
+}
+
+export const updateCachedActionAdvancedConfigReducer: CaseReducer<
+  ConfigState,
+  PayloadAction<Partial<IAdvancedConfig>>
+> = (state, action) => {
+  const cachedAction: any = state.cachedAction
+  if (!cachedAction) return
+  if (!cachedAction.config) {
+    cachedAction.config = {
+      public: false,
+      advancedConfig: INIT_ACTION_ADVANCED_CONFIG,
+      mockConfig: INIT_ACTION_MOCK_CONFIG,
+    }
+  }
+  if (!cachedAction.config.advancedConfig) {
+    cachedAction.config.advancedConfig = INIT_ACTION_ADVANCED_CONFIG
+  }
+  cachedAction.config.advancedConfig = {
+    ...cachedAction.config.advancedConfig,
+    ...action.payload,
+  }
+  state.cachedAction = cachedAction
+}
+
+// export const updateCachedActionMockConfigReducer: CaseReducer<
+//   ConfigState,
+//   PayloadAction<Partial<IMockConfig>>
+// > = (state, action) => {
+//   const cachedAction = state.cachedAction
+//   if (!cachedAction) return
+//   if (!cachedAction.config) {
+//     cachedAction.config = {
+//       public: false,
+//       advancedConfig: INIT_ACTION_ADVANCED_CONFIG,
+//       mockConfig: INIT_ACTION_MOCK_CONFIG,
+//     }
+//   }
+//   if (!cachedAction.config.mockConfig) {
+//     cachedAction.config.mockConfig = INIT_ACTION_MOCK_CONFIG
+//   }
+//   cachedAction.config.mockConfig = {
+//     ...cachedAction.config.mockConfig,
+//     ...action.payload,
+//   }
+//   state.cachedAction = cachedAction
+// }
+
+export const updateShowDot: CaseReducer<ConfigState, PayloadAction<boolean>> = (
+  state,
+  action,
+) => {
+  state.showDot = action.payload
+}
+export const updateGridContainer: CaseReducer<ConfigState, PayloadAction<boolean>> = (
+  state,
+  action,
+) => {
+  state.gridCanvas = action.payload
+}
+export const plusScale: CaseReducer<ConfigState, PayloadAction<void>> = (
+  state,
+) => {
+  state.scale = state.scale + 10
+}
+
+export const minusScale: CaseReducer<ConfigState, PayloadAction<void>> = (
+  state,
+) => {
+  state.scale = state.scale - 10
+}
+
+export const clearSelectedComponent: CaseReducer<
+  ConfigState,
+  PayloadAction<void>
+> = (state) => {
+  state.selectedComponents = []
+}
+
+export const setExpandedKey: CaseReducer<
+  ConfigState,
+  PayloadAction<string[]>
+> = (state, action) => {
+  state.expandedKeys = action.payload
+}
+
+export const removeExpandedKey: CaseReducer<
+  ConfigState,
+  PayloadAction<string>
+> = (state, action) => {
+  const index = state.expandedKeys.findIndex((key) => key === action.payload)
+  index > -1 && state.expandedKeys.splice(index, 1)
+}
+
+export const updateCanvasShapeReducer: CaseReducer<
+  ConfigState,
+  PayloadAction<UpdateCanvasShapePayload>
+> = (state, action) => {
+  const { canvasHeight, canvasWidth } = action.payload
+  state.canvasHeight = canvasHeight
+  state.canvasWidth = canvasWidth
+}
+
+export const updateDevicesOnlineStatusReducer: CaseReducer<
+  ConfigState,
+  PayloadAction<boolean>
+> = (state, action) => {
+  state.isOnline = action.payload
+}
+
+// export const updateWSStatusReducer: CaseReducer<
+//   ConfigState,
+//   PayloadAction<unknown>
+// > = (state, action) => {
+//   const { context, wsStatus } = action.payload
+//   state.wsStatus[context] = wsStatus
+// }
+
+export const updateHoveredComponent: CaseReducer<
+  ConfigState,
+  PayloadAction<string[]>
+> = (state, action) => {
+  state.hoveredComponents = action.payload
+}
+
+export const resetSelectedActionReducer: CaseReducer<
+  ConfigState,
+  PayloadAction<string>
+> = (state, action) => {
+  if (!state.selectedAction) return
+  const selectedActionDisplayName = state.selectedAction.displayName
+  const selectedActionID = state.selectedAction.actionID
+  if (selectedActionDisplayName === action.payload) {
+    state.selectedAction = null
+  }
+  if (!state.cachedAction) return
+  if (state.cachedAction.actionID === selectedActionID) {
+    state.cachedAction = null
+  }
+}
+
+export const addExpandedWidgetReducer: CaseReducer<
+  ConfigState,
+  PayloadAction<string[]>
+> = (state, action) => {
+  action.payload.forEach((displayName) => {
+    state.expandedWidgets[displayName] = true
+  })
+}
+
+export const removeExpandWidgetReducer: CaseReducer<
+  ConfigState,
+  PayloadAction<string[]>
+> = (state, action) => {
+  action.payload.forEach((displayName) => {
+    state.expandedWidgets[displayName] = false
+  })
+}
+
+export const setDraggingNodeIDsReducer: CaseReducer<
+  ConfigState,
+  PayloadAction<string[]>
+> = (state, action) => {
+  state.draggingComponentIDs = action.payload
+}
+
+export const setResizingNodeIDsReducer: CaseReducer<
+  ConfigState,
+  PayloadAction<string[]>
+> = (state, action) => {
+  state.resizingComponentIDs = action.payload
+}

package/redux/config/configSelector.ts

@@ -0,0 +1,199 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { createSelector } from "@reduxjs/toolkit"
+import { RootState } from "@/store"
+import { ACTION_RUN_TIME, INIT_ACTION_ADVANCED_CONFIG } from "./configReducer"
+
+export const getEditorConfig = (state: RootState) => {
+  return state.config
+}
+
+const isEditMode = (state: RootState) => {
+  return state.config.mode === "edit" || state.config.mode === "template-edit"
+}
+
+export const isOpenLeftPanel = (state: RootState) => {
+  return state.config.openLeftPanel && isEditMode(state)
+}
+export const isOpenMobileScreen = (state: RootState) => {
+  return state.config.screen == "Mobile" && isEditMode(state)
+}
+export const isOpenTabletScreen = (state: RootState) => {
+  return state.config.screen == "Tablet" && isEditMode(state)
+}
+export const isOpenDesktopScreen = (state: RootState) => {
+  return state.config.screen == "Desktop" && isEditMode(state)
+}
+
+export const isOpenThemePanel = (state: RootState) => {
+  return state.config.openThemePanel && isEditMode(state)
+}
+export const isOpenScreenPanel = (state: RootState) => {
+  return state.config.openScreenPanel && isEditMode(state)
+}
+export const isOpenBottomPanel = (state: RootState) => {
+  return state.config.openBottomPanel && isEditMode(state)
+}
+export const isOpenStylePanel = (state: RootState) => {
+  return state.config.openStylePanel && isEditMode(state)
+}
+export const isOpenRightPanel = (state: RootState) => {
+  return state.config.openRightPanel && isEditMode(state)
+}
+
+export const isOpenDebugger = (state: RootState) => {
+  return state.config.openDebugger && isEditMode(state)
+}
+export const getLayoutSectionState = (state: RootState) => {
+  return state.config.layoutSectionState
+}
+export const getPreviewEdgeWidth = (state: RootState) => {
+  return state.config.mode === "edit" ? 16 : 0
+}
+export const getSelectedTheme = (state: RootState) => {
+  return state.config.selectedThemePanel
+}
+export const getSelectedScreen = (state: RootState) => {
+  return state.config.screen
+}
+export const getIsIMPAKTMode = (state: RootState) => {
+  return state.config.mode
+}
+
+export const isShowDot = createSelector(
+  [getEditorConfig, isEditMode],
+  (editorConfig, isEditMode) => {
+    return editorConfig.showDot && isEditMode
+  },
+)
+
+export const getScale = (state: RootState) => {
+  return state.config.scale
+}
+
+export const getSelectedComponentDisplayNames = createSelector(
+  [getEditorConfig],
+  (editorConfig) => {
+    return editorConfig.selectedComponents
+  },
+)
+
+export const getSelectedAction = (state: RootState) => {
+  return state.config.selectedAction
+}
+
+export const getSelectedClass = (state: RootState) => {
+  return state.config.selectedClass
+}
+
+export const getCachedAction = (state: RootState): any => {
+  return state.config.cachedAction
+}
+
+export const getCachedTheme = (state: RootState): any => {
+  return state.config.cacheTheme
+}
+
+
+export const isSelected = (state: RootState, displayName: string) => {
+  return (
+    state.config.selectedComponents.findIndex((value) => {
+      return value == displayName
+    }) != -1
+  )
+}
+
+export const getExpandedKeys = (state: RootState) => {
+  return state.config.expandedKeys
+}
+
+export const getCanvasShape = createSelector(
+  [getEditorConfig],
+  (editorConfig) => {
+    return {
+      canvasWidth: editorConfig.canvasWidth,
+      canvasHeight: editorConfig.canvasHeight,
+    }
+  },
+)
+export const getCopiedWidget = (state: RootState) => {
+  return state.config.copiedWidgetDisplayName
+}
+export const getMoveWidget = (state: RootState) => {
+  return state.config.moveWidgetDisplayName
+}
+
+export const getIsOnline = (state: RootState) => {
+  return state.config.isOnline
+}
+export const getIsGridCanvas = (state: RootState) => {
+  return state.config.gridCanvas
+}
+export const getIsIMPAKTEditMode = (state: RootState) => {
+  return state.config.mode === "edit" || state.config.mode === "template-edit"
+}
+
+export const getIsIMPAKTGuideMode = (state: RootState) => {
+  return state.config.mode === "template-edit"
+}
+
+export const getIsIMPAKTPreviewMode = (state: RootState) => {
+  return state.config.mode === "preview"
+}
+
+export const getIsIMPAKTProductMode = (state: RootState) => {
+  return state.config.mode === "production"
+}
+
+export const getIsLikeProductMode = createSelector(
+  [getEditorConfig],
+  (editorConfig) => {
+    return editorConfig.mode === "preview" || editorConfig.mode === "production"
+  },
+)
+
+// export const getWSStatus = (state: RootState) => {
+//   return state.config.wsStatus
+// }
+
+// export const getDashboardWSStatus = (state: RootState) => {
+//   return state.config.wsStatus.DASHBOARD
+// }
+
+// export const getAppWSStatus = (state: RootState) => {
+//   return state.config.wsStatus.APP
+// }
+
+// export const getAgentWSStatus = (state: RootState) => {
+//   return state.config.wsStatus.AI_AGENT
+// }
+
+export const getHoveredComponents = createSelector(
+  [getEditorConfig],
+  (editorConfig) => {
+    return editorConfig.hoveredComponents
+  },
+)
+
+export const getCachedActionAdvancedConfig = createSelector(
+  [getCachedAction],
+  (cachedAction) => {
+    if (
+      !cachedAction ||
+      !cachedAction?.config ||
+      !cachedAction?.config?.advancedConfig
+    ) {
+      const initAdvancedConfig = INIT_ACTION_ADVANCED_CONFIG
+      if (cachedAction?.triggerMode === "automate") {
+        initAdvancedConfig.runtime = ACTION_RUN_TIME.APP_LOADED
+      }
+      return initAdvancedConfig
+    }
+    return cachedAction.config.advancedConfig
+  },
+)
+
+export const getExpandedWidgets = createSelector(
+  [getEditorConfig],
+  (config) => config.expandedWidgets,
+)

package/redux/config/configSlice.ts

@@ -0,0 +1,88 @@
+import { createSlice } from "@reduxjs/toolkit"
+import {
+  addExpandedWidgetReducer,
+  changeSelectedAction,
+  clearSelectedComponent,
+  minusScale,
+  plusScale,
+  removeExpandWidgetReducer,
+  removeExpandedKey,
+  resetConfig,
+  resetSelectedActionReducer,
+  setDraggingNodeIDsReducer,
+  setExpandedKey,
+  setResizingNodeIDsReducer,
+  updateBottomPanel,
+  updateCachedAction,
+  updateStylePanel,
+  // updateCachedActionMockConfigReducer,
+  updateCanvasShapeReducer,
+  updateDebuggerVisible,
+  updateDevicesOnlineStatusReducer,
+  updateHoveredComponent,
+  updateImpaktAppsMode,
+  updateLeftPanel,
+  updateRightPanel,
+  updateSelectedComponent,
+  updateShowDot,
+  updateGridContainer,
+  updateCachedActionAdvancedConfigReducer,
+  updateSelectedClass,
+  updateThemePanel,
+  updateSelectedThemePanel,
+  updateSelectedScreen,
+  resetLayoutSection,
+  updateLayoutSection,
+  updateScreenPanel,
+  updateMovedWidget,
+  updateCopiedWidget
+  // updateWSStatusReducer,
+} from "@/redux/config/configReducer"
+import { ConfigInitialState } from "@/redux/config/configState"
+
+const configSlice = createSlice({
+  name: "config",
+  initialState: ConfigInitialState,
+  reducers: {
+    updateCopiedWidget,
+    updateMovedWidget,
+    resetConfig,
+    updateImpaktAppsMode,
+    updateLeftPanel,
+    updateRightPanel,
+    updateBottomPanel,
+    updateDebuggerVisible,
+    updateShowDot,
+    updateSelectedComponent,
+    clearSelectedComponent,
+    changeSelectedAction,
+    updateCachedAction,
+    updateCachedActionAdvancedConfigReducer,
+    updateStylePanel,
+    // updateCachedActionMockConfigReducer,
+    plusScale,
+    minusScale,
+    setExpandedKey,
+    removeExpandedKey,
+    updateCanvasShapeReducer,
+    updateDevicesOnlineStatusReducer,
+    updateSelectedClass,
+    // updateWSStatusReducer,
+    updateHoveredComponent,
+    resetSelectedActionReducer,
+    addExpandedWidgetReducer,
+    removeExpandWidgetReducer,
+    setDraggingNodeIDsReducer,
+    setResizingNodeIDsReducer,
+    updateGridContainer,
+    updateSelectedThemePanel,
+    updateSelectedScreen,
+    updateThemePanel,
+    resetLayoutSection,
+    updateLayoutSection,
+    updateScreenPanel
+  },
+})
+
+export const configActions = configSlice.actions
+export default configSlice.reducer

package/redux/config/configState.ts

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type ImpaktMode = "preview" | "edit" | "production" | "template-edit"
+export type ScreenPayload = "Mobile" | "Desktop" | "Tablet"
+export interface ConfigState {
+  openLeftPanel: boolean
+  openBottomPanel: boolean
+  openStylePanel: boolean
+  openScreenPanel: boolean
+  gridCanvas: boolean
+  openRightPanel: boolean
+  layoutSectionState: Record<string, "active" | "disable">
+  selectedClass: string;
+  openThemePanel: boolean,
+  selectedThemePanel: string,
+  openDebugger: boolean
+  showDot: boolean
+  scale: number
+  screen: ScreenPayload
+  selectedComponents: string[]
+  selectedAction: any
+  cachedAction: any
+  cacheTheme: unknown | null
+  cachedClass: unknown | null
+  expandedKeys: string[]
+  expandedWidgets: Record<string, boolean>
+  mode: ImpaktMode
+  canvasHeight: number
+  canvasWidth: number
+  isOnline: boolean
+  copiedWidgetDisplayName: string 
+  moveWidgetDisplayName:  string ,
+
+
+  // wsStatus: Record<string,unknown>
+  hoveredComponents: string[]
+  draggingComponentIDs: string[]
+  resizingComponentIDs: string[]
+}
+export const ConfigInitialState: ConfigState = {
+  openLeftPanel: false,
+  mode: "edit",
+  openThemePanel: false,
+  openScreenPanel: false,
+  selectedThemePanel: "Default_Theme",
+  openStylePanel: false,
+  openBottomPanel: false,
+  screen: "Desktop",
+  openRightPanel: false,
+  openDebugger: false,
+  gridCanvas: true,
+  scale: 100,
+  layoutSectionState: {
+    body: "active",
+    "other": "disable"
+  },
+  selectedClass: null,
+  cacheTheme: null,
+  selectedComponents: [],
+  selectedAction: null,
+  cachedClass: null,
+  cachedAction: null,
+  showDot: true,
+  expandedKeys: [],
+  canvasHeight: 1080,
+  canvasWidth: 1920,
+  copiedWidgetDisplayName:  "" ,
+  moveWidgetDisplayName: "" ,
+  isOnline: true,
+  hoveredComponents: [],
+  expandedWidgets: {},
+  // wsStatus: {
+  //   [IMPAKTAPPS_WEBSOCKET_CONTEXT.DASHBOARD]: IMPAKTAPPS_WEBSOCKET_STATUS.INIT,
+  //   [IMPAKTAPPS_WEBSOCKET_CONTEXT.APP]: IMPAKTAPPS_WEBSOCKET_STATUS.INIT,
+  //   [IMPAKTAPPS_WEBSOCKET_CONTEXT.APP_BINARY]: IMPAKTAPPS_WEBSOCKET_STATUS.INIT,
+  //   [IMPAKTAPPS_WEBSOCKET_CONTEXT.AI_AGENT]: IMPAKTAPPS_WEBSOCKET_STATUS.INIT,
+  // },
+  draggingComponentIDs: [],
+  resizingComponentIDs: [],
+}