Merge pull request #345 from ashik-75/work

update code editor , base64 , Json to typescript
lifeparticle · Oct 4, 2023 · bc9add8 · bc9add8
2 parents 8f558a9 + 23881ea
commit bc9add8
Show file tree

Hide file tree

Showing 14 changed files with 131 additions and 88 deletions.
diff --git a/ui/CHANGELOG.md b/ui/CHANGELOG.md
@@ -1,3 +1,8 @@
+### [6.3.0] - 2023-10-03
+
+-   Update code editor
+-   update base64 and json to typescript
+
 ### [6.2.0] - 2023-10-03
 
 -   Add code formatter for HTML | CSS | JS | XML | JSON

diff --git a/ui/package.json b/ui/package.json
@@ -20,6 +20,7 @@
 		"@mantine/core": "^6.0.10",
 		"@mantine/ds": "^6.0.10",
 		"@mantine/hooks": "^6.0.10",
+		"@monaco-editor/react": "^4.5.2",
 		"@tabler/icons": "^2.17.0",
 		"@tanstack/react-query": "^4.29.25",
 		"@tinymce/tinymce-react": "^4.3.0",
@@ -82,6 +83,7 @@
 		"@testing-library/user-event": "^14.4.3",
 		"@types/diff": "^5.0.4",
 		"@types/js-beautify": "^1.14.1",
+		"@types/js-yaml": "^4.0.6",
 		"@types/markdown-it": "^13.0.0",
 		"@types/marked": "^5.0.1",
 		"@types/node": "^20.4.4",

diff --git a/...dation/TextareaWithValidation.module.scss → ...General/CodeEditor/CodeEditor.module.scss b/...dation/TextareaWithValidation.module.scss → ...General/CodeEditor/CodeEditor.module.scss
@@ -1,4 +1,4 @@
-.textareaContainer {
+.codeeditor {
 	position: relative;
 	&__validator {
 		position: absolute;

diff --git a/...hValidation/components/ValidateStatus.tsx → .../CodeEditor/components/ValidateStatus.tsx b/...hValidation/components/ValidateStatus.tsx → .../CodeEditor/components/ValidateStatus.tsx
@@ -1,6 +1,6 @@
 import { Space, theme } from "antd";
 import React from "react";
-import style from "components/General/TextareaWithValidation/TextareaWithValidation.module.scss";
+import style from "components/General/CodeEditor/CodeEditor.module.scss";
 import Icon from "components/General/Icon";
 import { ValidateStatusProps } from "./utils/types";
 
@@ -15,15 +15,15 @@ const ValidateStatus: React.FC<ValidateStatusProps> = ({ status }) => {
 
 	return (
 		<Space
-			className={style.textareaContainer__validator}
+			className={style.codeeditor__validator}
 			style={{ backgroundColor: colorBgContainer }}
 		>
 			{status === "valid" ? (
-				<span className={style.textareaContainer__validator__success}>
+				<span className={style.codeeditor__validator__success}>
 					<Icon name="Check" color="green" />
 				</span>
 			) : (
-				<span className={style.textareaContainer__validator__failed}>
+				<span className={style.codeeditor__validator__failed}>
 					<Icon name="X" color="red" />
 				</span>
 			)}

diff --git a/...aWithValidation/components/utils/types.ts → ...eral/CodeEditor/components/utils/types.ts b/...aWithValidation/components/utils/types.ts → ...eral/CodeEditor/components/utils/types.ts
diff --git a/ui/src/components/General/CodeEditor/index.tsx b/ui/src/components/General/CodeEditor/index.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import Editor from "@monaco-editor/react";
+import useMode from "lib/utils/hooks/useMode";
+import { Form } from "antd";
+import style from "./CodeEditor.module.scss";
+import ValidateStatus from "./components/ValidateStatus";
+import { CodeEditorProps } from "./utils/types";
+
+const CodeEditor: React.FC<CodeEditorProps> = ({
+	handleCode,
+	language,
+	code,
+	label,
+	status,
+}) => {
+	const { isDarkMode } = useMode();
+	return (
+		<div className={style.textareaContainer}>
+			<Form.Item label={label}>
+				<Editor
+					value={code}
+					height={"50vh"}
+					language={language || "javascript"}
+					onChange={handleCode}
+					theme={isDarkMode ? "vs-dark" : "light"}
+				/>
+			</Form.Item>
+
+			<ValidateStatus status={status || ""} />
+		</div>
+	);
+};
+
+export default CodeEditor;
diff --git a/ui/src/components/General/CodeEditor/utils/types.ts b/ui/src/components/General/CodeEditor/utils/types.ts
@@ -0,0 +1,9 @@
+interface CodeEditorProps {
+	handleCode: (code: string | undefined) => void;
+	language: string;
+	code: string;
+	label: string;
+	status?: string;
+}
+
+export type { CodeEditorProps };
diff --git a/ui/src/components/General/TextareaWithValidation/index.tsx b/ui/src/components/General/TextareaWithValidation/index.tsx
diff --git a/ui/src/components/General/TextareaWithValidation/utils/types.ts b/ui/src/components/General/TextareaWithValidation/utils/types.ts
diff --git a/ui/src/lib/utils/hooks/useTheme.ts b/ui/src/lib/utils/hooks/useTheme.ts
@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
 
-const useMode = () => {
+const useTheme = () => {
 	const { algorithm, isDarkMode } = useContext(DarkModeContext);
 
 	const THEME = {
@@ -37,4 +37,4 @@ const useMode = () => {
 	return THEME;
 };
 
-export default useMode;
+export default useTheme;
diff --git a/ui/src/pages/Converter/Base64/index.tsx b/ui/src/pages/Converter/Base64/index.tsx
@@ -1,13 +1,11 @@
-import { Card, Form, Input } from "antd";
+import { Card, Form } from "antd";
 import { useEffect, useState } from "react";
 import { Buffer } from "buffer";
 import Clipboard from "components/RenderProps/Clipboard";
 import ClipboardButton from "components/General/ClipboardButton";
 import { isBase64Valid } from "./utils/helper";
-import TextareaWithValidation from "components/General/TextareaWithValidation";
 import PageGrid from "components/Layouts/PageGrid";
-
-const { TextArea } = Input;
+import CodeEditor from "components/General/CodeEditor";
 
 const Base64: React.FC = () => {
 	const [input, setInput] = useState("");
@@ -31,19 +29,16 @@ const Base64: React.FC = () => {
 		<PageGrid>
 			<Card>
 				<Form layout="vertical">
-					<Form.Item label="Text">
-						<TextArea
-							value={input}
-							onChange={(currentValue) => {
-								setInput(currentValue.target.value);
-								onClick("encode", currentValue.target.value);
-							}}
-							placeholder="Decoded text"
-							rows={10}
-							data-gramm={false}
-							allowClear
-						/>
-					</Form.Item>
+					<CodeEditor
+						status={status}
+						label="Text"
+						code={input}
+						language="json"
+						handleCode={(value) => {
+							setInput(value || "");
+							onClick("encode", value || "");
+						}}
+					/>
 
 					<Clipboard
 						text={input}
@@ -54,17 +49,15 @@ const Base64: React.FC = () => {
 
 			<Card>
 				<Form layout="vertical">
-					<TextareaWithValidation
-						value={result}
-						onChange={(currentValue) => {
-							const value = currentValue.target.value;
-							setResult(value);
-							onClick("decode", value);
-						}}
-						rows={10}
-						placeholder="Encoded text"
+					<CodeEditor
 						status={status}
 						label="Base64"
+						code={result}
+						language="json"
+						handleCode={(value) => {
+							setResult(value || "");
+							onClick("decode", value || "");
+						}}
 					/>
 
 					<Clipboard

diff --git a/ui/src/pages/Converter/CodeFormatter/index.tsx b/ui/src/pages/Converter/CodeFormatter/index.tsx
@@ -2,7 +2,6 @@ import React, { useState } from "react";
 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,
@@ -15,6 +14,7 @@ import {
 	INDENTATION_LEVEL,
 	INPUT_TYPE,
 } from "./utils/constants";
+import CodeEditor from "components/General/CodeEditor";
 
 const CodeFormatter: React.FC = () => {
 	const [inputCode, setInputCode] = useState("");
@@ -68,18 +68,16 @@ const CodeFormatter: React.FC = () => {
 							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}
+
+					<CodeEditor
+						code={inputCode}
+						handleCode={(value) => setInputCode(value || "")}
+						language={inputType}
+						label="Enter code"
 					/>
 
+					<br />
+
 					<Space>
 						<ResponsiveButton
 							onClick={formatCode}

diff --git a/ui/src/pages/Converter/JsonToTypescript/index.tsx b/ui/src/pages/Converter/JsonToTypescript/index.tsx
@@ -2,7 +2,6 @@ import JsonToTS from "json-to-ts";
 import { useEffect, useState } from "react";
 import style from "./JsonToTypescript.module.scss";
 import { Card, Form, Space } from "antd";
-import TextareaWithValidation from "components/General/TextareaWithValidation";
 import { isJsonValid } from "./utils/helper";
 import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy";
 import PageGrid from "components/Layouts/PageGrid";
@@ -11,6 +10,7 @@ import {
 	ResponsiveInputWithLabel,
 } from "components/General/FormComponents";
 import Warning from "components/General/Warning";
+import CodeEditor from "components/General/CodeEditor";
 
 const JsonToTypescript: React.FC = () => {
 	const [json, setJson] = useState("");
@@ -43,15 +43,11 @@ const JsonToTypescript: React.FC = () => {
 		<PageGrid className={style.json}>
 			<Card className={style.json__input}>
 				<Form layout="vertical">
-					<TextareaWithValidation
-						value={json}
-						onChange={(e) => {
-							setJson(e.target.value);
-							setInterfaces([]);
-						}}
-						label="JSON Input"
-						placeholder="JSON"
-						rows={8}
+					<CodeEditor
+						label="Enter Json input"
+						language="json"
+						code={json}
+						handleCode={(value) => setJson(value || "")}
 						status={status}
 					/>
 

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -999,6 +999,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@monaco-editor/loader@npm:^1.3.3":
+  version: 1.4.0
+  resolution: "@monaco-editor/loader@npm:1.4.0"
+  dependencies:
+    state-local: ^1.0.6
+  peerDependencies:
+    monaco-editor: ">= 0.21.0 < 1"
+  checksum: 374ec0ea872ee15b33310e105a43217148161480d3955c5cece87d0f801754cd2c45a3f6c539a75da18a066c1615756fb87eaf1003f1df6a64a0cbce5d2c3749
+  languageName: node
+  linkType: hard
+
+"@monaco-editor/react@npm:^4.5.2":
+  version: 4.5.2
+  resolution: "@monaco-editor/react@npm:4.5.2"
+  dependencies:
+    "@monaco-editor/loader": ^1.3.3
+  peerDependencies:
+    monaco-editor: ">= 0.25.0 < 1"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: b739b9012729daaa2acc6bccc100cc6e96770b4a5d3779360775b7c69e9b7a333152d639e554e28395302c5c914ad692951a930ffdb2f21916f3cdbe487916c2
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -1830,6 +1854,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/js-yaml@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "@types/js-yaml@npm:4.0.6"
+  checksum: d4439ec2cc830d355c2a1d7508f49888931b2cfe59d786d27621edd530bf06314b1dceeaa759e21f9b035a0ff623a0ca306752ebb73df9485c02abe045bd962c
+  languageName: node
+  linkType: hard
+
 "@types/json-schema@npm:^7.0.12":
   version: 7.0.12
   resolution: "@types/json-schema@npm:7.0.12"
@@ -3100,6 +3131,7 @@ __metadata:
     "@mantine/core": ^6.0.10
     "@mantine/ds": ^6.0.10
     "@mantine/hooks": ^6.0.10
+    "@monaco-editor/react": ^4.5.2
     "@tabler/icons": ^2.17.0
     "@tanstack/react-query": ^4.29.25
     "@testing-library/jest-dom": ^5.17.0
@@ -3110,6 +3142,7 @@ __metadata:
     "@types/file-saver": ^2.0.5
     "@types/jest": ^29.5.1
     "@types/js-beautify": ^1.14.1
+    "@types/js-yaml": ^4.0.6
     "@types/markdown-it": ^13.0.0
     "@types/marked": ^5.0.1
     "@types/node": ^20.4.4
@@ -9266,6 +9299,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"state-local@npm:^1.0.6":
+  version: 1.0.7
+  resolution: "state-local@npm:1.0.7"
+  checksum: d1afcf1429e7e6eb08685b3a94be8797db847369316d4776fd51f3962b15b984dacc7f8e401ad20968e5798c9565b4b377afedf4e4c4d60fe7495e1cbe14a251
+  languageName: node
+  linkType: hard
+
 "std-env@npm:^3.3.3":
   version: 3.3.3
   resolution: "std-env@npm:3.3.3"