@multiplatform.one/forms 7.6.0 → 7.6.1

package/src/fields/Barcode/BarcodePreview.stories.tsx

@@ -0,0 +1,104 @@
+/**
+ * BarcodePreview — the drawn face of the barcode field, not the input.
+ * Barcode.stories.tsx mounts the field; this file mounts the preview alone
+ * so Kitchen Sink can show QR and Code 128 without a scanner.
+ *
+ * QR polarity is themed ($color on $background). MPO-94 is Clay's call;
+ * these stories do not pin dark-on-light.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Text, XStack, YStack } from "tamagui";
+import { BarcodePreview } from "./BarcodePreview";
+
+const meta: Meta<typeof BarcodePreview> = {
+  title: "Forms/BarcodePreview",
+  component: BarcodePreview,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Canvas-free barcode/QR preview. Theme ink on theme surface in both schemes. MPO-94 (pin vs themed QR polarity) is not taken here.",
+      },
+    },
+  },
+  argTypes: {
+    value: { control: "text" },
+    format: { control: "select", options: ["code128", "qr", "qrcode"] },
+    height: { control: "number" },
+    moduleWidth: { control: "number" },
+    showText: { control: "boolean" },
+    textFallback: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BarcodePreview>;
+
+export const Main: Story = {
+  name: "Main",
+  args: {
+    value: "SKU-001234",
+    height: 36,
+    showText: true,
+  },
+};
+
+export const Code128: Story = {
+  args: {
+    value: "SKU-001234",
+    format: "code128",
+    height: 36,
+    showText: true,
+  },
+};
+
+/**
+ * QR face (MPO-53 AC-9). Height 120 so a short payload draws at a whole
+ * pixel per module. Polarity stays themed — MPO-94 is not this lane.
+ */
+export const Qr: Story = {
+  args: {
+    value: "SHC-42",
+    format: "qr",
+    height: 120,
+    showText: true,
+  },
+};
+
+/** Host owns the empty marker; the preview paints nothing. */
+export const Empty: Story = {
+  render: () => (
+    <YStack gap="$2">
+      <Text fontSize="$2" color="$color10">
+        empty value — preview is null
+      </Text>
+      <BarcodePreview value="" format="qr" height={72} />
+    </YStack>
+  ),
+};
+
+/**
+ * Themed polarity specimen. Both faces paint $color on $background, so a
+ * scheme flip restyles them with the rest of the screen. Do not treat this
+ * as a pin-to-dark-on-light preview; that decision lives on MPO-94.
+ */
+export const ThemedPolarity: Story = {
+  render: () => (
+    <XStack gap="$6" flexWrap="wrap" padding="$4" alignItems="flex-end">
+      <YStack gap="$2" alignItems="center">
+        <Text fontSize="$2" color="$color10">
+          QR (themed)
+        </Text>
+        <BarcodePreview value="SHC-42" format="qr" height={120} showText />
+      </YStack>
+      <YStack gap="$2" alignItems="center">
+        <Text fontSize="$2" color="$color10">
+          Code 128 (themed)
+        </Text>
+        <BarcodePreview value="SKU-001234" format="code128" height={36} showText />
+      </YStack>
+    </XStack>
+  ),
+};

package/src/fields/ColorPicker/PresetSwatches.spec.tsx

@@ -0,0 +1,71 @@
+/**
+ * PresetSwatches spec (MPO-117). The row is a radiogroup of swatches.
+ * ColorPicker owns the popover; this file only covers the exported grid.
+ */
+
+import { fireEvent, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { PresetSwatches } from "./parts";
+
+vi.mock("@tamagui/lucide-icons-2", () => ({
+  Palette: () => null,
+  X: () => null,
+  Check: () => null,
+  Pipette: () => null,
+}));
+
+const BRAND = ["#1E40AF", "#3B82F6", "#BFDBFE"];
+
+describe("PresetSwatches", () => {
+  it("renders a radiogroup of radios for each preset", () => {
+    renderWithProviders(
+      <PresetSwatches presetColors={BRAND} selectedColor="#3B82F6" onSelect={vi.fn()} />,
+    );
+    expect(screen.getByRole("radiogroup", { name: "Color presets" })).toBeTruthy();
+    const radios = screen.getAllByRole("radio");
+    expect(radios).toHaveLength(BRAND.length);
+  });
+
+  it("marks the selected hex aria-checked", () => {
+    renderWithProviders(
+      <PresetSwatches presetColors={BRAND} selectedColor="#3B82F6" onSelect={vi.fn()} />,
+    );
+    const selected = screen.getByRole("radio", { name: "Color #3B82F6" });
+    expect(selected.getAttribute("aria-checked")).toBe("true");
+    const other = screen.getByRole("radio", { name: "Color #1E40AF" });
+    expect(other.getAttribute("aria-checked")).toBe("false");
+  });
+
+  it("onSelect fires with the hex of the pressed swatch", () => {
+    const onSelect = vi.fn();
+    renderWithProviders(
+      <PresetSwatches presetColors={BRAND} selectedColor={null} onSelect={onSelect} />,
+    );
+    fireEvent.click(screen.getByRole("radio", { name: "Color #1E40AF" }));
+    expect(onSelect).toHaveBeenCalledWith("#1E40AF");
+  });
+
+  it("empty presetColors renders nothing", () => {
+    const { container } = renderWithProviders(
+      <PresetSwatches presetColors={[]} selectedColor={null} onSelect={vi.fn()} />,
+    );
+    expect(container.querySelector('[role="radiogroup"]')).toBeNull();
+    expect(container.textContent).toBe("");
+  });
+
+  it("null entry is the no-color radio and reports null", () => {
+    const onSelect = vi.fn();
+    renderWithProviders(
+      <PresetSwatches
+        presetColors={[{ name: "None", value: null }, "#3B82F6"]}
+        selectedColor={null}
+        onSelect={onSelect}
+      />,
+    );
+    const none = screen.getByRole("radio", { name: "None" });
+    expect(none.getAttribute("aria-checked")).toBe("true");
+    fireEvent.click(screen.getByRole("radio", { name: "Color #3B82F6" }));
+    expect(onSelect).toHaveBeenCalledWith("#3B82F6");
+  });
+});

package/src/fields/ColorPicker/PresetSwatches.stories.tsx

@@ -0,0 +1,94 @@
+/**
+ * PresetSwatches — the color-preset row ColorPicker embeds. Exported from
+ * the forms barrel, previously invisible in Kitchen Sink because it had no
+ * story of its own.
+ */
+
+import { action } from "@multiplatform.one/storybook";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { Text, YStack } from "tamagui";
+import { PresetSwatches } from "./parts";
+
+const BRAND = ["#1E40AF", "#1D4ED8", "#2563EB", "#3B82F6", "#60A5FA", "#93C5FD", "#BFDBFE"];
+
+const meta: Meta<typeof PresetSwatches> = {
+  title: "Forms/PresetSwatches",
+  component: PresetSwatches,
+  parameters: {
+    status: { type: "stable" },
+    docs: {
+      description: {
+        component:
+          "Radiogroup of preset color swatches. Named entries, hex strings, and a null 'no color' chip.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PresetSwatches>;
+
+export const Main: Story = {
+  name: "Main",
+  render: () => {
+    const Example = () => {
+      const [selected, setSelected] = useState<string | null>(BRAND[3]);
+      return (
+        <YStack gap="$3" padding="$4" width={280}>
+          <PresetSwatches
+            presetColors={BRAND}
+            selectedColor={selected}
+            onSelect={(next) => {
+              setSelected(next);
+              action("onSelect")(next);
+            }}
+          />
+          <Text fontSize="$2" color="$color10">
+            {selected ?? "none"}
+          </Text>
+        </YStack>
+      );
+    };
+    return <Example />;
+  },
+};
+
+export const Selected: Story = {
+  render: () => (
+    <YStack padding="$4" width={280}>
+      <PresetSwatches presetColors={BRAND} selectedColor="#3B82F6" onSelect={action("onSelect")} />
+    </YStack>
+  ),
+};
+
+/** Null entry is the "no color" chip with the diagonal strike. */
+export const NoColor: Story = {
+  render: () => {
+    const Example = () => {
+      const [selected, setSelected] = useState<string | null>(null);
+      return (
+        <YStack gap="$3" padding="$4" width={280}>
+          <PresetSwatches
+            presetColors={[{ name: "None", value: null }, ...BRAND]}
+            selectedColor={selected}
+            onSelect={setSelected}
+          />
+        </YStack>
+      );
+    };
+    return <Example />;
+  },
+};
+
+/** Empty list paints nothing; the host owns the empty marker. */
+export const Empty: Story = {
+  render: () => (
+    <YStack padding="$4">
+      <Text fontSize="$2" color="$color10">
+        empty presetColors — row is null
+      </Text>
+      <PresetSwatches presetColors={[]} selectedColor={null} onSelect={action("onSelect")} />
+    </YStack>
+  ),
+};

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -347,6 +347,49 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     const thumb = flist.querySelector("img") as HTMLImageElement;
     expect(thumb).toBeTruthy();
     expect(thumb.getAttribute("alt")).toBe("diagram.png");
+
+    // AC-4 image clause (Bento Image Picker): an image pick is a TILE in the
+    // in-zone grid, not a row — the thumb IS the tile, and the remove disc
+    // rides its top-right corner (absolute, negative inset) instead of
+    // trailing on a row. Same 32/hitSlop-44 disc the rows carry.
+    const grid = flist.querySelector('[data-file-upload="tiles"]') as HTMLElement;
+    expect(grid).toBeTruthy();
+    const tile = grid.querySelector('[data-file-upload="tile"]') as HTMLElement;
+    expect(tile).toBeTruthy();
+    expect(tile.contains(thumb)).toBe(true);
+    const remove = tile.querySelector('[aria-label="Remove diagram.png"]') as HTMLElement;
+    expect(remove).toBeTruthy();
+    expect(remove.getAttribute("data-nested-px")).toBe("32");
+    expect(remove.getAttribute("data-mp-press-slop")).toBe("6");
+    const corner = tile.querySelector('[data-file-upload="tile-remove"]') as HTMLElement;
+    expect(corner).toBeTruthy();
+    expect(corner.contains(remove)).toBe(true);
+    expect(corner.className).toMatch(/_pos-absolute/);
+    // No size line inside a tile: Bento's populated Image Picker is thumbs only.
+    expect(tile.textContent ?? "").not.toMatch(/Bytes|KB|MB/);
+  });
+
+  it("keeps non-image picks as rows while images tile — one list, two treatments", async () => {
+    if (typeof URL.createObjectURL !== "function") {
+      (URL as any).createObjectURL = () => "blob:mock";
+      (URL as any).revokeObjectURL = () => {};
+    }
+    const { container } = renderWithHouseThemes(
+      <FileUpload label="Attachment" name="attachment" multiple showPreview />,
+    );
+    await pickFile(container, new File(["fake-png-bytes"], "diagram.png", { type: "image/png" }));
+    await pickFile(container, new File(["hello"], "notes.txt", { type: "text/plain" }));
+
+    const zone = getZone(container);
+    const flist = zone.querySelector('[data-file-upload="files"]') as HTMLElement;
+    const tiles = flist.querySelectorAll('[data-file-upload="tile"]');
+    expect(tiles.length).toBe(1);
+    // The text file is a row with its bold size line and trailing disc, outside the grid.
+    const grid = flist.querySelector('[data-file-upload="tiles"]') as HTMLElement;
+    const rowRemove = flist.querySelector('[aria-label="Remove notes.txt"]') as HTMLElement;
+    expect(rowRemove).toBeTruthy();
+    expect(grid.contains(rowRemove)).toBe(false);
+    expect(flist.textContent).toContain("notes.txt");
   });
 });
 

package/src/fields/FileUpload/index.tsx

@@ -174,6 +174,14 @@ const UploadFileListFrame = styled(YStack, {
   borderTopColor: formDropzoneColors.border,
 });
 
+// BENTO-DERIVED (Image Picker): picked IMAGES populate a tile grid, not the
+// file-row list — each tile is the thumb itself with the remove disc riding
+// its top-right corner. Non-image picks and in-flight transfers keep the row.
+const UploadTileGridFrame = styled(XStack, {
+  width: "100%",
+  flexWrap: "wrap",
+});
+
 export function FileUpload<
   TParentData,
   TName extends DeepKeys<TParentData>,
@@ -244,6 +252,13 @@ export function FileUpload<
   // Intentional: extract the recipe icon step (16 at the 44 control) for the
   // row file glyph — same held "icon 16" exception the CTA carries.
   const rowGlyphSize = knobProps.controlIcon.width;
+  // Intentional: the image TILE edge is two control steps (88 at medium) —
+  // the same getFieldHeight ladder the 220 frame floor sits on, so tile and
+  // frame move together per size. The corner remove disc hangs a quarter of
+  // its own nestedControl step (8 at medium) outside the tile's top-right,
+  // which is the Bento Image Picker overlap read under the house tokens.
+  const tilePx = getFieldHeight(knobProps.sizeToken as SizeTokens, 2);
+  const tileRemoveInset = -Math.round(knobProps.nestedControl.px / 4);
 
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [transfers, setTransfers] = useState<TransferItem[]>([]);
@@ -738,6 +753,44 @@ export function FileUpload<
     </XStack>
   );
 
+  const renderImageTile = (
+    file: File,
+    preview: string,
+    onValueChange?: (nextValue: TData) => void,
+  ) => (
+    <YStack
+      key={`${file.name}-${file.size}-${file.lastModified}`}
+      data-file-upload="tile"
+      position="relative"
+      width={tilePx}
+      height={tilePx}
+    >
+      <Image
+        borderRadius={cappedRadius}
+        // src (string), not source: the RN source object leaks
+        // onto the DOM <img> as source="[object Object]" on web
+        src={preview}
+        alt={file.name}
+        width={tilePx}
+        height={tilePx}
+        objectFit="cover"
+      />
+      {canInteract ? (
+        <YStack
+          data-file-upload="tile-remove"
+          position="absolute"
+          top={tileRemoveInset}
+          right={tileRemoveInset}
+          zIndex={1}
+        >
+          {renderRemoveDisc(t("Remove {{name}}", { name: file.name }), () =>
+            handleFileRemove(file, onValueChange),
+          )}
+        </YStack>
+      ) : null}
+    </YStack>
+  );
+
   const renderUploadArea = (
     errorProp?: string | boolean,
     onValueChange?: (nextValue: TData) => void,
@@ -780,6 +833,15 @@ export function FileUpload<
         : ({ role: "button", onPress: requestFiles } as any)
       : { cursor: disabled ? "not-allowed" : undefined };
 
+    // Committed image picks become tiles; everything else stays a row.
+    const imageTiles: { file: File; preview: string }[] = [];
+    const fileRows: { file: File; preview: string | null; index: number }[] = [];
+    selectedFiles.forEach((file, index) => {
+      const preview = showPreview ? getFilePreview(file) : null;
+      if (preview) imageTiles.push({ file, preview });
+      else fileRows.push({ file, preview, index });
+    });
+
     return (
       <UploadAreaFrame
         // The dropzone is this field's control: it carries the FieldLayout id
@@ -928,8 +990,18 @@ export function FileUpload<
             // The hairline tracks the frame edge's knob width — one dash voice.
             borderTopWidth={knobProps.borderRadius.borderWidth ?? 1}
           >
-            {selectedFiles.map((file, index) => {
-              const preview = showPreview ? getFilePreview(file) : null;
+            {imageTiles.length > 0 ? (
+              <UploadTileGridFrame
+                data-file-upload="tiles"
+                {...knobProps.gap}
+                {...knobProps.panelPadding}
+              >
+                {imageTiles.map(({ file, preview }) =>
+                  renderImageTile(file, preview, onValueChange),
+                )}
+              </UploadTileGridFrame>
+            ) : null}
+            {fileRows.map(({ file, preview, index }) => {
               return (
                 <XStack
                   key={`${file.name}-${index}`}

package/src/fields/Geolocation/Geolocation.spec.tsx

@@ -6,6 +6,52 @@ import { Geolocation, preflightGeolocation } from "./index";
 
 const locationIcon = <span data-testid="location-icon" />;
 
+/**
+ * Recorded stock-Frappe Geolocation value: what
+ * `JSON.stringify(editableLayers.toGeoJSON())` writes for a circle marker at
+ * 37.7749,-122.4194. GeoJSON order is [lng, lat].
+ */
+const stockFrappePoint = JSON.stringify({
+  type: "FeatureCollection",
+  features: [
+    {
+      type: "Feature",
+      properties: { point_type: "circle", radius: 10 },
+      geometry: { type: "Point", coordinates: [-122.4194, 37.7749] },
+    },
+  ],
+});
+
+/**
+ * Stock Frappe's geolocation.js load path: JSON.parse then L.geoJSON. Compact
+ * `{"lat","lng"}` parses as JSON but is not GeoJSON, so Leaflet adds nothing
+ * and the desk field renders empty. A FeatureCollection with a Point is what
+ * survives a round trip through both clients.
+ */
+function frappeGeoJsonReads(value: string): { lat: number; lng: number } | null {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(value);
+  } catch {
+    return null;
+  }
+  if (!parsed || typeof parsed !== "object") return null;
+  const collection = parsed as { type?: unknown; features?: unknown };
+  if (collection.type !== "FeatureCollection" || !Array.isArray(collection.features)) {
+    return null;
+  }
+  for (const feature of collection.features) {
+    if (!feature || typeof feature !== "object") continue;
+    const geometry = (feature as { geometry?: { type?: unknown; coordinates?: unknown } }).geometry;
+    if (!geometry || geometry.type !== "Point" || !Array.isArray(geometry.coordinates)) continue;
+    const [lng, lat] = geometry.coordinates as [unknown, unknown];
+    if (typeof lng !== "number" || typeof lat !== "number") continue;
+    if (!Number.isFinite(lng) || !Number.isFinite(lat)) continue;
+    return { lat, lng };
+  }
+  return null;
+}
+
 describe("Geolocation", () => {
   describe("without form context", () => {
     it("renders with label", () => {
@@ -418,4 +464,84 @@ describe("Geolocation", () => {
       expect(result.findTextElement("Location")).toBeDefined();
     });
   });
+
+  describe("MPO-100 stock Frappe FeatureCollection", () => {
+    it("paints a recorded stock value instead of rendering empty", () => {
+      const result = renderWithProviders(
+        <Geolocation label="Location" value={stockFrappePoint} locationIcon={locationIcon} />,
+      );
+      expect(result.container.textContent).toContain("37.7749, -122.4194");
+      expect(result.container.textContent).not.toContain("Set location");
+      expect(result.container.querySelector("[data-testid='geolocation-map']")).not.toBeNull();
+    });
+
+    it("a compact {lat,lng} write is invisible to Frappe's parser (negative control)", () => {
+      expect(frappeGeoJsonReads(JSON.stringify({ lat: 37.7749, lng: -122.4194 }))).toBeNull();
+      expect(frappeGeoJsonReads(stockFrappePoint)).toEqual({ lat: 37.7749, lng: -122.4194 });
+    });
+
+    it("editing a stock value still reads in Frappe's parser and keeps properties", async () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Geolocation
+          label="Location"
+          locationIcon={locationIcon}
+          value={stockFrappePoint}
+          onChange={onChange}
+        />,
+      );
+      fireEvent.click(result.container.querySelector("[aria-label='Edit coordinates']") as Element);
+      await waitFor(() => {
+        expect(document.querySelector("[data-testid='geolocation-coords-panel']")).not.toBeNull();
+      });
+      const latInput = document.querySelector("input[aria-label='Latitude']") as HTMLInputElement;
+      expect(latInput).not.toBeNull();
+      fireEvent.change(latInput, { target: { value: "12.34" } });
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalled();
+      });
+      const written = onChange.mock.calls[0][0] as string;
+      expect(JSON.parse(written).type).toBe("FeatureCollection");
+      expect(frappeGeoJsonReads(written)).toEqual({ lat: 12.34, lng: -122.4194 });
+      expect(JSON.parse(written).features[0].properties).toEqual({
+        point_type: "circle",
+        radius: 10,
+      });
+    });
+
+    it("map pick on a stock value writes FeatureCollection, not compact latlng", () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Geolocation
+          label="Location"
+          value={stockFrappePoint}
+          onChange={onChange}
+          locationIcon={locationIcon}
+        />,
+      );
+      const pick = result.container.querySelector(
+        "[data-testid='geolocation-map-pick']",
+      ) as HTMLElement;
+      expect(pick).not.toBeNull();
+      pick.getBoundingClientRect = () =>
+        ({
+          width: 200,
+          height: 200,
+          left: 0,
+          top: 0,
+          right: 200,
+          bottom: 200,
+          x: 0,
+          y: 0,
+          toJSON() {},
+        }) as DOMRect;
+      fireEvent.click(pick, { clientX: 150, clientY: 50 });
+      expect(onChange).toHaveBeenCalled();
+      const written = onChange.mock.calls[0][0] as string;
+      expect(JSON.parse(written).type).toBe("FeatureCollection");
+      const read = frappeGeoJsonReads(written);
+      expect(read).not.toBeNull();
+      expect(read?.lat).not.toBeCloseTo(37.7749, 3);
+    });
+  });
 });