@multiplatform.one/forms 6.0.0

package/src/FieldDisplay/index.tsx

@@ -0,0 +1,384 @@
+/**
+ * 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.
+ *
+ * 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.
+ */
+
+import { CheckIcon } from "@phosphor-icons/react";
+import { Text, View, XStack } from "tamagui";
+
+export type FieldDisplayType =
+  | "input"
+  | "textarea"
+  | "mentioninput"
+  | "stepper"
+  | "slider"
+  | "select"
+  | "combobox"
+  | "radiogroup"
+  | "togglegroup"
+  | "checkbox"
+  | "switch"
+  | "datepicker"
+  | "datetimepicker"
+  | "timepicker"
+  | "daterangepicker"
+  | "multidatepicker"
+  | "duration"
+  | "colorpicker"
+  | "phoneinput"
+  | "otp"
+  | "barcode"
+  | "rating"
+  | "progress"
+  | "fileupload"
+  | "image"
+  | "signature"
+  | "geolocation"
+  | "richtexteditor"
+  | "markdowneditor"
+  | "codeeditor"
+  | "custom";
+
+export interface FieldDisplayProps {
+  field?: FieldDisplayType;
+  value: any;
+  fieldProps?: Record<string, any>;
+  /** For linked daterange columns. */
+  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,
+  align = "left",
+}: {
+  children: React.ReactNode;
+  mono?: boolean;
+  align?: "left" | "right" | "center";
+}) {
+  // 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.
+  return (
+    <Text
+      numberOfLines={1}
+      fontSize="$4"
+      lineHeight="$4"
+      fontFamily={mono ? "$mono" : "$body"}
+      textAlign={align}
+      color="$color"
+    >
+      {children}
+    </Text>
+  );
+}
+
+function InputDisplay({ value }: { value: any }) {
+  return <TextCell>{asText(value)}</TextCell>;
+}
+
+function NumericDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<string, any> }) {
+  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);
+  return (
+    <TextCell mono align="right">
+      {formatted}
+    </TextCell>
+  );
+}
+
+// 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,
+  withTime,
+}: {
+  value: any;
+  fieldProps?: Record<string, any>;
+  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>
+  );
+}
+
+function DateRangeDisplay({ value, linkedValue }: { value: any; linkedValue?: any }) {
+  const start = value;
+  const end = linkedValue ?? (Array.isArray(value) ? value[1] : value?.end);
+  const startFmt =
+    start && !(start instanceof Date && Number.isNaN(start.getTime()))
+      ? new Date(start).toLocaleDateString()
+      : null;
+  const endFmt =
+    end && !(end instanceof Date && Number.isNaN(end.getTime()))
+      ? new Date(end).toLocaleDateString()
+      : null;
+  if (!startFmt && !endFmt) return <TextCell>{EMPTY}</TextCell>;
+  return <TextCell>{`${startFmt ?? "?"} – ${endFmt ?? "?"}`}</TextCell>;
+}
+
+function ChoiceDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<string, any> }) {
+  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>;
+}
+
+function BooleanDisplay({ value }: { value: any }) {
+  if (value == null) return <TextCell align="center">{EMPTY}</TextCell>;
+  return (
+    <XStack justifyContent="center" alignItems="center" width="100%">
+      {value ? (
+        <CheckIcon size={14} weight="bold" />
+      ) : (
+        <Text color="$placeholderColor">{EMPTY}</Text>
+      )}
+    </XStack>
+  );
+}
+
+function ColorDisplay({ value }: { value: any }) {
+  const hex = typeof value === "string" && value ? value : null;
+  if (!hex) return <TextCell>{EMPTY}</TextCell>;
+  return (
+    <XStack alignItems="center" gap="$2">
+      <View
+        width={14}
+        height={14}
+        borderRadius="$2"
+        borderWidth={1}
+        borderColor="$borderColor"
+        backgroundColor={hex}
+      />
+      <Text fontFamily="$mono" fontSize="$4" lineHeight="$4" color="$color">
+        {hex.toUpperCase()}
+      </Text>
+    </XStack>
+  );
+}
+
+function DurationDisplay({ value }: { value: any }) {
+  if (value == null || value === "") return <TextCell>{EMPTY}</TextCell>;
+  const seconds = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(seconds)) return <TextCell>{asText(value)}</TextCell>;
+  const h = Math.floor(seconds / 3600);
+  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>;
+}
+
+function FileUploadDisplay({ value }: { value: any }) {
+  const files = Array.isArray(value) ? value : value ? [value] : [];
+  if (!files.length) return <TextCell>{EMPTY}</TextCell>;
+  const label =
+    files.length === 1
+      ? typeof files[0] === "string"
+        ? files[0]
+        : (files[0]?.name ?? "1 file")
+      : `${files.length} files`;
+  return <TextCell>{label}</TextCell>;
+}
+
+function ImageDisplay({ value }: { value: any }) {
+  const src = typeof value === "string" && value ? value : null;
+  if (!src) return <TextCell>{EMPTY}</TextCell>;
+  return (
+    <View
+      width={28}
+      height={28}
+      borderRadius="$2"
+      borderWidth={1}
+      borderColor="$borderColor"
+      overflow="hidden"
+      backgroundColor="$color3"
+    >
+      <View
+        width="100%"
+        height="100%"
+        backgroundImage={`url(${src})`}
+        backgroundSize="cover"
+        backgroundPosition="center"
+      />
+    </View>
+  );
+}
+
+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>;
+}
+
+function GeolocationDisplay({ value }: { value: any }) {
+  if (value == null) return <TextCell>{EMPTY}</TextCell>;
+  if (typeof value === "object" && value !== null) {
+    const lat = (value as any).lat ?? (value as any).latitude;
+    const lng = (value as any).lng ?? (value as any).lon ?? (value as any).longitude;
+    if (typeof lat === "number" && typeof lng === "number") {
+      return (
+        <TextCell mono>
+          {lat.toFixed(4)}, {lng.toFixed(4)}
+        </TextCell>
+      );
+    }
+  }
+  return <TextCell>{asText(value)}</TextCell>;
+}
+
+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"
+      ? value
+          .replace(/<[^>]+>/g, " ")
+          .replace(/\s+/g, " ")
+          .trim()
+      : asText(value);
+  if (!text) return <TextCell>{EMPTY}</TextCell>;
+  return <TextCell>{text}</TextCell>;
+}
+
+export function FieldDisplay({
+  field = "input",
+  value,
+  fieldProps,
+  linkedValue,
+}: FieldDisplayProps) {
+  switch (field) {
+    case "input":
+    case "textarea":
+    case "mentioninput":
+    case "phoneinput":
+    case "otp":
+    case "barcode":
+      return <InputDisplay value={value} />;
+
+    case "stepper":
+    case "slider":
+    case "rating":
+    case "progress":
+      return <NumericDisplay value={value} fieldProps={fieldProps} />;
+
+    case "select":
+    case "combobox":
+    case "radiogroup":
+    case "togglegroup":
+      return <ChoiceDisplay value={value} fieldProps={fieldProps} />;
+
+    case "checkbox":
+    case "switch":
+      return <BooleanDisplay value={value} />;
+
+    case "datepicker":
+    case "multidatepicker":
+      return <DateDisplay value={value} fieldProps={fieldProps} />;
+
+    case "datetimepicker":
+    case "timepicker":
+      return <DateDisplay value={value} fieldProps={fieldProps} withTime />;
+
+    case "daterangepicker":
+      return <DateRangeDisplay value={value} linkedValue={linkedValue} />;
+
+    case "colorpicker":
+      return <ColorDisplay value={value} />;
+
+    case "duration":
+      return <DurationDisplay value={value} />;
+
+    case "fileupload":
+      return <FileUploadDisplay value={value} />;
+
+    case "image":
+      return <ImageDisplay value={value} />;
+
+    case "signature":
+      return <SignatureDisplay value={value} />;
+
+    case "geolocation":
+      return <GeolocationDisplay value={value} />;
+
+    case "richtexteditor":
+    case "markdowneditor":
+    case "codeeditor":
+      return <RichTextDisplay value={value} />;
+
+    case "custom":
+    default:
+      return <InputDisplay value={value} />;
+  }
+}

package/src/FloatingPanel/FloatingPanel.stories.tsx

@@ -0,0 +1,197 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { H4, Paragraph, Separator, Text, View, YStack } from "tamagui";
+import { FloatingPanel } from "./index";
+import { Input as InputParts } from "../InputParts";
+import { formCommonColors } from "../shared/colorRamps";
+
+const meta: Meta<typeof FloatingPanel> = {
+  title: "Forms/FloatingPanel",
+  component: FloatingPanel,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A floating panel that adapts: on native and sm screens, uses Sheet (slide-up); on larger web, uses a custom @floating-ui/react overlay with dropdown/dropup, scroll arrows, grow-on-scroll, and page scroll lock (same approach as Select/Combobox). Pass sheet={true} to force Sheet on desktop. Used by ColorPicker, DatePicker, TimePicker, and Duration.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FloatingPanel>;
+
+export const Basic: Story = {
+  name: "Main",
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <YStack padding="$4" gap="$4" maxWidth={400}>
+        <Paragraph color={formCommonColors.muted}>
+          Click the trigger to open the floating panel.
+        </Paragraph>
+        <FloatingPanel
+          open={open}
+          onOpenChange={setOpen}
+          trigger={
+            <InputParts.Box cursor="pointer">
+              <View flex={1} paddingHorizontal="$3" paddingVertical="$2">
+                <Text>{open ? "Panel is open" : "Click to open panel"}</Text>
+              </View>
+            </InputParts.Box>
+          }
+        >
+          <YStack gap="$3">
+            <H4>Panel Content</H4>
+            <Paragraph>
+              This is a floating panel built on Tamagui Sheet. It has a proper overlay, slide-up
+              animation, and drag-to-dismiss.
+            </Paragraph>
+            <Separator />
+            <Paragraph color={formCommonColors.muted}>Drag down or tap overlay to close.</Paragraph>
+          </YStack>
+        </FloatingPanel>
+      </YStack>
+    );
+  },
+};
+
+export const ScrollableContent: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const items = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
+    return (
+      <YStack padding="$4" gap="$4" maxWidth={400}>
+        <Paragraph color={formCommonColors.muted}>
+          A scrollable floating panel with many items. Drag the handle to resize.
+        </Paragraph>
+        <FloatingPanel
+          open={open}
+          onOpenChange={setOpen}
+          scrollable
+          trigger={
+            <InputParts.Box cursor="pointer">
+              <View flex={1} paddingHorizontal="$3" paddingVertical="$2">
+                <Text>{open ? "Scrollable panel open" : "Click for scrollable panel"}</Text>
+              </View>
+            </InputParts.Box>
+          }
+        >
+          <YStack>
+            {items.map((item) => (
+              <View
+                key={item}
+                paddingHorizontal="$3"
+                paddingVertical="$2.5"
+                hoverStyle={{ backgroundColor: "$backgroundHover" }}
+                cursor="pointer"
+                onPress={() => setOpen(false)}
+              >
+                <Text>{item}</Text>
+              </View>
+            ))}
+          </YStack>
+        </FloatingPanel>
+      </YStack>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <YStack padding="$4" gap="$4" maxWidth={400}>
+        <FloatingPanel
+          open={open}
+          onOpenChange={setOpen}
+          disabled
+          trigger={
+            <InputParts.Box cursor="not-allowed" opacity={0.5}>
+              <View flex={1} paddingHorizontal="$3" paddingVertical="$2">
+                <Text>Disabled trigger</Text>
+              </View>
+            </InputParts.Box>
+          }
+        >
+          <YStack>
+            <Paragraph>You should never see this.</Paragraph>
+          </YStack>
+        </FloatingPanel>
+      </YStack>
+    );
+  },
+};
+
+export const FillSizing: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const items = Array.from({ length: 30 }, (_, i) => `Option ${i + 1}`);
+    return (
+      <YStack padding="$4" gap="$4" maxWidth={400}>
+        <Paragraph color={formCommonColors.muted}>
+          sizing="fill" opens the panel at maximum available viewport size immediately, without
+          requiring scroll to grow. Ideal for calendars, color pickers, and fixed-content panels.
+        </Paragraph>
+        <FloatingPanel
+          open={open}
+          onOpenChange={setOpen}
+          scrollable
+          sizing="fill"
+          trigger={
+            <InputParts.Box cursor="pointer">
+              <View flex={1} paddingHorizontal="$3" paddingVertical="$2">
+                <Text>{open ? "Fill panel open" : "Click for fill-sized panel"}</Text>
+              </View>
+            </InputParts.Box>
+          }
+        >
+          <YStack>
+            {items.map((item) => (
+              <View
+                key={item}
+                paddingHorizontal="$3"
+                paddingVertical="$2.5"
+                hoverStyle={{ backgroundColor: "$backgroundHover" }}
+                cursor="pointer"
+                onPress={() => setOpen(false)}
+              >
+                <Text>{item}</Text>
+              </View>
+            ))}
+          </YStack>
+        </FloatingPanel>
+      </YStack>
+    );
+  },
+};
+
+export const ForceSheet: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <YStack padding="$4" gap="$4" maxWidth={400}>
+        <Paragraph color={formCommonColors.muted}>
+          sheet forces Sheet mode even on desktop (floating panel otherwise).
+        </Paragraph>
+        <FloatingPanel
+          open={open}
+          onOpenChange={setOpen}
+          sheet
+          trigger={
+            <InputParts.Box cursor="pointer">
+              <View flex={1} paddingHorizontal="$3" paddingVertical="$2">
+                <Text>{open ? "Sheet open" : "Click for Sheet (forced)"}</Text>
+              </View>
+            </InputParts.Box>
+          }
+        >
+          <YStack gap="$3">
+            <H4>Forced Sheet</H4>
+            <Paragraph>This panel always uses Sheet, even on large screens.</Paragraph>
+          </YStack>
+        </FloatingPanel>
+      </YStack>
+    );
+  },
+};