@snack-uikit/code-editor 0.2.3-preview-94780dcd.0 → 0.2.4-preview-1f246c4a.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.3 (2024-09-23)
+
+
+### Bug Fixes
+
+* **PDS-480:** remove direct usage of browser api elements ([1231ff7](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/commits/1231ff7ab7a1b210b579a7b694633ef23bffcf44))
+
+
+
+
+
 ## 0.2.2 (2024-07-19)
 
 

package/dist/cjs/components/CodeEditor.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeEditor = CodeEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@monaco-editor/react");
+const classnames_1 = __importDefault(require("classnames"));
+const react_2 = require("react");
+const loaders_1 = require("@snack-uikit/loaders");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("./constants");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault({});
+const utils_2 = require("./utils");
+(0, utils_2.initLoaderConfig)();
+function CodeEditor(_a) {
+  var {
+      themeName,
+      className,
+      theme,
+      options,
+      loading,
+      hasBackground = true,
+      onMount
+    } = _a,
+    props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount"]);
+  const monaco = (0, react_1.useMonaco)();
+  const [wrapperElement, setWrapperElement] = (0, react_2.useState)(null);
+  const onEditorMount = (0, react_2.useCallback)((editor, monaco) => {
+    var _a;
+    monaco && (0, utils_1.isBrowser)() && ((_a = document === null || document === void 0 ? void 0 : document.fonts) === null || _a === void 0 ? void 0 : _a.ready.finally(monaco.editor.remeasureFonts));
+    onMount === null || onMount === void 0 ? void 0 : onMount(editor, monaco);
+  }, [onMount]);
+  const themeValues = (0, hooks_1.useCalculatedThemeValues)({
+    themeName,
+    stylesOriginNode: wrapperElement
+  });
+  const themeDataWithoutBase = (0, react_2.useMemo)(() => Object.assign({
+    inherit: true
+  }, (themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys) ? {
+    semanticTokenColors: {
+      enumMember: {
+        foreground: themeValues.sys.blue.textLight
+      },
+      'variable.constant': {
+        foreground: themeValues.sys.orange.textSupport
+      },
+      'variable.defaultLibrary': {
+        foreground: themeValues.sys.yellow.textSupport
+      }
+    },
+    rules: [{
+      foreground: themeValues.sys.neutral.textLight,
+      token: 'comment'
+    }, {
+      foreground: themeValues.sys.green.textSupport,
+      token: 'string'
+    }, {
+      foreground: themeValues.sys.yellow.textSupport,
+      token: 'constant'
+    }, {
+      foreground: themeValues.sys.blue.accentDefault,
+      token: 'keyword'
+    }],
+    colors: {
+      'editor.background': '#00000000',
+      'editor.foreground': themeValues.sys.neutral.textMain,
+      'editor.selectionBackground': themeValues.sys.primary.decorHovered,
+      'editor.lineHighlightBackground': themeValues.sys.neutral.decorDefault + '3F',
+      'editorCursor.foreground': themeValues.sys.primary.accentDefault,
+      'editorWhitespace.foreground': themeValues.sys.neutral.decorDefault,
+      '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
+    }
+  } : constants_1.DEFAULT_THEME_VALUES), [themeValues === null || themeValues === void 0 ? void 0 : themeValues.sys]);
+  const dark = (0, react_2.useMemo)(() => {
+    var _a;
+    return (0, utils_2.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'
+  }));
+  const mergedOptions = (0, react_2.useMemo)(() => Object.assign(Object.assign(Object.assign({}, constants_1.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']
+  } : constants_1.DEFAULT_THEME_OPTIONS.mono.s), options), [options, themeValues === null || themeValues === void 0 ? void 0 : themeValues.mono]);
+  return (0, jsx_runtime_1.jsx)("div", Object.assign({
+    className: className
+  }, (0, utils_1.extractSupportProps)(props), {
+    ref: setWrapperElement,
+    children: (0, jsx_runtime_1.jsx)(react_1.Editor, Object.assign({}, props, {
+      theme: (theme !== null && theme !== void 0 ? theme : dark) ? 'snackDark' : 'snack',
+      className: (0, classnames_1.default)({
+        [styles_module_scss_1.default.editor]: hasBackground
+      }),
+      loading: loading !== null && loading !== void 0 ? loading : (0, jsx_runtime_1.jsx)(loaders_1.Spinner, {}),
+      options: mergedOptions,
+      onMount: onEditorMount
+    }))
+  }));
+}

package/dist/cjs/components/constants.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CODE_EDITOR_OPTIONS = exports.THEME_VARS = exports.DEFAULT_THEME_OPTIONS = exports.DEFAULT_THEME_VALUES = void 0;
+exports.DEFAULT_THEME_VALUES = {
+  semanticTokenColors: {
+    enumMember: {
+      foreground: '#6b9fe3'
+    },
+    'variable.constant': {
+      foreground: '#a2532f'
+    },
+    'variable.defaultLibrary': {
+      foreground: '#80461b'
+    }
+  },
+  rules: [{
+    foreground: '#898989',
+    token: 'comment'
+  }, {
+    foreground: '#335747',
+    token: 'string'
+  }, {
+    foreground: '#80461b',
+    token: 'constant'
+  }, {
+    foreground: '#3280e8',
+    token: 'keyword'
+  }],
+  colors: {
+    'editor.background': '#00000000',
+    'editor.foreground': '#333333',
+    'editor.selectionBackground': '#decdfb',
+    'editor.lineHighlightBackground': '#decdfb',
+    'editorCursor.foreground': '#794ed3',
+    'editorWhitespace.foreground': '#dedede',
+    'scrollbarSlider.background': '#75757552',
+    'scrollbarSlider.hoverBackground': '#7575757B',
+    'scrollbarSlider.activeBackground': '#757575A4',
+    'editorLineNumber.foreground': '#333333',
+    'editorLineNumber.activeForeground': '#898989'
+  }
+};
+exports.DEFAULT_THEME_OPTIONS = {
+  mono: {
+    s: {
+      fontWeight: '400',
+      fontSize: 12,
+      fontFamily: 'SB Sans Text Mono'
+    }
+  }
+};
+exports.THEME_VARS = {
+  sys: {
+    neutral: {
+      decorDefault: '--sys-neutral-decor-default',
+      accentDefault: '--sys-neutral-accent-default',
+      textMain: '--sys-neutral-text-main',
+      textLight: '--sys-neutral-text-light'
+    },
+    yellow: {
+      textSupport: '--sys-yellow-text-support'
+    },
+    available: {
+      complementary: '--sys-available-complementary'
+    },
+    blue: {
+      accentDefault: '--sys-blue-accent-default',
+      textLight: '--sys-blue-text-light'
+    },
+    orange: {
+      textSupport: '--sys-orange-text-support'
+    },
+    primary: {
+      decorHovered: '--sys-primary-decor-hovered',
+      accentDefault: '--sys-primary-accent-default'
+    },
+    green: {
+      textSupport: '--sys-green-text-support'
+    }
+  },
+  mono: {
+    body: {
+      s: {
+        'font-weight': '--mono-body-s-font-weight',
+        'font-size': '--mono-body-s-font-size',
+        'font-family': '--mono-body-s-font-family'
+      }
+    }
+  }
+};
+exports.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/cjs/components/hooks.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCalculatedThemeValues = useCalculatedThemeValues;
+const react_1 = require("react");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("./constants");
+function getThemeVars(styles) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return function mapComputedTree(tree) {
+    if (typeof tree === 'string') {
+      return styles.getPropertyValue(tree);
+    }
+    const res = {};
+    Object.entries(tree).forEach(cur => {
+      res[cur[0]] = mapComputedTree(cur[1]);
+    });
+    return res;
+  };
+}
+function useCalculatedThemeValues(_ref) {
+  let {
+    stylesOriginNode,
+    themeName
+  } = _ref;
+  const [values, setValues] = (0, react_1.useState)(undefined);
+  const {
+    themeClassName
+  } = (0, utils_1.useThemeContext)();
+  const trigger = themeName !== null && themeName !== void 0 ? themeName : themeClassName;
+  (0, react_1.useEffect)(() => {
+    if (stylesOriginNode) {
+      const styles = getComputedStyle(stylesOriginNode);
+      setValues(getThemeVars(styles)(constants_1.THEME_VARS));
+    }
+  }, [stylesOriginNode, trigger]);
+  return values;
+}

package/dist/cjs/components/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./CodeEditor"), exports);

package/dist/cjs/components/utils.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.rgb2hsl = rgb2hsl;
+exports.isDark = isDark;
+exports.initLoaderConfig = initLoaderConfig;
+const react_1 = require("@monaco-editor/react");
+function rgb2hsl(HTMLcolor) {
+  const r = parseInt(HTMLcolor.substring(1, 3), 16) / 255;
+  const g = parseInt(HTMLcolor.substring(3, 5), 16) / 255;
+  const b = parseInt(HTMLcolor.substring(5, 7), 16) / 255;
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b);
+  let h, s;
+  const l = (max + min) / 2;
+  if (max === min) {
+    h = s = 0;
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+      default:
+        h = 0;
+        break;
+    }
+    h /= 6;
+  }
+  return [h, s, l]; // H - цветовой тон, S - насыщенность, L - светлота
+}
+function isDark(color) {
+  const [h, _, l] = rgb2hsl(color);
+  return h < 0.55 && l >= 0.5 || h >= 0.55 && l >= 0.75;
+}
+function initLoaderConfig() {
+  if (!window) {
+    return;
+  }
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window['__snack-code-editor-loader-config__'] && react_1.loader.config(window['__snack-code-editor-loader-config__']);
+}

package/dist/cjs/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.loader = void 0;
+/**
+  Monaco loader defines the way how monaco will be loaded.
+  @see https://github.com/suren-atoyan/monaco-react/tree/master?tab=readme-ov-file#loader-config
+ */
+var react_1 = require("@monaco-editor/react");
+Object.defineProperty(exports, "loader", {
+  enumerable: true,
+  get: function () {
+    return react_1.loader;
+  }
+});
+__exportStar(require("./components"), exports);

package/dist/esm/components/CodeEditor.d.ts

@@ -0,0 +1,13 @@
+import { EditorProps } from '@monaco-editor/react';
+import { WithSupportProps } from '@snack-uikit/utils';
+export type CodeEditorProps = WithSupportProps<{
+    /**
+     * Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей.
+     */
+    themeName?: string;
+    /**
+     * Включение/отключение псевдобекграунда
+     */
+    hasBackground?: boolean;
+}> & EditorProps;
+export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/constants.d.ts

@@ -0,0 +1,101 @@
+export declare const DEFAULT_THEME_VALUES: {
+    semanticTokenColors: {
+        enumMember: {
+            foreground: string;
+        };
+        'variable.constant': {
+            foreground: string;
+        };
+        'variable.defaultLibrary': {
+            foreground: string;
+        };
+    };
+    rules: {
+        foreground: string;
+        token: string;
+    }[];
+    colors: {
+        'editor.background': string;
+        'editor.foreground': string;
+        'editor.selectionBackground': string;
+        'editor.lineHighlightBackground': string;
+        'editorCursor.foreground': string;
+        'editorWhitespace.foreground': string;
+        'scrollbarSlider.background': string;
+        'scrollbarSlider.hoverBackground': string;
+        'scrollbarSlider.activeBackground': string;
+        'editorLineNumber.foreground': string;
+        'editorLineNumber.activeForeground': string;
+    };
+};
+export declare const DEFAULT_THEME_OPTIONS: {
+    mono: {
+        s: {
+            fontWeight: string;
+            fontSize: number;
+            fontFamily: string;
+        };
+    };
+};
+export declare const THEME_VARS: {
+    sys: {
+        neutral: {
+            decorDefault: string;
+            accentDefault: string;
+            textMain: string;
+            textLight: string;
+        };
+        yellow: {
+            textSupport: string;
+        };
+        available: {
+            complementary: string;
+        };
+        blue: {
+            accentDefault: string;
+            textLight: string;
+        };
+        orange: {
+            textSupport: string;
+        };
+        primary: {
+            decorHovered: string;
+            accentDefault: string;
+        };
+        green: {
+            textSupport: string;
+        };
+    };
+    mono: {
+        body: {
+            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/esm/components/hooks.d.ts

@@ -0,0 +1,44 @@
+type UseCalculatedThemeValuesProps = {
+    stylesOriginNode: HTMLDivElement | null;
+    themeName?: string;
+};
+export declare function useCalculatedThemeValues({ stylesOriginNode, themeName }: UseCalculatedThemeValuesProps): {
+    sys: {
+        neutral: {
+            decorDefault: string;
+            accentDefault: string;
+            textMain: string;
+            textLight: string;
+        };
+        yellow: {
+            textSupport: string;
+        };
+        available: {
+            complementary: string;
+        };
+        blue: {
+            accentDefault: string;
+            textLight: string;
+        };
+        orange: {
+            textSupport: string;
+        };
+        primary: {
+            decorHovered: string;
+            accentDefault: string;
+        };
+        green: {
+            textSupport: string;
+        };
+    };
+    mono: {
+        body: {
+            s: {
+                'font-weight': string;
+                'font-size': string;
+                'font-family': string;
+            };
+        };
+    };
+} | undefined;
+export {};

package/dist/esm/components/index.js

@@ -0,0 +1 @@
+export * from './CodeEditor';

package/dist/esm/components/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function rgb2hsl(HTMLcolor: string): number[];
+export declare function isDark(color: string): boolean;
+export declare function initLoaderConfig(): void;

package/dist/esm/index.js

@@ -0,0 +1,6 @@
+/**
+  Monaco loader defines the way how monaco will be loaded.
+  @see https://github.com/suren-atoyan/monaco-react/tree/master?tab=readme-ov-file#loader-config
+ */
+export { loader } from '@monaco-editor/react';
+export * from './components';

package/package.json

@@ -4,15 +4,16 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.3-preview-94780dcd.0",
+  "version": "0.2.4-preview-1f246c4a.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/tree/master/packages/code-editor",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Nikita Ershov <niershov@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -33,9 +35,9 @@
   "scripts": {},
   "dependencies": {
     "@monaco-editor/react": "4.6.0",
-    "@snack-uikit/loaders": "0.5.3-preview-94780dcd.0",
-    "@snack-uikit/utils": "3.3.1-preview-94780dcd.0",
+    "@snack-uikit/loaders": "0.5.4-preview-1f246c4a.0",
+    "@snack-uikit/utils": "3.4.1-preview-1f246c4a.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "0b67805c876ec8ccc1567d110a3b37b04d2f0fb6"
+  "gitHead": "a185a55c0722b19f70dd168cf299e6f53a0fd93f"
 }

package/dist/components/styles.module.css

@@ -1,13 +0,0 @@
-.editor{
-  background-color:inherit;
-}
-.editor::after{
-  pointer-events:none;
-  content:"";
-  position:absolute;
-  top:0;
-  bottom:0;
-  width:100%;
-  opacity:var(--opacity-a004, 0.04);
-  background-color:var(--sys-neutral-accent-default, #787b8a);
-}