feat: add Notification component

src/App/index.tsx

@@ -0,0 +1,21 @@
+import { App as AntdApp, type AppProps as AntdAppProps } from 'antd';
+import React from 'react';
+
+import { NotificationGlobalStyle } from '../notification';
+
+export type AppProps = AntdAppProps;
+
+export const App: React.FC<AppProps> & {
+  useApp: typeof AntdApp.useApp;
+} = props => {
+  const { children, ...otherProps } = props;
+  return (
+    <AntdApp {...otherProps}>
+      <NotificationGlobalStyle />
+      {children}
+    </AntdApp>
+  );
+};
+
+App.useApp = AntdApp.useApp;
+export default App;

src/index.ts

@@ -7,20 +7,20 @@ export * from './Tree';
 
 // ~ custom antd
 export * from './Alert';
+export * from './App';
 export * from './Card';
 export * from './Descriptions';
 export * from './Divider';
 export * from './Drawer';
 export * from './Modal';
+export * from './notification';
 
 // ~ antd
 export {
   Affix,
   type AffixProps,
   Anchor,
   type AnchorProps,
-  App,
-  type AppProps,
   AutoComplete,
   type AutoCompleteProps,
   Avatar,

src/notification/demos/Playground.tsx

@@ -0,0 +1,41 @@
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import { App, Button, NotificationArgsProps, notification } from '@yuntijs/ui';
+
+export default () => {
+  const store = useCreateStore();
+  const control: NotificationArgsProps | any = useControls(
+    {
+      message: 'YuntiUI nitification',
+      description: 'Prompt notification message globally.',
+      duration: 4.5,
+      key: 'notification',
+      placement: {
+        options: ['top', 'topLeft', 'topRight', 'bottom', 'bottomLeft', 'bottomRight'],
+        value: 'topRight',
+      },
+    },
+    { store }
+  );
+  return (
+    <StoryBook levaStore={store}>
+      <App>
+        <Button
+          onClick={() => {
+            notification.warnings({
+              ...control,
+              errors: [
+                {
+                  name: 'YuntiUI',
+                  message:
+                    'The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.',
+                },
+              ],
+            });
+          }}
+        >
+          Open
+        </Button>
+      </App>
+    </StoryBook>
+  );
+};

src/notification/demos/index.tsx

@@ -0,0 +1,94 @@
+import { App, Button, Space, notification } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <App>
+      <Space>
+        <Button
+          onClick={() => {
+            notification.success({
+              message: 'YuntiUI notification success',
+              description: 'Prompt notification message globally.',
+            });
+          }}
+        >
+          success
+        </Button>
+        <Button
+          onClick={() => {
+            notification.info({
+              message: 'YuntiUI notification info',
+              description: 'Prompt notification message globally.',
+            });
+          }}
+        >
+          info
+        </Button>
+        <Button
+          onClick={() => {
+            notification.warning({
+              message: 'YuntiUI notification warning',
+              description: 'Prompt notification message globally.',
+            });
+          }}
+        >
+          warning
+        </Button>
+        <Button
+          onClick={() => {
+            notification.warn({
+              message: 'YuntiUI notification warn',
+              description: 'Prompt notification message globally.',
+            });
+          }}
+        >
+          warn
+        </Button>
+        <Button
+          onClick={() => {
+            notification.error({
+              message: 'YuntiUI notification error',
+              description: 'Prompt notification message globally.',
+            });
+          }}
+        >
+          error
+        </Button>
+        <Button
+          onClick={() => {
+            notification.warnings({
+              message: 'YuntiUI notification warnings',
+              description: 'Prompt notification message globally.',
+              errors: [
+                {
+                  name: 'YuntiUI',
+                  message:
+                    'The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.',
+                },
+              ],
+            });
+          }}
+        >
+          warnings
+        </Button>
+        <Button
+          onClick={() => {
+            notification.warns({
+              message: 'YuntiUI notification warns',
+              description: 'Prompt notification message globally.',
+              errors: [
+                {
+                  name: 'YuntiUI',
+                  message:
+                    'The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.',
+                },
+              ],
+            });
+          }}
+        >
+          warns
+        </Button>
+      </Space>
+    </App>
+  );
+};

src/notification/index.md

@@ -0,0 +1,52 @@
+---
+nav: Components
+group: Feedback
+title: Notification
+description: Prompt notification message globally.
+---
+
+## Usage
+
+based on antd [Notification](https://ant.design/components/notification-cn/) component.
+
+### Simple usage
+
+**Note： Pages that use notification need to be wrapped by the app component, otherwise the notification style may be problematic**
+
+```jsx | pure
+import { App, Button, notification } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <App>
+      <Button
+        onClick={() => {
+          notification.warnings({
+            message: 'YuntiUI nitification',
+            description: 'Prompt notification message globally.',
+            errors: [
+              {
+                name: 'YuntiUI',
+                message:
+                  'The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.',
+              },
+            ],
+          });
+        }}
+      >
+        Open
+      </Button>
+    </App>
+  );
+};
+```
+
+<code src="./demos/index.tsx" center></code>
+
+## Playground
+
+<code src="./demos/Playground.tsx" nopadding></code>
+
+## APIs
+
+<API></API>