@carto/ps-react-ui 4.3.3 → 4.3.5

package/src/widgets/selection-summary/selection-summary.tsx

@@ -0,0 +1,46 @@
+/* Selection Summary Component */
+
+import { Box, Button, Typography } from '@mui/material'
+import type {
+  WidgetSelectionSummaryProps,
+  SelectionSummaryLabels,
+} from './types'
+import { styles } from './style'
+
+const DEFAULT_SELECTION_LABELS: SelectionSummaryLabels = {
+  allSelected: 'All selected',
+  selections: (count: number) => `${count} selected`,
+  clear: 'Clear',
+}
+
+export function WidgetSelectionSummary({
+  selections,
+  onClear,
+  labels,
+}: WidgetSelectionSummaryProps) {
+  const allSelectedLabel =
+    labels?.allSelected ?? DEFAULT_SELECTION_LABELS.allSelected
+
+  const selectionsLabel =
+    labels?.selections ?? DEFAULT_SELECTION_LABELS.selections
+
+  const clearLabel = labels?.clear ?? DEFAULT_SELECTION_LABELS.clear
+
+  const displayLabel =
+    selections > 0 ? selectionsLabel(selections) : allSelectedLabel
+
+  const showClearButton = selections > 0 && onClear
+
+  return (
+    <Box sx={styles.root}>
+      <Typography variant='caption' color='textSecondary' fontWeight={500}>
+        {displayLabel}
+      </Typography>
+      {showClearButton && (
+        <Button size='small' variant='text' onClick={onClear}>
+          {clearLabel}
+        </Button>
+      )}
+    </Box>
+  )
+}

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

@@ -0,0 +1,10 @@
+import type { SxProps, Theme } from '@mui/material'
+
+export const styles = {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    flex: '0 0 auto',
+    gap: ({ spacing }) => spacing(0.5),
+  },
+} satisfies Record<string, SxProps<Theme>>

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

@@ -0,0 +1,14 @@
+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

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

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

@@ -0,0 +1,139 @@
+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

@@ -0,0 +1,28 @@
+import type { SkeletonLoaderProps } from './types'
+import { useWidgetStore } from '../stores/widget-store'
+import { Suspense } from 'react'
+import { useShallow } from 'zustand/shallow'
+
+export function SkeletonLoader({
+  id,
+  children,
+  Skeleton,
+}: SkeletonLoaderProps) {
+  const isLoading = useWidgetStore(
+    useShallow((state) => state.widgets[id]?.isLoading),
+  )
+
+  if (isLoading) {
+    if (!Skeleton) {
+      return null
+    }
+
+    return (
+      <Suspense fallback={null}>
+        <Skeleton />
+      </Suspense>
+    )
+  }
+
+  return children
+}

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

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

package/src/widgets/spread/components/max-value.tsx

@@ -0,0 +1,29 @@
+import { type SpreadWidgetState, type ValueProps } from '../types'
+import { useWidgetStore } from '../../stores/widget-store'
+import { Item } from '../../formula/components/item'
+import { useShallow } from 'zustand/shallow'
+
+const defaultFormatter = (value: number) => value.toString()
+
+export function MaxValue({ id, index = 0, ...props }: ValueProps) {
+  const {
+    max,
+    color,
+    formatter = defaultFormatter,
+  } = useWidgetStore(
+    useShallow((state) => {
+      const widget = state.getWidget<SpreadWidgetState>(id)
+      return {
+        max: widget?.data[index]?.max,
+        color: widget?.data[index]?.color,
+        formatter: widget?.formatter,
+      }
+    }),
+  )
+
+  return (
+    <Item TypographyProps={{ color }} {...props}>
+      {formatter(max ?? 0)}
+    </Item>
+  )
+}

package/src/widgets/spread/components/min-value.tsx

@@ -0,0 +1,29 @@
+import { type SpreadWidgetState, type ValueProps } from '../types'
+import { useWidgetStore } from '../../stores/widget-store'
+import { Item } from '../../formula/components/item'
+import { useShallow } from 'zustand/shallow'
+
+const defaultFormatter = (value: number) => value.toString()
+
+export function MinValue({ id, index = 0, ...props }: ValueProps) {
+  const {
+    min,
+    color,
+    formatter = defaultFormatter,
+  } = useWidgetStore(
+    useShallow((state) => {
+      const widget = state.getWidget<SpreadWidgetState>(id)
+      return {
+        min: widget?.data[index]?.min,
+        color: widget?.data[index]?.color,
+        formatter: widget?.formatter,
+      }
+    }),
+  )
+
+  return (
+    <Item TypographyProps={{ color }} {...props}>
+      {formatter(min ?? 0)}
+    </Item>
+  )
+}

package/src/widgets/spread/components/separator.tsx

@@ -0,0 +1,6 @@
+import { Item } from '../../formula/components/item'
+import type { ItemProps } from '../../formula/types'
+
+export function Separator(props: Omit<ItemProps, 'children'>) {
+  return <Item {...props}>-</Item>
+}

package/src/widgets/spread/config.ts

@@ -0,0 +1,34 @@
+import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
+import type { ConfigProps } from '../loader/types'
+import type { SpreadWidgetConfig, SpreadWidgetData } from './types'
+import type { SeriesConfig } from '../formula/types'
+
+export interface SpreadConfigProps {
+  formatter?: (value: number) => string
+  series?: SeriesConfig[]
+}
+
+export function spreadDownloadConfig({
+  refUI,
+}: ConfigProps): DownloadItem<SpreadWidgetData>[] {
+  return [
+    {
+      ...downloadToPNG,
+      modifier: () => downloadToPNG.modifier(refUI),
+    },
+    {
+      ...downloadToCSV,
+      modifier: async (data) => {
+        const rows = data.map((item) => [item.min, item.max])
+
+        return downloadToCSV.modifier([['Min', 'Max'], ...rows])
+      },
+    },
+  ]
+}
+
+export function spreadConfig(): SpreadWidgetConfig {
+  return {
+    series: [],
+  }
+}

package/src/widgets/spread/index.ts

@@ -0,0 +1,23 @@
+export { SpreadUI } from './spread-ui'
+export { SpreadSkeleton } from './skeleton'
+export { spreadConfig, spreadDownloadConfig } from './config'
+export { MinValue } from './components/min-value'
+export { MaxValue } from './components/max-value'
+export { Separator } from './components/separator'
+
+// Re-export formula components for convenience
+export { Item, Row, Prefix, Suffix, Series } from '../formula'
+
+export type {
+  RowProps,
+  ValueProps,
+  SpreadWidgetState,
+  SpreadWidgetConfig,
+  SpreadWidgetData,
+  SpreadDownloadConfig,
+  ItemProps,
+  SpreadDataItem,
+  SpreadUIProps,
+} from './types'
+
+export type { SeriesConfig } from '../formula/types'

package/src/widgets/spread/skeleton.tsx

@@ -0,0 +1,10 @@
+import { Box, Skeleton } from '@mui/material'
+import { styles } from './style'
+
+export function SpreadSkeleton() {
+  return (
+    <Box sx={styles.row} aria-label='Spread skeleton'>
+      <Skeleton width={120} height={32} />
+    </Box>
+  )
+}