@povio/ui 0.0.2 → 0.0.4

package/src/components/inputs/File/FileUpload.tsx

@@ -0,0 +1,285 @@
+import { mergeRefs, useLabels } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { useCallback, useState } from "react";
+import type { DropEvent } from "react-aria";
+import { DropZone } from "react-aria-components";
+import { Controller, type FieldValues } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import { ns } from "#ui/config/i18n";
+import { UIConfig } from "#ui/config/uiConfig.context";
+import { FileUtils } from "#ui/utils/file.utils";
+
+import type { FileUploadBaseProps, FileUploadProps, FileUploadResponse, FileUploadState } from "./fileUpload.types";
+import { FileCardList } from "./shared/FileCardList";
+import { FileUploadContent } from "./shared/FileUploadContent";
+import { FileUploadContentEmpty } from "./shared/FileUploadContentEmpty";
+import { fileUploadDropZone } from "./shared/fileUpload.cva";
+
+const FileUploadBase = (props: FileUploadBaseProps) => {
+  const { t } = useTranslation(ns);
+
+  const {
+    ref,
+    label,
+    tooltipText,
+    variant = "vertical",
+    as = "button",
+    helperText,
+    isRequired,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    className,
+    allowsMultiple = false,
+    hideLabel,
+    acceptedFileTypes,
+    emptyText = t(($) => $.ui.fileUpload.emptyText),
+    uploadText = t(($) => $.ui.fileUpload.uploadText),
+    browseText = t(($) => $.ui.fileUpload.browse),
+    fileUpload,
+    fileRemove,
+    children,
+    listRenderer,
+    ...rest
+  } = props;
+  const ui = UIConfig.useConfig();
+  const [uploadState, setUploadState] = useState<FileUploadState[]>(props.value ?? []);
+
+  const formFieldProps: FormFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    isHeaderHidden,
+    hideLabel: hideLabel ?? ui.input.hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+  };
+
+  const labelProps = useLabels({ "aria-label": label });
+
+  const handleUpload = useCallback(
+    async (inputFiles: File[]) => {
+      const acceptedFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
+
+      if (acceptedFiles.length === 0 || !fileUpload) {
+        return;
+      }
+      if (!allowsMultiple) {
+        setUploadState([]);
+      }
+
+      const newUploadState: FileUploadState[] = [];
+
+      acceptedFiles.forEach((file) => {
+        newUploadState.push({ state: "uploading", progress: 0, file, abortController: new AbortController() });
+      });
+
+      const startIndex = allowsMultiple ? uploadState.length : 0;
+      setUploadState((prev) => [...prev, ...newUploadState]);
+
+      const promises: Promise<FileUploadResponse>[] = [];
+      acceptedFiles.forEach(async (file, index) => {
+        promises.push(
+          fileUpload(
+            {
+              data: {
+                resourceName: file.name,
+                fileName: file.name,
+                fileSize: file.size,
+                method: "put",
+              },
+            },
+            file,
+            {
+              onUploadProgress: ({ loaded, total }) => {
+                if (total == null) {
+                  return;
+                }
+
+                const progress = Math.round((loaded / total) * 100);
+                setUploadState((prev) =>
+                  prev.map((state, i) => (i === startIndex + index ? { ...state, progress } : state)),
+                );
+              },
+              abortController: newUploadState[index]?.abortController,
+            },
+          ),
+        );
+      });
+
+      const response = await Promise.all(promises);
+      response.forEach((res, index) => {
+        setUploadState((prev) =>
+          prev.map((state, i) => (i === startIndex + index ? { ...state, state: "uploaded", id: res.id } : state)),
+        );
+      });
+    },
+    [fileUpload, acceptedFileTypes, setUploadState, allowsMultiple, uploadState.length],
+  );
+
+  const handleSelect = useCallback(
+    (inputFiles: FileList | null) => {
+      if (!inputFiles) {
+        return;
+      }
+
+      const filesArray = Array.from(inputFiles);
+      handleUpload(filesArray);
+    },
+    [handleUpload],
+  );
+
+  const handleDrop = async (e: DropEvent) => {
+    if (!e.items) {
+      return;
+    }
+
+    const promises: Promise<File>[] = [];
+    e.items.forEach((item) => {
+      if (item.kind === "file") {
+        promises.push(item.getFile());
+      }
+    });
+
+    const inputFiles = await Promise.all(promises);
+    handleUpload(inputFiles);
+  };
+
+  const handleRemove = useCallback(
+    (id: string) => {
+      fileRemove?.({ id });
+      setUploadState((prev) => prev.filter((state) => state.id !== id));
+    },
+    [fileRemove],
+  );
+
+  const handleCancelUpload = useCallback(
+    (index: number) => {
+      const findState = uploadState[index];
+      if (findState) {
+        findState.abortController?.abort("canceled by user");
+        setUploadState((prev) => prev.filter((_, i) => i !== index));
+      }
+    },
+    [uploadState],
+  );
+
+  return (
+    <FormField
+      {...formFieldProps}
+      labelProps={labelProps}
+      className={clsx("w-full", className)}
+    >
+      <div className="flex w-full items-center justify-between gap-file-upload-input-gap-input-to-button-gap">
+        <DropZone
+          {...rest}
+          data-rac=""
+          data-disabled={isDisabled || undefined}
+          data-invalid={!!error || undefined}
+          data-multiple={allowsMultiple || undefined}
+          data-has-files={uploadState.length > 0 || undefined}
+          isDisabled={isDisabled}
+          onDrop={handleDrop}
+          className={fileUploadDropZone({ variant, isContainer: !!children, className: "group/file-upload-drop-zone" })}
+        >
+          {children ? (
+            <>
+              {children({
+                files: uploadState,
+                onRemove: handleRemove,
+                onCancel: handleCancelUpload,
+              })}
+              <FileUploadContentEmpty
+                as={as}
+                variant={variant}
+                singleFile
+                hideButton
+                isDisabled={isDisabled}
+                title={emptyText}
+                uploadText={uploadText}
+                browseText={browseText}
+                className="-translate-x-1/2 -translate-y-1/2 group-data-[drop-target]/file-upload-drop-zone:!flex absolute top-1/2 left-1/2 z-50 hidden flex-col"
+              />
+            </>
+          ) : (
+            <FileUploadContent
+              {...rest}
+              variant={variant}
+              as={as}
+              isDisabled={isDisabled}
+              browseText={browseText}
+              uploadText={uploadText}
+              emptyText={emptyText}
+              uploadState={uploadState}
+              handleSelect={handleSelect}
+              handleCancelUpload={handleCancelUpload}
+              handleRemove={handleRemove}
+              acceptedFileTypes={acceptedFileTypes}
+              allowsMultiple={allowsMultiple}
+            />
+          )}
+        </DropZone>
+      </div>
+
+      {!children &&
+        allowsMultiple &&
+        uploadState.length > 0 &&
+        (listRenderer ? (
+          listRenderer({
+            files: uploadState,
+            onRemove: handleRemove,
+            onCancel: handleCancelUpload,
+          })
+        ) : (
+          <FileCardList
+            as={as}
+            uploadState={uploadState}
+            isDisabled={isDisabled}
+            onRemove={handleRemove}
+            onCancel={handleCancelUpload}
+          />
+        ))}
+    </FormField>
+  );
+};
+
+export type {
+  FileUploadBaseProps,
+  FileUploadError,
+  FileUploadProps,
+  FileUploadRequest,
+  FileUploadResponse,
+  FileUploadState,
+} from "./fileUpload.types";
+
+export const FileUpload = <TFieldValues extends FieldValues = FieldValues>(props: FileUploadProps<TFieldValues>) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <FileUploadBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            value={field.value}
+            onChange={field.onChange}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return <FileUploadBase {...props} />;
+};

package/src/components/inputs/File/FileUploadContainer.tsx

@@ -0,0 +1,16 @@
+import { FileUpload } from "./FileUpload";
+import type { FileUploadContainerProps } from "./fileUpload.types";
+
+export const FileUploadContainer = (props: FileUploadContainerProps) => {
+  return (
+    <FileUpload
+      label=""
+      hideLabel
+      variant="vertical"
+      as="button"
+      {...props}
+    />
+  );
+};
+
+export type { FileUploadContainerProps };

package/src/components/inputs/File/InputUpload.tsx

@@ -0,0 +1,196 @@
+import { mergeRefs, useLabels } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { useState } from "react";
+import type { DropEvent } from "react-aria";
+import { Controller, type FieldValues } from "react-hook-form";
+
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import { UIConfig } from "#ui/config/uiConfig.context";
+
+import type { InputUploadBaseProps, InputUploadProps } from "./inputUpload.types";
+import { InputUploadContent } from "./shared/InputUploadContent";
+import { InputUploadFilled } from "./shared/InputUploadFilled";
+
+export type { InputUploadBaseProps, InputUploadProps } from "./inputUpload.types";
+
+const InputUploadBase = ({
+  ref,
+  label,
+  tooltipText,
+  variant,
+  helperText,
+  isRequired,
+  isDisabled,
+  headerClassName,
+  errorClassName,
+  isHeaderHidden,
+  error,
+  className,
+  onChange,
+  value,
+  defaultValue,
+  allowsMultiple = false,
+  hideLabel,
+  acceptedFileTypes,
+  ...rest
+}: InputUploadBaseProps) => {
+  const ui = UIConfig.useConfig();
+  const [internalFiles, setInternalFiles] = useState<File[]>(() => {
+    if (value !== undefined) {
+      if (allowsMultiple) {
+        return (value as File[]) || [];
+      }
+      return value ? [value as File] : [];
+    }
+    if (defaultValue !== undefined) {
+      if (allowsMultiple) {
+        return (defaultValue as File[]) || [];
+      }
+      return defaultValue ? [defaultValue as File] : [];
+    }
+    return [];
+  });
+
+  const files =
+    value !== undefined
+      ? (() => {
+          if (allowsMultiple) {
+            return (value as File[]) || [];
+          }
+          return value ? [value as File] : [];
+        })()
+      : internalFiles;
+
+  const formFieldProps: FormFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    isHeaderHidden,
+    hideLabel: hideLabel ?? ui.input.hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+  };
+
+  const labelProps = useLabels({ "aria-label": label });
+
+  const updateFiles = (newFiles: File[]) => {
+    if (value === undefined) {
+      setInternalFiles(newFiles);
+    }
+
+    if (allowsMultiple) {
+      (onChange as ((files: File[]) => void) | undefined)?.(newFiles);
+    } else {
+      (onChange as ((file: File | null) => void) | undefined)?.(newFiles[0] || null);
+    }
+  };
+
+  const isFileAccepted = (file: File): boolean => {
+    if (!acceptedFileTypes || acceptedFileTypes.length === 0) {
+      return true;
+    }
+
+    return acceptedFileTypes.some((type) => {
+      if (type.includes("/")) {
+        return file.type === type || (type.endsWith("/*") && file.type.startsWith(type.slice(0, -1)));
+      }
+      return file.name.toLowerCase().endsWith(type.toLowerCase());
+    });
+  };
+
+  const handleSelect = (inputFiles: FileList | null) => {
+    if (!inputFiles) {
+      return;
+    }
+    const filesArray = Array.from(inputFiles);
+    const acceptedFiles = filesArray.filter(isFileAccepted);
+
+    if (allowsMultiple) {
+      updateFiles([...files, ...acceptedFiles]);
+    } else {
+      updateFiles([acceptedFiles[0]]);
+    }
+  };
+
+  const handleDrop = async (e: DropEvent) => {
+    if (!e.items) {
+      return;
+    }
+
+    const promises: Promise<File>[] = [];
+    e.items.forEach((item) => {
+      if (item.kind === "file") {
+        promises.push(item.getFile());
+      }
+    });
+
+    const inputFiles = await Promise.all(promises);
+    const acceptedFiles = inputFiles.filter(isFileAccepted);
+
+    if (allowsMultiple) {
+      updateFiles([...files, ...acceptedFiles]);
+    } else {
+      updateFiles([acceptedFiles[0]]);
+    }
+  };
+
+  const handleRemove = () => {
+    updateFiles([]);
+  };
+
+  return (
+    <FormField
+      {...formFieldProps}
+      labelProps={labelProps}
+      className={clsx("w-full", className)}
+    >
+      {files.length > 0 ? (
+        <InputUploadFilled
+          files={files}
+          onRemove={handleRemove}
+          isDisabled={isDisabled}
+        />
+      ) : (
+        <InputUploadContent
+          {...rest}
+          label={label}
+          error={error}
+          allowsMultiple={allowsMultiple}
+          acceptedFileTypes={acceptedFileTypes}
+          variant={variant}
+          isDisabled={isDisabled}
+          onSelect={handleSelect}
+          onDrop={handleDrop}
+        />
+      )}
+    </FormField>
+  );
+};
+
+export const InputUpload = <TFieldValues extends FieldValues = FieldValues>(props: InputUploadProps<TFieldValues>) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <InputUploadBase
+            {...innerProps}
+            ref={mergeRefs(ref, field.ref)}
+            value={field.value}
+            onChange={field.onChange}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return <InputUploadBase {...props} />;
+};

package/src/components/inputs/File/fileUpload.types.ts

@@ -0,0 +1,100 @@
+import type { ReactNode, Ref } from "react";
+import type { DropZoneProps, FileTriggerProps } from "react-aria-components";
+import type { FieldValues } from "react-hook-form";
+
+import type { FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import type { ApplicationException, GeneralErrorCodes } from "#ui/utils/vendor/error-handling";
+
+export interface FileUploadVariant {
+  variant?: "vertical" | "horizontal";
+}
+
+export interface SingleFileUploadProps {
+  allowsMultiple?: false;
+  value?: FileUploadState | null;
+  onChange?: (file: File | null) => void;
+  defaultValue?: File | null;
+}
+
+export interface MultipleFileUploadProps {
+  allowsMultiple: true;
+  value?: FileUploadState[];
+  onChange?: (files: File[]) => void;
+  defaultValue?: File[];
+}
+
+export type GroupedFileUploadProps = MultipleFileUploadProps | SingleFileUploadProps;
+
+export type GroupedFileUploadControlProps<TFieldValues extends FieldValues> =
+  | ({ allowsMultiple: true } & ControlProps<MultipleFileUploadProps, TFieldValues>)
+  | ({ allowsMultiple?: false } & ControlProps<SingleFileUploadProps, TFieldValues>);
+
+export interface FileUploadResponse {
+  id: string;
+}
+
+export interface FileUploadRequest {
+  data: {
+    resourceName: string;
+    fileName: string;
+    fileSize: number;
+    method: string;
+  };
+}
+
+export interface FileUploadCallbacks {
+  fileUpload?: (
+    request: FileUploadRequest,
+    file: File,
+    options?: {
+      abortController?: AbortController;
+      onUploadProgress?: ({ loaded, total }: { loaded: number; total: number }) => void;
+    },
+  ) => Promise<FileUploadResponse>;
+  fileRemove?: ({ id }: { id: string }) => Promise<void>;
+}
+
+export type FileUploadError = ApplicationException<GeneralErrorCodes>;
+
+export interface FileUploadState {
+  state: "idle" | "uploading" | "uploaded" | "error";
+  file: File;
+  src?: string;
+  id?: string;
+  progress?: number;
+  error?: FileUploadError;
+  abortController?: AbortController;
+}
+
+export interface FileUploadContainerChildrenProps {
+  files: FileUploadState[];
+  onRemove: (id: string) => void;
+  onCancel: (index: number) => void;
+}
+
+export type FileUploadBaseProps = {
+  as?: "button" | "link";
+  ref?: Ref<HTMLElement>;
+  label?: string;
+  className?: string;
+  // Content props
+  emptyText?: string;
+  uploadText?: string;
+  browseText?: string;
+  value?: FileUploadState[];
+  children?: (props: FileUploadContainerChildrenProps) => ReactNode;
+  listRenderer?: (props: FileUploadContainerChildrenProps) => ReactNode;
+} & FormFieldProps &
+  FileUploadVariant &
+  Omit<FileTriggerProps, "children" | "onSelect" | "allowsMultiple" | "value"> &
+  Omit<DropZoneProps, "children" | "onDrop" | "value"> &
+  GroupedFileUploadProps &
+  FileUploadCallbacks;
+
+export type FileUploadProps<TFieldValues extends FieldValues = FieldValues> = FileUploadBaseProps &
+  GroupedFileUploadControlProps<TFieldValues>;
+
+export type FileUploadContainerProps =
+  | (Omit<FileUploadBaseProps, "label" | "hideLabel" | "variant" | "as"> & SingleFileUploadProps)
+  | (Omit<FileUploadBaseProps, "label" | "hideLabel" | "variant" | "as"> & MultipleFileUploadProps);

package/src/components/inputs/File/index.ts

@@ -0,0 +1,15 @@
+// Input Upload
+
+export type { FileUploadBaseProps, FileUploadProps } from "./FileUpload";
+// File Upload
+export { FileUpload } from "./FileUpload";
+export type { FileUploadContainerProps } from "./FileUploadContainer";
+// File Upload Container
+export { FileUploadContainer } from "./FileUploadContainer";
+export type { InputUploadBaseProps, InputUploadProps } from "./InputUpload";
+export { InputUpload } from "./InputUpload";
+// File Card (for use with FileContainer)
+export { FileCard } from "./shared/FileCard";
+export type { FileUploadDropZoneProps } from "./shared/fileUpload.cva";
+// CVA Utilities
+export { fileUploadDropZone } from "./shared/fileUpload.cva";

package/src/components/inputs/File/inputUpload.types.ts

@@ -0,0 +1,41 @@
+import type { Ref } from "react";
+import type { DropZoneProps, FileTriggerProps } from "react-aria-components";
+import type { FieldValues } from "react-hook-form";
+
+import type { FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+
+import type { InputUploadButtonProps } from "./shared/inputUploadButton.cva";
+
+export interface SingleFileUploadProps {
+  allowsMultiple?: false;
+  value?: File | null;
+  onChange?: (file: File | null) => void;
+  defaultValue?: File | null;
+}
+
+export interface MultipleFileUploadProps {
+  allowsMultiple: true;
+  value?: File[];
+  onChange?: (files: File[]) => void;
+  defaultValue?: File[];
+}
+
+export type GroupedFileUploadProps = MultipleFileUploadProps | SingleFileUploadProps;
+
+export type GroupedFileUploadControlProps<TFieldValues extends FieldValues> =
+  | ({ allowsMultiple: true } & ControlProps<MultipleFileUploadProps, TFieldValues>)
+  | ({ allowsMultiple?: false } & ControlProps<SingleFileUploadProps, TFieldValues>);
+
+export type InputUploadBaseProps = {
+  ref?: Ref<HTMLElement>;
+  label?: string;
+  className?: string;
+} & FormFieldProps &
+  InputUploadButtonProps &
+  Omit<FileTriggerProps, "children" | "onSelect" | "allowsMultiple"> &
+  Omit<DropZoneProps, "children" | "onDrop"> &
+  GroupedFileUploadProps;
+
+export type InputUploadProps<TFieldValues extends FieldValues = FieldValues> = InputUploadBaseProps &
+  GroupedFileUploadControlProps<TFieldValues>;