@carto/ps-react-ui 4.3.3 → 4.3.5

package/src/components/measurement-tools/measurement-tools.test.tsx

@@ -0,0 +1,165 @@
+import { describe, test, vi, expect, beforeEach } from 'vitest'
+import { render, screen, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MeasurementToolsUI } from './measurement-tools'
+import type { MeasurementToolsComponentProps } from './types'
+import type { MeasurementMode } from '../types'
+import {
+  changeMeasurementModeOptions,
+  DEFAULT_MEASUREMENT_TOOLS_MODES,
+  DEFAULT_MEASUREMENT_TOOLS_UNITS,
+} from '../../../tests/config'
+
+describe('MeasurementToolsUI', () => {
+  const mockOnActionToggle = vi.fn()
+  const mockOnChangeMode = vi.fn()
+  const mockOnChangeUnit = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  test('should enable measurement', async () => {
+    const { container } = render(
+      <Component
+        enabled={false}
+        modes={DEFAULT_MEASUREMENT_TOOLS_MODES}
+        modeSelected={DEFAULT_MEASUREMENT_TOOLS_MODES.distance.value}
+        units={DEFAULT_MEASUREMENT_TOOLS_UNITS}
+        mockOnActionToggle={mockOnActionToggle}
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChangeUnit={mockOnChangeUnit}
+      />,
+    )
+
+    const rulerButton = within(container).getByLabelText(
+      'Click on the map to start measuring',
+    )
+    await userEvent.click(rulerButton)
+
+    expect(mockOnActionToggle).toHaveBeenCalledWith(true)
+  })
+
+  for (const [mode, label] of Object.entries(changeMeasurementModeOptions)) {
+    test(`should change mode to ${label}`, async () => {
+      const { container } = render(
+        <Component
+          enabled
+          modes={DEFAULT_MEASUREMENT_TOOLS_MODES}
+          modeSelected={mode as MeasurementMode}
+          units={DEFAULT_MEASUREMENT_TOOLS_UNITS}
+          mockOnActionToggle={mockOnActionToggle}
+          mockOnChangeMode={mockOnChangeMode}
+          mockOnChangeUnit={mockOnChangeUnit}
+        />,
+      )
+
+      const dropdownButton = within(container).getAllByRole('button')[1]!
+      await userEvent.click(dropdownButton)
+
+      const modeButton = await screen.findByRole('menuitem', {
+        name: label,
+      })
+      await userEvent.click(modeButton)
+
+      expect(mockOnChangeMode).toHaveBeenCalledWith(mode)
+    })
+  }
+
+  test('should change meters and kilometers units', async () => {
+    const { container } = render(
+      <Component
+        enabled
+        modes={DEFAULT_MEASUREMENT_TOOLS_MODES}
+        modeSelected={DEFAULT_MEASUREMENT_TOOLS_MODES.distance.value}
+        units={DEFAULT_MEASUREMENT_TOOLS_UNITS}
+        mockOnActionToggle={mockOnActionToggle}
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChangeUnit={mockOnChangeUnit}
+      />,
+    )
+
+    const dropdownButton = within(container).getAllByRole('button')[1]!
+    await userEvent.click(dropdownButton)
+
+    const unitButton = await screen.findByText('Unit of measurement')
+    await userEvent.click(unitButton)
+
+    const dialog = await screen.findByRole('dialog')
+
+    const radioGroup = within(dialog).getByRole('radiogroup')
+    const kilometerRadioButton = within(radioGroup).getByText('Kilometers')
+    await userEvent.click(kilometerRadioButton)
+
+    const saveButton = within(dialog).getByText('Save')
+    await userEvent.click(saveButton)
+    expect(mockOnChangeUnit).toHaveBeenCalledWith('kilometer')
+  })
+
+  test('should change feet and miles units', async () => {
+    const { container } = render(
+      <Component
+        enabled
+        modes={DEFAULT_MEASUREMENT_TOOLS_MODES}
+        modeSelected={DEFAULT_MEASUREMENT_TOOLS_MODES.distance.value}
+        units={DEFAULT_MEASUREMENT_TOOLS_UNITS}
+        mockOnActionToggle={mockOnActionToggle}
+        mockOnChangeMode={mockOnChangeMode}
+        mockOnChangeUnit={mockOnChangeUnit}
+      />,
+    )
+
+    const dropdownButton = within(container).getAllByRole('button')[1]!
+    await userEvent.click(dropdownButton)
+
+    const unitButton = await screen.findByText('Unit of measurement')
+    await userEvent.click(unitButton)
+
+    const dialog = await screen.findByRole('dialog')
+
+    const feetAndMilesButton = within(dialog).getByText('Feet and Miles')
+    await userEvent.click(feetAndMilesButton)
+
+    const radioGroup = await within(dialog).findByRole('radiogroup')
+    const mileRadioButton = await within(radioGroup).findByText('Mile')
+    await userEvent.click(mileRadioButton)
+
+    const saveButton = within(dialog).getByText('Save')
+    await userEvent.click(saveButton)
+    expect(mockOnChangeUnit).toHaveBeenCalledWith('mile')
+  })
+})
+
+interface ComponentProps {
+  enabled: boolean
+  modes: MeasurementToolsComponentProps['modes']
+  modeSelected: MeasurementToolsComponentProps['modeSelected']
+  units: MeasurementToolsComponentProps['units']
+  mockOnActionToggle: MeasurementToolsComponentProps['onActionToggle']
+  mockOnChangeMode: MeasurementToolsComponentProps['onChangeMode']
+  mockOnChangeUnit: MeasurementToolsComponentProps['onChangeUnit']
+}
+
+// Aux
+const Component = ({
+  enabled,
+  modes,
+  modeSelected,
+  units,
+  mockOnActionToggle,
+  mockOnChangeMode,
+  mockOnChangeUnit,
+}: ComponentProps) => {
+  return (
+    <MeasurementToolsUI
+      value='1000m'
+      enabled={enabled}
+      modes={modes}
+      modeSelected={modeSelected}
+      units={units}
+      onActionToggle={mockOnActionToggle}
+      onChangeMode={mockOnChangeMode}
+      onChangeUnit={mockOnChangeUnit}
+    />
+  )
+}

package/src/components/measurement-tools/measurement-tools.tsx

@@ -0,0 +1,443 @@
+import { ArrowDropDown, Close } from '@mui/icons-material'
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Divider,
+  FormControl,
+  FormControlLabel,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Paper,
+  Radio,
+  RadioGroup,
+  SvgIcon,
+  ToggleButton,
+  ToggleButtonGroup,
+  Typography,
+} from '@mui/material'
+import {
+  useMemo,
+  useState,
+  type FormEvent,
+  type JSX,
+  type MouseEvent,
+  type PropsWithChildren,
+} from 'react'
+import { styles } from './styles'
+import deepmerge from 'deepmerge'
+import type { MeasurementToolsComponentProps } from './types'
+import type { PickDeep, ValueOf } from 'type-fest'
+import {
+  DEFAULT_MEASUREMENT_TOOLS_LABELS,
+  DEFAULT_MEASUREMENT_TOOLS_UNITS_MAPPING,
+  DEFAULT_MEASUREMENT_TOOLS_MODES_MAPPING,
+} from './const'
+import type {
+  MeasurementSystem,
+  MeasurementUnit,
+  MeasurementUnitImperialDistance,
+  MeasurementUnitMetricDistance,
+  MeasurementUnitOption,
+  MeasureUnitMapping,
+} from '../types'
+import { Tooltip } from '../tooltip/tooltip'
+
+export function MeasurementToolsUI({
+  enabled,
+  actionProps,
+  labels = DEFAULT_MEASUREMENT_TOOLS_LABELS,
+  modes,
+  modesMapping = DEFAULT_MEASUREMENT_TOOLS_MODES_MAPPING,
+  unitsMapping = DEFAULT_MEASUREMENT_TOOLS_UNITS_MAPPING,
+  modeSelected,
+  PaperProps: { sx, ...PaperProps } = {},
+  units,
+  unitSelected,
+  onActionToggle,
+  onChangeMode,
+  onChangeUnit,
+}: MeasurementToolsComponentProps): JSX.Element {
+  const handleToggle: MeasurementToolsComponentProps['onActionToggle'] = (
+    data,
+  ) => {
+    return onActionToggle(!!data)
+  }
+
+  const data = useMemo(() => {
+    return deepmerge(modes, modesMapping)
+  }, [modes, modesMapping])
+
+  const modeExists = (modeSelected ?? '') in data
+
+  const mode = (
+    modeExists ? modeSelected : Object.keys(data)[0]
+  ) as keyof typeof modes
+
+  const modeSelectedValue = data[mode]
+
+  const _units = useMemo(() => {
+    const option = units[mode]
+    const options =
+      Object.keys(units).length >= 1 ? units : { [mode]: option.slice(0, 1) }
+    return options[mode].map((unit) => {
+      return {
+        ...unit,
+        ...unitsMapping[unit.value],
+      }
+    })
+  }, [mode, units, unitsMapping])
+
+  return (
+    <Paper
+      sx={{
+        ...styles.container,
+        ...sx,
+      }}
+      {...PaperProps}
+    >
+      <Box>
+        <MeasurementToolsUIAction
+          actionProps={actionProps}
+          labels={labels?.action}
+          enabled={enabled}
+          onActionToggle={handleToggle}
+        >
+          {modeSelectedValue?.icon}
+        </MeasurementToolsUIAction>
+        <Options
+          labels={labels?.options}
+          modes={data}
+          modeSelected={mode}
+          units={_units}
+          unitSelected={unitSelected}
+          onChangeMode={onChangeMode}
+          onChangeUnit={onChangeUnit}
+        />
+      </Box>
+    </Paper>
+  )
+}
+
+function MeasurementToolsUIAction({
+  actionProps,
+  labels,
+  enabled,
+  children,
+  onActionToggle,
+}: PropsWithChildren<
+  Pick<
+    MeasurementToolsComponentProps,
+    'actionProps' | 'enabled' | 'onActionToggle'
+  > & {
+    labels?: PickDeep<
+      MeasurementToolsComponentProps['labels'],
+      'action'
+    >['action']
+  }
+>) {
+  const actionState = enabled ? 'active' : 'inactive'
+  const actionLabel =
+    labels?.tooltip?.[actionState] ??
+    DEFAULT_MEASUREMENT_TOOLS_LABELS.action.tooltip[actionState]
+
+  return (
+    <Tooltip
+      title={actionLabel}
+      placement='right'
+      {...actionProps?.TooltipProps}
+    >
+      <ToggleButton
+        value='toggle'
+        sx={styles.actions.icon}
+        onClick={() => onActionToggle(!enabled)}
+        aria-label={actionLabel}
+        selected={enabled}
+      >
+        {children}
+      </ToggleButton>
+    </Tooltip>
+  )
+}
+
+function Options({
+  modes,
+  modeSelected,
+  units,
+  unitSelected,
+  labels,
+  onChangeMode,
+  onChangeUnit,
+}: Required<
+  Pick<
+    MeasurementToolsComponentProps,
+    'modeSelected' | 'onChangeMode' | 'onChangeUnit'
+  >
+> & {
+  modes: MeasurementToolsComponentProps['modes'] &
+    MeasurementToolsComponentProps['modesMapping']
+  units: (MeasurementUnitOption<MeasurementUnit> & MeasureUnitMapping)[]
+  unitSelected?: MeasurementToolsComponentProps['unitSelected']
+  labels?: PickDeep<
+    MeasurementToolsComponentProps['labels'],
+    'options'
+  >['options']
+}) {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const [unitModal, setUnitModal] = useState(false)
+
+  const modesAvailable = Object.values(modes)
+  const unitsAvailable = Object.values(units)
+
+  const hasValues = modesAvailable.length > 1 || unitsAvailable.length > 1
+
+  if (!hasValues) {
+    return null
+  }
+
+  const open = Boolean(anchorEl)
+
+  const handleToggle = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleClick = (
+    e: MouseEvent<HTMLLIElement>,
+    mode: ValueOf<Required<typeof modes>>,
+  ) => {
+    e.preventDefault()
+    onChangeMode(mode.value)
+    handleClose()
+  }
+
+  const handleClickUnit = () => {
+    setUnitModal(true)
+  }
+
+  const handleCloseModal = () => {
+    setUnitModal(false)
+  }
+
+  const handleApplyModal = (data: string) => {
+    handleCloseModal()
+    onChangeUnit(data)
+  }
+
+  const modeTitle =
+    labels?.mode?.title ?? DEFAULT_MEASUREMENT_TOOLS_LABELS.options.mode.title
+
+  const unitTitle =
+    labels?.units?.title ?? DEFAULT_MEASUREMENT_TOOLS_LABELS.options.units.title
+
+  const hasDivider = modesAvailable.length > 1 && unitsAvailable.length > 1
+
+  const unitSelectedValue = (units.find(
+    (unit) => unit.value === unitSelected,
+  ) ?? units[0])!
+
+  return (
+    <>
+      <IconButton sx={styles.options.icon} onClick={handleToggle}>
+        <ArrowDropDown />
+      </IconButton>
+      <Menu
+        id='measurement-menu'
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          'aria-labelledby': 'basic-button',
+          sx: styles.options.menu,
+        }}
+      >
+        <div>
+          {modesAvailable.length > 1 && (
+            <>
+              <Typography
+                variant='subtitle2'
+                color='text.secondary'
+                sx={styles.options.title}
+              >
+                {modeTitle}
+              </Typography>
+              {modesAvailable.map((mode) => {
+                const options =
+                  labels?.mode?.options ??
+                  DEFAULT_MEASUREMENT_TOOLS_LABELS.options.mode.options
+                const label = options[mode.value]
+
+                return (
+                  <MenuItem
+                    key={mode.value}
+                    onClick={(e) => handleClick(e, mode)}
+                    selected={mode.value === modeSelected}
+                  >
+                    <ListItemIcon sx={styles.options.icons}>
+                      <SvgIcon>{mode.icon}</SvgIcon>
+                    </ListItemIcon>
+                    <ListItemText>{label}</ListItemText>
+                  </MenuItem>
+                )
+              })}
+            </>
+          )}
+          {hasDivider && <Divider />}
+          {unitsAvailable.length > 1 && (
+            <>
+              <MenuItem onClick={handleClickUnit}>
+                <ListItemText>{unitTitle}</ListItemText>
+                <Typography
+                  variant='caption'
+                  fontWeight={500}
+                  sx={styles.options.tag}
+                >
+                  {unitSelectedValue.short}
+                </Typography>
+              </MenuItem>
+              <UnitsModal
+                open={unitModal}
+                labels={labels}
+                units={units}
+                unitSelectedValue={unitSelectedValue}
+                onClose={handleCloseModal}
+                onSubmit={handleApplyModal}
+              />
+            </>
+          )}
+        </div>
+      </Menu>
+    </>
+  )
+}
+
+function UnitsModal({
+  open,
+  labels,
+  units,
+  unitSelectedValue,
+  onClose,
+  onSubmit,
+}: {
+  open: boolean
+  labels?: PickDeep<
+    MeasurementToolsComponentProps['labels'],
+    'options'
+  >['options']
+  units: MeasurementUnitOption<MeasurementUnit>[]
+  unitSelectedValue: MeasurementUnitOption<MeasurementUnit>
+  onClose: () => void
+  onSubmit: (data: string) => void
+}) {
+  const [system, setSystem] = useState<MeasurementSystem>('metric')
+
+  const _units = useMemo(() => {
+    return units.filter((unit) => unit.system === system)
+  }, [system, units])
+
+  const handleToggleChange = (
+    _: MouseEvent<HTMLElement>,
+    value: MeasurementSystem,
+  ) => {
+    setSystem(value)
+  }
+
+  const _labels =
+    labels?.units?.modal?.options ??
+    DEFAULT_MEASUREMENT_TOOLS_LABELS.options.units.modal.options
+
+  const labelsBySystem = _labels[system].options
+
+  const modalUnitTitle =
+    labels?.units?.modal?.title ??
+    DEFAULT_MEASUREMENT_TOOLS_LABELS.options.units.modal.title
+  const modalUnitSubtitle =
+    labels?.units?.modal?.subtitle ??
+    DEFAULT_MEASUREMENT_TOOLS_LABELS.options.units.modal.subtitle
+  const modalUnitApply =
+    labels?.units?.modal?.apply ??
+    DEFAULT_MEASUREMENT_TOOLS_LABELS.options.units.modal.apply
+
+  const _unitSelectedValue =
+    unitSelectedValue.system === system ? unitSelectedValue : _units[0]
+
+  return (
+    <Dialog
+      open={open}
+      component={Box}
+      onClose={onClose}
+      maxWidth='xs'
+      PaperProps={{
+        component: 'form',
+        onSubmit: (e: FormEvent<HTMLFormElement>) => {
+          e.preventDefault()
+          const formData = new FormData(e.currentTarget)
+          onSubmit(formData.get('unit-value') as string)
+        },
+      }}
+    >
+      <DialogTitle sx={styles.options.modal.title}>
+        {modalUnitTitle}
+        <IconButton onClick={onClose}>
+          <Close />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent sx={styles.options.modal.content}>
+        <Typography sx={styles.options.modal.subtitle}>
+          {modalUnitSubtitle}
+        </Typography>
+        <ToggleButtonGroup
+          color='primary'
+          value={system}
+          exclusive={true}
+          fullWidth={true}
+          onChange={handleToggleChange}
+          aria-label='system'
+          sx={styles.options.modal.toggle}
+        >
+          <ToggleButton value='metric'>{_labels.metric.title}</ToggleButton>
+          <ToggleButton value='imperial'>{_labels.imperial.title}</ToggleButton>
+        </ToggleButtonGroup>
+        <FormControl key={_unitSelectedValue?.value}>
+          <RadioGroup
+            aria-labelledby='unit-value'
+            defaultValue={_unitSelectedValue?.value}
+            name='unit-value'
+            sx={styles.options.modal.optionsGroup}
+          >
+            {_units.map((unit) => {
+              const label =
+                labelsBySystem[
+                  unit.value as MeasurementUnitMetricDistance &
+                    MeasurementUnitImperialDistance
+                ]
+
+              return (
+                <FormControlLabel
+                  key={unit.value}
+                  value={unit.value}
+                  control={<Radio />}
+                  label={label}
+                />
+              )
+            })}
+          </RadioGroup>
+        </FormControl>
+      </DialogContent>
+      <DialogActions sx={styles.options.modal.actions}>
+        <Button variant='contained' type='submit'>
+          {modalUnitApply}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

package/src/components/measurement-tools/styles.ts

@@ -0,0 +1,91 @@
+import { alpha, type SxProps, type Theme } from '@mui/material'
+
+export const styles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: ({ spacing }) => spacing(1),
+    overflow: 'hidden',
+  },
+  actions: {
+    icon: {
+      width: ({ spacing }) => spacing(4),
+      height: ({ spacing }) => spacing(4),
+      borderRadius: 0,
+      '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
+        borderRadius: 0,
+      },
+    },
+  },
+  options: {
+    menu: {
+      marginTop: ({ spacing }) => spacing(1),
+    },
+    icon: {
+      width: ({ spacing }) => spacing(3),
+    },
+    title: {
+      paddingX: ({ spacing }) => spacing(2),
+      paddingY: ({ spacing }) => spacing(0.5),
+    },
+    icons: {
+      color: ({ palette }) => palette.text.primary,
+    },
+    tag: {
+      borderRadius: ({ spacing }) => spacing(0.25),
+      border: '1px solid',
+      borderColor: ({ palette }) => palette.primary.main,
+      paddingX: ({ spacing }) => spacing(0.5),
+      color: ({ palette }) => palette.primary.main,
+      backgroundColor: ({ palette }) => alpha(palette.primary.main, 0.08),
+    },
+    modal: {
+      toggle: {
+        boxShadow: 'none',
+        backgroundColor: '#F8F9F9',
+        padding: ({ spacing }) => spacing(0.5),
+        marginTop: ({ spacing }) => spacing(2),
+        marginBottom: ({ spacing }) => spacing(1),
+        '.MuiToggleButtonGroup-grouped': {
+          typography: 'caption',
+          fontWeight: 500,
+          margin: 0,
+          '&:first-of-type:not(.MuiDivider-root)': {
+            marginLeft: 0,
+          },
+        },
+      },
+      subtitle: {
+        typography: 'body2',
+        color: ({ palette }) => palette.text.secondary,
+      },
+      optionsGroup: {
+        marginLeft: ({ spacing }) => spacing(1),
+        typography: 'body2',
+      },
+      title: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: ({ spacing }) => spacing(2),
+      },
+      content: {
+        paddingX: ({ spacing }) => spacing(2),
+        minWidth: ({ spacing }) => spacing(50),
+      },
+      actions: {
+        paddingX: ({ spacing }) => spacing(2),
+      },
+    },
+  },
+  chip: {
+    chip: {
+      marginRight: ({ spacing }) => spacing(0.5),
+    },
+    disabled: {
+      opacity: ({ palette }) => palette.action.disabledOpacity,
+    },
+  },
+} satisfies Record<string, SxProps<Theme>>