Use LinkComponent prop in Breadcrumbs & reorganise components

Author: VictoriaBeilsten-Edmands

.storybook/main.ts

@@ -9,7 +9,6 @@ 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,7 +1,6 @@
 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";
@@ -12,7 +11,6 @@ const TextThemeBase = "Theme: Generic";
 const TextThemeDiamond = "Theme: Diamond";
 
 export const decorators = [
-  withRouter,
   (StoriesWithPadding: React.FC) => {
     return (
       <div style={{ padding: "2em" }}>
@@ -78,6 +76,11 @@ const preview: Preview = {
     backgrounds: { disable: true },
     layout: "fullscreen",
   },
+  argTypes: {
+    linkComponent: {
+      control: false,
+    },
+  },
 };
 
 export default preview;

changelog.md

@@ -2,17 +2,17 @@ SciReactUI Changelog
 ====================
 
 
-[v0.1.1] - 2025-?-?
+[v0.2.0] - 2025-?-?
 --------------------
 
 ### Added
-- SciReactUIProvider to use ThemeProvider and BrowserRouter.
+-
 
 ### Fixed
 - Styles added to Navbar and Footer incorrectly remove built in styles.
 
 ### Changed
-- Breadcrumbs component uses react-router-dom for page routing.
+- Breaking change Breadcrumbs component requires linkComponent prop for page routing. 
 
 [v0.1.0] - 2025-04-10
 ---------------------

eslint.config.js

@@ -41,6 +41,7 @@ export default [
     },
     rules: {
       "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
       "no-console": "off",
       "prettier/prettier": "error",
       "@typescript-eslint/no-unused-vars": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diamondlightsource/sci-react-ui",
-  "version": "0.1.1alpha",
+  "version": "0.2",
   "description": "A theme and component library to make websites at scientific institutions simple to create.",
   "author": "Diamond Light Source",
   "license": "ISC",
@@ -31,9 +31,7 @@
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^6.1.7",
     "@mui/material": "^6.1.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^7.5.3"
+    "react": "^18.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -78,12 +76,13 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-transform-stub": "^2.0.0",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.5.3",
     "rollup": "^4.27.3",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^8.4.4",
-    "storybook-addon-remix-react-router": "3",
     "storybook-dark-mode": "^4.0.2",
     "tslib": "^2.8.1",
     "typescript": "^5.6.3",

pnpm-lock.yaml

@@ -19,45 +19,78 @@ npm i @diamondlightsource/sci-react-ui
 
 ### Usage
 
-First use SciReactUIProvider and supply a theme to use the ThemeProvider and BrowserRouter.
+First use the ThemeProvider and supply a theme.
 
 ```js
+import { ThemeProvider, DiamondTheme } from "@diamondlightsource/sci-react-ui";
+
+root.render(
+  <ThemeProvider theme={DiamondTheme}>
+    <App />
+  </ThemeProvider>,
+);
+```
+
+There are currently two themes, `GenericTheme` or `DiamondTheme`, but you can - and should - adapt your own.
+
+To use the Breadcrumbs component, use a route provider from your preferred library. For example, to use react-router's BrowserRouter, install react-router-dom:
+
+```sh
+npm i react-router-dom
+```
+
+Next, use the BrowserRouter which can be used at the top level:
+
+```js
+import { BrowserRouter } from "react-router-dom";
 import {
-	SciReactUIProvider,
+	ThemeProvider,
 	DiamondTheme
 } from "@diamondlightsource/sci-react-ui";
 
 root.render(
-	<SciReactUIProvider theme={DiamondTheme}>
-		<App />
-	</SciReactUIProvider>
+	<ThemeProvider theme={DiamondTheme}>
+		<BrowserRouter>
+			<App />
+		<BrowserRouter>
+	</ThemeProvider>
 )
 ```
 
-There are currently two themes, `GenericTheme` or `DiamondTheme`, but you can - and should - adapt your own.
+Then pass your library's corresponding Link component to Breadcrumbs, for example:
 
-There are various components, here's an example of how to use the NavBar:
+```js
+import { Link } from "react-router-dom";
+import { Breadcrumbs } from "@diamondlightsource/sci-react-ui";
+
+function App() {
+  return <Breadcrumbs path={window.location.pathname} linkComponent={Link} />;
+}
+export default App;
+```
+
+There are various other components, here's an example of how to use the NavBar:
 
 ```js
-import {Container, Typography} from "@mui/material";
-import {
-	Navbar,
-	NavLink,
-	NavLinks
-} from "@diamondlightsource/sci-react-ui";
+import { Container, Typography } from "@mui/material";
+import { Navbar, NavLink, NavLinks } from "@diamondlightsource/sci-react-ui";
 
 function App() {
-	return <>
-		<Navbar>
-			<NavLinks key="links">
-				<NavLink href="#" key="first">A link</NavLink>
-			</NavLinks>
-		</Navbar>
-		<Container>
-			<Typography variant="h2">Scientific UI Collection</Typography>
-			<Typography>A collection of science based React components.</Typography>
-		</Container>
-	</>
+  return (
+    <>
+      <Navbar>
+        <NavLinks key="links">
+          <NavLink href="#" key="first">
+            A link
+          </NavLink>
+        </NavLinks>
+      </Navbar>
+      <Container>
+        <Typography variant="h2">Scientific UI Collection</Typography>
+        <Typography>A collection of science based React components.</Typography>
+      </Container>
+    </>
+  );
 }
 export default App;
 ```