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

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

@@ -4,7 +4,7 @@ import Icon from "components/General/Icon";
 import style from "./Drawer.module.scss";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { ResponsiveButton } from "components/General/FormComponents";
-import { BeamDetail } from "components/Hoc/withPageTitle/utils/constants";
+import { BeamDetail } from "data/beamData";
 
 interface DrawerProps {
 	beamObject: BeamDetail[];

ui/src/components/General/HelpIcon/components/Help/index.tsx

@@ -1,4 +1,4 @@
-import { HelpEntry } from "components/Hoc/withPageTitle/utils/constants";
+import { HelpEntry } from "data/helpData";
 import React from "react";
 
 interface HelpProps {

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Button, Modal } from "antd";
 import Icon from "components/General/Icon";
 import Help from "./components/Help";
-import { HelpEntry } from "components/Hoc/withPageTitle/utils/constants";
+import { HelpEntry } from "data/helpData";
 
 interface HelpIconProps {
 	helpObject: HelpEntry;

ui/src/components/Hoc/withPageTitle/utils/constants.ts

@@ -1,41 +1,3 @@
-import { routesById } from "data/routeData";
-
-type HelpEntry = {
-	description: string;
-};
-
-interface Help {
-	[key: string]: HelpEntry;
-}
-
-interface MapDetail {
-	from: string;
-	to: string;
-}
-
-interface QueryParamDetail {
-	map: MapDetail;
-}
-
-interface BeamDetail {
-	name: string;
-	url: string;
-	queryParams: QueryParamDetail[];
-}
-
-interface Beam {
-	[key: string]: BeamDetail[];
-}
-
-const HELP: Help = {
-	[routesById.colorpicker.id]: {
-		description: "Color generator tool",
-	},
-	[routesById.shadesandtints.id]: {
-		description: "Color generator tool",
-	},
-};
-
 const NO_PADDING = [
 	"BinaryTree: Developer Productivity Tools",
 	"About",
@@ -54,22 +16,4 @@ const NO_TITLE = [
 	"Feedback",
 ];
 
-const BEAM: Beam = {
-	[routesById.colorpicker.id]: [
-		{
-			name: routesById.shadesandtints.title,
-			url: routesById.shadesandtints.path,
-			queryParams: [{ map: { from: "color", to: "color" } }],
-		},
-	],
-	[routesById.shadesandtints.id]: [
-		{
-			name: routesById.colorpicker.title,
-			url: routesById.colorpicker.path,
-			queryParams: [{ map: { from: "color", to: "color" } }],
-		},
-	],
-};
-
-export type { HelpEntry, BeamDetail, Beam, QueryParamDetail };
-export { HELP, NO_PADDING, NO_TITLE, BEAM };
+export { NO_PADDING, NO_TITLE };

ui/src/components/Hoc/withPageTitle/utils/hooks.ts

@@ -1,6 +1,7 @@
+import { BEAM } from "data/beamData";
+import { HELP } from "data/helpData";
 import { routes } from "data/routeData";
 import { useLocation } from "react-router-dom";
-import { BEAM, HELP } from "./constants";
 
 const usePageTitle = () => {
 	const { pathname } = useLocation();

ui/src/data/beamData.ts

@@ -0,0 +1,41 @@
+import { routesById } from "data/routeData";
+import { PARAMS } from "./paramsData";
+
+interface MapDetail {
+	from: string;
+	to: string;
+}
+
+interface QueryParamDetail {
+	map: MapDetail;
+}
+
+interface BeamDetail {
+	name: string;
+	url: string;
+	queryParams: QueryParamDetail[];
+}
+
+interface Beam {
+	[key: string]: BeamDetail[];
+}
+
+const BEAM: Beam = {
+	[routesById.colorpicker.id]: [
+		{
+			name: routesById.shadesandtints.title,
+			url: routesById.shadesandtints.path,
+			queryParams: [{ map: { from: PARAMS.color, to: PARAMS.color } }],
+		},
+	],
+	[routesById.shadesandtints.id]: [
+		{
+			name: routesById.colorpicker.title,
+			url: routesById.colorpicker.path,
+			queryParams: [{ map: { from: PARAMS.color, to: PARAMS.color } }],
+		},
+	],
+};
+
+export type { BeamDetail, Beam, QueryParamDetail };
+export { BEAM };

ui/src/data/helpData.ts

@@ -0,0 +1,21 @@
+import { routesById } from "data/routeData";
+
+type HelpEntry = {
+	description: string;
+};
+
+interface Help {
+	[key: string]: HelpEntry;
+}
+
+const HELP: Help = {
+	[routesById.colorpicker.id]: {
+		description: "Color generator tool",
+	},
+	[routesById.shadesandtints.id]: {
+		description: "Color generator tool",
+	},
+};
+
+export type { HelpEntry };
+export { HELP };

ui/src/data/menuData.ts

@@ -1,6 +1,5 @@
 import { MenuProps } from "antd";
 import { IconName } from "components/General/Icon";
-
 import { getItem } from "components/Layouts/Menu/utils/helper";
 import { routesById } from "data/routeData";
 

ui/src/data/paramsData.ts

@@ -0,0 +1,5 @@
+export const PARAMS = {
+	color: "color",
+	format: "format",
+	percentage: "percentage",
+};

ui/src/hooks/useCombinedKeyPress.ts

@@ -18,7 +18,6 @@ function useCombinedKeyPress(
 
 	const handleKeyDown = useCallback(
 		(event: KeyboardEvent) => {
-			event.preventDefault();
 			const key = event.key.toLowerCase();
 			if (!pressedKeys.includes(key)) {
 				setPressedKeys((prev) => [...prev, key]);
@@ -29,7 +28,6 @@ function useCombinedKeyPress(
 
 	const handleKeyUp = useCallback(
 		(event: KeyboardEvent) => {
-			event.preventDefault();
 			const key = event.key.toLowerCase();
 			if (pressedKeys.includes(key)) {
 				const filteredKeys = pressedKeys.filter((key) => key !== key);
@@ -48,7 +46,7 @@ function useCombinedKeyPress(
 		};
 	}, [handleKeyDown, handleKeyUp]);
 
-	function compareArrays(pressedArray: string[], mainArray: string[]) {
+	const compareArrays = (pressedArray: string[], mainArray: string[]) => {
 		if (pressedArray?.length !== mainArray?.length) return false;
 
 		for (const iterator of mainArray) {
@@ -59,7 +57,7 @@ function useCombinedKeyPress(
 		}
 
 		return true;
-	}
+	};
 }
 
 export default useCombinedKeyPress;

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

@@ -12,29 +12,29 @@ import CopyInput from "components/Layouts/CopyInput";
 import { ResponsiveInputWithLabel } from "components/General/FormComponents";
 import useParamsValue from "hooks/useParamsValue";
 import { useDebounce } from "hooks/useDebounce";
-
 import { FORMAT_LABELS } from "./utils/constants";
+import { PARAMS } from "data/paramsData";
 
 type FormatType = Lowercase<(typeof FORMAT_LABELS)[number]>;
 
 const ColorPicker: React.FC = () => {
 	const { searchParams, updateParamsValue } = useParamsValue({
-		color: INITIAL_COLOR,
-		format: INITIAL_FORMAT,
+		[PARAMS.color]: INITIAL_COLOR,
+		[PARAMS.format]: INITIAL_FORMAT,
 	});
 
 	const [colorPickerRan, setColorPickerRan] = useState(false);
 	const [formatState, setFormatState] = useState(
-		searchParams.get("color") || ""
+		searchParams.get(PARAMS.color) || ""
 	);
-	const color = String(searchParams.get("color"));
-	const format = String(searchParams.get("format")) as FormatType;
+	const color = String(searchParams.get(PARAMS.color));
+	const format = String(searchParams.get(PARAMS.format)) as FormatType;
 	const colors = useMemo(() => calculateColors(color), [color]);
 	const debouncedSearchTerm = useDebounce(formatState);
 
 	useEffect(() => {
 		if (debouncedSearchTerm && !colorPickerRan) {
-			updateParamsValue("color", debouncedSearchTerm);
+			updateParamsValue(PARAMS.color, debouncedSearchTerm);
 		}
 	}, [debouncedSearchTerm, updateParamsValue, colorPickerRan]);
 
@@ -48,10 +48,13 @@ const ColorPicker: React.FC = () => {
 								label="Color code"
 								value={color}
 								onChange={(e) => {
-									updateParamsValue("color", e.target.value);
+									updateParamsValue(
+										PARAMS.color,
+										e.target.value
+									);
 									setColorPickerRan(true);
 									updateParamsValue(
-										"format",
+										PARAMS.format,
 										determineFormat(e.target.value)
 									);
 								}}
@@ -66,7 +69,7 @@ const ColorPicker: React.FC = () => {
 							<ColorFormatTags
 								currentFormat={format}
 								onSelect={(format) => {
-									updateParamsValue("format", format);
+									updateParamsValue(PARAMS.format, format);
 								}}
 							/>
 						</Form.Item>

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

@@ -12,6 +12,7 @@ import Colors from "./components/Colors";
 import ColorInputs from "./components/ColorInputs";
 import useParamsValue from "hooks/useParamsValue";
 import { useDebounce } from "hooks/useDebounce";
+import { PARAMS } from "data/paramsData";
 
 interface SelectOption {
 	value: string;
@@ -25,11 +26,11 @@ const ShadesAndTints: React.FC = () => {
 		percentage: DEFAULT_NUM_SHADES.toString(),
 	});
 
-	const [color, setColor] = useState(String(searchParams.get("color")));
+	const [color, setColor] = useState(String(searchParams.get(PARAMS.color)));
 
 	const debouncedSearchTerm = useDebounce(color);
 
-	const percentage = String(searchParams.get("percentage"));
+	const percentage = String(searchParams.get(PARAMS.percentage));
 
 	const [shades, setShades] = useState<string[]>([]);
 	const [tints, setTints] = useState<string[]>([]);
@@ -38,13 +39,13 @@ const ShadesAndTints: React.FC = () => {
 	const [isPending, startTransition] = useTransition();
 
 	const resetInputs = () => {
-		updateParamsValue("color", DEFAULT_COLOR);
-		updateParamsValue("percentage", DEFAULT_NUM_SHADES.toString());
+		updateParamsValue(PARAMS.color, DEFAULT_COLOR);
+		updateParamsValue(PARAMS.percentage, DEFAULT_NUM_SHADES.toString());
 	};
 
 	const clearInputs = () => {
-		updateParamsValue("color", "");
-		updateParamsValue("percentage", "");
+		updateParamsValue(PARAMS.color, "");
+		updateParamsValue(PARAMS.percentage, "");
 	};
 
 	useCombinedKeyPress(resetInputs, ["Meta", "KeyE"]);
@@ -53,7 +54,7 @@ const ShadesAndTints: React.FC = () => {
 	useCombinedKeyPress(resetInputs, ["Meta", "KeyE"]);
 
 	useEffect(() => {
-		updateParamsValue("color", debouncedSearchTerm);
+		updateParamsValue(PARAMS.color, debouncedSearchTerm);
 	}, [debouncedSearchTerm, updateParamsValue]);
 
 	useEffect(() => {
@@ -73,7 +74,7 @@ const ShadesAndTints: React.FC = () => {
 				color={color}
 				handleColorChange={(e) => setColor(e.target.value)}
 				handlePercentageChange={(num) =>
-					num && updateParamsValue("percentage", num.toString())
+					num && updateParamsValue(PARAMS.percentage, num.toString())
 				}
 				setColor={setColor}
 				percentage={Number(percentage)}

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

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

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

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