From c66b6c9203a6e5ae1281c54a0b5a553780db3f32 Mon Sep 17 00:00:00 2001
From: Jandiasnow <88074479@qq.com>
Date: Mon, 8 Apr 2024 13:23:02 +0800
Subject: [PATCH] feat: add Alert component

---
 src/Alert/demos/Playground.tsx | 31 +++++++++++++++++++++++
 src/Alert/demos/index.tsx      | 46 ++++++++++++++++++++++++++++++++++
 src/Alert/index.md             | 36 ++++++++++++++++++++++++++
 src/Alert/index.tsx            | 25 ++++++++++++++++++
 src/Alert/style.ts             | 14 +++++++++++
 src/index.ts                   | 17 +++++++++++++
 6 files changed, 169 insertions(+)
 create mode 100644 src/Alert/demos/Playground.tsx
 create mode 100644 src/Alert/demos/index.tsx
 create mode 100644 src/Alert/index.md
 create mode 100644 src/Alert/index.tsx
 create mode 100644 src/Alert/style.ts

diff --git a/src/Alert/demos/Playground.tsx b/src/Alert/demos/Playground.tsx
new file mode 100644
index 0000000..13cb345
--- /dev/null
+++ b/src/Alert/demos/Playground.tsx
@@ -0,0 +1,31 @@
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import type { AlertProps } from '@yuntijs/ui';
+import { Alert } from '@yuntijs/ui';
+
+export default () => {
+  const store = useCreateStore();
+  const control: AlertProps | any = useControls(
+    {
+      message: 'YuntiUI',
+      description:
+        '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.',
+      showIcon: true,
+      type: {
+        options: ['success', 'info', 'warning', 'error'],
+        value: 'info',
+      },
+      bordered: {
+        options: ['dashed', 'solid', 'none'],
+        value: 'dashed',
+      },
+      closable: false,
+      banner: false,
+    },
+    { store }
+  );
+  return (
+    <StoryBook levaStore={store}>
+      <Alert {...control} />
+    </StoryBook>
+  );
+};
diff --git a/src/Alert/demos/index.tsx b/src/Alert/demos/index.tsx
new file mode 100644
index 0000000..8138d59
--- /dev/null
+++ b/src/Alert/demos/index.tsx
@@ -0,0 +1,46 @@
+import { Alert } from '@yuntijs/ui';
+import { Button, Space } from 'antd';
+
+export default () => {
+  return (
+    <Space direction="vertical">
+      <Alert
+        action={
+          <Button size="small" type="text">
+            UNDO
+          </Button>
+        }
+        closable
+        description="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."
+        message="YuntiUI"
+        showIcon
+        type="info"
+      />
+      <Alert
+        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."
+        showIcon
+        type="info"
+      />
+      <Alert
+        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."
+        showIcon
+        type="success"
+      />
+      <Alert
+        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."
+        showIcon
+        type="warning"
+      />
+      <Alert
+        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."
+        showIcon
+        type="error"
+      />
+    </Space>
+  );
+};
diff --git a/src/Alert/index.md b/src/Alert/index.md
new file mode 100644
index 0000000..5796eae
--- /dev/null
+++ b/src/Alert/index.md
@@ -0,0 +1,36 @@
+---
+nav: Components
+group: Feedback
+title: Alert
+description: Display warning messages that require attention.
+---
+
+## Usage
+
+based on antd [Alert](https://ant.design/components/alert-cn/) component.
+
+### Simple usage
+
+```jsx | pure
+import { Alert } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <Alert
+      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."
+      showIcon
+      type="info"
+    />
+  );
+};
+```
+
+<code src="./demos/index.tsx" center></code>
+
+## Playground
+
+<code src="./demos/Playground.tsx" nopadding></code>
+
+## APIs
+
+<API></API>
diff --git a/src/Alert/index.tsx b/src/Alert/index.tsx
new file mode 100644
index 0000000..fa88002
--- /dev/null
+++ b/src/Alert/index.tsx
@@ -0,0 +1,25 @@
+import { Alert as AntdAlert, type AlertProps as AntdAlertProps } from 'antd';
+import React from 'react';
+
+import { useStyles } from './style';
+
+export interface CustomAlertProps {
+  /** border type of Alert */
+  bordered?: 'dashed' | 'solid' | 'none';
+}
+export interface AlertProps extends AntdAlertProps, CustomAlertProps {}
+
+type ComposedAlertProps = React.FC<AlertProps> & {
+  ErrorBoundary: typeof AntdAlert.ErrorBoundary;
+};
+
+export const Alert: ComposedAlertProps = props => {
+  const { bordered = 'dashed', className, ...otherProps } = props;
+
+  const { styles, cx } = useStyles({ bordered });
+
+  return <AntdAlert {...otherProps} className={cx(styles.custom, className)} />;
+};
+Alert.ErrorBoundary = AntdAlert.ErrorBoundary;
+
+export default Alert;
diff --git a/src/Alert/style.ts b/src/Alert/style.ts
new file mode 100644
index 0000000..8cbaefe
--- /dev/null
+++ b/src/Alert/style.ts
@@ -0,0 +1,14 @@
+import { createStyles } from 'antd-style';
+
+import { CustomAlertProps } from './index';
+
+export const useStyles = createStyles(
+  ({ css }, { bordered = 'dashed' }: CustomAlertProps) => {
+    return {
+      custom: css`
+        border-style: ${bordered} !important;
+      `,
+    };
+  },
+  { hashPriority: 'low' }
+);
diff --git a/src/index.ts b/src/index.ts
index 64c1fc5..e3f8a4e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,5 +5,22 @@ export * from './MonacoEditor';
 export * from './SliderInput';
 export * from './Tree';
 
+// ~ custom antd
+export * from './Alert';
+
+// ~ antd
+export {
+  Affix,
+  type AffixProps,
+  Anchor,
+  type AnchorProps,
+  App,
+  type AppProps,
+  AutoComplete,
+  type AutoCompleteProps,
+  Avatar,
+  type AvatarProps,
+} from 'antd';
+
 // ~ antd-style
 export { useResponsive, useTheme, useThemeMode } from 'antd-style';