@multiplatform.one/forms 6.6.0 → 7.0.0

package/src/FieldDisplay/index.tsx

@@ -1,24 +1,29 @@
 /**
  * FieldDisplay — read-only render variants for every field type.
  *
- * The DataTable cell pipeline mounts FieldDisplay (cheap, view-only) when a
- * cell is read-only, and the full Field component (Edit variant) only when
- * the cell is being edited. This keeps large tables performant and gives
- * heavy fields (FileUpload, Signature, ColorPicker, etc.) a purpose-built
- * compact representation rather than rendering their edit UI in disabled state.
+ * DataTable cells mount this (cheap, view-only) when a cell is read-only, and
+ * the full Field only while editing. Heavy fields get a compact type-specific
+ * face rather than a disabled edit control (Spectrum S15 / Carbon C27: read
+ * mode is copyable and full-contrast, never a dimmed input).
  *
- * Field type union mirrors `DataTableField` in @multiplatform.one/table; we
- * keep the dispatcher centralized here so forms owns both Edit and Display
- * variants. If a type isn't mapped, we fall back to a plain truncated text node.
- *
- * Slice 1 covers six representative types (input, numeric, date, choice,
- * boolean, color) to validate the dispatch pattern. Remaining types fall
- * through to the text fallback until expanded.
+ * Knob contract (LC-18, SHARED recipes): complete `knobProps` fragments —
+ * standalone frames take `surface` + `borderRadius` + space padding; table
+ * cells stay chromeless (the cell already owns SP-EDGE). Type chrome (check
+ * box, swatch, thumb, meter) follows the same radius/size channel as the
+ * editable twin. `sizeToken` is control height, never fontSize — type uses
+ * `label` + `body`.
  */
 
-import { CheckIcon, XIcon } from "@phosphor-icons/react";
-import { Text, View, XStack } from "tamagui";
+import { CheckIcon, FileIcon, ImageSquareIcon, StarIcon } from "@phosphor-icons/react";
+import { useReadableTextOn, useResolvedKnobs, type KnobProps } from "@multiplatform.one/theme";
+import { getSize } from "@tamagui/get-token";
+import { useState, type ReactNode } from "react";
+import type { SizeTokens } from "tamagui";
+import { Image, Text, View, XStack, getVariableValue, useTheme } from "tamagui";
+import { Chip, type ChipColor, type ChipSize } from "../Chip";
 import { BarcodePreview } from "../fields/Barcode/BarcodePreview";
+import { formControlColors, formSelectedColors } from "../shared/colorRamps";
+import { useIsInTableCell } from "../shared/tableCellContext";
 import { t } from "../shared/t";
 import { asText, EMPTY, formatDateText, formatNumericText } from "./formatters";
 
@@ -63,34 +68,206 @@ export interface FieldDisplayProps {
   linkedValue?: any;
 }
 
-function TextCell({
+const CHIP_COLORS = new Set<ChipColor>([
+  "gray",
+  "red",
+  "green",
+  "blue",
+  "yellow",
+  "orange",
+  "purple",
+]);
+
+const INTENT_CHIP: Record<string, ChipColor> = {
+  success: "green",
+  error: "red",
+  warning: "yellow",
+  accent: "blue",
+  info: "blue",
+};
+
+function chipSizeFor(size: string): ChipSize {
+  if (size === "small") return "$2";
+  if (size === "large") return "$4";
+  return "$3";
+}
+
+/** Space → padding, same map as table-primitives `getTableCellPadding` (SP-EDGE). */
+function framePadding(space: string): {
+  paddingHorizontal: string;
+  paddingVertical: string;
+} {
+  const map: Record<string, { paddingHorizontal: string; paddingVertical: string }> = {
+    small: { paddingHorizontal: "$1.5", paddingVertical: "$2" },
+    medium: { paddingHorizontal: "$2", paddingVertical: "$3" },
+    large: { paddingHorizontal: "$3", paddingVertical: "$4" },
+  };
+  return map[space] ?? map.medium;
+}
+
+function resolveChipColor(
+  value: any,
+  fieldProps?: Record<string, any>,
+  opt?: { color?: string; intent?: string },
+): ChipColor {
+  const raw =
+    opt?.color ?? opt?.intent ?? fieldProps?.colors?.[value] ?? fieldProps?.intents?.[value];
+  if (typeof raw === "string") {
+    if (CHIP_COLORS.has(raw as ChipColor)) return raw as ChipColor;
+    if (INTENT_CHIP[raw]) return INTENT_CHIP[raw];
+  }
+  return "gray";
+}
+
+function isSafeHttpUrl(value: unknown): value is string {
+  if (typeof value !== "string") return false;
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+function useDisplayChrome() {
+  const { knobProps } = useResolvedKnobs();
+  const inTableCell = useIsInTableCell();
+  const glyphSize = Math.max(
+    12,
+    Math.round(getVariableValue(getSize(knobProps.sizeToken as SizeTokens)) * 0.45),
+  );
+  return { knobProps, inTableCell, glyphSize };
+}
+
+function DisplayFrame({ field, children }: { field: FieldDisplayType; children: ReactNode }) {
+  const { knobProps, inTableCell } = useDisplayChrome();
+  if (inTableCell) {
+    return (
+      <XStack
+        data-component="FieldDisplay"
+        data-field={field}
+        alignItems="center"
+        minWidth={0}
+        flex={1}
+      >
+        {children}
+      </XStack>
+    );
+  }
+  return (
+    <XStack
+      data-component="FieldDisplay"
+      data-field={field}
+      alignItems="center"
+      minWidth={0}
+      width="100%"
+      {...knobProps.surface}
+      {...knobProps.borderRadius}
+      {...(knobProps.outlined ? { backgroundColor: "transparent" } : undefined)}
+      {...framePadding(knobProps.space)}
+    >
+      {children}
+    </XStack>
+  );
+}
+
+function ValueText({
   children,
   mono = false,
   align = "left",
+  lines = 1,
+  wrap = false,
+  empty = false,
 }: {
-  children: React.ReactNode;
+  children: ReactNode;
   mono?: boolean;
   align?: "left" | "right" | "center";
+  lines?: number;
+  wrap?: boolean;
+  empty?: boolean;
 }) {
-  // Match $body's default $4 size so mono and non-mono cells share a baseline.
-  // Without an explicit size, the mono font renders shorter (height 15 vs 20)
-  // and looks vertically off-center against text-rendered cells in the same row.
+  const { knobProps } = useResolvedKnobs();
   return (
     <Text
-      numberOfLines={1}
-      fontSize="$4"
-      lineHeight="$4"
-      fontFamily={mono ? "$mono" : "$body"}
+      {...(wrap ? undefined : { numberOfLines: lines })}
+      {...knobProps.body}
+      {...knobProps.label}
+      fontFamily={mono ? "$mono" : knobProps.body.fontFamily}
       textAlign={align}
-      color="$color"
+      color={empty ? "$color10" : knobProps.textAccentColor}
+      userSelect="text"
+      flexShrink={1}
+      minWidth={0}
+      width={wrap ? "100%" : undefined}
+      display={wrap ? "block" : undefined}
+      whiteSpace={wrap ? "pre-wrap" : undefined}
     >
       {children}
     </Text>
   );
 }
 
-function InputDisplay({ value }: { value: any }) {
-  return <TextCell>{asText(value)}</TextCell>;
+function TextCell({
+  children,
+  mono = false,
+  align = "left",
+  lines = 1,
+  wrap = false,
+}: {
+  children: ReactNode;
+  mono?: boolean;
+  align?: "left" | "right" | "center";
+  lines?: number;
+  wrap?: boolean;
+}) {
+  const empty = children === EMPTY;
+  return (
+    <ValueText mono={mono} align={align} lines={lines} wrap={wrap} empty={empty}>
+      {children}
+    </ValueText>
+  );
+}
+
+function InputDisplay({
+  value,
+  href,
+  multiline,
+  mono,
+}: {
+  value: any;
+  href?: string;
+  multiline?: boolean;
+  mono?: boolean;
+}) {
+  const { knobProps, inTableCell } = useDisplayChrome();
+  const text = asText(value);
+  const link = href || (isSafeHttpUrl(value) ? value : undefined);
+  if (link && text !== EMPTY) {
+    return (
+      <Text
+        numberOfLines={1}
+        {...knobProps.body}
+        {...knobProps.label}
+        color="$accentColor"
+        textDecorationLine="underline"
+        // Render as an anchor on web; `tag`/`href` are applied by Tamagui at
+        // runtime though the Text prop type omits them.
+        {...({ tag: "a", href: link } as Record<string, unknown>)}
+        role="link"
+        cursor="pointer"
+        userSelect="text"
+        flexShrink={1}
+        minWidth={0}
+      >
+        {text}
+      </Text>
+    );
+  }
+  return (
+    <TextCell mono={mono} wrap={Boolean(multiline && !inTableCell)}>
+      {text}
+    </TextCell>
+  );
 }
 
 function NumericDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<string, any> }) {
@@ -126,7 +303,6 @@ function DateDisplay({
 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()))
       ? formatDateText(start)
@@ -140,50 +316,79 @@ function DateRangeDisplay({ value, linkedValue }: { value: any; linkedValue?: an
 }
 
 function ChoiceDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<string, any> }) {
+  const { knobProps } = useDisplayChrome();
   if (value == null || value === "") return <TextCell>{EMPTY}</TextCell>;
-  const options: Array<{ label: string; value: any }> = fieldProps?.options ?? [];
-  if (Array.isArray(value)) {
-    const labels = value.map((v) => {
-      const opt = options.find((o) => o.value === v || String(o.value) === String(v));
-      return opt?.label ?? asText(v);
-    });
-    return <TextCell>{labels.join(", ")}</TextCell>;
-  }
-  const opt = options.find((o) => o.value === value || String(o.value) === String(value));
-  return <TextCell>{opt?.label ?? asText(value)}</TextCell>;
+  const options: Array<{ label: string; value: any; color?: string; intent?: string }> =
+    fieldProps?.options ?? [];
+  const size = chipSizeFor(knobProps.size);
+  const values = Array.isArray(value) ? value : [value];
+  return (
+    <XStack alignItems="center" flexWrap="wrap" minWidth={0} {...knobProps.gap}>
+      {values.map((item, index) => {
+        const opt = options.find((o) => o.value === item || String(o.value) === String(item));
+        return (
+          <Chip
+            key={`${String(item)}-${index}`}
+            size={size}
+            color={resolveChipColor(item, fieldProps, opt)}
+          >
+            {opt?.label ?? asText(item)}
+          </Chip>
+        );
+      })}
+    </XStack>
+  );
 }
 
 function BooleanDisplay({ value }: { value: any }) {
+  const { knobProps, glyphSize } = useDisplayChrome();
+  const onMark = useReadableTextOn(formSelectedColors.mark);
   if (value == null) return <TextCell align="center">{EMPTY}</TextCell>;
+  const marked = Boolean(value);
   return (
-    <XStack justifyContent="center" alignItems="center" width="100%">
-      {value ? (
-        <CheckIcon size={14} weight="bold" />
-      ) : (
-        // 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>
+    <View
+      width={glyphSize}
+      height={glyphSize}
+      {...knobProps.inputSurface}
+      {...knobProps.borderRadius}
+      backgroundColor={
+        marked
+          ? formSelectedColors.mark
+          : knobProps.outlined
+            ? "transparent"
+            : formControlColors.background
+      }
+      borderColor={marked ? formSelectedColors.mark : formControlColors.border}
+      alignItems="center"
+      justifyContent="center"
+      aria-hidden
+    >
+      {marked ? (
+        <CheckIcon
+          size={Math.round(glyphSize * 0.65)}
+          weight="bold"
+          color={onMark ?? knobProps.textAccentColor}
+        />
+      ) : null}
+    </View>
   );
 }
 
 function ColorDisplay({ value }: { value: any }) {
+  const { knobProps, glyphSize } = useDisplayChrome();
   const hex = typeof value === "string" && value ? value : null;
   if (!hex) return <TextCell>{EMPTY}</TextCell>;
   return (
-    <XStack alignItems="center" gap="$2">
+    <XStack alignItems="center" minWidth={0} {...knobProps.gap}>
       <View
-        width={14}
-        height={14}
-        borderRadius="$2"
-        borderWidth={1}
+        width={glyphSize}
+        height={glyphSize}
+        {...knobProps.inputSurface}
+        {...knobProps.borderRadius}
         borderColor="$borderColor"
         backgroundColor={hex}
       />
-      <Text fontFamily="$mono" fontSize="$4" lineHeight="$4" color="$color">
-        {hex.toUpperCase()}
-      </Text>
+      <ValueText mono>{hex.toUpperCase()}</ValueText>
     </XStack>
   );
 }
@@ -203,6 +408,7 @@ function DurationDisplay({ value }: { value: any }) {
 }
 
 function FileUploadDisplay({ value }: { value: any }) {
+  const { knobProps, glyphSize } = useDisplayChrome();
   const files = Array.isArray(value) ? value : value ? [value] : [];
   if (!files.length) return <TextCell>{EMPTY}</TextCell>;
   const label =
@@ -211,56 +417,75 @@ function FileUploadDisplay({ value }: { value: any }) {
         ? files[0]
         : (files[0]?.name ?? t("1 file"))
       : t("{{count}} files", { count: files.length });
-  return <TextCell>{label}</TextCell>;
+  return (
+    <XStack alignItems="center" minWidth={0} {...knobProps.gap}>
+      <FileIcon size={glyphSize} />
+      <TextCell>{label}</TextCell>
+    </XStack>
+  );
 }
 
-function ImageDisplay({ value }: { value: any }) {
-  const src = typeof value === "string" && value ? value : null;
-  if (!src) return <TextCell>{EMPTY}</TextCell>;
+function Thumb({ src, alt, knobProps }: { src: string; alt: string; knobProps: KnobProps }) {
+  const [broken, setBroken] = useState(false);
+  const { px } = knobProps.nestedControl;
+  if (broken) {
+    return (
+      <View
+        width={px}
+        height={px}
+        {...knobProps.borderRadius}
+        backgroundColor="$color3"
+        alignItems="center"
+        justifyContent="center"
+        overflow="hidden"
+      >
+        <ImageSquareIcon size={Math.round(px * 0.45)} />
+      </View>
+    );
+  }
   return (
     <View
-      width={28}
-      height={28}
-      borderRadius="$2"
-      borderWidth={1}
-      borderColor="$borderColor"
+      width={px}
+      height={px}
+      {...knobProps.borderRadius}
       overflow="hidden"
       backgroundColor="$color3"
     >
-      <View
-        width="100%"
-        height="100%"
-        backgroundImage={`url(${src})`}
-        backgroundSize="cover"
-        backgroundPosition="center"
+      <Image
+        src={src}
+        alt={alt}
+        width={px}
+        height={px}
+        objectFit="cover"
+        onError={() => setBroken(true)}
       />
     </View>
   );
 }
 
+function ImageDisplay({ value }: { value: any }) {
+  const { knobProps } = useDisplayChrome();
+  const src = typeof value === "string" && value ? value : null;
+  if (!src) return <TextCell>{EMPTY}</TextCell>;
+  return <Thumb src={src} alt="" knobProps={knobProps} />;
+}
+
 function BarcodeDisplay({ value }: { value: any }) {
+  const { knobProps, glyphSize } = useDisplayChrome();
   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 alignItems="center" minWidth={0} flexShrink={1} {...knobProps.gap}>
+      <ValueText mono>{text}</ValueText>
+      <BarcodePreview value={text} height={Math.max(12, glyphSize)} moduleWidth={1} />
     </XStack>
   );
 }
 
 function SignatureDisplay({ value }: { value: any }) {
+  const { knobProps } = useDisplayChrome();
+  const src = typeof value === "string" && value.startsWith("data:image") ? value : null;
+  if (src) return <Thumb src={src} alt={t("signed")} knobProps={knobProps} />;
   const hasInk =
     (typeof value === "string" && value.length > 0) || (Array.isArray(value) && value.length > 0);
   return <TextCell>{hasInk ? t("signed") : EMPTY}</TextCell>;
@@ -283,7 +508,6 @@ function GeolocationDisplay({ value }: { value: any }) {
 }
 
 function RichTextDisplay({ value }: { value: any }) {
-  // Strip HTML/markdown tags for a plain-text excerpt; truncate to one line.
   if (value == null || value === "") return <TextCell>{EMPTY}</TextCell>;
   const text =
     typeof value === "string"
@@ -296,75 +520,165 @@ function RichTextDisplay({ value }: { value: any }) {
   return <TextCell>{text}</TextCell>;
 }
 
+function MeterDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<string, any> }) {
+  const { knobProps, glyphSize } = useDisplayChrome();
+  if (value == null || value === "") return <TextCell>{EMPTY}</TextCell>;
+  const num = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(num)) return <TextCell>{asText(value)}</TextCell>;
+  const max = typeof fieldProps?.max === "number" ? fieldProps.max : num <= 1 ? 1 : 100;
+  const ratio = Math.min(1, Math.max(0, max === 0 ? 0 : num / max));
+  const trackHeight = Math.max(4, Math.round(glyphSize / 4));
+  return (
+    <XStack alignItems="center" minWidth={0} flex={1} {...knobProps.gap}>
+      <View
+        flex={1}
+        minWidth={48}
+        maxWidth={160}
+        height={trackHeight}
+        overflow="hidden"
+        backgroundColor={knobProps.outlined ? "transparent" : formControlColors.background}
+        {...knobProps.inputSurface}
+        {...knobProps.borderRadius}
+      >
+        <View
+          width={`${Math.round(ratio * 100)}%`}
+          height="100%"
+          backgroundColor={formSelectedColors.mark}
+        />
+      </View>
+      <TextCell mono>{formatNumericText(num, { precision: fieldProps?.precision })}</TextCell>
+    </XStack>
+  );
+}
+
+function RatingDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<string, any> }) {
+  const { knobProps, glyphSize } = useDisplayChrome();
+  const theme = useTheme();
+  if (value == null || value === "") return <TextCell>{EMPTY}</TextCell>;
+  const num = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(num)) return <TextCell>{asText(value)}</TextCell>;
+  const maxStars = typeof fieldProps?.maxStars === "number" ? fieldProps.maxStars : 5;
+  const filled = num > 1 ? Math.round(Math.min(maxStars, num)) : Math.round(num * maxStars);
+  const filledColor = theme.accentBackground?.val ?? theme.color10?.val;
+  const emptyColor = theme.color8?.val;
+  return (
+    <XStack
+      alignItems="center"
+      {...knobProps.gap}
+      aria-label={t("{{star}} of {{max}} stars", { star: filled, max: maxStars })}
+    >
+      {Array.from({ length: maxStars }, (_, i) => (
+        <StarIcon
+          key={i}
+          size={glyphSize}
+          weight={i < filled ? "fill" : "regular"}
+          color={i < filled ? filledColor : emptyColor}
+        />
+      ))}
+    </XStack>
+  );
+}
+
 export function FieldDisplay({
   field = "input",
   value,
   fieldProps,
   linkedValue,
 }: FieldDisplayProps) {
+  let body: ReactNode;
   switch (field) {
     case "input":
-    case "textarea":
     case "mentioninput":
     case "phoneinput":
+      body = <InputDisplay value={value} href={fieldProps?.href} />;
+      break;
+
     case "otp":
-      return <InputDisplay value={value} />;
+      body = <InputDisplay value={value} mono />;
+      break;
+
+    case "textarea":
+      body = <InputDisplay value={value} multiline />;
+      break;
 
     case "barcode":
-      return <BarcodeDisplay value={value} />;
+      body = <BarcodeDisplay value={value} />;
+      break;
 
     case "stepper":
+      body = <NumericDisplay value={value} fieldProps={fieldProps} />;
+      break;
+
     case "slider":
-    case "rating":
     case "progress":
-      return <NumericDisplay value={value} fieldProps={fieldProps} />;
+      body = <MeterDisplay value={value} fieldProps={fieldProps} />;
+      break;
+
+    case "rating":
+      body = <RatingDisplay value={value} fieldProps={fieldProps} />;
+      break;
 
     case "select":
     case "combobox":
     case "radiogroup":
     case "togglegroup":
-      return <ChoiceDisplay value={value} fieldProps={fieldProps} />;
+      body = <ChoiceDisplay value={value} fieldProps={fieldProps} />;
+      break;
 
     case "checkbox":
     case "switch":
-      return <BooleanDisplay value={value} />;
+      body = <BooleanDisplay value={value} />;
+      break;
 
     case "datepicker":
     case "multidatepicker":
-      return <DateDisplay value={value} fieldProps={fieldProps} />;
+      body = <DateDisplay value={value} fieldProps={fieldProps} />;
+      break;
 
     case "datetimepicker":
     case "timepicker":
-      return <DateDisplay value={value} fieldProps={fieldProps} withTime />;
+      body = <DateDisplay value={value} fieldProps={fieldProps} withTime />;
+      break;
 
     case "daterangepicker":
-      return <DateRangeDisplay value={value} linkedValue={linkedValue} />;
+      body = <DateRangeDisplay value={value} linkedValue={linkedValue} />;
+      break;
 
     case "colorpicker":
-      return <ColorDisplay value={value} />;
+      body = <ColorDisplay value={value} />;
+      break;
 
     case "duration":
-      return <DurationDisplay value={value} />;
+      body = <DurationDisplay value={value} />;
+      break;
 
     case "fileupload":
-      return <FileUploadDisplay value={value} />;
+      body = <FileUploadDisplay value={value} />;
+      break;
 
     case "image":
-      return <ImageDisplay value={value} />;
+      body = <ImageDisplay value={value} />;
+      break;
 
     case "signature":
-      return <SignatureDisplay value={value} />;
+      body = <SignatureDisplay value={value} />;
+      break;
 
     case "geolocation":
-      return <GeolocationDisplay value={value} />;
+      body = <GeolocationDisplay value={value} />;
+      break;
 
     case "richtexteditor":
     case "markdowneditor":
     case "codeeditor":
-      return <RichTextDisplay value={value} />;
+      body = <RichTextDisplay value={value} />;
+      break;
 
     case "custom":
     default:
-      return <InputDisplay value={value} />;
+      body = <InputDisplay value={value} href={fieldProps?.href} />;
+      break;
   }
+
+  return <DisplayFrame field={field}>{body}</DisplayFrame>;
 }