gbs-add-block 1.0.15 → 1.0.17

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.0.15)
+# GBS Building Blocks 2.0 (v1.0.17)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,12 +6,9 @@ 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.15)
+## What's New 🎉 (Ver 1.0.17)
 
-- Data Grid Enhancement
-- End of Support for Grid Component
-- Select Enhancement
-- Interactive mode
+- Style Update
 
 ## Authors
 

package/index.cjs

@@ -26,6 +26,7 @@ const CONFIG = {
     "Uploader",
     "FormRenderer",
     "MaterialInput",
+    "TextArea",
     "ContextMenu",
     "Navbar",
     "DataGrid",

package/package.json

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

package/source/components/textarea/index.tsx

@@ -0,0 +1,150 @@
+import React, { useState, useRef, useEffect } from "react";
+import type { TextAreaProps } from "./types";
+
+export const TextArea = ({
+  label,
+  placeholder = "Enter your text here...",
+  value,
+  onChange,
+  error,
+  helperText,
+  rows = 4,
+  maxLength,
+  required = false,
+  disabled = false,
+  variant = "default",
+  className = "",
+  ...props
+}: TextAreaProps) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [charCount, setCharCount] = useState(0);
+  const textareaRef = useRef(null);
+
+  useEffect(() => {
+    if (value) {
+      setCharCount(value.length);
+    }
+  }, [value]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    setCharCount(newValue.length);
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case "minimal":
+        return {
+          container: "relative",
+          textarea: `w-full px-0 py-3 text-gray-900 placeholder-gray-400 bg-transparent border-0 border-b-2 border-gray-200 resize-none focus:border-blue-500 focus:outline-none ${
+            disabled ? "opacity-50 cursor-not-allowed" : ""
+          }`,
+          label: `absolute left-0 transition-all duration-200 pointer-events-none ${
+            isFocused || value
+              ? "-top-6 text-sm text-blue-500"
+              : "top-3 text-base text-gray-400"
+          }`,
+        };
+      default:
+        return {
+          container: "relative",
+          textarea: `w-full px-4 py-3 text-gray-900 placeholder-gray-400 bg-white border-2 border-gray-200 rounded-lg resize-none focus:border-blue-500 focus:ring-blue-500/20 focus:outline-none transition-all duration-200 shadow-sm hover:border-gray-300 ${
+            error
+              ? "border-red-500 focus:border-red-500 focus:ring-red-500/20"
+              : ""
+          } ${disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : ""}`,
+          label: `block text-sm font-medium text-gray-700 mb-2 ${
+            required ? "after:content-['*'] after:text-red-500 after:ml-1" : ""
+          }`,
+        };
+    }
+  };
+
+  const variantClasses = getVariantClasses();
+
+  return (
+    <div className={`${variantClasses.container} ${className}`}>
+      {label && <label className={variantClasses.label}>{label}</label>}
+
+      <div className="relative">
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholder={
+            variant === "minimal" && isFocused
+              ? placeholder
+              : variant === "minimal"
+              ? ""
+              : placeholder
+          }
+          rows={rows}
+          maxLength={maxLength}
+          required={required}
+          disabled={disabled}
+          className={variantClasses.textarea}
+          {...props}
+        />
+
+        {/* Floating label for minimal variant */}
+        {variant === "minimal" && label && (
+          <label className={variantClasses.label}>{label}</label>
+        )}
+      </div>
+
+      {/* Bottom section with helper text, error, and character count */}
+      <div className="flex justify-between items-start mt-2">
+        <div className="flex-1">
+          {error && (
+            <p className="text-sm text-red-600 flex items-center">
+              <svg
+                className="w-4 h-4 mr-1 flex-shrink-0"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              {error}
+            </p>
+          )}
+          {!error && helperText && (
+            <p className="text-sm text-gray-500">{helperText}</p>
+          )}
+        </div>
+
+        {maxLength && (
+          <div className="ml-4 flex-shrink-0">
+            <span
+              className={`text-sm ${
+                charCount > maxLength * 0.9
+                  ? "text-amber-600"
+                  : charCount === maxLength
+                  ? "text-red-600"
+                  : "text-gray-400"
+              }`}
+            >
+              {charCount}/{maxLength}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/source/components/textarea/types.ts

@@ -0,0 +1,15 @@
+export interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  error?: string;
+  helperText?: string;
+  rows?: number;
+  maxLength?: number;
+  required?: boolean;
+  disabled?: boolean;
+  variant?: "default" | "minimal" | "glass";
+  className?: string;
+}

package/source/components/useUploader/useUploader.tsx

@@ -29,7 +29,7 @@ interface UseChunkedUploadOptions {
 }
 
 interface UseChunkedUploadReturn {
-  uploadFiles: (files: File[]) => Promise<void>;
+  uploadFiles: (files: File[], customParams?: any) => Promise<void>;
   isUploading: boolean;
   uploadProgress: UploadProgress;
   uploadStatus: string;
@@ -87,10 +87,17 @@ async function uploadChunk(
   formData.append("chunkIndex", chunkIndex.toString());
   formData.append("totalChunks", totalChunks.toString());
   formData.append("fileSize", originalFile.size.toString());
+  formData.append(
+    "additionalParams",
+    additionalParams ? JSON.stringify(additionalParams) : "{}"
+  );
 
-  Object.entries(additionalParams).forEach(([key, value]: any) => {
-    formData.append(key, value);
-  });
+  // If you have additional parameters to send, you can append them here
+  // Uncomment the following lines if you want to include additionalParams in the formData
+
+  // Object.entries(additionalParams).forEach(([key, value]: any) => {
+  //   formData.append(key, value);
+  // });
 
   const response = await fetch(`${baseUrl}`, {
     method: "POST",
@@ -141,7 +148,7 @@ export function useChunkedUpload(
   }, []);
 
   const uploadFiles = useCallback(
-    async (files: File[]) => {
+    async (files: File[], customParams?: any) => {
       if (files.length === 0) {
         throw new Error("No files selected for upload.");
       }
@@ -189,7 +196,7 @@ export function useChunkedUpload(
                 currentChunk.totalChunks,
                 baseUrl,
                 controller.signal,
-                additionalParams
+                { ...additionalParams, ...customParams }
               );
 
               results.push(result);

package/source/globalStyle.ts

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