- Add MUI Color Picker component

Client/package-lock.json

@@ -23,6 +23,7 @@
 				"immutability-helper": "^3.1.1",
 				"joi": "17.13.3",
 				"jwt-decode": "^4.0.0",
+				"mui-color-input": "^5.0.1",
 				"react": "^18.2.0",
 				"react-dnd": "^16.0.1",
 				"react-dnd-html5-backend": "^16.0.1",
@@ -335,6 +336,14 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@ctrl/tinycolor": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-4.1.0.tgz",
+			"integrity": "sha512-WyOx8cJQ+FQus4Mm4uPIZA64gbk3Wxh0so5Lcii0aJifqwoVOlfFtorjLE0Hen4OYyHZMXDWqMmaQemBhgxFRQ==",
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/@emotion/babel-plugin": {
 			"version": "11.13.5",
 			"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
@@ -5025,6 +5034,27 @@
 			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
 			"license": "MIT"
 		},
+		"node_modules/mui-color-input": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/mui-color-input/-/mui-color-input-5.0.1.tgz",
+			"integrity": "sha512-50Ws4vhg4UPQSZEZDCNc7vyUBSb9x1bK+bO1o0wxJvQYgeSyg2r7mYDlavpCh+ZvisgBL/98y0GVN6M9901JWg==",
+			"dependencies": {
+				"@ctrl/tinycolor": "^4.1.0"
+			},
+			"peerDependencies": {
+				"@emotion/react": "^11.5.0",
+				"@emotion/styled": "^11.3.0",
+				"@mui/material": "^6.0.0",
+				"@types/react": "^18.0.0",
+				"react": "^18.0.0",
+				"react-dom": "^18.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/nanoid": {
 			"version": "3.3.8",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",

Client/package.json

@@ -26,6 +26,7 @@
 		"immutability-helper": "^3.1.1",
 		"joi": "17.13.3",
 		"jwt-decode": "^4.0.0",
+		"mui-color-input": "^5.0.1",
 		"react": "^18.2.0",
 		"react-dnd": "^16.0.1",
 		"react-dnd-html5-backend": "^16.0.1",

Client/src/Components/Inputs/ColorPicker/index.jsx

@@ -0,0 +1,64 @@
+import PropTypes from "prop-types";
+import { Stack, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { MuiColorInput } from "mui-color-input";
+
+/**
+ *
+ * @param {*} id The ID of the component
+ * @param {*} label The Label of the component
+ * @param {*} value The color value of the component
+ * @param {*} error The error of the component
+ * @param {*} onChange The Change handler function
+ * @param {*} onBlur The Blur handler function
+ * @returns The ColorPicker component
+ * Example usage:
+ * 	<ColorPicker
+ *		id="color"
+ *		label="Color"
+ *		value={form.color}
+ *		error={errors["color"]}
+ *		onChange={handleColorChange}
+ *		onBlur={handleBlur}
+ *		>
+ *	</ColorPicker>
+ */
+const ColorPicker = ({ id, label, value, error, onChange, onBlur }) => {
+	const theme = useTheme();
+	return (
+		<Stack gap={theme.spacing(4)}>
+			<MuiColorInput
+				format="hex"
+				value={value}
+				id={id}
+				label={label}
+				onChange={onChange}
+				onBlur={onBlur}
+			/>
+			{error && (
+				<Typography
+					component="span"
+					className="input-error"
+					color={theme.palette.error.main}
+					mt={theme.spacing(2)}
+					sx={{
+						opacity: 0.8,
+					}}
+				>
+					{error}
+				</Typography>
+			)}
+		</Stack>
+	);
+};
+
+ColorPicker.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string.isRequired,
+	value: PropTypes.string,
+	error: PropTypes.string,
+	onChange: PropTypes.func.isRequired,
+	onBlur: PropTypes.func.isRequired,
+};
+
+export default ColorPicker;