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

package/page/App/components/PagePanel/Components/ViewsList/header.tsx

@@ -1,93 +0,0 @@
-// import { IMPAKTAPPS_MIXPANEL_EVENT_TYPE } from "@IMPAKTAPPS-public/mixpanel-utils"
-// import { SectionViewShape } from "@IMPAKTAPPS-public/public-types"
-import { difference } from "lodash-es"
-import { FC, useCallback } from "react"
-import { useTranslation } from "react-i18next"
-import { useDispatch, useSelector, useStore } from "react-redux"
-import { Link } from "@/utils/Link"
-// import { AddIcon, Link, useMessage } from "@IMPAKTAPPS-design/react"
-import {
-  getComponentMap,
-  searchDSLByDisplayName,
-} from "@/redux/currentApp/components/componentsSelector"
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
-import { generateSectionContainerConfig } from "@/utils/generators/generatePageOrSectionConfig"
-import { HeaderProps } from "./interface"
-import { headerLabelStyle, viewsListHeaderWrapperStyle } from "./style"
-import { generateNewViewItemFromBodySectionConfig } from "./utils"
-import { SectionViewShape } from "@/redux/utils"
-import AddIcon from '@mui/icons-material/Add';
-import { RootState } from "@/store"
-export const ViewListHeader: FC<HeaderProps> = (props) => {
-  const { t } = useTranslation()
-  const dispatch = useDispatch()
-  // const message = useMessage()
-  const { sectionName, parentNodeDisplayName } = props
-  const components = useSelector(getComponentMap)
-const aaaStore = useStore()
-  const handleClickAddButton = useCallback(() => {
-
-    const parentNode = searchDSLByDisplayName(parentNodeDisplayName,aaaStore.getState() as RootState)
-    if (!parentNode) return
-    if (!parentNode || !parentNode.props) return
-    let bodySectionSubPaths: string[] = []
-    if (sectionName !== "bodySection") {
-      const pageNode = searchDSLByDisplayName(parentNode.parentNode!,aaaStore.getState() as RootState)
-      if (!pageNode) return
-      const bodySectionNodeDisplayName = pageNode.childrenNode.find(
-        (node) => components[node].showName === "bodySection",
-      )
-      if (!bodySectionNodeDisplayName) return
-      bodySectionSubPaths =
-        components[bodySectionNodeDisplayName].props?.sectionViewConfigs.map(
-          (config: Record<string, string>) => config.path,
-        ) ?? []
-    }
-
-    const config = generateSectionContainerConfig(
-      parentNodeDisplayName,
-      `${sectionName}Container`,
-    )
-    const hasPaths = parentNode.props.sectionViewConfigs.map(
-      (item: SectionViewShape) => {
-        return item.path
-      },
-    )
-    const diffSubPaths = difference(bodySectionSubPaths, hasPaths)
-    if (diffSubPaths.length === 0 && sectionName !== "bodySection") {
-      // message.info({
-      //   content: t("editor.page.message.new_path"),
-      // })
-    }
-
-    const newSectionViewConfig = generateNewViewItemFromBodySectionConfig(
-      hasPaths,
-      config.displayName,
-      parentNodeDisplayName,
-      diffSubPaths,
-    )
-    dispatch(
-      componentsActions.addSectionViewConfigByConfigReducer({
-        parentNodeName: parentNodeDisplayName,
-        sectionName,
-        sectionViewConfig: newSectionViewConfig,
-        sectionViewNode: config,
-      }),
-    )
-  }, [components, dispatch, parentNodeDisplayName, sectionName])
-
-  return (
-    <div css={viewsListHeaderWrapperStyle}>
-      <span css={headerLabelStyle}>{t("editor.page.label_name.views")}</span>
-     
-      <Link
-        colorScheme="techPurple"
-        icon={<AddIcon />}
-        hoverable
-        onClick={handleClickAddButton}
-      >
-        <span>{t("editor.inspect.setter_content.column_setter.new")}</span>
-      </Link>
-    </div>
-  )
-}

package/page/App/components/PagePanel/Components/ViewsList/index.tsx

@@ -1,62 +0,0 @@
-import { FC } from "react"
-import { useSelector } from "react-redux"
-import {
-  getComponentMap,
-  searchComponentFromMap,
-} from "@/redux/currentApp/components/componentsSelector"
-import {
-  getRootNodeExecutionResult,
-  getSectionExecutionResultArray,
-} from "@/redux/currentApp/executionTree/executionSelector"
-import { RootState } from "@/store"
-import { ListBody } from "./body"
-import { EmptyState } from "./emptyState"
-import { ViewListHeader } from "./header"
-import { ViewListProps } from "./interface"
-import { viewsListWrapperStyle } from "./style"
-
-export const ViewList: FC<ViewListProps> = (props) => {
-  const { sectionName } = props
-  const rootNodeProps = useSelector(getRootNodeExecutionResult)
-  const { currentPageIndex, pageSortedKey } = rootNodeProps
-  const currentPageDisplayName = pageSortedKey[currentPageIndex]
-
-  const sectionNodeExecutionResult = useSelector<RootState>((state) => {
-    const components = getComponentMap(state)
-    const currentPageNode = searchComponentFromMap(
-      components,
-      currentPageDisplayName,
-    )
-    if (!currentPageNode) return null
-    const currentSectionNodeDisplayName = currentPageNode.childrenNode.find(
-      (childDisplayName) =>
-        components[childDisplayName].showName === sectionName,
-    )
-    if (!currentSectionNodeDisplayName) return null
-    const execution = getSectionExecutionResultArray(state)
-    return execution[currentSectionNodeDisplayName] || null
-  }) as Record<string, any>
-
-  if (!sectionNodeExecutionResult) return null
-
-  return (
-    <div css={viewsListWrapperStyle}>
-      <ViewListHeader
-        sectionName={sectionName}
-        parentNodeDisplayName={sectionNodeExecutionResult.displayName}
-      />
-      {Array.isArray(sectionNodeExecutionResult.sectionViewConfigs) &&
-      sectionNodeExecutionResult.sectionViewConfigs.length > 0 ? (
-        <ListBody
-          sectionName={sectionName}
-          parentNodeDisplayName={sectionNodeExecutionResult.displayName}
-          currentViewIndex={sectionNodeExecutionResult.currentViewIndex}
-          viewSortedKey={sectionNodeExecutionResult.viewSortedKey}
-          sectionViewConfigs={sectionNodeExecutionResult.sectionViewConfigs}
-        />
-      ) : (
-        <EmptyState />
-      )}
-    </div>
-  )
-}

package/page/App/components/PagePanel/Components/ViewsList/interface.ts

@@ -1,50 +0,0 @@
-// import { SectionViewShape } from "@IMPAKTAPPS-public/public-types"
-
-import { SectionViewShape } from "@/redux/utils"
-
-export interface HeaderProps {
-  sectionName:
-    | "leftSection"
-    | "rightSection"
-    | "headerSection"
-    | "footerSection"
-    | "bodySection"
-  parentNodeDisplayName: string
-}
-
-export interface ViewListProps {
-  sectionName:
-    | "leftSection"
-    | "rightSection"
-    | "headerSection"
-    | "footerSection"
-    | "bodySection"
-}
-
-export interface BodyProps {
-  sectionName: string
-  parentNodeDisplayName: string
-  currentViewIndex: number
-  viewSortedKey: string[]
-  sectionViewConfigs: SectionViewShape[]
-}
-
-export interface ItemProps extends Omit<SectionViewShape, "id" | "key"> {
-  otherPaths: string[]
-  index: number
-  handleDeleteSectionView: (index: number) => void
-  handleUpdateItem: (path: string, value: string) => void
-  attrPath: string
-  parentNodeDisplayName: string
-}
-
-export interface LabelNameAndDragIconProps {
-  name: string
-  isDuplicationKey: boolean
-}
-
-export interface ModalProps {
-  onCloseModal: () => void
-  path: string
-  handleUpdateItem: (value: string) => void
-}

package/page/App/components/PagePanel/Components/ViewsList/item.tsx

@@ -1,136 +0,0 @@
-// import IconHotSpot from "@IMPAKTAPPS-public/icon-hot-spot"
-// import { IMPAKTAPPS_MIXPANEL_EVENT_TYPE } from "@IMPAKTAPPS-public/mixpanel-utils"
-import { FC, useCallback, useState } from "react";
-// import { useTranslation } from "react-i18next"
-import { useSelector, useStore } from "react-redux";
-// import { ReduceIcon, Trigger, useMessage } from "@IMPAKTAPPS-design/react"
-import {
-  getComponentMap,
-  searchDSLByDisplayName,
-} from "@/redux/currentApp/components/componentsSelector";
-import { ItemProps } from "./interface";
-import { LabelNameAndDragIcon } from "./labelName";
-import { Modal } from "./modal";
-import { itemWrapperStyle } from "./style";
-import { Trigger } from "@/utils/trigger";
-import RemoveIcon from "@mui/icons-material/Remove";
-import { RootState } from "@/store";
-export const Item: FC<ItemProps> = (props) => {
-  const {
-    otherPaths,
-    index,
-    handleDeleteSectionView,
-    path,
-    handleUpdateItem,
-    attrPath,
-    parentNodeDisplayName,
-  } = props;
-  const [modalVisible, setModalVisible] = useState(false);
-  // const message = useMessage()
-  const components = useSelector(getComponentMap);
-
-  const isDuplicationPath = otherPaths.some((viewKey) => viewKey == path);
-
-  const [currentPath, useCurrentPath] = useState(path);
-  const store = useStore();
-  // const { t } = useTranslation()
-
-  const handleUpdatePath = useCallback(() => {
-    if (currentPath === path) return;
-    const sectionNode = searchDSLByDisplayName(parentNodeDisplayName,store.getState() as RootState);
-    if (!sectionNode) return;
-    const pageNode = searchDSLByDisplayName(sectionNode.parentNode!,store.getState() as RootState);
-    if (!pageNode) return;
-    let bodySectionPaths: string[] = [];
-    if (sectionNode.showName !== "bodySection") {
-      const bodySectionNode = pageNode.childrenNode.find(
-        (node) => components[node].showName === "bodySection"
-      );
-      if (!bodySectionNode) return;
-      bodySectionPaths =
-        components[bodySectionNode].props?.sectionViewConfigs.map(
-          (config: Record<string, string>) => config.path
-        ) ?? [];
-    }
-
-    if (
-      !bodySectionPaths.includes(currentPath) &&
-      sectionNode.showName !== "bodySection"
-    ) {
-      // message.info({
-      //   content: t("editor.page.message.new_path"),
-      // })
-    }
-
-    handleUpdateItem(`${attrPath}.path`, currentPath);
-  }, [
-    attrPath,
-    components,
-    currentPath,
-    handleUpdateItem,
-    // message,
-    parentNodeDisplayName,
-    path,
-    // t,
-  ]);
-
-  return (
-    <Trigger
-      withoutPadding
-      colorScheme="white"
-      popupVisible={modalVisible}
-      content={
-        <Modal
-          onCloseModal={() => {
-            setModalVisible(false);
-          }}
-          path={currentPath}
-          handleUpdateItem={useCurrentPath}
-        />
-      }
-      trigger="click"
-      showArrow={false}
-      position="left"
-      clickOutsideToClose
-      onVisibleChange={(visible) => {
-        if (!visible) {
-          handleUpdatePath();
-        }
-        setModalVisible(visible);
-      }}
-    >
-      <div css={itemWrapperStyle}>
-        <LabelNameAndDragIcon
-          name={path}
-          isDuplicationKey={isDuplicationPath}
-        />
-        <RemoveIcon
-          onClick={(e) => {
-            e.stopPropagation();
-            handleDeleteSectionView(index);
-          }}
-          sx={{
-            fontSize: "14px",
-            color: "gray",
-            ":hover": {
-              color: "#654aec",
-            },
-          }}
-        />
-        {/* <IconHotSpot
-          onClick={(e) => {
-            e.stopPropagation()
-            handleDeleteSectionView(index)
-          }}
-        >
-          <ReduceIcon
-            onClick={(e) => {
-              e.stopPropagation()
-              handleDeleteSectionView(index)
-            }}
-          />
-        </IconHotSpot> */}
-      </div>
-    </Trigger>
-  );
-};

package/page/App/components/PagePanel/Components/ViewsList/labelName.tsx

@@ -1,26 +0,0 @@
-import { FC } from "react"
-// import {
-//   Trigger,
-//   WarningCircleIcon,
-//   globalColor,
-//   IMPAKTAPPSPrefix,
-// } from "@IMPAKTAPPS-design/react"
-import { LabelNameAndDragIconProps } from "./interface"
-import {
-  labelNameAndDragIconWrapperStyle,
-  labelNameStyle,
-  selectedIconAndLabelNameWrapperStyle,
-} from "./style"
-
-export const LabelNameAndDragIcon: FC<LabelNameAndDragIconProps> = (props) => {
-  const { name } = props
-
-  return (
-    <div css={labelNameAndDragIconWrapperStyle}>
-      <div css={selectedIconAndLabelNameWrapperStyle}>
-        <span css={labelNameStyle}>{name}</span>
-        
-      </div>
-    </div>
-  )
-}

package/page/App/components/PagePanel/Components/ViewsList/modal.tsx

@@ -1,41 +0,0 @@
-import { FC } from "react"
-import { useTranslation } from "react-i18next"
-import  CloseIcon from "@mui/icons-material/CloseOutlined"
-import { LeftAndRightLayout } from "@/page/App/components/PagePanel/Layout/leftAndRight"
-import { SetterPadding } from "@/page/App/components/PagePanel/Layout/setterPadding"
-import { PageLabel } from "../Label"
-import { ModalProps } from "./interface"
-import {
-  modalHeaderCloseIconHotSpot,
-  modalHeaderWrapper,
-  modalWrapperStyle,
-  titleStyle,
-} from "./style"
-
-export const Modal: FC<ModalProps> = (props) => {
-  const { onCloseModal, path, handleUpdateItem } = props
-  const { t } = useTranslation()
-
-  return (
-    <div css={modalWrapperStyle}>
-      <div css={modalHeaderWrapper}>
-        <span css={titleStyle}>{t("editor.page.label_name.edit_view")}</span>
-        <div css={modalHeaderCloseIconHotSpot} onClick={onCloseModal}>
-          <CloseIcon />
-        </div>
-      </div>
-      <LeftAndRightLayout>
-        <PageLabel
-          labelName={t("editor.page.label_name.view_path")}
-          size="big"
-          tooltip={t("editor.page.tooltips.view_path")}
-        />
-        <SetterPadding>
-          <input width="200px" value={path}
-          onChange={(e)=>handleUpdateItem(e.target.value)}
-          />
-        </SetterPadding>
-      </LeftAndRightLayout>
-    </div>
-  )
-}

package/page/App/components/PagePanel/Components/ViewsList/style.tsx

@@ -1,119 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-// import { getColor, globalColor, IMPAKTAPPSPrefix } from "@IMPAKTAPPS-design/react"
-
-export const viewsListWrapperStyle = css`
-  display: flex;
-  flex-direction: column;
-  border: 1px solid ${globalColor(`grayBlue-08`)};
-  border-radius: 8px;
-  overflow: hidden;
-`
-
-export const viewsListHeaderWrapperStyle = css`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 287px;
-  height: 40px;
-  padding: 8px 8px 8px 16px;
-  background-color: ${globalColor(`grayBlue-09`)};
-`
-export const viewsListBodyWrapperStyle = css`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`
-
-export const headerLabelStyle = css`
-  font-size: 14px;
-  font-weight: 500;
-  color: ${globalColor(`grayBlue-02`)};
-`
-
-export const headerAddIconStyle = css`
-  width: 8px;
-  height: 8px;
-`
-
-export const labelNameAndDragIconWrapperStyle = css`
-  display: flex;
-  align-items: center;
-`
-
-export const selectedIconAndLabelNameWrapperStyle = css`
-  display: flex;
-  max-width: 191px;
-  align-items: center;
-  gap: 8px;
-`
-
-export const labelNameStyle = css`
-  max-width: 147px;
-  font-size: 14px;
-  font-weight: 400;
-  color: ${globalColor(`grayBlue-02`)};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-export const itemWrapperStyle = css`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  padding: 9px 16px;
-  gap: 4px;
-  height: 40px;
-  cursor: pointer;
-`
-
-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;
-`
-
-export const modalHeaderWrapper = css`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  width: 360px;
-`
-
-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;
-`
-
-export const viewListEmptyBody = css`
-  padding: 8px 16px;
-  height: 40px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${globalColor("grayBlue-04")};
-`

package/page/App/components/PagePanel/Components/ViewsList/utils.ts

@@ -1,53 +0,0 @@
-// import { SectionViewShape } from "@IMPAKTAPPS-public/public-types"
-import { SectionViewShape } from "@/redux/utils"
-import { v4 } from "uuid"
-
-export let viewNameSet = new Set<string>()
-
-const generateDatasetName = (prefix: string) => {
-  let i = 1
-  let ViewName = `sub-page${i}`
-  while (viewNameSet.has(`${prefix}-${ViewName}`)) {
-    i++
-    ViewName = `sub-page${i}`
-  }
-  return ViewName
-}
-
-export const generateNewViewItem = (
-  hasViewNameSet: string[],
-  viewDisplayName: string,
-  prefix: string,
-): SectionViewShape => {
-  viewNameSet = new Set<string>(hasViewNameSet)
-  const viewName = generateDatasetName(prefix)
-
-  return {
-    id: v4(),
-    key: viewName,
-    path: viewName,
-    viewDisplayName,
-  }
-}
-
-export const generateNewViewItemFromBodySectionConfig = (
-  hasPaths: string[],
-  viewDisplayName: string,
-  prefix: string,
-  alternativeSubPaths: string[],
-): SectionViewShape => {
-  const prefixedViewPath = hasPaths.map((path) => `${prefix}-${path}`)
-  viewNameSet = new Set<string>(prefixedViewPath)
-  let viewName = ""
-  if (alternativeSubPaths.length > 0) {
-    viewName = alternativeSubPaths[0]
-  }
-  if (!viewName) viewName = generateDatasetName(prefix)
-
-  return {
-    id: v4(),
-    key: viewName,
-    path: viewName,
-    viewDisplayName,
-  }
-}

package/page/App/components/PagePanel/Layout/divider/index.tsx

@@ -1,15 +0,0 @@
-import { FC } from "react"
-// import { Divider } from "@IMPAKTAPPS-design/react"
-import { PanelDividerProps } from "./interface"
-import { applyPanelDividerCss } from "./style"
-import { Divider } from "@mui/material"
-
-export const PanelDivider: FC<PanelDividerProps> = (props) => {
-  const { hasMargin = true } = props
-  return (
-    <div css={applyPanelDividerCss(hasMargin)}>
-    
-      <Divider ></Divider>
-    </div>
-  )
-}

package/page/App/components/PagePanel/Layout/divider/interface.ts

@@ -1,3 +0,0 @@
-export interface PanelDividerProps {
-  hasMargin?: boolean
-}

package/page/App/components/PagePanel/Layout/divider/style.ts

@@ -1,8 +0,0 @@
-import { css } from "@emotion/react"
-
-export const applyPanelDividerCss = (hasMargin: boolean) => {
-  return css`
-    padding: 0 16px;
-    margin-top: ${hasMargin ? "8px" : 0};
-  `
-}

package/page/App/components/PagePanel/Layout/leftAndRight/index.tsx

@@ -1,8 +0,0 @@
-import { FC } from "react"
-import { LeftAndRightLayoutProps } from "./interface"
-import { leftAndRightCss } from "./style"
-
-export const LeftAndRightLayout: FC<LeftAndRightLayoutProps> = (props) => {
-  const { children } = props
-  return <div css={leftAndRightCss}>{children}</div>
-}

package/page/App/components/PagePanel/Layout/leftAndRight/interface.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from "react"
-
-export interface LeftAndRightLayoutProps {
-  children?: ReactNode
-}

package/page/App/components/PagePanel/Layout/leftAndRight/style.ts

@@ -1,10 +0,0 @@
-import { css } from "@emotion/react"
-
-export const leftAndRightCss = css`
-  min-height: 40px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 16px;
-  width: 100%;
-`

package/page/App/components/PagePanel/Layout/setterPadding/index.tsx

@@ -1,8 +0,0 @@
-import { FC } from "react"
-import { SetterPaddingLayout } from "./interface"
-import { setterPaddingStyle } from "./style"
-
-export const SetterPadding: FC<SetterPaddingLayout> = (props) => {
-  const { children } = props
-  return <div css={setterPaddingStyle}>{children}</div>
-}

package/page/App/components/PagePanel/Layout/setterPadding/interface.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from "react"
-
-export interface SetterPaddingLayout {
-  children: ReactNode
-}

package/page/App/components/PagePanel/Layout/setterPadding/style.ts

@@ -1,5 +0,0 @@
-import { css } from "@emotion/react"
-
-export const setterPaddingStyle = css`
-  padding: 8px 0px;
-`

package/page/App/components/PagePanel/Layout/verticalLayout/index.tsx

@@ -1,8 +0,0 @@
-import { FC } from "react"
-import { VerticalLayoutProps } from "./interface"
-import { verticalCss } from "./style"
-
-export const VerticalLayout: FC<VerticalLayoutProps> = (props) => {
-  const { children } = props
-  return <div css={verticalCss}>{children}</div>
-}

package/page/App/components/PagePanel/Layout/verticalLayout/interface.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from "react"
-
-export interface VerticalLayoutProps {
-  children?: ReactNode
-}