@leav/ui 0.0.1-alpha-2 → 0.0.1-alpha-3

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/DocumentFile/DocumentFile.tsx

@@ -1,44 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {ExpandOutlined} from '@ant-design/icons';
-import {Button} from 'antd';
-import {useRef} from 'react';
-import styled from 'styled-components';
-import {IFileViewerProps} from '../_types';
-
-const FullscreenBtn = styled(Button)`
-    && {
-        position: absolute;
-        right: 0.5rem;
-        bottom: 0.5rem;
-    }
-`;
-
-function DocumentFile({fileData, fallback}: IFileViewerProps): JSX.Element {
-    const viewerRef = useRef<HTMLIFrameElement>();
-
-    if (!fileData?.whoAmI?.preview?.pdf) {
-        return fallback as JSX.Element;
-    }
-
-    const _handleFullScreen = (): void => {
-        viewerRef.current.requestFullscreen();
-    };
-
-    return (
-        <>
-            <FullscreenBtn onClick={_handleFullScreen} icon={<ExpandOutlined />} shape="circle" />
-            <iframe
-                data-testid="document-viewer"
-                ref={viewerRef}
-                src={`${fileData.whoAmI.preview.pdf}#toolbar=0`}
-                width="100%"
-                height="100%"
-                allowFullScreen
-            />
-        </>
-    );
-}
-
-export default DocumentFile;

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/DocumentFile/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import DocumentFile from './DocumentFile';
-export default DocumentFile;

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/FileModalContent.tsx

@@ -1,103 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {getFileType} from '@leav/utils';
-import styled from 'styled-components';
-import {themeVars} from '../../../../antdTheme';
-import {PreviewSize} from '../../../../constants';
-import {IFileDataWithPreviewsStatus} from '../../../../_queries/records/getFileDataQuery';
-import {RecordCard} from '../../../RecordCard';
-import {fileModalSidebarWidth, fileModalWidth} from '../_constants';
-import AudioFile from './AudioFile';
-import DocumentFile from './DocumentFile';
-import FileModalSidebar from './FileModalSidebar';
-import ImageFile from './ImageFile';
-import NoDisplayFile from './NoDisplayFile';
-import VideoFile from './VideoFile';
-
-interface IFileModalContentProps {
-    fileData: IFileDataWithPreviewsStatus;
-}
-
-const Container = styled.div`
-    height: calc(100vh - 12rem);
-    display: grid;
-    grid-template-columns: minmax(0, ${fileModalWidth - fileModalSidebarWidth}px) ${fileModalSidebarWidth}px;
-    grid-template-rows: 5rem auto;
-    grid-template-areas:
-        'title title'
-        'content sidebar';
-    overflow: hidden;
-    grid-gutter: 0;
-`;
-
-const Title = styled.div`
-    grid-area: title;
-    align-self: center;
-    font-size: 1rem;
-    padding: 1rem;
-    border-bottom: 1px solid ${themeVars.borderColor};
-`;
-
-const Content = styled.div`
-    position: relative;
-    height: calc(100vh - 17rem);
-    grid-area: content;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    padding: 1rem;
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    align-items: center;
-    justify-items: center;
-
-    .ant-image {
-        max-height: calc(100vh - 19rem);
-        border: 1px solid ${themeVars.borderLightColor};
-
-        height: fit-content;
-        img {
-            max-height: calc(100vh - 19rem);
-        }
-    }
-`;
-
-function FileModalContent({fileData}: IFileModalContentProps): JSX.Element {
-    let fileViewer;
-    const viewerProps = {
-        fileData,
-        fallback: <NoDisplayFile fileData={fileData} noPreviewMessage fallback={null} />
-    };
-
-    const fileType = getFileType(fileData?.file_name?.[0]?.value);
-
-    switch (fileType) {
-        case 'image':
-            fileViewer = <ImageFile {...viewerProps} />;
-            break;
-        case 'video':
-            fileViewer = <VideoFile {...viewerProps} />;
-            break;
-        case 'audio':
-            fileViewer = <AudioFile {...viewerProps} />;
-            break;
-        case 'document':
-            fileViewer = <DocumentFile {...viewerProps} />;
-            break;
-        default:
-            fileViewer = <NoDisplayFile fileData={fileData} fallback={null} />;
-    }
-
-    return (
-        <Container>
-            <Title data-testid="title-section">
-                <RecordCard record={fileData.whoAmI} size={PreviewSize.small} />
-            </Title>
-            <Content data-testid="content-section">{fileViewer}</Content>
-            <FileModalSidebar fileData={fileData} />
-        </Container>
-    );
-}
-
-export default FileModalContent;

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/FileModalSidebar/FileModalSidebar.tsx

@@ -1,127 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {PictureOutlined} from '@ant-design/icons';
-import {Descriptions} from 'antd';
-import {useState} from 'react';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-import {BasicButton} from '_ui/components/BasicButton';
-import {TriggerPreviewsGenerationModal} from '_ui/components/TriggerPreviewsGenerationModal';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {IFileDataWithPreviewsStatus} from '_ui/_queries/records/getFileDataQuery';
-
-interface IFileModalSidebarProps {
-    fileData: IFileDataWithPreviewsStatus;
-}
-
-const Sidebar = styled.div`
-    position: relative;
-    grid-area: sidebar;
-    background: ${themeVars.secondaryBg};
-    border-top-right-radius: 3px;
-    z-index: 1;
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-`;
-
-const Path = styled.div`
-    overflow-x: auto;
-    height: 2em;
-    white-space: nowrap;
-    background: ${themeVars.defaultBg};
-    padding: 0.5em;
-    line-height: 1em;
-    width: 135px;
-    font-family: monospace;
-`;
-
-const ActionsWrapper = styled.div`
-    padding: 0.5rem 1rem;
-    border-top: 1px solid ${themeVars.borderColor};
-    text-align: center;
-`;
-
-function FileModalSidebar({fileData}: IFileModalSidebarProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const [displayPreviewConfirm, setDisplayPreviewConfirm] = useState(false);
-
-    const _handleClickGeneratePreviews = () => {
-        setDisplayPreviewConfirm(true);
-    };
-
-    const _handleClosePreviewGenerationConfirm = () => {
-        setDisplayPreviewConfirm(false);
-    };
-
-    const summaryContent = [
-        {
-            title: t('record_summary.id'),
-            value: fileData.id
-        },
-        {
-            title: t('record_summary.label'),
-            value: fileData.whoAmI.label
-        },
-        {
-            title: t('record_summary.created_at'),
-            value: t('record_summary.created_at_value', {
-                date: fileData.created_at?.[0]?.value,
-                user: fileData.created_by?.[0]?.value.whoAmI.label,
-                interpolation: {escapeValue: false}
-            })
-        },
-        {
-            title: t('record_summary.modified_at'),
-            value: t('record_summary.modified_at_value', {
-                date: fileData.modified_at?.[0]?.value,
-                user: fileData.modified_by?.[0]?.value.whoAmI.label,
-                interpolation: {escapeValue: false}
-            })
-        },
-        {
-            title: t('file_data.path'),
-            value: <Path>{'/' + fileData.file_path?.[0]?.value}</Path>
-        }
-    ];
-
-    return (
-        <>
-            <Sidebar data-testid="sidebar-section">
-                <Descriptions layout="horizontal" column={1} style={{padding: '1rem'}}>
-                    {summaryContent.map((item, index) => {
-                        const {title, value} = item;
-
-                        return (
-                            <Descriptions.Item
-                                key={index}
-                                label={title}
-                                style={{paddingBottom: '5px'}}
-                                labelStyle={{fontWeight: 'bold', width: '50%'}}
-                            >
-                                {value}
-                            </Descriptions.Item>
-                        );
-                    })}
-                </Descriptions>
-                {!fileData.isPreviewsGenerationPending && (
-                    <ActionsWrapper>
-                        <BasicButton icon={<PictureOutlined />} onClick={_handleClickGeneratePreviews}>
-                            {t('files.generate_previews')}
-                        </BasicButton>
-                    </ActionsWrapper>
-                )}
-            </Sidebar>
-            {displayPreviewConfirm && (
-                <TriggerPreviewsGenerationModal
-                    libraryId={fileData.whoAmI.library.id}
-                    recordIds={[fileData.id]}
-                    onClose={_handleClosePreviewGenerationConfirm}
-                />
-            )}
-        </>
-    );
-}
-
-export default FileModalSidebar;

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/FileModalSidebar/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import FileModalSidebar from './FileModalSidebar';
-export default FileModalSidebar;

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/ImageFile/ImageFile.tsx

@@ -1,52 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {Image} from 'antd';
-import {icons as defaultPreviewIcons} from 'antd/lib/image/PreviewGroup';
-import {useState} from 'react';
-import styled from 'styled-components';
-import {themeVars} from '../../../../../antdTheme';
-import {ImageLoading} from '../../../../ImageLoading';
-import {IFileViewerProps} from '../_types';
-
-const PreviewImage = styled(Image)<{$loaded: boolean}>`
-    display: ${p => (p.$loaded ? 'block' : 'none')};
-`;
-function ImageFile({fileData, fallback, showTransparency = false}: IFileViewerProps): JSX.Element {
-    const imagePreviews = fileData?.whoAmI?.preview;
-    const [imageLoaded, setImageLoaded] = useState(false);
-    const [hasFailed, setHasFailed] = useState(false);
-
-    if (!imagePreviews?.huge || hasFailed) {
-        return fallback as JSX.Element;
-    }
-
-    const _handleLoad = () => {
-        setImageLoaded(true);
-    };
-
-    return (
-        <>
-            {!imageLoaded && <ImageLoading style={{height: '50%', width: '50%'}} />}
-            <PreviewImage
-                $loaded={imageLoaded}
-                src={imagePreviews.huge as string}
-                onLoad={_handleLoad}
-                onError={() => {
-                    setImageLoaded(true);
-                    setHasFailed(true);
-                }}
-                style={{background: showTransparency ? themeVars.checkerBoard : themeVars.imageDefaultBackground}} // To show transparency
-                preview={{
-                    icons: {
-                        ...defaultPreviewIcons,
-                        rotateLeft: false,
-                        rotateRight: false
-                    }
-                }}
-            />
-        </>
-    );
-}
-
-export default ImageFile;

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/ImageFile/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import ImageFile from './ImageFile';
-export default ImageFile;

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/NoDisplayFile/NoDisplayFile.tsx

@@ -1,79 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {ClockCircleOutlined, FolderOutlined, FrownOutlined} from '@ant-design/icons';
-import {getInvertColor, stringToColor} from '@leav/utils';
-import {Space, theme} from 'antd';
-import {GlobalToken} from 'antd/es/theme/interface';
-import styled from 'styled-components';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {IFileViewerProps} from '../_types';
-
-interface INoDisplayFileProps extends IFileViewerProps {
-    noPreviewMessage?: boolean;
-}
-
-const Wrapper = styled.div<{$themeToken: GlobalToken; $background: string; $color: string}>`
-    width: 80%;
-    height: 80%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-radius: ${p => p.$themeToken.borderRadius}px;
-    background-color: ${p => p.$background};
-    color: ${p => p.$color};
-`;
-
-const ExtensionWrapper = styled.div<{$isDirectory: boolean}>`
-    font-size: ${p => (p.$isDirectory ? '4em' : '7em')};
-`;
-
-const NoPreviewMessage = styled(Space)`
-    font-size: 1.2em;
-`;
-
-function NoDisplayFile({fileData, noPreviewMessage = false}: INoDisplayFileProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const fileName = fileData.file_name[0].value;
-    const extension = fileName.split('.').pop().toUpperCase();
-    const bgColor = fileData.whoAmI.color || stringToColor(fileData.whoAmI.label);
-    const fontColor = getInvertColor(bgColor);
-    const isDirectory = fileData.library.behavior === 'directories';
-    const {token} = theme.useToken();
-
-    let message;
-    if (fileData.isPreviewsGenerationPending) {
-        message = (
-            <>
-                <ClockCircleOutlined />
-                {t('file_data.previews_generation_pending')}
-            </>
-        );
-    } else if (noPreviewMessage) {
-        message = (
-            <>
-                <FrownOutlined />
-                {t('file_data.no_preview')}
-            </>
-        );
-    }
-
-    return (
-        <Wrapper $background={bgColor} $color={fontColor} $themeToken={token}>
-            <ExtensionWrapper $isDirectory={isDirectory}>
-                {isDirectory ? (
-                    <Space>
-                        <FolderOutlined />
-                        {t('file_data.directory')}
-                    </Space>
-                ) : (
-                    extension
-                )}
-            </ExtensionWrapper>
-            {message && <NoPreviewMessage>{message}</NoPreviewMessage>}
-        </Wrapper>
-    );
-}
-
-export default NoDisplayFile;

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/NoDisplayFile/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import NoDisplayFile from './NoDisplayFile';
-export default NoDisplayFile;

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/VideoFile/VideoFile.tsx

@@ -1,33 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {useState} from 'react';
-import styled from 'styled-components';
-import {IFileViewerProps} from '../_types';
-
-const VideoPlayer = styled.video`
-    max-height: 100%;
-    max-width: 100%;
-`;
-
-function VideoFile({fileData, fallback}: IFileViewerProps): JSX.Element {
-    const [hasFailed, setHasFailed] = useState(false);
-
-    if (!fileData?.whoAmI?.preview?.original || hasFailed) {
-        return fallback as JSX.Element;
-    }
-
-    return (
-        <VideoPlayer
-            controls
-            src={fileData.whoAmI.preview.original}
-            title={fileData.file_name[0].value}
-            data-testid="video-player"
-            onError={() => {
-                setHasFailed(true);
-            }}
-        />
-    );
-}
-
-export default VideoFile;

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/VideoFile/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import VideoFile from './VideoFile';
-export default VideoFile;

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/_types.ts

@@ -1,11 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {ReactNode} from 'react';
-import {IFileDataWithPreviewsStatus} from '../../../../_queries/records/getFileDataQuery';
-
-export interface IFileViewerProps {
-    fileData: IFileDataWithPreviewsStatus;
-    fallback: ReactNode;
-    showTransparency?: boolean;
-}

package/src/components/RecordPreviewWithModal/FileModal/FileModalContent/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import FileModalContent from './FileModalContent';
-export default FileModalContent;

package/src/components/RecordPreviewWithModal/FileModal/_constants.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-export const fileModalWidth = 1200;
-export const fileModalSidebarWidth = 300;

package/src/components/RecordPreviewWithModal/FileModal/index.ts

@@ -1,5 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import FileModal from './FileModal';
-export default FileModal;

package/src/components/RecordPreviewWithModal/RecordPreviewWithModal.test.tsx

@@ -1,48 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import userEvent from '@testing-library/user-event';
-import {mockRecord} from '_ui/__mocks__/common/record';
-import {themeVars} from '../../antdTheme';
-import {render, screen} from '../../_tests/testUtils';
-import RecordPreviewWithModal from './RecordPreviewWithModal';
-
-jest.mock('_ui/components/RecordPreviewWithModal/FileModal', () => {
-    return function FileModal() {
-        return <div>FileModal</div>;
-    };
-});
-
-describe('RecordPreviewWithModal', () => {
-    test('Display modal on click', async () => {
-        const previewFile = {
-            ...mockRecord.preview.file
-        };
-
-        render(<RecordPreviewWithModal label="my file" image="/my_file.jpg" previewFile={previewFile} />);
-
-        expect(screen.getByAltText('record preview')).toBeInTheDocument();
-        expect(screen.queryByText('FileModal')).not.toBeInTheDocument();
-
-        userEvent.click(screen.getByTestId('click-handler'));
-
-        expect(await screen.findByText('FileModal')).toBeInTheDocument();
-    });
-
-    test('Show checkerboard if app is in transparency mode', async () => {
-        const previewFile = {
-            ...mockRecord.preview.file
-        };
-
-        render(
-            <RecordPreviewWithModal
-                label="my file"
-                image="/my_file.jpg"
-                previewFile={previewFile}
-                showTransparency={false}
-            />
-        );
-
-        expect(screen.getByAltText('record preview')).toHaveStyle(`background: ${themeVars.checkerBoard}`);
-    });
-});

package/src/components/RecordPreviewWithModal/RecordPreviewWithModal.tsx

@@ -1,84 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-import {EyeOutlined} from '@ant-design/icons';
-import {IPreviewScalar} from '@leav/utils';
-import {useState} from 'react';
-import styled from 'styled-components';
-import {themeVars} from '../../antdTheme';
-import {EntityPreview, IEntityPreviewProps} from '../EntityPreview';
-import FileModal from './FileModal';
-
-interface IRecordPreviewWithModalProps extends Omit<IEntityPreviewProps, 'onClick'> {
-    previewFile: IPreviewScalar['file'];
-    showTransparency?: boolean;
-}
-
-const ClickHandler = styled.div`
-    position: relative;
-    cursor: pointer;
-    width: fit-content;
-    height: fit-content;
-    margin: auto;
-`;
-
-const Overlay = styled.div`
-    background: ${themeVars.secondaryBg}99; // Hexadecimal color + opacity
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: none;
-    justify-content: center;
-    align-items: center;
-    font-size: 2em;
-
-    ${ClickHandler}:hover & {
-        display: flex;
-    }
-`;
-
-function RecordPreviewWithModal({
-    previewFile,
-    imageStyle,
-    showTransparency = false,
-    ...recordPreviewProps
-}: IRecordPreviewWithModalProps): JSX.Element {
-    const [isPreviewModalOpen, setPreviewModalOpen] = useState(false);
-    const fileId = previewFile?.id;
-    const fileLibraryId = previewFile?.library;
-
-    const _handlePreviewClick = () => {
-        setPreviewModalOpen(true);
-    };
-
-    const _handleClosePreviewModal = () => setPreviewModalOpen(false);
-
-    return (
-        <>
-            <ClickHandler onClick={_handlePreviewClick} data-testid="click-handler">
-                <EntityPreview
-                    imageStyle={{
-                        background: showTransparency ? themeVars.checkerBoard : 'transparent',
-                        ...imageStyle
-                    }}
-                    {...recordPreviewProps}
-                />
-                <Overlay>
-                    <EyeOutlined />
-                </Overlay>
-            </ClickHandler>
-            {isPreviewModalOpen && (
-                <FileModal
-                    open={isPreviewModalOpen}
-                    fileId={fileId}
-                    libraryId={fileLibraryId}
-                    onClose={_handleClosePreviewModal}
-                />
-            )}
-        </>
-    );
-}
-
-export default RecordPreviewWithModal;

package/src/components/RecordPreviewWithModal/index.ts

@@ -1,4 +0,0 @@
-// Copyright LEAV Solutions 2017
-// This file is released under LGPL V3
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-export {default as RecordPreviewWithModal} from './RecordPreviewWithModal';