@snack-uikit/code-editor 0.6.5-preview-580e8472.0 → 0.6.5-preview-6c5a9bc3.0

package/README.md

@@ -15,7 +15,8 @@
 | jsonSchema* | `JsonSchema` | - | Схема для валидации |
 | themeName | `string` | - | Название текущей темы. Значение не важно, важно что смена значения запускает пересчет стилей. |
 | hasBackground | `boolean` | true | Включение/отключение псевдобекграунда |
-| onCopyClick | `MouseEventHandler<HTMLElement>` | - | Клик по кнопке копирования |
+| hasCopyHeader | `boolean` | - | Включение/отключение шапки с кнопкой копирования |
+| onCopyClick | `() => void` | - | Клик по кнопке копирования |
 | 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/cjs/components/CodeEditor.d.ts

@@ -1,4 +1,3 @@
-import { ButtonFunctionProps } from '@snack-uikit/button';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { EditorBaseProps, EditorWithJsonSchemaProps } from './types';
 export type CodeEditorProps = WithSupportProps<{
@@ -10,9 +9,13 @@ export type CodeEditorProps = WithSupportProps<{
      * Включение/отключение псевдобекграунда
      */
     hasBackground?: boolean;
+    /**
+     * Включение/отключение шапки с кнопкой копирования
+     */
+    hasCopyHeader?: boolean;
     /**
      * Клик по кнопке копирования
      */
-    onCopyClick?: ButtonFunctionProps['onClick'];
+    onCopyClick?(): void;
 }> & (EditorBaseProps | EditorWithJsonSchemaProps);
-export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, onCopyClick, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, onCopyClick, hasCopyHeader, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/CodeEditor.js

@@ -22,7 +22,6 @@ 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 locale_1 = require("@snack-uikit/locale");
 const typography_1 = require("@snack-uikit/typography");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("./constants");
@@ -40,14 +39,12 @@ function CodeEditor(_a) {
       hasBackground = true,
       onMount,
       language,
-      onCopyClick
+      onCopyClick,
+      hasCopyHeader
     } = _a,
-    props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language", "onCopyClick"]);
+    props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language", "onCopyClick", "hasCopyHeader"]);
   const monaco = (0, react_1.useMonaco)();
   const [wrapperElement, setWrapperElement] = (0, react_2.useState)(null);
-  const {
-    t
-  } = (0, locale_1.useLocale)();
   const {
     jsonSchemaProps,
     jsonSchemaOptions
@@ -122,10 +119,10 @@ function CodeEditor(_a) {
     className: className
   }, (0, utils_1.extractSupportProps)(props), {
     ref: setWrapperElement,
-    children: [(0, jsx_runtime_1.jsxs)("div", {
+    children: [hasCopyHeader && (0, jsx_runtime_1.jsxs)("div", {
       className: styles_module_scss_1.default.headline,
-      children: [(0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelS, {
-        children: t('Markdown.codeEditorTitle')
+      children: [language && (0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelS, {
+        children: (0, utils_2.toTitleCase)(language)
       }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, {
         valueToCopy: props.value || '',
         size: 's',

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

@@ -54,7 +54,7 @@ function CopyButton(_a) {
     clearTimeout(timerId.current);
   }, []);
   return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, {
-    tip: t('Markdown.copyButtonToolTip'),
+    tip: t('CodeEditor.copyButtonToolTip'),
     children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, Object.assign({}, (0, utils_1.extractSupportProps)(rest), {
       onClick: handleClick,
       className: className,

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

@@ -3,3 +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;

package/dist/cjs/components/utils.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getJsonSchema = void 0;
 exports.rgb2hsl = rgb2hsl;
 exports.isDark = isDark;
+exports.toTitleCase = toTitleCase;
 const chroma_js_1 = __importDefault(require("chroma-js"));
 const constants_1 = require("./constants");
 function rgb2hsl(HTMLcolor) {
@@ -50,4 +51,12 @@ const getJsonSchema = jsonSchema => jsonSchema && Object.assign(Object.assign({}
   uri: (jsonSchema === null || jsonSchema === void 0 ? void 0 : jsonSchema.uri) || constants_1.DEFAULT_SCHEMA_URI,
   fileMatch: [jsonSchema.fileMatch]
 });
-exports.getJsonSchema = getJsonSchema;
+exports.getJsonSchema = getJsonSchema;
+function toTitleCase(value) {
+  if (value.trim().length === 0) {
+    return value;
+  }
+  const valueLetters = value.trim().split('');
+  valueLetters[0] = valueLetters[0].toUpperCase();
+  return valueLetters.join('');
+}

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

@@ -1,4 +1,3 @@
-import { ButtonFunctionProps } from '@snack-uikit/button';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { EditorBaseProps, EditorWithJsonSchemaProps } from './types';
 export type CodeEditorProps = WithSupportProps<{
@@ -10,9 +9,13 @@ export type CodeEditorProps = WithSupportProps<{
      * Включение/отключение псевдобекграунда
      */
     hasBackground?: boolean;
+    /**
+     * Включение/отключение шапки с кнопкой копирования
+     */
+    hasCopyHeader?: boolean;
     /**
      * Клик по кнопке копирования
      */
-    onCopyClick?: ButtonFunctionProps['onClick'];
+    onCopyClick?(): void;
 }> & (EditorBaseProps | EditorWithJsonSchemaProps);
-export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, onCopyClick, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeEditor({ themeName, className, theme, options, loading, hasBackground, onMount, language, onCopyClick, hasCopyHeader, ...props }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/CodeEditor.js

@@ -14,19 +14,17 @@ import { Editor, useMonaco } from '@monaco-editor/react';
 import cn from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 import { Spinner } from '@snack-uikit/loaders';
-import { useLocale } from '@snack-uikit/locale';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, isBrowser } from '@snack-uikit/utils';
 import { CODE_EDITOR_OPTIONS, DEFAULT_THEME_OPTIONS, DEFAULT_THEME_VALUES } from './constants';
 import { CopyButton } from './CopyButton';
 import { useApplyJsonSchema, useCalculatedThemeValues } from './hooks';
 import styles from './styles.module.css';
-import { isDark } from './utils';
+import { isDark, toTitleCase } from './utils';
 export function CodeEditor(_a) {
-    var { themeName, className, theme, options, loading, hasBackground = true, onMount, language, onCopyClick } = _a, props = __rest(_a, ["themeName", "className", "theme", "options", "loading", "hasBackground", "onMount", "language", "onCopyClick"]);
+    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"]);
     const monaco = useMonaco();
     const [wrapperElement, setWrapperElement] = useState(null);
-    const { t } = useLocale();
     const { jsonSchemaProps, jsonSchemaOptions } = useApplyJsonSchema(language, 'jsonSchema' in props ? props.jsonSchema : undefined);
     const onEditorMount = useCallback((editor, monaco) => {
         var _a;
@@ -91,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: [_jsxs("div", { className: styles.headline, children: [_jsx(Typography.SansLabelS, { children: t('Markdown.codeEditorTitle') }), _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: [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 }))] })));
 }

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

@@ -37,5 +37,5 @@ export function CopyButton(_a) {
         closeChecked();
         clearTimeout(timerId.current);
     }, []);
-    return (_jsx(Tooltip, { tip: t('Markdown.copyButtonToolTip'), children: _jsx(ButtonFunction, Object.assign({}, extractSupportProps(rest), { onClick: handleClick, className: className, "data-test-id": 'button-copy-value', type: 'button', icon: isChecked ? _jsx(CheckSVG, { className: styles.checkIcon }) : _jsx(CopySVG, {}), size: size })) }));
+    return (_jsx(Tooltip, { tip: t('CodeEditor.copyButtonToolTip'), children: _jsx(ButtonFunction, Object.assign({}, extractSupportProps(rest), { onClick: handleClick, className: className, "data-test-id": 'button-copy-value', type: 'button', icon: isChecked ? _jsx(CheckSVG, { className: styles.checkIcon }) : _jsx(CopySVG, {}), size: size })) }));
 }

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

@@ -3,3 +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;

package/dist/esm/components/utils.js

@@ -38,3 +38,11 @@ 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) {
+        return value;
+    }
+    const valueLetters = value.trim().split('');
+    valueLetters[0] = valueLetters[0].toUpperCase();
+    return valueLetters.join('');
+}

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.6.5-preview-580e8472.0",
+  "version": "0.6.5-preview-6c5a9bc3.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -41,7 +41,7 @@
     "@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-580e8472.0",
+    "@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",
@@ -52,5 +52,5 @@
   "devDependencies": {
     "@types/chroma-js": "2.4.4"
   },
-  "gitHead": "83474111057d185ee911d5bb4489288c89f1490f"
+  "gitHead": "f7b20fc5008846a7aaddf93c2cbeb6197978e97f"
 }

package/src/components/CodeEditor.tsx

@@ -2,9 +2,7 @@ import { Editor, OnMount, useMonaco } from '@monaco-editor/react';
 import cn from 'classnames';
 import { useCallback, useMemo, useState } from 'react';
 
-import { ButtonFunctionProps } from '@snack-uikit/button';
 import { Spinner } from '@snack-uikit/loaders';
-import { useLocale } from '@snack-uikit/locale';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps, isBrowser, WithSupportProps } from '@snack-uikit/utils';
 
@@ -13,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 } from './utils';
+import { isDark, toTitleCase } from './utils';
 
 export type CodeEditorProps = WithSupportProps<{
   /**
@@ -24,10 +22,14 @@ export type CodeEditorProps = WithSupportProps<{
    * Включение/отключение псевдобекграунда
    */
   hasBackground?: boolean;
+  /**
+   * Включение/отключение шапки с кнопкой копирования
+   */
+  hasCopyHeader?: boolean;
   /**
    * Клик по кнопке копирования
    */
-  onCopyClick?: ButtonFunctionProps['onClick'];
+  onCopyClick?(): void;
 }> &
   (EditorBaseProps | EditorWithJsonSchemaProps);
 
@@ -41,13 +43,12 @@ export function CodeEditor({
   onMount,
   language,
   onCopyClick,
+  hasCopyHeader,
   ...props
 }: CodeEditorProps) {
   const monaco = useMonaco();
   const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
 
-  const { t } = useLocale();
-
   const { jsonSchemaProps, jsonSchemaOptions } = useApplyJsonSchema(
     language,
     'jsonSchema' in props ? props.jsonSchema : undefined,
@@ -143,10 +144,12 @@ export function CodeEditor({
 
   return (
     <div className={className} {...extractSupportProps(props)} ref={setWrapperElement}>
-      <div className={styles.headline}>
-        <Typography.SansLabelS>{t('Markdown.codeEditorTitle')}</Typography.SansLabelS>
-        <CopyButton valueToCopy={props.value || ''} size={'s'} onClick={onCopyClick} />
-      </div>
+      {hasCopyHeader && (
+        <div className={styles.headline}>
+          {language && <Typography.SansLabelS>{toTitleCase(language)}</Typography.SansLabelS>}
+          <CopyButton valueToCopy={props.value || ''} size={'s'} onClick={onCopyClick} />
+        </div>
+      )}
       <Editor
         {...jsonSchemaProps}
         {...props}

package/src/components/CopyButton/CopyButton.tsx

@@ -41,7 +41,7 @@ export function CopyButton({ valueToCopy, size = 's', className, onClick, ...res
   );
 
   return (
-    <Tooltip tip={t('Markdown.copyButtonToolTip')}>
+    <Tooltip tip={t('CodeEditor.copyButtonToolTip')}>
       <ButtonFunction
         {...extractSupportProps(rest)}
         onClick={handleClick}

package/src/components/CopyButton/styles.module.scss

@@ -1,6 +1,6 @@
-@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables' as ste;
 
 
 .checkIcon {
-  fill: styles-theme-variables.$sys-green-accent-default
+  fill: ste.$sys-green-accent-default
 }

package/src/components/styles.module.scss

@@ -1,5 +1,6 @@
-@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-markdown';
+@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;
+
 
 
 .editor {
@@ -15,19 +16,18 @@
 
     width: 100%;
 
-    opacity: styles-theme-variables.$opacity-a004;
-    background-color: styles-theme-variables.$sys-neutral-accent-default;
+    opacity: var.$opacity-a004;
+    background-color: var.$sys-neutral-accent-default;
   }
 }
 
 .headline {
-  @include styles-tokens-markdown.composite-var(styles-tokens-markdown.$markdown-syntax-code-editor-headline);
+  @include stm.composite-var(stm.$markdown-syntax-code-editor-headline);
 
   display: flex;
   align-items: center;
   justify-content: space-between;
 
-  background-color: styles-tokens-markdown.$sys-neutral-background;
-  border-color: styles-tokens-markdown.$sys-neutral-decor-default;
-
+  background-color: stm.$sys-neutral-background;
+  border-color: stm.$sys-neutral-decor-default;
 }

package/src/components/utils.ts

@@ -56,3 +56,13 @@ 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) {
+    return value;
+  }
+
+  const valueLetters = value.trim().split('');
+  valueLetters[0] = valueLetters[0].toUpperCase();
+  return valueLetters.join('');
+}