From f84cadbd04807bfada0c7cac29e9ae60be1cbf94 Mon Sep 17 00:00:00 2001 From: ashik-75 Date: Tue, 3 Oct 2023 17:26:00 +0600 Subject: [PATCH 1/2] add code-formatter --- ui/package.json | 2 + .../Layouts/Menu/utils/constants.ts | 6 + .../CodeFormatter/CodeFormatter.module.scss | 18 +++ .../pages/Converter/CodeFormatter/index.tsx | 112 ++++++++++++++++++ .../CodeFormatter/utils/constants.ts | 24 ++++ ui/src/pages/Routes/utils/constant.tsx | 8 ++ ui/src/pages/Routes/utils/types.ts | 1 + ui/src/pages/pages.ts | 2 + ui/yarn.lock | 103 +++++++++++++++- 9 files changed, 275 insertions(+), 1 deletion(-) create mode 100644 ui/src/pages/Converter/CodeFormatter/CodeFormatter.module.scss create mode 100644 ui/src/pages/Converter/CodeFormatter/index.tsx create mode 100644 ui/src/pages/Converter/CodeFormatter/utils/constants.ts diff --git a/ui/package.json b/ui/package.json index ce6be663..370b8bd0 100644 --- a/ui/package.json +++ b/ui/package.json @@ -35,6 +35,7 @@ "file-saver": "^2.0.5", "fs-extra": "^11.1.1", "html-to-image": "^1.11.11", + "js-beautify": "^1.14.9", "json-to-ts": "^1.7.0", "jspdf": "^2.5.1", "jszip": "^3.10.1", @@ -80,6 +81,7 @@ "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.3", "@types/diff": "^5.0.4", + "@types/js-beautify": "^1.14.1", "@types/markdown-it": "^13.0.0", "@types/marked": "^5.0.1", "@types/node": "^20.4.4", diff --git a/ui/src/components/Layouts/Menu/utils/constants.ts b/ui/src/components/Layouts/Menu/utils/constants.ts index a74f128e..95392946 100644 --- a/ui/src/components/Layouts/Menu/utils/constants.ts +++ b/ui/src/components/Layouts/Menu/utils/constants.ts @@ -80,6 +80,12 @@ export const MENU_ITEMS = [ icon: "FileOutput", show: true, }, + { + name: routesById.codeformatter.title, + url: routesById.codeformatter.path, + icon: "Code", + show: true, + }, ], }, { diff --git a/ui/src/pages/Converter/CodeFormatter/CodeFormatter.module.scss b/ui/src/pages/Converter/CodeFormatter/CodeFormatter.module.scss new file mode 100644 index 00000000..30c62caf --- /dev/null +++ b/ui/src/pages/Converter/CodeFormatter/CodeFormatter.module.scss @@ -0,0 +1,18 @@ +.codeformatter { + &__input { + display: flex; + flex-direction: column; + height: 100%; + } + + &__output { + height: 100%; + + &_warning { + min-height: 375px; + display: flex; + flex-direction: column; + justify-content: center; + } + } +} diff --git a/ui/src/pages/Converter/CodeFormatter/index.tsx b/ui/src/pages/Converter/CodeFormatter/index.tsx new file mode 100644 index 00000000..83f40934 --- /dev/null +++ b/ui/src/pages/Converter/CodeFormatter/index.tsx @@ -0,0 +1,112 @@ +import React, { useState } from "react"; +import beautify from "js-beautify"; +import style from "./CodeFormatter.module.scss"; +import PageGrid from "components/Layouts/PageGrid"; +import { Card, Form, Space } from "antd"; +import TextareaWithValidation from "components/General/TextareaWithValidation"; +import { + ResponsiveButton, + ResponsiveSelectWithLabel, +} from "components/General/FormComponents"; +import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy"; +import Warning from "components/General/Warning"; +import InputGrid from "components/Layouts/InputGrid"; +import { INDENTATION_LEVEL, INPUT_TYPE } from "./utils/constants"; + +const CodeFormatter: React.FC = () => { + const [inputCode, setInputCode] = useState(""); + const [formattedCode, setFormattedCode] = useState(""); + const [indentationLevel, setIndentationLevel] = useState( + INDENTATION_LEVEL[2].value + ); + const [inputType, setInputType] = useState(INPUT_TYPE[3].value); + + const formatCode = () => { + try { + let formatted = ""; + if (inputType === "html") { + formatted = beautify.html_beautify(inputCode, { + indent_size: Number(indentationLevel), + }); + } else if (inputType === "css") { + formatted = beautify.css_beautify(inputCode, { + indent_size: Number(indentationLevel), + }); + } else { + formatted = beautify.js_beautify(inputCode, { + indent_size: Number(indentationLevel), + }); + } + + setFormattedCode(formatted); + } catch (error) { + setFormattedCode( + "Error formatting code. Check the console for details." + ); + } + }; + + return ( + + +
+ + { + setInputType(value); + }} + options={INPUT_TYPE} + /> + { + setIndentationLevel(value); + }} + options={INDENTATION_LEVEL} + /> + + { + setInputCode(e.target.value); + setFormattedCode(""); + }} + label="Input Code" + placeholder="Paste code for formatting" + rows={12} + status={status} + /> + + + + Format + + + +
+ + + {formattedCode.toString().length > 0 ? ( + + ) : ( +
+ +
+ )} + + + ); +}; + +export default CodeFormatter; diff --git a/ui/src/pages/Converter/CodeFormatter/utils/constants.ts b/ui/src/pages/Converter/CodeFormatter/utils/constants.ts new file mode 100644 index 00000000..ba70020d --- /dev/null +++ b/ui/src/pages/Converter/CodeFormatter/utils/constants.ts @@ -0,0 +1,24 @@ +const INDENTATION_LEVEL = [ + { + value: "2", + label: "2 space per indent level", + }, + { + value: "3", + label: "3 space per indent level", + }, + { + value: "4", + label: "4 space per indent level", + }, +]; + +const INPUT_TYPE = [ + { label: "HTML", value: "html" }, + { label: "CSS", value: "css" }, + { label: "JSON", value: "json" }, + { label: "JavaScript", value: "javascript" }, + { label: "YAML", value: "yaml" }, +]; + +export { INDENTATION_LEVEL, INPUT_TYPE }; diff --git a/ui/src/pages/Routes/utils/constant.tsx b/ui/src/pages/Routes/utils/constant.tsx index 4c73dbde..68483f54 100644 --- a/ui/src/pages/Routes/utils/constant.tsx +++ b/ui/src/pages/Routes/utils/constant.tsx @@ -21,6 +21,7 @@ import { ImageGeneratorFromColors, Interview, JsonToTypescript, + CodeFormatter, MarkdownEditor, Mimetype, Movie, @@ -109,6 +110,13 @@ export const routes: Route[] = [ description: "Turn your JSON into TypeScript's next top model.", component: JsonToTypescript, }, + { + id: "codeformatter", + path: "/converter/code-formatter", + title: "Code Formatter", + description: "Formar HTML, CSS, JavaScript, JSON, YML Code", + component: CodeFormatter, + }, { id: "data", path: "/generator/data", diff --git a/ui/src/pages/Routes/utils/types.ts b/ui/src/pages/Routes/utils/types.ts index 1368badf..8a23c1a3 100644 --- a/ui/src/pages/Routes/utils/types.ts +++ b/ui/src/pages/Routes/utils/types.ts @@ -23,6 +23,7 @@ type RouteId = | "image" | "interview" | "jsontotypescript" + | "codeformatter" | "mimetype" | "mimetype" | "movie" diff --git a/ui/src/pages/pages.ts b/ui/src/pages/pages.ts index 6bb881bf..595bd9c2 100644 --- a/ui/src/pages/pages.ts +++ b/ui/src/pages/pages.ts @@ -18,6 +18,7 @@ const BoxShadow = lazy(() => import("pages/CSS/BoxShadow")); const Base64 = lazy(() => import("pages/Converter/Base64")); const Pixel = lazy(() => import("pages/Converter/Pixel")); const JsonToTypescript = lazy(() => import("pages/Converter/JsonToTypescript")); +const CodeFormatter = lazy(() => import("pages/Converter/CodeFormatter")); const DataGenerator = lazy(() => import("pages/Data/DataGenerator")); const ImageGeneratorFromColors = lazy( @@ -76,6 +77,7 @@ export { ImageGeneratorFromColors, Interview, JsonToTypescript, + CodeFormatter, MarkdownEditor, Mimetype, Npmpackages, diff --git a/ui/yarn.lock b/ui/yarn.lock index 7a5a877e..d64fb5e4 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1166,6 +1166,13 @@ __metadata: languageName: node linkType: hard +"@one-ini/wasm@npm:0.1.1": + version: 0.1.1 + resolution: "@one-ini/wasm@npm:0.1.1" + checksum: 11de17108eae57c797e552e36b259398aede999b4a689d78be6459652edc37f3428472410590a9d328011a8751b771063a5648dd5c4205631c55d1d58e313156 + languageName: node + linkType: hard + "@pkgjs/parseargs@npm:^0.11.0": version: 0.11.0 resolution: "@pkgjs/parseargs@npm:0.11.0" @@ -1816,6 +1823,13 @@ __metadata: languageName: node linkType: hard +"@types/js-beautify@npm:^1.14.1": + version: 1.14.1 + resolution: "@types/js-beautify@npm:1.14.1" + checksum: a7ebff7eef0049dbb66cd319702cf6a95da2baac9758730e412759aa79ca44acae5f41f06f4e73590779e92105879ad4295989bca2af577777dcfa6913f65e21 + languageName: node + linkType: hard + "@types/json-schema@npm:^7.0.12": version: 7.0.12 resolution: "@types/json-schema@npm:7.0.12" @@ -3095,6 +3109,7 @@ __metadata: "@types/diff": ^5.0.4 "@types/file-saver": ^2.0.5 "@types/jest": ^29.5.1 + "@types/js-beautify": ^1.14.1 "@types/markdown-it": ^13.0.0 "@types/marked": ^5.0.1 "@types/node": ^20.4.4 @@ -3120,6 +3135,7 @@ __metadata: file-saver: ^2.0.5 fs-extra: ^11.1.1 html-to-image: ^1.11.11 + js-beautify: ^1.14.9 jsdom: ^22.1.0 json-to-ts: ^1.7.0 jspdf: ^2.5.1 @@ -3237,6 +3253,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:^10.0.0": + version: 10.0.1 + resolution: "commander@npm:10.0.1" + checksum: 436901d64a818295803c1996cd856621a74f30b9f9e28a588e726b2b1670665bccd7c1a77007ebf328729f0139838a88a19265858a0fa7a8728c4656796db948 + languageName: node + linkType: hard + "commander@npm:^2.18.0": version: 2.20.3 resolution: "commander@npm:2.20.3" @@ -3258,6 +3281,16 @@ __metadata: languageName: node linkType: hard +"config-chain@npm:^1.1.13": + version: 1.1.13 + resolution: "config-chain@npm:1.1.13" + dependencies: + ini: ^1.3.4 + proto-list: ~1.2.1 + checksum: 828137a28e7c2fc4b7fb229bd0cd6c1397bcf83434de54347e608154008f411749041ee392cbe42fab6307e02de4c12480260bf769b7d44b778fdea3839eafab + languageName: node + linkType: hard + "console-control-strings@npm:^1.1.0": version: 1.1.0 resolution: "console-control-strings@npm:1.1.0" @@ -3688,6 +3721,20 @@ __metadata: languageName: node linkType: hard +"editorconfig@npm:^1.0.3": + version: 1.0.4 + resolution: "editorconfig@npm:1.0.4" + dependencies: + "@one-ini/wasm": 0.1.1 + commander: ^10.0.0 + minimatch: 9.0.1 + semver: ^7.5.3 + bin: + editorconfig: bin/editorconfig + checksum: 09904f19381b3ddf132cea0762971aba887236f387be3540909e96b8eb9337e1793834e10f06890cd8e8e7bb1ba80cb13e7d50a863f227806c9ca74def4165fb + languageName: node + linkType: hard + "electron-to-chromium@npm:^1.4.477": version: 1.4.491 resolution: "electron-to-chromium@npm:1.4.491" @@ -4565,6 +4612,19 @@ __metadata: languageName: node linkType: hard +"glob@npm:^8.1.0": + version: 8.1.0 + resolution: "glob@npm:8.1.0" + dependencies: + fs.realpath: ^1.0.0 + inflight: ^1.0.4 + inherits: 2 + minimatch: ^5.0.1 + once: ^1.3.0 + checksum: 92fbea3221a7d12075f26f0227abac435de868dd0736a17170663783296d0dd8d3d532a5672b4488a439bf5d7fb85cdd07c11185d6cd39184f0385cbdfb86a47 + languageName: node + linkType: hard + "globals@npm:^11.1.0": version: 11.12.0 resolution: "globals@npm:11.12.0" @@ -5117,7 +5177,7 @@ __metadata: languageName: node linkType: hard -"ini@npm:^1.3.5": +"ini@npm:^1.3.4, ini@npm:^1.3.5": version: 1.3.8 resolution: "ini@npm:1.3.8" checksum: dfd98b0ca3a4fc1e323e38a6c8eb8936e31a97a918d3b377649ea15bdb15d481207a0dda1021efbd86b464cae29a0d33c1d7dcaf6c5672bee17fa849bc50a1b3 @@ -5624,6 +5684,22 @@ __metadata: languageName: node linkType: hard +"js-beautify@npm:^1.14.9": + version: 1.14.9 + resolution: "js-beautify@npm:1.14.9" + dependencies: + config-chain: ^1.1.13 + editorconfig: ^1.0.3 + glob: ^8.1.0 + nopt: ^6.0.0 + bin: + css-beautify: js/bin/css-beautify.js + html-beautify: js/bin/html-beautify.js + js-beautify: js/bin/js-beautify.js + checksum: aea5af03d0e8d5bcdfc9f98d6c6ebdc17076c762123ae79557d271a921438e2c0c422bc56a955119d770bb0f01cb411003534d8ae8dc138eb7af4821f21f8352 + languageName: node + linkType: hard + "js-cookie@npm:^2.2.1": version: 2.2.1 resolution: "js-cookie@npm:2.2.1" @@ -6768,6 +6844,15 @@ __metadata: languageName: node linkType: hard +"minimatch@npm:9.0.1": + version: 9.0.1 + resolution: "minimatch@npm:9.0.1" + dependencies: + brace-expansion: ^2.0.1 + checksum: 97f5f5284bb57dc65b9415dec7f17a0f6531a33572193991c60ff18450dcfad5c2dad24ffeaf60b5261dccd63aae58cc3306e2209d57e7f88c51295a532d8ec3 + languageName: node + linkType: hard + "minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2": version: 3.1.2 resolution: "minimatch@npm:3.1.2" @@ -6777,6 +6862,15 @@ __metadata: languageName: node linkType: hard +"minimatch@npm:^5.0.1": + version: 5.1.6 + resolution: "minimatch@npm:5.1.6" + dependencies: + brace-expansion: ^2.0.1 + checksum: 7564208ef81d7065a370f788d337cd80a689e981042cb9a1d0e6580b6c6a8c9279eba80010516e258835a988363f99f54a6f711a315089b8b42694f5da9d0d77 + languageName: node + linkType: hard + "minimatch@npm:^9.0.1": version: 9.0.3 resolution: "minimatch@npm:9.0.3" @@ -7587,6 +7681,13 @@ __metadata: languageName: node linkType: hard +"proto-list@npm:~1.2.1": + version: 1.2.4 + resolution: "proto-list@npm:1.2.4" + checksum: 4d4826e1713cbfa0f15124ab0ae494c91b597a3c458670c9714c36e8baddf5a6aad22842776f2f5b137f259c8533e741771445eb8df82e861eea37a6eaba03f7 + languageName: node + linkType: hard + "psl@npm:^1.1.33": version: 1.9.0 resolution: "psl@npm:1.9.0" From d4be4b4b82fcfab21230f451ca554f57af7aaef8 Mon Sep 17 00:00:00 2001 From: ashik-75 Date: Tue, 3 Oct 2023 17:27:20 +0600 Subject: [PATCH 2/2] add changelog --- ui/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md index 784063cb..fac2fb7b 100644 --- a/ui/CHANGELOG.md +++ b/ui/CHANGELOG.md @@ -1,3 +1,7 @@ +### [6.2.0] - 2023-10-03 + +- Add code formatter for HTML | CSS | JS | XML | JSON + ### [6.1.0] - 2023-10-02 - Update Pop search modal color (light & dark)