gbs-add-block 0.0.16 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/toast/index.tsx

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+"use client";
 import React from "react";
 import { useToastStore } from "./toastAtom";
 import Toast from "./Toast";

package/source/components/toast/types.ts

@@ -6,15 +6,19 @@ export type Toast = {
   id: number;
   type: ToastType;
   message: string | ReactNode;
+  title: string | ReactNode;
   dismissible: boolean;
   timeout: number;
+  action?: any;
 };
 
 export type ToastOptions = {
   message: string | ReactNode;
+  title?: string | ReactNode;
   type?: ToastType;
   dismissible?: boolean;
   timeout?: number;
+  action?: any;
 };
 
 export type ToastPosition =

package/source/components/toast/useToast.ts

@@ -6,16 +6,20 @@ const useToast = () => {
 
   return {
     addToast: ({
+      title,
       message,
       type = "info",
       dismissible = false,
       timeout = 3000,
+      action,
     }: ToastOptions) =>
       addToast({
+        title,
         message,
         type,
         dismissible,
         timeout,
+        action,
       }),
     dismissToast,
   };

package/source/components/uploader/ProgressAnimation.tsx

@@ -7,20 +7,28 @@
 
 import React from "react";
 
-const AestheticProcessingAnimation = () => {
+type AestheticProcessingAnimationProps = {
+  progressPercentage: number;
+};
+
+const AestheticProcessingAnimation = ({
+  progressPercentage,
+}: AestheticProcessingAnimationProps) => {
   return (
     <div className="w-full max-w-md mx-auto p-2">
       <div className="w-full h-1 bg-gray-200 rounded-full overflow-hidden">
         <div className="h-full w-1/3 bg-black rounded-full animate-processing"></div>
       </div>
       <p className="text-xs mt-2 text-center">
-        Uploading in Progress, Please Wait...
+        Uploading in Progress {Math.floor(progressPercentage)}%, Please Wait...
       </p>
     </div>
   );
 };
 
-const AestheticProcessingAnimationWithStyles = () => (
+const AestheticProcessingAnimationWithStyles = ({
+  progressPercentage,
+}: AestheticProcessingAnimationProps) => (
   <>
     <style jsx global>{`
       @keyframes processing {
@@ -35,7 +43,7 @@ const AestheticProcessingAnimationWithStyles = () => (
         animation: processing 2s ease-in-out infinite;
       }
     `}</style>
-    <AestheticProcessingAnimation />
+    <AestheticProcessingAnimation progressPercentage={progressPercentage} />
   </>
 );