@kosmeo-ui/react 0.1.0

package/src/components/inputs/fileDropZone/index.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+import "./styles.css";
+
+export interface FileDropZoneProps {
+  /** Callback when files are selected */
+  onFilesSelected: (files: File[]) => void;
+  /** Callback when there's an error */
+  onError?: (error: string) => void;
+  /** Maximum number of files allowed */
+  maxFiles?: number;
+  /** File types accepted (e.g., "image/*", ".pdf", "image/png,image/jpeg") */
+  accept?: string;
+  /** Label text for drag and drop area */
+  label?: string;
+}
+
+const FileDropZone = ({
+  onFilesSelected,
+  onError,
+  maxFiles = 15,
+  accept,
+  label = "Drag and drop files here",
+}: FileDropZoneProps) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const validateFileType = (file: File): boolean => {
+    if (!accept) return true;
+
+    const acceptTypes = accept.split(",").map((type) => type.trim());
+
+    return acceptTypes.some((acceptType) => {
+      // Handle wildcard (e.g., "image/*")
+      if (acceptType.endsWith("/*")) {
+        const baseType = acceptType.split("/")[0];
+        return file.type.startsWith(baseType + "/");
+      }
+      // Handle file extension (e.g., ".pdf")
+      if (acceptType.startsWith(".")) {
+        return file.name.toLowerCase().endsWith(acceptType.toLowerCase());
+      }
+      // Handle specific MIME type (e.g., "image/png")
+      return file.type === acceptType;
+    });
+  };
+
+  const processFiles = (files: FileList) => {
+    const fileArray = Array.from(files);
+
+    const validFiles = fileArray.filter(validateFileType);
+
+    if (validFiles.length === 0 && fileArray.length > 0) {
+      onError?.("Please upload valid file types only");
+      return;
+    }
+
+    if (validFiles.length > maxFiles) {
+      onError?.(`Too many files selected. Select no more than ${maxFiles}`);
+      return;
+    }
+
+    onFilesSelected(validFiles);
+  };
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const files = e.dataTransfer.files;
+    if (files && files.length !== 0) {
+      processFiles(files);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length !== 0) {
+      processFiles(files);
+    }
+  };
+
+  return (
+    <div
+      className={`k-file-drop-zone ${
+        isDragging ? "k-file-drop-zone-dragging" : ""
+      }`}
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+    >
+      <p>{label}</p>
+      <p>or</p>
+      <label htmlFor="file-drop-zone-input" className="k-file-drop-zone-button">
+        Browse Files
+      </label>
+      <input
+        type="file"
+        accept={accept}
+        multiple
+        id="file-drop-zone-input"
+        onChange={handleFileChange}
+        style={{ display: "none" }}
+      />
+    </div>
+  );
+};
+
+export default FileDropZone;

package/src/components/inputs/fileDropZone/styles.css

@@ -0,0 +1,43 @@
+.k-file-drop-zone {
+  border: 0.125rem dashed var(--border-color);
+  border-radius: 0.5rem;
+  padding: 2rem;
+  text-align: center;
+  background-color: var(--background-color-dark);
+  transition: all 0.2s ease;
+  margin-bottom: 1rem;
+  cursor: pointer;
+}
+
+.k-file-drop-zone:hover {
+  border-color: var(--primary-color);
+  background-color: var(--background-color-hover);
+}
+
+.k-file-drop-zone-dragging {
+  border-color: var(--primary-color);
+  background-color: var(--primary-color-light);
+  border-style: solid;
+}
+
+.k-file-drop-zone p {
+  margin: 0.5rem 0;
+  color: var(--text-color);
+  font-size: var(--text-size-sm);
+}
+
+.k-file-drop-zone-button {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background-color: var(--primary-color);
+  color: var(--text-color-light);
+  border-radius: 0.5rem;
+  cursor: pointer;
+  font-size: var(--text-size-sm);
+  font-weight: 600;
+  transition: background-color 0.2s ease;
+}
+
+.k-file-drop-zone-button:hover {
+  background-color: var(--primary-color-hover);
+}

package/src/components/inputs/fileUpload/index.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import MandatoryAsterisk from "../../forms/requiredAsterisk/index.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { PropsWithSize, PropsWithVariant } from "../../types.js";
+import IconButton from "../../buttons/iconButton/index.js";
+import { useEffect, useRef, useState } from "react";
+import Button from "../../buttons/button/index.js";
+import Modal from "../../overlays/modal/index.js";
+import "./styles.css";
+import {
+  faUpload,
+  faFile,
+  faTrash,
+  faFolderOpen,
+} from "@fortawesome/free-solid-svg-icons";
+
+interface FileUploadProps extends PropsWithSize, PropsWithVariant {
+  /** A callback function that receives the selected files. */
+  onFileSelect: (files: File[] | null) => void;
+  /**
+   * **_Optional_** flag to allow multiple file selection
+   *
+   * Defaults to false
+   */
+  multiple?: boolean;
+  /**
+   * **_Optional_** Accepted file types
+   *
+   * Example: "image/*", ".pdf", ".doc,.docx"
+   */
+  accept?: string;
+  /**
+   * **_Optional_** Position of the file list relative to the upload button
+   *
+   * Accepts "above" or "below"
+   *
+   * Defaults to "below"
+   */
+  fileListPosition?: "above" | "below";
+  /** **_Optional_** Maximum file size in bytes */
+  maxSize?: number;
+  /** **_Optional_** Label to display above the component */
+  label?: string;
+  /** **_Optional_** whether the field is required (shows red asterisk and enables validation) */
+  required?: boolean;
+  /** **_Optional_** ID of the field. If one is not provided, it will be randomly generated */
+  id?: string;
+  /**
+   * **_Optional_** When true, renders a second "Upload Folder" button next to
+   * "Upload Files" in the empty state. Directory picks preserve the relative
+   * path in each `File`'s `webkitRelativePath` so callers can reconstruct the
+   * source tree when composing object keys.
+   */
+  allowDirectory?: boolean;
+  /**
+   * **_Optional_** Files to seed the component with on mount. `onFileSelect`
+   * is fired once synchronously so the parent's state stays in sync. Use a
+   * `key` on the parent if you need to re-seed across remounts.
+   */
+  initialFiles?: File[];
+  /**
+   * **_Optional_** Custom render function for the file list
+   *
+   * Receives the selected files, remove handler, clear handler, and change handler
+   */
+  renderFiles?: (params: {
+    files: File[];
+    onRemove: (index: number) => void;
+    onClear: () => void;
+    onChange: () => void;
+  }) => React.ReactNode;
+}
+
+const FileUpload = (props: FileUploadProps) => {
+  const {
+    multiple = false,
+    variant = "primary",
+    size = "md",
+    fileListPosition = "below",
+    required = false,
+  } = props;
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const directoryInputRef = useRef<HTMLInputElement>(null);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>(
+    () => props.initialFiles ?? []
+  );
+  // Sync the parent once on mount when seeded — parent state tracks this
+  // component's selection, so without the notification it would miss the seed.
+  const onFileSelectRef = useRef(props.onFileSelect);
+  onFileSelectRef.current = props.onFileSelect;
+  useEffect(() => {
+    if (props.initialFiles && props.initialFiles.length > 0) {
+      onFileSelectRef.current(props.initialFiles);
+    }
+  }, []);
+  const [showSizeModal, setShowSizeModal] = useState(false);
+  const [oversizedFileInfo, setOversizedFileInfo] = useState<{
+    files: string[];
+    maxSize: string;
+  }>({ files: [], maxSize: "" });
+
+  const componentId =
+    props.id || `fileupload-${Math.random().toString(36).substring(2, 9)}`;
+  const directoryId = `${componentId}-dir`;
+
+  // `webkitdirectory` isn't in React's DOM type map; set it imperatively.
+  useEffect(() => {
+    if (props.allowDirectory && directoryInputRef.current) {
+      directoryInputRef.current.setAttribute("webkitdirectory", "");
+      directoryInputRef.current.setAttribute("directory", "");
+    }
+  }, [props.allowDirectory]);
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files && files.length > 0) {
+      const { maxSize } = props;
+      const newFilesArray = Array.from(files);
+
+      if (maxSize) {
+        const oversizedFiles = newFilesArray.filter((f) => f.size > maxSize);
+        if (oversizedFiles.length > 0) {
+          const maxSizeFormatted = formatFileSize(maxSize);
+          const fileNames = oversizedFiles.map((f) => f.name);
+          setOversizedFileInfo({ files: fileNames, maxSize: maxSizeFormatted });
+          setShowSizeModal(true);
+          return;
+        }
+      }
+
+      setSelectedFiles(newFilesArray);
+      props.onFileSelect(newFilesArray);
+    } else {
+      setSelectedFiles([]);
+      props.onFileSelect(null);
+    }
+  };
+
+  const handleRemoveFile = (index: number) => {
+    const newFiles = selectedFiles.filter((_, i) => i !== index);
+    setSelectedFiles(newFiles);
+    props.onFileSelect(newFiles.length > 0 ? newFiles : null);
+
+    if (newFiles.length === 0 && fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleClearFiles = () => {
+    setSelectedFiles([]);
+    props.onFileSelect(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const fileList =
+    selectedFiles.length > 0 &&
+    (props.renderFiles ? (
+      props.renderFiles({
+        files: selectedFiles,
+        onRemove: handleRemoveFile,
+        onClear: handleClearFiles,
+        onChange: () => fileInputRef.current?.click(),
+      })
+    ) : (
+      <div className="k-file-list">
+        <div className="k-file-list-header">
+          <span>Selected Files ({selectedFiles.length})</span>
+          <div className="k-file-list-actions">
+            <Button
+              onClick={() => fileInputRef.current?.click()}
+              variant={variant}
+              size={size}
+            >
+              Change File{selectedFiles.length > 1 ? "s" : ""}
+            </Button>
+            <Button onClick={handleClearFiles} variant="danger" size={size}>
+              Clear All
+            </Button>
+          </div>
+        </div>
+        <ul className="k-file-list-items">
+          {selectedFiles.map((file, index) => (
+            <li key={index} className="k-file-list-item">
+              <div className="k-file-info">
+                <FontAwesomeIcon icon={faFile} className="k-file-icon" />
+                <span className="k-file-name">{file.name}</span>
+                <span className="k-file-size">
+                  ({formatFileSize(file.size)})
+                </span>
+              </div>
+              <IconButton
+                icon={faTrash}
+                onClick={() => handleRemoveFile(index)}
+                variant="danger"
+                size={size}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+    ));
+
+  return (
+    <div className={"k-file-upload-container"}>
+      {props.label && (
+        <label className="k-file-upload-label-text">
+          {props.label}
+          {required && <MandatoryAsterisk />}
+        </label>
+      )}
+      <input
+        type="file"
+        accept={props.accept}
+        multiple={multiple}
+        onChange={handleFileChange}
+        ref={fileInputRef}
+        className="k-file-upload-input"
+        id={componentId}
+        required={required}
+      />
+      {props.allowDirectory && (
+        <input
+          type="file"
+          multiple
+          onChange={handleFileChange}
+          ref={directoryInputRef}
+          className="k-file-upload-input"
+          id={directoryId}
+        />
+      )}
+
+      {fileListPosition === "above" && fileList}
+
+      {selectedFiles.length === 0 && (
+        <div className="k-file-upload-empty-actions">
+          <label
+            htmlFor={componentId}
+            className={`k-button k-button-${variant} k-button-${size} k-button-center k-file-upload-button`}
+          >
+            <FontAwesomeIcon icon={faUpload} /> Upload{" "}
+            {multiple ? "Files" : "File"}
+          </label>
+          {props.allowDirectory && (
+            <label
+              htmlFor={directoryId}
+              className={`k-button k-button-${variant} k-button-${size} k-button-center k-file-upload-button`}
+            >
+              <FontAwesomeIcon icon={faFolderOpen} /> Upload Folder
+            </label>
+          )}
+        </div>
+      )}
+
+      {fileListPosition === "below" && fileList}
+
+      <Modal
+        show={showSizeModal}
+        onClose={() => setShowSizeModal(false)}
+        title="File Size Error"
+      >
+        <div>
+          <p>
+            <strong>The following file(s) are too large:</strong>
+          </p>
+          <ul>
+            {oversizedFileInfo.files.map((fileName, index) => (
+              <li key={index}>{fileName}</li>
+            ))}
+          </ul>
+          <p>
+            Maximum allowed file size is{" "}
+            <strong>{oversizedFileInfo.maxSize}</strong>
+          </p>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default FileUpload;

package/src/components/inputs/fileUpload/styles.css

@@ -0,0 +1,104 @@
+.k-file-upload-container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1rem;
+  width: 100%;
+}
+
+.k-file-upload-input {
+  display: none;
+}
+
+.k-file-upload-button {
+  flex: 1;
+  gap: 0.5rem;
+}
+
+.k-file-upload-empty-actions {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.k-file-upload-label-text {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-color);
+  width: 100%;
+  text-align: left;
+}
+
+.k-file-list {
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: 0.375rem;
+  background-color: var(--light-bg);
+}
+
+.k-file-list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--lighter-bg);
+  font-weight: 500;
+}
+
+.k-file-list-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.k-file-list-items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.k-file-list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+  transition: background-color 0.2s;
+}
+
+.k-file-list-item:last-child {
+  border-bottom: none;
+}
+
+.k-file-list-item:hover {
+  background-color: var(--lighter-bg);
+}
+
+.k-file-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  overflow: hidden;
+}
+
+.k-file-icon {
+  color: var(--secondary-color);
+  flex-shrink: 0;
+}
+
+.k-file-name {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.k-file-size {
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  flex-shrink: 0;
+}