Checkbox component (#469)

* Implemented checkbox component

* Added jsdocs and proptypes

Client/src/Components/Inputs/Checkbox/index.css

@@ -0,0 +1,15 @@
+.checkbox-wrapper {
+  border-radius: var(--env-var-radius-1);
+}
+.checkbox-wrapper:not(:has(.Mui-disabled)):hover {
+  background-color: var(--env-var-color-15);
+}
+.checkbox-wrapper span.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-2);
+  line-height: 1;
+}
+.checkbox-wrapper .MuiButtonBase-root {
+  margin-right: var(--env-var-spacing-1);
+  padding: 0;
+}

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

@@ -0,0 +1,84 @@
+import PropTypes from "prop-types";
+import { FormControlLabel, Checkbox as MuiCheckbox } from "@mui/material";
+import CheckboxOutline from "../../../assets/icons/checkbox-outline.svg?react";
+import CheckboxFilled from "../../../assets/icons/checkbox-filled.svg?react";
+
+import "./index.css";
+
+/**
+ * @param {Object} props
+ * @param {string} props.id - The id attribute for the checkbox input.
+ * @param {string} props.label - The label to display next to the checkbox.
+ * @param {('small' | 'medium' | 'large')} - The size of the checkbox.
+ * @param {boolean} props.isChecked - Whether the checkbox is checked or not.
+ * @param {string} [props.value] - The value of the checkbox input.
+ * @param {function} [props.onChange] - The function to call when the checkbox value changes.
+ * @param {boolean} [props.isDisabled] - Whether the checkbox is disabled or not.
+ *
+ * @returns {JSX.Element}
+ * 
+ * @example
+ * <Checkbox
+ *  id="checkbox-id"
+ *  label="Ping monitoring"
+ *  isChecked={checks.type === "ping"}
+ *  value="ping"
+ *  onChange={handleChange}
+ * />
+ */
+
+const Checkbox = ({
+  id,
+  label,
+  size = "medium",
+  isChecked,
+  value,
+  onChange,
+  isDisabled,
+}) => {
+  const sizes = { small: "14px", medium: "16px", large: "18px" };
+
+  return (
+    <FormControlLabel
+      className="checkbox-wrapper"
+      control={
+        <MuiCheckbox
+          checked={isDisabled ? false : isChecked}
+          value={value}
+          onChange={onChange}
+          icon={<CheckboxOutline />}
+          checkedIcon={<CheckboxFilled />}
+          inputProps={{
+            "aria-label": "controlled checkbox",
+            id: id,
+          }}
+          sx={{
+            "&:hover": { backgroundColor: "transparent" },
+            "& svg": { width: sizes[size], height: sizes[size] },
+          }}
+        />
+      }
+      label={label}
+      disabled={isDisabled}
+      sx={{
+        p: "5px",
+        m: "-5px",
+        "& .MuiButtonBase-root": {
+          width: "20px",
+        },
+      }}
+    />
+  );
+};
+
+Checkbox.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+  isChecked: PropTypes.bool.isRequired,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  isDisabled: PropTypes.bool,
+};
+
+export default Checkbox;

Client/src/assets/icons/checkbox-filled.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H14C17.3137 0 20 2.68629 20 6V14C20 17.3137 17.3137 20 14 20H6C2.68629 20 0 17.3137 0 14V6Z" fill="#1570EF"/>
+<path d="M14.6668 6.5L8.25016 12.9167L5.3335 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

Client/src/assets/icons/checkbox-outline.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 6C0.5 2.96243 2.96243 0.5 6 0.5H14C17.0376 0.5 19.5 2.96243 19.5 6V14C19.5 17.0376 17.0376 19.5 14 19.5H6C2.96243 19.5 0.5 17.0376 0.5 14V6Z" stroke="#848b97"/>
+</svg>