@multiplatform.one/components 7.6.3 → 7.7.1

package/src/SortableList/SortableList.spec.tsx

@@ -1,9 +1,14 @@
 import { fireEvent } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { SortableList } from "./index";
 
+const here = dirname(fileURLToPath(import.meta.url));
+
 const ITEMS = [
   { id: "mon", label: "Monday standup" },
   { id: "tue", label: "Tuesday review" },
@@ -14,10 +19,14 @@ const ITEMS = [
 function Harness({
   onChange = vi.fn(),
   readOnly,
+  disabled,
+  compact,
   canReorder,
 }: {
   onChange?: (next: typeof ITEMS) => void;
   readOnly?: boolean;
+  disabled?: boolean;
+  compact?: boolean;
   canReorder?: (item: (typeof ITEMS)[number], index: number) => boolean;
 }) {
   const [items, setItems] = useState(ITEMS);
@@ -28,6 +37,8 @@ function Harness({
       getLabel={(item) => item.label}
       canReorder={canReorder}
       readOnly={readOnly}
+      disabled={disabled}
+      compact={compact}
       onChange={(next) => {
         setItems(next);
         onChange(next);
@@ -119,4 +130,34 @@ describe("SortableList", () => {
     const { container } = renderWithProviders(<Harness readOnly />);
     expect(container.querySelectorAll("[data-sortable-handle]")).toHaveLength(0);
   });
+
+  it("renders no handles when disabled (board 04)", () => {
+    const { container } = renderWithProviders(<Harness disabled />);
+    expect(container.querySelectorAll("[data-sortable-handle]")).toHaveLength(0);
+  });
+
+  it("renders emptyMessage when there are no rows (board 04)", () => {
+    const { container } = renderWithProviders(
+      <SortableList
+        items={[]}
+        getId={(item: { id: string }) => item.id}
+        getLabel={(item: { label: string }) => item.label}
+        emptyMessage="No rows yet"
+      />,
+    );
+    expect(container.textContent).toContain("No rows yet");
+    expect(container.querySelectorAll("[data-sortable-row]")).toHaveLength(0);
+  });
+
+  it("compact still renders grab handles (LC-76: density does not drop controls)", () => {
+    const { container } = renderWithProviders(<Harness compact />);
+    expect(container.querySelectorAll("[data-sortable-handle]")).toHaveLength(4);
+    expect(container.querySelector('[role="list"]')).toBeTruthy();
+  });
+
+  it("spreads the outer radius fragment on the list frame, not the nested alias", () => {
+    const src = readFileSync(join(here, "index.tsx"), "utf8");
+    expect(src).toContain("{...knobProps.borderRadius}");
+    expect(src).not.toContain("knobProps.borderRadiusOuter");
+  });
 });

package/src/SortableList/SortableList.stories.tsx

@@ -21,13 +21,27 @@ const meta: Meta<typeof SortableList> = {
       },
     },
   },
+  argTypes: {
+    disabled: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    compact: { control: "boolean" },
+    disabledStyle: { control: "select", options: ["keepLabel", "dimWhole"] },
+    emptyMessage: { control: "text" },
+  },
 };
 export default meta;
 
 type Story = StoryObj<typeof SortableList>;
 
-function Demo(props: { readOnly?: boolean; locked?: string }) {
-  const [items, setItems] = useState(SEED);
+function Demo(props: {
+  readOnly?: boolean;
+  locked?: string;
+  disabled?: boolean;
+  compact?: boolean;
+  empty?: boolean;
+  disabledStyle?: "keepLabel" | "dimWhole";
+}) {
+  const [items, setItems] = useState(props.empty ? [] : SEED);
   return (
     <SortableList
       items={items}
@@ -35,6 +49,10 @@ function Demo(props: { readOnly?: boolean; locked?: string }) {
       getLabel={(item) => item.label}
       canReorder={props.locked ? (item) => item.id !== props.locked : undefined}
       readOnly={props.readOnly}
+      disabled={props.disabled}
+      compact={props.compact}
+      disabledStyle={props.disabledStyle}
+      emptyMessage="No rows yet"
       onChange={setItems}
       aria-label="Sprint rituals"
     />
@@ -53,3 +71,18 @@ export const ReadOnly: Story = {
 export const LockedRow: Story = {
   render: () => <Demo locked="tue" />,
 };
+
+/** Board 04 — empty is a real state, not an error. */
+export const Empty: Story = {
+  render: () => <Demo empty />,
+};
+
+/** Board 04 — disabled list keeps labels, drops the handles. */
+export const Disabled: Story = {
+  render: () => <Demo disabled />,
+};
+
+/** Board 04 — compact nested well. */
+export const Compact: Story = {
+  render: () => <Demo compact />,
+};

package/src/SortableList/index.tsx

@@ -90,7 +90,7 @@ export function SortableList<T>({
     <YStack
       ref={containerRef as never}
       {...knobProps.surface}
-      {...knobProps.borderRadiusOuter}
+      {...knobProps.borderRadius}
       overflow="hidden"
       role="list"
       aria-label={ariaLabel}

package/src/TreeSelect/TreeSelect.stories.tsx

@@ -47,7 +47,7 @@ export default meta;
 
 type Story = StoryObj<typeof TreeSelect>;
 
-export const Account: Story = {
+export const Default: Story = {
   render: function Render() {
     const [value, setValue] = useState("hdfc");
     return (
@@ -67,6 +67,31 @@ export const Account: Story = {
   },
 };
 
+export const Open: Story = {
+  render: function Render() {
+    const [value, setValue] = useState("hdfc");
+    const [open, setOpen] = useState(true);
+    return (
+      <YStack width={280} padding="$4">
+        <TreeSelect
+          label="Account"
+          nodes={accounts}
+          value={value}
+          onChange={setValue}
+          open={open}
+          onOpenChange={setOpen}
+          placeholder="Select account"
+          searchPlaceholder="Filter accounts"
+          emptyMessage="No matching accounts"
+          defaultExpandedIds={["assets", "current", "bank"]}
+        />
+      </YStack>
+    );
+  },
+};
+
+export const Account: Story = Default;
+
 export const Empty: Story = {
   render: () => (
     <YStack width={280} padding="$4">
@@ -74,3 +99,53 @@ export const Empty: Story = {
     </YStack>
   ),
 };
+
+export const Disabled: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        value="hdfc"
+        disabled
+        placeholder="Select account"
+      />
+    </YStack>
+  ),
+};
+
+export const WithError: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        required
+        error="An account is required"
+        placeholder="Select account"
+      />
+    </YStack>
+  ),
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <TreeSelect
+        label="Account"
+        nodes={accounts}
+        value="hdfc"
+        readOnly
+        placeholder="Select account"
+      />
+    </YStack>
+  ),
+};
+
+export const Skeleton: Story = {
+  render: () => (
+    <YStack width={280} padding="$4">
+      <TreeSelect label="Account" nodes={accounts} skeleton placeholder="Select account" />
+    </YStack>
+  ),
+};

package/src/Wheel/Wheel.spec.tsx

@@ -272,7 +272,7 @@ describe("Wheel design-law (MPO-60)", () => {
   it("exposes named exports and no default", async () => {
     const mod = await import("./index");
     expect(mod.Wheel).toBe(Wheel);
-    expect(mod.default).toBeUndefined();
+    expect("default" in mod).toBe(false);
   });
 
   it("selected row type stays on body weight 400, never 600 (R7 / design-audit)", () => {

package/src/actions/ActionBar.stories.spec.tsx

@@ -0,0 +1,45 @@
+/**
+ * ActionBar was rendered inside DestructiveAction.stories but had no title of
+ * its own, so the gallery never listed it (MPO-193). These mount every
+ * exported story so an unrenderable one fails here, not in the Kitchen Sink.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import meta, { Alignments, CancelNeverDisabled, Default, WithSecondary } from "./ActionBar.stories";
+
+afterEach(cleanup);
+
+describe("ActionBar stories", () => {
+  it("declares the Components/ActionBar title against the component", () => {
+    expect(meta.title).toBe("Components/ActionBar");
+    expect(meta.component).toBeDefined();
+  });
+
+  it("Main renders the cancel and primary slots", () => {
+    renderWithProviders(
+      <>{Default.render?.(Default.args as never, { args: Default.args } as never)}</>,
+    );
+    expect(screen.getByText("Cancel")).toBeTruthy();
+    expect(screen.getByText("Save changes")).toBeTruthy();
+  });
+
+  it("Cancel + secondary + primary renders every slot", () => {
+    renderWithProviders(<>{WithSecondary.render?.({} as never, {} as never)}</>);
+    expect(screen.getByText("Cancel")).toBeTruthy();
+    expect(screen.getByText("Save draft")).toBeTruthy();
+    expect(screen.getByText("Preview")).toBeTruthy();
+    expect(screen.getByText("Publish")).toBeTruthy();
+  });
+
+  it("Alignments renders one bar per align value", () => {
+    renderWithProviders(<>{Alignments.render?.({} as never, {} as never)}</>);
+    expect(screen.getAllByText("Confirm")).toHaveLength(3);
+    expect(screen.getByText('align="between"')).toBeTruthy();
+  });
+
+  it("the cancel-disabled story still paints a reachable cancel", () => {
+    renderWithProviders(<>{CancelNeverDisabled.render?.({} as never, {} as never)}</>);
+    expect(screen.getByText("Cancel")).toBeTruthy();
+  });
+});

package/src/actions/ActionBar.stories.tsx

@@ -0,0 +1,161 @@
+import { Button } from "@multiplatform.one/forms";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Paragraph, YStack } from "tamagui";
+import { Card } from "../surfaces";
+import { ActionBar, type ActionBarProps } from "./ActionBar";
+
+/**
+ * Presses land in the story itself rather than the Actions panel: the panel's
+ * `action()` pulls the Storybook preview runtime into the module graph, which
+ * the package's own vitest run cannot load, and the colocated spec mounts
+ * these stories for real.
+ */
+function useLastPressed() {
+  const [last, setLast] = useState<string | null>(null);
+  return {
+    last,
+    press: (label: string) => () => setLast(label),
+    readout: (
+      <Paragraph size="$2" color="$color11">
+        {last === null ? "No action pressed yet." : `Last pressed: ${last}`}
+      </Paragraph>
+    ),
+  };
+}
+
+const meta: Meta<typeof ActionBar> = {
+  title: "Components/ActionBar",
+  component: ActionBar,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "The action row. Slots (`primary`, `secondary`, `cancel`) keep the primary singular by construction and order the row cancel → secondary → primary, so the trailing default lands under the thumb. `align` picks the justification: `end` for dialogs and toolbars, `start` for page-level forms. DG-ACT-05 strips `disabled` off the cancel slot and DEV-warns; DG-ACT-01 DEV-warns on a second primary, including one composed into free children; DG-OVL-04 DEV-warns past two actions inside a dialog region unless `allowManyActions` ejects.",
+      },
+    },
+  },
+  argTypes: {
+    align: { control: "radio", options: ["start", "end", "between"] },
+    allowManyActions: { control: "boolean" },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ActionBar>;
+
+function Basic(args: Partial<ActionBarProps>) {
+  const { press, readout } = useLastPressed();
+  return (
+    <Card maxWidth={480}>
+      <YStack gap="$3">
+        {readout}
+        <ActionBar
+          {...args}
+          cancel={
+            <Button chromeless onPress={press("Cancel")}>
+              Cancel
+            </Button>
+          }
+          primary={
+            <Button accent onPress={press("Save changes")}>
+              Save changes
+            </Button>
+          }
+        />
+      </YStack>
+    </Card>
+  );
+}
+
+function FullRow() {
+  const { press, readout } = useLastPressed();
+  return (
+    <Card maxWidth={520}>
+      <YStack gap="$3">
+        {readout}
+        <ActionBar
+          cancel={
+            <Button chromeless onPress={press("Cancel")}>
+              Cancel
+            </Button>
+          }
+          secondary={[
+            <Button key="draft" onPress={press("Save draft")}>
+              Save draft
+            </Button>,
+            <Button key="preview" onPress={press("Preview")}>
+              Preview
+            </Button>,
+          ]}
+          primary={
+            <Button accent onPress={press("Publish")}>
+              Publish
+            </Button>
+          }
+        />
+      </YStack>
+    </Card>
+  );
+}
+
+export const Default: Story = {
+  name: "Main",
+  args: { align: "end" },
+  render: (args) => <Basic {...args} />,
+};
+
+export const WithSecondary: Story = {
+  name: "Cancel + secondary + primary",
+  render: () => <FullRow />,
+};
+
+export const Alignments: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={520}>
+      {(["start", "end", "between"] as const).map((align) => (
+        <Card key={align}>
+          <YStack gap="$2">
+            <Paragraph size="$2">{`align="${align}"`}</Paragraph>
+            <ActionBar
+              align={align}
+              cancel={<Button chromeless>Cancel</Button>}
+              primary={<Button accent>Confirm</Button>}
+            />
+          </YStack>
+        </Card>
+      ))}
+    </YStack>
+  ),
+};
+
+export const CancelNeverDisabled: Story = {
+  name: "Cancel is never disabled",
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "DG-ACT-05: the cancel slot is handed `disabled`, the prop is stripped, and DEV logs `[actions] cancel-disabled`. A dismissal a user cannot reach is a trap, so the escape hatch stays live even while the primary is blocked. Open the console to see the warn.",
+      },
+    },
+  },
+  render: () => {
+    return (
+      <Card maxWidth={480}>
+        <ActionBar
+          cancel={
+            <Button chromeless disabled>
+              Cancel
+            </Button>
+          }
+          primary={
+            <Button accent disabled>
+              Save changes
+            </Button>
+          }
+        />
+      </Card>
+    );
+  },
+};

package/src/actions/ActionBar.tsx

@@ -10,6 +10,7 @@
 
 import {
   Children,
+  Fragment,
   cloneElement,
   isValidElement,
   useEffect,
@@ -194,10 +195,16 @@ export function ActionBar({
       width="100%"
       {...stackProps}
     >
+      {/* `secondaryItems` is a plain array (asArray), so rendering it bare made
+          React warn "Each child in a list should have a unique key" and name
+          the CALLER — the screen that passed a single element into the slot —
+          instead of this file. Key it here, where the array is built. */}
       {hasSlots ? (
         <>
           {cancelItems}
-          {secondaryItems}
+          {secondaryItems.map((node, index) => (
+            <Fragment key={`mp-action-secondary-${index}`}>{node}</Fragment>
+          ))}
           {primary}
         </>
       ) : null}

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

@@ -0,0 +1,86 @@
+/**
+ * XAxis and YAxis are exported from the charts barrel but had no title of
+ * their own — only the composed charts had stories (MPO-193). happy-dom runs
+ * no layout, so a measured ChartSurface stays at width 0 and draws nothing;
+ * these specs render the same axis frame at an explicit pixel size so the
+ * marks the stories show are actually asserted.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { ChartSurface } from "./ChartSurface";
+import { XAxis, YAxis } from "./Axis";
+import { computeCartesianPlot } from "./composeChart";
+import { createBandScale, createLinearScale } from "./math";
+import meta, { AxisLineAndTicks, Default, LabelTruncation, WideValueRange } from "./Axis.stories";
+
+afterEach(cleanup);
+
+const categories = ["Mon", "Tue", "Wed", "Thu", "Fri"];
+
+function Frame({ showGrid = true }: { showGrid?: boolean }) {
+  return (
+    <ChartSurface label="Axis frame" width={400} height={200}>
+      {(size) => {
+        const plot = computeCartesianPlot(size, {
+          showXAxis: true,
+          showYAxis: true,
+          yTickLabels: ["0", "25", "50", "75", "100"],
+          fontSize: 12,
+        });
+        const xScale = createBandScale({
+          domain: categories,
+          range: [plot.x, plot.x + plot.width],
+        });
+        const yScale = createLinearScale({
+          domain: [0, 100],
+          range: [plot.y + plot.height, plot.y],
+        });
+        return (
+          <>
+            <YAxis plot={plot} scale={yScale} ticks={4} showGrid={showGrid} />
+            <XAxis plot={plot} scale={xScale} />
+          </>
+        );
+      }}
+    </ChartSurface>
+  );
+}
+
+describe("Axis stories", () => {
+  it("declares the Components/Axis title against the component", () => {
+    expect(meta.title).toBe("Components/Axis");
+    expect(meta.component).toBeDefined();
+  });
+
+  it("every exported story mounts", () => {
+    for (const story of [Default, AxisLineAndTicks, LabelTruncation, WideValueRange]) {
+      renderWithProviders(<>{story.render?.({} as never, {} as never)}</>);
+      cleanup();
+    }
+    expect(true).toBe(true);
+  });
+
+  it("Long labels truncate renders both container widths", () => {
+    renderWithProviders(<>{LabelTruncation.render?.({} as never, {} as never)}</>);
+    expect(screen.getByText("520px container")).toBeTruthy();
+    expect(screen.getByText("280px container")).toBeTruthy();
+  });
+
+  it("draws one x label per category and the y grid lines at a fixed size", () => {
+    const { container } = renderWithProviders(<Frame />);
+    const labels = Array.from(container.querySelectorAll("text")).map((node) => node.textContent);
+    for (const category of categories) expect(labels).toContain(category);
+    // 4-tick hint, plus the x baseline and one tick mark per category.
+    expect(container.querySelectorAll("line").length).toBeGreaterThan(categories.length);
+  });
+
+  it("showGrid=false drops the horizontal rules", () => {
+    const withGrid = renderWithProviders(<Frame />).container.querySelectorAll("line").length;
+    cleanup();
+    const withoutGrid = renderWithProviders(<Frame showGrid={false} />).container.querySelectorAll(
+      "line",
+    ).length;
+    expect(withoutGrid).toBeLessThan(withGrid);
+  });
+});