Merge pull request #1566 from ASU/fix-publish-errors

Fix publish errors

Author: davidornelas11

eslint.config.js

@@ -7,6 +7,8 @@ const js = require("@eslint/js");
 const importPlugin = require("eslint-plugin-import");
 const jsxA11y = require("eslint-plugin-jsx-a11y");
 const prettier = require("eslint-plugin-prettier");
+const eslintPluginPrettier = require("eslint-config-prettier");
+const eslintPluginReactHooks = require("eslint-plugin-react-hooks");
 
 module.exports = [
   js.configs.recommended,
@@ -31,6 +33,8 @@ module.exports = [
       import: importPlugin,
       "jsx-a11y": jsxA11y,
       prettier,
+      eslintPluginPrettier,
+      "react-hooks": eslintPluginReactHooks,
     },
     settings: {
       react: {
@@ -51,6 +55,12 @@ module.exports = [
       "react/jsx-no-useless-fragment": "off",
       "react/require-default-props": "off",
       "react/jsx-props-no-spreading": "off",
+      "react/jsx-uses-vars": "error", // Marks JSX variables as used
+      "react/jsx-uses-react": "error", // Marks React as used in JSX files
+
+      // React Hooks rules
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
 
       // Import rules
       "import/no-relative-packages": "off",
@@ -74,7 +84,8 @@ module.exports = [
       "no-console": 1,
       "no-unused-vars": ["warn", {
         argsIgnorePattern: "^_",
-        varsIgnorePattern: "^(React|_)",
+        varsIgnorePattern: "^(React|_|expect|test|describe|it|beforeEach|afterEach|beforeAll|afterAll|jest|vi|fixture|page)$",
+        ignoreRestSiblings: true,
       }],
       "no-undef": "off", // Disable for config files and test files
 
@@ -110,6 +121,7 @@ module.exports = [
       import: importPlugin,
       "jsx-a11y": jsxA11y,
       prettier,
+      "react-hooks": eslintPluginReactHooks,
     },
     settings: {
       react: {
@@ -141,11 +153,16 @@ module.exports = [
         extensions: [".js", ".jsx", ".ts", ".tsx"],
       }],
       "@typescript-eslint/ban-ts-comment": ["warn"],
-      "no-unused-vars": "off",
+      "no-unused-vars": ["warn", {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^(React|_|expect|test|describe|it|beforeEach|afterEach|beforeAll|afterAll|jest|vi|fixture|page)$",
+        ignoreRestSiblings: true,
+      }],
       "react/require-default-props": "off",
-      "@typescript-eslint/no-unused-vars": ["error", {
+      "@typescript-eslint/no-unused-vars": ["warn", {
         argsIgnorePattern: "^_",
-        varsIgnorePattern: "^(React|_)",
+        varsIgnorePattern: "^(React|_|expect|test|describe|it|beforeEach|afterEach|beforeAll|afterAll|jest|vi|fixture|page)$",
+        ignoreRestSiblings: true,
       }],
       "@typescript-eslint/no-empty-function": "off",
 
@@ -160,6 +177,12 @@ module.exports = [
       "no-promise-executor-return": "off",
       "default-param-last": "off",
       "react/jsx-props-no-spreading": "off",
+      "react/jsx-uses-vars": "error", // Marks JSX variables as used
+      "react/jsx-uses-react": "error", // Marks React as used in JSX files
+
+      // React Hooks rules
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
       "prettier/prettier": ["error", {}, {
         usePrettierrc: true,
       }],

package.json

@@ -77,12 +77,12 @@
     "eslint": "^9",
     "eslint-config-prettier": "^8.2.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-import-helpers": "^1.1.0",
+    "eslint-plugin-import-helpers": "^2",
     "eslint-plugin-jest": "^28",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.5.1",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^4",
+    "eslint-plugin-react-hooks": "^5",
     "eslint-plugin-storybook": "^9.0.13",
     "gh-pages": "^6.0.0",
     "globals": "^16.2.0",
@@ -93,7 +93,7 @@
     "mini-css-extract-plugin": "^2.0.0",
     "nunjucks": "^3.2.0",
     "playwright": "1.50.1",
-    "prettier": "^2.2.1",
+    "prettier": "^3",
     "purgecss-webpack-plugin": "^4.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

packages/app-rfi/src/components/AsuRfi/index.js

@@ -63,10 +63,6 @@ const AsuRfi = props => {
     }
   }, []);
 
-  if (typeof submissionUrl === "undefined") {
-    return <></>;
-  }
-
   const rfiState = useRfiState(betterPropNames(props));
 
   const noRfiAvailable = `RFI form not displayed. ${programOfInterest} has rfiDisplay set to false or does not exist`;
@@ -75,6 +71,11 @@ const AsuRfi = props => {
       console.log(noRfiAvailable);
     }
   }, [rfiState.showForm]);
+
+  if (typeof submissionUrl === "undefined") {
+    return <></>;
+  }
+
   if (!rfiState.showForm) {
     return <div style={{ display: "none" }}>{noRfiAvailable}</div>;
   }

packages/app-rfi/src/components/controls/RfiSelect.js

@@ -1,5 +1,4 @@
 // DISABLED@ts-check
-/* eslint-disable no-unused-vars */
 
 import { Field, useField, useFormikContext } from "formik";
 import PropTypes from "prop-types";

packages/shared/assets/index.js

@@ -1,17 +1,6 @@
 import * as _images from "./img/list";
 export { imageName } from "./img/named";
 
-const _imageArray = Object.values(_images).reduce(
-  (result, val) => [...result, val.default],
-  []
-);
-
-export const imageArray = [
-  ..._imageArray,
-  ..._imageArray,
-  ..._imageArray,
-  ..._imageArray,
-  ..._imageArray,
-]; // make it bigger
+export const imageArray = Object.values(_images);
 export const imageAny = () =>
   imageArray[Math.floor(Math.random() * imageArray.length)];

packages/static-site/package.json

@@ -28,7 +28,7 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^5",
     "eslint-plugin-react-refresh": "^0.4.3",
     "typescript": "^5.0.2",
     "vite": "^5.3.5",

packages/unity-bootstrap-theme/src/js/calendar.js

@@ -90,8 +90,8 @@ function initCalendar() {
 
     calendarContainer.innerHTML = `
       <h2><span class="highlight-black">${months[state.month]} ${
-      state.year
-    }</span></h2>
+        state.year
+      }</span></h2>
       <div class="calendar-grid">
         <div class="heading desktop">
           ${desktopDaysOfWeek.map(day => `<p>${day}</p>`).join("")}
@@ -113,8 +113,8 @@ function initCalendar() {
                     : ""
                 }>
                   <span class="${date.todayClass ? date.todayClass : ""}">${
-                  date.date
-                }</span>
+                    date.date
+                  }</span>
                 </h3>`
             )
             .join("")}

packages/unity-react-core/src/components/ComponentCarousel/components/ImageGalleryCarousel/ImageGalleryCarousel.jsx

@@ -8,7 +8,7 @@
  *
  */
 import PropTypes from "prop-types";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 
 import { BaseCarousel } from "../../core/components/BaseCarousel";
 import {
@@ -92,21 +92,26 @@ const htmlTemplate = ({ id, imageSource, imageAltText }) => ({
  * @returns { JSX.Element }
  */
 const CustomNavComponent = ({ instanceName, imageItems, hasContent }) => {
-  if (!imageItems || imageItems.length === 0) {
-    return null;
-  }
   const ATTR_INDEX = "data-current-index";
-  const [title, setTitle] = useState(imageItems[0].title);
-
-  const [content, setContent] = useState(imageItems[0].content);
+  const [title, setTitle] = useState(imageItems?.[0]?.title || "");
+  const [content, setContent] = useState(imageItems?.[0]?.content || "");
 
-  const onItemClick = currentIndex => {
-    const item = imageItems[currentIndex];
-    setTitle(item.title);
-    setContent(item.content);
-  };
+  const onItemClick = useCallback(
+    currentIndex => {
+      const item = imageItems?.[currentIndex];
+      if (item) {
+        setTitle(item.title);
+        setContent(item.content);
+      }
+    },
+    [imageItems]
+  );
 
   useEffect(() => {
+    if (!imageItems || imageItems.length === 0) {
+      return;
+    }
+
     /** @type {HTMLElement} */
     const textArea = document.querySelector(
       `.image-gallery figcaption .uds-caption-text div`
@@ -127,21 +132,35 @@ const CustomNavComponent = ({ instanceName, imageItems, hasContent }) => {
     }
 
     const currentSlider = document.querySelector(`#${instanceName}`);
+    if (!currentSlider) {
+      return;
+    }
 
     function onDataCurrentIndexChange(mutations) {
       for (const mutation of mutations) {
         if (mutation && mutation.attributeName === ATTR_INDEX) {
-          return onItemClick(+currentSlider.getAttribute(ATTR_INDEX));
+          const index = currentSlider.getAttribute(ATTR_INDEX);
+          if (index !== null) {
+            onItemClick(+index);
+          }
+          return;
         }
       }
-      return null;
     }
 
     const observer = new MutationObserver(onDataCurrentIndexChange);
     observer.observe(currentSlider, {
       attributes: true,
     });
-  }, [instanceName]);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [instanceName, imageItems, onItemClick]);
+
+  if (!imageItems || imageItems.length === 0) {
+    return null;
+  }
 
   const bulletItems = imageItems.map(item => item.imageSource);
   return (