impaktapps-ui-builder 0.0.382460 → 1.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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