refactor: move the validator functions into a seperate file

Author: 0l1v3rr

README.md

@@ -74,6 +74,7 @@ If you would like to use other themes, and add one for yourself and others, plea
 ## ❗ Important
 - We suggest you not put too many badges inside one card, because the loading time can be too slow, and it can overflow the 15s limit, which results in a card that's not displayed. The maximum amount of badges inside one card should be around 16. If you want to display more, do it in two or three cards.
 - If you use our [Demo Website](https://github-readme-tech-stack.vercel.app) to generate and customize your card, and it displays an empty screen, it's because your browser cached the previously deployed names of the JS bundles. In order to resolve this issue, clear your browser's cache or open the site in incognito mode.
+- If you use a badge that has an invalid icon, it results in an inappropriate badge alignment. Please use badges that have valid icons. You can browse between the icons [here](https://simpleicons.org/).
 
 <hr>
 

client/build/asset-manifest.json

@@ -5,6 +5,7 @@ import { FiSave } from "react-icons/fi";
 import SecondaryButton from "../buttons/SecondaryButton";
 import Input from "../input/Input";
 import ColorInput from "../input/ColorInput";
+import { validateHex, validateIconAndLabel } from "../../utils/validate";
 
 interface LinePopupProps {
   isActive: boolean;
@@ -18,31 +19,6 @@ const LinePopup: FC<LinePopupProps> = (props) => {
   const [label, setLabel] = useState<string>("react");
   const [color, setColor] = useState<string>("#3498db");
 
-  const validateIconAndLabel = (
-    val: string,
-    iorl: "icon" | "label"
-  ): string => {
-    if (val.length < 3 || val.length > 32) {
-      return `The ${iorl} should be between 2 and 32 characters.`;
-    }
-
-    return "";
-  };
-
-  const validateHex = (val: string): string => {
-    if (val === "auto") {
-      return "";
-    }
-
-    // starts with #, 3 or 6 characters long, contains only hexadecimal values
-    const hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-    if (!hexColorRegex.test(val)) {
-      return "The color should be a valid hexadecimal color or the value auto.";
-    }
-
-    return "";
-  };
-
   const handleSave = () => {
     props.addBadge({
       color: color,

client/build/index.html

@@ -12,6 +12,7 @@ import NumberInput from "../components/input/NumberInput";
 import TrueFalseInput from "../components/input/TrueFalseInput";
 import Input from "../components/input/Input";
 import SecondaryButton from "../components/buttons/SecondaryButton";
+import { validateBorderRadius } from "../utils/validate";
 
 interface OptionsProps {
   setLink: (link: string) => void;
@@ -56,24 +57,6 @@ const Options: FC<OptionsProps> = (props) => {
     setCard({ ...card, lines: lines });
   };
 
-  const validateBorderRadius = (val: string): string => {
-    const num = parseInt(val);
-
-    if (val.trim() === "") {
-      return "Please provide a border radius!";
-    }
-
-    if (!val.split("").every((x) => "0123456789.".includes(x))) {
-      return "Please provide a valid number!";
-    }
-
-    if (num > 50 || num < 0) {
-      return "Please provide a value between 0 and 50";
-    }
-
-    return "";
-  };
-
   return (
     <section
       className="border border-solid border-gh-border rounded-md 

client/build/static/js/main.384a4c78.js

@@ -0,0 +1,42 @@
+export const validateHex = (val: string): string => {
+  if (val === "auto") {
+    return "";
+  }
+
+  // starts with #, 3 or 6 characters long, contains only hexadecimal values
+  const hexColorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+  if (!hexColorRegex.test(val)) {
+    return "The color should be a valid hexadecimal color or the value auto.";
+  }
+
+  return "";
+};
+
+export const validateIconAndLabel = (
+  val: string,
+  iorl: "icon" | "label"
+): string => {
+  if (val.length < 3 || val.length > 32) {
+    return `The ${iorl} should be between 2 and 32 characters.`;
+  }
+
+  return "";
+};
+
+export const validateBorderRadius = (val: string): string => {
+  const num = parseInt(val);
+
+  if (val.trim() === "") {
+    return "Please provide a border radius!";
+  }
+
+  if (!val.split("").every((x) => "0123456789.".includes(x))) {
+    return "Please provide a valid number!";
+  }
+
+  if (num > 50 || num < 0) {
+    return "Please provide a value between 0 and 50";
+  }
+
+  return "";
+};