@multiplatform.one/forms 6.0.0

package/dist/jsx/fields/FileUpload/FileUpload.stories.native.js

@@ -0,0 +1,262 @@
+"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 FileUpload_stories_exports = {};
+__export(FileUpload_stories_exports, {
+  Basic: () => Basic,
+  Disabled: () => Disabled,
+  ImageOnly: () => ImageOnly,
+  Interactive: () => Interactive,
+  Main: () => Main,
+  Sizes: () => Sizes,
+  Standalone: () => Standalone,
+  WithError: () => WithError,
+  default: () => FileUpload_stories_default
+});
+module.exports = __toCommonJS(FileUpload_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_storybook = require("@multiplatform.one/storybook");
+var import_react_form = require("@tanstack/react-form");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.native.js");
+var import_Form = require("../../Form/index.native.js");
+var import_index = require("./index.native.js");
+var meta = {
+  title: "Forms/FileUpload",
+  component: import_index.FileUpload,
+  parameters: {
+    docs: {
+      description: {
+        component: "A file upload component with drag-and-drop support, file validation, and preview capabilities for form integration."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Field label"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text below the field"
+    },
+    error: {
+      control: "text",
+      description: "Error message"
+    },
+    required: {
+      control: "boolean",
+      description: "Mark field as required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disable file upload"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Field size"
+    },
+    accept: {
+      control: "text",
+      description: "Accepted file types"
+    },
+    maxSize: {
+      control: "number",
+      description: "Maximum file size in bytes"
+    },
+    multiple: {
+      control: "boolean",
+      description: "Allow multiple file selection"
+    },
+    dragDrop: {
+      control: "boolean",
+      description: "Enable drag and drop"
+    },
+    showPreview: {
+      control: "boolean",
+      description: "Show file preview"
+    }
+  }
+};
+var FileUpload_stories_default = meta;
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = (0, import_react_form.useForm)({
+        defaultValues: {
+          avatar: null,
+          document: null,
+          attachments: null
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          (0, import_storybook.action)("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+        form,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.FileUpload, {
+            ...{
+              label: "Profile Picture",
+              name: "avatar",
+              accept: "image/*",
+              helperText: "Upload your profile picture",
+              showPreview: true
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.FileUpload, {
+            ...{
+              label: "Document",
+              name: "document",
+              accept: ".pdf,.doc,.docx",
+              helperText: "Upload PDF or Word document"
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.FileUpload, {
+            ...{
+              label: "Attachments",
+              name: "attachments",
+              multiple: true,
+              helperText: "Upload multiple files"
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            action: "submit",
+            children: "Submit"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Upload File",
+    helperText: "Max 10MB",
+    accept: "*/*",
+    maxSize: 10485760
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.FileUpload, {
+      ...args
+    });
+  }
+};
+var Basic = {
+  render: function render3(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.FileUpload, {
+      ...args
+    });
+  },
+  args: {
+    label: "Upload File",
+    placeholder: "Click to upload or drag and drop"
+  }
+};
+var Disabled = {
+  render: function render4(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.FileUpload, {
+      ...args
+    });
+  },
+  args: {
+    label: "Disabled Upload",
+    disabled: true,
+    placeholder: "Cannot upload"
+  }
+};
+var WithError = {
+  render: function render5(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.FileUpload, {
+      ...args
+    });
+  },
+  args: {
+    label: "Required File",
+    error: "Please upload a file",
+    required: true
+  }
+};
+var Sizes = {
+  render: function render6() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.FileUpload, {
+        label: "Small",
+        size: "$2",
+        placeholder: "Upload a file"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.FileUpload, {
+        label: "Medium (default)",
+        size: "$3",
+        placeholder: "Upload a file"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.FileUpload, {
+        label: "Large",
+        size: "$4",
+        placeholder: "Upload a file"
+      })]
+    });
+  }
+};
+var Interactive = {
+  render: function render7() {
+    var InteractiveExample = function InteractiveExample2() {
+      var [file, setFile] = (0, import_react.useState)(null);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.FileUpload, {
+          label: "Upload File",
+          // @ts-expect-error controlled mode not supported
+          onChange: function onChange(f) {
+            setFile(f);
+            (0, import_storybook.action)("onChange")(f);
+          },
+          helperText: file ? `Selected: ${file.name}` : "No file selected"
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InteractiveExample, {});
+  }
+};
+var ImageOnly = {
+  render: function render8(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.FileUpload, {
+      ...args
+    });
+  },
+  args: {
+    label: "Upload Image",
+    accept: "image/*",
+    showPreview: true,
+    helperText: "PNG, JPG, GIF up to 5MB",
+    maxSize: 5 * 1024 * 1024
+  }
+};
+//# sourceMappingURL=FileUpload.stories.native.js.map

package/dist/jsx/fields/FileUpload/FileUpload.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","FileUpload_stories_exports","Basic","Disabled","ImageOnly","Interactive","Main","Sizes","Standalone","WithError","default","FileUpload_stories_default","module","exports","import_jsx_runtime","require","import_storybook","import_react_form","import_react","import_tamagui","import_Button","import_Form","import_index","meta","title","component","FileUpload","parameters","docs","description","argTypes","label","control","helperText","error","required","disabled","size","options","accept","maxSize","multiple","dragDrop","showPreview","render","FormExample","FormExample2","form","useForm","defaultValues","avatar","document","attachments","onSubmit","param","action","jsx","Form","children","jsxs","YStack","gap","Button"],"sources":["../../../../src/fields/FileUpload/FileUpload.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/fields/FileUpload/index.mjs

@@ -0,0 +1,399 @@
+import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useProps } from "tamagui";
+import { Image, isWeb, Paragraph, Text, XStack, YStack, styled } from "tamagui";
+import { Button } from "../../Button/index.mjs";
+import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { Skeleton } from "../../Skeleton/index.mjs";
+import { clampRadiusForLargeComponent, getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
+import { formCommonColors, formInputColors } from "../../shared/colorRamps.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const UploadAreaFrame = styled(YStack, {
+  width: "100%",
+  overflow: "hidden",
+  borderStyle: "dashed",
+  backgroundColor: formInputColors.background.base,
+  borderColor: formInputColors.border.base,
+  variants: {
+    outlined: {
+      true: {
+        backgroundColor: "transparent"
+      }
+    },
+    disabledState: {
+      true: {
+        opacity: 0.5
+      },
+      false: {
+        opacity: 1
+      }
+    }
+  }
+});
+const UploadFileListFrame = styled(YStack, {
+  width: "100%",
+  borderTopWidth: 1,
+  borderTopColor: formCommonColors.divider
+});
+function FileUpload(props) {
+  const {
+    defaultValue,
+    form,
+    accept,
+    maxSize,
+    multiple = false,
+    dragDrop = true,
+    showPreview = true,
+    placeholder = "Drag a file into this area",
+    buttonText = "Choose File",
+    onFileSelect,
+    onFileRemove,
+    mode,
+    name,
+    preserveValue,
+    validators,
+    disabled,
+    readOnly,
+    skeleton,
+    compact,
+    id: idProp,
+    ...fieldProps
+  } = useProps(props);
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = useFormField({
+    form,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = useResolvedValidators(fieldProps.required, validators, fieldProps.label, name);
+  const cappedRadius = clampRadiusForLargeComponent(knobProps.borderRadius.borderRadius);
+  const [selectedFiles, setSelectedFiles] = useState([]);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [validationError, setValidationError] = useState();
+  const fileInputRef = useRef(null);
+  const previewUrlsRef = useRef(/* @__PURE__ */new Map());
+  useEffect(() => {
+    if (!isWeb) return;
+    return () => {
+      previewUrlsRef.current.forEach(url => URL.revokeObjectURL(url));
+      previewUrlsRef.current.clear();
+    };
+  }, []);
+  const formatFileSize = useCallback(bytes => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+  }, []);
+  const validateFile = useCallback(file => {
+    if (maxSize && file.size > maxSize) {
+      return `File size must be less than ${formatFileSize(maxSize)}`;
+    }
+    if (accept) {
+      const acceptedTypes = accept.split(",").map(type => type.trim());
+      const isAccepted = acceptedTypes.some(type => {
+        if (type.startsWith(".")) {
+          return file.name.toLowerCase().endsWith(type.toLowerCase());
+        }
+        return file.type.match(type.replace("*", ".*"));
+      });
+      if (!isAccepted) {
+        return `File type not accepted. Accepted types: ${accept}`;
+      }
+    }
+    return null;
+  }, [maxSize, accept, formatFileSize]);
+  const syncFieldValue = useCallback((nextFiles, onValueChange) => {
+    if (!onValueChange) return;
+    if (multiple) {
+      onValueChange(nextFiles);
+      return;
+    }
+    onValueChange(nextFiles[0] ?? null);
+  }, [multiple]);
+  const handleFileSelect = useCallback((files, onValueChange, rawFileList) => {
+    if (!files) return;
+    const fileArray = Array.isArray(files) ? files : Array.from(files);
+    const validFiles = [];
+    const errors = [];
+    fileArray.forEach(file => {
+      const error = validateFile(file);
+      if (error) {
+        errors.push(`${file.name}: ${error}`);
+      } else {
+        validFiles.push(file);
+      }
+    });
+    if (errors.length > 0) {
+      setValidationError(errors.join("\n"));
+    }
+    if (validFiles.length > 0) {
+      setValidationError(void 0);
+      setSelectedFiles(prev => {
+        const nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
+        syncFieldValue(nextFiles, onValueChange);
+        return nextFiles;
+      });
+      onFileSelect?.(rawFileList ?? (Array.isArray(files) ? null : files));
+    }
+  }, [multiple, validateFile, onFileSelect, syncFieldValue]);
+  const handleFileRemove = useCallback((fileToRemove, onValueChange) => {
+    if (isWeb) {
+      const previewUrl = previewUrlsRef.current.get(fileToRemove);
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+        previewUrlsRef.current.delete(fileToRemove);
+      }
+    }
+    setSelectedFiles(prev => {
+      const nextFiles = prev.filter(file => file !== fileToRemove);
+      syncFieldValue(nextFiles, onValueChange);
+      return nextFiles;
+    });
+    onFileRemove?.(fileToRemove);
+  }, [onFileRemove, syncFieldValue]);
+  const handleDragOver = useCallback(e => {
+    e.preventDefault();
+    if (dragDrop) {
+      setIsDragOver(true);
+    }
+  }, [dragDrop]);
+  const handleDragLeave = useCallback(e => {
+    e.preventDefault();
+    setIsDragOver(false);
+  }, []);
+  const handleDrop = useCallback((e, onValueChange) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    if (dragDrop && e.dataTransfer.files) {
+      handleFileSelect(e.dataTransfer.files, onValueChange, e.dataTransfer.files);
+    }
+  }, [dragDrop, handleFileSelect]);
+  const openFileDialog = useCallback(() => {
+    if (disabled || readOnly) return;
+    fileInputRef.current?.click();
+  }, [disabled, readOnly]);
+  const getFilePreview = useCallback(file => {
+    if (!isWeb) return null;
+    if (file.type.startsWith("image/")) {
+      const existingUrl = previewUrlsRef.current.get(file);
+      if (existingUrl) return existingUrl;
+      const nextUrl = URL.createObjectURL(file);
+      previewUrlsRef.current.set(file, nextUrl);
+      return nextUrl;
+    }
+    return null;
+  }, []);
+  if (skeleton) {
+    const minHeightPx = getFieldHeight(fieldProps.size || knobProps.sizeToken, 5);
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label: fieldProps.label,
+      size: fieldProps.size,
+      knobProps,
+      children: /* @__PURE__ */jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: minHeightPx
+      })
+    });
+  }
+  const canInteract = !disabled && !readOnly;
+  const renderUploadArea = (errorProp, onValueChange, onBlurHandler) => {
+    if (!isWeb) {
+      return /* @__PURE__ */jsx(UploadAreaFrame, {
+        outlined: knobProps.outlined,
+        disabledState: !!disabled,
+        borderRadius: cappedRadius,
+        borderWidth: knobProps.borderRadius.borderWidth ?? 1,
+        ...(errorProp ? {
+          borderColor: formCommonColors.error
+        } : void 0),
+        elevation: knobProps.elevation,
+        transition: knobProps.transition,
+        "aria-required": fieldProps.required || void 0,
+        "aria-invalid": !!errorProp || void 0,
+        "aria-readonly": readOnly || void 0,
+        children: /* @__PURE__ */jsxs(YStack, {
+          ...knobProps.panelPadding,
+          minHeight: getFieldHeight(fieldProps.size || knobProps.sizeToken, 5),
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          ...knobProps.gap,
+          children: [/* @__PURE__ */jsx(Paragraph, {
+            color: formCommonColors.text,
+            textAlign: "center",
+            children: "File upload requires a native file picker."
+          }), /* @__PURE__ */jsx(Paragraph, {
+            color: formCommonColors.muted,
+            textAlign: "center",
+            fontSize: "$2",
+            children: "Use expo-document-picker or expo-image-picker for native support."
+          })]
+        })
+      });
+    }
+    return /* @__PURE__ */jsxs(UploadAreaFrame, {
+      outlined: knobProps.outlined,
+      disabledState: !!disabled,
+      borderRadius: cappedRadius,
+      borderWidth: isDragOver && canInteract ? 2 : knobProps.borderRadius.borderWidth ?? 1,
+      ...(errorProp ? {
+        borderColor: formCommonColors.error
+      } : void 0),
+      ...(isDragOver && canInteract ? {
+        borderColor: formCommonColors.text
+      } : void 0),
+      elevation: knobProps.elevation,
+      transition: knobProps.transition,
+      "aria-required": fieldProps.required || void 0,
+      "aria-invalid": !!errorProp || void 0,
+      "aria-readonly": readOnly || void 0,
+      children: [/* @__PURE__ */jsxs(YStack, {
+        ...knobProps.panelPadding,
+        minHeight: getFieldHeight(fieldProps.size || knobProps.sizeToken, 5),
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        ...knobProps.gap,
+        ...(canInteract ? {
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: e => {
+            handleDrop(e, onValueChange);
+            onBlurHandler?.();
+          }
+        } : {}),
+        children: [/* @__PURE__ */jsxs(Button, {
+          onPress: openFileDialog,
+          disabled: !canInteract,
+          size: knobProps.sizeToken,
+          children: [/* @__PURE__ */jsx(Button.Icon, {
+            children: /* @__PURE__ */jsx(UploadIcon, {})
+          }), /* @__PURE__ */jsx(Button.Text, {
+            ...knobProps.body,
+            children: buttonText
+          })]
+        }), selectedFiles.length === 0 && /* @__PURE__ */jsx(Text, {
+          color: formCommonColors.muted,
+          textAlign: "center",
+          ...knobProps.body,
+          children: placeholder
+        }), /* @__PURE__ */jsx("input", {
+          ref: fileInputRef,
+          type: "file",
+          accept,
+          multiple,
+          onChange: e => {
+            handleFileSelect(e.target.files, onValueChange, e.target.files);
+            onBlurHandler?.();
+          },
+          style: {
+            display: "none"
+          },
+          disabled: !canInteract
+        })]
+      }), selectedFiles.length > 0 && /* @__PURE__ */jsx(UploadFileListFrame, {
+        children: selectedFiles.map((file, index) => {
+          const preview = showPreview ? getFilePreview(file) : null;
+          return /* @__PURE__ */jsxs(XStack, {
+            width: "100%",
+            ...knobProps.gap,
+            alignItems: "center",
+            justifyContent: "space-between",
+            ...knobProps.panelPadding,
+            children: [/* @__PURE__ */jsxs(XStack, {
+              flex: 1,
+              gap: "$2",
+              alignItems: "center",
+              children: [preview ? /* @__PURE__ */jsx(Image, {
+                borderRadius: cappedRadius,
+                source: {
+                  uri: preview
+                },
+                width: 32,
+                height: 32,
+                resizeMode: "cover"
+              }) : /* @__PURE__ */jsx(XStack, {
+                width: 20,
+                height: 20,
+                justifyContent: "center",
+                alignItems: "center",
+                children: /* @__PURE__ */jsx(FileIcon, {
+                  size: 16
+                })
+              }), /* @__PURE__ */jsxs(YStack, {
+                flex: 1,
+                gap: "$1",
+                children: [/* @__PURE__ */jsx(Text, {
+                  numberOfLines: 1,
+                  ...knobProps.body,
+                  children: file.name
+                }), /* @__PURE__ */jsx(Text, {
+                  numberOfLines: 1,
+                  color: formCommonColors.text,
+                  ...knobProps.body,
+                  children: formatFileSize(file.size)
+                })]
+              })]
+            }), canInteract && /* @__PURE__ */jsx(Button, {
+              circular: true,
+              size: knobProps.sizeToken,
+              tabIndex: -1,
+              onPress: e => {
+                e.stopPropagation();
+                handleFileRemove(file, onValueChange);
+              },
+              children: /* @__PURE__ */jsx(Button.Icon, {
+                children: /* @__PURE__ */jsx(XIcon, {})
+              })
+            })]
+          }, `${file.name}-${index}`);
+        })
+      })]
+    });
+  };
+  if (!resolvedForm || !name) {
+    const standaloneError = fieldProps.error ?? validationError;
+    return /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label: fieldProps.label,
+      labelProps: fieldProps.labelProps,
+      error: standaloneError,
+      helperText: fieldProps.helperText,
+      required: fieldProps.required,
+      size: fieldProps.size,
+      knobProps,
+      children: renderUploadArea(standaloneError, void 0)
+    });
+  }
+  return /* @__PURE__ */jsx(Field, {
+    defaultValue,
+    form: resolvedForm,
+    mode,
+    name,
+    preserveValue,
+    validators: resolvedValidators,
+    children: field => {
+      const error = getFieldError(field, fieldProps.error) ?? validationError;
+      return /* @__PURE__ */jsx(FieldLayout, {
+        id,
+        label: fieldProps.label,
+        labelProps: fieldProps.labelProps,
+        error,
+        helperText: fieldProps.helperText,
+        required: fieldProps.required,
+        size: fieldProps.size,
+        knobProps,
+        children: renderUploadArea(error, nextValue => field.handleChange(nextValue), mergeFieldHandler(field, "handleBlur", fieldProps.onBlur))
+      });
+    }
+  });
+}
+export { FileUpload };
+//# sourceMappingURL=index.mjs.map