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

package/src/components/List/List.tsx

@@ -1,95 +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 {List as AntdList, ListProps} from 'antd';
-import Checkbox, {CheckboxChangeEvent} from 'antd/lib/checkbox/Checkbox';
-import isEqual from 'lodash/isEqual';
-import styled from 'styled-components';
-import {themeVars} from '_ui/antdTheme';
-
-export interface IListProps<D> extends Omit<ListProps<D>, 'renderItem'> {
-    maxHeight?: number | string;
-    dataSource: D[];
-    renderItemContent?: (item: D) => JSX.Element;
-    onItemClick?: (item: D) => void;
-    selectable?: boolean;
-    selectedItems?: D[];
-    onSelectionChange?: (selectedItems: D[]) => void;
-}
-
-const Wrapper = styled.div<{$maxHeight: string}>`
-    background-color: ${themeVars.defaultBg};
-    border-radius: 5px;
-
-    .ant-list-items {
-        max-height: ${p => p.$maxHeight || 'auto'};
-        overflow-y: auto;
-    }
-`;
-
-const ListItem = styled(AntdList.Item)<{onClick: any}>`
-    cursor: ${p => (p.onClick ? 'pointer' : 'auto')};
-    && {
-        padding: 0;
-        justify-content: flex-start;
-    }
-`;
-
-const CheckboxWrapper = styled.div`
-    margin: 0 1em;
-`;
-
-function List({
-    maxHeight,
-    onItemClick,
-    renderItemContent,
-    selectable,
-    selectedItems,
-    onSelectionChange,
-    ...listProps
-}: IListProps<any>): JSX.Element {
-    const props = {
-        renderItem: item => {
-            const _handleClick = onItemClick
-                ? () => {
-                      onItemClick(item);
-                  }
-                : null;
-
-            const _handleCheck = (e: CheckboxChangeEvent) => {
-                const newSelection = [...selectedItems];
-                if (e.target.checked) {
-                    newSelection.push(item);
-                } else {
-                    newSelection.splice(newSelection.indexOf(item), 1);
-                }
-                onSelectionChange(newSelection);
-            };
-
-            return (
-                <ListItem onClick={_handleClick}>
-                    {selectable && (
-                        <CheckboxWrapper onClick={e => e.stopPropagation()}>
-                            <Checkbox
-                                checked={selectedItems.some(selectedItem => isEqual(item, selectedItem))}
-                                onChange={_handleCheck}
-                            />
-                        </CheckboxWrapper>
-                    )}
-                    {renderItemContent ? renderItemContent(item) : item}
-                </ListItem>
-            );
-        },
-        ...listProps
-    };
-
-    const wrapperMaxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : String(maxHeight);
-
-    return (
-        <Wrapper $maxHeight={wrapperMaxHeight}>
-            <AntdList {...props} />
-        </Wrapper>
-    );
-}
-
-export default List;

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

package/src/components/Loading/Loading.tsx

@@ -1,23 +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';
-
-interface ILoadingProps {
-    compact?: boolean;
-}
-
-const LoadingElem = styled(Spin)<ILoadingProps>`
-    && {
-        display: block;
-        margin: ${props => (props.compact ? '1em' : '3em')};
-        font-size: inherit;
-    }
-`;
-
-function Loading(props: ILoadingProps): JSX.Element {
-    return <LoadingElem {...props} />;
-}
-
-export default Loading;

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

package/src/components/RecordCard/RecordCard.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 '@testing-library/jest-dom';
-import 'jest-styled-components';
-import {mockRecord} from '_ui/__mocks__/common/record';
-import {PreviewSize} from '../../constants';
-import {IRecordIdentityWhoAmI} from '../../types/records';
-import {act, render, screen} from '../../_tests/testUtils';
-import RecordCard from './RecordCard';
-
-jest.mock('../EntityPreview', () => {
-    return {
-        EntityPreview: () => {
-            return <div>EntityPreview</div>;
-        }
-    };
-});
-
-describe('RecordCard', () => {
-    const mock: IRecordIdentityWhoAmI = {
-        ...mockRecord,
-        id: '12345',
-        library: {
-            ...mockRecord.library,
-            id: 'test_lib',
-            label: {fr: 'Test Lib', en: 'test lib'}
-        },
-        label: 'Test Record'
-    };
-
-    test('should display label', async () => {
-        await act(async () => {
-            render(<RecordCard record={mock} size={PreviewSize.small} />);
-        });
-
-        expect(screen.getByText(mock.label)).toBeInTheDocument();
-        expect(screen.getByText('EntityPreview')).toBeInTheDocument();
-    });
-});

package/src/components/RecordCard/RecordCard.tsx

@@ -1,64 +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 {localizedTranslation} from '@leav/utils';
-import useLang from '_ui/hooks/useLang';
-import {PreviewSize} from '../../constants';
-import {IRecordIdentityWhoAmI} from '../../types/records';
-import {EntityCard, IEntityData} from '../EntityCard';
-import {IRecordCardProps} from './_types';
-
-const _getPreviewBySize = (preview?: IRecordIdentityWhoAmI['preview'], size?: PreviewSize) => {
-    const fileSizeByPreviewSize: {[size in PreviewSize]: string} = {
-        [PreviewSize.tiny]: 'tiny',
-        [PreviewSize.small]: 'tiny',
-        [PreviewSize.medium]: 'small',
-        [PreviewSize.big]: 'medium'
-    };
-
-    const previewPath: string = (preview?.[fileSizeByPreviewSize[size]] ?? preview?.small) as string;
-
-    return previewPath ?? '';
-};
-
-const RecordCard = ({
-    record,
-    size,
-    style,
-    previewStyle,
-    lang,
-    withPreview = true,
-    withLibrary = true,
-    withColor = true,
-    tile = false,
-    simplistic = false
-}: IRecordCardProps): JSX.Element => {
-    const {lang: userLang} = useLang();
-    const label = record.label || record.id;
-    const subLabel = record.subLabel
-        ? record.subLabel
-        : localizedTranslation(record.library?.label, lang ?? userLang) || record.library?.id;
-
-    const recordIdentity: IEntityData = {
-        label,
-        subLabel,
-        preview: _getPreviewBySize(record.preview, size),
-        color: record.color
-    };
-
-    return (
-        <EntityCard
-            entity={recordIdentity}
-            style={style}
-            size={size}
-            withPreview={withPreview}
-            withSubLabel={withLibrary}
-            tile={tile}
-            simplistic={simplistic}
-            withColor={withColor}
-            previewStyle={previewStyle}
-        />
-    );
-};
-
-export default RecordCard;

package/src/components/RecordCard/_types.ts

@@ -1,19 +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 {CSSObject} from 'styled-components';
-import {PreviewSize} from '../../constants';
-import {IRecordIdentityWhoAmI} from '../../types/records';
-
-export interface IRecordCardProps {
-    record: IRecordIdentityWhoAmI;
-    size: PreviewSize;
-    style?: React.CSSProperties & CSSObject;
-    previewStyle?: React.CSSProperties & CSSObject;
-    lang?: string[];
-    withPreview?: boolean;
-    withLibrary?: boolean;
-    withColor?: boolean;
-    tile?: boolean;
-    simplistic?: boolean;
-}

package/src/components/RecordCard/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
-export {default as RecordCard} from './RecordCard';
-export * from './_types';

package/src/components/RecordEdition/EditRecord/EditRecord.test.tsx

@@ -1,137 +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 * as useGetRecordForm from '_ui/hooks/useGetRecordForm';
-import * as gqlTypes from '_ui/_gqlTypes';
-import {mockRecordForm} from '_ui/__mocks__/common/form';
-import {mockRecord} from '_ui/__mocks__/common/record';
-import {render, screen} from '../../../_tests/testUtils';
-import EditRecord from './EditRecord';
-
-jest.mock('./uiElements/StandardField', () => {
-    return function StandardField() {
-        return <div>StandardField</div>;
-    };
-});
-
-describe('EditRecord', () => {
-    const mocks = [
-        {
-            request: {
-                query: gqlTypes.RecordUpdateDocument,
-                variables: {
-                    filters: {records: ['123456'], ignoreOwnEvents: true}
-                }
-            },
-            result: {
-                data: {
-                    recordUpdate: {
-                        record: {
-                            whoAmI: {
-                                ...mockRecord
-                            },
-                            modified_by: [{value: mockRecord}]
-                        },
-                        updatedValues: []
-                    }
-                }
-            }
-        },
-        {
-            request: {
-                query: gqlTypes.GetUserDataDocument,
-                variables: {
-                    keys: ['records_consultation_record_lib']
-                }
-            },
-            result: {
-                data: {
-                    userData: {
-                        global: false,
-                        data: []
-                    }
-                }
-            }
-        },
-        {
-            request: {
-                query: gqlTypes.SaveUserDataDocument,
-                variables: {
-                    key: 'records_consultation_record_lib',
-                    value: ['123456'],
-                    global: false
-                }
-            },
-            result: {
-                data: {
-                    userData: {
-                        global: false,
-                        data: ['123465']
-                    }
-                }
-            }
-        }
-    ];
-
-    afterAll(() => {
-        jest.restoreAllMocks();
-    });
-
-    test('Display skeleton while loading', async () => {
-        jest.spyOn(useGetRecordForm, 'default').mockImplementation(() => ({
-            loading: true,
-            error: null,
-            recordForm: null,
-            refetch: jest.fn()
-        }));
-
-        render(
-            <EditRecord
-                record={mockRecord}
-                library={mockRecord.library.id}
-                onValueDelete={jest.fn()}
-                onValueSubmit={jest.fn()}
-                onDeleteMultipleValues={jest.fn()}
-                readonly={false}
-            />,
-            {
-                mocks
-            }
-        );
-
-        expect(screen.getAllByTestId('edit-record-skeleton').length).toBeGreaterThan(0);
-    });
-
-    test('Render form after loading', async () => {
-        jest.spyOn(useGetRecordForm, 'default').mockImplementation(() => ({
-            loading: false,
-            error: null,
-            recordForm: {
-                dependencyAttributes: [],
-                id: mockRecordForm.id,
-                recordId: '123456',
-                library: mockRecordForm.library,
-                system: false,
-                elements: mockRecordForm.elements
-            },
-            refetch: jest.fn()
-        }));
-
-        render(
-            <EditRecord
-                record={mockRecord}
-                library={mockRecord.library.id}
-                onValueDelete={jest.fn()}
-                onValueSubmit={jest.fn()}
-                onDeleteMultipleValues={jest.fn()}
-                readonly={false}
-            />,
-            {
-                mocks
-            }
-        );
-
-        expect(await screen.findByTestId('container-child-element')).toBeInTheDocument();
-        expect(screen.getByText('StandardField')).toBeInTheDocument();
-    });
-});

package/src/components/RecordEdition/EditRecord/EditRecord.tsx

@@ -1,140 +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 {FormUIElementTypes, FORM_ROOT_CONTAINER_ID, simpleStringHash} from '@leav/utils';
-import {useEffect, useMemo} from 'react';
-import {ErrorDisplay} from '_ui/components';
-import useGetRecordForm from '_ui/hooks/useGetRecordForm';
-import {useGetRecordUpdatesSubscription} from '_ui/hooks/useGetRecordUpdatesSubscription';
-import useRecordsConsultationHistory from '_ui/hooks/useRecordsConsultationHistory';
-import {useSharedTranslation} from '_ui/hooks/useSharedTranslation';
-import {IRecordIdentityWhoAmI} from '_ui/types/records';
-import {FormElementTypes} from '_ui/_gqlTypes';
-import {EditRecordReducerActionsTypes} from '../editRecordModalReducer/editRecordModalReducer';
-import {useEditRecordModalReducer} from '../editRecordModalReducer/useEditRecordModalReducer';
-import EditRecordSkeleton from './EditRecordSkeleton';
-import extractFormElements from './helpers/extractFormElements';
-import {RecordEditionContext} from './hooks/useRecordEditionContext';
-import {formComponents} from './uiElements';
-import {DeleteMultipleValuesFunc, DeleteValueFunc, FormElement, SubmitValueFunc} from './_types';
-
-interface IEditRecordProps {
-    record: IRecordIdentityWhoAmI | null;
-    library: string;
-    onValueSubmit: SubmitValueFunc;
-    onValueDelete: DeleteValueFunc;
-    onDeleteMultipleValues: DeleteMultipleValuesFunc;
-    readonly: boolean;
-}
-
-function EditRecord({
-    record,
-    library,
-    onValueSubmit,
-    onValueDelete,
-    onDeleteMultipleValues,
-    readonly
-}: IEditRecordProps): JSX.Element {
-    const formId = record ? 'edition' : 'creation';
-    const {t} = useSharedTranslation();
-    const {state, dispatch} = useEditRecordModalReducer();
-
-    useRecordsConsultationHistory(record?.library?.id ?? null, record?.id ?? null);
-
-    const {data: recordUpdateData} = useGetRecordUpdatesSubscription(
-        {records: [record?.id], ignoreOwnEvents: true},
-        !record?.id
-    );
-
-    useEffect(() => {
-        if (recordUpdateData) {
-            dispatch({
-                type: EditRecordReducerActionsTypes.ADD_EXTERNAL_UPDATE,
-                modifier: recordUpdateData?.recordUpdate?.record?.modified_by?.[0]?.value?.whoAmI,
-                updatedValues: recordUpdateData?.recordUpdate?.updatedValues
-            });
-        }
-    }, [recordUpdateData]);
-
-    const {loading, error, recordForm, refetch} = useGetRecordForm({
-        libraryId: library,
-        recordId: record?.id,
-        formId,
-        version: state.valuesVersion
-    });
-
-    // Generate a hash of recordForm to detect changes
-    const recordFormHash = useMemo(() => simpleStringHash(JSON.stringify(recordForm)), [recordForm]);
-
-    useEffect(() => {
-        if (state.refreshRequested) {
-            refetch();
-            dispatch({type: EditRecordReducerActionsTypes.REFRESH_DONE});
-        }
-    }, [state.refreshRequested]);
-
-    if (loading) {
-        return <EditRecordSkeleton rows={5} />;
-    }
-
-    if (error) {
-        const message =
-            Object.values((error.graphQLErrors[0]?.extensions?.exception as {fields: string})?.fields ?? {}).join(
-                '\n'
-            ) ?? error?.message;
-
-        return <ErrorDisplay message={message ?? t('record_edition.no_form_error')} />;
-    }
-
-    const _checkDependencyChange = (changedAttribute: string) => {
-        // If a dependency attribute has changed, we need to refresh the form
-        if (recordForm.dependencyAttributes.map(depAttribute => depAttribute.id).includes(changedAttribute)) {
-            dispatch({type: EditRecordReducerActionsTypes.REQUEST_REFRESH});
-        }
-    };
-
-    const _handleValueSubmit: SubmitValueFunc = async (element, value) => {
-        const submitRes = await onValueSubmit(element, value);
-
-        _checkDependencyChange(element[0].attribute.id);
-
-        return submitRes;
-    };
-
-    const _handleValueDelete: DeleteValueFunc = async (value, attribute) => {
-        const deleteRes = await onValueDelete(value, attribute);
-
-        _checkDependencyChange(attribute);
-
-        return deleteRes;
-    };
-
-    const elementsByContainer = extractFormElements(recordForm);
-
-    const rootElement: FormElement<{}> = {
-        id: FORM_ROOT_CONTAINER_ID,
-        containerId: null,
-        type: FormElementTypes.layout,
-        uiElementType: FormUIElementTypes.FIELDS_CONTAINER,
-        settings: {},
-        attribute: null,
-        valueError: null,
-        values: null,
-        uiElement: formComponents[FormUIElementTypes.FIELDS_CONTAINER]
-    };
-
-    // Use a hash of record form as a key to force a full re-render when the form changes
-    return (
-        <RecordEditionContext.Provider value={{elements: elementsByContainer, readOnly: readonly, record}}>
-            <rootElement.uiElement
-                key={recordFormHash}
-                element={rootElement}
-                onValueSubmit={_handleValueSubmit}
-                onValueDelete={_handleValueDelete}
-                onDeleteMultipleValues={onDeleteMultipleValues}
-            />
-        </RecordEditionContext.Provider>
-    );
-}
-
-export default EditRecord;

package/src/components/RecordEdition/EditRecord/EditRecordSkeleton.tsx

@@ -1,29 +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 {Divider, Skeleton} from 'antd';
-import React from 'react';
-
-interface IEditRecordSkeletonProps {
-    rows: number;
-}
-
-function EditRecordSkeleton({rows}: IEditRecordSkeletonProps): JSX.Element {
-    const rowsArray = Array(rows)
-        .fill('')
-        .map((_, i) => i);
-
-    return (
-        <>
-            {rowsArray.map(el => (
-                <div key={el} data-testid="edit-record-skeleton">
-                    <Skeleton.Input active size="large" style={{width: 100, margin: '0 .5rem'}} />
-                    <Skeleton.Input active size="large" style={{width: 450, margin: '0 .5rem'}} />
-                    <Divider />
-                </div>
-            ))}
-        </>
-    );
-}
-
-export default EditRecordSkeleton;