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

package/components/CodeEditor/HintToolTip/index.tsx

@@ -1,92 +0,0 @@
-// import copy from "copy-to-clipboard"
-import { FC, useCallback, useState } from "react";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import {
-  HintTooltipContentProps,
-  HintTooltipProps,
-} from "@/components/CodeEditor/HintToolTip/interface";
-import {
-  applyHintTooltipContentMainWrapperStyle,
-  applyHintTooltipContentWrapperStyle,
-  copyIconStyle,
-  // copyIconStyle,
-  hintTooltipContentTitleStyle,
-  hintTooltipContentTitleWrapperStyle,
-  hintTooltipResultStyle,
-} from "@/components/CodeEditor/HintToolTip/style";
-import { Trigger } from "@/utils/trigger/trigger";
-
-export const HintTooltipContent: FC<HintTooltipContentProps> = (props) => {
-  const { hasError = false, resultType, result, setIsHovered } = props;
-
-  const handleClickCopy = useCallback(() => {
-    if (result) {
-      // copy(result)
-    }
-  }, [result]);
-
-  return (
-    <div
-      css={applyHintTooltipContentWrapperStyle(hasError)}
-      onMouseEnter={() => {
-        setIsHovered(true);
-      }}
-      onMouseLeave={() => {
-        setIsHovered(false);
-      }}
-    >
-      <div css={applyHintTooltipContentMainWrapperStyle(hasError)}>
-        <div css={hintTooltipContentTitleWrapperStyle}>
-          {hasError && (
-            <div>
-              <ErrorOutlineIcon />
-            </div>
-          )}
-          <span css={hintTooltipContentTitleStyle}>
-            {hasError ? "Error" : resultType}
-          </span>
-        </div>
-        <span css={hintTooltipResultStyle}>{result}</span>
-      </div>
-      <ContentCopyIcon  sx={{fontSize:"13px"}}css={copyIconStyle} onClick={handleClickCopy} />
-    </div>
-  );
-};
-
-export const HintToolTip: FC<HintTooltipProps> = (props) => {
-  const {
-    isEditorFocused,
-    result,
-    hasError,
-    resultType,
-    children,
-    toolTipContainer,
-  } = props;
-  const [isHovered, setIsHovered] = useState(false);
-
-  return (
-    <Trigger
-      withoutPadding
-      withoutOffset
-      withoutShadow
-      autoAlignPopupWidth
-      showArrow={false}
-      popupVisible={isEditorFocused || isHovered}
-      position="bottom-start"
-      colorScheme="white"
-      popupContainer={toolTipContainer}
-      content={
-        <HintTooltipContent
-          hasError={hasError}
-          resultType={resultType}
-          result={result}
-          setIsHovered={setIsHovered}
-        />
-      }
-    >
-      {children}
-      {/* </div> */}
-    </Trigger>
-  );
-};

package/components/CodeEditor/HintToolTip/interface.ts

@@ -1,16 +0,0 @@
-import { Dispatch, ReactNode, RefObject, SetStateAction } from "react"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
-
-export interface HintTooltipProps {
-  isEditorFocused: boolean
-  hasError?: boolean
-  resultType?: VALIDATION_TYPES
-  result?: string
-  children: ReactNode
-  toolTipContainer?: RefObject<HTMLElement>
-}
-
-export interface HintTooltipContentProps
-  extends Pick<HintTooltipProps, "hasError" | "resultType" | "result"> {
-  setIsHovered: Dispatch<SetStateAction<boolean>>
-}

package/components/CodeEditor/HintToolTip/style.ts

@@ -1,49 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-export const applyHintTooltipContentWrapperStyle = (hasError: boolean) => css`
-  display: flex;
-  width: 100%;
-  padding: 4px 0;
-  border-radius: 0 0 8px 8px;
-  font-family: "fira code", monospace;
-  background-color: ${hasError
-    ? globalColor("red-08")
-    : globalColor("green-08")};
-`
-
-export const applyHintTooltipContentMainWrapperStyle = (
-  hasError: boolean,
-) => css`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  color: ${hasError ? globalColor("red-03") : globalColor("green-03")};
-  flex: 9;
-`
-
-export const hintTooltipContentTitleWrapperStyle = css`
-  gap: 4px;
-  align-items: center;
-  padding: 0 8px;
-  position: relative;
-`
-export const hintTooltipContentTitleStyle = css`
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 22px;
-`
-
-export const hintTooltipResultStyle = css`
-  word-break: break-all;
-  max-height: 150px;
-  overflow: auto;
-  padding: 0 8px;
-`
-
-export const copyIconStyle = css`
-  cursor: pointer;
-  position: absolute;
-  top: 4px;
-  right: 4px;
-`

package/components/CodeEditor/ModalCodeMirror/content.tsx

@@ -1,61 +0,0 @@
-import { FC } from "react"
-import useMeasure from "react-use-measure"
-import { CodeEditor } from "@/components/CodeEditor"
-import { ModalBodyContent } from "@/components/CodeEditor/ModalCodeMirror/interface"
-import {
-  applyCodeMirrorWrapperStyle,
-  codeMirrorContainerStyle,
-  contentWrapperStyle,
-  descriptionStyle,
-} from "@/components/CodeEditor/ModalCodeMirror/style"
-//import React = require("react")
-
-export const ModalContent: FC<ModalBodyContent> = (props) => {
-  const {
-    description,
-    lang,
-    expectValueType,
-    onChange,
-    value,
-    placeholder,
-    wrappedCodeFunc,
-    scopeOfAutoComplete,
-    codeType,
-  } = props
-
-  const [ref, rect] = useMeasure()
-
-  return (
-    <div css={contentWrapperStyle}>
-      {description && (
-        <div css={descriptionStyle} ref={ref}>
-          description
-          {/* <IMPAKTAPPSMarkdown
-            textString={description}
-            textColor={getColor("grayBlue", "04")}
-            urlColor="grayBlue"
-          /> */}
-        </div>
-      )}
-      <div css={applyCodeMirrorWrapperStyle(rect.height)}>
-        <CodeEditor
-          placeholder={placeholder}
-          showLineNumbers
-          height="100%"
-          minHeight="88px"
-          maxHeight="100%"
-          value={value}
-          lang={lang}
-          canShowCompleteInfo
-          expectValueType={expectValueType}
-          wrapperCss={codeMirrorContainerStyle}
-          onChange={onChange}
-          canExpand={false}
-          wrappedCodeFunc={wrappedCodeFunc}
-          scopeOfAutoComplete={scopeOfAutoComplete}
-          codeType={codeType}
-        />
-      </div>
-    </div>
-  )
-}

package/components/CodeEditor/ModalCodeMirror/footer.tsx

@@ -1,13 +0,0 @@
-import { FC } from "react";
-import { FooterContentProps } from "@/components/CodeEditor/ModalCodeMirror/interface";
-import { saveButtonStyle } from "@/components/CodeEditor/ModalCodeMirror/style";
-import { Button } from "@mui/material";
-
-export const FooterContent: FC<FooterContentProps> = (props) => {
-  const { onClickSaveButton } = props;
-  return (
-    <Button onClick={onClickSaveButton} css={saveButtonStyle}>
-      Save
-    </Button>
-  );
-};

package/components/CodeEditor/ModalCodeMirror/index.tsx

@@ -1,56 +0,0 @@
-import { FC } from "react"
-// import { useTranslation } from "react-i18next"
-import { ModalContent } from "@/components/CodeEditor/ModalCodeMirror/content"
-import { FooterContent } from "@/components/CodeEditor/ModalCodeMirror/footer"
-import { ModalCodeMirrorProps } from "@/components/CodeEditor/ModalCodeMirror/interface"
-import { MovableModal } from "@/components/Modal/movableModal"
-
-export const ModalCodeMirror: FC<ModalCodeMirrorProps> = (props) => {
-  const {
-    title,
-    value,
-    description,
-    lang,
-    expectValueType,
-    codeType,
-    onChange,
-    onClickSaveButton,
-    onClose,
-    placeholder,
-    scopeOfAutoComplete,
-    wrappedCodeFunc,
-    onBlur,
-    onFocus,
-  } = props
-  // const { t } = useTranslation()
-
-  return (
-    <MovableModal
-      title={title ||"code.write_code"}
-      bodyContent={
-        <ModalContent
-          description={
-            description ||
-          "code.write_code"
-          }
-          lang={lang}
-          expectValueType={expectValueType}
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-          wrappedCodeFunc={wrappedCodeFunc}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          scopeOfAutoComplete={scopeOfAutoComplete}
-          codeType={codeType}
-        />
-      }
-      footerContent={
-        onClickSaveButton ? (
-          <FooterContent onClickSaveButton={onClickSaveButton} />
-        ) : null
-      }
-      onClose={onClose}
-    />
-  )
-}

package/components/CodeEditor/ModalCodeMirror/interface.ts

@@ -1,26 +0,0 @@
-import { CodeEditorProps } from "@/components/CodeEditor/interface"
-import { MovableModalProps } from "@/components/Modal/interface"
-
-export interface ModalBodyContent {
-  description?: string
-  placeholder?: string
-  lang?: CodeEditorProps["lang"]
-  expectValueType?: CodeEditorProps["expectValueType"]
-  scopeOfAutoComplete?: CodeEditorProps["scopeOfAutoComplete"]
-  onChange?: CodeEditorProps["onChange"]
-  wrappedCodeFunc?: CodeEditorProps["wrappedCodeFunc"]
-  onFocus?: CodeEditorProps["onFocus"]
-  onBlur?: CodeEditorProps["onBlur"]
-  value: string
-  codeType?: CodeEditorProps["codeType"]
-}
-
-export interface FooterContentProps {
-  onClickSaveButton: () => void
-}
-
-export interface ModalCodeMirrorProps
-  extends Omit<MovableModalProps, "bodyContent" | "footerContent">,
-    ModalBodyContent {
-  onClickSaveButton?: () => void
-}

package/components/CodeEditor/ModalCodeMirror/style.ts

@@ -1,32 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-export const descriptionStyle = css`
-  font-size: 14px;
-  color: ${globalColor("grayBlue-04")};
-  font-weight: 400;
-  line-height: 22px;
-  margin: 0;
-`
-
-export const applyCodeMirrorWrapperStyle = (desHeight: number) => css`
-  width: 100%;
-  height: max(88px, calc(100% - ${desHeight}px - 16px));
-`
-
-export const codeMirrorContainerStyle = css`
-  height: 100%;
-`
-
-export const saveButtonStyle = css`
-  position: absolute;
-  right: 16px;
-`
-
-export const contentWrapperStyle = css`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`

package/components/CodeEditor/index.tsx

@@ -1,289 +0,0 @@
-import { debounce } from "lodash-es"
-import { FC, useCallback, useMemo, useRef, useState } from "react"
-import { useSelector } from "react-redux"
-// import {  ReactComponent as OpenWindowIcon} from "@/assets/public/openWindow.svg"
-import { IMPAKTAPPSCodeMirrorCore } from "@/components/CodeEditor/CodeMirror/core"
-import {
-  CODE_TYPE,
-  IExpressionShape,
-} from "@/components/CodeEditor/CodeMirror/extensions/interface"
-// import { githubLightScheme } from "@/components/CodeEditor/CodeMirror/theme"
-import { ModalCodeMirror } from "@/components/CodeEditor/ModalCodeMirror"
-import { CodeEditorProps } from "@/components/CodeEditor/interface"
-import {
-  IMPAKTAPPSCodeMirrorWrapperStyle,
-  // openWindowIconHotspotStyle,
-} from "@/components/CodeEditor/style"
-// import i18n from "@/i18n/config"
-import {
-  getExecutionResultToCurrentPageCodeMirror,
-  getExecutionResultToGlobalCodeMirror,
-} from "@/redux/currentApp/executionTree/executionSelector"
-import { RootState } from "@/store"
-// import { LIMIT_MEMORY, estimateMemoryUsage } from "@/utils/calculateMemoryUsage"
-import { evaluateDynamicString } from "@/utils/evaluateDynamicString"
-import {
-  removeIgnoredKeys,
-  removeWidgetOrActionMethods,
-} from "@/utils/executionTreeHelper/utils"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
-import { fixedValue } from "./utils"
-import { getStringSnippets, isDynamicStringSnippet } from "@/redux/utils"
-//import React = require("react")
-
-const getResultType = (result: unknown) => {
-  if (Array.isArray(result)) {
-    return VALIDATION_TYPES.ARRAY
-  } else if (typeof result === "string") {
-    return VALIDATION_TYPES.STRING
-  } else if (typeof result === "number") {
-    return VALIDATION_TYPES.NUMBER
-  } else if (typeof result === "boolean") {
-    return VALIDATION_TYPES.BOOLEAN
-  } else if (typeof result === "undefined") {
-    return VALIDATION_TYPES.UNDEFINED
-  } else {
-    return VALIDATION_TYPES.OBJECT
-  }
-}
-
-const getShowResultType = (results: unknown[]) => {
-  if (results.length === 0) {
-    return VALIDATION_TYPES.STRING
-  }
-  if (results.length === 1) {
-    return getResultType(results[0])
-  } else {
-    return VALIDATION_TYPES.STRING
-  }
-}
-
-const getShowResult = (results: unknown[]) => {
-  let calcResult: string = ""
-  if (results.length === 0) {
-    return ""
-  } else {
-    // const memorySize = estimateMemoryUsage(results)
-    // if (LIMIT_MEMORY < memorySize) {
-      // return i18n.t("editor.global.size_exceed", {
-      //   current_size: memorySize,
-      //   limit_size: LIMIT_MEMORY,
-      // })
-    // }
-    results.forEach((result) => {
-      if (
-        typeof result === "string" ||
-        typeof result === "number" ||
-        typeof result === "boolean"
-      ) {
-        calcResult += result
-      } else if (result == undefined) {
-        calcResult += result
-      } else {
-        calcResult += JSON.stringify(result)
-      }
-    })
-  }
-  return calcResult
-}
-
-export const MAX_LEN_WITH_SNIPPETS = 1024
-
-export const CodeEditor: FC<CodeEditorProps> = (props) => {
-  const {
-    value = "",
-    modalTitle = "",
-    modalDescription,
-    onChange = () => {},
-    showLineNumbers,
-    placeholder,
-    lang,
-    sqlScheme,
-    width,
-    maxWidth,
-    height,
-    maxHeight,
-    editable = true,
-    readOnly,
-    extensions,
-    expectValueType,
-    codeType = CODE_TYPE.EXPRESSION,
-    minWidth,
-    minHeight,
-    canShowCompleteInfo,
-    wrapperCss,
-    singleLine,
-    // canExpand = true,
-    scopeOfAutoComplete = "global",
-    wrappedCodeFunc,
-    onBlur = () => {},
-    onFocus = () => {},
-    className,
-  } = props;
-  const [result, setResult] = useState<string>("")
-  const [error, setError] = useState<boolean>(false)
-  const [resultType, setResultType] = useState(VALIDATION_TYPES.STRING)
-  const [isExpanded, setIsExpanded] = useState(false)
-  const popupContainerRef = useRef<HTMLDivElement>(null)
-  // const innerCanExpand = canExpand && !readOnly && editable
-
-  const tmpCalcContext = useSelector<RootState, Record<string, unknown>>(
-    (rootState) => {
-      return scopeOfAutoComplete === "global"
-        ? getExecutionResultToGlobalCodeMirror(rootState)
-        : getExecutionResultToCurrentPageCodeMirror(rootState)
-    },
-  )
-  const calcContext = useMemo(() => {
-    if (codeType === CODE_TYPE.FUNCTION) {
-      return removeIgnoredKeys(tmpCalcContext)
-    } else {
-      return removeIgnoredKeys(removeWidgetOrActionMethods(tmpCalcContext))
-    }
-  }, [codeType, tmpCalcContext])
-
-  const stringSnippets = useMemo(() => {
-    const result: IExpressionShape[] = []
-    const realInput = wrappedCodeFunc ? wrappedCodeFunc(value) : value
-    const dynamicStrings = getStringSnippets(realInput)
-    const errors: string[] = []
-    const calcResultArray: unknown[] = []
-    const calcResultMap: Map<string, number[]> = new Map()
-    dynamicStrings.forEach((dynamicString, index) => {
-      if (isDynamicStringSnippet(dynamicString)) {
-        try { 
-          const calcRes = evaluateDynamicString("", dynamicString, calcContext)
-          calcResultArray.push(calcRes)
-          const res = { value: dynamicString, hasError: false }
-          result.push(res)
-          if (calcResultMap.has(dynamicString)) {
-            calcResultMap.get(dynamicString)?.push(index)
-          } else {
-            calcResultMap.set(dynamicString, [index])
-          }
-        } catch (e) {
-          errors.push((e as Error).message)
-          const res = { value: dynamicString, hasError: true }
-          result.push(res)
-          if (calcResultMap.has(dynamicString)) {
-            calcResultMap.get(dynamicString)?.push(index)
-          } else {
-            calcResultMap.set(dynamicString, [index])
-          }
-        }
-      } else {
-        calcResultArray.push(dynamicString)
-      }
-    })
-    if (errors.length > 0) {
-      setError(true)
-      setResult(errors[0])
-      return result
-    }
-    const showResult = getShowResult(calcResultArray)
-    const showResultType = getShowResultType(calcResultArray)
-    setError(false)
-    if (expectValueType) {
-      setResultType(expectValueType)
-      if (showResultType !== expectValueType && value) {
-        dynamicStrings.forEach((dynamicString) => {
-          if (
-            dynamicString.length <= MAX_LEN_WITH_SNIPPETS &&
-            isDynamicStringSnippet(dynamicString) &&
-            calcResultMap.has(dynamicString)
-          ) {
-            const indexs = calcResultMap.get(dynamicString)
-            indexs?.forEach((index) => {
-              if (result[index]) {
-                result[index].hasError = true
-              }
-            })
-          }
-        })
-
-        setResult(`Expect ${expectValueType}, but got ${showResultType}`)
-        setError(true)
-      } else {
-        setResult(
-          showResult.length > MAX_LEN_WITH_SNIPPETS
-            ? showResult.slice(0, MAX_LEN_WITH_SNIPPETS) + "..."
-            : showResult,
-        )
-      }
-    } else {
-      setResultType(showResultType)
-      setResult(
-        showResult.length > MAX_LEN_WITH_SNIPPETS
-          ? showResult.slice(0, MAX_LEN_WITH_SNIPPETS) + "..."
-          : showResult,
-      )
-    }
-    return result
-  }, [wrappedCodeFunc, value, expectValueType, calcContext])
-
-  const debounceHandleChange = useMemo(() => {
-    return debounce(onChange, 160)
-  }, [onChange])
-
-  const customExtensions = useMemo(
-    () => (extensions ? [extensions] : []),
-    [extensions],
-  )
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const handleOpenExpandModal = useCallback(() => {
-    setIsExpanded(true)
-  }, [])
-
-  const handleCloseExpandModal = useCallback(() => {
-    setIsExpanded(false)
-  }, [])
-
-  return (
-    <div 
-    css={[IMPAKTAPPSCodeMirrorWrapperStyle, wrapperCss]}
-    //  ref={popupContainerRef}
-     >
-      <IMPAKTAPPSCodeMirrorCore
-        className={className}
-        showLineNumbers={showLineNumbers}
-        placeholder={placeholder}
-        value={fixedValue(value)}
-        onChange={debounceHandleChange}
-        lang={lang}
-        expressions={stringSnippets}
-        result={result}
-        hasError={error}
-        resultType={resultType}
-        width={width}
-        maxWidth={maxWidth}
-        height={height}
-        maxHeight={maxHeight}
-        editable={editable}
-        readOnly={readOnly}
-        codeType={codeType}
-        extensions={customExtensions}
-        minWidth={minWidth}
-        minHeight={minHeight}
-        canShowCompleteInfo={canShowCompleteInfo}
-        sqlScheme={sqlScheme}
-        singleLine={singleLine}
-        tooltipContainer={popupContainerRef ?? undefined}
-        scopeOfAutoComplete={scopeOfAutoComplete}
-        onBlur={onBlur}
-        onFocus={onFocus}
-      />
-    </div>
-  )
-}
-
-// {innerCanExpand && (
-//   <div
-//     css={openWindowIconHotspotStyle}
-//     className="open-window-icon-hotspot"
-//     onClick={handleOpenExpandModal}
-//   >
-//     {/* <div>OpenWindowIcon</div> */}
-//     <OpenWindowIcon />
-//   </div>
-// )}

package/components/CodeEditor/interface.ts

@@ -1,21 +0,0 @@
-import { SerializedStyles } from "@emotion/react"
-import { IMPAKTAPPSCodeMirrorProps } from "@/components/CodeEditor/CodeMirror/interface"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
-
-export interface CodeEditorProps
-  extends Omit<
-    IMPAKTAPPSCodeMirrorProps,
-    | "hasError"
-    | "resultType"
-    | "result"
-    | "executionResult"
-    | "expressions"
-    | "canShowResultRealtime"
-  > {
-  expectValueType?: VALIDATION_TYPES
-  wrappedCodeFunc?: (value: string) => string
-  canExpand?: boolean
-  modalTitle?: string
-  modalDescription?: string
-  wrapperCss?: SerializedStyles
-}

package/components/CodeEditor/style.ts

@@ -1,30 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-export const IMPAKTAPPSCodeMirrorWrapperStyle = css`
-  // width: 100%;
-  // height: 100%;
-  // position: relative;
-  :hover {
-    .open-window-icon-hotspot {
-      visibility: visible;
-    }
-  }
-`
-
-export const openWindowIconHotspotStyle = css`
-  position: absolute;
-  z-index: 10;
-  right: 2px;
-  bottom: 2px;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  font-size: 12px;
-  background-color: ${globalColor("grayBlue-09")};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 2px 2px 6px 2px;
-  visibility: hidden;
-`

package/components/CodeEditor/utils.ts

@@ -1,5 +0,0 @@
-export const fixedValue = (value: unknown) => {
-  if (value == undefined) return ""
-  if (typeof value === "string") return value
-  return `{{${JSON.stringify(value)}}}`
-}