@micha.bigler/ui-core-micha 2.31.1 → 2.33.0

package/tests/MobileBottomNav.test.jsx

@@ -0,0 +1,220 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+import { MobileBottomNav } from '../src/components/MobileBottomNav';
+import { createAppTheme } from '../src/theme/createAppTheme';
+
+const theme = createAppTheme({ palette: { primary: { main: '#0F62FE' } } });
+
+function Icon() {
+  return <svg aria-hidden="true" data-testid="destination-icon" />;
+}
+
+const destinations = [
+  { route: '/first', label: 'First', icon: Icon },
+  { route: '/second', label: 'Second', icon: Icon },
+  { route: '/third', label: 'Third', icon: Icon },
+];
+
+function setMediaQueryMatches(matches) {
+  window.matchMedia = vi.fn().mockImplementation((query) => ({
+    matches: typeof matches === 'function' ? matches(query) : matches,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+}
+
+function setViewportWidth(width) {
+  setMediaQueryMatches((query) => {
+    const minWidth = query.match(/min-width:(\d+)px/)?.[1];
+    return minWidth ? width >= Number(minWidth) : false;
+  });
+}
+
+function renderNav(props = {}) {
+  return render(
+    <ThemeProvider theme={theme}>
+      <MobileBottomNav
+        destinations={destinations}
+        activeRoute="/first"
+        onNavigate={vi.fn()}
+        {...props}
+      />
+    </ThemeProvider>,
+  );
+}
+
+describe('MobileBottomNav', () => {
+  beforeEach(() => setMediaQueryMatches(false));
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+  });
+
+  it('renders one action per destination, in order, with visible labels', () => {
+    renderNav();
+
+    expect(screen.getAllByRole('button').map((action) => action.textContent)).toEqual([
+      'First',
+      'Second',
+      'Third',
+    ]);
+  });
+
+  it('selects exactly the matching route and tolerates no match', () => {
+    const { rerender } = renderNav({ activeRoute: '/second' });
+    const selected = () => screen.getAllByRole('button')
+      .filter((action) => action.classList.contains('Mui-selected'));
+
+    expect(selected()).toHaveLength(1);
+    expect(selected()[0].textContent).toBe('Second');
+    expect(selected()[0].getAttribute('aria-current')).toBe('page');
+    expect(screen.getAllByRole('button').filter((action) => action.hasAttribute('aria-current')))
+      .toHaveLength(1);
+
+    rerender(
+      <ThemeProvider theme={theme}>
+        <MobileBottomNav
+          destinations={destinations}
+          activeRoute="/not-in-the-bar"
+          onNavigate={vi.fn()}
+        />
+      </ThemeProvider>,
+    );
+    expect(selected()).toHaveLength(0);
+    expect(screen.getAllByRole('button').some((action) => action.hasAttribute('aria-current')))
+      .toBe(false);
+  });
+
+  it('calls onNavigate with the selected destination route', () => {
+    const onNavigate = vi.fn();
+    renderNav({ onNavigate });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Second' }));
+
+    expect(onNavigate).toHaveBeenCalledOnce();
+    expect(onNavigate).toHaveBeenCalledWith('/second');
+  });
+
+  it('renders a positive badge only on its own destination', () => {
+    renderNav({
+      destinations: [
+        { route: '/inbox', label: 'Inbox', icon: Icon, badgeCount: 4 },
+        { route: '/empty', label: 'Empty', icon: Icon, badgeCount: 0 },
+        { route: '/unset', label: 'Unset', icon: Icon },
+      ],
+      activeRoute: '/inbox',
+    });
+
+    const actions = screen.getAllByRole('button');
+    expect(within(actions[0]).getByText('4')).toBeTruthy();
+    expect(actions[0].querySelectorAll('.MuiBadge-root')).toHaveLength(1);
+    expect(actions[1].querySelector('.MuiBadge-root')).toBeNull();
+    expect(actions[2].querySelector('.MuiBadge-root')).toBeNull();
+  });
+
+  it('uses shortLabel when present and label when it is absent', () => {
+    renderNav({
+      destinations: [
+        { route: '/registrations', label: 'My registrations', shortLabel: 'Mine', icon: Icon },
+        { route: '/messages', label: 'Messages', icon: Icon },
+      ],
+    });
+
+    expect(screen.getAllByRole('button').map((action) => action.textContent)).toEqual([
+      'Mine',
+      'Messages',
+    ]);
+    expect(screen.getByRole('button', { name: 'My registrations' }).textContent).toBe('Mine');
+  });
+
+  it('resolves its surface and action colours from both baseline and plain MUI themes', () => {
+    const themes = [
+      createAppTheme({
+        palette: {
+          primary: { main: '#123456' },
+          background: { paper: '#F1F2F3' },
+          text: { secondary: '#445566' },
+        },
+      }),
+      createTheme({
+        palette: {
+          primary: { main: '#654321' },
+          background: { paper: '#E7E8E9' },
+          text: { secondary: '#665544' },
+        },
+      }),
+    ];
+    const expected = [
+      { background: 'rgb(241, 242, 243)', selected: 'rgb(18, 52, 86)', rest: 'rgb(68, 85, 102)' },
+      { background: 'rgb(231, 232, 233)', selected: 'rgb(101, 67, 33)', rest: 'rgb(102, 85, 68)' },
+    ];
+
+    themes.forEach((currentTheme, index) => {
+      const { container } = render(
+        <ThemeProvider theme={currentTheme}>
+          <MobileBottomNav
+            destinations={destinations}
+            activeRoute="/first"
+            onNavigate={vi.fn()}
+          />
+        </ThemeProvider>,
+      );
+      const actions = screen.getAllByRole('button');
+
+      expect(getComputedStyle(container.firstElementChild).backgroundColor)
+        .toBe(expected[index].background);
+      expect(getComputedStyle(actions[0]).color).toBe(expected[index].selected);
+      expect(getComputedStyle(actions[1]).color).toBe(expected[index].rest);
+      cleanup();
+    });
+  });
+
+  it('renders nothing at and above hideAbove', () => {
+    setMediaQueryMatches((query) => query === '(min-width:900px)');
+    const { container } = renderNav();
+
+    expect(window.matchMedia).toHaveBeenCalledWith('(min-width:900px)');
+    expect(container.childElementCount).toBe(0);
+    expect(screen.queryByRole('navigation')).toBeNull();
+  });
+
+  it('declares safe-area bottom padding on the fixed bar', () => {
+    const { container } = renderNav();
+    const nav = container.firstElementChild;
+
+    expect(nav.classList.contains('MuiBottomNavigation-root')).toBe(true);
+    // jsdom drops env() declarations while parsing CSS, so assert the sx
+    // declaration before browser CSS parsing instead of a computed inset.
+    expect(MobileBottomNav.toString()).toContain('env(safe-area-inset-bottom)');
+  });
+
+  it('renders the five-item, two-badge specimen at 375px and nothing at 1280px', () => {
+    const specimen = [
+      { route: '/triage', label: 'Triage', icon: Icon, badgeCount: 7 },
+      { route: '/board', label: 'Board', icon: Icon, badgeCount: 3 },
+      { route: '/chat', label: 'Chat', icon: Icon },
+      { route: '/status', label: 'Status', icon: Icon },
+      { route: '/more', label: 'More', icon: Icon, emphasis: true },
+    ];
+
+    setViewportWidth(375);
+    renderNav({ destinations: specimen, activeRoute: '/triage' });
+    expect(screen.getAllByRole('button')).toHaveLength(5);
+    expect(document.querySelectorAll('.MuiBadge-root')).toHaveLength(2);
+
+    cleanup();
+    setViewportWidth(1280);
+    renderNav({ destinations: specimen, activeRoute: '/triage' });
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+});

package/tests/NotificationsProvider.test.jsx

@@ -90,7 +90,11 @@ describe('NotificationsProvider', () => {
       expect.objectContaining({ id: 1, notification_id: 101, seen: false }),
       expect.objectContaining({ id: 2, notification_id: 102, dismissed: false }),
     ]));
-    expect(MockWebSocket.instances).toHaveLength(1);
+    // `seeded` (which gates the socket connect) flips in refresh()'s .finally(),
+    // one tick after unreadCount is set -- so the socket can still be unopened
+    // right when the unread-count waitFor above resolves. Wait for it directly
+    // instead of asserting synchronously.
+    await waitFor(() => expect(MockWebSocket.instances).toHaveLength(1));
   });
 
   it('prepends a new notification push and increments the unread count', async () => {

package/tests/createAppTheme.test.js

@@ -12,6 +12,23 @@ describe('createAppTheme', () => {
     expect(theme.typography.body1.fontSize).toBe('14px');
     expect(theme.shape.borderRadius).toBe(3);
     expect(theme.components.MuiPaper.defaultProps).toMatchObject({ elevation: 0, variant: 'outlined' });
+    expect(theme.components.MuiBottomNavigationAction.styleOverrides.label).toMatchObject({
+      fontSize: '12px',
+      fontWeight: 500,
+      lineHeight: 1.2,
+      maxWidth: '100%',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      '&.Mui-selected': { fontSize: '12px' },
+    });
+    expect(theme.components.MuiBottomNavigationAction.styleOverrides.root).toMatchObject({
+      minWidth: 0,
+      maxWidth: 'none',
+      padding: '0 2px',
+      gap: '2px',
+      '& .MuiSvgIcon-root': { width: '22px', height: '22px' },
+    });
     expect(theme.palette.dataSeries.categorical).toHaveLength(6);
     expect(theme.palette.primary.light).not.toBe(createTheme().palette.primary.light);
     // MUI's createTheme(options, ...args) only augments the FIRST argument's

package/tests/themeCompleteness.test.js

@@ -19,6 +19,28 @@ describe('theme completeness', () => {
     expect(assertThemeComplete(createTheme({ components: { MuiButton: {} } })).findings
       .map(({ surface }) => surface))
       .toContain('components.MuiButton.styleOverrides.root.minHeight');
+    expect(bare.findings.map(({ surface }) => surface)).toEqual(expect.arrayContaining([
+      'components.MuiBottomNavigation.styleOverrides.root.borderTop',
+      'components.MuiBottomNavigation.styleOverrides.root.boxShadow',
+      'components.MuiBottomNavigation.styleOverrides.root.backgroundColor',
+      'components.MuiBottomNavigation.styleOverrides.root.borderColor',
+      'components.MuiBottomNavigationAction.styleOverrides.root.minWidth',
+      'components.MuiBottomNavigationAction.styleOverrides.root.maxWidth',
+      'components.MuiBottomNavigationAction.styleOverrides.root.padding',
+      'components.MuiBottomNavigationAction.styleOverrides.root.gap',
+      'components.MuiBottomNavigationAction.styleOverrides.root.& .MuiSvgIcon-root.width',
+      'components.MuiBottomNavigationAction.styleOverrides.root.& .MuiSvgIcon-root.height',
+      'components.MuiBottomNavigationAction.styleOverrides.root.color',
+      'components.MuiBottomNavigationAction.styleOverrides.label.fontSize',
+      'components.MuiBottomNavigationAction.styleOverrides.label.fontWeight',
+      'components.MuiBottomNavigationAction.styleOverrides.label.lineHeight',
+      'components.MuiBottomNavigationAction.styleOverrides.label.maxWidth',
+      'components.MuiBottomNavigationAction.styleOverrides.label.whiteSpace',
+      'components.MuiBottomNavigationAction.styleOverrides.label.overflow',
+      'components.MuiBottomNavigationAction.styleOverrides.label.textOverflow',
+      'components.MuiBottomNavigationAction.styleOverrides.label.&.Mui-selected.fontSize',
+      'components.MuiBottomNavigationAction.styleOverrides.root.&.Mui-selected.color',
+    ]));
     expect(baseline.findings).toEqual([]);
   });
 

package/work-orders/CHART-7.md

@@ -0,0 +1,175 @@
+# CHART-7 — `ChartFrame` gains a `titleVariant` prop
+
+**Target repo:** `ui-core-micha` (branch `main` — this repo has no `develop`)
+**Tier:** 2 (shared core)
+**Review:** independent `reviewer` **and** `ui_reviewer` — spawned concurrently, both mandatory before commit
+**Version target:** `2.32.0` — minor: a new public prop is additive API under semver, consistent with how `SHELL-2` classified `extraTabs` gaining a field
+**Precondition of:** `fitness-monitor`'s `FM-12` (DS-10)
+
+Short-form WO: one prop, one default, no design question.
+
+---
+
+## A. Envelope
+
+### Goal
+
+`ChartFrame` hard-codes its title as `<Typography variant="h6">` (`src/components/charts/ChartFrame.jsx:74`)
+and exposes no way to change it. Add a `titleVariant` prop, defaulting to `'h6'` so nothing changes for
+any existing caller.
+
+### Why this is a kit gap and not one app's problem
+
+A card title and a **panel-grid** title are different typographic jobs. In a dense grid the titles must
+recede so they do not compete with the one chart that matters; at `h6` they do not. Concretely:
+fitness-monitor renders six body-composition panels next to one hero chart, and its accepted prototype
+specifies `13px/600` for those six against `15px/600` for the hero
+(`fitness-monitor/work-orders/assets/FM-8-redesign.html:237` vs `:184`). Today all seven render at the
+same `h6`, and **six oversized titles beside a hero chart was one of the original "reads heavier and
+older" findings** that started this programme.
+
+The app cannot reach it: there is no prop, and `ChartFrame`'s title is not exposed through `slotProps`
+either. Any app with a dense panel grid hits the same wall — hram's results tabs are the obvious next
+one — so this belongs in the kit rather than being worked around per app.
+
+### Scope
+
+- `ChartFrame` accepts `titleVariant`, forwarded to the title `Typography`. **Default `'h6'`.**
+- Keep it minimal: **one prop, not a `slotProps.title` system.** There is one known need; a general slot
+  mechanism for one consumer is the speculative generality this estate's promotion discipline rejects.
+  If a second, different need appears, that is when the shape gets revisited.
+
+### Non-goals / do not touch
+
+- The subtitle, toolbar, controls, loading/error/empty slots and the export footer — untouched.
+- `ChartFrame`'s `p: 2` padding and its foot row: **byte-for-byte unchanged.** 16 panels depend on them.
+- The baseline's `h6` value (16px/600). This WO changes *which* variant a caller may pick, not what the
+  variants are.
+- The chart wrappers. No `LineChart`/`BarChart`/`TimeSeriesChart` change.
+- No behaviour, permission or data-contract change.
+
+### Risks
+
+- **`ChartFrame` is the estate's most-used chart primitive** — five of hram's six hand-drawn panels use
+  it, plus every wrapper chart. The default must remain `'h6'`; a changed default would silently restyle
+  every title in the estate on the next pin bump.
+- **No staging net.** A push to `main` touching `src/**` publishes to npm at once; the independent review
+  is the only gate and is not back-fillable.
+
+### Required tests to WRITE
+
+Extend the existing `ChartFrame` spec rather than adding a file.
+
+1. With no `titleVariant`, the title renders as `h6` — **prove non-vacuity** by changing the default and
+   confirming this fails. This is the regression guard for all 16 existing panels.
+2. `titleVariant="subtitle2"` renders the title at that variant.
+3. The subtitle, toolbar and footer render unchanged in both cases.
+
+Plus `tsc -p tsconfig.build.json --noEmit` clean.
+
+**No full-suite run.** Affected-areas set is the `ChartFrame` spec.
+
+### Verification
+
+The rendered two-width side-by-side per DS-1, showing a `ChartFrame` at the default and one with an
+overridden variant side by side — so the "default unchanged" claim is visible and not only asserted.
+
+### Preconditions
+
+None. `THEME-2` (`2.31.1`) is the current published version.
+
+### Parity guardrail
+
+Purely additive. Every existing caller must render identically — that is what test 1 guards.
+
+---
+
+## B. Implementation map
+
+*Filled by the Orchestrator on `git pull` — see AGENTS.md → "Work Order".*
+
+### Execution directive (read this first)
+
+> **If you are the implementer reading this work order as your own specification: this section is
+> NOT addressed to you.** It tells the Orchestrator how to invoke you. **You ARE that invocation —
+> do NOT shell out to `codex exec`.**
+>
+> Implement through `codex exec` in the background — invoked directly via Bash (never the
+> `debugger`/`*_coder` Agent wrappers) with BOTH flags `--skip-git-repo-check` and
+> `--dangerously-bypass-approvals-and-sandbox`. **Pass the WO via stdin, not as a positional
+> argument** — `cat work-orders/CHART-7.md | codex exec --skip-git-repo-check
+> --dangerously-bypass-approvals-and-sandbox -` (a positional arg hits Windows' command-line length
+> limit — proven repeatedly in this repo). Fallback to direct Claude implementation only on Codex
+> quota/rate-limit/non-zero exit.
+
+### Context package
+
+Verified 2026-08-10, current state: `src/components/charts/ChartFrame.jsx:17-35` (prop destructure)
+and `:74` (the hardcoded title):
+```jsx
+export function ChartFrame({
+  title,
+  subtitle,
+  toolbar,
+  ...
+  variant = 'outlined',
+  sx,
+}) {
+  ...
+  <Typography id={titleId} variant="h6">{title}</Typography>
+```
+
+**Named file to change:** add `titleVariant = 'h6'` to the destructured props (alongside `variant =
+'outlined'`, same style) and change line 74 to `<Typography id={titleId} variant={titleVariant}>
+{title}</Typography>`. That is the entire implementation — no other file needs to change (the WO is
+explicit: no `slotProps` system, no wrapper changes).
+
+**Test file:** `tests/ChartFrame.test.jsx` — extend, don't create a new file. Read the file in full
+first (it already has an i18n/theme harness at the top, shown above) and follow its existing render
+helper/assertion style. Add the 3 required tests: (1) default renders `variant="h6"` on the title
+`Typography` — assert via the rendered DOM (e.g. the title element's tag is `<h6>` or its MUI class
+contains `MuiTypography-h6`), proven non-vacuous by temporarily changing the default to something
+else and confirming the test fails, then restoring it; (2) `titleVariant="subtitle2"` renders the
+title at that variant; (3) subtitle/toolbar/footer render unchanged in both the default and
+overridden case (a plain equality/snapshot-style check between the two renders' non-title markup, or
+explicit assertions that subtitle/toolbar/footer content and structure are present and identical —
+your call on the exact mechanism, the WO doesn't prescribe one).
+
+### Do-not-touch / invariants
+
+- `ChartFrame`'s `p: 2` padding and its foot row — byte-for-byte unchanged.
+- The baseline's `h6` value itself (16px/600, from THEME-1) — untouched; this WO changes which
+  variant a caller may pick, not what the variants are.
+- No `LineChart`/`BarChart`/`TimeSeriesChart` change.
+- Subtitle, toolbar, controls, loading/error/empty slots, export footer — untouched behaviour.
+
+### Target repo working directory (absolute)
+
+`C:\Users\biglmi\Documents\webapps\ui-core-micha`
+
+### Required tests to WRITE (Codex writes them; the Orchestrator runs them)
+
+Exactly the 3 tests above in `tests/ChartFrame.test.jsx`, plus `tsc -p tsconfig.build.json --noEmit`
+clean. No full-suite run — affected-areas set is the `ChartFrame` spec alone.
+
+### Preamble (append verbatim)
+
+> The text above is the COMPLETE spec — the committed WO file's content, not a plan to refine; there
+> is no separate plan file. Read the nearest `AGENTS.md`, the relevant `.codex/skills/<role>/SKILL.md`, and the
+> app `MEMORY.md` ONLY for conventions. Stay in scope; do not touch auth/permissions/deps/schema/CI
+> unless the spec says so; do not update `MEMORY.md`. Do NOT `git add`/`commit`/`push` — leave every
+> change uncommitted in the working tree for the orchestrator's independent review. WRITE the tests
+> the `Required tests` section calls for AND **RUN the tests you just wrote** to confirm they execute
+> and pass — that is the ONLY test run you do (NOT the app's affected/full suite, NOT any review).
+> The orchestrator re-runs the authoritative set + does the independent review after you finish —
+> those are the gate; your own run does not count as the gate.
+>
+> Narrate continuously: a `PLAN: <step1> | <step2> | …` line up front, then a single-line
+> `PROGRESS: [<n>/<total>] <present-tense action>` before every relevant action (and `… done` on
+> completion), spaced so no gap exceeds ~2 min, stdout unbuffered, plus exactly one final
+> `RESULT: DONE|BLOCKED <reason>`.
+
+### Mini-handover
+
+Repo: `ui-core-micha` (`C:\Users\biglmi\Documents\webapps\ui-core-micha`), branch `main`. WO:
+`work-orders/CHART-7.md`. Follow `orchestrate-codex`.