gbs-add-block 0.0.41 → 0.0.42

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.41)
+# GBS Building Blocks 2.0 (v0.0.42)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +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 0.0.41)
+## What's New 🎉 (Ver 0.0.42)
 
-- Refactored Code Better Readability
+- Refactored Code for Better Readability and removed dependency for Toast
 
 ## Authors
 

package/package.json

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

package/source/components/toast/ToastComponent.tsx

@@ -0,0 +1,149 @@
+import React, { useEffect } from "react";
+import { Toast } from "./types";
+import { useToastStore } from "./toastStore";
+
+interface ToastProps {
+  toast: Toast;
+}
+
+const bgColors = {
+  default: "bg-white hover:bg-gray-50",
+  success: "bg-green-50 hover:bg-green-100",
+  error: "bg-red-50 hover:bg-red-100",
+  warning: "bg-yellow-50 hover:bg-yellow-100",
+} as const;
+
+const iconColors = {
+  default: "text-gray-800",
+  success: "text-green-600",
+  error: "text-red-600",
+  warning: "text-yellow-600",
+} as const;
+
+const CloseButton = ({ onDismiss }: { onDismiss: () => void }) => (
+  <button
+    onClick={onDismiss}
+    className="shrink-0 rounded-lg p-1 transition-colors hover:bg-black/5 focus:outline-none focus:ring-2 focus:ring-black/10"
+  >
+    <svg
+      className="h-4 w-4"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M6 18L18 6M6 6l12 12"
+      />
+    </svg>
+  </button>
+);
+
+const ToastIcon = ({ type }: { type: Toast["type"] }) => {
+  if (!type) return null;
+
+  return (
+    <div className={`h-5 w-5 ${iconColors[type]}`}>
+      {type === "success" && (
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M5 13l4 4L19 7"
+          />
+        </svg>
+      )}
+      {type === "error" && (
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      )}
+      {type === "warning" && (
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+      )}
+    </div>
+  );
+};
+
+export function ToastComponent({ toast }: ToastProps) {
+  const { dismiss } = useToastStore();
+  const handleDismiss = () => dismiss(toast.id);
+
+  useEffect(() => {
+    if (toast.duration !== 0) {
+      const timer = setTimeout(() => {
+        handleDismiss();
+      }, toast.duration || 5000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [toast.id, toast.duration]);
+
+  if (toast.content) {
+    return (
+      <div className="relative">
+        {toast.content}
+        <div className="absolute top-2 right-2">
+          <CloseButton onDismiss={handleDismiss} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`
+        ${bgColors[toast.type || "default"]}
+        transform transition-all duration-300 ease-in-out
+        pointer-events-auto relative flex w-full items-center justify-between
+        overflow-hidden rounded-lg border p-4 shadow-lg
+      `}
+      role="alert"
+    >
+      <div className="flex items-start gap-3 w-full">
+        <ToastIcon type={toast.type} />
+        <div className="flex-1">
+          {toast.title && (
+            <div className="font-medium text-sm text-gray-900">
+              {toast.title}
+            </div>
+          )}
+          {toast.description && (
+            <div className="text-sm text-gray-500 mt-1">
+              {toast.description}
+            </div>
+          )}
+        </div>
+        {toast.action}
+        <CloseButton onDismiss={handleDismiss} />
+      </div>
+    </div>
+  );
+}

package/source/components/toast/index.tsx

@@ -1,36 +1,42 @@
-/**
- * Copyright (c) Grampro Business Services and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+"use client";
 
-import React from "react";
-import { useToastContext } from "./ToastContext";
-import Toast from "./Toast";
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
 import { ToastPosition } from "./types";
+import { useToastStore } from "./toastStore";
+import { ToastComponent } from "./ToastComponent";
 
-interface ToastsProps {
+const positions: Record<ToastPosition, string> = {
+  "top-right": "top-4 right-4",
+  "top-left": "top-4 left-4",
+  "top-center": "top-4 left-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+};
+
+export function Toaster({
+  position = "top-right",
+}: {
   position?: ToastPosition;
-}
+}) {
+  const [mounted, setMounted] = React.useState(false);
+  const { toasts } = useToastStore();
 
-const positionClasses: Record<ToastPosition, string> = {
-  "top-left": "top-0 left-0",
-  "top-right": "top-0 right-0",
-  "bottom-left": "bottom-0 left-0",
-  "bottom-right": "bottom-0 right-0",
-};
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
-export const Toasts: React.FC<ToastsProps> = ({ position = "top-right" }) => {
-  const { toasts } = useToastContext();
+  if (!mounted) return null;
 
-  return (
-    <section
-      className={`fixed flex flex-col z-50 p-4 ${positionClasses[position]}`}
+  return createPortal(
+    <div
+      className={`fixed z-50 flex flex-col gap-2 w-full max-w-[420px] ${positions[position]}`}
     >
       {toasts.map((toast) => (
-        <Toast key={toast.id} toast={toast} />
+        <ToastComponent key={toast.id} toast={toast} />
       ))}
-    </section>
+    </div>,
+    document.body
   );
-};
+}

package/source/components/toast/toastStore.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { Toast } from "./types";
+
+type ToastState = {
+  toasts: Toast[];
+  add: (toast: Omit<Toast, "id">) => void;
+  dismiss: (id: string) => void;
+};
+
+let listeners: Array<(state: ToastState) => void> = [];
+let state: ToastState = {
+  toasts: [],
+  add: (toast) => {
+    const id = Math.random().toString(36).slice(2);
+    state.toasts = [{ ...toast, id }, ...state.toasts];
+    emitChange();
+  },
+  dismiss: (id) => {
+    state.toasts = state.toasts.filter((t) => t.id !== id);
+    emitChange();
+  },
+};
+
+function emitChange() {
+  for (let listener of listeners) {
+    listener(state);
+  }
+}
+
+export function useToastStore(): ToastState {
+  const [, setUpdate] = React.useState({});
+
+  React.useEffect(() => {
+    const listener = () => setUpdate({});
+    listeners.push(listener);
+    return () => {
+      listeners = listeners.filter((l) => l !== listener);
+    };
+  }, []);
+
+  return state;
+}

package/source/components/toast/types.ts

@@ -1,28 +1,18 @@
-import { ReactNode } from "react";
-
-export type ToastType = "success" | "error" | "info";
-
-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 ToastType = "default" | "success" | "error" | "warning";
 export type ToastPosition =
-  | "top-left"
   | "top-right"
+  | "top-left"
+  | "top-center"
+  | "bottom-right"
   | "bottom-left"
-  | "bottom-right";
+  | "bottom-center";
+
+export interface Toast {
+  id: string;
+  type?: ToastType;
+  duration?: number;
+  content?: React.ReactNode;
+  title?: string;
+  description?: string;
+  action?: React.ReactNode;
+}

package/source/components/toast/useToast.ts

@@ -1,28 +1,12 @@
-import { ToastOptions } from "./types";
-import { useToastContext } from "./ToastContext";
+import { Toast } from "./types";
+import { useToastStore } from "./toastStore";
 
-const useToast = () => {
-  const { addToast, dismissToast } = useToastContext();
+export function useToast() {
+  const store = useToastStore();
 
   return {
-    addToast: ({
-      title,
-      message,
-      type = "info",
-      dismissible = false,
-      timeout = 3000,
-      action,
-    }: ToastOptions) =>
-      addToast({
-        title,
-        message,
-        type,
-        dismissible,
-        timeout,
-        action,
-      }),
-    dismissToast,
+    toast: (props: Omit<Toast, "id">) => store.add(props),
+    dismiss: store.dismiss,
+    toasts: store.toasts,
   };
-};
-
-export default useToast;
+}

package/source/components/toast/Toast.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-import { Toast as ToastType } from "./types";
-import { useToastContext } from "./ToastContext";
-import Icon from "../icon/Icon";
-import { circleCheck, info, x, xCircle } from "../icon/iconPaths";
-
-interface ToastProps {
-  toast: ToastType;
-}
-
-const Toast: React.FC<ToastProps> = ({ toast }) => {
-  const { dismissToast } = useToastContext();
-  const icons = {
-    success: (
-      <Icon
-        elements={circleCheck}
-        svgClass="h-4 w-4 stroke-green-500 fill-none dark:stroke-white"
-      />
-    ),
-    error: (
-      <Icon
-        elements={xCircle}
-        svgClass="h-4 w-4 stroke-red-500 fill-none dark:stroke-white"
-      />
-    ),
-    info: (
-      <Icon
-        elements={info}
-        svgClass="h-4 w-4 stroke-blue-500 fill-none dark:stroke-white"
-      />
-    ),
-  };
-
-  return (
-    <div
-      className={`bg-white px-2 py-3 rounded-lg text-sm flex justify-between w-full m-2 border shadow-lg ${
-        toast.type === "success"
-          ? "text-green-500"
-          : toast.type === "error"
-          ? "text-red-500"
-          : "text-blue-500"
-      }`}
-      role="alert"
-    >
-      <div className="flex gap-2 items-center">
-        {icons[toast.type]}
-        <div>{toast.message}</div>
-      </div>
-      {toast.dismissible && (
-        <button onClick={() => dismissToast(toast.id)}>
-          <Icon
-            elements={x}
-            svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
-          />
-        </button>
-      )}
-    </div>
-  );
-};
-
-export default Toast;

package/source/components/toast/ToastContext.tsx

@@ -1,43 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-import { Toast } from "./types";
-
-interface ToastContextProps {
-  toasts: Toast[];
-  addToast: (toast: Omit<Toast, "id">) => void;
-  dismissToast: (id: number) => void;
-}
-
-const ToastContext = createContext<ToastContextProps | undefined>(undefined);
-
-export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const [toasts, setToasts] = useState<Toast[]>([]);
-
-  const addToast = (toast: Omit<Toast, "id">) => {
-    const id = Math.floor(Math.random() * 10000);
-    const newToast = { ...toast, id };
-    setToasts((prev) => [newToast, ...prev]);
-    if (toast.timeout) {
-      setTimeout(() => dismissToast(id), toast.timeout);
-    }
-  };
-
-  const dismissToast = (id: number) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  };
-
-  return (
-    <ToastContext.Provider value={{ toasts, addToast, dismissToast }}>
-      {children}
-    </ToastContext.Provider>
-  );
-};
-
-export const useToastContext = (): ToastContextProps => {
-  const context = useContext(ToastContext);
-  if (!context) {
-    throw new Error("useToastContext must be used within a ToastProvider");
-  }
-  return context;
-};