feat(drawer):add drawer component

src/lib/components/Drawer/Drawer.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Drawer as AntdDrawer, DrawerProps as AntdDrawerProps } from 'antd';
+
+export type DrawerProps = AntdDrawerProps;
+
+export const Drawer: React.FC<DrawerProps> = (props) => {
+    return <AntdDrawer {...props} />;
+};

src/lib/components/Drawer/index.ts

@@ -0,0 +1 @@
+export * from './Drawer';

src/lib/components/index.ts

@@ -11,6 +11,7 @@ export * from './Checkbox';
 export * from './ColorPicker';
 export * from './Divider';
 export * from './Dots';
+export * from './Drawer';
 export * from './Dropdown';
 export * from './FieldGroup';
 export * from './FormControl';
@@ -27,6 +28,7 @@ export * from './Section';
 export * from './Result';
 export * from './Row';
 export * from './Tag';
+export * from './TagSelect';
 export * from './Tabs';
 export * from './TagGroup';
 export * from './Table';

src/stories/Drawer.stories.tsx

@@ -0,0 +1,43 @@
+import { Button, Cell, Drawer, DrawerProps, Grid, Paragraph, Row } from '@components';
+import { useState } from 'react';
+
+export default {
+    title: 'Drawer',
+    component: Drawer,
+    tags: ['autodocs'],
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Basic = (args: DrawerProps) => {
+    const [open, setOpen] = useState(false);
+    return (
+        <Grid fluid>
+            <Row>
+                <Cell xs={12}>
+                    <Paragraph margin='1rem 0 1rem 0'>Drawer component to have a side panel. Component is a 1:1 port from AntD Component.</Paragraph>
+                </Cell>
+                <Cell xs={12} style={{ height: '50px' }}>
+                    <Button
+                        onClick={() => {
+                            setOpen(!open);
+                        }}
+                        kind='button'
+                        text='Try me'
+                    />
+                    <Drawer
+                        {...args}
+                        open={open}
+                        title='Basic Drawer'
+                        onClose={() => {
+                            setOpen(false);
+                        }}
+                    >
+                        <p>Some contents...</p>
+                        <p>Some contents...</p>
+                        <p>Some contents...</p>
+                    </Drawer>
+                </Cell>
+            </Row>
+        </Grid>
+    );
+};

src/stories/TagSelect.stories.tsx

@@ -2,7 +2,7 @@ import { Cell } from '@components/Cell';
 import { Grid } from '@components/Grid';
 import { Paragraph } from '@components/Paragraph';
 import { Row } from '@components/Row';
-import { TagSelect as TagSelectComp } from '@components/TagSelect';
+import { TagSelect as TagSelectComp } from '@components';
 
 export default {
     title: 'TagSelect',

tests/Drawer.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Drawer } from '@components';
+import { describe, expect, it, vi } from 'vitest';
+
+// mock Ant Design's Drawer
+vi.mock('antd', async () => {
+    const actual: typeof import('antd') = await vi.importActual('antd');
+
+    const DrawerMock = vi.fn(({ children, ...rest }: any) => (
+        <div data-testid='mocked-drawer' data-props={JSON.stringify(rest)}>
+            {children}
+        </div>
+    ));
+
+    return {
+        ...actual,
+        Drawer: DrawerMock,
+    };
+});
+describe('Drawer', () => {
+    it('should render Ant Design Drawer with the given props', () => {
+        const { getByTestId, getByText } = render(
+            <Drawer open title='My title'>
+                <span>content</span>
+            </Drawer>
+        );
+
+        // Verify that the mocked Drawer is rendered
+        const drawer = getByTestId('mocked-drawer');
+        expect(drawer).toBeInTheDocument();
+
+        // Verify that the children are rendered
+        expect(getByText('content')).toBeInTheDocument();
+    });
+});