feat: integrate sci-react-ui component library#47
Draft
vredchenko wants to merge 5 commits intomainfrom
Draft
Conversation
This was referenced Feb 4, 2026
Add barrel file (src/components/ui.ts) that re-exports all components from @diamondlightsource/sci-react-ui library (ds-theme branch). Includes navigation, controls, themes, auth, and utility exports for easy consumption throughout the application.
…crumbs Replace per-route ThemeProvider wrapping with a single root-level ThemeProvider using DiamondDSTheme from sci-react-ui. Replace custom navbar with sci-react-ui Navbar (responsive hamburger, NavLinks, ColourSchemeButton for light/dark toggle). Add Footer with DLS branding and external links. Add Breadcrumbs to deep acquisition/grid routes. - Delete custom theme.tsx and navbar.tsx (superseded by sci-react-ui) - Create RouterLink adapter for TanStack Router + sci-react-ui linkComponent - Create breadcrumbs.tsx helper with buildAcquisitionCrumbs utility - Remove per-route ThemeProvider/Navbar from all 10 route files + 2 components - Remove paddingTop from Container styles (Navbar handles spacing) - Remove Tailwind bg-white/dark:bg-gray-950 from app.css (CssBaseline handles it)
Add crossorigin attribute to Google Fonts stylesheet link to fix CSSStyleSheet.cssRules cross-origin access error. Add resolve.dedupe for react, react-dom, and @mui/material in Vite config to prevent symlinked sci-react-ui from pulling in its own React 18 copy alongside the project's React 19. See #50.
Link @diamondlightsource/sci-react-ui from adjacent clone (ds-theme branch). Uses --legacy-peer-deps to bypass MUI 6/7 peer conflict since sci-react-ui peers on MUI 6 while jsonforms requires MUI 7. The library's dist doesn't bundle MUI (peer-deps-external), so the project's MUI 7 is used at runtime. Vite dedupe config and skipLibCheck handle the version mismatch.
vredchenko
force-pushed
the
graft-sci-react-ui
branch
from
263f95d to
416ed54
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Integrate
@diamondlightsource/sci-react-ui(ds-theme branch) into the SmartEM frontend, replacing custom theme and navigation with DLS design system components.What changed
__root.tsx), replacing per-route wrapping in all 10 route filesnavbar.tsx— responsive hamburger menu, Home/Models nav links, ColourSchemeButton for light/dark toggle, FragmentScreen logolinkComponentproptheme.tsx(superseded by DiamondDSTheme) andnavbar.tsx(superseded by sci-react-ui Navbar)paddingTopfrom route Container styles (Navbar handles spacing)bg-white dark:bg-gray-950fromapp.css(CssBaseline handles it)atlas.tsxandlatentRep.tsxcomponentsMUI 6 vs 7 note
sci-react-ui peers on MUI 6; smartem-frontend uses MUI 7. Since the pre-built dist doesn't bundle MUI (
peer-deps-external), MUI 7 is used at runtime.skipLibCheck: truesuppresses type conflicts. The RouterLink adapter usesas anyto bridge the React 19 / React 18 type gap between the project and sci-react-ui's peer declarations.Components used from sci-react-ui
Dev setup
sci-react-ui is linked locally from ds-theme branch. To rebuild after changes:
Test plan
npm run typecheckpassesnpm run checkpasses (Biome)npm run buildsucceedsnpm run dev:mock— all routes render with DLS theme