feat: add Alert component

src/Alert/demos/Playground.tsx

@@ -0,0 +1,35 @@
+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:
+        'Info Description Info Description Info Description Info Description Info Description Info Description Info Description Info DescriptionInfo Description Info Description Info Description Info DescriptionInfo Description Info Description Info Description Info DescriptionInfo Description Info Description Info Description Info Description',
+      showIcon: true,
+      iconPlacement: {
+        options: ['top', 'center'],
+        value: 'center',
+      },
+      type: {
+        options: ['success', 'info', 'warning', 'error'],
+        value: 'info',
+      },
+      bordered: {
+        options: ['dashed', 'solid', 'none'],
+        value: 'dashed',
+      },
+      closable: false,
+      description: '',
+      banner: false,
+    },
+    { store }
+  );
+  return (
+    <StoryBook levaStore={store}>
+      <Alert {...control} />
+    </StoryBook>
+  );
+};

src/Alert/demos/index.tsx

@@ -0,0 +1,10 @@
+import { Alert } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <Alert
+      message="Info Description Info Description Info Description Info Description Info Description Info Description Info Description Info DescriptionInfo Description Info Description Info Description Info DescriptionInfo Description Info Description Info Description Info DescriptionInfo Description Info Description Info Description Info Description"
+      showIcon
+    />
+  );
+};

src/Alert/index.md

@@ -0,0 +1,30 @@
+---
+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="Info Description" showIcon />;
+};
+```
+
+<code src="./demos/index.tsx" center></code>
+
+## Playground
+
+<code src="./demos/Playground.tsx" nopadding></code>
+
+## APIs
+
+<API></API>

src/Alert/index.tsx

@@ -0,0 +1,27 @@
+import { Alert as AntdAlert, type AlertProps as AntdAlertProps } from 'antd';
+import React from 'react';
+
+import { useStyles } from './style';
+
+export interface CustomAlertProps {
+  /** position of icon */
+  iconPlacement?: 'top' | 'center';
+  /** 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 { iconPlacement = 'center', bordered = 'dashed', className, ...otherProps } = props;
+
+  const { styles, cx } = useStyles({ iconPlacement, bordered });
+
+  return <AntdAlert {...otherProps} className={cx(styles.custom, className)} />;
+};
+Alert.ErrorBoundary = AntdAlert.ErrorBoundary;
+
+export default Alert;

src/Alert/style.ts

@@ -0,0 +1,27 @@
+import { createStyles } from 'antd-style';
+
+import { CustomAlertProps } from './index';
+
+export const useStyles = createStyles(
+  ({ css }, { iconPlacement = 'center', bordered = 'dashed' }: CustomAlertProps) => {
+    return {
+      custom: css`
+        border-style: ${bordered} !important;
+        ${iconPlacement === 'center' &&
+        css`
+          display: flex;
+          align-items: center;
+        `}
+        ${iconPlacement === 'top' &&
+        css`
+          display: flex;
+          align-items: flex-start !important;
+          &-icon {
+            margin-top: 5px;
+          }
+        `}
+      `,
+    };
+  },
+  { hashPriority: 'low' }
+);

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';