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"
+      ]
+    }


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

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alexdunae commented May 20, 2026 •

edited

Loading