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

package/redux/config/configReducer.ts

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

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

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

@@ -1,79 +0,0 @@
-/* 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: [],
-}