impaktapps-ui-builder 0.0.382460 → 1.0.0

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

@@ -0,0 +1,91 @@
+import { get, isString } from "lodash-es"
+import { FC } from "react"
+import { useSelector } from "react-redux"
+import { v4 } from "uuid"
+// import { Column } from "@/page/app/components/InspectPanel/PanelSetters/DragMoveComponent/Column"
+// import { ColumnContainer } from "@/page/app/components/InspectPanel/PanelSetters/DragMoveComponent/ColumnContainer"
+// import { ColumnEmpty } from "@/page/app/components/InspectPanel/PanelSetters/DragMoveComponent/Empty"
+import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector"
+import { OptionListSetterProps } from "./interface"
+import { ColumnContainer } from "../DragMoveComponent/ColumnContainer"
+import { Column } from "../DragMoveComponent/Column"
+import { ColumnEmpty } from "../DragMoveComponent/Empty"
+
+const OptionListSetter: FC<OptionListSetterProps> = (props) => {
+  const {
+    value = [],
+    labelName,
+    attrName,
+    widgetDisplayName,
+    childrenSetter,
+    handleUpdateMultiAttrDSL,
+    itemName = "Option",
+  } = props
+
+  const execResult = useSelector(getExecutionResult)
+  const executeValue = get(execResult, `${widgetDisplayName}.${attrName}`, [])
+
+  return ( 
+    <ColumnContainer
+      attrName={attrName}
+      value={value}
+      label={labelName}
+      handleUpdateMultiAttrDSL={handleUpdateMultiAttrDSL}
+      columnNum={value.length}
+      items={value.map((item) => item.id)}
+      onClickNew={() => {
+        const newItem = {
+          id: `${itemName}-${v4()}`,
+          key: `${itemName}-${v4()}`,
+          label: `${itemName} ${value.length + 1}`,
+        }
+        handleUpdateMultiAttrDSL?.({
+          [attrName]: [...value, newItem],
+        })
+      }}
+    >
+      {value.length > 0 ? (
+        value.map((item, index) => {
+          return (
+            <Column
+              onCopy={() => {
+                const newItem = {
+                  ...value[index],
+                  id: `${itemName}-${v4()}`,
+                  key: `${itemName}-${v4()}`,
+                }
+                const updatedArray = [...value, newItem]
+                handleUpdateMultiAttrDSL?.({
+                  [attrName]: updatedArray,
+                })
+              }}
+              onDelete={(id) => {
+                const newV = value.filter((item) => item.id !== id)
+                handleUpdateMultiAttrDSL?.({
+                  [attrName]: newV,
+                })
+              }}
+              showCopy
+              showDelete
+              key={item.id}
+              id={item.id}
+              label={
+                isString(get(executeValue, `${index}.label`))
+                  ? get(executeValue, `${index}.label`)
+                  : JSON.stringify(get(executeValue, `${index}.label`))
+              }
+              widgetDisplayName={widgetDisplayName}
+              childrenSetter={childrenSetter}
+              attrPath={`${attrName}.${index}`}
+            />
+          )
+        })
+      ) : (
+        <ColumnEmpty />
+      )}
+    </ColumnContainer>
+  )
+}
+
+OptionListSetter.displayName = "OptionListSetter"
+export default OptionListSetter

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

@@ -0,0 +1,16 @@
+import { PanelFieldConfig } from "../../interface"
+import { BaseSetter } from "../interface"
+
+export interface OptionItemShape {
+  id: string
+  value?: string
+  label?: string
+  disabled?: string
+}
+
+export interface OptionListSetterProps extends BaseSetter {
+  value: OptionItemShape[]
+  childrenSetter?: PanelFieldConfig[]
+  headerName?: string
+  itemName?: string
+}

package/page/App/components/InspectPanel/PanelSetters/PublicComponent/DynamicIcon/index.tsx

@@ -0,0 +1,26 @@
+import { FC } from "react";
+import { DynamicIconProps } from "@/page/App/components/InspectPanel/PanelSetters/PublicComponent/DynamicIcon/interface";
+import { applyCustomIconStyle } from "./style";
+
+export const DynamicIcon: FC<DynamicIconProps> = (props) => {
+  const { isDynamic, hasRightContent, onClick } = props;
+  return (
+    <div
+      css={applyCustomIconStyle(isDynamic, hasRightContent)}
+      onClick={onClick}
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.1406 5.7814C13.1875 5.72983 13.1828 5.65171 13.1313 5.60483C13.1078 5.58452 13.0781 5.57202 13.0484 5.57202H11.9141C11.8766 5.57202 11.8422 5.58765 11.8188 5.61577L9.89845 7.88452C9.85314 7.93765 9.77501 7.9439 9.72189 7.89858C9.70783 7.88608 9.69689 7.87202 9.68907 7.85483L8.69689 5.64702C8.67657 5.60171 8.63282 5.57358 8.58282 5.57358H5.94845L5.96251 5.50015L6.08751 4.83921C6.25158 3.97358 6.68126 3.56733 7.42814 3.56733C7.71876 3.56733 7.98283 3.5939 8.19064 3.64077L8.41095 2.59702C8.05782 2.52358 7.86095 2.50171 7.55314 2.50171C5.93907 2.50171 5.10939 3.1939 4.8047 4.80327L4.65783 5.57515H3.13283C3.07345 5.57515 3.02189 5.61733 3.01095 5.67515L2.8422 6.48452C2.82814 6.55171 2.87189 6.6189 2.93908 6.63296C2.94689 6.63452 2.95626 6.63608 2.96408 6.63608H4.43751L3.04689 13.3533C3.03283 13.4205 3.07658 13.4876 3.14376 13.5017C3.15158 13.5033 3.16095 13.5048 3.16876 13.5048H4.20314C4.26251 13.5048 4.31407 13.4626 4.32501 13.4048L5.72658 6.63765H7.84845L8.91407 8.81108C8.93595 8.8564 8.9297 8.91108 8.89532 8.94858L6.07345 12.1205C6.02814 12.172 6.03283 12.2517 6.08439 12.297C6.10783 12.3173 6.13751 12.3283 6.1672 12.3283H7.30314C7.34064 12.3283 7.37501 12.3126 7.39845 12.2845L9.33126 9.99233C9.37501 9.93921 9.4547 9.93296 9.50782 9.97671C9.52189 9.98921 9.53282 10.0033 9.54064 10.0205L10.5688 12.2501C10.5891 12.2939 10.6328 12.3236 10.6828 12.3236H11.6922C11.7609 12.3236 11.8172 12.2673 11.8172 12.1986C11.8172 12.1798 11.8125 12.1611 11.8047 12.1439L10.3172 9.03608C10.2953 8.99077 10.3031 8.93608 10.3375 8.89858L13.1406 5.7814Z"
+          fill="currentColor"
+        />
+      </svg>
+    </div>
+  );
+};

package/page/App/components/InspectPanel/PanelSetters/PublicComponent/DynamicIcon/interface.ts

@@ -0,0 +1,5 @@
+export interface DynamicIconProps {
+  isDynamic: boolean
+  onClick: () => void
+  hasRightContent: boolean
+}

package/page/App/components/InspectPanel/PanelSetters/PublicComponent/DynamicIcon/style.ts

@@ -0,0 +1,25 @@
+import { globalColor } from "@/utils/colorBuilder"
+import { SerializedStyles, css } from "@emotion/react"
+
+export const applyCustomIconStyle = (
+  isDynamic: boolean = false,
+  hasRightContent: boolean = false,
+): SerializedStyles => {
+  return css`
+    color: ${isDynamic
+      ? globalColor("techPurple-03")
+      : globalColor("grayBlue-06")};
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: ${hasRightContent ? "10px" : 0};
+
+    :hover {
+      cursor: pointer;
+      color: ${globalColor("techPurple-03")};
+    }
+  `
+}

package/page/App/components/InspectPanel/PanelSetters/PublicComponent/Label/addActionLabel.tsx

@@ -0,0 +1,34 @@
+import { FC } from "react"
+import { useTranslation } from "react-i18next"
+import { AddActionLabelProps } from "@/page/App/components/InspectPanel/PanelSetters/PublicComponent/Label/interface"
+import { headerWrapperStyle } from "@/page/App/components/InspectPanel/PanelSetters/PublicComponent/Label/style"
+import { PanelLabel } from "@/page/App/components/InspectPanel/components/Label"
+import { Button } from "@mui/material"
+import AddIcon from '@mui/icons-material/Add';
+import { globalColor } from "@/utils/colorBuilder"
+// import { globalColor } from "@/utils/colorBuilder"
+
+export const AddActionLabel: FC<AddActionLabelProps> = (props) => {
+  const { labelName, labelDesc, handleAddItem } = props
+  const { t } = useTranslation()
+
+  return (
+    <div css={headerWrapperStyle}>
+      <PanelLabel labelName={labelName} labelDesc={labelDesc} />
+      <Button
+        sx={{padding:"1px 8px"}}
+        // colorScheme="techPurple"
+        size="small"
+        variant="contained"
+        onClick={handleAddItem}
+        startIcon={
+          <AddIcon sx={{color:"white"}} />
+        }
+      >
+        {t("editor.inspect.setter_content.event_handler_list.new")}
+      </Button>
+    </div>
+  )
+}
+
+AddActionLabel.displayName = "AddActionLabel"

package/page/App/components/InspectPanel/PanelSetters/PublicComponent/Label/interface.ts

@@ -0,0 +1,6 @@
+import { PanelLabelProps } from "@/page/App/components/InspectPanel/components/Label/interface"
+
+export interface AddActionLabelProps
+  extends Pick<PanelLabelProps, "labelName" | "labelDesc"> {
+  handleAddItem: () => void
+}

package/page/App/components/InspectPanel/PanelSetters/PublicComponent/Label/style.ts

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

package/page/App/components/InspectPanel/PanelSetters/PublicComponent/Modal/baseBody.tsx

@@ -0,0 +1,11 @@
+import { FC } from "react"
+import { BaseBodyProps } from "./interface"
+import { listWrapperStyle } from "./style"
+
+export const BaseModalBody: FC<BaseBodyProps> = (props) => {
+  const { children } = props
+
+  return <div css={listWrapperStyle}>{children}</div>
+}
+
+BaseModalBody.displayName = "ModalBody"

package/page/App/components/InspectPanel/PanelSetters/PublicComponent/Modal/body.tsx

@@ -0,0 +1,33 @@
+import { FC } from "react"
+// import { useSelector } from "react-redux"
+import RenderFieldAndLabel from "@/page/App/components/InspectPanel/components/FieldAndLabel"
+// import { getGuideInfo } from "@/redux/guide/guideSelector"
+import { BodyProps } from "./interface"
+import { listWrapperStyle } from "./style"
+ import { v4 } from "uuid"
+ 
+export const ModalBody: FC<BodyProps> = (props) => {
+  const { childrenSetter, widgetDisplayName, attrPath } = props
+  // const guideInfo = useSelector(getGuideInfo)
+
+  return (
+    <div css={listWrapperStyle}>
+      {childrenSetter?.map((child,i) => {
+        const { id } = child
+        return (
+          <RenderFieldAndLabel
+          
+            //  key={`${id}-${widgetDisplayName}-${v4()}`}
+            key={`${id}-${widgetDisplayName}`}
+            config={child}
+            displayName={widgetDisplayName ?? ""}
+            parentAttrName={attrPath}
+            guideInfo={i}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+ModalBody.displayName = "ModalBody"

package/page/App/components/InspectPanel/PanelSetters/PublicComponent/Modal/header.tsx

@@ -0,0 +1,33 @@
+
+import { FC } from "react"
+// import { Link } from "react-router-dom"
+import CloseIcon  from "@mui/icons-material/CloseOutlined"
+import { HeaderProps } from "./interface"
+import {
+  closeIconStyle,
+  headerStyle,
+  modalHeaderText,
+  titleContainerStyle,
+} from "./style"
+
+export const ModalHeader: FC<HeaderProps> = (props) => {
+  const { title, handleCloseModal, docLink } = props
+
+  return (
+    <div css={headerStyle}>
+      <div css={titleContainerStyle}>
+        <div css={modalHeaderText}>{title}</div>
+        {/* {docLink && (
+          // <div>
+          //   DocsIcon
+          //   </div>
+
+        )} */}
+      </div>
+      <div css={closeIconStyle} onClick={handleCloseModal}>
+        <CloseIcon />
+      </div>
+    </div>
+  )
+}
+ModalHeader.displayName = "ModalHeader"

package/page/App/components/InspectPanel/PanelSetters/PublicComponent/Modal/index.tsx

@@ -0,0 +1,51 @@
+import { css } from "@emotion/react"
+import { FC, Suspense, useMemo } from "react"
+import { ModalBody } from "./body"
+import { ModalHeader } from "./header"
+import { ModalProps } from "./interface"
+import { modalWrapperStyle } from "./style"
+
+export const BaseModal: FC<ModalProps> = (props) => {
+  const {
+    title,
+    handleCloseModal,
+    childrenSetter,
+    widgetDisplayName,
+    attrPath,
+    children,
+    _css,
+    header,
+    extraElement,
+    docLink,
+  } = props
+
+  const renderBody = useMemo(() => {
+    // if (!childrenSetter || !widgetDisplayName || !attrPath) {
+    //   return children
+    // }
+    return (
+      <ModalBody
+        childrenSetter={childrenSetter}
+        widgetDisplayName={widgetDisplayName}
+        attrPath={attrPath}
+      />
+    )
+  }, [childrenSetter, widgetDisplayName, attrPath, children])
+
+  return (
+    <div css={css(modalWrapperStyle, _css)}>
+      {header ?? (
+        <ModalHeader
+          title={title}
+          handleCloseModal={handleCloseModal}
+          docLink={docLink}
+        />
+      )}
+      <Suspense>
+        {renderBody}
+        </Suspense>
+      {extraElement}
+    </div>
+  )
+}
+BaseModal.displayName = "BaseModal"

package/page/App/components/InspectPanel/PanelSetters/PublicComponent/Modal/interface.ts

@@ -0,0 +1,29 @@
+import { SerializedStyles } from "@emotion/react"
+import { ReactNode } from "react"
+import { PanelFieldConfig } from "@/page/App/components/InspectPanel/interface"
+
+export interface HeaderProps {
+  title: string
+  handleCloseModal: () => void
+  docLink?: string
+}
+
+export interface BaseBodyProps {
+  children: ReactNode
+}
+
+export interface BodyProps {
+  childrenSetter: PanelFieldConfig[]
+  widgetDisplayName: string
+  attrPath: string
+}
+
+export interface ModalProps extends HeaderProps {
+  childrenSetter?: PanelFieldConfig[]
+  widgetDisplayName?: string
+  attrPath?: string
+  children?: ReactNode
+  _css?: SerializedStyles
+  header?: ReactNode
+  extraElement?: ReactNode
+}

package/page/App/components/InspectPanel/PanelSetters/PublicComponent/Modal/style.ts

@@ -0,0 +1,54 @@
+import { globalColor } from "@/utils/colorBuilder"
+import { css } from "@emotion/react"
+
+export const headerStyle = css`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  color: ${globalColor(`grayBlue-04`)};
+  font-size: 16px;
+  padding: 0 16px;
+  font-weight: 500;
+
+  span {
+    display: flex;
+    align-items: center;
+  }
+`
+
+export const titleContainerStyle = css`
+  flex-grow: 1;
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`
+
+export const modalHeaderText = css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+
+export const closeIconStyle = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 14px;
+  height: 14px;
+  color: ${globalColor(`grayBlue-02`)};
+  cursor: pointer;
+`
+
+export const modalWrapperStyle = css`
+  width: 400px;
+`
+export const listWrapperStyle = css`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding-bottom: 12px;
+`

package/page/App/components/InspectPanel/PanelSetters/RadioGroupSetter/baseRadioGroup.tsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+import {
+  applyRadioGroupWrapperStyle,
+  baseRadioGroupContainerStyle,
+} from "@/page/App/components/InspectPanel/PanelSetters/RadioGroupSetter/style";
+import { PanelLabel } from "@/page/App/components/InspectPanel/components/Label";
+import { BaseRadioGroupProps } from "./interface";
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+
+const BaseRadioGroupSetter = (props: BaseRadioGroupProps) => {
+  const {
+    options,
+    defaultValue,
+    isSetterSingleRow = false,
+    attrName,
+    labelName,
+    labelDesc,
+    handleUpdateDsl,
+  } = props;
+
+  const [alignment, setAlignment] = useState(defaultValue || "small");
+
+  const handleChange = (_, value: string) => {
+    setAlignment(value);
+
+    handleUpdateDsl(attrName, value);
+  };
+
+  return (
+    <div css={baseRadioGroupContainerStyle(isSetterSingleRow)} key={`${attrName}-wrapper`}>
+      {labelName && (
+        <span>
+          <PanelLabel
+            labelName={labelName}
+            labelDesc={labelDesc}
+            labelSize="medium"
+          />
+        </span>
+      )}
+      <div css={applyRadioGroupWrapperStyle(isSetterSingleRow)}>
+        <ToggleButtonGroup
+          color="primary"
+          value={alignment}
+          exclusive
+          onChange={handleChange}
+          aria-label="Platform"
+        >
+          {options.map(({ label, value }) => (
+            <ToggleButton sx={{fontSize:"9px",fontWeight:500}} key ={value} value={value} size="small">
+              {label}
+            </ToggleButton>
+          ))}
+        </ToggleButtonGroup>
+      </div>
+    </div>
+  );
+};
+
+BaseRadioGroupSetter.displayName = "BaseRadioGroupSetter";
+
+export default BaseRadioGroupSetter;

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

@@ -0,0 +1,5 @@
+import { BaseSetter } from "@/page/App/components/InspectPanel/PanelSetters/interface"
+
+export interface BaseRadioGroupProps extends BaseSetter {
+  options?: any
+}

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

@@ -0,0 +1,36 @@
+import { SerializedStyles, css } from "@emotion/react"
+import { fixedWidthStyle } from "@/page/App/components/InspectPanel/PanelSetters/style"
+
+export const applyRadioGroupWrapperStyle = (
+  isSetterSingleRow: boolean = false,
+): SerializedStyles => {
+  return isSetterSingleRow
+    ? css`
+        width: 100%;
+      `
+    : fixedWidthStyle
+}
+
+export const radioGroupStyle = css`
+  width: 100%;
+`
+
+export const baseRadioGroupContainerStyle = (
+  isSetterSingleRow: boolean = false,
+) => {
+  const basicStyle = css`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  `
+  const singleRowStyle = css`
+    flex-direction: column;
+    gap: 8px;
+  `
+  return css`
+    display: flex;
+    padding: 8px 0;
+    ${isSetterSingleRow ? singleRowStyle : basicStyle};
+    width: 100%;
+  `
+}

package/page/App/components/InspectPanel/PanelSetters/SelectSetter/baseDynamicSelect.tsx

@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { FC, useCallback } from "react";
+import { CodeEditor } from "@/components/CodeEditor";
+import {
+  CODE_LANG,
+  CODE_TYPE,
+} from "@/components/CodeEditor/CodeMirror/extensions/interface";
+import { BaseDynamicSelectSetterProps } from "@/page/App/components/InspectPanel/PanelSetters/SelectSetter/interface";
+
+import { PanelLabel } from "@/page/App/components/InspectPanel/components/Label";
+import { MenuItem, Select } from "@mui/material";
+import {
+  basicDynamicSetterContainerStyle,
+  dynamicSelectHeaderStyle,
+  dynamicSelectSetterStyle,
+} from "./style";
+import { DynamicIcon } from "../PublicComponent/DynamicIcon";
+
+const BaseDynamicSelect: FC<BaseDynamicSelectSetterProps> = (props) => {
+  const {
+    labelName,
+    labelDesc,
+    isDynamic,
+    onClickFxButton,
+    value,
+    onChangeInput,
+    onChangeSelect,
+    expectedType,
+    options,
+    selectPlaceholder,
+    inputPlaceholder,
+    isError,
+    // widgetType,
+    // attrName,
+    detailedDescription,
+  } = props;
+
+  const handleClickFxButton = useCallback(() => {
+    onClickFxButton?.();
+  }, [onClickFxButton]);
+
+  const onChangeSelectInner = useCallback(
+    (value: any) => {
+      onChangeSelect(value);
+    },
+    [onChangeSelect]
+  );
+
+  return (
+    <div css={basicDynamicSetterContainerStyle}>
+      <div css={dynamicSelectHeaderStyle}>
+        <PanelLabel labelName={labelName} labelDesc={labelDesc} />
+        <DynamicIcon
+          isDynamic={isDynamic}
+          onClick={handleClickFxButton}
+          hasRightContent={false}
+        />
+      </div>
+      <div css={dynamicSelectSetterStyle}>
+        {isDynamic ? (
+          
+          <CodeEditor
+            value={value ?? ""}
+            onChange={onChangeInput}
+            showLineNumbers={false}
+            placeholder={inputPlaceholder}
+            expectValueType={expectedType}
+            lang={CODE_LANG.JAVASCRIPT}
+            maxHeight="208px"
+            minHeight="30px"
+            maxWidth="100%"
+            codeType={CODE_TYPE.EXPRESSION}
+            modalTitle={labelName}
+            modalDescription={labelDesc ?? detailedDescription}
+            scopeOfAutoComplete="page"
+          />
+        ) : (
+          <Select
+            sx={{ color: "techPurple" }}
+            fullWidth
+            size="small"
+            aria-placeholder="Select a query"
+            placeholder={selectPlaceholder}
+            value={value}
+            onChange={(e)=>onChangeSelectInner(e.target.value)}
+            error={isError}
+          >
+            {options?.map((e) => {
+              return (
+                <MenuItem key={e.value} value={e.value}>
+                  {e.label}
+                </MenuItem>
+              );
+            })}
+          </Select>
+        )}
+      </div>
+    </div>
+  );
+};
+
+BaseDynamicSelect.displayName = "BaseDynamicSelect";
+
+export default BaseDynamicSelect;