@lotics/ui 1.15.0 → 1.17.0

package/src/date_filter_presets.ts

@@ -0,0 +1,100 @@
+import type { DateFilterValue } from "./date_filter";
+
+// Pure preset-range math for DateFilter. Kept free of React/RN so it can be
+// unit-tested deterministically: every range is computed from an injected
+// `now`, never an ambient clock.
+
+export type PresetId =
+  | "custom"
+  | "today"
+  | "yesterday"
+  | "tomorrow"
+  | "this_week"
+  | "this_month"
+  | "last_month";
+
+/** Display order. "custom" carries no range — it clears the value. */
+export const PRESET_IDS: PresetId[] = [
+  "today",
+  "yesterday",
+  "tomorrow",
+  "this_week",
+  "this_month",
+  "last_month",
+  "custom",
+];
+
+function startOfDay(date: Date): Date {
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+function endOfDay(date: Date): Date {
+  const d = new Date(date);
+  d.setHours(23, 59, 59, 999);
+  return d;
+}
+
+function startOfWeek(date: Date): Date {
+  const d = new Date(date);
+  const day = d.getDay();
+  const diff = d.getDate() - day + (day === 0 ? -6 : 1); // Monday is first day
+  d.setDate(diff);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+function endOfWeek(date: Date): Date {
+  const start = startOfWeek(date);
+  const end = new Date(start);
+  end.setDate(end.getDate() + 6);
+  end.setHours(23, 59, 59, 999);
+  return end;
+}
+
+function startOfMonth(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+
+function endOfMonth(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59, 999);
+}
+
+function range(start: Date, end: Date): DateFilterValue {
+  return { start: { date: start, time: null }, end: { date: end, time: null } };
+}
+
+/**
+ * Resolve a preset to a concrete date range relative to `now`. Returns `null`
+ * for "custom" (no range — the caller clears the value so the user picks
+ * manually). The boundary math is identical to the view-page filter so a
+ * resolved range round-trips back to the same preset.
+ */
+export function getPresetValue(id: PresetId, now: Date): DateFilterValue | null {
+  switch (id) {
+    case "today":
+      return range(startOfDay(now), endOfDay(now));
+    case "yesterday": {
+      const d = new Date(now);
+      d.setDate(d.getDate() - 1);
+      return range(startOfDay(d), endOfDay(d));
+    }
+    case "tomorrow": {
+      const d = new Date(now);
+      d.setDate(d.getDate() + 1);
+      return range(startOfDay(d), endOfDay(d));
+    }
+    case "this_week":
+      return range(startOfWeek(now), endOfWeek(now));
+    case "this_month":
+      return range(startOfMonth(now), endOfMonth(now));
+    case "last_month": {
+      const d = new Date(now);
+      d.setMonth(d.getMonth() - 1);
+      return range(startOfMonth(d), endOfMonth(d));
+    }
+    case "custom":
+      return null;
+  }
+}

package/src/file_gallery_modal.tsx

@@ -1,12 +1,11 @@
-// FileGalleryModal — pure fullscreen image preview with prev/next nav + ESC close.
-// Pure primitive: takes DisplayFile[] only, no Lotics domain coupling. Frontend
-// has a richer modal in `frontend/components/file_gallery.tsx` that handles
-// xlsx/docx/pdf inline rendering — leave that one for Lotics-specific previews
-// and use this primitive when only images need previewing.
+// FileGalleryModal — fullscreen file preview with prev/next nav + ESC close.
+// Pure primitive: takes DisplayFile[] only, no Lotics domain coupling. Renders
+// every previewable type (image/PDF/video/audio/Word/Excel/CSV) via FilePreview,
+// whose document engines (@lotics/docx, @lotics/xlsx) are optional peer deps
+// loaded lazily — so a consumer that only shows images pays nothing extra.
 
 import { useCallback, useEffect, useRef } from "react";
 import {
-  Image,
   Modal,
   Pressable,
   StyleSheet,
@@ -15,8 +14,9 @@ import {
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { colors } from "./colors";
-import { isImageMimeType } from "./mime";
 import type { DisplayFile } from "./file_thumbnail";
+import { FilePreview } from "./file_preview";
+import type { PreviewLabels } from "./file_preview_types";
 
 export interface FileGalleryModalProps {
   files: DisplayFile[];
@@ -24,19 +24,22 @@ export interface FileGalleryModalProps {
   activeIndex: number | null;
   onIndexChange: (next: number | null) => void;
   /**
-   * Optional caption suffix shown under the image. Useful for hint text like
+   * Optional caption suffix shown under the file. Useful for hint text like
    * "ESC để đóng · ←/→ để chuyển". When omitted, just shows filename + count.
    */
   captionHint?: string;
+  /** Translated preview strings; English fallback when omitted. */
+  labels?: Partial<PreviewLabels>;
+  /** Reported when a file fails to render (host wires to its logger). */
+  onError?: (error: unknown, meta: { fileId: string; mimeType: string }) => void;
 }
 
 /**
- * Image-focused fullscreen preview. Non-image MIME types render as a simple
- * "{filename} · cannot preview" card — callers needing rich preview should use
- * a Lotics-specific gallery instead.
+ * Fullscreen file preview gallery. Renders any previewable MIME type inline
+ * via FilePreview; unknown types show a download placeholder.
  */
 export function FileGalleryModal(props: FileGalleryModalProps) {
-  const { files, activeIndex, onIndexChange, captionHint } = props;
+  const { files, activeIndex, onIndexChange, captionHint, labels, onError } = props;
   const visible = activeIndex !== null;
   const overlayRef = useRef<View | null>(null);
 
@@ -81,22 +84,9 @@ export function FileGalleryModal(props: FileGalleryModalProps) {
           style={StyleSheet.absoluteFill}
         />
 
-        {isImageMimeType(file.mimeType) ? (
-          <Image
-            source={{ uri: file.url }}
-            style={styles.image}
-            resizeMode="contain"
-          />
-        ) : (
-          <View style={styles.unsupportedCard}>
-            <Text size="md" style={styles.unsupportedText}>
-              {file.filename}
-            </Text>
-            <Text size="sm" color="muted">
-              Cannot preview this file type in the gallery.
-            </Text>
-          </View>
-        )}
+        <View style={styles.previewPanel}>
+          <FilePreview file={file} labels={labels} onError={onError} />
+        </View>
 
         {activeIndex > 0 ? (
           <Pressable
@@ -137,20 +127,12 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
   },
-  image: {
+  previewPanel: {
     width: "92%",
-    height: "85%",
-  },
-  unsupportedCard: {
-    backgroundColor: colors.white,
+    height: "86%",
+    backgroundColor: colors.background,
     borderRadius: 8,
-    padding: 24,
-    maxWidth: 480,
-    gap: 8,
-    alignItems: "center",
-  },
-  unsupportedText: {
-    fontWeight: "600",
+    overflow: "hidden",
   },
   navButton: {
     position: "absolute",

package/src/file_preview.tsx

@@ -0,0 +1,38 @@
+import { View, Image, StyleSheet } from "react-native";
+import { Text } from "./text";
+import { DocumentCard } from "./file_thumbnail";
+import { isImageMimeType } from "./mime";
+import { type FilePreviewProps, resolveLabels } from "./file_preview_types";
+
+/**
+ * Native (mobile) fallback: images render full-bleed; everything else shows a
+ * document placeholder. Rich document rendering (docx/xlsx/pdf) is web-only —
+ * the `.web.tsx` variant carries it; native consumers download instead.
+ */
+export function FilePreview({ file, labels }: FilePreviewProps) {
+  const l = resolveLabels(labels);
+  if (isImageMimeType(file.mimeType)) {
+    return (
+      <Image
+        source={{ uri: file.url }}
+        resizeMode="contain"
+        style={styles.image}
+        accessibilityIgnoresInvertColors
+      />
+    );
+  }
+  return (
+    <View style={styles.placeholder}>
+      <DocumentCard mimeType={file.mimeType} filename={file.filename} size={120} />
+      <Text size="sm" color="muted" style={styles.placeholderText}>
+        {l.notAvailable}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  image: { flex: 1, width: "100%" },
+  placeholder: { flex: 1, justifyContent: "center", alignItems: "center", gap: 16 },
+  placeholderText: { marginTop: 8 },
+});

package/src/file_preview.web.tsx

@@ -0,0 +1,198 @@
+import { useEffect, useRef, useState } from "react";
+import { View, StyleSheet } from "react-native";
+import { Text } from "./text";
+import { Button } from "./button";
+import { DocumentCard, MediaCard } from "./file_thumbnail";
+import {
+  isImageMimeType,
+  isPdfMimeType,
+  isDocxMimeType,
+  isVideoMimeType,
+  isAudioMimeType,
+  isPreviewableMimeType,
+} from "./mime";
+import { type FilePreviewProps, resolveLabels, type PreviewLabels } from "./file_preview_types";
+import { SpreadsheetView } from "./spreadsheet_view";
+import { downloadFileFromUrl } from "./download";
+
+/**
+ * Universal inline file preview (web). Renders by MIME type: images, PDF, video
+ * and audio use browser-native elements; Word via the lazy-loaded `@lotics/docx`
+ * renderer; Excel/CSV via the read-only `@lotics/xlsx` canvas. Heavy engines are
+ * dynamic-imported so non-document files never pay their bundle cost.
+ *
+ * Pure: i18n via `labels` props, errors via `onError` — no lingui/analytics
+ * (purity test). Lifted from the frontend gallery so both share one renderer.
+ */
+export function FilePreview({ file, labels, onError }: FilePreviewProps) {
+  const l = resolveLabels(labels);
+
+  if (isImageMimeType(file.mimeType)) {
+    return <img alt={file.filename} src={file.url} style={imageStyle} />;
+  }
+  if (isPdfMimeType(file.mimeType)) {
+    return <iframe src={file.url} title={file.filename} style={fullFrameStyle} />;
+  }
+  if (isDocxMimeType(file.mimeType)) {
+    return <WordPreview file={file} labels={l} onError={onError} />;
+  }
+  if (isVideoMimeType(file.mimeType)) {
+    return <video controls preload="metadata" src={file.url} style={mediaElementStyle} />;
+  }
+  if (isAudioMimeType(file.mimeType)) {
+    return (
+      <div style={audioContainerStyle}>
+        <MediaCard mimeType={file.mimeType} filename={file.filename} icon="music" size={160} />
+        <audio controls preload="metadata" src={file.url} style={audioElementStyle} />
+      </div>
+    );
+  }
+  if (isPreviewableMimeType(file.mimeType)) {
+    return <SpreadsheetView file={file} labels={l} onError={onError} />;
+  }
+
+  return (
+    <View style={styles.placeholder}>
+      <DocumentCard mimeType={file.mimeType} filename={file.filename} size={120} />
+      <Text size="sm" color="muted" style={styles.placeholderText}>
+        {l.notAvailable}
+      </Text>
+    </View>
+  );
+}
+
+/** Lazy bridge — pulls jszip + prosemirror only when a .docx is actually opened. */
+async function lazyLoadDocx(
+  ...args: Parameters<typeof import("@lotics/docx/load").loadDocxIntoElement>
+): ReturnType<typeof import("@lotics/docx/load").loadDocxIntoElement> {
+  const mod = await import("@lotics/docx/load");
+  return mod.loadDocxIntoElement(...args);
+}
+
+function WordPreview({
+  file,
+  labels,
+  onError,
+}: {
+  file: FilePreviewProps["file"];
+  labels: PreviewLabels;
+  onError: FilePreviewProps["onError"];
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [state, setState] = useState<{ loading: boolean; error: string | undefined }>({
+    loading: true,
+    error: undefined,
+  });
+
+  useEffect(() => {
+    const controller = new AbortController();
+    let loadedView: { destroy: () => void } | null = null;
+    setState({ loading: true, error: undefined });
+
+    const run = async () => {
+      const response = await fetch(file.url, { signal: controller.signal });
+      if (!response.ok) throw new Error(`Document fetch failed (${response.status})`);
+      const arrayBuffer = await response.arrayBuffer();
+      const bytes = new Uint8Array(arrayBuffer);
+      if (controller.signal.aborted || !containerRef.current) return;
+      containerRef.current.innerHTML = "";
+      const loaded = await lazyLoadDocx(containerRef.current, bytes);
+      if (controller.signal.aborted) {
+        loaded.view.destroy();
+        return;
+      }
+      loadedView = loaded.view;
+    };
+
+    run().then(
+      () => {
+        if (!controller.signal.aborted) setState({ loading: false, error: undefined });
+      },
+      (err: unknown) => {
+        if (controller.signal.aborted) return;
+        if (err instanceof DOMException && err.name === "AbortError") return;
+        onError?.(err, { fileId: file.id, mimeType: file.mimeType });
+        setState({ loading: false, error: labels.loadFailed });
+      },
+    );
+
+    return () => {
+      controller.abort();
+      loadedView?.destroy();
+    };
+  }, [file.url, file.id, file.mimeType, labels.loadFailed, onError]);
+
+  return (
+    <div style={wordContainerStyle}>
+      {state.loading && (
+        <div style={centerStyle}>
+          <Text size="sm" color="muted">
+            …
+          </Text>
+        </div>
+      )}
+      {state.error !== undefined && (
+        <div style={centerStyle}>
+          <Text size="sm" color="muted">
+            {state.error}
+          </Text>
+          <View style={{ marginTop: 12 }}>
+            <Button
+              icon="download"
+              title={labels.download}
+              color="secondary"
+              onPress={() => void downloadFileFromUrl(file.url, file.filename)}
+            />
+          </View>
+        </div>
+      )}
+      <div ref={containerRef} style={state.loading ? hiddenStyle : wordContentStyle} />
+    </div>
+  );
+}
+
+const styles = StyleSheet.create({
+  placeholder: { flex: 1, justifyContent: "center", alignItems: "center", gap: 16 },
+  placeholderText: { marginTop: 8 },
+});
+
+const imageStyle: React.CSSProperties = {
+  width: "100%",
+  height: "100%",
+  objectFit: "contain",
+  backgroundColor: "rgba(10, 10, 10, 0.8)",
+};
+const fullFrameStyle: React.CSSProperties = { width: "100%", height: "100%", border: "none" };
+const mediaElementStyle: React.CSSProperties = {
+  width: "100%",
+  height: "100%",
+  backgroundColor: "rgba(10, 10, 10, 0.8)",
+  objectFit: "contain",
+};
+const audioContainerStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  flex: 1,
+  gap: 24,
+  padding: 48,
+};
+const audioElementStyle: React.CSSProperties = { width: "min(480px, 100%)" };
+const wordContainerStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  overflow: "auto",
+  backgroundColor: "#f4f4f5",
+};
+const wordContentStyle: React.CSSProperties = { display: "block", minHeight: "100%" };
+const hiddenStyle: React.CSSProperties = { display: "none" };
+const centerStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  flex: 1,
+  padding: 48,
+};

package/src/file_preview_types.ts

@@ -0,0 +1,35 @@
+import type { DisplayFile } from "./file_thumbnail";
+
+/**
+ * Caption/error strings shown inside the preview. `@lotics/ui` is i18n-free
+ * (purity test forbids lingui), so the host passes translated strings; English
+ * is the fallback.
+ */
+export interface PreviewLabels {
+  notAvailable: string;
+  loadFailed: string;
+  download: string;
+  passwordProtected: string;
+}
+
+export const defaultPreviewLabels: PreviewLabels = {
+  notAvailable: "Preview not available",
+  loadFailed: "Failed to load preview",
+  download: "Download file",
+  passwordProtected: "This file is password-protected and cannot be previewed",
+};
+
+export interface FilePreviewProps {
+  file: DisplayFile;
+  /** Override any subset of the English default labels. */
+  labels?: Partial<PreviewLabels>;
+  /**
+   * Reported on a render/parse failure. Logging/analytics live in the host (the
+   * package stays analytics-free), so the host wires this to its logger.
+   */
+  onError?: (error: unknown, meta: { fileId: string; mimeType: string }) => void;
+}
+
+export function resolveLabels(labels: Partial<PreviewLabels> | undefined): PreviewLabels {
+  return labels ? { ...defaultPreviewLabels, ...labels } : defaultPreviewLabels;
+}

package/src/mime.ts

@@ -13,3 +13,49 @@ export function isVideoMimeType(mimeType: string): boolean {
 export function isAudioMimeType(mimeType: string): boolean {
   return mimeType.toLowerCase().startsWith("audio/");
 }
+
+const EXCEL_MIME_TYPES = [
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/wps-office.xlsx",
+  "application/wps-office.xls",
+  "application/vnd.ms-excel",
+];
+
+const LEGACY_EXCEL_MIME_TYPES = ["application/vnd.ms-excel", "application/wps-office.xls"];
+
+const DOCX_MIME_TYPES = [
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  "application/wps-office.docx",
+];
+
+export function isPdfMimeType(mimeType: string): boolean {
+  return mimeType.toLowerCase() === "application/pdf";
+}
+
+export function isExcelMimeType(mimeType: string): boolean {
+  return EXCEL_MIME_TYPES.includes(mimeType.toLowerCase());
+}
+
+/** Legacy .xls (BIFF) — not parseable in-app; excluded from previewable. */
+export function isLegacyExcelMimeType(mimeType: string): boolean {
+  return LEGACY_EXCEL_MIME_TYPES.includes(mimeType.toLowerCase());
+}
+
+export function isCsvMimeType(mimeType: string): boolean {
+  const mt = mimeType.toLowerCase();
+  return mt === "text/csv" || mt === "text/tab-separated-values";
+}
+
+export function isDocxMimeType(mimeType: string): boolean {
+  return DOCX_MIME_TYPES.includes(mimeType.toLowerCase());
+}
+
+/** PDF, modern Excel (.xlsx), Word (.docx), or CSV — types FilePreview renders inline. */
+export function isPreviewableMimeType(mimeType: string): boolean {
+  return (
+    (isExcelMimeType(mimeType) && !isLegacyExcelMimeType(mimeType)) ||
+    isCsvMimeType(mimeType) ||
+    isPdfMimeType(mimeType) ||
+    isDocxMimeType(mimeType)
+  );
+}

package/src/picker_menu.tsx

@@ -10,6 +10,7 @@ import { MenuButton } from "./menu_button";
 import { ActivityIndicator } from "./activity_indicator";
 import { PickerOption, PickerValue, PickerOnValueChange, PickerOnClose } from "./picker";
 import { useScreenSize } from "./use_screen_size";
+import { customOptionFor } from "./custom_option";
 
 export interface PickerMenuProps<T extends string = string, MULTI extends boolean = false> {
   testID?: string;
@@ -22,6 +23,14 @@ export interface PickerMenuProps<T extends string = string, MULTI extends boolea
   renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
   /** Enable search input to filter options */
   enableSearch?: boolean;
+  /** Single-select + search only: when the typed query matches no option, append
+   *  a trailing row that selects the raw query as a custom value (free entry).
+   *  `onValueChange` then receives the typed string. */
+  allowCustom?: boolean;
+  /** Label for the free-entry row (default: the raw query). Return `null` to
+   *  suppress the row for a given query — e.g. while it is still incomplete or
+   *  invalid — so "add" only appears when it is a meaningful thing to add. */
+  customOptionLabel?: (query: string) => string | null;
   enableSelectAll?: boolean;
   includeEmptyOption?: boolean;
   /** Called whenever the search text changes. Provide it to drive server-side
@@ -61,6 +70,8 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
     onRequestClose,
     enableSelectAll,
     enableSearch,
+    allowCustom,
+    customOptionLabel,
     includeEmptyOption,
     onSearchChange,
     serverFiltered,
@@ -92,6 +103,13 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
 
   const [searchQuery, setSearchQuery] = useState("");
 
+  // Free entry: a trailing selectable row carrying the raw query as its value
+  // (recognised below for distinct styling). See `customOptionFor` for the rules.
+  const customOpt = useMemo(
+    () => customOptionFor({ allowCustom, multi, query: searchQuery, options, customOptionLabel }),
+    [allowCustom, multi, searchQuery, options, customOptionLabel],
+  );
+
   const filteredOptions = useMemo(() => {
     let result = options;
     // Skip the local filter in server-driven mode — `options` already reflect
@@ -107,8 +125,11 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
       };
       result = [emptyOption, ...result];
     }
+    if (customOpt) {
+      result = [...result, customOpt];
+    }
     return result;
-  }, [options, enableSearch, searchQuery, includeEmptyOption, serverFiltered]);
+  }, [options, enableSearch, searchQuery, includeEmptyOption, serverFiltered, customOpt]);
 
   const [focusedIndex, setFocusedIndex] = useState<number>(() => {
     const selectedIndex = filteredOptions.findIndex((opt) => {
@@ -297,23 +318,26 @@ export function PickerMenu<T extends string, MULTI extends boolean = false>(
             ? Array.isArray(multiValue) && multiValue.includes(item.value)
             : item.value === singleValue;
           const isFocused = index === focusedIndex;
+          const isCustom = !!customOpt && item.value === customOpt.value;
 
           return (
             <MenuButton
               key={item.value}
-              testID={item.testID || `picker-option-${item.value}`}
+              testID={isCustom ? "picker-custom-option" : item.testID || `picker-option-${item.value}`}
               icon={multi ? <Checkbox checked={isSelected} /> : undefined}
               title={
-                renderOptionContent ? (
+                renderOptionContent && !isCustom ? (
                   renderOptionContent(item)
                 ) : (
-                  <Text userSelect="none" numberOfLines={1}>
+                  <Text userSelect="none" numberOfLines={1} color={isCustom ? "zinc-500" : undefined}>
                     {item.label}
                   </Text>
                 )
               }
               right={
-                !multi && isSelected ? (
+                isCustom ? (
+                  <Icon name="plus" size={16} color={colors.zinc["400"]} />
+                ) : !multi && isSelected ? (
                   <Icon name="check" size={18} color={colors.zinc["950"]} />
                 ) : undefined
               }