@snack-uikit/code-editor 0.1.3-preview-c01bf388.0 → 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,6 +13,7 @@
 | 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))` |

package/dist/components/CodeEditor.d.ts

@@ -5,5 +5,7 @@ export type CodeEditorProps = WithSupportProps<{
      * <br> По дефолту берется значение из useTheme внутри
      */
     themeClassName?: string;
+    /** Включение/отключение псевдобекграунда*/
+    hasBackground?: boolean;
 }> & EditorProps;
-export declare function CodeEditor({ themeClassName, className, theme, options, loading, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+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 { Spinner } from '@snack-uikit/loaders';
-import { excludeSupportProps, extractSupportProps } from '@snack-uikit/utils';
+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, theme, options, loading } = _a, props = __rest(_a, ["themeClassName", "className", "theme", "options", "loading"]);
+    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)
@@ -77,5 +79,5 @@ export function CodeEditor(_a) {
             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(Editor, Object.assign({}, extractSupportProps(props), { theme: (theme !== null && theme !== void 0 ? theme : dark) ? 'snackDark' : 'snack', className: className, loading: loading !== null && loading !== void 0 ? loading : _jsx(Spinner, {}), options: mergedOptions }, excludeSupportProps(props))));
+    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/styles.module.css

@@ -0,0 +1,13 @@
+.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, #6f717c);
+}

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.3-preview-c01bf388.0",
+  "version": "0.2.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,7 +34,8 @@
   "dependencies": {
     "@monaco-editor/react": "4.6.0",
     "@snack-uikit/loaders": "0.5.2",
-    "@snack-uikit/utils": "3.3.0"
+    "@snack-uikit/utils": "3.3.0",
+    "classnames": "2.5.1"
   },
-  "gitHead": "81d58386bd6b1a8ab786092bfb598811c5e31045"
+  "gitHead": "e877cb36426721b752a2e98fc7cb28b3f05fc3bf"
 }

package/src/components/CodeEditor.tsx

@@ -1,11 +1,13 @@
 import { Editor, EditorProps, useMonaco } from '@monaco-editor/react';
+import cn from 'classnames';
 import { useMemo } from 'react';
 
 import { Spinner } from '@snack-uikit/loaders';
-import { excludeSupportProps, extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+import { extractSupportProps, WithSupportProps } 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.scss';
 import { isDark } from './utils';
 
 export type CodeEditorProps = WithSupportProps<{
@@ -13,10 +15,20 @@ export type CodeEditorProps = WithSupportProps<{
    * <br> По дефолту берется значение из useTheme внутри
    */
   themeClassName?: string;
+  /** Включение/отключение псевдобекграунда*/
+  hasBackground?: boolean;
 }> &
   EditorProps;
 
-export function CodeEditor({ themeClassName, className, theme, options, loading, ...props }: CodeEditorProps) {
+export function CodeEditor({
+  themeClassName,
+  className,
+  theme,
+  options,
+  loading,
+  hasBackground = true,
+  ...props
+}: CodeEditorProps) {
   const monaco = useMonaco();
 
   const themeValues = useCalculatedThemeValues(themeClassName);
@@ -98,13 +110,14 @@ export function CodeEditor({ themeClassName, className, theme, options, loading,
   );
 
   return (
-    <Editor
-      {...extractSupportProps(props)}
-      theme={theme ?? dark ? 'snackDark' : 'snack'}
-      className={className}
-      loading={loading ?? <Spinner />}
-      options={mergedOptions}
-      {...excludeSupportProps(props)}
-    />
+    <div className={className} {...extractSupportProps(props)}>
+      <Editor
+        {...props}
+        theme={theme ?? dark ? 'snackDark' : 'snack'}
+        className={cn({ [styles.editor]: hasBackground })}
+        loading={loading ?? <Spinner />}
+        options={mergedOptions}
+      />
+    </div>
   );
 }

package/src/components/styles.module.scss

@@ -0,0 +1,19 @@
+@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+
+.editor {
+  background-color: inherit;
+
+  &::after {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+
+    width: 100%;
+
+    opacity: $opacity-a004;
+    background-color: $sys-neutral-accent-default;
+  }
+}