@snack-uikit/code-editor 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.2.0 (2024-04-27)
+
+
+### Features
+
+* **PDS-62:** upd default theme; add theme prop ([522efca](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/commits/522efcad7a40cf9dccfef8c5192580c6d2c4b1ee))
+
+
+
+
+
 ## 0.1.2 (2024-04-23)
 
 ### Only dependencies have been changed

package/README.md

@@ -13,12 +13,14 @@
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | themeClassName | `string` | - | Класснейм подключенной темы (из хука useThemeConfig() или ThemeProvider) <br> По дефолту берется значение из useTheme внутри |
+| hasBackground | `boolean` | true | Включение/отключение псевдобекграунда |
 | defaultValue | `string` | - | Default value of the current model |
 | defaultLanguage | `string` | - | Default language of the current model |
 | defaultPath | `string` | - | Default path of the current model Will be passed as the third argument to `.createModel` method `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))` |
 | value | `string` | - | Value of the current model |
 | language | `string` | - | Language of the current model |
 | path | `string` | - | Path of the current model Will be passed as the third argument to `.createModel` method `monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))` |
+| theme | `string` | "light" | The theme for the monaco Available options "vs-dark" \| "light" Define new themes by `monaco.editor.defineTheme` |
 | line | `number` | - | The line to jump on it |
 | loading | `ReactNode` | "Loading..." | The loading screen before the editor will be mounted |
 | options | `IStandaloneEditorConstructionOptions` | - | IStandaloneEditorConstructionOptions |

package/dist/components/CodeEditor.d.ts

@@ -5,5 +5,7 @@ export type CodeEditorProps = WithSupportProps<{
      * <br> По дефолту берется значение из useTheme внутри
      */
     themeClassName?: string;
-}> & Omit<EditorProps, 'theme'>;
-export declare function CodeEditor({ themeClassName, className, options, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+    /** Включение/отключение псевдобекграунда*/
+    hasBackground?: boolean;
+}> & EditorProps;
+export declare function CodeEditor({ themeClassName, className, theme, options, loading, hasBackground, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CodeEditor.js

@@ -11,14 +11,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Editor, useMonaco } from '@monaco-editor/react';
+import cn from 'classnames';
 import { useMemo } from 'react';
-import { excludeSupportProps, extractSupportProps } from '@snack-uikit/utils';
-import { DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
+import { Spinner } from '@snack-uikit/loaders';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
 import { useCalculatedThemeValues } from './hooks';
 import styles from './styles.module.css';
 import { isDark } from './utils';
 export function CodeEditor(_a) {
-    var { themeClassName, className, options } = _a, props = __rest(_a, ["themeClassName", "className", "options"]);
+    var { themeClassName, className, theme, options, loading, hasBackground = true } = _a, props = __rest(_a, ["themeClassName", "className", "theme", "options", "loading", "hasBackground"]);
     const monaco = useMonaco();
     const themeValues = useCalculatedThemeValues(themeClassName);
     const themeDataWithoutBase = useMemo(() => (Object.assign({ inherit: true }, ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys)
@@ -53,6 +55,7 @@ export function CodeEditor(_a) {
                 },
             ],
             colors: {
+                'editor.background': '#00000000',
                 'editor.foreground': themeValues.sys.neutral.textMain,
                 'editor.selectionBackground': themeValues.sys.primary.decorHovered,
                 'editor.lineHighlightBackground': themeValues.sys.neutral.decorDefault + '3F',
@@ -61,20 +64,20 @@ export function CodeEditor(_a) {
                 'scrollbarSlider.background': themeValues.sys.neutral.accentDefault + '52',
                 'scrollbarSlider.hoverBackground': themeValues.sys.neutral.accentDefault + '7B',
                 'scrollbarSlider.activeBackground': themeValues.sys.neutral.accentDefault + 'A4',
-                "editorLineNumber.foreground": themeValues.sys.neutral.textLight,
-                "editorLineNumber.activeForeground": themeValues.sys.neutral.textMain
+                'editorLineNumber.foreground': themeValues.sys.neutral.textLight,
+                'editorLineNumber.activeForeground': themeValues.sys.neutral.textMain,
             },
         }
         : DEFAULT_THEME_VALUES))), [themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys]);
     const dark = useMemo(() => { var _a; return isDark((_a = themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys.available.complementary) !== null && _a !== void 0 ? _a : ''); }, [themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys.available.complementary]);
     monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme('snackDark', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs-dark' }));
     monaco === null || monaco === void 0 ? void 0 : monaco.editor.defineTheme('snack', Object.assign(Object.assign({}, themeDataWithoutBase), { base: 'vs' }));
-    return (_jsx("div", Object.assign({ className: className }, extractSupportProps(props), { children: _jsx(Editor, Object.assign({ theme: dark ? 'snackDark' : 'snack', className: styles.editor, options: Object.assign(Object.assign({ minimap: {
-                    enabled: false,
-                } }, ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono)
-                ? {
-                    fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
-                    fontWeight: themeValues.mono.body.s['font-weight'],
-                }
-                : DEFAULT_THEME_OPTIONS)), options) }, excludeSupportProps(props))) })));
+    const mergedOptions = useMemo(() => (Object.assign(Object.assign(Object.assign({}, CODE_EDITOR_OPTIONS), ((themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono)
+        ? {
+            fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
+            fontWeight: themeValues.mono.body.s['font-weight'],
+            fontFamily: themeValues.mono.body.s['font-family'],
+        }
+        : DEFAULT_THEME_OPTIONS.mono.s)), options)), [options, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
+    return (_jsx("div", Object.assign({ className: className }, extractSupportProps(props), { children: _jsx(Editor, Object.assign({}, props, { theme: (theme !== null && theme !== void 0 ? theme : dark) ? 'snackDark' : 'snack', className: cn({ [styles.editor]: hasBackground }), loading: loading !== null && loading !== void 0 ? loading : _jsx(Spinner, {}), options: mergedOptions })) })));
 }

package/dist/components/constants.d.ts

@@ -15,6 +15,7 @@ export declare const DEFAULT_THEME_VALUES: {
         token: string;
     }[];
     colors: {
+        'editor.background': string;
         'editor.foreground': string;
         'editor.selectionBackground': string;
         'editor.lineHighlightBackground': string;
@@ -23,15 +24,16 @@ export declare const DEFAULT_THEME_VALUES: {
         'scrollbarSlider.background': string;
         'scrollbarSlider.hoverBackground': string;
         'scrollbarSlider.activeBackground': string;
-        "editorLineNumber.foreground": string;
-        "editorLineNumber.activeForeground": string;
+        'editorLineNumber.foreground': string;
+        'editorLineNumber.activeForeground': string;
     };
 };
 export declare const DEFAULT_THEME_OPTIONS: {
-    body: {
+    mono: {
         s: {
             fontWeight: string;
             fontSize: number;
+            fontFamily: string;
         };
     };
 };
@@ -69,7 +71,31 @@ export declare const THEME_VARS: {
             s: {
                 'font-weight': string;
                 'font-size': string;
+                'font-family': string;
             };
         };
     };
 };
+export declare const CODE_EDITOR_OPTIONS: {
+    minimap: {
+        enabled: boolean;
+    };
+    padding: {
+        top: number;
+        bottom: number;
+    };
+    tabSize: number;
+    scrollBeyondLastLine: boolean;
+    fixedOverflowWidgets: boolean;
+    lineDecorationsWidth: number;
+    lineNumbersMinChars: number;
+    scrollbar: {
+        verticalScrollbarSize: number;
+        horizontalScrollbarSize: number;
+        useShadows: boolean;
+    };
+    contextmenu: boolean;
+    guides: {
+        indentation: boolean;
+    };
+};

package/dist/components/constants.js

@@ -11,6 +11,7 @@ export const DEFAULT_THEME_VALUES = {
         { foreground: '#3280e8', token: 'keyword' },
     ],
     colors: {
+        'editor.background': '#00000000',
         'editor.foreground': '#333333',
         'editor.selectionBackground': '#decdfb',
         'editor.lineHighlightBackground': '#decdfb',
@@ -19,15 +20,16 @@ export const DEFAULT_THEME_VALUES = {
         'scrollbarSlider.background': '#75757552',
         'scrollbarSlider.hoverBackground': '#7575757B',
         'scrollbarSlider.activeBackground': '#757575A4',
-        "editorLineNumber.foreground": "#333333",
-        "editorLineNumber.activeForeground": "#898989"
+        'editorLineNumber.foreground': '#333333',
+        'editorLineNumber.activeForeground': '#898989',
     },
 };
 export const DEFAULT_THEME_OPTIONS = {
-    body: {
+    mono: {
         s: {
             fontWeight: '400',
-            fontSize: 14,
+            fontSize: 12,
+            fontFamily: 'SB Sans Text Mono',
         },
     },
 };
@@ -65,7 +67,31 @@ export const THEME_VARS = {
             s: {
                 'font-weight': '--mono-body-s-font-weight',
                 'font-size': '--mono-body-s-font-size',
+                'font-family': '--mono-body-s-font-family',
             },
         },
     },
 };
+export const CODE_EDITOR_OPTIONS = {
+    minimap: {
+        enabled: false,
+    },
+    padding: {
+        top: 4,
+        bottom: 4,
+    },
+    tabSize: 4,
+    scrollBeyondLastLine: false,
+    fixedOverflowWidgets: true,
+    lineDecorationsWidth: 4,
+    lineNumbersMinChars: 2,
+    scrollbar: {
+        verticalScrollbarSize: 8,
+        horizontalScrollbarSize: 8,
+        useShadows: false,
+    },
+    contextmenu: false,
+    guides: {
+        indentation: false,
+    },
+};

package/dist/components/hooks.d.ts

@@ -32,6 +32,7 @@ export declare function useCalculatedThemeValues(themeClassNameProps?: string):
             s: {
                 'font-weight': string;
                 'font-size': string;
+                'font-family': string;
             };
         };
     };

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.2",
+  "version": "0.2.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,7 +33,9 @@
   "scripts": {},
   "dependencies": {
     "@monaco-editor/react": "4.6.0",
-    "@snack-uikit/utils": "3.3.0"
+    "@snack-uikit/loaders": "0.5.2",
+    "@snack-uikit/utils": "3.3.0",
+    "classnames": "2.5.1"
   },
-  "gitHead": "bf1e1f3cfabccc1ee288c18722e33009bd001798"
+  "gitHead": "e877cb36426721b752a2e98fc7cb28b3f05fc3bf"
 }

package/src/components/CodeEditor.tsx

@@ -1,9 +1,11 @@
 import { Editor, EditorProps, useMonaco } from '@monaco-editor/react';
+import cn from 'classnames';
 import { useMemo } from 'react';
 
-import { excludeSupportProps, extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+import { Spinner } from '@snack-uikit/loaders';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
+import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
 import { useCalculatedThemeValues } from './hooks';
 import styles from './styles.module.scss';
 import { isDark } from './utils';
@@ -13,10 +15,20 @@ export type CodeEditorProps = WithSupportProps<{
    * <br> По дефолту берется значение из useTheme внутри
    */
   themeClassName?: string;
+  /** Включение/отключение псевдобекграунда*/
+  hasBackground?: boolean;
 }> &
-  Omit<EditorProps, 'theme'>;
+  EditorProps;
 
-export function CodeEditor({ themeClassName, className, options, ...props }: CodeEditorProps) {
+export function CodeEditor({
+  themeClassName,
+  className,
+  theme,
+  options,
+  loading,
+  hasBackground = true,
+  ...props
+}: CodeEditorProps) {
   const monaco = useMonaco();
 
   const themeValues = useCalculatedThemeValues(themeClassName);
@@ -56,6 +68,7 @@ export function CodeEditor({ themeClassName, className, options, ...props }: Cod
               },
             ],
             colors: {
+              'editor.background': '#00000000',
               'editor.foreground': themeValues.sys.neutral.textMain,
               'editor.selectionBackground': themeValues.sys.primary.decorHovered,
               'editor.lineHighlightBackground': themeValues.sys.neutral.decorDefault + '3F',
@@ -64,8 +77,8 @@ export function CodeEditor({ themeClassName, className, options, ...props }: Cod
               'scrollbarSlider.background': themeValues.sys.neutral.accentDefault + '52',
               'scrollbarSlider.hoverBackground': themeValues.sys.neutral.accentDefault + '7B',
               'scrollbarSlider.activeBackground': themeValues.sys.neutral.accentDefault + 'A4',
-              "editorLineNumber.foreground": themeValues.sys.neutral.textLight,
-              "editorLineNumber.activeForeground": themeValues.sys.neutral.textMain
+              'editorLineNumber.foreground': themeValues.sys.neutral.textLight,
+              'editorLineNumber.activeForeground': themeValues.sys.neutral.textMain,
             },
           }
         : DEFAULT_THEME_VALUES),
@@ -81,24 +94,29 @@ export function CodeEditor({ themeClassName, className, options, ...props }: Cod
   monaco?.editor.defineTheme('snackDark', { ...themeDataWithoutBase, base: 'vs-dark' });
   monaco?.editor.defineTheme('snack', { ...themeDataWithoutBase, base: 'vs' });
 
+  const mergedOptions = useMemo(
+    () => ({
+      ...CODE_EDITOR_OPTIONS,
+      ...(themeValues?.mono
+        ? {
+            fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
+            fontWeight: themeValues.mono.body.s['font-weight'],
+            fontFamily: themeValues.mono.body.s['font-family'],
+          }
+        : DEFAULT_THEME_OPTIONS.mono.s),
+      ...options,
+    }),
+    [options, themeValues?.mono],
+  );
+
   return (
     <div className={className} {...extractSupportProps(props)}>
       <Editor
-        theme={dark ? 'snackDark' : 'snack'}
-        className={styles.editor}
-        options={{
-          minimap: {
-            enabled: false,
-          },
-          ...(themeValues?.mono
-            ? {
-                fontSize: Number.parseFloat(themeValues.mono.body.s['font-size']),
-                fontWeight: themeValues.mono.body.s['font-weight'],
-              }
-            : DEFAULT_THEME_OPTIONS),
-          ...options,
-        }}
-        {...excludeSupportProps(props)}
+        {...props}
+        theme={theme ?? dark ? 'snackDark' : 'snack'}
+        className={cn({ [styles.editor]: hasBackground })}
+        loading={loading ?? <Spinner />}
+        options={mergedOptions}
       />
     </div>
   );

package/src/components/constants.ts

@@ -11,6 +11,7 @@ export const DEFAULT_THEME_VALUES = {
     { foreground: '#3280e8', token: 'keyword' },
   ],
   colors: {
+    'editor.background': '#00000000',
     'editor.foreground': '#333333',
     'editor.selectionBackground': '#decdfb',
     'editor.lineHighlightBackground': '#decdfb',
@@ -19,16 +20,17 @@ export const DEFAULT_THEME_VALUES = {
     'scrollbarSlider.background': '#75757552',
     'scrollbarSlider.hoverBackground': '#7575757B',
     'scrollbarSlider.activeBackground': '#757575A4',
-    "editorLineNumber.foreground": "#333333",
-    "editorLineNumber.activeForeground": "#898989"
+    'editorLineNumber.foreground': '#333333',
+    'editorLineNumber.activeForeground': '#898989',
   },
 };
 
 export const DEFAULT_THEME_OPTIONS = {
-  body: {
+  mono: {
     s: {
       fontWeight: '400',
-      fontSize: 14,
+      fontSize: 12,
+      fontFamily: 'SB Sans Text Mono',
     },
   },
 };
@@ -67,7 +69,32 @@ export const THEME_VARS = {
       s: {
         'font-weight': '--mono-body-s-font-weight',
         'font-size': '--mono-body-s-font-size',
+        'font-family': '--mono-body-s-font-family',
       },
     },
   },
 };
+
+export const CODE_EDITOR_OPTIONS = {
+  minimap: {
+    enabled: false,
+  },
+  padding: {
+    top: 4,
+    bottom: 4,
+  },
+  tabSize: 4,
+  scrollBeyondLastLine: false,
+  fixedOverflowWidgets: true,
+  lineDecorationsWidth: 4,
+  lineNumbersMinChars: 2,
+  scrollbar: {
+    verticalScrollbarSize: 8,
+    horizontalScrollbarSize: 8,
+    useShadows: false,
+  },
+  contextmenu: false,
+  guides: {
+    indentation: false,
+  },
+};

package/src/components/styles.module.scss

@@ -16,4 +16,4 @@
     opacity: $opacity-a004;
     background-color: $sys-neutral-accent-default;
   }
-}
+}