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

package/page/App/components/InspectPanel/setter.tsx

@@ -1,103 +0,0 @@
-
-import { get, toPath } from "lodash-es"
-import { memo, useContext, useMemo } from "react"
-import { useSelector } from "react-redux"
-import { getSetterByType } from "@/page/App/components/InspectPanel/PanelSetters"
-import { SelectedPanelContext } from "@/page/App/components/InspectPanel/context/selectedContext"
-import { getComponentNodeBySingleSelected } from "@/redux/currentApp/components/componentsSelector"
-// import { getGuideStatus } from "@/redux/guide/guideSelector"
-import { PanelSetterProps } from "./interface"
-import { applySetterWrapperStyle } from "./style"
-import { convertPathToString } from "@/redux/utils"
-
-export const Setter = memo<PanelSetterProps>((props: PanelSetterProps) => {
-  const {
-    setterType,
-    isSetterSingleRow,
-    labelName,
-    useCustomLayout = false,
-    shown,
-    bindAttrName,
-    attrName,
-    parentAttrName,
-    expectedType,
-    defaultValue,
-    icon,
-  } = props
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const Comp:any = getSetterByType(setterType)
-  const componentNode = useSelector(getComponentNodeBySingleSelected)
-  const {
-    widgetProps,
-    widgetDisplayName,
-    widgetType,
-    widgetOrAction,
-    handleUpdateDsl,
-    handleUpdateMultiAttrDSL,
-    handleUpdateOtherMultiAttrDSL,
-    handleUpdateExecutionResult,
-  } = useContext(SelectedPanelContext)
-
-  const canRenderSetter = useMemo(() => {
-    if (!bindAttrName || !shown) return true
-    if (Array.isArray(bindAttrName)) {
-      const bindAttrNameValues = bindAttrName.map((bindAttrNameItem) => {
-        if (parentAttrName) {
-          return get(widgetProps, `${parentAttrName}.${bindAttrNameItem}`)
-        }
-        return get(widgetProps, bindAttrNameItem)
-      })
-      return shown(...bindAttrNameValues)
-    }
-    return true
-  }, [bindAttrName, shown, parentAttrName, widgetProps])
-
-  const _finalAttrName = useMemo(() => {
-    if (typeof attrName === "string") {
-      if (parentAttrName) {
-        const parentAttrNamePath = toPath(parentAttrName)
-        return convertPathToString([...parentAttrNamePath, attrName])
-      }
-      return attrName
-    }
-    return ""
-  }, [parentAttrName, attrName])
-
-  const isSetterSingleRowWrapper = isSetterSingleRow || !labelName
-
-  const finalValue = useMemo(() => {
-    if (typeof _finalAttrName === "string") {
-      return get(widgetProps, _finalAttrName)
-    }
-  }, [widgetProps, _finalAttrName])
-
-  return canRenderSetter ? (
-    <div css={applySetterWrapperStyle(isSetterSingleRow, useCustomLayout)}>
-      {Comp ? (
-        <Comp
-          {...props}
-          attrName={_finalAttrName}
-          isSetterSingleRow={isSetterSingleRowWrapper}
-          value={finalValue}
-          key={attrName}
-          panelConfig={widgetProps}
-          handleUpdateDsl={handleUpdateDsl}
-          handleUpdateMultiAttrDSL={handleUpdateMultiAttrDSL}
-          handleUpdateOtherMultiAttrDSL={handleUpdateOtherMultiAttrDSL}
-          handleUpdateExecutionResult={handleUpdateExecutionResult}
-          widgetDisplayName={widgetDisplayName}
-          expectedType={expectedType}
-          widgetType={widgetType}
-          parentAttrName={parentAttrName}
-          widgetOrAction={widgetOrAction}
-          defaultValue={defaultValue}
-          icon={icon}
-          componentNode={componentNode!}
-          isGuideMode={false}
-        />
-      ) : null}
-    </div>
-  ) : null
-})
-
-Setter.displayName = "Setter"

package/page/App/components/InspectPanel/style.ts

@@ -1,27 +0,0 @@
-import { SerializedStyles, css } from "@emotion/react"
-
-export const publicPaddingStyle = css`
-  padding: 0 16px;
-  box-sizing: border-box;
-`
-
-export function applySetterWrapperStyle(
-  isSetterSingleRow: boolean = false,
-  useCustomLayout: boolean = false,
-): SerializedStyles {
-  if (useCustomLayout) {
-    return css``
-  }
-  if (isSetterSingleRow) {
-    return css`
-      padding: 0 16px;
-    `
-  }
-
-  return css`
-    padding: 0px 16px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  `
-}

package/page/App/components/InspectPanel/utils/fieldFactory.tsx

@@ -1,18 +0,0 @@
-import { get } from "lodash-es"
-import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface"
-
-export const canRenderField = (
-  item: PanelFieldConfig,
-  widgetProps: Record<string, any>,
-) => {
-  const { bindAttrName, shown } = item
-  if (!bindAttrName || !shown) return true
-  if (Array.isArray(bindAttrName)) {
-    const values = bindAttrName.map((bindAttrNameItem) =>
-      get(widgetProps, bindAttrNameItem),
-    )
-    return shown(...values)
-  }
-
-  return true
-}

package/page/App/components/InspectPanel/utils/panelBuilder.ts

@@ -1,31 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// import { PanelConfig } from "@/page/App/components/InspectPanel/interface"
-import { WidgetType, widgetBuilder } from "@/widgetLibrary/widgetBuilder"
-import { PanelConfig } from "../interface"
-import { BUILD_BASIC_CONTAINER_PANEL_CONFIG } from "@/widgetLibrary/BasicContainer/BasicPanel"
-import {BUILD_BASIC_NATIVE_CONTAINER_PANEL_CONFIG} from "@/widgetLibrary/NativeContainer/BasicPanel"
-import { ScreenPayload } from "@/redux/config/configState"
-import { CssGridPanelConfigBuilder } from "@/widgetLibrary/CSSGrid/panelConfig"
-import { FORM_PANEL_CONFIG_BUILDER } from "@/widgetLibrary/FormWidget"
-
-
-
-
-export const panelBuilder = (type: WidgetType, currentScreen: ScreenPayload): PanelConfig[] => {
-  if (!type) return null
-  if(type == "NATIVECANVAS"){
-    return BUILD_BASIC_NATIVE_CONTAINER_PANEL_CONFIG(currentScreen)
-  }
-  if (type == "CANVAS") {
-
-    return BUILD_BASIC_CONTAINER_PANEL_CONFIG(currentScreen)
-  }
-  if (type == "GridCONTAINER_WIDGET") {
-    return CssGridPanelConfigBuilder(currentScreen)
-  } else if (type == "FORM_WIDGET") {
-    return FORM_PANEL_CONFIG_BUILDER(currentScreen)
-  }
-  if (!widgetBuilder(type)) return null
-
-  return widgetBuilder(type).panelConfig
-}

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

@@ -1,21 +0,0 @@
-import { FC } from "react"
-// import { Trigger } from "@IMPAKTAPPS-design/react"
-import { PageLabelProps } from "./interface"
-import { labelStyle } from "./style"
-import { Trigger } from "@/utils/trigger"
-
-export const PageLabel: FC<PageLabelProps> = (props) => {
-  const { tooltip, labelName, size } = props
-  return (
-    <Trigger
-      trigger="hover"
-      position="left"
-      content={tooltip}
-      disabled={!tooltip}
-    >
-      <span css={labelStyle(size, !tooltip)}>{labelName}</span>
-     </Trigger>
-  )
-}
-
-PageLabel.displayName = "PageLabel"

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

@@ -1,5 +0,0 @@
-export interface PageLabelProps {
-  tooltip?: string
-  labelName: string
-  size: "big" | "small"
-}

package/page/App/components/PagePanel/Components/Label/style.ts

@@ -1,35 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-// import { globalColor, IMPAKTAPPSPrefix } from "@IMPAKTAPPS-design/react"
-
-const getLabelSizeFontStyle = (size: "big" | "small") => {
-  switch (size) {
-    case "big": {
-      return css`
-        font-size: 14px;
-        color: ${globalColor(`grayBlue-02`)};
-      `
-    }
-    case "small": {
-      return css`
-        font-size: 12px;
-        color: ${globalColor(`grayBlue-03`)};
-      `
-    }
-  }
-}
-
-export function labelStyle(size: "big" | "small", disabledTooltip: boolean) {
-  const borderStyle = disabledTooltip
-    ? null
-    : css`
-        border-bottom: 1px dashed ${globalColor(`grayBlue-03`)};
-      `
-  return css`
-    font-weight: 500;
-    height: 22px;
-    line-height: 22px;
-    ${borderStyle};
-    ${getLabelSizeFontStyle(size)};
-  `
-}

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

@@ -1,141 +0,0 @@
-// import { IMPAKTAPPS_MIXPANEL_EVENT_TYPE } from "@IMPAKTAPPS-public/mixpanel-utils"
-import { FC, useCallback } from "react"
-import { useTranslation } from "react-i18next"
-import { useDispatch } from "react-redux"
-import  DefaultIcon   from "@/assets/rightPagePanel/layout/default.svg"
-import  PresetAIcon from "@/assets/rightPagePanel/layout/preset-a.svg"
-import  PresetBIcon from "@/assets/rightPagePanel/layout/preset-b.svg"
-import  PresetCIcon from "@/assets/rightPagePanel/layout/preset-c.svg"
-import  PresetDIcon from "@/assets/rightPagePanel/layout/preset-d.svg"
-import  PresetEIcon from "@/assets/rightPagePanel/layout/preset-e.svg"
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice"
-import {
-  LayoutOptionItemProps,
-  LayoutOptionsPanelProps,
-  LayoutSelectProps,
-} from "./interface"
-import {
-  applyLayoutOptionItemIconStyle,
-  layoutOptionItemLabelStyle,
-  layoutOptionItemWrapperStyle,
-  layoutOptionsPanelWrapperStyle,
-  layoutSelectWrapperStyle,
-} from "./style"
-import { Trigger } from "@/utils/trigger/trigger"
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import { useModal } from "@/utils/model/src"
-export const LAYOUT_OPTIONS = [
-  {
-    label: "Default",
-    value: "default",
-    icon: <DefaultIcon />,
-  },
-  { label: "Preset A", value: "presetA", icon: <PresetAIcon /> },
-  { label: "Preset B", value: "presetB", icon: <PresetBIcon /> },
-  { label: "Preset C", value: "presetC", icon: <PresetCIcon /> },
-  { label: "Preset D", value: "presetD", icon: <PresetDIcon /> },
-  { label: "Preset E", value: "presetE", icon: <PresetEIcon /> },
-]
-
-export const findLayoutOptionItem = (layoutValue: string) => {
-  const targetItem = LAYOUT_OPTIONS.find((item) => item.value === layoutValue)
-  return targetItem?.label || "Custom"
-}
-
-export const LayoutOptionItem: FC<LayoutOptionItemProps> = (props) => {
-  const { isSelected, label, value, icon, selectedValue, currentPageName } =
-    props
-  const { t } = useTranslation()
-  const dispatch = useDispatch()
-  const modal = useModal()
-
-  const handleChangeLayout = useCallback(() => {
-    if (selectedValue === value || !currentPageName) return
-          //  dispatch(
-          // componentsActions.updateTargetPageLayoutReducer({
-          //   pageName: currentPageName,
-          //   layout: value as
-          //     | "default"
-          //     | "presetA"
-          //     | "presetB"
-          //     | "presetC"
-          //     | "presetD"
-          //     | "presetE",
-          // }))
-    modal.show({
-      w: "496px",
-      children: t("editor.page.model_tips.change_layout_message"),
-      cancelText: t("editor.page.model_tips.cancel_button"),
-      okText: t("editor.page.model_tips.ok_button"),
-      okButtonProps: {
-        colorScheme: "red",
-      },
-      closable: false,
-      // onOk: () => {
-      //   dispatch(
-      //     componentsActions.updateTargetPageLayoutReducer({
-      //       pageName: currentPageName,
-      //       layout: value  
-      //     }),
-      //   )
-      // },
-    })
-  }, [currentPageName, dispatch, modal, selectedValue, t, value])
-  return (
-    <div css={layoutOptionItemWrapperStyle}
-     onClick={handleChangeLayout}>
-      <div css={applyLayoutOptionItemIconStyle(isSelected)} data-value={value}>
-        {icon}
-      </div>
-      <span css={layoutOptionItemLabelStyle} data-value={value}>
-        {label}
-      </span>
-    </div>
-  )
-}
-
-export const LayoutOptionsPanel: FC<LayoutOptionsPanelProps> = (props) => {
-  const { selectedValue, currentPageName } = props
-
-  return (
-    <div css={layoutOptionsPanelWrapperStyle}>
-      {LAYOUT_OPTIONS.map((item) => {
-        return (
-          <LayoutOptionItem
-            key={`${item.label}-${item.value}`}
-            label={item.label}
-            value={item.value}
-            icon={item.icon}
-            isSelected={selectedValue === item.value}
-            selectedValue={selectedValue}
-            currentPageName={currentPageName}
-          />
-        )
-      })}
-    </div>
-  )
-}
-
-export const LayoutSelect: FC<LayoutSelectProps> = (props) => {
-  const { value, currentPageName } = props
-  return (
-    <Trigger
-      trigger="click"
-      content={
-        <LayoutOptionsPanel
-          selectedValue={value}
-          currentPageName={currentPageName}
-        />
-      }
-      position="bottom-end"
-      colorScheme="white"
-      withoutPadding
-      closeOnInnerClick
-    >
-      <div css={layoutSelectWrapperStyle}>
-        <span>{findLayoutOptionItem(value)}</span>
-        <ArrowDropDownIcon />
-      </div>
-    </Trigger>
-  )
-}

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

@@ -1,20 +0,0 @@
-import { ReactChild } from "react"
-
-export interface LayoutOptionsPanelProps {
-  selectedValue: string
-  currentPageName: string
-}
-
-export interface LayoutSelectProps {
-  value: string
-  currentPageName: string
-}
-
-export interface LayoutOptionItemProps {
-  isSelected: boolean
-  label: string
-  value: string
-  icon: ReactChild
-  selectedValue: string
-  currentPageName: string
-}

package/page/App/components/PagePanel/Components/LayoutSelect/style.ts

@@ -1,60 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-// import { globalColor, IMPAKTAPPSPrefix } from "@IMPAKTAPPS-design/react"
-
-export const layoutSelectWrapperStyle = css`
-  display: flex;
-  align-items: center;
-  height: 22px;
-  gap: 4px;
-  cursor: pointer;
-`
-
-export const layoutOptionsPanelWrapperStyle = css`
-  padding: 16px;
-  background-color: ${globalColor(`white-01`)};
-  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
-  border-radius: 8px;
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(3, 88px);
-`
-
-export const layoutOptionItemWrapperStyle = css`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-`
-
-export const applyLayoutOptionItemIconStyle = (isSelected: boolean) => {
-  return css`
-    padding: 8px;
-    background-color: ${isSelected
-      ? globalColor(`techPurple-08`)
-      : globalColor(`grayBlue-09`)};
-    border-radius: 4px;
-    flex: none;
-    border: 1px solid
-      ${isSelected
-        ? globalColor(`techPurple-03`)
-        : "transparent"};
-    cursor: pointer;
-    transition: all 0.2s ease-in-out 0s;
-    :hover {
-      border: 1px solid ${globalColor(`techPurple-03`)};
-      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
-      background-color: ${globalColor(`techPurple-08`)};
-    }
-    :active {
-      border: 1px solid ${globalColor(`techPurple-03`)};
-      background-color: ${globalColor(`techPurple-08`)};
-    }
-  `
-}
-
-export const layoutOptionItemLabelStyle = css`
-  color: ${globalColor(`grayBlue-02`)};
-  font-size: 14px;
-`

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

@@ -1,33 +0,0 @@
-// import IconHotSpot from "@IMPAKTAPPS-public/icon-hot-spot"
-import { FC } from "react";
-// import { MinusIcon, PlusIcon } from "@IMPAKTAPPS-design/react"
-import { PanelActionBarProps } from "./interface";
-import { panelActionBarWrapperStyle } from "./style";
-import RemoveIcon from '@mui/icons-material/Remove';
-import AddIcon from '@mui/icons-material/Add';
-export const PanelActionBar: FC<PanelActionBarProps> = (props) => {
-  const { hasPanel, addPanelAction, deletePanelAction } = props;
-  return (
-    <div css={panelActionBarWrapperStyle}>
-      {/* {hasPanel ? (
-        isFixed ? (
-          <LockIcon css={baseIconStyle} />
-        ) : (
-          <UnlockIcon css={baseIconStyle} />
-        )
-      ) : null} */}
-      {hasPanel ? (
-        <RemoveIcon
-          onClick={deletePanelAction}
-          sx={{color:"gray",fontSize:"11px"}}
-        />
-      ) : (
-        <AddIcon
-        sx={{color:"gray",fontSize:"11px"}}
-          onClick={addPanelAction}
-          // css={applyPanelBarOpenedIconStyle(false, "small")}
-        />
-      )}
-    </div>
-  );
-};

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

@@ -1,6 +0,0 @@
-export interface PanelActionBarProps {
-  isFixed: boolean
-  hasPanel: boolean
-  addPanelAction: () => void
-  deletePanelAction: () => void
-}

package/page/App/components/PagePanel/Components/PanelActionBar/style.ts

@@ -1,8 +0,0 @@
-import { css } from "@emotion/react"
-
-export const panelActionBarWrapperStyle = css`
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  flex: none;
-`

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

@@ -1,86 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// import { IMPAKTAPPS_MIXPANEL_EVENT_TYPE } from "@IMPAKTAPPS-public/mixpanel-utils"
-// import { SectionViewShape } from "@IMPAKTAPPS-public/public-types"
-import { klona } from "klona/json";
-import { set } from "lodash-es";
-import { FC, useCallback, } from "react";
-import { useDispatch } from "react-redux";
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
-import { BodyProps } from "./interface";
-import { Item } from "./item";
-import { viewsListBodyWrapperStyle } from "./style";
-import { SectionViewShape } from "@/redux/utils";
-
-export const ListBody: FC<BodyProps> = (props) => {
-  const {
-    sectionViewConfigs,
-    viewSortedKey,
-    parentNodeDisplayName,
-    sectionName,
-  } = props;
-  const dispatch = useDispatch();
-  const handleDeleteSectionView = useCallback(
-    (index: number) => {
-      if (index > sectionViewConfigs.length) return;
-      // const config = sectionViewConfigs[index] as SectionViewShape;
-      // const viewDisplayName = config.viewDisplayName;
-      // shortcut.showDeleteDialog([config.path], "pageView", {
-      //   parentNodeName: parentNodeDisplayName,
-      //   originPageSortedKey: viewSortedKey,
-      //   viewDisplayName: viewDisplayName,
-      // });
-      // if (index > sectionViewConfigs.length) return
-      // const config = sectionViewConfigs[index] as SectionViewShape
-      // const viewDisplayName = config.viewDisplayName
-      // dispatch(
-      //   componentsActions.deleteSectionViewReducer({
-      //     viewDisplayName: viewDisplayName,
-      //     parentNodeName: parentNodeDisplayName,
-      //     originPageSortedKey: viewSortedKey,
-      //   }),
-      // )
-    },
-    [sectionViewConfigs]
-  );
-
-  const handleUpdateItem = useCallback(
-    (path: string, value: string) => {
-      const newSectionViewConfigs = klona(sectionViewConfigs);
-      set(newSectionViewConfigs, path, value);
-      dispatch(
-        componentsActions.updateSectionViewPropsReducer({
-          parentNodeName: parentNodeDisplayName,
-          newProps: {
-            sectionViewConfigs: newSectionViewConfigs,
-          },
-        })
-      );
-    },
-    [dispatch, parentNodeDisplayName, sectionViewConfigs]
-  );
-
-  return (
-    <div css={viewsListBodyWrapperStyle}>
-      {sectionViewConfigs.map((config: SectionViewShape, index: number) => {
-        const otherPaths = (
-          sectionViewConfigs.map(
-            (views: SectionViewShape, i: number) => views.path || i
-          ) as string[]
-        ).filter((_key: string, i: number) => i != index);
-        return (
-          <Item
-            key={config.id}
-            otherPaths={otherPaths}
-            path={config.path}
-            viewDisplayName={config.viewDisplayName}
-            index={index}
-            attrPath={`${index}`}
-            handleDeleteSectionView={handleDeleteSectionView}
-            handleUpdateItem={handleUpdateItem}
-            parentNodeDisplayName={parentNodeDisplayName}
-          />
-        );
-      })}
-    </div>
-  );
-};

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

@@ -1,10 +0,0 @@
-import { FC } from "react"
-import { useTranslation } from "react-i18next"
-import { viewListEmptyBody } from "./style"
-
-export const EmptyState: FC = () => {
-  const { t } = useTranslation()
-  return (
-    <div css={viewListEmptyBody}>{t("editor.inspect.page.blank_view")}</div>
-  )
-}