impaktapps-ui-builder 0.0.382460 → 1.0.0

package/utils/undoRedo/undo.ts

@@ -0,0 +1,82 @@
+import { AnyAction } from "@reduxjs/toolkit"
+import { cloneDeep } from "lodash"
+// import { createMessage } from "@IMPAKTAPPS-design/react"
+// import i18n from "@/i18n/config"
+import { REDUX_ACTION_FROM } from "@/middleware/undoRedo/interface"
+import { IMPAKTAPPSSnapshot } from "@/page/App/components/dotPanel/constant/snapshotNew"
+// import { getExecutionWidgetLayoutInfo } from "@/redux/currentApp/executionTree/executionSelector"
+import { reduxActionDependOnRestAPI } from "./antonymyRule"
+import { CircularStack } from "./circularStack"
+import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
+
+export const UNDO_REDO_STACK_MAX_LENGTH = 30
+
+// const message = createMessage()
+
+export class IMPAKTAPPS_UNDO_REDO {
+  undoStack: CircularStack<AnyAction[]>
+  redoStack: CircularStack<AnyAction[]>
+
+  constructor(maxStackLength: number = UNDO_REDO_STACK_MAX_LENGTH) {
+    this.undoStack = new CircularStack<AnyAction[]>(maxStackLength)
+    this.redoStack = new CircularStack<AnyAction[]>(maxStackLength)
+  }
+
+  pushToUndoStack(undoAction: AnyAction[]) {
+    if (!this.redoStack.isEmpty() && !undoAction[0].from) {
+      this.redoStack.clear()
+    }
+    this.undoStack.push(undoAction)
+  } 
+
+  popFromUndoStack(aaaStore) {
+    const rootState = cloneDeep(aaaStore.getState())
+    const snapShot = getExecutionResult(rootState)
+    IMPAKTAPPSSnapshot.setSnapshot(snapShot)
+    if (this.undoStack.isEmpty()) {
+      // message.warning({
+      //   content: i18n.t("frame.message.undo.nothing"),
+      // })
+    } else {
+      const info = this.undoStack.pop() as AnyAction[]
+
+      reduxActionDependOnRestAPI(info, REDUX_ACTION_FROM.UNDO,aaaStore)
+    }
+  }
+
+  modifyUndoStackAtLast(undoAction: AnyAction[], isRedo: boolean = false) {
+    if (this.undoStack.isEmpty()) {
+      return
+    }
+    const lastUndoAction = this.undoStack.pop() as AnyAction[]
+    if (isRedo) {
+      this.undoStack.push([...lastUndoAction, ...undoAction])
+    } else {
+      this.undoStack.push([...undoAction, ...lastUndoAction])
+    }
+  }
+
+  pushToRedoStack(redoAction: AnyAction[]) {
+    this.redoStack.push(redoAction)
+  }
+
+  popFromRedoStack(aaaStore) {
+    const rootState = cloneDeep(aaaStore.getState())
+    const snapShot = getExecutionResult(rootState)
+    IMPAKTAPPSSnapshot.setSnapshot(snapShot)
+    if (this.redoStack.isEmpty()) {
+      // message.warning({
+      //   content: i18n.t("frame.message.redo.nothing"),
+      // })
+    } else {
+      const info = this.redoStack.pop() as AnyAction[]
+      reduxActionDependOnRestAPI(info, REDUX_ACTION_FROM.REDO,aaaStore)
+    }
+  }
+  destroy() {
+    this.undoStack.clear()
+    this.redoStack.clear()
+  }
+}
+
+export default new IMPAKTAPPS_UNDO_REDO()

package/utils/undoRedo/undoRedoMethod/action.ts

@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { omit } from "lodash-es"
+import { getActionList } from "@/redux/currentApp/action/actionSelector"
+import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName"
+import { ActionContent, ActionItem } from "@/redux/currentApp/action/interface"
+
+export const addActionItemWhenUndoRedo = async (
+    action: ActionItem<ActionContent>,
+) => {
+
+    omit(action, ["displayName", "actionID"])
+    DisplayNameGenerator.isAlreadyGenerate(action.displayName)
+        ? DisplayNameGenerator.generateDisplayName(action.actionType)
+        : DisplayNameGenerator.updateOrGenerateDisplayName(action.displayName)
+
+}
+
+export const removeActionItemWhenUndoRedo = async (displayName: string,aaaStore:any) => {
+    const actionList = getActionList(aaaStore.getState())
+    const targetAction = actionList.find(
+        (item) => item.displayName === displayName,
+    )
+    if (!targetAction) {
+        throw new Error("action not found")
+    }
+
+}
+
+export const updateActionItemReducerWhenUndoRedo = async (
+    action: ActionItem<ActionContent>,aaaStore:any
+) => {
+    const actionList = getActionList(aaaStore.getState())
+    const targetAction = actionList.find(
+        (item) => action.displayName === item.displayName,
+    )
+    if (!targetAction) {
+        throw new Error("action not found")
+    }
+
+}
+
+export const updateActionDisplayNameReducerWhenUndoRedo = async (
+    oldDisplayName: string,
+    newDisplayName: string,
+    aaaStore,
+) => {
+
+    const actionList = getActionList(aaaStore.getState())
+    actionList.find(
+        (action) => action.displayName === oldDisplayName,
+    )
+
+}

package/utils/userAgent/index.ts

@@ -0,0 +1,30 @@
+export const getUserPlatform = () => {
+  const platform =
+    "userAgentData" in navigator
+      ? // @ts-ignore
+        (navigator.userAgentData.platform as string)
+      : navigator.platform
+
+  const localStringForPlatform = platform.toLocaleLowerCase()
+  if (/(mac|iphone|ipod|ipad)/i.test(localStringForPlatform)) {
+    return "macOS"
+  }
+  if (/(win)/i.test(localStringForPlatform)) {
+    return "Windows"
+  }
+  if (/(linux)/i.test(localStringForPlatform)) {
+    return "Linux"
+  }
+}
+
+export const isMAC = () => {
+  return getUserPlatform() === "macOS"
+}
+
+export const isWindows = () => {
+  return getUserPlatform() === "Windows"
+}
+
+export const isLinux = () => {
+  return getUserPlatform() === "Linux"
+}

package/utils/validationFactory/index.ts

@@ -0,0 +1,155 @@
+// import { isObject } from "@/utils/typeHelper"
+
+import { isObject } from "@/redux/utils"
+
+export enum VALIDATION_TYPES {
+  STRING = "String",
+  NUMBER = "Number",
+  BOOLEAN = "Boolean",
+  ARRAY = "Array",
+  OBJECT = "Object",
+  UNDEFINED = "Undefined",
+  ANY = "any",
+}
+
+export interface ValidationResponse {
+  isValid: boolean
+  safeValue: any
+  errorMessage?: string
+}
+
+export type ValidateFunctionType = (
+  value: unknown,
+  currentListName: string,
+) => ValidationResponse
+
+// TODO: @weichen errorMessage i18n
+export const validationFactory: Record<string, ValidateFunctionType> = {
+  [VALIDATION_TYPES.STRING]: (value, currentListName) => {
+    if (value == undefined) {
+      return {
+        isValid: true,
+        safeValue: undefined,
+      }
+    }
+    if (Array.isArray(value) && currentListName) {
+      const isString = typeof value[0] === "string"
+      if (!isString) {
+        return {
+          isValid: false,
+          safeValue: "",
+          errorMessage: "Must be a string",
+        }
+      }
+      return {
+        isValid: true,
+        safeValue: value[0],
+      }
+    }
+    const isString = typeof value === "string"
+
+    if (!isString) {
+      return {
+        isValid: false,
+        safeValue: "",
+        errorMessage: "Must be a string",
+      }
+    }
+    return {
+      isValid: true,
+      safeValue: value,
+    }
+  },
+  [VALIDATION_TYPES.BOOLEAN]: (value, currentListName) => {
+    if (value == undefined || value === "") {
+      return {
+        isValid: true,
+        safeValue: undefined,
+      }
+    }
+    if (Array.isArray(value) && currentListName) {
+      return {
+        isValid: true,
+        safeValue: value[0],
+      }
+    }
+    const isBoolean = typeof value === "boolean"
+    if (!isBoolean) {
+      return {
+        isValid: false,
+        safeValue: false,
+        errorMessage: "Must be a boolean",
+      }
+    }
+    return {
+      isValid: true,
+      safeValue: value,
+    }
+  },
+  [VALIDATION_TYPES.NUMBER]: (value, currentListName) => {
+    if (value == undefined || value === "") {
+      return {
+        isValid: true,
+        safeValue: undefined,
+      }
+    }
+    if (Array.isArray(value) && currentListName) {
+      return {
+        isValid: true,
+        safeValue: value[0],
+      }
+    }
+    const isNumber = typeof value === "number"
+    if (!isNumber) {
+      return {
+        isValid: false,
+        safeValue: 0,
+        errorMessage: "Must be a number",
+      }
+    }
+    return {
+      isValid: true,
+      safeValue: value,
+    }
+  },
+  [VALIDATION_TYPES.ARRAY]: (value) => {
+    if (value == undefined || value === "") {
+      return {
+        isValid: true,
+        safeValue: undefined,
+      }
+    }
+    const isArray = Array.isArray(value)
+    if (!isArray) {
+      return {
+        isValid: false,
+        safeValue: [],
+        errorMessage: "Must be a Array",
+      }
+    }
+    return {
+      isValid: true,
+      safeValue: value,
+    }
+  },
+  [VALIDATION_TYPES.OBJECT]: (value) => {
+    if (value == undefined || value === "") {
+      return {
+        isValid: true,
+        safeValue: undefined,
+      }
+    }
+    const isObjectValue = isObject(value)
+    if (!isObjectValue) {
+      return {
+        isValid: false,
+        safeValue: {},
+        errorMessage: "Must be a Object",
+      }
+    }
+    return {
+      isValid: true,
+      safeValue: value,
+    }
+  },
+}

package/widgetLibrary/BasicContainer/BasicContainer.tsx

@@ -0,0 +1,18 @@
+
+import { CONTAINER_TYPE } from "@/utils/generators/interface"
+
+export const BasicContainerConfig = {
+  type: "CANVAS",
+  displayName: "View",
+  widgetName: "View",
+  containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
+  version: 0,
+}
+
+export const generateBasicContainerConfig = (displayName: string) => {
+  return {
+    ...BasicContainerConfig,
+    displayName,
+    widgetName: displayName,
+  }
+}

package/widgetLibrary/BasicContainer/BasicPanel.ts

@@ -0,0 +1,54 @@
+// import i18n from "@/i18n/config"
+import i18n from "@/i18n/config"
+import { PanelConfig } from "@/page/App/components/InspectPanel/interface"
+import { ScreenPayload } from "@/redux/config/configState"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
+export const BUILD_BASIC_CONTAINER_PANEL_CONFIG = (currentScreen: ScreenPayload) => {
+  const baseWidgetName = "View"
+  const BasicContainer_PANEL_CONFIG: PanelConfig[] = [
+    {
+      id: `${baseWidgetName}-viewList-extraSmallScreen`,
+      labelName: "Row Span",
+      labelDesc: "Row Span",
+      attrName: `${currentScreen}.rowSpan`,
+      defaultValue: "1",
+      expectedType: VALIDATION_TYPES.STRING,
+      setterType: "INPUT_SETTER",
+    },
+    {
+      id: `${baseWidgetName}-viewList-SmallScreen`,
+      labelName: `Column Span`,
+      labelDesc: "SmallScrenLayout",
+      attrName: `${currentScreen}.columnSpan`,
+      defaultValue: "1",
+      expectedType: VALIDATION_TYPES.STRING,
+      setterType: "INPUT_SETTER",
+    },
+    {
+      id: `${baseWidgetName}-validation-classesCondition`,
+      labelName: "Style Class Condition",
+      labelDesc: i18n.t("editor.inspect.setter_tooltip.form_data_key"),
+      setterType: "INPUT_SETTER",
+      expectedType: VALIDATION_TYPES.BOOLEAN,
+      defaultValue: true,
+      attrName: `isClassTrue`,
+    },
+    {
+      id: `${currentScreen}-${baseWidgetName}-style-trueClasses`,
+      labelName: "Select True CSS Classes  :",
+      isSetterSingleRow: true,
+      attrName: `${currentScreen}.trueClasses`,
+      setterType: "BASE_MULTI_SELECT_SETTER",
+      expectedType: VALIDATION_TYPES.ARRAY,
+    }, 
+    {
+      id: `${baseWidgetName}-style-falseClasses`,
+      labelName: "Select false CSS Classes  :",
+      isSetterSingleRow: true,
+      attrName: `${currentScreen}.falseClasses`,
+      setterType: "BASE_MULTI_SELECT_SETTER",
+      expectedType: VALIDATION_TYPES.ARRAY,
+    },
+  ]
+  return BasicContainer_PANEL_CONFIG;
+}

package/widgetLibrary/ButtonWidget/button.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { FC, useCallback, useMemo } from "react";
+import Button from "@mui/material/Button";
+// import { CircularProgress } from "@mui/material";
+import { ButtonWidgetProps, WrappedButtonProps } from "./interface";
+import { buttonLayoutStyle } from "./style";
+// import { green } from "@mui/material/colors";
+import { ButtonIcon } from "../IconWidget/utils";
+import { getStyleMap } from "@/utils/getStyleMap";
+// import { useSelector } from "react-redux";
+// import { getExecutionResultToGlobalCodeMirror } from "@/redux/currentApp/executionTree/executionSelector";
+// import { getStringSnippets, isDynamicStringSnippet } from "@/redux/utils";
+// import { evaluateDynamicString } from "@/utils/evaluateDynamicString";
+// import { RootState } from "@/store";
+
+export const WrappedButton: FC<WrappedButtonProps> = (props) => {
+  const {
+    text,
+    context,
+    variant,
+    isClassTrue = true,
+    trueClasses = [],
+    falseClasses = [],
+    tooltipText,
+    disabled,
+    loading,
+    handleOnClick,
+    startIconName,
+    endIconName,
+  } = props;
+  const style = useMemo(() => {
+    return getStyleMap(trueClasses, falseClasses, isClassTrue, context);
+  }, [trueClasses, falseClasses, isClassTrue, context]);
+  return (
+    <Button
+      variant={variant}
+      fullWidth
+      endIcon={endIconName ? ButtonIcon(endIconName, {}, {}) : false}
+      startIcon={startIconName ? ButtonIcon(startIconName, {}, {}) : false}
+      disabled={disabled || loading}
+      title={tooltipText}
+      key={props.displayName}
+       css={style}
+      onClick={handleOnClick}
+    >
+      {text}
+    </Button>
+  );
+};
+
+WrappedButton.displayName = "WrappedButton";
+export const ButtonWidget: FC<ButtonWidgetProps> = (props: any) => {
+  const handleOnClick = useCallback(() => {
+    props.triggerEventHandler("click");
+  }, [props]);
+  return (
+    <div css={buttonLayoutStyle} key={`${props.displayName}-wrapper`}>
+      <WrappedButton {...props} handleOnClick={handleOnClick} />
+    </div>
+  );
+};
+
+ButtonWidget.displayName = "ButtonWidget";

package/widgetLibrary/ButtonWidget/eventHandlerConfig.ts

@@ -0,0 +1,14 @@
+import i18n from "@/i18n/config"
+import { EventHandlerConfig } from "@/widgetLibrary/interface"
+
+export const BUTTON_EVENT_HANDLER_CONFIG: EventHandlerConfig = {
+  events: [
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.click",
+      ),
+      value: "click",
+    },
+  ],
+  methods: [],
+}

package/widgetLibrary/ButtonWidget/index.tsx

@@ -0,0 +1,4 @@
+export { WrappedButton, ButtonWidget } from "./button"
+export { BUTTON_WIDGET_CONFIG } from "./widgetConfig"
+export { BUTTON_PANEL_CONFIG } from "./panelConfig"
+export { BUTTON_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig"

package/widgetLibrary/ButtonWidget/interface.ts

@@ -0,0 +1,217 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+// import { TooltipWrapperProps } from "@/widgetLibrary/PublicSector/TooltipWrapper/interface"
+import { BaseWidgetProps } from "../interface"
+
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import { SerializedStyles } from "@emotion/react";
+export type BoxProps = SizeStyledProps & ShapeStyledProps & ColorStyledProps & PositionStyledProps & FlexStyledProps & CustomStyledProps & FontStyledProps & UsersProps;
+export interface UsersProps {
+    cur?: string;
+}
+export interface SizeStyledProps {
+
+    h?: string;
+    /**
+     * max-height
+     */
+    maxH?: string;
+    /**
+     * min-height
+     */
+    minH?: string;
+    /**
+     * padding
+     */
+    pd?: string;
+    /**
+     * padding-top
+     */
+    pt?: string;
+    /**
+     * padding-bottom
+     */
+    pb?: string;
+    /**
+     * padding-left
+     */
+    pl?: string;
+    /**
+     * padding-right
+     */
+    pr?: string;
+    /**
+     * margin
+     */
+    mg?: string;
+    /**
+     * margin-left
+     */
+    ml?: string;
+    /**
+     * margin-right
+     */
+    mr?: string;
+    /**
+     * margin-top
+     */
+    mt?: string;
+    /**
+     * margin-bottom
+     */
+    mb?: string;
+}
+export interface ShapeStyledProps {
+    /**
+     * border
+     */
+    bd?: string;
+    /**
+     * border-radius
+     */
+    bdRadius?: string;
+    /**
+     * border-top
+     */
+    bt?: string;
+    /**
+     * border-left
+     */
+    bl?: string;
+    /**
+     * border-bottom
+     */
+    bb?: string;
+    /**
+     * border-right
+     */
+    br?: string;
+}
+export interface ColorStyledProps {
+    /**
+     * background
+     */
+    bg?: string;
+    /**
+     * border-color
+     */
+    bdColor?: string;
+    /**
+     * background-color
+     */
+    bgColor?: string;
+    /**
+     * color
+     */
+    c?: string;
+    /**
+     * opacity
+     */
+    opac?: number;
+}
+export interface PositionStyledProps {
+    pos?: "absolute" | "relative" | "fixed" | "static";
+    posT?: string;
+    posL?: string;
+    posB?: string;
+    posR?: string;
+    z?: string | number;
+    /**
+     * over-flow,over-flow-x,over-flow-y
+     */
+    ov?: string;
+    ovX?: string;
+    ovY?: string;
+    /**
+     * visibility
+     */
+    v?: string;
+}
+export interface FontStyledProps {
+    /**
+     * font-size
+     */
+    fs?: string;
+    /**
+     * font-family
+     */
+    ff?: string;
+    /**
+     * font-weight
+     */
+    fw?: string;
+}
+export interface FlexStyledProps {
+    alignItems?: string;
+    alignContent?: string;
+    justifyItems?: string;
+    justifyContent?: string;
+    flexWrap?: string;
+    flexDirection?: string;
+    flex?: string;
+    flexGrow?: string;
+    flexShrink?: string;
+    flexBasis?: string;
+    justifySelf?: string;
+    alignSelf?: string;
+    /**
+     * order
+     */
+    o?: string;
+}
+export interface CustomStyledProps {
+    _css?: SerializedStyles;
+}
+// string | "orange" | "yellow" | "green" | "blue" | "cyan" | "purple" | "techPink" | "techPurple";
+export type ButtonColorScheme = "warning" | "success" | "info" | "primary" | "secondary" | "error"
+export type ButtonSize = "small" | "medium" | "large";
+export type ButtonVariant = "text" | "outlined" | "contained";
+export type ButtonShape = "square" | "round";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, BoxProps {
+    txcolor?: any;
+    bgcolor?: any;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    shape?: ButtonShape;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    borderColor?: string;
+    backgroundColor?: string;
+    unitW?: string | number,
+    columnNumber?: string | number,
+
+}
+
+export interface WrappedButtonProps
+    extends Pick<
+        ButtonProps,
+        | "variant"
+        | "leftIcon"
+        | "rightIcon"
+        | "disabled"
+        | "loading"
+        | "borderColor"
+        | "backgroundColor"
+        | "txcolor"
+        | "bgcolor"
+    > {
+    text?: string,
+    displayName: string,
+    handleOnClick: () => void
+    tooltipText?: string
+    isClassTrue?: boolean,
+    trueClasses?: any[],
+    falseClasses?: any[],
+    startIconName: string,
+    endIconName: string,
+    context?: any
+}
+
+export interface ButtonWidgetProps
+    extends WrappedButtonProps,
+    BaseWidgetProps { }