impaktapps-ui-builder 1.0.0 → 1.0.1

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

@@ -1,294 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,26 +0,0 @@
-/* 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

@@ -1,47 +0,0 @@
-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

@@ -1,249 +0,0 @@
-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;
-  //         }
-  //       }
-  //     }
-  //   }
-  // }