gbs-add-block 1.0.5 → 1.0.7

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.0.5)
+# GBS Building Blocks 2.0 (v1.0.7)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,13 +6,10 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 1.0.5)
+## What's New 🎉 (Ver 1.0.7)
 
-- Major Update with more stable features and Data Grid.
-- Deprecated Grid Component, Use New Data Grid instead.
-- More UI/UX Optimization.
-- Animation improvements. 
-- Custom Components in SideBar and Mobile Screen Support
+- Uploader Enhancement
+- Select Bug Fix
 
 ## Authors
 

package/index.cjs

@@ -31,6 +31,7 @@ const CONFIG = {
     "BreadCrumb",
     "Bargraph",
     "UsePaginatedData",
+    "UseUploader"
   ],
   // Define component dependencies
   dependencies: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/select/index.tsx

@@ -13,6 +13,7 @@ import React, {
   useImperativeHandle,
   useRef,
 } from "react";
+import { createPortal } from "react-dom";
 import Icon from "../icon/Icon";
 import { check, search, upDown, x } from "../icon/iconPaths";
 import type { ItemsProps, SelectHandle, SelectProps } from "./types";
@@ -21,9 +22,11 @@ import { iconClass, popUp, primary } from "../globalStyle";
 import {
   useSelectState,
   useSelectData,
-  useClickOutside,
   applyScrollbarStyles,
   useKeyboardNavigation,
+  usePortalPopup,
+  getPortalStyles,
+  getAnimationClasses,
 } from "@grampro/headless-helpers";
 
 const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
@@ -68,9 +71,16 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const selectRef = useRef<HTMLDivElement>(null);
 
-  useClickOutside(selectRef as React.RefObject<HTMLElement>, () =>
-    setShowPopover(false)
-  );
+  // Use the custom portal hooks
+  const position = usePortalPopup({
+    isOpen: showPopover,
+    onClose: () => setShowPopover(false),
+    triggerRef: selectRef,
+    popupHeight: 250,
+    offset: 4,
+    minSpaceRequired: 50,
+    portalSelector: '[data-select-portal="true"]',
+  });
 
   // Update the handleSelect to accept a SelectItem
   const handleSelect = useCallback(
@@ -120,97 +130,113 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
     selected: selectedItem,
   }));
 
-  return (
+  // Portal popup content with smart positioning
+  const popupContent = showPopover && !disabled && (
     <div
-      className="relative w-full mt-2"
-      ref={selectRef}
-      id={id}
-      onKeyDown={handleKeyDown}
+      className={`${popUp["pop-up-style"]} ${getAnimationClasses(
+        position.placement
+      )}`}
+      style={getPortalStyles(position, 250)}
+      data-select-portal="true"
     >
-      <div className="w-full relative">
-        <button
-          className={`${error ? primary["error-border"] : "border"} ${
-            selectStyle["select-button"]
-          } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
-          onClick={togglePopover}
-          type="button"
-          disabled={disabled}
-        >
-          {selectedDisplay || placeholder}
-          <Icon
-            elements={upDown}
-            svgClass={`${iconClass["grey-common"]} ${
-              disabled ? "opacity-50" : ""
-            }`}
+      {showSearch && (
+        <div className={selectStyle["input-parent"]}>
+          <Icon elements={search} svgClass={iconClass["grey-common"]} />
+          <input
+            autoComplete="off"
+            type="text"
+            name="search"
+            id="search"
+            placeholder="Search a value"
+            className="w-full outline-none dark:bg-transparent"
+            ref={inputRef}
+            value={searchTerm}
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+              if (onFiltering) onFiltering(e.target.value);
+              setFocusedIndex(-1);
+            }}
           />
-        </button>
-        {selectedDisplay && !disabled && (
+        </div>
+      )}
+      {filteredItems.length > 0 ? (
+        filteredItems.map(({ value, label }, index: number) => (
           <button
-            className={selectStyle["selectedDisplay-Button"]}
-            onClick={handleClear}
+            key={value}
+            ref={(el: any) => (itemRefs.current[index] = el)}
+            className={`${selectStyle["filter-button"]} ${
+              focusedIndex === index ? "bg-gray-100 dark:bg-gray-700" : ""
+            }`}
+            onClick={() => handleSelect({ value, label })}
+            onMouseEnter={() => setFocusedIndex(index)}
           >
-            <Icon elements={x} svgClass={iconClass["grey-common"]} />
+            <Icon
+              elements={check}
+              svgClass={`h-4 w-4 fill-none ${
+                selectedItem === value ? "stroke-gray-500" : ""
+              }`}
+            />
+            {label}
           </button>
-        )}
-        {error && <p className={primary["error-primary"]}>{error}</p>}
-      </div>
+        ))
+      ) : (
+        <div className="text-sm text-center p-2">No Data Found</div>
+      )}
+    </div>
+  );
 
-      <input
-        type="hidden"
-        name={name}
-        value={selectedItem || ""}
-        readOnly
-        disabled={disabled}
-      />
-
-      {showPopover && !disabled && (
-        <div className={popUp["pop-up-style"]}>
-          {showSearch && (
-            <div className={selectStyle["input-parent"]}>
-              <Icon elements={search} svgClass={iconClass["grey-common"]} />
-              <input
-                autoComplete="off"
-                type="text"
-                name="search"
-                id="search"
-                placeholder="Search a value"
-                className="w-full outline-none"
-                ref={inputRef}
-                value={searchTerm}
-                onChange={(e) => {
-                  setSearchTerm(e.target.value);
-                  if (onFiltering) onFiltering(e.target.value);
-                  setFocusedIndex(-1);
-                }}
-              />
-            </div>
-          )}
-          {filteredItems.length > 0 ? (
-            filteredItems.map(({ value, label }, index: number) => (
-              <button
-                key={value}
-                ref={(el: any) => (itemRefs.current[index] = el)}
-                className={`${selectStyle["filter-button"]} ${
-                  focusedIndex === index ? "bg-gray-100" : ""
-                }`}
-                onClick={() => handleSelect({ value, label })}
-                onMouseEnter={() => setFocusedIndex(index)}
-              >
-                <Icon
-                  elements={check}
-                  svgClass={`h-4 w-4 fill-none ${
-                    selectedItem === value ? "stroke-gray-500" : ""
-                  }`}
-                />
-                {label}
-              </button>
-            ))
-          ) : (
-            <div className="text-sm text-center">No Data Found</div>
+  return (
+    <>
+      <div
+        className="relative w-full mt-2"
+        ref={selectRef}
+        id={id}
+        onKeyDown={handleKeyDown}
+      >
+        <div className="w-full relative">
+          <button
+            className={`${error ? primary["error-border"] : "border"} ${
+              selectStyle["select-button"]
+            } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
+            onClick={togglePopover}
+            type="button"
+            disabled={disabled}
+          >
+            {selectedDisplay || placeholder}
+            <Icon
+              elements={upDown}
+              svgClass={`${iconClass["grey-common"]} ${
+                disabled ? "opacity-50" : ""
+              } ${
+                showPopover && position.placement === "top" ? "rotate-180" : ""
+              }`}
+            />
+          </button>
+          {selectedDisplay && !disabled && (
+            <button
+              className={selectStyle["selectedDisplay-Button"]}
+              onClick={handleClear}
+            >
+              <Icon elements={x} svgClass={iconClass["grey-common"]} />
+            </button>
           )}
+          {error && <p className={primary["error-primary"]}>{error}</p>}
         </div>
-      )}
-    </div>
+
+        <input
+          type="hidden"
+          name={name}
+          value={selectedItem || ""}
+          readOnly
+          disabled={disabled}
+        />
+      </div>
+
+      {/* Render popup in portal to document.body */}
+      {typeof document !== "undefined" &&
+        popupContent &&
+        createPortal(popupContent, document.body)}
+    </>
   );
 });
 

package/source/components/useUploader/useUploader.tsx

@@ -0,0 +1,303 @@
+import { useState, useCallback } from "react";
+
+// Types
+interface ChunkInfo {
+  file: Blob;
+  originalFile: File;
+  chunkIndex: number;
+  totalChunks: number;
+}
+
+interface UploadProgress {
+  [fileName: string]: number;
+}
+
+interface UploadResult {
+  fileName: string;
+  status: "complete" | "chunk_received" | "error";
+  message?: string;
+}
+
+interface UseChunkedUploadOptions {
+  chunkSize?: number;
+  maxConcurrentUploads?: number;
+  baseUrl?: string;
+  onProgress?: (fileName: string, progress: number) => void;
+  onComplete?: (fileName: string, result: UploadResult) => void;
+  onError?: (fileName: string, error: Error) => void;
+  additionalParams?: any;
+}
+
+interface UseChunkedUploadReturn {
+  uploadFiles: (files: File[]) => Promise<void>;
+  isUploading: boolean;
+  uploadProgress: UploadProgress;
+  uploadStatus: string;
+  cancelUpload: () => void;
+  reset: () => void;
+}
+
+// Helper function to process files into chunks
+function processFiles(files: File[], chunkSize: number): ChunkInfo[] {
+  const finalFiles: ChunkInfo[] = [];
+
+  files.forEach((file) => {
+    if (file.size > chunkSize) {
+      const totalChunks = Math.ceil(file.size / chunkSize);
+      let offset = 0;
+      let chunkIndex = 0;
+
+      while (offset < file.size) {
+        const chunk = file.slice(offset, offset + chunkSize);
+        finalFiles.push({
+          file: chunk,
+          originalFile: file,
+          chunkIndex,
+          totalChunks,
+        });
+        offset += chunkSize;
+        chunkIndex++;
+      }
+    } else {
+      finalFiles.push({
+        file,
+        originalFile: file,
+        chunkIndex: 0,
+        totalChunks: 1,
+      });
+    }
+  });
+
+  return finalFiles;
+}
+
+// Helper function to upload a single chunk
+async function uploadChunk(
+  chunk: Blob,
+  originalFile: File,
+  chunkIndex: number,
+  totalChunks: number,
+  baseUrl: string,
+  signal?: AbortSignal,
+  additionalParams: any = {}
+): Promise<UploadResult> {
+  const formData = new FormData();
+  formData.append("chunk", chunk);
+  formData.append("fileName", originalFile.name);
+  formData.append("chunkIndex", chunkIndex.toString());
+  formData.append("totalChunks", totalChunks.toString());
+  formData.append("fileSize", originalFile.size.toString());
+
+  Object.entries(additionalParams).forEach(([key, value]: any) => {
+    formData.append(key, value);
+  });
+
+  const response = await fetch(`${baseUrl}`, {
+    method: "POST",
+    body: formData,
+    signal,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Upload failed: ${response.statusText}`);
+  }
+
+  return response.json();
+}
+
+// Main custom hook
+export function useChunkedUpload(
+  options: UseChunkedUploadOptions = {}
+): UseChunkedUploadReturn {
+  const {
+    chunkSize = 1024 * 1024, // 1MB default
+    maxConcurrentUploads = 3,
+    baseUrl = "",
+    onProgress,
+    onComplete,
+    onError,
+    additionalParams = {},
+  } = options;
+
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState<UploadProgress>({});
+  const [uploadStatus, setUploadStatus] = useState("");
+  const [abortController, setAbortController] =
+    useState<AbortController | null>(null);
+
+  const updateProgress = useCallback(
+    (fileName: string, progress: number) => {
+      setUploadProgress((prev) => ({
+        ...prev,
+        [fileName]: progress,
+      }));
+      onProgress?.(fileName, progress);
+    },
+    [onProgress]
+  );
+
+  const updateStatus = useCallback((status: string) => {
+    setUploadStatus(status);
+  }, []);
+
+  const uploadFiles = useCallback(
+    async (files: File[]) => {
+      if (files.length === 0) {
+        throw new Error("No files selected for upload.");
+      }
+
+      // Create new abort controller
+      const controller = new AbortController();
+      setAbortController(controller);
+
+      setIsUploading(true);
+      updateStatus("Processing files...");
+
+      try {
+        const processedFiles = processFiles(files, chunkSize);
+
+        // Group chunks by file
+        const fileChunks: { [key: string]: ChunkInfo[] } = {};
+        processedFiles.forEach((processedFile) => {
+          const fileName = processedFile.originalFile.name;
+          if (!fileChunks[fileName]) {
+            fileChunks[fileName] = [];
+          }
+          fileChunks[fileName].push(processedFile);
+        });
+
+        // Upload files with concurrency control
+        const fileNames = Object.keys(fileChunks);
+        const uploadPromises = fileNames.map(async (fileName) => {
+          const chunks = fileChunks[fileName];
+          updateStatus(`Uploading ${fileName}...`);
+
+          try {
+            // Create semaphore for concurrent chunk uploads
+            const semaphore = new Array(maxConcurrentUploads).fill(null);
+            let chunkIndex = 0;
+            const results: UploadResult[] = [];
+
+            const uploadNextChunk = async (): Promise<void> => {
+              if (chunkIndex >= chunks.length) return;
+
+              const currentChunk = chunks[chunkIndex++];
+              const result = await uploadChunk(
+                currentChunk.file,
+                currentChunk.originalFile,
+                currentChunk.chunkIndex,
+                currentChunk.totalChunks,
+                baseUrl,
+                controller.signal,
+                additionalParams
+              );
+
+              results.push(result);
+
+              // Update progress
+              const progress = (results.length / chunks.length) * 100;
+              updateProgress(fileName, progress);
+
+              // Continue uploading if there are more chunks
+              if (chunkIndex < chunks.length) {
+                await uploadNextChunk();
+              }
+            };
+
+            // Start concurrent uploads
+            await Promise.all(semaphore.map(() => uploadNextChunk()));
+
+            // Check if file is complete
+            const completeResult = results.find((r) => r.status === "complete");
+            if (completeResult) {
+              updateStatus(`${fileName} uploaded successfully!`);
+              onComplete?.(fileName, completeResult);
+            }
+
+            return { fileName, success: true };
+          } catch (error) {
+            const errorObj =
+              error instanceof Error ? error : new Error(String(error));
+            updateStatus(`Failed to upload ${fileName}: ${errorObj.message}`);
+            onError?.(fileName, errorObj);
+            return { fileName, success: false, error: errorObj };
+          }
+        });
+
+        const results = await Promise.all(uploadPromises);
+
+        const successCount = results.filter((r) => r.success).length;
+        const failCount = results.length - successCount;
+
+        if (failCount === 0) {
+          updateStatus("All files uploaded successfully!");
+        } else if (successCount === 0) {
+          updateStatus("All uploads failed!");
+        } else {
+          updateStatus(`${successCount} files uploaded, ${failCount} failed`);
+        }
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") {
+          updateStatus("Upload cancelled");
+        } else {
+          const errorMessage =
+            error instanceof Error ? error.message : String(error);
+          updateStatus(`Upload failed: ${errorMessage}`);
+        }
+      } finally {
+        setIsUploading(false);
+        setAbortController(null);
+      }
+    },
+    [
+      chunkSize,
+      maxConcurrentUploads,
+      baseUrl,
+      updateProgress,
+      updateStatus,
+      onComplete,
+      onError,
+    ]
+  );
+
+  const cancelUpload = useCallback(() => {
+    if (abortController) {
+      abortController.abort();
+      updateStatus("Cancelling upload...");
+    }
+  }, [abortController, updateStatus]);
+
+  const reset = useCallback(() => {
+    setUploadProgress({});
+    setUploadStatus("");
+    setIsUploading(false);
+    if (abortController) {
+      abortController.abort();
+      setAbortController(null);
+    }
+  }, [abortController]);
+
+  return {
+    uploadFiles,
+    isUploading,
+    uploadProgress,
+    uploadStatus,
+    cancelUpload,
+    reset,
+  };
+}
+
+// Alternative hook with simplified API for basic use cases
+export function useSimpleUpload(baseUrl?: string) {
+  const { uploadFiles, isUploading, uploadStatus } = useChunkedUpload({
+    baseUrl,
+    chunkSize: 1024 * 1024, // 1MB
+    maxConcurrentUploads: 3,
+  });
+
+  return {
+    upload: uploadFiles,
+    isUploading,
+    status: uploadStatus,
+  };
+}

package/source/globalStyle.ts

@@ -5,7 +5,7 @@ export const primary = {
 
 export const popUp = {
   "pop-up-style":
-    "w-full absolute overflow-y-auto border px-2 rounded-lg mt-[1px] scrollbar bg-white z-50 scrollbar h-auto dark:bg-black dark:text-white animate-fade-down animate-once animate-duration-200",
+    "overflow-y-auto px-2 border border-slate-200 rounded-lg scrollbar bg-white scrollbar h-auto dark:bg-black dark:text-white animate-fade-down animate-once animate-duration-200",
 };
 
 export const iconClass = {