@carto/ps-react-ui 4.3.3 → 4.3.5

package/src/components/lasso-tool/types.ts

@@ -0,0 +1,114 @@
+import type { Box, ChipProps, Paper, TooltipProps } from '@mui/material'
+import type { ComponentProps, ComponentType } from 'react'
+import type {
+  LassoToolsMode,
+  LassoToolsModes,
+  LassoToolOptionsMode,
+  LassoToolsModesMapping,
+} from '../types'
+
+export interface LassoToolsData {
+  id: string
+  label: string
+  visible?: boolean
+}
+
+interface LassoToolsComponentBaseProps<M extends string = LassoToolsMode> {
+  enabled: boolean
+  modes: Partial<LassoToolsModes<M>>
+  modesMapping: LassoToolsModesMapping<M>
+  values: LassoToolsData[]
+  labels?: {
+    action?: {
+      tooltip?: {
+        active?: string
+        inactive?: string
+      }
+    }
+    chip?: {
+      tooltip?: {
+        active?: string
+        inactive?: string
+      }
+    }
+    options?: {
+      mode?: {
+        title?: string
+        options?: LassoToolOptionsMode<LassoToolsMode>
+      }
+    }
+    noData?: {
+      title?: string
+      description?: string
+    }
+    actions: {
+      toggleAll?: {
+        active?: string
+        inactive?: string
+      }
+      deleteAll?: string
+    }
+  }
+  chipProps?: {
+    TooltipProps?: Omit<TooltipProps, 'title'>
+    ChipsProps?: Omit<ChipProps, 'label' | 'onDelete'>
+  }
+  modeSelected?: M | null
+  onChangeMode: (mode: M) => void
+  onChipToggle: (id: LassoToolsData['id'], data: boolean) => void
+  onDelete: (id: LassoToolsData['id']) => void
+  onAllChipToggle: () => void
+  onAllDelete: () => void
+}
+
+export interface LassoToolsComponentProps<M extends string = LassoToolsMode>
+  extends LassoToolsComponentBaseProps<M> {
+  actionProps?: {
+    TooltipProps?: Omit<TooltipProps, 'title'>
+  }
+  PaperProps?: ComponentProps<typeof Paper>
+  onActionToggle: (data: boolean) => void
+  ChipsSlot?: ComponentType<
+    Partial<
+      Omit<
+        LassoToolsComponentProps,
+        'ChipsSlot' | 'ActionsSlot' | 'OptionsSlot' | 'SecondaryActionsSlot'
+      >
+    >
+  > | null
+  ActionSlot?: ComponentType<
+    Partial<
+      Omit<
+        LassoToolsComponentProps,
+        'ChipsSlot' | 'ActionsSlot' | 'OptionsSlot' | 'SecondaryActionsSlot'
+      >
+    >
+  > | null
+  OptionsSlot?: ComponentType<
+    Partial<
+      Omit<
+        LassoToolsComponentProps,
+        'ChipsSlot' | 'ActionsSlot' | 'OptionsSlot' | 'SecondaryActionsSlot'
+      >
+    > &
+      OptionsChildrenProps
+  > | null
+  SecondaryActionsSlot?: ComponentType<
+    Partial<
+      Omit<
+        LassoToolsComponentProps,
+        'ChipsSlot' | 'ActionsSlot' | 'OptionsSlot' | 'SecondaryActionsSlot'
+      >
+    >
+  > | null
+}
+
+export interface LassoToolsInlineComponentProps<
+  M extends string = LassoToolsMode,
+> extends LassoToolsComponentBaseProps<M> {
+  BoxProps?: ComponentProps<typeof Box>
+}
+
+export interface OptionsChildrenProps {
+  onClose: () => void
+}

package/src/components/list-data/list-data-skeleton.test.tsx

@@ -0,0 +1,10 @@
+import { describe, expect, test } from 'vitest'
+import { render } from '@testing-library/react'
+import { ListDataSkeleton } from './list-data-skeleton'
+
+describe('ListDataUI Skeleton', () => {
+  test('renders correctly', () => {
+    const { getByLabelText } = render(<ListDataSkeleton />)
+    expect(getByLabelText('List Data skeleton')).toBeTruthy()
+  })
+})

package/src/components/list-data/list-data-skeleton.tsx

@@ -0,0 +1,40 @@
+import { Box, Grid, Skeleton } from '@mui/material'
+
+interface ListDataSkeletonProps {
+  length?: number
+}
+
+export function ListDataSkeleton({ length = 5 }: ListDataSkeletonProps) {
+  return (
+    <Box aria-label='List Data skeleton'>
+      {new Array(length).fill(null).map((_, idx) => (
+        <Grid key={idx} container spacing={1}>
+          <Grid
+            container
+            item
+            direction='row'
+            justifyContent='space-between'
+            alignItems='center'
+          >
+            <Skeleton width={isOdd(idx) ? 72 : 48} height={20} />
+            <Skeleton width={48} height={8} />
+          </Grid>
+
+          <Skeleton
+            sx={{
+              height: ({ spacing }) => spacing(0.5),
+              marginTop: ({ spacing }) => spacing(1.25),
+              marginBottom: ({ spacing }) => spacing(1.75),
+              width: '100%',
+            }}
+          />
+        </Grid>
+      ))}
+    </Box>
+  )
+}
+
+// Aux
+function isOdd(num: number) {
+  return num % 2 === 1
+}

package/src/components/list-data/list-data.test.tsx

@@ -0,0 +1,94 @@
+import { describe, expect, test, vi } from 'vitest'
+import { render, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ListDataUI } from './list-data'
+
+describe('ListDataUI', () => {
+  const data = [
+    { id: '1', label: 'Population', value: '8.4M' },
+    { id: '2', label: 'Median Age', value: '32 years' },
+    { id: '3', label: 'GDP', value: '$1.2T' },
+    { id: '4', label: 'Life Expectancy', value: '78.5 years' },
+    { id: '5', label: 'Population Density', value: '345/km²' },
+  ]
+
+  test('renders correctly', () => {
+    const { container } = render(<ListDataUI data={data} />)
+
+    const rows = within(container).getAllByRole('listitem')
+    expect(rows).toHaveLength(5)
+  })
+
+  test('renders skeleton when loading', () => {
+    const { getByLabelText } = render(<ListDataUI data={data} isLoading />)
+    expect(getByLabelText('List Data skeleton')).toBeTruthy()
+  })
+
+  test('with maxItems', async () => {
+    const { container } = render(<ListDataUI data={data} maxItems={3} />)
+
+    const rows = within(container).getAllByRole('listitem')
+    expect(rows).toHaveLength(3)
+
+    const showMoreButton = within(container).getByText('Show More')
+    expect(showMoreButton).toBeTruthy()
+    await userEvent.click(showMoreButton)
+
+    const updatedRows = within(container).getAllByRole('listitem')
+    expect(updatedRows).toHaveLength(5)
+
+    const showLessButton = within(container).getByText('Show Less')
+    expect(showLessButton).toBeTruthy()
+    await userEvent.click(showLessButton)
+
+    const finalRows = within(container).getAllByRole('listitem')
+    expect(finalRows).toHaveLength(3)
+  })
+
+  test('with disabled items', () => {
+    const disabledData = data.map((item) => ({ ...item, disabled: true }))
+    const { container } = render(<ListDataUI data={disabledData} />)
+
+    const rows = within(container).getAllByRole('listitem')
+
+    for (const row of rows) {
+      const computedStyle = window.getComputedStyle(row)
+      expect(computedStyle.pointerEvents).toBe('none')
+    }
+  })
+
+  test('with custom expand button labels', async () => {
+    const { container } = render(
+      <ListDataUI
+        data={data}
+        maxItems={3}
+        labels={{ showMore: 'More', showLess: 'Less' }}
+      />,
+    )
+
+    const moreButton = within(container).getByText('More')
+    expect(moreButton).toBeTruthy()
+    await userEvent.click(moreButton)
+
+    const lessButton = within(container).getByText('Less')
+    expect(lessButton).toBeTruthy()
+  })
+
+  test('with item click handler', async () => {
+    const mockOnItemClick = vi.fn()
+
+    const { container } = render(
+      <ListDataUI data={data} onItemClick={mockOnItemClick} />,
+    )
+
+    const rows = within(container).getAllByRole('listitem')
+
+    for (const [idx, row] of rows.entries()) {
+      await userEvent.click(row)
+
+      const foundItem = data.find((item) => item.id === data[idx]?.id)
+      expect(mockOnItemClick).toHaveBeenCalledWith(foundItem)
+      mockOnItemClick.mockClear()
+    }
+  })
+})

package/src/components/list-data/list-data.tsx

@@ -0,0 +1,106 @@
+import { useState, useMemo, type JSX } from 'react'
+import { Box, Button, Grid, ListItem, List, ListItemText } from '@mui/material'
+import { ListDataSkeleton } from './list-data-skeleton'
+import { NoDataAlert } from '../no-data-alert/no-data-alert'
+import { useSkeleton } from '../../hooks/use-skeleton'
+import type { ListDataProps } from './types'
+import { styles } from './styles'
+import { SmartTooltip } from '../smart-tooltip/smart-tooltip'
+
+const DEFAULT_LABELS = {
+  showMore: 'Show More',
+  showLess: 'Show Less',
+} as const
+
+export function ListDataUI({
+  data = [],
+  isLoading = false,
+  maxItems = 5,
+  labels = DEFAULT_LABELS,
+  showDivider = true,
+  selectedItemId,
+  tooltipProps,
+  onExpand,
+  onItemClick,
+}: ListDataProps): JSX.Element {
+  const [showAll, setShowAll] = useState(false)
+
+  const showSkeleton = useSkeleton(isLoading)
+
+  const items = useMemo(() => {
+    return showAll ? data : data.slice(0, maxItems)
+  }, [data, maxItems, showAll])
+
+  const handleToggle = () => {
+    setShowAll(!showAll)
+    onExpand?.(showAll)
+  }
+
+  if (showSkeleton) {
+    return <ListDataSkeleton length={maxItems} />
+  }
+
+  if (items.length === 0) {
+    return <NoDataAlert />
+  }
+
+  return (
+    <>
+      <List id='expandable-list' role='list'>
+        {items.map((item, idx) => (
+          <SmartTooltip<HTMLLIElement>
+            // Default tooltip props
+            followCursor={false}
+            key={`list-item-${idx}`}
+            placement='top'
+            arrow
+            title={item.tooltipTitle}
+            enterDelay={10}
+            // Custom tooltip props
+            {...tooltipProps}
+          >
+            {({ ref }) => (
+              <ListItem
+                ref={ref}
+                role='listitem'
+                sx={{
+                  ...(showDivider && styles.showDivider),
+                  ...(onItemClick && styles.clickable),
+                  ...(selectedItemId === item.id && styles.selected),
+                  ...(item.disabled && styles.disabled),
+                }}
+                onClick={() => {
+                  if (item.disabled) return
+                  onItemClick?.(item)
+                }}
+              >
+                <Grid container alignItems='center'>
+                  <Grid item xs={8}>
+                    <ListItemText primary={item.label} sx={styles.label} />
+                  </Grid>
+                  <Grid item xs={4}>
+                    <ListItemText primary={item.value} sx={styles.value} />
+                  </Grid>
+                </Grid>
+              </ListItem>
+            )}
+          </SmartTooltip>
+        ))}
+      </List>
+
+      {data.length > maxItems && (
+        <Box my={2}>
+          <Button
+            onClick={handleToggle}
+            variant='text'
+            color='primary'
+            aria-expanded={showAll}
+            aria-controls='expandable-list'
+          >
+            {showAll ? labels.showLess : labels.showMore}
+          </Button>
+        </Box>
+      )}
+    </>
+  )
+}

package/src/components/list-data/styles.ts

@@ -0,0 +1,37 @@
+import { type SxProps, type Theme } from '@mui/material'
+
+const ellipsed = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+}
+
+export const styles = {
+  label: {
+    '& .MuiListItemText-primary': {
+      ...ellipsed,
+    },
+  },
+  value: {
+    '& .MuiListItemText-primary': {
+      ...ellipsed,
+      textAlign: 'right',
+    },
+  },
+  clickable: {
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: ({ palette }) => palette.action.hover,
+    },
+  },
+  showDivider: {
+    borderBottom: ({ palette }) => `1px solid ${palette.divider}`,
+  },
+  selected: {
+    backgroundColor: ({ palette }) => palette.action.selected,
+  },
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/components/list-data/types.ts

@@ -0,0 +1,25 @@
+import type { TooltipProps } from '@mui/material'
+import type { ReactElement } from 'react'
+
+export interface DataItem {
+  id: string | number
+  label: string | ReactElement
+  value: string | ReactElement
+  disabled?: boolean
+  tooltipTitle?: string
+}
+
+export interface ListDataProps {
+  data: DataItem[]
+  isLoading?: boolean
+  maxItems?: number
+  labels?: {
+    showMore: string
+    showLess: string
+  }
+  showDivider?: boolean
+  selectedItemId?: string | number
+  tooltipProps?: Omit<TooltipProps, 'title' | 'children'>
+  onExpand?: (isExpanded: boolean) => void
+  onItemClick?: (item: DataItem) => void
+}

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

@@ -0,0 +1,108 @@
+import type { RequiredDeep } from 'type-fest'
+import type {
+  MeasurementMode,
+  MeasurementModesMapping,
+  MeasurementUnitsMapping,
+} from '../types'
+import type { MeasurementToolsComponentProps } from './types'
+import { RulerIcon, BufferIcon, AreaIcon } from './icons'
+
+export const DEFAULT_MEASUREMENT_TOOLS_LABELS: NonNullable<
+  RequiredDeep<MeasurementToolsComponentProps['labels']>
+> = {
+  action: {
+    tooltip: {
+      active: 'Click on the map to start measuring',
+      inactive: 'Click on the map to start measuring',
+    },
+  },
+  chip: {
+    tooltip: {
+      active: 'Hide measure',
+      inactive: 'Show measure',
+    },
+  },
+  options: {
+    mode: {
+      title: 'Choose a measuring tool',
+      options: {
+        distance: 'Measure distance',
+        buffer: 'Buffer distance',
+        area: 'Area',
+      },
+    },
+    units: {
+      title: 'Unit of measurement',
+      modal: {
+        title: 'Map Measurement Unit',
+        subtitle: 'Select the unit of measurement for your measurements',
+        apply: 'Save',
+        options: {
+          metric: {
+            title: 'Meters and Kilometers',
+            options: {
+              'm-km': 'Auto',
+              kilometer: 'Kilometers',
+              meter: 'Meter',
+              centimeter: 'Centimeter',
+              milimeter: 'Milimeter',
+            },
+          },
+          imperial: {
+            title: 'Feet and Miles',
+            options: {
+              'ft-mi': 'Auto',
+              mile: 'Mile',
+              feet: 'Feet',
+              yard: 'Yard',
+            },
+          },
+        },
+      },
+    },
+  },
+} as const
+
+export const DEFAULT_MEASUREMENT_TOOLS_UNITS_MAPPING: MeasurementUnitsMapping =
+  {
+    'm-km': {
+      short: 'm-km',
+    },
+    kilometer: {
+      short: 'km',
+    },
+    meter: {
+      short: 'm',
+    },
+    centimeter: {
+      short: 'cm',
+    },
+    milimeter: {
+      short: 'mm',
+    },
+    'ft-mi': {
+      short: 'ft-mi',
+    },
+    mile: {
+      short: 'mi',
+    },
+    yard: {
+      short: 'yd',
+    },
+    feet: {
+      short: 'ft',
+    },
+  } as const
+
+export const DEFAULT_MEASUREMENT_TOOLS_MODES_MAPPING: MeasurementModesMapping<MeasurementMode> =
+  {
+    distance: {
+      icon: <RulerIcon />,
+    },
+    buffer: {
+      icon: <BufferIcon />,
+    },
+    area: {
+      icon: <AreaIcon />,
+    },
+  } as const

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

@@ -0,0 +1,54 @@
+import type { SVGProps } from 'react'
+
+export function RulerIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 18 18'
+      fill='currentColor'
+      {...props}
+    >
+      <path
+        fill='currentColor'
+        d='M3 13.5c-.413 0-.766-.147-1.06-.44A1.445 1.445 0 0 1 1.5 12V6c0-.412.147-.766.44-1.06.294-.293.647-.44 1.06-.44h12c.412 0 .766.147 1.06.44.293.294.44.647.44 1.06v6c0 .412-.147.766-.44 1.06-.294.293-.647.44-1.06.44H3ZM3 12h12V6h-2.25v3h-1.5V6h-1.5v3h-1.5V6h-1.5v3h-1.5V6H3v6Z'
+      />
+    </svg>
+  )
+}
+
+export function BufferIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 18 18'
+      {...props}
+    >
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M9 1.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15ZM9 3a6 6 0 1 0 0 12A6 6 0 0 0 9 3Zm0 4.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+}
+
+export function AreaIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' {...props}>
+      <path
+        fill='currentColor'
+        fillRule='evenodd'
+        d='M4.5 13.5v-9h9v9h-9Zm.75-8.25h7.5v7.5h-7.5v-7.5Z'
+        clipRule='evenodd'
+      />
+      <path
+        fill='#2C3032'
+        fillRule='evenodd'
+        d='M1.5 3A1.5 1.5 0 0 1 3 1.5h12A1.5 1.5 0 0 1 16.5 3v12a1.5 1.5 0 0 1-1.5 1.5H3A1.5 1.5 0 0 1 1.5 15V3ZM3 3h12v12H3V3Z'
+        clipRule='evenodd'
+      />
+    </svg>
+  )
+}