@multiplatform.one/components 5.0.26 → 6.0.0

package/dist/cjs/layouts/ViewSwitcher.stories.native.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ViewSwitcher_stories_exports = {};
+__export(ViewSwitcher_stories_exports, {
+  Default: () => Default,
+  default: () => ViewSwitcher_stories_default
+});
+module.exports = __toCommonJS(ViewSwitcher_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_ViewSwitcher = require("./ViewSwitcher.native.js");
+var views = [{
+  type: "list",
+  label: "List"
+}, {
+  type: "grid",
+  label: "Grid"
+}, {
+  type: "kanban",
+  label: "Kanban"
+}];
+function ViewSwitcherExample() {
+  var [current, setCurrent] = (0, import_react.useState)("list");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$4",
+    padding: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ViewSwitcher.ViewSwitcher, {
+      views,
+      currentView: current,
+      onViewChange: setCurrent
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+      children: ["Current view: ", current]
+    })]
+  });
+}
+var meta = {
+  title: "Components/ViewSwitcher",
+  component: import_ViewSwitcher.ViewSwitcher,
+  parameters: {
+    status: {
+      type: "stable"
+    }
+  }
+};
+var ViewSwitcher_stories_default = meta;
+var Default = {
+  name: "Main",
+  render: function render() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ViewSwitcherExample, {});
+  }
+};
+//# sourceMappingURL=ViewSwitcher.stories.native.js.map

package/dist/cjs/layouts/ViewSwitcher.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","ViewSwitcher_stories_exports","__export","Default","default","ViewSwitcher_stories_default","module","exports","import_jsx_runtime","require","import_react","import_tamagui","import_ViewSwitcher","views","type","label","ViewSwitcherExample","current","setCurrent","useState","jsxs","YStack","gap","padding","children","jsx","ViewSwitcher","currentView","onViewChange","Text"],"sources":["../../../src/layouts/ViewSwitcher.stories.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,4BAAA;AAAAC,QAAA,CAAAD,4BAAA;EAAAE,OAAA,EAAAA,CAAA,KAAAA,OAAA;EAAAC,OAAA,EAAAA,CAAA,KAAAC;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAX,YAAyB,CAAAK,4BAAA;AACzB,IAAAO,kBAA6B,GAAAC,OAAA;AAC7B,IAAAC,YAAA,GAAAD,OAA8C;AAYxC,IAAAE,cAAA,GAAAF,OAAA;AAVN,IAAAG,mBAA4B,GAAAH,OAAA;AAAA,IACxBI,KAAA,GAAM,CACR;EACEC,IAAA,EAAM;EACVC,KAAA;AAEA,GACE;EACAD,IAAA,EACE;EACEC,KAAA;AAA4E,GACtE;EAAAD,IAAe;EAAAC,KAAQ;AAAA,EAGnC;AAEA,SAAMC,mBAAkCA,CAAA;EACtC,KAAAC,OAAO,EAAAC,UAAA,QAAAR,YAAA,CAAAS,QAAA;EACP,sBAAW,IAAAX,kBAAA,CAAAY,IAAA,EAAAT,cAAA,CAAAU,MAAA;IACXC,GAAA;IACEC,OAAA,EAAQ,IAAE;IACZC,QAAA,GACF,mBAAAhB,kBAAA,CAAAiB,GAAA,EAAAb,mBAAA,CAAAc,YAAA;MAEOb,KAAA;MAGMc,WAAiB,EAAAV,OAAA;MACtBW,YAAA,EAAAV;IACN,IACF,mBAAAV,kBAAA,CAAAY,IAAA,EAAAT,cAAA,CAAAkB,IAAA","ignoreList":[]}

package/dist/cjs/layouts/attachments.cjs

@@ -0,0 +1,341 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var attachments_exports = {};
+__export(attachments_exports, {
+  Attachments: () => Attachments
+});
+module.exports = __toCommonJS(attachments_exports);
+var import_react = require("@phosphor-icons/react");
+var import_platform = require("@multiplatform.one/platform");
+var import_theme = require("@multiplatform.one/theme");
+var import_react2 = __toESM(require("react"));
+var import_tamagui = require("tamagui");
+var import_componentColors = require("../componentColors.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function formatFileSize(bytes) {
+  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) {
+  if (attachment.isImage !== void 0) 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) {
+  if (isImageFile(attachment)) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ImageIcon, {
+      size: 20
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileIcon, {
+    size: 20
+  });
+}
+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
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const fileInputRef = (0, import_react2.useRef)(null);
+  const [previewFile, setPreviewFile] = (0, import_react2.useState)(null);
+  const [uploadError, setUploadError] = (0, import_react2.useState)(null);
+  const {
+    upload: uploadLabel = "Upload",
+    noAttachments: noAttachmentsLabel = "No attachments",
+    download: downloadLabel = "Download",
+    close: closeLabel = "Close",
+    fileTooLarge: fileTooLargeLabel = "File too large"
+  } = labels;
+  const canAdd = (0, import_react2.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 = (0, import_react2.useCallback)(event => {
+    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 = (0, import_react2.useCallback)(attachment => {
+    setPreviewFile(attachment);
+  }, []);
+  const handleDownload = (0, import_react2.useCallback)(attachment => {
+    if (onDownload) {
+      onDownload(attachment);
+    } else {
+      (0, import_platform.downloadFile)(attachment.fileUrl, attachment.fileName);
+    }
+  }, [onDownload]);
+  const handleUploadClick = (0, import_react2.useCallback)(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const emptyState = renderEmpty ? renderEmpty() : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...(compact ? {
+      padding: "$2"
+    } : knobProps.panelPadding),
+    alignItems: "center",
+    opacity: 0.5,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PaperclipIcon, {
+      size: compact ? 20 : 32
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      color: import_componentColors.componentColors.text.muted,
+      fontSize: compact ? "$2" : "$3",
+      marginTop: "$2",
+      children: noAttachmentsLabel
+    })]
+  });
+  const renderAttachmentItem = attachment => {
+    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 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
+      source: {
+        uri: attachment.fileUrl
+      },
+      width: thumbSize,
+      height: thumbSize,
+      borderRadius: 4,
+      resizeMode: "cover"
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      width: thumbSize,
+      height: thumbSize,
+      ...{
+        backgroundColor: import_componentColors.componentColors.surface.background
+      },
+      ...knobProps.borderRadius,
+      alignItems: "center",
+      justifyContent: "center",
+      children: getFileIcon(attachment)
+    });
+    const actionButtons = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      gap: "$1",
+      children: [enablePreview && isImage && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        size: "$2",
+        chromeless: true,
+        icon: import_react.EyeIcon,
+        onPress: e => {
+          e.stopPropagation();
+          actions.onPreview();
+        }
+      }), enableDownload && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        size: "$2",
+        chromeless: true,
+        icon: import_react.DownloadSimpleIcon,
+        onPress: e => {
+          e.stopPropagation();
+          actions.onDownload();
+        }
+      }), enableRemove && !disabled && onRemove && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        size: "$2",
+        chromeless: true,
+        icon: import_react.TrashIcon,
+        onPress: e => {
+          e.stopPropagation();
+          actions.onRemove();
+        }
+      })]
+    });
+    const defaultContent = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
+      title: attachment.fileName,
+      subTitle: attachment.formattedSize || formatFileSize(attachment.fileSize),
+      icon: iconElement,
+      iconAfter: actionButtons,
+      size: compact ? "$3" : knobProps.sizeToken,
+      hoverStyle: {
+        backgroundColor: import_componentColors.componentColors.surface.background
+      },
+      pressStyle: {
+        backgroundColor: import_componentColors.componentColors.interactive.background
+      },
+      onPress: () => onAttachmentClick?.(attachment),
+      cursor: "pointer"
+    });
+    if (renderAttachment) {
+      return renderAttachment(attachment, defaultContent, actions);
+    }
+    return defaultContent;
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.gap,
+    ...stackProps,
+    children: [(label || canAdd) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      justifyContent: "space-between",
+      children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Label, {
+        fontSize: compact ? "$3" : "$4",
+        fontWeight: "500",
+        children: [label, maxAttachments > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+          color: import_componentColors.componentColors.text.muted,
+          fontSize: "$2",
+          children: [" ", "(", items.length, "/", maxAttachments, ")"]
+        })]
+      }), canAdd && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        size: compact ? "$2" : "$3",
+        icon: import_react.UploadIcon,
+        onPress: handleUploadClick,
+        children: uploadLabel
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
+      ref: fileInputRef,
+      type: "file",
+      accept,
+      style: {
+        display: "none"
+      },
+      onChange: handleFileSelect,
+      disabled: disabled || !canAdd
+    }), uploadError && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      backgroundColor: "$red2",
+      padding: "$2",
+      borderRadius: knobProps.borderRadius.borderRadius,
+      alignItems: "center",
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        color: import_componentColors.componentColors.semantic.error,
+        fontSize: "$2",
+        flex: 1,
+        children: uploadError
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+        size: "$1",
+        chromeless: true,
+        icon: import_react.XIcon,
+        onPress: () => setUploadError(null)
+      })]
+    }), items.length === 0 ? emptyState : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      ...knobProps.gap,
+      children: items.map(attachment => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.default.Fragment, {
+        children: renderAttachmentItem(attachment)
+      }, attachment.id))
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog, {
+      open: !!previewFile,
+      onOpenChange: open => !open && setPreviewFile(null),
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Portal, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Overlay, {
+          opacity: 0.5,
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.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",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Title, {
+            children: previewFile?.fileName
+          }), previewFile && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            ...knobProps.panelPadding,
+            alignItems: "center",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
+              source: {
+                uri: previewFile.fileUrl
+              },
+              width: "100%",
+              height: 400,
+              resizeMode: "contain"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              gap: "$2",
+              marginTop: "$4",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+                icon: import_react.DownloadSimpleIcon,
+                onPress: () => handleDownload(previewFile),
+                children: downloadLabel
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Close, {
+                asChild: true,
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+                  variant: "outlined",
+                  children: closeLabel
+                })
+              })]
+            })]
+          })]
+        })]
+      })
+    })]
+  });
+}