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

package/src/components/LibraryItemsList/Sidebar/Sidebar.test.tsx

@@ -1,66 +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 {SidebarContentType} from '_ui/types/search';
-import {act, render, screen} from '_ui/_tests/testUtils';
-import {SearchContext} from '../hooks/useSearchReducer/searchContext';
-import {initialSearchState} from '../hooks/useSearchReducer/searchReducer';
-import Sidebar from './Sidebar';
-
-jest.mock(
-    '../FiltersPanel',
-    () =>
-        function FiltersPanel() {
-            return <div>FiltersPanel</div>;
-        }
-);
-
-jest.mock(
-    '../ViewPanel',
-    () =>
-        function ViewPanel() {
-            return <div>ViewPanel</div>;
-        }
-);
-
-describe('SideItems', () => {
-    test('should have Filters', async () => {
-        await act(async () => {
-            const mockState = {
-                side: {visible: true, type: SidebarContentType.filters}
-            };
-
-            render(
-                <SearchContext.Provider
-                    value={{
-                        state: {...initialSearchState, sideBar: {visible: true, type: SidebarContentType.filters}},
-                        dispatch: jest.fn()
-                    }}
-                >
-                    <Sidebar />
-                </SearchContext.Provider>
-            );
-        });
-
-        const element = await screen.findByText('FiltersPanel');
-
-        expect(element).toBeInTheDocument();
-    });
-
-    test('should have ViewPanel', async () => {
-        render(
-            <SearchContext.Provider
-                value={{
-                    state: {...initialSearchState, sideBar: {visible: true, type: SidebarContentType.view}},
-                    dispatch: jest.fn()
-                }}
-            >
-                <Sidebar />
-            </SearchContext.Provider>
-        );
-
-        const element = await screen.findByText('ViewPanel');
-
-        expect(element).toBeInTheDocument();
-    });
-});

package/src/components/LibraryItemsList/Sidebar/Sidebar.tsx

@@ -1,71 +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 styled, {CSSObject} from 'styled-components';
-import {SidebarContentType} from '_ui/types/search';
-import FiltersPanel from '../FiltersPanel';
-import useSearchReducer from '../hooks/useSearchReducer';
-import VersionsPanel from '../VersionsPanel';
-import ViewPanel from '../ViewPanel';
-
-interface IWrapperProps {
-    $visible: boolean;
-    style?: CSSObject;
-}
-
-const Wrapper = styled.div<IWrapperProps>`
-    grid-area: side;
-    display: ${({$visible}) => ($visible ? 'flex' : 'none')};
-    position: relative;
-    height: calc(100vh - 7rem);
-    overflow: hidden;
-
-    &.wrapped-filter-open {
-        animation-name: filter-animation-open;
-        animation-duration: 1s;
-        animation-timing-function: ease;
-    }
-
-    @keyframes filter-animation-open {
-        from {
-            opacity: 0;
-        }
-
-        to {
-            opacity: 1;
-        }
-    }
-
-    &.wrapped-filter-close {
-        animation-name: filter-animation-close;
-        animation-duration: 1s;
-        animation-timing-function: ease-out;
-    }
-
-    @keyframes filter-animation-close {
-        from {
-            /* transform: translate(0); */
-            opacity: 1;
-        }
-
-        to {
-            /* transform: translate(-50rem); */
-            opacity: 0;
-        }
-    }
-`;
-
-function Sidebar(): JSX.Element {
-    const {state} = useSearchReducer();
-    const {visible, type} = state.sideBar;
-
-    return (
-        <Wrapper $visible={visible} className={visible ? 'wrapped-filter-open' : 'wrapped-filter-close'}>
-            {visible && type === SidebarContentType.filters && <FiltersPanel />}
-            {visible && type === SidebarContentType.view && <ViewPanel />}
-            {visible && type === SidebarContentType.versions && <VersionsPanel />}
-        </Wrapper>
-    );
-}
-
-export default Sidebar;

package/src/components/LibraryItemsList/Sidebar/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 Sidebar from './Sidebar';
-export default Sidebar;

package/src/components/LibraryItemsList/TileDisplay/ItemTileDisplay/ItemTileDisplay.test.tsx

@@ -1,40 +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 {themeVars} from '_ui/antdTheme';
-import {IItem} from '_ui/types/search';
-import {render, screen} from '_ui/_tests/testUtils';
-import MockSearchContextProvider from '_ui/__mocks__/common/mockSearchContextProvider';
-import {mockRecord} from '_ui/__mocks__/common/record';
-import ItemTileDisplay from './ItemTileDisplay';
-
-describe('ItemTileDisplay', () => {
-    const itemMock: IItem = {
-        fields: {},
-        whoAmI: {
-            ...mockRecord,
-            id: 'test'
-        },
-        index: 0
-    };
-
-    test('should call RecordPreview', async () => {
-        render(
-            <MockSearchContextProvider>
-                <ItemTileDisplay item={itemMock} />
-            </MockSearchContextProvider>
-        );
-
-        expect(screen.getByAltText('record preview')).toBeInTheDocument();
-    });
-
-    test('Show checkerboard if transparency is active', async () => {
-        render(
-            <MockSearchContextProvider state={{showTransparency: true}}>
-                <ItemTileDisplay item={itemMock} />
-            </MockSearchContextProvider>
-        );
-
-        expect(screen.getByAltText('record preview')).toHaveStyle(`background: ${themeVars.checkerBoard}`);
-    });
-});

package/src/components/LibraryItemsList/TileDisplay/ItemTileDisplay/ItemTileDisplay.tsx

@@ -1,322 +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 {CheckCircleFilled, CheckOutlined} from '@ant-design/icons';
-import {Button, Card, Space, Tooltip} from 'antd';
-import Paragraph from 'antd/lib/typography/Paragraph';
-import React, {useEffect, useState} from 'react';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-import {EntityPreview} from '_ui/components';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import DeactivateRecordBtn from '_ui/components/LibraryItemsList/shared/DeactivateRecordBtn';
-import SelectCellsBtn, {SelectCellsBtnType} from '_ui/components/LibraryItemsList/shared/SelectCellsBtn';
-import EditRecordBtn from '_ui/components/RecordEdition/EditRecordBtn';
-import {PreviewSize} from '_ui/constants';
-import useLang from '_ui/hooks/useLang';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {IItem, ISelectedRecord} from '_ui/types/search';
-import {stopEvent} from '_ui/_utils';
-import EditRecordModal from '../../../RecordEdition/EditRecordModal';
-import {displayTypeToPreviewSize} from '../../helpers/displayTypeToPreviewSize';
-import {SearchActionTypes} from '../../hooks/useSearchReducer/searchReducer';
-import getItemPreviewSize from '../helpers/getItemPreviewSize';
-
-const buttonsColor = '#333333';
-
-// Using 8 digit hexadecimal notation to add transparency
-const hoverBackgroundColor = `${themeVars.activeColor}AA`;
-const selectedBackgroundColor = `${themeVars.activeColor}DF`;
-
-const Item = styled(Card)<{$previewSize: string}>`
-    && {
-        width: ${p => p.$previewSize};
-        margin: 0.5em;
-        outline: 2px solid transparent;
-
-        & .ant-card-cover {
-            width: ${p => p.$previewSize};
-            height: ${p => p.$previewSize};
-        }
-
-        &:hover {
-            outline-color: ${themeVars.primaryColor};
-        }
-    }
-`;
-
-const ImageWrapper = styled.div`
-    position: relative;
-    border-bottom: 1px solid ${themeVars.borderLightColor};
-`;
-
-const ActionsWrapper = styled.div`
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
-    justify-content: center;
-
-    &:hover {
-        .actions {
-            animation: show-actions 300ms ease;
-            opacity: 1;
-            background: ${hoverBackgroundColor};
-        }
-    }
-
-    @keyframes show-actions {
-        from {
-            opacity: 0;
-            background: none;
-        }
-        to {
-            opacity: 1;
-            background: ${hoverBackgroundColor};
-        }
-    }
-`;
-
-const Selection = styled.div<{checked: boolean}>`
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: ${p => (p.checked ? selectedBackgroundColor : 'none')};
-
-    &:hover {
-        background: ${p => (p.checked ? selectedBackgroundColor : hoverBackgroundColor)};
-    }
-`;
-
-const SelectionActions = styled(Space)`
-    && {
-        display: none;
-        position: absolute;
-        top: 1em;
-    }
-    ${Selection}:hover & {
-        display: inherit;
-    }
-    button {
-        color: ${buttonsColor};
-        border-color: ${buttonsColor};
-    }
-`;
-
-const Actions = styled.div`
-    position: absolute;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    opacity: 0;
-    width: 100%;
-    height: 100%;
-    grid-gap: 1rem;
-
-    justify-items: center;
-    align-items: center;
-    justify-content: center;
-
-    border-radius: 0.25rem 0.25rem 0 0;
-
-    button {
-        color: ${buttonsColor};
-        border-color: ${buttonsColor}66;
-
-        // Arrange buttons, depending on their position on the grid
-        &:nth-child(1) {
-            justify-self: end;
-            align-self: end;
-        }
-        &:nth-child(2) {
-            justify-self: start;
-            align-self: end;
-        }
-        &:nth-child(3) {
-            justify-self: end;
-            align-self: start;
-        }
-        &:nth-child(4) {
-            justify-self: start;
-            align-self: start;
-        }
-    }
-`;
-
-const CheckedIconWrapper = styled.div`
-    font-size: 3em;
-    color: ${themeVars.primaryColor};
-`;
-
-interface IItemTileDisplayProps {
-    item: IItem;
-}
-
-function ItemTileDisplay({item}: IItemTileDisplayProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
-
-    const canDeleteRecord = searchState.library.permissions.delete_record;
-
-    const [editRecordModal, setEditRecordModal] = useState<boolean>(false);
-    const previewSize: PreviewSize = displayTypeToPreviewSize(searchState.display.size);
-
-    const {lang} = useLang();
-    const [isSelected, setIsSelect] = useState<boolean>(
-        !!searchState.selection.selected.some(
-            elementSelected =>
-                elementSelected.id === item.whoAmI.id && elementSelected.library === item.whoAmI.library.id
-        )
-    );
-
-    const mustShowTransparency = searchState.showTransparency;
-
-    const isAllSelected = searchState.selection.allSelected;
-
-    const selectedToggle = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-
-        setIsSelect(!isSelected);
-
-        const newSelected: ISelectedRecord = {
-            id: item.whoAmI.id,
-            library: item.whoAmI.library.id,
-            label: item.whoAmI.label
-        };
-
-        searchDispatch({
-            type: SearchActionTypes.TOGGLE_RECORD_SELECTION,
-            record: newSelected
-        });
-    };
-
-    useEffect(() => {
-        setIsSelect(
-            searchState.selection.selected.some(
-                elementSelected =>
-                    elementSelected.id === item.whoAmI.id && elementSelected.library === item.whoAmI.library.id
-            )
-        );
-    }, [searchState.selection, item, searchState]);
-
-    const _handleClose = () => {
-        setEditRecordModal(false);
-    };
-
-    const _handleSelect = e => {
-        stopEvent(e);
-        selectedToggle(e);
-    };
-
-    const isChecked = isSelected || isAllSelected;
-
-    const isSelectActive = searchState.selection.selected.length || searchState.selection.allSelected;
-
-    const itemPreviewSize = getItemPreviewSize(previewSize);
-
-    return (
-        <>
-            {editRecordModal && (
-                <EditRecordModal
-                    open={editRecordModal}
-                    record={item.whoAmI}
-                    library={item.whoAmI.library.id}
-                    onClose={_handleClose}
-                />
-            )}
-            <Item
-                $previewSize={itemPreviewSize}
-                size="small"
-                onClick={selectedToggle}
-                onDoubleClick={() => setEditRecordModal(true)}
-                cover={
-                    <ImageWrapper>
-                        <EntityPreview
-                            label={item.whoAmI.label || item.whoAmI.id}
-                            image={String(item.whoAmI.preview?.[previewSize] ?? '')}
-                            tile={true}
-                            style={{
-                                width: itemPreviewSize,
-                                height: itemPreviewSize
-                            }}
-                            placeholderStyle={{
-                                width: itemPreviewSize,
-                                height: itemPreviewSize
-                            }}
-                            imageStyle={{
-                                background: mustShowTransparency ? themeVars.checkerBoard : 'transparent'
-                            }}
-                        />
-                        <ActionsWrapper>
-                            {isChecked || isSelectActive ? (
-                                <Selection checked={isChecked}>
-                                    <SelectionActions>
-                                        <SelectCellsBtn
-                                            selectionType={SelectCellsBtnType.ONLY}
-                                            text={t('items-list-row.select-only')}
-                                            record={item.whoAmI}
-                                            size="small"
-                                        />
-                                        <SelectCellsBtn
-                                            selectionType={SelectCellsBtnType.ALL}
-                                            text={t('items-list-row.select-all')}
-                                            record={item.whoAmI}
-                                            size="small"
-                                        />
-                                    </SelectionActions>
-                                    {isChecked && (
-                                        <CheckedIconWrapper className="checked-icon">
-                                            <CheckCircleFilled />
-                                        </CheckedIconWrapper>
-                                    )}
-                                </Selection>
-                            ) : (
-                                <Actions className="actions">
-                                    <Tooltip title={t('global.select')} key="select">
-                                        <Button shape="circle" icon={<CheckOutlined />} onClick={_handleSelect} />
-                                    </Tooltip>
-                                    <Tooltip title={t('global.edit')} key="edit">
-                                        <EditRecordBtn
-                                            shape={'circle'}
-                                            record={item.whoAmI}
-                                            valuesVersion={searchState.valuesVersions}
-                                        />
-                                    </Tooltip>
-                                    {canDeleteRecord ? (
-                                        <Tooltip title={t('global.delete')} key="delete">
-                                            <DeactivateRecordBtn record={item.whoAmI} />
-                                        </Tooltip>
-                                    ) : (
-                                        // Keep this empty div for styling purpose
-                                        <div></div>
-                                    )}
-                                </Actions>
-                            )}
-                        </ActionsWrapper>
-                    </ImageWrapper>
-                }
-            >
-                <Card.Meta
-                    title={
-                        <Paragraph
-                            ellipsis={{rows: 1, tooltip: true}}
-                            style={{marginBottom: 0, fontSize: previewSize === PreviewSize.small ? '.8em' : '1em'}}
-                        >
-                            {item.whoAmI.label || item.whoAmI.id}
-                        </Paragraph>
-                    }
-                />
-            </Item>
-        </>
-    );
-}
-
-export default ItemTileDisplay;

package/src/components/LibraryItemsList/TileDisplay/ItemTileDisplay/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 ItemTileDisplay from './ItemTileDisplay';
-export default ItemTileDisplay;

package/src/components/LibraryItemsList/TileDisplay/TileDisplay.test.tsx

@@ -1,50 +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 {ISearchState} from '_ui/components/LibraryItemsList/hooks/useSearchReducer/_types';
-import {render, screen} from '_ui/_tests/testUtils';
-import MockSearchContextProvider from '_ui/__mocks__/common/mockSearchContextProvider';
-import {mockRecord} from '_ui/__mocks__/common/record';
-import TileDisplay from './TileDisplay';
-
-jest.mock(
-    '../LibraryItemsListPagination',
-    () =>
-        function LibraryItemsListPagination() {
-            return <div>LibraryItemsListPagination</div>;
-        }
-);
-
-jest.mock(
-    './ItemTileDisplay',
-    () =>
-        function ItemTileDisplay() {
-            return <div>ItemTileDisplay</div>;
-        }
-);
-
-describe('TileDisplay', () => {
-    test('Check render', async () => {
-        const mockState: Partial<ISearchState> = {
-            records: [
-                {
-                    fields: {},
-                    whoAmI: {
-                        ...mockRecord,
-                        id: 'test'
-                    },
-                    index: 0
-                }
-            ]
-        };
-
-        render(
-            <MockSearchContextProvider state={mockState}>
-                <TileDisplay />
-            </MockSearchContextProvider>
-        );
-
-        expect(screen.getByText('ItemTileDisplay')).toBeInTheDocument();
-        expect(screen.getByText('LibraryItemsListPagination')).toBeInTheDocument();
-    });
-});

package/src/components/LibraryItemsList/TileDisplay/TileDisplay.tsx

@@ -1,75 +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 {Spin} from 'antd';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-import useSearchReducer from '_ui/components/LibraryItemsList/hooks/useSearchReducer';
-import {displayTypeToPreviewSize} from '../helpers/displayTypeToPreviewSize';
-import {SearchActionTypes} from '../hooks/useSearchReducer/searchReducer';
-import LibraryItemsListPagination from '../LibraryItemsListPagination';
-import getItemPreviewSize from './helpers/getItemPreviewSize';
-import ItemTileDisplay from './ItemTileDisplay';
-
-const LoadingWrapper = styled.div`
-    height: 30rem;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-`;
-
-const Wrapper = styled.div<{$size: string}>`
-    grid-area: data;
-    height: 100%;
-    overflow-y: scroll;
-    border-radius: 0.25rem 0.25rem 0 0;
-    border-bottom: none;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(calc(${({$size: size}) => size} + 1rem), 1fr));
-    align-content: flex-start;
-`;
-
-const Footer = styled.div`
-    grid-area: pagination;
-    display: flex;
-    justify-content: space-around;
-    border: 1px solid ${themeVars.borderLightColor};
-    padding: 0.5rem;
-`;
-
-function TileDisplay(): JSX.Element {
-    const {state: searchState, dispatch: searchDispatch} = useSearchReducer();
-    const itemPreviewSize = getItemPreviewSize(displayTypeToPreviewSize(searchState.display.size));
-
-    const _handleClick = () => {
-        searchDispatch({
-            type: SearchActionTypes.SET_SELECTION,
-            selected: []
-        });
-    };
-
-    return (
-        <>
-            <Wrapper $size={itemPreviewSize} onClick={_handleClick}>
-                {searchState.loading ? (
-                    <LoadingWrapper>
-                        <Spin size="large" />
-                    </LoadingWrapper>
-                ) : (
-                    <>
-                        {searchState.records.map(record => (
-                            <ItemTileDisplay key={record.whoAmI.id} item={record} />
-                        ))}
-                    </>
-                )}
-            </Wrapper>
-
-            <Footer>
-                <LibraryItemsListPagination />
-            </Footer>
-        </>
-    );
-}
-
-export default TileDisplay;

package/src/components/LibraryItemsList/TileDisplay/helpers/getItemPreviewSize.ts

@@ -1,13 +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 {PreviewSize} from '_ui/constants';
-
-const itemPreviewSize = {
-    [PreviewSize.small]: '100px',
-    [PreviewSize.medium]: '200px',
-    [PreviewSize.big]: '300px'
-};
-
-export default (size: PreviewSize): string => itemPreviewSize[size];

package/src/components/LibraryItemsList/TileDisplay/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 TileDisplay from './TileDisplay';
-export default TileDisplay;

package/src/components/LibraryItemsList/VersionsPanel/VersionsPanel.test.tsx

@@ -1,24 +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 {render, screen} from '_ui/_tests/testUtils';
-import MockSearchContextProvider from '_ui/__mocks__/common/mockSearchContextProvider';
-import VersionsPanel from './VersionsPanel';
-
-jest.mock('_ui/components/ValuesVersionConfigurator', () => {
-    return function ValuesVersionConfigurator() {
-        return <div>ValuesVersionConfigurator</div>;
-    };
-});
-
-describe('VersionsPanel', () => {
-    test('Render test', async () => {
-        render(
-            <MockSearchContextProvider>
-                <VersionsPanel />
-            </MockSearchContextProvider>
-        );
-
-        expect(await screen.findByText(/ValuesVersionConfigurator/i)).toBeInTheDocument();
-    });
-});