@povio/ui 0.0.5 → 0.0.7

package/{src/components/inputs/DateTime/shared/YearPicker.tsx → dist/components/inputs/DateTime/shared/YearPicker.js}

@@ -1,38 +1,28 @@
+import { jsx } from "react/jsx-runtime";
 import { today } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
-import type { CalendarState, RangeCalendarState } from "@react-stately/calendar";
 import { clsx } from "clsx";
 import { useMemo } from "react";
-import { type Key, ListBox, ListBoxItem } from "react-aria-components";
-
-import { Typography } from "#ui/components/text/Typography/Typography";
-import { useScrollableListBox } from "#ui/hooks/useScrollableListBox";
-
-interface YearPickerProps {
-  state: CalendarState | RangeCalendarState;
-  onSelectionChange: (key: Set<Key>) => void;
-}
-
-export const YearPicker = ({ state, onSelectionChange }: YearPickerProps) => {
+import { ListBox, ListBoxItem } from "react-aria-components";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { useScrollableListBox } from "../../../../hooks/useScrollableListBox.js";
+const YearPicker = ({ state, onSelectionChange }) => {
   const formatter = useDateFormatter({
     year: "numeric",
-    timeZone: state.timeZone,
+    timeZone: state.timeZone
   });
-
   const years = useMemo(() => {
-    const arr: { value: number; formatted: string }[] = [];
+    const arr = [];
     for (let i = -100; i <= 100; i++) {
       const date = today(state.timeZone).add({ years: i });
       arr.push({
         value: date.year,
-        formatted: formatter.format(date.toDate(state.timeZone)),
+        formatted: formatter.format(date.toDate(state.timeZone))
       });
     }
-
     return arr;
   }, [state.timeZone, formatter]);
-
-  const isYearDisabled = (year: number) => {
+  const isYearDisabled = (year) => {
     if (state.minValue && year < state.minValue.year) {
       return true;
     }
@@ -41,60 +31,59 @@ export const YearPicker = ({ state, onSelectionChange }: YearPickerProps) => {
     }
     return false;
   };
-
   const selectedYear = years.findIndex((year) => year.value === state.focusedDate.year);
-
   const { ref } = useScrollableListBox();
-
-  return (
-    <ListBox
-      ref={ref}
-      autoFocus
-      aria-label="Year"
-      selectionMode="single"
-      selectedKeys={[selectedYear]}
-      onSelectionChange={(key) => {
+  return /* @__PURE__ */ jsx(
+    ListBox,
+    {
+      ref,
+      autoFocus: true,
+      "aria-label": "Year",
+      selectionMode: "single",
+      selectedKeys: [selectedYear],
+      onSelectionChange: (key) => {
         if (key === "all") {
           return;
         }
-
         const index = [...key][0];
-
         if (typeof index === "number") {
           const date = state.focusedDate.set({ year: years[index].value });
           state.setFocusedDate(date);
         }
-
         onSelectionChange(key);
-      }}
-      className="h-80 max-h-full min-h-0 w-full shrink-0 overflow-y-auto md:h-72 md:w-80"
-    >
-      {years.map((year, index) => {
+      },
+      className: "h-80 max-h-full min-h-0 w-full shrink-0 overflow-y-auto md:h-72 md:w-80",
+      children: years.map((year, index) => {
         const isDisabled = isYearDisabled(year.value);
-        return (
-          <ListBoxItem
-            key={index} // oxlint-disable-line react/no-array-index-key
-            id={index}
-            textValue={year.formatted}
-            isDisabled={isDisabled}
-            className={clsx(
+        return /* @__PURE__ */ jsx(
+          ListBoxItem,
+          {
+            id: index,
+            textValue: year.formatted,
+            isDisabled,
+            className: clsx(
               "flex px-4 py-2 text-interactive-text-secondary-idle outline-none",
               "border-elevation-outline-default-1 border-b border-solid bg-elevation-fill-default-1 last:border-b-0",
               "hover:text-interactive-text-secondary-hover",
               "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted",
               "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted",
-              isDisabled ? "cursor-default opacity-50" : "cursor-pointer",
-            )}
-          >
-            <Typography
-              as="span"
-              size="label-2"
-            >
-              {year.formatted}
-            </Typography>
-          </ListBoxItem>
+              isDisabled ? "cursor-default opacity-50" : "cursor-pointer"
+            ),
+            children: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                as: "span",
+                size: "label-2",
+                children: year.formatted
+              }
+            )
+          },
+          index
         );
-      })}
-    </ListBox>
+      })
+    }
   );
 };
+export {
+  YearPicker
+};

package/dist/components/inputs/File/FileUpload.d.ts

@@ -0,0 +1,4 @@
+import { FieldValues } from 'react-hook-form';
+import { FileUploadProps } from './fileUpload.types';
+export type { FileUploadBaseProps, FileUploadError, FileUploadProps, FileUploadRequest, FileUploadResponse, FileUploadState, } from './fileUpload.types';
+export declare const FileUpload: <TFieldValues extends FieldValues = FieldValues>(props: FileUploadProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/File/FileUpload.js

@@ -0,0 +1,254 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { mergeRefs, useLabels } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { useState, useCallback } from "react";
+import { DropZone } from "react-aria-components";
+import { Controller } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { FormField } from "../FormField/FormField.js";
+import { ns } from "../../../config/i18n.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { FileUtils } from "../../../utils/file.utils.js";
+import { FileCardList } from "./shared/FileCardList.js";
+import { FileUploadContent } from "./shared/FileUploadContent.js";
+import { FileUploadContentEmpty } from "./shared/FileUploadContentEmpty.js";
+import { fileUploadDropZone } from "./shared/fileUpload.cva.js";
+const FileUploadBase = (props) => {
+  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(props.value ?? []);
+  const 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) => {
+      const acceptedFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
+      if (acceptedFiles.length === 0 || !fileUpload) {
+        return;
+      }
+      if (!allowsMultiple) {
+        setUploadState([]);
+      }
+      const newUploadState = [];
+      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 = [];
+      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) => {
+      if (!inputFiles) {
+        return;
+      }
+      const filesArray = Array.from(inputFiles);
+      handleUpload(filesArray);
+    },
+    [handleUpload]
+  );
+  const handleDrop = async (e) => {
+    if (!e.items) {
+      return;
+    }
+    const promises = [];
+    e.items.forEach((item) => {
+      if (item.kind === "file") {
+        promises.push(item.getFile());
+      }
+    });
+    const inputFiles = await Promise.all(promises);
+    handleUpload(inputFiles);
+  };
+  const handleRemove = useCallback(
+    (id) => {
+      fileRemove?.({ id });
+      setUploadState((prev) => prev.filter((state) => state.id !== id));
+    },
+    [fileRemove]
+  );
+  const handleCancelUpload = useCallback(
+    (index) => {
+      const findState = uploadState[index];
+      if (findState) {
+        findState.abortController?.abort("canceled by user");
+        setUploadState((prev) => prev.filter((_, i) => i !== index));
+      }
+    },
+    [uploadState]
+  );
+  return /* @__PURE__ */ jsxs(
+    FormField,
+    {
+      ...formFieldProps,
+      labelProps,
+      className: clsx("w-full", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-file-upload-input-gap-input-to-button-gap", children: /* @__PURE__ */ jsx(
+          DropZone,
+          {
+            ...rest,
+            "data-rac": "",
+            "data-disabled": isDisabled || void 0,
+            "data-invalid": !!error || void 0,
+            "data-multiple": allowsMultiple || void 0,
+            "data-has-files": uploadState.length > 0 || void 0,
+            isDisabled,
+            onDrop: handleDrop,
+            className: fileUploadDropZone({ variant, isContainer: !!children, className: "group/file-upload-drop-zone" }),
+            children: children ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              children({
+                files: uploadState,
+                onRemove: handleRemove,
+                onCancel: handleCancelUpload
+              }),
+              /* @__PURE__ */ jsx(
+                FileUploadContentEmpty,
+                {
+                  as,
+                  variant,
+                  singleFile: true,
+                  hideButton: true,
+                  isDisabled,
+                  title: emptyText,
+                  uploadText,
+                  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"
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx(
+              FileUploadContent,
+              {
+                ...rest,
+                variant,
+                as,
+                isDisabled,
+                browseText,
+                uploadText,
+                emptyText,
+                uploadState,
+                handleSelect,
+                handleCancelUpload,
+                handleRemove,
+                acceptedFileTypes,
+                allowsMultiple
+              }
+            )
+          }
+        ) }),
+        !children && allowsMultiple && uploadState.length > 0 && (listRenderer ? listRenderer({
+          files: uploadState,
+          onRemove: handleRemove,
+          onCancel: handleCancelUpload
+        }) : /* @__PURE__ */ jsx(
+          FileCardList,
+          {
+            as,
+            uploadState,
+            isDisabled,
+            onRemove: handleRemove,
+            onCancel: handleCancelUpload
+          }
+        ))
+      ]
+    }
+  );
+};
+const FileUpload = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          FileUploadBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(FileUploadBase, { ...props });
+};
+export {
+  FileUpload
+};

package/dist/components/inputs/File/FileUploadContainer.d.ts

@@ -0,0 +1,3 @@
+import { FileUploadContainerProps } from './fileUpload.types';
+export declare const FileUploadContainer: (props: FileUploadContainerProps) => import("react/jsx-runtime").JSX.Element;
+export type { FileUploadContainerProps };

package/dist/components/inputs/File/FileUploadContainer.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { FileUpload } from "./FileUpload.js";
+const FileUploadContainer = (props) => {
+  return /* @__PURE__ */ jsx(
+    FileUpload,
+    {
+      label: "",
+      hideLabel: true,
+      variant: "vertical",
+      as: "button",
+      ...props
+    }
+  );
+};
+export {
+  FileUploadContainer
+};

package/dist/components/inputs/File/InputUpload.d.ts

@@ -0,0 +1,4 @@
+import { FieldValues } from 'react-hook-form';
+import { InputUploadProps } from './inputUpload.types';
+export type { InputUploadBaseProps, InputUploadProps } from './inputUpload.types';
+export declare const InputUpload: <TFieldValues extends FieldValues = FieldValues>(props: InputUploadProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/File/InputUpload.js

@@ -0,0 +1,176 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs, useLabels } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { useState } from "react";
+import { Controller } from "react-hook-form";
+import { FormField } from "../FormField/FormField.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { InputUploadContent } from "./shared/InputUploadContent.js";
+import { InputUploadFilled } from "./shared/InputUploadFilled.js";
+const InputUploadBase = ({
+  ref,
+  label,
+  tooltipText,
+  variant,
+  helperText,
+  isRequired,
+  isDisabled,
+  headerClassName,
+  errorClassName,
+  isHeaderHidden,
+  error,
+  className,
+  onChange,
+  value,
+  defaultValue,
+  allowsMultiple = false,
+  hideLabel,
+  acceptedFileTypes,
+  ...rest
+}) => {
+  const ui = UIConfig.useConfig();
+  const [internalFiles, setInternalFiles] = useState(() => {
+    if (value !== void 0) {
+      if (allowsMultiple) {
+        return value || [];
+      }
+      return value ? [value] : [];
+    }
+    if (defaultValue !== void 0) {
+      if (allowsMultiple) {
+        return defaultValue || [];
+      }
+      return defaultValue ? [defaultValue] : [];
+    }
+    return [];
+  });
+  const files = value !== void 0 ? (() => {
+    if (allowsMultiple) {
+      return value || [];
+    }
+    return value ? [value] : [];
+  })() : internalFiles;
+  const formFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    isHeaderHidden,
+    hideLabel: hideLabel ?? ui.input.hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName
+  };
+  const labelProps = useLabels({ "aria-label": label });
+  const updateFiles = (newFiles) => {
+    if (value === void 0) {
+      setInternalFiles(newFiles);
+    }
+    if (allowsMultiple) {
+      onChange?.(newFiles);
+    } else {
+      onChange?.(newFiles[0] || null);
+    }
+  };
+  const isFileAccepted = (file) => {
+    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) => {
+    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) => {
+    if (!e.items) {
+      return;
+    }
+    const promises = [];
+    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 /* @__PURE__ */ jsx(
+    FormField,
+    {
+      ...formFieldProps,
+      labelProps,
+      className: clsx("w-full", className),
+      children: files.length > 0 ? /* @__PURE__ */ jsx(
+        InputUploadFilled,
+        {
+          files,
+          onRemove: handleRemove,
+          isDisabled
+        }
+      ) : /* @__PURE__ */ jsx(
+        InputUploadContent,
+        {
+          ...rest,
+          label,
+          error,
+          allowsMultiple,
+          acceptedFileTypes,
+          variant,
+          isDisabled,
+          onSelect: handleSelect,
+          onDrop: handleDrop
+        }
+      )
+    }
+  );
+};
+const InputUpload = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          InputUploadBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(InputUploadBase, { ...props });
+};
+export {
+  InputUpload
+};

package/dist/components/inputs/File/fileUpload.types.d.ts

@@ -0,0 +1,79 @@
+import { ReactNode, Ref } from 'react';
+import { DropZoneProps, FileTriggerProps } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+import { FormFieldProps } from '../FormField/FormField';
+import { ControlProps } from '../shared/form.types';
+import { ApplicationException, GeneralErrorCodes } from '../../../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;
+    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);