@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-RMA3NOY4.js

@@ -0,0 +1,599 @@
+import { Progress } from './chunk-L2WMOA2V.js';
+import { IconTile } from './chunk-XBXUBBJZ.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { AccessibilityInfo, View, Text, Pressable, Platform } from 'react-native';
+import { Svg, Circle } from 'react-native-svg';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var LONG_JOB_MS = 6e4;
+var DEFAULT_LABELS = {
+  status: {
+    queued: "Waiting",
+    running: "Uploading",
+    paused: "Paused",
+    processing: "Processing\u2026",
+    failed: "Failed",
+    done: "Done",
+    cancelled: "Cancelled"
+  },
+  pause: "Pause",
+  resume: "Resume",
+  cancel: "Cancel",
+  retry: "Retry",
+  open: "Open",
+  remove: "Remove",
+  tapToRetry: "Failed \xB7 Tap to retry",
+  details: "Details",
+  announce: (title, status) => `${title}: ${status}`,
+  queueRunning: (done, total) => `Uploading ${Math.min(done + 1, total)} of ${total}`,
+  queueSettled: (done, failed) => failed > 0 ? `${done} uploaded, ${failed} failed` : `${done} uploaded`,
+  cancelAll: "Cancel all",
+  retryFailed: (n) => `Retry failed (${n})`,
+  minimise: "Minimise",
+  expand: "Expand",
+  close: "Close",
+  closeBlocked: "Cancel or wait for uploads to finish",
+  overall: "Overall progress"
+};
+var TILE = {
+  queued: { tone: "neutral", glyph: "clock" },
+  running: { tone: "accent", glyph: null },
+  paused: { tone: "neutral", glyph: "pause" },
+  processing: { tone: "accent", glyph: null },
+  failed: { tone: "danger", glyph: "alert-circle" },
+  done: { tone: "good", glyph: "check" },
+  cancelled: { tone: "neutral", glyph: "x" }
+};
+var ACTIVE = /* @__PURE__ */ new Set(["queued", "running", "paused", "processing"]);
+function useJobPlatform(explicit) {
+  const theme = useLoamTheme("job-row");
+  if (explicit) return explicit;
+  if (Platform.OS === "ios") return "ios";
+  if (Platform.OS === "android") return "android";
+  return theme.platform === "iOS" ? "ios" : "android";
+}
+function StopRing({ pct }) {
+  const theme = useLoamTheme("job-row");
+  const size = theme.space[28];
+  const stroke = theme.space[3];
+  const r = (size - stroke) / 2;
+  const c = 2 * Math.PI * r;
+  return /* @__PURE__ */ jsxs(View, { style: { width: size, height: size, alignItems: "center", justifyContent: "center" }, children: [
+    /* @__PURE__ */ jsxs(
+      Svg,
+      {
+        width: size,
+        height: size,
+        style: { position: "absolute", transform: [{ rotate: "-90deg" }] },
+        children: [
+          /* @__PURE__ */ jsx(
+            Circle,
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r,
+              stroke: theme.color.surface3,
+              strokeWidth: stroke,
+              fill: "none"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Circle,
+            {
+              cx: size / 2,
+              cy: size / 2,
+              r,
+              stroke: theme.color.accentStrong,
+              strokeWidth: stroke,
+              fill: "none",
+              strokeDasharray: `${c} ${c}`,
+              strokeDashoffset: c * (1 - pct / 100)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        style: {
+          width: theme.space[8],
+          height: theme.space[8],
+          borderRadius: theme.radius.xs,
+          backgroundColor: theme.color.accentStrong
+        }
+      }
+    )
+  ] });
+}
+function JobRow({
+  title,
+  status,
+  progress,
+  meta,
+  log,
+  icon = "upload",
+  onPause,
+  onResume,
+  onCancel,
+  onRetry,
+  onOpen,
+  onRemove,
+  onLongRunning,
+  divider = false,
+  platform,
+  labels: labelsProp,
+  density = "comfortable",
+  selected = false,
+  disabled = false
+}) {
+  const os = useJobPlatform(platform);
+  const { styles, theme } = useStyles(sheet, { os });
+  const labels = useLabels("jobRow", DEFAULT_LABELS, labelsProp);
+  const spoken = labels.status[status];
+  const pct = progress == null ? 0 : Math.round(Math.min(Math.max(progress, 0), 100));
+  const slop = (theme.space[44] - theme.space[28]) / 2;
+  const first = React.useRef(true);
+  React.useEffect(() => {
+    if (first.current) {
+      first.current = false;
+      return;
+    }
+    AccessibilityInfo.announceForAccessibility(labels.announce(title, spoken));
+  }, [status]);
+  const longCb = React.useRef(onLongRunning);
+  longCb.current = onLongRunning;
+  React.useEffect(() => {
+    if (os !== "android" || status !== "running" || !longCb.current) return void 0;
+    const t = setTimeout(() => longCb.current?.(), LONG_JOB_MS);
+    return () => clearTimeout(t);
+  }, [os, status]);
+  const titleStyle = [styles.title, status === "cancelled" && styles.titleMuted];
+  const metaStyle = [styles.meta, status === "failed" && styles.metaDanger];
+  const rowStyle = [
+    styles.row,
+    density === "compact" && styles.rowCompact,
+    selected && styles.rowSelected,
+    disabled && styles.rowDisabled
+  ];
+  const rootA11y = {
+    "aria-current": selected ? "true" : void 0,
+    "aria-disabled": disabled || void 0
+  };
+  const hasBar = status === "running" || status === "paused" || status === "processing";
+  const [logOpen, setLogOpen] = React.useState(true);
+  const showLog = status === "failed" && log != null && log.length > 0;
+  const logBlock = showLog && logOpen ? /* @__PURE__ */ jsx(View, { style: [styles.log, os === "ios" ? styles.logIos : styles.logAndroid], children: log.map((line, i) => /* @__PURE__ */ jsx(Text, { style: [styles.logLine, i === log.length - 1 && styles.logLineDanger], children: line }, i)) }) : null;
+  const detailsButton = showLog ? /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: labels.details,
+      accessibilityState: { expanded: logOpen },
+      onPress: () => setLogOpen((o) => !o),
+      style: ({ pressed }) => [styles.target, pressed && styles.pressed],
+      children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 20, color: theme.color.text2 })
+    }
+  ) : null;
+  const openText = /* @__PURE__ */ jsx(Text, { style: styles.openText, numberOfLines: 1, children: labels.open });
+  if (os === "ios") {
+    const ios = /* @__PURE__ */ jsxs(View, { style: rowStyle, ...rootA11y, children: [
+      /* @__PURE__ */ jsx(IconTile, { icon: TILE[status].glyph ?? "file", tone: TILE[status].tone, size: "sm" }),
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: [
+            styles.iosBody,
+            density === "compact" && styles.iosBodyCompact,
+            divider && styles.divider
+          ],
+          children: [
+            /* @__PURE__ */ jsxs(View, { style: styles.text, children: [
+              /* @__PURE__ */ jsx(Text, { style: titleStyle, numberOfLines: 1, children: title }),
+              /* @__PURE__ */ jsx(Text, { style: metaStyle, numberOfLines: 1, children: status === "failed" && onRetry && meta == null ? labels.tapToRetry : meta ?? spoken })
+            ] }),
+            status === "running" && onCancel ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                disabled,
+                accessibilityRole: "button",
+                accessibilityLabel: labels.cancel,
+                accessibilityValue: { min: 0, max: 100, now: pct },
+                onPress: onCancel,
+                hitSlop: slop,
+                children: /* @__PURE__ */ jsx(StopRing, { pct })
+              }
+            ) : null,
+            status === "paused" && onResume ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                disabled,
+                accessibilityRole: "button",
+                accessibilityLabel: labels.resume,
+                onPress: onResume,
+                hitSlop: slop,
+                children: /* @__PURE__ */ jsx(Icon, { name: "play", size: 20, color: theme.color.accentStrong })
+              }
+            ) : null,
+            status === "failed" && onRetry ? showLog ? (
+              // The row itself cannot be the retry button while the Details
+              // button lives inside it (nested interactive), so the glyph is it.
+              /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  disabled,
+                  accessibilityRole: "button",
+                  accessibilityLabel: labels.retry,
+                  onPress: onRetry,
+                  hitSlop: slop,
+                  children: /* @__PURE__ */ jsx(Icon, { name: "refresh", size: 20, color: theme.color.accentStrong })
+                }
+              )
+            ) : /* @__PURE__ */ jsx(Icon, { name: "refresh", size: 20, color: theme.color.accentStrong }) : null,
+            status === "done" && onOpen ? openText : null,
+            detailsButton,
+            status === "cancelled" && onRemove ? /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                disabled,
+                accessibilityRole: "button",
+                accessibilityLabel: labels.remove,
+                onPress: onRemove,
+                hitSlop: slop,
+                children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 18, color: theme.color.text3 })
+              }
+            ) : null
+          ]
+        }
+      )
+    ] });
+    const press = status === "failed" ? onRetry : status === "done" ? onOpen : void 0;
+    const nested = status === "failed" && showLog;
+    const iosRow = press ? /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        disabled,
+        ...nested ? { accessible: false } : {
+          accessibilityRole: "button",
+          accessibilityLabel: `${title}, ${status === "failed" ? labels.retry : labels.open}`
+        },
+        onPress: press,
+        style: ({ pressed }) => pressed && styles.pressed,
+        children: ios
+      }
+    ) : ios;
+    return logBlock ? /* @__PURE__ */ jsxs(View, { style: divider && styles.divider, children: [
+      iosRow,
+      logBlock
+    ] }) : iosRow;
+  }
+  const tile = TILE[status];
+  const action = (name, label, onPress) => /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      onPress,
+      style: ({ pressed }) => [styles.target, pressed && styles.pressed],
+      children: /* @__PURE__ */ jsx(Icon, { name, size: 24, color: theme.color.text2 })
+    }
+  );
+  const androidMeta = status === "running" && meta != null ? `${pct} % \xB7 ${meta}` : status === "running" ? `${pct} %` : meta ?? spoken;
+  return /* @__PURE__ */ jsxs(View, { style: divider && styles.divider, children: [
+    /* @__PURE__ */ jsxs(View, { style: rowStyle, ...rootA11y, children: [
+      /* @__PURE__ */ jsx(IconTile, { icon: tile.glyph ?? icon, tone: tile.tone, size: "md", glyphSize: 20 }),
+      /* @__PURE__ */ jsxs(View, { style: styles.text, children: [
+        /* @__PURE__ */ jsx(Text, { style: titleStyle, numberOfLines: 1, children: title }),
+        hasBar ? /* @__PURE__ */ jsx(
+          Progress,
+          {
+            size: "sm",
+            value: status === "processing" ? void 0 : pct,
+            tone: status === "paused" ? "neutral" : "accent",
+            accessibilityLabel: title
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(Text, { style: metaStyle, numberOfLines: 1, children: androidMeta })
+      ] }),
+      status === "running" && onPause ? action("pause", labels.pause, onPause) : null,
+      status === "paused" && onResume ? action("play", labels.resume, onResume) : null,
+      status === "failed" && onRetry ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onRetry, children: labels.retry }) : null,
+      status === "done" && onOpen ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onOpen, children: labels.open }) : null,
+      detailsButton,
+      ACTIVE.has(status) && onCancel ? action("x", labels.cancel, onCancel) : null,
+      status === "cancelled" && onRemove ? action("x", labels.remove, onRemove) : null
+    ] }),
+    logBlock
+  ] });
+}
+function overallOf(jobs) {
+  const counted = jobs.filter((j) => j.status !== "cancelled");
+  if (counted.length === 0) return 0;
+  const sum = counted.reduce(
+    (n, j) => n + (j.status === "done" || j.status === "failed" ? 100 : j.status === "running" || j.status === "paused" ? j.progress ?? 0 : 0),
+    0
+  );
+  return Math.round(sum / counted.length);
+}
+function UploadQueue({
+  jobs,
+  platform,
+  labels,
+  density,
+  loading = false,
+  onCancelAll,
+  onRetryFailed,
+  onClose,
+  minimised: minimisedProp,
+  onMinimisedChange,
+  heading
+}) {
+  const os = useJobPlatform(platform);
+  const { styles, theme } = useStyles(sheet, { os });
+  const text = useLabels("jobRow", DEFAULT_LABELS, labels);
+  const [own, setOwn] = React.useState(false);
+  const minimised = minimisedProp ?? own;
+  const setMinimised = (m) => {
+    if (minimisedProp === void 0) setOwn(m);
+    onMinimisedChange?.(m);
+  };
+  const failed = jobs.filter((j) => j.status === "failed").length;
+  const done = jobs.filter((j) => j.status === "done").length;
+  const total = jobs.filter((j) => j.status !== "cancelled").length;
+  const running = jobs.some((j) => ACTIVE.has(j.status));
+  const panel = heading != null || onClose != null || onCancelAll != null || onRetryFailed != null;
+  const line = heading ?? (running ? text.queueRunning(done, total) : text.queueSettled(done, failed));
+  const sorted = React.useMemo(
+    () => [...jobs].sort((a, b) => Number(b.status === "failed") - Number(a.status === "failed")),
+    [jobs]
+  );
+  const list = /* @__PURE__ */ jsx(
+    View,
+    {
+      style: os === "ios" && !panel ? styles.iosCard : void 0,
+      accessibilityRole: "list",
+      "aria-busy": loading || void 0,
+      children: loading ? [0, 1, 2].map((n) => /* @__PURE__ */ jsxs(View, { style: [styles.skeletonRow, n > 0 && styles.divider], children: [
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rect",
+            width: theme.space[40],
+            height: theme.space[40],
+            decorative: true
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: styles.text, children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: theme.space[160], decorative: true }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: theme.space[96], decorative: true })
+        ] })
+      ] }, n)) : sorted.map(({ id, ...job }, i) => /* @__PURE__ */ jsx(View, { role: "listitem", children: /* @__PURE__ */ jsx(JobRow, { density, ...job, divider: i > 0, platform: os, labels }) }, id))
+    }
+  );
+  if (!panel) return list;
+  const showFooter = running && onCancelAll != null || failed > 0 && onRetryFailed != null;
+  return /* @__PURE__ */ jsxs(View, { style: styles.panel, accessibilityRole: "summary", accessibilityLabel: line, children: [
+    /* @__PURE__ */ jsxs(View, { style: [styles.panelHeader, !running && !minimised && styles.panelHeaderRule], children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.panelTitle, children: [
+        failed > 0 && !running ? /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: 16, color: theme.color.dangerOnSoft }) : null,
+        /* @__PURE__ */ jsx(Text, { style: styles.panelHeading, numberOfLines: 1, children: line })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: minimised ? text.expand : text.minimise,
+          accessibilityState: { expanded: !minimised },
+          onPress: () => setMinimised(!minimised),
+          style: ({ pressed }) => [styles.headerTarget, pressed && styles.pressed],
+          children: /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: minimised ? "chevron-up" : "chevron-down",
+              size: 16,
+              color: theme.color.text2
+            }
+          )
+        }
+      ),
+      onClose ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: text.close,
+          accessibilityHint: running ? text.closeBlocked : void 0,
+          accessibilityState: { disabled: running },
+          onPress: running ? void 0 : onClose,
+          style: ({ pressed }) => [
+            styles.headerTarget,
+            running && styles.rowDisabled,
+            pressed && !running && styles.pressed
+          ],
+          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 16, color: theme.color.text2 })
+        }
+      ) : null
+    ] }),
+    minimised ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      running ? /* @__PURE__ */ jsx(View, { style: styles.overall, children: /* @__PURE__ */ jsx(Progress, { size: "sm", value: overallOf(jobs), accessibilityLabel: text.overall }) }) : null,
+      list,
+      showFooter ? /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+        failed > 0 && onRetryFailed ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onPress: onRetryFailed, children: text.retryFailed(failed) }) : null,
+        running && onCancelAll ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onPress: onCancelAll, children: text.cancelAll }) : null
+      ] }) : null
+    ] })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    variants: {
+      os: {
+        ios: { gap: theme.space[12], paddingLeft: theme.space[16] },
+        android: {
+          gap: theme.space[16],
+          minHeight: theme.space[72],
+          paddingLeft: theme.space[16],
+          paddingRight: theme.space[4]
+        }
+      }
+    }
+  },
+  rowCompact: {
+    variants: {
+      os: {
+        ios: {},
+        android: { minHeight: theme.space[56] }
+      }
+    }
+  },
+  rowSelected: {
+    backgroundColor: theme.color.accentSoft,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.edge.accent
+  },
+  rowDisabled: { opacity: theme.state.disabledOpacity },
+  iosBodyCompact: { minHeight: theme.space[44] },
+  iosBody: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[12],
+    minHeight: theme.space[60],
+    paddingRight: theme.space[16]
+  },
+  divider: {
+    borderTopWidth: theme.borderWidth.thin,
+    borderTopColor: theme.color.border
+  },
+  text: {
+    flex: 1,
+    minWidth: 0,
+    variants: {
+      os: {
+        ios: { gap: theme.space[2] },
+        android: { gap: theme.space[6] }
+      }
+    }
+  },
+  title: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    letterSpacing: theme.type.body.letterSpacing
+  },
+  titleMuted: { color: theme.color.text2 },
+  meta: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    letterSpacing: theme.type.subheadline.letterSpacing
+  },
+  metaDanger: { color: theme.color.dangerOnSoft },
+  // Material's 48 target, whatever the theme's platform.
+  target: {
+    width: theme.space[48],
+    height: theme.space[48],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  iosCard: {
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden"
+  },
+  skeletonRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[12],
+    padding: theme.space[16]
+  },
+  pressed: { opacity: theme.state.pressedOpacity },
+  openText: {
+    fontFamily: theme.font.sans,
+    color: theme.color.accentStrong,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight
+  },
+  log: {
+    gap: theme.space[2],
+    backgroundColor: theme.color.surface2,
+    borderRadius: theme.radius.sm,
+    paddingHorizontal: theme.space[12],
+    paddingVertical: theme.space[10],
+    marginRight: theme.space[16],
+    marginBottom: theme.space[12]
+  },
+  logIos: { marginLeft: theme.space[58] },
+  logAndroid: { marginLeft: theme.space[68] },
+  logLine: {
+    fontFamily: theme.font.mono,
+    color: theme.color.text2,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight
+  },
+  logLineDanger: { color: theme.color.dangerOnSoft },
+  panel: {
+    backgroundColor: theme.color.surface,
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    ...theme.shadow.md
+  },
+  panelHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: theme.space[44],
+    paddingLeft: theme.space[16],
+    paddingRight: theme.space[4]
+  },
+  panelHeaderRule: {
+    borderBottomWidth: theme.borderWidth.thin,
+    borderBottomColor: theme.color.border
+  },
+  panelTitle: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[8]
+  },
+  panelHeading: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    fontWeight: theme.fontWeight.semibold
+  },
+  headerTarget: {
+    width: theme.space[44],
+    height: theme.space[44],
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  overall: {
+    paddingHorizontal: theme.space[16],
+    paddingBottom: theme.space[12],
+    borderBottomWidth: theme.borderWidth.thin,
+    borderBottomColor: theme.color.border
+  },
+  footer: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    gap: theme.space[8],
+    padding: theme.space[8],
+    borderTopWidth: theme.borderWidth.thin,
+    borderTopColor: theme.color.border
+  }
+}));
+
+export { JobRow, LONG_JOB_MS, UploadQueue };