kelt-ui-kit-react 1.2.6 → 1.2.7

package/dist/toaster/store/useToasterStore.d.ts

@@ -6,6 +6,7 @@ type ToasterState = {
     children?: React.ReactNode;
     visible: boolean;
     duration: number;
+    close?: boolean;
     showToast: (title: string, options?: {
         description?: string;
         severity?: "info" | "success" | "error" | "warning";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/App.tsx

@@ -6,12 +6,14 @@ import { AppMenu } from "./App.menu";
 import { AppRoutes } from "./App.routes";
 import { Header } from "./header/Header";
 import { OverlayProvider } from "./overlayPanel/overlay.context";
+import { Toaster } from "./toaster/Toaster";
 
 const App: React.FC = () => (
   <StrictMode>
     <OverlayProvider>
       <Router>
         <div className="main-layout">
+          <Toaster />
           <Header />
           <div className="d-flex h-100">
             <AppMenu />

package/src/index.css

@@ -6,7 +6,7 @@
   --quaternary-color: #0082ad;
   --success-color: #28a745;
   --info-color: #17a2b8;
-  --warning-color: #ffc107;
+  --warning-color: #ec942c;
   --danger-color: #dc3545;
   --light-color: #f8f9fa;
   --dark-color: #343a40;

package/src/toaster/Toaster.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import ReactDOM from "react-dom";
 import { Icon } from "../icon/Icon";
 import { useToasterStore } from "./store/useToasterStore";
@@ -13,8 +13,11 @@ export const Toaster = () => {
     children,
     duration,
     hideToast,
+    close,
   } = useToasterStore();
-
+  const onClose = useCallback(() => {
+    hideToast();
+  }, [hideToast]);
   useEffect(() => {
     if (!visible) return;
     const timer = setTimeout(() => {
@@ -30,6 +33,11 @@ export const Toaster = () => {
 
   return ReactDOM.createPortal(
     <div className={`toaster toaster-${severity}`}>
+      {close && (
+        <div className="toaster--close" onClick={onClose}>
+          <Icon classIcon="bi-x" />
+        </div>
+      )}
       <div>
         {severity === "info" && <Icon classIcon="bi-info-circle" />}
         {severity === "success" && <Icon classIcon="bi-check-circle" />}

package/src/toaster/Toaster.view.tsx

@@ -1,3 +1,24 @@
+import { useCallback } from "react";
+import { Button } from "../button/Button";
+import { useToasterStore } from "./store/useToasterStore";
+
 export const ToasterView = (): JSX.Element => {
-  return <div></div>;
+  const { showToast } = useToasterStore();
+  const handleClickToast = useCallback(() => {
+    showToast("This is a toast message", {
+      description: "This is a description for the toast message.",
+      severity: "warning",
+      duration: 10000,
+      children: <div>Additional content can go here.</div>,
+    });
+  }, [showToast]);
+  return (
+    <div>
+      <Button
+        title="Show Toast"
+        onClick={handleClickToast}
+        className="btn btn-primary"
+      />
+    </div>
+  );
 };

package/src/toaster/store/useToasterStore.tsx

@@ -7,6 +7,7 @@ type ToasterState = {
   children?: React.ReactNode;
   visible: boolean;
   duration: number;
+  close?: boolean;
   showToast: (
     title: string,
     options?: {
@@ -25,6 +26,7 @@ export const useToasterStore = create<ToasterState>((set) => ({
   severity: "info",
   visible: false,
   duration: 2500,
+  close: true,
   children: null,
   showToast: (title, options = {}) =>
     set(() => ({

package/src/toaster/toaster.css

@@ -11,17 +11,47 @@
   width: 300px;
   border-radius: 4px;
   border: 1px solid #dede;
+  .toaster--close {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    color: #333;
+    cursor: pointer;
+    .bi {
+      font-size: 1.2rem;
+    }
+  }
   &.toaster-info {
     border-color: #004aad66;
+    .toaster--close {
+      bi {
+        color: #004aad;
+      }
+    }
   }
   &.toaster-success {
     border-color: #28a7458c;
+    .toaster--close {
+      .bi {
+        color: #28a745;
+      }
+    }
   }
   &.toaster-warning {
-    border-color: #ffc1078f;
+    border-color: #ec942c;
+    .toaster--close {
+      bi {
+        color: #ec942c;
+      }
+    }
   }
   &.toaster-error {
     border-color: #dc35457d;
+    .toaster--close {
+      bi {
+        color: #dc3545;
+      }
+    }
   }
   .title {
     font-weight: 500;