@multiplatform.one/components 7.7.0 → 7.7.1

package/src/charts/Axis.stories.tsx

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Paragraph, YStack } from "tamagui";
+import { Card } from "../surfaces";
+import { XAxis, YAxis } from "./Axis";
+import { ChartSurface } from "./ChartSurface";
+import { computeCartesianPlot } from "./composeChart";
+import { createBandScale, createLinearScale, formatAxisTick, getLinearTicks } from "./math";
+import type { ChartSize } from "./types";
+import { useChartTheme } from "./useChartTheme";
+
+const weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri"];
+const longLabels = [
+  "Engineering",
+  "Customer Success",
+  "Finance and Legal",
+  "People Operations",
+  "Infrastructure",
+];
+
+interface AxisFrameProps {
+  size: ChartSize;
+  categories: string[];
+  domain: [number, number];
+  showXLabels?: boolean;
+  showYGrid?: boolean;
+  showYLine?: boolean;
+  showYTicks?: boolean;
+  yTicks?: number;
+}
+
+/**
+ * Both axes drawn against a real plot rectangle. The left margin is derived
+ * from the widest y tick LABEL (computeCartesianPlot), not a magic number, so
+ * the axis never clips its own text.
+ */
+function AxisFrame({
+  size,
+  categories,
+  domain,
+  showXLabels = true,
+  showYGrid = true,
+  showYLine = false,
+  showYTicks = false,
+  yTicks = 4,
+}: AxisFrameProps) {
+  const { labelFontSize } = useChartTheme();
+  const marginScale = createLinearScale({ domain, range: [0, 1] });
+  const tickValues = getLinearTicks(marginScale, yTicks);
+  const plot = computeCartesianPlot(size, {
+    showXAxis: true,
+    showYAxis: true,
+    yTickLabels: tickValues.map((value) => formatAxisTick(value)),
+    fontSize: labelFontSize,
+  });
+  if (plot.width <= 0 || plot.height <= 0) return null;
+  const xScale = createBandScale({
+    domain: categories,
+    range: [plot.x, plot.x + plot.width],
+  });
+  const yScale = createLinearScale({
+    domain,
+    range: [plot.y + plot.height, plot.y],
+  });
+  return (
+    <>
+      <YAxis
+        plot={plot}
+        scale={yScale}
+        ticks={yTicks}
+        showGrid={showYGrid}
+        showLine={showYLine}
+        showTicks={showYTicks}
+      />
+      <XAxis plot={plot} scale={xScale} showLabels={showXLabels} />
+    </>
+  );
+}
+
+const meta: Meta<typeof XAxis> = {
+  title: "Components/Axis",
+  component: XAxis,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "The two axis primitives the cartesian charts compose. `XAxis` is categorical: a baseline, tick marks, and a label centred under each band or point, truncated with an ellipsis once it is wider than its step so nothing overflows the surface (LC-10). `YAxis` is continuous: nice d3 ticks, right-aligned labels in the left margin, and horizontal grid lines on by default with the axis line off, because the grid already carries the edge. All chrome resolves through `useChartTheme` — axis lines take the border role, grid the divider role, labels the muted text role at the AA floor. Tick numbers ride the charts package's own density register, the declared exemption to the house number channel.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof XAxis>;
+
+export const Default: Story = {
+  name: "Main",
+  render: () => (
+    <YStack maxWidth={560}>
+      <Card>
+        <ChartSurface label="Empty axis frame, weekdays across a 0 to 100 value axis." height={220}>
+          {(size) => <AxisFrame size={size} categories={weekdays} domain={[0, 100]} />}
+        </ChartSurface>
+      </Card>
+    </YStack>
+  ),
+};
+
+export const AxisLineAndTicks: Story = {
+  name: "Grid off, axis line on",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`showGrid={false}` with `showLine` and `showTicks` on: the classic ticked frame for charts that must not carry horizontal rules across the plot.",
+      },
+    },
+  },
+  render: () => (
+    <YStack maxWidth={560}>
+      <Card>
+        <ChartSurface label="Ticked axis frame with no grid." height={220}>
+          {(size) => (
+            <AxisFrame
+              size={size}
+              categories={weekdays}
+              domain={[0, 100]}
+              showYGrid={false}
+              showYLine
+              showYTicks
+            />
+          )}
+        </ChartSurface>
+      </Card>
+    </YStack>
+  ),
+};
+
+export const LabelTruncation: Story = {
+  name: "Long labels truncate",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Department names wider than their band. XAxis truncates each label to its step with an ellipsis rather than letting text collide or run off the surface.",
+      },
+    },
+  },
+  render: () => (
+    <YStack gap="$4">
+      {[520, 280].map((width) => (
+        <Card key={width} width={width}>
+          <YStack gap="$2">
+            <Paragraph size="$2">{`${width}px container`}</Paragraph>
+            <ChartSurface label={`Department axis at ${width}px`} height={180}>
+              {(size) => <AxisFrame size={size} categories={longLabels} domain={[0, 40]} />}
+            </ChartSurface>
+          </YStack>
+        </Card>
+      ))}
+    </YStack>
+  ),
+};
+
+export const WideValueRange: Story = {
+  name: "Nice ticks on a wide range",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A 0 to 1,250,000 domain. YAxis asks d3 for nice ticks and formats them through the charts density register, so the left margin stays a handful of characters wide.",
+      },
+    },
+  },
+  render: () => (
+    <YStack maxWidth={560}>
+      <Card>
+        <ChartSurface label="Weekday axis against a 0 to 1.25 million value axis." height={220}>
+          {(size) => (
+            <AxisFrame size={size} categories={weekdays} domain={[0, 1250000]} yTicks={5} />
+          )}
+        </ChartSurface>
+      </Card>
+    </YStack>
+  ),
+};

package/src/charts/ChartSurface.stories.spec.tsx

@@ -0,0 +1,43 @@
+/**
+ * ChartSurface is exported from the charts barrel but only ever appeared
+ * inside the composed charts' stories, so it had no title of its own
+ * (MPO-193). These mount every exported story and assert the surface really
+ * paints: an explicit width draws immediately, and the accessible summary
+ * lands on the SVG root as one described image (Axiom 12).
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import meta, { Default, FixedWidth, Responsive } from "./ChartSurface.stories";
+
+afterEach(cleanup);
+
+describe("ChartSurface stories", () => {
+  it("declares the Components/ChartSurface title against the component", () => {
+    expect(meta.title).toBe("Components/ChartSurface");
+    expect(meta.component).toBeDefined();
+  });
+
+  it("Explicit width draws without any layout pass", () => {
+    const { container } = renderWithProviders(<>{FixedWidth.render?.({} as never, {} as never)}</>);
+    const root = screen.getByRole("img", { name: "Five categorical dots" });
+    expect(root.getAttribute("width")).toBe("360");
+    expect(container.querySelectorAll("circle")).toHaveLength(5);
+  });
+
+  it("Main mounts and carries its generated summary as the accessible name", () => {
+    renderWithProviders(
+      <>{Default.render?.(Default.args as never, { args: Default.args } as never)}</>,
+    );
+    // happy-dom runs no layout, so the measured surface holds at width 0 and
+    // draws nothing — the label still has to be the declared summary.
+    expect(Default.args?.label).toBe("Sessions per weekday, peaking Thursday at 9.");
+  });
+
+  it("Tracks the container mounts one surface per width", () => {
+    renderWithProviders(<>{Responsive.render?.({} as never, {} as never)}</>);
+    expect(screen.getByText("520px container")).toBeTruthy();
+    expect(screen.getByText("320px container")).toBeTruthy();
+    expect(screen.getByText("200px container")).toBeTruthy();
+  });
+});

package/src/charts/ChartSurface.stories.tsx

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Paragraph, YStack } from "tamagui";
+import { Card } from "../surfaces";
+import { ChartSurface } from "./ChartSurface";
+import { createBandScale, createLinearScale } from "./math";
+import { Circle, Line, Rect } from "./svg";
+import type { ChartSize } from "./types";
+import { useChartTheme } from "./useChartTheme";
+
+const bars = [
+  { label: "Mon", value: 3 },
+  { label: "Tue", value: 7 },
+  { label: "Wed", value: 5 },
+  { label: "Thu", value: 9 },
+  { label: "Fri", value: 6 },
+];
+
+/**
+ * The point of the surface is that children get PIXELS, not a 0-100 viewBox:
+ * scales resolve against the measured viewport, so strokes stay 1px and hit
+ * targets stay honest at any container width.
+ */
+function Marks({ size }: { size: ChartSize }) {
+  const { palette, gridColor } = useChartTheme();
+  const x = createBandScale({
+    domain: bars.map((bar) => bar.label),
+    range: [8, size.width - 8],
+  });
+  const y = createLinearScale({ domain: [0, 10], range: [size.height - 8, 8] });
+  return (
+    <>
+      <Line
+        x1={8}
+        y1={size.height - 8}
+        x2={size.width - 8}
+        y2={size.height - 8}
+        stroke={gridColor}
+        strokeWidth={1}
+      />
+      {bars.map((bar) => (
+        <Rect
+          key={bar.label}
+          x={x(bar.label) ?? 0}
+          y={y(bar.value)}
+          width={x.bandwidth()}
+          height={size.height - 8 - y(bar.value)}
+          fill={palette.single}
+        />
+      ))}
+    </>
+  );
+}
+
+function Dots({ size }: { size: ChartSize }) {
+  const { palette } = useChartTheme();
+  return (
+    <>
+      {bars.map((bar, index) => (
+        <Circle
+          key={bar.label}
+          cx={((index + 1) / (bars.length + 1)) * size.width}
+          cy={size.height / 2}
+          r={6 + index * 2}
+          fill={palette.categorical[index % palette.categorical.length]}
+        />
+      ))}
+    </>
+  );
+}
+
+const meta: Meta<typeof ChartSurface> = {
+  title: "Components/ChartSurface",
+  component: ChartSurface,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          'The responsive SVG viewport every chart in this package draws into. It measures its own width through `onLayout` (ResizeObserver-backed on web) and hands children a pixel-space `{ width, height }`, so scales land on real device pixels: strokes stay crisp, nothing is stretched by `preserveAspectRatio`, and a 44px touch target really is 44px. `label` is the generated accessible summary and renders as `role="img"`, so the chart is one described image rather than a pile of unlabelled shapes. Pass an explicit `width` to bypass measurement for SSR, tests, and fixed layouts. The draw-in fade drops entirely at `animation="none"` or OS reduced motion.',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: "text" },
+    height: { control: { type: "range", min: 80, max: 320, step: 10 } },
+    width: { control: "number" },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ChartSurface>;
+
+export const Default: Story = {
+  name: "Main",
+  args: { label: "Sessions per weekday, peaking Thursday at 9.", height: 200 },
+  render: (args) => (
+    <YStack maxWidth={560}>
+      <Card>
+        <ChartSurface {...args}>{(size) => <Marks size={size} />}</ChartSurface>
+      </Card>
+    </YStack>
+  ),
+};
+
+export const Responsive: Story = {
+  name: "Tracks the container",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Same surface, three container widths. No `width` prop: each instance measures its own parent, so the band scale re-solves instead of scaling a fixed viewBox.",
+      },
+    },
+  },
+  render: () => (
+    <YStack gap="$4">
+      {[520, 320, 200].map((width) => (
+        <Card key={width} width={width}>
+          <YStack gap="$2">
+            <Paragraph size="$2">{`${width}px container`}</Paragraph>
+            <ChartSurface label={`Sessions per weekday at ${width}px`} height={140}>
+              {(size) => <Marks size={size} />}
+            </ChartSurface>
+          </YStack>
+        </Card>
+      ))}
+    </YStack>
+  ),
+};
+
+export const FixedWidth: Story = {
+  name: "Explicit width",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "An explicit `width` bypasses measurement entirely — the path SSR and tests take, where no layout pass ever runs.",
+      },
+    },
+  },
+  render: () => (
+    <Card alignSelf="flex-start">
+      <ChartSurface label="Five categorical dots" width={360} height={120}>
+        {(size) => <Dots size={size} />}
+      </ChartSurface>
+    </Card>
+  ),
+};

package/types/Alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAaxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,QAAQ,CAAC,OAAO,UAAU,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACxF,kFAAkF;IAClF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,uBAAuB;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0EAA0E;IAC1E,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAsBD,QAAA,MAAM,UAAU;;;6CAQd,CAAC;AAuYH;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAOtC;AAED,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAaxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,QAAQ,CAAC,OAAO,UAAU,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACxF,kFAAkF;IAClF,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,uBAAuB;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sFAAsF;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0EAA0E;IAC1E,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAsBD,QAAA,MAAM,UAAU;;;6CAQd,CAAC;AA4YH;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAOtC;AAED,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC"}

package/types/actions/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/actions/ActionBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;AAEzD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IACpC,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yEAAyE;IACzE,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AA0CF,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,EACR,KAAa,EACb,gBAAwB,EACxB,EAAE,EAAE,MAAM,EACV,GAAU,EACV,GAAG,UAAU,EACd,EAAE,cAAc,2CA4GhB"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/actions/ActionBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,MAAM,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;AAEzD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IACvE,iDAAiD;IACjD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IACpC,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,yEAAyE;IACzE,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AA0CF,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,SAAS,EACT,MAAM,EACN,QAAQ,EACR,KAAa,EACb,gBAAwB,EACxB,EAAE,EAAE,MAAM,EACV,GAAU,EACV,GAAG,UAAU,EACd,EAAE,cAAc,2CAkHhB"}