Mui v5 upgrade (#501)

* Add new mui-v5 packages + styled-components * Add emotion react & styled libs deps * Add automatic codemod replacements, mostly all import changes * Partial and basic typing for new palette elements, using mui * Fully remove material-ui v4 references from lib * Fix import for createSpacing * Remove material-ui externals from webpack configuration * Adapt webpack externals with new peer deps, due to mui v5 upgrade * Use custom render with providers in test files for react-ui * Remove custom getMaterialUIContext in favour of render override for tests * Fix LegendWidgetUI tests, due to some changes in the rendering details * Fix FeatureSelectionWidgetUI tests, due to some changes in the rendering details * Fix RangeWidgetUI tests by changing selectors (temporarily?) * Remove adaptV4Theme from Storybook preview * Set a new alpha name for experimental release * Mock requestAnimationFrame in FormulaUI tests * v0.0.0-experimental-muiv5-0 * Set peer deps to experimental 0.0.0 packages * v0.0.0-experimental-muiv5-1
CartoDB · Oct 24, 2022 · 1773777 · 1773777
1 parent 2640689
commit 1773777
Show file tree

Hide file tree

Showing 97 changed files with 824 additions and 450 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Split carto-theme into sections [#495](https://github.com/CartoDB/carto-react/pull/495)
 - Integration between Figma and Storybook through `addon-designs` [#488](https://github.com/CartoDB/carto-react/pull/488)
 - Update Storybook to v6.5.12 [#487](https://github.com/CartoDB/carto-react/pull/487)
+- Upgrade from Material UI v4 to MUI v5 [#501](https://github.com/CartoDB/carto-react/pull/501)
 
 ## 1.5
 

diff --git a/lerna.json b/lerna.json
@@ -4,5 +4,5 @@
   ],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "1.5.0-alpha.4"
-}
+  "version": "0.0.0-experimental-muiv5-1"
+}
diff --git a/package.json b/package.json
@@ -13,9 +13,14 @@
     "@deck.gl/google-maps": "^8.9.0-alpha.4",
     "@deck.gl/layers": "^8.9.0-alpha.4",
     "@deck.gl/mesh-layers": "^8.9.0-alpha.4",
-    "@material-ui/core": "^4.11.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.57",
+    "@mui/icons-material": "^5.10.9",
+    "@mui/lab": "^5.0.0-alpha.104",
+    "@mui/material": "^5.10.10",
+    "@mui/styles": "^5.10.10",
+    "@mui/styled-engine-sc": "^5.10.6",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "styled-components": "^5.2.3",
     "@nebula.gl/edit-modes": "^1.0.4",
     "@nebula.gl/layers": "^1.0.4",
     "@reduxjs/toolkit": "^1.5.0",

diff --git a/packages/react-api/package.json b/packages/react-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-api",
-  "version": "1.5.0-alpha.4",
+  "version": "0.0.0-experimental-muiv5-1",
   "description": "CARTO for React - Api",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -64,9 +64,9 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^1.5.0-alpha.4",
-    "@carto/react-redux": "^1.5.0-alpha.4",
-    "@carto/react-workers": "^1.5.0-alpha.4",
+    "@carto/react-core": "0.0.0-experimental-muiv5-0",
+    "@carto/react-redux": "0.0.0-experimental-muiv5-0",
+    "@carto/react-workers": "0.0.0-experimental-muiv5-0",
     "@deck.gl/carto": "^8.9.0-alpha.4",
     "@deck.gl/core": "^8.9.0-alpha.4",
     "@deck.gl/extensions": "^8.9.0-alpha.4",

diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-auth",
-  "version": "1.5.0-alpha.4",
+  "version": "0.0.0-experimental-muiv5-1",
   "description": "CARTO for React - Auth",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -64,7 +64,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^1.5.0-alpha.4",
+    "@carto/react-core": "0.0.0-experimental-muiv5-0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }

diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-basemaps",
-  "version": "1.5.0-alpha.4",
+  "version": "0.0.0-experimental-muiv5-1",
   "description": "CARTO for React - Basemaps",
   "keywords": [
     "carto",
@@ -64,7 +64,7 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^1.5.0-alpha.4",
+    "@carto/react-core": "0.0.0-experimental-muiv5-0",
     "@deck.gl/google-maps": "^8.9.0-alpha.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"

diff --git a/packages/react-core/package.json b/packages/react-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-core",
-  "version": "1.5.0-alpha.4",
+  "version": "0.0.0-experimental-muiv5-1",
   "description": "CARTO for React - Core",
   "author": "CARTO Dev Team",
   "keywords": [

diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-redux",
-  "version": "1.5.0-alpha.4",
+  "version": "0.0.0-experimental-muiv5-1",
   "description": "CARTO for React - Redux",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -63,8 +63,8 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^1.5.0-alpha.4",
-    "@carto/react-workers": "^1.5.0-alpha.4",
+    "@carto/react-core": "0.0.0-experimental-muiv5-0",
+    "@carto/react-workers": "0.0.0-experimental-muiv5-0",
     "@deck.gl/carto": "^8.9.0-alpha.4",
     "@deck.gl/core": "^8.9.0-alpha.4",
     "@reduxjs/toolkit": "^1.5.0"

diff --git a/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js b/packages/react-ui/__tests__/widgets/BarWidgetUI.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen } from '../widgets/utils/testUtils';
 import BarWidgetUI from '../../src/widgets/BarWidgetUI';
-import { getMaterialUIContext, mockEcharts } from './testUtils';
+import { mockEcharts } from './testUtils';
 
 describe('BarWidgetUI', () => {
   beforeAll(() => {
@@ -16,15 +16,14 @@ describe('BarWidgetUI', () => {
 
   const X_AXIS_DATA = ['column_1', 'column_2', 'column_3'];
 
-  const Widget = (props) =>
-    getMaterialUIContext(
-      <BarWidgetUI
-        yAxisData={Y_AXIS_DATA}
-        xAxisData={X_AXIS_DATA}
-        onSelectedBarsChange={() => {}}
-        {...props}
-      />
-    );
+  const Widget = (props) => (
+    <BarWidgetUI
+      yAxisData={Y_AXIS_DATA}
+      xAxisData={X_AXIS_DATA}
+      onSelectedBarsChange={() => {}}
+      {...props}
+    />
+  );
 
   const Y_AXIS_DATA_MULTIPLE = [
     [1, 2, 3],
@@ -39,17 +38,16 @@ describe('BarWidgetUI', () => {
     6: 'Column 2'
   };
 
-  const WidgetMultiple = (props) =>
-    getMaterialUIContext(
-      <BarWidgetUI
-        yAxisData={Y_AXIS_DATA_MULTIPLE}
-        xAxisData={X_AXIS_DATA}
-        series={SERIES}
-        labels={LABELS}
-        onSelectedBarsChange={() => {}}
-        {...props}
-      />
-    );
+  const WidgetMultiple = (props) => (
+    <BarWidgetUI
+      yAxisData={Y_AXIS_DATA_MULTIPLE}
+      xAxisData={X_AXIS_DATA}
+      series={SERIES}
+      labels={LABELS}
+      onSelectedBarsChange={() => {}}
+      {...props}
+    />
+  );
 
   test('all selected', () => {
     render(<Widget />);

diff --git a/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js b/packages/react-ui/__tests__/widgets/CategoryWidgetUI.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen } from '../widgets/utils/testUtils';
 import userEvent from '@testing-library/user-event';
 import CategoryWidgetUI from '../../src/widgets/CategoryWidgetUI';
 import { currencyFormatter } from './testUtils';
@@ -170,25 +170,33 @@ describe('CategoryWidgetUI', () => {
   });
 
   describe('when data name is not string', () => {
-    const NotStringData = [{
-      name: true,
-      value: 100
-    }, {
-      name: false,
-      value: 101
-    }]
+    const NotStringData = [
+      {
+        name: true,
+        value: 100
+      },
+      {
+        name: false,
+        value: 101
+      }
+    ];
     test('should render properly', () => {
       render(<CategoryWidgetUI data={NotStringData} />);
-  
+
       expect(screen.getByText(/true/)).toBeInTheDocument();
       expect(screen.getByText(/101/)).toBeInTheDocument();
     });
 
     test('should maintain typing when filters', () => {
-      const onSelectedCategoriesChangeFn = jest.fn()
-      render(<CategoryWidgetUI data={NotStringData} onSelectedCategoriesChange={onSelectedCategoriesChangeFn} />);
-      userEvent.click(screen.getByText(/true/))
-      expect(onSelectedCategoriesChangeFn).toHaveBeenCalledWith([true])
-    })
-  })
+      const onSelectedCategoriesChangeFn = jest.fn();
+      render(
+        <CategoryWidgetUI
+          data={NotStringData}
+          onSelectedCategoriesChange={onSelectedCategoriesChangeFn}
+        />
+      );
+      userEvent.click(screen.getByText(/true/));
+      expect(onSelectedCategoriesChangeFn).toHaveBeenCalledWith([true]);
+    });
+  });
 });
diff --git a/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js b/packages/react-ui/__tests__/widgets/FeatureSelectionWidgetUI.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { render, queryByAttribute, fireEvent } from '@testing-library/react';
+import { render, queryByAttribute, fireEvent } from '../widgets/utils/testUtils';
 import FeatureSelectionWidgetUI from '../../src/widgets/FeatureSelectionWidgetUI';
-import { capitalize } from '@material-ui/core';
+import { capitalize } from '@mui/material';
 import CursorIcon from '../../src/assets/CursorIcon';
 import PolygonIcon from '../../src/assets/PolygonIcon';
 import RectangleIcon from '../../src/assets/RectangleIcon';
@@ -79,9 +79,9 @@ describe('FeatureSelectionWidgetUI', () => {
     expect(onEnabledChange).toHaveBeenCalledWith(false);
   });
 
-  test('selectionModes and editModes are rendered correctly in modes menu', () => {
+  test('selectionModes and editModes are rendered correctly in modes menu', async () => {
     const rendered = render(<CommonFeatureSelectionWidgetUI />);
-    const menuBtn = rendered.getByTitle('Select a mode');
+    const menuBtn = await rendered.findByLabelText('Select a mode');
     // Open menu
     fireEvent.click(menuBtn);
     // Once the menu is opened, check everything is okey rendered
@@ -90,13 +90,13 @@ describe('FeatureSelectionWidgetUI', () => {
     );
   });
 
-  test('select mode event is correctly raised', () => {
+  test('select mode event is correctly raised', async () => {
     const onSelectMode = jest.fn();
     const rendered = render(
       <CommonFeatureSelectionWidgetUI onSelectMode={onSelectMode} />
     );
 
-    const menuBtn = rendered.getByTitle('Select a mode');
+    const menuBtn = await rendered.findByLabelText('Select a mode');
     // Open menu
     fireEvent.click(menuBtn);
 

diff --git a/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js b/packages/react-ui/__tests__/widgets/FormulaWidgetUI.test.js
@@ -1,9 +1,17 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen } from '../widgets/utils/testUtils';
 import FormulaWidgetUI from '../../src/widgets/FormulaWidgetUI';
 import { currencyFormatter } from './testUtils';
 
 describe('FormulaWidgetUI', () => {
+  beforeEach(() => {
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb());
+  });
+
+  afterEach(() => {
+    window.requestAnimationFrame.mockRestore();
+  });
+
   test('empty', () => {
     render(<FormulaWidgetUI />);
     expect(screen.getByText(/-/)).toBeInTheDocument();

diff --git a/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js b/packages/react-ui/__tests__/widgets/HistogramWidgetUI.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen } from '../widgets/utils/testUtils';
 import HistogramWidgetUI from '../../src/widgets/HistogramWidgetUI/HistogramWidgetUI';
-import { getMaterialUIContext, mockEcharts } from './testUtils';
+import { mockEcharts } from './testUtils';
 
 describe('HistogramWidgetUI', () => {
   beforeAll(() => {
@@ -22,8 +22,7 @@ describe('HistogramWidgetUI', () => {
     onSelectedBarsChange
   };
 
-  const Widget = (props) =>
-    getMaterialUIContext(<HistogramWidgetUI {...defaultProps} {...props} />);
+  const Widget = (props) => <HistogramWidgetUI {...defaultProps} {...props} />;
 
   test('all selected', () => {
     render(<Widget />);

diff --git a/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js b/packages/react-ui/__tests__/widgets/LegendWidgetUI.test.js
@@ -1,9 +1,7 @@
 import React from 'react';
-import { getMaterialUIContext } from './testUtils';
 import LegendWidgetUI from '../../src/widgets/legend/LegendWidgetUI';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { Typography } from '@material-ui/core';
-import { act } from '@testing-library/react-hooks';
+import { fireEvent, render, screen } from '../widgets/utils/testUtils';
+import { Typography } from '@mui/material';
 
 const CUSTOM_CHILDREN = <Typography>Legend custom</Typography>;
 
@@ -118,7 +116,7 @@ describe('LegendWidgetUI', () => {
       }
     }
   ];
-  const Widget = (props) => getMaterialUIContext(<LegendWidgetUI {...props} />);
+  const Widget = (props) => <LegendWidgetUI {...props} />;
 
   test('single legend', () => {
     render(<Widget layers={[DATA[0]]}></Widget>);
@@ -200,13 +198,13 @@ describe('LegendWidgetUI', () => {
     expect(screen.getByText('Test')).toBeInTheDocument();
   });
 
-  test('legend with opacity control', () => {
+  test('legend with opacity control', async() => {
     const legendConfig = DATA[7];
     const onChangeOpacity = jest.fn();
     const container = render(
       <Widget layers={[legendConfig]} onChangeOpacity={onChangeOpacity}></Widget>
     );
-    const layerOptionsBtn = screen.getByTitle('Layer options');
+    const layerOptionsBtn = await screen.findByLabelText('Layer options');
     expect(layerOptionsBtn).toBeInTheDocument();
     layerOptionsBtn.click();
     expect(screen.getByText('Opacity')).toBeInTheDocument();
@@ -254,22 +252,23 @@ describe('LegendWidgetUI', () => {
     expect(screen.getByText('Legend custom')).toBeInTheDocument();
   });
 
-  test('with custom layer options', () => {
+  test('with custom layer options', async() => {
     const layer = DATA[8];
     render(
       <Widget layers={[layer]} customLayerOptions={LAYER_OPTIONS_COMPONENTS}></Widget>
     );
-    const layerOptionsBtn = screen.getByTitle('Layer options');
+    const layerOptionsBtn = await screen.findByLabelText('Layer options');
     expect(layerOptionsBtn).toBeInTheDocument();
     layerOptionsBtn.click();
     expect(screen.getByText('PaletteSelector')).toBeInTheDocument();
   });
-  test('with custom layer options - unknown option', () => {
+
+  test('with custom layer options - unknown option', async() => {
     const layer = { ...DATA[8], options: ['unknown'] };
     render(
       <Widget layers={[layer]} customLayerOptions={LAYER_OPTIONS_COMPONENTS}></Widget>
     );
-    const layerOptionsBtn = screen.getByTitle('Layer options');
+    const layerOptionsBtn = await screen.findByLabelText('Layer options');
     expect(layerOptionsBtn).toBeInTheDocument();
     layerOptionsBtn.click();
     expect(screen.getByText('Unknown layer option')).toBeInTheDocument();