Uds 2197: update or remove pkg to support react 19

packages/app-rfi/package.json

@@ -83,7 +83,6 @@
     "formik": "^2.1.4",
     "prop-types": "^15.7.2",
     "react-phone-input-2": "2.15.1",
-    "reactstrap": "^9",
     "yup": "^0.28.1",
     "yup-phone": "^1.2.19"
   },

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

@@ -9,8 +9,6 @@ import React, { useEffect, useState } from "react";
 // rendering, but otherwise, we only worry about using the correct markup and
 // tweaking a few styles
 
-import { Progress } from "reactstrap";
-
 import { betterPropNames, useRfiState } from "../../core/utils/appState";
 import { DATA_SOURCE } from "../../core/utils/constants";
 import { RfiContext } from "../../core/utils/rfiContext";
@@ -24,7 +22,7 @@ const currentScriptPath = getCurrentScriptPath();
 
 /**
  * @param {import("../../core/types/rfi-types").RFIProps} props
- * @return {JSX.Element}
+ * @return {React.ReactElement}
  */
 const AsuRfi = ({
   appPathFolder = "",

packages/app-rfi/src/components/stepper/RfiStepperButtons.js

@@ -1,7 +1,6 @@
 // @ts-check
 import PropTypes from "prop-types";
 import React from "react";
-import { Button } from "reactstrap";
 
 import { trackGAEvent } from "@asu/shared";
 // Note on the spans around the FA i tags below:
@@ -14,6 +13,17 @@ import { trackGAEvent } from "@asu/shared";
 // The solution I hit on was to wrap the i's with spans so when the DOM
 // rewrite happens, the FA switcheroo is happening a layer below the element
 // that in this case React is trying to remove.
+/**
+ * @param {{
+ *  stepNumber: number,
+ *  totalSteps: number,
+ *  step: { props?: { section?: string } },
+ *  handleBack: () => void,
+ *  rfiSubmitting: boolean,
+ *  formik: { isSubmitting: boolean }
+ * }} props
+ * @returns {React.ReactElement}
+ */
 export const RfiStepperButtons = ({
   stepNumber,
   totalSteps,
@@ -28,7 +38,7 @@ export const RfiStepperButtons = ({
         <div className="row justify-content-end">
           <div className="col-6">
             {stepNumber > 0 ? (
-              <Button
+              <button
                 type="button"
                 className="btn btn-primary"
                 onClick={() => {
@@ -38,7 +48,7 @@ export const RfiStepperButtons = ({
                     name: "onclick",
                     type: "click",
                     region: "main content",
-                    section: step.props.section,
+                    section: step.props?.section,
                     text: "prev",
                     component: `step ${stepNumber + 1} of ${totalSteps}`,
                   });
@@ -48,13 +58,13 @@ export const RfiStepperButtons = ({
                   <i className="fas fa-angle-left" aria-hidden="true" />
                 </span>{" "}
                 Previous
-              </Button>
+              </button>
             ) : null}
           </div>
           <div className="col-6 text-right">
             {/* Note: rfi-button and rfi-button-stepN classes are used by GA */}
             {stepNumber < totalSteps - 1 ? (
-              <Button
+              <button
                 type="submit"
                 className={`btn btn-primary rfi-button-step${stepNumber + 1}`}
                 onClick={() =>
@@ -63,7 +73,7 @@ export const RfiStepperButtons = ({
                     name: "onclick",
                     type: "click",
                     region: "main content",
-                    section: step.props.section,
+                    section: step.props?.section,
                     text: "next",
                     component: `step ${stepNumber + 1} of ${totalSteps}`,
                   })
@@ -73,9 +83,9 @@ export const RfiStepperButtons = ({
                 <span>
                   <i className="fas fa-angle-right" aria-hidden="true" />
                 </span>
-              </Button>
+              </button>
             ) : (
-              <Button
+              <button
                 type="submit"
                 className="rfi-submit btn btn-primary"
                 disabled={!!isSubmitting || rfiSubmitting}
@@ -86,14 +96,14 @@ export const RfiStepperButtons = ({
                     region: "main content",
                     event: "form",
                     type: "submit",
-                    section: step.props.section,
+                    section: step.props?.section,
                     text: "submit",
                     component: `step ${stepNumber + 1} of ${totalSteps}`,
                   })
                 }
               >
                 Submit
-              </Button>
+              </button>
             )}
           </div>
         </div>

packages/unity-react-core/package.json

@@ -103,8 +103,7 @@
   },
   "dependencies": {
     "@glidejs/glide": "^3.6.0",
-    "react-share": "^4.4.0",
-    "reactstrap": "^9"
+    "react-share": "^5.3"
   },
   "peerDependencies": {
     "@asu/unity-bootstrap-theme": "^1.21.3",

packages/unity-react-core/src/components/Article/Article.jsx

@@ -10,10 +10,9 @@ import {
   FacebookShareButton,
   LinkedinIcon,
   LinkedinShareButton,
-  TwitterIcon,
-  TwitterShareButton,
+  XIcon,
+  XShareButton,
 } from "react-share";
-import { Breadcrumb, BreadcrumbItem } from "reactstrap";
 
 import { Button } from "../Button/Button";
 import { Wrapper, EventInfoWrapper } from "./Article.styles";
@@ -119,34 +118,49 @@ export const Article = ({
         <div className="col col-lg-4 col-md-6 col-12">
           <h4>Share this event:</h4>
           <div className="article-social-media">
-            <FacebookShareButton url={articleUrl} quote={title}>
+            <FacebookShareButton
+              url={`${articleUrl}`}
+              title={title}
+              aria-label="Share via Facebook"
+            >
               <FacebookIcon
                 size={28}
                 borderRadius={4}
                 bgStyle={{ fill: "maroon" }}
                 iconFillColor="white"
               />
             </FacebookShareButton>
-            {/* @ts-ignore */}
-            <TwitterShareButton url={articleUrl} quote={title}>
-              <TwitterIcon
+            <XShareButton
+              url={`${articleUrl}`}
+              title={title}
+              aria-label="Share via X (formerly Twitter)"
+            >
+              <XIcon
                 size={28}
                 borderRadius={4}
                 bgStyle={{ fill: "maroon" }}
                 iconFillColor="white"
               />
-            </TwitterShareButton>
-            {/* @ts-ignore */}
-            <EmailShareButton url={authorEmail} quote={title}>
+            </XShareButton>
+            <EmailShareButton
+              url={`${articleUrl}`}
+              title={title}
+              aria-label="Share via Email"
+              subject="Check out this article!"
+              body="I found this and thought you might find it interesting:"
+            >
               <EmailIcon
                 size={28}
                 borderRadius={4}
                 bgStyle={{ fill: "maroon" }}
                 iconFillColor="white"
               />
             </EmailShareButton>
-            {/* @ts-ignore */}
-            <LinkedinShareButton url={articleUrl} quote={title}>
+            <LinkedinShareButton
+              url={`${articleUrl}`}
+              title={title}
+              aria-label="Share via LinkedIn"
+            >
               <LinkedinIcon
                 size={28}
                 borderRadius={4}
@@ -168,27 +182,40 @@ export const Article = ({
           Location:
         </h4>
         {}
-        <div dangerouslySetInnerHTML={sanitizeDangerousMarkup(eventLocation)} />
+        <div
+          dangerouslySetInnerHTML={sanitizeDangerousMarkup(`${eventLocation}`)}
+        />
         {registrationUrl && zoomUrl && <a href={zoomUrl}>Attend on Zoom</a>}
       </div>
     );
   };
 
+  /**
+   * @param {{title?: string, url?: string, active?: boolean}} item
+   * @returns {JSX.Element}
+   */
   const activeBreadcrumb = item => {
     return (
-      <BreadcrumbItem
+      <li
         key={item.title}
-        active={item.active}
-        tag="li"
         className="breadcrumb-item"
+        aria-current={item.active ? "page" : undefined}
       >
-        <BreadcrumbItem tag="a" href={item.url}>
-          {item.title}
-        </BreadcrumbItem>
-      </BreadcrumbItem>
+        {item.active ? (
+          <span>{item.title}</span>
+        ) : (
+          <a href={item.url}>{item.title}</a>
+        )}
+      </li>
     );
   };
-
+  if (!articleUrl) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "Warning: articleUrl prop is required for Article component for social media sharing to work properly."
+    );
+    articleUrl = articleUrl || "";
+  }
   return (
     <>
       {headerImageUrl && type !== "event" && (
@@ -209,9 +236,11 @@ export const Article = ({
         {breadcrumbs && (
           <div className="row pt-4" data-testid="breadcrumbs">
             <div className="col col-12">
-              <Breadcrumb listClassName="breadcrumb">
-                {breadcrumbs.map(item => activeBreadcrumb(item))}
-              </Breadcrumb>
+              <nav aria-label="breadcrumb">
+                <ol className="breadcrumb">
+                  {breadcrumbs.map(item => activeBreadcrumb(item))}
+                </ol>
+              </nav>
             </div>
           </div>
         )}
@@ -257,25 +286,23 @@ export const Article = ({
           <div className="row row-spaced pt-2">
             <div className="col col-12">
               <div className="article-social-media">
-                <FacebookShareButton url={articleUrl} quote={title}>
+                <FacebookShareButton url={articleUrl} title={title}>
                   <FacebookIcon
                     size={28}
                     borderRadius={4}
                     bgStyle={{ fill: "maroon" }}
                     iconFillColor="white"
                   />
                 </FacebookShareButton>
-                {/* @ts-ignore */}
-                <TwitterShareButton url={articleUrl} quote={title}>
-                  <TwitterIcon
+                <XShareButton url={articleUrl} title={title}>
+                  <XIcon
                     size={28}
                     borderRadius={4}
                     bgStyle={{ fill: "maroon" }}
                     iconFillColor="white"
                   />
-                </TwitterShareButton>
-                {/* @ts-ignore */}
-                <LinkedinShareButton url={articleUrl} quote={title}>
+                </XShareButton>
+                <LinkedinShareButton url={articleUrl} title={title}>
                   <LinkedinIcon
                     size={28}
                     borderRadius={4}
@@ -294,7 +321,7 @@ export const Article = ({
         <div className="row">
           <div
             className="col col-12"
-            dangerouslySetInnerHTML={sanitizeDangerousMarkup(body)}
+            dangerouslySetInnerHTML={sanitizeDangerousMarkup(`${body}`)}
             data-testid="body"
           />
         </div>