@finos/legend-lego 0.1.13 → 1.0.0

package/src/code-editor/CodeEditor.tsx

@@ -22,23 +22,23 @@ import {
   resetLineNumberGutterWidth,
   getCodeEditorValue,
   normalizeLineEnding,
+  type CODE_EDITOR_LANGUAGE,
 } from './CodeEditorUtils.js';
-import { useResizeDetector } from '@finos/legend-art';
 import {
   DEFAULT_TAB_SIZE,
   useApplicationStore,
 } from '@finos/legend-application';
-import {
-  CODE_EDITOR_THEME,
-  type CODE_EDITOR_LANGUAGE,
-} from './CodeEditorConfig.js';
+import { CODE_EDITOR_THEME } from './CodeEditorTheme.js';
+import { clsx } from '@finos/legend-art';
 
 export const CodeEditor: React.FC<{
   inputValue: string;
   isReadOnly?: boolean | undefined;
+  lightTheme?: CODE_EDITOR_THEME;
   language: CODE_EDITOR_LANGUAGE;
-  showMiniMap?: boolean | undefined;
+  hideMinimap?: boolean | undefined;
   hideGutter?: boolean | undefined;
+  hidePadding?: boolean | undefined;
   extraEditorOptions?:
     | (monacoEditorAPI.IEditorOptions & monacoEditorAPI.IGlobalEditorOptions)
     | undefined;
@@ -47,10 +47,12 @@ export const CodeEditor: React.FC<{
   const {
     inputValue,
     updateInput,
+    lightTheme,
     language,
     isReadOnly,
-    showMiniMap,
+    hideMinimap,
     hideGutter,
+    hidePadding,
     extraEditorOptions,
   } = props;
   const applicationStore = useApplicationStore();
@@ -71,13 +73,6 @@ export const CodeEditor: React.FC<{
    */
   const value = normalizeLineEnding(inputValue);
   const textInputRef = useRef<HTMLDivElement>(null);
-  const { ref, width, height } = useResizeDetector<HTMLDivElement>();
-
-  useEffect(() => {
-    if (width !== undefined && height !== undefined) {
-      editor?.layout({ width, height });
-    }
-  }, [editor, width, height]);
 
   useEffect(() => {
     if (!editor && textInputRef.current) {
@@ -86,14 +81,19 @@ export const CodeEditor: React.FC<{
         ...getBaseCodeEditorOptions(),
         theme: applicationStore.layoutService
           .TEMPORARY__isLightColorThemeEnabled
-          ? CODE_EDITOR_THEME.TEMPORARY__VSCODE_LIGHT
-          : CODE_EDITOR_THEME.LEGEND,
+          ? lightTheme ?? CODE_EDITOR_THEME.BUILT_IN__VSCODE_LIGHT
+          : CODE_EDITOR_THEME.DEFAULT_DARK,
+
+        // layout
+        glyphMargin: !hidePadding,
+        padding: !hidePadding ? { top: 20, bottom: 20 } : { top: 0, bottom: 0 },
+
         formatOnType: true,
         formatOnPaste: true,
       });
       setEditor(_editor);
     }
-  }, [applicationStore, editor]);
+  }, [applicationStore, lightTheme, hidePadding, editor]);
 
   useEffect(() => {
     if (editor) {
@@ -124,16 +124,15 @@ export const CodeEditor: React.FC<{
     }
     editor.updateOptions({
       readOnly: Boolean(isReadOnly),
-      minimap: { enabled: Boolean(showMiniMap) },
+      minimap: { enabled: !hideMinimap },
       // Hide the line number gutter
       // See https://github.com/microsoft/vscode/issues/30795
       ...(hideGutter
         ? {
-            glyphMargin: false,
+            glyphMargin: !hidePadding,
             folding: false,
             lineNumbers: 'off',
-            lineDecorationsWidth: 10,
-            lineNumbersMinChars: 0,
+            lineDecorationsWidth: 0,
           }
         : {}),
       ...(extraEditorOptions ?? {}),
@@ -153,7 +152,11 @@ export const CodeEditor: React.FC<{
   );
 
   return (
-    <div ref={ref} className="code-editor__container">
+    <div
+      className={clsx('code-editor__container', {
+        'code-editor__container--padding': !hidePadding,
+      })}
+    >
       <div className="code-editor__body" ref={textInputRef} />
     </div>
   );

package/src/code-editor/CodeEditorTheme.ts

@@ -0,0 +1,118 @@
+/**
+ * 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 { PURE_GRAMMAR_TOKEN } from './PureLanguage.js';
+import type { editor as monacoEditorAPI } from 'monaco-editor';
+import { buildCodeEditorTheme } from './themes/MonacoEditorThemeUtils.js';
+import SOLARIZED_DARK_THEME_DATA from './themes/solarized-dark-color-theme.json';
+import GITHUB_DARK_THEME_DATA from './themes/Github-Theme-dark.json';
+import GITHUB_DARK_DIMMED_THEME_DATA from './themes/Github-Theme-dark-dimmed.json';
+import MATERIAL_DEFAULT_THEME_DATA from './themes/Material-Theme-Default.json';
+import MATERIAL_DARKER_THEME_DATA from './themes/Material-Theme-Darker.json';
+import ONE_DARK_PRO_THEME_DATA from './themes/OneDark-Pro.json';
+import ONE_DARK_PRO_DARKER_THEME_DATA from './themes/OneDark-Pro-darker.json';
+
+const BASE_PURE_LANGUAGE_COLOR_TOKENS: monacoEditorAPI.ITokenThemeRule[] = [
+  // NOTE: `monaco-editor` only accepts HEX values, not CSS variables
+  { token: PURE_GRAMMAR_TOKEN.IDENTIFIER, foreground: 'dcdcaa' },
+  { token: PURE_GRAMMAR_TOKEN.NUMBER, foreground: 'b5cea8' },
+  { token: PURE_GRAMMAR_TOKEN.DATE, foreground: 'b5cea8' },
+  { token: PURE_GRAMMAR_TOKEN.COLOR, foreground: 'b5cea8' },
+  { token: PURE_GRAMMAR_TOKEN.PACKAGE, foreground: '808080' },
+  { token: PURE_GRAMMAR_TOKEN.PARSER, foreground: 'c586c0' },
+  { token: PURE_GRAMMAR_TOKEN.LANGUAGE_STRUCT, foreground: 'c586c0' },
+  { token: PURE_GRAMMAR_TOKEN.MULTIPLICITY, foreground: '2d796b' },
+  { token: PURE_GRAMMAR_TOKEN.GENERICS, foreground: '2d796b' },
+  { token: PURE_GRAMMAR_TOKEN.PROPERTY, foreground: '9cdcfe' },
+  { token: PURE_GRAMMAR_TOKEN.PARAMETER, foreground: '9cdcfe' },
+  { token: PURE_GRAMMAR_TOKEN.VARIABLE, foreground: '4fc1ff' },
+  { token: PURE_GRAMMAR_TOKEN.TYPE, foreground: '3dc9b0' },
+  { token: `${PURE_GRAMMAR_TOKEN.STRING}.escape`, foreground: 'd7ba7d' },
+];
+
+export enum CODE_EDITOR_THEME {
+  DEFAULT_DARK = 'default-dark',
+  GITHUB_DARK = 'github-dark',
+  GITHUB_DARK_DIMMED = 'github-dark-dimmed',
+  SOLARIZED_DARK = 'solarized-dark',
+  ONE_DARK_PRO = 'one-dark-pro',
+  ONE_DARK_PRO_DARKER = 'one-dark-pro-darker',
+  MATERIAL_DEFAULT = 'material-default',
+  MATERIAL_DARKER = 'material-darker',
+
+  // default themes in Monaco editor
+  // See https://github.com/microsoft/vscode/blob/main/src/vs/editor/standalone/common/themes.ts
+  BUILT_IN__VSCODE_LIGHT = 'vs',
+  BUILT_IN__VSCODE_DARK = 'vs-dark',
+  BUILT_IN__VSCODE_HC_BLACK = 'hc-black',
+  BUILT_IN__VSCODE_HC_LIGHT = 'hc-light',
+}
+
+export const DEFAULT_DARK_THEME: monacoEditorAPI.IStandaloneThemeData = {
+  base: 'vs-dark',
+  inherit: true,
+  colors: {},
+  rules: BASE_PURE_LANGUAGE_COLOR_TOKENS,
+};
+
+export const SOLARIZED_DARK_THEME = buildCodeEditorTheme(
+  SOLARIZED_DARK_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);
+
+export const GITHUB_DARK_THEME = buildCodeEditorTheme(
+  GITHUB_DARK_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);
+
+export const GITHUB_DARK_DIMMED_THEME = buildCodeEditorTheme(
+  GITHUB_DARK_DIMMED_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);
+
+export const MATERIAL_DEFAULT_THEME = buildCodeEditorTheme(
+  MATERIAL_DEFAULT_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);
+
+export const MATERIAL_DARKER_THEME = buildCodeEditorTheme(
+  MATERIAL_DARKER_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);
+
+export const ONE_DARK_PRO_THEME = buildCodeEditorTheme(
+  ONE_DARK_PRO_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);
+
+export const ONE_DARK_PRO_DARKER_THEME = buildCodeEditorTheme(
+  ONE_DARK_PRO_DARKER_THEME_DATA,
+  CODE_EDITOR_THEME.BUILT_IN__VSCODE_DARK,
+  {},
+  [],
+);

package/src/code-editor/CodeEditorUtils.ts

@@ -26,6 +26,17 @@ import {
   KeyMod,
   MarkerSeverity,
 } from 'monaco-editor';
+import {
+  CODE_EDITOR_THEME,
+  DEFAULT_DARK_THEME,
+  GITHUB_DARK_DIMMED_THEME,
+  GITHUB_DARK_THEME,
+  MATERIAL_DARKER_THEME,
+  MATERIAL_DEFAULT_THEME,
+  ONE_DARK_PRO_DARKER_THEME,
+  ONE_DARK_PRO_THEME,
+  SOLARIZED_DARK_THEME,
+} from './CodeEditorTheme.js';
 
 export type CodeEditorPosition = {
   lineNumber: number;
@@ -93,6 +104,7 @@ export const getBaseCodeEditorOptions =
       // 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,
+      automaticLayout: true,
     } as monacoEditorAPI.IStandaloneEditorConstructionOptions);
 
 export const getBaseConsoleOptions =
@@ -273,4 +285,47 @@ export const configureCodeEditorComponent = async (
       commandArgs: keyCombination,
     })),
   );
+
+  // themes
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.DEFAULT_DARK,
+    DEFAULT_DARK_THEME,
+  );
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.SOLARIZED_DARK,
+    SOLARIZED_DARK_THEME,
+  );
+  monacoEditorAPI.defineTheme(CODE_EDITOR_THEME.GITHUB_DARK, GITHUB_DARK_THEME);
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.GITHUB_DARK_DIMMED,
+    GITHUB_DARK_DIMMED_THEME,
+  );
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.MATERIAL_DEFAULT,
+    MATERIAL_DEFAULT_THEME,
+  );
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.MATERIAL_DARKER,
+    MATERIAL_DARKER_THEME,
+  );
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.ONE_DARK_PRO,
+    ONE_DARK_PRO_THEME,
+  );
+  monacoEditorAPI.defineTheme(
+    CODE_EDITOR_THEME.ONE_DARK_PRO_DARKER,
+    ONE_DARK_PRO_DARKER_THEME,
+  );
 };
+
+export enum CODE_EDITOR_LANGUAGE {
+  TEXT = 'plaintext',
+  PURE = 'pure',
+  JSON = 'json',
+  JAVA = 'java',
+  MARKDOWN = 'markdown',
+  SQL = 'sql',
+  XML = 'xml',
+  YAML = 'yaml',
+  GRAPHQL = 'graphql',
+}

package/src/code-editor/PureLanguage.ts

@@ -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.
+ */
+
+export enum PURE_GRAMMAR_TOKEN {
+  WHITESPACE = '',
+
+  KEYWORD = 'keyword',
+  IDENTIFIER = 'identifier',
+  OPERATOR = 'operator',
+  DELIMITER = 'delimiter',
+
+  PARSER = 'parser',
+  NUMBER = 'number',
+  DATE = 'date',
+  COLOR = 'color',
+  PACKAGE = 'package',
+  STRING = 'string',
+  COMMENT = 'comment',
+
+  LANGUAGE_STRUCT = 'language-struct',
+  MULTIPLICITY = 'multiplicity',
+  GENERICS = 'generics',
+  PROPERTY = 'property',
+  PARAMETER = 'property',
+  VARIABLE = 'variable',
+  TYPE = 'type',
+
+  INVALID = 'invalid',
+}

package/src/code-editor/PureLanguageService.ts

@@ -21,67 +21,15 @@ import {
   PURE_CONNECTION_NAME,
   PURE_PARSER,
 } from '@finos/legend-graph';
-import {
-  editor as monacoEditorAPI,
-  languages as monacoLanguagesAPI,
-} from 'monaco-editor';
-import { CODE_EDITOR_LANGUAGE, CODE_EDITOR_THEME } from './CodeEditorConfig.js';
+import { languages as monacoLanguagesAPI } from 'monaco-editor';
+import { PURE_GRAMMAR_TOKEN } from './PureLanguage.js';
+import { CODE_EDITOR_LANGUAGE } from './CodeEditorUtils.js';
 
 /**
  * The postfix to be added to all token types, i.e. identifier.pure, number.pure, etc.
  */
 const PURE_GRAMMAR_TOKEN_POSTFIX = '.pure';
 
-export enum PURE_GRAMMAR_TOKEN {
-  WHITESPACE = '',
-
-  KEYWORD = 'keyword',
-  IDENTIFIER = 'identifier',
-  OPERATOR = 'operator',
-  DELIMITER = 'delimiter',
-
-  PARSER = 'parser',
-  NUMBER = 'number',
-  DATE = 'date',
-  COLOR = 'color',
-  PACKAGE = 'package',
-  STRING = 'string',
-  COMMENT = 'comment',
-
-  LANGUAGE_STRUCT = 'language-struct',
-  MULTIPLICITY = 'multiplicity',
-  GENERICS = 'generics',
-  PROPERTY = 'property',
-  PARAMETER = 'property',
-  VARIABLE = 'variable',
-  TYPE = 'type',
-
-  INVALID = 'invalid',
-}
-
-const theme: monacoEditorAPI.IStandaloneThemeData = {
-  base: 'vs-dark', // can also be vs-dark or hc-black
-  inherit: true, // can also be false to completely replace the builtin rules
-  colors: {},
-  rules: [
-    // NOTE: unfortunately, `monaco-editor` only accepts HEX values, not CSS variables
-    { token: PURE_GRAMMAR_TOKEN.IDENTIFIER, foreground: 'dcdcaa' },
-    { token: PURE_GRAMMAR_TOKEN.NUMBER, foreground: 'b5cea8' },
-    { token: PURE_GRAMMAR_TOKEN.DATE, foreground: 'b5cea8' },
-    { token: PURE_GRAMMAR_TOKEN.COLOR, foreground: 'b5cea8' },
-    { token: PURE_GRAMMAR_TOKEN.PACKAGE, foreground: '808080' },
-    { token: PURE_GRAMMAR_TOKEN.PARSER, foreground: 'c586c0' },
-    { token: PURE_GRAMMAR_TOKEN.LANGUAGE_STRUCT, foreground: 'c586c0' },
-    { token: PURE_GRAMMAR_TOKEN.MULTIPLICITY, foreground: '2d796b' },
-    { token: PURE_GRAMMAR_TOKEN.GENERICS, foreground: '2d796b' },
-    { token: PURE_GRAMMAR_TOKEN.PROPERTY, foreground: '9cdcfe' },
-    { token: PURE_GRAMMAR_TOKEN.PARAMETER, foreground: '9cdcfe' },
-    { token: PURE_GRAMMAR_TOKEN.VARIABLE, foreground: '4fc1ff' },
-    { token: PURE_GRAMMAR_TOKEN.TYPE, foreground: '3dc9b0' },
-    { token: `${PURE_GRAMMAR_TOKEN.STRING}.escape`, foreground: 'd7ba7d' },
-  ],
-};
-
 // Taken from `monaco-languages` configuration for Java in order to do propert brace matching
 // See https://github.com/microsoft/monaco-languages/blob/master/src/java/java.ts
 const configuration: monacoLanguagesAPI.LanguageConfiguration = {
@@ -485,7 +433,6 @@ export function setupPureLanguageService(options?: {
   extraKeywords?: string[] | undefined;
   extraParserKeywords?: string[] | undefined;
 }): void {
-  monacoEditorAPI.defineTheme(CODE_EDITOR_THEME.LEGEND, theme);
   monacoLanguagesAPI.register({ id: CODE_EDITOR_LANGUAGE.PURE });
   monacoLanguagesAPI.setLanguageConfiguration(
     CODE_EDITOR_LANGUAGE.PURE,

package/src/code-editor/index.ts

@@ -14,13 +14,11 @@
  * limitations under the License.
  */
 
-export {
-  PURE_GRAMMAR_TOKEN,
-  setupPureLanguageService,
-} from './PureLanguageService.js';
+export { setupPureLanguageService } from './PureLanguageService.js';
+export { PURE_GRAMMAR_TOKEN } from './PureLanguage.js';
 export * from './PureLanguageCodeEditorSupport.js';
 
-export * from './CodeEditorConfig.js';
 export * from './CodeEditor.js';
 export * from './CodeEditorUtils.js';
+export * from './CodeEditorTheme.js';
 export * from './CodeDiffView.js';