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

package/page/App/module/DataWorkspace/components/BaseDataItem/index.tsx

@@ -1,443 +0,0 @@
-import { AnimatePresence, motion } from "framer-motion";
-import { FC, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import TransformIcon from "@mui/icons-material/Transform";
-import ArrowCircleUpIcon from "@mui/icons-material/ArrowCircleUp";
-import PanToolIcon from "@mui/icons-material/PanTool";
-import ArrowCircleDownIcon from "@mui/icons-material/ArrowCircleDown";
-import  ComponentIcon  from "@/assets/button-rect.svg";
-import { MovableModal } from "@/components/Modal/movableModal";
-import { panelBarItemContainerAnimationVariants } from "@/components/PanelBar/style";
-import {
-  getCopiedWidget,
-  getExpandedWidgets,
-  getMoveWidget,
-  getSelectedComponentDisplayNames,
-} from "@/redux/config/configSelector";
-import { configActions } from "@/redux/config/configSlice";
-import { MoreAction } from "../MoreAction";
-import { WorkSpaceTreeNode } from "../WorkSpaceTreeItem/WorkSpaceTreeNode";
-import { BaseDataItemProps } from "./interface";
-import {
-  applyExpandIconStyle,
-  expendContainerStyle,
-  iconContainerStyle,
-  itemContainerStyle,
-  itemContentStyle,
-  modalBodyContainerStyle,
-  outerContainerStyle,
-  rectangleStyle,
-  titleAndIconContainerStyle,
-  titleStyle,
-} from "./style";
-import { ViewItemShape } from "@/page/App/components/InspectPanel/PanelSetters/ContainerSetter/ViewsSetter/interface";
-import LeftIcon from "@mui/icons-material/ArrowRightOutlined";
-import { useTheme } from "@mui/material";
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
-import { DisplayNameGenerator } from "@/utils/generators/generateDisplayName";
-import { getComponentMap } from "@/redux/currentApp/components/componentsSelector";
-import _ from "lodash";
-import {
-  ComponentMapNode,
-  ComponentTreeNode,
-} from "@/redux/currentApp/components/componentsState";
-const formatModalTitle = (index: number) => {
-  switch (index) {
-    case 0: {
-      return "header";
-    }
-    case 1: {
-      return "body";
-    }
-    case 2: {
-      return "footer";
-    }
-    default: {
-      return "container";
-    }
-  }
-};
-export const mapToFlatTree = (
-  map: Record<string, ComponentMapNode>,
-  rootDisplayName: string
-): ComponentTreeNode => {
-  const reconstruct = (displayName: string): ComponentTreeNode => {
-    const node = map[displayName];
-    return {
-      ...node,
-      childrenNode: node.childrenNode.map((childDisplayName) => {
-        const childNode = reconstruct(childDisplayName);
-        return {
-          ...childNode,
-          displayName: DisplayNameGenerator.generateDisplayName(
-            childNode.showName
-          ),
-        };
-      }),
-    };
-  };
-
-  return reconstruct(rootDisplayName);
-};
-export const BaseDataItem: FC<BaseDataItemProps> = (props) => {
-  const {
-    title,
-    fakeTitle,
-    type,
-    level,
-    canExpand,
-    haveMoreAction,
-    value,
-    onClick,
-    dataType,
-    selectedDisplayNames,
-  } = props;
-  const copyWidgetName = useSelector(getCopiedWidget);
-  const ComponentsMap = useSelector(getComponentMap);
-  const moveWidgetName = useSelector(getMoveWidget);
-  const [isOpenCodeModal, setIsOpenCodeModal] = useState(false);
-  const expandedStatus = useSelector(getExpandedWidgets);
-  const selectedComponent = useSelector(getSelectedComponentDisplayNames);
-  const isExpanded = (canExpand ?? false) && (expandedStatus?.[title] ?? false);
-  const theme = useTheme();
-  const isSelected = selectedDisplayNames?.includes(title) ?? false;
-  const dispatch = useDispatch();
-  const handleClickOnContainer = () => {
-    onClick?.(title, type ?? "");
-  };
-
-  const handleClickOnExpandIcon = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (!isExpanded) {
-      dispatch(configActions.addExpandedWidgetReducer([title]));
-    } else {
-      dispatch(configActions.removeExpandWidgetReducer([title]));
-    }
-  };
-  const handleAddComponent = (
-    targetWidgetparentDisplayName: string,
-    targetWidgetDisplayName: string,
-    copiedOrMoveWidgetName: string,
-    addType: "down" | "up",
-    actionType: "copy" | "move"
-  ) => {
-    const realDisplayName = DisplayNameGenerator.generateDisplayName(
-      ComponentsMap[copiedOrMoveWidgetName].showName
-    );
-
-    const newComponentNode: ComponentMapNode = _.cloneDeep(
-      ComponentsMap[copiedOrMoveWidgetName]
-    );
-    newComponentNode.displayName = realDisplayName;
-    newComponentNode.parentNode = targetWidgetparentDisplayName;
-    const flatTreeComponentNode: ComponentTreeNode = mapToFlatTree(
-      { ...ComponentsMap, [realDisplayName]: newComponentNode },
-      realDisplayName
-    );
-
-    const newChildrenNode = [];
-    let addIndex = 0;
-    ComponentsMap[targetWidgetparentDisplayName].childrenNode.map((e, i) => {
-      if (e == copiedOrMoveWidgetName) {
-        if (actionType === "move") {
-          return;
-        }
-      }
-      if (i >= addIndex && addIndex !== 0) {
-        newChildrenNode[i + 1] = e;
-        return;
-      }
-      if (e === targetWidgetDisplayName) {
-        addIndex = i + 1;
-        if (addType === "down") {
-          newChildrenNode[i] = e;
-          newChildrenNode[i + 1] = realDisplayName;
-        } else {
-          newChildrenNode[i] = realDisplayName;
-          newChildrenNode[i + 1] = e;
-        }
-        return;
-      }
-      newChildrenNode[i] = e;
-    });
-
-    dispatch(componentsActions.addComponentReducer([flatTreeComponentNode]));
-    if (actionType === "move") {
-      componentsActions.deleteComponentNodeReducer({
-        displayNames: [copiedOrMoveWidgetName],
-      });
-    }
-    dispatch(
-      componentsActions.sortComponentNodeChildrenReducer({
-        parentDisplayName: targetWidgetparentDisplayName,
-        newChildrenNode: newChildrenNode,
-      })
-    );
-    // dispatch(configActions.updateSelectedComponent([realDisplayName]));
-  };
-  const handleMoveInit = (title: string) => {
-    dispatch(configActions.updateMovedWidget(title));
-    dispatch(configActions.updateCopiedWidget(""));
-  };
-  const handleCopyInit = (title: string) => {
-    dispatch(configActions.updateCopiedWidget(title));
-    dispatch(configActions.updateMovedWidget(""));
-  };
-  const handleAddDown = (title: string, parentDisplayName: string) => {
-    return handleAddComponent(
-      parentDisplayName,
-      title,
-      copyWidgetName || moveWidgetName,
-      "down",
-      copyWidgetName ? "copy" : "move"
-    );
-  };
-  const handleAddUp = (title: string, parentDisplayName: string) => {
-    handleAddComponent(
-      parentDisplayName,
-      title,
-      copyWidgetName || moveWidgetName,
-      "up",
-      copyWidgetName ? "copy" : "move"
-    );
-  };
-  return (
-    <>
-      <div
-        css={outerContainerStyle(isSelected, !!canExpand, theme)}
-        onClick={handleClickOnContainer}
-        id={`${title}-baseDataItemContainer`}
-      >
-        <div css={itemContainerStyle(level)}>
-          <div css={expendContainerStyle}>
-            <span
-              css={applyExpandIconStyle(isExpanded, !!canExpand, isSelected)}
-              onClick={handleClickOnExpandIcon}
-              id="expand-icon"
-            >
-              <LeftIcon sx={{ fontSize: "12px" }} />
-            </span>
-            {!!type && level >= 1 && <div css={rectangleStyle} />}
-            <div css={titleAndIconContainerStyle}>
-              {!!type && (
-                <ComponentIcon width="10px" height="10px"/>
-              )}
-
-              <span css={titleStyle(theme, selectedComponent[0] == title)}>
-                {fakeTitle ?? title}
-              </span>
-            </div>
-          </div>
-          <div css={iconContainerStyle} id="action-bar">
-            {dataType === "widget" && (
-              <div
-                style={
-                  {
-                    // marginLeft: "70px"
-                  }
-                }
-              >
-                <span
-                  style={{
-                    color: theme.palette.text.primary,
-                    marginRight: "5px",
-                    cursor: "pointer",
-                  }}
-                  title="Add Down"
-                >
-                  <ArrowCircleDownIcon
-                    onClick={() =>
-                      handleAddDown(title, value["$parentNode"] as string)
-                    }
-                    style={{ width: "12px", height: "12px" }}
-                  />
-                </span>
-                <span
-                  style={{
-                    color: theme.palette.text.primary,
-                    marginRight: "5px",
-                    cursor: "pointer",
-                  }}
-                  title="Add Above"
-                >
-                  <ArrowCircleUpIcon
-                    onClick={() =>
-                      handleAddUp(title, value["$parentNode"] as string)
-                    }
-                    style={{ width: "12px", height: "12px" }}
-                  />
-                </span>
-                <span
-                  style={{
-                    color:
-                      moveWidgetName == title
-                        ? theme.palette.text.disabled
-                        : theme.palette.text.primary,
-                    marginRight: "5px",
-                    cursor: moveWidgetName == title ? "none" : "move",
-                  }}
-                  title="Move"
-                >
-                  <PanToolIcon
-                    onClick={() => handleMoveInit(title)}
-                    style={{ width: "12px", height: "12px" }}
-                  />
-                </span>
-                <span
-                  style={{
-                    color:
-                      copyWidgetName == title
-                        ? theme.palette.text.disabled
-                        : theme.palette.text.primary,
-                    cursor: copyWidgetName == title ? "none" : "copy",
-                  }}
-                  title="Copy"
-                >
-                  <ContentCopyIcon
-                    onClick={() => handleCopyInit(title)}
-                    style={{ width: "12px", height: "12px" }}
-                  />
-                </span>
-              </div>
-            )}
-            {haveMoreAction && (
-              <span title="Copy">
-                <MoreAction displayName={title} actionType={dataType} />
-              </span>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {dataType === "widget" && Array.isArray(value.$childrenNode) && (
-        <AnimatePresence>
-          {isExpanded && (
-            <motion.div
-              css={itemContentStyle}
-              variants={panelBarItemContainerAnimationVariants}
-              animate={isExpanded ? "enter" : "exit"}
-              transition={{ duration: 0.2 }}
-              exit="exit"
-            >
-              {value.$childrenNode.map((item, index) => {
-                if (value.$widgetType === "CONTAINER_WIDGET") {
-                  return (
-                    <BaseDataItem
-                      key={item.displayName}
-                      title={item.displayName}
-                      fakeTitle={
-                        (value.viewList as ViewItemShape[])[index].label
-                      }
-                      value={item}
-                      level={level + 1}
-                      dataType="widget"
-                      type={item.$widgetType as string}
-                      canExpand={item.$childrenNode.length > 0}
-                      haveMoreAction={item.$widgetType.endsWith("_WIDGET")}
-                      selectedDisplayNames={selectedDisplayNames}
-                      onClick={onClick}
-                    />
-                  );
-                }
-                if (
-                  value.$widgetType === "MODAL_WIDGET" ||
-                  value.$widgetType === "FORM_WIDGET"
-                ) {
-                  return (
-                    <BaseDataItem
-                      key={item.displayName}
-                      title={item.displayName}
-                      fakeTitle={formatModalTitle(index)}
-                      value={item}
-                      level={level + 1}
-                      dataType="widget"
-                      type={item.$widgetType as string}
-                      canExpand={item.$childrenNode.length > 0}
-                      haveMoreAction={item.$widgetType.endsWith("_WIDGET")}
-                      selectedDisplayNames={selectedDisplayNames}
-                      onClick={onClick}
-                    />
-                  );
-                }
-                if (
-                  value.$widgetType === "LIST_WIDGET" ||
-                  value.$widgetType === "GRID_LIST_WIDGET"
-                )
-                  return (
-                    <BaseDataItem
-                      key={item.displayName}
-                      title={item.displayName}
-                      fakeTitle="list template"
-                      value={item}
-                      level={level + 1}
-                      dataType="widget"
-                      type={item.$widgetType as string}
-                      canExpand={item.$childrenNode.length > 0}
-                      haveMoreAction={item.$widgetType.endsWith("_WIDGET")}
-                      selectedDisplayNames={selectedDisplayNames}
-                      onClick={onClick}
-                    />
-                  );
-
-                return (
-                  <BaseDataItem
-                    key={item.displayName}
-                    title={item.displayName}
-                    value={item}
-                    level={level + 1}
-                    dataType="widget"
-                    type={item.$widgetType as string}
-                    canExpand={item.$childrenNode.length > 0}
-                    haveMoreAction={item.$widgetType.endsWith("_WIDGET")}
-                    selectedDisplayNames={selectedDisplayNames}
-                    onClick={onClick}
-                  />
-                );
-              })}
-            </motion.div>
-          )}
-        </AnimatePresence>
-      )}
-      {isOpenCodeModal && (
-        <MovableModal
-          title={title}
-          bodyContent={
-            <div css={modalBodyContainerStyle}>
-              {Object.keys(value)
-                .filter((key) => !key.startsWith("$"))
-                .map((key) => {
-                  return (
-                    <WorkSpaceTreeNode
-                      key={key}
-                      name={key}
-                      value={value[key]}
-                      itemKey={key}
-                      level={0}
-                      parentKey={title}
-                    />
-                  );
-                })}
-            </div>
-          }
-          onClose={() => {
-            setIsOpenCodeModal(false);
-          }}
-          // docLink={getDocLink(dataType, type)}
-          defaultPosition={{
-            x:
-              document
-                .querySelector(`#${title}-baseDataItemContainer`)
-                ?.getBoundingClientRect().right ?? 0,
-            y:
-              document
-                .querySelector(`#${title}-baseDataItemContainer`)
-                ?.getBoundingClientRect().top ?? 0,
-            width: 320,
-            height: 214,
-          }}
-        />
-      )}
-    </>
-  );
-};

package/page/App/module/DataWorkspace/components/BaseDataItem/interface.ts

@@ -1,12 +0,0 @@
-export interface BaseDataItemProps {
-  level: number
-  fakeTitle?: string
-  title: string
-  type?: string
-  canExpand?: boolean
-  haveMoreAction?: boolean
-  value: Record<string, unknown>
-  selectedDisplayNames?: string[]
-  onClick?: (displayName: string, type: string) => void
-  dataType: "globalData" | "action" | "widget"
-}

package/page/App/module/DataWorkspace/components/BaseDataItem/style.ts

@@ -1,108 +0,0 @@
-import { getColor } from "@/utils/color-palette"
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-import { Theme } from "@mui/material"
-
-
-export const outerContainerStyle = (
-  isSelected: boolean,
-  canExpand: boolean,
-  theme: Theme
-) => css`
-  width: 100%;
-  background-color: ${isSelected
-    ? theme.palette.background.default
-    : theme.palette.secondary.main},
-  cursor: pointer;
-  font-family: "Fira Code", monospace;
-  :hover {
-    background-color: ${theme.palette.background.default};
-    #action-bar {
-      visibility: visible;
-    }
-    #expand-icon {
-      visibility: ${canExpand ? "visible" : "hidden"};
-    }
-  }
-  #action-bar {
-    visibility: ${isSelected ? "visible" : "hidden"};
-  }
-`
-
-export const itemContainerStyle = (level: number = 0) => css`
-  padding-left: ${level * 16 + (level - 1 >= 0 ? level - 1 : 0) * 4}px;
-  padding-right: 16px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`
-
-export const expendContainerStyle = css`
-  display: flex;
-  align-items: center;
-`
-
-export const rectangleStyle = css`
-  width: 4px;
-  height: 100%;
-  flex: none;
-`
-
-export const titleAndIconContainerStyle = css`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`
-
-export const titleStyle = (theme, isSelected) => css`
-  font-size: 12px; 
-  font-weight: 500;
-  cursor:pointer;
-  line-height: 24px;
-  color: ${isSelected ? theme.palette.text.primary : theme.palette.text.secondary};
-:hover {
-  color: ${theme.palette.text.primary}
-  }
-
-
-`
-
-export const applyExpandIconStyle = (
-  isExpanded: boolean,
-  canExpand: boolean,
-  isSelected: boolean,
-) => css`
-  font-size: 8px;
-  line-height: 0;
-  cursor: pointer;
-  transform-origin: center;
-  transform: rotate(${isExpanded ? 90 : 0}deg);
-  transition: transform 200ms;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  visibility: ${canExpand ? (isSelected ? "visible" : "hidden") : "hidden"};
-`
-
-export const iconContainerStyle = css`
-  display: flex;
-  align-items: center;
-  visibility: hidden;
-`
-
-export const modalBodyContainerStyle = css`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-`
-
-export const itemContentStyle = css`
-  font-family: "Fira Code", monospace;
-  height: 0;
-`

package/page/App/module/DataWorkspace/components/ComponentSpaceTree/index.tsx

@@ -1,82 +0,0 @@
-import { FC, useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { useDispatch, useSelector, useStore } from "react-redux";
-import { PanelBar } from "@/components/PanelBar";
-// import { WorkSpaceTreeGroup } from "@/page/app/Module/DataWorkspace/components/WormkSpaceTreeGroup"
-import { getSelectedComponentDisplayNames } from "@/redux/config/configSelector"
-import {
-  getCurrentPageBodyWidgetTree,
-} from "@/redux/currentApp/executionTree/executionSelector"
-import { executionActions } from "@/redux/currentApp/executionTree/executionSlice"
-import { ClickPosition, FocusManager } from "@/utils/focusManager"
-import { BaseDataItem } from "../BaseDataItem"
-import { WorkSpaceTreeGroup } from "../WorkSpaceTreeGroup"
-import { configActions } from "@/redux/config/configSlice"
-
-export const ComponentSpaceTree: FC = () => {
-  const { t } = useTranslation()
-  const dispatch = useDispatch()
-  const bodySectionTree = useSelector(getCurrentPageBodyWidgetTree)
-  const selectedComponent = useSelector(getSelectedComponentDisplayNames)
-
-  const handleClick = useCallback(
-    (displayName: string, type: string) => {
-      const clickPosition: ClickPosition = {
-        displayName,
-        type: "component",
-        clickPosition: [],
-      }
-      if (type === "CANVAS" || type === "NATIVECANVAS") {
-        // displayName = autoChangeWhenClickOnCanvas(displayName)
-        clickPosition.type = "inner_container"
-        clickPosition.clickPosition = [0, 0]
-      }
-      FocusManager.switchFocus("data_component", clickPosition)
-      if (type === "MODAL_WIDGET") {
-        dispatch(
-          executionActions.updateModalDisplayReducer({
-            displayName,
-            display: true,
-          })
-        );
-      }
-      if (displayName) {
-        dispatch(configActions.updateSelectedComponent([displayName]))
-    
-        setTimeout(() => {
-          const dom = document.querySelector(
-            `[data-displayname="${displayName}"]`
-          );
-          dom?.scrollIntoView({ behavior: "smooth", block: "center" });
-        }, 160);
-      }
-    },
-    [dispatch]
-  );
-
-  return (
-    <PanelBar
-      title={t("editor.data_work_space.components_title")}
-      destroyChildrenWhenClose
-    >
-      <WorkSpaceTreeGroup title={t("editor.page.label_name.body")}>
-        {[...bodySectionTree].reverse().map((tree) => (
-          <BaseDataItem
-            key={tree.displayName}
-            title={tree.displayName}
-            value={tree}
-            level={0}
-            dataType="widget"
-            type={tree.$widgetType as string}
-            canExpand={tree.$childrenNode.length > 0}
-            haveMoreAction
-            onClick={handleClick}
-            selectedDisplayNames={selectedComponent}
-          />
-        ))}
-      </WorkSpaceTreeGroup>
-    </PanelBar>
-  );
-};
-
-ComponentSpaceTree.displayName = "ComponentSpaceTree";

package/page/App/module/DataWorkspace/components/GlobalsSpaceTree/index.tsx

@@ -1,37 +0,0 @@
-import { FC } from "react"
-import { useTranslation } from "react-i18next"
-import { useSelector } from "react-redux"
-import { PanelBar } from "@/components/PanelBar"
-import { getGlobalInfoExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
-import { FocusManager } from "@/utils/focusManager"
-import { BaseDataItem } from "../BaseDataItem"
-
-export const GlobalsSpaceTree: FC = () => {
-  const { t } = useTranslation()
-
-  const globalInfoList = useSelector(getGlobalInfoExecutionResult)
-
-  return (
-    <PanelBar
-      title={`${t("editor.data_work_space.globals_title")}(${
-        Object.keys(globalInfoList).length
-      })`}
-      onIMPAKTAPPSFocus={() => {
-        FocusManager.switchFocus("data_global_state")
-      }}
-      destroyChildrenWhenClose
-    >
-      {Object.keys(globalInfoList).map((key) => (
-        <BaseDataItem
-          key={key}
-          title={key}
-          level={0}
-          value={globalInfoList[key] as Record<string, unknown>}
-          dataType="globalData"
-        />
-      ))}
-    </PanelBar>
-  )
-}
-
-GlobalsSpaceTree.displayName = "GlobalsSpaceTree"

package/page/App/module/DataWorkspace/components/GlobalsSpaceTree/interface.ts

@@ -1,5 +0,0 @@
-export interface CreateGlobalModalProps {
-  onClose: () => void
-  variableName?: string
-  actionType: "ADD" | "UPDATE"
-}