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

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

@@ -1,76 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-
-export const pageItemContainerStyle = (
-  isSelected: boolean,
-  level: number,
-) => css`
-  padding-left: ${level > 1 ? level * 16 + 8 : 16}px;
-  padding-right: 16px;
-  background-color: ${isSelected
-    ? globalColor("techPurple-08")
-    : "transparent"};
-  cursor: pointer;
-  :hover {
-    .icon-area {
-      transform: translateX(0);
-    }
-  }
-`
-
-export const pageNameStyle = css`
-  font-size: 12px;
-  color: ${globalColor("grayBlue-02")};
-  font-weight: 500;
-`
-
-export const parentPageNameStyle = css`
-  font-size: 11px;
-  color: ${globalColor("grayBlue-04")};
-  font-weight: 500;
-  font-family:Inter;
-`
-
-export const pageNameContainerStyle = css`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: none;
-`
-
-export const baseIconStyle = css`
-  font-size: 12px;
-  width: 12px;
-  height: 12px;
-  flex: none;
-`
-
-export const actionAreaContainerStyle = css`
-  flex: none;
-  display: flex;
-  align-items: center;
-  transition: all 0.2s ease-in-out;
-  transform: translateX(48px);
-`
-
-export const iconHotSpotContainerStyle = css`
-  flex: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 6px;
-`
-
-export const plusIconStyle = css`
-  ${baseIconStyle};
-  color: ${globalColor("grayBlue-04")};
-`
-
-export const pageItemInnerContainerStyle = css`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 24px;
-  overflow: hidden;
-`

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

@@ -1,79 +0,0 @@
-import { FC, MouseEvent, useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { useDispatch, useSelector } from "react-redux";
-import { PanelBar } from "@/components/PanelBar";
-import { getPageDisplayNameMapViewDisplayName } from "@/redux/currentApp/components/componentsSelector";
-import { RootComponentNodeProps } from "@/redux/currentApp/components/componentsState";
-import { getRootNodeExecutionResult } from "@/redux/currentApp/executionTree/executionSelector";
-import { FocusManager } from "@/utils/focusManager";
-import PageItem from "./components/PageItem";
-import { pageSpaceTreeStyle } from "./style";
-import IconHotSpot from "@/utils/IconHotSpot";
-import PlusIcon from "@mui/icons-material/Add";
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
-import { generatePageConfig } from "@/utils/generators/generatePageOrSectionConfig";
-export const PageSpaceTree: FC = () => {
-  const { t } = useTranslation();
-  const rootNodeProps = useSelector(
-    getRootNodeExecutionResult
-  ) as RootComponentNodeProps;
-  const {
-    currentPageIndex,
-    homepageDisplayName,
-    pageSortedKey = [],
-    currentSubPagePath,
-  } = rootNodeProps;
-
-  const currentPageDisplayName = pageSortedKey[currentPageIndex];
-  const dispatch = useDispatch();
-
-  const handleClickAddButton = useCallback(
-    (e: MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation();
-      const newPageConfig = generatePageConfig();
-      // this will delete because page will add from impaktApps
-
-      dispatch(
-        componentsActions.addPageNodeWithSortOrderReducer(newPageConfig)
-      );
-    },
-    [dispatch]
-  );
-  const pageDisplayNameMapSubPageDisplayName = useSelector(
-    getPageDisplayNameMapViewDisplayName
-  );
-
-  return (
-    <PanelBar
-      title={t("editor.data_work_space.pages_title")}
-      destroyChildrenWhenClose
-      customIcon={
-        <IconHotSpot onClick={handleClickAddButton}>
-          <PlusIcon sx={{ fontSize: "14px" }} />
-        </IconHotSpot>
-      }
-      onIMPAKTAPPSFocus={() => {
-        FocusManager.switchFocus("data_page");
-      }}
-    >
-      <div css={pageSpaceTreeStyle}>
-        {Object.keys(pageDisplayNameMapSubPageDisplayName).map((key, index) => {
-          const isHomePage = homepageDisplayName
-            ? homepageDisplayName === key
-            : index === 0;
-          return (
-            <PageItem
-              isHomePage={isHomePage}
-              pageName={key}
-              key={key}
-              level={1}
-              subPagePaths={pageDisplayNameMapSubPageDisplayName[key]}
-              currentPagePath={currentPageDisplayName}
-              currentSubPagePath={currentSubPagePath}
-            />
-          );
-        })}
-      </div>
-    </PanelBar>
-  );
-};

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

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

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

@@ -1,13 +0,0 @@
-import { FC } from "react"
-import { PanelBar } from "@/components/PanelBar"
-import { WorkSpaceTreeGroupProps } from "./interface"
-import { treeContainerStyle } from "./style"
-
-export const WorkSpaceTreeGroup: FC<WorkSpaceTreeGroupProps> = (props) => {
-  const { title, children } = props
-  return (
-    <PanelBar title={title} size="small" destroyChildrenWhenClose>
-      <div css={treeContainerStyle}>{children}</div>
-    </PanelBar>
-  )
-}

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

@@ -1,6 +0,0 @@
-import { ReactNode } from "react"
-
-export interface WorkSpaceTreeGroupProps {
-  title: string
-  children?: ReactNode
-}

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

@@ -1,5 +0,0 @@
-import { css } from "@emotion/react"
-
-export const treeContainerStyle = css`
-  font-family: "Fira Code", monospace;
-`

package/page/App/module/DataWorkspace/components/WorkSpaceTreeItem/WorkSpaceTreeNode.tsx

@@ -1,49 +0,0 @@
-import { FC, memo } from "react"
-import { WorkSpaceTreeNodeProps } from "@/page/App/module/DataWorkspace/components/WorkSpaceTreeItem/interface"
-import {
-  applyJsonValueColorStyle,
-  applySimpleItemContainerStyle,
-  jsonNameStyle,
-  labelNameAndValueContainerStyle,
-} from "@/page/App/module/DataWorkspace/components/WorkSpaceTreeItem/style"
-import { WorkSpaceTreeItem } from "."
-import { renderJsonValue } from "./utils"
-import { isObject } from "@/redux/utils"
-import { isArray } from "util"
-
-
-export const WorkSpaceTreeNode: FC<WorkSpaceTreeNodeProps> = memo(
-  (props: WorkSpaceTreeNodeProps) => {
-    const { name, value, level = 0, parentKey } = props
-    if (isObject(value) || isArray(value)) {
-      return (
-        <WorkSpaceTreeItem
-          title={name}
-          data={value}
-          level={level}
-          parentKey={parentKey}
-          isChild={level + 1 > 1}
-        />
-      )
-    } else {
-      return (
-        <div css={applySimpleItemContainerStyle(false, level + 1)}>
-          <div css={labelNameAndValueContainerStyle}>
-            <label css={jsonNameStyle}>
-              {level < 1 ? `{{${parentKey}.${name}}}` : name}&nbsp;
-            </label>
-            <label css={applyJsonValueColorStyle(typeof value)}>
-              {renderJsonValue(value)}
-            </label>
-          </div>
-          CopyIcon
-          {/* <IconHotSpot onClick={handleClickCopy} id="copy-icon-hot-spot">
-            <CopyIcon />
-          </IconHotSpot> */}
-        </div>
-      )
-    }
-  },
-)
-
-WorkSpaceTreeNode.displayName = "WorkSpaceTreeNode"

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

@@ -1,105 +0,0 @@
-
-
-import  copyToClipboard from "copy-to-clipboard"
-import { AnimatePresence, motion } from "framer-motion"
-import { toPath } from "lodash-es"
-import { FC, memo } from "react"
-import { useDispatch, useSelector } from "react-redux"
-import { panelBarItemContainerAnimationVariants } from "@/components/PanelBar/style"
-import { getExpandedKeys } from "@/redux/config/configSelector"
-import { configActions } from "@/redux/config/configSlice"
-import { WorkSpaceTreeNode } from "./WorkSpaceTreeNode"
-import { WorkSpaceTreeItemProps } from "./interface"
-import {
-  applyExpandIconStyle,
-  applyObjectOrArrayContainerStyle,
-  applyTitleAndDescContainerStyle,
-  jsonContentStyle,
-  objectAndArrayDescStyle,
-  objectAndArrayTitleStyle,
-} from "./style"
-import { convertPathToString } from "@/redux/utils"
-import IconHotSpot from "@/utils/IconHotSpot"
-
-export const WorkSpaceTreeItem: FC<WorkSpaceTreeItemProps> = memo(
-  (props: WorkSpaceTreeItemProps) => {
-    const { title, data, level, parentKey, isChild } = props
-    const expandedKeys = useSelector(getExpandedKeys)
-    const uniqueKey = parentKey === title ? parentKey : `${parentKey}/${title}`
-    const isExpanded = expandedKeys.includes(uniqueKey)
-    const dispatch = useDispatch()
-    const keyArr = Object.keys(data)
-    return (
-      <>
-        <div
-          css={applyObjectOrArrayContainerStyle(level)}
-          onClick={() => {
-            if (isExpanded) {
-              dispatch(configActions.removeExpandedKey(uniqueKey))
-            } else {
-              dispatch(
-                configActions.setExpandedKey(expandedKeys.concat(uniqueKey)),
-              )
-            }
-          }}
-        >
-          <div css={applyTitleAndDescContainerStyle}>
-            <span css={applyExpandIconStyle(isExpanded)}>
-            {/* CaretRightIcon */}
-              {/* <CaretRightIcon /> */}
-            </span>
-            <label css={objectAndArrayTitleStyle}>
-              {isChild
-                ? title
-                : `{{${convertPathToString(toPath(`${parentKey}.${title}`))}}}`}
-              &nbsp;
-            </label>
-            <label css={objectAndArrayDescStyle}>
-              {Array.isArray(data)
-                ? `[]${keyArr.length} items`
-                : `{}${keyArr.length} keys`}
-            </label>
-          </div>
-          <IconHotSpot
-            onClick={(e) => {
-              e.stopPropagation()
-              copyToClipboard(
-                `{{${convertPathToString(toPath(`${parentKey}.${title}`))}}}`,
-              )
-            }}
-            id="copy-icon-hot-spot"
-          >
-            CopyIcon
-            {/* <CopyIcon /> */}
-          </IconHotSpot>
-        </div>
-        <AnimatePresence>
-          {isExpanded && (
-            <motion.div
-              css={jsonContentStyle}
-              variants={panelBarItemContainerAnimationVariants}
-              animate={isExpanded ? "enter" : "exit"}
-              transition={{ duration: 0.2 }}
-              exit="exit"
-            >
-              {keyArr.map((name) => (
-                <WorkSpaceTreeNode
-                  key={name}
-                  name={name}
-                  value={data[name]}
-                  itemKey={title + name}
-                  level={level + 1}
-                  parentKey={convertPathToString(
-                    toPath(`${parentKey}.${title}`),
-                  )}
-                />
-              ))}
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </>
-    )
-  },
-)
-
-WorkSpaceTreeItem.displayName = "WorkSpaceTreeItem"

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

@@ -1,15 +0,0 @@
-export interface WorkSpaceTreeItemProps {
-  title: string
-  data: Record<string, any>
-  level: number
-  parentKey: string
-  isChild?: boolean
-}
-
-export interface WorkSpaceTreeNodeProps {
-  name: string
-  value: unknown
-  itemKey: string
-  parentKey: string
-  level?: number
-}

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

@@ -1,185 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { SerializedStyles, css } from "@emotion/react"
-
-export const itemNameStyle: SerializedStyles = css`
-  font-weight: 600;
-  cursor: pointer;
-  color: ${globalColor(`grayBlue-02`)};
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  max-width: 160px;
-  vertical-align: bottom;
-  display: inline-block;
-`
-
-export const itemNameDescStyle: SerializedStyles = css`
-  display: inline-block;
-  vertical-align: bottom;
-  color: ${globalColor(`grayBlue-04`)};
-`
-
-export const jsonContentStyle = css`
-  font-family: "Fira Code", monospace;
-  height: 0;
-`
-
-export const jsonNameStyle: SerializedStyles = css`
-  display: inline-block;
-  color: ${globalColor(`grayBlue-02`)};
-`
-
-export function applyJsonValueColorStyle(type: string) {
-  let colorStyle = css``
-  switch (type) {
-    case "number": {
-      colorStyle = css`
-        color: #164;
-      `
-      break
-    }
-    case "boolean": {
-      colorStyle = css`
-        color: #219;
-      `
-      break
-    }
-    case "string": {
-      colorStyle = css`
-        color: #219;
-      `
-      break
-    }
-    case "undefined": {
-      colorStyle = css`
-        color: #708;
-      `
-      break
-    }
-    case "symbol": {
-      colorStyle = css`
-        color: #00c;
-      `
-      break
-    }
-    case "bigint": {
-      colorStyle = css`
-        color: #170;
-      `
-      break
-    }
-  }
-
-  return css`
-    ${colorStyle};
-    word-break: break-all;
-  `
-}
-
-export const editIconHotSpotStyle = css`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  width: 16px;
-  height: 16px;
-  font-size: 12px;
-  margin-left: 4px;
-  position: relative;
-  color: ${globalColor("grayBlue-04")};
-`
-
-export const globalStateItemContainerStyle = css`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  width: calc(100% - 16px);
-`
-
-export const objectAndArrayTitleStyle = css`
-  font-size: 12px;
-  font-weight: 500;
-  color: ${globalColor("grayBlue-02")};
-  cursor: pointer;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`
-
-export const objectAndArrayDescStyle = css`
-  font-size: 12px;
-  color: ${globalColor("grayBlue-04")};
-`
-
-export const applyObjectOrArrayContainerStyle = (level: number) => css`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: ${level * 16}px;
-  font-family: "Fira Code", monospace;
-  :hover {
-    .global-state-edit-icon-hot-spot {
-      visibility: visible;
-    }
-    #copy-icon-hot-spot {
-      visibility: visible;
-    }
-  }
-  #copy-icon-hot-spot {
-    visibility: hidden;
-  }
-`
-
-export const applySimpleItemContainerStyle = (
-  isSelected: boolean,
-  level: number,
-) => css`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: ${level * 16}px;
-  background-color: ${isSelected ? globalColor("techPurple-08") : ""};
-  font-size: 12px;
-  font-family: "Fira Code", monospace;
-  :hover {
-    .global-state-edit-icon-hot-spot {
-      visibility: visible;
-    }
-    #copy-icon-hot-spot {
-      visibility: visible;
-    }
-  }
-  :last-child {
-    padding-bottom: 4px;
-  }
-  #copy-icon-hot-spot {
-    visibility: hidden;
-  }
-`
-
-export const labelNameAndValueContainerStyle = css`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-`
-
-export const applyExpandIconStyle = (isExpanded: 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;
-`
-
-export const applyTitleAndDescContainerStyle = css`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`

package/page/App/module/DataWorkspace/components/WorkSpaceTreeItem/utils.tsx

@@ -1,15 +0,0 @@
-import { MAX_LEN_WITH_SNIPPETS } from "@/components/CodeEditor"
-
-export const renderJsonValue = (value: unknown) => {
-  const type = typeof value
-  switch (type) {
-    case "string":
-      return `"${
-        (value as string).length > 1024
-          ? (value as string).slice(0, MAX_LEN_WITH_SNIPPETS) + "..."
-          : value
-      }"`
-    default:
-      return `${value}`
-  }
-}

package/page/App/module/DataWorkspace/constant.ts

@@ -1 +0,0 @@
-export const hiddenFields = ["displayName", "userID"]

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

@@ -1,29 +0,0 @@
-import { FC } from "react"
-import { leftPanelStyle } from "../../style"
-import { ActionSpaceTree } from "./components/ActionSpaceTree"
-import { ComponentSpaceTree } from "./components/ComponentSpaceTree"
-import { GlobalsSpaceTree } from "./components/GlobalsSpaceTree"
-import { LibrarySpaceTree } from "./components/LibrariesTree"
-import { PageSpaceTree } from "./components/PageSpaceTree"
-import { innerContainerStyle } from "./style"
-import { useTheme } from "@mui/material"
-import { StyleSpaceTree } from "../StyleSpaceTree"
-
- 
-export const DataWorkspace: FC = () => {
-  const theme = useTheme()
-  return ( 
-    <div css={leftPanelStyle(theme)}>
-      <div css={innerContainerStyle}>
-        {/* <StyleSpaceTree />  */}
-        {/* <PageSpaceTree /> */}
-        <ComponentSpaceTree />
-        <ActionSpaceTree />
-        <GlobalsSpaceTree />
-        <LibrarySpaceTree />
-      </div>
-    </div>
-  )
-}
-
-DataWorkspace.displayName = "DataWorkspace"

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

@@ -1,47 +0,0 @@
-import { SerializedStyles, css } from "@emotion/react"
-
-export function applyJsonValueColorStyle(
-  type: unknown,
-  canEdit?: boolean,
-): SerializedStyles {
-  let color = "#999"
-  switch (type) {
-    case "number":
-      color = "#164"
-      break
-    case "boolean":
-      color = "#219"
-      break
-    case "string":
-      color = "#219"
-      break
-    case "undefined":
-      color = "#708"
-      break
-    case "function":
-      color = "#05a"
-      break
-    case "symbol":
-      color = "#00c"
-      break
-    case "bigint":
-      color = "#170"
-      break
-    case "object":
-      color = "#a50"
-      break
-    default:
-      color = "#999"
-      break
-  }
-  return css`
-    color: ${color};
-    padding-right: ${canEdit ? "4px" : "0"};
-  `
-}
-
-export const innerContainerStyle = css`
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-`

package/page/App/module/LeftPanel/index.tsx

@@ -1,21 +0,0 @@
-import { FC, memo } from "react";
-import { useSelector } from "react-redux";
-import { isOpenLeftPanel } from "@/redux/config/configSelector";
-// import DataWorkspace  from  "../DataWorkspace/index"
-// import ToolBar from "./Components/ToolBar"
-import { leftPanelContainerStyle } from "./style";
-import { DataWorkspace } from "../DataWorkspace";
-import { useTheme } from "@mui/material";
-
-export const LeftPanel: FC = () => {
-  const showLeftPanel = useSelector(isOpenLeftPanel);
-  const theme = useTheme();
-  return (
-    <div css={leftPanelContainerStyle(theme)}>
-      <DataWorkspace />
-    </div>
-  );
-};
-
-// eslint-disable-next-line react-refresh/only-export-components
-export default memo(LeftPanel);

package/page/App/module/LeftPanel/style.ts

@@ -1,11 +0,0 @@
-import { css } from "@emotion/react"
-import { Theme } from "@mui/material"
-
-export const leftPanelContainerStyle =(theme:Theme) => css`
-  display: flex;
-  height: 100%;
-  flex: none;
- border-right:0.5px solid ${theme.palette.action.focus};
- background:${theme.palette.background.default};
-`
-// border:1px solid gray;