From e100481cd083b65b278f5e2663d72e8df808712b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zbigniew=20Zag=C3=B3rski?= <1507542+zbigg@users.noreply.github.com> Date: Thu, 27 Apr 2023 11:11:37 +0200 Subject: [PATCH 01/12] 2.0.2 (bis) (#660) --- lerna.json | 2 +- packages/react-api/package.json | 8 ++++---- packages/react-auth/package.json | 4 ++-- packages/react-basemaps/package.json | 4 ++-- packages/react-core/package.json | 2 +- packages/react-redux/package.json | 6 +++--- packages/react-ui/package.json | 4 ++-- packages/react-widgets/package.json | 12 ++++++------ packages/react-workers/package.json | 4 ++-- 9 files changed, 23 insertions(+), 23 deletions(-) diff --git a/lerna.json b/lerna.json index 01d1dc85f..82240e466 100644 --- a/lerna.json +++ b/lerna.json @@ -4,5 +4,5 @@ ], "npmClient": "yarn", "useWorkspaces": true, - "version": "2.0.1" + "version": "2.0.2" } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index b978740ee..616c2f41d 100644 --- a/packages/react-api/package.json +++ b/packages/react-api/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-api", - "version": "2.0.1", + "version": "2.0.2", "description": "CARTO for React - Api", "author": "CARTO Dev Team", "keywords": [ @@ -64,9 +64,9 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^2.0.1", - "@carto/react-redux": "^2.0.1", - "@carto/react-workers": "^2.0.1", + "@carto/react-core": "^2.0.2", + "@carto/react-redux": "^2.0.2", + "@carto/react-workers": "^2.0.2", "@deck.gl/carto": "^8.9.6", "@deck.gl/core": "^8.9.6", "@deck.gl/extensions": "^8.9.6", diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json index 2f4d0fac1..53c6a6a36 100644 --- a/packages/react-auth/package.json +++ b/packages/react-auth/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-auth", - "version": "2.0.1", + "version": "2.0.2", "description": "CARTO for React - Auth", "author": "CARTO Dev Team", "keywords": [ @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^2.0.1", + "@carto/react-core": "^2.0.2", "react": "17.x || 18.x", "react-dom": "17.x || 18.x" } diff --git a/packages/react-basemaps/package.json b/packages/react-basemaps/package.json index 612cabe34..baa3c84e3 100644 --- a/packages/react-basemaps/package.json +++ b/packages/react-basemaps/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-basemaps", - "version": "2.0.1", + "version": "2.0.2", "description": "CARTO for React - Basemaps", "keywords": [ "carto", @@ -64,7 +64,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^2.0.1", + "@carto/react-core": "^2.0.2", "@deck.gl/google-maps": "^8.9.6", "react": "17.x || 18.x", "react-dom": "17.x || 18.x" diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 256857835..609dbfbe5 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-core", - "version": "2.0.1", + "version": "2.0.2", "description": "CARTO for React - Core", "author": "CARTO Dev Team", "keywords": [ diff --git a/packages/react-redux/package.json b/packages/react-redux/package.json index 3511ab073..d14dfb331 100644 --- a/packages/react-redux/package.json +++ b/packages/react-redux/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-redux", - "version": "2.0.1", + "version": "2.0.2", "description": "CARTO for React - Redux", "author": "CARTO Dev Team", "keywords": [ @@ -63,8 +63,8 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^2.0.1", - "@carto/react-workers": "^2.0.1", + "@carto/react-core": "^2.0.2", + "@carto/react-workers": "^2.0.2", "@deck.gl/carto": "^8.9.6", "@deck.gl/core": "^8.9.6", "@reduxjs/toolkit": "^1.5.0" diff --git a/packages/react-ui/package.json b/packages/react-ui/package.json index 005dd1538..a548121eb 100644 --- a/packages/react-ui/package.json +++ b/packages/react-ui/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-ui", - "version": "2.0.1", + "version": "2.0.2", "description": "CARTO for React - UI", "author": "CARTO Dev Team", "keywords": [ @@ -78,7 +78,7 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-core": "^2.0.1", + "@carto/react-core": "^2.0.2", "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", "@mui/icons-material": "^5.11.16", diff --git a/packages/react-widgets/package.json b/packages/react-widgets/package.json index d4f62be57..9eeff9f47 100644 --- a/packages/react-widgets/package.json +++ b/packages/react-widgets/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-widgets", - "version": "2.0.1", + "version": "2.0.2", "description": "CARTO for React - Widgets", "author": "CARTO Dev Team", "keywords": [ @@ -65,11 +65,11 @@ "@babel/runtime": "^7.13.9" }, "peerDependencies": { - "@carto/react-api": "^2.0.1", - "@carto/react-core": "^2.0.1", - "@carto/react-redux": "^2.0.1", - "@carto/react-ui": "^2.0.1", - "@carto/react-workers": "^2.0.1", + "@carto/react-api": "^2.0.2", + "@carto/react-core": "^2.0.2", + "@carto/react-redux": "^2.0.2", + "@carto/react-ui": "^2.0.2", + "@carto/react-workers": "^2.0.2", "@deck.gl/core": "^8.9.6", "@deck.gl/layers": "^8.9.6", "@emotion/react": "^11.10.6", diff --git a/packages/react-workers/package.json b/packages/react-workers/package.json index e6b7d24fd..25b57b2f3 100644 --- a/packages/react-workers/package.json +++ b/packages/react-workers/package.json @@ -1,6 +1,6 @@ { "name": "@carto/react-workers", - "version": "2.0.1", + "version": "2.0.2", "description": "CARTO for React - Workers", "author": "CARTO Dev Team", "keywords": [ @@ -62,7 +62,7 @@ }, "dependencies": { "@babel/runtime": "^7.13.9", - "@carto/react-core": "^2.0.1", + "@carto/react-core": "^2.0.2", "@turf/bbox-polygon": "^6.3.0", "@turf/boolean-intersects": "^6.3.0", "@turf/boolean-within": "^6.3.0", From 74f4b69981aa5019814af1aea0cd47c395c7ab66 Mon Sep 17 00:00:00 2001 From: Janto Lima Date: Fri, 28 Apr 2023 18:35:18 +0200 Subject: [PATCH 02/12] Migrate 'LegendCategories' Component from makeStyles to styled-component + cleanup (#634) --- CHANGELOG.md | 1 + .../widgets/legend/LegendCategories.test.js | 25 ++- .../react-ui/src/widgets/OpacityControl.js | 1 - .../src/widgets/legend/LegendCategories.js | 159 ++++++++---------- 4 files changed, 89 insertions(+), 97 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 614b65786..69ee578d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ - Fix storybook publication with Node 18 [#654](https://github.com/CartoDB/carto-react/pull/654) - Fix Histogram widget when showing just one row of data [#653](https://github.com/CartoDB/carto-react/pull/653) - WrapperWidgetUI component migrated from makeStyles to styled-components + cleanup [#633](https://github.com/CartoDB/carto-react/pull/633) +- LegendCategories component migrated from makeStyles to styled-components + cleanup [#634](https://github.com/CartoDB/carto-react/pull/634) ### 2.0.1 (2023-04-14) diff --git a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js index bc1582ab4..b38c72d3a 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js @@ -1,7 +1,8 @@ import React from 'react'; -import { render, screen } from '../../widgets/utils/testUtils'; +import { render, screen } from '../utils/testUtils'; import LegendCategories from '../../../src/widgets/legend/LegendCategories'; import { getPalette } from '../../../src/utils/palette'; +import { hexToRgb } from '@mui/material'; const COLOR = 'TealGrn'; @@ -21,8 +22,10 @@ describe('LegendCategories', () => { test('renders colors (CARTOColors) correctly', () => { render(); const elements = document.querySelectorAll('[class*="marker"]'); - getPalette(COLOR, 2).forEach((color, idx) => - expect(elements[idx]).toHaveStyle(`background-color: ${color}`) + getPalette(COLOR, 2).forEach((color, idx) => { + const styles = window.getComputedStyle(elements[idx]); + expect(styles['background-color']).toBe(hexToRgb(color)) + } ); }); test('renders colors (hex) correctly', () => { @@ -35,8 +38,10 @@ describe('LegendCategories', () => { test('renders stroked colors correctly', () => { render(); const elements = document.querySelectorAll('[class*="marker"]'); - getPalette(COLOR, 2).forEach((color, idx) => - expect(elements[idx]).toHaveStyle(`border-color: ${color}`) + getPalette(COLOR, 2).forEach((color, idx) => { + const styles = window.getComputedStyle(elements[idx]); + expect(styles['border-color']).toBe(color); + } ); }); test('renders masked icons correctly', () => { @@ -47,8 +52,9 @@ describe('LegendCategories', () => { ); const elements = document.querySelectorAll('[class*="marker"]'); getPalette(COLOR, 2).forEach((color, idx) => { - expect(elements[idx]).toHaveStyle(`mask-image: url(https://xyz.com/x.png)`); - expect(elements[idx]).toHaveStyle(`background-color: ${color}`); + const styles = window.getComputedStyle(elements[idx]); + expect(styles['mask-image']).toBe('url(https://xyz.com/x.png)'); + expect(styles['background-color']).toBe(hexToRgb(color)); }); }); test('renders non-masked icons correctly', () => { @@ -63,8 +69,9 @@ describe('LegendCategories', () => { ); const elements = document.querySelectorAll('[class*="marker"]'); getPalette(COLOR, 2).forEach((color, idx) => { - expect(elements[idx]).toHaveStyle(`background-image: url(https://xyz.com/x.png)`); - expect(elements[idx]).toHaveStyle(`background-color: rgba(0,0,0,0)`); + const styles = window.getComputedStyle(elements[idx]); + expect(styles['background-image']).toBe('url(https://xyz.com/x.png)'); + expect(styles['background-color']).toBe('rgba(0, 0, 0, 0)'); }); }); }); diff --git a/packages/react-ui/src/widgets/OpacityControl.js b/packages/react-ui/src/widgets/OpacityControl.js index 5515dab22..97f94e614 100644 --- a/packages/react-ui/src/widgets/OpacityControl.js +++ b/packages/react-ui/src/widgets/OpacityControl.js @@ -46,7 +46,6 @@ export default function OpacityControl({ opacity, onChangeOpacity }) { min={0} max={100} step={1} - xs mt={1} onChange={(_, value) => onChangeOpacity(value / 100)} aria-labelledby='input-slider' diff --git a/packages/react-ui/src/widgets/legend/LegendCategories.js b/packages/react-ui/src/widgets/legend/LegendCategories.js index a8d98b696..10ef61be4 100644 --- a/packages/react-ui/src/widgets/legend/LegendCategories.js +++ b/packages/react-ui/src/widgets/legend/LegendCategories.js @@ -1,6 +1,5 @@ import React, { useEffect, useRef, useState } from 'react'; -import { Box, Grid, Tooltip } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; +import { Box, Grid, Tooltip, styled } from '@mui/material'; import { getPalette } from '../../utils/palette'; import PropTypes from 'prop-types'; import Typography from '../../components/atoms/Typography'; @@ -65,61 +64,70 @@ LegendCategories.propTypes = { export default LegendCategories; -// Aux -const useStyles = makeStyles((theme) => ({ - legendCategories: { - alignItems: 'center' - }, - marker: { - whiteSpace: 'nowrap', - display: 'block', - width: '12px', - height: '12px', +const getCircleStyles = ({ isMax, color, isStrokeColor, theme }) => ({ + border: '2px solid transparent', + '&::after': { + position: 'absolute', + display: isMax ? 'block' : 'none', + content: '""', + width: theme.spacing(2), + height: theme.spacing(2), + border: `2px solid ${theme.palette.grey[900]}`, + transform: 'translate(-30%, -30%)', borderRadius: '50%', - position: 'relative', - border: '2px solid transparent' - }, - circle: { - border: '2px solid transparent', - '&::after': { - position: 'absolute', - display: ({ isMax }) => (isMax ? 'block' : 'none'), - content: '""', - width: '16px', - height: '16px', - border: `2px solid ${theme.palette.grey[900]}`, - transform: 'translate(-30%, -30%)', - borderRadius: '50%', - boxSizing: 'content-box' - } - }, - icon: { - maskRepeat: 'no-repeat', - maskSize: 'cover', - backgroundRepeat: 'no-repeat', - backgroundSize: 'cover' + boxSizing: 'content-box' }, - flexParent: { - display: 'flex', - alignItems: 'center' - }, - longTruncate: { - flex: 1, - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis' - }, - titlePhantom: { - opacity: 0, - position: 'absolute', - whiteSpace: 'nowrap', - pointerEvents: 'none' - } + ...(isStrokeColor ? { borderColor: color } : { backgroundColor: color }) +}); + +const getIconStyles = ({ icon, color, maskedIcon }) => ({ + maskRepeat: 'no-repeat', + maskSize: 'cover', + backgroundRepeat: 'no-repeat', + backgroundSize: 'cover', + ...(maskedIcon + ? { + backgroundColor: color, + maskImage: `url(${icon})`, + WebkitMaskImage: `url(${icon})` + } + : { + backgroundColor: `rgba(0,0,0,0)`, + backgroundImage: `url(${icon})` + }) +}); + +const Marker = styled(Box, { + shouldForwardProp: (prop) => + !['isMax', 'icon', 'maskedIcon', 'color', 'isStrokeColor'].includes(prop) +})(({ isMax, icon, maskedIcon, color, isStrokeColor, theme }) => ({ + whiteSpace: 'nowrap', + display: 'block', + width: theme.spacing(1.5), + height: theme.spacing(1.5), + borderRadius: '50%', + position: 'relative', + border: '2px solid transparent', + ...(icon + ? getIconStyles({ icon, color, maskedIcon }) + : getCircleStyles({ isMax, color, isStrokeColor, theme })) })); -function Row({ label, isMax, isStrokeColor, color = '#000', icon, maskedIcon }) { - const classes = useStyles({ isMax }); +const LongTruncate = styled(Typography)(() => ({ + flex: 1, + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis' +})); + +const TitlePhantom = styled(LongTruncate)(() => ({ + opacity: 0, + position: 'absolute', + whiteSpace: 'nowrap', + pointerEvents: 'none' +})); +function Row({ label, isMax, isStrokeColor, color = '#000', icon, maskedIcon }) { const [showTooltip, setShowTooltip] = useState(false); const labelRef = useRef(null); const labelPhantomRef = useRef(null); @@ -135,48 +143,25 @@ function Row({ label, isMax, isStrokeColor, color = '#000', icon, maskedIcon }) return ( - + - - + {label} - - + + {label} - + ); From f184f418d3ca7a2108ca125acbaf81dffe2d58d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Fri, 28 Apr 2023 18:37:55 +0200 Subject: [PATCH 03/12] Prepare changelog --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 69ee578d9..c6b52ec64 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ ## Not released +- LegendCategories component migrated from makeStyles to styled-components + cleanup [#634](https://github.com/CartoDB/carto-react/pull/634) +- LegendProportion component migrated from makeStyles to styled-components + cleanup [#635](https://github.com/CartoDB/carto-react/pull/635) + ## 2.0 ### 2.0.2 (2023-04-26) @@ -12,7 +15,6 @@ - Fix storybook publication with Node 18 [#654](https://github.com/CartoDB/carto-react/pull/654) - Fix Histogram widget when showing just one row of data [#653](https://github.com/CartoDB/carto-react/pull/653) - WrapperWidgetUI component migrated from makeStyles to styled-components + cleanup [#633](https://github.com/CartoDB/carto-react/pull/633) -- LegendCategories component migrated from makeStyles to styled-components + cleanup [#634](https://github.com/CartoDB/carto-react/pull/634) ### 2.0.1 (2023-04-14) From befd65cc832d6a5c0b2d75a3ea9aa6cd969d59c9 Mon Sep 17 00:00:00 2001 From: Janto Lima Date: Fri, 28 Apr 2023 18:44:56 +0200 Subject: [PATCH 04/12] Migrate 'LegendProportion' component from makeStyles to styled-components + cleanup (#635) --- .../src/widgets/legend/LegendProportion.js | 93 +++++++------------ 1 file changed, 35 insertions(+), 58 deletions(-) diff --git a/packages/react-ui/src/widgets/legend/LegendProportion.js b/packages/react-ui/src/widgets/legend/LegendProportion.js index b97982ff9..d50c1b8f4 100644 --- a/packages/react-ui/src/widgets/legend/LegendProportion.js +++ b/packages/react-ui/src/widgets/legend/LegendProportion.js @@ -1,44 +1,50 @@ -import React from 'react'; -import { Box, Grid } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; +import { Box, Grid, styled } from '@mui/material'; import PropTypes from 'prop-types'; +import React from 'react'; import Typography from '../../components/atoms/Typography'; -const useStyles = makeStyles((theme) => ({ - circles: { - position: 'relative', - marginBottom: 4 - }, - avg: { - width: 12, - height: 2, +const sizes = { + 0: 12, + 1: 9, + 2: 6, + 3: 3 +}; + +const Circle = styled(Box, { + shouldForwardProp: (prop) => prop !== 'index' +})(({ index = 0, theme }) => { + const width = theme.spacing(sizes[index]); + const height = theme.spacing(sizes[index]); + + return { + border: `solid 1px ${theme.palette.grey[100]}`, + backgroundColor: theme.palette.grey[50], + borderRadius: '50%', position: 'absolute', - // TODO change color - border: `1px solid ${theme.palette.grey[900]}`, - borderRadius: 4, - backgroundColor: theme.palette.grey[900], right: 0, - boxSizing: 'border-box' - }, - errorContainer: { - maxWidth: 240 - } + bottom: 0, + width, + height + }; +}); + +const ProportionalGrid = styled(Grid)(({ theme: { spacing } }) => ({ + justifyContent: 'flex-end', + marginBottom: spacing(0.5), + position: 'relative' })); function LegendProportion({ legend }) { - const classes = useStyles(); - const { min, max, error } = calculateRange(legend); const [step1, step2] = !error ? calculateSteps(min, max) : [0, 0]; return ( - - - - - - + + {[...Array(4)].map((circle, index) => ( + + ))} + {error ? ( - + You need to specify valid numbers for the labels property @@ -122,32 +128,3 @@ function calculateSteps(min, max) { return [step1, step2]; } - -const useStylesCircle = makeStyles((theme) => ({ - circle: { - border: `solid 1px ${theme.palette.grey[100]}`, - backgroundColor: theme.palette.grey[50], - borderRadius: '50%', - position: 'absolute', - right: 0, - bottom: 0 - } -})); - -function Circle({ index = 0 }) { - const classes = useStylesCircle(); - - const sizes = { - 0: 96, - 1: 72, - 2: 48, - 3: 24 - }; - - const width = sizes[index]; - const height = sizes[index]; - - return ( - - ); -} From eee93467add863787fc30f5c063337be608e91a6 Mon Sep 17 00:00:00 2001 From: Janto Lima Date: Fri, 28 Apr 2023 18:50:13 +0200 Subject: [PATCH 05/12] Migrate 'LegendRamp' component from makeStyles to styled-component + cleanup (#636) --- CHANGELOG.md | 1 + .../widgets/legend/LegendRamp.test.js | 31 +++++---- .../react-ui/src/widgets/legend/LegendRamp.js | 68 +++++++------------ 3 files changed, 43 insertions(+), 57 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c6b52ec64..7095a3e03 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - LegendCategories component migrated from makeStyles to styled-components + cleanup [#634](https://github.com/CartoDB/carto-react/pull/634) - LegendProportion component migrated from makeStyles to styled-components + cleanup [#635](https://github.com/CartoDB/carto-react/pull/635) +- LegendRamp component migrated from makeStyles to styled-components + cleanup [#636](https://github.com/CartoDB/carto-react/pull/636) ## 2.0 diff --git a/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js b/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js index 59b2353a3..8edfd8d8d 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendRamp.test.js @@ -2,6 +2,7 @@ import React from 'react'; import { render, screen } from '../../widgets/utils/testUtils'; import LegendRamp from '../../../src/widgets/legend/LegendRamp'; import { getPalette } from '../../../src/utils/palette'; +import { hexToRgb } from '@mui/material'; const COLOR = 'TealGrn'; @@ -31,22 +32,28 @@ describe('LegendRamp', () => { expect(screen.queryByText('< 0')).toBeInTheDocument(); expect(screen.queryByText('≥ 200')).toBeInTheDocument(); - const elements = document.querySelectorAll('[class*="step"]'); + const elements = document.querySelectorAll('[data-testid=step-discontinuous]'); expect(elements.length).toBe(3); - getPalette(COLOR, 3).forEach((color, idx) => - expect(elements[idx]).toHaveStyle(`background-color: ${color}`) - ); + getPalette(COLOR, 3).forEach((color, idx) => { + const backgroundColor = window.getComputedStyle(elements[idx])[ + 'background-color' + ]; + expect(backgroundColor).toBe(hexToRgb(color)); + }); }); test('renders formatted labels correctly', () => { render(); expect(screen.queryByText('< 0 km')).toBeInTheDocument(); expect(screen.queryByText('≥ 200 km')).toBeInTheDocument(); - const elements = document.querySelectorAll('[class*="step"]'); + const elements = document.querySelectorAll('[data-testid=step-discontinuous]'); expect(elements.length).toBe(3); - getPalette(COLOR, 3).forEach((color, idx) => - expect(elements[idx]).toHaveStyle(`background-color: ${color}`) - ); + getPalette(COLOR, 3).forEach((color, idx) => { + const backgroundColor = window.getComputedStyle(elements[idx])[ + 'background-color' + ]; + expect(backgroundColor).toBe(hexToRgb(color)); + }); }); }); describe('continuous', () => { @@ -55,10 +62,10 @@ describe('LegendRamp', () => { expect(screen.queryByText('0')).toBeInTheDocument(); expect(screen.queryByText('200')).toBeInTheDocument(); - const ramp = document.querySelector('[class*="step"]'); + const ramp = document.querySelector('[data-testid=step-continuous]'); const palette = getPalette(COLOR, 2); expect(ramp).toHaveStyle( - `background-image: linear-gradient(to right, ${palette.join()})` + `background: linear-gradient(to right, ${palette.join()})` ); }); test('renders formatted labels correctly', () => { @@ -68,10 +75,10 @@ describe('LegendRamp', () => { expect(screen.queryByText('0 km')).toBeInTheDocument(); expect(screen.queryByText('200 km')).toBeInTheDocument(); - const ramp = document.querySelector('[class*="step"]'); + const ramp = document.querySelector('[data-testid=step-continuous]'); const palette = getPalette(COLOR, 2); expect(ramp).toHaveStyle( - `background-image: linear-gradient(to right, ${palette.join()})` + `background: linear-gradient(to right, ${palette.join()})` ); }); }); diff --git a/packages/react-ui/src/widgets/legend/LegendRamp.js b/packages/react-ui/src/widgets/legend/LegendRamp.js index 9d0e816f2..11f7f5d14 100644 --- a/packages/react-ui/src/widgets/legend/LegendRamp.js +++ b/packages/react-ui/src/widgets/legend/LegendRamp.js @@ -1,20 +1,11 @@ -import React from 'react'; -import { Grid, Tooltip } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; -import { getPalette } from '../../utils/palette'; +import { Grid, Tooltip, styled } from '@mui/material'; import PropTypes from 'prop-types'; -import { getMinMax } from './LegendProportion'; -import LegendProportion from './LegendProportion'; +import React from 'react'; import Typography from '../../components/atoms/Typography'; +import { getPalette } from '../../utils/palette'; +import LegendProportion, { getMinMax } from './LegendProportion'; -const useStyles = makeStyles(() => ({ - errorContainer: { - maxWidth: 240 - } -})); function LegendRamp({ isContinuous = false, legend }) { - const classes = useStyles(); - const { labels = [], colors = [] } = legend; const palette = getPalette( @@ -43,7 +34,7 @@ function LegendRamp({ isContinuous = false, legend }) { return ( {error ? ( - + You need to specify valid numbers for the labels property @@ -52,7 +43,7 @@ function LegendRamp({ isContinuous = false, legend }) { <> {isContinuous ? ( - + ) : ( ({ - step: { - height: 8, - borderRadius: 4 - } +const StepsContinuous = styled(Grid, { + shouldForwardProp: (prop) => prop !== 'palette' +})(({ palette, theme }) => ({ + height: theme.spacing(1), + borderRadius: theme.spacing(0.5), + background: `linear-gradient(to right, ${palette.join()})` })); -function StepsContinuous({ palette = [] }) { - const classes = useStylesStepsContinuous(); - - const backgroundImage = `linear-gradient(to right, ${palette.join()})`; - - return ; -} - -const useStylesStepsDiscontinuous = makeStyles(() => ({ - step: { - height: 8, - '&:first-child': { - borderRadius: '4px 0 0 4px' - }, - '&:last-child': { - borderRadius: '0 4px 4px 0' - } +const StepGrid = styled(Grid, { + shouldForwardProp: (prop) => prop !== 'color' +})(({ color, theme }) => ({ + height: theme.spacing(1), + backgroundColor: color, + '&:first-of-type': { + borderRadius: theme.spacing(0.5, 0, 0, 0.5) + }, + '&:last-of-type': { + borderRadius: theme.spacing(0, 0.5, 0.5, 0) } })); function StepsDiscontinuous({ labels = [], palette = [], max, min }) { - const classes = useStylesStepsDiscontinuous(); const rightLabels = labels.length ? [min, ...labels] : [min, max]; return ( @@ -139,12 +122,7 @@ function StepsDiscontinuous({ labels = [], palette = [], max, min }) { return ( - + ); })} From 738ee112243239281e139281fbe6e901a0247e89 Mon Sep 17 00:00:00 2001 From: Janto Lima Date: Fri, 28 Apr 2023 19:13:46 +0200 Subject: [PATCH 06/12] Migrate 'LegendWidgetUI' component from makeStyles to styled-component + cleanup (#637) --- CHANGELOG.md | 1 + .../src/widgets/legend/LegendProportion.js | 2 +- .../src/widgets/legend/LegendWidgetUI.js | 80 ++++++++----------- .../widgetsUI/LegendWidgetUI.stories.js | 1 - 4 files changed, 36 insertions(+), 48 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7095a3e03..dd70831e6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - LegendCategories component migrated from makeStyles to styled-components + cleanup [#634](https://github.com/CartoDB/carto-react/pull/634) - LegendProportion component migrated from makeStyles to styled-components + cleanup [#635](https://github.com/CartoDB/carto-react/pull/635) - LegendRamp component migrated from makeStyles to styled-components + cleanup [#636](https://github.com/CartoDB/carto-react/pull/636) +- LegendWidgetUI component migrated from makeStyles to styled-components + cleanup [#637](https://github.com/CartoDB/carto-react/pull/637) ## 2.0 diff --git a/packages/react-ui/src/widgets/legend/LegendProportion.js b/packages/react-ui/src/widgets/legend/LegendProportion.js index d50c1b8f4..5905864e2 100644 --- a/packages/react-ui/src/widgets/legend/LegendProportion.js +++ b/packages/react-ui/src/widgets/legend/LegendProportion.js @@ -42,7 +42,7 @@ function LegendProportion({ legend }) { {[...Array(4)].map((circle, index) => ( - + ))} ( ); -const useStyles = makeStyles((theme) => ({ - legend: { - minWidth: '240px', - backgroundColor: theme.palette.background.paper, - boxShadow: theme.shadows[1], - borderRadius: 4 - } +const LegendBox = styled(Box)(({ theme }) => ({ + minWidth: theme.spacing(30), + backgroundColor: theme.palette.background.paper, + boxShadow: theme.shadows[1], + borderRadius: theme.spacing(0.5) })); function LegendWidgetUI({ @@ -49,11 +46,10 @@ function LegendWidgetUI({ onChangeLegendRowCollapsed, title }) { - const classes = useStyles(); const isSingle = layers.length === 1; return ( - + - + ); } @@ -96,22 +92,25 @@ LegendWidgetUI.propTypes = { export default LegendWidgetUI; -const useStylesLegendContainer = makeStyles((theme) => ({ - header: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - height: '36px' - }, - button: { - flex: '1 1 auto', - justifyContent: 'space-between', - padding: theme.spacing(0.75, 1.25, 0.75, 3), - borderTop: ({ collapsed }) => - collapsed ? 'none' : `1px solid ${theme.palette.divider}`, - cursor: 'pointer' - }, - wrapperInner: { +const Header = styled(Grid)(({ theme }) => ({ + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + height: theme.spacing(4.5) +})); + +const HeaderButton = styled(Button, { + shouldForwardProp: (prop) => prop !== 'collapsed' +})(({ theme, collapsed }) => ({ + flex: '1 1 auto', + justifyContent: 'space-between', + padding: theme.spacing(0.75, 1.25, 0.75, 3), + borderTop: collapsed ? 'none' : `1px solid ${theme.palette.divider}`, + cursor: 'pointer' +})); + +const CollapseWrapper = styled(Collapse)(() => ({ + '.MuiCollapse-wrapperInner': { maxHeight: 'max(350px, 80vh)', overflowY: 'auto', overflowX: 'hidden' @@ -120,9 +119,6 @@ const useStylesLegendContainer = makeStyles((theme) => ({ function LegendContainer({ isSingle, children, collapsed, onChangeCollapsed, title }) { const wrapper = createRef(); - const classes = useStylesLegendContainer({ - collapsed - }); const handleExpandClick = () => { if (onChangeCollapsed) onChangeCollapsed(!collapsed); @@ -132,26 +128,18 @@ function LegendContainer({ isSingle, children, collapsed, onChangeCollapsed, tit children ) : ( <> - + {children} - - - - + + ); } diff --git a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js index d781d09cb..794e7d8fe 100644 --- a/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js +++ b/packages/react-ui/storybook/stories/widgetsUI/LegendWidgetUI.stories.js @@ -1,6 +1,5 @@ import React, { useState } from 'react'; import LegendWidgetUI from '../../../src/widgets/legend/LegendWidgetUI'; -import CartoIcon from '../../assets/carto-symbol.svg'; const options = { title: 'Organisms/Widgets/LegendWidgetUI', From e814621621ada81a627d14055eb64292e09dc920 Mon Sep 17 00:00:00 2001 From: Alberto Arana Date: Fri, 28 Apr 2023 19:19:07 +0200 Subject: [PATCH 07/12] Migrate 'GeocoderWidget' component from makeStyles to styled-component (#638) --- CHANGELOG.md | 1 + packages/react-widgets/src/types.d.ts | 2 + .../src/widgets/GeocoderWidget.js | 55 ++++++++----------- 3 files changed, 27 insertions(+), 31 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index dd70831e6..9288eff17 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ - LegendProportion component migrated from makeStyles to styled-components + cleanup [#635](https://github.com/CartoDB/carto-react/pull/635) - LegendRamp component migrated from makeStyles to styled-components + cleanup [#636](https://github.com/CartoDB/carto-react/pull/636) - LegendWidgetUI component migrated from makeStyles to styled-components + cleanup [#637](https://github.com/CartoDB/carto-react/pull/637) +- GeocoderWidget component migrated from makeStyles to styled-components [#638](https://github.com/CartoDB/carto-react/pull/638) ## 2.0 diff --git a/packages/react-widgets/src/types.d.ts b/packages/react-widgets/src/types.d.ts index 9b4e5f3dc..bc5b6b5af 100644 --- a/packages/react-widgets/src/types.d.ts +++ b/packages/react-widgets/src/types.d.ts @@ -1,4 +1,5 @@ import { AggregationTypes } from '@carto/react-core'; +import type { SxProps, Theme } from '@mui/material'; type CommonWidgetProps = { id: string, @@ -42,6 +43,7 @@ export type FormulaWidget = CommonWidgetProps & MonoColumnWidgetProps; export type GeocoderWidget = { className: string, + sx?: SxProps, onError?: Function } diff --git a/packages/react-widgets/src/widgets/GeocoderWidget.js b/packages/react-widgets/src/widgets/GeocoderWidget.js index 5009d887f..3dc0dc8e6 100644 --- a/packages/react-widgets/src/widgets/GeocoderWidget.js +++ b/packages/react-widgets/src/widgets/GeocoderWidget.js @@ -4,34 +4,27 @@ import { PropTypes } from 'prop-types'; import { addLayer, setViewState } from '@carto/react-redux'; -import { CircularProgress, InputBase, Paper, SvgIcon } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; +import { CircularProgress, InputBase, Paper, SvgIcon, styled } from '@mui/material'; import useGeocoderWidgetController from '../hooks/useGeocoderWidgetController'; -const useStyles = makeStyles((theme) => ({ - paperInput: { - height: theme.spacing(4.5), - width: theme.spacing(30), - paddingLeft: theme.spacing(1.5), - borderRadius: 4, - display: 'flex', - alignItems: 'center' - }, - icon: { - fill: theme.palette.text.secondary, - height: '1em', - fontSize: `${theme.typography.body2.lineHeight}em` - }, - clear: { - ...theme.typography.body2 - }, - input: { - ...theme.typography.body2, - width: `calc(100% - ${theme.spacing(5)})`, - marginLeft: theme.spacing(1) - } +const StyledPaper = styled(Paper)(({ theme: { spacing } }) => ({ + height: spacing(4.5), + width: spacing(30), + paddingLeft: spacing(1.5), + borderRadius: spacing(0.5), + display: 'flex', + alignItems: 'center' })); +const InputSearch = styled(InputBase)(({ theme: { spacing } }) => ({ + width: `calc(100% - ${spacing(5)})`, + marginLeft: spacing(1) +})); + +const svgStyle = { + fill: ({ palette }) => palette.text.secondary +}; + const SearchIcon = (args) => ( ( * Renders a component * @param {object} props * @param {Object} [props.className] - Material-UI withStyle class for styling + * @param {Object} [props.sx] - MUI5 for styling with sx prop * @param {Function} [props.onError] - Function to handle error messages from the widget. */ function GeocoderWidget(props = {}) { - const classes = useStyles(); const dispatch = useDispatch(); const geocoderResult = useSelector((state) => state.carto.geocoderResult); @@ -78,19 +71,18 @@ function GeocoderWidget(props = {}) { }, [geocoderResult, dispatch]); return ( - + {loading ? ( - + ) : ( - + )} - - + ); } GeocoderWidget.propTypes = { className: PropTypes.string, + sx: PropTypes.object, onError: PropTypes.func }; From 8f3473a85f1e06f0f27b2b07ad759ab5fa8b6bad Mon Sep 17 00:00:00 2001 From: Alberto Arana Date: Fri, 28 Apr 2023 19:51:04 +0200 Subject: [PATCH 08/12] Migrate 'RangeWidgetUI' component from makeStyles to styled-component (#639) --- CHANGELOG.md | 1 + .../react-ui/src/widgets/RangeWidgetUI.js | 150 +++++++++--------- 2 files changed, 72 insertions(+), 79 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9288eff17..50ecb296e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - LegendRamp component migrated from makeStyles to styled-components + cleanup [#636](https://github.com/CartoDB/carto-react/pull/636) - LegendWidgetUI component migrated from makeStyles to styled-components + cleanup [#637](https://github.com/CartoDB/carto-react/pull/637) - GeocoderWidget component migrated from makeStyles to styled-components [#638](https://github.com/CartoDB/carto-react/pull/638) +- RangeWidgetUI component migrated from makeStyles to styled-components [#639](https://github.com/CartoDB/carto-react/pull/639) ## 2.0 diff --git a/packages/react-ui/src/widgets/RangeWidgetUI.js b/packages/react-ui/src/widgets/RangeWidgetUI.js index e0f329a4b..0f1062fd9 100644 --- a/packages/react-ui/src/widgets/RangeWidgetUI.js +++ b/packages/react-ui/src/widgets/RangeWidgetUI.js @@ -1,69 +1,73 @@ import React, { useEffect, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; -import { Box, Link, Slider, TextField } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; +import { Box, Link, Slider, TextField, styled } from '@mui/material'; import { debounce } from '@carto/react-core'; +import Typography from '../components/atoms/Typography'; -const useStyles = makeStyles((theme) => ({ - root: { - position: 'relative' - }, - sliderWithThumbRail: { - color: theme.palette.text.hint - }, - sliderLimit: { - pointerEvents: 'none', - position: 'absolute', - zIndex: 1, - left: 0, - right: 0 +const Root = styled(Box)(() => ({ + position: 'relative' +})); + +const ClearWrapper = styled(Box)(({ theme: { spacing } }) => ({ + display: 'flex', + flexDirection: 'row-reverse', + height: spacing(1.5) +})); + +const ClearButton = styled(Link)(() => ({ + cursor: 'pointer' +})); + +const LimitTextField = styled(TextField)(({ theme: { spacing } }) => ({ + maxWidth: spacing(9), + margin: 0, + '& fieldset': { + borderWidth: 1 }, - sliderLimitThumb: { + '& input': { + '&[type=number]': { + appearance: 'textfield' + }, + '&::-webkit-outer-spin-button': { + appearance: 'none', + margin: 0 + }, + '&::-webkit-inner-spin-button': { + appearance: 'none', + margin: 0 + } + } +})); + +const StyledSlider = styled(Slider)(({ theme: { palette } }) => ({ + '& .MuiSlider-rail': { + color: palette.text.hint + } +})); + +const SliderLimit = styled(Slider)(({ theme: { palette, spacing } }) => ({ + pointerEvents: 'none', + position: 'absolute', + zIndex: 1, + left: 0, + right: 0, + '& .MuiSlider-rail': { display: 'none' }, - sliderLimitRail: { + '& .MuiSlider-thumb': { display: 'none' }, - sliderLimitMarks: { - backgroundColor: theme.palette.primary.main, + '& .MuiSlider-track': { + color: palette.primary.main, + opacity: 0.38 + }, + '& .MuiSlider-mark, & .MuiSlider-markActive': { + backgroundColor: palette.primary.main, opacity: 0.38, - height: theme.spacing(1), - width: theme.spacing(0.25), + height: spacing(1), + width: spacing(0.25), top: '50%', transform: 'translateY(-50%)' - }, - sliderLimitsTrack: { - color: theme.palette.primary.main, - opacity: 0.38 - }, - input: { - maxWidth: theme.spacing(9), - margin: 0, - '& fieldset': { - borderWidth: 1 - }, - '& input': { - '&[type=number]': { - appearance: 'textfield' - }, - '&::-webkit-outer-spin-button': { - appearance: 'none', - margin: 0 - }, - '&::-webkit-inner-spin-button': { - appearance: 'none', - margin: 0 - } - } - }, - clearWrapper: { - display: 'flex', - flexDirection: 'row-reverse', - height: theme.spacing(1.5) - }, - clearButton: { - ...theme.typography.caption, - cursor: 'pointer' } })); @@ -79,7 +83,6 @@ const useStyles = makeStyles((theme) => ({ */ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) { - const classes = useStyles(); const [sliderValues, setSliderValues] = useState([min, max]); const [inputsValues, setInputsValues] = useState([min, max]); @@ -153,36 +156,27 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) { }; return ( - - + + {hasBeenModified && ( - - Clear - + + + Clear + + )} - + - (index === 0 ? 'min value' : 'max value')} - classes={{ - rail: classes.sliderWithThumbRail - }} value={sliderValues} min={min} max={max} onChange={(_, values) => changeSliderValues(values)} /> {limits && limits.length === 2 && ( - (index === 0 ? 'min limit' : 'max limit')} - className={classes.sliderLimit} - classes={{ - rail: classes.sliderLimitRail, - thumb: classes.sliderLimitThumb, - track: classes.sliderLimitsTrack, - mark: classes.sliderLimitMarks, - markActive: classes.sliderLimitMarks - }} value={limits} min={min} max={max} @@ -191,8 +185,7 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) { )} - handleInputChange(event, 0)} @@ -204,8 +197,7 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) { 'aria-label': 'min value' }} /> - handleInputChange(event, 1)} @@ -218,7 +210,7 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) { }} /> - + ); } From ffd066d1dd8eed8f6494046ed1e9bb191391f804 Mon Sep 17 00:00:00 2001 From: Alberto Arana Date: Fri, 28 Apr 2023 20:04:29 +0200 Subject: [PATCH 09/12] Migrate 'FeatureSelectionWidgetUI' component from makeStyles to styled-component (#640) --- CHANGELOG.md | 1 + packages/react-ui/src/types.d.ts | 5 +- .../src/widgets/FeatureSelectionWidgetUI.js | 100 ++++++++---------- 3 files changed, 51 insertions(+), 55 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 50ecb296e..eb7fe34c4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - LegendWidgetUI component migrated from makeStyles to styled-components + cleanup [#637](https://github.com/CartoDB/carto-react/pull/637) - GeocoderWidget component migrated from makeStyles to styled-components [#638](https://github.com/CartoDB/carto-react/pull/638) - RangeWidgetUI component migrated from makeStyles to styled-components [#639](https://github.com/CartoDB/carto-react/pull/639) +- FeatureSelectionWidgetUI component migrated from makeStyles to styled-components [#640](https://github.com/CartoDB/carto-react/pull/640) ## 2.0 diff --git a/packages/react-ui/src/types.d.ts b/packages/react-ui/src/types.d.ts index 8fba83d46..a90221a37 100644 --- a/packages/react-ui/src/types.d.ts +++ b/packages/react-ui/src/types.d.ts @@ -3,7 +3,9 @@ import { AppBarProps as MuiAppBarProps, TextFieldProps, TypographyProps as MuiTypographyProps, - AvatarProps as MuiAvatarProps + AvatarProps as MuiAvatarProps, + SxProps, + Theme } from '@mui/material'; import { CSSProperties } from 'react'; @@ -164,6 +166,7 @@ export type FeatureSelectionWidgetUI = { onSelectGeometry?: Function; tooltipPlacement?: string; className?: string; + sx?: SxProps; }; // Legends diff --git a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js index 53fd74a83..bc19f0594 100644 --- a/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js +++ b/packages/react-ui/src/widgets/FeatureSelectionWidgetUI.js @@ -8,16 +8,17 @@ import { IconButton, Menu, MenuItem, + styled, Tooltip, useTheme } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import { ArrowDropDown } from '@mui/icons-material'; import PropTypes from 'prop-types'; import Typography from '../components/atoms/Typography'; function FeatureSelectionWidgetUI({ className, + sx, selectionModes, editModes, selectedMode, @@ -30,7 +31,7 @@ function FeatureSelectionWidgetUI({ tooltipPlacement }) { return ( - + mode.id === selectedMode)} @@ -68,7 +69,7 @@ function FeatureSelectionWidgetUI({ } FeatureSelectionWidgetUI.defaultProps = { - className: '', + sx: undefined, enabled: false, tooltipPlacement: 'bottom', editModes: [] @@ -81,7 +82,7 @@ const MODE_SHAPE = PropTypes.shape({ }); FeatureSelectionWidgetUI.propTypes = { - className: PropTypes.string, + sx: PropTypes.any, selectionModes: PropTypes.arrayOf(MODE_SHAPE.isRequired).isRequired, editModes: PropTypes.arrayOf(MODE_SHAPE.isRequired), selectedMode: PropTypes.string.isRequired, @@ -159,13 +160,11 @@ function GeometryViewer({ ); } -const useSelectedModeViewerStyles = makeStyles((theme) => ({ - btn: { - color: ({ enabled }) => - enabled ? theme.palette.primary.main : theme.palette.text.secondary, - backgroundColor: ({ enabled }) => - enabled ? alpha(theme.palette.primary.main, 0.05) : null - } +const StyledSelectedModeViewerButton = styled(IconButton, { + shouldForwardProp: (prop) => prop !== 'enabled' +})(({ theme: { palette }, enabled }) => ({ + color: enabled ? palette.primary.main : palette.text.secondary, + backgroundColor: enabled ? alpha(palette.primary.main, 0.05) : null })); function SelectedModeViewer({ @@ -175,8 +174,6 @@ function SelectedModeViewer({ onEnabledChange, tooltipPlacement }) { - const classes = useSelectedModeViewerStyles({ enabled }); - const { label, icon, isEdit } = useMemo(() => { if (modes?.length && selectedMode) { const foundMode = modes.find(({ id: modeId }) => modeId === selectedMode); @@ -195,24 +192,22 @@ function SelectedModeViewer({ return ( - + {icon} - + ); } -const useModesSelectorStyles = makeStyles((theme) => ({ - btn: { - color: theme.palette.text.secondary, - width: 24 - }, - divider: { - margin: theme.spacing(1, 0) - }, - enabledMenuItem: { - backgroundColor: alpha(theme.palette.primary.main, 0.08) - } +const StyledButtonArrow = styled(IconButton)(({ theme: { palette } }) => ({ + color: palette.text.secondary, + width: 24 +})); + +const StyledMenuItem = styled(MenuItem, { + shouldForwardProp: (prop) => prop !== 'enabled' +})(({ theme: { palette }, enabled }) => ({ + ...(enabled && { backgroundColor: alpha(palette.primary.main, 0.08) }) })); function ModesSelector({ @@ -224,8 +219,6 @@ function ModesSelector({ tooltipPlacement }) { const theme = useTheme(); - const classes = useModesSelectorStyles(); - const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); @@ -247,8 +240,8 @@ function ModesSelector({ const hasEditModes = !!editModes.length; const MenuItemWrapper = forwardRef(({ mode, isEnabled }, ref) => ( - handleSelectMode(mode.id)} > @@ -258,7 +251,7 @@ function ModesSelector({ {capitalize(mode.label)} - + )); const createMenuItemWrapper = (mode) => ( @@ -272,16 +265,15 @@ function ModesSelector({ return ( - - + Choose a selection mode {hasSelectionModes && selectionModes.map(createMenuItemWrapper)} - {hasSelectionModes && hasEditModes && } + {hasSelectionModes && hasEditModes && ( + spacing(1, 0) + }} + /> + )} {hasSelectionModes && editModes.map(createMenuItemWrapper)} ); } -const useWrapperStyles = makeStyles((theme) => ({ - root: { - padding: theme.spacing(0.5), - backgroundColor: theme.palette.common.white, - color: theme.palette.text.primary, - borderRadius: theme.shape.borderRadius, - boxShadow: - '0px 3px 5px -1px rgb(0 0 0 / 16%), 0px 5px 8px 0px rgb(0 0 0 / 8%), 0px 1px 14px 0px rgb(0 0 0 / 4%)' - } +const StylesWrapper = styled('div')(({ theme: { spacing, palette, shape } }) => ({ + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + padding: spacing(0.5), + backgroundColor: palette.common.white, + color: palette.text.primary, + borderRadius: shape.borderRadius, + boxShadow: + '0px 3px 5px -1px rgb(0 0 0 / 16%), 0px 5px 8px 0px rgb(0 0 0 / 8%), 0px 1px 14px 0px rgb(0 0 0 / 4%)' })); -function Wrapper({ className, children }) { - const classes = useWrapperStyles(); +function Wrapper({ sx, className, children }) { return ( - + {children} - + ); } From cde030f20aaa024eb3df7e7c6408d9ddfe0cc997 Mon Sep 17 00:00:00 2001 From: Janto Lima Date: Fri, 28 Apr 2023 20:49:37 +0200 Subject: [PATCH 10/12] Migrate 'LegendWrapper' component from makeStyles to styled-component + cleanup (#641) --- CHANGELOG.md | 1 + .../widgets/legend/LegendCategories.test.js | 10 +- .../react-ui/src/widgets/WrapperWidgetUI.js | 15 +-- .../src/widgets/legend/LegendWrapper.js | 121 +++++++++--------- 4 files changed, 73 insertions(+), 74 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index eb7fe34c4..826629242 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - GeocoderWidget component migrated from makeStyles to styled-components [#638](https://github.com/CartoDB/carto-react/pull/638) - RangeWidgetUI component migrated from makeStyles to styled-components [#639](https://github.com/CartoDB/carto-react/pull/639) - FeatureSelectionWidgetUI component migrated from makeStyles to styled-components [#640](https://github.com/CartoDB/carto-react/pull/640) +- LegendWrapper component migrated from makeStyles to styled-components + cleanup [#641](https://github.com/CartoDB/carto-react/pull/641) ## 2.0 diff --git a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js index b38c72d3a..914a035b9 100644 --- a/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js +++ b/packages/react-ui/__tests__/widgets/legend/LegendCategories.test.js @@ -23,10 +23,9 @@ describe('LegendCategories', () => { render(); const elements = document.querySelectorAll('[class*="marker"]'); getPalette(COLOR, 2).forEach((color, idx) => { - const styles = window.getComputedStyle(elements[idx]); - expect(styles['background-color']).toBe(hexToRgb(color)) - } - ); + const styles = window.getComputedStyle(elements[idx]); + expect(styles['background-color']).toBe(hexToRgb(color)); + }); }); test('renders colors (hex) correctly', () => { render(); @@ -41,8 +40,7 @@ describe('LegendCategories', () => { getPalette(COLOR, 2).forEach((color, idx) => { const styles = window.getComputedStyle(elements[idx]); expect(styles['border-color']).toBe(color); - } - ); + }); }); test('renders masked icons correctly', () => { render( diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js index ecc8ec4c0..d401e297c 100644 --- a/packages/react-ui/src/widgets/WrapperWidgetUI.js +++ b/packages/react-ui/src/widgets/WrapperWidgetUI.js @@ -30,7 +30,7 @@ Actions props must have this format: ]; */ -const Root = styled(Box,{ +const Root = styled(Box, { shouldForwardProp: (prop) => prop !== 'margin' })(({ theme, margin }) => { return { @@ -38,7 +38,7 @@ const Root = styled(Box,{ position: 'relative', maxWidth: '100%', padding: margin !== undefined ? margin : theme.spacing(2, 2.5) - } + }; }); const LoadingBar = styled(LinearProgress)(({ theme }) => ({ @@ -78,7 +78,7 @@ const HeaderButton = styled(Button, { } })); -const ParentIcon = ({theme}) => ({ +const ParentIcon = ({ theme }) => ({ display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -87,10 +87,9 @@ const ParentIcon = ({theme}) => ({ color: theme.palette.text.secondary }); -const HideButton = styled(ExpandLess)(({ theme }) => ParentIcon({theme})); - -const ShowButton = styled(ExpandMore)(({ theme }) => ParentIcon({theme})); +const HideButton = styled(ExpandLess)(({ theme }) => ParentIcon({ theme })); +const ShowButton = styled(ExpandMore)(({ theme }) => ParentIcon({ theme })); const Text = styled(Typography, { shouldForwardProp: (prop) => prop !== 'expanded' @@ -255,9 +254,7 @@ function WrapperWidgetUI(props) { {/* TODO: check collapse error */} - - {props.children} - + {props.children} ); diff --git a/packages/react-ui/src/widgets/legend/LegendWrapper.js b/packages/react-ui/src/widgets/legend/LegendWrapper.js index cf9d3ed0f..3fb88b079 100644 --- a/packages/react-ui/src/widgets/legend/LegendWrapper.js +++ b/packages/react-ui/src/widgets/legend/LegendWrapper.js @@ -1,29 +1,30 @@ -import React, { createRef, useState } from 'react'; -import { Box, Button, Collapse, Grid, Icon, Switch, Tooltip } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; import { ExpandLess, ExpandMore } from '@mui/icons-material'; -import Note from './Note'; +import { + Box, + Button, + Collapse, + Grid, + Icon, + Switch, + ToggleButton, + Tooltip, + styled +} from '@mui/material'; +import React, { createRef, useState } from 'react'; import LayerIcon from '../../assets/icons/LayerIcon'; -import { ToggleButton } from '@mui/material'; -import OpacityControl from '../OpacityControl'; import Typography from '../../components/atoms/Typography'; -import clsx from 'clsx'; +import OpacityControl from '../OpacityControl'; +import Note from './Note'; -const useStyles = makeStyles((theme) => ({ - legendWrapper: { - position: 'relative', - maxWidth: '100%', - padding: 0 - }, - content: { - padding: theme.spacing(0, 2, 2, 3) - }, - attr: { - marginBottom: theme.spacing(1) - }, - layerOptionsWrapper: { - backgroundColor: theme.palette.grey[50] - } +const Wrapper = styled(Box)(() => ({ + position: 'relative', + maxWidth: '100%', + padding: 0 +})); + +const LayerOptionsWrapper = styled(Box)(({ theme }) => ({ + backgroundColor: theme.palette.grey[50], + marginTop: theme.spacing(2) })); export default function LegendWrapper({ @@ -45,7 +46,6 @@ export default function LegendWrapper({ onChangeCollapsed }) { const wrapper = createRef(); - const classes = useStyles(); const expanded = !collapsed; const [isLayerOptionsExpanded, setIsLayerOptionsExpanded] = useState(false); @@ -67,7 +67,7 @@ export default function LegendWrapper({ }; return ( - +
{hasChildren && !!children && ( - + {attr && ( - + By {attr} )} {children} - + {showOpacityControl && ( )} {layerOptions} - + {note} )} - + ); } -const useHeaderStyles = makeStyles((theme) => ({ - header: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - height: '60px', - padding: theme.spacing(1.25, 1.25, 1.25, 2.5) - }, - button: { - padding: 0, - flex: '1 1 auto', - justifyContent: 'flex-start', - cursor: ({ collapsible }) => (collapsible ? 'pointer' : 'default'), +const GridHeader = styled(Grid)(({ theme }) => ({ + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + height: '60px', + padding: theme.spacing(1.25, 1.25, 1.25, 2.5) +})); - '& .MuiButton-startIcon': { - marginRight: theme.spacing(1) - }, - '&:hover': { - background: 'none' - } +const ButtonHeader = styled(Button, { + shouldForwardProp: (prop) => prop !== 'collapsible' +})(({ theme, collapsible }) => ({ + padding: 0, + flex: '1 1 auto', + justifyContent: 'flex-start', + cursor: collapsible ? 'pointer' : 'default', + '& .MuiButton-startIcon': { + marginRight: theme.spacing(1) }, - expandIcon: { - display: 'block', - fill: theme.palette.text.secondary + '&:hover': { + background: 'none' } })); +const ParentIcon = ({ theme }) => ({ + display: 'block', + fill: theme.palette.text.secondary +}); + +const MoreIconHeader = styled(ExpandMore)(({ theme }) => ParentIcon({ theme })); +const LessIconHeader = styled(ExpandLess)(({ theme }) => ParentIcon({ theme })); + function Header({ title, switchable, @@ -149,24 +153,23 @@ function Header({ onToggleLayerOptions, isLayerOptionsExpanded }) { - const classes = useHeaderStyles({ collapsible }); - const ExpandIcon = expanded ? ExpandLess : ExpandMore; + const ExpandIcon = expanded ? LessIconHeader : MoreIconHeader; return ( - - + {!!layerOptionsEnabled && ( )} - + ); } From 129dff05c209256a53cfd44f877b806d49fcfeea Mon Sep 17 00:00:00 2001 From: Janto Lima Date: Fri, 28 Apr 2023 21:44:51 +0200 Subject: [PATCH 11/12] Migrate 'TableWidgetUI' component from makeStyles to styled-component + cleanup (#642) --- CHANGELOG.md | 1 + .../theme/sections/components/dataDisplay.js | 1 + .../widgets/TableWidgetUI/TableWidgetUI.js | 53 ++++++++++--------- 3 files changed, 29 insertions(+), 26 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 826629242..e0bdfb413 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - RangeWidgetUI component migrated from makeStyles to styled-components [#639](https://github.com/CartoDB/carto-react/pull/639) - FeatureSelectionWidgetUI component migrated from makeStyles to styled-components [#640](https://github.com/CartoDB/carto-react/pull/640) - LegendWrapper component migrated from makeStyles to styled-components + cleanup [#641](https://github.com/CartoDB/carto-react/pull/641) +- TableWidgetUI component migrated from makeStyles to styled-components + cleanup [#642](https://github.com/CartoDB/carto-react/pull/642) ## 2.0 diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index 9a17ca967..6b21ef377 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -223,6 +223,7 @@ export const dataDisplayOverrides = { border: `2px solid ${commonPalette.divider}`, borderRadius: getSpacing(0.5), fontWeight: themeTypography.fontWeightMedium, + paddingRight: getSpacing(3), '& .MuiSelect-icon': { top: '50%', transform: 'translateY(-50%)', diff --git a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js index 71be8dbd3..dc8fe2d12 100644 --- a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js +++ b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js @@ -8,23 +8,31 @@ import { TableHead, TableRow, TableSortLabel, - TablePagination + TablePagination, + styled } from '@mui/material'; -import makeStyles from '@mui/styles/makeStyles'; +const TableHeadCellLabel = styled(TableSortLabel)(({ theme }) => ({ + ...theme.typography.caption, + color: theme.palette.text.secondary +})); + +const TableRowStyled = styled(TableRow)(({ theme }) => ({ + maxHeight: theme.spacing(6.5), + transition: 'background-color 0.25s ease', + '&.MuiTableRow-hover:hover': { + cursor: 'pointer', + backgroundColor: theme.palette.background.default + } +})); -const useStyles = makeStyles((theme) => ({ - tableRow: { - maxHeight: theme.spacing(6.5) - }, - tableCell: { +const TableCellStyled = styled(TableCell)(() => ({ + overflow: 'hidden', + '& p': { + maxWidth: '100%', + whiteSpace: 'nowrap', overflow: 'hidden', - '& p': { - maxWidth: '100%', - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis' - } + textOverflow: 'ellipsis' } })); @@ -101,22 +109,19 @@ function TableWidgetUI({ } function TableHeaderComponent({ columns, sorting, sortBy, sortDirection, onSort }) { - const classes = useStyles(); - return ( {columns.map(({ field, headerName, align }) => ( {sorting ? ( - onSort(field)} - className={classes.tableHeadCellLabel} > {headerName} - + ) : ( headerName )} @@ -128,34 +133,30 @@ function TableHeaderComponent({ columns, sorting, sortBy, sortDirection, onSort } function TableBodyComponent({ columns, rows, onRowClick }) { - const classes = useStyles(); - return ( {rows.map((row, i) => { const rowKey = row.cartodb_id || row.id || i; return ( - onRowClick && onRowClick(row)} > {columns.map( ({ field, headerName, align, component }) => headerName && ( - {component ? component(row[field]) : row[field]} - + ) )} - + ); })} From ebdbae3969e1491569ea3038e354c312985aa3da Mon Sep 17 00:00:00 2001 From: Janto Lima Date: Fri, 28 Apr 2023 21:51:15 +0200 Subject: [PATCH 12/12] Cleanup makeStyles from TimeSeriesWidgetUI (#643) --- CHANGELOG.md | 1 + .../widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js | 12 +++--------- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e0bdfb413..ac235bee2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ - FeatureSelectionWidgetUI component migrated from makeStyles to styled-components [#640](https://github.com/CartoDB/carto-react/pull/640) - LegendWrapper component migrated from makeStyles to styled-components + cleanup [#641](https://github.com/CartoDB/carto-react/pull/641) - TableWidgetUI component migrated from makeStyles to styled-components + cleanup [#642](https://github.com/CartoDB/carto-react/pull/642) +- TimeSeriesWidgetUI component cleanup makeStyles and unnecessary className [#643](https://github.com/CartoDB/carto-react/pull/643) ## 2.0 diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js index 5442713b9..6dcde0c82 100644 --- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js +++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js @@ -137,13 +137,6 @@ TimeSeriesWidgetUI.defaultProps = { export default TimeSeriesWidgetUI; -const useStyles = makeStyles((theme) => ({ - currentStepSize: { - fontSize: 12, - marginLeft: theme.spacing(1) - } -})); - // Content is splitted from the default // component to be able to use context function TimeSeriesWidgetUIContent({ @@ -157,7 +150,6 @@ function TimeSeriesWidgetUIContent({ showControls, animation }) { - const classes = useStyles(); const [anchorSpeedEl, setAnchorSpeedEl] = useState(null); const [speed, setSpeed] = useState(1); const { @@ -316,7 +308,9 @@ function TimeSeriesWidgetUIContent({ {currentDate}