diff --git a/Client/src/Components/Inputs/Checkbox/index.jsx b/Client/src/Components/Inputs/Checkbox/index.jsx index 3d10914c6..054f43b92 100644 --- a/Client/src/Components/Inputs/Checkbox/index.jsx +++ b/Client/src/Components/Inputs/Checkbox/index.jsx @@ -3,31 +3,47 @@ import { FormControlLabel, Checkbox as MuiCheckbox } from "@mui/material"; import { useTheme } from "@emotion/react"; 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. + * Checkbox Component * - * @returns {JSX.Element} + * A customized checkbox component using Material-UI that supports custom sizing, + * disabled states, and custom icons. + * + * @component + * @param {Object} props - Component properties + * @param {string} props.id - Unique identifier for the checkbox input + * @param {string} [props.name] - Optional name attribute for the checkbox + * @param {(string|React.ReactNode)} props.label - Label text or node for the checkbox + * @param {('small'|'medium'|'large')} [props.size='medium'] - Size of the checkbox icon + * @param {boolean} props.isChecked - Current checked state of the checkbox + * @param {string} [props.value] - Optional value associated with the checkbox + * @param {Function} [props.onChange] - Callback function triggered when checkbox state changes + * @param {boolean} [props.isDisabled] - Determines if the checkbox is disabled + * + * @returns {React.ReactElement} Rendered Checkbox component * * @example + * // Basic usage * + * + * @example + * // With custom size and disabled state + * */ - const Checkbox = ({ id, name, diff --git a/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx b/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx index e87d46de3..3220582a8 100644 --- a/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx +++ b/Client/src/Pages/Infrastructure/CreateMonitor/CustomThreshold/index.jsx @@ -13,15 +13,17 @@ import PropTypes from "prop-types"; * @component * @param {Object} props - Component properties * @param {string} [props.checkboxId] - Optional unique identifier for the checkbox + * @param {string} [props.checkboxName] - Optional name attribute for the checkbox * @param {string} props.checkboxLabel - Label text for the checkbox * @param {boolean} props.isChecked - Current checked state of the checkbox * @param {Function} props.onCheckboxChange - Callback function when checkbox is toggled * @param {string} props.fieldId - Unique identifier for the input field + * @param {string} [props.fieldName] - Optional name attribute for the input field * @param {string} props.fieldValue - Current value of the input field * @param {Function} props.onFieldChange - Callback function when input field value changes * @param {Function} props.onFieldBlur - Callback function when input field loses focus * @param {string} props.alertUnit - Unit label displayed next to the input field - * @param {Object} props.errors - Object containing validation errors + * @param {Object} props.errors - Object containing validation errors for the field * @param {Object} props.infrastructureMonitor - Infrastructure monitor configuration object * * @returns {React.ReactElement} Rendered CustomThreshold component @@ -29,10 +31,12 @@ import PropTypes from "prop-types"; * @example *