Migrate to MUI 5

[doniyor2109]

Material UI library recently has released new version 5. It includes many breaking changes and rebranding. This issue describes what is the plan for the migration and used as tracking progress of the migration as well.

Upgrade Plan The new version of MUI has many breaking changes. In order to not block the current version it is better to migrate to MUI gradually.

Here is list that we should follow while upgrading:

• We use separate branch for migration under mui5. Please create PRs targeting this branch.
• Each component should be upgraded individually and we should preserve old component as well in order to compare changes.
• Every components for MUI v5 should be located under v5 folder. Just copy component from /src folder and paste under src/v5 folder.
• Tests each new and old components both with unit tests and regression tests (regression tests are not implemented yet)
• MUI uses emotion as a main style engine. Our current implementation uses JSS and styled-components together. As we have used styled-components heavily on projects, we will use styled-components as a main engine. Migration from styled-components to Emotion should be easier as they use same API under the hood and it will be as a separate issue.
• Follow MUI guidelines for migration mui.com/guides/migration-v4
• Document breaking changes needed to be done on product level. (Add needed codemods as well)

Todos

• [x] Setup visual regression tests #280
• [x] Setup integration regression tests https://github.com/superdispatch/web-ui/pull/278
• [ ] MUI introduces pickers as well. Decided which pickers we should use?
• [ ] Migration from JSS to Styled-components?
• [ ] Create playroom components for MUI5
• [x] Migrate Lab components to MUI5
• [x] Migrate Date components to MUI5
• [x] Migrate Phone components to MUI5
• [x] Migrate Form components to MUI5

Module List

• [x] Adaptive-toolbar @doniyor2109
• [x] App-bar
• [x] Autocomplete @doniyor2109 https://github.com/superdispatch/web-ui/pull/321
• [x] Avatar
• [x] Avatar-button
• [x] Button @doniyor2109
• [x] Card @doniyor2109
• [x] Card-button
• [x] Checkbox
• [x] Chip
• [x] Columns
• [x] Description-list
• [x] Dialog
• [x] Drawer
• [x] Grid
• [x] Icon-button
• [x] Info-card
• [x] Inline
• [x] Link
• [x] List
• [x] Menu
• [x] Overflow-text
• [x] Pagination
• [x] Paper
• [x] Props
• [x] Radio
• [x] Responsive
• [x] Snackbar
• [x] Stack
• [x] Svg-icon
• [x] Switch
• [x] Tabs
• [x] Tag
• [x] Text-field
• [x] Theme https://github.com/superdispatch/web-ui/pull/278
• [x] Tiles
• [x] Toolbar
• [x] Tooltip
• [x] Typography https://github.com/superdispatch/web-ui/pull/283

Breaking Changes

Most of the components will work. However some components need to be updated.

• Autocomplete