@micha.bigler/ui-core-micha 3.14.3 → 4.0.0

package/src/components/charts/BarChart.jsx

@@ -1,102 +0,0 @@
-import React from 'react';
-import { Box } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { useTranslation } from 'react-i18next';
-import { BarChart as MuiBarChart } from '@mui/x-charts/BarChart';
-import { useNeutralChartPalette } from './palette';
-import {
-  DEFAULT_LEGEND_POSITION,
-  assertRemovedChartProp,
-  defaultNumericTickFormatter,
-  resolveChartLayout,
-  withAxisDefaults,
-  withChartSlotDefaults,
-  withGridDefaults,
-} from './chartDefaults';
-
-/**
- * Responsive MUI X-Charts bar preset. It supplies labelled axes, tooltips,
- * and an automatic multi-series legend. `xAxisLabel`/`yAxisLabel` are
- * optional, per DESIGN.md #8a: a categorical axis (BarChart's default x-axis
- * shape) needs no title by default -- its ticks are names -- and a numeric
- * axis needs one only unless its unit is already visible in the ticks and
- * the panel heading already names the quantity. Omitting one never suppresses
- * a label the caller DID set (`withAxisDefaults` only ever falls back onto
- * an axis without its own `label`).
- *
- * `size` (UCM-CHART-12, UCM-CHART-15): `"compact" | "standard" | "tall" | "extra_tall" |
- * "super_tall"`, resolved through the theme's spacing scale by `resolveChartLayout`. `height`
- * (px) is the documented escape for a justified special case -- prefer `size`.
- * `minHeight`/`aspect`/`margin` are gone (see docs/CHART-LAYOUT.md).
- */
-export function BarChart({
-  series = [],
-  xAxisLabel,
-  yAxisLabel,
-  xAxis,
-  yAxis,
-  palette,
-  size = 'standard',
-  height,
-  minHeight,
-  aspect,
-  margin,
-  xLabels = 'auto',
-  grid,
-  hideLegend = series.length <= 1,
-  legendPosition = DEFAULT_LEGEND_POSITION,
-  slotProps,
-  ...chartProps
-}) {
-  const theme = useTheme();
-  const { i18n } = useTranslation();
-  const neutralPalette = useNeutralChartPalette();
-
-  assertRemovedChartProp('BarChart', 'minHeight', minHeight, 'Use size="compact" | "standard" | "tall" | "extra_tall" | "super_tall", or height for the documented escape.');
-  assertRemovedChartProp('BarChart', 'aspect', aspect, 'Removed with no replacement -- pick a size token; the chart no longer tracks width.');
-  assertRemovedChartProp('BarChart', 'margin', margin, 'Removed -- the layout model owns margins completely.');
-
-  const labelledXAxis = withAxisDefaults(
-    xAxis,
-    xAxisLabel,
-    { scaleType: 'band', data: [] },
-    theme.typography.caption.fontSize,
-  );
-  const labelledYAxis = withAxisDefaults(
-    yAxis,
-    yAxisLabel,
-    { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) },
-    theme.typography.caption.fontSize,
-  );
-  const layout = resolveChartLayout({
-    size,
-    height,
-    xAxis: labelledXAxis,
-    yAxis: labelledYAxis,
-    series,
-    xLabels,
-    hideLegend,
-    legendPosition,
-    slotProps,
-    tickFontSize: theme.typography.caption.fontSize,
-    spacing: theme.spacing,
-    defaultLineHeight: theme.typography.caption.lineHeight,
-  });
-
-  return (
-    <Box data-testid="bar-chart-container" sx={layout.sx}>
-      <MuiBarChart
-        {...chartProps}
-        height={layout.chartHeight}
-        series={series}
-        xAxis={layout.xAxis}
-        yAxis={layout.yAxis}
-        colors={palette || neutralPalette.categorical}
-        grid={withGridDefaults(grid)}
-        hideLegend={hideLegend}
-        margin={layout.margin}
-        slotProps={withChartSlotDefaults(slotProps, legendPosition)}
-      />
-    </Box>
-  );
-}

package/src/components/charts/ChartFrame.jsx

@@ -1,214 +0,0 @@
-import React, { useId, useRef, useState } from 'react';
-import {
-  Alert,
-  Box,
-  Button,
-  CircularProgress,
-  Paper,
-  Stack,
-  Tooltip,
-  Typography,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useTheme } from '@mui/material/styles';
-import { exportChartPng, exportChartSvg } from './exportChart';
-import { assertRemovedChartProp } from './chartDefaults';
-
-export const CHART_FRAME_ROOT_SX = { p: 2 };
-export const CHART_FRAME_ALERT_SX = { mt: 2 };
-
-/**
- * Chart-type-agnostic chart scaffolding. Children may be an X-Charts primitive or a bespoke SVG.
- *
- * `minHeight` (CHART-9): always just a floor on the content box, which holds a whole card --
- * title, toolbar, chart, legend, footnotes, export links -- not a single chart.
- *
- * UCM-CHART-13: `height` and `aspect` are GONE. `height` was destructured and only ever fed a
- * dev-mode mismatch warning, never applied to the box -- genuinely dead. `aspect` is a DIFFERENT
- * case: it WAS wired to `aspectRatio` on the box at 3.0.1, and worked.
- *
- * UCM-CHART-14 CORRECTION -- left legible on purpose, not deleted: `UCM-CHART-13` shipped claiming
- * "no consumer across the five apps passes [aspect] (measured against 3.0.1)". **That measurement
- * was false.** A parser-based census (`scripts/chart-api-census.mjs`, ground truth over grep) found
- * FOUR live call sites in fitness-monitor (`BodyHistoryPage.jsx:295,444`, `EnvironmentPage.jsx:245,279`)
- * that a `head`-truncated grep had silently missed -- the sixth wrong consumer count in this series
- * (see `UCM-CHART-14`'s own WO for the other five). The REMOVAL itself still stands (`aspect` stays
- * gone, the operator confirmed this is not being reopened) -- only the record of who it affected was
- * wrong, and is corrected here rather than quietly rewritten. Those four sites are `FM-CHART-1`'s
- * scope, not this file's. Passing either prop now throws in dev via the same `assertRemovedChartProp`
- * the four chart presets use (`UCM-CHART-12`), naming `minHeight` (a card floor) or the chart's own
- * `size` prop as the replacement -- `aspect`'s own message states plainly that it WAS applied and
- * this is a real behaviour change (`UCM-CHART-14`, F2: the message previously said the opposite).
- */
-export function ChartFrame({
-  title,
-  subtitle,
-  toolbar,
-  controls,
-  loading = false,
-  error = false,
-  isEmpty = false,
-  emptyMessage,
-  minHeight,
-  exportOptions = false,
-  onExportSvg,
-  onExportPng,
-  meta,
-  ariaLabel,
-  children,
-  variant = 'outlined',
-  titleVariant = 'h6',
-  sx,
-  // UCM-CHART-13: `height`/`aspect` are gone from the signature itself (DoD) -- captured via rest,
-  // not named parameters, so they read as "detected leftovers", not "accepted props" a reader might
-  // assume are still wired to something.
-  ...legacyProps
-}) {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const titleId = useId();
-  const chartRef = useRef(null);
-  const [exportError, setExportError] = useState(false);
-  const options = exportOptions === true ? {} : exportOptions || {};
-  const exportsEnabled = Boolean(exportOptions);
-  const hasMeta = meta !== undefined && meta !== null && meta !== false && meta !== '';
-  const hasCustomAriaLabel = Boolean(ariaLabel);
-  const chartLabel = ariaLabel || title;
-  const callerSx = Array.isArray(sx) ? sx : [sx];
-
-  assertRemovedChartProp(
-    'ChartFrame', 'height', legacyProps.height,
-    'Use minHeight for the card floor, or size on the chart inside the frame if you meant the chart\'s own height.',
-    'UCM-CHART-13, v3.1.0',
-  );
-  assertRemovedChartProp(
-    'ChartFrame', 'aspect', legacyProps.aspect,
-    'It WAS applied here (aspectRatio on the card box, through 3.0.1) -- this is a real behaviour '
-    + 'change, not a no-op removal. The card\'s height now follows its content, with minHeight as '
-    + 'the floor. If you wanted the chart itself taller or shorter, set size on the chart inside '
-    + 'the frame.',
-    'UCM-CHART-14, v3.1.1',
-  );
-
-  const runExport = async (type) => {
-    setExportError(false);
-    try {
-      const filename = options.filename || 'chart';
-      const result = type === 'svg'
-        ? exportChartSvg(chartRef.current, `${filename}.svg`)
-        : await exportChartPng(
-          chartRef.current,
-          `${filename}.png`,
-          theme.palette.background.paper,
-        );
-      const callback = type === 'svg' ? onExportSvg : onExportPng;
-      callback?.(result);
-    } catch (_error) {
-      setExportError(true);
-    }
-  };
-
-  // UCM-CHART-17: SVG and PNG now produce genuinely different content (chart-only vector vs. the
-  // whole card as shown, legend included) -- the label alone no longer says so, so both buttons
-  // carry a tooltip stating the difference plainly, per the Envelope's own requirement.
-  const exportButtons = (
-    <>
-      {options.svg !== false && (
-        // `describeChild`: the tooltip DESCRIBES the button, it must not REPLACE its accessible
-        // name -- MUI's default (`aria-label` = title) would silently rename "Export SVG" to
-        // whatever the tooltip says, breaking both the button's own identity and every existing
-        // `getByRole('button', { name: 'Export SVG' })` query.
-        <Tooltip title={t('ChartFrame.EXPORT_SVG_TOOLTIP')} describeChild>
-          <Button size="small" onClick={() => runExport('svg')}>
-            {t('ChartFrame.EXPORT_SVG_LABEL')}
-          </Button>
-        </Tooltip>
-      )}
-      {options.png !== false && (
-        <Tooltip title={t('ChartFrame.EXPORT_PNG_TOOLTIP')} describeChild>
-          <Button size="small" onClick={() => runExport('png')}>
-            {t('ChartFrame.EXPORT_PNG_LABEL')}
-          </Button>
-        </Tooltip>
-      )}
-    </>
-  );
-
-  let content = children;
-  if (loading) {
-    content = <CircularProgress aria-label={t('ChartFrame.LOADING')} />;
-  } else if (error) {
-    content = <Alert severity="error">{typeof error === 'string' ? error : t('ChartFrame.ERROR_DEFAULT')}</Alert>;
-  } else if (isEmpty) {
-    content = <Alert severity="info">{emptyMessage || t('ChartFrame.EMPTY_DEFAULT')}</Alert>;
-  }
-
-  return (
-    <Paper variant={variant} sx={[CHART_FRAME_ROOT_SX, ...callerSx]}>
-      {/* THEME-11: mb: 2 -> mb: 1 (16 -> 8px) -- one line item in the estate-wide chart-furniture
-          trim; the controls row below keeps its own mb: 2, not named in that WO's scope. */}
-      <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 2, mb: 1 }}>
-        <Box>
-          <Typography id={titleId} variant={titleVariant}>{title}</Typography>
-          {subtitle && <Typography variant="body2" color="text.secondary">{subtitle}</Typography>}
-        </Box>
-        {toolbar && <Box>{toolbar}</Box>}
-      </Box>
-
-      {/* A full-width control row between the header and the chart. Distinct from `toolbar`
-          (which shares the header row with the title, so a wide control set squeezes the title)
-          and from `children` (which the loading/error/empty states replace -- controls must stay
-          operable in those states, e.g. to switch away from a view that has no data). */}
-      {controls && <Box sx={{ mb: 2 }}>{controls}</Box>}
-
-      <Box
-        ref={chartRef}
-        role="img"
-        aria-label={chartLabel}
-        aria-labelledby={hasCustomAriaLabel ? undefined : titleId}
-        sx={{
-          width: '100%',
-          minHeight,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        {content}
-      </Box>
-
-      {exportError && <Alert severity="error" sx={CHART_FRAME_ALERT_SX}>{t('ChartFrame.EXPORT_ERROR')}</Alert>}
-
-      {/* `meta` opts the card into the single bordered foot row (meta left, exports right).
-          Without it the markup below is byte-for-byte the pre-`meta` structure -- a bare Stack,
-          no wrapper, `mt: 2` on the Stack itself. 16 other panels render this path, so it must
-          not gain or lose a node. */}
-      {hasMeta ? (
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            flexWrap: 'wrap',
-            gap: 1.5,
-            mt: 2,
-            pt: 1.5,
-            borderTop: '1px solid',
-            borderColor: 'divider',
-          }}
-        >
-          <Typography variant="caption" color="text.secondary">{meta}</Typography>
-          {exportsEnabled && (
-            <Stack direction="row" spacing={1} justifyContent="flex-end">
-              {exportButtons}
-            </Stack>
-          )}
-        </Box>
-      ) : exportsEnabled && (
-        <Stack direction="row" spacing={1} justifyContent="flex-end" sx={{ mt: 2 }}>
-          {exportButtons}
-        </Stack>
-      )}
-    </Paper>
-  );
-}

package/src/components/charts/LineChart.jsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import { Box } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { useTranslation } from 'react-i18next';
-import {
-  LineChart as MuiLineChart,
-  MarkElement as MuiMarkElement,
-} from '@mui/x-charts/LineChart';
-import { useNeutralChartPalette } from './palette';
-import {
-  DEFAULT_LEGEND_POSITION,
-  assertRemovedChartProp,
-  defaultNumericTickFormatter,
-  resolveChartLayout,
-  withAxisDefaults,
-  withChartSlotDefaults,
-  withGridDefaults,
-} from './chartDefaults';
-
-// Fixes MUI's hollow `background.paper`-filled marker (MarkElement.js's own
-// `styled()` default). CHART-6's WO named a `MuiMarkElement` theme-token
-// override in src/theme/tokens.js as the preferred mechanism, with a
-// per-wrapper slots/sx override as the documented fallback. This uses the
-// fallback deliberately, not because the theme route was infeasible: a
-// wrapper-level fix applies to every consumer immediately on this version
-// bump, including the 14 apps that haven't adopted `createAppTheme` yet
-// (THEME-1 is a separate, optional pin bump) -- a theme-token override would
-// only take effect for apps on the new baseline theme. Composes correctly
-// with a caller's own `slots.mark` (spread after this default, so it wins).
-function FilledMarkElement({ color, style, ...props }) {
-  return <MuiMarkElement {...props} color={color} style={{ fill: color, ...style }} />;
-}
-
-/**
- * Responsive MUI X-Charts line preset. It supplies labelled axes, tooltips,
- * and an automatic multi-series legend. `xAxisLabel`/`yAxisLabel` are
- * optional, per DESIGN.md #8a: a categorical axis needs no title by default
- * -- its ticks are names -- and a numeric axis needs one only unless its
- * unit is already visible in the ticks and the panel heading already names
- * the quantity. Omitting one never suppresses a label the caller DID set
- * (`withAxisDefaults` only ever falls back onto an axis without its own
- * `label`).
- *
- * `size` (UCM-CHART-12, UCM-CHART-15): `"compact" | "standard" | "tall" | "extra_tall" |
- * "super_tall"`, resolved through the theme's spacing scale by `resolveChartLayout`. `height`
- * (px) is the documented escape for a justified special case -- prefer `size`.
- * `minHeight`/`aspect`/`margin` are gone (see docs/CHART-LAYOUT.md).
- */
-export function LineChart({
-  series = [],
-  xAxisLabel,
-  yAxisLabel,
-  xAxis,
-  yAxis,
-  palette,
-  size = 'standard',
-  height,
-  minHeight,
-  aspect,
-  margin,
-  xLabels = 'auto',
-  grid,
-  hideLegend = series.length <= 1,
-  legendPosition = DEFAULT_LEGEND_POSITION,
-  slots,
-  slotProps,
-  ...chartProps
-}) {
-  const theme = useTheme();
-  const { i18n } = useTranslation();
-  const neutralPalette = useNeutralChartPalette();
-
-  assertRemovedChartProp('LineChart', 'minHeight', minHeight, 'Use size="compact" | "standard" | "tall" | "extra_tall" | "super_tall", or height for the documented escape.');
-  assertRemovedChartProp('LineChart', 'aspect', aspect, 'Removed with no replacement -- pick a size token; the chart no longer tracks width.');
-  assertRemovedChartProp('LineChart', 'margin', margin, 'Removed -- the layout model owns margins completely.');
-
-  const labelledXAxis = withAxisDefaults(
-    xAxis,
-    xAxisLabel,
-    { scaleType: 'point', data: [] },
-    theme.typography.caption.fontSize,
-  );
-  const labelledYAxis = withAxisDefaults(
-    yAxis,
-    yAxisLabel,
-    { scaleType: 'linear', valueFormatter: defaultNumericTickFormatter(i18n.language) },
-    theme.typography.caption.fontSize,
-  );
-  const defaultedSeries = series.map((item) => ({
-    showMark: false,
-    labelMarkType: 'square',
-    ...item,
-  }));
-  const layout = resolveChartLayout({
-    size,
-    height,
-    xAxis: labelledXAxis,
-    yAxis: labelledYAxis,
-    series: defaultedSeries,
-    xLabels,
-    hideLegend,
-    legendPosition,
-    slotProps,
-    tickFontSize: theme.typography.caption.fontSize,
-    spacing: theme.spacing,
-    defaultLineHeight: theme.typography.caption.lineHeight,
-  });
-
-  return (
-    <Box data-testid="line-chart-container" sx={layout.sx}>
-      <MuiLineChart
-        {...chartProps}
-        height={layout.chartHeight}
-        series={defaultedSeries}
-        xAxis={layout.xAxis}
-        yAxis={layout.yAxis}
-        colors={palette || neutralPalette.categorical}
-        grid={withGridDefaults(grid)}
-        hideLegend={hideLegend}
-        margin={layout.margin}
-        slots={{ mark: FilledMarkElement, ...slots }}
-        slotProps={withChartSlotDefaults(slotProps, legendPosition)}
-      />
-    </Box>
-  );
-}