Merge pull request #103 from AElf-devops/feature/alert

feat: add Alert component

packages/component/src/Alert/demos/basic.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Alert } from 'aelf-design';
+
+const App: React.FC = () => {
+  return (
+    <div>
+      <Alert message="Success Text" type="success" />
+    </div>
+  );
+};
+
+export default App;

packages/component/src/Alert/demos/close.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Alert } from 'aelf-design';
+
+const App: React.FC = () => {
+  return (
+    <div>
+      <Alert message="Success Text" type="success" closable />
+    </div>
+  );
+};
+
+export default App;

packages/component/src/Alert/demos/description.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Alert } from 'aelf-design';
+import { Space } from 'antd';
+
+const App: React.FC = () => {
+  return (
+    <div>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Alert
+          message="Success Text"
+          description="Success Description Success Description Success Description"
+          type="success"
+        />
+        <Alert
+          message="Info Text"
+          description="Info Description Info Description Info Description Info Description"
+          type="info"
+        />
+        <Alert
+          message="Warning Text"
+          description="Warning Description Warning Description Warning Description Warning Description"
+          type="warning"
+        />
+        <Alert
+          message="Error Text"
+          description="Error Description Error Description Error Description Error Description"
+          type="error"
+        />
+      </Space>
+    </div>
+  );
+};
+
+export default App;

packages/component/src/Alert/demos/errorBoundary.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Alert, Button } from 'aelf-design';
+
+const { ErrorBoundary } = Alert;
+const ThrowError: React.FC = () => {
+  const [error, setError] = useState<Error>();
+  const onClick = () => {
+    setError(new Error('An Uncaught Error'));
+  };
+
+  if (error) {
+    throw error;
+  }
+  return (
+    <Button danger onClick={onClick}>
+      Click me to throw a error
+    </Button>
+  );
+};
+
+const App: React.FC = () => (
+  <ErrorBoundary>
+    <ThrowError />
+  </ErrorBoundary>
+);
+
+export default App;

packages/component/src/Alert/demos/icon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Alert } from 'aelf-design';
+import { Space } from 'antd';
+
+const App: React.FC = () => {
+  return (
+    <div>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Alert message="Success Text" type="success" showIcon />
+        <Alert message="Info Text" type="info" showIcon />
+        <Alert message="Warning Text" type="warning" showIcon />
+        <Alert message="Error Text" type="error" showIcon />
+      </Space>
+    </div>
+  );
+};
+
+export default App;

packages/component/src/Alert/demos/type.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Alert } from 'aelf-design';
+import { Space } from 'antd';
+
+const App: React.FC = () => {
+  return (
+    <div>
+      <Space direction="vertical" style={{ width: '100%' }}>
+        <Alert message="Success Text" type="success" />
+        <Alert message="Info Text" type="info" />
+        <Alert message="Warning Text" type="warning" />
+        <Alert message="Error Text" type="error" />
+      </Space>
+    </div>
+  );
+};
+
+export default App;

packages/component/src/Alert/index.md

@@ -0,0 +1,70 @@
+---
+nav: Components
+group:
+  title: Display
+  order: 3
+---
+
+# Alert
+
+customize padding and colors
+
+## Basic Usage
+
+<code src="./demos/basic.tsx"></code>
+
+## Closable
+
+<code src="./demos/close.tsx"></code>
+
+## Types
+
+<code src="./demos/type.tsx"></code>
+
+## With Icon
+
+<code src="./demos/icon.tsx"></code>
+
+## With Description
+
+<code src="./demos/description.tsx"></code>
+
+## ErrorBoundary
+
+<code src="./demos/errorBoundary.tsx"></code>
+
+## Token
+
+```js
+<AELFDProvider
+  theme={{
+    components:{
+      Alert: {
+        defaultPadding: '9px 12px',
+        withDescriptionPadding: '24px 24px',
+        colorIcon: appearance === 'dark' ? '#FFFFFF' : '#101114',
+        colorError: appearance === 'dark' ? '#D43939' : '#F53F3F',
+        colorErrorBg: appearance === 'dark' ? '#361F1F' : '#FEE8E8',
+        colorErrorBorder: appearance === 'dark' ? '#952626' : '#FFBFBF',
+        colorInfo: appearance === 'dark' ? '#1370DD' : '#127FFF',
+        colorInfoBg: appearance === 'dark' ? '#192737' : '#E2F0FF',
+        colorInfoBorder: appearance === 'dark' ? '#0A4D9C' : '#ACD2FF',
+        colorSuccess: appearance === 'dark' ? '#04A039' : '#00B73E',
+        colorSuccessBg: appearance === 'dark' ? '#172E1F' : '#E6F8EC',
+        colorSuccessBorder: appearance === 'dark' ? '#007026' : '#96E2B0',
+        colorWarning: appearance === 'dark' ? '#DD8604' : '#FF9900',
+        colorWarningBg: appearance === 'dark' ? '#372A17' : '#FFF3E0',
+        colorWarningBorder: appearance === 'dark' ? '#9C5D00' : '#FFD596',
+      },
+    }
+  }}
+>
+```
+
+## Supported Token
+
+refer to [Alert Token](https://ant.design/components/alert-cn#design-token)
+
+## Supported API
+
+refer to [Alert API](https://ant.design/components/alert-cn#api)

packages/component/src/Alert/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AlertProps, Alert as AntdAlert } from 'antd';
+
+export interface IAlertProps extends AlertProps {}
+
+const InternalAlert = (props: IAlertProps) => {
+  return <AntdAlert {...props} />;
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  InternalAlert.displayName = 'Alert';
+}
+
+type ComputedAlert = typeof InternalAlert & {
+  ErrorBoundary: typeof AntdAlert.ErrorBoundary;
+};
+
+const Alert = InternalAlert as ComputedAlert;
+Alert.ErrorBoundary = AntdAlert.ErrorBoundary;
+export default Alert;

packages/component/src/Alert/style/index.ts

@@ -0,0 +1,9 @@
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ css }) => {
+  return {
+    AlertWrap: css``,
+  };
+});
+
+export default useStyles;

packages/component/src/index.tsx

@@ -54,6 +54,8 @@ export type { SwitchProps } from './Switch';
 
 export { default as Tag } from './Tag';
 export type { TagProps } from './Tag';
+export { default as Alert } from './Alert';
+export type { IAlertProps } from './Alert';
 
 export { default as useResponsive } from './hooks/useResponsive';
 export { default as useAWSUploadService } from './hooks/useAWSUploadService';

packages/component/src/provider.tsx

@@ -195,6 +195,24 @@ const AELFDProvider = (props: IAelfdThemeProviderProps) => {
             defaultColor: appearance === 'dark' ? '#1A1A1A' : '#ffffff',
             ...props?.theme?.components?.Tag,
           },
+          Alert: {
+            defaultPadding: '9px 12px',
+            withDescriptionPadding: '24px 24px',
+            colorIcon: appearance === 'dark' ? '#FFFFFF' : '#101114',
+            colorError: appearance === 'dark' ? '#D43939' : '#F53F3F',
+            colorErrorBg: appearance === 'dark' ? '#361F1F' : '#FEE8E8',
+            colorErrorBorder: appearance === 'dark' ? '#952626' : '#FFBFBF',
+            colorInfo: appearance === 'dark' ? '#1370DD' : '#127FFF',
+            colorInfoBg: appearance === 'dark' ? '#192737' : '#E2F0FF',
+            colorInfoBorder: appearance === 'dark' ? '#0A4D9C' : '#ACD2FF',
+            colorSuccess: appearance === 'dark' ? '#04A039' : '#00B73E',
+            colorSuccessBg: appearance === 'dark' ? '#172E1F' : '#E6F8EC',
+            colorSuccessBorder: appearance === 'dark' ? '#007026' : '#96E2B0',
+            colorWarning: appearance === 'dark' ? '#DD8604' : '#FF9900',
+            colorWarningBg: appearance === 'dark' ? '#372A17' : '#FFF3E0',
+            colorWarningBorder: appearance === 'dark' ? '#9C5D00' : '#FFD596',
+            ...props?.theme?.components?.Alert,
+          },
         };
         const baseToken = {
           screenXXLMin: 1441,