Add Stratakit MUI components (WIP) by alexdunae · Pull Request #204 · iTwin/admin-components-react

alexdunae · 2026-05-20T18:56:07Z

Note this branch is based on #202

Posted here for previewing and early review. I can split out some other smaller PRs later.

I tried to strike a balance between keeping the existing API surface while also using MUI idioms.

All these components are exposed via imodel-browser-react/mui with aliases, so consumers can try them by swapping their import path (and then updating any necessary types).

import { ITwinGrid, type ITwinGridProps } from "@itwin/imodel-browser-react/mui";

TODO

Improve I18n
Consistent thumbnail positioning
Fix fallback thumbnails - rendered differently currently
Maybe rename iTwinActions and iModelActions to contextMenuItems
Do we need a replacement for isNew and fullWidth?
Table views
Verify icons on top of different colour thumbnails / backgrounds
Switch to more-horizontal icon when available
Tests

Copilot

Pull request overview

This PR introduces a Stratakit/MUI-based (“V2”) component surface for @itwin/imodel-browser-react, exposed via a new @itwin/imodel-browser-react/mui entrypoint to let consumers trial MUI components with minimal import churn.

Changes:

Added MUI equivalents for key tiles/grids (iModel + iTwin), plus shared building blocks like BaseCard, NoResultsMUI, and MUI context-menu utilities.
Added a new src/mui/index.ts barrel and updated Rollup/package exports to publish @itwin/imodel-browser-react/mui.
Updated Storybook + lint/build config and dependencies to support Stratakit/MUI icons/components.

Reviewed changes

Copilot reviewed 39 out of 45 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
packages/modules/imodel-browser/tsconfig.json	Adds Stratakit MUI typing config for the module build.
packages/modules/imodel-browser/src/utils/_buildMenuOptions.tsx	Adds MUI context menu item type + builder function.
packages/modules/imodel-browser/src/mui/index.ts	New MUI barrel exporting MUI components under legacy-aligned names.
packages/modules/imodel-browser/src/containers/ITwinGrid/StatusIcon.tsx	New status icon helper for ITwinTileMUI.
packages/modules/imodel-browser/src/containers/ITwinGrid/ITwinTileMUI.tsx	New MUI ITwin tile implementation using BaseCard.
packages/modules/imodel-browser/src/containers/ITwinGrid/ITwinGridMUI.tsx	New MUI ITwin grid implementation (tile + table modes).
packages/modules/imodel-browser/src/containers/iModelTiles/StatusIcon.tsx	New status icon helper for IModelTileMUI.
packages/modules/imodel-browser/src/containers/iModelTiles/IModelTileMUI.tsx	New MUI iModel tile implementation using BaseCard.
packages/modules/imodel-browser/src/containers/iModelThumbnail/IModelThumbnailMUI.tsx	New MUI thumbnail component using CardMedia/Skeleton + intersection observer.
packages/modules/imodel-browser/src/containers/iModelGrid/useIModelTableConfigMUI.tsx	New table config hook for MUI iModel grid table mode.
packages/modules/imodel-browser/src/containers/iModelGrid/IModelGridMUI.tsx	New MUI iModel grid implementation (tile + table modes).
packages/modules/imodel-browser/src/containers/iModelGrid/IModelGrid.helpers.tsx	Adds/updates helper module for legacy grid behavior and shared logic.
packages/modules/imodel-browser/src/components/tileFavoriteIcon/TileFavoriteIconMUI.tsx	New MUI favorite icon button using Stratakit icon.
packages/modules/imodel-browser/src/components/tileFavoriteIcon/TileFavoriteIcon.module.scss	Adds Stratakit color styling for MUI favorite icon states.
packages/modules/imodel-browser/src/components/noResults/NoResultsMUI.tsx	New MUI “no results” component.
packages/modules/imodel-browser/src/components/noResults/NoResultsMUI.module.scss	Styling for MUI no-results icon sizing.
packages/modules/imodel-browser/src/components/MoreMenu.tsx	New MUI-based “more” menu helper component.
packages/modules/imodel-browser/src/components/baseCard/BaseCardLoading.tsx	New MUI skeleton loading card.
packages/modules/imodel-browser/src/components/baseCard/BaseCard.tsx	New BaseCard building block (thumbnail overlays, actions, context menu).
packages/modules/imodel-browser/src/components/baseCard/BaseCard.module.scss	Styling for BaseCard layout/overlays/hover actions.
packages/modules/imodel-browser/rollup.config.js	Adds a second Rollup entry for the `/mui` barrel and asset handling.
packages/modules/imodel-browser/package.json	Adds `/mui` export entry and MUI/Stratakit deps.
packages/modules/imodel-browser/MUI-MIGRATION.md	Adds migration notes and prop mapping guidance for MUI surface.
packages/apps/storybook/tsconfig.json	Adds Storybook TS config for Stratakit/MUI and local `/mui` path mapping.
packages/apps/storybook/tsconfig.eslint.json	Mirrors Storybook ESLint TS program configuration for `/mui` path mapping.
packages/apps/storybook/src/utils/README.md	Notes licensing for placeholder images.
packages/apps/storybook/src/imodel-browser/NoResultsMUI.stories.tsx	Adds Storybook stories for NoResultsMUI.
packages/apps/storybook/src/imodel-browser/ITwinTileMUI.stories.tsx	Adds Storybook stories for ITwinTileMUI.
packages/apps/storybook/src/imodel-browser/ITwinGridMUI.stories.tsx	Adds Storybook stories for ITwinGridMUI.
packages/apps/storybook/src/imodel-browser/IModelTileMUI.stories.tsx	Adds Storybook stories for IModelTileMUI.
packages/apps/storybook/src/imodel-browser/IModelGridMUI.stories.tsx	Adds Storybook stories for IModelGridMUI.
packages/apps/storybook/src/imodel-browser/IModelGridMUI.helpers.tsx	Adds story helpers for external-data and stateful overrides.
packages/apps/storybook/src/imodel-browser/BaseCard.stories.tsx	Adds Storybook stories for BaseCard building block.
packages/apps/storybook/src/images.d.ts	Adds TS module declarations for jpg/jpeg used by stories.
packages/apps/storybook/package.json	Adds Stratakit/MUI deps for Storybook app.
packages/apps/storybook/.storybook/preview.js	Wraps Storybook with Stratakit Root via itwinui ThemeProvider bridging.
packages/apps/storybook/.storybook/main.js	Adjusts webpack config for svg assets, symlinks, and TS/SCSS handling.
common/scripts/.eslintrc.ts.base.json	Adds restricted-import rules for `@mui/material` and `@mui/system` root paths.
common/config/rush/pnpm-lock.yaml	Updates lockfile for new MUI/Stratakit dependencies.
.vscode/settings.json	Adds editor auto-import exclusion and TS SDK workspace settings.

Files not reviewed (1)

common/config/rush/pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

  "compilerOptions": {
    "rootDir": "./src",
-    "outDir": "./esm"
+    "outDir": "./esm",
+    "types": ["@stratakit/mui"]


+  const { columns, onRowClick } = useITwinTableConfig({
+    iTwinActions,
+    onThumbnailClick: onSelect,
+    strings,
+    iTwinFavorites,
+    addITwinToFavorites,
+    removeITwinFromFavorites,
+    refetchITwins,
+    cellOverrides,
+  } as any); // TODO: types
+


+  "compilerOptions": {
+    "strictNullChecks": true,
+    "types": ["@stratakit/mui"],
+    "paths": {
+      "@itwin/imodel-browser-react/mui": [
+        "../../modules/imodel-browser/src/mui/index.ts"
+      ]
+    }


  "compilerOptions": {
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "types": ["@stratakit/mui"],
+    "paths": {
+      "@itwin/imodel-browser-react/mui": [
+        "../../modules/imodel-browser/src/mui/index.ts"
+      ]
+    }


kebbn · 2026-05-25T19:47:49Z

+
+  &.selected {
+    outline: 2px solid;
+    outline-color: var(--mui-palette-primary-main);


the outline-color here looks off in Storybook, but i'm not sure if it's because it's missing theming from stratakit/mui Root

kebbn · 2026-05-25T19:52:52Z

+  min-height: 15rem;
+  display: flex;
+  flex-direction: column;
+


thoughts on adding user-select: none on the whole .baseCard? my assumption is that text highlighting is going to interfere with double click, and possibly future click + drag interactions

kebbn · 2026-05-25T20:11:17Z

+                    size="small"
+                    aria-label="More options"
+                    onClick={handleMoreButtonClick}
+                    // sx={{ bgcolor: "background.paper" }} // TODO: how do we make this look good


Suggested change

// sx={{ bgcolor: "background.paper" }} // TODO: how do we make this look good

sx={{

bgcolor: "var(--stratakit-color-bg-mono-transparent)",

backdropFilter: "blur(0.5rem)",

WebkitBackdropFilter: "blur(0.5rem)",

"&:hover": {

bgcolor: "var(--stratakit-color-bg-mono-transparent)",

},

}} // TODO: how do we make this look good

idk have to test this out more. having transparent buttons (the pin and the more options) in light/dark mode on light/dark backgrounds is not a pattern we have an OOTB solution for imo

kebbn · 2026-05-25T20:27:29Z

+                {description && (
+                  <Typography
+                    variant="body2"
+                    color="text.secondary"


Suggested change

color="text.secondary"

color="textSecondary"

kebbn · 2026-05-25T20:27:50Z

+                {additionalDescription && (
+                  <Typography
+                    variant="subtitle2"
+                    color="secondary"


Suggested change

color="secondary"

color="textSecondary"

kebbn · 2026-05-25T21:08:41Z

do we need a separate NoResultsMUI for iTwin project pages? It may be common for new users without any Project access

imodeljs-admin and others added 30 commits May 19, 2026 10:01

Stratakit config

3b085a7

Clone tiles containers

73c87b5

storybook pkgs

c9555b3

more config

9a02e89

BaseCard

21353a7

tidy and impl

7b3b026

basecard tidy

2608e83

context menu

1c6803e

.

0312def

.

828ddd7

tighten

c561384

align

4c615eb

Rename to MUI

8e9ebec

iTwin Grid spike

92704af

thumbnail action buttons

d79200b

MUI config

278a0cd

Add BaseCardLoading

e12dee3

badges and status

6b43b77

onSelect | onOpen

f0dbda3

iModelGridMUI

f5e6538

useiModelTable

0ded70f

.

2a25612

.

dac0a28

post rebase

c8e9bf7

fineprint -> metadata, refine

aeefd00

.

ece8781

docs

4084da3

story tidy

2771dfe

.

e926101

.

49d8596

alexdunae requested a review from Copilot May 20, 2026 19:43

Copilot started reviewing on behalf of alexdunae May 20, 2026 19:44 View session

changes

2768040

Copilot AI reviewed May 20, 2026

View reviewed changes

alexdunae added 4 commits May 20, 2026 15:12

pr feedback

9f9a1bb

Add @mui/x-data-grid

8d58fb3

tables and tweaks

d6721ac

revert debug code

298ae8d

kebbn reviewed May 25, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Stratakit MUI components (WIP)#204

Add Stratakit MUI components (WIP)#204
alexdunae wants to merge 35 commits into
alex/typescript6from
alex/imodelgrid-mui

alexdunae commented May 20, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kebbn May 25, 2026

Uh oh!

kebbn May 25, 2026

Uh oh!

kebbn May 25, 2026

Uh oh!

kebbn May 25, 2026

Uh oh!

kebbn May 25, 2026

Uh oh!

kebbn May 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

-                    // sx={{ bgcolor: "background.paper" }} // TODO: how do we make this look good
+                    sx={{
+                      bgcolor: "var(--stratakit-color-bg-mono-transparent)",
+                      backdropFilter: "blur(0.5rem)",
+                      WebkitBackdropFilter: "blur(0.5rem)",
+                      "&:hover": {
+                        bgcolor: "var(--stratakit-color-bg-mono-transparent)",
+                      },
+                    }} // TODO: how do we make this look good

Conversation

alexdunae commented May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TODO

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kebbn May 25, 2026

Choose a reason for hiding this comment

Uh oh!

kebbn May 25, 2026

Choose a reason for hiding this comment

Uh oh!

kebbn May 25, 2026

Choose a reason for hiding this comment

Uh oh!

kebbn May 25, 2026

Choose a reason for hiding this comment

Uh oh!

kebbn May 25, 2026

Choose a reason for hiding this comment

Uh oh!

kebbn May 25, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

alexdunae commented May 20, 2026 •

edited

Loading