formik-form-components 2.0.3 → 2.0.4

package/src/upload/Upload.tsx

@@ -1,162 +0,0 @@
-'use client';
-
-import React from "react";
-import { useDropzone } from "react-dropzone";
-import { XMarkIcon } from "@heroicons/react/20/solid";
-import { UploadIllustration } from "../assets/illustrations";
-import RejectionFiles from "./errors/RejectionFiles";
-import MultiFilePreview from "./preview/MultiFilePreview";
-import SingleFilePreview from "./preview/SingleFilePreview";
-import type { UploadProps } from "./types";
-
-interface StyledDropZoneProps {
-  isDragActive: boolean;
-  isError: boolean;
-  disabled?: boolean;
-  hasFile: boolean;
-  children: React.ReactNode;
-  [key: string]: any;
-}
-
-const StyledDropZone: React.FC<StyledDropZoneProps> = ({
-  isDragActive,
-  isError,
-  disabled,
-  hasFile,
-  children,
-  ...props
-}) => (
-  <div
-    className={`
-      outline-none cursor-pointer overflow-hidden relative rounded-lg transition-all
-      ${isDragActive ? "opacity-80" : ""}
-      ${
-        isError
-          ? "border-2 border-red-500 bg-red-50"
-          : "border border-dashed border-gray-300"
-      }
-      ${disabled ? "opacity-50 pointer-events-none" : ""}
-      ${hasFile ? "p-12" : "p-8"}
-      hover:opacity-80
-    `}
-    {...props}
-  >
-    {children}
-  </div>
-);
-
-const Placeholder = () => (
-  <div className="grid place-items-center min-h-[200px] w-full">
-    <div className="flex flex-col md:flex-row items-center gap-8 text-center md:text-left">
-      <div className="w-48">
-        <UploadIllustration />
-      </div>
-      <div>
-        <h5 className="text-lg font-medium mb-2">Drop or Select file</h5>
-        <p className="text-gray-500">
-          Drop files here or click{" "}
-          <span className="underline mx-0.5">browse</span> through your machine
-        </p>
-      </div>
-    </div>
-  </div>
-);
-
-const Upload: React.FC<UploadProps> = ({
-  disabled,
-  multiple = false,
-  error,
-  helperText,
-  file,
-  onDelete,
-  files,
-  thumbnail,
-  onUpload,
-  onRemove,
-  onRemoveAll,
-  className = "",
-  ...other
-}) => {
-  const {
-    getRootProps,
-    getInputProps,
-    isDragActive,
-    isDragReject,
-    fileRejections,
-  } = useDropzone({
-    multiple,
-    disabled,
-    ...other,
-  });
-
-  const hasFile = !!file && !multiple;
-  const hasFiles = files && multiple && files.length > 0;
-  const isError = isDragReject || !!error;
-
-  return (
-    <div className={`w-full relative ${className}`}>
-      <StyledDropZone
-        {...getRootProps()}
-        isDragActive={isDragActive}
-        isError={isError}
-        disabled={disabled}
-        hasFile={hasFile}
-      >
-        <input {...getInputProps()} />
-
-        {!hasFile && <Placeholder />}
-        {hasFile && <SingleFilePreview file={file} />}
-      </StyledDropZone>
-
-      {helperText && <p className="mt-2 text-sm text-gray-500">{helperText}</p>}
-
-      <RejectionFiles fileRejections={fileRejections} />
-
-      {hasFile && onDelete && (
-        <button
-          type="button"
-          onClick={onDelete}
-          className="absolute top-4 right-4 z-10 p-1.5 rounded-full bg-black/70 text-white hover:bg-black/50 transition-colors"
-        >
-          <XMarkIcon className="w-4 h-4" />
-        </button>
-      )}
-
-      {hasFiles && (
-        <>
-          <div className="my-6">
-            <MultiFilePreview
-              files={files}
-              thumbnail={thumbnail}
-              onRemove={onRemove}
-            />
-          </div>
-
-          <div className="flex justify-end gap-3">
-            {onRemoveAll && (
-              <button
-                type="button"
-                onClick={onRemoveAll}
-                className="px-4 py-1.5 text-sm border rounded-md hover:bg-gray-50"
-              >
-                Remove all
-              </button>
-            )}
-
-            {onUpload && (
-              <button
-                type="button"
-                onClick={onUpload}
-                className="px-4 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700"
-              >
-                Upload files
-              </button>
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default Upload;

package/src/upload/errors/RejectionFiles.tsx

@@ -1,49 +0,0 @@
-'use client';
-
-import type { FileRejection } from "react-dropzone";
-import { fileData } from "../../file-thumbnail/utils";
-
-// ----------------------------------------------------------------------
-
-type Props = {
-  fileRejections: readonly FileRejection[];
-};
-
-export default function RejectionFiles({
-  fileRejections,
-}: Props): React.JSX.Element | null {
-  if (!fileRejections.length) {
-    return null;
-  }
-
-  function formatBytes(bytes?: number): string {
-    const b = bytes ?? 0;
-    if (b === 0) return "0 Bytes";
-    const k = 1024;
-    const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
-    const i = Math.floor(Math.log(b) / Math.log(k));
-    return `${parseFloat((b / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
-  }
-
-  return (
-    <div className="mt-3 rounded-lg border border-red-200 bg-red-50 p-2">
-      {fileRejections.map(({ file, errors }) => {
-        const { path, size } = fileData(file);
-
-        return (
-          <div key={path} className="my-1">
-            <p className="truncate text-sm font-medium">
-              {path} - {size != null ? formatBytes(size) : ""}
-            </p>
-
-            {errors.map((error) => (
-              <span key={error.code} className="block text-xs text-red-600">
-                - {error.message}
-              </span>
-            ))}
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/src/upload/index.ts

@@ -1,5 +0,0 @@
-export * from "./types";
-export { default as RejectionFiles } from "./errors/RejectionFiles";
-export { default as MultiFilePreview } from "./preview/MultiFilePreview";
-export { default as SingleFilePreview } from "./preview/SingleFilePreview";
-export { default as Upload } from "./Upload";

package/src/upload/preview/MultiFilePreview.tsx

@@ -1,297 +0,0 @@
-'use client';
-
-import { useState, useRef, Key } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import type { UploadProps } from "../types";
-import { formatFileSize } from "../../file-thumbnail/utils";
-
-export interface FileItem extends File {
-  id?: number | string;
-  preview?: string;
-  url?: string;
-  is_private?: boolean;
-  [key: string]: unknown;
-}
-
-export default function MultiFilePreview({
-  thumbnail,
-  files,
-  onRemove,
-  className = "",
-  isClickable,
-  isEditable,
-  onDeleteButtonClick,
-  onPrivacyUpdateClick,
-}: UploadProps): React.JSX.Element | null {
-  const [menuAnchor, setMenuAnchor] = useState<null | HTMLElement>(null);
-  const [selectedFile, setSelectedFile] = useState<FileItem | null>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const canViewPrivate = true;
-
-  if (files?.length == null) {
-    return null;
-  }
-
-  const handleMenuClose = () => {
-    setMenuAnchor(null);
-    setSelectedFile(null);
-  };
-
-  const getFileThumbnail = (file: FileItem) => {
-    const typedFile = file as FileItem;
-    const imgUrl = typedFile.preview;
-
-    // Check if it's an image (following SingleFilePreview logic)
-    const isImage =
-      typedFile.type?.startsWith("image/") ||
-      /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(typedFile.name || "");
-
-    if (imgUrl && isImage) {
-      if (typedFile.is_private && !canViewPrivate) {
-        return (
-          <svg
-            className="w-full h-full text-gray-400"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fillRule="evenodd"
-              d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-              clipRule="evenodd"
-            />
-          </svg>
-        );
-      }
-      return (
-        <img
-          src={imgUrl}
-          alt={typedFile.name || ""}
-          className="w-full h-full object-cover"
-        />
-      );
-    }
-
-    // Non-image files - use SingleFilePreview style icons
-    return (
-      <div className="w-full h-full flex flex-col items-center justify-center bg-gray-50 p-2 text-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="h-8 w-8 text-gray-400 mb-1 flex-shrink-0"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2}
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-          />
-        </svg>
-        <p className="text-xs font-medium text-gray-900 truncate max-w-[80px]">
-          {typedFile.name}
-        </p>
-      </div>
-    );
-  };
-
-  return (
-    <div className={`space-y-2 ${className}`}>
-      <AnimatePresence>
-        {files.map((file) => {
-          const typedFile = file as FileItem;
-          const { name = "", size = 0 } = typedFile;
-          const isStringFile = typeof file === "string";
-          const itemKey = (typedFile.id ||
-            typedFile.name ||
-            Math.random().toString(36).substr(2, 9)) as Key;
-
-          if (thumbnail) {
-            return (
-              <motion.div
-                key={itemKey}
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, scale: 0.95 }}
-                className="relative inline-block m-1 w-20 h-20 rounded-lg overflow-hidden border border-gray-200 bg-gray-50"
-              >
-                <div className="w-full h-full flex items-center justify-center">
-                  {getFileThumbnail(typedFile)}
-                </div>
-                {onRemove && (
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onRemove(typedFile);
-                    }}
-                    className="absolute top-1 right-1 p-1 rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      className="h-3 w-3"
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                  </button>
-                )}
-              </motion.div>
-            );
-          }
-
-          return (
-            <motion.div
-              key={itemKey}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.95 }}
-              className="flex items-center p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
-            >
-              {/* List view - SingleFilePreview inspired thumbnail */}
-              <div className="w-14 h-14 flex-shrink-0 mr-3 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 flex items-center justify-center">
-                {getFileThumbnail(typedFile)}
-              </div>
-
-              <div
-                className="flex-grow min-w-0"
-                onClick={() => {
-                  if (isClickable && typedFile.url) {
-                    window.open(typedFile.url, "_blank");
-                  }
-                }}
-              >
-                <p className="text-sm font-medium text-gray-900 truncate">
-                  {isStringFile ? file : name}
-                </p>
-                {!isStringFile && (
-                  <p className="text-xs text-gray-500">
-                    {formatFileSize(size)}
-                  </p>
-                )}
-              </div>
-
-              <div className="flex items-center space-x-1">
-                {onRemove && (
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onRemove(typedFile);
-                    }}
-                    className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-all"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      className="h-4 w-4"
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                  </button>
-                )}
-
-                {isEditable && (
-                  <div className="relative" ref={menuRef}>
-                    <button
-                      type="button"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setMenuAnchor(menuRef.current);
-                        setSelectedFile(typedFile);
-                      }}
-                      className="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-all"
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="h-4 w-4"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                      >
-                        <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-                      </svg>
-                    </button>
-
-                    {menuAnchor && selectedFile === typedFile && (
-                      <div className="absolute right-0 z-20 mt-2 w-48 bg-white rounded-lg shadow-xl border ring-1 ring-black ring-opacity-5 py-1 origin-top-right">
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            if (onDeleteButtonClick) {
-                              onDeleteButtonClick(typedFile);
-                            }
-                            handleMenuClose();
-                          }}
-                          className="flex w-full items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
-                        >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            className="mr-3 h-4 w-4"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                            />
-                          </svg>
-                          Delete
-                        </button>
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            if (onPrivacyUpdateClick) {
-                              onPrivacyUpdateClick(typedFile);
-                            }
-                            handleMenuClose();
-                          }}
-                          className="flex w-full items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
-                        >
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            className="mr-3 h-4 w-4"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                            stroke="currentColor"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d={
-                                typedFile?.is_private
-                                  ? "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-                                  : "M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"
-                              }
-                            />
-                          </svg>
-                          {typedFile?.is_private
-                            ? "Make Public"
-                            : "Make Private"}
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            </motion.div>
-          );
-        })}
-      </AnimatePresence>
-    </div>
-  );
-}

package/src/upload/preview/SingleFilePreview.tsx

@@ -1,81 +0,0 @@
-'use client';
-
-import { formatFileSize } from "../../file-thumbnail/utils";
-import type { CustomFile } from "../types";
-
-// ----------------------------------------------------------------------
-
-type Props = {
-  file: CustomFile | string | null;
-  className?: string;
-};
-
-export default function SingleFilePreview({
-  file,
-  className = "",
-}: Props): React.JSX.Element | null {
-  if (!file) {
-    return null;
-  }
-
-  const imgUrl = typeof file === "string" ? file : file.preview;
-  const isImage =
-    typeof file === "string"
-      ? /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(file)
-      : file.type?.startsWith("image/");
-
-  const fileName =
-    typeof file === "string" ? file.split("/").pop() : file.name || "file";
-
-  const fileSize =
-    typeof file === "string"
-      ? null
-      : file.size
-      ? formatFileSize(file.size)
-      : null;
-
-  if (isImage && imgUrl) {
-    return (
-      <div
-        className={`relative w-full h-full flex items-center justify-center ${className}`}
-      >
-        <div className="relative max-w-md w-full p-2">
-          <div className="aspect-square w-full flex items-center justify-center bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
-            <img
-              src={imgUrl}
-              alt={fileName}
-              className="max-w-full max-h-[200px] w-auto h-auto object-contain"
-              style={{
-                backgroundColor: "var(--color-bg-paper)",
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // For non-image files, show a file icon with name
-  return (
-    <div
-      className={`w-full h-full p-4 flex flex-col items-center justify-center text-center ${className}`}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-10 w-10 text-gray-400 mb-2"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-        />
-      </svg>
-      <p className="text-sm font-medium truncate w-full">{fileName}</p>
-      {fileSize && <p className="text-xs text-gray-500">{fileSize}</p>}
-    </div>
-  );
-}

package/src/upload/types.ts

@@ -1,51 +0,0 @@
-import type { DropzoneOptions, FileRejection, DropEvent } from "react-dropzone";
-import type { FileItem } from "./preview/MultiFilePreview";
-
-// ----------------------------------------------------------------------
-
-export interface CustomFile extends File {
-  path?: string;
-  preview?: string;
-  lastModifiedDate?: Date;
-  url?: string;
-  name: string;
-}
-
-export interface UploadProps extends Omit<DropzoneOptions, "onDrop"> {
-  error?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  thumbnail?: boolean;
-  isClickable?: boolean;
-  placeholder?: React.ReactNode;
-  helperText?: React.ReactNode;
-  disableMultiple?: boolean;
-  isEditable?: boolean;
-  onDeleteButtonClick?: (file: FileItem) => void;
-  onPrivacyUpdateClick?: (file: FileItem) => void;
-  // File handling
-  file?: CustomFile | string | File | null;
-  onDelete?: () => void;
-  // Multiple files
-  files?: (File | string | { name: string; url: string; preview?: string })[];
-  onUpload?: () => void;
-  onRemove?: (file: CustomFile | string) => void;
-  onRemoveAll?: () => void;
-  // Drop handler - using FileRejection from react-dropzone
-  onDrop?: <T extends File>(
-    acceptedFiles: T[],
-    fileRejections: FileRejection[],
-    event: DropEvent
-  ) => void;
-}
-
-// Helper type for file with preview
-export interface FileWithPreview extends File {
-  preview?: string;
-  url?: string;
-}
-
-// Type guard for file with preview
-export const isFileWithPreview = (file: unknown): file is FileWithPreview => {
-  return file instanceof File && "preview" in file;
-};