Skip to content

Commit f44fbc9

Browse files
artemmufazalovartemmufazalov
committed
refactor: create separate YDBSyntaxHighlighter component
1 parent 966ff4b commit f44fbc9

File tree

19 files changed

+271
-213
lines changed

19 files changed

+271
-213
lines changed

‎src/components/ConnectToDB/ConnectToDBDialog.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import {Dialog, Tabs} from '@gravity-ui/uikit';
55

66
import {cn} from '../../utils/cn';
77
import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
8+
import {YDBSyntaxHighlighterLazy} from '../SyntaxHighlighter/lazy';
89

9-
import {ConnectToDBSyntaxHighlighterLazy} from './ConnectToDBSyntaxHighlighter/lazy';
1010
import {getDocsLink} from './getDocsLink';
1111
import i18n from './i18n';
1212
import {getSnippetCode} from './snippets';
@@ -52,7 +52,12 @@ function ConnectToDBDialog({open, onClose, database, endpoint}: ConnectToDBDialo
5252
className={b('dialog-tabs')}
5353
/>
5454
<div className={b('snippet-container')}>
55-
<ConnectToDBSyntaxHighlighterLazy language={activeTab} text={snippet} />
55+
<YDBSyntaxHighlighterLazy
56+
language={activeTab}
57+
text={snippet}
58+
transparentBackground={false}
59+
withCopy
60+
/>
5661
</div>
5762
{docsLink ? (
5863
<LinkWithIcon

‎src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/ConnectToDBSyntaxHighlighter.tsx

-82
This file was deleted.

‎src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/lazy.ts

-6
This file was deleted.

‎src/components/ConnectToDB/i18n/en.json

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
"documentation": "Documentation",
66

77
"close": "Close",
8-
"copy": "Copy",
98

109
"docs_bash": "https://ydb.tech/docs/en/concepts/connect",
1110
"docs_cpp": "https://ydb.tech/docs/en/dev/example-app/example-cpp",

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
@use '../../../styles/mixins.scss';
1+
@use '../../styles/mixins.scss';
22

3-
.ydb-connect-to-db-syntax-highlighter {
3+
.ydb-syntax-highlighter {
44
&__wrapper {
55
position: relative;
66
z-index: 0;

‎src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import {ClipboardButton} from '@gravity-ui/uikit';
2+
import {PrismLight as ReactSyntaxHighlighter} from 'react-syntax-highlighter';
3+
import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
4+
import cpp from 'react-syntax-highlighter/dist/esm/languages/prism/cpp';
5+
import csharp from 'react-syntax-highlighter/dist/esm/languages/prism/csharp';
6+
import go from 'react-syntax-highlighter/dist/esm/languages/prism/go';
7+
import java from 'react-syntax-highlighter/dist/esm/languages/prism/java';
8+
import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
9+
import php from 'react-syntax-highlighter/dist/esm/languages/prism/php';
10+
import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
11+
12+
import i18n from './i18n';
13+
import {b} from './shared';
14+
import {useSyntaxHighlighterStyle} from './themes';
15+
import type {Language} from './types';
16+
import {yql} from './yql';
17+
18+
import './YDBSyntaxHighlighter.scss';
19+
20+
ReactSyntaxHighlighter.registerLanguage('bash', bash);
21+
ReactSyntaxHighlighter.registerLanguage('cpp', cpp);
22+
ReactSyntaxHighlighter.registerLanguage('csharp', csharp);
23+
ReactSyntaxHighlighter.registerLanguage('go', go);
24+
ReactSyntaxHighlighter.registerLanguage('java', java);
25+
ReactSyntaxHighlighter.registerLanguage('javascript', javascript);
26+
ReactSyntaxHighlighter.registerLanguage('php', php);
27+
ReactSyntaxHighlighter.registerLanguage('python', python);
28+
ReactSyntaxHighlighter.registerLanguage('yql', yql);
29+
30+
type YDBSyntaxHighlighterProps = {
31+
text: string;
32+
language: Language;
33+
className?: string;
34+
transparentBackground?: boolean;
35+
withCopy?: boolean;
36+
};
37+
38+
export function YDBSyntaxHighlighter({
39+
text,
40+
language,
41+
className,
42+
transparentBackground,
43+
withCopy,
44+
}: YDBSyntaxHighlighterProps) {
45+
const style = useSyntaxHighlighterStyle(transparentBackground);
46+
47+
const renderCopyButton = () => {
48+
if (withCopy) {
49+
return (
50+
<div className={b('sticky-container')}>
51+
<ClipboardButton
52+
view="flat-secondary"
53+
size="s"
54+
className={b('copy')}
55+
text={text}
56+
>
57+
{i18n('copy')}
58+
</ClipboardButton>
59+
</div>
60+
);
61+
}
62+
63+
return null;
64+
};
65+
66+
return (
67+
<div className={b('wrapper', className)}>
68+
{renderCopyButton()}
69+
70+
<ReactSyntaxHighlighter
71+
language={language}
72+
style={style}
73+
customStyle={{height: '100%'}}
74+
>
75+
{text}
76+
</ReactSyntaxHighlighter>
77+
</div>
78+
);
79+
}

‎src/components/SyntaxHighlighter/YqlHighlighter.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {PrismLight as SyntaxHighlighter} from 'react-syntax-highlighter';
2+
3+
import {b} from './shared';
4+
import {useSyntaxHighlighterStyle} from './themes';
5+
import {yql} from './yql';
6+
7+
SyntaxHighlighter.registerLanguage('yql', yql);
8+
9+
interface YqlHighlighterProps {
10+
children: string;
11+
className?: string;
12+
}
13+
14+
/** SyntaxHighlighter with just YQL for sync load */
15+
export function YqlHighlighter({children, className}: YqlHighlighterProps) {
16+
const style = useSyntaxHighlighterStyle(true);
17+
18+
return (
19+
<div className={b(null, className)}>
20+
<SyntaxHighlighter language="yql" style={style}>
21+
{children}
22+
</SyntaxHighlighter>
23+
</div>
24+
);
25+
}

‎src/components/SyntaxHighlighter/i18n/en.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"copy": "Copy"
3+
}

‎src/components/SyntaxHighlighter/i18n/index.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {registerKeysets} from '../../../utils/i18n';
2+
3+
import en from './en.json';
4+
5+
const COMPONENT = 'ydb-syntax-highlighter';
6+
7+
export default registerKeysets(COMPONENT, {en});

‎src/components/SyntaxHighlighter/lazy.ts

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {lazyComponent} from '../../utils/lazyComponent';
2+
3+
export const YDBSyntaxHighlighterLazy = lazyComponent(
4+
() => import('./YDBSyntaxHighlighter'),
5+
'YDBSyntaxHighlighter',
6+
);

‎src/components/SyntaxHighlighter/shared.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import {cn} from '../../utils/cn';
2+
3+
export const b = cn('ydb-syntax-highlighter');

‎src/components/SyntaxHighlighter/themes.ts

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import {useThemeValue} from '@gravity-ui/uikit';
2+
import {materialLight, vscDarkPlus} from 'react-syntax-highlighter/dist/esm/styles/prism';
3+
4+
export const lightTransparent = {
5+
...materialLight,
6+
'pre[class*="language-"]': {
7+
...materialLight['pre[class*="language-"]'],
8+
background: 'transparent',
9+
margin: 0,
10+
},
11+
'code[class*="language-"]': {
12+
...materialLight['code[class*="language-"]'],
13+
background: 'transparent',
14+
color: 'var(--g-color-text-primary)',
15+
whiteSpace: 'pre-wrap' as const,
16+
},
17+
comment: {
18+
color: '#969896',
19+
},
20+
string: {
21+
color: '#a31515',
22+
},
23+
tablepath: {
24+
color: '#338186',
25+
},
26+
function: {
27+
color: '#7a3e9d',
28+
},
29+
udf: {
30+
color: '#7a3e9d',
31+
},
32+
type: {
33+
color: '#4d932d',
34+
},
35+
boolean: {
36+
color: '#608b4e',
37+
},
38+
constant: {
39+
color: '#608b4e',
40+
},
41+
variable: {
42+
color: '#001188',
43+
},
44+
};
45+
46+
export const darkTransparent = {
47+
...vscDarkPlus,
48+
'pre[class*="language-"]': {
49+
...vscDarkPlus['pre[class*="language-"]'],
50+
background: 'transparent',
51+
margin: 0,
52+
},
53+
'code[class*="language-"]': {
54+
...vscDarkPlus['code[class*="language-"]'],
55+
background: 'transparent',
56+
color: 'var(--g-color-text-primary)',
57+
whiteSpace: 'pre-wrap' as const,
58+
},
59+
comment: {
60+
color: '#969896',
61+
},
62+
string: {
63+
color: '#ce9178',
64+
},
65+
tablepath: {
66+
color: '#338186',
67+
},
68+
function: {
69+
color: '#9e7bb0',
70+
},
71+
udf: {
72+
color: '#9e7bb0',
73+
},
74+
type: {
75+
color: '#6A8759',
76+
},
77+
boolean: {
78+
color: '#608b4e',
79+
},
80+
constant: {
81+
color: '#608b4e',
82+
},
83+
variable: {
84+
color: '#74b0df',
85+
},
86+
};
87+
88+
const dark: Record<string, React.CSSProperties> = {
89+
...darkTransparent,
90+
'pre[class*="language-"]': {
91+
...darkTransparent['pre[class*="language-"]'],
92+
background: vscDarkPlus['pre[class*="language-"]'].background,
93+
scrollbarColor: `var(--g-color-scroll-handle) transparent`,
94+
},
95+
'code[class*="language-"]': {
96+
...darkTransparent['code[class*="language-"]'],
97+
whiteSpace: 'pre',
98+
},
99+
};
100+
101+
const light: Record<string, React.CSSProperties> = {
102+
...lightTransparent,
103+
'pre[class*="language-"]': {
104+
...lightTransparent['pre[class*="language-"]'],
105+
background: 'var(--g-color-base-misc-light)',
106+
scrollbarColor: `var(--g-color-scroll-handle) transparent`,
107+
},
108+
'code[class*="language-"]': {
109+
...lightTransparent['code[class*="language-"]'],
110+
whiteSpace: 'pre',
111+
},
112+
};
113+
114+
export function useSyntaxHighlighterStyle(transparentBackground?: boolean) {
115+
const themeValue = useThemeValue();
116+
const isDark = themeValue === 'dark' || themeValue === 'dark-hc';
117+
118+
if (transparentBackground) {
119+
return isDark ? darkTransparent : lightTransparent;
120+
}
121+
122+
return isDark ? dark : light;
123+
}

‎src/components/SyntaxHighlighter/types.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export type Language =
2+
| 'bash'
3+
| 'cpp'
4+
| 'csharp'
5+
| 'go'
6+
| 'java'
7+
| 'javascript'
8+
| 'php'
9+
| 'python'
10+
| 'yql';

0 commit comments

Comments
 (0)