Added proptypes and jsdocs

Client/src/Components/ProgressBars/index.jsx

@@ -1,5 +1,6 @@
-import React, { useState } from "react";
+import React from "react";
 import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
 import {
   Box,
   IconButton,
@@ -12,16 +13,15 @@ import "./index.css";
 
 /**
  * @param {Object} props - The component props.
+ * @param {JSX.Element} props.icon - The icon element to display (optional).
+ * @param {string} props.label - The label text for the progress item.
+ * @param {string} props.size - The size information for the progress item.
+ * @param {number} props.progress - The current progress value (0-100).
+ * @param {function} props.onClick - The function to handle click events on the remove button.
  * @returns {JSX.Element} The rendered component.
  */
 
-const ProgressUpload = ({
-  icon,
-  label,
-  size,
-  progress = 0,
-  onClick,
-}) => {
+const ProgressUpload = ({ icon, label, size, progress = 0, onClick }) => {
   const theme = useTheme();
   return (
     <Box
@@ -101,4 +101,12 @@ const ProgressUpload = ({
   );
 };
 
+ProgressUpload.propTypes = {
+  icon: PropTypes.element, // JSX element for the icon (optional)
+  label: PropTypes.string.isRequired, // Label text for the progress item
+  size: PropTypes.string.isRequired, // Size information for the progress item
+  progress: PropTypes.number.isRequired, // Current progress value (0-100)
+  onClick: PropTypes.func.isRequired, // Function to handle click events on the remove button
+};
+
 export default ProgressUpload;

Client/src/Components/TextFields/Image/index.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import PropTypes from "prop-types";
 import { Box, IconButton, Stack, TextField, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
@@ -6,8 +7,12 @@ import "./index.css";
 
 /**
  * @param {Object} props - The component props.
+ * @param {string} props.id - The unique identifier for the input field.
+ * @param {string} props.picture - The URL of the image to display.
+ * @param {function} props.onChange - The function to handle file input change.
  * @returns {JSX.Element} The rendered component.
  */
+
 const ImageField = ({ id, picture, onChange }) => {
   const theme = useTheme();
 
@@ -112,4 +117,10 @@ const ImageField = ({ id, picture, onChange }) => {
   );
 };
 
+ImageField.propTypes = {
+  id: PropTypes.string.isRequired,
+  picture: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
 export default ImageField;