From 07095b7a6969f799c1fd0eacf0fec9f2f2ee2c3a Mon Sep 17 00:00:00 2001
From: carlaagullosoler <cagullo@dexma.com>
Date: Mon, 15 Sep 2025 13:14:21 +0200
Subject: [PATCH] feat(upload): Add Upload Component

---
 src/lib/components/Upload/Upload.tsx | 14 ++++++++++++
 src/lib/components/Upload/index.ts   |  1 +
 src/lib/components/index.ts          |  1 +
 src/stories/Upload.stories.tsx       | 29 ++++++++++++++++++++++++
 tests/Upload.test.tsx                | 33 ++++++++++++++++++++++++++++
 5 files changed, 78 insertions(+)
 create mode 100644 src/lib/components/Upload/Upload.tsx
 create mode 100644 src/lib/components/Upload/index.ts
 create mode 100644 src/stories/Upload.stories.tsx
 create mode 100644 tests/Upload.test.tsx

diff --git a/src/lib/components/Upload/Upload.tsx b/src/lib/components/Upload/Upload.tsx
new file mode 100644
index 00000000..f1cf429f
--- /dev/null
+++ b/src/lib/components/Upload/Upload.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Upload as AntdUpload } from 'antd';
+import { withDataId } from '@components/DataId/withDataId';
+
+type UploadProps = React.ComponentProps<typeof AntdUpload>;
+
+const Wrapped = withDataId((props: UploadProps) => {
+    return <AntdUpload {...props} />;
+}, 'upload');
+
+export const Upload = Object.assign(Wrapped, {
+    Dragger: AntdUpload.Dragger,
+    LIST_IGNORE: AntdUpload.LIST_IGNORE,
+}) as typeof AntdUpload;
diff --git a/src/lib/components/Upload/index.ts b/src/lib/components/Upload/index.ts
new file mode 100644
index 00000000..70aa2067
--- /dev/null
+++ b/src/lib/components/Upload/index.ts
@@ -0,0 +1 @@
+export * from './Upload';
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index e3e79d6e..b98bcd73 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -40,6 +40,7 @@ export * from './SwitchPeriodComparative';
 export * from './Select';
 export * from './DatePicker';
 export * from './Tree';
+export * from './Upload';
 export * from './TreeSelect';
 export * from './Breadcrumb';
 export { ConfigProvider } from 'antd';
diff --git a/src/stories/Upload.stories.tsx b/src/stories/Upload.stories.tsx
new file mode 100644
index 00000000..85da9def
--- /dev/null
+++ b/src/stories/Upload.stories.tsx
@@ -0,0 +1,29 @@
+import { Cell } from '@components/Cell';
+import { Grid } from '@components/Grid';
+import { Paragraph } from '@components/Paragraph';
+import { Row } from '@components/Row';
+import { Button, Upload as UploadComp } from '@components';
+
+export default {
+    title: 'Upload',
+    component: UploadComp,
+    tags: ['autodocs'],
+};
+
+export const Upload = () => (
+    <Grid fluid>
+        <Row>
+            <Cell xs={12}>
+                <Paragraph margin='1rem 0 1rem 0'>Upload is a straight port of Antd upload</Paragraph>
+            </Cell>
+            <Cell xs={12}>
+                <UploadComp style={{ width: '100%' }}>
+                    <Button text='Click to Upload' />
+                </UploadComp>
+            </Cell>
+            <UploadComp.Dragger>
+                <div style={{ padding: '12px' }}>This one you can drag files into </div>
+            </UploadComp.Dragger>
+        </Row>
+    </Grid>
+);
diff --git a/tests/Upload.test.tsx b/tests/Upload.test.tsx
new file mode 100644
index 00000000..3893887e
--- /dev/null
+++ b/tests/Upload.test.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Upload } from '@components';
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('antd', async () => {
+    const actual: typeof import('antd') = await vi.importActual('antd');
+
+    const UploadMock = vi.fn(({ children, ...rest }: any) => (
+        <div data-testid='mocked-upload' data-props={JSON.stringify(rest)}>
+            {children}
+        </div>
+    ));
+
+    return {
+        ...actual,
+        Upload: UploadMock,
+    };
+});
+describe('Upload', () => {
+    it('should render Ant Design Upload with the given props', () => {
+        const { getByTestId, getByText } = render(
+            <Upload>
+                <span>content</span>
+            </Upload>
+        );
+
+        const drawer = getByTestId('mocked-upload');
+        expect(drawer).toBeInTheDocument();
+
+        expect(getByText('content')).toBeInTheDocument();
+    });
+});