@mbao01/common 0.0.33 → 0.0.35

package/dist/types/components/FileUploader/FileUploader.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { FileUploaderInputProps, FileUploaderProps } from "./types";
+export declare const FileUploader: {
+    ({ className, dropzoneOptions, value, onValueChange, reSelect, orientation, children, dir, ...props }: FileUploaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    Content: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Input: {
+        ({ className, children, ...props }: FileUploaderInputProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: import("react").ForwardRefExoticComponent<{
+        index: number;
+    } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/types/components/FileUploader/FileUploaderContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type FileUploaderContextType } from "./types";
+export declare const FileUploaderContext: import("react").Context<FileUploaderContextType | null>;

package/dist/types/components/FileUploader/index.d.ts

@@ -0,0 +1 @@
+export { FileUploader } from "./FileUploader";

package/dist/types/components/FileUploader/types.d.ts

@@ -0,0 +1,22 @@
+import type { Dispatch, SetStateAction } from "react";
+import type { DropzoneState, DropzoneOptions } from "react-dropzone";
+export type FileUploaderProps = {
+    value: File[] | null;
+    reSelect?: boolean;
+    onValueChange: (value: File[] | null) => void;
+    dropzoneOptions: DropzoneOptions;
+    orientation?: "horizontal" | "vertical";
+} & React.HTMLAttributes<HTMLDivElement>;
+export type FileUploaderInputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export type DirectionOptions = "rtl" | "ltr" | undefined;
+export type FileUploaderContextType = {
+    dropzoneState: DropzoneState;
+    isLOF: boolean;
+    isFileTooBig: boolean;
+    removeFileFromSet: (index: number) => void;
+    removeAll: () => void;
+    activeIndex: number;
+    setActiveIndex: Dispatch<SetStateAction<number>>;
+    orientation: "horizontal" | "vertical";
+    direction: DirectionOptions;
+};

package/dist/types/components/FileUploader/useFileUpload.d.ts

@@ -0,0 +1 @@
+export declare const useFileUpload: () => import("./types").FileUploaderContextType;

package/dist/types/components/Form/OtpInput/OtpInput.d.ts

@@ -0,0 +1,2 @@
+import { type OtpInputProps } from "./types";
+export declare const OtpInput: ({ className, inputProps, ...props }: OtpInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/OtpInput/index.d.ts

@@ -0,0 +1 @@
+export { OtpInput } from "./OtpInput";

package/dist/types/components/Form/OtpInput/types.d.ts

@@ -0,0 +1,6 @@
+import { type OTPInputProps } from "react-otp-input";
+import { InputProps } from "../Input/types";
+export type OtpInputProps = {
+    className?: string;
+    inputProps?: Omit<InputProps, "type">;
+} & Omit<OTPInputProps, "renderInput" | "onChange">;

package/dist/types/components/Form/index.d.ts

@@ -1,4 +1,5 @@
 export { Input } from "./Input";
+export { OtpInput } from "./OtpInput";
 export { Phone } from "./Phone";
 export { Radio } from "./Radio";
 export { Range } from "./Range";

package/dist/types/index.d.ts

@@ -24,6 +24,7 @@ export * from "./components/Table";
 export * from "./components/Tabs";
 export * from "./components/Text";
 /** data input */
+export * from "./components/FileUploader";
 export * from "./components/Form";
 export * from "./components/Combobox";
 export * from "./components/DatePicker";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.33",
+  "version": "0.0.35",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -91,7 +91,9 @@
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.0.2",
     "react-day-picker": "^8.10.0",
+    "react-dropzone": "^14.2.3",
     "react-international-phone": "^4.2.6",
+    "react-otp-input": "^3.1.1",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
@@ -143,5 +145,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "169aeecca51d4544bfed02de64e0d9806dd83c6c"
+  "gitHead": "4e024b19d151c05b6c1580f461e348f5376c33b9"
 }

package/src/components/FileUploader/FileUploader.tsx

@@ -0,0 +1,319 @@
+"use client";
+
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { useDropzone, FileRejection } from "react-dropzone";
+import { toast } from "sonner";
+import { TrashIcon } from "@radix-ui/react-icons";
+import type {
+  DirectionOptions,
+  FileUploaderInputProps,
+  FileUploaderProps,
+} from "./types";
+import { cn } from "../../utilities";
+import { FileUploaderContext } from "./FileUploaderContext";
+import { useFileUpload } from "./useFileUpload";
+
+export const FileUploader = ({
+  className,
+  dropzoneOptions,
+  value,
+  onValueChange,
+  reSelect,
+  orientation = "vertical",
+  children,
+  dir,
+  ...props
+}: FileUploaderProps) => {
+  const [isFileTooBig, setIsFileTooBig] = useState(false);
+  const [isLOF, setIsLOF] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const {
+    accept = {
+      "image/*": [".jpg", ".jpeg", ".png", ".gif"],
+    },
+    maxFiles = 1,
+    maxSize = 4 * 1024 * 1024,
+    multiple = true,
+  } = dropzoneOptions;
+
+  const reSelectAll = maxFiles === 1 ? true : reSelect;
+  const direction: DirectionOptions = dir === "rtl" ? "rtl" : "ltr";
+
+  const removeFileFromSet = useCallback(
+    (i: number) => {
+      if (!value) return;
+      const newFiles = value.filter((_, index) => index !== i);
+      onValueChange(newFiles);
+    },
+    [value, onValueChange]
+  );
+
+  const removeAll = useCallback(() => {
+    onValueChange(null);
+  }, [onValueChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (!value) return;
+
+      const moveNext = () => {
+        const nextIndex = activeIndex + 1;
+        setActiveIndex(nextIndex > value.length - 1 ? 0 : nextIndex);
+      };
+
+      const movePrev = () => {
+        const nextIndex = activeIndex - 1;
+        setActiveIndex(nextIndex < 0 ? value.length - 1 : nextIndex);
+      };
+
+      const prevKey =
+        orientation === "horizontal"
+          ? direction === "ltr"
+            ? "ArrowLeft"
+            : "ArrowRight"
+          : "ArrowUp";
+
+      const nextKey =
+        orientation === "horizontal"
+          ? direction === "ltr"
+            ? "ArrowRight"
+            : "ArrowLeft"
+          : "ArrowDown";
+
+      if (e.key === nextKey) {
+        moveNext();
+      } else if (e.key === prevKey) {
+        movePrev();
+      } else if (e.key === "Enter" || e.key === "Space") {
+        if (activeIndex === -1) {
+          dropzoneState.inputRef.current?.click();
+        }
+      } else if (e.key === "Delete" || e.key === "Backspace") {
+        if (activeIndex !== -1) {
+          removeFileFromSet(activeIndex);
+          if (value.length - 1 === 0) {
+            setActiveIndex(-1);
+            return;
+          }
+          movePrev();
+        }
+      } else if (e.key === "Escape") {
+        setActiveIndex(-1);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [value, activeIndex, removeFileFromSet]
+  );
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
+      const files = acceptedFiles;
+
+      if (!files) {
+        toast.error("file error , probably too big");
+        return;
+      }
+
+      const newValues: File[] = value ? [...value] : [];
+
+      if (reSelectAll) {
+        newValues.splice(0, newValues.length);
+      }
+
+      files.forEach((file) => {
+        if (newValues.length < maxFiles) {
+          newValues.push(file);
+        }
+      });
+
+      onValueChange(newValues);
+
+      if (rejectedFiles.length > 0) {
+        for (const rejectedFile of rejectedFiles) {
+          if (rejectedFile.errors[0]?.code === "file-too-large") {
+            toast.error(
+              `File is too large. Max size is ${maxSize / 1024 / 1024}MB`
+            );
+            break;
+          }
+          if (rejectedFile.errors[0]?.message) {
+            toast.error(rejectedFile.errors[0].message);
+            break;
+          }
+        }
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [reSelectAll, value]
+  );
+
+  useEffect(() => {
+    if (!value) return;
+    if (value.length === maxFiles) {
+      setIsLOF(true);
+      return;
+    }
+    setIsLOF(false);
+  }, [value, maxFiles]);
+
+  const opts = dropzoneOptions
+    ? dropzoneOptions
+    : { accept, maxFiles, maxSize, multiple };
+
+  const dropzoneState = useDropzone({
+    ...opts,
+    onDrop,
+    onDropRejected: () => setIsFileTooBig(true),
+    onDropAccepted: () => setIsFileTooBig(false),
+  });
+
+  return (
+    <FileUploaderContext.Provider
+      value={{
+        dropzoneState,
+        isLOF,
+        isFileTooBig,
+        removeFileFromSet,
+        removeAll,
+        activeIndex,
+        setActiveIndex,
+        orientation,
+        direction,
+      }}
+    >
+      <div
+        tabIndex={0}
+        onKeyDownCapture={handleKeyDown}
+        className={cn(
+          "grid w-full focus:outline-none overflow-hidden ",
+          className,
+          {
+            "gap-2": value && value.length > 0,
+          }
+        )}
+        dir={dir}
+        {...props}
+      >
+        {children}
+      </div>
+    </FileUploaderContext.Provider>
+  );
+};
+
+FileUploader.displayName = "FileUploader";
+
+const FileUploaderContent = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ children, className, ...props }, ref) => {
+  const { orientation } = useFileUpload();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      className={cn("w-full px-1")}
+      ref={containerRef}
+      aria-description="content file holder"
+    >
+      <div
+        {...props}
+        ref={ref}
+        className={cn(
+          "flex rounded-xl gap-1",
+          orientation === "horizontal" ? "flex-raw flex-wrap" : "flex-col",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+});
+
+FileUploaderContent.displayName = "FileUploaderContent";
+
+const FileUploaderItem = forwardRef<
+  HTMLDivElement,
+  { index: number } & React.HTMLAttributes<HTMLDivElement>
+>(({ className, index, children, ...props }, ref) => {
+  const { removeFileFromSet, activeIndex, direction } = useFileUpload();
+  const isSelected = index === activeIndex;
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "h-6 p-1 justify-between cursor-pointer relative",
+        className,
+        isSelected ? "bg-muted" : ""
+      )}
+      {...props}
+    >
+      <div className="text-sm leading-none tracking-tight flex items-center gap-1.5 h-full w-full">
+        {children}
+      </div>
+      <button
+        type="button"
+        className={cn(
+          "absolute",
+          direction === "rtl" ? "top-1 left-1" : "top-1 right-1"
+        )}
+        onClick={() => removeFileFromSet(index)}
+      >
+        <span className="sr-only">remove item {index}</span>
+        <TrashIcon className="w-4 h-4 hover:stroke-destructive duration-200 ease-in-out" />
+      </button>
+    </div>
+  );
+});
+
+FileUploaderItem.displayName = "FileUploaderItem";
+
+const FileUploaderInput = ({
+  className,
+  children,
+  ...props
+}: FileUploaderInputProps) => {
+  const { dropzoneState, isFileTooBig, isLOF } = useFileUpload();
+  const rootProps = isLOF ? {} : dropzoneState.getRootProps();
+  return (
+    <div
+      {...props}
+      className={`relative w-full ${
+        isLOF ? "opacity-50 cursor-not-allowed " : "cursor-pointer "
+      }`}
+    >
+      <div
+        className={cn(
+          `w-full rounded-lg duration-300 ease-in-out
+         ${
+           dropzoneState.isDragAccept
+             ? "border-green-500"
+             : dropzoneState.isDragReject || isFileTooBig
+               ? "border-red-500"
+               : "border-gray-300"
+         }`,
+          className
+        )}
+        {...rootProps}
+      >
+        {children}
+      </div>
+      <input
+        {...props}
+        disabled={isLOF}
+        ref={dropzoneState.inputRef}
+        {...dropzoneState.getInputProps()}
+        className={`${isLOF ? "cursor-not-allowed" : ""}`}
+      />
+    </div>
+  );
+};
+
+FileUploaderInput.displayName = "FileInput";
+
+FileUploader.Content = FileUploaderContent;
+FileUploader.Input = FileUploaderInput;
+FileUploader.Item = FileUploaderItem;

package/src/components/FileUploader/FileUploaderContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+import { type FileUploaderContextType } from "./types";
+
+export const FileUploaderContext =
+  createContext<FileUploaderContextType | null>(null);

package/src/components/FileUploader/index.ts

@@ -0,0 +1 @@
+export { FileUploader } from "./FileUploader";

package/src/components/FileUploader/types.ts

@@ -0,0 +1,27 @@
+import type { Dispatch, SetStateAction } from "react";
+import type { DropzoneState, DropzoneOptions } from "react-dropzone";
+
+export type FileUploaderProps = {
+  value: File[] | null;
+  reSelect?: boolean;
+  onValueChange: (value: File[] | null) => void;
+  dropzoneOptions: DropzoneOptions;
+  orientation?: "horizontal" | "vertical";
+} & React.HTMLAttributes<HTMLDivElement>;
+
+export type FileUploaderInputProps =
+  React.InputHTMLAttributes<HTMLInputElement>;
+
+export type DirectionOptions = "rtl" | "ltr" | undefined;
+
+export type FileUploaderContextType = {
+  dropzoneState: DropzoneState;
+  isLOF: boolean;
+  isFileTooBig: boolean;
+  removeFileFromSet: (index: number) => void;
+  removeAll: () => void;
+  activeIndex: number;
+  setActiveIndex: Dispatch<SetStateAction<number>>;
+  orientation: "horizontal" | "vertical";
+  direction: DirectionOptions;
+};

package/src/components/FileUploader/useFileUpload.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { FileUploaderContext } from "./FileUploaderContext";
+
+export const useFileUpload = () => {
+  const context = useContext(FileUploaderContext);
+  if (!context) {
+    throw new Error("useFileUpload must be used within a FileUploaderProvider");
+  }
+  return context;
+};

package/src/components/Form/OtpInput/OtpInput.tsx

@@ -0,0 +1,34 @@
+import OTPInput from "react-otp-input";
+import { type OtpInputProps } from "./types";
+import { Input } from "../Input";
+import { cn } from "../../../utilities";
+import { useState } from "react";
+
+export const OtpInput = ({
+  className,
+  inputProps,
+  ...props
+}: OtpInputProps) => {
+  const [otp, setOtp] = useState("");
+
+  return (
+    <OTPInput
+      {...props}
+      value={otp}
+      onChange={setOtp}
+      renderInput={(renderProps) => (
+        <Input
+          {...inputProps}
+          {...renderProps}
+          className={cn(
+            "!w-12 !appearance-none selection:bg-base text-base-content",
+            className
+          )}
+        />
+      )}
+      containerStyle={`flex justify-center items-center flex-wrap text-2xl font-bold ${
+        props.renderSeparator ? "gap-1" : "gap-x-3 gap-y-2"
+      }`}
+    />
+  );
+};

package/src/components/Form/OtpInput/index.ts

@@ -0,0 +1 @@
+export { OtpInput } from "./OtpInput";

package/src/components/Form/OtpInput/types.ts

@@ -0,0 +1,7 @@
+import { type OTPInputProps } from "react-otp-input";
+import { InputProps } from "../Input/types";
+
+export type OtpInputProps = {
+  className?: string;
+  inputProps?: Omit<InputProps, "type">;
+} & Omit<OTPInputProps, "renderInput" | "onChange">;

package/src/components/Form/index.ts

@@ -1,4 +1,5 @@
 export { Input } from "./Input";
+export { OtpInput } from "./OtpInput";
 export { Phone } from "./Phone";
 export { Radio } from "./Radio";
 export { Range } from "./Range";

package/src/index.ts

@@ -26,6 +26,7 @@ export * from "./components/Tabs";
 export * from "./components/Text";
 
 /** data input */
+export * from "./components/FileUploader";
 export * from "./components/Form";
 export * from "./components/Combobox";
 export * from "./components/DatePicker";