Merge pull request #28 from bluewave-labs/fix/naming-convention

Fixed naming conventions to comply with standard

Client/src/Components/Label/BaseLabel.jsx

@@ -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 (
-    <div
-      className="label"
-      style={{
-        borderRadius: borderRadius,
-        borderColor: theme.palette.tertiary.main,
-        color: theme.palette.tertiary.main,
-        padding: padding,
-        ...styles,
-      }}
-    >
-      {children}
-      {label}
-    </div>
-  );
-};
-
-BaseLabel.propTypes = {
-  label: PropTypes.string.isRequired,
-  styles: PropTypes.shape({
-    color: PropTypes.string,
-    backgroundColor: PropTypes.string,
-  }),
-  children: PropTypes.node,
-};
-
-export default BaseLabel;

Client/src/Components/Label/ColoredLabel.jsx

@@ -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
- * <ColoredLabel label="Label" color="#FF0000" />
- */
-
-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 (
-    <BaseLabel
-      label={label}
-      styles={{
-        color: color,
-        borderColor: borderColor,
-        backgroundColor: bgColor,
-      }}
-    ></BaseLabel>
-  );
-};
-
-ColoredLabel.propTypes = {
-  label: PropTypes.string.isRequired,
-  color: PropTypes.string.isRequired,
-};
-
-export default ColoredLabel;

Client/src/Components/Label/StautsLabel.jsx

@@ -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
- * <StatusLabel status="Active" />
- */
-
-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 (
-    <BaseLabel label={status}>
-      <Box
-        width={12}
-        height={12}
-        bgcolor={color}
-        borderRadius="50%"
-        marginRight={1}
-      />
-    </BaseLabel>
-  );
-};
-
-StatusLabel.propTypes = {
-  status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]),
-};
-
-export default StatusLabel;

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 (
+    <div
+      className="label"
+      style={{
+        borderRadius: borderRadius,
+        borderColor: theme.palette.tertiary.main,
+        color: theme.palette.tertiary.main,
+        padding: padding,
+        ...styles,
+      }}
+    >
+      {children}
+      {label}
+    </div>
+  );
+};
+
+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
+ * <ColoredLabel label="Label" color="#FF0000" />
+ */
+
+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 (
+    <BaseLabel
+      label={label}
+      styles={{
+        color: color,
+        borderColor: borderColor,
+        backgroundColor: bgColor,
+      }}
+    ></BaseLabel>
+  );
+};
+
+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
+ * <StatusLabel status="Active" />
+ */
+
+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 (
+    <BaseLabel label={status}>
+      <Box
+        width={12}
+        height={12}
+        bgcolor={color}
+        borderRadius="50%"
+        marginRight={1}
+      />
+    </BaseLabel>
+  );
+};
+
+StatusLabel.propTypes = {
+  status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]),
+};
+
+export { ColoredLabel, StatusLabel };

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";
 
 /**

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";