@povio/ui 0.0.4 → 0.0.6

package/src/components/inputs/DateTime/shared/TimePickerInput.tsx

@@ -1,114 +0,0 @@
-import { clsx } from "clsx";
-import { type Ref, useMemo, useState } from "react";
-import { type DateFieldAria, useFocusVisible, useFocusWithin, useHover } from "react-aria";
-import type { TimeFieldState } from "react-stately";
-import useMeasure from "react-use-measure";
-
-import { ClockIcon } from "#ui/assets/icons/Clock";
-import { InlineIconButton } from "#ui/components/buttons/InlineIconButton/InlineIconButton";
-import { TimeField } from "#ui/components/inputs/DateTime/shared/TimeField";
-import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
-import { FormFieldLabel } from "#ui/components/inputs/FormField/FormFieldLabel";
-import { InputClear } from "#ui/components/inputs/shared/InputClear";
-import { type InputVariantProps, useInputCva } from "#ui/components/inputs/shared/input.cva";
-
-interface DatePickerInputProps extends InputVariantProps {
-  ref?: Ref<HTMLDivElement>;
-  fieldProps: DateFieldAria["fieldProps"];
-  state: TimeFieldState;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  disableDropdown?: boolean;
-  headerProps?: FormFieldHeaderProps;
-  isClearable?: boolean;
-  onPress: () => void;
-}
-
-export const TimePickerInput = ({
-  ref,
-  as,
-  fieldProps,
-  state,
-  isDisabled,
-  isInvalid,
-  disableDropdown,
-  variant,
-  size,
-  isClearable,
-  headerProps,
-  onPress,
-  ...props
-}: DatePickerInputProps) => {
-  const inputCva = useInputCva();
-  const { hoverProps, isHovered } = useHover({ isDisabled });
-  const [isFocused, setIsFocused] = useState(false);
-  const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
-  const { isFocusVisible } = useFocusVisible();
-  const [labelContentRef, { width: labelWidth }] = useMeasure();
-
-  const hidePlaceholder = (as === "floating" || as === "filter") && !state.value && !isFocused;
-
-  const style = useMemo(() => {
-    const leftPadding = as === "filter" ? `var(--spacing-input-side-default) + ${labelWidth}` : "0";
-    return {
-      paddingLeft: `calc(${leftPadding}px)`,
-    };
-  }, [labelWidth, as]);
-
-  const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
-
-  return (
-    <div
-      ref={ref}
-      className={inputCva({
-        variant,
-        as,
-        size,
-        ...props,
-        className: clsx("group/date-picker-content relative flex items-center justify-between gap-2"),
-      })}
-      data-rac=""
-      data-hovered={isHovered || undefined}
-      data-disabled={isDisabled || undefined}
-      data-invalid={isInvalid || undefined}
-      data-focus-within={isFocused || undefined}
-      data-focus-visible={(isFocused && isFocusVisible) || undefined}
-      data-has-selection={state.value !== null || undefined}
-      {...fieldProps}
-      {...focusWithinProps}
-      {...hoverProps}
-    >
-      {as && ["filter", "floating"].includes(as) && headerProps && (
-        <FormFieldLabel
-          ref={labelContentRef}
-          as={as}
-          {...headerProps}
-        />
-      )}
-      <div style={style}>
-        <TimeField
-          fieldProps={fieldProps}
-          state={state}
-          isDisabled={isDisabled}
-          hidePlaceholder={hidePlaceholder}
-        />
-      </div>
-      <div
-        className={clsx("flex items-center gap-2", {
-          "-mt-4": as === "floating",
-        })}
-      >
-        {isClearable && canClear && <InputClear onClear={() => state.setValue(null)} />}
-        {!disableDropdown && (
-          <InlineIconButton
-            label=""
-            color="secondary"
-            onPress={onPress}
-            icon={ClockIcon}
-            isDisabled={isDisabled}
-          />
-        )}
-      </div>
-    </div>
-  );
-};

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

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

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

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

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