Json-To-TypeScript: add settings

Author: k.golikov

src/hooks/useChangeState.ts

@@ -0,0 +1,12 @@
+import { Dispatch, SetStateAction, useCallback } from 'react';
+
+const useChangeState = <S extends object>(setState: Dispatch<SetStateAction<S>>) => {
+    return useCallback(<K extends keyof S>(key: K, value: S[K]) => {
+        setState((state) => ({
+            ...state,
+            [key]: value
+        }));
+    }, []);
+};
+
+export default useChangeState;

src/hooks/useChangeStateHandler.ts

@@ -0,0 +1,32 @@
+import { ChangeEvent, Dispatch, SetStateAction, useCallback } from 'react';
+import call from '../utils/call';
+import { isObjectLike } from 'lodash';
+import useChangeState from './useChangeState';
+
+const isChangeEvent = (value: any): value is ChangeEvent<unknown> => {
+    return isObjectLike(value) && 'target' in value;
+};
+
+const useChangeStateHandler = <S extends object>(setState: Dispatch<SetStateAction<S>>) => {
+    const changeState = useChangeState(setState);
+
+    return useCallback(
+        <K extends keyof S, T extends S[K]>(key: K) => {
+            return (value: ChangeEvent<{ value: T }> | T) => {
+                const actualValue = call(() => {
+                    if (isChangeEvent(value)) {
+                        const event = value as ChangeEvent<{ value: T }>;
+                        return event.target.value;
+                    }
+
+                    return value;
+                });
+
+                changeState(key, actualValue);
+            };
+        },
+        [changeState]
+    );
+};
+
+export default useChangeStateHandler;

src/pages/codeFormatterPage/CodeFormatterPage.tsx

@@ -9,6 +9,7 @@ import { editor, languages } from 'monaco-editor';
 import CopyButton from '../../components/copyButton/CopyButton';
 import formatCode from '../../utils/formatCode';
 import AppEditor from '../../components/appEditor/AppEditor';
+import getLocalStorageKey from '../../utils/getLocalStorageKey';
 
 // interface FormattedLanguage {
 //     prettierParser: prettier.BuiltInParserName,
@@ -50,7 +51,7 @@ const monacoOptions: editor.IStandaloneEditorConstructionOptions = {
 
 const CodeFormatterPage: FunctionComponent = () => {
     const [selectedLanguage, setSelectedLanguage] = useLocalstorageState<MonacoLanguage>(
-        'mrgrd56:code-formatter/selectedLanguage',
+        getLocalStorageKey('code-formatter', 'selectedLanguage'),
         'typescript'
     );
     const [code, setCode] = useState<string>('');

src/pages/jsonToTypeScriptPage/JsonToTypeScriptPage.tsx

@@ -1,18 +1,25 @@
-import React, { useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PageContainer from '../../components/pageContainer/PageContainer';
-import { Alert, Button, Col, Row, Tooltip } from 'antd';
+import { Alert, Button, Col, Popover, Row, Tooltip } from 'antd';
 import styles from './JsonToTypeScriptPage.module.scss';
 import classNames from 'classnames';
 import AppEditor from '../../components/appEditor/AppEditor';
 import { editor } from 'monaco-editor';
 import { useDebouncedMemo } from '../../hooks/debouncedMemo';
 import ExportType from './types/ExportType';
 import convertJsonToTypeScript from './utils/convertJsonToTypeScript';
-import { camelCase } from 'lodash';
-import pascalCase from '../../utils/pascalCase';
 import { SettingOutlined } from '@ant-design/icons';
 import getErrorMessage from '../../utils/getErrorMessage';
 import CopyButton from '../../components/copyButton/CopyButton';
+import { useLocalstorageState } from 'rooks';
+import getLocalStorageKey from '../../utils/getLocalStorageKey';
+import JsonToTypeScriptConversionSelectableOptions, {
+    NameTransformer
+} from './types/JsonToTypeScriptConversionSelectableOptions';
+import JsonToTypeScriptConversionOptions from './types/JsonToTypeScriptConversionOptions';
+import { camelCase, snakeCase, upperCase } from 'lodash';
+import pascalCase from '../../utils/pascalCase';
+import JsonToTypeScriptSettings from './components/JsonToTypeScriptSettings';
 
 const jsonEditorOptions: editor.IStandaloneEditorConstructionOptions = {
     minimap: { enabled: false }
@@ -23,27 +30,60 @@ const typescriptEditorOptions: editor.IStandaloneEditorConstructionOptions = {
     minimap: { enabled: false }
 };
 
+const defaultSelectableConversionOptions: JsonToTypeScriptConversionSelectableOptions = {
+    rootTypeName: 'Root',
+    exportType: ExportType.ES_MODULE,
+    isReversedOrder: true,
+    typeNameTransformer: NameTransformer.PASCAL_CASE,
+    fieldNameTransformer: NameTransformer.NONE
+};
+
+const nameTransformers: Readonly<Record<NameTransformer, (name: string) => string>> = {
+    [NameTransformer.NONE]: (name) => name,
+    [NameTransformer.CAMEL_CASE]: camelCase,
+    [NameTransformer.PASCAL_CASE]: pascalCase,
+    [NameTransformer.SNAKE_CASE]: snakeCase,
+    [NameTransformer.SCREAMING_SNAKE_CASE]: (name) => upperCase(snakeCase(name))
+};
+
+const getConversionOptions = (
+    selectableConversionOptions: JsonToTypeScriptConversionSelectableOptions
+): JsonToTypeScriptConversionOptions => {
+    const { fieldNameTransformer, typeNameTransformer, ...restOptions } = selectableConversionOptions;
+
+    return {
+        ...restOptions,
+        fieldNameTransformer: nameTransformers[fieldNameTransformer],
+        typeNameTransformer: nameTransformers[typeNameTransformer]
+    };
+};
+
 const JsonToTypeScriptPage = () => {
     const [json, setJson] = useState<string>('');
-
     const [error, setError] = useState<string>();
+    const [isSettingsTooltipVisible, setIsSettingsTooltipVisible] = useState<boolean>(false);
+    const [isSettingsVisible, setIsSettingsVisible] = useState<boolean>(false);
+
+    const [selectableConversionOptions, setSelectableConversionOptions] =
+        useLocalstorageState<JsonToTypeScriptConversionSelectableOptions>(
+            getLocalStorageKey('json-to-typescript', 'conversionOptions'),
+            defaultSelectableConversionOptions
+        );
+
+    const conversionOptions = useMemo(() => {
+        return getConversionOptions(selectableConversionOptions);
+    }, [selectableConversionOptions]);
 
     const typeScript = useDebouncedMemo(
-        { json },
-        ({ json }, noResult) => {
+        { json, conversionOptions },
+        ({ json, conversionOptions }, noResult) => {
             if (!json?.trim()) {
                 setError(undefined);
                 return '';
             }
 
             try {
-                const result = convertJsonToTypeScript(json, {
-                    rootTypeName: 'Root',
-                    exportType: ExportType.ES_MODULE,
-                    isReversedOrder: true,
-                    typeNameTransformer: pascalCase,
-                    fieldNameTransformer: camelCase
-                });
+                const result = convertJsonToTypeScript(json, conversionOptions);
 
                 setError(undefined);
 
@@ -54,19 +94,52 @@ const JsonToTypeScriptPage = () => {
                 return noResult;
             }
         },
-        [json],
+        [json, conversionOptions],
         50
     );
 
+    const handleSettingsClick = useCallback(() => {
+        setIsSettingsVisible((isVisible) => !isVisible);
+        setIsSettingsTooltipVisible(false);
+    }, []);
+
+    const handleSettingsTooltipVisibleChange = useCallback(
+        (value: boolean) => {
+            if (!isSettingsVisible) {
+                setIsSettingsTooltipVisible(value);
+            }
+        },
+        [isSettingsVisible]
+    );
+
     return (
         <PageContainer noPadding className={styles.pageContainer}>
             <Row className={styles.container}>
                 <Col xs={12} className={classNames(styles.col, styles.colLeft)}>
                     <div className={styles.colHeader}>
                         <h3 className={styles.colTitle}>JSON</h3>
-                        <Tooltip title="Settings" placement="bottom">
-                            <Button type="text" icon={<SettingOutlined />} />
-                        </Tooltip>
+                        <Popover
+                            trigger="click"
+                            visible={isSettingsVisible}
+                            onVisibleChange={setIsSettingsVisible}
+                            content={
+                                <JsonToTypeScriptSettings
+                                    options={selectableConversionOptions}
+                                    setOptions={setSelectableConversionOptions}
+                                    onClose={handleSettingsClick}
+                                />
+                            }
+                            placement="bottomRight"
+                        >
+                            <Tooltip
+                                title="Settings"
+                                placement="bottomRight"
+                                visible={isSettingsVisible ? false : isSettingsTooltipVisible}
+                                onVisibleChange={handleSettingsTooltipVisibleChange}
+                            >
+                                <Button type="text" icon={<SettingOutlined />} onClick={handleSettingsClick} />
+                            </Tooltip>
+                        </Popover>
                     </div>
                     <AppEditor
                         className={styles.editor}

src/pages/jsonToTypeScriptPage/components/JsonToTypeScriptSettings.module.scss

@@ -0,0 +1,37 @@
+.formContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+
+    width: 280px;
+    padding-bottom: 5px;
+}
+
+.title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    margin-bottom: 0.25rem;
+
+    .closeButton {
+        margin-top: -6px;
+    }
+}
+
+.formItem {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .label {
+        width: 120px;
+    }
+
+    .input {
+        flex: 1;
+        width: 160px;
+        max-width: 160px;
+    }
+}

src/pages/jsonToTypeScriptPage/components/JsonToTypeScriptSettings.tsx

@@ -0,0 +1,90 @@
+import React, { Dispatch, FunctionComponent, SetStateAction } from 'react';
+import JsonToTypeScriptConversionSelectableOptions, {
+    NameTransformer
+} from '../types/JsonToTypeScriptConversionSelectableOptions';
+import { Button, Col, Input, Select, Switch } from 'antd';
+import useChangeStateHandler from '../../../hooks/useChangeStateHandler';
+import styles from './JsonToTypeScriptSettings.module.scss';
+import ExportType from '../types/ExportType';
+import Text from 'antd/lib/typography/Text';
+import classNames from 'classnames';
+import { CloseOutlined } from '@ant-design/icons';
+
+interface Props {
+    options: JsonToTypeScriptConversionSelectableOptions;
+    setOptions: Dispatch<SetStateAction<JsonToTypeScriptConversionSelectableOptions>>;
+    onClose?: () => void;
+}
+
+const JsonToTypeScriptSettings: FunctionComponent<Props> = ({ options, setOptions, onClose }) => {
+    const handleOptionChange = useChangeStateHandler(setOptions);
+
+    return (
+        <Col className={styles.formContainer}>
+            <div className={styles.title}>
+                <h3 className="mb-0">Settings</h3>
+                {onClose && (
+                    <Button
+                        size="small"
+                        type="text"
+                        icon={<CloseOutlined />}
+                        className={styles.closeButton}
+                        onClick={onClose}
+                    />
+                )}
+            </div>
+            <label className={styles.formItem}>
+                <span className={styles.label}>Root type name</span>
+                <Input
+                    className={styles.input}
+                    value={options.rootTypeName}
+                    onChange={handleOptionChange('rootTypeName')}
+                />
+            </label>
+            <label className={styles.formItem}>
+                <span className={styles.label}>Export type</span>
+                <Select className={styles.input} value={options.exportType} onChange={handleOptionChange('exportType')}>
+                    <Select.Option key={ExportType.NONE}>None</Select.Option>
+                    <Select.Option key={ExportType.ES_MODULE}>ES Module</Select.Option>
+                    <Select.Option key={ExportType.COMMONJS}>
+                        <Text type="danger">CommonJS</Text>
+                    </Select.Option>
+                </Select>
+            </label>
+            <label className={styles.formItem}>
+                <span className={styles.label}>Field names</span>
+                <Select
+                    className={styles.input}
+                    value={options.fieldNameTransformer}
+                    onChange={handleOptionChange('fieldNameTransformer')}
+                >
+                    <Select.Option key={NameTransformer.NONE}>Not change</Select.Option>
+                    <Select.Option key={NameTransformer.CAMEL_CASE}>camelCase</Select.Option>
+                    <Select.Option key={NameTransformer.PASCAL_CASE}>PascalCase</Select.Option>
+                    <Select.Option key={NameTransformer.SNAKE_CASE}>snake_case</Select.Option>
+                    <Select.Option key={NameTransformer.SCREAMING_SNAKE_CASE}>SCREAMING_SNAKE_CASE</Select.Option>
+                </Select>
+            </label>
+            <label className={styles.formItem}>
+                <span className={styles.label}>Type names</span>
+                <Select
+                    className={styles.input}
+                    value={options.typeNameTransformer}
+                    onChange={handleOptionChange('typeNameTransformer')}
+                >
+                    <Select.Option key={NameTransformer.NONE}>Not change</Select.Option>
+                    <Select.Option key={NameTransformer.CAMEL_CASE}>camelCase</Select.Option>
+                    <Select.Option key={NameTransformer.PASCAL_CASE}>PascalCase</Select.Option>
+                    <Select.Option key={NameTransformer.SNAKE_CASE}>snake_case</Select.Option>
+                    <Select.Option key={NameTransformer.SCREAMING_SNAKE_CASE}>SCREAMING_SNAKE_CASE</Select.Option>
+                </Select>
+            </label>
+            <label className={classNames('mt-1', styles.formItem)}>
+                <Switch checked={options.isReversedOrder} onChange={handleOptionChange('isReversedOrder')} />
+                <span className="ms-3">Reverse declarations</span>
+            </label>
+        </Col>
+    );
+};
+
+export default JsonToTypeScriptSettings;

src/pages/jsonToTypeScriptPage/types/JsonToTypeScriptConversionSelectableOptions.ts

@@ -0,0 +1,19 @@
+import ExportType from './ExportType';
+
+export enum NameTransformer {
+    NONE = 'NONE',
+    CAMEL_CASE = 'CAMEL_CASE',
+    PASCAL_CASE = 'PASCAL_CASE',
+    SNAKE_CASE = 'SNAKE_CASE',
+    SCREAMING_SNAKE_CASE = 'SCREAMING_SNAKE_CASE'
+}
+
+interface JsonToTypeScriptConversionSelectableOptions {
+    exportType: ExportType;
+    isReversedOrder: boolean;
+    fieldNameTransformer: NameTransformer;
+    typeNameTransformer: NameTransformer;
+    rootTypeName: string;
+}
+
+export default JsonToTypeScriptConversionSelectableOptions;

src/pages/jsonToTypeScriptPage/types/typescript.ts

@@ -165,7 +165,11 @@ const stringifyTypeName = (name: string) => {
 
     let result = name;
 
-    if (/^\d$/.test(name[0])) {
+    if (!result?.trim()) {
+        result = 'Type';
+    }
+
+    if (/^\d$/.test(result[0])) {
         result = 'N' + result;
     }