impaktapps-ui-builder 1.0.0 → 1.0.1

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

@@ -1,27 +0,0 @@
-import { css } from "@emotion/react"
-
-export const modalBodyWrapperStyle = css`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`
-
-export const singleLineWrapperStyle = css`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 0;
-  gap: 16px;
-`
-export const codeEditorWrapperStyle = css`
-  width: 184px;
-`
-
-export const footerWrapperStyle = css`
-  width: 100%;
-  height: 100%;
-  padding: 8px 0%;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`

package/page/App/module/DataWorkspace/components/LibrariesTree/constants.ts

@@ -1,27 +0,0 @@
-export const LIBRARIES = [
-  {
-    title: "lodash@4.17.21",
-    alias: "_",
-    docLink: "https://lodash.com/docs/4.17.15",
-  },
-  {
-    title: "uuid@8.3.2",
-    alias: "uuid",
-    docLink: "https://www.npmjs.com/package/uuid",
-  },
-  {
-    title: "dayjs@1.11.7",
-    alias: "dayjs",
-    docLink: "https://day.js.org/docs/en/parse/parse",
-  },
-  {
-    title: "numbro@2.4.0",
-    alias: "numbro",
-    docLink: "https://numbrojs.com/",
-  },
-  {
-    title: "papaparse@5.4.1",
-    alias: "papa",
-    docLink: "https://www.papaparse.com/docs",
-  },
-]

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

@@ -1,29 +0,0 @@
-import { FC } from "react"
-import { useTranslation } from "react-i18next"
-import { PanelBar } from "@/components/PanelBar"
-import { LIBRARIES } from "./constants"
-import { LibrariesItem } from "./item"
-import { libraryContainerStyle } from "./style"
-
-export const LibrarySpaceTree: FC = () => {
-  const { t } = useTranslation()
-  return (
-    <>
-      <PanelBar
-        title={`${t("editor.data_work_space.library")}`}
-        destroyChildrenWhenClose
-      >
-        <div css={libraryContainerStyle}>
-          {LIBRARIES.map((library) => (
-            <LibrariesItem
-              key={library.title}
-              title={library.title}
-              docLink={library.docLink}
-              alias={library.alias}
-            />
-          ))}
-        </div>
-      </PanelBar>
-    </>
-  )
-}

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

@@ -1,5 +0,0 @@
-export interface LibrariesItemProps {
-  title: string
-  alias?: string
-  docLink: string
-}

package/page/App/module/DataWorkspace/components/LibrariesTree/item.tsx

@@ -1,33 +0,0 @@
-import { FC } from "react";
-import DocsIcon from "@mui/icons-material/TextSnippet";
-import { LibrariesItemProps } from "./interface";
-import {
-  actionGroupContainerStyle,
-  aliasContainerStyle,
-  itemContainerStyle,
-  titleContainerStyle,
-  titleStyle,
-} from "./style";
-import IconHotSpot from "@/utils/IconHotSpot";
-import { useTheme } from "@mui/material";
-
-export const LibrariesItem: FC<LibrariesItemProps> = (props) => {
-  const { title, alias, docLink } = props;
-  const theme = useTheme();
-  return (
-    <div css={itemContainerStyle}>
-      <div css={titleContainerStyle}>
-        <span css={titleStyle(theme)}>{title}</span>
-        <div css={actionGroupContainerStyle}>
-          {/* <DocsIcon /> */}
-          <IconHotSpot>
-            <a style={{ color: "gray" }} href={docLink} target="_blank">
-              <DocsIcon sx={{ fontSize: "13px" }} />
-            </a>
-          </IconHotSpot>
-        </div>
-      </div>
-      <p css={aliasContainerStyle}>{alias ?? title}</p>
-    </div>
-  );
-};

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

@@ -1,45 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-import { Theme } from "@mui/material"
-
-
-export const itemContainerStyle = css`
-  display: flex;
-  flex-direction: column;
-  padding: 0 16px;
-`
-
-export const titleContainerStyle = css`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-`
-
-export const titleStyle =(theme:Theme)=> css`
-  color: ${theme.palette.text.secondary};
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 24px;
-`
-
-export const actionGroupContainerStyle = css`
-  display: flex;
-  align-items: center;
-`
-
-export const aliasContainerStyle = css`
-  color: ${globalColor("grayBlue-04")};
-  font-size: 12px;
-  font-weight: 450;
-  line-height: 16px;
-  padding: 0;
-  margin: 0;
-`
-
-export const libraryContainerStyle = css`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-family: "Fira Code", monospace;
-`

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

@@ -1,62 +0,0 @@
-
-import { FC, useContext } from "react"
-import { useTranslation } from "react-i18next"
-// import store from "@/store"
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { CopyManager } from "@/utils/copyManager"
-import { ShortCutContext } from "@/utils/shortcut/shortcutProvider"
-import { MoreActionProps } from "./interface"
-import { DropList, DropListItem, Dropdown } from "@/utils/DropDown"
-import { useStore } from "react-redux";
-import { useTheme } from "@mui/material";
-
-export const MoreAction: FC<MoreActionProps> = (
-  props
-) => {
-  const theme = useTheme()
-  const { displayName, actionType } = props
-  const store = useStore()
-  const { t } = useTranslation()
-  const shortcut = useContext(ShortCutContext)
-
-  const handleClickDelete = () => {
-    shortcut.showDeleteDialog([displayName], actionType)
-  }
-
-  const handleClickCopy = () => {
-    switch (actionType) {
-     
-      case "widget": {
-        CopyManager.copyComponentNodeByDisplayName([displayName],store)
-        CopyManager.paste("duplicate",store)
-        break
-      }
-    }
-  }
-
-  return (
-    <Dropdown
-      dropList={
-        <DropList
-        //  w="200px"
-         >
-          <DropListItem
-            value="duplicate"
-            title={t("editor.action.action_list.contextMenu.duplicate")}
-            onClick={handleClickCopy}
-          />
-          <DropListItem
-            value="delete"
-            title={
-              t("editor.action.action_list.contextMenu.delete")
-            }
-            deleted
-            onClick={handleClickDelete}
-          />
-        </DropList>
-      }
-    >
-      <MoreVertIcon sx={{color:theme.palette.text.primary,width: "14px", height: "14px"}}/>
-    </Dropdown>
-  )
-}

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

@@ -1,4 +0,0 @@
-export interface MoreActionProps {
-  displayName: string
-  actionType: "action" | "widget" | "globalData"
-}

package/page/App/module/DataWorkspace/components/PageSpaceTree/components/ActionMenu/index.tsx

@@ -1,93 +0,0 @@
-import { FC, useCallback, useContext } from "react";
-import { useTranslation } from "react-i18next";
-import { useDispatch, useSelector } from "react-redux";
-import { getCurrentPageSortedKeys } from "@/redux/currentApp/components/componentsSelector";
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
-import { ShortCutContext } from "@/utils/shortcut/shortcutProvider";
-import { ActionMenuProps } from "./interface";
-import { DropList, DropListItem } from "@/utils/DropDown";
-
-export const ActionMenu: FC<ActionMenuProps> = (props) => {
-  const { pageDisplayName, isParentPage, parentPageName, openRenameModal } =
-    props;
-  const { t } = useTranslation();
-
-  const pageDisplayNames = useSelector(getCurrentPageSortedKeys);
-
-  const dispatch = useDispatch();
-
-  const shortcut = useContext(ShortCutContext);
-
-  const handleClickSetHomePage = useCallback(() => {
-    if (!pageDisplayName) return;
-    if (isParentPage) {
-      dispatch(
-        componentsActions.updateRootNodePropsReducer({
-          homepageDisplayName: pageDisplayName,
-        })
-      );
-    }
-    if (!isParentPage && parentPageName) {
-      dispatch(
-        componentsActions.updateDefaultSubPagePathReducer({
-          pageName: parentPageName,
-          subPagePath: pageDisplayName,
-        })
-      );
-    }
-  }, [dispatch, isParentPage, pageDisplayName, parentPageName]);
-
-  const handleDeletePage = useCallback(() => {
-    if (isParentPage && pageDisplayNames.length > 1) {
-      shortcut.showDeleteDialog([pageDisplayName], "page", {
-        originPageSortedKey: pageDisplayNames,
-      });
-    }
-    if (!isParentPage && parentPageName) {
-      shortcut.showDeleteDialog([pageDisplayName], "subpage", {
-        parentPageName: parentPageName,
-      });
-    }
-  }, [
-    isParentPage,
-    pageDisplayName,
-    pageDisplayNames,
-    parentPageName,
-    shortcut,
-  ]);
-
-  const handleClickRename = useCallback(() => {
-    openRenameModal();
-  }, [openRenameModal]);
-
-  return (
-    <DropList minW="184px">
-      <DropListItem
-        value="setHomePage"
-        title={
-          isParentPage
-            ? t("editor.page.label_name.set_as_homepage")
-            : t("editor.page.label_name.set_as_default_subpage")
-        }
-        onClick={handleClickSetHomePage}
-      />
-      <DropListItem
-        value="RenameURL"
-        title={
-          isParentPage
-            ? t("widget.page.label.rename_page_url")
-            : t("widget.page.label.rename_url")
-        }
-        onClick={handleClickRename}
-      />
-      <DropListItem
-        value="delete"
-        title={t("editor.inspect.header.action_menu.delete")}
-        deleted
-        onClick={handleDeletePage}
-      />
-    </DropList>
-  );
-};
-
-ActionMenu.displayName = "ActionMenu";

package/page/App/module/DataWorkspace/components/PageSpaceTree/components/ActionMenu/interface.ts

@@ -1,6 +0,0 @@
-export interface ActionMenuProps {
-  pageDisplayName: string
-  isParentPage: boolean
-  parentPageName?: string
-  openRenameModal: () => void
-}

package/page/App/module/DataWorkspace/components/PageSpaceTree/components/ChangePathModal/interface.ts

@@ -1,6 +0,0 @@
-export interface ModalProps {
-  onCloseModal: () => void
-  path: string
-  handleUpdateItem: (value: string) => void
-  isParentPage: boolean
-}

package/page/App/module/DataWorkspace/components/PageSpaceTree/components/ChangePathModal/modal.tsx

@@ -1,49 +0,0 @@
-import { FC } from "react"
-import { useTranslation } from "react-i18next"
-import { PageLabel } from "@/page/App/components/PagePanel/Components/Label"
-import { LeftAndRightLayout } from "@/page/App/components/PagePanel/Layout/leftAndRight"
-import { SetterPadding } from "@/page/App/components/PagePanel/Layout/setterPadding"
-import { ModalProps } from "./interface"
-import {
-  modalHeaderCloseIconHotSpot,
-  modalHeaderWrapper,
-  modalWrapperStyle,
-  titleStyle,
-} from "./style"
-
-export const Modal: FC<ModalProps> = (props) => {
-  const { onCloseModal,  isParentPage } = props
-  const { t } = useTranslation()
-
-  return (
-    <div css={modalWrapperStyle}>
-      <div css={modalHeaderWrapper}>
-        <span css={titleStyle}>
-          {isParentPage
-            ? t("widget.page.label.rename_page_url")
-            : t("editor.page.label_name.edit_view")}
-        </span>
-        <div css={modalHeaderCloseIconHotSpot} onClick={onCloseModal}>
-        CloseIcon
-          {/* <CloseIcon /> */}
-        </div>
-      </div>
-      <LeftAndRightLayout>
-        <PageLabel
-          labelName={t("editor.page.label_name.view_path")}
-          size="big"
-          tooltip={t("editor.page.tooltips.view_path")}
-        />
-        <SetterPadding>
-          Input
-          {/* <Input
-            w="160px"
-            value={path}
-            colorScheme="techPurple"
-            onChange={handleUpdateItem}
-          /> */}
-        </SetterPadding>
-      </LeftAndRightLayout>
-    </div>
-  )
-}

package/page/App/module/DataWorkspace/components/PageSpaceTree/components/ChangePathModal/style.tsx

@@ -1,42 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-export const modalWrapperStyle = css`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: ${globalColor(`white-01`)};
-  box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.16);
-  border-radius: 8px;
-  overflow: hidden;
-  position: relative;
-  padding-bottom: 8px;
-`
-
-export const modalHeaderWrapper = css`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  width: 240px;
-`
-
-export const modalHeaderCloseIconHotSpot = css`
-  width: 24px;
-  height: 24px;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${globalColor(`grayBlue-02`)};
-  cursor: pointer;
-`
-
-export const titleStyle = css`
-  font-weight: 500;
-  font-size: 16px;
-  color: ${globalColor(`grayBlue-04`)};
-  max-width: 200px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`

package/page/App/module/DataWorkspace/components/PageSpaceTree/components/PageItem/index.tsx

@@ -1,208 +0,0 @@
-
-import { FC, memo, useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
-import HomePage from "@mui/icons-material/HomeOutlined";
-// import {ReactComponent as PageIcon} from "@/assets/page.svg"
-import PageIcon from "@mui/icons-material/DescriptionOutlined";
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
-import { executionActions } from "@/redux/currentApp/executionTree/executionSlice";
-import SettingsIcon from "@mui/icons-material/Settings";
-import AddIcon from "@mui/icons-material/Add";
-import { Modal } from "../ChangePathModal/modal";
-import { PageItemProps } from "./interface";
-import {
-  actionAreaContainerStyle,
-  // baseIconStyle,
-  iconHotSpotContainerStyle,
-  pageItemContainerStyle,
-  pageItemInnerContainerStyle,
-  pageNameContainerStyle,
-  pageNameStyle,
-  parentPageNameStyle,
-  plusIconStyle,
-} from "./style";
-import { Trigger } from "@/utils/trigger";
-import { Dropdown } from "@/utils/DropDown";
-import { ActionMenu } from "../ActionMenu";
-
-export const PageItem: FC<PageItemProps> = (props) => {
-  const {
-    isHomePage,
-    pageName,
-    level = 1,
-    parentPageName,
-    subPagePaths,
-    currentPagePath,
-    currentSubPagePath,
-  } = props;
-
-  const isSelected = !currentSubPagePath && currentPagePath === pageName;
-  const subPageIsSelected =
-    currentPagePath === parentPageName && pageName === currentSubPagePath;
-
-  const dispatch = useDispatch();
-  const [modalVisible, setModalVisible] = useState(false);
-  const [actionMenuVisible, setActionMenuVisible] = useState(false);
-  const [currentPageName, setCurrentPageName] = useState(pageName);
-  const handleClickChangePage = useCallback(() => {
-    if (!parentPageName) {
-      dispatch(
-        executionActions.updateCurrentPagePathReducer({
-          pageDisplayName: pageName,
-        })
-      );
-    } else {
-      dispatch(
-        executionActions.updateCurrentPagePathReducer({
-          pageDisplayName: parentPageName,
-          subPagePath: pageName,
-        })
-      );
-    }
-  }, [dispatch, pageName, parentPageName]);
-
-  const handlerAfterClose = useCallback(() => {
-    if (!parentPageName) {
-      // if (!isValidDisplayName(currentPageName)) {
-      //   message.error({
-      //     content: t("editor.display_name.validate_error", {
-      //       displayName: currentPageName,
-      //     }),
-      //   })
-      //   setCurrentPageName(pageName)
-      //   return
-      // }
-      dispatch(
-        componentsActions.updateComponentDisplayNameReducer({
-          displayName: pageName,
-          newDisplayName: currentPageName,
-        })
-      );
-    } else {
-      dispatch(
-        componentsActions.updateSubPagePathReducer({
-          pageName: parentPageName,
-          subPagePath: currentPageName,
-          oldSubPagePath: pageName,
-        })
-      );
-    }
-  }, [currentPageName, dispatch, pageName, parentPageName]);
-  const handleOpenModal = useCallback(() => {
-    setModalVisible(true)
-  }, []);
-
-  const addSubPage = useCallback(() => {
-    if (!parentPageName) {
-      dispatch(
-        componentsActions.addSubPageReducer({
-          pageName: pageName,
-        })
-      );
-    }
-  }, [dispatch, pageName, parentPageName]);
-
-  return (
-    <>
-      <Trigger 
-        withoutPadding
-        // colorScheme="white"
-        popupVisible={modalVisible}
-        content={
-          <Modal
-            path={currentPageName}
-            onCloseModal={() => {
-              setModalVisible(false);
-            }}
-            handleUpdateItem={setCurrentPageName}
-            isParentPage={level === 1}
-          />
-        }
-        trigger="focus"
-        showArrow={false}
-        position="right"
-        clickOutsideToClose
-        onVisibleChange={(visible) => {
-          if (!visible) {
-            setModalVisible(false);
-            handlerAfterClose();
-          }
-        }}
-      >
-        <span>
-          <Dropdown
-            position="bottom-end"
-            trigger="contextmenu"
-            popupVisible={actionMenuVisible}
-            dropList={
-              <ActionMenu
-                pageDisplayName={pageName}
-                isParentPage={level === 1}
-                parentPageName={parentPageName}
-                openRenameModal={handleOpenModal}
-              />
-            }
-            onVisibleChange={setActionMenuVisible}
-          >
-            <div
-              css={pageItemContainerStyle(
-                isSelected || subPageIsSelected,
-                level
-              )}
-              onClick={handleClickChangePage}
-            >
-              <div css={pageItemInnerContainerStyle}>
-                <div css={pageNameContainerStyle}>
-                  {!parentPageName && (
-                    <PageIcon sx={{ fontSize: "14px", marginBottom: "-2px" }} />
-                  )}
-                  {parentPageName && (
-                    <span css={parentPageNameStyle}>/{parentPageName}</span>
-                  )}
-                  <span css={pageNameStyle}>/{pageName}</span>
-                </div>
-                <div css={actionAreaContainerStyle} className="icon-area">
-                  {isHomePage && (
-                    <div css={iconHotSpotContainerStyle}>
-                      <HomePage sx={{ fontSize: "12px", color: "gray" }} />
-                    </div>
-                  )}
-                  <div
-                    css={iconHotSpotContainerStyle}
-                    onClick={() => {
-                      setActionMenuVisible(true);
-                    }}
-                  >
-                    <SettingsIcon css={plusIconStyle} />
-                  </div>
-                  {level === 1 && (
-                    <div css={iconHotSpotContainerStyle} onClick={addSubPage}>
-                      <AddIcon css={plusIconStyle} />
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </Dropdown>
-        </span>
-      </Trigger>
-      {subPagePaths &&
-        Array.from(subPagePaths).map((subPagePath) => {
-          return (
-            <PageItem
-              key={subPagePath}
-              level={level + 1}
-              parentPageName={pageName}
-              isHomePage={false}
-              pageName={subPagePath}
-              currentPagePath={currentPagePath}
-              currentSubPagePath={currentSubPagePath}
-            />
-          );
-        })}
-    </>
-  );
-};
-
-PageItem.displayName = "DataWorkspace-PageItem";
-export default memo(PageItem);

package/page/App/module/DataWorkspace/components/PageSpaceTree/components/PageItem/interface.ts

@@ -1,9 +0,0 @@
-export interface PageItemProps {
-  isHomePage: boolean
-  pageName: string
-  level: number
-  parentPageName?: string
-  subPagePaths?: Set<string>
-  currentSubPagePath?: string
-  currentPagePath: string
-}