@carto/ps-react-ui 5.0.0 → 6.0.0

package/src/widgets/range/components/range-item.tsx

@@ -1,214 +0,0 @@
-import { Box, Slider, TextField } from '@mui/material'
-import { useState, useMemo, type FocusEvent, type KeyboardEvent } from 'react'
-import { widgetStoreActions } from '../../stores/widget-store'
-import { useWidgetSelector } from '../../stores/use-widget-selector'
-import type { RangeItemProps, RangeWidgetState } from '../types'
-import { styles } from '../style'
-
-import { defaultFormatter } from '../../utils/formatter'
-
-type EditingState = '' | 'min' | 'max'
-
-/**
- * Renders a single range slider with editable min/max text inputs, reading its configuration from the widget store.
- */
-export function RangeItem({ id, index }: RangeItemProps) {
-  const {
-    item,
-    onChange,
-    formatter: _formatter,
-  } = useWidgetSelector(id, (w) => {
-    const rw = w as RangeWidgetState | undefined
-    return {
-      item: rw?.data[index],
-      onChange: rw?.onChange,
-      formatter: rw?.formatter,
-    }
-  })
-  const formatter = _formatter ?? defaultFormatter
-
-  const currentValue = useMemo(
-    () => (item ? (item.value ?? [item.min, item.max]) : [0, 0]),
-    [item],
-  )
-
-  // Local state for input values - track if user is editing
-  const [isEditing, setIsEditing] = useState<EditingState>('')
-
-  if (!item) return null
-
-  const handleSliderChange = (_: Event, newValue: number | number[]) => {
-    if (Array.isArray(newValue)) {
-      const [min, max] = newValue
-      const data =
-        widgetStoreActions.getWidget<RangeWidgetState>(id)?.data ?? []
-
-      data[index] = {
-        ...item,
-        value: newValue,
-      }
-
-      widgetStoreActions.setWidget(id, {
-        data,
-      })
-
-      onChange?.([min!, max!], index)
-    }
-  }
-
-  const handleInputFocus = (e: FocusEvent<HTMLInputElement>) => {
-    setIsEditing(e.target.name as EditingState)
-  }
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = event.target
-
-    let newValue: [number, number]
-    if (name === 'min') {
-      newValue = [
-        Math.min(
-          Math.max(item.min, parseFloat(value) || item.min),
-          currentValue[1]!,
-        ),
-        currentValue[1] ?? 0,
-      ]
-    } else {
-      newValue = [
-        currentValue[0] ?? 0,
-        Math.max(
-          Math.min(item.max, parseFloat(value) || item.max),
-          currentValue[0]!,
-        ),
-      ]
-    }
-
-    const data = widgetStoreActions.getWidget<RangeWidgetState>(id)?.data ?? []
-
-    widgetStoreActions.setWidget(id, {
-      data: data.map((d: RangeWidgetState['data'][number], i: number) =>
-        i === index
-          ? {
-              ...d,
-              value: newValue,
-            }
-          : d,
-      ),
-    })
-
-    onChange?.([newValue[0], newValue[1]], index)
-  }
-
-  const handleInputBlur = (e: FocusEvent<HTMLInputElement>) => {
-    setIsEditing('')
-    handleInputChange(e)
-  }
-
-  const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
-      handleInputBlur(event as unknown as FocusEvent<HTMLInputElement>)
-      event.currentTarget.blur()
-    }
-  }
-
-  return (
-    <Box sx={styles.rangeItem}>
-      <Box sx={styles.sliderContainer}>
-        <Slider
-          value={currentValue}
-          onChange={handleSliderChange}
-          valueLabelDisplay='auto'
-          valueLabelFormat={formatter}
-          min={item.min}
-          max={item.max}
-          step={item.step}
-          marks={item.marks}
-          disabled={item.disabled}
-          sx={{
-            ...styles.slider,
-            ...(item.color && {
-              color: item.color,
-            }),
-          }}
-        />
-      </Box>
-
-      <Box sx={styles.inputsRow}>
-        <Input
-          key={`min-${currentValue[0]}`}
-          isEditing={isEditing}
-          name='min'
-          value={currentValue[0] ?? 0}
-          formatter={formatter}
-          onFocus={handleInputFocus}
-          onBlur={handleInputBlur}
-          onKeyDown={handleInputKeyDown}
-          disabled={item.disabled}
-          inputProps={{
-            'aria-label': 'Minimum value',
-          }}
-        />
-        <Input
-          key={`max-${currentValue[1]}`}
-          isEditing={isEditing}
-          name='max'
-          value={currentValue[1] ?? 0}
-          formatter={formatter}
-          onFocus={handleInputFocus}
-          onBlur={handleInputBlur}
-          onKeyDown={handleInputKeyDown}
-          disabled={item.disabled}
-          inputProps={{
-            'aria-label': 'Maximum value',
-          }}
-        />
-      </Box>
-    </Box>
-  )
-}
-
-function Input({
-  isEditing,
-  name,
-  disabled,
-  value,
-  formatter,
-  onFocus: onFocus,
-  onBlur: onBlur,
-  onKeyDown: onKeyDown,
-  inputProps,
-}: {
-  isEditing: EditingState
-  name: 'min' | 'max'
-  disabled?: boolean
-  value: number
-  formatter: (value: number) => string
-  onFocus: (e: FocusEvent<HTMLInputElement>) => void
-  onBlur: (e: FocusEvent<HTMLInputElement>) => void
-  onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-}) {
-  const [currentValue, setCurrentValue] = useState<string>(String(value))
-
-  // Compute display values when not editing
-  const displayMinValue = useMemo(
-    () => formatter(Number(currentValue)),
-    [currentValue, formatter],
-  )
-
-  return (
-    <TextField
-      name={name}
-      value={isEditing === name ? currentValue : displayMinValue}
-      onChange={(e) => {
-        setCurrentValue(e.target.value)
-      }}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-      disabled={disabled}
-      size='small'
-      sx={styles.input}
-      inputProps={inputProps}
-    />
-  )
-}

package/src/widgets/range/config.ts

@@ -1,10 +0,0 @@
-import type { RangeWidgetConfig } from './types'
-
-/**
- * Returns the default configuration for range (value range with labels) widgets.
- *
- * @returns Default range widget config.
- */
-export function rangeConfig(): RangeWidgetConfig {
-  return {}
-}

package/src/widgets/range/serializer.test.ts

@@ -1,70 +0,0 @@
-import { describe, test, expect } from 'vitest'
-import { sanitizeRangeDataItem, sanitizeRangeDataItems } from './serializer'
-import type { RangeDataItem } from './types'
-
-describe('sanitizeRangeDataItem', () => {
-  test('preserves all other properties', () => {
-    const item: RangeDataItem = {
-      min: 10,
-      max: 90,
-      value: [20, 80],
-      step: 5,
-      marks: true,
-      disabled: true,
-      color: '#FF0000',
-    }
-
-    const sanitized = sanitizeRangeDataItem(item)
-
-    expect(sanitized.min).toBe(10)
-    expect(sanitized.max).toBe(90)
-    expect(sanitized.value).toEqual([20, 80])
-    expect(sanitized.step).toBe(5)
-    expect(sanitized.marks).toBe(true)
-    expect(sanitized.disabled).toBe(true)
-    expect(sanitized.color).toBe('#FF0000')
-  })
-})
-
-describe('sanitizeRangeDataItems', () => {
-  test('sanitizes array of items', () => {
-    const items: RangeDataItem[] = [{ min: 10, max: 90 }]
-
-    const sanitized = sanitizeRangeDataItems(items)
-
-    expect(sanitized).toHaveLength(1)
-  })
-
-  test('handles undefined input', () => {
-    const sanitized = sanitizeRangeDataItems(undefined)
-
-    expect(sanitized).toBeUndefined()
-  })
-
-  test('handles empty array', () => {
-    const sanitized = sanitizeRangeDataItems([])
-
-    expect(sanitized).toEqual([])
-  })
-
-  test('preserves all item properties', () => {
-    const items: RangeDataItem[] = [
-      {
-        min: 0,
-        max: 100,
-        value: [25, 75],
-        step: 10,
-        marks: [
-          { value: 0, label: '0' },
-          { value: 100, label: '100' },
-        ],
-        disabled: false,
-        color: '#00FF00',
-      },
-    ]
-
-    const sanitized = sanitizeRangeDataItems(items)
-
-    expect(sanitized![0]).toEqual(items[0])
-  })
-})

package/src/widgets/range/serializer.ts

@@ -1,27 +0,0 @@
-import type { RangeDataItem } from './types'
-
-/**
- * Sanitizes RangeDataItem by converting ReactNode note values to undefined.
- * This ensures only string values are stored in the widget state.
- *
- * @param item - The RangeDataItem to sanitize
- * @returns A new RangeDataItem with ReactNode note values converted to undefined
- */
-export function sanitizeRangeDataItem(item: RangeDataItem): RangeDataItem {
-  return {
-    ...item,
-    note: typeof item.note === 'string' ? item.note : undefined,
-  }
-}
-
-/**
- * Sanitizes an array of RangeDataItems by converting ReactNode note values to undefined.
- *
- * @param items - Array of RangeDataItems to sanitize
- * @returns A new array with sanitized RangeDataItems
- */
-export function sanitizeRangeDataItems(
-  items: RangeDataItem[] | undefined,
-): RangeDataItem[] | undefined {
-  return items?.map(sanitizeRangeDataItem)
-}

package/src/widgets/scatterplot/config.ts

@@ -1,136 +0,0 @@
-import {
-  getCommonOptions,
-  mergeEchartWidgetConfig,
-  type EchartOptionsProps,
-} from '../echart'
-import type {
-  ScatterplotConfig,
-  ScatterplotWidgetConfig,
-  ScatterplotWidgetData,
-} from './types'
-import {
-  scatterplotDataToCSV,
-  buildLegendConfig,
-  createTooltipFormatter,
-  createChartDownloadConfig,
-  applyYAxisFormatter,
-  applyXAxisFormatter,
-  buildSeriesLabelConfig,
-} from '../utils/chart-config'
-
-export const scatterplotDownloadConfig =
-  createChartDownloadConfig<ScatterplotWidgetData>(scatterplotDataToCSV)
-
-/**
- * Generates ECharts configuration for X-Y scatter plot widgets with value axes, legend support, and CARTO qualitative color palette.
- *
- * @param props - Scatterplot configuration including data points and theme.
- * @returns Widget config with ECharts option object.
- */
-export function scatterplotConfig(
-  props: ScatterplotConfig,
-): ScatterplotWidgetConfig {
-  return {
-    type: 'scatterplot',
-    option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
-    formatter: props.formatter,
-    labelFormatter: props.labelFormatter,
-  }
-}
-
-function getOption({
-  data = [],
-  theme,
-  formatter,
-  labelFormatter,
-}: ScatterplotConfig): EchartOptionsProps {
-  const hasLegend = data.length > 1
-
-  const xAxis = {
-    type: 'value' as const,
-    axisLine: { show: false },
-    axisTick: { show: false },
-    axisLabel: {
-      fontSize: theme.typography.overlineDelicate.fontSize,
-      fontFamily: theme.typography.overlineDelicate.fontFamily,
-      showMinLabel: true,
-      showMaxLabel: true,
-      hideOverlap: true,
-      padding: [
-        parseInt(theme.spacing(0.5)),
-        parseInt(theme.spacing(0.5)),
-        0,
-        parseInt(theme.spacing(0.5)),
-      ],
-      color: theme.palette.black[60],
-    },
-    splitLine: {
-      show: true,
-      lineStyle: { color: theme.palette.black[4] },
-    },
-  }
-
-  const yAxis = {
-    type: 'value' as const,
-    axisLabel: {
-      fontSize: theme.typography.overlineDelicate.fontSize,
-      fontFamily: theme.typography.overlineDelicate.fontFamily,
-      inside: false,
-      padding: [
-        0,
-        0,
-        parseInt(theme.spacing(1.25)),
-        parseInt(theme.spacing(3.25)),
-      ],
-      margin: 0,
-      show: true,
-      showMaxLabel: true,
-      showMinLabel: false,
-      align: 'right',
-      verticalAlign: 'bottom',
-    },
-    axisLine: { show: false },
-    axisTick: { show: false },
-    splitLine: {
-      show: true,
-      lineStyle: { color: theme.palette.black[4] },
-    },
-  }
-
-  return {
-    legend: buildLegendConfig({ hasLegend, labelFormatter }),
-    grid: {
-      ...(!hasLegend && { bottom: parseInt(theme.spacing(1)) }),
-      ...(hasLegend && { bottom: parseInt(theme.spacing(10)) }),
-    },
-    xAxis: applyXAxisFormatter(xAxis, labelFormatter),
-    yAxis: applyYAxisFormatter(yAxis, formatter),
-    tooltip: {
-      trigger: 'item',
-      // position: createTooltipPositioner(theme),
-      formatter: createTooltipFormatter((item) => {
-        const value = item.value as Record<string, string | number>
-        const index = item.encode?.y?.at(0)
-        const _value = value[index ?? '']
-
-        const formattedValue =
-          typeof _value === 'number' && formatter
-            ? formatter(_value)
-            : (_value ?? '')
-        const marker = typeof item.marker === 'string' ? item.marker : ''
-        const name = labelFormatter
-          ? String(labelFormatter(item.seriesName ?? ''))
-          : (item.seriesName ?? '')
-
-        return { name, seriesName: '', marker, value: formattedValue }
-      }),
-    },
-    color: Object.values(theme.palette.qualitative.bold),
-    series: data.map((_: unknown, index: number) => ({
-      datasetIndex: index,
-      type: 'scatter',
-      symbolSize: 8,
-      ...buildSeriesLabelConfig(formatter),
-    })),
-  } as EchartOptionsProps
-}

package/src/widgets/scatterplot/style.ts

@@ -1,21 +0,0 @@
-import type { SxProps, Theme } from '@mui/material'
-import { baseSkeletonStyles } from '../utils/skeleton'
-
-export const styles = {
-  skeleton: {
-    graph: {
-      container: {
-        ...baseSkeletonStyles.graph.container,
-        position: 'relative',
-      },
-    },
-    legend: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: ({ spacing }) => spacing(2),
-      height: ({ spacing }) => spacing(5),
-      position: 'absolute',
-      bottom: 0,
-    },
-  },
-} satisfies Record<string, SxProps<Theme>>

package/src/widgets/selection-summary/index.ts

@@ -1,6 +0,0 @@
-export { WidgetSelectionSummary } from './selection-summary'
-
-export type {
-  WidgetSelectionSummaryProps,
-  SelectionSummaryLabels,
-} from './types'

package/src/widgets/selection-summary/types.ts

@@ -1,14 +0,0 @@
-export interface WidgetSelectionSummaryProps {
-  selections: number
-  onClear?: () => void
-  labels?: Partial<SelectionSummaryLabels>
-}
-
-export interface SelectionSummaryLabels {
-  /** Label for "All selected" state */
-  allSelected: string
-  /** Label for number of selections */
-  selections: (count: number) => string
-  /** Label for clear button */
-  clear: string
-}

package/src/widgets/skeleton-loader/index.ts

@@ -1,2 +0,0 @@
-export { SkeletonLoader } from './skeleton-loader'
-export type { SkeletonLoaderProps } from './types'

package/src/widgets/skeleton-loader/skeleton-loader.test.tsx

@@ -1,139 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, test } from 'vitest'
-import { SkeletonLoader } from './skeleton-loader'
-import { useWidgetStore } from '../stores/widget-store'
-
-// Mock Skeleton component
-function MockSkeleton() {
-  return <div aria-label='Loading skeleton'>Loading...</div>
-}
-
-describe('SkeletonLoader', () => {
-  const widgetId = 'test-skeleton-widget'
-
-  beforeEach(() => {
-    useWidgetStore.getState().clearWidgets()
-  })
-
-  describe('when isLoading is true', () => {
-    test('renders skeleton component', () => {
-      useWidgetStore.getState().setWidget(widgetId, { isLoading: true })
-
-      render(
-        <SkeletonLoader id={widgetId} Skeleton={MockSkeleton}>
-          <div>Content</div>
-        </SkeletonLoader>,
-      )
-
-      expect(screen.getByLabelText('Loading skeleton')).toBeTruthy()
-      expect(screen.queryByText('Content')).toBeNull()
-    })
-
-    test('returns null when Skeleton prop is null', () => {
-      useWidgetStore.getState().setWidget(widgetId, { isLoading: true })
-
-      const { container } = render(
-        <SkeletonLoader id={widgetId} Skeleton={null}>
-          <div>Content</div>
-        </SkeletonLoader>,
-      )
-
-      expect(container.firstChild).toBeNull()
-    })
-  })
-
-  describe('when isLoading is false', () => {
-    test('renders children', () => {
-      useWidgetStore.getState().setWidget(widgetId, { isLoading: false })
-
-      render(
-        <SkeletonLoader id={widgetId} Skeleton={MockSkeleton}>
-          <div>Content</div>
-        </SkeletonLoader>,
-      )
-
-      expect(screen.getByText('Content')).toBeTruthy()
-      expect(screen.queryByLabelText('Loading skeleton')).toBeNull()
-    })
-  })
-
-  describe('when isLoading is undefined', () => {
-    test('renders children', () => {
-      useWidgetStore.getState().setWidget(widgetId, { isLoading: undefined })
-
-      render(
-        <SkeletonLoader id={widgetId} Skeleton={MockSkeleton}>
-          <div>Content</div>
-        </SkeletonLoader>,
-      )
-
-      expect(screen.getByText('Content')).toBeTruthy()
-      expect(screen.queryByLabelText('Loading skeleton')).toBeNull()
-    })
-  })
-
-  describe('when widget does not exist in store', () => {
-    test('renders children (isLoading is undefined)', () => {
-      render(
-        <SkeletonLoader id='non-existent-widget' Skeleton={MockSkeleton}>
-          <div>Content</div>
-        </SkeletonLoader>,
-      )
-
-      expect(screen.getByText('Content')).toBeTruthy()
-      expect(screen.queryByLabelText('Loading skeleton')).toBeNull()
-    })
-  })
-
-  describe('reactivity to store changes', () => {
-    test('updates from skeleton to content when isLoading becomes false', () => {
-      useWidgetStore.getState().setWidget(widgetId, { isLoading: true })
-
-      const { rerender } = render(
-        <SkeletonLoader id={widgetId} Skeleton={MockSkeleton}>
-          <div>Content</div>
-        </SkeletonLoader>,
-      )
-
-      expect(screen.getByLabelText('Loading skeleton')).toBeTruthy()
-
-      // Update store with isLoading false
-      useWidgetStore.getState().setWidget(widgetId, { isLoading: false })
-
-      // Force rerender to pick up store changes
-      rerender(
-        <SkeletonLoader id={widgetId} Skeleton={MockSkeleton}>
-          <div>Content</div>
-        </SkeletonLoader>,
-      )
-
-      expect(screen.queryByLabelText('Loading skeleton')).toBeNull()
-      expect(screen.getByText('Content')).toBeTruthy()
-    })
-
-    test('updates from content to skeleton when isLoading becomes true', () => {
-      useWidgetStore.getState().setWidget(widgetId, { isLoading: false })
-
-      const { rerender } = render(
-        <SkeletonLoader id={widgetId} Skeleton={MockSkeleton}>
-          <div>Content</div>
-        </SkeletonLoader>,
-      )
-
-      expect(screen.getByText('Content')).toBeTruthy()
-
-      // Update store to isLoading true
-      useWidgetStore.getState().setWidget(widgetId, { isLoading: true })
-
-      // Force rerender to pick up store changes
-      rerender(
-        <SkeletonLoader id={widgetId} Skeleton={MockSkeleton}>
-          <div>Content</div>
-        </SkeletonLoader>,
-      )
-
-      expect(screen.getByLabelText('Loading skeleton')).toBeTruthy()
-      expect(screen.queryByText('Content')).toBeNull()
-    })
-  })
-})

package/src/widgets/skeleton-loader/skeleton-loader.tsx

@@ -1,35 +0,0 @@
-import type { SkeletonLoaderProps } from './types'
-import { useWidgetSelector } from '../stores/use-widget-selector'
-import { Suspense } from 'react'
-
-/**
- * Displays a skeleton loading placeholder while widget data is loading. Subscribes to widget loading state in the store and renders the provided Skeleton component or children accordingly.
- *
- * @example
- * ```tsx
- * <SkeletonLoader id="sales-chart" Skeleton={BarSkeleton}>
- *   <Bar id="sales-chart" />
- * </SkeletonLoader>
- * ```
- */
-export function SkeletonLoader({
-  id,
-  children,
-  Skeleton,
-}: SkeletonLoaderProps) {
-  const isLoading = useWidgetSelector(id, (w) => w?.isLoading)
-
-  if (isLoading) {
-    if (!Skeleton) {
-      return null
-    }
-
-    return (
-      <Suspense fallback={null}>
-        <Skeleton />
-      </Suspense>
-    )
-  }
-
-  return children
-}

package/src/widgets/skeleton-loader/types.ts

@@ -1,8 +0,0 @@
-import type { ElementType, ReactNode } from 'react'
-import type { WidgetState } from '../stores/types'
-
-export interface SkeletonLoaderProps {
-  id: WidgetState['id']
-  Skeleton: ElementType | null
-  children: ReactNode
-}