@multiplatform.one/frappe-ui 7.90.6 → 8.1.0

package/src/fields/FileUpload.tsx

@@ -1,472 +0,0 @@
-import { useFrappeCollection } from "@multiplatform.one/frappe";
-import { IconButtonGroup, Skeleton } from "@multiplatform.one/forms";
-import { FileIcon, UploadIcon } from "@phosphor-icons/react";
-import { sizeRecipeForToken, useResolvedKnobs, sizeTokenStep } from "@multiplatform.one/theme";
-import type React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Button, Image, Label, Text as TamaguiText, XStack, YStack } from "tamagui";
-import { useFrappeConfig } from "../FrappeProvider";
-import { Text, ActionButton, componentColors } from "@multiplatform.one/components";
-
-export type FrappeFileUploadHandler = (
-  file: File,
-  ctx: { onProgress: (percent: number) => void; signal: AbortSignal },
-) => Promise<string>;
-
-export interface FileUploadProps {
-  label?: string;
-  value?: string;
-  onChange: (fileUrl: string) => void;
-  accept?: string;
-  isImage?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  maxSize?: number;
-  baseURL?: string;
-  auth?: any;
-  helperText?: string;
-  readOnly?: boolean;
-  skeleton?: boolean;
-  /**
-   * Override the File-doctype transport. Same progress/abort contract as
-   * forms FileUpload; resolve with the committed URL. Tests and custom
-   * desks inject this; the default reads the file and inserts a File doc.
-   */
-  onUpload?: FrappeFileUploadHandler;
-}
-
-type TransferStatus = "uploading" | "failed";
-
-type TransferState = {
-  file: File;
-  status: TransferStatus;
-  progress: number;
-  problem?: string;
-  action?: string;
-  controller: AbortController;
-};
-
-function formatFileSize(bytes: number): string {
-  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]}`;
-}
-
-function readFileAsDataUrl(
-  file: File,
-  { onProgress, signal }: { onProgress: (percent: number) => void; signal: AbortSignal },
-): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    const onAbort = () => {
-      reader.abort();
-      reject(new DOMException("Aborted", "AbortError"));
-    };
-    if (signal.aborted) {
-      onAbort();
-      return;
-    }
-    signal.addEventListener("abort", onAbort);
-    reader.onprogress = (event) => {
-      if (event.lengthComputable && event.total > 0) {
-        onProgress(Math.round((event.loaded / event.total) * 100));
-      }
-    };
-    reader.onload = () => {
-      signal.removeEventListener("abort", onAbort);
-      onProgress(100);
-      resolve(reader.result as string);
-    };
-    reader.onerror = () => {
-      signal.removeEventListener("abort", onAbort);
-      reject(new Error("Failed to read file"));
-    };
-    reader.onabort = () => {
-      signal.removeEventListener("abort", onAbort);
-      reject(new DOMException("Aborted", "AbortError"));
-    };
-    reader.readAsDataURL(file);
-  });
-}
-
-export function FileUpload({
-  label,
-  value,
-  onChange,
-  accept,
-  isImage = false,
-  disabled = false,
-  required = false,
-  maxSize = 5 * 1024 * 1024,
-  baseURL,
-  auth,
-  helperText,
-  readOnly = false,
-  skeleton = false,
-  onUpload,
-}: FileUploadProps) {
-  const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
-  const small = sizeTokenStep(knobProps.sizeToken) < 0;
-  const config = useFrappeConfig();
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [transfer, setTransfer] = useState<TransferState | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const transferRef = useRef<TransferState | null>(null);
-  const onUploadRef = useRef(onUpload);
-  onUploadRef.current = onUpload;
-  const isLocked = disabled || readOnly;
-  const minHeight = small ? 40 : 56;
-  const previewSize = small ? 120 : 200;
-  const uploading = transfer?.status === "uploading";
-
-  const finalBaseURL = baseURL ?? config?.baseURL ?? "";
-  const finalConfig = finalBaseURL
-    ? {
-        baseURL: finalBaseURL,
-        socketPort: config?.socketPort,
-        siteName: config?.siteName,
-        socketBaseURL: config?.socketBaseURL,
-        auth: auth ?? config?.auth,
-        syncOptions: config?.syncOptions,
-        realtime: config?.realtime,
-        fixtures: config?.fixtures,
-      }
-    : undefined;
-
-  const fileCollection = useFrappeCollection<{
-    name: string;
-    doctype: string;
-    file_name: string;
-    file_url: string;
-    is_private: 0 | 1;
-  }>(finalConfig, "File", {
-    fields: ["name", "file_name", "file_url", "is_private"],
-  });
-
-  useEffect(() => {
-    return () => {
-      transferRef.current?.controller.abort();
-    };
-  }, []);
-
-  const defaultUpload = useCallback<FrappeFileUploadHandler>(
-    async (file, ctx) => {
-      const base64 = await readFileAsDataUrl(file, ctx);
-      if (fileCollection) {
-        const tx = fileCollection.insert({
-          doctype: "File",
-          name: `new-${Date.now()}`,
-          file_name: file.name,
-          file_url: base64,
-          is_private: 0,
-        });
-        await tx.isPersisted.promise;
-      }
-      return base64;
-    },
-    [fileCollection],
-  );
-
-  const runTransfer = useCallback(
-    async (file: File, controller: AbortController) => {
-      const upload = onUploadRef.current ?? defaultUpload;
-      try {
-        const url = await upload(file, {
-          onProgress: (percent) => {
-            const n = Math.min(100, Math.max(0, Math.round(Number(percent) || 0)));
-            setTransfer((prev) => (prev ? { ...prev, progress: n } : prev));
-          },
-          signal: controller.signal,
-        });
-        if (controller.signal.aborted) return;
-        setTransfer(null);
-        transferRef.current = null;
-        setError(null);
-        onChange(url);
-      } catch (err) {
-        if (
-          controller.signal.aborted ||
-          (err instanceof Error && err.name === "AbortError") ||
-          (typeof DOMException !== "undefined" &&
-            err instanceof DOMException &&
-            err.name === "AbortError")
-        ) {
-          return;
-        }
-        const problem = err instanceof Error && err.message ? err.message : t("Upload failed");
-        setTransfer((prev) =>
-          prev
-            ? {
-                ...prev,
-                status: "failed",
-                problem,
-                action: t("Try again or remove the file"),
-              }
-            : prev,
-        );
-        // Per-file failure stays on the row (DG-VAL-04). Do not clear `value`.
-        setError(null);
-      }
-    },
-    [defaultUpload, onChange, t],
-  );
-
-  const startTransfer = useCallback(
-    (file: File) => {
-      transferRef.current?.controller.abort();
-      const controller = new AbortController();
-      const next: TransferState = {
-        file,
-        status: "uploading",
-        progress: 0,
-        controller,
-      };
-      transferRef.current = next;
-      setTransfer(next);
-      setError(null);
-      void runTransfer(file, controller);
-    },
-    [runTransfer],
-  );
-
-  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (isLocked) return;
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    if (maxSize && file.size > maxSize) {
-      setError(`File size exceeds ${Math.round(maxSize / 1024 / 1024)}MB limit`);
-      return;
-    }
-
-    startTransfer(file);
-  };
-
-  const handleCancel = () => {
-    transferRef.current?.controller.abort();
-    transferRef.current = null;
-    setTransfer(null);
-    if (fileInputRef.current) fileInputRef.current.value = "";
-  };
-
-  const handleRetry = () => {
-    if (!transfer) return;
-    startTransfer(transfer.file);
-  };
-
-  const handleRemove = () => {
-    if (isLocked) return;
-    handleCancel();
-    onChange("");
-    if (fileInputRef.current) {
-      fileInputRef.current.value = "";
-    }
-  };
-
-  const handleRemoveFailed = () => {
-    handleCancel();
-  };
-
-  const handleClick = () => {
-    if (isLocked || uploading) return;
-    fileInputRef.current?.click();
-  };
-
-  if (skeleton) {
-    return (
-      <YStack {...knobProps.gap}>
-        {label && (
-          <Skeleton
-            variant="text"
-            width="30%"
-            height={sizeRecipeForToken(knobProps.sizeToken).fontSize}
-          />
-        )}
-        <Skeleton variant="rounded" width="100%" height={minHeight} />
-      </YStack>
-    );
-  }
-
-  // LC-260 ICONS-OVER-WORDS: Replace and Remove are their symbols, floating
-  // over an image on the LC-176 media plate.
-  const fileActions =
-    !readOnly && !transfer
-      ? (overMedia: boolean) => (
-          <>
-            <ActionButton
-              kind="replace"
-              overMedia={overMedia}
-              disabled={isLocked}
-              onPress={handleClick}
-            />
-            <ActionButton
-              kind="remove"
-              overMedia={overMedia}
-              disabled={isLocked}
-              onPress={handleRemove}
-            />
-          </>
-        )
-      : undefined;
-
-  return (
-    <YStack {...knobProps.gap}>
-      {label && (
-        <Label {...knobProps.label}>
-          {label}
-          {required && <TamaguiText color="$red10"> *</TamaguiText>}
-        </Label>
-      )}
-
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept={accept || (isImage ? "image/*" : undefined)}
-        style={{ display: "none" }}
-        onChange={handleFileSelect}
-        disabled={isLocked || uploading}
-      />
-
-      {transfer ? (
-        <YStack
-          data-file-upload="transfer"
-          data-transfer-status={transfer.status}
-          {...knobProps.gap}
-          {...knobProps.panelPadding}
-        >
-          <XStack gap="$2" alignItems="center">
-            <FileIcon size={20} />
-            <YStack flex={1} gap="$1">
-              <Text numberOfLines={1}>{transfer.file.name}</Text>
-              <Text numberOfLines={1} fontWeight="700" fontSize="$2">
-                {formatFileSize(transfer.file.size)}
-              </Text>
-            </YStack>
-            {transfer.status === "uploading" ? (
-              <ActionButton
-                kind="cancel"
-                label={t("Cancel {{name}}", { name: transfer.file.name })}
-                disabled={isLocked}
-                onPress={handleCancel}
-              />
-            ) : null}
-          </XStack>
-          {transfer.status === "uploading" ? (
-            <YStack
-              data-file-upload="progress"
-              role="progressbar"
-              aria-valuemin={0}
-              aria-valuemax={100}
-              aria-valuenow={transfer.progress}
-              aria-label={t("Uploading {{name}}", { name: transfer.file.name })}
-              height={11}
-              width="100%"
-              borderRadius={1000}
-              backgroundColor="$color4"
-              overflow="hidden"
-            >
-              <YStack
-                height="100%"
-                width={`${transfer.progress}%`}
-                backgroundColor={componentColors.indicator.mark}
-              />
-            </YStack>
-          ) : null}
-          {transfer.status === "failed" ? (
-            <YStack {...knobProps.gap}>
-              <Text color="$red11" fontSize="$2">
-                {transfer.problem}
-              </Text>
-              <Text color="$color11" fontSize="$2">
-                {transfer.action}
-              </Text>
-              <XStack {...knobProps.gap}>
-                <ActionButton
-                  kind="retry"
-                  label={t("Retry {{name}}", { name: transfer.file.name })}
-                  disabled={isLocked}
-                  onPress={handleRetry}
-                />
-                <ActionButton
-                  kind="remove"
-                  label={t("Remove {{name}}", { name: transfer.file.name })}
-                  disabled={isLocked}
-                  onPress={handleRemoveFailed}
-                />
-              </XStack>
-            </YStack>
-          ) : null}
-        </YStack>
-      ) : null}
-
-      {!value && !transfer ? (
-        <Button
-          size="$3"
-          icon={UploadIcon}
-          disabled={isLocked}
-          onPress={handleClick}
-          {...knobProps.borderRadius}
-        >
-          {t("Choose File")}
-        </Button>
-      ) : null}
-
-      {value ? (
-        isImage ? (
-          <YStack position="relative" alignSelf="flex-start">
-            <Image
-              // src (string), not source: the RN source object leaks onto the
-              // DOM <img> as source="[object Object]" on web
-              src={value}
-              alt={t("Uploaded file preview")}
-              width={previewSize}
-              height={previewSize}
-              {...knobProps.borderRadius}
-              objectFit="cover"
-            />
-            {fileActions ? (
-              <XStack
-                data-file-upload="preview-actions"
-                position="absolute"
-                top="$2"
-                right="$2"
-                zIndex={1}
-                {...knobProps.gap}
-              >
-                <IconButtonGroup plate="media">{fileActions(true)}</IconButtonGroup>
-              </XStack>
-            ) : null}
-          </YStack>
-        ) : (
-          <XStack
-            gap="$2"
-            alignItems="center"
-            {...knobProps.panelPadding}
-            {...{ backgroundColor: "$color2" }}
-          >
-            <FileIcon size={20} />
-            <Text flex={1} numberOfLines={1}>
-              {value.split("/").pop() || value}
-            </Text>
-            {fileActions?.(false)}
-          </XStack>
-        )
-      ) : null}
-
-      {helperText && !error && !transfer ? (
-        <Text color="$color11" fontSize="$2">
-          {helperText}
-        </Text>
-      ) : null}
-      {error ? (
-        <Text color="$red11" fontSize="$2">
-          {error}
-        </Text>
-      ) : null}
-    </YStack>
-  );
-}

package/src/fields/FrappeFileUpload.stories.tsx

@@ -1,139 +0,0 @@
-import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
-import { action } from "@multiplatform.one/storybook";
-import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
-import type { ReactNode } from "react";
-import { useState } from "react";
-import { YStack } from "tamagui";
-import { fieldtypeToTableField } from "../fieldRegistry";
-import { FrappeProvider } from "../FrappeProvider";
-import { FrappeStoryProvider } from "../frappeStoryTarget";
-import { FileUpload, type FileUploadProps } from "./FileUpload";
-
-// 1x1 transparent PNG
-const tinyPng =
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
-
-const fixtures = new InMemoryFixtureProvider({
-  File: [
-    {
-      name: "FILE-001",
-      doctype: "File",
-      file_name: "existing.png",
-      file_url: tinyPng,
-      is_private: 0,
-    },
-  ],
-});
-
-export default {
-  title: "FrappeUI/FileUpload",
-  component: FileUpload,
-  tags: ["!test"],
-  parameters: {
-    status: { type: "beta" },
-    docs: {
-      description: {
-        component:
-          "Frappe FileUpload (live-data uploader): uploads into the File doctype collection (fixture-backed here) and previews images.",
-      },
-    },
-  },
-  argTypes: {
-    label: { control: "text" },
-    value: { control: "text" },
-    accept: { control: "text" },
-    isImage: { control: "boolean" },
-    disabled: { control: "boolean" },
-    required: { control: "boolean" },
-    maxSize: { control: "number" },
-  },
-};
-
-type StoryProps = FileUploadProps & Record<string, unknown>;
-
-function Controlled(props: Omit<StoryProps, "onChange">) {
-  const [value, setValue] = useState(props.value ?? "");
-  return (
-    <FileUpload
-      {...(props as any)}
-      value={value}
-      onChange={(v: string) => {
-        setValue(v);
-        action("onChange")(v);
-      }}
-    />
-  );
-}
-
-const withProvider = (node: ReactNode) => (
-  <FrappeProvider baseURL="https://demo.frappe.cloud" fixtures={fixtures}>
-    {node}
-  </FrappeProvider>
-);
-
-export const Main = (args: StoryProps) => withProvider(<Controlled {...args} />);
-Main.args = { label: "Attachment" } as Partial<StoryProps>;
-Main.storyName = "Main";
-
-export const ImageWithPreview = (args: StoryProps) => withProvider(<Controlled {...args} />);
-ImageWithPreview.args = {
-  label: "Image with existing value",
-  isImage: true,
-  value: tinyPng,
-} as Partial<StoryProps>;
-
-export const BrokenPreview = (args: StoryProps) => withProvider(<Controlled {...args} />);
-BrokenPreview.args = {
-  label: "Broken image value",
-  isImage: true,
-  value: "https://invalid.example/broken.png",
-} as Partial<StoryProps>;
-
-export const TinyMaxSize = (args: StoryProps) => withProvider(<Controlled {...args} />);
-TinyMaxSize.args = {
-  label: "Max 1 byte (any upload should error)",
-  maxSize: 1,
-} as Partial<StoryProps>;
-
-export const States = (args: StoryProps) =>
-  withProvider(
-    <YStack gap="$4" maxWidth={420}>
-      <Controlled {...args} label="Disabled" disabled />
-      <Controlled {...args} label="Required" required />
-      <Controlled
-        {...args}
-        label="error probe (no error prop on this adapter)"
-        {...({ error: "This should show but cannot" } as any)}
-      />
-    </YStack>,
-  );
-States.args = {} as Partial<StoryProps>;
-
-type FileUploadRow = { id: string; label: string; value: string };
-
-export const InTable = {
-  name: "In table",
-  render: function InTableRender() {
-    const [data, setData] = useState<FileUploadRow[]>([
-      { id: "1", label: "Alpha", value: tinyPng },
-      { id: "2", label: "Beta", value: "report.pdf" },
-      { id: "3", label: "Gamma", value: "" },
-    ]);
-    const columns: DataTableColumn<FileUploadRow>[] = [
-      { accessorKey: "label", header: "Row" },
-      { accessorKey: "value", header: "File", ...fieldtypeToTableField("Attach") },
-    ];
-    return (
-      <FrappeStoryProvider fixtures={fixtures}>
-        <YStack width="100%" height={320}>
-          <DataTable
-            data={data}
-            columns={columns}
-            enablePagination={false}
-            onDataChange={setData}
-          />
-        </YStack>
-      </FrappeStoryProvider>
-    );
-  },
-};

package/types/fields/FileUpload.d.ts

@@ -1,27 +0,0 @@
-export type FrappeFileUploadHandler = (file: File, ctx: {
-    onProgress: (percent: number) => void;
-    signal: AbortSignal;
-}) => Promise<string>;
-export interface FileUploadProps {
-    label?: string;
-    value?: string;
-    onChange: (fileUrl: string) => void;
-    accept?: string;
-    isImage?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    maxSize?: number;
-    baseURL?: string;
-    auth?: any;
-    helperText?: string;
-    readOnly?: boolean;
-    skeleton?: boolean;
-    /**
-     * Override the File-doctype transport. Same progress/abort contract as
-     * forms FileUpload; resolve with the committed URL. Tests and custom
-     * desks inject this; the default reads the file and inserts a File doc.
-     */
-    onUpload?: FrappeFileUploadHandler;
-}
-export declare function FileUpload({ label, value, onChange, accept, isImage, disabled, required, maxSize, baseURL, auth, helperText, readOnly, skeleton, onUpload, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=FileUpload.d.ts.map

package/types/fields/FileUpload.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../src/fields/FileUpload.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,uBAAuB,GAAG,CACpC,IAAI,EAAE,IAAI,EACV,GAAG,EAAE;IAAE,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,KAChE,OAAO,CAAC,MAAM,CAAC,CAAC;AAErB,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,uBAAuB,CAAC;CACpC;AA0DD,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAe,EACf,QAAgB,EAChB,QAAgB,EAChB,OAAyB,EACzB,OAAO,EACP,IAAI,EACJ,UAAU,EACV,QAAgB,EAChB,QAAgB,EAChB,QAAQ,GACT,EAAE,eAAe,2CA0WjB"}