Add linting and test checks

.github/workflows/pr-checks.yml

@@ -0,0 +1,29 @@
+name: PR Checks
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint-and-test:
+    name: Lint and Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Test
+        run: npm test -- --run

lib/catalyst/avatar.jsx

@@ -51,7 +51,7 @@ export function Avatar({
       {/* Add an inset border that sits on top of the image */}
       <span
         className="gw-ring-1 gw-ring-inset gw-ring-black/5 gw-dark:gw-ring-white/5 gw-forced-colors:gw-outline"
-        gw-aria-hidden="gw-true"
+        aria-hidden="true"
       />
     </span>
   );

lib/catalyst/fieldset.jsx

@@ -72,7 +72,7 @@ export function Label({ className, ...props }) {
   );
 }
 
-export function Description({ className, disabled, ...props }) {
+export function Description({ className, ...props }) {
   return (
     <HeadlessDescription
       {...props}
@@ -85,7 +85,7 @@ export function Description({ className, disabled, ...props }) {
   );
 }
 
-export function ErrorMessage({ className, disabled, ...props }) {
+export function ErrorMessage({ className, ...props }) {
   return (
     <HeadlessDescription
       {...props}

lib/catalyst/pagination.jsx

@@ -26,10 +26,10 @@ export function PaginationPrevious({ href = null, children = "Previous" }) {
       >
         <svg
           className="gw-stroke-current"
-          gw-data-slot="gw-icon"
-          gw-viewBox="gw-0 gw-0 gw-16 gw-16"
-          gw-fill="gw-none"
-          gw-aria-hidden="gw-true"
+          data-slot="icon"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
         >
           <path
             d="M2.75 8H13.25M2.75 8L5.25 5.5M2.75 8L5.25 10.5"
@@ -55,10 +55,10 @@ export function PaginationNext({ href = null, children = "Next" }) {
         {children}
         <svg
           className="gw-stroke-current"
-          gw-data-slot="gw-icon"
-          gw-viewBox="gw-0 gw-0 gw-16 gw-16"
-          gw-fill="gw-none"
-          gw-aria-hidden="gw-true"
+          data-slot="icon"
+          viewBox="0 0 16 16"
+          fill="none"
+          aria-hidden="true"
         >
           <path
             d="M13.25 8L2.75 8M13.25 8L10.75 10.5M13.25 8L10.75 5.5"

lib/catalyst/switch.jsx

@@ -140,7 +140,7 @@ const colors = {
   ],
 };
 
-export function Switch({ color = "dark/zinc", className, children, ...props }) {
+export function Switch({ color = "dark/zinc", className, ...props }) {
   return (
     <HeadlessSwitch
       data-slot="control"

lib/components/button.jsx

@@ -201,6 +201,7 @@ export const Button = React.forwardRef(function Button(
   },
   ref,
 ) {
+  const buttonStyle = outline ? "outline" : plain ? "plain" : style;
   let classes = gwMerge(
     base,
     // styles.base,
@@ -211,9 +212,9 @@ export const Button = React.forwardRef(function Button(
     //   : gwMerge(styles.solid, styles.colors[color ?? "dark/zinc"]),
     radii[radius],
     sizes[size],
-    style === "filled" ? colorsFilled[color] : "",
-    style === "outline" ? colorsOutline[color] : "",
-    style === "plain" ? colorsPlain[color] : "",
+    buttonStyle === "filled" ? colorsFilled[color] : "",
+    buttonStyle === "outline" ? colorsOutline[color] : "",
+    buttonStyle === "plain" ? colorsPlain[color] : "",
     className,
   );
 

lib/components/display/badge.jsx

@@ -41,7 +41,7 @@ export function Badge({ color = "zinc", className, ...props }) {
       colors[color],
       className,
     );
-  }, [className]);
+  }, [className, color]);
   return <span {...props} className={badgeClass} />;
 }
 

lib/components/display/card.jsx

@@ -8,7 +8,7 @@ function Card({ className, children, stretch = false, ...props }) {
       stretch ? "gw-self-stretch" : "",
       className,
     );
-  }, [className]);
+  }, [className, stretch]);
   return (
     <div className={cls} {...props}>
       {children}

lib/components/form/fieldset.jsx

@@ -62,7 +62,7 @@ export function Label({ className, ...props }) {
   return <HeadlessLabel {...props} data-slot="label" className={labelClass} />;
 }
 
-export function Description({ className, disabled, ...props }) {
+export function Description({ className, ...props }) {
   const descriptionClass = useMemo(() => {
     return gwMerge(
       "gw-text-base/6 gw-text-zinc-500 data-[disabled]:gw-opacity-50 sm:gw-text-sm/6 dark:gw-text-zinc-400",
@@ -78,7 +78,7 @@ export function Description({ className, disabled, ...props }) {
   );
 }
 
-export function ErrorMessage({ className, disabled, ...props }) {
+export function ErrorMessage({ className, ...props }) {
   const errorMessageClass = useMemo(() => {
     return gwMerge(
       "gw-text-base/6 gw-text-red-600 data-[disabled]:gw-opacity-50 sm:gw-text-sm/6 dark:gw-text-red-500",

lib/components/layout/container.jsx

@@ -8,7 +8,7 @@ function Container({ className, children, fluid }) {
       fluid ? "gw-max-w-screen" : "gw-max-w-screen-2xl",
       className,
     );
-  }, [className]);
+  }, [className, fluid]);
   return <div className={containerClass}>{children}</div>;
 }
 

lib/components/search.jsx

@@ -40,6 +40,7 @@ function SearchDotGov({ accessKey, affiliate, placeholder, ...props }) {
         setSearchString(e.target.value);
       }}
       onKeyUp={handleKeyUp}
+      placeholder={placeholder}
       {...props}
     />
   );

lib/composite/footer/index.jsx

@@ -89,8 +89,8 @@ function Footer({
   flickrUrl,
   instagramUrl,
   linkedInUrl,
-  usaceLinks,
-  externalLinks,
+  usaceLinks = defaultLinks,
+  externalLinks = defaultOffsiteLinks,
   armyLogo,
   army250Logo,
   usaceLogo,

src/app-pages/documentation/buttons/login-button.jsx

@@ -71,7 +71,7 @@ const componentProps_ProfileDropdown = [
 ];
 
 function validateEmail(email) {
-  const re = /^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/gm;
+  const re = /^[A-Za-z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/gm;
   return re.test(email);
 }
 

src/app-pages/documentation/forms/radio-group.jsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { UsaceBox, Code, Text, H3, RadioGroup } from "../../../../lib";
 import { CodeExample } from "../../../app-components/code-example";
 import PropsTable from "../../../app-components/props-table";
@@ -59,11 +59,15 @@ const FT_TO_METERS_SCALAR = 0.3048;
 function RadioGroupDocs() {
   const [units, setUnits] = useState(null);
   const [value, setValue] = useState(200);
-  useMemo(() => {
+  useEffect(() => {
     if (units?.toLowerCase() == "en")
-      setValue((value / FT_TO_METERS_SCALAR).toFixed(2));
+      setValue((currentValue) =>
+        (currentValue / FT_TO_METERS_SCALAR).toFixed(2),
+      );
     else if (units?.toLowerCase() == "si")
-      setValue((value * FT_TO_METERS_SCALAR).toFixed(2));
+      setValue((currentValue) =>
+        (currentValue * FT_TO_METERS_SCALAR).toFixed(2),
+      );
   }, [units]);
   return (
     <DocsPage breadcrumbs={pageBreadcrumbs}>

src/app-pages/documentation/getting-started/adding-tailwind.jsx

@@ -1,5 +1,4 @@
-import { UsaceBox, Code, Text, H3, H4, Divider, Badge } from "../../../../lib";
-import { CodeBlock } from "../../../app-components/code-block";
+import { UsaceBox, Code, Text, H3, Divider, Badge } from "../../../../lib";
 import { CodeExample } from "../../../app-components/code-example";
 import DocsPage from "../_docs-page";
 import { TbPlayerTrackNext } from "react-icons/tb";

tailwind.config.js

@@ -1,3 +1,5 @@
+import forms from "@tailwindcss/forms";
+
 /** @type {import('tailwindcss').Config} */
 export default {
   prefix: "gw-",
@@ -32,5 +34,5 @@ export default {
     },
   },
   darkMode: "class",
-  plugins: [require("@tailwindcss/forms")],
+  plugins: [forms],
 };