feat: add Drawer component

src/Drawer/demos/Playground.tsx

@@ -0,0 +1,44 @@
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import type { DrawerProps } from '@yuntijs/ui';
+import { Drawer } from '@yuntijs/ui';
+
+export default () => {
+  const store = useCreateStore();
+  const control: DrawerProps | any = useControls(
+    {
+      open: true,
+      extra: 'extra',
+      footer: 'A panel that slides out from the edge of the screen.',
+      title: 'YuntiUI Drawer',
+      width: 378,
+      height: 378,
+      placement: {
+        options: ['top', 'right', 'left', 'bootom'],
+        value: 'right',
+      },
+      size: {
+        options: ['default', 'large'],
+        value: 'default',
+      },
+      closeIconPlacement: {
+        options: ['right', 'left', 'auto'],
+        value: 'right',
+      },
+      mask: true,
+      maskClosable: true,
+      autoFocus: true,
+      destroyOnClose: false,
+      forceRender: false,
+      keyboard: true,
+      zIndex: 1000,
+      children:
+        '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.',
+    },
+    { store }
+  );
+  return (
+    <StoryBook levaStore={store}>
+      <Drawer open={true} {...control} getContainer={false} />
+    </StoryBook>
+  );
+};

src/Drawer/demos/index.tsx

@@ -0,0 +1,40 @@
+import { Button, Drawer, Flex } from '@yuntijs/ui';
+import React, { useState } from 'react';
+
+export default () => {
+  const [open, setOpen] = useState(false);
+
+  const showDrawer = () => {
+    setOpen(true);
+  };
+
+  const onClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button onClick={showDrawer} type="primary">
+        Open
+      </Button>
+      <Drawer
+        extra={<Button>Action</Button>}
+        footer={
+          <Flex gap={16} justify="flex-end">
+            <Button>取消</Button>
+            <Button type="primary">确定</Button>
+          </Flex>
+        }
+        onClose={onClose}
+        open={open}
+        title="YuntiUI Drawer"
+      >
+        <p>
+          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.
+        </p>
+      </Drawer>
+    </div>
+  );
+};

src/Drawer/index.md

@@ -0,0 +1,65 @@
+---
+nav: Components
+group: Feedback
+title: Drawer
+description: A panel that slides out from the edge of the screen.
+---
+
+## Usage
+
+based on antd [Drawer](https://ant.design/components/drawer-cn/) component.
+
+### Simple usage
+
+```jsx | pure
+import { Button, Drawer, Flex, Space } from '@yuntijs/ui';
+import React, { useState } from 'react';
+
+export default () => {
+  const [open, setOpen] = useState(false);
+
+  const showDrawer = () => {
+    setOpen(true);
+  };
+
+  const onClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Button type="primary" onClick={showDrawer}>
+        Open
+      </Button>
+      <Drawer
+        title="YuntiUI Drawer"
+        onClose={onClose}
+        open={open}
+        extra={<Button>Action</Button>}
+        footer={
+          <Flex justify="flex-end" gap={16}>
+            <Button>取消</Button>
+            <Button type="primary">确定</Button>
+          </Flex>
+        }
+      >
+        <p>
+          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.
+        </p>
+      </Drawer>
+    </div>
+  );
+};
+```
+
+<code src="./demos/index.tsx" center></code>
+
+## Playground
+
+<code src="./demos/Playground.tsx" nopadding></code>
+
+## APIs
+
+<API></API>

src/Drawer/index.tsx

@@ -0,0 +1,24 @@
+import { Drawer as AntdDrawer, type DrawerProps as AntdDrawerProps } from 'antd';
+import React from 'react';
+
+import { useStyles } from './style';
+
+interface CustomDrawerProps {
+  /**
+   * @description The placement of the close icon
+   * @default 'right'
+   */
+  closeIconPlacement?: 'left' | 'right' | 'auto';
+}
+
+export interface DrawerProps extends AntdDrawerProps, CustomDrawerProps {}
+
+export const Drawer: React.FC<DrawerProps> = props => {
+  const { className, ...otherProps } = props;
+
+  const { styles, cx } = useStyles(otherProps);
+
+  return <AntdDrawer {...otherProps} className={cx(styles.custom, className)} />;
+};
+
+export default Drawer;

src/Drawer/style.ts

@@ -0,0 +1,33 @@
+import { createStyles } from 'antd-style';
+
+import { DrawerProps } from './index';
+
+export const useStyles = createStyles(
+  ({ css, prefixCls }, { closeIcon, closeIconPlacement, extra }: DrawerProps) => {
+    const rightCloseIconStyle = css`
+      .${prefixCls}-drawer-header-title {
+        flex-direction: row-reverse;
+      }
+      .${prefixCls}-drawer-close {
+        flex-direction: row-reverse;
+        margin-right: -10px !important;
+      }
+      ${!(closeIcon === null || closeIcon === false) &&
+      css`
+        .${prefixCls}-drawer-extra {
+          position: absolute;
+          right: 45px;
+        }
+      `}
+    `;
+    return {
+      custom: css`
+        ${(!closeIconPlacement ||
+          closeIconPlacement === 'right' ||
+          (closeIconPlacement === 'auto' && !extra)) &&
+        rightCloseIconStyle}
+      `,
+    };
+  },
+  { hashPriority: 'low' }
+);

src/index.ts

@@ -10,6 +10,7 @@ export * from './Alert';
 export * from './Card';
 export * from './Descriptions';
 export * from './Divider';
+export * from './Drawer';
 
 // ~ antd
 export {
@@ -45,6 +46,12 @@ export {
   type ColProps, // @todo center style
   DatePicker,
   type DatePickerProps,
+  Dropdown,
+  type DropDownProps,
+  Flex,
+  type FlexProps,
+  Space,
+  type SpaceProps,
 } from 'antd';
 
 // ~ @lobehub/ui