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

package/page/App/components/PagePanel/Modules/Style/Components/PaddingSetter/index.tsx

@@ -1,600 +0,0 @@
-import PartialIcon from "@assets/rightPagePanel/partial.svg";
-import { FC } from "react";
-import { useTranslation } from "react-i18next";
-import { useDispatch, useSelector } from "react-redux";
-// import { RadioGroup } from "@IMPAKTAPPS-design/react"
-import AllIcon from "@/assets/rightPagePanel/all.svg";
-import { BASIC_CANVAS_PADDING } from "@/page/App/components/dotPanel/constant/canvas";
-import { PageLabel } from "@/page/App/components/PagePanel/Components/Label";
-import {
-  labelContainerStyle,
-  sectionContainerStyle,
-  setterContainerStyle,
-} from "@/page/App/components/PagePanel/Modules/Style/style";
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
-import {
-  getCurrentPageBodySection,
-  getCurrentPageExecutionResult,
-  getCurrentPageFooterSection,
-  getCurrentPageHeaderSection,
-  getCurrentPageLeftSection,
-  getCurrentPageRightSection,
-} from "@/redux/currentApp/executionTree/executionSelector";
-import { DirectionPaddingSetter } from "../DirectionPaddingSetter";
-import { optionsIconHotSpotStyle } from "./style";
-import { ToggleButton, ToggleButtonGroup } from "@mui/material";
-// import { v3 } from "uuid";
-
-// eslint-disable-next-line react-refresh/only-export-components
-export enum PADDING_MODE {
-  ALL = "all",
-  PARTIAL = "partial",
-}
-
-const options = [
-  {
-    label: (
-      <div css={optionsIconHotSpotStyle}>
-        <AllIcon />
-      </div>
-    ),
-    value: PADDING_MODE.ALL,
-  },
-  {
-    label: (
-      <div css={optionsIconHotSpotStyle}>
-        <PartialIcon />
-      </div>
-    ),
-    value: PADDING_MODE.PARTIAL,
-  },
-];
-
-export const PaddingSetter: FC = () => {
-  const { t } = useTranslation();
-
-  const currentPage = useSelector(getCurrentPageExecutionResult);
-  const { displayName, hasFooter, hasLeft, hasRight, hasHeader } = currentPage;
-
-  const bodySection = useSelector(getCurrentPageBodySection);
-  const rightSection = useSelector(getCurrentPageRightSection);
-  const leftSection = useSelector(getCurrentPageLeftSection);
-  const headerSection = useSelector(getCurrentPageHeaderSection);
-  const footerSection = useSelector(getCurrentPageFooterSection);
-  const { style: bodyStyle } = bodySection ?? {};
-  const { style: rightStyle } = rightSection ?? {};
-  const { style: leftStyle } = leftSection ?? {};
-  const { style: headerStyle } = headerSection ?? {};
-  const { style: footerStyle } = footerSection ?? {};
-
-  const dispatch = useDispatch();
-
-  const { padding: bodyPadding = {} } = bodyStyle ?? {};
-  const { padding: headerPadding = {} } = headerStyle ?? {};
-  const { padding: leftPanelPadding = {} } = leftStyle ?? {};
-  const { padding: rightPanelPadding = {} } = rightStyle ?? {};
-  const { padding: footerPadding = {} } = footerStyle ?? {};
-
-  const bodyPaddingMode = bodyPadding.mode ?? PADDING_MODE.ALL;
-  const headerPaddingMode = headerPadding.mode ?? PADDING_MODE.ALL;
-  const leftPanelPaddingMode = leftPanelPadding.mode ?? PADDING_MODE.ALL;
-  const rightPanelPaddingMode = rightPanelPadding.mode ?? PADDING_MODE.ALL;
-  const footerPaddingMode = footerPadding.mode ?? PADDING_MODE.ALL;
-
-  const bodyPaddingSize = bodyPadding.size ?? `${BASIC_CANVAS_PADDING}`;
-  const headerPaddingSize = headerPadding.size ?? `${BASIC_CANVAS_PADDING}`;
-  const leftPaddingSize = leftPanelPadding.size ?? `${BASIC_CANVAS_PADDING}`;
-  const rightPaddingSize = rightPanelPadding.size ?? `${BASIC_CANVAS_PADDING}`;
-  const footerPaddingSize = footerPadding.size ?? `${BASIC_CANVAS_PADDING}`;
-
-  const changeLeftPaddingMode = (value: PADDING_MODE) => {
-    if (leftPanelPaddingMode === value) return;
-    switch (value) {
-      case PADDING_MODE.ALL: {
-        let result = leftPaddingSize;
-        const partialSize = Array.from(new Set(leftPaddingSize.split(" ")));
-        if (partialSize.length === 1) {
-          result = partialSize[0];
-        }
-
-        dispatch(
-          componentsActions.updateCurrentPageStyleReducer({
-            pageName: displayName,
-            style: {
-              padding: {
-                mode: value,
-                size: result,
-              },
-            },
-            sectionName: "leftSection",
-          })
-        );
-        break;
-      }
-      case PADDING_MODE.PARTIAL: {
-        const partialSize = leftPaddingSize.split(" ");
-        let result = leftPaddingSize;
-        if (partialSize.length === 1) {
-          result = `${partialSize[0]} ${partialSize[0]} ${partialSize[0]} ${partialSize[0]}`;
-        }
-        if (partialSize.length === 4) {
-          result = `${partialSize[0]} ${partialSize[1]} ${partialSize[2]} ${partialSize[3]}`;
-        }
-
-        dispatch(
-          componentsActions.updateCurrentPageStyleReducer({
-            pageName: displayName,
-            style: {
-              padding: {
-                mode: value,
-                size: result,
-              },
-            },
-            sectionName: "leftSection",
-          })
-        );
-        break;
-      }
-    }
-  };
-
-  const changeRightPaddingMode = (value: PADDING_MODE) => {
-    if (rightPanelPaddingMode === value) return;
-    switch (value) {
-      case PADDING_MODE.ALL: {
-        let result = rightPaddingSize;
-        const partialSize = Array.from(new Set(rightPaddingSize.split(" ")));
-        if (partialSize.length === 1) {
-          result = partialSize[0];
-        }
-
-        dispatch(
-          componentsActions.updateCurrentPageStyleReducer({
-            pageName: displayName,
-            style: {
-              padding: {
-                mode: value,
-                size: result,
-              },
-            },
-            sectionName: "rightSection",
-          })
-        );
-        break;
-      }
-      case PADDING_MODE.PARTIAL: {
-        const partialSize = rightPaddingSize.split(" ");
-        let result = rightPaddingSize;
-        if (partialSize.length === 1) {
-          result = `${partialSize[0]} ${partialSize[0]} ${partialSize[0]} ${partialSize[0]}`;
-        }
-        if (partialSize.length === 4) {
-          result = `${partialSize[0]} ${partialSize[1]} ${partialSize[2]} ${partialSize[3]}`;
-        }
-
-        dispatch(
-          componentsActions.updateCurrentPageStyleReducer({
-            pageName: displayName,
-            style: {
-              padding: {
-                mode: value,
-                size: result,
-              },
-            },
-            sectionName: "rightSection",
-          })
-        );
-        break;
-      }
-    }
-  };
-
-  const changeHeaderPaddingMode = (value: PADDING_MODE) => {
-    if (headerPaddingMode === value) return;
-    switch (value) {
-      case PADDING_MODE.ALL: {
-        let result = headerPaddingSize;
-        const partialSize = Array.from(new Set(headerPaddingSize.split(" ")));
-        if (partialSize.length === 1) {
-          result = partialSize[0];
-        }
-
-        dispatch(
-          componentsActions.updateCurrentPageStyleReducer({
-            pageName: displayName,
-            style: {
-              padding: {
-                mode: value,
-                size: result,
-              },
-            },
-            sectionName: "headerSection",
-          })
-        );
-        break;
-      }
-      case PADDING_MODE.PARTIAL: {
-        const partialSize = headerPaddingSize.split(" ");
-        let result = headerPaddingSize;
-        if (partialSize.length === 1) {
-          result = `${partialSize[0]} ${partialSize[0]} ${partialSize[0]} ${partialSize[0]}`;
-        }
-        if (partialSize.length === 4) {
-          result = `${partialSize[0]} ${partialSize[1]} ${partialSize[2]} ${partialSize[3]}`;
-        }
-
-        dispatch(
-          componentsActions.updateCurrentPageStyleReducer({
-            pageName: displayName,
-            style: {
-              padding: {
-                mode: value,
-                size: result,
-              },
-            },
-            sectionName: "headerSection",
-          })
-        );
-        break;
-      }
-    }
-  };
-
-  const changeFooterPaddingMode = (value: PADDING_MODE) => {
-    if (footerPaddingMode === value) return;
-    switch (value) {
-      case PADDING_MODE.ALL: {
-        let result = footerPaddingSize;
-        const partialSize = Array.from(new Set(footerPaddingSize.split(" ")));
-        if (partialSize.length === 1) {
-          result = partialSize[0];
-        }
-
-        dispatch(
-          componentsActions.updateCurrentPageStyleReducer({
-            pageName: displayName,
-            style: {
-              padding: {
-                mode: value,
-                size: result,
-              },
-            },
-            sectionName: "footerSection",
-          })
-        );
-        break;
-      }
-      case PADDING_MODE.PARTIAL: {
-        const partialSize = footerPaddingSize.split(" ");
-        let result = footerPaddingSize;
-        if (partialSize.length === 1) {
-          result = `${partialSize[0]} ${partialSize[0]} ${partialSize[0]} ${partialSize[0]}`;
-        }
-        if (partialSize.length === 4) {
-          result = `${partialSize[0]} ${partialSize[1]} ${partialSize[2]} ${partialSize[3]}`;
-        }
-
-        dispatch(
-          componentsActions.updateCurrentPageStyleReducer({
-            pageName: displayName,
-            style: {
-              padding: {
-                mode: value,
-                size: result,
-              },
-            },
-            sectionName: "footerSection",
-          })
-        );
-        break;
-      }
-    }
-  };
-
-  const changeBodyPaddingMode = (value: PADDING_MODE) => {
-    if (bodyPaddingMode === value) return;
-    switch (value) {
-      case PADDING_MODE.ALL: {
-        let result = bodyPaddingSize;
-        const partialSize = Array.from(new Set(bodyPaddingSize.split(" ")));
-        if (partialSize.length === 1) {
-          result = partialSize[0];
-        }
-
-        dispatch(
-          componentsActions.updateCurrentPageStyleReducer({
-            pageName: displayName,
-            style: {
-              padding: {
-                mode: value,
-                size: result,
-              },
-            },
-            sectionName: "bodySection",
-          })
-        );
-        break;
-      }
-      case PADDING_MODE.PARTIAL: {
-        const partialSize = bodyPaddingSize.split(" ");
-        let result = bodyPaddingSize;
-        if (partialSize.length === 1) {
-          result = `${partialSize[0]} ${partialSize[0]} ${partialSize[0]} ${partialSize[0]}`;
-        }
-        if (partialSize.length === 4) {
-          result = `${partialSize[0]} ${partialSize[1]} ${partialSize[2]} ${partialSize[3]}`;
-        }
-
-        dispatch(
-          componentsActions.updateCurrentPageStyleReducer({
-            pageName: displayName,
-            style: {
-              padding: {
-                mode: value,
-                size: result,
-              },
-            },
-            sectionName: "bodySection",
-          })
-        );
-        break;
-      }
-    }
-  };
-
-  const handleChangeLeftPaddingSize = (value: string) => {
-    dispatch(
-      componentsActions.updateCurrentPageStyleReducer({
-        pageName: displayName,
-        style: {
-          padding: {
-            size: value,
-          },
-        },
-        sectionName: "leftSection",
-      })
-    );
-  };
-
-  const handleChangeRightPaddingSize = (value: string) => {
-    dispatch(
-      componentsActions.updateCurrentPageStyleReducer({
-        pageName: displayName,
-        style: {
-          padding: {
-            size: value,
-          },
-        },
-        sectionName: "rightSection",
-      })
-    );
-  };
-
-  const handleChangeHeaderPaddingSize = (value: string) => {
-    dispatch(
-      componentsActions.updateCurrentPageStyleReducer({
-        pageName: displayName,
-        style: {
-          padding: {
-            size: value,
-          },
-        },
-        sectionName: "headerSection",
-      })
-    );
-  };
-
-  const handleChangeFooterPaddingSize = (value: string) => {
-    dispatch(
-      componentsActions.updateCurrentPageStyleReducer({
-        pageName: displayName,
-        style: {
-          padding: {
-            size: value,
-          },
-        },
-        sectionName: "footerSection",
-      })
-    );
-  };
-
-  const handleChangeBodyPaddingSize = (value: string) => {
-    dispatch(
-      componentsActions.updateCurrentPageStyleReducer({
-        pageName: displayName,
-        style: {
-          padding: {
-            size: value,
-          },
-        },
-        sectionName: "bodySection",
-      })
-    );
-  };
-
-  return (
-    <section css={sectionContainerStyle}>
-      <div css={labelContainerStyle}>
-        <PageLabel
-          labelName={t("editor.inspect.setter_group.padding")}
-          size="big"
-        />
-      </div>
-      <div css={setterContainerStyle}>
-        <PageLabel labelName={t("editor.page.label_name.body")} size="small" />
-        <ToggleButtonGroup
-          color="primary"
-          size="small"
-          sx={{ paddingTop: "2px" }}
-          value={bodyPaddingMode}
-          exclusive
-          onChange={(_e, v) => changeBodyPaddingMode(v)}
-          aria-label="Platform"
-        >
-          {options?.map((e) => {
-            return (
-              <ToggleButton
-                sx={{ fontSize: "8px",padding:"3px 8px" }}
-                size="small"
-                value={e?.value}
-              >
-                {e?.value}
-              </ToggleButton>
-            );
-          })}
-        </ToggleButtonGroup>
-      </div>
-      <DirectionPaddingSetter
-        isAll={bodyPaddingMode === PADDING_MODE.ALL}
-        value={bodyPaddingSize}
-        handleUpdateValue={handleChangeBodyPaddingSize}
-      />
-      {hasHeader && (
-        <>
-          <div css={setterContainerStyle}>
-            <PageLabel
-              labelName={t("editor.page.label_name.header")}
-              size="small"
-            />
-            <ToggleButtonGroup
-              color="primary"
-              size="small"
-              sx={{ paddingTop: "2px" }}
-              value={headerPaddingSize}
-              exclusive
-              onChange={(_e, v) => changeHeaderPaddingMode(v)}
-              aria-label="Platform"
-            >
-              {options?.map((e) => {
-  
-                return (
-                  <ToggleButton
-                    sx={{ fontSize: "8px",padding:"3px 8px" }}
-                    size="small"
-                    value={e?.value}
-                  >
-                    {e.value}
-                  
-                  </ToggleButton>
-                );
-              })}
-            </ToggleButtonGroup>
-          </div>
-          <DirectionPaddingSetter
-            isAll={headerPaddingMode === PADDING_MODE.ALL}
-            value={headerPaddingSize}
-            handleUpdateValue={handleChangeHeaderPaddingSize}
-          />
-        </>
-      )}
-      {hasLeft && (
-        <>
-          <div css={setterContainerStyle}>
-            <PageLabel
-              labelName={t("editor.page.label_name.left_panel")}
-              size="small"
-            />
-            <ToggleButtonGroup
-              color="primary"
-              size="small"
-              sx={{ paddingTop: "2px" }}
-              value={leftPanelPaddingMode}
-              exclusive
-              onChange={(_e, v) => changeLeftPaddingMode(v)}
-              aria-label="Platform"
-            >
-              {options?.map((e) => {
-                return (
-                  <ToggleButton
-                    sx={{fontSize: "8px",padding:"3px 8px"}}
-                    size="small"
-                    value={e?.value}
-                  >
-                    {e?.value}
-                  </ToggleButton>
-                );
-              })}
-            </ToggleButtonGroup>
-          </div>
-          <DirectionPaddingSetter
-            isAll={leftPanelPaddingMode === PADDING_MODE.ALL}
-            value={leftPaddingSize}
-            handleUpdateValue={handleChangeLeftPaddingSize}
-          />
-        </>
-      )}
-      {hasRight && (
-        <>
-          <div css={setterContainerStyle}>
-            <PageLabel
-              labelName={t("editor.page.label_name.right_panel")}
-              size="small"
-            />
-            <ToggleButtonGroup
-              color="primary"
-              size="small"
-              sx={{ paddingTop: "2px" }}
-              value={rightPanelPaddingMode}
-              exclusive
-              onChange={(_e, v) => changeRightPaddingMode(v)}
-              aria-label="Platform"
-            >
-              {options?.map((e) => {
-                return (
-                  <ToggleButton
-                    sx={{ fontSize: "8px",padding:"3px 8px"}}
-                    size="small"
-                    value={e?.value}
-                  >
-                    {e?.value}
-                  </ToggleButton>
-                );
-              })}
-            </ToggleButtonGroup>
-          </div>
-          <DirectionPaddingSetter
-            isAll={rightPanelPaddingMode === PADDING_MODE.ALL}
-            value={rightPaddingSize}
-            handleUpdateValue={handleChangeRightPaddingSize}
-          />
-        </>
-      )}
-      {hasFooter && (
-        <>
-          <div css={setterContainerStyle}>
-            <PageLabel
-              labelName={t("editor.page.label_name.footer")}
-              size="small"
-            />
-            <ToggleButtonGroup
-              color="primary"
-              size="small"
-              sx={{ paddingTop: "2px" }}
-              value={footerPaddingMode}
-              exclusive
-              onChange={(_e, v) => changeFooterPaddingMode(v)}
-              aria-label="Platform"
-            >
-              {options?.map((e) => {
-                return (
-                  <ToggleButton
-                    sx={{fontSize: "8px",padding:"3px 8px" }}
-                    size="small"
-                    value={e?.value}
-                  >
-                    {e?.value}
-                  </ToggleButton>
-                );
-              })}
-            </ToggleButtonGroup>
-          </div>
-          <DirectionPaddingSetter
-            isAll={footerPaddingMode === PADDING_MODE.ALL}
-            value={footerPaddingSize}
-            handleUpdateValue={handleChangeFooterPaddingSize}
-          />
-        </>
-      )}
-    </section>
-  );
-};

package/page/App/components/PagePanel/Modules/Style/Components/PaddingSetter/style.ts

@@ -1,9 +0,0 @@
-import { css } from "@emotion/react"
-
-export const optionsIconHotSpotStyle = css`
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`

package/page/App/components/PagePanel/Modules/Style/Components/ShadowSelect/constants.ts

@@ -1,27 +0,0 @@
-import i18n from "@/i18n/config"
-
-export enum SHADOW_VALUE {
-  NONE = "none",
-  LARGE = "large",
-  MEDIUM = "medium",
-  SMALL = "small",
-}
-
-export const SHADOW_OPTIONS = [
-  {
-    label: i18n.t("editor.inspect.setter_option.shadow.none"),
-    value: SHADOW_VALUE.NONE,
-  },
-  {
-    label: i18n.t("editor.inspect.setter_option.shadow.large"),
-    value: SHADOW_VALUE.LARGE,
-  },
-  {
-    label: i18n.t("editor.inspect.setter_option.shadow.medium"),
-    value: SHADOW_VALUE.MEDIUM,
-  },
-  {
-    label: i18n.t("editor.inspect.setter_option.shadow.small"),
-    value: SHADOW_VALUE.SMALL,
-  },
-]

package/page/App/components/PagePanel/Modules/Style/Components/ShadowSelect/index.tsx

@@ -1,61 +0,0 @@
-import { FC } from "react"
-import { useTranslation } from "react-i18next"
-// import { DropList, DropListItem, Dropdown } from "@IMPAKTAPPS-design/react"
-import ShadowIcon from "@/assets/shadow-icon.svg"
-// import { SHADOW_OPTIONS } from "./constants"
-import { ShadowSetterProps } from "./interface"
-import {
-  shadowIconHotSpotStyle,
-  shadowSelectStyle,
-  shadowSelectWrapperStyle,
-} from "./style"
-
-const ShadowSelect: FC<ShadowSetterProps> = (props) => {
-  const { value, 
-    // onChange
-   } = props
-
-  const { t } = useTranslation()
-
-  return (
-    // <Dropdown
-    //   trigger="click"
-    //   position="bottom-start"
-    //   autoAlignPopupWidth
-    //   dropList={
-    //     <DropList>
-    //       {SHADOW_OPTIONS.map((option) => {
-    //         return (
-    //           <DropListItem
-    //             key={option.label}
-    //             value={option.value}
-    //             selected={value === option.value}
-    //             colorScheme="techPurple"
-    //             title={option.label}
-    //             onClick={() => {
-    //               onChange(option.value)
-    //             }}
-    //           />
-    //         )
-    //       })}
-    //     </DropList>
-    //   }
-    // >
-      <div css={shadowSelectWrapperStyle}>
-        <div css={shadowSelectStyle}>
-          <div css={shadowIconHotSpotStyle}>
-            <ShadowIcon />
-          </div>
-
-          <div>
-            {t(`editor.inspect.setter_option.shadow.${value || "small"}`)}
-          </div>
-        </div>
-      </div>
-    // </Dropdown>
-  )
-}
-
-ShadowSelect.displayName = "ShadowSelect"
-
-export default ShadowSelect

package/page/App/components/PagePanel/Modules/Style/Components/ShadowSelect/interface.ts

@@ -1,6 +0,0 @@
-import { SHADOW_VALUE } from "./constants"
-
-export interface ShadowSetterProps {
-  value: SHADOW_VALUE
-  onChange: (value: SHADOW_VALUE) => void
-}