Skip to content

feat: Migrate design library from Bootstrap/CoreUI to Material UI#21

Closed
devin-ai-integration[bot] wants to merge 2 commits into
mainfrom
devin/1770116060-migrate-to-material-ui
Closed

feat: Migrate design library from Bootstrap/CoreUI to Material UI#21
devin-ai-integration[bot] wants to merge 2 commits into
mainfrom
devin/1770116060-migrate-to-material-ui

Conversation

@devin-ai-integration
Copy link
Copy Markdown

@devin-ai-integration devin-ai-integration Bot commented Feb 3, 2026

Summary

This PR migrates the design library from Bootstrap/CoreUI to Material UI (MUI). The migration includes replacing CoreUI components with MUI equivalents across the application's core infrastructure: layout system, navigation, theme management, and key view components (Dashboard, Charts, Widgets, and authentication pages).

Key changes:

  • Replaced CoreUI packages with MUI packages (@mui/material, @mui/icons-material, @mui/x-charts, @mui/x-data-grid)
  • Created new MUI theme configuration with light/dark mode support
  • Migrated layout components (AppHeader → AppBar, AppSidebar → Drawer, etc.)
  • Migrated navigation system to use MUI List/ListItem/Collapse
  • Migrated Dashboard, Charts, Widgets, Login, Register, and error pages to MUI
  • Added PlaceholderView component for component demo pages (base, forms, buttons, notifications, icons, theme)

Updates since last revision

  • Fixed CI build failure by migrating DocsLink, DocsExample, and DocsComponents to MUI
  • Created PlaceholderView component to replace unmigrated component demo pages
  • All routes now render successfully (demo pages show "being migrated" placeholder instead of failing)
  • All 6 CI checks now pass (Ubuntu/Windows on Node 16.x/17.x/18.x)
  • Tested locally: Dashboard, Charts, theme switching (light/dark), and navigation all work correctly

Local Testing Screenshots

Dashboard
Charts Page
Placeholder View
Dark Mode

Screen Recording

Testing Recording

View original video (rec-b913bc5bc2d84a8c96d38f658859caf9-edited.mp4)

Review & Testing Checklist for Human

  • App starts without errors - Run npm install && npm start and verify the app loads at http://localhost:3000
  • Theme switching - Test light/dark mode toggle in the header works correctly
  • Dashboard rendering - Check that charts, widgets, tables, and progress bars render correctly
  • Placeholder pages - Navigate to /base/accordion, /buttons/buttons, etc. and verify they show the placeholder message (not errors)

Recommended test plan:

  1. Install dependencies and start the dev server
  2. Navigate through sidebar menu items to verify navigation works
  3. Toggle between light/dark themes
  4. Verify Dashboard charts and widgets render properly

Notes

This migration focuses on the core application shell and primary views. The component demonstration pages (base, buttons, forms, notifications, icons, theme) now display a placeholder message indicating they are being migrated. These can be fully implemented with MUI equivalents in follow-up work if needed.

Link to Devin run: https://partner-workshops.devinenterprise.com/sessions/f1676d0cf7234c43be3a82c0b8693ff9
Requested by: indhu.n@cognizant.com

- Replace CoreUI components with MUI equivalents throughout the app
- Add MUI theme configuration with light/dark mode support
- Migrate layout components (DefaultLayout, AppHeader, AppSidebar, AppFooter, AppContent)
- Migrate navigation components (_nav.js, AppSidebarNav, AppHeaderDropdown)
- Migrate Dashboard, Charts, Widgets, and page components to MUI
- Replace @coreui/icons with @mui/icons-material
- Replace CoreUI charts with @mui/x-charts
- Update package.json with MUI dependencies
@devin-ai-integration
Copy link
Copy Markdown
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

- Migrate DocsLink, DocsExample, DocsComponents to MUI
- Add PlaceholderView component for unmigrated views
- Replace all remaining CoreUI imports with placeholder components
- This allows the build to pass while full migration continues
@devin-ai-integration devin-ai-integration Bot deleted the devin/1770116060-migrate-to-material-ui branch April 24, 2026 22:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants