@finos/legend-lego 0.1.0

package/src/code-editor/CodeEditorUtils.ts

@@ -0,0 +1,201 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { editor as monacoEditorAPI, MarkerSeverity } from 'monaco-editor';
+
+export type CodeEditorPosition = {
+  lineNumber: number;
+  column: number;
+};
+
+/**
+ * Normally `monaco-editor` worker disposes after 5 minutes staying idle, but we fasten
+ * this pace just in case the usage of the editor causes memory-leak somehow
+ */
+export const disposeCodeEditor = (
+  editor: monacoEditorAPI.IStandaloneCodeEditor,
+): void => {
+  editor.dispose();
+  // NOTE: just to be sure, we dispose the model after disposing the editor
+  editor.getModel()?.dispose();
+};
+
+export const disposeDiffCodeEditor = (
+  editor: monacoEditorAPI.IStandaloneDiffEditor,
+): void => {
+  editor.dispose();
+  editor.getOriginalEditor().getModel()?.dispose();
+  editor.getModifiedEditor().getModel()?.dispose();
+};
+
+/**
+ * Get the text value with LF line ending.
+ * This is needed since if there are CR `\r` characters in the text input
+ * (e.g. users of Windows doing copy/paste)
+ * the default mode of `monaco-editor` is `TextDefined` which means if the text
+ * contains CR character(s), it will automatically be treated as CRLF. As such, we want
+ * an utility method to extract the text value with line ending option LF
+ * to force omission of CR characters
+ * See https://github.com/finos/legend-studio/issues/608
+ */
+export const getCodeEditorValue = (
+  editor: monacoEditorAPI.IStandaloneCodeEditor,
+): string =>
+  editor.getModel()?.getValue(monacoEditorAPI.EndOfLinePreference.LF) ?? '';
+
+export const getBaseCodeEditorOptions =
+  (): monacoEditorAPI.IStandaloneEditorConstructionOptions =>
+    ({
+      contextmenu: false,
+      copyWithSyntaxHighlighting: false,
+      // NOTE: These following font options are needed (and CSS font-size option `.monaco-editor * { font-size: ... }` as well)
+      // in order to make the editor appear properly on multiple platform, the ligatures option is needed for Mac to display properly
+      // otherwise the cursor position relatively to text would be off
+      // Another potential cause for this misaligment is that the fonts are being lazy-loaded and made available after `monaco-editor`
+      // calculated the font-width, for this, we can use `remeasureFonts`, but our case here, `fontLigatures: true` seems
+      // to do the trick
+      // See https://github.com/microsoft/monaco-editor/issues/392
+      fontSize: 14,
+      // Enforce a fixed font-family to make cross platform display consistent (i.e. Mac defaults to use `Menlo` which is bigger than
+      // `Consolas` on Windows, etc.)
+      fontFamily: 'Roboto Mono',
+      // Enable font ligature: glyphs which combine the shapes of certain sequences of characters into a new form that makes for
+      //  a more harmonious reading experience.
+      fontLigatures: true,
+      // Make sure hover or widget shown near boundary are not truncated by setting their position to `fixed`
+      fixedOverflowWidgets: true,
+      detectIndentation: false, // i.e. so we can force tab-size
+      tabSize: 2,
+      // The typing is currently not correct for `bracketPairColorization`, until this is fixed, we will remove the cast
+      // See https://github.com/microsoft/monaco-editor/issues/3013
+      'bracketPairColorization.enabled': false,
+    } as monacoEditorAPI.IStandaloneEditorConstructionOptions);
+
+export const getBaseConsoleOptions =
+  (): monacoEditorAPI.IStandaloneEditorConstructionOptions => ({
+    ...getBaseCodeEditorOptions(),
+    fontSize: 12,
+    extraEditorClassName: 'monaco-editor--small-font',
+    readOnly: true,
+    glyphMargin: false,
+    folding: false,
+    lineNumbers: 'off',
+    lineDecorationsWidth: 10,
+    lineNumbersMinChars: 0,
+    minimap: {
+      enabled: false,
+    },
+    guides: {
+      bracketPairs: false,
+      bracketPairsHorizontal: false,
+      highlightActiveBracketPair: false,
+      indentation: false,
+      highlightActiveIndentation: false,
+    },
+    renderLineHighlight: 'none',
+  });
+
+export const moveCursorToPosition = (
+  editor: monacoEditorAPI.ICodeEditor,
+  position: CodeEditorPosition,
+): void => {
+  if (!editor.hasTextFocus()) {
+    editor.focus();
+  } // focus the editor first so that it can shows the cursor
+  editor.revealPositionInCenter(position, 0);
+  editor.setPosition(position);
+};
+
+const INTERNAL__DUMMY_PROBLEM_MARKER_OWNER = 'dummy_problem_marker_owner';
+
+export const setErrorMarkers = (
+  editorModel: monacoEditorAPI.ITextModel,
+  errors: {
+    message: string;
+    startLineNumber: number;
+    startColumn: number;
+    endLineNumber: number;
+    endColumn: number;
+  }[],
+  ownerId?: string,
+): void => {
+  monacoEditorAPI.setModelMarkers(
+    editorModel,
+    ownerId ?? INTERNAL__DUMMY_PROBLEM_MARKER_OWNER,
+    errors.map((error) => ({
+      startLineNumber: error.startLineNumber,
+      startColumn: error.startColumn,
+      endLineNumber: error.endLineNumber,
+      endColumn: error.endColumn + 1, // add a 1 to endColumn as monaco editor range is not inclusive
+      // NOTE: when the message is empty, no error tooltip is shown, we want to avoid this
+      message: error.message === '' ? '(no error message)' : error.message,
+      severity: MarkerSeverity.Error,
+    })),
+  );
+};
+
+export const setWarningMarkers = (
+  editorModel: monacoEditorAPI.ITextModel,
+  warnings: {
+    message: string;
+    startLineNumber: number;
+    startColumn: number;
+    endLineNumber: number;
+    endColumn: number;
+  }[],
+  ownerId?: string,
+): void => {
+  monacoEditorAPI.setModelMarkers(
+    editorModel,
+    ownerId ?? INTERNAL__DUMMY_PROBLEM_MARKER_OWNER,
+    warnings.map((warning) => ({
+      startLineNumber: warning.startLineNumber,
+      startColumn: warning.startColumn,
+      endColumn: warning.endColumn,
+      endLineNumber: warning.endLineNumber,
+      message:
+        warning.message === '' ? '(no warning message)' : warning.message,
+      severity: MarkerSeverity.Warning,
+    })),
+  );
+};
+
+export const clearMarkers = (ownerId?: string): void => {
+  monacoEditorAPI.removeAllMarkers(
+    ownerId ?? INTERNAL__DUMMY_PROBLEM_MARKER_OWNER,
+  );
+};
+
+/**
+ * This method eliminates CR '\r' character(s) in the provided text value.
+ */
+export const normalizeLineEnding = (val: string): string =>
+  val.replace(/\r/g, '');
+
+// We need to dynamically adjust the width of the line number gutter, otherwise as the document gets
+// larger, the left margin will start to shrink
+// See https://github.com/microsoft/monaco-editor/issues/2206
+export const resetLineNumberGutterWidth = (
+  editor: monacoEditorAPI.ICodeEditor,
+): void => {
+  const currentValue = editor.getValue();
+  editor.updateOptions({
+    lineNumbersMinChars: Math.max(
+      Math.floor(Math.log10(currentValue.split(/\r\n|\r|\n/g).length)) + 3,
+      5,
+    ),
+  });
+};

package/src/code-editor/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './CodeEditor.js';
+export * from './CodeEditorUtils.js';

package/src/code-editor/testing/MockedMonacoEditor.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export {
+  MockedMonacoEditorKeyCode as KeyCode,
+  MockedMonacoEditorMarkerSeverity as MarkerSeverity,
+  MockedMonacoEditorModel as MOCK__MonacoEditorModel,
+  MockedMonacoEditorInstance as MOCK__MonacoEditorInstance,
+  MockedMonacoEditorAPI as editor,
+  MockedMonacoEditorLanguagesAPI as languages,
+} from './MonacoEditorMockUtils.js';

package/src/code-editor/testing/MonacoEditorMockUtils.tsx

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createMock } from '@finos/legend-shared';
+
+/**
+ * NOTE: we have tried different ways to mock `monaco-editor`. But those ways often involve
+ * trying to load `monaco-editor` from `node_modules` and that takes a long time, so we'd better just mock
+ * it completely like in this file.
+ * See https://gitlab.com/gitlab-org/gitlab/-/issues/119194
+ * See https://stackoverflow.com/questions/57731857/cannot-test-jest-with-monaco-editor-unexpected-token
+ */
+export enum MockedMonacoEditorKeyCode {
+  F1 = 59,
+  F8 = 66,
+  F9 = 67,
+  F10 = 68,
+}
+
+export enum MockedMonacoEditorMarkerSeverity {
+  Hint = 1,
+  Info = 2,
+  Warning = 4,
+  Error = 8,
+}
+
+export enum MockedMonacoEditorEndOfLinePreference {
+  LF = 1,
+}
+
+export const MockedMonacoEditorModel = {
+  dispose: createMock(),
+  updateOptions: createMock(),
+  getValue: createMock(),
+  getLineCount: createMock(),
+  getLineMaxColumn: createMock(),
+  pushStackElement: createMock(),
+  pushEditOperations: createMock(),
+  findMatches: createMock(),
+};
+
+export const MockedMonacoEditorInstance = {
+  dispose: createMock(),
+  addCommand: createMock(),
+  getValue: createMock(),
+  getPosition: createMock(),
+  getRawOptions: createMock(),
+  getModel: (): typeof MockedMonacoEditorModel => MockedMonacoEditorModel,
+  hasTextFocus: createMock(),
+  updateOptions: createMock(),
+  setValue: createMock(),
+  revealPosition: createMock(),
+  setPosition: createMock(),
+  onKeyDown: createMock(),
+  createDecorationsCollection: createMock(),
+  onDidChangeModelContent: createMock(),
+  onDidChangeCursorPosition: createMock(),
+  onDidFocusEditorText: createMock(),
+  onDidBlurEditorText: createMock(),
+  onDidFocusEditorWidget: createMock(),
+};
+
+export const MockedMonacoEditorAPI = {
+  create: (): typeof MockedMonacoEditorInstance => MockedMonacoEditorInstance,
+  focus: createMock(),
+  createModel: createMock(),
+  createDiffEditor: () => ({
+    getOriginalEditor: (): typeof MockedMonacoEditorInstance =>
+      MockedMonacoEditorInstance,
+    getModifiedEditor: (): typeof MockedMonacoEditorInstance =>
+      MockedMonacoEditorInstance,
+  }),
+  setModelMarkers: createMock(),
+  setModelLanguage: createMock(),
+  defineTheme: createMock(),
+  EndOfLinePreference: MockedMonacoEditorEndOfLinePreference,
+  removeAllMarkers: createMock(),
+};
+
+export enum MockedMonacoLanguageCompletionItemKind {
+  Keyword = 17,
+  Snippet = 27,
+}
+
+export enum MockedMonacoLanguageCompletionItemInsertTextRule {
+  InsertAsSnippet = 4,
+}
+
+export const MockedMonacoEditorLanguagesAPI = {
+  register: createMock(),
+  setLanguageConfiguration: createMock(),
+  setMonarchTokensProvider: createMock(),
+  registerCodeLensProvider: createMock(),
+  registerHoverProvider: createMock(),
+  registerCompletionItemProvider: createMock(),
+  CompletionItemKind: MockedMonacoLanguageCompletionItemKind,
+  CompletionItemInsertTextRule: MockedMonacoLanguageCompletionItemKind,
+};

package/src/code-editor/testing/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './MonacoEditorMockUtils.js';

package/src/data-grid/DataGrid.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {
+  AgGridReact,
+  type AgReactUiProps,
+  type AgGridReactProps,
+} from '@ag-grid-community/react';
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import {
+  type CellMouseOverEvent,
+  type ICellRendererParams,
+  ModuleRegistry,
+} from '@ag-grid-community/core';
+
+export function DataGrid<TData = unknown>(
+  props: AgGridReactProps<TData> | AgReactUiProps<TData>,
+): JSX.Element {
+  return <AgGridReact {...props} modules={[ClientSideRowModelModule]} />;
+}
+
+export const configureDataGridComponent = (): void => {
+  ModuleRegistry.registerModules([ClientSideRowModelModule]);
+};
+
+export type {
+  CellMouseOverEvent as DataGridCellMouseOverEvent,
+  ICellRendererParams as DataGridCellRendererParams,
+};

package/src/data-grid/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './DataGrid.js';

package/tsconfig.json

@@ -0,0 +1,48 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext",
+      "webworker",
+      "scripthost"
+    ],
+    "composite": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "target": "esnext",
+    "module": "nodenext",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "./lib",
+    "tsBuildInfoFile": "./build/prod.tsbuildinfo",
+    "rootDir": "./src",
+    "jsx": "react-jsx"
+  },
+  "files": [
+    "./src/code-editor/CodeEditorUtils.ts",
+    "./src/code-editor/index.ts",
+    "./src/code-editor/testing/MockedMonacoEditor.ts",
+    "./src/code-editor/testing/index.ts",
+    "./src/data-grid/index.ts",
+    "./src/code-editor/CodeEditor.tsx",
+    "./src/code-editor/testing/MonacoEditorMockUtils.tsx",
+    "./src/data-grid/DataGrid.tsx"
+  ],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.json"
+  ],
+  "exclude": [
+    "src/**/__tests__/**/*.*",
+    "src/**/__mocks__/**/*.*"
+  ]
+}