@multiplatform.one/forms 6.1.0 → 6.3.0

package/src/FieldDisplay/FieldDisplay.stories.tsx

@@ -0,0 +1,215 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Paragraph, XStack, YStack } from "tamagui";
+import type { FieldDisplayType } from "./index";
+import { FieldDisplay } from "./index";
+
+const meta: Meta<typeof FieldDisplay> = {
+  title: "Forms/FieldDisplay",
+  component: FieldDisplay,
+  parameters: { status: { type: "beta" } },
+  argTypes: {
+    field: {
+      control: "select",
+      options: [
+        "input",
+        "textarea",
+        "stepper",
+        "slider",
+        "select",
+        "checkbox",
+        "switch",
+        "datepicker",
+        "datetimepicker",
+        "daterangepicker",
+        "colorpicker",
+        "duration",
+        "fileupload",
+        "image",
+        "signature",
+        "geolocation",
+        "richtexteditor",
+        "custom",
+      ] satisfies FieldDisplayType[],
+    },
+    value: { control: "text" },
+  },
+  args: {
+    field: "input",
+    value: "Hello world",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldDisplay>;
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <XStack gap="$3" alignItems="center">
+      <Paragraph size="$2" width={180} color="$placeholderColor">
+        {label}
+      </Paragraph>
+      <XStack flex={1}>{children}</XStack>
+    </XStack>
+  );
+}
+
+export const Basic: Story = {
+  render: (args) => <FieldDisplay {...args} />,
+};
+
+const TINY_PNG =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==";
+
+export const AllTypes: Story = {
+  render: () => (
+    <YStack gap="$2" maxWidth={560}>
+      <Row label="input">
+        <FieldDisplay field="input" value="Plain text value" />
+      </Row>
+      <Row label="textarea (multiline)">
+        <FieldDisplay field="textarea" value={"line one\nline two\nline three"} />
+      </Row>
+      <Row label="stepper (number)">
+        <FieldDisplay field="stepper" value={42} />
+      </Row>
+      <Row label="stepper (currency)">
+        <FieldDisplay
+          field="stepper"
+          value={1234.5}
+          fieldProps={{ currency: "USD", precision: 2 }}
+        />
+      </Row>
+      <Row label="slider (percentish)">
+        <FieldDisplay field="slider" value={0.75} />
+      </Row>
+      <Row label="select (label lookup)">
+        <FieldDisplay
+          field="select"
+          value="b"
+          fieldProps={{
+            options: [
+              { label: "Alpha", value: "a" },
+              { label: "Beta", value: "b" },
+            ],
+          }}
+        />
+      </Row>
+      <Row label="checkbox true">
+        <FieldDisplay field="checkbox" value={true} />
+      </Row>
+      <Row label="checkbox false">
+        <FieldDisplay field="checkbox" value={false} />
+      </Row>
+      <Row label="datepicker">
+        <FieldDisplay field="datepicker" value="2026-01-15" />
+      </Row>
+      <Row label="datetimepicker">
+        <FieldDisplay field="datetimepicker" value="2026-01-15T14:30:00Z" />
+      </Row>
+      <Row label="daterangepicker">
+        <FieldDisplay field="daterangepicker" value="2026-01-01" linkedValue="2026-01-31" />
+      </Row>
+      <Row label="colorpicker">
+        <FieldDisplay field="colorpicker" value="#ff0088" />
+      </Row>
+      <Row label="duration (3725s)">
+        <FieldDisplay field="duration" value={3725} />
+      </Row>
+      <Row label="fileupload (one)">
+        <FieldDisplay field="fileupload" value="report.pdf" />
+      </Row>
+      <Row label="fileupload (many)">
+        <FieldDisplay field="fileupload" value={["a.pdf", "b.pdf", "c.pdf"]} />
+      </Row>
+      <Row label="image">
+        <FieldDisplay field="image" value={TINY_PNG} />
+      </Row>
+      <Row label="signature">
+        <FieldDisplay field="signature" value="data:image/png;base64,abc" />
+      </Row>
+      <Row label="geolocation">
+        <FieldDisplay field="geolocation" value={{ lat: 30.2672, lng: -97.7431 }} />
+      </Row>
+      <Row label="richtexteditor">
+        <FieldDisplay field="richtexteditor" value="<p>Rich <b>text</b> content</p>" />
+      </Row>
+      <Row label="unknown/custom">
+        <FieldDisplay field="custom" value={{ some: "object" }} />
+      </Row>
+    </YStack>
+  ),
+};
+
+export const EmptyAndFalsy: Story = {
+  render: () => (
+    <YStack gap="$2" maxWidth={560}>
+      <Row label="input null">
+        <FieldDisplay field="input" value={null} />
+      </Row>
+      <Row label="input undefined">
+        <FieldDisplay field="input" value={undefined} />
+      </Row>
+      <Row label="input empty string">
+        <FieldDisplay field="input" value="" />
+      </Row>
+      <Row label="stepper zero (valid!)">
+        <FieldDisplay field="stepper" value={0} />
+      </Row>
+      <Row label="checkbox false (valid!)">
+        <FieldDisplay field="checkbox" value={false} />
+      </Row>
+      <Row label="checkbox null">
+        <FieldDisplay field="checkbox" value={null} />
+      </Row>
+      <Row label="duration zero">
+        <FieldDisplay field="duration" value={0} />
+      </Row>
+      <Row label="datepicker empty">
+        <FieldDisplay field="datepicker" value="" />
+      </Row>
+      <Row label="colorpicker empty">
+        <FieldDisplay field="colorpicker" value="" />
+      </Row>
+      <Row label="image empty">
+        <FieldDisplay field="image" value="" />
+      </Row>
+    </YStack>
+  ),
+};
+
+export const UnsafeAndLongContent: Story = {
+  render: () => (
+    <YStack gap="$2" maxWidth={560}>
+      <Row label="html in input">
+        <FieldDisplay field="input" value={'<img src=x onerror="alert(1)">'} />
+      </Row>
+      <Row label="html in richtext">
+        <FieldDisplay
+          field="richtexteditor"
+          value={'<script>alert(1)</script><p onclick="alert(2)">click me</p>'}
+        />
+      </Row>
+      <Row label="js url as text">
+        <FieldDisplay field="input" value="javascript:alert(1)" />
+      </Row>
+      <Row label="very long text">
+        <FieldDisplay
+          field="input"
+          value={
+            "This value is extremely long and should truncate to a single line with an ellipsis rather than wrapping or overflowing its container " +
+            "x".repeat(200)
+          }
+        />
+      </Row>
+      <Row label="broken image url">
+        <FieldDisplay field="image" value="https://invalid.invalid/broken.png" />
+      </Row>
+      <Row label="invalid date">
+        <FieldDisplay field="datepicker" value="not-a-date" />
+      </Row>
+      <Row label="NaN number">
+        <FieldDisplay field="stepper" value="abc" />
+      </Row>
+    </YStack>
+  ),
+};

package/src/FieldDisplay/editMode.ts

@@ -42,9 +42,10 @@ export const FIELD_EDIT_MODE: Record<FieldDisplayType, EditMode> = {
   duration: "popover",
   colorpicker: "popover",
   phoneinput: "popover",
-  barcode: "popover",
 
   // Modal/sheet — too tall for inline or popover
+  // (barcode: the camera scanner surface is a full panel, LC-06)
+  barcode: "modal",
   fileupload: "modal",
   signature: "modal",
   mentioninput: "modal",

package/src/FieldDisplay/formatters.ts

@@ -0,0 +1,69 @@
+/**
+ * Shared read-only value formatters.
+ *
+ * FieldDisplay (table cells) and frappe-ui's ReadOnly field both format
+ * through these so the same value renders identically in a table read cell
+ * and a Frappe read-only field. Keep formatting logic here, not inline in
+ * either component.
+ */
+
+import { formatAbsoluteDate } from "@multiplatform.one/theme";
+
+export const EMPTY = "—";
+
+export function asText(v: any): string {
+  if (v == null || v === "") return EMPTY;
+  if (typeof v === "string") return v;
+  if (typeof v === "number" || typeof v === "boolean") return String(v);
+  // A Date instance is date-class data even in an untyped column (Axiom 9) —
+  // house absolute register, never the ISO system voice.
+  if (v instanceof Date) return formatAbsoluteDate(v, { year: "always" });
+  try {
+    return JSON.stringify(v);
+  } catch {
+    return String(v);
+  }
+}
+
+export interface NumericFormatOptions {
+  precision?: number;
+  /** ISO 4217 currency code, e.g. "USD". */
+  currency?: string;
+}
+
+export function formatNumericText(num: number, options: NumericFormatOptions = {}): string {
+  const { precision, currency } = options;
+  if (currency) {
+    return new Intl.NumberFormat(undefined, {
+      style: "currency",
+      currency,
+      minimumFractionDigits: precision,
+      maximumFractionDigits: precision,
+    }).format(num);
+  }
+  return new Intl.NumberFormat(undefined, {
+    minimumFractionDigits: precision,
+    maximumFractionDigits: precision,
+  }).format(num);
+}
+
+// Re-exported for existing consumers; the canonical shape lives in theme.
+export { ISO_DATE_ONLY } from "@multiplatform.one/theme";
+
+export interface DateFormatOptions {
+  withTime?: boolean;
+  dateFormat?: string;
+}
+
+/**
+ * Read-only date cells speak the house absolute register (LC-12 / DF-14):
+ * "Jul 1" / "Jul 1, 2025" (year auto-elided when current), "Aug 9, 3:30 PM"
+ * with time — one voice with Timeline and picker display values, never raw
+ * ISO or verbose locale output. `dateFormat` is accepted for compatibility
+ * but the register channel owns the shape.
+ */
+export function formatDateText(value: any, options: DateFormatOptions = {}): string {
+  const { withTime } = options;
+  const formatted = formatAbsoluteDate(value, { withTime });
+  return formatted === "" ? asText(value) : formatted;
+}

package/src/FieldDisplay/index.tsx

@@ -16,8 +16,11 @@
  * through to the text fallback until expanded.
  */
 
-import { CheckIcon } from "@phosphor-icons/react";
+import { CheckIcon, XIcon } from "@phosphor-icons/react";
 import { Text, View, XStack } from "tamagui";
+import { BarcodePreview } from "../fields/Barcode/BarcodePreview";
+import { t } from "../shared/t";
+import { asText, EMPTY, formatDateText, formatNumericText } from "./formatters";
 
 export type FieldDisplayType =
   | "input"
@@ -60,20 +63,6 @@ export interface FieldDisplayProps {
   linkedValue?: any;
 }
 
-const EMPTY = "—";
-
-function asText(v: any): string {
-  if (v == null || v === "") return EMPTY;
-  if (typeof v === "string") return v;
-  if (typeof v === "number" || typeof v === "boolean") return String(v);
-  if (v instanceof Date) return v.toISOString().slice(0, 10);
-  try {
-    return JSON.stringify(v);
-  } catch {
-    return String(v);
-  }
-}
-
 function TextCell({
   children,
   mono = false,
@@ -108,25 +97,10 @@ function NumericDisplay({ value, fieldProps }: { value: any; fieldProps?: Record
   if (value == null || value === "") return <TextCell align="right">{EMPTY}</TextCell>;
   const num = typeof value === "number" ? value : Number(value);
   if (Number.isNaN(num)) return <TextCell align="right">{asText(value)}</TextCell>;
-  const precision = fieldProps?.precision;
-  const currency = fieldProps?.currency;
-  if (currency) {
-    const formatted = new Intl.NumberFormat(undefined, {
-      style: "currency",
-      currency,
-      minimumFractionDigits: precision,
-      maximumFractionDigits: precision,
-    }).format(num);
-    return (
-      <TextCell mono align="right">
-        {formatted}
-      </TextCell>
-    );
-  }
-  const formatted = new Intl.NumberFormat(undefined, {
-    minimumFractionDigits: precision,
-    maximumFractionDigits: precision,
-  }).format(num);
+  const formatted = formatNumericText(num, {
+    precision: fieldProps?.precision,
+    currency: fieldProps?.currency,
+  });
   return (
     <TextCell mono align="right">
       {formatted}
@@ -134,11 +108,6 @@ function NumericDisplay({ value, fieldProps }: { value: any; fieldProps?: Record
   );
 }
 
-// ISO date-only strings ("YYYY-MM-DD") parse as UTC midnight, so
-// `toLocaleDateString()` shifts them to the previous day in negative-offset
-// timezones. Detect the date-only shape and format in UTC instead.
-const ISO_DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
-
 function DateDisplay({
   value,
   fieldProps,
@@ -149,34 +118,25 @@ function DateDisplay({
   withTime?: boolean;
 }) {
   if (value == null || value === "") return <TextCell>{EMPTY}</TextCell>;
-  const isDateOnly = !withTime && typeof value === "string" && ISO_DATE_ONLY.test(value);
-  const date = value instanceof Date ? value : new Date(value);
-  if (Number.isNaN(date.getTime())) return <TextCell>{asText(value)}</TextCell>;
-  const fmt = fieldProps?.dateFormat;
-  const tz = isDateOnly ? "UTC" : undefined;
-  if (fmt && typeof fmt === "string") {
-    return <TextCell>{date.toLocaleString(undefined, { timeZone: tz })}</TextCell>;
-  }
   return (
-    <TextCell>
-      {withTime ? date.toLocaleString() : date.toLocaleDateString(undefined, { timeZone: tz })}
-    </TextCell>
+    <TextCell>{formatDateText(value, { withTime, dateFormat: fieldProps?.dateFormat })}</TextCell>
   );
 }
 
 function DateRangeDisplay({ value, linkedValue }: { value: any; linkedValue?: any }) {
   const start = value;
   const end = linkedValue ?? (Array.isArray(value) ? value[1] : value?.end);
+  // House absolute register (LC-12 / DF-14), same voice as single date cells.
   const startFmt =
     start && !(start instanceof Date && Number.isNaN(start.getTime()))
-      ? new Date(start).toLocaleDateString()
+      ? formatDateText(start)
       : null;
   const endFmt =
-    end && !(end instanceof Date && Number.isNaN(end.getTime()))
-      ? new Date(end).toLocaleDateString()
-      : null;
+    end && !(end instanceof Date && Number.isNaN(end.getTime())) ? formatDateText(end) : null;
   if (!startFmt && !endFmt) return <TextCell>{EMPTY}</TextCell>;
-  return <TextCell>{`${startFmt ?? "?"} – ${endFmt ?? "?"}`}</TextCell>;
+  return (
+    <TextCell>{t("{{start}} – {{end}}", { start: startFmt ?? "?", end: endFmt ?? "?" })}</TextCell>
+  );
 }
 
 function ChoiceDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<string, any> }) {
@@ -200,7 +160,9 @@ function BooleanDisplay({ value }: { value: any }) {
       {value ? (
         <CheckIcon size={14} weight="bold" />
       ) : (
-        <Text color="$placeholderColor">{EMPTY}</Text>
+        // Distinct glyph for a real `false` — the EMPTY dash is reserved for
+        // null/undefined (no data).
+        <XIcon size={14} weight="bold" opacity={0.45} />
       )}
     </XStack>
   );
@@ -234,10 +196,10 @@ function DurationDisplay({ value }: { value: any }) {
   const m = Math.floor((seconds % 3600) / 60);
   const s = Math.floor(seconds % 60);
   const parts: string[] = [];
-  if (h) parts.push(`${h}h`);
-  if (m) parts.push(`${m}m`);
-  if (s && !h) parts.push(`${s}s`);
-  return <TextCell mono>{parts.length ? parts.join(" ") : "0s"}</TextCell>;
+  if (h) parts.push(t("{{hours}}h", { hours: h }));
+  if (m) parts.push(t("{{minutes}}m", { minutes: m }));
+  if (s && !h) parts.push(t("{{seconds}}s", { seconds: s }));
+  return <TextCell mono>{parts.length ? parts.join(" ") : t("0s")}</TextCell>;
 }
 
 function FileUploadDisplay({ value }: { value: any }) {
@@ -247,8 +209,8 @@ function FileUploadDisplay({ value }: { value: any }) {
     files.length === 1
       ? typeof files[0] === "string"
         ? files[0]
-        : (files[0]?.name ?? "1 file")
-      : `${files.length} files`;
+        : (files[0]?.name ?? t("1 file"))
+      : t("{{count}} files", { count: files.length });
   return <TextCell>{label}</TextCell>;
 }
 
@@ -276,10 +238,32 @@ function ImageDisplay({ value }: { value: any }) {
   );
 }
 
+function BarcodeDisplay({ value }: { value: any }) {
+  const text = String(value ?? "");
+  if (!text) return <TextCell>{EMPTY}</TextCell>;
+  // Value text + drawn Code 128 strip, both contained: the strip stays under
+  // the row height and shrinks (never paints past the cell) on narrow columns.
+  return (
+    <XStack alignItems="center" gap="$2" minWidth={0} flexShrink={1}>
+      <Text
+        fontFamily="$mono"
+        fontSize="$4"
+        lineHeight="$4"
+        color="$color"
+        numberOfLines={1}
+        flexShrink={1}
+      >
+        {text}
+      </Text>
+      <BarcodePreview value={text} height={16} moduleWidth={1} />
+    </XStack>
+  );
+}
+
 function SignatureDisplay({ value }: { value: any }) {
   const hasInk =
     (typeof value === "string" && value.length > 0) || (Array.isArray(value) && value.length > 0);
-  return <TextCell>{hasInk ? "signed" : EMPTY}</TextCell>;
+  return <TextCell>{hasInk ? t("signed") : EMPTY}</TextCell>;
 }
 
 function GeolocationDisplay({ value }: { value: any }) {
@@ -324,9 +308,11 @@ export function FieldDisplay({
     case "mentioninput":
     case "phoneinput":
     case "otp":
-    case "barcode":
       return <InputDisplay value={value} />;
 
+    case "barcode":
+      return <BarcodeDisplay value={value} />;
+
     case "stepper":
     case "slider":
     case "rating":

package/src/FieldGroup.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Input as TamaguiInput, YStack } from "tamagui";
+import { FieldGroup } from "./FieldGroup";
+import { FormSection, FormSectionStack } from "./FormSection";
+import { FieldLayout } from "./fieldLayout";
+
+const meta: Meta<typeof FieldGroup> = {
+  title: "Forms/FieldGroup",
+  component: FieldGroup,
+  parameters: { status: { type: "beta" } },
+  args: {
+    legend: "Contact details",
+    columns: 1,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FieldGroup>;
+
+function Field({ id, label }: { id: string; label: string }) {
+  return (
+    <FieldLayout id={id} label={label}>
+      <TamaguiInput id={id} placeholder={label} />
+    </FieldLayout>
+  );
+}
+
+export const Basic: Story = {
+  render: (args) => (
+    <YStack maxWidth={480}>
+      <FieldGroup {...args}>
+        <Field id="fg-email" label="Email" />
+        <Field id="fg-phone" label="Phone" />
+      </FieldGroup>
+    </YStack>
+  ),
+};
+
+export const TwoColumnGroup: Story = {
+  name: "Two-column group (responsive)",
+  render: () => (
+    <YStack gap="$8" maxWidth={720}>
+      <YStack borderWidth={1} borderColor="$borderColor" padding="$3">
+        <FieldGroup legend="Name (wide)" columns={2}>
+          <Field id="fgw-first" label="First" />
+          <Field id="fgw-last" label="Last" />
+        </FieldGroup>
+      </YStack>
+      <YStack maxWidth={280} borderWidth={1} borderColor="$borderColor" padding="$2">
+        <FieldGroup legend="Name (narrow → 1 col)" columns={2}>
+          <Field id="fgn-first" label="First" />
+          <Field id="fgn-last" label="Last" />
+        </FieldGroup>
+      </YStack>
+    </YStack>
+  ),
+};
+
+export const SectionRhythm: Story = {
+  name: "FormSection stack rhythm",
+  render: () => (
+    <FormSectionStack>
+      <FormSection label="Account">
+        <FieldGroup legend="Credentials">
+          <Field id="fs-user" label="Username" />
+          <Field id="fs-pass" label="Password" />
+        </FieldGroup>
+      </FormSection>
+      <FormSection label="Profile">
+        <FieldGroup legend="Identity" columns={2}>
+          <Field id="fs-first" label="First name" />
+          <Field id="fs-last" label="Last name" />
+        </FieldGroup>
+      </FormSection>
+    </FormSectionStack>
+  ),
+};

package/src/FieldGroup.tsx

@@ -0,0 +1,79 @@
+import type { ReactNode } from "react";
+import { Text, YStack, isWeb } from "tamagui";
+import { FormGrid, type FormGridColumns } from "./FormGrid";
+import { formFieldGap } from "./formSpacing";
+
+export interface FieldGroupProps {
+  /** Visible legend / group label (required — DG-FORM-06 fieldset grouping). */
+  legend: string;
+  children: ReactNode;
+  /**
+   * Multi-field horizontal group. Defaults to 1; use 2 for side-by-side pairs
+   * that collapse on narrow containers via FormGrid.
+   */
+  columns?: FormGridColumns;
+  /** Gap between fields. Default: formFieldGap token. */
+  gap?: number | string;
+}
+
+/**
+ * Groups related fields with a legend (fieldset on web).
+ *
+ * Field gap uses {@link formFieldGap}; nest inside {@link FormSection} so
+ * section spacing stays larger than field spacing.
+ */
+export function FieldGroup({ legend, children, columns = 1, gap = formFieldGap }: FieldGroupProps) {
+  const body =
+    columns > 1 ? (
+      <FormGrid columns={columns} gap={typeof gap === "number" ? gap : undefined}>
+        {children}
+      </FormGrid>
+    ) : (
+      <YStack gap={gap as any} width="100%">
+        {children}
+      </YStack>
+    );
+
+  if (isWeb) {
+    return (
+      <fieldset
+        data-mpo-field-group=""
+        data-columns={columns}
+        style={{
+          border: "none",
+          margin: 0,
+          padding: 0,
+          minWidth: 0,
+          width: "100%",
+        }}
+      >
+        <legend
+          style={{
+            padding: 0,
+            marginBottom: 8,
+            fontWeight: 600,
+            float: "left",
+            width: "100%",
+          }}
+        >
+          {legend}
+        </legend>
+        <div style={{ clear: "both", width: "100%" }}>{body}</div>
+      </fieldset>
+    );
+  }
+
+  return (
+    <YStack
+      data-mpo-field-group=""
+      data-columns={columns}
+      gap={formFieldGap}
+      width="100%"
+      accessibilityRole="summary"
+      accessibilityLabel={legend}
+    >
+      <Text fontWeight="600">{legend}</Text>
+      {body}
+    </YStack>
+  );
+}