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

package/widgetLibrary/ButtonWidgetNative/panelConfig.tsx

@@ -1,196 +0,0 @@
-// import i18n from "@/i18n/config"
-import i18n from "@/i18n/config";
-import { PanelConfig } from "@/page/App/components/InspectPanel/interface";
-// import { PanelConfig } from "@/page/App/components/InspectPanel/interface"
-import { VALIDATION_TYPES } from "@/utils/validationFactory";
-import { generatorEventHandlerConfig } from "../PublicSector/utils/generatorEventHandlerConfig";
-import {  BUTTON_NATIVE_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig";
-// import { BUTTON_EVENT_HANDLER_CONFIG } from "@/widgetLibrary/ButtonWidget/eventHandlerConfig"
-// import { generatorEventHandlerConfig } from "@/widgetLibrary/PublicSector/utils/generatorEventHandlerConfig"
-
-export const IconHolderObj: string[] = [
-  "plus",          
-  "check",        
-  "check-circle",  
-  "close",         
-  "content-copy",  
-  "download",      
-  "pencil",       
-  "eye",           
-  "earth",         
-  "information",   
-  "link",          
-  "lock",          
-  "email",         
-  "menu",          
-  "phone",         
-  "play",          
-  "magnify",       
-  "cog",          
-  "share-variant", 
-  "star",          
-  "trash-can"   
-]
-export const IconNameOptions: { label: string; value: string }[] =
-  IconHolderObj.map((e) => {
-    return { label: e, value: e };
-  });
-const baseWidgetName = "button";
-export const BUTTON_NATIVE_PANEL_CONFIG: PanelConfig[] = [
-  {
-    id: `${baseWidgetName}-basic`,
-    groupName: i18n.t("editor.inspect.setter_group.basic"),
-    children: [
-      {
-        id: `${baseWidgetName}-basic-Text`,
-        labelName: i18n.t("editor.inspect.setter_label.text"),
-        attrName: "text",
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.STRING,
-      },
-    ],
-  },
-  {
-    id: `${baseWidgetName}-interaction`,
-    groupName: "INTERACTION",
-    children: [
-      {
-        ...generatorEventHandlerConfig(
-          baseWidgetName,
-          BUTTON_NATIVE_EVENT_HANDLER_CONFIG.events
-        ),
-      },
-      {
-        id: `${baseWidgetName}-interaction-formId`,
-        labelName: i18n.t("editor.inspect.setter_label.submit_form"),
-        labelDesc: "xxxxx",
-        attrName: "formId",
-        setterType: "INPUT_SETTER",
-        bindAttrName: ["submit"],
-        shown: (value) => value === true,
-        // shown: (value) => {
-        //   return !value;
-        // },
-      },
-      {
-        id: `${baseWidgetName}-interaction-loading`,
-        labelName: "Loading",
-        // i18n.t("editor.inspect.setter_label.loading"),
-        labelDesc: "Whether the component should show a loading indicator.",
-        // i18n.t("editor.inspect.setter_tooltip.loading"),
-        attrName: "loading",
-        placeholder: "{{false}}",
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.BOOLEAN,
-        bindAttrName: ["submit"],
-        shown: (value) => {
-          return !value;
-        },
-      },
-      {
-        id: `${baseWidgetName}-interaction-disabled`,
-        labelName: "Disabled",
-        //  i18n.t("editor.inspect.setter_label.disabled"),
-        labelDesc:
-          "Control the status of whether the component is disabled. The component cannot be modified or focused when it is disabled.",
-        // i18n.t("editor.inspect.setter_tooltip.disabled"),
-        placeholder: "{{false}}",
-        attrName: "disabled",
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.BOOLEAN,
-        bindAttrName: ["submit"],
-        shown: (value) => !value,
-      },
-    ],
-  },
-  {
-    id: `${baseWidgetName}-adornments`,
-    groupName: i18n.t("editor.inspect.setter_group.adornments"),
-    children: [
-      {
-        id: `${baseWidgetName}-adornments-tooltip`,
-        labelName: i18n.t("editor.inspect.setter_label.tooltip"),
-        labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"),
-        attrName: "tooltipText",
-        expectedType: VALIDATION_TYPES.STRING,
-        setterType: "INPUT_SETTER",
-      },
-      {
-        id: `${baseWidgetName}-label-iconName`,
-        labelName: "Icon",
-        attrName: "iconName",
-        expectedType: VALIDATION_TYPES.STRING,
-        setterType: "SEARCH_SELECT_SETTER",
-        options: IconNameOptions,
-      },
-      {
-        id: `${baseWidgetName}-label-endIconName`,
-        labelName: "IconPosition",
-        attrName: "position",
-        expectedType: VALIDATION_TYPES.STRING,
-        setterType: "SEARCH_SELECT_SETTER",
-        options: [{ label: "start", value: "start" },{ label: "end", value: "end" } ],
-      },
-    ],
-  },
-  {
-    id: `${baseWidgetName}-style`,
-    groupName: i18n.t("editor.inspect.setter_group.style"),
-    children: [
-      {
-        id: `${baseWidgetName}-style-variant`,
-        setterType: "RADIO_GROUP_SETTER",
-        labelName: i18n.t("editor.inspect.setter_label.variant"),
-        attrName: "variant",
-        options: [
-          {
-            label: "Text",
-            value: "text",
-          },
-          {
-            label: "Contained",
-
-            value: "contained",
-          },
-          {
-            label: "outlined",
-            value: "outlined",
-          },
-          {
-            label: "elevated",
-            value: "elevated",
-          },
-          {
-            label: "contained-tonal",
-            value: "contained-tonal",
-          },
-        ],
-      },
-      {
-        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: `${baseWidgetName}-style-classes`,
-        labelName: "Select True CSS Classes  :",
-        isSetterSingleRow: true,
-        attrName: "trueClasses",
-        setterType: "BASE_MULTI_SELECT_SETTER",
-        expectedType: VALIDATION_TYPES.ARRAY,
-      },
-      {
-        id: `${baseWidgetName}-style-classes`,
-        labelName: "Select false CSS Classes  :",
-        isSetterSingleRow: true,
-        attrName: "falseClasses",
-        setterType: "BASE_MULTI_SELECT_SETTER",
-        expectedType: VALIDATION_TYPES.ARRAY,
-      },
-    ],
-  },
-];

package/widgetLibrary/ButtonWidgetNative/style.ts

@@ -1,6 +0,0 @@
-import { css } from "@emotion/react"
-
-export const buttonLayoutStyle = css`
-  width: 100%;
-  height: 100%;
-`

package/widgetLibrary/ButtonWidgetNative/widgetConfig.tsx

@@ -1,17 +0,0 @@
-import  ButtonWidgetIcon from "@/assets/widgetCover/button.svg"
-// import i18n from "@/i18n/config"
-import { WidgetConfig } from "../interface"
-export const BUTTON_NATIVE_WIDGET_CONFIG: WidgetConfig = {
-  type: "BUTTON_NATIVE_WIDGET",
-  displayName: "ButtonWidgetNative",
-  widgetName:"ButtonWidgetNative",
-  version:0,  
-  keywords: ["Button", "按钮"],
-  icon: <ButtonWidgetIcon />,
-  sessionType: "PRESENTATION",
-  defaults: {
-    text: "button",
-    variant: "contained",
-    hidden: false,
-  },
-}

package/widgetLibrary/CSSGrid/GridChild.tsx

@@ -1,293 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useDrop } from "react-dnd";
-import RenderChildrenCanvas from "../RenderChildrenCanvas";
-import { ContainerEmptyState } from "../ContainerWidget/emptyState";
-import { memo, useCallback, useMemo, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import {
-  getIsIMPAKTEditMode,
-  getSelectedScreen,
-} from "@/redux/config/configSelector";
-import { configActions } from "@/redux/config/configSlice";
-import { convertStyles, RowContent } from "./utils";
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
-import { gridItemStyle } from "./style";
-import _ from "lodash";
-import { getStyleMap } from "@/utils/getStyleMap";
-import { isCurrentNodeDisable } from "@/redux/currentApp/components/componentsSelector";
-import { DragInfo } from "@/page/App/components/scaleSquare/components/DragContainer/interface";
-import { DropCollectedProps } from "@/page/App/components/dotPanel/components/Canvas/interface";
-import { css } from "@emotion/react";
-import { useTheme } from "@mui/material";
-import store, { RootState } from "@/store";
-const GridChild = memo(function ({
-  config,
-  configArray,
-  childrenNode,
-  index,
-  handleAddNewRow,
-  context,
-  attrPath,
-  handleUpdateOriginalDSLMultiAttr,
-}: any) {
-  const isEditMode = useSelector(getIsIMPAKTEditMode);
-  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
-  const [modalVisible, setModalVisible] = useState(false);
-   
-  const dispatch = useDispatch();
-  const Screen = useSelector(getSelectedScreen);
-  const theme = useTheme()
-  const handleDeleteOptionItem = useCallback(
-    (index: number) => {
-      if (configArray.length <= 1) return;
-      const updatedArray = configArray.filter(
-        (_optionItem: Record<string, any>, i: number) => {
-          return i !== index;
-        }
-      );
-      const currentChildrenNodeDisplayName = childrenNode[index];
-      const updateSlice = {
-        [attrPath]: updatedArray,
-      };
-      handleUpdateOriginalDSLMultiAttr?.(updateSlice);
-      dispatch(
-        componentsActions.deleteComponentNodeReducer({
-          displayNames: [currentChildrenNodeDisplayName],
-        })
-      );
-    },
-    [
-      attrPath,
-      childrenNode,
-      configArray,
-      dispatch,
-      handleUpdateOriginalDSLMultiAttr,
-    ]
-  );
-  const setModelVisibilityFalse = () => {
-    if (isEditMode && modalVisible) {
-      setModalVisible(false);
-    }
-  };
-  const [, drop] = useDrop<DragInfo, any, DropCollectedProps>(
-    () => ({
-      accept: "GRID",
-      collect: (monitor) => {
-        return {
-          isOver: monitor.isOver({ shallow: true }),
-        };
-      },
-      drop(dropItem: any) {
-        if (!dropItem) {
-          return;
-        }
-        if (dropItem.type == "undraggableComponents") {
-          return;
-        }
-        if (dropItem.type === "Components") {
-          const { draggedComponents } = dropItem;
-          const updateSlices = [
-            {
-              displayName: draggedComponents[0].displayName,
-              x: -1,
-              y: -1,
-              w: 2,
-              h: 5,
-            },
-          ];
-          dispatch(
-            componentsActions.updateComponentPositionReducer({
-              oldParentNodeDisplayName: draggedComponents[0].parentNode,
-              newParentNodeDisplayName: config.displayName,
-              updateSlices,
-              columnNumberWhenDrag: 1,
-              columnNumberWhenDrop: 1,
-            })
-          );
-          return;
-        }
-        const cloneConfig = _.cloneDeep(configArray);
-        const formatedData = cloneConfig.map((e) => {
-          if (e.displayName === dropItem.displayName) {
-            return config.displayName;
-          } else if (e.displayName === config.displayName) {
-            return dropItem.displayName;
-          }
-          return e.displayName;
-        });
-        dispatch(
-          componentsActions.sortComponentNodeChildrenReducer({
-            parentDisplayName: config.parentNode,
-            newChildrenNode: formatedData,
-          })
-        );
-      },
-    }),
-    [configArray]
-  );
-  const userGivenStyle = useMemo(() => {
-    function getScrenCSS(CurrentScreen) {
-      return convertStyles(
-        getStyleMap(
-          config?.props?.[CurrentScreen]?.trueClasses ?? [],
-          config?.props?.[CurrentScreen]?.falseClasses ?? [],
-          config?.props?.isClassTrue ?? true,
-          context
-        ) || []
-      );
-    }
-    const desktopCSS = getScrenCSS(isEditMode ? Screen : "Desktop");
-    const mobileCSS = getScrenCSS("Mobile");
-    const tabletCSS = getScrenCSS("Tablet");
-    return css`
-      ${desktopCSS} /* Default styles for desktop */
-  
-    @media (max-width: 1024px) {
-        ${tabletCSS}/* Styles for tablet */
-      }
-
-      @media (max-width: 768px) {
-        ${mobileCSS}/* Styles for mobile */
-      }
-    `;
-  }, [Screen, config?.props, context, isEditMode]);
-  const isDisabled = false;
-  //isCurrentNodeDisable(config.displayName);
-
-  return (
-    <div
-      key={`gridChildWrppaer-${config.displayName}`}
-      css={gridItemStyle(config, context, Screen, isEditMode,theme)}
-      onContextMenu={(event) => {
-        if (isEditMode) {
-          event.preventDefault();
-          event.stopPropagation();
-          setModalVisible((pre) => !pre);
-          setMenuPosition({ top: event.clientY, left: event.clientX });
-        }
-      }}
-      onBlur={setModelVisibilityFalse}
-      onMouseLeave={setModelVisibilityFalse}
-      onPointerLeave={setModelVisibilityFalse}
-    >
-      {modalVisible && isEditMode && !isDisabled && (
-        <div
-          style={{
-            position: "fixed",
-            zIndex: 30,
-            background: "white",
-            color: "black",
-            textAlign: "left",
-            boxShadow: "2px 2px 5px gray",
-            borderRadius: "5px",
-            left: menuPosition.left - 20,
-            top: menuPosition.top,
-            fontSize: "14px",
-            paddingTop: "10px",
-            fontFamily: "roboto",
-          }}
-        >
-          <RowContent
-            click={(e) => handleAddNewRow("Row", childrenNode.length, e)}
-            error={false}
-            
-            setModalVisible={setModalVisible}
-            rowContent="Add Row On Bottom"
-          />
-          <RowContent
-            click={(e) => handleAddNewRow("Row", 0, e)}
-            setModalVisible={setModalVisible}
-            error={false}
-            rowContent="Add Row On Top"
-          />
-          <RowContent
-            click={(e) => handleAddNewRow("Div", index, e)}
-            setModalVisible={setModalVisible}
-            error={false}
-            rowContent="Add Div On Right"
-          />
-          <RowContent
-            click={(e) => handleAddNewRow("Div", index, e)}
-            setModalVisible={setModalVisible}
-            error={false}
-            rowContent="Add Div On Left"
-          />
-          <RowContent
-            click={(e) => {
-              e.stopPropagation();
-              handleDeleteOptionItem(index);
-            }}
-            error={true}
-            setModalVisible={setModalVisible}
-            rowContent="Delete Div"
-          />
-        </div>
-      )}
-
-      <div
-        key={config.displayName}
-        ref={drop}
-        onClick={(e) => {
-          e.stopPropagation();
-          if (!isCurrentNodeDisable(config.displayName,store.getState() as RootState)) {
-            dispatch(
-              configActions.updateSelectedComponent([config.displayName])
-            );
-          }
-        }}
-        style={{
-          textAlign: "center",
-          cursor: "grab",
-          position: "relative",
-        }}
-      >
-        {isEditMode && (
-          <div
-          key={`${config.displayName}-displayName`}
-            // ref={ drag}
-            role="DraggableBox"
-            style={{
-              position: "absolute",
-              zIndex: 1,
-              bottom: 1,
-              right: 0,
-              fontSize: "8px",
-              background: theme.palette.action.focus,
-              color:theme.palette.text.primary,
-              padding: "3px",
-              borderRadius:"1px"
-            }}
-          >
-            {config.displayName}
-          </div>
-        )}
-
-        <div
-          key={config.displayName + "CannvasWrappper"}
-          css={userGivenStyle}
-          // style={{background:"transparent"}}
-        >
-          {Array.isArray(childrenNode) ? (
-            <RenderChildrenCanvas
-              displayName={childrenNode[index]}
-              columnNumber={1}
-              handleUpdateHeight={() => {}}
-              canResizeCanvas={false}
-              containerPadding={"1px"}
-              key={config.displayName + "canvas"}
-              gridContainer={true}
-            />
-          ) : (
-            isEditMode && (
-              <ContainerEmptyState
-                rowCount={config?.props?.[Screen]?.rowSpan || "1"}
-              />
-            )
-          )}
-        </div>
-      </div>
-    </div>
-  );
-});
-
-export default GridChild;

package/widgetLibrary/CSSGrid/GridContainer.tsx

@@ -1,171 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { FC, useCallback, useMemo } from "react";
-import { ContainerProps } from "../ContainerWidget/interface";
-import { useDispatch, useSelector } from "react-redux";
-import { v4 } from "uuid";
-import GridChild from "./GridChild";
-import { newGenerateChildrenComponentNode } from "@/utils/generators/generateComponentNode";
-import { BasicContainerConfig } from "../BasicContainer/BasicContainer";
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
-import { getComponentMap } from "@/redux/currentApp/executionTree/executionSelector";
-import _ from "lodash";
-import {
-  getIsIMPAKTEditMode,
-  getSelectedScreen,
-} from "@/redux/config/configSelector";
-import { gridDisplayNameCss, gridStyle } from "./style";
-import { getStyleMap } from "@/utils/getStyleMap";
-import { convertStyles } from "./utils";
-import { css } from "@emotion/react";
-import { useTheme } from "@mui/material";
-const CSSGrid: FC<ContainerProps | any> = (props) => {
-  const {
-    Mobile = {
-      columnSize: "1",
-      columnFraction: ["1fr"],
-      columnGap: 1,
-      trueClasses: [],
-      falseClasses: [],
-    },
-    context,
-    Tablet = {
-      columnSize: "3",
-      columnFraction: ["1fr", "1fr", "1fr"],
-      gridGap: 1,
-      trueClasses: [],
-      falseClasses: [],
-    },
-    Desktop = {
-      columnSize: "4",
-      columnFraction: ["1fr", "1fr", "1fr", "1fr"],
-      gridGap: 1,
-      trueClasses: [],
-      falseClasses: [],
-    },
-    handleUpdateOriginalDSLMultiAttr,
-    childrenNode,
-    displayName,
-    isClassTrue = true,
-  } = props;
-  const theme = useTheme()
-  const Screen: any = useSelector(getSelectedScreen);
-  const isEditMode: any = useSelector(getIsIMPAKTEditMode);
-  const componentsMap: any = useSelector(getComponentMap);
-  const ChildNodesMap = useMemo(
-    () =>
-      componentsMap[displayName].childrenNode.map((e) => {
-        return componentsMap[e];
-      }),
-    [componentsMap, displayName]
-  );
-  const dispatch = useDispatch();
-  const handleAddNewRow = useCallback(
-    (ComponentName, componentIndex, e) => {
-      e.stopPropagation();
-      const componentActualCount: number =
-        ComponentName === "Row" ? Desktop.columnSize || 4 : 1;
-      const newItem = [];
-      for (let i = 0; i < componentActualCount; i++) {
-        newItem.push({
-          id: v4(),
-          key: `view ${childrenNode.length + 1 + i}`,
-          label: `view ${childrenNode.length + +1 + i}`,
-          rowSpan: 1,
-          columnSpan: 1,
-        });
-      }
-      const previosArr = [];
-      const arr1 = [];
-      newItem.map((e: any) => {
-        const newChildrenNodes = newGenerateChildrenComponentNode(
-          BasicContainerConfig,
-          displayName
-        );
-        handleUpdateOriginalDSLMultiAttr?.({
-          ["viewList"]: [...ChildNodesMap, ...previosArr, e],
-        });
-        previosArr.push(e);
-        arr1.push(newChildrenNodes);
-      });
-      dispatch(componentsActions.addComponentReducer(arr1));
-      const childNodesArray = _.cloneDeep(childrenNode);
-      const newChilds: string[] = arr1.map((e) => e.displayName);
-      childNodesArray.splice(componentIndex, 0, ...newChilds);
-      dispatch(
-        componentsActions.sortComponentNodeChildrenReducer({
-          parentDisplayName: displayName,
-          newChildrenNode: childNodesArray,
-        })
-      );
-    },
-    [
-      Desktop.columnSize,
-      dispatch,
-      childrenNode,
-      displayName,
-      handleUpdateOriginalDSLMultiAttr,
-      ChildNodesMap,
-    ]
-  );
-
-  const containerSTyle = useMemo(() => {
-    return gridStyle(Mobile, Tablet, Desktop, Screen, isEditMode,theme);
-  }, [Desktop, Mobile, Screen, Tablet, isEditMode, theme]);
-
-  // const userGivenStyle = useMemo(() => {
-  //   const allDisplay = {Desktop, Mobile, Tablet}
-  //   return getStyleMap(allDisplay[Screen].trueClasses, allDisplay[Screen].falseClasses, isClassTrue, context);
-  // }, [Desktop, Mobile, Screen,Tablet, isClassTrue, context]);
-
-  const userGivenStyle = useMemo(() => {
-    function getScrenCSS(CurrentScreen) {
-      const allDisplay = { Desktop, Mobile, Tablet };
-      return convertStyles(
-        getStyleMap(
-          allDisplay?.[CurrentScreen]?.trueClasses ?? [],
-          allDisplay?.[CurrentScreen]?.falseClasses ?? [],
-          isClassTrue ?? true,
-          context
-        ) || []
-      );
-    }
-    const desktopCSS = getScrenCSS(isEditMode ? Screen : "Desktop");
-    const mobileCSS = getScrenCSS("Mobile");
-    const tabletCSS = getScrenCSS("Tablet");
-    return css`
-      ${desktopCSS} /* Default styles for desktop */
-  
-    @media (max-width: 1024px) {
-        ${tabletCSS}/* Styles for tablet */
-      }
-
-      @media (max-width: 768px) {
-        ${mobileCSS}/* Styles for mobile */
-      }
-    `;
-  }, [Desktop, Mobile, Screen, Tablet, context, isClassTrue, isEditMode]);
-  return (
-    <div css={[containerSTyle, userGivenStyle]} key={displayName}>
-      {isEditMode && (
-        <div css={[gridDisplayNameCss(theme), userGivenStyle]}>{displayName}</div>
-      )}
-      {ChildNodesMap.map((gridChildConfig: any, i: number) => {
-        return (
-          <GridChild
-            context={context}
-            config={gridChildConfig || {}}
-            configArray={ChildNodesMap}
-            index={i}
-            handleAddNewRow={handleAddNewRow}
-            childrenNode={props.childrenNode}
-            attrPath={props.attrPath}
-            handleUpdateOriginalDSLMultiAttr={
-              props.handleUpdateOriginalDSLMultiAttr
-            }
-          />
-        );
-      })}
-    </div>
-  );
-};
-export default CSSGrid;