Merge pull request #5 from jandiasnow-work/beta

feat: add Alert component

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>
+  );
+};

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>
+  );
+};

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>

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;

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' }
+);

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