@carto/ps-react-ui 5.0.0 → 6.0.0

package/src/widgets/table/hooks/use-sort.test.ts

@@ -1,296 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest'
-import { renderHook, act } from '@testing-library/react'
-import { useSort } from './use-sort'
-import { useWidgetStore } from '../../stores/widget-store'
-import type { TableRow } from '../types'
-
-describe('useSort', () => {
-  const testData: TableRow[] = [
-    { id: 1, name: 'Charlie', age: 30 },
-    { id: 2, name: 'Alice', age: 25 },
-    { id: 3, name: 'Bob', age: 35 },
-  ]
-
-  // Clear widget store before each test
-  beforeEach(() => {
-    useWidgetStore.getState().clearWidgets()
-  })
-
-  describe('initialization', () => {
-    it('should initialize with default values', () => {
-      const { result } = renderHook(() => useSort('test-widget', testData))
-
-      expect(result.current.columnId).toBeNull()
-      expect(result.current.direction).toBe('asc')
-      expect(result.current.sortedData).toEqual(testData)
-    })
-
-    it('should initialize with custom values', () => {
-      const { result } = renderHook(() => useSort('test-widget', testData))
-
-      expect(result.current.columnId).toBeNull()
-      expect(result.current.direction).toBe('asc')
-    })
-
-    it('should sort data when column is set', () => {
-      const { result } = renderHook(() => useSort('test-widget', testData))
-
-      act(() => {
-        result.current.setSort('name', 'asc')
-      })
-
-      expect(result.current.sortedData.map((r) => r.name)).toEqual([
-        'Alice',
-        'Bob',
-        'Charlie',
-      ])
-    })
-  })
-
-  describe('local mode', () => {
-    it('should toggle sort direction on same column', () => {
-      const { result } = renderHook(() => useSort('test-widget', testData))
-
-      // First toggle - set to asc
-      act(() => {
-        result.current.toggleSort('name')
-      })
-
-      expect(result.current.columnId).toBe('name')
-      expect(result.current.direction).toBe('asc')
-
-      // Second toggle - change to desc
-      act(() => {
-        result.current.toggleSort('name')
-      })
-
-      expect(result.current.columnId).toBe('name')
-      expect(result.current.direction).toBe('desc')
-
-      // Third toggle - back to asc
-      act(() => {
-        result.current.toggleSort('name')
-      })
-
-      expect(result.current.direction).toBe('asc')
-    })
-
-    it('should reset to asc when changing column', () => {
-      const { result } = renderHook(() => useSort('test-widget', testData))
-
-      // First set name column to desc
-      act(() => {
-        result.current.setSort('name', 'desc')
-      })
-
-      // Then toggle to age column
-      act(() => {
-        result.current.toggleSort('age')
-      })
-
-      expect(result.current.columnId).toBe('age')
-      expect(result.current.direction).toBe('asc')
-    })
-
-    it('should sort data ascending', () => {
-      const { result } = renderHook(() => useSort('test-widget', testData))
-
-      act(() => {
-        result.current.toggleSort('name')
-      })
-
-      expect(result.current.sortedData.map((r) => r.name)).toEqual([
-        'Alice',
-        'Bob',
-        'Charlie',
-      ])
-    })
-
-    it('should sort data descending', () => {
-      const { result } = renderHook(() => useSort('test-widget', testData))
-
-      // First toggle sets to asc
-      act(() => {
-        result.current.toggleSort('name')
-      })
-
-      // Second toggle sets to desc
-      act(() => {
-        result.current.toggleSort('name')
-      })
-
-      expect(result.current.sortedData.map((r) => r.name)).toEqual([
-        'Charlie',
-        'Bob',
-        'Alice',
-      ])
-    })
-
-    it('should sort numbers correctly', () => {
-      const { result } = renderHook(() => useSort('test-widget', testData))
-
-      act(() => {
-        result.current.toggleSort('age')
-      })
-
-      expect(result.current.sortedData.map((r) => r.age)).toEqual([25, 30, 35])
-    })
-
-    it('should set sort state directly', () => {
-      const { result } = renderHook(() => useSort('test-widget', testData))
-
-      act(() => {
-        result.current.setSort('age', 'desc')
-      })
-
-      expect(result.current.columnId).toBe('age')
-      expect(result.current.direction).toBe('desc')
-      expect(result.current.sortedData.map((r) => r.age)).toEqual([35, 30, 25])
-    })
-
-    it('should clear sort', () => {
-      const { result } = renderHook(() => useSort('test-widget', testData))
-
-      // First set a sort
-      act(() => {
-        result.current.setSort('name', 'desc')
-      })
-
-      // Then clear it
-      act(() => {
-        result.current.clearSort()
-      })
-
-      expect(result.current.columnId).toBeNull()
-      expect(result.current.direction).toBe('asc')
-      expect(result.current.sortedData).toEqual(testData)
-    })
-
-    it('should persist state in widget store', () => {
-      const { result, unmount } = renderHook(() =>
-        useSort('test-widget', testData),
-      )
-
-      act(() => {
-        result.current.toggleSort('name')
-        result.current.toggleSort('name') // toggle to desc
-      })
-
-      expect(result.current.columnId).toBe('name')
-      expect(result.current.direction).toBe('desc')
-
-      // Unmount and remount - state should persist
-      unmount()
-
-      const { result: newResult } = renderHook(() =>
-        useSort('test-widget', testData),
-      )
-
-      expect(newResult.current.columnId).toBe('name')
-      expect(newResult.current.direction).toBe('desc')
-    })
-  })
-
-  describe('remote mode', () => {
-    it('should return data as-is in remote mode', () => {
-      useWidgetStore.getState().setWidget('test-widget', {
-        mode: 'remote',
-        sort: { columnId: null, direction: 'asc' },
-      })
-      const { result } = renderHook(() => useSort('test-widget', testData))
-
-      // In remote mode, sortedData should be the original data
-      // since server handles sorting
-      expect(result.current.sortedData).toEqual(testData)
-    })
-
-    it('should update store state when toggling sort in remote mode', () => {
-      useWidgetStore.getState().setWidget('test-widget', {
-        mode: 'remote',
-        sort: { columnId: null, direction: 'asc' },
-      })
-      const { result } = renderHook(() => useSort('test-widget', testData))
-
-      act(() => {
-        result.current.toggleSort('name')
-      })
-
-      expect(result.current.columnId).toBe('name')
-      expect(result.current.direction).toBe('asc')
-    })
-
-    it('should update store state when setting sort in remote mode', () => {
-      useWidgetStore.getState().setWidget('test-widget', {
-        mode: 'remote',
-        sort: { columnId: null, direction: 'asc' },
-      })
-      const { result } = renderHook(() => useSort('test-widget', testData))
-
-      act(() => {
-        result.current.setSort('age', 'desc')
-      })
-
-      expect(result.current.columnId).toBe('age')
-      expect(result.current.direction).toBe('desc')
-      // Data should still be unmodified in remote mode
-      expect(result.current.sortedData).toEqual(testData)
-    })
-  })
-
-  describe('edge cases', () => {
-    it('should handle empty data', () => {
-      const { result } = renderHook(() => useSort('test-widget', []))
-
-      expect(result.current.sortedData).toEqual([])
-
-      act(() => {
-        result.current.toggleSort('name')
-      })
-
-      expect(result.current.sortedData).toEqual([])
-    })
-
-    it('should handle single item data', () => {
-      const singleItem = [{ id: 1, name: 'Alice' }]
-      const { result } = renderHook(() => useSort('test-widget', singleItem))
-
-      act(() => {
-        result.current.toggleSort('name')
-      })
-
-      expect(result.current.sortedData).toEqual(singleItem)
-    })
-
-    it('should preserve sort when data changes', () => {
-      const { result, rerender } = renderHook(
-        ({ data }) => useSort('test-widget', data),
-        { initialProps: { data: testData } },
-      )
-
-      act(() => {
-        result.current.toggleSort('name')
-      })
-
-      expect(result.current.sortedData.map((r) => r.name)).toEqual([
-        'Alice',
-        'Bob',
-        'Charlie',
-      ])
-
-      // Add new data
-      const newData: TableRow[] = [
-        ...testData,
-        { id: 4, name: 'David', age: 28 },
-      ]
-
-      rerender({ data: newData })
-
-      expect(result.current.sortedData.map((r) => r.name)).toEqual([
-        'Alice',
-        'Bob',
-        'Charlie',
-        'David',
-      ])
-    })
-  })
-})

package/src/widgets/table/hooks/use-sort.ts

@@ -1,131 +0,0 @@
-import { useCallback, useMemo } from 'react'
-import type {
-  TableRow,
-  SortDirection,
-  SortState,
-  TableWidgetState,
-} from '../types'
-import { sortData } from '../helpers'
-import { widgetStoreActions } from '../../stores/widget-store'
-import { useWidgetSelector } from '../../stores/use-widget-selector'
-import { DEFAULT_COLUMN_ID, DEFAULT_DIRECTION } from '../config'
-
-export interface UseSortResult<T> extends SortState {
-  /** Whether sorting is enabled */
-  sortEnabled: boolean
-  /** Current sort state */
-  columnId: string | null
-  direction: SortDirection
-  /** Sorted data (for local mode) */
-  sortedData: T[]
-  /** Toggle sort on a column */
-  toggleSort: (columnId: string) => void
-  /** Set sort state directly */
-  setSort: (columnId: string | null, direction: SortDirection) => void
-  /** Clear sort */
-  clearSort: () => void
-}
-
-/**
- * Hook for managing table sorting with support for both local (client-side) and remote (server-side) modes.
- * State is persisted in the widget store for the given widget ID.
- *
- * @param widgetId - The widget ID to persist sort state under.
- * @param data - The data array to sort (for local mode).
- * @returns Sort state, sorted data, and sort control functions.
- *
- * @example
- * ```tsx
- * const { sortedData, sortField, sortDirection, handleSort } = useSort(widgetId, data)
- * ```
- */
-export function useSort<T extends TableRow>(
-  widgetId: string,
-  data: T[],
-): UseSortResult<T> {
-  // Get store state
-  const { sortEnabled, columnId, direction, mode } = useWidgetSelector(
-    widgetId,
-    (w) => {
-      const widget = w as TableWidgetState | undefined
-      return {
-        sortEnabled: !!widget?.sort,
-        columnId: widget?.sort?.columnId ?? DEFAULT_COLUMN_ID,
-        direction: widget?.sort?.direction ?? DEFAULT_DIRECTION,
-        mode: widget?.mode,
-      }
-    },
-  )
-
-  // Toggle sort on a column
-  const toggleSort = useCallback(
-    (toggleColumnId: string) => {
-      // Read current state directly from store to avoid stale closures
-      const widget = widgetStoreActions.getWidget<TableWidgetState>(widgetId)
-      const currentColumnId = widget?.sort?.columnId ?? DEFAULT_COLUMN_ID
-      const currentDirection = widget?.sort?.direction ?? DEFAULT_DIRECTION
-
-      let newDirection: SortDirection = 'asc'
-
-      if (currentColumnId === toggleColumnId) {
-        // Same column - toggle direction
-        newDirection = currentDirection === 'asc' ? 'desc' : 'asc'
-      }
-
-      widgetStoreActions.setWidget<TableWidgetState>(widgetId, {
-        sort: {
-          columnId: toggleColumnId,
-          direction: newDirection,
-        },
-      })
-    },
-    [widgetId],
-  )
-
-  // Set sort state directly
-  const setSort = useCallback(
-    (newColumnId: string | null, newDirection: SortDirection) => {
-      widgetStoreActions.setWidget<TableWidgetState>(widgetId, {
-        sort: {
-          columnId: newColumnId,
-          direction: newDirection,
-        },
-      })
-    },
-    [widgetId],
-  )
-
-  // Clear sort
-  const clearSort = useCallback(() => {
-    const widget = widgetStoreActions.getWidget<TableWidgetState>(widgetId)
-    if (!widget?.sort) return
-
-    widgetStoreActions.setWidget<TableWidgetState>(widgetId, {
-      sort: {
-        ...widget.sort,
-        columnId: null,
-        direction: 'asc',
-      },
-    })
-  }, [widgetId])
-
-  // Sorted data for local mode
-  const sortedData = useMemo(() => {
-    if (mode === 'remote' || !columnId || !sortEnabled) {
-      // For remote mode, data is already sorted from server
-      // If no sort column, return original data
-      return data
-    }
-    return sortData(data, columnId, direction)
-  }, [data, mode, columnId, direction, sortEnabled])
-
-  return {
-    sortEnabled,
-    columnId,
-    direction,
-    sortedData,
-    toggleSort,
-    setSort,
-    clearSort,
-  }
-}

package/src/widgets/table/serializer.ts

@@ -1,54 +0,0 @@
-import type { TableRow, TableWidgetData } from './types'
-
-/**
- * Sanitizes a table row by ensuring all values are serializable.
- * Converts ReactNode and function values to undefined.
- *
- * @param row - The table row to sanitize
- * @returns A sanitized table row
- */
-export function sanitizeTableRow(row: TableRow): TableRow {
-  const sanitized: TableRow = { id: row.id }
-
-  for (const [key, value] of Object.entries(row)) {
-    if (key === 'id') continue
-
-    // Keep primitive values
-    if (
-      typeof value === 'string' ||
-      typeof value === 'number' ||
-      typeof value === 'boolean' ||
-      value === null
-    ) {
-      sanitized[key] = value
-    }
-    // Serialize arrays and plain objects
-    else if (Array.isArray(value) || typeof value === 'object') {
-      try {
-        // Attempt to serialize - if it fails, the value contains non-serializable content
-        JSON.stringify(value)
-        sanitized[key] = value
-      } catch {
-        sanitized[key] = undefined
-      }
-    }
-    // Skip functions and other non-serializable values
-    else {
-      sanitized[key] = undefined
-    }
-  }
-
-  return sanitized
-}
-
-/**
- * Sanitizes table widget data by ensuring all rows are serializable.
- *
- * @param data - The table data to sanitize
- * @returns Sanitized table data
- */
-export function sanitizeTableData(
-  data: TableWidgetData | undefined,
-): TableWidgetData | undefined {
-  return data?.map(sanitizeTableRow)
-}

package/src/widgets/timeseries/config.ts

@@ -1,136 +0,0 @@
-import {
-  getCommonOptions,
-  mergeEchartWidgetConfig,
-  type EchartOptionsProps,
-} from '../echart'
-import type {
-  TimeseriesConfig,
-  TimeseriesWidgetConfig,
-  TimeseriesWidgetData,
-} from './types'
-import {
-  flattenObjectArrayToCSV,
-  buildLegendConfig,
-  buildGridConfig,
-  createTooltipFormatter,
-  createChartDownloadConfig,
-  applyYAxisFormatter,
-  applyXAxisFormatter,
-  buildSeriesLabelConfig,
-} from '../utils/chart-config'
-
-export const timeseriesDownloadConfig =
-  createChartDownloadConfig<TimeseriesWidgetData>(flattenObjectArrayToCSV)
-
-/**
- * Generates ECharts configuration for line and area chart widgets over time, with smooth curves, rotated axis labels, and CARTO qualitative color palette.
- *
- * @param props - Timeseries configuration including data and theme.
- * @returns Widget config with ECharts option object.
- */
-export function timeseriesConfig(
-  props: TimeseriesConfig,
-): TimeseriesWidgetConfig {
-  return {
-    type: 'timeseries',
-    option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
-    formatter: props.formatter,
-    labelFormatter: props.labelFormatter,
-  }
-}
-
-function getOption({
-  data = [],
-  theme,
-  formatter,
-  labelFormatter,
-}: TimeseriesConfig): EchartOptionsProps {
-  const hasLegend = (data?.length ?? 0) > 1
-
-  const yAxis = {
-    type: 'value' as const,
-    axisLabel: {
-      margin: 0,
-      padding: [
-        0,
-        parseInt(theme.spacing(0.75)),
-        parseInt(theme.spacing(1.25)),
-        -parseInt(theme.spacing(1)),
-      ],
-      show: true,
-      showMaxLabel: true,
-      showMinLabel: false,
-      verticalAlign: 'bottom' as const,
-    },
-    axisLine: {
-      show: false,
-    },
-    axisTick: {
-      show: false,
-    },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: theme.palette.black[4],
-      },
-    },
-  }
-
-  return {
-    legend: buildLegendConfig({ hasLegend, labelFormatter }),
-    grid: {
-      ...buildGridConfig(hasLegend, theme),
-      outerBounds: {
-        left: parseInt(theme.spacing(3)),
-        right: parseInt(theme.spacing(1)),
-        top: parseInt(theme.spacing(2)),
-      },
-    },
-    xAxis: applyXAxisFormatter(
-      {
-        type: 'category',
-        axisTick: {
-          alignWithLabel: true,
-        },
-        axisLabel: {
-          show: true,
-          showMaxLabel: true,
-          showMinLabel: true,
-          rotate: 45,
-        },
-      },
-      labelFormatter,
-    ),
-    yAxis: applyYAxisFormatter(yAxis, formatter),
-    tooltip: {
-      formatter: createTooltipFormatter((item) => {
-        const value = item.value as Record<string, string | number>
-        const index = item.dimensionNames?.[item.encode?.y?.at(0) ?? 1]
-        const _value = value[index ?? '']
-
-        const formattedValue =
-          typeof _value === 'number' && formatter
-            ? formatter(_value)
-            : (_value ?? '')
-
-        const marker = typeof item.marker === 'string' ? item.marker : ''
-        const seriesName = item.seriesName ? `${item.seriesName}: ` : ''
-        const name = labelFormatter
-          ? String(labelFormatter(item.name ?? ''))
-          : (item.name ?? '')
-
-        return { name, seriesName, marker, value: formattedValue }
-      }),
-    },
-    color: Object.values(theme.palette.qualitative.bold),
-    series: data.map((_: unknown, index: number) => ({
-      datasetIndex: index,
-      type: 'line',
-      smooth: true,
-      emphasis: {
-        focus: 'series',
-      },
-      ...buildSeriesLabelConfig(formatter),
-    })),
-  } as EchartOptionsProps
-}

package/src/widgets/timeseries/style.ts

@@ -1,36 +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',
-      },
-      grid: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        flex: '1 1 auto',
-        alignItems: 'flex-end',
-        width: '100%',
-      },
-    },
-    histogram: {
-      item: {
-        flex: 1,
-        maxWidth: ({ spacing }) => spacing(8),
-
-        '& + &': {
-          marginLeft: '1px',
-        },
-      },
-    },
-    legend: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: ({ spacing }) => spacing(2),
-      height: ({ spacing }) => spacing(5),
-    },
-  },
-} satisfies Record<string, SxProps<Theme>>

package/src/widgets/toolbar-actions/index.ts

@@ -1,6 +0,0 @@
-export type {
-  ToolbarAction,
-  ToolbarActionsLabels,
-  ToolbarActionsProps,
-} from './types'
-export { ToolbarActions } from './toolbar-actions'

package/src/widgets/toolbar-actions/styles.ts

@@ -1,38 +0,0 @@
-import type { SxProps, Theme } from '@mui/material'
-
-export const styles = {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    width: 'fit-content',
-    overflow: 'hidden',
-    borderRadius: ({ spacing }) => spacing(0.5),
-    gap: ({ spacing }) => spacing(0.25),
-  },
-  preview: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: ({ spacing }) => spacing(0.25),
-  },
-  actionsContainer: {
-    position: 'absolute',
-    display: 'flex',
-    alignItems: 'center',
-    backgroundColor: ({ palette }) => palette.background.default,
-    padding: ({ spacing }) => spacing(0.25),
-    gap: ({ spacing }) => spacing(0.25),
-  },
-  iconButton: {
-    width: ({ spacing }) => spacing(4),
-    height: ({ spacing }) => spacing(4),
-    borderRadius: 0,
-    '.MuiTouchRipple-ripple .MuiTouchRipple-child': {
-      borderRadius: 0,
-    },
-  },
-  triggerButton: {
-    '&[data-active="true"]': {
-      backgroundColor: ({ palette }) => palette.primary.relatedLight,
-    },
-  },
-} satisfies Record<string, SxProps<Theme>>