CartoDB · vmilan · Feb 14, 2023 · Oct 17, 2022 · Oct 18, 2022 · Oct 19, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,8 +2,79 @@
 
 ## Not released
 
+## 2.0
+
+### 2.0.0-beta.0 (2023-02-14)
+### 2.0.0-alpha.0 (2023-02-13)
+
+- MUI5 & new Design System upgrade [#494](https://github.com/CartoDB/carto-react/pull/494)
+
 ## 1.5
 
+### 1.5.1 (2023-02-06)
+
+- Add optional sortByColumnType param to fix number sorting in TableWidget [#593](https://github.com/CartoDB/carto-react/pull/593)
+- Requests to CARTO APIs V3 will be authorized through the Authorization header instead of using a query param [#592](https://github.com/CartoDB/carto-react/pull/592)
+- Provide unified CLIENT_ID for metrics [#591](https://github.com/CartoDB/carto-react/pull/591)
+
+### 1.5.0 (2023-01-31)
+
+### 1.5.0-alpha.15 (2023-01-30)
+
+- Fix support for MVT in FeaturesDroppedLoader [#587](https://github.com/CartoDB/carto-react/pull/587)
+
+### 1.5.0-alpha.14 (2023-01-24)
+
+- Fix isDroppingFeatures converting to Boolean [#583](https://github.com/CartoDB/carto-react/pull/583)
+
+### 1.5.0-alpha.13 (2023-01-23)
+
+- Improve typing for FeatureSelectionWidget [#580](https://github.com/CartoDB/carto-react/pull/580)
+- Fix ComparativeCategoryWidgetUI tooltip formatter [#579](https://github.com/CartoDB/carto-react/pull/579)
+- Fix gmaps warning caused by callback now been mandatary from version >=3.51.6 [#581](https://github.com/CartoDB/carto-react/pull/581)
+
+### 1.5.0-alpha.12 (2023-01-20)
+
+- HistogramWidget: fix handling of min/max properties [#574](https://github.com/CartoDB/carto-react/pull/574)
+- Adapt comparative category widget design [#575](https://github.com/CartoDB/carto-react/pull/575)
+- Improved Comparative Formula UI props interface [#573](https://github.com/CartoDB/carto-react/pull/573)
+
+### 1.5.0-alpha.11 (2023-01-18)
+
+- Remove custom fetch function. Fixes issues with icon loading and FillStyleExtensions [#561](https://github.com/CartoDB/carto-react/pull/561)
+- Bump deck.gl to latest 8.8.23 [#571](https://github.com/CartoDB/carto-react/pull/571)
+
+### 1.5.0-alpha.10 (2023-01-04)
+
+- Allow to use custom version explicitly in GoogleMap (not 'beta' by default now) [#550](https://github.com/CartoDB/carto-react/pull/550)
+- Fix lack of refresh in BarWidgetUI when modifying yAxisData dinamically [#558](https://github.com/CartoDB/carto-react/pull/558)
+
+### 1.5.0-alpha.9 (2022-11-29)
+
+- Improve rendering performance of FeatureSelectionLayer (mask layer) [#541](https://github.com/CartoDB/carto-react/pull/541)
+
+### 1.5.0-alpha.8 (2022-11-25)
+
+- Implement ComparativePieWidgetUI [#510](https://github.com/CartoDB/carto-react/pull/510)
+- Fix `executeSQL` through **POST** request [#531](https://github.com/CartoDB/carto-react/pull/531)
+
+### 1.5.0-alpha.7 (2022-11-09)
+
+- Implement ComparativeCategoryWidgetUI [#505](https://github.com/CartoDB/carto-react/pull/505)
+- Fix `executeModel` through **POST** request [#525](https://github.com/CartoDB/carto-react/pull/525)
+
+### 1.5.0-alpha.6 (2022-11-02)
+
+- Fix TileLayer unauthorized error due to [breaking changes](https://github.com/visgl/deck.gl/pull/7287) in deck.gl >=8.9.0-alpha.3 and >=8.8.15 [#519](https://github.com/CartoDB/carto-react/pull/519)
+- Bump deck.gl to 8.8.15 [#520](https://github.com/CartoDB/carto-react/pull/520)
+- Fix missing implementation in stats to support `queryParameters` in RangeWidget and HistogramWidget [#517](https://github.com/CartoDB/carto-react/pull/517)
+- AnimatedNumber component with hook wrapping `animateValue` [#509](https://github.com/CartoDB/carto-react/pull/509)
+- Implement ComparativeFormulaWidgetUI [#504](https://github.com/CartoDB/carto-react/pull/504)
+
+### 1.5.0-alpha.5 (2022-10-26)
+
+- Fix LegendCategories displaying outlined points [#508](https://github.com/CartoDB/carto-react/pull/508)
+
 ### 1.5.0-alpha.4 (2022-10-14)
 
 - Update nebula to latest stable 1.0.4 and deck.gl ^8.9.0-alpha.4 [#491](https://github.com/CartoDB/carto-react/pull/491)
@@ -24,6 +95,14 @@
 
 ## 1.4
 
+### 1.4.3 (2022-11-03)
+
+- Fix TileLayer unauthorized error due to [breaking changes](https://github.com/visgl/deck.gl/pull/7287) in deck.gl >=8.8.15 [#519](https://github.com/CartoDB/carto-react/pull/519)
+
+### 1.4.2 (2022-10-27)
+
+- Support for **deck.gl 8.8.15** _(breaking change)_. It requires ‘quadbin’ >= 0.1.5
+
 ### 1.4.1 (2022-09-20)
 
 - Fix the Feature selection tool by setting the `EditableGeoJsonLayer` billboard property to false to be compatible with Google raster base maps

diff --git a/DEVELOPERS.md b/DEVELOPERS.md
@@ -35,7 +35,7 @@ Then, inside the proper template folder in carto-react-template, link packages w
 
 You will need npm credentials under @carto organization.
 
-To make a **prerelease**:
+### To make a **prerelease**:
 
 1. Create a new branch from master, named after the new version (eg, if current version is v1.0.0-rc.2, `git checkout -b release-1.0.0-rc.3`)
 2. Modify the changelog, creating a new entry with current contents from `Not released` for the new release; eg: `## 1.0.0-rc.3 (2021-03-22)`. Keep 'Not released' header for the future work, and commit it to the new branch
@@ -47,11 +47,18 @@ To make a **prerelease**:
 8. Choose `Custom prerelease` and ensure the packages version proposed is correct (eg. change suffix to 'alpha' or 'beta', instead of 'rc' if required)
 9. Once the npm package has been published, `Merge the PR` to master from github
 10. Update the storybook (if required)
+11. Coordinate with the design team on minor and major bump versions. C4R and Design system library must have the same paired version.
 
-To make an official **release**:
+### To make an official **release**:
 
 1. Repeat the same steps as in a prerelease, but executing `yarn publish:release`
 
+### To apply a hotfix patch
+
+- If change also applies to current master, it's recommended to start by creating a PR applying the fix it (to avoid forgetting it).
+- Then create a branch for the patch release, but this time start with the desired (usually stable) branch. For example, to create a patch 1.4.8, while not affecting current master, do `git checkout -b release-v1.4.8 release-v1.4.7`. Then apply there, locally, all changes as needed. If you created a first PR for master, you can use cherry-pick to share changes among master & patch.
+- After having everything ready, go as usual, with changelog entry + `yarn publish:release`
+
 ## Firebase deployment of storybook
 
 (Restricted to CARTO developers)

diff --git a/UPGRADE.md b/UPGRADE.md
@@ -0,0 +1,215 @@
+# Upgrade to the new design system
+
+# Breaking changes in Mui v5
+
+Please, follow the Mui guides related to breaking changes in components and styles:
+
+- [Styles](https://mui.com/material-ui/migration/v5-style-changes/)
+- [Components](https://mui.com/material-ui/migration/v5-component-changes/)
+
+# MUI theme
+
+[carto-theme.js](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/src/theme/carto-theme.js) file splitted in sections:
+
+- CSS baseline
+- Color palette
+- Typography
+- Shadows
+- Components overrides
+
+Also added some files for shared constants (`themeConstants.js`) and useful functions (`themeUtils.js`).
+
+Removed unused custom `createTheme` function in `carto-theme.js`.
+
+## theme.spacing
+
+We have a new custom spacing constant in carto-theme, `spacingValue`, which you should use instead of the common `theme.spacing()` function in cases where you need to do value calculations, because since Mui v5, theme.spacing is no longer a number, but a string in this format: `number + px`.
+
+Note that if you're using `calc()` in your styles, you can keep using `theme.spacing()` as usual.
+
+`theme.spacingValue * 2`
+
+Needed changes:
+
+1. Change `${theme.spacing(xx)}px` by `${theme.spacing(xx)}`. It means, without the `px` ending, since in Mui v5 it is appended to the end of the string by default.
+
+Tip: An easy search to catch up this, would be `)}px`
+
+2. Change `-theme.spacing(xx)` by `theme.spacing(-xx)`. It means, move the negative symbol inside the function.
+
+Tip: An easy search to catch up this, would be `-theme.spacing(`
+
+## Icons
+
+We have this kind of rules in buttons to cover the common use cases:
+
+`svg path { fill: currentColor }`
+
+In case you don't need the icon to be filled, you can apply this class to the svg parent: `.doNotFillIcon`
+
+`<CloseIcon className="doNotFillIcon" />`
+
+## Typography
+
+`responsiveFontSizes` simplified due we want to resize only a few variants through the theme.
+
+Added a few custom variants to the typography set:
+
+- overlineDelicate
+- code1
+- code2
+- code3
+
+Some variants have been replaced because they were so specific to some components, these are:
+
+- charts (replaced by `theme.palette.overline + weight='strong'`)
+
+For external use: `Open Sans` and `Montserrat` families have been replaced by `Inter` and `Overpass Mono`, you have an example of this in the [`preview-head.html`](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/storybook/.storybook/preview-head.html) file.
+
+We have a `Typography` component that uses `Mui Typography` and extends it with some useful props:
+
+- weight
+- italic
+
+This way we can be more flexible regarding text styles without adding too many variants to the Mui component.
+
+In short, instead of Mui Typography, the component you should use to add text is this one:
+`react-ui/src/components/atoms/Typography`
+
+For external use: `import { Typography } from '@carto/react-ui';`.
+
+## Colors
+
+Some keys have been removed from [color palette](https://github.com/CartoDB/carto-react/tree/master/packages/react-ui/src/theme) due they are unused:
+
+- activatedOpacity
+- hoverOpacity
+- disabledOpacity
+- selectedOpacity
+- focusOpacity
+- other, all removed but divider, which is moved to first level
+
+Some others have been moved or replaced because they aren't native MUI keys and are so specific to some components, these are:
+
+- charts (replaced by `theme.palette.black[%]`)
+
+`grey palette` is not used to design (and therefore not for style) components directly. We have a set of neutral colors to use in the custom `default` variant.
+
+We also have a set of `shade` colors (with transparency):
+
+- black
+- white
+
+Important: `primary.relatedLight` and `secondary.relatedLight` has to be replaced by `primary.background` and `secondary.background`.
+
+## Spacing
+
+Design is restringed to a few specific values for spacing, which are:
+
+`0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9, 12, 15`.
+
+## Shapes
+
+Design is restringed to a few specific values for border radius, which are:
+
+`0.5, 1, 1.5, 2`.
+
+Use: `borderRadius: theme.spacing(x)`
+
+## Shadows / Elevations
+
+Design is restringed to a few specific values for shadows, which are:
+
+`0, 1, 2, 4, 6, 8, 16, 24`.
+
+# Components
+
+## Button
+
+We have a `Button` component that uses `Mui Button` and wraps its children in `Typography` to meet with the designed behavior (text overflow case).
+
+So, instead of Mui Button, the component you should use to create buttons is this one:
+`react-ui/src/components/atoms/Button`
+
+For external use: `import { Button } from '@carto/react-ui';`.
+
+## Tooltip
+
+Now, by default is placed `top` and has an `arrow` indicator, so you don't need to specify these properties anymore.
+
+We have a new component for building data structures within Tooltips, `TooltipData`.
+
+## Password Input Field
+
+We have a custom component to build the show / hide content logic on top of TextField Mui component.
+
+Instead of `<TextField type='password' /> ` you can use:
+`react-ui/src/components/atoms/PasswordField`
+
+For external use: `import { PasswordField } from '@carto/react-ui';`.
+
+## Select Field
+
+We have a custom component to build the `placeholder` and `multiple selection` logic on top of TextField Mui component.
+
+Instead of `<TextField select /> ` or `<Select />` you can use:
+`react-ui/src/components/atoms/SelectField`
+
+For external use: `import { SelectField } from '@carto/react-ui';`.
+
+## InputFile / UploadField
+
+This component is used to display and input `type='file'`.
+
+We are replacing `InputFile` component by the new `UploadField`.
+
+Instead of `<Inputfile /> ` you can use:
+`react-ui/src/components/molecules/UploadField`
+
+For external use: `import { UploadField } from '@carto/react-ui';`.
+
+## AppBar
+
+We have a custom component to build the basic structure and styles on top of AppBar Mui component.
+
+This component normalize size and position of common elements like:
+
+- logo
+- Texts
+- Avatar
+- Burger menu icon
+
+You can use `<AppBar /> ` from:
+`react-ui/src/components/organisms/AppBar`
+
+For external use: `import { AppBar } from '@carto/react-ui';`.
+
+# Testing
+
+Mui5 has changed the DOM tags, so this is causing some E2E test to fail.
+
+## Aria attributes
+
+Mui5 has improve the `accesibility` of many of the components, adding by default some attributes to the DOM, like aria-label.
+
+This can cause some tests to fail if `aria-label` is not correctly created, because if this attribute is present, `Playwright` will check its content rather than the text of the node itself.
+
+## Tabs
+
+Some tests rely on tab clicking, but with the new design, the click is disabled on selected tab. So, if your test fails in an assert like this:
+
+`await page.getByRole('tab', { name: 'Map' }).click()`
+
+Before the click, yo have to check if the tab is selected.
+
+We have an `isAriaAttributeValue` function in `@utils/ariaAssertions` to check for some aria tags not supported by default by Playwright.
+
+This assert will pass:
+
+```
+  const MapPreviewTab = page.getByRole('tab', { name: 'Map' })
+
+  if (await isAriaAttributeValue(MapPreviewTab, 'selected', 'false')) {
+    await MapPreviewTab.click()
+  }
+```
diff --git a/jest.config.base.js b/jest.config.base.js
@@ -23,7 +23,7 @@ module.exports = {
   // collectCoverageFrom: undefined,
 
   // The directory where Jest should output its coverage files
-  coverageDirectory: "coverage",
+  coverageDirectory: 'coverage',
 
   // An array of regexp pattern strings used to skip coverage collection
   // coveragePathIgnorePatterns: [
@@ -40,9 +40,7 @@ module.exports = {
   //   "lcov",
   //   "clover"
   // ],
-  coverageReporters: [
-    "json"
-  ],
+  coverageReporters: ['json'],
 
   // An object that configures minimum threshold enforcement for coverage results
   // coverageThreshold: undefined,
@@ -69,9 +67,7 @@ module.exports = {
   // maxWorkers: "50%",
 
   // An array of directory names to be searched recursively up from the requiring module's location
-  moduleDirectories: [
-    "node_modules"
-  ],
+  moduleDirectories: ['node_modules'],
 
   // An array of file extensions your modules use
   // moduleFileExtensions: [
@@ -154,10 +150,7 @@ module.exports = {
   //   "**/__tests__/**/*.[jt]s?(x)",
   //   "**/?(*.)+(spec|test).[tj]s?(x)"
   // ],
-  testMatch: [
-    "**/?(*.)+(spec|test).js"
-  ],
-
+  testMatch: ['**/?(*.)+(spec|test).js'],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
   // testPathIgnorePatterns: [
@@ -187,8 +180,9 @@ module.exports = {
   //   "/node_modules/",
   //   "\\.pnp\\.[^\\/]+$"
   // ],
-    transformIgnorePatterns: ['node_modules/(?!(@mapbox/tiny-sdf|mapbox-gl)/)'],
-
+  transformIgnorePatterns: [
+    'node_modules/(?!(@mapbox/tiny-sdf|mapbox-gl|d3-array|internmap|d3-color|d3-scale|d3-interpolate|d3-format|d3-time|d3-time-format)/)'
+  ]
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,