@povio/ui 0.0.2 → 0.0.4

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

@@ -0,0 +1,115 @@
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+
+import { CloseIcon } from "#ui/assets/icons/Close";
+import { FileIcon } from "#ui/assets/icons/File";
+import { Button } from "#ui/components/buttons/Button/Button";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+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";
+
+import { FileProgressBar } from "./FileProgressBar";
+
+type FileUploadContentLoadingProps = Pick<
+  FileUploadBaseProps,
+  "variant" | "as" | "isDisabled" | "emptyText" | "browseText"
+> & {
+  index: number;
+  state: FileUploadState;
+  singleFile?: boolean;
+  onCancel: (index: number) => void;
+};
+
+export const FileUploadContentLoading = ({
+  index,
+  variant,
+  as,
+  state,
+  isDisabled,
+  singleFile,
+  onCancel,
+}: FileUploadContentLoadingProps) => {
+  const { t } = useTranslation(ns);
+  return (
+    <div
+      className={clsx("flex w-full flex-col items-center", {
+        "flex-col": variant === "vertical",
+        "flex-row": variant === "horizontal",
+        "gap-file-upload-content-gap-content-to-button": as === "button",
+      })}
+    >
+      <div
+        className={clsx("flex w-full items-center justify-between", {
+          "flex-col gap-file-upload-content-gap-text-to-progress": variant === "vertical",
+          "flex-row gap-file-upload-content-gap-left-to-right-content": variant === "horizontal",
+          "opacity-50": isDisabled,
+        })}
+      >
+        <div
+          className={clsx("flex items-center gap-file-upload-content-gap-icon-to-content", {
+            "w-full flex-col": variant === "vertical",
+            "w-1/2": variant === "horizontal",
+          })}
+        >
+          <FileIcon className="h-6 w-6 text-text-default-1" />
+          <div
+            className={clsx("flex flex-col", {
+              "max-w-full gap-file-upload-content-gap-icon-to-content text-center": variant === "vertical",
+              "max-w-[calc(100%_-_32px)] gap-file-upload-content-gap-text-to-text": 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 items-center gap-1", {
+            "w-1/2": variant === "horizontal",
+            "w-full": variant === "vertical",
+          })}
+        >
+          <FileProgressBar progress={state.progress} />
+          {(as === "link" || variant === "horizontal") && (
+            <InlineIconButton
+              label="Cancel"
+              color="secondary"
+              onPress={() => {
+                onCancel(index);
+              }}
+              icon={CloseIcon}
+            />
+          )}
+        </div>
+      </div>
+      {as === "button" && variant === "vertical" && (
+        <Button
+          variant="outlined"
+          size="xs"
+          color="secondary"
+          width="hug"
+          onPress={() => {
+            onCancel(index);
+          }}
+        >
+          {t(($) => $.ui.fileUpload.cancel)}
+        </Button>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,68 @@
+import { DropZone, type DropZoneProps, FileTrigger, type FileTriggerProps } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+
+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 { InputUploadBaseProps } from "#ui/components/inputs/File/inputUpload.types";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { ns } from "#ui/config/i18n";
+
+import { inputUploadButton, inputUploadDropZone } from "./inputUploadButton.cva";
+
+interface InputUploadContentProps extends Omit<InputUploadBaseProps, "ref"> {
+  onSelect: FileTriggerProps["onSelect"];
+  onDrop: DropZoneProps["onDrop"];
+}
+
+export const InputUploadContent = (props: InputUploadContentProps) => {
+  const { variant, isDisabled, error, ...rest } = props;
+  const { t } = useTranslation(ns);
+
+  return (
+    <FileTrigger {...rest}>
+      <div
+        data-rac=""
+        data-disabled={isDisabled || undefined}
+        data-invalid={!!error || undefined}
+        className={inputUploadButton({
+          variant,
+          className: "group/input-upload",
+        })}
+      >
+        <DropZone
+          {...rest}
+          isDisabled={isDisabled}
+          className={inputUploadDropZone({ variant })}
+        >
+          <Typography
+            variant="default"
+            size="label-1"
+            as="span"
+            className="flex-fill select-none overflow-hidden text-ellipsis text-text-default-3"
+          >
+            {t(($) => $.ui.fileUpload.emptyText)}
+          </Typography>
+          {variant === "nested" && (
+            <TextButton
+              isDisabled={isDisabled}
+              icon={UploadIcon}
+              className="!p-0"
+            >
+              {t(($) => $.ui.fileUpload.upload)}
+            </TextButton>
+          )}
+        </DropZone>
+        {variant !== "nested" && (
+          <Button
+            size="s"
+            width="hug"
+            isDisabled={isDisabled}
+          >
+            {t(($) => $.ui.fileUpload.uploadFile)}
+          </Button>
+        )}
+      </div>
+    </FileTrigger>
+  );
+};

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

@@ -0,0 +1,32 @@
+import { CloseIcon } from "#ui/assets/icons/Close";
+import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+interface InputUploadFilledProps {
+  files: File[];
+  onRemove: () => void;
+  isDisabled?: boolean;
+}
+
+export const InputUploadFilled = ({ files, onRemove, isDisabled }: InputUploadFilledProps) => {
+  return (
+    <div className="flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle px-input-side-default py-input-height-default">
+      <Typography
+        variant="default"
+        size="label-1"
+        as="span"
+        className="flex-fill select-none truncate text-ellipsis text-text-default-1"
+      >
+        {files.map((file) => file.name).join(", ")}
+      </Typography>
+
+      <InlineIconButton
+        label="Remove files"
+        color="secondary"
+        icon={CloseIcon}
+        isDisabled={isDisabled}
+        onPress={onRemove}
+      />
+    </div>
+  );
+};

package/src/components/inputs/File/shared/fileUpload.cva.ts

@@ -0,0 +1,59 @@
+import { type VariantProps, cva, cx } from "class-variance-authority";
+import type { ClassProp } from "class-variance-authority/types";
+
+export const fileUploadDropZoneBase = cva(["relative w-full rounded-input-rounding-default"], {
+  variants: {
+    variant: {
+      vertical: ["flex-col justify-center"],
+      horizontal: ["flex-row justify-between"],
+    },
+    isContainer: {
+      true: [
+        "data-[drop-target]:before:content-['']",
+        "data-[drop-target]:before:absolute",
+        "data-[drop-target]:before:z-40",
+        "data-[drop-target]:before:width-full",
+        "data-[drop-target]:before:height-full",
+        "data-[drop-target]:before:top-0",
+        "data-[drop-target]:before:left-0",
+        "data-[drop-target]:border data-[drop-target]:border-dashed",
+        "data-[drop-target]:border-elevation-outline-default-2",
+        "data-[drop-target]:before:pointer-events-none data-[drop-target]:before:inset-0",
+        "data-[drop-target]:before:bg-elevation-fill-default-2",
+      ],
+      false: [
+        "flex items-center",
+        "py-file-upload-container-height-top-bottom",
+        "px-file-upload-container-side-default",
+        "gap-gap-file-upload-content-gap-icon-to-content",
+        "border border-input-outlined-outline-idle border-dashed bg-input-outlined-idle",
+        "hover:border-elevation-outline-default-2 hover:bg-elevation-fill-default-2",
+        "invalid:border invalid:border-input-outlined-outline-error",
+        "data-[drop-target]:border-elevation-outline-default-2 data-[drop-target]:bg-elevation-fill-default-2",
+        "data-[has-files]:border-solid",
+      ],
+    },
+  },
+  defaultVariants: {
+    variant: "vertical",
+  },
+});
+export type FileUploadDropZoneProps = VariantProps<typeof fileUploadDropZoneBase>;
+
+export const fileUploadDropZone = (props: FileUploadDropZoneProps & ClassProp) => {
+  const { className, ...rest } = props;
+  return cx(fileUploadDropZoneBase(rest), className);
+};
+
+// File card list variants for layout
+export const fileCardList = cva(["flex gap-3"], {
+  variants: {
+    variant: {
+      vertical: ["flex-col"],
+      horizontal: ["flex-row flex-wrap"],
+    },
+  },
+  defaultVariants: {
+    variant: "vertical",
+  },
+});

package/src/components/inputs/File/shared/inputUploadButton.cva.ts

@@ -0,0 +1,48 @@
+import { type VariantProps, cva, cx } from "class-variance-authority";
+import type { ClassProp } from "class-variance-authority/types";
+
+export const inputUploadButtonBase = cva(
+  ["flex w-full items-center justify-between gap-file-upload-input-gap-input-to-button-gap"],
+  {
+    variants: {
+      variant: {
+        default: [],
+        nested: [],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+export type InputUploadButtonProps = VariantProps<typeof inputUploadButtonBase>;
+
+export const inputUploadButton = (props: InputUploadButtonProps & ClassProp) => {
+  const { className, ...rest } = props;
+  return cx(inputUploadButtonBase(rest), className);
+};
+
+export const inputUploadDropZone = cva(
+  [
+    "flex-1",
+    "flex items-center",
+    "group-data-[invalid]/input-upload:border group-data-[invalid]/input-upload:border-input-outlined-outline-error",
+    "data-[drop-target]:border-input-outlined-outline-hover",
+    "hover:border-input-outlined-outline-hover",
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle px-input-side-default py-input-height-default",
+        ],
+        nested: [
+          "rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle px-input-side-default py-input-height-default",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);

package/src/components/inputs/FormField/FormField.tsx

@@ -0,0 +1,69 @@
+import type { PropsWithChildren, Ref } from "react";
+
+import { FormFieldError, type FormFieldErrorProps } from "#ui/components/inputs/FormField/FormFieldError";
+import { FormFieldHeader, type FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
+import type { TextInputProps } from "#ui/components/inputs/Input/TextInput/TextInput";
+
+export interface FormFieldProps
+  extends Omit<FormFieldHeaderProps, "className" | "labelProps">,
+    Omit<FormFieldErrorProps, "className"> {
+  hideLabel?: boolean;
+  headerClassName?: string;
+  errorClassName?: string;
+  className?: string;
+}
+
+interface FormFieldComponentProps extends PropsWithChildren<FormFieldProps> {
+  ref?: Ref<HTMLDivElement>;
+  labelProps?: FormFieldHeaderProps["labelProps"];
+  as?: TextInputProps["as"];
+}
+
+export const FormField = ({
+  ref,
+  as,
+  label,
+  tooltipText,
+  helperText,
+  isRequired,
+  rightContent,
+  isDisabled,
+  error,
+  hideLabel,
+  headerClassName,
+  errorClassName,
+  children,
+  className,
+  labelProps,
+  isHeaderHidden,
+}: FormFieldComponentProps) => {
+  const headerProps: FormFieldHeaderProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps,
+  };
+
+  const errorProps: FormFieldErrorProps = {
+    error,
+    isDisabled,
+    isHidden: isHeaderHidden,
+    className: errorClassName,
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+    >
+      {!["filter", "floating"].includes(as ?? "") && <FormFieldHeader {...headerProps} />}
+      {children}
+      <FormFieldError {...errorProps} />
+    </div>
+  );
+};

package/src/components/inputs/FormField/FormFieldError.tsx

@@ -0,0 +1,21 @@
+import { clsx } from "clsx";
+
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+export interface FormFieldErrorProps {
+  error?: string;
+  isDisabled?: boolean;
+  isHidden?: boolean;
+  className?: string;
+}
+
+export const FormFieldError = ({ error, isDisabled, isHidden, className }: FormFieldErrorProps) => {
+  return (
+    <Typography
+      className={clsx("text-text-error-1", !error || isDisabled || isHidden ? "sr-only" : "mt-1-5", className)}
+      size="label-3"
+    >
+      {error}
+    </Typography>
+  );
+};

package/src/components/inputs/FormField/FormFieldHeader.tsx

@@ -0,0 +1,75 @@
+import type { DOMAttributes } from "@react-types/shared";
+import { clsx } from "clsx";
+import type { ReactNode } from "react";
+import { Focusable as AriaFocusable } from "react-aria-components";
+
+import { InfoIcon } from "#ui/assets/icons/Info";
+import { FormFieldLabel } from "#ui/components/inputs/FormField/FormFieldLabel";
+import { Tooltip } from "#ui/components/overlays/Tooltip/Tooltip";
+import { Typography } from "#ui/components/text/Typography/Typography";
+
+export interface FormFieldHeaderProps {
+  label: string;
+  tooltipText?: string;
+  helperText?: string;
+  isRequired?: boolean;
+  rightContent?: ReactNode;
+  isHeaderHidden?: boolean;
+  isDisabled?: boolean;
+  className?: string;
+  labelProps?: DOMAttributes<HTMLLabelElement>;
+}
+
+export const FormFieldHeader = ({
+  label,
+  tooltipText,
+  helperText,
+  isRequired,
+  rightContent,
+  isHeaderHidden,
+  isDisabled,
+  className,
+  labelProps,
+}: FormFieldHeaderProps) => {
+  return (
+    <div className={clsx(isHeaderHidden ? "sr-only" : "mb-1", className)}>
+      <div className="flex items-start justify-between">
+        <div className="flex items-start gap-1">
+          <FormFieldLabel
+            label={label}
+            isRequired={isRequired}
+            isDisabled={isDisabled}
+            labelProps={labelProps}
+          />
+
+          {tooltipText && (
+            <Tooltip text={tooltipText}>
+              <AriaFocusable>
+                <InfoIcon
+                  className={clsx(
+                    "size-6",
+                    isDisabled
+                      ? "text-interactive-text-secondary-disabled"
+                      : "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover",
+                  )}
+                  tabIndex={0}
+                />
+              </AriaFocusable>
+            </Tooltip>
+          )}
+        </div>
+        {rightContent}
+      </div>
+
+      {helperText && (
+        <Typography
+          slot="description"
+          size="label-2"
+          className={clsx(isDisabled ? "text-interactive-3" : "text-text-default-2")}
+        >
+          {helperText}
+        </Typography>
+      )}
+    </div>
+  );
+};

package/src/components/inputs/FormField/FormFieldHeaderClose.tsx

@@ -0,0 +1,23 @@
+import { Button as AriaButton } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+
+import { CloseIcon } from "#ui/assets/icons/Close";
+import { ns } from "#ui/config/i18n";
+
+interface FormFieldHeaderCloseProps {
+  onClose: () => void;
+}
+
+export const FormFieldHeaderClose = ({ onClose }: FormFieldHeaderCloseProps) => {
+  const { t } = useTranslation(ns);
+
+  return (
+    <AriaButton
+      onPress={onClose}
+      aria-label={t(($) => $.ui.closeAlt)}
+      className="shrink-0 focus-visible:outline-interactive-text-secondary-focus"
+    >
+      <CloseIcon className="size-6 text-interactive-text-secondary-idle" />
+    </AriaButton>
+  );
+};

package/src/components/inputs/FormField/FormFieldLabel.tsx

@@ -0,0 +1,41 @@
+import type { DOMAttributes } from "@react-types/shared";
+import { clsx } from "clsx";
+import type { RefCallback } from "react";
+import { Label as AriaLabel } from "react-aria-components";
+
+import { type LabelBaseProps, labelBase, labelTypography } from "#ui/components/inputs/shared/label.cva";
+import { Typography } from "#ui/components/text/Typography/Typography";
+import { UIStyle } from "#ui/config/uiStyle.context";
+
+export interface FormFieldLabelProps extends LabelBaseProps {
+  label: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  ref?: RefCallback<HTMLOrSVGElement>;
+  labelProps?: DOMAttributes<HTMLLabelElement>;
+}
+
+export const FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps }: FormFieldLabelProps) => {
+  const uiStyle = UIStyle.useConfig();
+  const labelTypographyMap = uiStyle?.label?.typography ?? labelTypography;
+  const labelBaseCva = (uiStyle?.label?.cva ?? labelBase) as unknown as UIStyle.Cva<LabelBaseProps>;
+
+  return (
+    <AriaLabel {...labelProps}>
+      <Typography
+        ref={ref}
+        as="span"
+        {...{
+          size: "label-2",
+          variant: "prominent-1",
+          ...labelTypographyMap({ as }),
+        }}
+        className={clsx(labelBaseCva({ as }), labelProps?.className)}
+      >
+        {label}
+
+        {isRequired && <span className={clsx(!isDisabled && "text-text-error-1")}>*</span>}
+      </Typography>
+    </AriaLabel>
+  );
+};