@povio/ui 0.0.4 → 0.0.6

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

@@ -1,15 +0,0 @@
-// 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

@@ -1,41 +0,0 @@
-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>;

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

@@ -1,72 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,170 +0,0 @@
-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>
-  );
-};