Skip to content

Commit 6faf4d6

Browse files
author
k.golikov
committed
Many improvements
1 parent d4a11ba commit 6faf4d6

File tree

15 files changed

+266
-28
lines changed

15 files changed

+266
-28
lines changed

‎.eslintrc.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"linebreak-style": ["warn", "unix"],
1616
"quotes": ["warn", "single"],
1717
"semi": ["warn", "always"],
18-
"no-debugger": "warn"
18+
"no-debugger": "warn",
19+
"@typescript-eslint/ban-ts-comment": "warn"
1920
}
2021
}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,7 @@
106106
"lint-staged": "^12.3.7",
107107
"prettier": "^2.6.2",
108108
"pretty-quick": "^3.1.3",
109+
"raw-loader": "^4.0.2",
109110
"sass": "^1.49.9",
110111
"typescript": "^4.4.2"
111112
},

‎src/components/NpmLink.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { FunctionComponent, ReactNode } from 'react';
2+
import ExternalLink from './ExternalLink';
3+
import getNpmPackageLink from '../utils/getNpmPackageLink';
4+
5+
interface Props {
6+
packageName: string;
7+
children?: ReactNode;
8+
}
9+
10+
const NpmLink: FunctionComponent<Props> = ({ packageName, children }) => {
11+
const link = getNpmPackageLink(packageName);
12+
13+
return (
14+
<ExternalLink href={link}>
15+
<code>{children || packageName}</code>
16+
</ExternalLink>
17+
);
18+
};
19+
20+
export default React.memo(NpmLink);

‎src/components/flex/Flex.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React, { CSSProperties, FunctionComponent, HTMLProps, useMemo } from 'react';
2+
import { defaults } from 'lodash';
3+
4+
type CSS = CSSProperties;
5+
6+
interface BaseProps extends HTMLProps<HTMLDivElement> {
7+
justify?: CSS['justifyContent'];
8+
align?: CSS['alignItems'];
9+
alignContent?: CSS['alignContent'];
10+
flex?: CSS['flex'];
11+
gap?: CSS['gap'];
12+
}
13+
14+
interface PropsWithDirection extends BaseProps {
15+
direction?: CSS['flexDirection'];
16+
row?: never;
17+
column?: never;
18+
}
19+
20+
interface PropsWithRow extends BaseProps {
21+
direction?: never;
22+
row: true;
23+
column?: never;
24+
}
25+
26+
interface PropsWithColumn extends BaseProps {
27+
direction?: never;
28+
row?: never;
29+
column: true;
30+
}
31+
32+
type Props = PropsWithDirection | PropsWithRow | PropsWithColumn;
33+
34+
// type Props<T extends BaseProps> =
35+
// T extends PropsWithDirection ? Exclude<PropsWithDirection, 'row' | 'column'> :
36+
// T extends PropsWithRow ? PropsWithRow :
37+
// T extends PropsWithColumn ? PropsWithColumn
38+
// : BaseProps;
39+
40+
const Flex: FunctionComponent<Props> = (props) => {
41+
const { row, column, direction, justify, align, alignContent, flex, gap, style, children, ...restProps } = props;
42+
43+
const divStyle: CSS = useMemo(() => {
44+
return defaults(
45+
{
46+
display: 'flex',
47+
flexDirection: () => {
48+
switch (true) {
49+
case row:
50+
return 'row';
51+
case column:
52+
return 'column';
53+
default:
54+
return direction;
55+
}
56+
},
57+
justifyContent: justify,
58+
alignItems: align,
59+
alignContent,
60+
flex,
61+
gap
62+
},
63+
style
64+
);
65+
}, [row, column, direction, justify, align, alignContent, flex, gap, style]);
66+
67+
return (
68+
<div {...restProps} style={divStyle}>
69+
{children}
70+
</div>
71+
);
72+
};
73+
74+
export default Flex;

‎src/pages/bytesStringifierPage/BytesStringifierPage.module.scss‎

Whitespace-only changes.

‎src/pages/bytesStringifierPage/BytesStringifierPage.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React, { FunctionComponent } from 'react';
2+
import PageContainer from '../../layouts/pages/pageContainer/PageContainer';
3+
import styles from './BytesStringifierPage.module.scss';
4+
5+
const BytesStringifierPage: FunctionComponent = () => {
6+
return <PageContainer title="BytesStringifierPage"></PageContainer>;
7+
};
8+
9+
export default BytesStringifierPage;

‎src/pages/dataUrlPage/DataUrlPage.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,11 @@ const DataUrlPage: FunctionComponent = () => {
7777
};
7878

7979
const dataUrlViewUrl = useMemo(() => {
80-
return getDataUrlViewUrl(getDataUrlQueryParams(state));
80+
const data = getDataUrlQueryParams(state);
81+
return {
82+
data,
83+
viewUrl: getDataUrlViewUrl(data)
84+
};
8185
}, [state]);
8286

8387
const transformContent = useCallback(
@@ -197,11 +201,13 @@ const DataUrlPage: FunctionComponent = () => {
197201
</label>
198202
</div>
199203
</label>
200-
<Link to={dataUrlViewUrl} target="_blank" className="mt-3" ref={dataUrlViewLinkRef}>
204+
<TextArea readOnly value={dataUrlViewUrl.data.data} rows={4} showCount className="mt-3" />
205+
<CopyButton value={dataUrlViewUrl.data.data} className={classNames(styles.copyButton, 'mb-1')} />
206+
<Link to={dataUrlViewUrl.viewUrl} target="_blank" ref={dataUrlViewLinkRef}>
201207
View the iframe
202208
</Link>
203209
<TextArea readOnly value={displayedDataUrlViewUrl} rows={4} showCount />
204-
<CopyButton value={displayedDataUrlViewUrl} className={styles.copyButton} />
210+
<CopyButton value={displayedDataUrlViewUrl} className={classNames(styles.copyButton, 'mb-1')} />
205211
</Col>
206212
</PageContainer>
207213
);

‎src/pages/htmlEditorPage/HtmlEditorPage.module.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@
5555
.tabTitle {
5656
font-size: 28px;
5757
}
58+
59+
.resultTabTitle {
60+
font-size: 20px;
61+
}
5862
}
5963
}
6064
}

‎src/pages/htmlEditorPage/HtmlEditorPage.tsx‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,26 @@ import { OnMount } from '@monaco-editor/react';
1515
import { emmetCSS, emmetHTML, emmetJSX } from 'emmet-monaco-es';
1616
import { editor } from 'monaco-editor';
1717
import ButtonGroup from 'antd/lib/button/button-group';
18-
import { VerticalSplit, ViewHeadline } from '@mui/icons-material';
18+
import { Code, CodeOff, VerticalSplit, ViewHeadline } from '@mui/icons-material';
1919
import useChangeValueStateHandler from '../../hooks/useChangeValueStateHandler';
2020
import Split from 'react-split';
2121
import './HtmlEditorPage.scss';
22+
import mergeEnums, { MergeEnums } from '../../utils/mergeEnums';
2223

23-
enum EditorTab {
24+
enum EditorInTab {
2425
HTML = 'html',
2526
CSS = 'css',
2627
JS = 'js'
2728
}
2829

29-
type EditorSources = Record<EditorTab, string>;
30+
enum EditorOutTab {
31+
VIEW = 'VIEW'
32+
}
33+
34+
const EditorTab = mergeEnums(EditorInTab, EditorOutTab);
35+
type EditorTab = MergeEnums<EditorInTab, EditorOutTab>;
36+
37+
type EditorSources = Record<EditorInTab, string>;
3038

3139
const sourcesInitial: EditorSources = {
3240
html: `
@@ -63,6 +71,11 @@ const editorOptions: editor.IStandaloneEditorConstructionOptions = {
6371
minimap: { enabled: false }
6472
};
6573

74+
const resultEditorOptions: editor.IStandaloneEditorConstructionOptions = {
75+
...editorOptions,
76+
readOnly: true
77+
};
78+
6679
enum ViewMode {
6780
EDITOR = 'EDITOR',
6881
SPLIT = 'SPLIT',
@@ -219,6 +232,22 @@ ${sources.js}
219232
options={editorOptions}
220233
/>
221234
</Tabs.TabPane>
235+
<Tabs.TabPane
236+
tab={
237+
<div className={styles.tabTitleWrapper}>
238+
<Code className={styles.resultTabTitle} />
239+
</div>
240+
}
241+
key={EditorTab.VIEW}
242+
className={styles.editorTab}
243+
>
244+
<AppEditor
245+
value={resultSource}
246+
className={styles.editor}
247+
language="html"
248+
options={resultEditorOptions}
249+
/>
250+
</Tabs.TabPane>
222251
</Tabs>
223252
</Col>
224253
);

‎src/pages/jsEvaluatorPage/JsEvaluatorPage.tsx‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,16 @@ import _, { isObjectLike } from 'lodash';
1010
import axios from 'axios';
1111
import Text from 'antd/lib/typography/Text';
1212
import Paragraph from 'antd/lib/typography/Paragraph';
13-
import ExternalLink from '../../components/ExternalLink';
1413
import styles from './JsEvaluatorPage.module.scss';
1514
import OutputMode from './types/OutputMode';
1615
import CopyButton from '../../components/copyButton/CopyButton';
1716
import { BeforeMount } from '@monaco-editor/react';
1817
import { editor } from 'monaco-editor';
1918
import classNames from 'classnames';
2019
import AppEditor from '../../components/appEditor/AppEditor';
20+
import monacoExtraLibs from '../../utils/monaco/monacoExtraLibs';
21+
import moment from 'moment';
22+
import NpmLink from '../../components/NpmLink';
2123

2224
interface ShowCountProps {
2325
formatter: (args: { count: number; maxLength?: number }) => string;
@@ -34,10 +36,11 @@ const codeEditorOptions: editor.IStandaloneEditorConstructionOptions = {
3436

3537
const handleCodeEditorBeforeMount: BeforeMount = (monaco) => {
3638
monaco.languages.typescript.javascriptDefaults.addExtraLib(`
37-
declare const $value: string;
38-
declare const _;
39-
declare const axios;
40-
declare const pluralize;`);
39+
declare const $value: string;`);
40+
monacoExtraLibs.lodash(monaco);
41+
monacoExtraLibs.axios(monaco);
42+
monacoExtraLibs.pluralize(monaco);
43+
monacoExtraLibs.moment(monaco);
4144
};
4245

4346
const JsEvaluatorPage = () => {
@@ -63,6 +66,7 @@ const JsEvaluatorPage = () => {
6366
_,
6467
axios,
6568
pluralize,
69+
moment,
6670
$easterEgg: '🥚'
6771
});
6872

@@ -112,18 +116,8 @@ const JsEvaluatorPage = () => {
112116
<code>$value</code>
113117
</label>
114118
</Tooltip>
115-
,{' '}
116-
<ExternalLink href="https://lodash.com/">
117-
<code>_</code>
118-
</ExternalLink>
119-
,{' '}
120-
<ExternalLink href="https://github.com/axios/axios">
121-
<code>axios</code>
122-
</ExternalLink>
123-
,{' '}
124-
<ExternalLink href="https://github.com/plurals/pluralize">
125-
<code>pluralize</code>
126-
</ExternalLink>
119+
, <NpmLink packageName="lodash">_</NpmLink>, <NpmLink packageName="axios" />,{' '}
120+
<NpmLink packageName="pluralize" />, <NpmLink packageName="moment" />
127121
</Paragraph>
128122
</Text>
129123

@@ -134,7 +128,7 @@ const JsEvaluatorPage = () => {
134128
value={evalValue}
135129
onChange={setEvalValue}
136130
options={codeEditorOptions}
137-
height="250px"
131+
height="400px"
138132
width="100%"
139133
beforeMount={handleCodeEditorBeforeMount}
140134
/>
@@ -157,6 +151,7 @@ const JsEvaluatorPage = () => {
157151
className={classNames('font-monospace mb-2', styles.textarea)}
158152
readOnly
159153
value={evaluatedJs}
154+
rows={6}
160155
/>
161156
<CopyButton value={evaluatedJs} />
162157
</Col>

0 commit comments

Comments
 (0)