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

package/page/App/components/InspectPanel/PanelSetters/InputSetter/ColumnFraction/index.tsx

@@ -1,117 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { DirectionPaddingSetterProps } from "@/page/App/components/PagePanel/Modules/Style/Components/DirectionPaddingSetter/interface";
-import { getSelectedScreen } from "@/redux/config/configSelector";
-import { ScreenPayload } from "@/redux/config/configState";
-import { getComponentMap } from "@/redux/currentApp/executionTree/executionSelector";
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Box,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select,
-} from "@mui/material";
-// import _ from "lodash";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import React, { FC, useCallback, useMemo } from "react";
-import { useSelector } from "react-redux";
-
-import { get } from "lodash-es";
-
-import _ from "lodash";
-
-export const ColumnFractionSetter: FC<DirectionPaddingSetterProps> = (
-  props: any
-) => {
-  const {
-    handleUpdateDsl,
-    componentNode,
-    attrName,
-    // expectedType,
-    // defaultValue,
-    labelName,
-    widgetDisplayName,
-  } = props;
-  const componentsMap: any = useSelector(getComponentMap);
-  const Screen: ScreenPayload = useSelector(getSelectedScreen);
-  const length: number = useMemo(
-    () =>
-      Number(componentsMap[widgetDisplayName]?.props?.[Screen]?.columnSize) ||
-      6,
-    [Screen, widgetDisplayName, componentsMap]
-  );
-  const values = get(componentNode, `props.${attrName}`, ["auto"]);
-  const changeHandler = useCallback(
-    (value: string, index: number) => {
-      const output = _.cloneDeep(values);
-      output[index] = value || "";
-      handleUpdateDsl(attrName, output);
-    },
-    [attrName, handleUpdateDsl, values]
-  );
-  return (
-    <Box
-      sx={{
-        padding: "8px 16px",
-        display: "flex",
-        gap: 1,
-        // overflow:"auto",
-        alignItems: "center",
-      }}
-    >
-      <Accordion>
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon />}
-          aria-controls="panel1-content"
-          id="panel1-header"
-        >
-          {labelName}
-        </AccordionSummary>
-        <AccordionDetails>
-          {new Array(length).fill(null).map((_, index) => (
-            <React.Fragment key={index}>
-              <FormControl
-                fullWidth
-                sx={{ margin: "5px", fontSize: "5px"
-
-                }}
-              >
-                <InputLabel sx={{fontSize:"10px"}} id="demo-simple-select-label">{`Column - ${index+1}`}</InputLabel>
-                <Select
-                  labelId="demo-simple-select-label"
-                  id="demo-simple-select"
-                  value={values[index] || "1fr"}
-                  size="small"
-                  defaultValue={"1fr"}
-                  sx={{fontSize:"10px"}}
-                  label={`Column - ${index+1}`}
-                  onChange={(e) => {
-                    changeHandler(e.target.value, index);
-                  }}
-                >
-                  {new Array((length*3)).fill(null).map((_, optionIndex) => {
-                    return (
-                      <MenuItem  sx={{fontSize:"10px"}} key={optionIndex} value={`${optionIndex+1}fr`}>
-                        {`${optionIndex+1}fr`}
-                      </MenuItem>
-                    );
-                  })}
-                </Select>
-              </FormControl>
-              {/* <input
-                key={"input" + index}
-                defaultValue={"auto"}
-                onChange={(e) => changeHandler(e.target.value, index)}
-                value={values[index] || ""}
-              ></input> */}
-            </React.Fragment>
-          ))}
-        </AccordionDetails>
-      </Accordion>
-    </Box>
-  );
-};
-
-export default ColumnFractionSetter;

package/page/App/components/InspectPanel/PanelSetters/InputSetter/ColumnFraction/interface.ts

@@ -1,5 +0,0 @@
-import { BaseInputSetterProps } from "../interface"
-
-export interface DirectionPaddingSetterProps extends BaseInputSetterProps {
-  value?: any
-}

package/page/App/components/InspectPanel/PanelSetters/InputSetter/ColumnFraction/style.ts

@@ -1,103 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-export const directionPaddingContainerStyle = css`
-  display: flex;
-  padding: 8px 16px;
-`
-
-export const setterContainerStyle = css`
-  padding: 8px 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`
-
-export const optionsIconHotSpotStyle = css`
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
-
-export const prefixContainerStyle = css`
-  color: ${globalColor("grayBlue-04")};
-  font-size: 12px;
-`
-
-// export const OtpStyle = {
-//   width: '50px',
-//   fontSize:"8px",
-//   fontWeight: 'bold',
-//   padding:"4px",
-//   borderRadius: myTheme.shape.borderRadius * 2,
-//   textAlign: 'center',
-//   color: mytheme.palette.text.secondary,
-//   background: myTheme.palette.secondary.main,
-//   border: `1.5px solid transparent`,
-//   "&:not([value=''])": {
-//     border: `1.5px solid ${myTheme.palette.primary.main}`
-//   },
-//   "&:hover": {
-//     backgroundColor: mytheme.palette.grey[300],
-//     border: `1.5px solid ${myTheme.palette.primary.main}`
-//   },
-
-//   '&:focus': {
-//     border: `1.5px solid ${myTheme.palette.primary.main}`
-//   },
-
-//   '&:focus-visible': {
-//     outline: 'none',
-//     border: `1.5px solid ${myTheme.palette.primary.main}`
-//   }
-// }
-// primary: {
-//   main: "#eef2f6",
-// },
-// secondary: {
-//   main: "#ffffff",
-// },
-// text: {
-//   primary: "#000000",
-//   button: "#ffffff",
-//   input: "#000000",
-//   iconButton: "#3949ab",
-// },
-// background: {
-//   paper: "#ffffff",
-//   button: "#3949ab",
-//   input: "#ffffff",
-//   default: "#eef2f6",
-//   iconButton: "#ede7f6",
-// },
-
-export const OtpStyle = {
-  width: '50px',
-  fontSize:"8px",
-  fontWeight: 'bold',
-  padding:"4px",
-  borderRadius: "40px",
-  border:"0.5px solid gray",
-  textAlign: 'center',
-  color: "#000000",
-  background: "#ffffff",
-  // border: `1.5px solid transparent`,
-  "&:not([value=''])": {
-    border: `1.5px solid #eef2f6`
-  },
-  "&:hover": {
-    backgroundColor: "#f0f0f0",
-    border: `1.5px solid #eef2f6`
-  },
-
-  '&:focus': {
-    border: `1.5px solid #eef2f6`
-  },
-
-  '&:focus-visible': {
-    outline: 'none',
-    border: `1.5px solid #eef2f6`
-  }
-}

package/page/App/components/InspectPanel/PanelSetters/InputSetter/MeasureCheckInput/index.tsx

@@ -1,62 +0,0 @@
-import { FC, FocusEvent, useCallback } from "react"
-import { PanelLabel } from "@/page/App/components/InspectPanel/components/Label"
-import { MeasureCheckInputSetterProps } from "./interface"
-import { setterContainerStyle } from "./style"
-
-const valueWithMeasureRegex = /^\d+(\.\d+)?(px|vh|vw|%|em|rem|cm|mm|in|pt|pc)$/
-
-const MeasureCheckInput: FC<MeasureCheckInputSetterProps> = (props) => {
-  const {
-    handleUpdateMultiAttrDSL,
-    attrName,
-    value,
-    // icon,
-    labelName,
-    labelSize = "small",
-    labelDesc,
-  } = props
-
-  const handleUpdateBorderWidth = useCallback(
-    (currentValue: string) => {
-      handleUpdateMultiAttrDSL?.({
-        [attrName]: currentValue,
-      })
-    },
-    [attrName, handleUpdateMultiAttrDSL],
-  )
-
-  const fixInputValueWhenBlur = useCallback(
-    (e: FocusEvent<HTMLInputElement>) => {
-      let currentValue = e.target.value.toLocaleLowerCase().replace(/\s*/g, "")
-      if (currentValue && !valueWithMeasureRegex.test(currentValue)) {
-        const decimalArr = currentValue.match(/\d+(\.\d+)?/g)
-        if (decimalArr) currentValue = decimalArr.join("") + "px"
-      }
-      handleUpdateMultiAttrDSL?.({
-        [attrName]: currentValue,
-      })
-    },
-    [attrName, handleUpdateMultiAttrDSL],
-  )
-
-  return (
-    <div css={setterContainerStyle}>
-      <PanelLabel
-        labelName={labelName}
-        labelDesc={labelDesc}
-        labelSize={labelSize}
-      />
-      <input
-        onChange={(e)=>handleUpdateBorderWidth(e.target.value)}
-        value={value}
-        key={attrName}
-       
-        width="170px"
-        onBlur={fixInputValueWhenBlur}
-    
-      />
-    </div>
-  )
-}
-
-export default MeasureCheckInput

package/page/App/components/InspectPanel/PanelSetters/InputSetter/MeasureCheckInput/interface.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from "react"
-
-export interface MeasureCheckInputSetterProps {
-  value: string
-  handleUpdateMultiAttrDSL?: (updateSlice: Record<string, any>) => void
-  attrName: string
-  labelName?: string
-  labelDesc?: string
-  labelSize?: "medium" | "small"
-  icon?: ReactNode
-}

package/page/App/components/InspectPanel/PanelSetters/InputSetter/MeasureCheckInput/style.ts

@@ -1,9 +0,0 @@
-import { css } from "@emotion/react"
-
-export const setterContainerStyle = css`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 0;
-  width: 100%;
-`

package/page/App/components/InspectPanel/PanelSetters/InputSetter/OptionMappedInput/optionMappedInputSetter.tsx

@@ -1,38 +0,0 @@
-import { FC, useCallback } from "react"
-import {
-  getNeedComputedValue,
-  realInputValue,
-} from "@/utils/InspectHelper/selectWidgetHelper"
-import BaseInput from "../BaseInput"
-import { BaseInputSetterProps } from "../interface"
-
-const OptionMappedInputSetter: FC<BaseInputSetterProps> = (props) => {
-  const { handleUpdateDsl, value, widgetDisplayName } = props
-
-  const handleValueChange = useCallback(
-    (attrName: string, value: string) => {
-      const output = getNeedComputedValue(value, widgetDisplayName)
-      handleUpdateDsl(attrName, output)
-    },
-    [handleUpdateDsl, widgetDisplayName],
-  )
-
-  const wrappedCodeFunc = useCallback(
-    (value: string) => {
-      return getNeedComputedValue(value, widgetDisplayName)
-    },
-    [widgetDisplayName],
-  )
-
-  return (
-    <BaseInput
-      {...props}
-      value={realInputValue(value, widgetDisplayName)}
-      handleUpdateDsl={handleValueChange}
-      wrappedCodeFunc={wrappedCodeFunc}
-    />
-  )
-}
-
-OptionMappedInputSetter.displayName = "OptionMappedInputSetter"
-export default OptionMappedInputSetter

package/page/App/components/InspectPanel/PanelSetters/InputSetter/ScriptInput/index.tsx

@@ -1,121 +0,0 @@
-import { FC, useCallback, useMemo } from "react"
-// import { useTranslation } from "react-i18next"
-import { useSelector } from "react-redux"
-
-import { CodeEditor } from "@/components/CodeEditor"
-import {
-  CODE_LANG,
-  CODE_TYPE,
-} from "@/components/CodeEditor/CodeMirror/extensions/interface"
-import {
-  getNeedComputedValueWithList,
-  realInputValueWithList,
-} from "@/page/App/components/InspectPanel/PanelSetters/InputSetter/util"
-import { getContainerListDisplayNameMappedChildrenNodeDisplayName } from "@/redux/currentApp/components/componentsSelector"
-import {
-  realInputValueWithScript,
-  wrapperScriptCode,
-} from "@/utils/evaluateDynamicString/valueConverter"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
-import { BaseInputSetterProps } from "../interface"
-import {
-  applyInputSetterWrapperStyle,
-  docComponentContainerStyle,
-} from "./style"
-import { hasDynamicStringSnippet } from "@/redux/utils"
-
-const ScriptInput: FC<BaseInputSetterProps> = (props) => {
-  const {
-    className,
-    placeholder,
-    attrName,
-    handleUpdateDsl,
-    value,
-    widgetDisplayName,
-    labelName,
-    detailedDescription,
-    labelDesc,
-    // widgetType,
-  } = props
-
-  // const { t } = useTranslation()
-
-  const listWidgets = useSelector(
-    getContainerListDisplayNameMappedChildrenNodeDisplayName,
-  )
-
-  const currentListDisplayName = useMemo(() => {
-    const listWidgetDisplayNames = Object.keys(listWidgets)
-    for (let i = 0; i < listWidgetDisplayNames.length; i++) {
-      if (listWidgets[listWidgetDisplayNames[i]].includes(widgetDisplayName)) {
-        return listWidgetDisplayNames[i]
-      }
-    }
-    return ""
-  }, [listWidgets, widgetDisplayName])
-
-  const finalValue = useMemo(() => {
-    let tempValue = value
-    if (currentListDisplayName) {
-      tempValue = realInputValueWithList(value, currentListDisplayName)
-    }
-    return realInputValueWithScript(tempValue, true)
-  }, [currentListDisplayName, value])
-
-  const onChange = useCallback(
-    (value: string) => {
-      let output = value
-      if (
-        currentListDisplayName &&
-        hasDynamicStringSnippet(value ?? "") &&
-        value.includes("currentItem")
-      ) {
-        output = getNeedComputedValueWithList(value, currentListDisplayName)
-      }
-      output = wrapperScriptCode(output, true)
-      handleUpdateDsl(attrName, output)
-    },
-    [attrName, currentListDisplayName, handleUpdateDsl],
-  )
-
-
-  return (
-    <div css={applyInputSetterWrapperStyle}>
-      <div css={docComponentContainerStyle}>
-        docIcon
-        {/* <Link to={RUN_SCRIPT_DOC_LINK} target="_blank">
-          <Button
-            leftIcon={<DocsIcon />}
-            colorScheme="grayBlue"
-            variant="text"
-            size="small"
-          >
-            {t("editor.inspect.header.action_menu.view_documentation")}
-          </Button>
-        </Link> */}
-      </div>
-      <CodeEditor
-        scopeOfAutoComplete="page"
-        className={className}
-        value={finalValue}
-        onChange={onChange}
-        showLineNumbers={false}
-        placeholder={placeholder}
-        expectValueType={VALIDATION_TYPES.STRING}
-        lang={CODE_LANG.JAVASCRIPT}
-        maxHeight="208px"
-        minHeight="120px"
-        maxWidth="100%"
-        codeType={CODE_TYPE.FUNCTION}
-        modalTitle={labelName}
-        canShowCompleteInfo
-        modalDescription={detailedDescription ?? labelDesc}
-        // onFocus={onFocus}
-        // onBlur={onBlur}
-      />
-    </div>
-  )
-}
-
-ScriptInput.displayName = "BaseInput"
-export default ScriptInput

package/page/App/components/InspectPanel/PanelSetters/InputSetter/ScriptInput/style.ts

@@ -1,16 +0,0 @@
-import { css } from "@emotion/react"
-
-export const applyInputSetterWrapperStyle = css`
-  width: 100%;
-  padding: 8px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`
-
-export const docComponentContainerStyle = css`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-`

package/page/App/components/InspectPanel/PanelSetters/InputSetter/interface.ts

@@ -1,9 +0,0 @@
-import { BaseSetter } from "@/page/App/components/InspectPanel/PanelSetters/interface"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
-
-export interface BaseInputSetterProps extends BaseSetter {
-  placeholder?: string
-  expectedType?: VALIDATION_TYPES
-  value?: string
-  wrappedCodeFunc?: (code: string) => string
-}

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

@@ -1,8 +0,0 @@
-import { css } from "@emotion/react"
-
-export const setterContainerStyle = css`
-  padding: 8px 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`

package/page/App/components/InspectPanel/PanelSetters/InputSetter/util.ts

@@ -1,32 +0,0 @@
-import { JSToString, stringToJS } from "@/utils/evaluateDynamicString/utils"
-
-export const realInputValueWithList = (
-  attrValue: string | undefined,
-  widgetDisplayName: string,
-) => {
-  if (attrValue === "" || attrValue == undefined) return ""
-  let value = attrValue
-  if (
-    attrValue.includes(
-      `{{${widgetDisplayName}.dataSources.map((currentItem) => (`,
-    )
-  ) {
-    value = `${attrValue.substring(
-      `{{${widgetDisplayName}.dataSources.map((currentItem) => (`.length,
-      attrValue.length - 4,
-    )}`
-    return JSToString(value)
-  }
-  return value
-}
-
-export const getNeedComputedValueWithList = (
-  value: string,
-  widgetDisplayName: string,
-) => {
-  const stringToCanEvaluate = stringToJS(value)
-  if (stringToCanEvaluate === "") {
-    return stringToCanEvaluate
-  }
-  return `{{${widgetDisplayName}.dataSources.map((currentItem) => (${stringToCanEvaluate}))}}`
-}

package/page/App/components/InspectPanel/PanelSetters/MappedOptionSetter/index.tsx

@@ -1,33 +0,0 @@
-import { FC } from "react"
-import RenderFieldAndLabel from "@/page/App/components/InspectPanel/components/FieldAndLabel"
-import { MappedOptionSetterProps } from "./interface"
-import { listStyle, listWrapperStyle, optionListHeaderStyle } from "./style"
-
-const MappedOptionSetter: FC<MappedOptionSetterProps> = (props) => {
-  const { attrName, labelName, childrenSetter, widgetDisplayName } = props
-
-  return (
-    <div css={listStyle}>
-      <div css={optionListHeaderStyle}>
-        <div>{labelName}</div>
-      </div>
-      <div css={listWrapperStyle}>
-        {childrenSetter?.map((child) => {
-          const { id } = child
-
-          return (
-            <RenderFieldAndLabel
-              key={`${id}-${widgetDisplayName}`}
-              config={child}
-              displayName={widgetDisplayName ?? ""}
-              parentAttrName={attrName}
-            />
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-MappedOptionSetter.displayName = "MappedOptionSetter"
-export default MappedOptionSetter

package/page/App/components/InspectPanel/PanelSetters/MappedOptionSetter/interface.ts

@@ -1,7 +0,0 @@
-import { BaseSetter } from "@/page/App/components/InspectPanel/PanelSetters/interface"
-import { PanelLabelProps } from "@/page/App/components/InspectPanel/components/Label/interface"
-import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface"
-
-export interface MappedOptionSetterProps extends BaseSetter, PanelLabelProps {
-  childrenSetter?: PanelFieldConfig[]
-}

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

@@ -1,29 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-
-export const optionListHeaderStyle = css`
-  width: 100%;
-  background-color: ${globalColor(`grayBlue-09`)};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 40px;
-  color: ${globalColor(`grayBlue-02`)};
-  font-weight: 500;
-  box-sizing: border-box;
-  padding: 0 16px;
-`
-
-export const listStyle = css`
-  border: 1px solid ${globalColor(`grayBlue-08`)};
-  margin: 8px 16px;
-  border-radius: 8px;
-`
-
-export const listWrapperStyle = css`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-`