Uds 1663 check element changes

package.json

@@ -27,7 +27,7 @@
     "stop": "node server/server.stop.js",
     "prepare": "husky install",
     "commit": "cz",
-    "check-element-changes": "node ./scripts/check-element-changes.js -d"
+    "check-element-changes": "node ./packages/unity-react-core/scripts/check-element-changes.js"
   },
   "jest": {
     "preset": "jest-puppeteer",
@@ -74,6 +74,7 @@
     "copy-webpack-plugin": "^8.1.1",
     "css-minimizer-webpack-plugin": "^2.0.0",
     "cz-conventional-changelog": "^3.3.0",
+    "diff": "^8.0.2",
     "dompurify": "^3.2.4",
     "eslint": "^9",
     "eslint-config-prettier": "^8.2.0",
@@ -102,6 +103,7 @@
     "semantic-release": "^22",
     "semantic-release-monorepo": "^8.0.2",
     "semver": "^7.5.2",
+    "tsx": "^4.19.3",
     "vite": "^5.3.5",
     "webpack": "^5.32.0",
     "webpack-bundle-analyzer": "^4.4.1",

packages/app-degree-pages/__mocks__/unity-react-core-mock.jsx

@@ -1,20 +1,8 @@
 /* eslint-disable react/jsx-props-no-spreading */
 // @ts-check
-import * as asuCore from "@asu/unity-react-core";
 import React from "react";
 import { vi } from "vitest"
 
-const {
-  Accordion: _C1,
-  AnchorMenu: _C2,
-  Button: _C3,
-  Card: _C4,
-  Hero: _C5,
-  Pagination: _C6,
-  Video: _C7,
-  ...rest
-} = asuCore;
-
 const mockComponent = vi.fn(props => <>{props?.children}</>);
 
 const Accordion = mockComponent;
@@ -28,7 +16,11 @@ const Card = mockComponent;
 const Hero = mockComponent;
 const Pagination = mockComponent;
 const Video = mockComponent;
+const Divider = mockComponent;
+const Image = mockComponent;
+const List = mockComponent;
 
+// Mock all the components we might need
 vi.doMock("@asu/unity-react-core", () => ({
   Accordion,
   AnchorMenu,
@@ -37,5 +29,7 @@ vi.doMock("@asu/unity-react-core", () => ({
   Hero,
   Pagination,
   Video,
-  ...rest,
+  Divider,
+  Image,
+  List,
 }));

packages/app-degree-pages/vitest.setup.ts

@@ -4,6 +4,8 @@ import { afterEach } from 'vitest'
 
 import "./__mocks__/fetch-mock";
 import "./__mocks__/window-mock";
+import "./__mocks__/unity-react-core-mock";
+
 afterEach(() => {
   cleanup()
 });

packages/component-header-footer/setupTests.js

@@ -6,4 +6,9 @@ import "@testing-library/jest-dom";
 
 import "./__mocks__/window-mock";
 
+if (typeof global.TextEncoder === 'undefined') {
+  const util = require('util');
+  global.TextEncoder = util.TextEncoder;
+}
+
 expect.extend({ toMatchImageSnapshot });

packages/shared/utils/html-utils.d.ts

@@ -9,4 +9,4 @@ export type FocusableElement = {
  * @param {string} targetSelector
  * @returns {FocusableElement}
  */
-export function queryFirstFocusable(targetSelector: string): FocusableElement;
+export function queryFirstFocusable(targetSelector: string): FocusableElement | null;

packages/shared/utils/html-utils.js

@@ -1,19 +1,37 @@
 // @ts-check
 import DOMPurify from "dompurify";
 
+// Lazy initialization of DOMPurify to support server-side rendering
+let DOMPurifyInstanceServerCompatible = null;
+
+function getDOMPurifyInstance() {
+  if (!DOMPurifyInstanceServerCompatible) {
+    // Initialize DOMPurify with the current window (browser or JSDOM)
+    if (typeof window !== "undefined") {
+      DOMPurifyInstanceServerCompatible = DOMPurify(window);
+    } else {
+      // Fallback for environments without window
+      DOMPurifyInstanceServerCompatible = DOMPurify;
+    }
+  }
+  return DOMPurifyInstanceServerCompatible;
+}
+
 /**
  * @typedef {{
  *  focus: () => void
  * } & Element } FocusableElement
  * @param {string} targetSelector
- * @returns {FocusableElement}
+ * @returns {FocusableElement | null}
  */
 function queryFirstFocusable(targetSelector) {
   const target = targetSelector
     ? document.querySelector(targetSelector)
     : document;
 
-  /** @type {FocusableElement} */
+  if (!target) return null;
+
+  /** @type {FocusableElement | null} */
   const focusable = target.querySelector(
     'button, [href], input, select, textarea, [tabIndex]:not([tabIndex="-1"])'
   );
@@ -25,7 +43,8 @@ function queryFirstFocusable(targetSelector) {
  * @returns {Object}
  */
 export const sanitizeDangerousMarkup = content => {
-  return { __html: DOMPurify.sanitize(content) };
+  const purify = getDOMPurifyInstance();
+  return { __html: purify.sanitize(content) };
 };
 
 export { queryFirstFocusable };

packages/static-site/src/pages/Home.tsx

@@ -27,7 +27,7 @@ const Home = () => {
       </div>
       <div className="container">
         <h2>Unity Design System (UDS)</h2>
-        <Divider />
+        <Divider type="default" />
         <div className="row my-6">
           <Card
             title="UDS Guidelines"
@@ -54,7 +54,7 @@ const Home = () => {
       </div>
       <div className="container">
         <h2>Implementing UDS</h2>
-        <Divider />
+        <Divider type="default" />
         <div className="row my-6">
           <Card
             title="ASU Header and Footer"
@@ -105,14 +105,14 @@ const Home = () => {
       <a id="codekit"></a>
       <div className="container">
         <h2>Npm Packages</h2>
-        <Divider />
+        <Divider type="default" />
         <div className="row my-6">
           <PackageCards />
         </div>
       </div>
       <div className="container">
         <h2>Deprecated Packages</h2>
-        <Divider />
+        <Divider type="default" />
         <div className="row my-6">
           <DeprecatedPackageCards />
         </div>