@carto/ps-react-ui 5.1.0 → 6.0.0

package/src/widgets/no-data/no-data.test.tsx

@@ -1,497 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, test } from 'vitest'
-import { WidgetNoData } from './no-data'
-import { useWidgetStore } from '../stores/widget-store'
-
-describe('WidgetNoData', () => {
-  const widgetId = 'test-no-data-widget'
-
-  beforeEach(() => {
-    useWidgetStore.getState().clearWidgets()
-  })
-
-  describe('when sourceData is empty', () => {
-    test('renders NoData UI with empty array', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: [],
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('No data available')).toBeTruthy()
-      expect(
-        screen.getByText(/There are no results for the combination of filters/),
-      ).toBeTruthy()
-      expect(screen.queryByText('Widget Content')).toBeNull()
-    })
-
-    test('renders NoData UI with null sourceData', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: null,
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('No data available')).toBeTruthy()
-      expect(screen.queryByText('Widget Content')).toBeNull()
-    })
-
-    test('renders NoData UI with undefined sourceData', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: undefined,
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('No data available')).toBeTruthy()
-      expect(screen.queryByText('Widget Content')).toBeNull()
-    })
-
-    test('renders NoData UI with array of empty arrays (CategoryWidget pattern)', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: [[], []],
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('No data available')).toBeTruthy()
-      expect(screen.queryByText('Widget Content')).toBeNull()
-    })
-
-    test('renders NoData UI with empty object', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: {},
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('No data available')).toBeTruthy()
-      expect(screen.queryByText('Widget Content')).toBeNull()
-    })
-  })
-
-  describe('when sourceData exists', () => {
-    test('renders children with array sourceData', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: [{ value: 1 }],
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-
-    test('renders children with object sourceData', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: { content: 'Hello' },
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-
-    test('renders children with nested array sourceData', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: [[{ name: 'A', value: 1 }]],
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-
-    test('renders children with primitive sourceData (number)', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: 0,
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-
-    test('renders children with primitive sourceData (string)', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: 'test',
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-
-    test('renders children with primitive sourceData (boolean)', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: false,
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-  })
-
-  describe('when loading or fetching', () => {
-    test('renders children when isLoading=true even if sourceData is empty', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: true,
-        isFetching: false,
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-
-    test('renders children when isFetching=true even if sourceData is empty', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: true,
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-
-    test('renders children when both isLoading and isFetching are true', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: true,
-        isFetching: true,
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-  })
-
-  describe('customization', () => {
-    test('renders custom title', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: [],
-      })
-
-      render(
-        <WidgetNoData id={widgetId} title='No results found'>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('No results found')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-
-    test('renders custom description', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: [],
-      })
-
-      render(
-        <WidgetNoData id={widgetId} description='Try adjusting your filters'>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Try adjusting your filters')).toBeTruthy()
-      expect(
-        screen.queryByText(/There are no results for the combination/),
-      ).toBeNull()
-    })
-
-    test('uses custom isEmpty function', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: { customField: 'value' },
-      })
-
-      // Custom isEmpty that treats this sourceData as empty
-      const customIsEmpty = (data: unknown) => {
-        const d = data as { customField: string }
-        return d?.customField === 'value'
-      }
-
-      render(
-        <WidgetNoData id={widgetId} isEmpty={customIsEmpty}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('No data available')).toBeTruthy()
-      expect(screen.queryByText('Widget Content')).toBeNull()
-    })
-
-    test('custom isEmpty returning false renders children', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: [],
-      })
-
-      // Custom isEmpty that treats empty array as having data
-      const customIsEmpty = () => false
-
-      render(
-        <WidgetNoData id={widgetId} isEmpty={customIsEmpty}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-  })
-
-  describe('when widget does not exist in store', () => {
-    test('treats as empty and shows NoData UI', () => {
-      // Widget not initialized in store
-      render(
-        <WidgetNoData id='non-existent-widget'>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('No data available')).toBeTruthy()
-      expect(screen.queryByText('Widget Content')).toBeNull()
-    })
-  })
-
-  describe('sourceData vs pipeline-transformed data', () => {
-    test('renders children when sourceData has data but pipeline data is empty', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: [{ value: 1 }, { value: 2 }],
-        data: [], // pipeline filtered everything out
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      // Should show children because sourceData is not empty
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-
-    test('renders NoData when both sourceData and data are empty', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: [],
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('No data available')).toBeTruthy()
-      expect(screen.queryByText('Widget Content')).toBeNull()
-    })
-
-    test('renders NoData when sourceData is null (API returned nothing)', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: null,
-      })
-
-      render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('No data available')).toBeTruthy()
-      expect(screen.queryByText('Widget Content')).toBeNull()
-    })
-  })
-
-  describe('reactivity to store changes', () => {
-    test('updates from NoData to content when sourceData arrives', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-      })
-
-      const { rerender } = render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('No data available')).toBeTruthy()
-      expect(screen.queryByText('Widget Content')).toBeNull()
-
-      // Update with sourceData
-      useWidgetStore.getState().setWidget(widgetId, {
-        sourceData: [{ value: 1 }],
-      })
-
-      // Force rerender to pick up store changes
-      rerender(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-
-    test('updates from content to NoData when sourceData becomes empty', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-        sourceData: [{ value: 1 }],
-      })
-
-      const { rerender } = render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-
-      // Clear sourceData
-      useWidgetStore.getState().setWidget(widgetId, { sourceData: [] })
-
-      // Force rerender to pick up store changes
-      rerender(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('No data available')).toBeTruthy()
-      expect(screen.queryByText('Widget Content')).toBeNull()
-    })
-
-    test('updates from NoData to content when loading starts', () => {
-      useWidgetStore.getState().setWidget(widgetId, {
-        isLoading: false,
-        isFetching: false,
-      })
-
-      const { rerender } = render(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('No data available')).toBeTruthy()
-
-      // Start loading
-      useWidgetStore.getState().setWidget(widgetId, { isLoading: true })
-
-      // Force rerender to pick up store changes
-      rerender(
-        <WidgetNoData id={widgetId}>
-          <div>Widget Content</div>
-        </WidgetNoData>,
-      )
-
-      expect(screen.getByText('Widget Content')).toBeTruthy()
-      expect(screen.queryByText('No data available')).toBeNull()
-    })
-  })
-})

package/src/widgets/no-data/no-data.tsx

@@ -1,112 +0,0 @@
-import { Box, Typography } from '@mui/material'
-import { useWidgetSelector } from '../stores/use-widget-selector'
-import type { WidgetNoDataProps } from './types'
-import { styles } from './style'
-
-/**
- * NoData wrapper component that displays empty state UI when widget has no data
- *
- * Integrates with widget store to check loading/fetching state and source data availability.
- * Uses `sourceData` (pre-pipeline data) instead of `data` (post-pipeline) to distinguish
- * "API returned nothing" from "pipeline tools filtered everything out".
- *
- * @example Basic usage
- * ```tsx
- * <NoData id="my-widget">
- *   <WidgetContent id="my-widget" />
- * </NoData>
- * ```
- *
- * @example With SkeletonLoader
- * ```tsx
- * <SkeletonLoader id="my-widget" Skeleton={MySkeleton}>
- *   <NoData id="my-widget">
- *     <WidgetContent id="my-widget" />
- *   </NoData>
- * </SkeletonLoader>
- * ```
- *
- * @example With custom messages
- * ```tsx
- * <NoData
- *   id="my-widget"
- *   title="No results found"
- *   description="Try adjusting your filters"
- * >
- *   <WidgetContent id="my-widget" />
- * </NoData>
- * ```
- */
-export function WidgetNoData({
-  id,
-  children,
-  title = 'No data available',
-  description = 'There are no results for the combination of filters applied to your data. Try tweaking your filters, or zoom and pan the map to adjust filters',
-  isEmpty = defaultIsEmpty,
-}: WidgetNoDataProps) {
-  // Single consolidated subscription instead of 3 separate ones.
-  // Reads sourceData (pre-pipeline) to check emptiness, not data (post-pipeline).
-  const { isLoading, isFetching, sourceData } = useWidgetSelector(id, (w) => ({
-    isLoading: w?.isLoading,
-    isFetching: w?.isFetching,
-    sourceData: w?.sourceData,
-  }))
-
-  // If loading or fetching, show children
-  // SkeletonLoader handles loading state, this allows proper composition
-  if (isLoading || isFetching) {
-    return children
-  }
-
-  // Check if data is empty
-  if (isEmpty(sourceData)) {
-    return (
-      <Box sx={styles.root}>
-        <Typography variant='body2' color='text.primary'>
-          {title}
-        </Typography>
-        <Typography variant='caption' color='text.secondary'>
-          {description}
-        </Typography>
-      </Box>
-    )
-  }
-
-  // Data exists, render children
-  return children
-}
-
-/**
- * Default function to determine if data is empty
- * Handles various data structures commonly used in widgets
- */
-function defaultIsEmpty(data: unknown): boolean {
-  // Null or undefined
-  if (data == null) {
-    return true
-  }
-
-  // Arrays (most common case)
-  if (Array.isArray(data)) {
-    // Empty array
-    if (data.length === 0) {
-      return true
-    }
-
-    // Array of arrays (CategoryWidget pattern: [[],[]])
-    // Check if all inner arrays are empty
-    if (data.every((item) => Array.isArray(item) && item.length === 0)) {
-      return true
-    }
-
-    return false
-  }
-
-  // Objects
-  if (typeof data === 'object') {
-    return Object.keys(data).length === 0
-  }
-
-  // Primitives (numbers, strings, booleans) are considered valid data
-  return false
-}

package/src/widgets/no-data/style.ts

@@ -1,18 +0,0 @@
-import type { SxProps, Theme } from '@mui/material'
-
-/**
- * Styles for NoData component matching Figma design specifications
- * Design reference: node 5781-11028
- */
-export const styles: Record<string, SxProps<Theme>> = {
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 1, // 8px
-    paddingTop: 1, // 8px
-    paddingBottom: 2, // 16px
-    paddingX: 2, // 16px
-    width: '100%',
-    minHeight: '100%',
-  },
-}

package/src/widgets/no-data/types.ts

@@ -1,76 +0,0 @@
-import type { ReactNode } from 'react'
-import type { WidgetState } from '../stores/types'
-
-/**
- * Props for the WidgetNoData wrapper component
- *
- * @example Basic usage
- * ```tsx
- * <WidgetNoData id="my-widget">
- *   <WidgetContent id="my-widget" />
- * </WidgetNoData>
- * ```
- *
- * @example With custom messages
- * ```tsx
- * <WidgetNoData
- *   id="my-widget"
- *   title="No results found"
- *   description="Try adjusting your filters"
- * >
- *   <WidgetContent id="my-widget" />
- * </WidgetNoData>
- * ```
- *
- * @example With custom isEmpty logic
- * ```tsx
- * <WidgetNoData
- *   id="my-widget"
- *   isEmpty={(data) => {
- *     const d = data as CustomData
- *     return !d?.items?.length
- *   }}
- * >
- *   <WidgetContent id="my-widget" />
- * </WidgetNoData>
- * ```
- */
-export interface WidgetNoDataProps {
-  /**
-   * Widget ID to fetch state from store
-   */
-  id: WidgetState['id']
-
-  /**
-   * Children to render when data is available
-   */
-  children: ReactNode
-
-  /**
-   * Optional custom title for empty state
-   * @default "No data available"
-   */
-  title?: string
-
-  /**
-   * Optional custom description for empty state
-   * @default "There are no results for the combination of filters applied to your data. Try tweaking your filters, or zoom and pan the map to adjust filters"
-   */
-  description?: string
-
-  /**
-   * Optional custom function to determine if source data is empty.
-   * Receives `sourceData` (pre-pipeline data from the API), not `data`
-   * (post-pipeline). This allows distinguishing "API returned nothing"
-   * from "pipeline tools filtered everything out".
-   *
-   * If not provided, uses default isEmpty logic that handles:
-   * - null/undefined → empty
-   * - [] (empty array) → empty
-   * - [[]] (nested empty arrays) → empty
-   * - {} (empty object) → empty
-   * - Primitives → not empty
-   * - Arrays/objects with content → not empty
-   */
-  isEmpty?: (data: unknown) => boolean
-}

package/src/widgets/note/index.ts

@@ -1,2 +0,0 @@
-export { WidgetNote } from './note'
-export type { WidgetNoteProps } from './types'