Add JSON to TypeScript converter, WIP

Author: k.golikov

src/components/appDiffEditor/AppDiffEditor.tsx

@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from 'react';
+import { DiffEditor, DiffEditorProps } from '@monaco-editor/react';
+import classNames from 'classnames';
+import useAppTheme from '../../hooks/useAppTheme';
+import { Spin } from 'antd';
+
+const loadingNode = <Spin size="large" />;
+
+type Props = DiffEditorProps;
+
+const AppDiffEditor: FunctionComponent<Props> = ({ className, loading, theme, ...props }) => {
+    const { isDarkMode } = useAppTheme();
+
+    return (
+        <DiffEditor
+            theme={theme ?? (isDarkMode ? 'vs-dark' : 'light')}
+            className={classNames('app-monaco-editor', className)}
+            loading={loading ?? loadingNode}
+            {...props}
+        />
+    );
+};
+
+export default AppDiffEditor;

src/components/appEditor/AppEditor.tsx

@@ -0,0 +1,39 @@
+import React, { FunctionComponent, useCallback } from 'react';
+import Editor, { EditorProps, OnChange } from '@monaco-editor/react';
+import useAppTheme from '../../hooks/useAppTheme';
+import { Spin } from 'antd';
+import classNames from 'classnames';
+import * as monaco from 'monaco-editor';
+import MonacoLanguage from '../../types/MonacoLanguage';
+
+const loadingNode = <Spin size="large" />;
+
+export type AppOnChange = (value: string, ev: monaco.editor.IModelContentChangedEvent) => void;
+
+interface Props extends Omit<EditorProps, 'onChange'> {
+    onChange?: AppOnChange;
+    language?: MonacoLanguage;
+}
+
+const AppEditor: FunctionComponent<Props> = ({ className, loading, theme, onChange, ...props }) => {
+    const { isDarkMode } = useAppTheme();
+
+    const handleChange = useCallback<OnChange>(
+        (value, ev) => {
+            onChange?.(value ?? '', ev);
+        },
+        [onChange]
+    );
+
+    return (
+        <Editor
+            theme={theme ?? (isDarkMode ? 'vs-dark' : 'light')}
+            className={classNames('app-monaco-editor', className)}
+            loading={loading ?? loadingNode}
+            onChange={handleChange}
+            {...props}
+        />
+    );
+};
+
+export default AppEditor;

src/components/pageContainer/PageContainer.module.scss

@@ -6,6 +6,10 @@
     flex-direction: column;
     gap: 8px;
 
+    &.noPadding {
+        padding: 0;
+    }
+
     .headingContainer {
         width: 100%;
         justify-content: space-between;

src/components/pageContainer/PageContainer.tsx

@@ -3,6 +3,7 @@ import styles from './PageContainer.module.scss';
 import { Space, SpaceProps, Tag } from 'antd';
 import Paragraph from 'antd/lib/typography/Paragraph';
 import { ClockCircleOutlined, WarningOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
 
 export enum PageTag {
     WIP = 'WIP',
@@ -14,6 +15,7 @@ interface Props extends Omit<SpaceProps, 'title'> {
     description?: ReactNode;
     titleExtra?: ReactNode;
     tags?: PageTag[];
+    noPadding?: boolean;
 }
 
 const getTagNodes = (key: number | string): Readonly<Record<PageTag, ReactNode>> => ({
@@ -31,11 +33,13 @@ const getTagNodes = (key: number | string): Readonly<Record<PageTag, ReactNode>>
 
 const renderTag = (tag: PageTag, index: number) => getTagNodes(index)[tag];
 
-const PageContainer: FunctionComponent<Props> = ({ title, description, titleExtra, tags, children, ...props }) => {
+const PageContainer: FunctionComponent<Props> = (props) => {
+    const { title, description, titleExtra, tags, noPadding, children, className, ...restProps } = props;
+
     const renderedTags = useMemo(() => tags?.map(renderTag), [tags]);
 
     return (
-        <div className={styles.container} {...props}>
+        <div className={classNames(styles.container, { [styles.noPadding]: noPadding }, className)} {...restProps}>
             {tags?.length && <div>{renderedTags}</div>}
             {title && (
                 <Space direction="horizontal" size="middle" className={styles.headingContainer}>

src/constants/router/menuItems.ts

@@ -52,6 +52,9 @@ const menuItems: MenuItem[] = [
             {
                 route: routes.codeFormatter
             },
+            {
+                route: routes.jsonToTypescript
+            },
             {
                 route: routes.templateTextGenerator,
                 isGray: true

src/constants/router/routes.tsx

@@ -21,6 +21,7 @@ import SettingsPage from '../../pages/settingsPage/SettingsPage';
 import AboutPage from '../../pages/aboutPage/AboutPage';
 import CodeFormatterPage from '../../pages/codeFormatterPage/CodeFormatterPage';
 import DiffEditorPage from '../../pages/DiffEditorPage';
+import JsonToTypeScriptPage from '../../pages/jsonToTypeScriptPage/JsonToTypeScriptPage';
 
 export interface AppRoute extends Omit<RouteProps, 'element'> {
     path: string;
@@ -45,6 +46,7 @@ type AppRoutesMap = Readonly<{
     uuidGenerator: AppRoute;
     diffEditor: AppRoute;
     codeFormatter: AppRoute;
+    jsonToTypescript: AppRoute;
     settings: AppRoute;
     about: AppRoute;
 }>;
@@ -130,6 +132,11 @@ export const routes: AppRoutesMap = {
         component: CodeFormatterPage,
         title: 'Code Formatter'
     },
+    jsonToTypescript: {
+        path: '/tools/json-to-typescript',
+        component: JsonToTypeScriptPage,
+        title: 'JSON to TypeScript'
+    },
     settings: {
         path: '/settings',
         component: SettingsPage,

src/layouts/appLoadingLayout/AppLoadingLayout.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/main';
+
 .loading {
     position: absolute;
     width: 100%;
@@ -8,14 +10,18 @@
 
     overflow: hidden;
 
-    background-color: white;
-
     transition-duration: 0.075s;
     transition-property: opacity, background-color;
     transition-timing-function: linear;
 
     z-index: 999; //eruda=1000
 
+    background-color: white;
+
+    @include themeDark {
+        background-color: black;
+    }
+
     &:not(.loaded) + * {
         display: none;
     }
@@ -26,9 +32,3 @@
         pointer-events: none;
     }
 }
-
-body[data-theme='dark'] {
-    .loading {
-        background-color: black;
-    }
-}

src/pages/DiffEditorPage.tsx

@@ -1,22 +1,16 @@
 import React from 'react';
 import PageContainer from '../components/pageContainer/PageContainer';
-import { DiffEditor } from '@monaco-editor/react';
-import useAppTheme from '../hooks/useAppTheme';
 import { editor } from 'monaco-editor';
-import { Spin } from 'antd';
-
-const loadingNode = <Spin size="large" />;
+import AppDiffEditor from '../components/appDiffEditor/AppDiffEditor';
 
 const options: editor.IDiffEditorConstructionOptions = {
     originalEditable: true
 };
 
 const DiffEditorPage = () => {
-    const { isDarkMode } = useAppTheme();
-
     return (
         <PageContainer title="Diff Editor">
-            <DiffEditor theme={isDarkMode ? 'vs-dark' : 'light'} options={options} loading={loadingNode} />
+            <AppDiffEditor options={options} />
         </PageContainer>
     );
 };

src/pages/codeFormatterPage/CodeFormatterPage.tsx

@@ -1,15 +1,14 @@
 import React, { FunctionComponent, useCallback, useRef, useState } from 'react';
 import PageContainer from '../../components/pageContainer/PageContainer';
-import useAppTheme from '../../hooks/useAppTheme';
-import Editor, { OnMount } from '@monaco-editor/react';
-import { Button, Col, Row, Select, Spin } from 'antd';
+import { OnMount } from '@monaco-editor/react';
+import { Button, Col, Row, Select } from 'antd';
 import styles from './CodeFormatterPage.module.scss';
-import classNames from 'classnames';
 import MonacoLanguage, { monacoLanguages } from '../../types/MonacoLanguage';
 import { useLocalstorageState } from 'rooks';
 import { editor, languages } from 'monaco-editor';
 import CopyButton from '../../components/copyButton/CopyButton';
 import formatCode from '../../utils/formatCode';
+import AppEditor from '../../components/appEditor/AppEditor';
 
 // interface FormattedLanguage {
 //     prettierParser: prettier.BuiltInParserName,
@@ -45,15 +44,11 @@ import formatCode from '../../utils/formatCode';
 //
 // window.prettier = prettier;
 
-const loadingNode = <Spin size="large" />;
-
 const monacoOptions: editor.IStandaloneEditorConstructionOptions = {
     formatOnPaste: true
 };
 
 const CodeFormatterPage: FunctionComponent = () => {
-    const { isDarkMode } = useAppTheme();
-
     const [selectedLanguage, setSelectedLanguage] = useLocalstorageState<MonacoLanguage>(
         'mrgrd56:code-formatter/selectedLanguage',
         'typescript'
@@ -62,10 +57,6 @@ const CodeFormatterPage: FunctionComponent = () => {
 
     const monacoEditorRef = useRef<editor.IStandaloneCodeEditor>();
 
-    const handleCodeChange = (value: string | undefined) => {
-        setCode(value ?? '');
-    };
-
     const handleMonacoMount = useCallback<OnMount>((editor, monaco) => {
         monacoEditorRef.current = editor;
 
@@ -108,15 +99,13 @@ const CodeFormatterPage: FunctionComponent = () => {
                         <CopyButton value={code} type="default" />
                     </Row>
                 </Col>
-                <Editor
-                    theme={isDarkMode ? 'vs-dark' : 'light'}
-                    className={classNames('app-monaco-editor', styles.editor)}
+                <AppEditor
+                    className={styles.editor}
                     language={selectedLanguage}
                     value={code}
-                    onChange={handleCodeChange}
+                    onChange={setCode}
                     options={monacoOptions}
                     onMount={handleMonacoMount}
-                    loading={loadingNode}
                 />
             </div>
         </PageContainer>

src/pages/jsEvaluatorPage/JsEvaluatorPage.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/main';
+
 .outputModeComboBox {
     width: 100px;
 }
@@ -7,13 +9,11 @@
 
     border: 1px solid #d9d9d9;
 
-    & * {
-        transition: none !important;
+    @include themeDark {
+        border-color: rgb(67, 67, 67);
     }
-}
 
-body[data-theme='dark'] {
-    .codeEditor {
-        border-color: rgb(67, 67, 67);
+    & * {
+        transition: none !important;
     }
 }