ASU · spaceperson · Apr 17, 2026 · Apr 21, 2026 · Apr 15, 2026 · Apr 9, 2026
@@ -88,6 +88,43 @@ yarn storybook  # Primary development environment
 - **Auto-cleanup**: Merged PR environments cleaned from S3 after 14 days or immediately after merging to dev branch (dev is main branch for this repo)
 - **Slack integration**: `#prd-uds` and `#prdfam-uds-ci` channels for alerts
 
+## Storybook MCP
+
+This monorepo has Storybook MCP servers available for all component packages. When doing UI development, always use the MCP tools to find and reuse existing components before creating new ones.
+
+### Available MCP servers
+
+Each package runs its own Storybook dev server with an MCP endpoint. Start the relevant Storybook first, then use the corresponding MCP toolset:
+
+| Package | Storybook command | MCP endpoint |
+|---|---|---|
+| `unity-react-core` | `cd packages/unity-react-core && yarn storybook` | `http://localhost:9200/mcp` |
+| `unity-bootstrap-theme` | `cd packages/unity-bootstrap-theme && yarn storybook` | `http://localhost:9000/mcp` |
+| `app-degree-pages` | `cd packages/app-degree-pages && yarn storybook` | `http://localhost:9010/mcp` |
+| `app-rfi` | `cd packages/app-rfi && yarn storybook` | `http://localhost:9020/mcp` |
+| `app-webdir-ui` | `cd packages/app-webdir-ui && yarn storybook` | `http://localhost:9030/mcp` |
+| `component-events` | `cd packages/component-events && yarn storybook` | `http://localhost:9060/mcp` |
+| `component-header-footer` | `cd packages/component-header-footer && yarn storybook` | `http://localhost:9080/mcp` |
+| `component-news` | `cd packages/component-news && yarn storybook` | `http://localhost:9090/mcp` |
+
+### Workflow
+
+1. **Before building any UI**, use `list-all-documentation` on the relevant MCP server to discover available components.
+2. **Before using a component**, call `get-documentation` to understand its props, variants, and usage patterns.
+3. **After generating UI**, use `get-storybook-story-instructions` and write stories so the work can be previewed and tested.
+4. **Run tests** using `run-story-tests` to validate interaction behavior and accessibility. Fix any failures before considering the task done.
+5. **Preview work** using `preview-stories` to show live story renders inline.
+
+### Key conventions for this codebase
+
+- Components live in `packages/unity-react-core/src/components/` — this is the foundational library. Always check here first.
+- Styles come from `unity-bootstrap-theme` (Bootstrap 5 + ASU brand tokens). Use Bootstrap utility classes before writing custom CSS.
+- There are lots of components that arent yet in `packages/unity-react-core/src/components/`, also check `packages/unity-bootstrap-theme/stories/` for components that aren't in `packages/unity-react-core/src/components/`.
+- The exception is `component-header-footer`, which uses styled-components and does not depend on the theme.
+- All components use JSDoc TypeScript comments for prop documentation — these are surfaced in the MCP docs toolset.
+- Always prefer typescript when creating any new components or updating any components in unity-react-core. Refactor only javascript files you modify in unity-react-core to typescript when you have to modify them but always ask user and let them know that this should be udpated to Typescript if they are modifying a javascript file in unity-react-core.
+- Google Analytics events use `trackGAEvent` / `GaEventWrapper` — preserve these when modifying existing components.
+
 ## Key Files for Understanding Context
 - `/packages/unity-react-core/src/components/` - Core React component patterns
 - `/packages/unity-bootstrap-theme/src/` - Theme structure (CSS/SCSS + JS)

@@ -16,6 +16,10 @@ const favicon = `
 
 import { fileURLToPath } from "url";
 
+export function addons() {
+  return ["@storybook/addon-mcp"];
+}
+
 export function previewAnnotations(entry = []) {
   return [...entry, fileURLToPath(import.meta.resolve('./preset/preview.js'))];
 }

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
@@ -0,0 +1,36 @@
+{
+  "servers": {
+    "asu-unity-react-core": {
+      "type": "http",
+      "url": "http://localhost:9200/mcp"
+    },
+    "asu-unity-bootstrap-theme": {
+      "type": "http",
+      "url": "http://localhost:9000/mcp"
+    },
+    "asu-app-degree-pages": {
+      "type": "http",
+      "url": "http://localhost:9010/mcp"
+    },
+    "asu-app-rfi": {
+      "type": "http",
+      "url": "http://localhost:9020/mcp"
+    },
+    "asu-app-webdir-ui": {
+      "type": "http",
+      "url": "http://localhost:9030/mcp"
+    },
+    "asu-component-events": {
+      "type": "http",
+      "url": "http://localhost:9060/mcp"
+    },
+    "asu-component-header-footer": {
+      "type": "http",
+      "url": "http://localhost:9080/mcp"
+    },
+    "asu-component-news": {
+      "type": "http",
+      "url": "http://localhost:9090/mcp"
+    }
+  }
+}
@@ -1,11 +1,13 @@
 nodeLinker: node-modules
 
+npmMinimalAgeGate: 1w
+
 npmScopes:
   asu:
     npmAuthToken: "${GITHUB_AUTH_TOKEN-fallback}"
     npmPublishRegistry: "https://npm.pkg.github.com"
     npmRegistryServer: "https://npm.pkg.github.com"
 
-yarnPath: .yarn/releases/yarn-4.4.0.cjs
-
 tsEnableAutoTypes: true
+
+yarnPath: .yarn/releases/yarn-4.17.0.cjs
@@ -4,9 +4,9 @@
   "license": "MIT",
   "volta": {
     "node": "24.13.1",
-    "yarn": "4.4.0"
+    "yarn": "4.17.0"
   },
-  "packageManager": "yarn@4.4.0",
+  "packageManager": "yarn@4.17.0",
   "workspaces": [
     "packages/*"
   ],
@@ -58,9 +58,9 @@
     "@siteimprove/alfa-playwright": "^0.78.1",
     "@siteimprove/alfa-test-utils": "^0.78.1",
     "@storybook/addon-docs": "^10.0.0",
+    "@storybook/addon-mcp": "^0.6.0",
     "@storybook/react": "^10.0.0",
     "@types/node": "^20.0.0",
-    "@types/react-dom": "^18.3.0",
     "@types/semver": "^7",
     "@typescript-eslint/eslint-plugin": "^8.13.0",
     "@typescript-eslint/parser": "^8.13.0",
@@ -70,7 +70,7 @@
     "css-minimizer-webpack-plugin": "^2.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "diff": "^8.0.2",
-    "dompurify": "^3.2.4",
+    "dompurify": "^3.4.10",
     "eslint": "^9",
     "eslint-config-prettier": "^8.2.0",
     "eslint-plugin-import": "^2.22.1",
@@ -92,8 +92,8 @@
     "playwright": "1.55.1",
     "prettier": "^3",
     "purgecss-webpack-plugin": "^4.0.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^3.0.2",
     "semantic-release": "^25.0.3",
     "semantic-release-monorepo": "^8.0.2",

@@ -1,3 +1,26 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> e249cd093 (chore(release): 3.2.1 [skip ci])
+# [@asu/app-degree-pages-v3.2.1](https://github.com/asu/asu-unity-stack/compare/@asu/app-degree-pages-v3.2.0...@asu/app-degree-pages-v3.2.1) (2026-06-18)
+
+
+### Bug Fixes
+
+* **app-degree-pages:** bumps @vitest/browser from 4.1.6 to 4.1.9 ([e3ae108](https://github.com/asu/asu-unity-stack/commit/e3ae1087d3edb84ee7451e74aab8845847700c84))
+
+<<<<<<< HEAD
+=======
+>>>>>>> 2bb037118 (chore(release): 3.2.0 [skip ci])
+=======
+>>>>>>> e249cd093 (chore(release): 3.2.1 [skip ci])
+# [@asu/app-degree-pages-v3.2.0](https://github.com/asu/asu-unity-stack/compare/@asu/app-degree-pages-v3.1.5...@asu/app-degree-pages-v3.2.0) (2026-05-21)
+
+
+### Features
+
+* **unity-react-core:** upgrade dependencies ([3d80ef0](https://github.com/asu/asu-unity-stack/commit/3d80ef0128df45641af9579183c11f571012b6c8))
+
 # [@asu/app-degree-pages-v3.1.5](https://github.com/asu/asu-unity-stack/compare/@asu/app-degree-pages-v3.1.4...@asu/app-degree-pages-v3.1.5) (2026-04-02)
 
 

@@ -1,6 +1,6 @@
 {
   "name": "@asu/app-degree-pages",
-  "version": "3.1.5",
+  "version": "3.2.1",
   "description": "ASU implementation of degree pages",
   "main": "./dist/degreePages.cjs.js",
   "browser": "./dist/degreePages.umd.js",
@@ -47,9 +47,7 @@
     "@popperjs/core": "^2.9.2",
     "classnames": "^2.3.1",
     "prop-types": "^15.7.2",
-    "react-popper": "^2.2.5",
-    "react-tooltip": "^4.2.21",
-    "styled-components": "^5.3.0"
+    "styled-components": "^6.0.0"
   },
   "devDependencies": {
     "@asu/shared": "*",
@@ -64,7 +62,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/browser": "^4.0.0",
+    "@vitest/browser": "^4.1.9",
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.2.2",
     "babel-plugin-dynamic-import-node": "^2.3.3",
@@ -90,12 +88,9 @@
     "vitest": "^4.0.0",
     "webpack-merge": "^5.8.0"
   },
-  "resolutions": {
-    "@types/react": "^18.3.1"
-  },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "volta": {
     "extends": "../../package.json"

@@ -10,12 +10,12 @@ const InputGroup = styled.div`
   gap: 1rem;
 `;
 
-const InputState = styled.input.attrs({
+const InputState = styled.input.attrs(() => ({
   type: "radio",
   className: "btn-check",
   name: "program-view",
   autoComplete: "off",
-})`
+}))`
   display: none;
 
   & + label {

@@ -64,7 +64,7 @@ const ListingStyle = createGlobalStyle`
   }
 `;
 
-const FilterSeparator = styled.div.attrs({ className: "container" })`
+const FilterSeparator = styled.div.attrs(() => ({ className: "container" }))`
   border-bottom: 1px solid #d0d0d0;
   margin-bottom: calc(var(--uds-dp-section-margin) / 2);
   padding-bottom: calc(var(--uds-dp-section-margin) / 2);

@@ -1,3 +1,30 @@
+# [@asu/app-rfi-v3.10.1](https://github.com/asu/asu-unity-stack/compare/@asu/app-rfi-v3.10.0...@asu/app-rfi-v3.10.1) (2026-06-18)
+
+
+### Bug Fixes
+
+* **app-rfi:** bumps dompurify from 3.4.5 to 3.4.10 ([f07a003](https://github.com/asu/asu-unity-stack/commit/f07a00382c737d27511240934676150701cfe6ec))
+
+# [@asu/app-rfi-v3.10.0](https://github.com/asu/asu-unity-stack/compare/@asu/app-rfi-v3.9.0...@asu/app-rfi-v3.10.0) (2026-06-09)
+
+
+### Features
+
+* **app-rfi:** add all parameters to datalayer for RFI module ([bbcac08](https://github.com/asu/asu-unity-stack/commit/bbcac0884d05dca5c0c61dc5b764f17afce035b5))
+
+# [@asu/app-rfi-v3.9.0](https://github.com/asu/asu-unity-stack/compare/@asu/app-rfi-v3.8.0...@asu/app-rfi-v3.9.0) (2026-05-21)
+
+
+### Bug Fixes
+
+* **app-rfi:** fix errors encountered on stoybook start ([c5b748b](https://github.com/asu/asu-unity-stack/commit/c5b748b32d7ea968db828aa44a5e90aa4bc6b17a))
+* **app-rfi:** jsdoc didn't support cjs ([62104e3](https://github.com/asu/asu-unity-stack/commit/62104e3c43cb7138180a02af93b461872ad58529))
+
+
+### Features
+
+* **unity-react-core:** upgrade dependencies ([3d80ef0](https://github.com/asu/asu-unity-stack/commit/3d80ef0128df45641af9579183c11f571012b6c8))
+
 # [@asu/app-rfi-v3.8.0](https://github.com/asu/asu-unity-stack/compare/@asu/app-rfi-v3.7.2...@asu/app-rfi-v3.8.0) (2026-03-23)
 
 

@@ -1,7 +1,5 @@
 # ASU RFI Component
 
-
-
 The ASU RFI Component is a React-powered Request for Information form. It is
 intended to be implemented by a CMS module/plugin/extension that must provide a
 local endpoint at (TODO ADD PATH OR PROP?) to recieve the component's

@@ -0,0 +1,33 @@
+{
+  "opts": {
+    "destination": "./docs/",
+    "recurse": true
+  },
+  "source": {
+    "include": ["README.md", "./src/core/types", "./src/components"],
+    "includePattern": "(types|index).js"
+  },
+  "templates": {
+    "cleverLinks": false,
+    "monospaceLinks": false,
+    "default": {
+      "useLongnameInNav": false,
+      "includeDate": false
+    }
+  },
+  "tags": {
+    "allowUnknownTags": true,
+    "dictionaries": ["jsdoc", "closure"]
+  },
+  "plugins": ["jsdoc-ts-utils"],
+  "tsUtils": {
+    "typedefImports": true,
+    "typeOfTypes": true,
+    "extendTypes": true,
+    "modulesOnMemberOf": true,
+    "modulesTypesShortName": true,
+    "parentTag": true,
+    "typeScriptUtilityTypes": true,
+    "tagsReplacement": {}
+  }
+}
@@ -1,6 +1,6 @@
 {
   "name": "@asu/app-rfi",
-  "version": "3.8.0",
+  "version": "3.10.1",
   "description": "ASU Request For Information (RFI) form",
   "main": "./dist/appRfi.cjs.js",
   "browser": "./dist/appRfi.umd.js",
@@ -9,6 +9,7 @@
   "author": "Michael Samuelson <mlsamuel@asu.edu>",
   "homepage": "https://github.com/ASU/asu-unity-stack#readme",
   "license": "MIT",
+  "type": "module",
   "files": [
     "examples/*",
     "dist/*",
@@ -26,16 +27,16 @@
   },
   "scripts": {
     "lint": "eslint --fix 'src/**/*.{js,jsx}' ",
-    "test": "jest --config=./jest.config.js --passWithNoTests",
+    "test": "jest --config=./jest.config.cjs --passWithNoTests",
     "start:dev": "webpack-dashboard -- webpack serve -c webpack/webpack.dev.js",
     "build": "vite build && cp -r src/assets dist/",
     "build:stats": "webpack -c webpack/webpack.prod.js --profile --json=compilation-stats.json",
     "postbuild": "cp ./types/main.d.ts ./dist/main.d.ts",
     "storybook": "storybook dev -p 9020",
     "build-storybook": "storybook build -o ../../build/$npm_package_name",
-    "jsdoc": "jsdoc -c jsdoc.config.js",
+    "jsdoc": "jsdoc -c jsdoc.config.json",
     "predocs": "mkdir -p ./docs",
-    "docs": "jsdoc2md --no-cache -c jsdoc.config.js --files ./src/components > ./docs/README.props.md",
+    "docs": "jsdoc2md --no-cache -c jsdoc.config.json --files ./src/components > ./docs/README.props.md",
     "postdocs": "node ../../scripts/process-readme-props.js"
   },
   "bugs": {
@@ -53,7 +54,7 @@
     "@storybook/addon-docs": "^10",
     "@storybook/react": "^10",
     "@storybook/react-vite": "^10",
-    "@testing-library/react": "^11.2.6",
+    "@testing-library/react": "^16.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "babel-loader": "^8.2.2",
     "copy-webpack-plugin": "^9.0.1",
@@ -87,8 +88,8 @@
     "yup-phone": "^1.2.19"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "volta": {
     "extends": "../../package.json"

@@ -50,3 +50,4 @@ export const Campus = ({ gaData, autoFocus }) => {
 };
 
 Campus.propTypes = { gaData: gaEventPropTypes };
+Campus.gaName = "campus";
Original file line number	Diff line number	Diff line change
Expand Up		@@ -50,3 +50,4 @@ export const Campus = ({ gaData, autoFocus }) => {
		};

		Campus.propTypes = { gaData: gaEventPropTypes };
		Campus.gaName = "campus";