Merge remote-tracking branch 'upstream/main' into work

README.md

@@ -24,3 +24,5 @@ Your [opinions and feedback](https://binarytree.dev/feedback) about our service
 Code: The code in this project is licensed under the Apache-2.0 license. See the [LICENSE](LICENSE) file for details.
 
 Logo: The project logo is copyrighted and may not be used without explicit permission.
+
+Hero Image: The project hero image is copyrighted and may not be used without explicit permission.

api/packages.json

@@ -1 +1 @@
-{"packages":[{"key":"react","url":"https://www.npmjs.com/package/react","version":"18.2.0","new":false},{"key":"svelte","url":"https://www.npmjs.com/package/svelte","version":"4.2.1","new":false},{"key":"remix","url":"https://www.npmjs.com/package/remix","version":"2.0.1","new":false},{"key":"gatsby","url":"https://www.npmjs.com/package/gatsby","version":"5.12.6","new":false},{"key":"next","url":"https://www.npmjs.com/package/next","version":"13.5.4","new":false},{"key":"vue","url":"https://www.npmjs.com/package/vue","version":"3.3.4","new":false}],"lastDate":1697329015887}
+{"packages":[{"key":"react","url":"https://www.npmjs.com/package/react","version":"18.2.0","new":false},{"key":"svelte","url":"https://www.npmjs.com/package/svelte","version":"4.2.1","new":false},{"key":"remix","url":"https://www.npmjs.com/package/remix","version":"2.0.1","new":false},{"key":"gatsby","url":"https://www.npmjs.com/package/gatsby","version":"5.12.6","new":false},{"key":"next","url":"https://www.npmjs.com/package/next","version":"13.5.4","new":false},{"key":"vue","url":"https://www.npmjs.com/package/vue","version":"3.3.4","new":false}],"lastDate":1697415379320}

ui/public/resource/platform.json

@@ -89,5 +89,12 @@
 		"subCategory": ["NoSQL", "Spreadsheet", "API"],
 		"url": "https://www.fl0.com/",
 		"socials": []
+	},
+	{
+		"name": "NEON",
+		"category": "Database",
+		"subCategory": ["NoSQL", "Spreadsheet", "API"],
+		"url": "https://neon.tech/",
+		"socials": []
 	}
 ]

ui/src/components/General/PopupSearch/index.tsx

@@ -41,7 +41,7 @@ const PopupSearch: React.FC = () => {
 		);
 	}, [input]);
 
-	useCombinedKeyPress(handleModalOpen, "KeyK");
+	useCombinedKeyPress(handleModalOpen, ["Meta", "k"]);
 
 	return (
 		<Modal

ui/src/hooks/useCombinedKeyPress.ts

@@ -1,45 +1,57 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useState } from "react";
+import useUserAgent from "./useUserAgent";
 
 type CallBackFunction = () => void;
 
+// mapping
+const keymap = new Map([["Meta", "control"]]);
+
 function useCombinedKeyPress(
 	callback: CallBackFunction,
-	keyCode: string
+	keyCodes: string[]
 ): void {
-	const isControlOrCommandKey = useRef(false);
-	const isKeyPressed = useRef(false);
+	const platform = useUserAgent();
+	const [pressedKeys, setPressedKeys] = useState<string[]>([]);
 
 	const handleKeyDown = useCallback(
 		(event: KeyboardEvent) => {
-			const { code } = event;
-			if (event.key === "Control" || event.key === "Meta") {
-				isControlOrCommandKey.current = true;
-			}
-
-			if (isControlOrCommandKey.current && keyCode === code) {
-				event.preventDefault();
-				isKeyPressed.current = true;
+			if (!pressedKeys.includes(event.key)) {
+				const key =
+					platform === "win" ? keymap.get(event.key) : event.key;
+				setPressedKeys((prev) => [...prev, key || ""]);
 			}
 
-			if (isControlOrCommandKey.current && isKeyPressed.current) {
-				callback();
-			}
+			console.log("handleKeyDown", event.key, callback);
 		},
-		[callback, keyCode]
+		[pressedKeys, platform]
 	);
 
+	useEffect(() => {
+		console.log("pressedKeys", pressedKeys);
+		const identifyKey = () => {
+			for (const key of keyCodes) {
+				if (!pressedKeys.includes(key)) {
+					return false;
+				}
+			}
+			return true;
+		};
+		const val = identifyKey();
+		console.log("val", val);
+	}, [pressedKeys, keyCodes]);
+
 	const handleKeyUp = useCallback(
 		(event: KeyboardEvent) => {
-			const { code } = event;
-			if (event.key === "Control" || event.key === "Meta") {
-				isControlOrCommandKey.current = false;
-			}
+			const keyUp =
+				platform === "win" ? keymap.get(event.key) : event.key;
+			console.log("keyUp", keyUp);
+			const filteredKeys = pressedKeys.filter((key) => key !== keyUp);
 
-			if (keyCode === code) {
-				isKeyPressed.current = false;
-			}
+			setPressedKeys(filteredKeys);
+
+			console.log("handleKeyUp", event.key);
 		},
-		[keyCode]
+		[pressedKeys, platform]
 	);
 
 	useEffect(() => {

ui/src/pages/About/components/Credits.tsx

@@ -40,39 +40,39 @@ const CREDITS_DATA: Credits[] = [
 	},
 	{
 		key: "4",
-		name: "unDraw",
-		url: "https://undraw.co/",
-	},
-	{
-		key: "5",
 		name: "Movie for hackers",
 		url: "https://github.com/k4m4/movies-for-hackers",
 	},
 	{
-		key: "6",
+		key: "5",
 		name: "Jigar Panchal",
 		url: "https://unsplash.com/photos/AaqI2ao96KM",
 	},
 	{
-		key: "7",
+		key: "6",
 		name: "Hassaan Here",
 		url: "https://unsplash.com/photos/bKfkhVRAJTQ",
 	},
 	{
-		key: "8",
+		key: "7",
 		name: "Frontend Focus",
 		url: "https://frontendfoc.us/",
 	},
 	{
-		key: "9",
+		key: "8",
 		name: "React Status",
 		url: "https://react.statuscode.com/",
 	},
 	{
-		key: "10",
+		key: "9",
 		name: "Lucide",
 		url: "https://lucide.dev/",
 	},
+	{
+		key: "10",
+		name: "Dudeowl",
+		url: "https://99designs.com.au/profiles/dudeowl",
+	},
 ];
 
 const DATA = CREDITS_DATA.map((credit) => (

ui/src/pages/CSS/BoxShadow/index.tsx

@@ -62,24 +62,24 @@ const BoxShadow = () => {
 							<Slider
 								value={horizontalLength}
 								onChange={(value: number) => {
-									if (value) {
-										setHorizontalLength(value);
-									}
+									setHorizontalLength(value);
 								}}
 								min={-100}
 								max={100}
+								included={false}
+								tooltip={{ open: true }}
 							/>
 						</Form.Item>
 						<Form.Item label="Vertical length">
 							<Slider
 								value={verticalLength}
 								onChange={(value) => {
-									if (value) {
-										setVerticalLength(value);
-									}
+									setVerticalLength(value);
 								}}
 								min={-100}
 								max={100}
+								included={false}
+								tooltip={{ open: true }}
 							/>
 						</Form.Item>
 						<Form.Item label="Blur radius">

ui/src/pages/Colors/ShadesAndTints/index.tsx

@@ -47,8 +47,10 @@ const ShadesAndTints: React.FC = () => {
 		updateParamsValue("percentage", "");
 	};
 
-	useCombinedKeyPress(resetInputs, "KeyE");
-	useCombinedKeyPress(clearInputs, "KeyR");
+	useCombinedKeyPress(resetInputs, ["Meta", "KeyE"]);
+	useCombinedKeyPress(clearInputs, ["Meta", "KeyR"]);
+
+	useCombinedKeyPress(resetInputs, ["Meta", "KeyE"]);
 
 	useEffect(() => {
 		updateParamsValue("color", debouncedSearchTerm);

ui/src/pages/Converter/Image/index.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import styles from "./Image.module.scss";
+
+const Image: React.FC = () => {
+	return <div className={styles.root}></div>;
+};
+
+export default Image;

ui/src/pages/Generator/ImageGeneratorFromColors/index.tsx

@@ -28,12 +28,12 @@ const ImageGeneratorFromColors: React.FC = () => {
 
 	useCombinedKeyPress(
 		() => onTextAreaChange("#FF0000, #00FFFF, #FFFFFF, #C0C0C0, #000000"),
-		"KeyE"
+		["Meta", "KeyE"]
 	);
 
 	useCombinedKeyPress(() => {
 		onTextAreaChange("");
-	}, "KeyR");
+	}, ["Meta", "KeyR"]);
 
 	const onTextAreaChange = (value: string) => {
 		setColors(extractColors(value));

ui/src/pages/Generator/QRcode/index.tsx

@@ -15,6 +15,7 @@ import { DataDetection } from "utils/helper-classes/ DataDetection";
 const { TextArea } = Input;
 
 const detection = new DataDetection(["number", "string", "url"]);
+
 const QRcode: React.FC = () => {
 	const [value, setValue] = useState("");
 	const [dataType, setDataType] = useState("");
@@ -106,7 +107,7 @@ const QRcode: React.FC = () => {
 						</Form.Item>
 					</PageGrid>
 
-					<Form.Item label="Upload Image">
+					<Form.Item label="Upload Iocn">
 						<Input
 							type="file"
 							accept="image/*"

ui/src/pages/Home/components/Hero.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import style from "pages/Home/Home.module.scss";
 import { Typography, Image } from "antd";
-import hero from "assets/Home/hero.svg";
+import hero from "assets/Home/hero.png";
 import { FEATURE_DATA } from "data/featureData";
 
 const { Title } = Typography;

ui/src/pages/Markdown/MarkdownEditor/index.tsx

@@ -17,8 +17,8 @@ const MarkdownEditor: React.FC = () => {
 
 	const { isDarkMode } = useMode();
 
-	useCombinedKeyPress(() => setMarkdown("# Hello, World!"), "KeyE");
-	useCombinedKeyPress(() => setMarkdown(""), "KeyR");
+	useCombinedKeyPress(() => setMarkdown("# Hello, World!"), ["Meta", "KeyE"]);
+	useCombinedKeyPress(() => setMarkdown(""), ["Meta", "KeyR"]);
 
 	const IS_MARKDOWN_EMPTY = markdown.length === 0;
 

ui/src/pages/Markdown/TableOfContent/index.tsx

@@ -23,13 +23,13 @@ const TableOfContent: React.FC = () => {
 			fetchData(
 				"https://raw.githubusercontent.com/lifeparticle/JS-Cheatsheet/main/README.md"
 			),
-		"KeyE"
+		["Meta", "KeyE"]
 	);
 	useCombinedKeyPress(() => {
 		setUrl("");
 		setMarkdown("");
 		setTableOfContents("");
-	}, "KeyR");
+	}, ["Meta", "KeyR"]);
 
 	const onMarkdownChange = (text: string) => {
 		setMarkdown(text);

ui/src/styles/antd-overrides.css

@@ -24,6 +24,7 @@ h5 {
 	padding-left: 32px !important;
 }
 
+.ant-input-textarea-affix-wrapper.ant-input-affix-wrapper > textarea.ant-input,
 .ant-layout-content,
 .notification-container,
 .search_container,