From c0a8680a8754c0223605897950a3ea5c45177861 Mon Sep 17 00:00:00 2001
From: carlaagullosoler <cagullo@dexma.com>
Date: Tue, 2 Sep 2025 10:39:46 +0200
Subject: [PATCH] feat(drawer):add drawer component

---
 src/lib/components/Drawer/Drawer.tsx |  8 ++++++
 src/lib/components/Drawer/index.ts   |  1 +
 src/lib/components/index.ts          |  2 ++
 src/stories/Drawer.stories.tsx       | 43 ++++++++++++++++++++++++++++
 src/stories/TagSelect.stories.tsx    |  2 +-
 tests/Drawer.test.tsx                | 36 +++++++++++++++++++++++
 6 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/Drawer/Drawer.tsx
 create mode 100644 src/lib/components/Drawer/index.ts
 create mode 100644 src/stories/Drawer.stories.tsx
 create mode 100644 tests/Drawer.test.tsx

diff --git a/src/lib/components/Drawer/Drawer.tsx b/src/lib/components/Drawer/Drawer.tsx
new file mode 100644
index 00000000..e249d005
--- /dev/null
+++ b/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} />;
+};
diff --git a/src/lib/components/Drawer/index.ts b/src/lib/components/Drawer/index.ts
new file mode 100644
index 00000000..0529d646
--- /dev/null
+++ b/src/lib/components/Drawer/index.ts
@@ -0,0 +1 @@
+export * from './Drawer';
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index b9287b6f..e3e79d6e 100644
--- a/src/lib/components/index.ts
+++ b/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';
diff --git a/src/stories/Drawer.stories.tsx b/src/stories/Drawer.stories.tsx
new file mode 100644
index 00000000..e20b5065
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/src/stories/TagSelect.stories.tsx b/src/stories/TagSelect.stories.tsx
index b62fb2b1..f5bc377c 100644
--- a/src/stories/TagSelect.stories.tsx
+++ b/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',
diff --git a/tests/Drawer.test.tsx b/tests/Drawer.test.tsx
new file mode 100644
index 00000000..15643721
--- /dev/null
+++ b/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();
+    });
+});