@carto/ps-react-ui 4.3.3 → 4.3.5

package/src/components/basemaps/styles.ts

@@ -0,0 +1,76 @@
+import type { SxProps, Theme } from '@mui/material'
+
+export const BASEMAPS_WIDTH = 288
+
+export const styles = {
+  root: {
+    width: BASEMAPS_WIDTH,
+    overflow: 'auto',
+  },
+  toggle: {
+    padding: ({ spacing }) => spacing(0.5),
+
+    img: {
+      width: '100%',
+      aspectRatio: '1 / 1',
+      borderRadius: ({ spacing }) => spacing(0.25),
+    },
+  },
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: ({ spacing }) => spacing(1),
+    paddingInlineStart: ({ spacing }) => spacing(2),
+    position: 'sticky',
+    top: 0,
+    zIndex: 2,
+    background: ({ palette }) => palette.background.paper,
+  },
+  groupWrapper: {
+    content: {
+      paddingInline: ({ spacing }) => spacing(2),
+      paddingBlock: ({ spacing }) => spacing(0.5),
+    },
+  },
+  group: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: ({ spacing }) => spacing(2),
+    paddingInline: ({ spacing }) => spacing(2),
+    paddingBlock: ({ spacing }) => spacing(1),
+  },
+  item: {
+    container: {
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      gap: ({ spacing }) => spacing(1),
+      background: 'transparent',
+      border: 'none',
+      cursor: 'pointer',
+      padding: 0,
+      height: ({ spacing }) => spacing(12),
+
+      img: {
+        maxWidth: ({ spacing }) => spacing(9),
+        aspectRatio: '1 / 1',
+        borderRadius: ({ spacing }) => spacing(0.5),
+        border: `2px solid transparent`,
+
+        '&:hover': {
+          borderColor: ({ palette }) => palette.action.active,
+        },
+
+        '&[data-active="true"]': {
+          borderColor: ({ palette }) => palette.primary.main,
+        },
+      },
+    },
+    selected: {
+      color: ({ palette }) => palette.primary.main,
+    },
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/components/basemaps/types.ts

@@ -0,0 +1,30 @@
+import type { SxProps, Theme, TooltipProps } from '@mui/material'
+
+export interface BasemapsUILabels {
+  toggle: {
+    title: string
+  }
+  header: {
+    title: string
+    actions: {
+      close: string
+    }
+  }
+}
+
+export interface BasemapOption {
+  id: string
+  label: string
+  icon: string
+  group?: string
+}
+
+export interface BasemapsUIProps {
+  options: BasemapOption[]
+  labels?: BasemapsUILabels
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  selected: string | null | undefined
+  sx?: SxProps<Theme>
+  onChange: (id: string) => void
+  TooltipProps?: Omit<TooltipProps, 'title'>
+}

package/src/components/common-types.ts

@@ -0,0 +1 @@
+export * from '@carto/ps-common-types'

package/src/components/geolocation-controls/const.ts

@@ -0,0 +1,6 @@
+export const tooltipLabelsDefault = {
+  enabled: 'Show your current location',
+  disabled: 'Location unavailable',
+}
+
+export const ariaLabel = 'geolocation'

package/src/components/geolocation-controls/geolocation-controls.test.tsx

@@ -0,0 +1,133 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest'
+import { render, within, fireEvent } from '@testing-library/react'
+import { GeolocationControls } from './geolocation-controls'
+
+describe('GeolocationControls', () => {
+  const mockOnChange = vi.fn()
+  const mockOnError = vi.fn()
+
+  const mockGeolocation = {
+    getCurrentPosition: vi.fn(),
+    watchPosition: vi.fn(),
+    clearWatch: vi.fn(),
+  }
+
+  const mockPermissions = {
+    query: vi.fn(),
+    state: 'granted' as const,
+    onchange: null as (() => void) | null,
+  }
+
+  const mockNavigator = {
+    geolocation: mockGeolocation,
+    permissions: mockPermissions,
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Mock navigator
+    Object.defineProperty(global, 'navigator', {
+      value: mockNavigator,
+      writable: true,
+    })
+  })
+
+  test('renders correctly with geolocation enabled', () => {
+    mockPermissions.query.mockResolvedValue(mockPermissions)
+    const { container } = render(
+      <GeolocationControls onChange={mockOnChange} onError={mockOnError} />,
+    )
+
+    const button = within(container).getByRole('button')
+    const buttonElement = button as unknown as HTMLButtonElement
+    expect(buttonElement.disabled).toBe(false)
+  })
+
+  test('handles geolocation permission denied', () => {
+    mockPermissions.query.mockResolvedValue({
+      ...mockPermissions,
+      state: 'denied',
+    })
+    const { container } = render(
+      <GeolocationControls onChange={mockOnChange} onError={mockOnError} />,
+    )
+
+    const button = within(container).getByRole('button')
+    const buttonElement = button as unknown as HTMLButtonElement
+    expect(buttonElement.disabled).toBe(false)
+  })
+
+  test('calls getCurrentPosition when clicked', () => {
+    mockPermissions.query.mockResolvedValue(mockPermissions)
+
+    const mockPosition = {
+      coords: {
+        latitude: 40.7128,
+        longitude: -74.006,
+      },
+    }
+
+    mockGeolocation.getCurrentPosition.mockImplementation(
+      (success: PositionCallback) =>
+        success(mockPosition as GeolocationPosition),
+    )
+
+    const { container } = render(
+      <GeolocationControls onChange={mockOnChange} onError={mockOnError} />,
+    )
+
+    const button = within(container).getByRole('button')
+    fireEvent.click(button)
+
+    expect(mockGeolocation.getCurrentPosition).toHaveBeenCalled()
+    expect(mockOnChange).toHaveBeenCalledWith(mockPosition.coords)
+  })
+
+  test('calls watchPosition when watch prop is true', () => {
+    mockPermissions.query.mockResolvedValue(mockPermissions)
+    const mockPosition = {
+      coords: {
+        latitude: 40.7128,
+        longitude: -74.006,
+      },
+    }
+    mockGeolocation.watchPosition.mockImplementation(
+      (success: PositionCallback) =>
+        success(mockPosition as GeolocationPosition),
+    )
+
+    const { container } = render(
+      <GeolocationControls
+        onChange={mockOnChange}
+        onError={mockOnError}
+        watch
+      />,
+    )
+
+    const button = within(container).getByRole('button')
+    fireEvent.click(button)
+
+    expect(mockGeolocation.watchPosition).toHaveBeenCalled()
+    expect(mockOnChange).toHaveBeenCalledWith(mockPosition.coords)
+  })
+
+  test('handles geolocation errors', () => {
+    mockPermissions.query.mockResolvedValue(mockPermissions)
+
+    const mockError = new Error('Geolocation error')
+    mockGeolocation.getCurrentPosition.mockImplementation(
+      (_, error: PositionErrorCallback) => {
+        error(mockError as unknown as GeolocationPositionError)
+      },
+    )
+
+    const { container } = render(
+      <GeolocationControls onChange={mockOnChange} onError={mockOnError} />,
+    )
+
+    const button = within(container).getByRole('button')
+    fireEvent.click(button)
+
+    expect(mockOnError).toHaveBeenCalledWith(mockError)
+  })
+})

package/src/components/geolocation-controls/geolocation-controls.tsx

@@ -0,0 +1,95 @@
+import { Paper, IconButton } from '@mui/material'
+import {
+  MyLocationOutlined,
+  LocationDisabledOutlined,
+} from '@mui/icons-material'
+import type { GeolocationControlProps } from './types'
+import { useCallback, useEffect, useRef, useState, type JSX } from 'react'
+import { ariaLabel, tooltipLabelsDefault } from './const'
+import { Tooltip } from '../tooltip/tooltip'
+
+export function GeolocationControls({
+  disabled,
+  labels,
+  PaperProps,
+  TooltipProps,
+  watch,
+  onChange,
+  onError,
+}: GeolocationControlProps): JSX.Element {
+  const watchRef = useRef<number>(null)
+  const hasGeolocation = 'geolocation' in navigator
+  const [allowed, setAllowed] = useState(hasGeolocation)
+
+  useEffect(() => {
+    if (hasGeolocation) {
+      navigator.permissions
+        .query({ name: 'geolocation' })
+        .then((result) => {
+          setAllowed(result.state === 'granted')
+          result.onchange = () => {
+            setAllowed(result.state === 'granted')
+          }
+        })
+        .catch((error: Parameters<PositionErrorCallback>[0]) => {
+          setAllowed(false)
+          onError?.(error)
+        })
+    }
+
+    return () => {
+      if (watchRef.current) {
+        navigator.geolocation.clearWatch(watchRef.current)
+      }
+    }
+  }, [hasGeolocation, onError])
+
+  const success = useCallback(
+    (position: Parameters<PositionCallback>[0]) => {
+      onChange(position.coords)
+    },
+    [onChange],
+  )
+
+  const error = useCallback(
+    (error: Parameters<PositionErrorCallback>[0]) => {
+      setAllowed(false)
+      onError?.(error)
+    },
+    [onError],
+  )
+
+  const handleClick = useCallback(() => {
+    if (watchRef.current) {
+      navigator.geolocation.clearWatch(watchRef.current)
+    }
+
+    if (watch) {
+      watchRef.current = navigator.geolocation.watchPosition(success, error)
+      return
+    }
+
+    navigator.geolocation.getCurrentPosition(success, error)
+  }, [watch, success, error])
+
+  const tooltipLabels = labels?.tooltip ?? tooltipLabelsDefault
+
+  return (
+    <Paper {...PaperProps}>
+      <Tooltip
+        arrow
+        placement='right'
+        title={tooltipLabels[allowed ? 'enabled' : 'disabled']}
+        {...TooltipProps}
+      >
+        <IconButton
+          onClick={handleClick}
+          aria-label={labels?.ariaLabel ?? ariaLabel}
+          disabled={!hasGeolocation || disabled}
+        >
+          {allowed ? <MyLocationOutlined /> : <LocationDisabledOutlined />}
+        </IconButton>
+      </Tooltip>
+    </Paper>
+  )
+}

package/src/components/geolocation-controls/types.ts

@@ -0,0 +1,17 @@
+import type { PaperProps, TooltipProps } from '@mui/material'
+
+export interface GeolocationControlProps {
+  disabled?: boolean
+  labels?: {
+    tooltip: {
+      enabled: string
+      disabled: string
+    }
+    ariaLabel: string
+  }
+  PaperProps?: PaperProps
+  TooltipProps?: Omit<TooltipProps, 'title'>
+  watch?: boolean
+  onChange: (props: Parameters<PositionCallback>[0]['coords']) => void
+  onError?: (error: Parameters<PositionErrorCallback>[0]) => void
+}

package/src/components/index.ts

@@ -0,0 +1,64 @@
+export type {
+  // Common types
+  // Measurement tools
+  CustomMeasureMode,
+  MeasurementMode,
+  MeasurementModeOption,
+  MeasurementModes,
+  MeasurementModesMapping,
+  MeasurementOptionsMode,
+  MeasurementOptionsUnit,
+  MeasurementSystem,
+  MeasurementUnit,
+  MeasurementUnitImperialDistance,
+  MeasurementUnitMetricDistance,
+  MeasurementUnitOption,
+  MeasurementUnits,
+  // Lasso tools
+  LassoToolsMode,
+  LassoToolsModeOption,
+  LassoToolsModes,
+  LassoToolOptionsMode,
+  LassoToolsModesMapping,
+} from './types'
+export type {
+  LassoToolsComponentProps,
+  LassoToolsInlineComponentProps,
+} from './lasso-tool/types'
+export { LassoToolsUI } from './lasso-tool/lasso-tool'
+export { LassoToolsInlineUI } from './lasso-tool/lasso-tool-inline'
+export {
+  DEFAULT_LASSO_TOOLS_MODES_MAPPING,
+  LASSO_TOOLS_LABELS,
+} from './lasso-tool/const'
+export {
+  DrawCircleIcon,
+  DrawLassoIcon,
+  DrawPolygonIcon,
+  DrawSquareIcon,
+  SelectToolIcon,
+} from './lasso-tool/icons'
+
+export type { MeasurementToolsComponentProps } from './measurement-tools/types'
+export {
+  DEFAULT_MEASUREMENT_TOOLS_LABELS,
+  DEFAULT_MEASUREMENT_TOOLS_UNITS_MAPPING,
+  DEFAULT_MEASUREMENT_TOOLS_MODES_MAPPING,
+} from './measurement-tools/const'
+export { AreaIcon, BufferIcon, RulerIcon } from './measurement-tools/icons'
+export { MeasurementToolsUI } from './measurement-tools/measurement-tools'
+
+export type { GeolocationControlProps } from './geolocation-controls/types'
+export { GeolocationControls } from './geolocation-controls/geolocation-controls'
+
+export type { ZoomControlProps } from './zoom-controls/types'
+export { ZoomControlsUI } from './zoom-controls/zoom-controls'
+
+export type { ListDataProps, DataItem } from './list-data/types'
+export { ListDataUI } from './list-data/list-data'
+
+export { BasemapsUI } from './basemaps/basemaps'
+export type { BasemapsUIProps } from './basemaps/types'
+
+export { Tooltip, setTooltipEnterDelay } from './tooltip/tooltip'
+export { SmartTooltip } from './smart-tooltip/smart-tooltip'

package/src/components/lasso-tool/chip.tsx

@@ -0,0 +1,37 @@
+import { Chip } from '@mui/material'
+import type { PickDeep } from 'type-fest'
+import { LASSO_TOOLS_LABELS } from './const'
+import { styles } from './styles'
+import type { LassoToolsComponentProps, LassoToolsData } from './types'
+import { Tooltip } from '../tooltip/tooltip'
+
+export function LassoToolsUIChip({
+  chipProps,
+  value,
+  labels,
+  onChipToggle,
+  onDelete,
+}: Pick<LassoToolsComponentProps, 'chipProps' | 'onDelete' | 'onChipToggle'> & {
+  value: LassoToolsData
+  labels?: PickDeep<LassoToolsComponentProps['labels'], 'chip'>['chip']
+}) {
+  const chipState = value.visible ? 'active' : 'inactive'
+  const chipLabel =
+    labels?.tooltip?.[chipState] ?? LASSO_TOOLS_LABELS.chip.tooltip[chipState]
+
+  return (
+    <Tooltip title={chipLabel} placement='bottom' {...chipProps?.TooltipProps}>
+      <Chip
+        sx={{
+          ...styles.chip.chip,
+        }}
+        color={value.visible ? 'secondary' : 'default'}
+        size='small'
+        onDelete={() => onDelete(value.id)}
+        label={value.label}
+        onClick={() => onChipToggle(value.id, !value.visible)}
+        {...chipProps?.ChipsProps}
+      />
+    </Tooltip>
+  )
+}

package/src/components/lasso-tool/const.tsx

@@ -0,0 +1,70 @@
+import type { LassoToolsMode, LassoToolsModesMapping } from '../types'
+import {
+  DrawPolygonIcon,
+  DrawSquareIcon,
+  DrawCircleIcon,
+  DrawLassoIcon,
+  SelectToolIcon,
+} from './icons'
+import type { LassoToolsComponentProps } from './types'
+import type { RequiredDeep } from 'type-fest'
+
+export const LASSO_TOOLS_LABELS: NonNullable<
+  RequiredDeep<LassoToolsComponentProps['labels']>
+> = {
+  action: {
+    tooltip: {
+      active: 'Click on the map to draw your spatial filter',
+      inactive: 'Click on the map to draw your spatial filter',
+    },
+  },
+  chip: {
+    tooltip: {
+      active: 'Hide drawing',
+      inactive: 'Show drawing',
+    },
+  },
+  options: {
+    mode: {
+      title: 'Choose a drawing tool',
+      options: {
+        circle: 'Circle',
+        lasso: 'Lasso tool',
+        polygon: 'Polygon',
+        rectangle: 'Rectangle',
+        edit: 'Edit feature',
+      },
+    },
+  },
+  noData: {
+    title: 'Spatial filter not applied',
+    description:
+      'Select a drawing or editing tool and click on the map to define your spatial filter',
+  },
+  actions: {
+    toggleAll: {
+      active: 'Hide all',
+      inactive: 'Show all',
+    },
+    deleteAll: 'Remove all',
+  },
+} as const
+
+export const DEFAULT_LASSO_TOOLS_MODES_MAPPING: LassoToolsModesMapping<LassoToolsMode> =
+  {
+    polygon: {
+      icon: <DrawPolygonIcon />,
+    },
+    rectangle: {
+      icon: <DrawSquareIcon />,
+    },
+    circle: {
+      icon: <DrawCircleIcon />,
+    },
+    lasso: {
+      icon: <DrawLassoIcon />,
+    },
+    edit: {
+      icon: <SelectToolIcon />,
+    },
+  } as const

package/src/components/lasso-tool/icons.tsx

@@ -0,0 +1,91 @@
+import type { SVGProps } from 'react'
+
+export function DrawPolygonIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M4 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm16 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm-2.829 1a2.996 2.996 0 0 0 0 2H6.829a2.995 2.995 0 0 0 0-2h10.342Zm-2.463-5.707 3.998 4a3.013 3.013 0 0 0-1.414 1.414l-4-3.999a3.014 3.014 0 0 0 1.31-1.214l.106-.201ZM2.998 6.829a2.995 2.995 0 0 0 2.002 0v10.342a2.993 2.993 0 0 0-2.002 0V6.83ZM12 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm1.84-3.919c.464.483 1.09.81 1.79.896l-1.47 2.94a2.992 2.992 0 0 0-1.79-.894l1.47-2.942ZM16 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM4 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm9.171.998a2.994 2.994 0 0 0 0 2.002H6.829a2.995 2.995 0 0 0 0-2.002h6.342Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+export function DrawSquareIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M4 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm16 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm-2.829 1a2.993 2.993 0 0 0-.17.974l-.001.052.007.183a3 3 0 0 0 .164.79H6.829a2.995 2.995 0 0 0 0-2h10.342ZM2.998 6.828a2.995 2.995 0 0 0 2.002 0V17.17a2.993 2.993 0 0 0-2.002 0V6.83Zm16.001 0a2.995 2.995 0 0 0 2 0V17.17a2.993 2.993 0 0 0-2 0V6.829ZM20 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4ZM4 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4Zm13.171.998a2.991 2.991 0 0 0-.17.976L17 4.026l.007.183a3 3 0 0 0 .164.79H6.829a2.995 2.995 0 0 0 0-2H17.17Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+export function DrawCircleIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 6a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+export function DrawLassoIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M12 3c4.935 0 9 3.736 9 9l-.002.343-.012.668c-.012.438-.033.86-.062 1.266l-.05.597C20.498 18.767 19.267 21 17 21c-1.192 0-1.971-.341-2.988-1.122l-.472-.375c-.401-.319-.64-.473-.888-.566a4.938 4.938 0 0 0-.415-.13l-.34-.085-.398-.086-.456-.086-.66-.111-1.708-.273a9.112 9.112 0 0 1-.952-.206C5.46 17.301 3 14.954 3 12.015c0-1.508.485-2.995 1.436-4.458.355.585.906 1.04 1.562 1.272C5.328 9.916 5 10.977 5 12.015c0 1.889 1.78 3.588 3.282 4.025l.085.023.345.076.517.092 1.619.257.583.1.518.098.237.05.433.103c.272.07.512.143.73.224.434.161.783.373 1.235.718l.457.362c.806.646 1.24.857 1.959.857.893 0 1.63-1.518 1.895-4.45l.045-.585c.013-.2.024-.407.033-.62l.02-.655c.005-.224.007-.454.007-.69 0-4.12-3.133-7-7-7a1 1 0 1 1 0-2ZM7 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
+
+export function SelectToolIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      {...props}
+    >
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='m10.083 19.394.057.113a1 1 0 0 0 1.72.007l2.869-4.786 4.786-2.87a1 1 0 0 0-.121-1.777l-14-6c-.83-.356-1.669.483-1.313 1.313l6.002 14ZM6.905 6.904l9.903 4.244-3.322 1.995-.102.069a1 1 0 0 0-.242.274l-1.992 3.321-4.245-9.903Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}