refactor: create separate YDBSyntaxHighlighter component

Author: artemmufazalov

src/components/ConnectToDB/ConnectToDBDialog.tsx

@@ -5,8 +5,8 @@ import {Dialog, Tabs} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
+import {YDBSyntaxHighlighterLazy} from '../SyntaxHighlighter/lazy';
 
-import {ConnectToDBSyntaxHighlighterLazy} from './ConnectToDBSyntaxHighlighter/lazy';
 import {getDocsLink} from './getDocsLink';
 import i18n from './i18n';
 import {getSnippetCode} from './snippets';
@@ -52,7 +52,12 @@ function ConnectToDBDialog({open, onClose, database, endpoint}: ConnectToDBDialo
                     className={b('dialog-tabs')}
                 />
                 <div className={b('snippet-container')}>
-                    <ConnectToDBSyntaxHighlighterLazy language={activeTab} text={snippet} />
+                    <YDBSyntaxHighlighterLazy
+                        language={activeTab}
+                        text={snippet}
+                        transparentBackground={false}
+                        withCopy
+                    />
                 </div>
                 {docsLink ? (
                     <LinkWithIcon

src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/ConnectToDBSyntaxHighlighter.tsx

@@ -5,7 +5,6 @@
   "documentation": "Documentation",
 
   "close": "Close",
-  "copy": "Copy",
 
   "docs_bash": "https://ydb.tech/docs/en/concepts/connect",
   "docs_cpp": "https://ydb.tech/docs/en/dev/example-app/example-cpp",

src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/lazy.ts

@@ -1,6 +1,6 @@
-@use '../../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
-.ydb-connect-to-db-syntax-highlighter {
+.ydb-syntax-highlighter {
     &__wrapper {
         position: relative;
         z-index: 0;

src/components/ConnectToDB/i18n/en.json

@@ -0,0 +1,79 @@
+import {ClipboardButton} from '@gravity-ui/uikit';
+import {PrismLight as ReactSyntaxHighlighter} from 'react-syntax-highlighter';
+import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
+import cpp from 'react-syntax-highlighter/dist/esm/languages/prism/cpp';
+import csharp from 'react-syntax-highlighter/dist/esm/languages/prism/csharp';
+import go from 'react-syntax-highlighter/dist/esm/languages/prism/go';
+import java from 'react-syntax-highlighter/dist/esm/languages/prism/java';
+import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
+import php from 'react-syntax-highlighter/dist/esm/languages/prism/php';
+import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
+
+import i18n from './i18n';
+import {b} from './shared';
+import {useSyntaxHighlighterStyle} from './themes';
+import type {Language} from './types';
+import {yql} from './yql';
+
+import './YDBSyntaxHighlighter.scss';
+
+ReactSyntaxHighlighter.registerLanguage('bash', bash);
+ReactSyntaxHighlighter.registerLanguage('cpp', cpp);
+ReactSyntaxHighlighter.registerLanguage('csharp', csharp);
+ReactSyntaxHighlighter.registerLanguage('go', go);
+ReactSyntaxHighlighter.registerLanguage('java', java);
+ReactSyntaxHighlighter.registerLanguage('javascript', javascript);
+ReactSyntaxHighlighter.registerLanguage('php', php);
+ReactSyntaxHighlighter.registerLanguage('python', python);
+ReactSyntaxHighlighter.registerLanguage('yql', yql);
+
+type YDBSyntaxHighlighterProps = {
+    text: string;
+    language: Language;
+    className?: string;
+    transparentBackground?: boolean;
+    withCopy?: boolean;
+};
+
+export function YDBSyntaxHighlighter({
+    text,
+    language,
+    className,
+    transparentBackground,
+    withCopy,
+}: YDBSyntaxHighlighterProps) {
+    const style = useSyntaxHighlighterStyle(transparentBackground);
+
+    const renderCopyButton = () => {
+        if (withCopy) {
+            return (
+                <div className={b('sticky-container')}>
+                    <ClipboardButton
+                        view="flat-secondary"
+                        size="s"
+                        className={b('copy')}
+                        text={text}
+                    >
+                        {i18n('copy')}
+                    </ClipboardButton>
+                </div>
+            );
+        }
+
+        return null;
+    };
+
+    return (
+        <div className={b('wrapper', className)}>
+            {renderCopyButton()}
+
+            <ReactSyntaxHighlighter
+                language={language}
+                style={style}
+                customStyle={{height: '100%'}}
+            >
+                {text}
+            </ReactSyntaxHighlighter>
+        </div>
+    );
+}

src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/ConnectToDBSyntaxHighlighter.scss renamed to src/components/SyntaxHighlighter/YDBSyntaxHighlighter.scss

@@ -0,0 +1,25 @@
+import {PrismLight as SyntaxHighlighter} from 'react-syntax-highlighter';
+
+import {b} from './shared';
+import {useSyntaxHighlighterStyle} from './themes';
+import {yql} from './yql';
+
+SyntaxHighlighter.registerLanguage('yql', yql);
+
+interface YqlHighlighterProps {
+    children: string;
+    className?: string;
+}
+
+/** SyntaxHighlighter with just YQL for sync load */
+export function YqlHighlighter({children, className}: YqlHighlighterProps) {
+    const style = useSyntaxHighlighterStyle(true);
+
+    return (
+        <div className={b(null, className)}>
+            <SyntaxHighlighter language="yql" style={style}>
+                {children}
+            </SyntaxHighlighter>
+        </div>
+    );
+}

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx

@@ -0,0 +1,3 @@
+{
+  "copy": "Copy"
+}

src/components/SyntaxHighlighter/YqlHighlighter.tsx

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-syntax-highlighter';
+
+export default registerKeysets(COMPONENT, {en});

src/components/SyntaxHighlighter/i18n/en.json

@@ -0,0 +1,6 @@
+import {lazyComponent} from '../../utils/lazyComponent';
+
+export const YDBSyntaxHighlighterLazy = lazyComponent(
+    () => import('./YDBSyntaxHighlighter'),
+    'YDBSyntaxHighlighter',
+);