@multiplatform.one/components 5.0.26 → 6.0.0

package/src/layouts/ViewSwitcher.tsx

@@ -0,0 +1,55 @@
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type React from "react";
+import { Text, ToggleGroup } from "tamagui";
+
+export interface ViewOption {
+  /** Unique identifier for this view type */
+  type: string;
+  /** Display label for this view */
+  label: string;
+  /** Icon component to render */
+  icon?: React.ComponentType<{ size?: number }>;
+}
+
+export interface ViewSwitcherProps {
+  /** Available view options */
+  views: ViewOption[];
+  /** The currently active view type */
+  currentView: string;
+  /** Callback when a view type is selected */
+  onViewChange: (view: string) => void;
+}
+
+/**
+ * A toggle group for switching between view options.
+ *
+ * Uses Tamagui's native `ToggleGroup` for polished, accessible view switching.
+ * Accepts an array of view options via props — no Frappe or DocType dependency.
+ */
+export function ViewSwitcher({ views, currentView, onViewChange }: ViewSwitcherProps) {
+  const { knobProps } = useResolvedKnobs();
+
+  return (
+    <ToggleGroup
+      type="single"
+      orientation="horizontal"
+      flexDirection="row"
+      value={currentView}
+      onValueChange={(val) => {
+        if (val) onViewChange(val);
+      }}
+      {...knobProps.borderRadius}
+      {...knobProps.inputSurface}
+    >
+      {views.map((view) => {
+        const Icon = view.icon;
+        return (
+          <ToggleGroup.Item key={view.type} value={view.type} size={knobProps.sizeToken}>
+            {Icon && <Icon size={16} />}
+            <Text fontSize={knobProps.sizeToken}>{view.label}</Text>
+          </ToggleGroup.Item>
+        );
+      })}
+    </ToggleGroup>
+  );
+}

package/src/layouts/attachments.tsx

@@ -0,0 +1,440 @@
+import {
+  DownloadSimpleIcon,
+  EyeIcon,
+  FileIcon,
+  ImageIcon,
+  PaperclipIcon,
+  TrashIcon,
+  UploadIcon,
+  XIcon,
+} from "@phosphor-icons/react";
+import { downloadFile } from "@multiplatform.one/platform";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import {
+  Button,
+  Dialog,
+  Image,
+  Label,
+  ListItem,
+  Text,
+  XStack,
+  YStack,
+  type YStackProps,
+} from "tamagui";
+import { componentColors } from "../componentColors";
+
+// ---------------------------------------------------------------------------
+// Types  (generic -- no Frappe dependency)
+// ---------------------------------------------------------------------------
+
+/**
+ * Generic attachment item.
+ * Replaces FrappeFile with a framework-agnostic type.
+ */
+export interface AttachmentItem {
+  /** Unique identifier */
+  id: string;
+  /** Display name for the file */
+  fileName: string;
+  /** URL to access the file */
+  fileUrl: string;
+  /** File size in bytes */
+  fileSize: number;
+  /** MIME type or file type string */
+  fileType?: string;
+  /** Whether the file is an image */
+  isImage?: boolean;
+  /** Human-readable file size (pre-formatted) */
+  formattedSize?: string;
+}
+
+export interface AttachmentsProps extends Omit<YStackProps, "children"> {
+  /** Attachment items to display */
+  items: AttachmentItem[];
+
+  /** Label for the attachments section */
+  label?: string;
+  /** Whether interactions are disabled */
+  disabled?: boolean;
+  /** Maximum number of attachments allowed (0 = unlimited) */
+  maxAttachments?: number;
+
+  /** Called when an attachment is clicked */
+  onAttachmentClick?: (attachment: AttachmentItem) => void;
+  /** Called when the user wants to add/upload an attachment */
+  onAdd?: (file: File) => void;
+  /** Called when the user wants to remove an attachment */
+  onRemove?: (attachment: AttachmentItem) => void;
+  /** Called when the user wants to download an attachment */
+  onDownload?: (attachment: AttachmentItem) => void;
+
+  /** Custom empty state renderer */
+  renderEmpty?: () => React.ReactNode;
+  /** Custom attachment item renderer */
+  renderAttachment?: (
+    attachment: AttachmentItem,
+    defaultContent: React.ReactNode,
+    actions: {
+      onPreview: () => void;
+      onDownload: () => void;
+      onRemove: () => void;
+    },
+  ) => React.ReactNode;
+
+  /** Accepted file types for upload (e.g., "image/*", ".pdf,.doc") */
+  accept?: string;
+  /** Maximum file size in bytes (default 10MB) */
+  maxFileSize?: number;
+
+  /** Show file preview on click */
+  enablePreview?: boolean;
+  /** Show download button */
+  enableDownload?: boolean;
+  /** Show delete/remove button */
+  enableRemove?: boolean;
+  /** Show upload/add button */
+  enableAdd?: boolean;
+  /** Compact mode - smaller UI */
+  compact?: boolean;
+
+  /** Labels for i18n -- consumers pass pre-translated strings */
+  labels?: {
+    upload?: string;
+    uploading?: string;
+    noAttachments?: string;
+    download?: string;
+    close?: string;
+    fileTooLarge?: string;
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;
+}
+
+function isImageFile(attachment: AttachmentItem): boolean {
+  if (attachment.isImage !== undefined) return attachment.isImage;
+
+  const imageTypes = ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"];
+  if (attachment.fileType && imageTypes.includes(attachment.fileType)) return true;
+
+  const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".svg", ".bmp", ".ico"];
+  const url = attachment.fileUrl || attachment.fileName || "";
+  const ext = url.substring(url.lastIndexOf(".")).toLowerCase();
+  return imageExtensions.includes(ext);
+}
+
+function getFileIcon(attachment: AttachmentItem): React.ReactNode {
+  if (isImageFile(attachment)) {
+    return <ImageIcon size={20} />;
+  }
+  return <FileIcon size={20} />;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Generic Attachments component for displaying and managing file attachments.
+ * Uses Tamagui `ListItem` for each attachment row with native hover/press animations.
+ * Fully data-agnostic -- accepts items via props and emits callbacks.
+ */
+export function Attachments({
+  items,
+  label,
+  disabled = false,
+  maxAttachments = 0,
+  onAttachmentClick,
+  onAdd,
+  onRemove,
+  onDownload,
+  renderEmpty,
+  renderAttachment,
+  accept,
+  maxFileSize = 10 * 1024 * 1024,
+  enablePreview = true,
+  enableDownload = true,
+  enableRemove = true,
+  enableAdd = true,
+  compact = false,
+  labels = {},
+  ...stackProps
+}: AttachmentsProps) {
+  const { knobProps } = useResolvedKnobs();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [previewFile, setPreviewFile] = useState<AttachmentItem | null>(null);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+
+  const {
+    upload: uploadLabel = "Upload",
+    noAttachments: noAttachmentsLabel = "No attachments",
+    download: downloadLabel = "Download",
+    close: closeLabel = "Close",
+    fileTooLarge: fileTooLargeLabel = "File too large",
+  } = labels;
+
+  const canAdd = useMemo(() => {
+    if (disabled || !enableAdd || !onAdd) return false;
+    if (maxAttachments > 0 && items.length >= maxAttachments) return false;
+    return true;
+  }, [disabled, enableAdd, onAdd, maxAttachments, items.length]);
+
+  const handleFileSelect = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) return;
+
+      if (maxFileSize && file.size > maxFileSize) {
+        setUploadError(`${fileTooLargeLabel} (${formatFileSize(maxFileSize)})`);
+        return;
+      }
+
+      setUploadError(null);
+      onAdd?.(file);
+
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    [maxFileSize, onAdd, fileTooLargeLabel],
+  );
+
+  const handlePreview = useCallback((attachment: AttachmentItem) => {
+    setPreviewFile(attachment);
+  }, []);
+
+  const handleDownload = useCallback(
+    (attachment: AttachmentItem) => {
+      if (onDownload) {
+        onDownload(attachment);
+      } else {
+        downloadFile(attachment.fileUrl, attachment.fileName);
+      }
+    },
+    [onDownload],
+  );
+
+  const handleUploadClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const emptyState = renderEmpty ? (
+    renderEmpty()
+  ) : (
+    <YStack
+      {...(compact ? { padding: "$2" } : knobProps.panelPadding)}
+      alignItems="center"
+      opacity={0.5}
+    >
+      <PaperclipIcon size={compact ? 20 : 32} />
+      <Text color={componentColors.text.muted} fontSize={compact ? "$2" : "$3"} marginTop="$2">
+        {noAttachmentsLabel}
+      </Text>
+    </YStack>
+  );
+
+  const renderAttachmentItem = (attachment: AttachmentItem) => {
+    const isImage = isImageFile(attachment);
+    const actions = {
+      onPreview: () => handlePreview(attachment),
+      onDownload: () => handleDownload(attachment),
+      onRemove: () => onRemove?.(attachment),
+    };
+
+    const sz = knobProps.sizeToken;
+    const thumbSize = compact
+      ? sz === "$3"
+        ? 24
+        : sz === "$5"
+          ? 40
+          : 32
+      : sz === "$3"
+        ? 32
+        : sz === "$5"
+          ? 48
+          : 40;
+
+    const iconElement = isImage ? (
+      <Image
+        source={{ uri: attachment.fileUrl }}
+        width={thumbSize}
+        height={thumbSize}
+        borderRadius={4}
+        resizeMode="cover"
+      />
+    ) : (
+      <YStack
+        width={thumbSize}
+        height={thumbSize}
+        {...{ backgroundColor: componentColors.surface.background }}
+        {...knobProps.borderRadius}
+        alignItems="center"
+        justifyContent="center"
+      >
+        {getFileIcon(attachment)}
+      </YStack>
+    );
+
+    const actionButtons = (
+      <XStack gap="$1">
+        {enablePreview && isImage && (
+          <Button
+            size="$2"
+            chromeless
+            icon={EyeIcon}
+            onPress={(e) => {
+              e.stopPropagation();
+              actions.onPreview();
+            }}
+          />
+        )}
+        {enableDownload && (
+          <Button
+            size="$2"
+            chromeless
+            icon={DownloadSimpleIcon}
+            onPress={(e) => {
+              e.stopPropagation();
+              actions.onDownload();
+            }}
+          />
+        )}
+        {enableRemove && !disabled && onRemove && (
+          <Button
+            size="$2"
+            chromeless
+            icon={TrashIcon}
+            onPress={(e) => {
+              e.stopPropagation();
+              actions.onRemove();
+            }}
+          />
+        )}
+      </XStack>
+    );
+
+    const defaultContent = (
+      <ListItem
+        title={attachment.fileName}
+        subTitle={attachment.formattedSize || formatFileSize(attachment.fileSize)}
+        icon={iconElement}
+        iconAfter={actionButtons}
+        size={compact ? "$3" : knobProps.sizeToken}
+        hoverStyle={{ backgroundColor: componentColors.surface.background }}
+        pressStyle={{ backgroundColor: componentColors.interactive.background }}
+        onPress={() => onAttachmentClick?.(attachment)}
+        cursor="pointer"
+      />
+    );
+
+    if (renderAttachment) {
+      return renderAttachment(attachment, defaultContent, actions);
+    }
+
+    return defaultContent;
+  };
+
+  return (
+    <YStack {...knobProps.gap} {...stackProps}>
+      {(label || canAdd) && (
+        <XStack alignItems="center" justifyContent="space-between">
+          {label && (
+            <Label fontSize={compact ? "$3" : "$4"} fontWeight="500">
+              {label}
+              {maxAttachments > 0 && (
+                <Text color={componentColors.text.muted} fontSize="$2">
+                  {" "}
+                  ({items.length}/{maxAttachments})
+                </Text>
+              )}
+            </Label>
+          )}
+          {canAdd && (
+            <Button size={compact ? "$2" : "$3"} icon={UploadIcon} onPress={handleUploadClick}>
+              {uploadLabel}
+            </Button>
+          )}
+        </XStack>
+      )}
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        style={{ display: "none" }}
+        onChange={handleFileSelect}
+        disabled={disabled || !canAdd}
+      />
+
+      {uploadError && (
+        <XStack
+          backgroundColor="$red2"
+          padding="$2"
+          borderRadius={knobProps.borderRadius.borderRadius}
+          alignItems="center"
+          gap="$2"
+        >
+          <Text color={componentColors.semantic.error} fontSize="$2" flex={1}>
+            {uploadError}
+          </Text>
+          <Button size="$1" chromeless icon={XIcon} onPress={() => setUploadError(null)} />
+        </XStack>
+      )}
+
+      {items.length === 0 ? (
+        emptyState
+      ) : (
+        <YStack {...knobProps.gap}>
+          {items.map((attachment) => (
+            <React.Fragment key={attachment.id}>{renderAttachmentItem(attachment)}</React.Fragment>
+          ))}
+        </YStack>
+      )}
+
+      <Dialog open={!!previewFile} onOpenChange={(open) => !open && setPreviewFile(null)}>
+        <Dialog.Portal>
+          <Dialog.Overlay opacity={0.5} enterStyle={{ opacity: 0 }} exitStyle={{ opacity: 0 }} />
+          <Dialog.Content
+            borderWidth={1}
+            borderColor="$borderColor"
+            elevation={knobProps.elevation}
+            enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+            exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+            maxWidth={800}
+            maxHeight="80vh"
+          >
+            <Dialog.Title>{previewFile?.fileName}</Dialog.Title>
+            {previewFile && (
+              <YStack {...knobProps.panelPadding} alignItems="center">
+                <Image
+                  source={{ uri: previewFile.fileUrl }}
+                  width="100%"
+                  height={400}
+                  resizeMode="contain"
+                />
+                <XStack gap="$2" marginTop="$4">
+                  <Button icon={DownloadSimpleIcon} onPress={() => handleDownload(previewFile)}>
+                    {downloadLabel}
+                  </Button>
+                  <Dialog.Close asChild>
+                    <Button variant="outlined">{closeLabel}</Button>
+                  </Dialog.Close>
+                </XStack>
+              </YStack>
+            )}
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>
+    </YStack>
+  );
+}

package/src/layouts/breadcrumbs.tsx

@@ -0,0 +1,79 @@
+/**
+ * Breadcrumbs - Navigation breadcrumbs.
+ *
+ * Renders a horizontal trail of clickable navigation items
+ * separated by "/" dividers. The last item is rendered as
+ * non-clickable bold text (current page).
+ */
+
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import React from "react";
+import { Text, XStack } from "tamagui";
+import { componentColors } from "../componentColors";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+  onNavigate?: (href: string) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function Breadcrumbs({ items, onNavigate }: BreadcrumbsProps) {
+  const { knobProps } = useResolvedKnobs();
+  if (items.length === 0) return null;
+
+  const sz = knobProps.sizeToken;
+  const textSize = sz === "$3" ? ("$2" as const) : sz === "$5" ? ("$4" as const) : ("$3" as const);
+  const separatorSize =
+    sz === "$3" ? ("$1" as const) : sz === "$5" ? ("$3" as const) : ("$2" as const);
+
+  return (
+    <XStack
+      {...knobProps.gap}
+      {...knobProps.borderRadius}
+      {...knobProps.panelPadding}
+      alignItems="center"
+      flexWrap="wrap"
+    >
+      {items.map((item, i) => (
+        <React.Fragment key={`${item.label}-${i}`}>
+          {i > 0 && (
+            <Text color={componentColors.text.subtle} fontSize={separatorSize} userSelect="none">
+              /
+            </Text>
+          )}
+          {item.href && i < items.length - 1 ? (
+            <Text
+              color="$accentColor"
+              cursor="pointer"
+              fontSize={textSize}
+              hoverStyle={{ textDecorationLine: "underline" }}
+              onPress={() => item.href && onNavigate?.(item.href)}
+            >
+              {item.label}
+            </Text>
+          ) : (
+            <Text
+              color={componentColors.text.muted}
+              fontSize={textSize}
+              fontWeight={i === items.length - 1 ? "600" : "400"}
+            >
+              {item.label}
+            </Text>
+          )}
+        </React.Fragment>
+      ))}
+    </XStack>
+  );
+}

package/src/layouts/index.tsx

@@ -1 +1,11 @@
 export * from "./Debug";
+export * from "./SafeAreaWrapper";
+export * from "./KeyboardAvoidingWrapper";
+export * from "./sidebar";
+export * from "./toolbar";
+export * from "./ViewSwitcher";
+export * from "./breadcrumbs";
+export * from "./attachments";
+export * from "./tags";
+export * from "./timeline";
+export * from "./page";