impaktapps-ui-builder 0.0.382460 → 1.0.0

package/components/CodeEditor/CodeMirror/extensions/index.ts

@@ -0,0 +1,294 @@
+import {
+  CompletionContext,
+  CompletionResult,
+  acceptCompletion,
+  autocompletion,
+  closeBrackets,
+  closeBracketsKeymap,
+  closeCompletion,
+  moveCompletionSelection,
+} from "@codemirror/autocomplete"
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands"
+import { html, htmlCompletionSource } from "@codemirror/lang-html"
+import { javascript } from "@codemirror/lang-javascript"
+import { json } from "@codemirror/lang-json"
+import {
+  Cassandra,
+  MSSQL,
+  MariaSQL,
+  MySQL,
+  PLSQL,
+  SQLite,
+  StandardSQL,
+  keywordCompletionSource,
+  schemaCompletionSource,
+  sql,
+} from "@codemirror/lang-sql"
+import { xml } from "@codemirror/lang-xml"
+import {
+  bracketMatching,
+  defaultHighlightStyle,
+  indentOnInput,
+  syntaxHighlighting,
+} from "@codemirror/language"
+import { Extension, Prec } from "@codemirror/state"
+import { dropCursor, keymap, lineNumbers, tooltips } from "@codemirror/view"
+import { useMemo } from "react"
+import { ternSeverCompletionSource } from "@/components/CodeEditor/CodeMirror/extensions/completionSources/TernServer"
+import { buildIMPAKTAPPSContextCompletionSource } from "@/components/CodeEditor/CodeMirror/extensions/completionSources/IMPAKTAPPSContext"
+import { getHighlightExpressionExtension } from "@/components/CodeEditor/CodeMirror/extensions/heighLightJSExpression"
+import {
+  CODE_LANG,
+  CODE_TYPE,
+  ICodeMirrorOptions,
+} from "@/components/CodeEditor/CodeMirror/extensions/interface"
+import { isObject } from "@/redux/utils"
+import { IMPAKTAPPSEditorRuntimePropsCollectorInstance } from "@/utils/executionTreeHelper/runtimePropsCollector"
+import { useStore } from "react-redux"
+// import { isObject } from "@/utils/typeHelper"
+
+export const basicExtension: Extension = [
+  history(),
+  dropCursor(),
+  indentOnInput(),
+  bracketMatching(),
+  closeBrackets(),
+  keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...historyKeymap]),
+]
+
+const buildSqlSchemeSources = (sqlScheme: Record<string, unknown>) => {
+  const requiredScheme: { [table: string]: string[] } = {}
+  Object.keys(sqlScheme).forEach((tableName) => {
+    if (sqlScheme[tableName] && isObject(sqlScheme[tableName])) {
+      requiredScheme[tableName] = Object.keys(
+        sqlScheme[tableName] as Record<string, unknown>,
+      )
+    }
+  })
+  const completionSourceFunc = schemaCompletionSource({
+    schema: requiredScheme,
+  })
+  return (context: CompletionContext) => {
+    const completionSource = completionSourceFunc(context) as CompletionResult
+    if (Array.isArray(completionSource?.options)) {
+      completionSource.options = completionSource.options.map((option) => {
+        return {
+          ...option,
+          type: "table",
+        }
+      })
+    }
+
+    return completionSource
+  }
+}
+
+const buildSqlKeywordSources = (lang: CODE_LANG) => {
+  switch (lang) {
+    case CODE_LANG.PLSQL: {
+      return keywordCompletionSource(PLSQL)
+    }
+    case CODE_LANG.CASSANDRA: {
+      return keywordCompletionSource(Cassandra)
+    }
+    case CODE_LANG.SQLite: {
+      return keywordCompletionSource(SQLite)
+    }
+    case CODE_LANG.MSSQL: {
+      return keywordCompletionSource(MSSQL)
+    }
+    case CODE_LANG.MARIASQL: {
+      return keywordCompletionSource(MariaSQL)
+    }
+    case CODE_LANG.MYSQL: {
+      return keywordCompletionSource(MySQL)
+    }
+    case CODE_LANG.PGSQL: {
+      return keywordCompletionSource(StandardSQL)
+    }
+    default:
+    case CODE_LANG.SQL: {
+      return keywordCompletionSource(StandardSQL)
+    }
+  }
+}
+
+const buildCompletionSources = (
+  codeType: CODE_TYPE,
+  lang: CODE_LANG,
+  canShowCompleteInfo: boolean,
+  sqlScheme: Record<string, unknown>,
+  executedResult: Record<string, unknown>,
+) => {
+  const ternSource = ternSeverCompletionSource(canShowCompleteInfo, codeType)
+  const IMPAKTAPPSSources = buildIMPAKTAPPSContextCompletionSource(
+    canShowCompleteInfo,
+    codeType,
+    executedResult,
+  )
+  const completionSources = [ternSource, IMPAKTAPPSSources]
+
+  switch (lang) {
+    case CODE_LANG.HTML: {
+      completionSources.push(htmlCompletionSource)
+      break
+    }
+    case CODE_LANG.PGSQL:
+    case CODE_LANG.MARIASQL:
+    case CODE_LANG.MSSQL:
+    case CODE_LANG.SQLite:
+    case CODE_LANG.CASSANDRA:
+    case CODE_LANG.PLSQL:
+    case CODE_LANG.MYSQL:
+    case CODE_LANG.SQL: {
+      const sqlKeywordsSources = buildSqlKeywordSources(lang)
+      const sqlSchemeSources = buildSqlSchemeSources(sqlScheme)
+      completionSources.push(sqlKeywordsSources, sqlSchemeSources)
+      break
+    }
+    default: {
+      break
+    }
+  }
+  return completionSources
+}
+const keyMapExtensions = Prec.highest(
+  keymap.of([
+    { key: "Escape", run: closeCompletion },
+    { key: "ArrowDown", run: moveCompletionSelection(true) },
+    { key: "ArrowUp", run: moveCompletionSelection(false) },
+    { key: "PageDown", run: moveCompletionSelection(true, "page") },
+    { key: "PageUp", run: moveCompletionSelection(false, "page") },
+    { key: "Tab", run: acceptCompletion },
+    { key: "Enter", run: acceptCompletion },
+  ]),
+)
+
+const getAutoCompletionExtension = (
+  codeType: CODE_TYPE,
+  lang: CODE_LANG,
+  canShowCompleteInfo: boolean,
+  sqlScheme: Record<string, unknown>,
+  executedResult: Record<string, unknown>,
+) => {
+  const completionSources = buildCompletionSources(
+    codeType,
+    lang,
+    canShowCompleteInfo,
+    sqlScheme,
+    executedResult,
+  )
+  return [
+    autocompletion({
+      override: completionSources,
+      defaultKeymap: false,
+      closeOnBlur: false,
+    }),
+    keyMapExtensions,
+  ]
+}
+
+export const useBasicSetup = (options: ICodeMirrorOptions) => {
+  const {
+    showLineNumbers,
+    lang = CODE_LANG.JAVASCRIPT,
+    codeType = CODE_TYPE.EXPRESSION,
+    canShowCompleteInfo = false,
+    sqlScheme = {},
+    expressions = [],
+    scopeOfAutoComplete = "global",
+  } = options
+  const store = useStore()
+  const executedResult =
+    scopeOfAutoComplete === "global"
+      ? IMPAKTAPPSEditorRuntimePropsCollectorInstance.getGlobalCalcContextWithLimit(store)
+      : IMPAKTAPPSEditorRuntimePropsCollectorInstance.getCurrentPageCalcContext({}, store)
+
+  const autocompletionExtension = useMemo(
+    () =>
+      getAutoCompletionExtension(
+        codeType,
+        lang,
+        canShowCompleteInfo,
+        sqlScheme,
+        executedResult,
+      ),
+    [canShowCompleteInfo, codeType, executedResult, lang, sqlScheme],
+  )
+
+  const showLinNUmberExtension = useMemo(
+    () => (showLineNumbers ? [lineNumbers()] : []),
+    [showLineNumbers],
+  )
+
+  const langExtension = useMemo(() => {
+    const plugins: Extension[] = [
+      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    ]
+    switch (lang) {
+      case CODE_LANG.PGSQL:
+      case CODE_LANG.MARIASQL:
+      case CODE_LANG.MSSQL:
+      case CODE_LANG.SQLite:
+      case CODE_LANG.CASSANDRA:
+      case CODE_LANG.PLSQL:
+      case CODE_LANG.MYSQL:
+      case CODE_LANG.SQL: {
+        plugins.push(sql())
+        break
+      }
+      case CODE_LANG.HTML: {
+        plugins.push(html())
+        break
+      }
+      case CODE_LANG.JSON: {
+        plugins.push(json())
+        break
+      }
+      case CODE_LANG.XML: {
+        plugins.push(xml())
+        break
+      }
+      case CODE_LANG.JAVASCRIPT:
+      default: {
+        plugins.push(javascript())
+        break
+      }
+    }
+    return plugins
+  }, [lang])
+
+  const highlightJSExpressionExtension = useMemo(() => {
+    const isFunction = codeType === CODE_TYPE.FUNCTION
+    return isFunction ? [] : getHighlightExpressionExtension(expressions)
+  }, [codeType, expressions])
+
+  const tooltipExtension = useMemo(() => {
+    return tooltips({
+      position: "absolute",
+      parent:
+        document.querySelector<HTMLElement>(".IMPAKTAPPSCodeMirrorWrapper") ||
+        document.body,
+    })
+  }, [])
+
+  const extensions = useMemo(
+    () => [
+      basicExtension,
+      showLinNUmberExtension,
+      langExtension,
+      autocompletionExtension,
+      highlightJSExpressionExtension,
+      tooltipExtension,
+    ],
+    [
+      showLinNUmberExtension,
+      langExtension,
+      autocompletionExtension,
+      highlightJSExpressionExtension,
+      tooltipExtension,
+    ],
+  )
+
+  return extensions
+}

package/components/CodeEditor/CodeMirror/extensions/interface.ts

@@ -0,0 +1,36 @@
+export enum CODE_TYPE {
+  "EXPRESSION" = "EXPRESSION",
+  "FUNCTION" = "FUNCTION",
+  "NO_METHOD_FUNCTION" = "NO_METHOD_FUNCTION",
+}
+
+export enum CODE_LANG {
+  "JAVASCRIPT" = "javascript",
+  "SQL" = "sql",
+  "HTML" = "html",
+  "JSON" = "json",
+  "XML" = "xml",
+  "PGSQL" = "pgsql",
+  "MYSQL" = "mysql",
+  "MARIASQL" = "mariasql",
+  "MSSQL" = "mssql",
+  "SQLite" = "sqlite",
+  "CASSANDRA" = "cassandra",
+  "PLSQL" = "plsql",
+}
+
+export interface IExpressionShape {
+  value: string
+  hasError: boolean
+}
+
+export interface ICodeMirrorOptions {
+  showLineNumbers?: boolean
+  lang?: CODE_LANG
+  codeType?: CODE_TYPE
+  expressions?: IExpressionShape[]
+  canShowCompleteInfo?: boolean
+  sqlScheme?: Record<string, unknown>
+  singleLine?: boolean
+  scopeOfAutoComplete?: "global" | "page"
+}

package/components/CodeEditor/CodeMirror/extensions/utils.ts

@@ -0,0 +1,40 @@
+import { Text } from "@codemirror/state"
+
+export function posToOffset(doc: Text, pos: IPosition) {
+  return doc.line(pos.line + 1).from + pos.character
+}
+export function offsetToPos(doc: Text, offset: number): Position {
+  const line = doc.lineAt(offset)
+  return new Position(line.number - 1, offset - line.from)
+}
+
+export interface IPosition {
+  line: number
+  character: number
+  setLine(line: number): void
+  setCharacter(character: number): void
+  lessThanOrEqualTo(position: IPosition): boolean
+}
+
+export class Position implements IPosition {
+  constructor(public line: number, public character: number) {}
+
+  setLine(line: number) {
+    this.line = line
+  }
+
+  setCharacter(character: number) {
+    this.character = character
+  }
+
+  lessThanOrEqualTo(position: IPosition) {
+    return (
+      this.line < position.line ||
+      (this.line === position.line && this.character <= position.character)
+    )
+  }
+}
+
+const isMac = () => /mac/i.test(navigator.platform)
+export const isMetaKeyPressed = (e: MouseEvent) =>
+  isMac() ? e.metaKey : e.ctrlKey

package/components/CodeEditor/CodeMirror/interface.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// import { Extension } from "@codemirror/state"
+import { RefObject } from "react"
+import { ICodeMirrorOptions } from "@/components/CodeEditor/CodeMirror/extensions/interface"
+import { HintTooltipProps } from "@/components/CodeEditor/HintToolTip/interface"
+
+export interface IMPAKTAPPSCodeMirrorProps
+  extends ICodeMirrorOptions,
+    Omit<HintTooltipProps, "isEditorFocused" | "children"> {
+  extensions?: any[]
+  value?: string
+  onChange?: (value: string) => void
+  onFocus?: () => void
+  onBlur?: (value: string) => void
+  height?: string
+  minHeight?: string
+  maxHeight?: string
+  width?: string
+  minWidth?: string
+  maxWidth?: string
+  editable?: boolean
+  readOnly?: boolean
+  placeholder?: string
+  className?: string
+  tooltipContainer?: RefObject<HTMLElement>
+}

package/components/CodeEditor/CodeMirror/style.ts

@@ -0,0 +1,47 @@
+import { globalColor } from "@/utils/colorBuilder"
+import { css } from "@emotion/react"
+
+
+const getEditorWrapperBorderColor = (
+  hasError: boolean,
+  isFocused: boolean,
+  isHovered: boolean,
+) => {
+  if (hasError) {
+    return globalColor("red-03")
+  }
+  if (isFocused) {
+    return globalColor("green-03")
+  }
+  return isHovered ? globalColor("techPurple-07") : globalColor("grayBlue-08")
+}
+export const applyEditorWrapperStyle = (
+  hasError: boolean,
+  isFocused: boolean,
+  editable: boolean,
+  readOnly: boolean,
+) => {
+  const hoverStyle =
+    !editable || readOnly
+      ? null
+      : css`
+          :hover {
+            border: 1px solid
+              ${getEditorWrapperBorderColor(hasError, isFocused, true)};
+            z-index: 1;
+          }
+        `
+  return css`
+    width: 100%;
+    height: 100%;
+    .cm-editor {
+      border: 1px solid
+        ${getEditorWrapperBorderColor(hasError, isFocused, false)};
+      border-radius: ${isFocused ? "8px 8px 0px 0px;" : "8px"};
+      &.cm-focused {
+        z-index: 1;
+      }
+      ${hoverStyle}
+    }
+  `
+}

package/components/CodeEditor/CodeMirror/theme.ts

@@ -0,0 +1,249 @@
+import { css } from "@emotion/react"
+// import { githubLightInit } from "@uiw/codemirror-theme-github/src"
+
+// import ArrayIcon from "@/components/CodeEditor/CodeMirror/assets/array.svg"
+// import BooleanIcon from "@/components/CodeEditor/CodeMirror/assets/boolean.svg"
+// import FunctionIcon from "@/components/CodeEditor/CodeMirror/assets/function.svg"
+// import KeywordIcon from "@/components/CodeEditor/CodeMirror/assets/keyword.svg"
+// import NullIcon from "@/components/CodeEditor/CodeMirror/assets/null.svg"
+// import NumberIcon from "@/components/CodeEditor/CodeMirror/assets/number.svg"
+// import ObjectIcon from "@/components/CodeEditor/CodeMirror/assets/object.svg"
+// import StringIcon from "@/components/CodeEditor/CodeMirror/assets/string.svg"
+// import TableIcon from "@/components/CodeEditor/CodeMirror/assets/table.svg"
+// import TypeIcon from "@/components/CodeEditor/CodeMirror/assets/type.svg"
+// import UnknownIcon from "@/components/CodeEditor/CodeMirror/assets/undefine.svg"
+import {
+  defaultHighlightClassName,
+  errorHighlightClassName,
+} from "@/components/CodeEditor/CodeMirror/extensions/heighLightJSExpression"
+import { Theme } from "@mui/material"
+
+export const IMPAKTAPPSCodeMirrorTheme =(theme:Theme)=> ({
+  "&.cm-editor": {
+    borderRadius: "8px",
+    color:theme.palette.text.primary,
+    border: `1px solid ${theme.palette.action.focus}`,
+    overflow: "hidden",
+    marginRight:"20px",
+    fontFamily: "Fira Code",
+  },
+  "&.cm-editor .cm-scroller": {
+    lineHeight: "22px",
+    fontSize: "12px",
+  },
+  "&.cm-editor .cm-content": {
+    padding: "4px 0",
+  },
+  "&.cm-editor .cm-line": {
+    padding: "0 16px",
+  },
+  "&.cm-editor.cm-focused .cm-matchingBracket": {
+    color: theme.palette.success.main,
+  },
+  "&.cm-editor .cm-placeholder": {
+    color: theme.palette.action.focus,
+    height: 0,
+  },
+  "&.cm-editor .cm-gutters .cm-gutter .cm-gutterElement": {
+    padding: "0 8px 0 23px",
+  },
+  "&.cm-editor .cm-gutters": {
+    borderRadius: "8px 0 0 8px",
+    borderRight: "none",
+  },
+  [`.${defaultHighlightClassName}`]: {
+    color:theme.palette.text.primary,
+    backgroundColor: "rgba(0, 170, 91, 0.08);",
+  },
+  [`.${errorHighlightClassName}`]: {
+    color:theme.palette.error.main,
+    backgroundColor: "rgba(255, 71, 71, 0.08);",
+  },
+})
+
+// export const IMPAKTAPPSCodeMirrorTooltipStyle = css`
+
+
+export const IMPAKTAPPSCodeMirrorTooltipStyle = css`
+
+`
+
+// export const githubLightScheme = githubLightInit({
+//   settings: {
+//     background: "#fff",
+//     foreground: "#24292e",
+//     gutterBackground: globalColor("grayBlue-09"),
+//   },
+// })
+  // > div {
+  //   height: unset;
+  //   min-height: unset;
+  // }
+  // .cm-tooltip {
+  //   &.cm-tooltip-autocomplete {
+  //     border: none;
+  //     > ul {
+  //       background-color: white;
+  //       border: 1px solid "greyBlue";
+  //       box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
+  //       border-radius: 8px;
+  //       font-family: "Fira Code", monospace;
+  //       li {
+  //         height: 24px;
+  //         line-height: 24px;
+  //         position: relative;
+  //         overflow: hidden;
+  //         &[aria-selected] {
+  //           background-color:"techPurple";
+  //           color: "techPurple";
+  //         }
+  //         .cm-completionIcon {
+  //           width: 14px;
+  //           height: 14px;
+  //           font-size: 14px;
+  //           opacity: 1;
+  //           padding-right: 8px;
+  //           position: absolute;
+  //           top: 2.5px;
+  //         }
+  //         .cm-completionIcon-Function::after {
+  //           content: url(${FunctionIcon});
+  //         }
+  //         .cm-completionIcon-Number::after {
+  //           content: url(${NumberIcon});
+  //         }
+  //         .cm-completionIcon-String::after {
+  //           content: url(${StringIcon});
+  //         }
+  //         .cm-completionIcon-Boolean::after {
+  //           content: url(${BooleanIcon});
+  //         }
+  //         .cm-completionIcon-Null::after {
+  //           content: url(${NullIcon});
+  //         }
+  //         .cm-completionIcon-Object::after {
+  //           content: url(${ObjectIcon});
+  //         }
+  //         .cm-completionIcon-Array::after {
+  //           content: url(${ArrayIcon});
+  //         }
+  //         .cm-completionIcon-Unknown::after {
+  //           content: url(${UnknownIcon});
+  //         }
+  //         .cm-completionIcon-keyword::after {
+  //           content: url(${KeywordIcon});
+  //         }
+  //         .cm-completionIcon-type::after {
+  //           content: url(${TypeIcon});
+  //         }
+  //         .cm-completionIcon-table::after {
+  //           content: url(${TableIcon});
+  //         }
+  //         .cm-completionLabel {
+  //           font-size: 12px;
+  //           line-height: 22px;
+  //           position: absolute;
+  //           left: 25px;
+  //           top: 2px;
+  //           .cm-completionMatchedText {
+  //             font-weight: 600;
+  //             text-decoration: none;
+  //           }
+  //         }
+  //         .cm-completionDetail {
+  //           position: absolute;
+  //           right: 8px;
+  //           top: 2px;
+  //           margin: 0;
+  //           color: gray;
+  //           font-size: 12px;
+  //           line-height: 22px;
+  //           font-style: normal;
+  //         }
+  //       }
+  //     }
+  //     .cm-completionInfo {
+  //       padding: 4px 8px;
+  //       background-color:"white";
+  //       border: 1px solid "greyBlue";
+  //       box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
+  //       border-radius: 8px;
+  //       width: 287px;
+  //       &.cm-completionInfo-right {
+  //         left: calc(100% + 8px);
+  //       }
+  //       .completionInfoCardTitle {
+  //         display: flex;
+  //         justify-content: space-between;
+  //         align-items: center;
+  //         .cardTitle {
+  //           width: 100%;
+  //           font-weight: 500;
+  //           font-size: 12px;
+  //           line-height: 20px;
+  //           color: "techPurple";
+  //         }
+  //         .openInfo {
+  //           width: 12px;
+  //           height: 12px;
+  //           display: flex;
+  //           align-items: center;
+  //         }
+  //       }
+  //       .completionInfoType {
+  //         font-size: 12px;
+  //         color: "grayBlue";
+  //         margin: 0;
+  //         line-height: 20px;
+  //         word-break: break-all;
+  //       }
+  //       .completionInfoEvaluatesTitle {
+  //         font-size: 12px;
+  //         color: "grayBlue";
+  //         margin: 0;
+  //         font-weight: 500;
+  //         line-height: 20px;
+  //       }
+  //       .completionInfoDoc {
+  //         font-size: 12px;
+  //         color: gray;
+  //         margin: 0;
+  //         line-height: 20px;
+  //       }
+  //       .evaluatesResult {
+  //         display: inline-block;
+  //         margin: 0;
+  //         padding: 0 8px;
+  //         font-size: 12px;
+  //         line-height: 18px;
+  //         color: "grayBlue";
+  //         background-color:"grayBlue";
+  //         position: relative;
+  //         cursor: pointer;
+  //         :hover {
+  //           .evaluatesTooltips {
+  //             visibility: visible;
+  //           }
+  //         }
+  //         .evaluatesTooltips {
+  //           visibility: hidden;
+  //           font-family: "Fira Code", monospace;
+  //           position: absolute;
+  //           left: calc(100% + 4px);
+  //           top: -50%;
+  //           max-height: 162px;
+  //           border-radius: 4px;
+  //           box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
+  //           background-color:"grayBlue";
+  //           padding: 12px 16px;
+  //           font-size: 14px;
+  //           line-height: 18px;
+  //           color: "white;
+  //           white-space: pre;
+  //           overflow-y: auto;
+  //           cursor: auto;
+  //         }
+  //       }
+  //     }
+  //   }
+  // }