Add code formatter

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)

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",

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,
+			},
 		],
 	},
 	{

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;
+		}
+	}
+}

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 (
+		<PageGrid className={style.codeformatter}>
+			<Card className={style.codeformatter__input}>
+				<Form layout="vertical">
+					<InputGrid>
+						<ResponsiveSelectWithLabel
+							label="Input Type"
+							value={inputType}
+							defaultActiveFirstOption
+							onSelect={(value) => {
+								setInputType(value);
+							}}
+							options={INPUT_TYPE}
+						/>
+						<ResponsiveSelectWithLabel
+							label="Indentation level"
+							value={indentationLevel}
+							defaultActiveFirstOption
+							onSelect={(value) => {
+								setIndentationLevel(value);
+							}}
+							options={INDENTATION_LEVEL}
+						/>
+					</InputGrid>
+					<TextareaWithValidation
+						value={inputCode}
+						onChange={(e) => {
+							setInputCode(e.target.value);
+							setFormattedCode("");
+						}}
+						label="Input Code"
+						placeholder="Paste code for formatting"
+						rows={12}
+						status={status}
+					/>
+
+					<Space>
+						<ResponsiveButton
+							onClick={formatCode}
+							disabled={inputCode.length === 0 || !inputType}
+						>
+							Format
+						</ResponsiveButton>
+					</Space>
+				</Form>
+			</Card>
+
+			<Card className={style.codeformatter__output}>
+				{formattedCode.toString().length > 0 ? (
+					<CodeHighlightWithCopy
+						codeString={formattedCode.toString()}
+						language={inputType}
+					/>
+				) : (
+					<div className={style.codeformatter__output_warning}>
+						<Warning text="There is no data for the selected type, please provide data first." />
+					</div>
+				)}
+			</Card>
+		</PageGrid>
+	);
+};
+
+export default CodeFormatter;

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 };

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",

ui/src/pages/Routes/utils/types.ts

@@ -23,6 +23,7 @@ type RouteId =
 	| "image"
 	| "interview"
 	| "jsontotypescript"
+	| "codeformatter"
 	| "mimetype"
 	| "mimetype"
 	| "movie"

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,