@povio/ui 0.0.2 → 0.0.4

package/src/components/inputs/File/shared/FileCard.tsx

@@ -0,0 +1,72 @@
+import { clsx } from "clsx";
+import { useMemo } from "react";
+
+import type { FileUploadProps, FileUploadState } from "#ui/components/inputs/File/FileUpload";
+
+import { FileUploadContentError } from "./FileUploadContentError";
+import { FileUploadContentFilled } from "./FileUploadContentFilled";
+import { FileUploadContentLoading } from "./FileUploadContentLoading";
+
+interface FileCardProps extends Pick<FileUploadProps, "as" | "isDisabled"> {
+  index: number;
+  state: FileUploadState;
+  onRemove?: (id: string) => void;
+  onCancel?: (index: number) => void;
+}
+
+export const FileCard = ({ index, as, state, onRemove, isDisabled, onCancel }: FileCardProps) => {
+  const content = useMemo(() => {
+    if (state.state === "uploading") {
+      return (
+        <FileUploadContentLoading
+          index={index}
+          variant="horizontal"
+          as={as}
+          isDisabled={isDisabled}
+          state={state}
+          onCancel={() => onCancel?.(index)}
+        />
+      );
+    }
+    if (state.state === "error") {
+      return (
+        <FileUploadContentError
+          as={as}
+          removeWithIcon
+          variant="horizontal"
+          isDisabled={isDisabled}
+          state={state}
+          onRemove={() => {
+            onCancel?.(index);
+          }}
+        />
+      );
+    }
+    return (
+      <FileUploadContentFilled
+        as={as}
+        removeWithIcon
+        variant="horizontal"
+        isDisabled={isDisabled}
+        state={state}
+        onRemove={() => {
+          onRemove?.(state.id ?? "");
+        }}
+      />
+    );
+  }, [state, index, as, isDisabled, onCancel, onRemove]);
+
+  return (
+    <div
+      className={clsx(
+        "flex items-center self-stretch",
+        "bg-elevation-fill-default-1",
+        "px-file-upload-file-card-side-default",
+        "py-4",
+        "rounded-file-upload-file-card-rounding-default border border-elevation-outline-default-1 border-solid",
+      )}
+    >
+      {content}
+    </div>
+  );
+};

package/src/components/inputs/File/shared/FileCardList.tsx

@@ -0,0 +1,30 @@
+import { clsx } from "clsx";
+
+import type { FileUploadProps, FileUploadState } from "#ui/components/inputs/File/FileUpload";
+
+import { FileCard } from "./FileCard";
+
+interface FileCardListProps extends Pick<FileUploadProps, "isDisabled" | "as"> {
+  uploadState: FileUploadState[];
+  className?: string;
+  onRemove?: (id: string) => void;
+  onCancel?: (index: number) => void;
+}
+
+export const FileCardList = ({ uploadState, as, isDisabled, className, onRemove, onCancel }: FileCardListProps) => {
+  return (
+    <div className={clsx("mt-10 flex flex-col items-start gap-4 self-stretch", className)}>
+      {uploadState.map((state, index) => (
+        <FileCard
+          key={state.file.name || state.id || state.src}
+          index={index}
+          as={as}
+          state={state}
+          isDisabled={isDisabled}
+          onRemove={onRemove}
+          onCancel={onCancel}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/inputs/File/shared/FileProgressBar.tsx

@@ -0,0 +1,25 @@
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+export const FileProgressBar = ({ progress = 0 }: { progress?: number }) => {
+  return (
+    <div className="flex w-full items-center justify-center gap-file-upload-content-gap-progress-actions">
+      <div className="flex flex-fill flex-col items-start gap-2 py-progress-height-height">
+        <div className="relative h-1 w-full">
+          <div className="h-1 w-full flex-shrink-0 rounded-xs bg-input-filled-idle" />
+          <div
+            className="absolute top-0 left-0 h-1 flex-shrink-0 rounded-xs bg-interactive-contained-primary-idle transition-all duration-300"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      </div>
+      <Typography
+        variant="default"
+        size="label-2"
+        as="span"
+        className="text-center text-text-default-1"
+      >
+        {progress}%
+      </Typography>
+    </div>
+  );
+};

package/src/components/inputs/File/shared/FileUploadContent.tsx

@@ -0,0 +1,99 @@
+import { FileTrigger } from "react-aria-components";
+
+import type { FileUploadBaseProps, FileUploadState } from "#ui/components/inputs/File/fileUpload.types";
+
+import { FileUploadContentEmpty } from "./FileUploadContentEmpty";
+import { FileUploadContentError } from "./FileUploadContentError";
+import { FileUploadContentFilled } from "./FileUploadContentFilled";
+import { FileUploadContentLoading } from "./FileUploadContentLoading";
+
+type FileUploadContentProps = Omit<FileUploadBaseProps, "ref" | "children" | "emptyText" | "label"> & {
+  emptyText: string;
+  uploadState: FileUploadState[];
+  handleSelect: (inputFiles: FileList | null) => void;
+  handleCancelUpload: (index: number) => void;
+  handleRemove: (id: string) => void;
+};
+
+export const FileUploadContent = ({
+  variant,
+  as,
+  isDisabled,
+  browseText,
+  uploadText,
+  emptyText,
+  uploadState,
+  handleCancelUpload,
+  handleRemove,
+  acceptedFileTypes,
+  allowsMultiple,
+  handleSelect,
+  ...rest
+}: FileUploadContentProps) => {
+  const currentState = uploadState.at(0);
+  const fileTriggerProps = {
+    ...rest,
+    acceptedFileTypes,
+    allowsMultiple,
+    onSelect: handleSelect,
+  };
+
+  if (!allowsMultiple && currentState) {
+    if (currentState.state === "uploading") {
+      return (
+        <FileUploadContentLoading
+          index={0}
+          variant={variant}
+          as={as}
+          singleFile
+          isDisabled={isDisabled}
+          state={currentState}
+          onCancel={handleCancelUpload}
+        />
+      );
+    }
+    if (currentState.state === "uploaded") {
+      return (
+        <FileUploadContentFilled
+          as={as}
+          variant={variant}
+          singleFile
+          isDisabled={isDisabled}
+          state={currentState}
+          browseText={browseText}
+          fileTriggerProps={fileTriggerProps}
+          onRemove={() => {
+            handleRemove(currentState.id ?? "");
+          }}
+        />
+      );
+    }
+    if (currentState.state === "error") {
+      return (
+        <FileUploadContentError
+          as={as}
+          variant={variant}
+          singleFile
+          isDisabled={isDisabled}
+          state={currentState}
+          onRemove={() => {
+            handleRemove(currentState.id ?? "");
+          }}
+        />
+      );
+    }
+  }
+  return (
+    <FileTrigger {...fileTriggerProps}>
+      <FileUploadContentEmpty
+        as={as}
+        variant={variant}
+        singleFile
+        isDisabled={isDisabled}
+        title={emptyText}
+        uploadText={uploadText}
+        browseText={browseText}
+      />
+    </FileTrigger>
+  );
+};

package/src/components/inputs/File/shared/FileUploadContentEmpty.tsx

@@ -0,0 +1,94 @@
+import { clsx } from "clsx";
+
+import { UploadIcon } from "#ui/assets/icons/Upload";
+import { Button } from "#ui/components/buttons/Button/Button";
+import { TextButton } from "#ui/components/buttons/TextButton/TextButton";
+import type { FileUploadBaseProps } from "#ui/components/inputs/File/fileUpload.types";
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+type FileUploadContentEmptyProps = Pick<
+  FileUploadBaseProps,
+  "variant" | "as" | "isDisabled" | "emptyText" | "browseText" | "uploadText"
+> & {
+  title: string;
+  singleFile?: boolean;
+  hideButton?: boolean;
+  className?: string;
+};
+
+export const FileUploadContentEmpty = ({
+  variant,
+  as,
+  isDisabled,
+  title,
+  browseText,
+  uploadText,
+  singleFile,
+  hideButton = false,
+  className,
+}: FileUploadContentEmptyProps) => {
+  return (
+    <div
+      className={clsx("flex w-full items-center gap-file-upload-content-gap-text-to-text", className, {
+        "flex-col": variant === "vertical",
+        "min-h-11 flex-row justify-between": variant === "horizontal",
+      })}
+    >
+      <div
+        className={clsx("flex items-center gap-file-upload-content-gap-icon-to-content", {
+          "flex-col": variant === "vertical",
+          "flex-row": variant === "horizontal",
+          "opacity-50": isDisabled,
+        })}
+      >
+        <UploadIcon className="h-6 w-6 text-text-default-1" />
+        <Typography
+          variant="prominent-1"
+          size="label-1"
+          as="span"
+          className={clsx("self-stretch text-text-default-1", {
+            "text-center": variant === "vertical",
+          })}
+        >
+          {title}
+        </Typography>
+      </div>
+
+      <div
+        className={clsx("flex items-center justify-center", {
+          "flex-col": variant === "vertical" && as === "button",
+          "gap-file-upload-content-gap-text-to-text": as === "link",
+          "gap-file-upload-content-gap-content-to-button": as === "button",
+        })}
+      >
+        <Typography
+          variant="default"
+          size={singleFile ? "label-2" : "label-3"}
+          as="span"
+          className={clsx("text-text-default-2", {
+            "text-center": variant === "vertical",
+            "opacity-50": isDisabled,
+          })}
+        >
+          {uploadText}
+        </Typography>
+        {!hideButton &&
+          browseText &&
+          (as === "link" ? (
+            <TextButton className="[&>span>span]:!font-medium text-interactive-text-primary-idle lowercase">
+              {browseText}
+            </TextButton>
+          ) : (
+            <Button
+              variant="outlined"
+              size="xs"
+              width="hug"
+              isDisabled={isDisabled}
+            >
+              {browseText}
+            </Button>
+          ))}
+      </div>
+    </div>
+  );
+};

package/src/components/inputs/File/shared/FileUploadContentError.tsx

@@ -0,0 +1,170 @@
+import { clsx } from "clsx";
+import { FileTrigger, type FileTriggerProps } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+
+import { CloseIcon } from "#ui/assets/icons/Close";
+import { WarningFilledIcon } from "#ui/assets/icons/Warningfilled";
+import { Button } from "#ui/components/buttons/Button/Button";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import { TextButton } from "#ui/components/buttons/TextButton/TextButton";
+import type { FileUploadBaseProps, FileUploadState } from "#ui/components/inputs/File/fileUpload.types";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { ns } from "#ui/config/i18n";
+
+type FileUploadContentErrorProps = Pick<
+  FileUploadBaseProps,
+  "variant" | "as" | "isDisabled" | "emptyText" | "browseText"
+> & {
+  state: FileUploadState;
+  fileTriggerProps?: FileTriggerProps;
+  removeWithIcon?: boolean;
+  singleFile?: boolean;
+  onRemove: (id: string) => void;
+};
+
+export const FileUploadContentError = ({
+  variant,
+  as,
+  isDisabled,
+  state,
+  browseText,
+  fileTriggerProps,
+  removeWithIcon = false,
+  singleFile,
+  onRemove,
+}: FileUploadContentErrorProps) => {
+  const { t } = useTranslation(ns);
+  return (
+    <div className={clsx("flex w-full flex-fill flex-col items-start")}>
+      <div
+        className={clsx("flex w-full items-center", {
+          "flex-row gap-file-upload-content-gap-left-to-right-content": variant === "horizontal",
+          "flex-col": variant === "vertical",
+          "gap-file-upload-content-gap-content-to-button": variant === "vertical" && as === "button",
+          "gap-file-upload-content-gap-text-to-text": variant === "vertical" && as === "link",
+        })}
+      >
+        <div
+          className={clsx(
+            "flex min-w-0 max-w-full flex-grow items-center gap-file-upload-content-gap-icon-to-content",
+            {
+              "flex-col": variant === "vertical",
+              "flex-row": variant === "horizontal",
+              "opacity-50": isDisabled,
+            },
+          )}
+        >
+          <WarningFilledIcon className="h-6 w-6 text-elevation-fill-warning-1" />
+          <div
+            className={clsx("flex flex-col gap-file-upload-content-gap-text-to-text", {
+              "max-w-full items-center": variant === "vertical",
+              "max-w-[calc(100%_-_32px)]": variant === "horizontal",
+            })}
+          >
+            <Typography
+              variant="prominent-1"
+              size="label-1"
+              as="span"
+              className={clsx("self-stretch truncate text-text-default-1", {
+                "text-center": variant === "vertical",
+              })}
+            >
+              {state.file.name}
+            </Typography>
+            <Typography
+              variant="default"
+              size={singleFile ? "label-2" : "label-3"}
+              as="span"
+              className={clsx("text-text-default-2", {
+                "text-center": variant === "vertical",
+              })}
+            >
+              {state.error?.serverMessage ?? state.error?.message}
+            </Typography>
+          </div>
+        </div>
+
+        <div
+          className={clsx("flex flex-none items-center justify-end", {
+            "flex-col": variant === "vertical" && as === "button",
+            "gap-file-upload-content-gap-text-to-text": as === "link",
+            "gap-file-upload-content-gap-content-to-button": as === "button",
+          })}
+        >
+          {as === "link" ? (
+            <>
+              {fileTriggerProps && (
+                <>
+                  <FileTrigger {...fileTriggerProps}>
+                    <TextButton className="text-interactive-text-primary-idle">{browseText ?? ""}</TextButton>
+                  </FileTrigger>
+                  <Typography
+                    variant="default"
+                    size="label-2"
+                    as="span"
+                    className="text-text-default-2"
+                  >
+                    {t(($) => $.ui.fileUpload.or)}
+                  </Typography>
+                </>
+              )}
+              {removeWithIcon ? (
+                <InlineIconButton
+                  label="Cancel"
+                  color="secondary"
+                  onPress={() => {
+                    onRemove(state.id ?? "");
+                  }}
+                  icon={CloseIcon}
+                />
+              ) : (
+                <TextButton
+                  className="text-interactive-text-primary-idle lowercase"
+                  onPress={() => {
+                    onRemove(state.id ?? "");
+                  }}
+                >
+                  {t(($) => $.ui.fileUpload.removeFile)}
+                </TextButton>
+              )}
+            </>
+          ) : (
+            <div className="flex items-center justify-center gap-file-upload-content-gap-button-to-button self-stretch">
+              {fileTriggerProps && (
+                <FileTrigger {...fileTriggerProps}>
+                  <Button
+                    variant="outlined"
+                    size="xs"
+                    width="hug"
+                    isDisabled={isDisabled}
+                  >
+                    {browseText ?? ""}
+                  </Button>
+                </FileTrigger>
+              )}
+              {removeWithIcon ? (
+                <InlineIconButton
+                  label="Cancel"
+                  color="secondary"
+                  onPress={() => {
+                    onRemove(state.id ?? "");
+                  }}
+                  icon={CloseIcon}
+                />
+              ) : (
+                <TextButton
+                  color="secondary"
+                  onPress={() => {
+                    onRemove(state.id ?? "");
+                  }}
+                >
+                  {t(($) => $.ui.fileUpload.removeFile)}
+                </TextButton>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/inputs/File/shared/FileUploadContentFilled.tsx

@@ -0,0 +1,179 @@
+import { clsx } from "clsx";
+import { FileTrigger, type FileTriggerProps } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+
+import { CheckCircleIcon } from "#ui/assets/icons/CheckCircle";
+import { CloseIcon } from "#ui/assets/icons/Close";
+import { Button } from "#ui/components/buttons/Button/Button";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import { TextButton } from "#ui/components/buttons/TextButton/TextButton";
+import type { FileUploadBaseProps, FileUploadState } from "#ui/components/inputs/File/fileUpload.types";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { ns } from "#ui/config/i18n";
+import { FileUtils } from "#ui/utils/file.utils";
+
+type FileUploadContentFilledProps = Pick<
+  FileUploadBaseProps,
+  "variant" | "as" | "isDisabled" | "emptyText" | "browseText"
+> & {
+  state: FileUploadState;
+  fileTriggerProps?: FileTriggerProps;
+  removeWithIcon?: boolean;
+  singleFile?: boolean;
+  onRemove: (id: string) => void;
+};
+
+export const FileUploadContentFilled = ({
+  variant,
+  as,
+  isDisabled,
+  state,
+  browseText,
+  fileTriggerProps,
+  removeWithIcon = false,
+  singleFile,
+  onRemove,
+}: FileUploadContentFilledProps) => {
+  const { t } = useTranslation(ns);
+  return (
+    <div className={clsx("flex w-full flex-fill flex-col items-start")}>
+      <div
+        className={clsx("flex w-full items-center", {
+          "flex-row gap-file-upload-content-gap-left-to-right-content": variant === "horizontal",
+          "flex-col": variant === "vertical",
+          "gap-file-upload-content-gap-content-to-button": variant === "vertical" && as === "button",
+          "gap-file-upload-content-gap-text-to-text": variant === "vertical" && as === "link",
+        })}
+      >
+        <div
+          className={clsx(
+            "flex min-w-0 max-w-full flex-grow items-center gap-file-upload-content-gap-icon-to-content",
+            {
+              "flex-col": variant === "vertical",
+              "flex-row": variant === "horizontal",
+              "opacity-50": isDisabled,
+            },
+          )}
+        >
+          <CheckCircleIcon className="h-6 w-6 text-text-default-1" />
+          <div
+            className={clsx("flex flex-col gap-file-upload-content-gap-text-to-text", {
+              "max-w-full items-center": variant === "vertical",
+              "max-w-[calc(100%_-_32px)]": variant === "horizontal",
+            })}
+          >
+            <Typography
+              variant="prominent-1"
+              size="label-1"
+              as="span"
+              className="self-stretch truncate text-center text-text-default-1"
+            >
+              {state.file.name}
+            </Typography>
+            <Typography
+              variant="default"
+              size={singleFile ? "label-2" : "label-3"}
+              as="span"
+              className="text-text-default-2"
+            >
+              {FileUtils.getCalculatedFileSize(state.file)}
+            </Typography>
+          </div>
+        </div>
+
+        <div
+          className={clsx("flex flex-none items-center justify-end", {
+            "flex-col": variant === "vertical" && as === "button",
+            "gap-file-upload-content-gap-text-to-text": as === "link" && variant === "vertical",
+            "gap-file-upload-content-gap-content-to-button": as === "button" && variant === "vertical",
+            "gap-file-upload-content-gap-button-to-button": variant === "horizontal",
+          })}
+        >
+          {as === "link" ? (
+            <>
+              {fileTriggerProps && (
+                <>
+                  <FileTrigger {...fileTriggerProps}>
+                    <TextButton
+                      className={clsx("text-interactive-text-primary-idle", {
+                        "[&>span>span]:!font-medium": variant === "vertical",
+                      })}
+                    >
+                      {browseText ?? ""}
+                    </TextButton>
+                  </FileTrigger>
+                  {variant === "vertical" && (
+                    <Typography
+                      variant="default"
+                      size="label-2"
+                      as="span"
+                      className="text-text-default-2"
+                    >
+                      {t(($) => $.ui.fileUpload.or)}
+                    </Typography>
+                  )}
+                </>
+              )}
+              {removeWithIcon ? (
+                <InlineIconButton
+                  label="Cancel"
+                  color="secondary"
+                  onPress={() => {
+                    onRemove(state.id ?? "");
+                  }}
+                  icon={CloseIcon}
+                />
+              ) : (
+                <TextButton
+                  className={clsx(
+                    variant === "vertical" && "[&>span>span]:!font-medium text-interactive-text-primary-idle lowercase",
+                  )}
+                  color={variant === "horizontal" ? "secondary" : "primary"}
+                  onPress={() => {
+                    onRemove(state.id ?? "");
+                  }}
+                >
+                  {t(($) => $.ui.fileUpload.removeFile)}
+                </TextButton>
+              )}
+            </>
+          ) : (
+            <div className="flex items-center justify-center gap-file-upload-content-gap-button-to-button self-stretch">
+              {fileTriggerProps && (
+                <FileTrigger {...fileTriggerProps}>
+                  <Button
+                    variant="outlined"
+                    size="xs"
+                    width="hug"
+                    isDisabled={isDisabled}
+                  >
+                    {browseText ?? ""}
+                  </Button>
+                </FileTrigger>
+              )}
+              {removeWithIcon ? (
+                <InlineIconButton
+                  label="Cancel"
+                  color="secondary"
+                  onPress={() => {
+                    onRemove(state.id ?? "");
+                  }}
+                  icon={CloseIcon}
+                />
+              ) : (
+                <TextButton
+                  color="secondary"
+                  onPress={() => {
+                    onRemove(state.id ?? "");
+                  }}
+                >
+                  {t(($) => $.ui.fileUpload.removeFile)}
+                </TextButton>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};