Skip to content

Commit e159973

Browse files
author
k.golikov
committed
Add code formatter
1 parent f567d16 commit e159973

23 files changed

+466
-24
lines changed

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
"@types/mustache": "^4.1.2",
7676
"@types/node": "^16.7.13",
7777
"@types/pluralize": "^0.0.29",
78+
"@types/prettier": "^2.6.0",
7879
"@types/qrcode.react": "^1.0.2",
7980
"@types/rc-select": "^8.6.6",
8081
"@types/react": "^17.0.39",
@@ -93,7 +94,7 @@
9394
"gulp-debug": "^4.0.0",
9495
"husky": "^7.0.0",
9596
"lint-staged": "^12.3.7",
96-
"prettier": "^2.6.0",
97+
"prettier": "^2.6.2",
9798
"pretty-quick": "^3.1.3",
9899
"sass": "^1.49.9",
99100
"typescript": "^4.4.2"

src/App.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,13 @@
99
outline: none;
1010
}
1111
}
12+
13+
.app-monaco-editor {
14+
.monaco-editor {
15+
width: 100% !important;
16+
17+
.overflow-guard {
18+
width: 100% !important;
19+
}
20+
}
21+
}

src/AppRouter.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { Routes, Route } from 'react-router-dom';
33
import { routesList } from './constants/router/routes';
4-
import NotFoundPage from './pages/NotFoundPage';
4+
import NotFoundPage from './pages/notFoundPage/NotFoundPage';
55
import RouteWrapper from './layouts/RouteWrapper';
66

77
const AppRouter = () => (

src/assets/img/react-logo.svg

Lines changed: 9 additions & 0 deletions
Loading

src/constants/router/menuItems.ts

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { isSubMenuItem, MenuItem, MenuRouteItem } from '../../layouts/appLayout/
22
import {
33
BookFilled,
44
DeleteFilled,
5+
ExclamationCircleFilled,
56
GithubFilled,
67
HomeFilled,
78
PlayCircleFilled,
@@ -29,10 +30,6 @@ const menuItems: MenuItem[] = [
2930
{
3031
route: routes.jsonStringifier
3132
},
32-
{
33-
route: routes.templateTextGenerator,
34-
isGray: true
35-
},
3633
{
3734
route: routes.qrScanner
3835
},
@@ -49,6 +46,16 @@ const menuItems: MenuItem[] = [
4946
{
5047
route: routes.uuidGenerator
5148
},
49+
{
50+
route: routes.diffEditor
51+
},
52+
{
53+
route: routes.codeFormatter
54+
},
55+
{
56+
route: routes.templateTextGenerator,
57+
isGray: true
58+
},
5259
{
5360
route: routes.userInfo,
5461
isGray: true
@@ -91,6 +98,10 @@ const menuItems: MenuItem[] = [
9198
{
9299
route: routes.settings,
93100
icon: SettingFilled
101+
},
102+
{
103+
route: routes.about,
104+
icon: ExclamationCircleFilled
94105
}
95106
];
96107

src/constants/router/routes.tsx

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,15 @@ import BgGeneratorPage from '../../pages/bgGeneratorPage/BgGeneratorPage';
1212
import JsEvaluatorPage from '../../pages/jsEvaluatorPage/JsEvaluatorPage';
1313
import UserInfoPage from '../../pages/userInfoPage/UserInfoPage';
1414
import RouteWrapper from '../../layouts/RouteWrapper';
15-
import NotFoundPage from '../../pages/NotFoundPage';
15+
import NotFoundPage from '../../pages/notFoundPage/NotFoundPage';
1616
import UnitConverterPage from '../../pages/unitConverterPage/UnitConverterPage';
1717
import SnakeGamePage from '../../pages/snakeGamePage/SnakeGamePage';
1818
import UuidGeneratorPage from '../../pages/uuidGeneratorPage/UuidGeneratorPage';
1919
import QrGeneratorPage from '../../pages/qrGeneratorPage/QrGeneratorPage';
2020
import SettingsPage from '../../pages/settingsPage/SettingsPage';
21+
import AboutPage from '../../pages/aboutPage/AboutPage';
22+
import CodeFormatterPage from '../../pages/codeFormatterPage/CodeFormatterPage';
23+
import DiffEditorPage from '../../pages/DiffEditorPage';
2124

2225
export interface AppRoute extends Omit<RouteProps, 'element'> {
2326
path: string;
@@ -40,7 +43,10 @@ type AppRoutesMap = Readonly<{
4043
unitConverter: AppRoute;
4144
snakeGame: AppRoute;
4245
uuidGenerator: AppRoute;
46+
diffEditor: AppRoute;
47+
codeFormatter: AppRoute;
4348
settings: AppRoute;
49+
about: AppRoute;
4450
}>;
4551

4652
export const routes: AppRoutesMap = {
@@ -114,10 +120,25 @@ export const routes: AppRoutesMap = {
114120
component: UuidGeneratorPage,
115121
title: 'UUID Generator'
116122
},
123+
diffEditor: {
124+
path: '/tools/files-diff',
125+
component: DiffEditorPage,
126+
title: 'Diff Editor'
127+
},
128+
codeFormatter: {
129+
path: '/tools/code-formatter',
130+
component: CodeFormatterPage,
131+
title: 'Code Formatter'
132+
},
117133
settings: {
118134
path: '/settings',
119135
component: SettingsPage,
120136
title: 'Settings'
137+
},
138+
about: {
139+
path: '/about',
140+
component: AboutPage,
141+
title: 'About'
121142
}
122143
};
123144

src/layouts/appLayout/utils/routeMenuItems.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const renderRoute = ({ route, title, icon, isGray }: MenuRouteItem): Item
1313
key: path,
1414
icon: renderComponent(icon),
1515
label: (
16-
<Link to={path ?? ''} className={classNames({ 'opacity-75': isGray })}>
16+
<Link to={path ?? ''} className={classNames({ 'opacity-50': isGray })}>
1717
{title ?? route.title}
1818
</Link>
1919
)

src/pages/DiffEditorPage.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import PageContainer from '../components/pageContainer/PageContainer';
3+
import { DiffEditor } from '@monaco-editor/react';
4+
import useAppTheme from '../hooks/useAppTheme';
5+
import { editor } from 'monaco-editor';
6+
7+
const options: editor.IDiffEditorConstructionOptions = {
8+
originalEditable: true
9+
};
10+
11+
const DiffEditorPage = () => {
12+
const { isDarkMode } = useAppTheme();
13+
14+
return (
15+
<PageContainer title="Diff Editor">
16+
<DiffEditor theme={isDarkMode ? 'vs-dark' : 'light'} options={options} />
17+
</PageContainer>
18+
);
19+
};
20+
21+
export default DiffEditorPage;

src/pages/aboutPage/AboutPage.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import PageContainer from '../../components/pageContainer/PageContainer';
3+
import { Col } from 'antd';
4+
import packageJson from '../../../package.json';
5+
import AppDependency from './components/AppDependency';
6+
import mapObject from '../../utils/mapObject';
7+
import Text from 'antd/lib/typography/Text';
8+
import { ReactComponent as ReactLogo } from '../../assets/img/react-logo.svg';
9+
import ExternalLink from '../../components/ExternalLink';
10+
import Paragraph from 'antd/lib/typography/Paragraph';
11+
import { AntDesignOutlined } from '@ant-design/icons';
12+
13+
const AboutPage = () => {
14+
return (
15+
<PageContainer title="About the app">
16+
<Col>
17+
<Text>
18+
<Paragraph className="mb-1">
19+
This app is created with{' '}
20+
<ExternalLink href="https://github.com/facebook/react" className="ms-1">
21+
<ReactLogo width={12} /> React
22+
</ExternalLink>
23+
</Paragraph>
24+
<Paragraph>
25+
The UI is built with{' '}
26+
<ExternalLink href="https://ant.design" className="ms-1">
27+
<AntDesignOutlined /> Ant Design
28+
</ExternalLink>
29+
</Paragraph>
30+
</Text>
31+
<h2>Used packages</h2>
32+
<h3 className="mt-2">dependencies</h3>
33+
{mapObject(packageJson.dependencies, (key, value, index) => (
34+
<AppDependency key={index} name={key} version={value} />
35+
))}
36+
<h3 className="mt-2">devDependencies</h3>
37+
{mapObject(packageJson.devDependencies, (key, value, index) => (
38+
<AppDependency key={index} name={key} version={value} />
39+
))}
40+
</Col>
41+
</PageContainer>
42+
);
43+
};
44+
45+
export default AboutPage;
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.container {
2+
display: inline-block;
3+
}

0 commit comments

Comments
 (0)