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

package/src/components/AttributesSelectionList/SelectedAttributesList/SelectedAttribute/SelectedAttribute.tsx

@@ -1,69 +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 {CloseOutlined, HolderOutlined} from '@ant-design/icons';
-import {localizedTranslation} from '@leav/utils';
-import {Button, Space} from 'antd';
-import styled from 'styled-components';
-import {useLang} from '_ui/hooks';
-import {ISelectedAttribute} from '_ui/types/attributes';
-import {AttributesSelectionListActionTypes} from '../../reducer/attributesSelectionListReducer';
-import {useAttributesSelectionListState} from '../../reducer/attributesSelectionListStateContext';
-import {SmallText, TextAttribute} from '../../sharedComponents';
-
-interface ISelectedAttributeProps {
-    selectedAttribute: ISelectedAttribute;
-    handleProps: any;
-}
-
-const DragHandle = styled.div`
-    border-right: 1px solid #f0f0f0;
-    padding: 0.5em;
-    display: flex;
-    align-items: center;
-`;
-
-const Content = styled(Space)`
-    padding: 0.5em;
-    flex-grow: 1;
-`;
-
-const CloseWrapper = styled.div`
-    padding: 8px;
-`;
-
-const SelectedAttribute = ({selectedAttribute, handleProps}: ISelectedAttributeProps) => {
-    const {lang} = useLang();
-    const {dispatch} = useAttributesSelectionListState();
-
-    const label = localizedTranslation(selectedAttribute.label, lang);
-
-    const _handleUnselectAttribute = () => {
-        dispatch({
-            type: AttributesSelectionListActionTypes.TOGGLE_ATTRIBUTE_SELECTION,
-            attribute: selectedAttribute
-        });
-    };
-
-    return (
-        <>
-            <DragHandle {...handleProps}>
-                <HolderOutlined />
-            </DragHandle>
-
-            <Content direction="vertical">
-                <TextAttribute>{label ?? selectedAttribute.id}</TextAttribute>
-                {label && (
-                    <div>
-                        <SmallText>{selectedAttribute.id}</SmallText>
-                    </div>
-                )}
-            </Content>
-            <CloseWrapper>
-                <Button icon={<CloseOutlined />} size="small" onClick={_handleUnselectAttribute} />
-            </CloseWrapper>
-        </>
-    );
-};
-
-export default SelectedAttribute;

package/src/components/AttributesSelectionList/SelectedAttributesList/SelectedAttribute/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 SelectedAttribute from './SelectedAttribute';
-export default SelectedAttribute;

package/src/components/AttributesSelectionList/SelectedAttributesList/SelectedAttributesList.tsx

@@ -1,96 +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 {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd';
-import styled from 'styled-components';
-import {infosCol} from '_ui/components/LibraryItemsList/constants';
-import {AttributesSelectionListActionTypes} from '../reducer/attributesSelectionListReducer';
-import {useAttributesSelectionListState} from '../reducer/attributesSelectionListStateContext';
-import SelectedAttribute from './SelectedAttribute/SelectedAttribute';
-
-const WrapperItemSelected = styled.div`
-    overflow-y: auto;
-    height: calc(100vh - 15rem);
-
-    &&& > *:first-child {
-        margin-top: 0;
-    }
-
-    &&& > *:last-child {
-        margin-bottom: 0;
-    }
-`;
-
-const CustomCard = styled.div`
-    &&& {
-        padding: 0;
-        margin: 0 10px 10px 10px;
-        display: flex;
-        justify-content: space-between;
-        border: 1px solid #f0f0f0;
-        border-radius: 2px;
-        min-height: 3rem;
-        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
-        background: #fff;
-    }
-`;
-
-function SelectedAttributesList(): JSX.Element {
-    const {state, dispatch} = useAttributesSelectionListState();
-
-    const selection = state.selectedAttributes;
-
-    const _onDragEnd = result => {
-        if (!result.destination) {
-            return;
-        }
-
-        if (result.destination.index === result.source.index) {
-            return;
-        }
-
-        dispatch({
-            type: AttributesSelectionListActionTypes.MOVE_SELECTED_ATTRIBUTE,
-            from: result.source.index,
-            to: result.destination.index
-        });
-    };
-
-    return (
-        <WrapperItemSelected>
-            <DragDropContext onDragEnd={_onDragEnd}>
-                <Droppable droppableId="list-attributes-selected">
-                    {provided => (
-                        <div ref={provided.innerRef} {...provided.droppableProps}>
-                            {selection.map(
-                                (selectedAttribute, index) =>
-                                    selectedAttribute.path !== infosCol && (
-                                        <Draggable
-                                            key={selectedAttribute.path}
-                                            index={index}
-                                            draggableId={selectedAttribute.path}
-                                        >
-                                            {dragProvided => (
-                                                <CustomCard
-                                                    ref={dragProvided.innerRef}
-                                                    {...dragProvided.draggableProps}
-                                                >
-                                                    <SelectedAttribute
-                                                        selectedAttribute={selectedAttribute}
-                                                        handleProps={dragProvided.dragHandleProps}
-                                                    />
-                                                </CustomCard>
-                                            )}
-                                        </Draggable>
-                                    )
-                            )}
-                            {provided.placeholder}
-                        </div>
-                    )}
-                </Droppable>
-            </DragDropContext>
-        </WrapperItemSelected>
-    );
-}
-
-export default SelectedAttributesList;

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

package/src/components/AttributesSelectionList/_types.ts

@@ -1,16 +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 {
-    AttributesByLibAttributeFragment,
-    AttributesByLibAttributeLinkAttributeFragment,
-    AttributesByLibAttributeTreeAttributeFragment
-} from '_ui/_gqlTypes';
-
-export interface ICommonAttributeComponentProps {
-    attribute: AttributesByLibAttributeFragment;
-    library: string;
-    path: string;
-    depth: number;
-    parentAttribute?: AttributesByLibAttributeLinkAttributeFragment | AttributesByLibAttributeTreeAttributeFragment;
-}

package/src/components/AttributesSelectionList/helpers/attributeToSelectedAttribute.ts

@@ -1,11 +0,0 @@
-import pick from 'lodash/pick';
-import {ISelectedAttribute} from '_ui/types/attributes';
-import {AttributesByLibAttributeFragment} from '_ui/_gqlTypes';
-
-export const attributeToSelectedAttribute = (
-    attribute: AttributesByLibAttributeFragment,
-    otherProps: Pick<ISelectedAttribute, 'path' | 'library' | 'parentAttributeData' | 'embeddedFieldData'>
-): ISelectedAttribute => ({
-    ...pick(attribute, ['id', 'label', 'format', 'type', 'multiple_values']),
-    ...otherProps
-});

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

package/src/components/AttributesSelectionList/reducer/__mocks__/attributesSelectionListStateContext.ts

@@ -1,10 +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 {mockSelectedAttributeA} from '../../../../__mocks__/common/attribute';
-import {initialState} from '../attributesSelectionListReducer';
-
-export const useAttributesSelectionListState = () => ({
-    state: {...initialState, selectedAttributes: [mockSelectedAttributeA]},
-    dispatch: jest.fn()
-});

package/src/components/AttributesSelectionList/reducer/attributesSelectionListReducer.test.tsx

@@ -1,202 +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 {mockSelectedAttributeA, mockSelectedAttributeB, mockSelectedAttributeC} from '_ui/__mocks__/common/attribute';
-import attributeSelectionListReducer, {
-    AttributesSelectionListAction,
-    AttributesSelectionListActionTypes,
-    IAttributesSelectionListState,
-    initialState
-} from './attributesSelectionListReducer';
-
-describe('attributesSelectionListReducer', () => {
-    const state: IAttributesSelectionListState = {
-        ...initialState
-    };
-
-    describe('TOGGLE_ATTRIBUTE_SELECTION', () => {
-        const action: AttributesSelectionListAction = {
-            type: AttributesSelectionListActionTypes.TOGGLE_ATTRIBUTE_SELECTION,
-            attribute: mockSelectedAttributeA
-        };
-
-        test('Select new attribute', async () => {
-            expect(
-                attributeSelectionListReducer(state, {
-                    ...action
-                }).selectedAttributes
-            ).toEqual([mockSelectedAttributeA]);
-        });
-
-        test('Unselect attribute', async () => {
-            expect(
-                attributeSelectionListReducer(
-                    {...state, selectedAttributes: [mockSelectedAttributeA]},
-                    {
-                        ...action
-                    }
-                ).selectedAttributes
-            ).toEqual([]);
-        });
-
-        test('Select attribute, not multiple', async () => {
-            expect(
-                attributeSelectionListReducer(
-                    {...state, multiple: false, selectedAttributes: [mockSelectedAttributeA]},
-                    {
-                        ...action,
-                        attribute: mockSelectedAttributeB
-                    }
-                ).selectedAttributes
-            ).toEqual([mockSelectedAttributeB]);
-        });
-
-        test('Unselect attribute, not multiple', async () => {
-            expect(
-                attributeSelectionListReducer(
-                    {...state, multiple: false, selectedAttributes: [mockSelectedAttributeA]},
-                    {
-                        ...action
-                    }
-                ).selectedAttributes
-            ).toEqual([]);
-        });
-    });
-
-    describe('TOGGLE_ATTRIBUTE', () => {
-        const action: AttributesSelectionListAction = {
-            type: AttributesSelectionListActionTypes.TOGGLE_ATTRIBUTE_EXPAND,
-            attributePath: ''
-        };
-
-        test('Expand attribute', async () => {
-            expect(
-                attributeSelectionListReducer(state, {
-                    ...action,
-                    attributePath: 'A'
-                }).expandedAttributePath
-            ).toBe('A');
-
-            expect(
-                attributeSelectionListReducer(
-                    {...state, expandedAttributePath: 'A'},
-                    {
-                        ...action,
-                        attributePath: 'B'
-                    }
-                ).expandedAttributePath
-            ).toBe('B');
-
-            expect(
-                attributeSelectionListReducer(
-                    {...state, expandedAttributePath: 'A'},
-                    {
-                        ...action,
-                        attributePath: 'A.B'
-                    }
-                ).expandedAttributePath
-            ).toBe('A.B');
-
-            expect(
-                attributeSelectionListReducer(
-                    {...state, expandedAttributePath: 'A.B'},
-                    {
-                        ...action,
-                        attributePath: 'D'
-                    }
-                ).expandedAttributePath
-            ).toBe('D');
-        });
-
-        test('Collapse attribute', async () => {
-            expect(
-                attributeSelectionListReducer(
-                    {...state, expandedAttributePath: 'A'},
-                    {
-                        ...action,
-                        attributePath: 'A'
-                    }
-                ).expandedAttributePath
-            ).toBe('');
-
-            expect(
-                attributeSelectionListReducer(
-                    {...state, expandedAttributePath: 'A.B'},
-                    {
-                        ...action,
-                        attributePath: 'A.B'
-                    }
-                ).expandedAttributePath
-            ).toBe('A');
-
-            expect(
-                attributeSelectionListReducer(
-                    {...state, expandedAttributePath: 'A.B.C'},
-                    {
-                        ...action,
-                        attributePath: 'A.B'
-                    }
-                ).expandedAttributePath
-            ).toBe('A');
-
-            expect(
-                attributeSelectionListReducer(
-                    {...state, expandedAttributePath: 'A.B.C'},
-                    {
-                        ...action,
-                        attributePath: 'A.B.C'
-                    }
-                ).expandedAttributePath
-            ).toBe('A.B');
-        });
-    });
-
-    describe('MOVE_SELECTED_ATTRIBUTE', () => {
-        const action: AttributesSelectionListAction = {
-            type: AttributesSelectionListActionTypes.MOVE_SELECTED_ATTRIBUTE,
-            from: 0,
-            to: 1
-        };
-
-        const stateWithSelection = {
-            ...state,
-            selectedAttributes: [mockSelectedAttributeA, mockSelectedAttributeB, mockSelectedAttributeC]
-        };
-
-        test('Move a selected attribute', async () => {
-            expect(
-                attributeSelectionListReducer(stateWithSelection, {
-                    ...action
-                }).selectedAttributes
-            ).toEqual([mockSelectedAttributeB, mockSelectedAttributeA, mockSelectedAttributeC]);
-        });
-
-        test('Handle destination above selection length', async () => {
-            expect(
-                attributeSelectionListReducer(stateWithSelection, {
-                    ...action,
-                    to: 42
-                }).selectedAttributes
-            ).toEqual([mockSelectedAttributeB, mockSelectedAttributeC, mockSelectedAttributeA]);
-        });
-
-        test('Handle destination below 0', async () => {
-            expect(
-                attributeSelectionListReducer(stateWithSelection, {
-                    ...action,
-                    from: 1,
-                    to: -42
-                }).selectedAttributes
-            ).toEqual([mockSelectedAttributeB, mockSelectedAttributeA, mockSelectedAttributeC]);
-        });
-
-        test('Handle invalid source (index not existing)', async () => {
-            expect(
-                attributeSelectionListReducer(stateWithSelection, {
-                    ...action,
-                    from: 42
-                }).selectedAttributes
-            ).toEqual([mockSelectedAttributeA, mockSelectedAttributeB, mockSelectedAttributeC]);
-        });
-    });
-});

package/src/components/AttributesSelectionList/reducer/attributesSelectionListReducer.tsx

@@ -1,118 +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 {ISelectedAttribute} from '_ui/types/attributes';
-import {AttributesByLibAttributeFragment} from '_ui/_gqlTypes';
-import {reorder} from '_ui/_utils';
-
-export interface IAttributesSelectionListState {
-    library: string;
-    multiple: boolean;
-    canExpandExtendedAttributes: boolean;
-    expandedAttributePath: string;
-    attributes: AttributesByLibAttributeFragment[];
-    selectedAttributes: ISelectedAttribute[];
-}
-
-export enum AttributesSelectionListActionTypes {
-    SET_ATTRIBUTES = 'SET_ATTRIBUTES',
-    TOGGLE_ATTRIBUTE_SELECTION = 'TOGGLE_ATTRIBUTE_SELECTION',
-    TOGGLE_ATTRIBUTE_EXPAND = 'TOGGLE_ATTRIBUTE_EXPAND',
-    MOVE_SELECTED_ATTRIBUTE = 'MOVE_SELECTED_ATTRIBUTE'
-}
-
-export type AttributesSelectionListAction =
-    | {
-          type: AttributesSelectionListActionTypes.SET_ATTRIBUTES;
-          attributes: AttributesByLibAttributeFragment[];
-      }
-    | {
-          type: AttributesSelectionListActionTypes.TOGGLE_ATTRIBUTE_EXPAND;
-          attributePath: string;
-      }
-    | {
-          type: AttributesSelectionListActionTypes.TOGGLE_ATTRIBUTE_SELECTION;
-          attribute: ISelectedAttribute;
-      }
-    | {
-          type: AttributesSelectionListActionTypes.MOVE_SELECTED_ATTRIBUTE;
-          from: number;
-          to: number;
-      };
-
-export const initialState: IAttributesSelectionListState = {
-    library: '',
-    multiple: true,
-    canExpandExtendedAttributes: true,
-    selectedAttributes: [],
-    expandedAttributePath: '',
-    attributes: []
-};
-
-const attributeSelectionListReducer = (
-    state: IAttributesSelectionListState,
-    action: AttributesSelectionListAction
-): IAttributesSelectionListState => {
-    switch (action.type) {
-        case AttributesSelectionListActionTypes.SET_ATTRIBUTES: {
-            return {...state, attributes: action.attributes};
-        }
-        case AttributesSelectionListActionTypes.TOGGLE_ATTRIBUTE_EXPAND: {
-            const newState = {...state};
-
-            // If toggled attribute's path is in expanded attribute path, go back up to its parent.
-            // Otherwise, expand given attribute path
-            if (state.expandedAttributePath.indexOf(action.attributePath) === 0) {
-                newState.expandedAttributePath = action.attributePath.split('.').slice(0, -1).join('.');
-            } else {
-                newState.expandedAttributePath = action.attributePath;
-            }
-
-            return newState;
-        }
-        case AttributesSelectionListActionTypes.TOGGLE_ATTRIBUTE_SELECTION: {
-            let newSelection = [...state.selectedAttributes];
-            const existingIndex = state.selectedAttributes.findIndex(a => a.path === action.attribute.path);
-            if (state.multiple) {
-                if (existingIndex === -1) {
-                    newSelection = [...newSelection, action.attribute];
-                } else {
-                    newSelection = [...newSelection.slice(0, existingIndex), ...newSelection.slice(existingIndex + 1)];
-                }
-            } else {
-                newSelection = existingIndex === -1 ? [action.attribute] : [];
-            }
-
-            return {
-                ...state,
-                selectedAttributes: newSelection
-            };
-        }
-        case AttributesSelectionListActionTypes.MOVE_SELECTED_ATTRIBUTE: {
-            let newSelection = [...state.selectedAttributes];
-            let {from, to} = action;
-
-            if (!newSelection[from]) {
-                return state;
-            }
-
-            if (to > newSelection.length - 1) {
-                to = newSelection.length - 1;
-            }
-
-            if (from < 0) {
-                from = 0;
-            }
-
-            newSelection = reorder(newSelection, from, to);
-
-            return {
-                ...state,
-                selectedAttributes: newSelection
-            };
-        }
-    }
-};
-
-export default attributeSelectionListReducer;

package/src/components/AttributesSelectionList/reducer/attributesSelectionListStateContext.ts

@@ -1,16 +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 React, {Dispatch, useContext} from 'react';
-import {
-    AttributesSelectionListAction,
-    IAttributesSelectionListState,
-    initialState
-} from './attributesSelectionListReducer';
-
-export const AttributesSelectionListStateContext = React.createContext<{
-    state: IAttributesSelectionListState;
-    dispatch: Dispatch<AttributesSelectionListAction>;
-}>({state: initialState, dispatch: () => initialState});
-
-export const useAttributesSelectionListState = () => useContext(AttributesSelectionListStateContext);

package/src/components/AttributesSelectionList/sharedComponents.tsx

@@ -1,18 +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 from 'styled-components';
-
-export const TextAttribute = styled.span`
-    color: hsl(0, 0%, 13%);
-    font-weight: 700;
-`;
-
-export const SmallText = styled.span`
-    color: hsl(0, 0%, 45%);
-    font-weight: 400;
-`;
-
-export const CustomForm = styled.form`
-    width: 100%;
-`;

package/src/components/BasicButton/BasicButton.test.tsx

@@ -1,14 +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 '../../_tests/testUtils';
-import BasicButton from './BasicButton';
-
-describe('BasicButton', () => {
-    test('Render test', async () => {
-        render(<BasicButton>My Button</BasicButton>);
-
-        expect(screen.getByRole('button')).toBeInTheDocument();
-        expect(screen.getByText('My Button')).toBeInTheDocument();
-    });
-});

package/src/components/BasicButton/BasicButton.tsx

@@ -1,36 +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 {Button, ButtonProps} from 'antd';
-import styled from 'styled-components';
-import {themeVars} from '../../antdTheme';
-
-const StyledBtn = styled(Button)<{$bordered?: boolean; $centered?: boolean}>`
-    && {
-        color: ${themeVars.secondaryTextColor};
-        box-shadow: none;
-        &,
-        &:hover,
-        &[disabled] {
-            background: transparent;
-        }
-        text-align: ${p => (p.$centered ? 'center' : 'left')};
-
-        ${props => (!props.$bordered ? '&, &:hover {border: 0;}' : '')}
-    }
-`;
-
-interface IBasicButtonProps extends ButtonProps {
-    bordered?: boolean;
-    centered?: boolean;
-}
-
-function BasicButton({children, bordered, centered, ...props}: IBasicButtonProps): JSX.Element {
-    return (
-        <StyledBtn {...props} $bordered={bordered} $centered={centered}>
-            {children}
-        </StyledBtn>
-    );
-}
-
-export default BasicButton;

package/src/components/BasicButton/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 BasicButton} from './BasicButton';