@12-apps/ui 6.84.0 → 6.85.0

package/src/components/data-display/RegionMap/RegionMapLegend.tsx

@@ -0,0 +1,81 @@
+import Box from '@mui/material/Box/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import { alpha, type Theme } from '@mui/material/styles/index.js';
+import React from 'react';
+
+import { rem } from '../../../tokens/relative';
+
+import type { RegionMapCopy } from './RegionMap.types';
+
+/** What the hatch, the dashed circle and the dot mean — in words. */
+export function RegionMapLegend({
+  copy,
+  outermostMetres,
+  showCenter,
+  theme,
+  testId,
+}: {
+  copy: RegionMapCopy;
+  outermostMetres: number | null;
+  showCenter: boolean;
+  theme: Theme;
+  testId: string;
+}): React.JSX.Element {
+  const swatch = rem(theme, 14);
+  const { palette } = theme;
+  const stripe = rem(theme, 2);
+  return (
+    <Box
+      data-testid={`${testId}-legend`}
+      sx={{ display: 'flex', flexWrap: 'wrap', columnGap: 2, rowGap: 0.5, mt: 1, alignItems: 'center' }}
+    >
+      <LegendItem text={copy.legendExcluded}>
+        <Box
+          component="span"
+          sx={{
+            width: swatch,
+            height: swatch,
+            border: 1,
+            borderColor: 'text.secondary',
+            borderRadius: 0.5,
+            background: `repeating-linear-gradient(135deg, ${palette.text.secondary} 0 ${stripe}, ${alpha(palette.text.primary, 0.1)} ${stripe} ${rem(theme, 5)})`,
+          }}
+        />
+      </LegendItem>
+      {outermostMetres !== null && (
+        <LegendItem text={copy.legendCircle(outermostMetres)}>
+          <Box
+            component="span"
+            sx={{
+              width: swatch,
+              height: swatch,
+              borderWidth: stripe,
+              borderStyle: 'dashed',
+              borderColor: 'info.main',
+              borderRadius: '50%',
+            }}
+          />
+        </LegendItem>
+      )}
+      {showCenter && (
+        <LegendItem text={copy.legendCenter}>
+          <Box
+            component="span"
+            sx={{ width: rem(theme, 10), height: rem(theme, 10), bgcolor: 'primary.main', borderRadius: '50%' }}
+          />
+        </LegendItem>
+      )}
+    </Box>
+  );
+}
+
+function LegendItem({ text, children }: { text: string; children: React.ReactNode }): React.JSX.Element {
+  return (
+    <Box component="span" sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.75 }}>
+      {children}
+      <Typography component="span" variant="caption" color="text.secondary">
+        {text}
+      </Typography>
+    </Box>
+  );
+}

package/src/components/data-display/RegionMap/RegionMapList.tsx

@@ -0,0 +1,167 @@
+import Check from '@mui/icons-material/Check';
+import Box from '@mui/material/Box/index.js';
+import Button from '@mui/material/Button/index.js';
+import Chip from '@mui/material/Chip/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
+import React from 'react';
+
+import { rem } from '../../../tokens/relative';
+import { SR_ONLY_SX } from '../../form/Label/Label.styles';
+
+import type {
+  RegionMapCopy,
+  RegionMapListMode,
+  RegionMapListSort,
+  RegionMapProps,
+  RegionMapRegion,
+} from './RegionMap.types';
+
+/** The areas with a row: `listed`, defaulting to "not outside". */
+export function listedRegions(
+  regions: readonly RegionMapRegion[],
+  sort: RegionMapListSort,
+): RegionMapRegion[] {
+  const listed = regions.filter((region) => region.listed ?? region.outside !== true);
+  return sort === 'name' ? [...listed].sort((a, b) => a.name.localeCompare(b.name)) : listed;
+}
+
+/**
+ * Every listed area as a toggle button — the keyboard's and the screen
+ * reader's map, and the way to an area too small to tap. `collapsed` puts it
+ * behind one button that names the count; `shown` lays it out with a heading.
+ */
+export function RegionMapList({
+  regions,
+  copy,
+  mode,
+  sort,
+  onToggle,
+  testId,
+  theme,
+}: {
+  regions: readonly RegionMapRegion[];
+  copy: RegionMapCopy;
+  mode: Exclude<RegionMapListMode, 'none'>;
+  sort: RegionMapListSort;
+  onToggle: RegionMapProps['onToggle'];
+  testId: string;
+  theme: Theme;
+}): React.JSX.Element {
+  const [open, setOpen] = React.useState(false);
+  const listId = `${React.useId().replace(/:/g, '')}-list`;
+  const rows = listedRegions(regions, sort);
+  const visible = mode === 'shown' || open;
+  return (
+    <Box sx={{ mt: 1 }}>
+      {mode === 'collapsed' && (
+        <Button
+          variant="text"
+          size="small"
+          aria-expanded={open}
+          aria-controls={listId}
+          onClick={() => setOpen((current) => !current)}
+          data-testid={`${testId}-list-toggle`}
+          sx={{ px: 0 }}
+        >
+          {open ? copy.hideList : copy.showList(rows.length)}
+        </Button>
+      )}
+      {visible && (
+        <Box id={listId} role="group" aria-label={copy.listLabel} data-testid={`${testId}-list`} sx={{ mt: 1 }}>
+          {mode === 'shown' && (
+            <Typography variant="caption" component="p" sx={{ fontWeight: 700, color: 'text.secondary', mb: 0.5 }}>
+              {copy.listLabel}
+            </Typography>
+          )}
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+            {rows.map((region) => (
+              <RegionRow
+                key={region.id}
+                region={region}
+                states={copy.rowState}
+                onToggle={onToggle}
+                testId={testId}
+                theme={theme}
+              />
+            ))}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/** The focus ring every row shows from the keyboard, pressed or not. */
+function focusRing(theme: Theme): { outline: string; outlineOffset: string } {
+  return { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 2) };
+}
+
+/** A row's look: inverted when pressed, holding under hover and focus. */
+function rowSx(pressed: boolean, outside: boolean, theme: Theme): SxProps<Theme> {
+  const ring = focusRing(theme);
+  if (!pressed) {
+    return { color: outside ? 'text.secondary' : 'text.primary', '&.Mui-focusVisible': ring };
+  }
+  const inverted = { bgcolor: 'text.primary', color: 'background.paper' };
+  return {
+    ...inverted,
+    '& .MuiChip-icon': { color: 'inherit' },
+    '&:hover': inverted,
+    '&.Mui-focusVisible': { ...inverted, ...ring },
+  };
+}
+
+/** The state a screen reader hears after the name, if any. */
+function rowState(pressed: boolean, outside: boolean, states: RegionMapCopy['rowState']): string | null {
+  if (pressed) return states.excluded;
+  return outside ? states.outside : null;
+}
+
+/**
+ * One area: pressed, filled and checked when excluded — never colour alone —
+ * with its state spelled out for a screen reader. The inverted colours hold
+ * under hover and keyboard focus, where MUI's own would wash them out.
+ */
+function RegionRow({
+  region,
+  states,
+  onToggle,
+  testId,
+  theme,
+}: {
+  region: RegionMapRegion;
+  states: RegionMapCopy['rowState'];
+  onToggle: RegionMapProps['onToggle'];
+  testId: string;
+  theme: Theme;
+}): React.JSX.Element {
+  const pressed = region.excluded === true;
+  const sx = rowSx(pressed, region.outside === true, theme);
+  const state = rowState(pressed, region.outside === true, states);
+  return (
+    <Chip
+      data-testid={`${testId}-row-${region.id}`}
+      label={
+        <Box component="span" sx={{ display: 'inline-flex', gap: 0.75, alignItems: 'baseline' }}>
+          <span>{region.name}</span>
+          {region.detail && (
+            <Box component="span" sx={{ fontSize: rem(theme, 11), opacity: 0.75 }}>
+              {region.detail}
+            </Box>
+          )}
+          {state && (
+            <Box component="span" sx={SR_ONLY_SX}>
+              {state}
+            </Box>
+          )}
+        </Box>
+      }
+      icon={pressed ? <Check fontSize="small" /> : undefined}
+      variant={pressed ? 'filled' : 'outlined'}
+      aria-pressed={onToggle ? pressed : undefined}
+      onClick={onToggle ? () => onToggle(region.id) : undefined}
+      sx={sx}
+    />
+  );
+}

package/src/components/data-display/RegionMap/index.ts

@@ -0,0 +1,13 @@
+export { RegionMap } from './RegionMap';
+export { decodePolyline, hitRegion, projectionAt } from './RegionMap.helpers';
+export type { AreaGeometry, PlanePoint, PlaneRegion } from './RegionMap.helpers';
+export type {
+  RegionMapCircle,
+  RegionMapCopy,
+  RegionMapListMode,
+  RegionMapListSort,
+  RegionMapPoint,
+  RegionMapProps,
+  RegionMapRegion,
+  RegionMapRing,
+} from './RegionMap.types';

package/src/components/data-display/RegionMap/tests.md

@@ -0,0 +1,22 @@
+# RegionMap Test Status Tracking
+
+## Test Files Status
+
+- [x] `RegionMap.test.stories.tsx` created
+- [x] `__tests__/region-map-helpers.test.ts` — the geometry: even-odd with a
+      hole, distance, which area a tap means (hole, smallest, sliver within the
+      tolerance even from inside a big neighbour, nothing beyond it), the view,
+      label placement, `extent` on 200k values, the projection and the decoder
+- [x] `__tests__/region-map.test.tsx` — what is drawn (areas, hatch + name for
+      excluded only, several highlights, nothing with no centre and no areas),
+      what a tap reports, read-only, and the list (collapsed by default with its
+      count, `aria-expanded`, `aria-pressed`, state in words, outside areas off
+      the list and out of the count, `listed`, sort by name, detail, `none`)
+
+## Storybook Tests Status
+
+| Test Name | Status | Pass/Fail | Notes |
+| --- | --- | --- | --- |
+| A tap on an area reports its id | Written | — | `test-storybook` is not in this repo's CI; jsdom twin in `region-map.test.tsx` |
+| Excluded areas are hatched and named | Written | — | same |
+| The collapsed list opens and toggles from the keyboard | Written | — | same |

package/src/components/data-display/RegionMap/track.md

@@ -0,0 +1,13 @@
+# RegionMap
+
+A hand-drawn map of named areas around a centre; a tap toggles an area.
+Product-free — built for a delivery host's excluded neighbourhoods, named for
+what it draws.
+
+## Status
+
+- [x] Component, types, helpers, fixtures (real IBGE outlines, public data)
+- [x] Docs (`RegionMap.md`), stories, test stories, vitest suites
+- [x] Catalog entry, `data-display` export, `entries.json` subpath
+- [ ] React Native build — not planned until a native host needs it
+- [ ] Zoom and pan — the list covers areas too small to tap

package/src/components/data-display/index.ts

@@ -21,6 +21,7 @@ export * from './FleetMap';
 export * from './MapPreview';
 export * from './Popover';
 export * from './Progress';
+export * from './RegionMap';
 export * from './SectionOnboarding/SectionOnboarding';
 export * from './Sheet';
 export * from './StatCard';

package/dist/chunk-CDCTLPMD.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-CDCTLPMD.js.map