feat(file-upload-item): add component (#571)

* feat(file-upload-item): add component

* fix(file-upload-item): fix tests

* fix(file-upload-item): fix tests

* fix(file-upload-item): fix tests

packages/file-upload-item/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "@alfalab/core-components-file-upload-item",
+    "version": "1.0.0",
+    "description": "",
+    "keywords": [],
+    "license": "MIT",
+    "main": "dist/index.js",
+    "module": "./dist/esm/index.js",
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1"
+    },
+    "dependencies": {
+        "@alfalab/core-components-icon-button": "^1.1.2",
+        "@alfalab/core-components-link": "^1.6.4",
+        "@alfalab/core-components-spinner": "^1.0.5",
+        "@alfalab/icons-glyph": "^1.102.0"
+    }
+}

packages/file-upload-item/src/Component.stories.mdx

@@ -0,0 +1,108 @@
+import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
+import { text, number, select, boolean } from '@storybook/addon-knobs';
+import { ComponentHeader } from 'storybook/blocks/component-header';
+
+import { FileUploadItem } from './Component';
+
+import { version } from '../package.json';
+
+<Meta title='Компоненты' component={FileUploadItem} />
+
+<!-- Canvas -->
+
+<Story name='FileUploadItem'>
+    <div style={{ width: 500 }}>
+        <FileUploadItem
+            name={text('name', 'Довольно длинное название файла.pdf')}
+            uploadDate={text('uploadDate', '22.01.2018')}
+            downloadLink={text('downloadLink', '')}
+            error={text('error', '')}
+            size={ number('size', 500000000) }
+            uploadStatus={select('uploadStatus', ['ERROR', 'SUCCESS', 'LOADING', 'UPLOADING'], undefined)}
+            uploadPercent={number('uploadPercent', undefined)}
+            showDelete={boolean('showDelete', false)}
+            showRestore={boolean('showRestore', false)}
+        />
+    </div>
+</Story>
+
+<!-- Docs -->
+
+<ComponentHeader
+    name='FileUploadItem'
+    version={version}
+    package='@alfalab/core-components-file-upload-item'
+    stage={1}
+    design='https://www.figma.com/file/uGndMZufgvqxaNQTaNTEjG/B2B-Web-Components?node-id=9591%3A75058'
+/>
+
+```tsx
+import { FileUploadItem } from '@alfalab/core-components-file-upload-item';
+```
+
+Компонент иконки, которая запрашивается с сервера.
+
+<Preview>
+    <div>
+        <FileUploadItem
+            name='Довольно длинное название файла.pdf'
+            uploadDate='22.01.2018'
+            size={ 500000000 }
+            showDelete={false}
+            showRestore={true}
+        />
+        <FileUploadItem
+            name='Название файла.pdf'
+            uploadDate='22.01.2018'
+            size={ 45000 }
+            showDelete={true}
+        />
+        <FileUploadItem
+            name='Название файла.pdf'
+            uploadDate='22.01.2018'
+            size={ 50000000 }
+            showDelete={true}
+        />
+        <FileUploadItem
+            name='Название файла.txt'
+            uploadDate='22.01.2018'
+            size={ 45000 }
+            downloadLink='/link'
+            uploadStatus='SUCCESS'
+            showDelete={true}
+        />
+        <FileUploadItem
+            name='Название файла.jpg'
+            uploadDate='22.01.2018'
+            size={ 45000 }
+            uploadStatus='ERROR'
+            showDelete={true}
+        />
+        <FileUploadItem
+            name='Название файла.png'
+            uploadDate='22.01.2018'
+            size={ 45000 }
+            uploadStatus='UPLOADING'
+            uploadPercent={ 23.5678 }
+            showDelete={true}
+        />
+        <FileUploadItem
+            name='Название файла.pdf'
+            uploadDate='22.01.2018'
+            size={ '' }
+            uploadStatus='LOADING'
+            showDelete={false}
+            />
+        <FileUploadItem
+            name='Название файла.png'
+            uploadDate='22.01.2018'
+            size={ 450000000 }
+            uploadStatus='ERROR'
+            error='размер больше 20 МБ'
+            showDelete={false}
+        />
+    </div>
+</Preview>
+
+
+<Props of={FileUploadItem} />

packages/file-upload-item/src/Component.test.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import { FileUploadItem, FileStatuses } from './index';
+
+export const fileProps = {
+    name: 'Довольно длинное название файла.pdf',
+    uploadDate: '22.01.2018',
+    size: 45000,
+    downloadLink: '/link',
+    uploadStatus: 'SUCCESS' as FileStatuses,
+    showDelete: true,
+};
+
+describe('FileUploadItem', () => {
+    describe('Snapshots tests', () => {
+        it('should match snapshot', () => {
+            expect(render(<FileUploadItem {...fileProps} />)).toMatchSnapshot();
+        });
+    });
+
+    it('should set `data-test-id` attribute', () => {
+        const dataTestId = 'test-id';
+        const { queryByTestId } = render(<FileUploadItem dataTestId={dataTestId} />);
+
+        expect(queryByTestId(dataTestId)).toBeInTheDocument();
+    });
+
+    it('should set `className` class', () => {
+        const className = 'test-class';
+        const { container } = render(<FileUploadItem className={className} />);
+
+        expect(container.firstElementChild).toHaveClass(className);
+    });
+
+    it('should set `className` class', () => {
+        const className = 'test-class';
+        const { container } = render(<FileUploadItem className={className} />);
+
+        expect(container.firstElementChild).toHaveClass(className);
+    });
+
+    describe('Callbacks tests', () => {
+        it('should call `onDelete` prop', () => {
+            const cb = jest.fn();
+            const fileId = 'id';
+            const { getByLabelText } = render(
+                <FileUploadItem showDelete={true} onDelete={cb} id={fileId} />,
+            );
+
+            fireEvent.click(getByLabelText('удалить'));
+
+            expect(cb).toBeCalledTimes(1);
+            expect(cb.mock.calls[0][0]).toBe(fileId);
+        });
+
+        it('should call `onRestore` prop', () => {
+            const cb = jest.fn();
+            const fileId = 'id';
+            const { getByText } = render(
+                <FileUploadItem showRestore={true} onRestore={cb} id={fileId} />,
+            );
+
+            fireEvent.click(getByText('Восстановить'));
+
+            expect(cb).toBeCalledTimes(1);
+            expect(cb.mock.calls[0][0]).toBe(fileId);
+        });
+
+        it('should call `onRestore` prop', () => {
+            const cb = jest.fn();
+            const fileId = 'id';
+            const { getByText } = render(
+                <FileUploadItem {...fileProps} downloadLink='/link' onDownload={cb} id={fileId} />,
+            );
+
+            fireEvent.click(getByText(fileProps.name));
+
+            expect(cb).toBeCalledTimes(1);
+            expect(cb.mock.calls[0][0]).toBe(fileId);
+        });
+    });
+
+    it('should unmount without errors', () => {
+        const { unmount } = render(<FileUploadItem />);
+
+        expect(unmount).not.toThrowError();
+    });
+});