@carto/ps-react-ui 5.3.0 → 6.1.0

package/src/widgets/actions/relative-data/utils.test.ts

@@ -1,223 +0,0 @@
-import { describe, test, expect } from 'vitest'
-import { calculateTotal, toRelativeData } from './utils'
-import type { EchartWidgetData } from '../../echart/types'
-
-describe('calculateTotal', () => {
-  test('calculates sum of all numeric values in single series', () => {
-    const data: EchartWidgetData = [
-      [
-        { category: 'A', value: 25 },
-        { category: 'B', value: 75 },
-      ],
-    ]
-
-    expect(calculateTotal(data)).toBe(100)
-  })
-
-  test('calculates sum across multiple series', () => {
-    const data: EchartWidgetData = [
-      [
-        { name: 'X', count: 10 },
-        { name: 'Y', count: 20 },
-      ],
-      [
-        { name: 'X', count: 30 },
-        { name: 'Y', count: 40 },
-      ],
-    ]
-
-    expect(calculateTotal(data)).toBe(100)
-  })
-
-  test('returns zero for empty data', () => {
-    const data: EchartWidgetData = []
-
-    expect(calculateTotal(data)).toBe(0)
-  })
-
-  test('returns zero for empty series', () => {
-    const data: EchartWidgetData = [[]]
-
-    expect(calculateTotal(data)).toBe(0)
-  })
-
-  test('handles data with only zero values', () => {
-    const data: EchartWidgetData = [
-      [
-        { category: 'A', value: 0 },
-        { category: 'B', value: 0 },
-      ],
-    ]
-
-    expect(calculateTotal(data)).toBe(0)
-  })
-
-  test('handles negative values', () => {
-    const data: EchartWidgetData = [
-      [
-        { category: 'A', value: -25 },
-        { category: 'B', value: 75 },
-      ],
-    ]
-
-    expect(calculateTotal(data)).toBe(50)
-  })
-
-  test('ignores string values in calculation', () => {
-    const data: EchartWidgetData = [
-      [
-        { label: 'First', value: 50, extra: 'text' },
-        { label: 'Second', value: 50, extra: 'more' },
-      ],
-    ]
-
-    expect(calculateTotal(data)).toBe(100)
-  })
-
-  test('handles multiple numeric fields per item', () => {
-    const data: EchartWidgetData = [
-      [
-        { category: 'A', value1: 10, value2: 20 },
-        { category: 'B', value1: 30, value2: 40 },
-      ],
-    ]
-
-    expect(calculateTotal(data)).toBe(100)
-  })
-})
-
-describe('toRelativeData', () => {
-  test('transforms values to percentages (25/100 = 25%, 75/100 = 75%)', () => {
-    const data: EchartWidgetData = [
-      [
-        { category: 'A', value: 25 },
-        { category: 'B', value: 75 },
-      ],
-    ]
-    const total = 100
-
-    const result = toRelativeData(data, total)
-
-    // With total 100, 25 becomes 25% and 75 becomes 75%
-    expect(result[0]?.[0]?.value).toBe(25)
-    expect(result[0]?.[1]?.value).toBe(75)
-  })
-
-  test('transforms values to percentages with non-100 total (50/200 = 25%)', () => {
-    const data: EchartWidgetData = [
-      [
-        { category: 'A', value: 50 },
-        { category: 'B', value: 150 },
-      ],
-    ]
-    const total = 200
-
-    const result = toRelativeData(data, total)
-
-    // 50/200 = 25%, 150/200 = 75%
-    expect(result[0]?.[0]?.value).toBe(25)
-    expect(result[0]?.[1]?.value).toBe(75)
-  })
-
-  test('returns original data when total is zero', () => {
-    const data: EchartWidgetData = [
-      [
-        { category: 'A', value: 0 },
-        { category: 'B', value: 0 },
-      ],
-    ]
-    const total = 0
-
-    const result = toRelativeData(data, total)
-
-    expect(result).toEqual(data)
-  })
-
-  test('preserves string values during transformation', () => {
-    const data: EchartWidgetData = [
-      [
-        { label: 'First', value: 50, extra: 'text' },
-        { label: 'Second', value: 50, extra: 'more' },
-      ],
-    ]
-    const total = 100
-
-    const result = toRelativeData(data, total)
-
-    expect(result[0]?.[0]?.label).toBe('First')
-    expect(result[0]?.[0]?.extra).toBe('text')
-    expect(result[0]?.[1]?.label).toBe('Second')
-    expect(result[0]?.[1]?.extra).toBe('more')
-  })
-
-  test('transforms data with multiple series', () => {
-    const data: EchartWidgetData = [
-      [
-        { name: 'X', count: 10 },
-        { name: 'Y', count: 20 },
-      ],
-      [
-        { name: 'X', count: 30 },
-        { name: 'Y', count: 40 },
-      ],
-    ]
-    const total = 100
-
-    const result = toRelativeData(data, total)
-
-    expect(result[0]?.[0]?.count).toBe(10)
-    expect(result[0]?.[1]?.count).toBe(20)
-    expect(result[1]?.[0]?.count).toBe(30)
-    expect(result[1]?.[1]?.count).toBe(40)
-  })
-
-  test('handles fractional percentages correctly', () => {
-    const data: EchartWidgetData = [
-      [
-        { category: 'A', value: 1 },
-        { category: 'B', value: 2 },
-        { category: 'C', value: 3 },
-      ],
-    ]
-    const total = 6
-
-    const result = toRelativeData(data, total)
-
-    expect(result[0]?.[0]?.value).toBeCloseTo(16.6667, 4)
-    expect(result[0]?.[1]?.value).toBeCloseTo(33.3333, 4)
-    expect(result[0]?.[2]?.value).toBeCloseTo(50, 4)
-  })
-
-  test('handles negative values', () => {
-    const data: EchartWidgetData = [
-      [
-        { category: 'A', value: -25 },
-        { category: 'B', value: 75 },
-      ],
-    ]
-    const total = 50
-
-    const result = toRelativeData(data, total)
-
-    expect(result[0]?.[0]?.value).toBe(-50)
-    expect(result[0]?.[1]?.value).toBe(150)
-  })
-
-  test('handles empty data', () => {
-    const data: EchartWidgetData = []
-    const total = 100
-
-    const result = toRelativeData(data, total)
-
-    expect(result).toEqual([])
-  })
-
-  test('handles empty series', () => {
-    const data: EchartWidgetData = [[]]
-    const total = 100
-
-    const result = toRelativeData(data, total)
-
-    expect(result).toEqual([[]])
-  })
-})

package/src/widgets/actions/relative-data/utils.ts

@@ -1,58 +0,0 @@
-import type { EchartWidgetData } from '../../echart/types'
-
-/**
- * Calculates the sum of all numeric values in the data
- */
-export function calculateTotal(data: EchartWidgetData): number {
-  return data.reduce((total, series) => {
-    return series.reduce((seriesTotal, item) => {
-      if (Array.isArray(item)) {
-        const value = item.at(-1) as number
-        return typeof value === 'number' ? seriesTotal + value : seriesTotal
-      }
-
-      return Object.entries(item).reduce((itemTotal: number, [key, value]) => {
-        if (key === 'name') {
-          return itemTotal
-        }
-        return typeof value === 'number' ? itemTotal + value : itemTotal
-      }, seriesTotal)
-    }, total)
-  }, 0)
-}
-
-/**
- * Transforms data to relative (percentage) values
- */
-export function toRelativeData(
-  data: EchartWidgetData,
-  total: number,
-): EchartWidgetData {
-  if (total === 0) return data
-
-  return data.map((series) =>
-    series.map((item) => {
-      if (Array.isArray(item)) {
-        return item.map((value: number, index) => {
-          if (index === item.length - 1 && typeof value === 'number') {
-            return (value / total) * 100
-          }
-          return value
-        }) as typeof item
-      }
-
-      const transformed: Record<string, string | number> = {}
-
-      for (const [key, value] of Object.entries(item)) {
-        if (key === 'name') {
-          transformed[key] = value
-          continue
-        }
-        transformed[key] =
-          typeof value === 'number' ? (value / total) * 100 : value
-      }
-
-      return transformed
-    }),
-  )
-}

package/src/widgets/actions/searcher/searcher-toggle.test.tsx

@@ -1,354 +0,0 @@
-import { describe, test, expect, beforeEach, vi, afterEach } from 'vitest'
-import { render, screen, fireEvent, act } from '@testing-library/react'
-import { SearcherToggle } from './searcher-toggle'
-import { Searcher } from './searcher'
-import { useWidgetStore } from '../../stores/widget-store'
-import type { EchartWidgetData } from '../../echart/types'
-import type { SearcherState } from './types'
-
-// Test data
-const mockData: EchartWidgetData = [
-  [
-    { name: 'Electronics', value: 440 },
-    { name: 'Clothing', value: 280 },
-    { name: 'Books', value: 100 },
-  ],
-]
-
-describe('SearcherToggle', () => {
-  const widgetId = 'test-searcher-toggle'
-
-  beforeEach(() => {
-    useWidgetStore.getState().clearWidgets()
-  })
-
-  test('renders search toggle button', () => {
-    render(<SearcherToggle id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    expect(button).toBeTruthy()
-  })
-
-  test('shows enable tooltip when search is disabled', () => {
-    render(<SearcherToggle id={widgetId} />)
-
-    const button = screen.getByRole('button', { name: 'Enable search' })
-    expect(button).toBeTruthy()
-  })
-
-  test('shows disable tooltip when search is enabled', () => {
-    render(<SearcherToggle id={widgetId} defaultEnabled />)
-
-    const button = screen.getByRole('button', { name: 'Disable search' })
-    expect(button).toBeTruthy()
-  })
-
-  test('toggles isSearchEnabled in store when clicked', () => {
-    render(<SearcherToggle id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    const widget = useWidgetStore.getState().getWidget<SearcherState>(widgetId)
-    expect(widget?.isSearchEnabled).toBe(true)
-  })
-
-  test('has active state when enabled via store', () => {
-    render(<SearcherToggle id={widgetId} defaultEnabled />)
-
-    const button = screen.getByRole('button')
-    expect(button.getAttribute('data-active')).toBe('true')
-  })
-
-  test('has inactive state when disabled', () => {
-    render(<SearcherToggle id={widgetId} />)
-
-    const button = screen.getByRole('button')
-    expect(button.getAttribute('data-active')).toBe('false')
-  })
-
-  test('uses custom labels', () => {
-    render(
-      <SearcherToggle
-        id={widgetId}
-        labels={{
-          enable: 'Activar búsqueda',
-          disable: 'Desactivar búsqueda',
-          ariaLabel: 'Toggle search',
-        }}
-      />,
-    )
-
-    const button = screen.getByRole('button', { name: 'Toggle search' })
-    expect(button).toBeTruthy()
-  })
-
-  test('initializes store with defaultEnabled value', () => {
-    render(<SearcherToggle id={widgetId} defaultEnabled />)
-
-    const widget = useWidgetStore.getState().getWidget<SearcherState>(widgetId)
-    expect(widget?.isSearchEnabled).toBe(true)
-  })
-})
-
-describe('Searcher', () => {
-  const widgetId = 'test-searcher-input'
-
-  beforeEach(() => {
-    useWidgetStore.getState().clearWidgets()
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  test('does not render when search is disabled in store', () => {
-    // Set isSearchEnabled to false in store
-    useWidgetStore.getState().setWidget(widgetId, { isSearchEnabled: false })
-
-    render(<Searcher id={widgetId} />)
-
-    const input = screen.queryByRole('textbox')
-    expect(input).toBeNull()
-  })
-
-  test('renders input when search is enabled in store', () => {
-    // Set isSearchEnabled to true in store
-    useWidgetStore.getState().setWidget(widgetId, { isSearchEnabled: true })
-
-    render(<Searcher id={widgetId} />)
-
-    const input = screen.getByRole('textbox')
-    expect(input).toBeTruthy()
-  })
-
-  test('shows placeholder text', () => {
-    useWidgetStore.getState().setWidget(widgetId, { isSearchEnabled: true })
-
-    render(<Searcher id={widgetId} labels={{ placeholder: 'Search...' }} />)
-
-    const input = screen.getByPlaceholderText('Search...')
-    expect(input).toBeTruthy()
-  })
-
-  test('updates store with debounced filtered data', async () => {
-    // Initialize widget with data and enabled state
-    useWidgetStore
-      .getState()
-      .setWidget(widgetId, { data: mockData, isSearchEnabled: true })
-
-    render(<Searcher id={widgetId} />)
-
-    const input = screen.getByRole('textbox')
-    fireEvent.change(input, { target: { value: 'Electronics' } })
-
-    // Wait for debounce (300ms) and flush all pending promises
-    await act(async () => {
-      await vi.advanceTimersByTimeAsync(300)
-    })
-
-    // Execute the tool pipeline to apply the filter transformation
-    await useWidgetStore.getState().executeToolPipeline(widgetId, mockData)
-
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const filteredData = widget?.data as EchartWidgetData | undefined
-
-    // Should only have Electronics item
-    expect(filteredData?.[0]?.length).toBe(1)
-    expect(filteredData?.[0]?.[0]?.name).toBe('Electronics')
-  })
-
-  test('shows clear button when there is text', () => {
-    useWidgetStore.getState().setWidget(widgetId, { isSearchEnabled: true })
-
-    render(<Searcher id={widgetId} />)
-
-    const input = screen.getByRole('textbox')
-    fireEvent.change(input, { target: { value: 'test' } })
-
-    const clearButton = screen.getByRole('button', { name: 'Clear search' })
-    expect(clearButton).toBeTruthy()
-  })
-
-  test('does not show clear button when input is empty', () => {
-    useWidgetStore.getState().setWidget(widgetId, { isSearchEnabled: true })
-
-    render(<Searcher id={widgetId} />)
-
-    const clearButton = screen.queryByRole('button', { name: 'Clear search' })
-    expect(clearButton).toBeNull()
-  })
-
-  test('clears search text and restores original data when clear button is clicked', () => {
-    // Initialize widget with data and enabled state
-    useWidgetStore
-      .getState()
-      .setWidget(widgetId, { data: mockData, isSearchEnabled: true })
-
-    render(<Searcher id={widgetId} />)
-
-    const input = screen.getByRole('textbox')
-    fireEvent.change(input, { target: { value: 'Electronics' } })
-
-    // Wait for debounce
-    act(() => {
-      vi.advanceTimersByTime(300)
-    })
-
-    // Click clear
-    const clearButton = screen.getByRole('button', { name: 'Clear search' })
-    fireEvent.click(clearButton)
-
-    // Data should be restored to original
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const restoredData = widget?.data as EchartWidgetData | undefined
-    expect(restoredData?.[0]?.length).toBe(3)
-  })
-
-  test('uses custom clear button aria label', () => {
-    useWidgetStore.getState().setWidget(widgetId, { isSearchEnabled: true })
-
-    render(
-      <Searcher
-        id={widgetId}
-        labels={{ clearAriaLabel: 'Limpiar búsqueda' }}
-      />,
-    )
-
-    const input = screen.getByRole('textbox')
-    fireEvent.change(input, { target: { value: 'text' } })
-
-    const clearButton = screen.getByRole('button', {
-      name: 'Limpiar búsqueda',
-    })
-    expect(clearButton).toBeTruthy()
-  })
-
-  test('uses custom filter function', async () => {
-    // Custom filter that only matches exact values
-    const customFilterFn = async (
-      data: EchartWidgetData,
-      searchText: string,
-    ) => {
-      return Promise.resolve(
-        data.map((series) =>
-          series.filter((item) => item.value === parseInt(searchText, 10)),
-        ),
-      )
-    }
-
-    // Initialize widget with data and enabled state
-    useWidgetStore
-      .getState()
-      .setWidget(widgetId, { data: mockData, isSearchEnabled: true })
-
-    render(<Searcher id={widgetId} filterFn={customFilterFn} />)
-
-    const input = screen.getByRole('textbox')
-    fireEvent.change(input, { target: { value: '440' } })
-
-    // Wait for debounce and flush all pending promises
-    await act(async () => {
-      await vi.advanceTimersByTimeAsync(300)
-    })
-
-    // Execute the tool pipeline to apply the filter transformation
-    await useWidgetStore.getState().executeToolPipeline(widgetId, mockData)
-
-    // Should only have Electronics (value: 440)
-    const widget = useWidgetStore.getState().getWidget(widgetId)
-    const filteredData = widget?.data as EchartWidgetData | undefined
-    expect(filteredData?.[0]?.length).toBe(1)
-    expect(filteredData?.[0]?.[0]?.value).toBe(440)
-  })
-})
-
-describe('SearcherToggle + Searcher integration', () => {
-  const widgetId = 'test-integration'
-
-  beforeEach(() => {
-    useWidgetStore.getState().clearWidgets()
-  })
-
-  // Helper component that uses both SearcherToggle and Searcher with same id
-  function IntegrationTest() {
-    return (
-      <>
-        <SearcherToggle id={widgetId} />
-        <Searcher id={widgetId} />
-      </>
-    )
-  }
-
-  test('searcher becomes visible when toggle is clicked', () => {
-    render(<IntegrationTest />)
-
-    // Initially searcher should not be visible
-    expect(screen.queryByRole('textbox')).toBeNull()
-
-    // Click toggle
-    const toggleButton = screen.getByRole('button')
-    fireEvent.click(toggleButton)
-
-    // Searcher should now be visible
-    expect(screen.getByRole('textbox')).toBeTruthy()
-  })
-
-  test('searcher is hidden when toggle is clicked again', () => {
-    render(<IntegrationTest />)
-
-    const toggleButton = screen.getByRole('button')
-
-    // Enable
-    fireEvent.click(toggleButton)
-    expect(screen.getByRole('textbox')).toBeTruthy()
-
-    // Disable
-    fireEvent.click(toggleButton)
-    expect(screen.queryByRole('textbox')).toBeNull()
-  })
-
-  test('toggle button shows correct active state', () => {
-    render(<IntegrationTest />)
-
-    const toggleButton = screen.getByRole('button')
-
-    // Initially inactive
-    expect(toggleButton.getAttribute('data-active')).toBe('false')
-
-    // Enable - should be active
-    fireEvent.click(toggleButton)
-    expect(toggleButton.getAttribute('data-active')).toBe('true')
-
-    // Disable - should be inactive
-    fireEvent.click(toggleButton)
-    expect(toggleButton.getAttribute('data-active')).toBe('false')
-  })
-
-  test('store state is correctly updated when toggling', () => {
-    render(<IntegrationTest />)
-
-    const toggleButton = screen.getByRole('button')
-
-    // Initially should be false
-    expect(
-      useWidgetStore.getState().getWidget<SearcherState>(widgetId)
-        ?.isSearchEnabled,
-    ).toBe(false)
-
-    // Enable
-    fireEvent.click(toggleButton)
-    expect(
-      useWidgetStore.getState().getWidget<SearcherState>(widgetId)
-        ?.isSearchEnabled,
-    ).toBe(true)
-
-    // Disable
-    fireEvent.click(toggleButton)
-    expect(
-      useWidgetStore.getState().getWidget<SearcherState>(widgetId)
-        ?.isSearchEnabled,
-    ).toBe(false)
-  })
-})

package/src/widgets/actions/searcher/types.ts

@@ -1,72 +0,0 @@
-import type { IconButtonProps, TextFieldProps } from '@mui/material'
-import type { ReactNode } from 'react'
-import type { EchartWidgetData } from '../../echart/types'
-import type { BaseWidgetState } from '../../stores/types'
-
-/**
- * Filter function type for custom search filtering logic.
- * Receives the original data and search text, returns filtered data.
- * Can be synchronous or asynchronous to support remote filtering.
- */
-export type SearcherFilterFn = (
-  data: EchartWidgetData,
-  searchText: string,
-) => Promise<EchartWidgetData> | EchartWidgetData
-
-/**
- * Searcher-specific state properties.
- */
-export interface SearcherStateProps {
-  /** Whether search is currently enabled */
-  isSearchEnabled?: boolean
-  /** Current search text */
-  searchText?: string
-}
-
-/**
- * Widget state extension for searcher functionality.
- * Extends the base widget state with search-specific properties.
- */
-export type SearcherState<T = object> = BaseWidgetState<T & SearcherStateProps>
-
-export interface SearcherToggleProps {
-  /** Widget ID to store search enabled state */
-  id: string
-  /** Initial search enabled state. Defaults to false */
-  defaultEnabled?: boolean
-  /** Custom labels for the action */
-  labels?: {
-    /** Tooltip when search is disabled (button will enable search) */
-    enable?: string
-    /** Tooltip when search is enabled (button will disable search) */
-    disable?: string
-    /** Accessibility label */
-    ariaLabel?: string
-  }
-  /** Props passed to the IconButton component */
-  IconButtonProps?: IconButtonProps
-  /** Custom icon to display */
-  Icon?: ReactNode
-}
-
-export interface SearcherProps {
-  /** Widget ID to update filtered data in the widget store */
-  id: string
-  /** Custom filter function. Defaults to case-insensitive search across all string fields */
-  filterFn?: SearcherFilterFn
-  /** Execution order in the tool pipeline. Lower values execute first. Defaults to 10. */
-  order?: number
-  /** Custom labels for the searcher input */
-  labels?: {
-    /** Placeholder text for the input */
-    placeholder?: string
-    /** Accessibility label for clear button */
-    clearAriaLabel?: string
-  }
-  /** Props passed to the TextField component */
-  TextFieldProps?: Omit<TextFieldProps, 'value' | 'onChange' | 'size'>
-  /** Custom icon for clear button */
-  ClearIcon?: ReactNode
-  /** Debounce delay in milliseconds for search input. Defaults to 300ms */
-  debounceDelay?: number
-}