feat: add notification warning (#76)

* feat: add warning notification * chore: bump stable version
goto · Jan 6, 2025 · f9a005a · f9a005a
1 parent b07c38f
commit f9a005a
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 4 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
     "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true,
-    "version": "0.11.3",
+    "version": "0.11.4",
     "command": {
         "version": {
             "message": "chore(release): publish %s"

diff --git a/packages/apsara-icons/package.json b/packages/apsara-icons/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/icons",
-    "version": "0.11.3",
+    "version": "0.11.4",
     "description": "Apsara icons",
     "scripts": {
         "build": "node scripts/build.js",

diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@goto-company/apsara",
-    "version": "0.11.3",
+    "version": "0.11.4",
     "description": "A list of base components for apsara",
     "author": "Praveen Yadav <[email protected]>",
     "license": "Apache-2.0",

diff --git a/packages/apsara-ui/src/Notification/Notification.stories.tsx b/packages/apsara-ui/src/Notification/Notification.stories.tsx
@@ -17,7 +17,7 @@ export const notifications = () => {
 };
 
 const _Notifications = () => {
-    const { showError, showNotification, showSuccess } = useNotification();
+    const { showError, showNotification, showSuccess, showWarning } = useNotification();
 
     return (
         <div style={{ display: "flex" }}>
@@ -35,6 +35,13 @@ const _Notifications = () => {
             >
                 show Error
             </Button>
+            <Button
+                onClick={() => {
+                    showWarning("warning", "this is a test warning");
+                }}
+            >
+                show Warning
+            </Button>
             <Button
                 onClick={() => {
                     showNotification({

diff --git a/packages/apsara-ui/src/Notification/Notification.tsx b/packages/apsara-ui/src/Notification/Notification.tsx
@@ -24,6 +24,7 @@ export interface Notifier {
     showNotification: (notification: Notification) => void;
     showSuccess: (title: string, content?: string) => void;
     showError: (title: string, content?: string) => void;
+    showWarning: (title: string, content?: string) => void;
 }
 
 export const useNotification = () => {
@@ -70,11 +71,27 @@ export const NotificationProvider = ({ children }: any) => {
         [setNotifications],
     );
 
+    const showWarning = useCallback(
+        (title: string, content?: string) => {
+            setNotifications((prevNotifications) => [
+                ...prevNotifications,
+                {
+                    title: title,
+                    content: content,
+                    id: uuid(),
+                    icon: <Icon name="error" color="orange" size={32} />,
+                },
+            ]);
+        },
+        [setNotifications],
+    );
+
     const contextValue = useMemo(
         () => ({
             showNotification,
             showSuccess,
             showError,
+            showWarning,
         }),
         [showNotification, showSuccess, showError],
     );
@@ -120,6 +137,7 @@ const NotificationContext = createContext<Notifier>({
     showNotification: (_notification: Notification) => {},
     showSuccess: (_title: string, _content?: string) => {},
     showError: (_title: string, _content?: string) => {},
+    showWarning: (_title: string, _content?: string) => {},
 });
 
 const uuid = () => {