diff --git a/Client/src/Components/Avatar/avatar.css b/Client/src/Components/Avatar/index.css similarity index 100% rename from Client/src/Components/Avatar/avatar.css rename to Client/src/Components/Avatar/index.css diff --git a/Client/src/Components/Avatar/Avatar.jsx b/Client/src/Components/Avatar/index.jsx similarity index 100% rename from Client/src/Components/Avatar/Avatar.jsx rename to Client/src/Components/Avatar/index.jsx diff --git a/Client/src/Components/Button/Button.css b/Client/src/Components/Button/index.css similarity index 100% rename from Client/src/Components/Button/Button.css rename to Client/src/Components/Button/index.css diff --git a/Client/src/Components/Button/Button.jsx b/Client/src/Components/Button/index.jsx similarity index 100% rename from Client/src/Components/Button/Button.jsx rename to Client/src/Components/Button/index.jsx diff --git a/Client/src/Components/Label/BaseLabel.jsx b/Client/src/Components/Label/BaseLabel.jsx deleted file mode 100644 index aa23aeab3..000000000 --- a/Client/src/Components/Label/BaseLabel.jsx +++ /dev/null @@ -1,54 +0,0 @@ -import PropTypes from "prop-types"; -import "./BaseLabel.css"; -import { useTheme } from "@mui/material"; - -/** - * @typedef {Object} Styles - * @param {string} [color] - The text color - * @param {string} [backgroundColor] - The background color - * @param {string} [borderColor] - The border color - */ - -/** - * @component - * @param {Object} props - * @param {string} props.label - The label of the label - * @param {Styles} props.styles - CSS Styles passed from parent component - * @param {React.ReactNode} children - Children passed from parent component - * @returns {JSX.Element} - */ - -const BaseLabel = ({ label, styles, children }) => { - const theme = useTheme(); - // Grab the default borderRadius from the theme to match button style - const { borderRadius } = theme.shape; - // Calculate padding for the label to mimic button. Appears to scale correctly, not 100% sure though. - const padding = theme.spacing(1 * 0.75, 2); - - return ( -
- {children} - {label} -
- ); -}; - -BaseLabel.propTypes = { - label: PropTypes.string.isRequired, - styles: PropTypes.shape({ - color: PropTypes.string, - backgroundColor: PropTypes.string, - }), - children: PropTypes.node, -}; - -export default BaseLabel; diff --git a/Client/src/Components/Label/ColoredLabel.jsx b/Client/src/Components/Label/ColoredLabel.jsx deleted file mode 100644 index 744652050..000000000 --- a/Client/src/Components/Label/ColoredLabel.jsx +++ /dev/null @@ -1,67 +0,0 @@ -import { useTheme } from "@mui/material"; -import { PropTypes } from "prop-types"; -import BaseLabel from "./BaseLabel"; - -// Produces a lighter color based on a hex color and a percent -// lightenColor("#067647", 20) will produce a color 20% lighter than #067647 -const lightenColor = (color, percent) => { - let r = parseInt(color.substring(1, 3), 16); - let g = parseInt(color.substring(3, 5), 16); - let b = parseInt(color.substring(5, 7), 16); - - const amt = Math.round((255 * percent) / 100); - - r = r + amt <= 255 ? r + amt : 255; - g = g + amt <= 255 ? g + amt : 255; - b = b + amt <= 255 ? b + amt : 255; - - r = r.toString(16).padStart(2, "0"); - g = g.toString(16).padStart(2, "0"); - b = b.toString(16).padStart(2, "0"); - - return `#${r}${g}${b}`; -}; - -/** - * @component - * @param {Object} props - * @param {string} props.label - The label of the label - * @param {string} props.color - The color of the label, specified in #RRGGBB format - * @returns {JSX.Element} - * @example - * // Render a red label - * - */ - -const ColoredLabel = ({ label, color }) => { - const theme = useTheme(); - // If an invalid color is passed, default to the labelGray color - if ( - typeof color !== "string" || - !/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color) - ) { - color = theme.palette.labelGray.color; - } - - // Calculate lighter shades for border and bg - const borderColor = lightenColor(color, 20); - const bgColor = lightenColor(color, 75); - - return ( - - ); -}; - -ColoredLabel.propTypes = { - label: PropTypes.string.isRequired, - color: PropTypes.string.isRequired, -}; - -export default ColoredLabel; diff --git a/Client/src/Components/Label/StautsLabel.jsx b/Client/src/Components/Label/StautsLabel.jsx deleted file mode 100644 index 108ca0f2f..000000000 --- a/Client/src/Components/Label/StautsLabel.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import PropTypes from "prop-types"; -import BaseLabel from "./BaseLabel"; -import { Box } from "@mui/material"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {'Seen' | 'Waiting' | 'New' | 'Active'} props.status - The status for the label - * @returns {JSX.Element} - * @example - * // Render an active label - * - */ - -const StatusLabel = ({ status }) => { - const theme = useTheme(); - - const colorLookup = { - Seen: theme.palette.labelGray.color, - Waiting: theme.palette.labelRed.color, - New: theme.palette.labelOrange.color, - Active: theme.palette.labelGreen.color, - }; - - // Look up the color for the status, default to labelGray if not found - const color = colorLookup[status] || theme.palette.labelGray.color; - - return ( - - - - ); -}; - -StatusLabel.propTypes = { - status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]), -}; - -export default StatusLabel; diff --git a/Client/src/Components/Label/BaseLabel.css b/Client/src/Components/Label/index.css similarity index 100% rename from Client/src/Components/Label/BaseLabel.css rename to Client/src/Components/Label/index.css diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx new file mode 100644 index 000000000..c47b53cb8 --- /dev/null +++ b/Client/src/Components/Label/index.jsx @@ -0,0 +1,157 @@ +import PropTypes from "prop-types"; +import { Box } from "@mui/material"; +import { useTheme } from "@mui/material"; +import "./index.css"; + +/** + * @typedef {Object} Styles + * @param {string} [color] - The text color + * @param {string} [backgroundColor] - The background color + * @param {string} [borderColor] - The border color + */ + +/** + * @component + * @param {Object} props + * @param {string} props.label - The label of the label + * @param {Styles} props.styles - CSS Styles passed from parent component + * @param {React.ReactNode} children - Children passed from parent component + * @returns {JSX.Element} + */ + +const BaseLabel = ({ label, styles, children }) => { + const theme = useTheme(); + // Grab the default borderRadius from the theme to match button style + const { borderRadius } = theme.shape; + // Calculate padding for the label to mimic button. Appears to scale correctly, not 100% sure though. + const padding = theme.spacing(1 * 0.75, 2); + + return ( +
+ {children} + {label} +
+ ); +}; + +BaseLabel.propTypes = { + label: PropTypes.string.isRequired, + styles: PropTypes.shape({ + color: PropTypes.string, + backgroundColor: PropTypes.string, + }), + children: PropTypes.node, +}; + +// Produces a lighter color based on a hex color and a percent +// lightenColor("#067647", 20) will produce a color 20% lighter than #067647 +const lightenColor = (color, percent) => { + let r = parseInt(color.substring(1, 3), 16); + let g = parseInt(color.substring(3, 5), 16); + let b = parseInt(color.substring(5, 7), 16); + + const amt = Math.round((255 * percent) / 100); + + r = r + amt <= 255 ? r + amt : 255; + g = g + amt <= 255 ? g + amt : 255; + b = b + amt <= 255 ? b + amt : 255; + + r = r.toString(16).padStart(2, "0"); + g = g.toString(16).padStart(2, "0"); + b = b.toString(16).padStart(2, "0"); + + return `#${r}${g}${b}`; +}; + +/** + * @component + * @param {Object} props + * @param {string} props.label - The label of the label + * @param {string} props.color - The color of the label, specified in #RRGGBB format + * @returns {JSX.Element} + * @example + * // Render a red label + * + */ + +const ColoredLabel = ({ label, color }) => { + const theme = useTheme(); + // If an invalid color is passed, default to the labelGray color + if ( + typeof color !== "string" || + !/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color) + ) { + color = theme.palette.labelGray.color; + } + + // Calculate lighter shades for border and bg + const borderColor = lightenColor(color, 20); + const bgColor = lightenColor(color, 75); + + return ( + + ); +}; + +ColoredLabel.propTypes = { + label: PropTypes.string.isRequired, + color: PropTypes.string.isRequired, +}; + +/** + * @component + * @param {Object} props + * @param {'Seen' | 'Waiting' | 'New' | 'Active'} props.status - The status for the label + * @returns {JSX.Element} + * @example + * // Render an active label + * + */ + +const StatusLabel = ({ status }) => { + const theme = useTheme(); + + const colorLookup = { + Seen: theme.palette.labelGray.color, + Waiting: theme.palette.labelRed.color, + New: theme.palette.labelOrange.color, + Active: theme.palette.labelGreen.color, + }; + + // Look up the color for the status, default to labelGray if not found + const color = colorLookup[status] || theme.palette.labelGray.color; + + return ( + + + + ); +}; + +StatusLabel.propTypes = { + status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]), +}; + +export { ColoredLabel, StatusLabel }; diff --git a/Client/src/Components/Link/Link.jsx b/Client/src/Components/Link/index.jsx similarity index 100% rename from Client/src/Components/Link/Link.jsx rename to Client/src/Components/Link/index.jsx diff --git a/Client/src/Components/Link/Link.css b/Client/src/Components/Link/link.css similarity index 100% rename from Client/src/Components/Link/Link.css rename to Client/src/Components/Link/link.css diff --git a/Client/src/Components/ProgressStepper/ProgressStepper.css b/Client/src/Components/ProgressStepper/index.css similarity index 100% rename from Client/src/Components/ProgressStepper/ProgressStepper.css rename to Client/src/Components/ProgressStepper/index.css diff --git a/Client/src/Components/ProgressStepper/ProgressStepper.jsx b/Client/src/Components/ProgressStepper/index.jsx similarity index 100% rename from Client/src/Components/ProgressStepper/ProgressStepper.jsx rename to Client/src/Components/ProgressStepper/index.jsx diff --git a/Client/src/Components/Section/Section.jsx b/Client/src/Components/Section/index.jsx similarity index 98% rename from Client/src/Components/Section/Section.jsx rename to Client/src/Components/Section/index.jsx index 3ce773c81..9c5415385 100644 --- a/Client/src/Components/Section/Section.jsx +++ b/Client/src/Components/Section/index.jsx @@ -10,7 +10,7 @@ import { } from "@mui/material"; import MenuIcon from "@mui/icons-material/Menu"; import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; -import Button from "../Button/Button"; +import Button from "../Button/"; import AddIcon from "@mui/icons-material/Add"; /** diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx index 1c294ba5c..8ee00818b 100644 --- a/Client/src/Pages/Demo/Demo.jsx +++ b/Client/src/Pages/Demo/Demo.jsx @@ -1,7 +1,6 @@ import React from "react"; -import Button from "../../Components/Button/Button"; -import Link from "../../Components/Link/Link"; -import ColoredLabel from "../../Components/Label/ColoredLabel"; +import Button from "../../Components/Button/"; +import Link from "../../Components/Link"; import { useTheme, Switch, @@ -14,13 +13,12 @@ import { Tab, Tabs, } from "@mui/material"; -import StatusLabel from "../../Components/Label/StautsLabel"; -import Avatar from "../../Components/Avatar/Avatar"; -import ProgressStepper from "../../Components/ProgressStepper/ProgressStepper"; +import { ColoredLabel, StatusLabel } from "../../Components/Label/"; +import Avatar from "../../Components/Avatar/"; +import ProgressStepper from "../../Components/ProgressStepper"; import avatarImage from "../../assets/Images/avatar_placeholder.png"; -import Section from "../../Components/Section/Section"; +import Section from "../../Components/Section"; import { DataGrid } from "@mui/x-data-grid"; - import { DatePicker } from "@mui/x-date-pickers/DatePicker"; import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";