@snack-uikit/code-editor 0.6.5-preview-6c5a9bc3.0 → 0.7.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.7.0 (2025-05-28)
+
+
+### Features
+
+* **PDS-2227:** add copy button for code editor ([6891964](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/commits/6891964be3dffecab54a3a226f250f6d303da7e9))
+
+
+
+
+
 ## 0.6.4 (2025-05-16)
 
 ### Only dependencies have been changed

package/README.md

@@ -15,7 +15,7 @@
 | jsonSchema* | `JsonSchema` | - | Схема для валидации |
 | themeName | `string` | - | Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей. |
 | hasBackground | `boolean` | true | Включение/отключение псевдобекграунда |
-| hasCopyHeader | `boolean` | - | Включение/отключение шапки с кнопкой копирования |
+| hasHeader | `boolean` | - | Включение/отключение шапки |
 | onCopyClick | `() => void` | - | Клик по кнопке копирования |
 | defaultValue | `string` | - | Default value of the current model |
 | defaultLanguage | `string` | - | Default language of the current model |

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

@@ -10,12 +10,12 @@ export type CodeEditorProps = WithSupportProps<{
      */
     hasBackground?: boolean;
     /**
-     * Включение/отключение шапки с кнопкой копирования
+     * Включение/отключение шапки
      */
-    hasCopyHeader?: boolean;
+    hasHeader?: boolean;
     /**
      * Клик по кнопке копирования
      */
     onCopyClick?(): void;
 }> & (EditorBaseProps | EditorWithJsonSchemaProps);
-export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, onCopyClick, hasCopyHeader, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, onCopyClick, hasHeader, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CodeEditor.js

@@ -40,9 +40,9 @@ function CodeEditor(_a) {
       onMount,
       language,
       onCopyClick,
-      hasCopyHeader
+      hasHeader
     } = _a,
-    props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language", "onCopyClick", "hasCopyHeader"]);
+    props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language", "onCopyClick", "hasHeader"]);
   const monaco = (0, react_1.useMonaco)();
   const [wrapperElement, setWrapperElement] = (0, react_2.useState)(null);
   const {
@@ -119,10 +119,10 @@ function CodeEditor(_a) {
     className: className
   }, (0, utils_1.extractSupportProps)(props), {
     ref: setWrapperElement,
-    children: [hasCopyHeader && (0, jsx_runtime_1.jsxs)("div", {
+    children: [hasHeader && (0, jsx_runtime_1.jsxs)("div", {
       className: styles_module_scss_1.default.headline,
       children: [language && (0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelS, {
-        children: (0, utils_2.toTitleCase)(language)
+        children: (0, utils_2.uppercaseFirstLetter)(language)
       }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, {
         valueToCopy: props.value || '',
         size: 's',

package/dist/cjs/components/CopyButton/CopyButton.d.ts

@@ -4,6 +4,6 @@ export type CopyButtonProps = WithSupportProps<{
     valueToCopy: string | number;
     size?: ButtonFunctionProps['size'];
     className?: string;
-    onClick?: ButtonFunctionProps['onClick'];
+    onClick?(): void;
 }>;
 export declare function CopyButton({ valueToCopy, size, className, onClick, ...rest }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CopyButton/CopyButton.js

@@ -19,7 +19,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CopyButton = CopyButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const frontend_tools_copy_to_clipboard_1 = require("@cloud-ru/frontend-tools-copy-to-clipboard");
+const ft_copy_to_clipboard_1 = require("@cloud-ru/ft-copy-to-clipboard");
 const button_1 = require("@snack-uikit/button");
 const icons_1 = require("@snack-uikit/icons");
 const locale_1 = require("@snack-uikit/locale");
@@ -43,11 +43,11 @@ function CopyButton(_a) {
   const closeChecked = () => setIsCheckedOpen(false);
   const handleClick = event => {
     event.stopPropagation();
-    valueToCopy && (0, frontend_tools_copy_to_clipboard_1.copyToClipboard)(String(valueToCopy));
+    valueToCopy && (0, ft_copy_to_clipboard_1.copyToClipboard)(String(valueToCopy));
     openChecked();
     clearTimeout(timerId.current);
     timerId.current = setTimeout(closeChecked, 1000);
-    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    onClick === null || onClick === void 0 ? void 0 : onClick();
   };
   (0, react_1.useEffect)(() => () => {
     closeChecked();

package/dist/cjs/components/styles.module.css

@@ -13,9 +13,9 @@
 }
 
 .headline{
-  min-height:var(--size-markdown-code-editor-headline-min-height, 36px);
-  padding-left:var(--space-markdown-code-editor-headline-horizontal-padding, 12px);
-  padding-right:var(--space-markdown-code-editor-headline-horizontal-padding, 12px);
+  min-height:var(--size-code-editor-headline-min-height, 36px);
+  padding-left:var(--space-code-editor-headline-horizontal-padding, 12px);
+  padding-right:var(--space-code-editor-headline-horizontal-padding, 12px);
   display:flex;
   align-items:center;
   justify-content:space-between;

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

@@ -3,4 +3,4 @@ import { JsonSchema } from './types';
 export declare function rgb2hsl(HTMLcolor: string): number[];
 export declare function isDark(color: string): boolean;
 export declare const getJsonSchema: (jsonSchema?: JsonSchema) => SchemasSettings | undefined;
-export declare function toTitleCase(value: string): string;
+export declare function uppercaseFirstLetter(value: string): string;

package/dist/cjs/components/utils.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getJsonSchema = void 0;
 exports.rgb2hsl = rgb2hsl;
 exports.isDark = isDark;
-exports.toTitleCase = toTitleCase;
+exports.uppercaseFirstLetter = uppercaseFirstLetter;
 const chroma_js_1 = __importDefault(require("chroma-js"));
 const constants_1 = require("./constants");
 function rgb2hsl(HTMLcolor) {
@@ -52,11 +52,10 @@ const getJsonSchema = jsonSchema => jsonSchema && Object.assign(Object.assign({}
   fileMatch: [jsonSchema.fileMatch]
 });
 exports.getJsonSchema = getJsonSchema;
-function toTitleCase(value) {
-  if (value.trim().length === 0) {
+function uppercaseFirstLetter(value) {
+  const trimmedValue = value.trim();
+  if (trimmedValue.length === 0) {
     return value;
   }
-  const valueLetters = value.trim().split('');
-  valueLetters[0] = valueLetters[0].toUpperCase();
-  return valueLetters.join('');
+  return trimmedValue[0].toUpperCase() + trimmedValue.slice(1);
 }

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

@@ -10,12 +10,12 @@ export type CodeEditorProps = WithSupportProps<{
      */
     hasBackground?: boolean;
     /**
-     * Включение/отключение шапки с кнопкой копирования
+     * Включение/отключение шапки
      */
-    hasCopyHeader?: boolean;
+    hasHeader?: boolean;
     /**
      * Клик по кнопке копирования
      */
     onCopyClick?(): void;
 }> & (EditorBaseProps | EditorWithJsonSchemaProps);
-export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, onCopyClick, hasCopyHeader, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, onCopyClick, hasHeader, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CodeEditor.js

@@ -20,9 +20,9 @@ import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from
 import { CopyButton } from './CopyButton';
 import { useApplyJsonSchema, useCalculatedThemeValues } from './hooks';
 import styles from './styles.module.css';
-import { isDark, toTitleCase } from './utils';
+import { isDark, uppercaseFirstLetter } from './utils';
 export function CodeEditor(_a) {
-    var { themeName, className, theme, options, loading, hasBackground = true, onMount, language, onCopyClick, hasCopyHeader } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language", "onCopyClick", "hasCopyHeader"]);
+    var { themeName, className, theme, options, loading, hasBackground = true, onMount, language, onCopyClick, hasHeader } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language", "onCopyClick", "hasHeader"]);
     const monaco = useMonaco();
     const [wrapperElement, setWrapperElement] = useState(null);
     const { jsonSchemaProps, jsonSchemaOptions } = useApplyJsonSchema(language, 'jsonSchema' in props ? props.jsonSchema : undefined);
@@ -89,5 +89,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, jsonSchemaOptions]);
-    return (_jsxs("div", Object.assign({ className: className }, extractSupportProps(props), { ref: setWrapperElement, children: [hasCopyHeader && (_jsxs("div", { className: styles.headline, children: [language && _jsx(Typography.SansLabelS, { children: toTitleCase(language) }), _jsx(CopyButton, { valueToCopy: props.value || '', size: 's', onClick: onCopyClick })] })), _jsx(Editor, Object.assign({}, jsonSchemaProps, 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, onMount: onEditorMount, language: language }))] })));
+    return (_jsxs("div", Object.assign({ className: className }, extractSupportProps(props), { ref: setWrapperElement, children: [hasHeader && (_jsxs("div", { className: styles.headline, children: [language && _jsx(Typography.SansLabelS, { children: uppercaseFirstLetter(language) }), _jsx(CopyButton, { valueToCopy: props.value || '', size: 's', onClick: onCopyClick })] })), _jsx(Editor, Object.assign({}, jsonSchemaProps, 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, onMount: onEditorMount, language: language }))] })));
 }

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

@@ -4,6 +4,6 @@ export type CopyButtonProps = WithSupportProps<{
     valueToCopy: string | number;
     size?: ButtonFunctionProps['size'];
     className?: string;
-    onClick?: ButtonFunctionProps['onClick'];
+    onClick?(): void;
 }>;
 export declare function CopyButton({ valueToCopy, size, className, onClick, ...rest }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CopyButton/CopyButton.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { copyToClipboard } from '@cloud-ru/frontend-tools-copy-to-clipboard';
+import { copyToClipboard } from '@cloud-ru/ft-copy-to-clipboard';
 import { ButtonFunction } from '@snack-uikit/button';
 import { CheckSVG, CopySVG } from '@snack-uikit/icons';
 import { useLocale } from '@snack-uikit/locale';
@@ -31,7 +31,7 @@ export function CopyButton(_a) {
         openChecked();
         clearTimeout(timerId.current);
         timerId.current = setTimeout(closeChecked, 1000);
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        onClick === null || onClick === void 0 ? void 0 : onClick();
     };
     useEffect(() => () => {
         closeChecked();

package/dist/esm/components/styles.module.css

@@ -13,9 +13,9 @@
 }
 
 .headline{
-  min-height:var(--size-markdown-code-editor-headline-min-height, 36px);
-  padding-left:var(--space-markdown-code-editor-headline-horizontal-padding, 12px);
-  padding-right:var(--space-markdown-code-editor-headline-horizontal-padding, 12px);
+  min-height:var(--size-code-editor-headline-min-height, 36px);
+  padding-left:var(--space-code-editor-headline-horizontal-padding, 12px);
+  padding-right:var(--space-code-editor-headline-horizontal-padding, 12px);
   display:flex;
   align-items:center;
   justify-content:space-between;

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

@@ -3,4 +3,4 @@ import { JsonSchema } from './types';
 export declare function rgb2hsl(HTMLcolor: string): number[];
 export declare function isDark(color: string): boolean;
 export declare const getJsonSchema: (jsonSchema?: JsonSchema) => SchemasSettings | undefined;
-export declare function toTitleCase(value: string): string;
+export declare function uppercaseFirstLetter(value: string): string;

package/dist/esm/components/utils.js

@@ -38,11 +38,10 @@ export function isDark(color) {
     return (h < 0.55 && l >= 0.5) || (h >= 0.55 && l >= 0.75);
 }
 export const getJsonSchema = (jsonSchema) => jsonSchema && Object.assign(Object.assign({}, jsonSchema), { uri: (jsonSchema === null || jsonSchema === void 0 ? void 0 : jsonSchema.uri) || DEFAULT_SCHEMA_URI, fileMatch: [jsonSchema.fileMatch] });
-export function toTitleCase(value) {
-    if (value.trim().length === 0) {
+export function uppercaseFirstLetter(value) {
+    const trimmedValue = value.trim();
+    if (trimmedValue.length === 0) {
         return value;
     }
-    const valueLetters = value.trim().split('');
-    valueLetters[0] = valueLetters[0].toUpperCase();
-    return valueLetters.join('');
+    return trimmedValue[0].toUpperCase() + trimmedValue.slice(1);
 }

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.5-preview-6c5a9bc3.0",
+  "version": "0.7.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,12 +36,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/frontend-tools-copy-to-clipboard": "0.0.1-preview-8188049.0",
+    "@cloud-ru/ft-copy-to-clipboard": "0.1.0",
     "@monaco-editor/react": "4.6.0",
     "@snack-uikit/button": "0.19.11",
     "@snack-uikit/icons": "0.26.3",
     "@snack-uikit/loaders": "0.9.5",
-    "@snack-uikit/locale": "0.14.1-preview-6c5a9bc3.0",
     "@snack-uikit/tooltip": "0.17.2",
     "@snack-uikit/typography": "0.8.7",
     "@snack-uikit/utils": "3.8.2",
@@ -49,8 +48,11 @@
     "classnames": "2.5.1",
     "monaco-yaml": "5.2.3"
   },
+  "peerDependencies": {
+    "@snack-uikit/locale": "*"
+  },
   "devDependencies": {
     "@types/chroma-js": "2.4.4"
   },
-  "gitHead": "f7b20fc5008846a7aaddf93c2cbeb6197978e97f"
+  "gitHead": "bfec8dd0ba3b8e294440db45599d9770216e602f"
 }

package/src/components/CodeEditor.tsx

@@ -11,7 +11,7 @@ import { CopyButton } from './CopyButton';
 import { useApplyJsonSchema, useCalculatedThemeValues } from './hooks';
 import styles from './styles.module.scss';
 import { EditorBaseProps, EditorWithJsonSchemaProps } from './types';
-import { isDark, toTitleCase } from './utils';
+import { isDark, uppercaseFirstLetter } from './utils';
 
 export type CodeEditorProps = WithSupportProps<{
   /**
@@ -23,9 +23,9 @@ export type CodeEditorProps = WithSupportProps<{
    */
   hasBackground?: boolean;
   /**
-   * Включение/отключение шапки с кнопкой копирования
+   * Включение/отключение шапки
    */
-  hasCopyHeader?: boolean;
+  hasHeader?: boolean;
   /**
    * Клик по кнопке копирования
    */
@@ -43,7 +43,7 @@ export function CodeEditor({
   onMount,
   language,
   onCopyClick,
-  hasCopyHeader,
+  hasHeader,
   ...props
 }: CodeEditorProps) {
   const monaco = useMonaco();
@@ -144,9 +144,9 @@ export function CodeEditor({
 
   return (
     <div className={className} {...extractSupportProps(props)} ref={setWrapperElement}>
-      {hasCopyHeader && (
+      {hasHeader && (
         <div className={styles.headline}>
-          {language && <Typography.SansLabelS>{toTitleCase(language)}</Typography.SansLabelS>}
+          {language && <Typography.SansLabelS>{uppercaseFirstLetter(language)}</Typography.SansLabelS>}
           <CopyButton valueToCopy={props.value || ''} size={'s'} onClick={onCopyClick} />
         </div>
       )}

package/src/components/CopyButton/CopyButton.tsx

@@ -1,6 +1,6 @@
 import { MouseEventHandler, useEffect, useRef, useState } from 'react';
 
-import { copyToClipboard } from '@cloud-ru/frontend-tools-copy-to-clipboard';
+import { copyToClipboard } from '@cloud-ru/ft-copy-to-clipboard';
 import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
 import { CheckSVG, CopySVG } from '@snack-uikit/icons';
 import { useLocale } from '@snack-uikit/locale';
@@ -13,7 +13,7 @@ export type CopyButtonProps = WithSupportProps<{
   valueToCopy: string | number;
   size?: ButtonFunctionProps['size'];
   className?: string;
-  onClick?: ButtonFunctionProps['onClick'];
+  onClick?(): void;
 }>;
 
 export function CopyButton({ valueToCopy, size = 's', className, onClick, ...rest }: CopyButtonProps) {
@@ -29,7 +29,7 @@ export function CopyButton({ valueToCopy, size = 's', className, onClick, ...res
     openChecked();
     clearTimeout(timerId.current);
     timerId.current = setTimeout(closeChecked, 1000);
-    onClick?.(event);
+    onClick?.();
   };
 
   useEffect(

package/src/components/styles.module.scss

@@ -1,5 +1,5 @@
 @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables' as var;
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown' as stm;
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-codeEditor' as stc;
 
 
 
@@ -22,12 +22,12 @@
 }
 
 .headline {
-  @include stm.composite-var(stm.$markdown-syntax-code-editor-headline);
+  @include stc.composite-var(stc.$code-editor-headline);
 
   display: flex;
   align-items: center;
   justify-content: space-between;
 
-  background-color: stm.$sys-neutral-background;
-  border-color: stm.$sys-neutral-decor-default;
+  background-color: stc.$sys-neutral-background;
+  border-color: stc.$sys-neutral-decor-default;
 }

package/src/components/utils.ts

@@ -57,12 +57,12 @@ export function isDark(color: string) {
 export const getJsonSchema = (jsonSchema?: JsonSchema): SchemasSettings | undefined =>
   jsonSchema && { ...jsonSchema, uri: jsonSchema?.uri || DEFAULT_SCHEMA_URI, fileMatch: [jsonSchema.fileMatch] };
 
-export function toTitleCase(value: string) {
-  if (value.trim().length === 0) {
+export function uppercaseFirstLetter(value: string) {
+  const trimmedValue = value.trim();
+
+  if (trimmedValue.length === 0) {
     return value;
   }
 
-  const valueLetters = value.trim().split('');
-  valueLetters[0] = valueLetters[0].toUpperCase();
-  return valueLetters.join('');
+  return trimmedValue[0].toUpperCase() + trimmedValue.slice(1);
 }