From 5c2dba0590602dc25391a0faad72c8af3fb548cd Mon Sep 17 00:00:00 2001 From: MuhammadKhalilzadeh Date: Sun, 12 May 2024 21:32:39 +0330 Subject: [PATCH] polishing --- .../AnnouncementsDualButtonWithIcon.jsx} | 17 +++++++-- .../AnnouncementUpdateSubscription.jsx | 12 ++++++ .../announcementUpdateSubscription.css | 4 +- .../AnnouncementsDualButton.jsx | 10 +++++ .../AnnouncementsMessageBar.jsx | 10 ++++- .../Charts/Servers/ServerStatus.jsx | 8 ++++ .../Charts/Statistics/Statistic.jsx | 7 ++++ .../Icons/ComplexAlert/ComplexAlert.jsx | 6 +++ .../DualButtonPopupModal.jsx | 10 +++++ .../DualButtonPopupModalWithTextfields.jsx | 38 +++++++++++++------ .../Description/DescriptionTextField.jsx | 7 ++++ .../TextFields/Email/EmailTextField.jsx | 12 ++++++ .../TextFields/Website/WebsiteTextField.jsx | 8 ++++ 13 files changed, 131 insertions(+), 18 deletions(-) rename Client/src/{components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.tsx => Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx} (68%) diff --git a/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.tsx b/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx similarity index 68% rename from Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.tsx rename to Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx index 23c8d3047..79776c7c9 100644 --- a/Client/src/components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.tsx +++ b/Client/src/Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon.jsx @@ -3,13 +3,24 @@ import React from "react"; import CloseIcon from "@mui/icons-material/Close"; import PropTypes from "prop-types"; -function AnnouncementsDualButtonWithIcon({ +/** + * @component + * @param {Object} props + * @param {React.ReactNode} props.icon - Optional React node for an announcement icon + * @param {string} props.subject - The announcement subject text + * @param {string} props.body - The announcement body text content + * @param {string} props.esc - The text for the escape button (usually "Close") + * @param {string} props.primary - The text for the primary button + * @returns {JSX.Element} - Renders the announcement dual button with icon component + */ + +const AnnouncementsDualButtonWithIcon = ({ icon, subject, body, esc, primary, -}) { +}) => { return (
{icon &&
{icon}
} @@ -32,7 +43,7 @@ function AnnouncementsDualButtonWithIcon({
); -} +}; AnnouncementsDualButtonWithIcon.propTypes = { icon: PropTypes.object, diff --git a/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx b/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx index 22497ca73..b9390406a 100644 --- a/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx +++ b/Client/src/components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription.jsx @@ -2,6 +2,18 @@ import "./announcementUpdateSubscription.css"; import React from "react"; import PropTypes from "prop-types"; +/** + * @component + * @param {Object} props + * @param {string} props.title - Title text for the update subscription dialog (required) + * @param {string} props.text - Body text for the update subscription dialog (required) + * @param {string} props.cancel - Text for the negative (cancel) button (required) + * @param {string} props.positive - Text for the positive button (required) + * @param {string} props.header - Title text for the email subscription section (required) + * @param {string} props.button - Text for the subscribe button (required) + * @returns {JSX.Element} - Renders the announcement update subscription component + */ + const AnnouncementUpdateSubscription = ({ title, text, diff --git a/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css b/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css index bdffb6e98..0617b10b0 100644 --- a/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css +++ b/Client/src/components/Announcements/AnnouncementUpdateSubscription/announcementUpdateSubscription.css @@ -10,6 +10,7 @@ --update-subscription-color-7: #d0d5dd; --update-subscription-padding-0: 12px 16px; --update-subscription-margin-right: 12px; + --update-subscription-font-size: 13px; --update-subscription-radius-0: 4px; --spacing-1: 16px; --spacing-2: 20px; @@ -58,6 +59,7 @@ border-radius: var(--update-subscription-radius-0); border: 1px solid var(--update-subscription-color-3); background-color: var(--update-subscription-color-2); + font-size: var(--update-subscription-font-size); } .controls-positive, @@ -68,7 +70,7 @@ border: 1px solid var(--update-subscription-color-4); background-color: var(--update-subscription-color-5); color: var(--update-subscription-color-2); - font-size: 13px; + font-size: var(--update-subscription-font-size); } .update-subscription-title { diff --git a/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx b/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx index 8630ed176..70ece178c 100644 --- a/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx +++ b/Client/src/components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton.jsx @@ -3,6 +3,16 @@ import React from "react"; import CloseIcon from "@mui/icons-material/Close"; import PropTypes from "prop-types"; +/** + * @component + * @param {Object} props + * @param {string} props.subject - The announcement subject text + * @param {string} props.body - The announcement body text content + * @param {string} props.esc - The text for the escape button + * @param {string} props.primary - The text for the primary button + * @returns {JSX.Element} - Renders the announcement dual button component + */ + const AnnouncementsDualButton = ({ subject, body, esc, primary }) => { return (
diff --git a/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx b/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx index 023d2e15f..e5cae6124 100644 --- a/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx +++ b/Client/src/components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar.jsx @@ -3,7 +3,13 @@ import React from "react"; import CloseIcon from "@mui/icons-material/Close"; import PropTypes from "prop-types"; -function AnnouncementsMessageBar({ message }) { +/** + * @component + * @param {Object} props + * @param {string} props.message - The announcement message text content (required) + * @returns {JSX.Element} - Renders the announcement message bar component + */ +const AnnouncementsMessageBar = ({ message }) => { return (
{message}
@@ -12,7 +18,7 @@ function AnnouncementsMessageBar({ message }) {
); -} +}; AnnouncementsMessageBar.propTypes = { message: PropTypes.string.isRequired, diff --git a/Client/src/components/Charts/Servers/ServerStatus.jsx b/Client/src/components/Charts/Servers/ServerStatus.jsx index 5916736ed..7e6dfd3dd 100644 --- a/Client/src/components/Charts/Servers/ServerStatus.jsx +++ b/Client/src/components/Charts/Servers/ServerStatus.jsx @@ -2,6 +2,14 @@ import React from "react"; import "./serverStatus.css"; import PropTypes from "prop-types"; +/** + * @component + * @param {Object} props + * @param {string} props.title - The title text for the server status (required) + * @param {string} props.value - The value text to be displayed (required) + * @param {string} props.state - The state of the server (e.g., "online", "offline", "warning") (required) + * @returns {JSX.Element} - Renders the server status component + */ const ServerStatus = ({ title, value, state }) => { return (
diff --git a/Client/src/components/Charts/Statistics/Statistic.jsx b/Client/src/components/Charts/Statistics/Statistic.jsx index 65b639296..44b4f8e03 100644 --- a/Client/src/components/Charts/Statistics/Statistic.jsx +++ b/Client/src/components/Charts/Statistics/Statistic.jsx @@ -2,6 +2,13 @@ import React from "react"; import "./statistic.css"; import PropTypes from "prop-types"; +/** + * @component + * @param {Object} props + * @param {string} props.title - The title text for the statistic (required) + * @param {string} props.value - The numerical or textual value for the statistic (required) + * @returns {JSX.Element} - Renders the statistic component + */ const Statistic = ({ title, value }) => { return (
diff --git a/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx b/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx index d80144c12..67af3ab88 100644 --- a/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx +++ b/Client/src/components/Icons/ComplexAlert/ComplexAlert.jsx @@ -3,6 +3,12 @@ import React from "react"; import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; import PropTypes from "prop-types"; +/** + * @component + * @param {Object} props + * @param {"red" | "green"} props.theme - The color theme for the alert (required) - must be either "red" or "green" + * @returns {JSX.Element} - Renders the complex alert component with dynamic color theme + */ const ComplexAlert = ({ theme }) => { if (theme === "red") { return ( diff --git a/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx b/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx index b781849e5..3432fb5c0 100644 --- a/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx +++ b/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx @@ -2,6 +2,16 @@ import "./dualButtonPopupModal.css"; import React from "react"; import PropTypes from "prop-types"; +/** + * @component + * @param {Object} props + * @param {boolean} [props.open=true] - Controls the visibility of the modal (defaults to true) + * @param {string} props.subject - The title text for the modal (required) + * @param {string} props.description - The description text for the modal (required) + * @param {string} props.esc - The text for the discard button (usually "Cancel", "Dismiss" or "Discard") (required) + * @param {string} props.save - The text for the save button (required) + * @returns {JSX.Element} - Renders the dual button popup modal component + */ const DualButtonPopupModal = ({ open = true, subject, diff --git a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx index 64d74eda4..527428eaf 100644 --- a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx +++ b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx @@ -3,7 +3,30 @@ import React from "react"; import CloseIcon from "@mui/icons-material/Close"; import PropTypes from "prop-types"; -function DualButtonPopupModalWithTextfields({ title, esc, save }) { +/** + * @component + * @param {Object} props + * @param {string} props.title - The title text for the modal (required) + * @returns {JSX.Element} - Renders a single text field component within a popup modal + */ +const PopupModalTextfield = ({ title }) => { + return ( +
+
{title}
+ +
+ ); +}; + +/** + * @component + * @param {Object} props + * @param {string} props.title - The title text for the modal (required) + * @param {string} props.esc - The text for the cancel button (required) + * @param {string} props.save - The text for the save button (required) + * @returns {JSX.Element} - Renders the dual button popup modal component with text fields + */ +const DualButtonPopupModalWithTextfields = ({ title, esc, save }) => { return (
@@ -13,7 +36,7 @@ function DualButtonPopupModalWithTextfields({ title, esc, save }) {
- {PopupModalTextfield()} +
@@ -22,7 +45,7 @@ function DualButtonPopupModalWithTextfields({ title, esc, save }) {
); -} +}; DualButtonPopupModalWithTextfields.propTypes = { title: PropTypes.string.isRequired, @@ -31,12 +54,3 @@ DualButtonPopupModalWithTextfields.propTypes = { }; export default DualButtonPopupModalWithTextfields; - -function PopupModalTextfield() { - return ( -
-
Name
- -
- ); -} diff --git a/Client/src/components/TextFields/Description/DescriptionTextField.jsx b/Client/src/components/TextFields/Description/DescriptionTextField.jsx index e69a430f0..d57f213a1 100644 --- a/Client/src/components/TextFields/Description/DescriptionTextField.jsx +++ b/Client/src/components/TextFields/Description/DescriptionTextField.jsx @@ -3,6 +3,13 @@ import "./descriptionTextField.css"; import { TextField } from "@mui/material"; import PropTypes from "prop-types"; +/** + * @component + * @param {Object} props + * @param {string} props.hintText - The hint text displayed within the text field (required) + * @param {boolean} props.hasError - A flag indicating if the text field has an error (required) + * @returns {JSX.Element} - Renders the description text field component + */ const DescriptionTextField = ({ hintText, hasError }) => { return (
diff --git a/Client/src/components/TextFields/Email/EmailTextField.jsx b/Client/src/components/TextFields/Email/EmailTextField.jsx index a48450be9..42c19acd4 100644 --- a/Client/src/components/TextFields/Email/EmailTextField.jsx +++ b/Client/src/components/TextFields/Email/EmailTextField.jsx @@ -4,6 +4,18 @@ import { InputAdornment, TextField } from "@mui/material"; import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; +/** + * @component + * @param {Object} props + * @param {string} props.id - Unique ID for the text field (optional) + * @param {string} props.label - The label text displayed above the text field (optional) + * @param {"standard" | "outlined" | "filled"} props.variant - The variant of the text field (e.g., "outlined") (optional) + * @param {string} props.placeholder - The placeholder text displayed within the text field (optional) + * @param {"error" | "help"} [props.icon] - The type of icon to display (error or help) (optional) + * @param {string} props.helperText - The helper text displayed below the text field (optional) + * @param {boolean} props.error - A flag indicating if the text field has an error (required) + * @returns {JSX.Element} - Renders the email text field component with dynamic icon display + */ const EmailTextField = ({ id, label, diff --git a/Client/src/components/TextFields/Website/WebsiteTextField.jsx b/Client/src/components/TextFields/Website/WebsiteTextField.jsx index 37a628a38..45555f3cb 100644 --- a/Client/src/components/TextFields/Website/WebsiteTextField.jsx +++ b/Client/src/components/TextFields/Website/WebsiteTextField.jsx @@ -3,6 +3,14 @@ import "./websiteTextField.css"; import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; +/** + * @component + * @param {Object} props + * @param {boolean} [props.showHelp=true] - Controls the visibility of the help icon (defaults to true) + * @param {boolean} [props.hasCopyButton=false] - Controls the visibility of the copy button (defaults to false) + * @param {string} props.hintText - The hint text displayed below the text field (required) + * @returns {JSX.Element} - Renders the website text field component with optional help and copy features + */ const WebsiteTextField = ({ showHelp = true, hasCopyButton = false,