@carto/ps-react-ui 6.3.0 → 6.5.0

package/src/theme/tailwind-compile.test.ts

@@ -0,0 +1,71 @@
+import { readFile } from 'node:fs/promises'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { compile } from 'tailwindcss'
+import { beforeAll, describe, expect, it } from 'vitest'
+
+const require = createRequire(import.meta.url)
+const tailwindDir = path.dirname(require.resolve('tailwindcss/package.json'))
+const themeDir = path.dirname(fileURLToPath(import.meta.url))
+
+// Same order the docs tell consumers to use.
+const ENTRY = `@layer theme, base, mui, components, utilities;
+@import 'tailwindcss';
+@import './tailwind.css';`
+
+let build: (candidates: string[]) => string
+
+beforeAll(async () => {
+  const compiler = await compile(ENTRY, {
+    base: themeDir,
+    loadStylesheet: async (id, base) => {
+      const file =
+        id === 'tailwindcss'
+          ? path.join(tailwindDir, 'index.css')
+          : path.resolve(base, id)
+      return {
+        path: file,
+        base: path.dirname(file),
+        content: await readFile(file, 'utf8'),
+      }
+    },
+  })
+  build = (candidates) => compiler.build(candidates)
+})
+
+describe('tailwind.css under Tailwind v4', () => {
+  it('compiles colour, shadow and radius utilities to MUI variables', () => {
+    const out = build([
+      'bg-primary',
+      'text-brand-navy-blue',
+      'shadow-2',
+      'rounded-theme',
+    ])
+    expect(out).toContain('background-color: var(--mui-palette-primary-main)')
+    expect(out).toContain('color: var(--mui-palette-brand-navyBlue)')
+    expect(out).toContain('--tw-shadow: var(--mui-shadows-2)')
+    expect(out).toContain('border-radius: var(--mui-shape-borderRadius)')
+  })
+
+  it('uses CARTO breakpoints over Tailwind defaults and drops 2xl', () => {
+    const out = build(['sm:bg-primary', 'md:bg-primary', '2xl:bg-primary'])
+    expect(out).toContain('@media (width >= 600px)')
+    expect(out).toContain('@media (width >= 960px)')
+    expect(out).not.toContain('40rem')
+    expect(out).not.toContain('2xl\\:bg-primary')
+  })
+
+  it('compiles responsive typography utilities', () => {
+    const out = build(['typography-h1'])
+    expect(out).toContain('font-size: 3.5rem')
+    expect(out).toContain('font-size: 6rem')
+    expect(out).toContain('letter-spacing: -1.5px')
+  })
+
+  it('derives the spacing unit from the theme', () => {
+    const out = build(['p-4'])
+    expect(out).toContain('padding: calc(var(--spacing) * 4)')
+    expect(out).toContain('--spacing: calc(var(--mui-spacing) / 2)')
+  })
+})

package/src/theme/tailwind.css

@@ -0,0 +1,373 @@
+/*
+ * Generated by generateTailwindCss() from @carto/ps-react-ui/theme.
+ * Do not edit by hand: regenerate it whenever the theme changes.
+ *
+ * Import after `tailwindcss`. Declare the cascade layer order yourself first:
+ * theme, base, mui, components, utilities (in that order).
+ */
+
+@theme inline {
+  --color-primary: var(--mui-palette-primary-main);
+  --color-primary-light: var(--mui-palette-primary-light);
+  --color-primary-dark: var(--mui-palette-primary-dark);
+  --color-primary-contrast: var(--mui-palette-primary-contrastText);
+  --color-primary-related-light: var(--mui-palette-primary-relatedLight);
+  --color-primary-related-dark: var(--mui-palette-primary-relatedDark);
+  --color-primary-background: var(--mui-palette-primary-background);
+  --color-secondary: var(--mui-palette-secondary-main);
+  --color-secondary-light: var(--mui-palette-secondary-light);
+  --color-secondary-dark: var(--mui-palette-secondary-dark);
+  --color-secondary-contrast: var(--mui-palette-secondary-contrastText);
+  --color-secondary-related-light: var(--mui-palette-secondary-relatedLight);
+  --color-secondary-related-dark: var(--mui-palette-secondary-relatedDark);
+  --color-secondary-background: var(--mui-palette-secondary-background);
+  --color-tertiary: var(--mui-palette-tertiary-main);
+  --color-tertiary-light: var(--mui-palette-tertiary-light);
+  --color-tertiary-dark: var(--mui-palette-tertiary-dark);
+  --color-tertiary-contrast: var(--mui-palette-tertiary-contrastText);
+  --color-tertiary-related-light: var(--mui-palette-tertiary-relatedLight);
+  --color-tertiary-related-dark: var(--mui-palette-tertiary-relatedDark);
+  --color-tertiary-background: var(--mui-palette-tertiary-background);
+  --color-error: var(--mui-palette-error-main);
+  --color-error-light: var(--mui-palette-error-light);
+  --color-error-dark: var(--mui-palette-error-dark);
+  --color-error-contrast: var(--mui-palette-error-contrastText);
+  --color-error-related-light: var(--mui-palette-error-relatedLight);
+  --color-error-related-dark: var(--mui-palette-error-relatedDark);
+  --color-error-background: var(--mui-palette-error-background);
+  --color-warning: var(--mui-palette-warning-main);
+  --color-warning-light: var(--mui-palette-warning-light);
+  --color-warning-dark: var(--mui-palette-warning-dark);
+  --color-warning-contrast: var(--mui-palette-warning-contrastText);
+  --color-warning-related-light: var(--mui-palette-warning-relatedLight);
+  --color-warning-related-dark: var(--mui-palette-warning-relatedDark);
+  --color-warning-background: var(--mui-palette-warning-background);
+  --color-info: var(--mui-palette-info-main);
+  --color-info-light: var(--mui-palette-info-light);
+  --color-info-dark: var(--mui-palette-info-dark);
+  --color-info-contrast: var(--mui-palette-info-contrastText);
+  --color-info-related-light: var(--mui-palette-info-relatedLight);
+  --color-info-related-dark: var(--mui-palette-info-relatedDark);
+  --color-info-background: var(--mui-palette-info-background);
+  --color-success: var(--mui-palette-success-main);
+  --color-success-light: var(--mui-palette-success-light);
+  --color-success-dark: var(--mui-palette-success-dark);
+  --color-success-contrast: var(--mui-palette-success-contrastText);
+  --color-success-related-light: var(--mui-palette-success-relatedLight);
+  --color-success-related-dark: var(--mui-palette-success-relatedDark);
+  --color-success-background: var(--mui-palette-success-background);
+  --color-neutral: var(--mui-palette-neutral-main);
+  --color-neutral-light: var(--mui-palette-neutral-light);
+  --color-neutral-dark: var(--mui-palette-neutral-dark);
+  --color-neutral-contrast: var(--mui-palette-neutral-contrastText);
+  --color-neutral-related-light: var(--mui-palette-neutral-relatedLight);
+  --color-neutral-related-dark: var(--mui-palette-neutral-relatedDark);
+  --color-neutral-background: var(--mui-palette-neutral-background);
+  --color-default: var(--mui-palette-default-main);
+  --color-default-light: var(--mui-palette-default-light);
+  --color-default-dark: var(--mui-palette-default-dark);
+  --color-default-contrast: var(--mui-palette-default-contrastText);
+  --color-default-related-light: var(--mui-palette-default-relatedLight);
+  --color-default-related-dark: var(--mui-palette-default-relatedDark);
+  --color-default-background: var(--mui-palette-default-background);
+  --color-text-primary: var(--mui-palette-text-primary);
+  --color-text-secondary: var(--mui-palette-text-secondary);
+  --color-text-disabled: var(--mui-palette-text-disabled);
+  --color-background: var(--mui-palette-background-default);
+  --color-paper: var(--mui-palette-background-paper);
+  --color-divider: var(--mui-palette-divider);
+  --color-action-active: var(--mui-palette-action-active);
+  --color-action-hover: var(--mui-palette-action-hover);
+  --color-action-disabled-background: var(--mui-palette-action-disabledBackground);
+  --color-action-disabled: var(--mui-palette-action-disabled);
+  --color-action-selected: var(--mui-palette-action-selected);
+  --color-action-focus: var(--mui-palette-action-focus);
+  --color-common-white: var(--mui-palette-common-white);
+  --color-common-black: var(--mui-palette-common-black);
+  --color-grey-50: var(--mui-palette-grey-50);
+  --color-grey-100: var(--mui-palette-grey-100);
+  --color-grey-200: var(--mui-palette-grey-200);
+  --color-grey-300: var(--mui-palette-grey-300);
+  --color-grey-400: var(--mui-palette-grey-400);
+  --color-grey-500: var(--mui-palette-grey-500);
+  --color-grey-600: var(--mui-palette-grey-600);
+  --color-grey-700: var(--mui-palette-grey-700);
+  --color-grey-800: var(--mui-palette-grey-800);
+  --color-grey-900: var(--mui-palette-grey-900);
+  --color-grey-A100: var(--mui-palette-grey-A100);
+  --color-grey-A200: var(--mui-palette-grey-A200);
+  --color-grey-A400: var(--mui-palette-grey-A400);
+  --color-grey-A700: var(--mui-palette-grey-A700);
+  --color-brand-navy-blue: var(--mui-palette-brand-navyBlue);
+  --color-brand-location-red: var(--mui-palette-brand-locationRed);
+  --color-brand-prediction-blue: var(--mui-palette-brand-predictionBlue);
+  --color-brand-soft-blue: var(--mui-palette-brand-softBlue);
+  --color-brand-app-bar-main: var(--mui-palette-brand-appBarMain);
+  --color-brand-app-bar-contrast-text: var(--mui-palette-brand-appBarContrastText);
+  --color-white-4: var(--mui-palette-white-4);
+  --color-white-8: var(--mui-palette-white-8);
+  --color-white-12: var(--mui-palette-white-12);
+  --color-white-25: var(--mui-palette-white-25);
+  --color-white-40: var(--mui-palette-white-40);
+  --color-white-60: var(--mui-palette-white-60);
+  --color-white-90: var(--mui-palette-white-90);
+  --color-black-4: var(--mui-palette-black-4);
+  --color-black-8: var(--mui-palette-black-8);
+  --color-black-12: var(--mui-palette-black-12);
+  --color-black-25: var(--mui-palette-black-25);
+  --color-black-40: var(--mui-palette-black-40);
+  --color-black-60: var(--mui-palette-black-60);
+  --color-black-90: var(--mui-palette-black-90);
+  --color-qualitative-0: var(--mui-palette-qualitative-bold-0);
+  --color-qualitative-1: var(--mui-palette-qualitative-bold-1);
+  --color-qualitative-2: var(--mui-palette-qualitative-bold-2);
+  --color-qualitative-3: var(--mui-palette-qualitative-bold-3);
+  --color-qualitative-4: var(--mui-palette-qualitative-bold-4);
+  --color-qualitative-5: var(--mui-palette-qualitative-bold-5);
+  --color-qualitative-6: var(--mui-palette-qualitative-bold-6);
+  --color-qualitative-7: var(--mui-palette-qualitative-bold-7);
+  --color-qualitative-8: var(--mui-palette-qualitative-bold-8);
+  --color-qualitative-9: var(--mui-palette-qualitative-bold-9);
+  --color-qualitative-10: var(--mui-palette-qualitative-bold-10);
+  --color-qualitative-11: var(--mui-palette-qualitative-bold-11);
+  --shadow-1: var(--mui-shadows-1);
+  --shadow-2: var(--mui-shadows-2);
+  --shadow-3: var(--mui-shadows-3);
+  --shadow-4: var(--mui-shadows-4);
+  --shadow-5: var(--mui-shadows-5);
+  --shadow-6: var(--mui-shadows-6);
+  --shadow-7: var(--mui-shadows-7);
+  --shadow-8: var(--mui-shadows-8);
+  --shadow-9: var(--mui-shadows-9);
+  --shadow-10: var(--mui-shadows-10);
+  --shadow-11: var(--mui-shadows-11);
+  --shadow-12: var(--mui-shadows-12);
+  --shadow-13: var(--mui-shadows-13);
+  --shadow-14: var(--mui-shadows-14);
+  --shadow-15: var(--mui-shadows-15);
+  --shadow-16: var(--mui-shadows-16);
+  --shadow-17: var(--mui-shadows-17);
+  --shadow-18: var(--mui-shadows-18);
+  --shadow-19: var(--mui-shadows-19);
+  --shadow-20: var(--mui-shadows-20);
+  --shadow-21: var(--mui-shadows-21);
+  --shadow-22: var(--mui-shadows-22);
+  --shadow-23: var(--mui-shadows-23);
+  --shadow-24: var(--mui-shadows-24);
+  --radius-theme: var(--mui-shape-borderRadius);
+  --radius-theme-half: calc(var(--mui-shape-borderRadius) * 0.5);
+  --radius-theme-2: calc(var(--mui-shape-borderRadius) * 2);
+  --radius-theme-3: calc(var(--mui-shape-borderRadius) * 3);
+  --radius-theme-4: calc(var(--mui-shape-borderRadius) * 4);
+  --breakpoint-xs: 320px;
+  --breakpoint-sm: 600px;
+  --breakpoint-md: 960px;
+  --breakpoint-lg: 1280px;
+  --breakpoint-xl: 1600px;
+  --breakpoint-2xl: initial;
+}
+
+@theme {
+  --spacing: calc(var(--mui-spacing) / 2);
+}
+
+@utility typography-h1 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 3.5rem;
+  line-height: 1.167;
+  letter-spacing: -1.5px;
+  @media (min-width:600px) {
+    font-size: 4.7129rem;
+  }
+  @media (min-width:960px) {
+    font-size: 5.3556rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 6rem;
+  }
+}
+
+@utility typography-h2 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 2.375rem;
+  line-height: 1.2;
+  letter-spacing: -0.5px;
+  @media (min-width:600px) {
+    font-size: 2.9167rem;
+  }
+  @media (min-width:960px) {
+    font-size: 3.3333rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 3.75rem;
+  }
+}
+
+@utility typography-h3 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 1.167;
+  letter-spacing: 0;
+  @media (min-width:600px) {
+    font-size: 2.5707rem;
+  }
+  @media (min-width:960px) {
+    font-size: 2.7849rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 3rem;
+  }
+}
+
+@utility typography-h4 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  @media (min-width:600px) {
+    font-size: 1.8rem;
+  }
+  @media (min-width:960px) {
+    font-size: 1.8rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 2rem;
+  }
+}
+
+@utility typography-h5 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 1.167;
+  letter-spacing: 0;
+  @media (min-width:600px) {
+    font-size: 1.2853rem;
+  }
+  @media (min-width:960px) {
+    font-size: 1.4996rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 1.5rem;
+  }
+}
+
+@utility typography-h6 {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 1.0625rem;
+  line-height: 1.333;
+  letter-spacing: 0;
+  @media (min-width:600px) {
+    font-size: 1.1253rem;
+  }
+  @media (min-width:960px) {
+    font-size: 1.1253rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 1.125rem;
+  }
+}
+
+@utility typography-subtitle1 {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+@utility typography-subtitle2 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 0.8125rem;
+  line-height: 1.538;
+  letter-spacing: 0;
+}
+
+@utility typography-body1 {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+@utility typography-body2 {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 0.8125rem;
+  line-height: 1.538;
+  letter-spacing: 0;
+}
+
+@utility typography-button {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 0.8125rem;
+  line-height: 1.538;
+  letter-spacing: 0;
+  text-transform: inherit;
+}
+
+@utility typography-caption {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 0.6875rem;
+  line-height: 1.454;
+  letter-spacing: 0;
+}
+
+@utility typography-overline {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 0.625rem;
+  line-height: 1.2;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+}
+
+@utility typography-caption-medium {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 0.6875rem;
+  line-height: 1.454;
+  letter-spacing: 0;
+}
+
+@utility typography-overline-delicate {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 0.625rem;
+  line-height: 1.2;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+}
+
+@utility typography-code1 {
+  font-family: "Overpass Mono", monospace;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+@utility typography-code2 {
+  font-family: "Overpass Mono", monospace;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.428;
+  letter-spacing: 0;
+}
+
+@utility typography-code3 {
+  font-family: "Overpass Mono", monospace;
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 1.333;
+  letter-spacing: 0;
+}

package/src/widgets/actions/index.ts

@@ -46,6 +46,7 @@ export {
   DEFAULT_RELATIVE_DATA_LABELS,
   type RelativeDataProps,
   type RelativeDataLabels,
+  type RelativeScale,
 } from './relative-data'
 export {
   Download,

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

@@ -1,3 +1,4 @@
 export { RelativeData, type RelativeDataProps } from './relative-data'
 export { toRelativeData, createPercentFormatter } from './transforms'
+export type { RelativeScale } from './scale'
 export { DEFAULT_RELATIVE_DATA_LABELS, type RelativeDataLabels } from './labels'

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

@@ -1,9 +1,15 @@
 export interface RelativeDataLabels {
   on: string
   off: string
+  scaleMenu: string
+  scaleMax: string
+  scaleTotal: string
 }
 
 export const DEFAULT_RELATIVE_DATA_LABELS: RelativeDataLabels = {
   on: 'Show absolute values',
   off: 'Show relative values',
+  scaleMenu: 'Relative scale',
+  scaleMax: 'Relative to max',
+  scaleTotal: 'Relative to total',
 }

package/src/widgets/actions/relative-data/relative-data.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { render } from '@testing-library/react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
 import { Provider } from '../../provider/widget-provider'
 import { clearAllWidgetStores, getWidgetStore } from '../../stores'
 import { RelativeData } from './relative-data'
@@ -69,3 +69,80 @@ describe('<RelativeData> — rawFormatter-driven restoration', () => {
     expect(s.formatter).toBe(fmtA)
   })
 })
+
+describe('<RelativeData> — scale', () => {
+  const DATA = [
+    [
+      { name: 'a', value: 50 },
+      { name: 'b', value: 150 },
+    ],
+  ]
+  const values = (id: string) =>
+    (getWidgetStore(id).getState().data as { value: number }[][])[0]!.map(
+      (d) => d.value,
+    )
+  // The value axis a structural option ends up with after the action's
+  // config transform.
+  const yAxis = (id: string) => {
+    const xf = getWidgetStore(id)
+      .getState()
+      .configTransforms.find((t) => t.id === 'relative-data-axis')!
+    return (xf.fn({ yAxis: { type: 'value' } }) as { yAxis: object }).yAxis
+  }
+  const slot = (id: string) =>
+    getWidgetStore(id).getState().transformStates['relative-data']
+
+  it("defaults to 'max': values are shares of the total, axis left to the data", () => {
+    render(
+      <Provider id='sc1' data={DATA}>
+        <RelativeData initialEnabled />
+      </Provider>,
+    )
+    expect(values('sc1')).toEqual([25, 75])
+    expect(yAxis('sc1')).toEqual({ type: 'value' })
+    expect(slot('sc1')).toMatchObject({ enabled: true, scale: 'max' })
+  })
+
+  it("scale='total' keeps the same values and pins the axis to ±100", () => {
+    render(
+      <Provider id='sc2' data={DATA}>
+        <RelativeData initialEnabled scale='total' />
+      </Provider>,
+    )
+    expect(values('sc2')).toEqual([25, 75])
+    expect(yAxis('sc2')).toEqual({ type: 'value', min: -100, max: 100 })
+  })
+
+  it('picking a scale in the menu switches it and turns relative on', () => {
+    render(
+      <Provider id='sc3' data={DATA}>
+        <RelativeData />
+      </Provider>,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Relative scale' }))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Relative to total' }))
+    expect(slot('sc3')).toMatchObject({ enabled: true, scale: 'total' })
+    expect(values('sc3')).toEqual([25, 75])
+    expect(yAxis('sc3')).toMatchObject({ max: 100 })
+  })
+
+  it('follows a scale written to the store from outside', () => {
+    render(
+      <Provider id='sc4' data={DATA}>
+        <RelativeData initialEnabled />
+      </Provider>,
+    )
+    act(() => {
+      getWidgetStore('sc4').setState((s) => ({
+        transformStates: {
+          ...s.transformStates,
+          'relative-data': {
+            ...s.transformStates['relative-data']!,
+            scale: 'total',
+          },
+        },
+      }))
+    })
+    expect(yAxis('sc4')).toMatchObject({ max: 100 })
+  })
+})