@carto/ps-react-ui 5.1.0 → 6.0.0

package/src/widgets/actions/shared/styles.ts

@@ -1,12 +0,0 @@
-import type { SxProps, Theme } from '@mui/material'
-
-/**
- * Shared styles for widget action buttons
- */
-export const actionButtonStyles = {
-  trigger: {
-    '&[data-active="true"]': {
-      background: (theme: Theme) => theme.palette.primary.relatedLight,
-    },
-  },
-} satisfies Record<string, SxProps<Theme>>

package/src/widgets/actions/stack-toggle/grouped-bar-chart-icon.tsx

@@ -1,14 +0,0 @@
-export const GroupedBarChartIcon = () => (
-  <svg
-    width='24'
-    height='24'
-    viewBox='0 0 24 24'
-    fill='none'
-    xmlns='http://www.w3.org/2000/svg'
-  >
-    <path
-      d='M4 20V8H8V20H4ZM9 20V13H13V20H9ZM16 20V4H20V20H16Z'
-      fill='currentColor'
-    />
-  </svg>
-)

package/src/widgets/actions/stack-toggle/types.ts

@@ -1,29 +0,0 @@
-import type { IconButtonProps } from '@mui/material'
-import type { ReactNode } from 'react'
-import type { BaseWidgetState } from '../../stores/types'
-
-export interface StackToggleProps {
-  /** Widget ID to update stack configuration in the widget store */
-  id: string
-  /** Initial toggle state - when true, starts with stacking enabled */
-  defaultIsStacked?: boolean
-  /** Custom labels for the action */
-  labels?: {
-    /** Tooltip when stacking is disabled (button will enable stacking) */
-    stacked?: string
-    /** Tooltip when stacking is enabled (button will disable stacking) */
-    unstacked?: string
-    /** Accessibility label */
-    ariaLabel?: string
-  }
-  /** Props passed to the IconButton component */
-  IconButtonProps?: IconButtonProps
-  /** Custom icon to display */
-  Icon?: ReactNode
-}
-
-export type StackToggleState<T = unknown> = BaseWidgetState<
-  T & {
-    isStacked?: boolean
-  }
->

package/src/widgets/actions/zoom-toggle/types.ts

@@ -1,44 +0,0 @@
-import type { IconButtonProps } from '@mui/material'
-import type { ReactNode } from 'react'
-import type { BaseWidgetState } from '../../stores/types'
-
-/**
- * State stored in widget store for zoom functionality
- */
-export interface ZoomConfig {
-  zoom?: boolean
-  /** Start percentage for zoom range (0-100) */
-  zoomStart?: number
-  /** End percentage for zoom range (0-100) */
-  zoomEnd?: number
-}
-
-export type ZoomState<T = unknown> = BaseWidgetState<T & ZoomConfig>
-
-export interface ZoomToggleProps {
-  /** Widget ID to update zoom state in the widget store */
-  id: string
-  /** Initial zoom state - when true, zoom is enabled */
-  defaultZoom?: boolean
-  /** Initial start percentage for zoom range (0-100) */
-  defaultZoomStart?: number
-  /** Initial end percentage for zoom range (0-100) */
-  defaultZoomEnd?: number
-  /** Custom labels for the action */
-  labels?: {
-    /** Tooltip when zoom is disabled (button will enable zoom) */
-    enable?: string
-    /** Tooltip when zoom is enabled (button will disable zoom) */
-    disable?: string
-    /** Tooltip for reset button */
-    reset?: string
-    /** Accessibility label */
-    ariaLabel?: string
-  }
-  /** Props passed to the IconButton component */
-  IconButtonProps?: IconButtonProps
-  /** Custom icon to display for zoom toggle */
-  Icon?: ReactNode
-  /** Custom icon to display for reset button */
-  ResetIcon?: ReactNode
-}

package/src/widgets/bar/config.ts

@@ -1,140 +0,0 @@
-import {
-  getCommonOptions,
-  mergeEchartWidgetConfig,
-  type EchartOptionsProps,
-} from '../echart'
-import type { BarConfig, BarWidgetConfig, BarWidgetData } from './types'
-import {
-  flattenObjectArrayToCSV,
-  buildLegendConfig,
-  buildGridConfig,
-  createTooltipPositioner,
-  createTooltipFormatter,
-  createChartDownloadConfig,
-  applyXAxisFormatter,
-  niceNum,
-  buildSeriesLabelConfig,
-} from '../utils/chart-config'
-
-export const barDownloadConfig = createChartDownloadConfig<BarWidgetData>(
-  flattenObjectArrayToCSV,
-)
-
-/**
- * Generates ECharts configuration for bar chart widgets (vertical and horizontal), including axis, tooltip, legend, and series options styled with the CARTO theme.
- *
- * @param props - Bar chart configuration including data and theme.
- * @returns Widget config with ECharts option object.
- */
-export function barConfig(props: BarConfig): BarWidgetConfig {
-  return {
-    type: 'bar',
-    option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
-    formatter: props.formatter,
-    labelFormatter: props.labelFormatter,
-  }
-}
-
-function getOption({
-  data = [],
-  theme,
-  formatter,
-  labelFormatter,
-}: BarConfig): EchartOptionsProps {
-  const hasLegend = (data?.length ?? 0) > 1
-
-  let niceMin = 0
-  let niceMax = 1
-
-  return {
-    legend: buildLegendConfig({ hasLegend, labelFormatter }),
-    grid: buildGridConfig(hasLegend, theme),
-    xAxis: applyXAxisFormatter(
-      {
-        type: 'category',
-        axisLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-        axisLabel: {
-          padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
-          margin: 0,
-          showMinLabel: undefined,
-          showMaxLabel: undefined,
-          hideOverlap: true,
-        },
-      },
-      labelFormatter,
-    ),
-    yAxis: {
-      type: 'value' as const,
-      min: (extent: { min: number }) => {
-        niceMin = extent.min < 0 ? niceNum(extent.min) : 0
-        return niceMin
-      },
-      max: (extent: { min: number; max: number }) => {
-        niceMax = extent.max <= 0 ? 1 : niceNum(extent.max)
-        return niceMax
-      },
-      axisLabel: {
-        fontSize: theme.typography.overlineDelicate.fontSize,
-        fontFamily: theme.typography.overlineDelicate.fontFamily,
-        margin: parseInt(theme.spacing(1)),
-        show: true,
-        showMaxLabel: true,
-        showMinLabel: true,
-        verticalAlign: 'bottom' as const,
-        inside: true,
-        formatter: (value: number) => {
-          if (value !== niceMax && value !== niceMin) return ''
-          if (value === 0) return ''
-          return formatter ? formatter(value) : String(value)
-        },
-      },
-      axisLine: {
-        show: false,
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: theme.palette.black[4],
-        },
-      },
-    },
-    tooltip: {
-      position: createTooltipPositioner(theme),
-      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 }
-      }),
-    },
-    series: data.map((_: unknown, index: number) => ({
-      datasetIndex: index,
-      type: 'bar',
-      barMaxWidth: 100,
-      emphasis: {
-        focus: 'series',
-      },
-      ...buildSeriesLabelConfig(formatter),
-    })),
-  } as EchartOptionsProps
-}

package/src/widgets/bar/style.ts

@@ -1,33 +0,0 @@
-import type { SxProps, Theme } from '@mui/material'
-import { baseSkeletonStyles } from '../utils/skeleton'
-
-export const styles = {
-  skeleton: {
-    item: {
-      flex: 1,
-      maxWidth: ({ spacing }) => spacing(12),
-
-      '& + &': {
-        marginLeft: ({ spacing }) => spacing(1),
-      },
-    },
-    graph: {
-      ...baseSkeletonStyles.graph,
-      grid: {
-        display: 'flex',
-        justifyContent: 'space-between',
-        flex: '1 1 auto',
-        alignItems: 'flex-end',
-        width: '100%',
-      },
-    },
-    mask: {
-      gray: {
-        backgroundColor: ({ palette }) => palette.grey[100],
-      },
-      white: {
-        backgroundColor: ({ palette }) => palette.common.white,
-      },
-    },
-  },
-} satisfies Record<string, SxProps<Theme>>

package/src/widgets/category/components/category-rows.test.tsx

@@ -1,213 +0,0 @@
-/**
- * Tests for CategoryRowSingle and CategoryRowMulti — both files share the
- * same conditional-render branches (onClick presence, labelFormatter
- * presence, selected default).
- */
-import { describe, it, expect, vi } from 'vitest'
-import { render, fireEvent } from '@testing-library/react'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
-import { CategoryRowSingle } from './category-row-single'
-import { CategoryRowMulti } from './category-row-multi'
-
-const theme = createTheme({})
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>)
-}
-
-const formatter = (v: number) => `${v}`
-
-describe('CategoryRowSingle', () => {
-  it('renders the name and formatted value', () => {
-    const { getByText } = renderWithTheme(
-      <CategoryRowSingle
-        name='Category A'
-        value={42}
-        maxValue={100}
-        color='#f00'
-        formatter={formatter}
-      />,
-    )
-    expect(getByText('Category A')).toBeDefined()
-    expect(getByText('42')).toBeDefined()
-  })
-
-  it('applies labelFormatter when provided', () => {
-    const { getByText } = renderWithTheme(
-      <CategoryRowSingle
-        name='raw'
-        value={10}
-        maxValue={100}
-        color='#f00'
-        formatter={formatter}
-        labelFormatter={(s) => `[${s}]`}
-      />,
-    )
-    expect(getByText('[raw]')).toBeDefined()
-  })
-
-  it('invokes onClick with the row name when clicked', () => {
-    const onClick = vi.fn()
-    const { getByText } = renderWithTheme(
-      <CategoryRowSingle
-        name='X'
-        value={1}
-        maxValue={10}
-        color='#f00'
-        formatter={formatter}
-        onClick={onClick}
-      />,
-    )
-    fireEvent.click(getByText('X'))
-    expect(onClick).toHaveBeenCalledWith({ name: 'X' })
-  })
-
-  it('renders without onClick (handleClick=undefined branch)', () => {
-    expect(() =>
-      renderWithTheme(
-        <CategoryRowSingle
-          name='Y'
-          value={1}
-          maxValue={10}
-          color='#f00'
-          formatter={formatter}
-        />,
-      ),
-    ).not.toThrow()
-  })
-
-  it('respects selected=false', () => {
-    expect(() =>
-      renderWithTheme(
-        <CategoryRowSingle
-          name='Z'
-          value={1}
-          maxValue={10}
-          color='#f00'
-          formatter={formatter}
-          selected={false}
-        />,
-      ),
-    ).not.toThrow()
-  })
-})
-
-describe('CategoryRowMulti', () => {
-  it('renders the name and one bar per value', () => {
-    const { getByText, getAllByText } = renderWithTheme(
-      <CategoryRowMulti
-        name='Multi A'
-        values={[1, 2, 3]}
-        maxValue={10}
-        colors={['#f00', '#0f0', '#00f']}
-        formatter={formatter}
-      />,
-    )
-    expect(getByText('Multi A')).toBeDefined()
-    expect(getAllByText('1')).toHaveLength(1)
-    expect(getAllByText('2')).toHaveLength(1)
-    expect(getAllByText('3')).toHaveLength(1)
-  })
-
-  it('applies labelFormatter when provided', () => {
-    const { getByText } = renderWithTheme(
-      <CategoryRowMulti
-        name='raw'
-        values={[1]}
-        maxValue={10}
-        colors={['#f00']}
-        formatter={formatter}
-        labelFormatter={(s) => `<${s}>`}
-      />,
-    )
-    expect(getByText('<raw>')).toBeDefined()
-  })
-
-  it('invokes onClick with the row name when clicked', () => {
-    const onClick = vi.fn()
-    const { getByText } = renderWithTheme(
-      <CategoryRowMulti
-        name='ClickRow'
-        values={[1, 2]}
-        maxValue={10}
-        colors={['#f00', '#0f0']}
-        formatter={formatter}
-        onClick={onClick}
-      />,
-    )
-    fireEvent.click(getByText('ClickRow'))
-    expect(onClick).toHaveBeenCalledWith({ name: 'ClickRow' })
-  })
-
-  it('renders without onClick', () => {
-    expect(() =>
-      renderWithTheme(
-        <CategoryRowMulti
-          name='N'
-          values={[1, 2]}
-          maxValue={10}
-          colors={['#f00', '#0f0']}
-          formatter={formatter}
-        />,
-      ),
-    ).not.toThrow()
-  })
-
-  it('cycles colors when values.length exceeds colors.length (modulo branch)', () => {
-    // 4 values, 2 colors → uses modulo to cycle (colors[index % colors.length])
-    expect(() =>
-      renderWithTheme(
-        <CategoryRowMulti
-          name='Cycle'
-          values={[1, 2, 3, 4]}
-          maxValue={10}
-          colors={['#f00', '#0f0']}
-          formatter={formatter}
-        />,
-      ),
-    ).not.toThrow()
-  })
-
-  it('handles colors[i % colors.length] being undefined (?? "" fallback)', () => {
-    // Empty colors array → colors[0 % 0] === undefined → falls back to ''
-    expect(() =>
-      renderWithTheme(
-        <CategoryRowMulti
-          name='Empty'
-          values={[1, 2]}
-          maxValue={10}
-          colors={[]}
-          formatter={formatter}
-        />,
-      ),
-    ).not.toThrow()
-  })
-
-  it('respects selected=false', () => {
-    expect(() =>
-      renderWithTheme(
-        <CategoryRowMulti
-          name='Sel'
-          values={[1]}
-          maxValue={10}
-          colors={['#f00']}
-          formatter={formatter}
-          selected={false}
-        />,
-      ),
-    ).not.toThrow()
-  })
-
-  it('renders an empty bar container when values is empty', () => {
-    expect(() =>
-      renderWithTheme(
-        <CategoryRowMulti
-          name='Z'
-          values={[]}
-          maxValue={10}
-          colors={['#f00']}
-          formatter={formatter}
-        />,
-      ),
-    ).not.toThrow()
-  })
-})

package/src/widgets/category/config.ts

@@ -1,86 +0,0 @@
-import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
-import type { ConfigProps } from '../loader/types'
-import type {
-  CategoryWidgetConfig,
-  CategoryWidgetData,
-  CategorySeriesConfig,
-} from './types'
-
-interface CategoryDownloadConfigProps extends ConfigProps {
-  series?: CategorySeriesConfig[]
-}
-
-/**
- * Creates download configuration for category widgets, supporting PNG (screenshot) and CSV (data) exports. CSV output groups values by category across multiple series.
- *
- * @param props - Configuration with `refUI` reference and optional `series` for CSV column headers.
- * @returns Array of download items for use with the Download action.
- */
-export function categoryDownloadConfig({
-  refUI,
-  series,
-}: CategoryDownloadConfigProps): DownloadItem<CategoryWidgetData>[] {
-  return [
-    {
-      ...downloadToPNG,
-      modifier: () => downloadToPNG.modifier(refUI),
-    },
-    {
-      ...downloadToCSV,
-      modifier: async (data) => {
-        if (!data?.length || data[0]?.length === 0) {
-          return downloadToCSV.modifier([])
-        }
-
-        // data is CategoryDataItem[][] where data[seriesIndex] contains items for that series
-        const seriesCount = data.length
-        const grouped = new Map<string, number[]>()
-        const nameOrder: string[] = []
-
-        // Iterate over each series (outer array)
-        for (let seriesIndex = 0; seriesIndex < seriesCount; seriesIndex++) {
-          const seriesData = data[seriesIndex]!
-          for (const item of seriesData) {
-            let values = grouped.get(item.name)
-            if (!values) {
-              values = new Array<number>(seriesCount).fill(0)
-              grouped.set(item.name, values)
-              nameOrder.push(item.name)
-            }
-            values[seriesIndex] = item.value
-          }
-        }
-
-        // Build rows
-        const rows = nameOrder.map((name) => [name, ...grouped.get(name)!])
-
-        const isMulti = seriesCount > 1
-        const headers = isMulti
-          ? [
-              'Category',
-              ...(series?.map((s: CategorySeriesConfig) => s.name) ??
-                Array.from(
-                  { length: seriesCount },
-                  (_, i) => `Series ${i + 1}`,
-                )),
-            ]
-          : ['Category', 'Value']
-
-        return downloadToCSV.modifier([headers, ...rows])
-      },
-    },
-  ]
-}
-
-/**
- * Returns the default configuration for category list widgets, including empty series and a default `maxItems` of 10.
- *
- * @returns Default category widget config.
- */
-export function categoryConfig(): CategoryWidgetConfig {
-  return {
-    series: [],
-    maxItems: 10,
-    max: undefined,
-  }
-}

package/src/widgets/echart/const.ts

@@ -1 +0,0 @@
-export const DEFAULT_STACK_GROUP = 'stacked'

package/src/widgets/echart/options.ts

@@ -1,57 +0,0 @@
-import type { EchartOptionsProps, EchartWidgetOptionProps } from './types'
-
-/**
- * Returns the shared base ECharts options used across all EChart-based widgets (bar, pie, histogram, etc.).
- *
- * @remarks
- * Configures grid spacing, tooltip styling, legend, axis pointer, and the default color palette
- * derived from the MUI theme.
- */
-export function getCommonOptions({
-  theme,
-}: EchartWidgetOptionProps<unknown>): EchartOptionsProps {
-  return {
-    grid: {
-      left: parseInt(theme.spacing(1)),
-      top: parseInt(theme.spacing(3)),
-      right: parseInt(theme.spacing(1)),
-      bottom: parseInt(theme.spacing(4)),
-      containLabel: true,
-    },
-    toolbox: {
-      show: false,
-    },
-    tooltip: {
-      axisPointer: {
-        type: 'line',
-      },
-      backgroundColor: theme.palette.grey[900],
-      borderWidth: 0,
-      padding: [parseInt(theme.spacing(1)), parseInt(theme.spacing(1))],
-      textStyle: {
-        color: theme.palette.common.white,
-        fontSize: 11,
-        fontFamily: theme.typography.caption.fontFamily,
-      },
-      trigger: 'axis',
-    },
-    legend: {
-      type: 'scroll',
-      bottom: 0,
-    },
-    axisPointer: {
-      lineStyle: {
-        color: theme.palette.grey[400],
-      },
-    },
-    xAxis: {},
-    yAxis: {},
-    color: [
-      theme.palette.secondary.main,
-      ...Object.values(
-        (theme.palette as { qualitative?: { bold?: Record<string, string> } })
-          .qualitative?.bold ?? {},
-      ),
-    ],
-  }
-}

package/src/widgets/echart/types.ts

@@ -1,45 +0,0 @@
-import type { EChartsOption } from 'echarts'
-import type * as echarts from 'echarts'
-import type { BaseWidgetState } from '../stores/types'
-import type { Ref, RefObject } from 'react'
-import { theme as CartoTheme } from '@carto/meridian-ds/theme'
-
-export type EchartOptionsProps = EChartsOption
-
-export interface EchartUIProps {
-  id: string
-  option: EchartOptionsProps
-  className?: string
-  init?: echarts.EChartsInitOpts
-  style?: React.CSSProperties
-  ref?: Ref<echarts.ECharts>
-  onEvents?: Record<string, Parameters<echarts.ECharts['on']>[2]>
-}
-
-export interface EchartProps {
-  id: EchartUIProps['id']
-}
-
-export type EchartWidgetData = Record<string, string | number>[][]
-
-export type EchartWidgetState = BaseWidgetState<{
-  option: EchartUIProps['option']
-  onEvents?: EchartUIProps['onEvents']
-  init?: EchartUIProps['init']
-  instance?: RefObject<echarts.ECharts | null>
-}>
-
-export interface EchartWidgetOptionProps<D> {
-  data?: D
-  theme: typeof CartoTheme
-  formatter?: (value: number) => string
-  labelFormatter?: (value: string | number) => string | number
-}
-
-export interface EchartWidgetProps {
-  type: string
-  option: EchartUIProps['option']
-  onEvents?: EchartUIProps['onEvents']
-  formatter?: (value: number) => string
-  labelFormatter?: (value: string | number) => string | number
-}