feat: add configuration for monaco (#314)

Author: bocembocem

docs/spec.md

@@ -145,10 +145,15 @@ type Spec = ArraySpec | BooleanSpec | NumberSpec | ObjectSpec | StringSpec;
 
 #### MonacoParams
 
-| Property | Type     | Required | Description                  |
-| :------- | :------- | :------: | :--------------------------- |
-| language | `string` |   yes    | Syntax highlighting language |
-| fontSize | `string` |          | Font size                    |
+| Property               | Type     | Required | Description                  |
+| :--------------------- | :------- | :------: | :--------------------------- |
+| language               | `string` |   yes    | Syntax highlighting language |
+| fontSize               | `string` |          | Font size                    |
+| headerIconSize         | `number` |          | Size of the header icon      |
+| headerIconIndent       | `number` |          | Indent of the header icon    |
+| headerTitleVariant     | `string` |          | Variant of the header title  |
+| headerDialogButtonSize | `string` |          | Size of the dialog button    |
+| headerDialogIconSize   | `number` |          | Size of the dialog icon      |
 
 #### OneOfParams
 

docs/styles.md

@@ -393,11 +393,14 @@ Variables for the Checkbox Group View component:
 
 Variables for the Monaco Input View component:
 
-| Variable                                 | Default Value | Description                    |
-| :--------------------------------------- | :-----------: | :----------------------------- |
-| `--df-monaco-base-view-width`            |    `550px`    | Width of the Monaco input view |
-| `--df-monaco-view-dialog-footer-padding` |    `16px`     | Padding of the dialog footer   |
-| `--df-monaco-view-dialog-header-height`  |    `48px`     | Height of the dialog header    |
+| Variable                                 | Default Value | Description                      |
+| :--------------------------------------- | :-----------: | :------------------------------- |
+| `--df-monaco-base-view-width`            |    `550px`    | Width of the Monaco input view   |
+| `--df-monaco-base-view-height`           |    `354px`    | Height of the Monaco base view   |
+| `--df-monaco-view-dialog-footer-padding` |    `16px`     | Padding of the dialog footer     |
+| `--df-monaco-view-dialog-header-height`  |    `48px`     | Height of the dialog header      |
+| `--df-monaco-view-dialog-width`          |    `966px`    | Width of the Monaco view dialog  |
+| `--df-monaco-view-dialog-height`         |    `804px`    | Height of the Monaco view dialog |
 
 ---
 

src/lib/core/types/specs.ts

@@ -1,4 +1,4 @@
-import type {AlertProps, LabelProps} from '@gravity-ui/uikit';
+import type {AlertProps, ButtonSize, LabelProps, TextProps} from '@gravity-ui/uikit';
 import type {ColorTextBaseProps} from '@gravity-ui/uikit/build/esm/components/Text/colorText/colorText';
 
 import type {ReadAsMethod, SpecTypes} from '../constants';
@@ -164,6 +164,11 @@ export interface StringSpec<
         monacoParams?: {
             language?: string;
             fontSize?: number;
+            headerIconSize?: number;
+            headerIconIndent?: number;
+            headerTitleVariant?: TextProps['variant'];
+            headerDialogButtonSize?: ButtonSize;
+            headerDialogIconSize?: number;
         };
         hideValues?: string[];
         placeholder?: string;

src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss

@@ -8,4 +8,9 @@
     align-items: center;
     background-color: var(--g-color-base-float-hover);
     box-sizing: border-box;
+
+    &__title {
+        display: flex;
+        align-items: center;
+    }
 }

src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {File} from '@gravity-ui/icons';
-import {Icon, Text} from '@gravity-ui/uikit';
+import {Icon, Text, type TextProps} from '@gravity-ui/uikit';
 
 import {block} from '../../../utils';
 
@@ -10,16 +10,27 @@ import './MonacoHeader.scss';
 const b = block('monaco-header');
 
 interface MonacoHeaderProps {
-    language?: string;
-    editButton?: React.ReactNode;
+    language: string;
+    dialogButton?: React.ReactNode;
+    headerIconSize: number;
+    headerIconIndent: number;
+    headerTitleVariant: TextProps['variant'];
 }
 
-export const MonacoHeader: React.FC<MonacoHeaderProps> = ({language, editButton}) => (
+export const MonacoHeader: React.FC<MonacoHeaderProps> = ({
+    language,
+    dialogButton,
+    headerIconSize,
+    headerIconIndent,
+    headerTitleVariant,
+}) => (
     <div className={b()}>
-        <div>
-            <Icon data={File} size={18} />
-            <Text variant="body-3">{language}</Text>
+        <div className={b('title')}>
+            <div style={{marginRight: `${headerIconIndent}px`}}>
+                <Icon data={File} size={headerIconSize} />
+            </div>
+            <Text variant={headerTitleVariant}>{language}</Text>
         </div>
-        {editButton ?? null}
+        {dialogButton ?? null}
     </div>
 );

src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.scss

@@ -5,10 +5,11 @@
     height: var(--df-monaco-input-height, 354px);
 
     &__container {
-        height: 100%;
+        height: calc(100% - 2px);
         display: flex;
         flex-direction: column;
         border: 1px solid var(--g-color-line-generic);
+        box-sizing: content-box;
     }
 
     &__editor {

src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.tsx

@@ -34,7 +34,15 @@ export const MonacoInputBase: React.FC<MonacoInputBaseProps> = ({
 
     const {monacoParams, disabled, layoutTitle} = spec.viewSpec;
 
-    const {language, fontSize} = monacoParams ?? {language: 'plaintext', fontSize: 11};
+    const {
+        language = 'plaintext',
+        fontSize = 11,
+        headerIconSize = 18,
+        headerIconIndent = 5,
+        headerTitleVariant = 'body-2',
+        headerDialogButtonSize = 'm',
+        headerDialogIconSize = 16,
+    } = monacoParams || {};
 
     const [monacoEditorDialog, setMonacoEditorDialog] = React.useState<boolean>(false);
 
@@ -45,14 +53,18 @@ export const MonacoInputBase: React.FC<MonacoInputBaseProps> = ({
     const dialogButton = React.useMemo(() => {
         if (!withoutDialog) {
             return (
-                <Button onClick={() => setMonacoEditorDialog(true)} qa={`${name}-open-dialog`}>
-                    <Icon data={ChevronsExpandUpRight} size={16} />
+                <Button
+                    size={headerDialogButtonSize}
+                    onClick={() => setMonacoEditorDialog(true)}
+                    qa={`${name}-open-dialog`}
+                >
+                    <Icon data={ChevronsExpandUpRight} size={headerDialogIconSize} />
                 </Button>
             );
         }
 
         return;
-    }, [withoutDialog, setMonacoEditorDialog, name]);
+    }, [withoutDialog, setMonacoEditorDialog, name, headerDialogButtonSize, headerDialogIconSize]);
 
     React.useEffect(() => onChange(monacoValue), [monacoValue]);
 
@@ -65,7 +77,13 @@ export const MonacoInputBase: React.FC<MonacoInputBaseProps> = ({
     return (
         <div className={b()}>
             <div className={b('container')} data-qa={name}>
-                <MonacoHeader language={language} editButton={dialogButton} />
+                <MonacoHeader
+                    language={language}
+                    dialogButton={dialogButton}
+                    headerIconSize={headerIconSize}
+                    headerIconIndent={headerIconIndent}
+                    headerTitleVariant={headerTitleVariant}
+                />
                 <div className={b('editor')}>
                     <MonacoEditor
                         language={language}
@@ -86,6 +104,9 @@ export const MonacoInputBase: React.FC<MonacoInputBaseProps> = ({
                 onChange={onChange}
                 onClose={handleMonacoEditorDialogClose}
                 MonacoComponent={MonacoComponent}
+                headerIconSize={headerIconSize}
+                headerIconIndent={headerIconIndent}
+                headerTitleVariant={headerTitleVariant}
             />
         </div>
     );

src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss

@@ -12,10 +12,11 @@
     }
 
     &__container {
-        height: 100%;
+        height: calc(100% - 2px);
         display: flex;
         flex-direction: column;
         border: 1px solid var(--g-color-line-generic);
+        box-sizing: content-box;
     }
 
     &__editor {

src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Dialog} from '@gravity-ui/uikit';
+import {Dialog, type TextProps} from '@gravity-ui/uikit';
 import type {MonacoEditorProps} from 'react-monaco-editor/lib/types';
 
 import {useMonaco} from '../../../../core/components/Form/hooks';
@@ -18,13 +18,16 @@ interface MonacoInputDialogProps {
     name: string;
     visible: boolean;
     value: string;
-    language?: string;
+    language: string;
     title: string | undefined;
     fontSize: number | undefined;
     onChange: (value: string) => void;
     onClose: () => void;
     changeMonacoValue: (value: string) => void;
     MonacoComponent?: React.ComponentType<MonacoEditorProps>;
+    headerIconSize: number;
+    headerIconIndent: number;
+    headerTitleVariant: TextProps['variant'];
 }
 
 export const MonacoInputDialog: React.FC<MonacoInputDialogProps> = ({
@@ -38,6 +41,9 @@ export const MonacoInputDialog: React.FC<MonacoInputDialogProps> = ({
     changeMonacoValue,
     fontSize,
     MonacoComponent,
+    headerIconSize,
+    headerIconIndent,
+    headerTitleVariant,
 }) => {
     const MonacoEditor = useMonaco() || MonacoComponent;
 
@@ -57,7 +63,12 @@ export const MonacoInputDialog: React.FC<MonacoInputDialogProps> = ({
             <Dialog.Header caption={title} className={b('dialog-header')} />
             <Dialog.Body>
                 <div className={b('container')} data-qa={`${name}-dialog`}>
-                    <MonacoHeader language={language} />
+                    <MonacoHeader
+                        language={language}
+                        headerIconSize={headerIconSize}
+                        headerIconIndent={headerIconIndent}
+                        headerTitleVariant={headerTitleVariant}
+                    />
                     <div className={b('editor')}>
                         <MonacoEditor
                             language={language}

src/lib/kit/components/Views/MonacoInputView/MonacoBaseView.scss

@@ -1,6 +1,18 @@
 @import '../../../styles/variables.scss';
 
 .#{$ns}monaco-base-view {
-    border: 1px solid var(--g-color-line-generic);
     width: var(--df-monaco-base-view-width, 550px);
+    height: var(--df-monaco-base-view-height, 354px);
+
+    &__container {
+        height: calc(100% - 2px);
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--g-color-line-generic);
+        box-sizing: content-box;
+    }
+
+    &__editor {
+        flex: 1;
+    }
 }