Add react router links to Breadcrumbs

Author: VictoriaBeilsten-Edmands

.storybook/main.ts

@@ -9,6 +9,7 @@ const config: StorybookConfig = {
     "@storybook/addon-interactions",
     "@storybook/addon-links",
     "storybook-dark-mode",
+    "storybook-addon-remix-react-router",
   ],
   framework: {
     name: "@storybook/react-webpack5",

.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { CssBaseline } from "@mui/material";
 import type { Preview } from "@storybook/react";
+import { withRouter } from "storybook-addon-remix-react-router";
 
 import { ThemeProvider } from "../src";
 import { GenericTheme, DiamondTheme } from "../src";
@@ -11,6 +12,7 @@ const TextThemeBase = "Theme: Generic";
 const TextThemeDiamond = "Theme: Diamond";
 
 export const decorators = [
+  withRouter,
   (StoriesWithPadding: React.FC) => {
     return (
       <div style={{ padding: "2em" }}>

eslint.config.js

@@ -20,6 +20,7 @@ export default [
     "babel.config.js",
     "eslint.config.js",
     "jest.config.js",
+    "jest.setup.js",
     "rollup.config.mjs",
   ]},
   js.configs.recommended,

jest.config.js

@@ -1,10 +1,13 @@
 /** @type {import('jest').Config} */
-const config = { testEnvironment: "jsdom",
-moduleNameMapper: {
-  "^.+.(svg)$": "jest-transform-stub",
-},
-transform: {
-"^.+\\.tsx?$": "babel-jest"
-}};
+const config = {
+  testEnvironment: "jsdom",
+  moduleNameMapper: {
+    "^.+.(svg)$": "jest-transform-stub",
+  },
+  transform: {
+    "^.+\\.tsx?$": "babel-jest",
+  },
+  setupFilesAfterEnv: ['./jest.setup.js'],
+};
 
-export default config;
+export default config;

jest.setup.js

@@ -0,0 +1,4 @@
+const { TextEncoder, TextDecoder } = require('util');
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;

package.json

@@ -24,13 +24,15 @@
     "storybook:publish": "gh-pages -b storybook/publish -d storybook-static"
   },
   "dependencies": {
-    "react-icons": "^5.3.0"
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^7.5.3",
+    "storybook-addon-remix-react-router": "3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/material": "^6.1.7",
     "@mui/icons-material": "^6.1.7",
+    "@mui/material": "^6.1.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -40,6 +42,7 @@
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
     "@chromatic-com/storybook": "^3.2.2",
+    "@eslint/eslintrc": "^3.2.0",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
@@ -63,11 +66,19 @@
     "@types/node": "^20.17.6",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.18.1",
+    "@typescript-eslint/parser": "^8.18.1",
     "babel-jest": "^29.7.0",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "file-loader": "^6.2.0",
     "gh-pages": "^6.2.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-transform-stub": "^2.0.0",
     "rollup": "^4.27.3",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -76,16 +87,7 @@
     "storybook-dark-mode": "^4.0.2",
     "tslib": "^2.8.1",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.15.0",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "jest-transform-stub": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.18.1",
-    "@typescript-eslint/parser": "^8.18.1",
-    "@eslint/eslintrc": "^3.2.0"
+    "typescript-eslint": "^8.15.0"
   },
   "packageManager": "[email protected]+sha256.24235772cc4ac82a62627cd47f834c72667a2ce87799a846ec4e8e555e2d4b8b"
 }