@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/Spinner/index.tsx

@@ -1,63 +1,56 @@
-import { useEffect, useRef } from "react";
-import { Spinner as TamaguiSpinner, isWeb } from "tamagui";
-import type { TamaguiElement } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { formCommonColors } from "../shared/colorRamps";
+import { View, isWeb } from "tamagui";
 import { t } from "../shared/t";
+import { SpinnerGlyph, useSpinnerStroke } from "./SpinnerGlyph";
+import { spinnerSizePx, spinnerSizeToken, type SpinnerProps } from "./spinnerSize";
 
-export interface SpinnerProps {
-  size?: "small" | "large";
-  color?: string;
-  [key: string]: unknown;
-}
+export type { SpinnerProps, SpinnerSize } from "./spinnerSize";
 
-// The spin keyframe lives inside react-native-web's ActivityIndicator, so the
-// animation:none knob and prefers-reduced-motion need a CSS override injected
-// once at module scope (web only).
 const MOTION_STYLE_ID = "mp1-spinner-motion";
+// A-CONTINUOUS period. Gated on `knobProps.transition` (LC-68); not sourced
+// from A-STATE durations (quick=100ms would strobe).
+const SPIN_PERIOD = "0.7s";
+
 function ensureMotionStyles() {
   if (!isWeb || typeof document === "undefined") return;
   if (document.getElementById(MOTION_STYLE_ID)) return;
   const style = document.createElement("style");
   style.id = MOTION_STYLE_ID;
   style.textContent = [
+    "@keyframes mp1-spinner-spin { to { transform: rotate(360deg) } }",
+    `.mp1-spinner { animation: mp1-spinner-spin ${SPIN_PERIOD} linear infinite; }`,
     ".mp1-spinner-static, .mp1-spinner-static * { animation: none !important; }",
     "@media (prefers-reduced-motion: reduce) { .mp1-spinner, .mp1-spinner * { animation: none !important; } }",
   ].join("\n");
   document.head.appendChild(style);
 }
 
-/** Form-styled Spinner with theme colors. Override size as needed. */
-export function Spinner({ size, color = formCommonColors.muted, ...props }: SpinnerProps) {
+/** Form-styled Spinner. Size follows the shared size-token scale; spin gates on transition. */
+export function Spinner({ size, color, ...props }: SpinnerProps) {
   const { knobProps } = useResolvedKnobs();
-  // ActivityIndicator only has two sizes; the size knob's top step maps to
-  // "large" so the spinner follows the one pipeline (LC-18).
-  const resolvedSize = size ?? (knobProps.sizeToken === "$5" ? "large" : "small");
-  // transition is undefined exactly when the animation knob is "none"
+  const token = spinnerSizeToken(size, knobProps.sizeToken);
+  const px = spinnerSizePx(token);
+  const stroke = useSpinnerStroke(color);
   const animationsOff = !knobProps.transition;
   ensureMotionStyles();
-  const ref = useRef<TamaguiElement>(null);
-  // react-native-web's ActivityIndicator renders an inner unnamed
-  // role="progressbar" node that Tamagui props cannot reach; the accessible
-  // name lives on this wrapper (role="status"), so hide the inner node from
-  // the a11y tree (axe aria-progressbar-name).
-  useEffect(() => {
-    if (!isWeb) return;
-    const host = ref.current as unknown as HTMLElement | null;
-    host?.querySelector?.("[role=progressbar]")?.setAttribute("aria-hidden", "true");
-  });
+  const { className: classNameProp, ...rest } = props as { className?: string };
+  const className = ["mp1-spinner", animationsOff ? "mp1-spinner-static" : "", classNameProp]
+    .filter(Boolean)
+    .join(" ");
   return (
-    <TamaguiSpinner
-      ref={ref}
-      size={resolvedSize}
-      color={color}
+    <View
+      width={px}
+      height={px}
       role="status"
       aria-label={t("Loading")}
       aria-live="polite"
-      {...(isWeb
-        ? { className: animationsOff ? "mp1-spinner mp1-spinner-static" : "mp1-spinner" }
-        : undefined)}
-      {...props}
-    />
+      aria-busy
+      pointerEvents="none"
+      data-size={token}
+      {...(isWeb ? { className } : undefined)}
+      {...rest}
+    >
+      <SpinnerGlyph color={stroke} size={px} />
+    </View>
   );
 }

package/src/Spinner/spinnerSize.ts

@@ -0,0 +1,27 @@
+import { getSize } from "@tamagui/get-token";
+import type { SizeTokens } from "tamagui";
+import { getVariableValue } from "tamagui";
+
+export type SpinnerSize = "small" | "large";
+
+export interface SpinnerProps {
+  size?: SpinnerSize;
+  color?: string;
+  [key: string]: unknown;
+}
+
+/**
+ * Map the Tamagui binary size prop onto the shared size-token scale.
+ * Unspecified size follows the size knob (`knobProps.sizeToken`) so one
+ * knob flip restyles the glyph (LC-18). Explicit small/large stay the
+ * button-safe aliases ($1 / $3) used across the catalog.
+ */
+export function spinnerSizeToken(size: SpinnerSize | undefined, sizeToken: string): SizeTokens {
+  if (size === "small") return "$1";
+  if (size === "large") return "$3";
+  return sizeToken as SizeTokens;
+}
+
+export function spinnerSizePx(token: SizeTokens): number {
+  return getVariableValue(getSize(token)) as number;
+}

package/src/fieldLayout.tsx

@@ -240,6 +240,12 @@ export function FieldLayout({
     }
   }, [errorMessage]);
 
+  // On web, tamagui's Label resolves `htmlFor` and PREPENDS its own id onto
+  // that control's `aria-labelledby` — so a labelled field is already wired
+  // and a control that also sets `aria-labelledby={`${id}-label`}` ends up
+  // with the token twice and an accessible name spoken twice ("Birth Date
+  // Birth Date"). Controls carry the field `id` and an `aria-label` fallback
+  // for the label-less case; they must not name themselves when a Label exists.
   const labelNode = label ? (
     <Label
       id={id ? `${id}-label` : undefined}

package/src/fields/Barcode/Barcode.spec.tsx

@@ -1,9 +1,10 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { fireEvent, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Form } from "../../Form";
 import { preflightCamera } from "./BarcodeScanner";
 import { Barcode } from "./index";
+import { resolveHtml5FormatIds, resolveNativeBarcodeTypes } from "./scannerTypes";
 
 const barcodeIcon = <span data-testid="barcode-icon" />;
 const scanIcon = <span data-testid="scan-icon" />;
@@ -117,6 +118,75 @@ describe("Barcode", () => {
       );
       expect(result.container.querySelectorAll("[data-testid='scan-icon']").length).toBe(0);
     });
+
+    it("scan control lives inside the composite box (LC-71 RING-ANATOMY)", () => {
+      const result = renderWithProviders(
+        <Barcode
+          label="Barcode"
+          name="code"
+          barcodeIcon={barcodeIcon}
+          scanIcon={scanIcon}
+          stopIcon={stopIcon}
+        />,
+      );
+      const box = result.container.querySelector('[data-testid="barcode-field"]');
+      const scan = result.container.querySelector("[aria-label='Scan barcode']");
+      expect(box).not.toBeNull();
+      expect(scan).not.toBeNull();
+      expect(box!.contains(scan)).toBe(true);
+    });
+
+    it("standalone without onChange still types via internal state", () => {
+      const result = renderWithProviders(<Barcode label="Code" />);
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      expect(input).not.toBeNull();
+      fireEvent.change(input, { target: { value: "SKU-001234" } });
+      expect(input.value).toBe("SKU-001234");
+    });
+
+    it("clear empties the value", () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Barcode
+          label="Code"
+          value="SKU-001234"
+          onChange={onChange}
+          barcodeIcon={barcodeIcon}
+          scanIcon={scanIcon}
+          stopIcon={stopIcon}
+        />,
+      );
+      const clear = result.container.querySelector("[aria-label='Clear barcode']");
+      expect(clear).not.toBeNull();
+      fireEvent.click(clear as Element);
+      expect(onChange).toHaveBeenCalledWith("");
+    });
+
+    it("draws a Code 128 preview for an encodable value", () => {
+      const result = renderWithProviders(
+        <Barcode
+          label="Code"
+          value="SKU-001234"
+          barcodeIcon={barcodeIcon}
+          scanIcon={scanIcon}
+          stopIcon={stopIcon}
+        />,
+      );
+      expect(result.container.querySelector('[data-testid="barcode-preview"]')).not.toBeNull();
+    });
+
+    it("accepts a formats filter without dropping the scan control", () => {
+      const result = renderWithProviders(
+        <Barcode
+          label="Code"
+          formats={["code128", "ean13"]}
+          barcodeIcon={barcodeIcon}
+          scanIcon={scanIcon}
+          stopIcon={stopIcon}
+        />,
+      );
+      expect(result.container.querySelector("[aria-label='Scan barcode']")).not.toBeNull();
+    });
   });
 
   describe("camera pre-flight (LC-19 CAPABILITY-PREFLIGHT)", () => {
@@ -152,6 +222,26 @@ describe("Barcode", () => {
     });
   });
 
+  describe("format mapping", () => {
+    it("maps aliases onto expo-camera types and falls back on unknown", () => {
+      expect(resolveNativeBarcodeTypes(["QR", "code-128", "ean_13"])).toEqual([
+        "qr",
+        "code128",
+        "ean13",
+      ]);
+      expect(resolveNativeBarcodeTypes(["nope"])).toEqual(
+        expect.arrayContaining(["qr", "code128"]),
+      );
+    });
+
+    it("maps aliases onto html5-qrcode enum ids", () => {
+      const fakeEnum = { QR_CODE: 0, CODE_128: 5, EAN_13: 9 };
+      expect(resolveHtml5FormatIds(["qr", "CODE128"], fakeEnum)).toEqual([0, 5]);
+      expect(resolveHtml5FormatIds(undefined, fakeEnum)).toBeUndefined();
+      expect(resolveHtml5FormatIds(["nope"], fakeEnum)).toBeUndefined();
+    });
+  });
+
   describe("with form context", () => {
     it("renders inside form", () => {
       const result = renderWithProviders(

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

@@ -33,6 +33,7 @@ const meta: Meta<typeof Barcode> = {
     size: { control: "select", options: ["$2", "$3", "$4"] },
     value: { control: "text" },
     enableScan: { control: "boolean", description: "Enable camera scanner" },
+    formats: { control: "object", description: "Decoder symbologies (e.g. code128, qr, ean13)" },
   },
 };
 
@@ -174,3 +175,15 @@ export const SkeletonState: Story = {
   args: { label: "Product Barcode", skeleton: true },
   render: (args) => <Barcode {...args} {...iconProps} />,
 };
+
+/** Encoded value + trailing scan inside one LC-71 composite (preview under the box). */
+export const Filled: Story = {
+  args: {
+    label: "Product Barcode",
+    helperText: "Scan or enter barcode",
+    value: "SKU-001234",
+    enableScan: true,
+    onChange: action("onChange"),
+  },
+  render: (args) => <Barcode {...args} {...iconProps} />,
+};

package/src/fields/Barcode/BarcodeScanner.native.tsx

@@ -6,22 +6,7 @@ import { Button } from "../../Button";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import type { BarcodeScannerProps, CameraPreflightResult } from "./scannerTypes";
-
-const barcodeTypes = [
-  "qr",
-  "ean13",
-  "ean8",
-  "code128",
-  "code39",
-  "code93",
-  "upc_a",
-  "upc_e",
-  "codabar",
-  "itf14",
-  "datamatrix",
-  "pdf417",
-  "aztec",
-] as const;
+import { resolveNativeBarcodeTypes, scannerViewportHeight } from "./scannerTypes";
 
 /**
  * Camera capability pre-flight (LC-19 CAPABILITY-PREFLIGHT), native mirror.
@@ -67,7 +52,11 @@ export function BarcodeScanner({
   onError,
   onClose,
   knobProps,
+  formats,
+  compact,
 }: BarcodeScannerProps) {
+  const barcodeTypes = resolveNativeBarcodeTypes(formats);
+  const viewportPx = scannerViewportHeight(compact);
   const [permission, requestPermission] = useCameraPermissions();
   const handledRef = useRef(false);
   const [denied, setDenied] = useState(false);
@@ -129,7 +118,7 @@ export function BarcodeScanner({
           {t("Requesting camera…")}
         </Text>
       ) : (
-        <View width="100%" height={250}>
+        <View width="100%" height={viewportPx} maxHeight={320} overflow="hidden">
           <CameraView
             style={StyleSheet.absoluteFill}
             facing="back"

package/src/fields/Barcode/BarcodeScanner.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useRef, useState } from "react";
-import { Text, View, XStack, YStack } from "tamagui";
+import { Text, View, XStack, YStack, isWeb } from "tamagui";
 import { Button } from "../../Button";
 import { queryPermissionState } from "../../shared/capabilityPreflight";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import type { BarcodeScannerProps, CameraPreflightResult } from "./scannerTypes";
+import { resolveHtml5FormatIds, scannerViewportHeight } from "./scannerTypes";
 
 interface Html5QrcodeScanner {
   start: (
@@ -85,12 +86,16 @@ export function BarcodeScanner({
   onError,
   onClose,
   knobProps,
+  formats,
+  compact,
 }: BarcodeScannerProps) {
   const scannerRef = useRef<Html5QrcodeScanner | null>(null);
   const containerId = useRef(`barcode-scanner-${Math.random().toString(36).slice(2, 9)}`);
   const [attempt, setAttempt] = useState(0);
   const [status, setStatus] = useState<"starting" | "streaming" | "error">("starting");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const viewportPx = scannerViewportHeight(compact);
+  const formatKey = formats?.join(",") ?? "";
 
   useEffect(() => {
     if (!active) return;
@@ -100,13 +105,25 @@ export function BarcodeScanner({
     onError(null);
     (async () => {
       try {
-        const { Html5Qrcode } = await import("html5-qrcode");
+        const { Html5Qrcode, Html5QrcodeSupportedFormats } = await import("html5-qrcode");
         if (cancelled) return;
-        const scanner = new Html5Qrcode(containerId.current) as unknown as Html5QrcodeScanner;
+        const formatsToSupport = resolveHtml5FormatIds(
+          formats,
+          Html5QrcodeSupportedFormats as unknown as Record<string, number | string>,
+        );
+        const scanner = new Html5Qrcode(
+          containerId.current,
+          formatsToSupport ? { formatsToSupport, verbose: false } : undefined,
+        ) as unknown as Html5QrcodeScanner;
         scannerRef.current = scanner;
+        const qrbox = Math.min(220, Math.max(120, viewportPx - 40));
         await scanner.start(
           { facingMode: "environment" },
-          { fps: 10, qrbox: { width: 250, height: 150 }, aspectRatio: 1.5 },
+          {
+            fps: 10,
+            qrbox: { width: qrbox, height: Math.round(qrbox * 0.6) },
+            aspectRatio: 1.5,
+          },
           (decodedText: string) => {
             onScan(decodedText);
             onClose();
@@ -139,7 +156,7 @@ export function BarcodeScanner({
         scannerRef.current = null;
       }
     };
-  }, [active, attempt]);
+  }, [active, attempt, formatKey, viewportPx]);
 
   if (!active) return null;
 
@@ -182,7 +199,21 @@ export function BarcodeScanner({
           <style>
             {`#${containerId.current} video { width: 100%; height: 100%; object-fit: cover; }`}
           </style>
-          <View id={containerId.current} width="100%" height={320} overflow="hidden" />
+          <View
+            id={containerId.current}
+            width="100%"
+            height={viewportPx}
+            maxHeight={320}
+            overflow="hidden"
+            {...(isWeb
+              ? {
+                  style: {
+                    height: `min(40vh, ${viewportPx}px)`,
+                    maxHeight: 320,
+                  },
+                }
+              : undefined)}
+          />
         </>
       )}
     </YStack>