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

package/src/_utils/index.ts

@@ -1,189 +0,0 @@
-import {gql} from '@apollo/client';
-import {IDateRangeValue, isTypeLink, objectToNameValueArray, omit, WithTypename} from '@leav/utils';
-import {TFunction} from 'i18next';
-import {SyntheticEvent} from 'react';
-import {defaultLinkAttributeFilterFormat} from '_ui/components/LibraryItemsList/constants';
-import {PreviewSize} from '_ui/constants';
-import {IAttribute} from '_ui/types/search';
-import {IValueVersion} from '_ui/types/values';
-import {IView} from '_ui/types/views';
-import {
-    AttributeType,
-    PermissionsActions,
-    RecordFilterInput,
-    RecordIdentityFragment,
-    useIsAllowedQuery,
-    ValueDetailsFragment,
-    ValueVersionInput,
-    ViewDetailsFragment
-} from '_ui/_gqlTypes';
-import {getFiltersFromRequest} from './getFiltersFromRequest';
-
-export const arrayValueVersionToObject = (version: ValueDetailsFragment['version']): IValueVersion => {
-    return version?.reduce((acc: IValueVersion, value) => {
-        acc[value.treeId] = {
-            id: value.treeNode.id,
-            label: value.treeNode.record.whoAmI.label
-        };
-
-        return acc;
-    }, {});
-};
-
-export const objectValueVersionToArray = (version: IValueVersion): ValueVersionInput[] => {
-    return version
-        ? objectToNameValueArray(version).map(v => ({
-              treeId: v.name,
-              treeNodeId: v?.value?.id ?? null
-          }))
-        : null;
-};
-
-export const extractPermissionFromQuery = (
-    queryResult: ReturnType<typeof useIsAllowedQuery>,
-    action: PermissionsActions,
-    fallbackPermission: boolean = false
-): boolean => {
-    return !queryResult.loading && !queryResult.error
-        ? queryResult.data?.isAllowed?.find(permission => permission.name === action)?.allowed ?? fallbackPermission
-        : fallbackPermission;
-};
-
-export const getPreviewSize = (size?: PreviewSize, simplistic: boolean = false) => {
-    if (simplistic) {
-        return '1.2rem';
-    }
-
-    switch (size) {
-        case PreviewSize.medium:
-            return '3.5rem';
-        case PreviewSize.big:
-            return '6rem';
-        case PreviewSize.small:
-            return '2.5rem';
-        case PreviewSize.tiny:
-            return '1.7rem';
-        default:
-            return '2rem';
-    }
-};
-
-export const getTreeRecordKey = (record: RecordIdentityFragment): string => `${record.whoAmI.library.id}/${record.id}`;
-
-export const getValueVersionLabel = (version: IValueVersion) => {
-    return Object.values(version ?? {})
-        .map(v => v.label)
-        .join(' / ');
-};
-
-export const stringifyDateRangeValue = (value: IDateRangeValue, t: TFunction): string =>
-    t('record_edition.date_range_value', {
-        ...value,
-        interpolation: {escapeValue: false}
-    });
-
-/**
- * Cloning gql template tag because some apollo tools like query validation and codegen won't be happy if we use
- * interpolation in template strings. With a different tag name, the query won't be parsed by these tools
- * thus they won't complain about it.
- * It works exactly the same at runtime.
- */
-export const gqlUnchecked = gql;
-
-export const getPropertyCacheFieldName = (attributeId: string): string => {
-    return `property({"attribute":"${attributeId}"})`;
-};
-
-/**
- * Prepare view coming from the server to be used in the app
- */
-export const prepareView = (
-    view: WithTypename<ViewDetailsFragment>,
-    attributes: IAttribute[],
-    libraryId: string,
-    userId: string
-): IView => {
-    const viewFilters: RecordFilterInput[] = (view?.filters ?? []).map(filter => ({
-        ...filter,
-        treeId: filter.tree?.id
-    }));
-
-    const viewValuesVersions = (view?.valuesVersions ?? []).map(version => ({
-        ...version,
-        treeNode: {
-            ...version.treeNode,
-            title: version.treeNode.record.whoAmI.label
-        }
-    }));
-
-    return {
-        ...omit(view, 'created_by', '__typename'),
-        owner: view.created_by.id === userId,
-        filters: getFiltersFromRequest(viewFilters, libraryId, attributes),
-        sort: view.sort && (omit(view.sort, '__typename') as ViewDetailsFragment['sort']),
-        display: omit(view.display, '__typename') as ViewDetailsFragment['display'],
-        valuesVersions: viewValuesVersions.reduce((versions: IValueVersion, version): IValueVersion => {
-            versions[version.treeId] = {
-                id: version.treeNode.id,
-                label: version.treeNode.record.whoAmI.label
-            };
-
-            return versions;
-        }, {}),
-        settings: view.settings?.map(s => omit(s, '__typename'))
-    };
-};
-export const getAttributeFromKey = (key: string, library: string, attributes: IAttribute[]): IAttribute | undefined => {
-    const splitKey = key.split('.');
-
-    // Get root attribute by first key part
-    const rootAttribute = attributes.find(attr => attr.library === library && attr.id === splitKey[0]);
-
-    if (!rootAttribute) {
-        return;
-    }
-
-    if (rootAttribute.type === AttributeType.simple || rootAttribute.type === AttributeType.advanced) {
-        return rootAttribute;
-    }
-
-    if (isTypeLink(rootAttribute.type)) {
-        if (splitKey[1]) {
-            const linkedAttribute = attributes.find(
-                attr => attr.library === rootAttribute?.linkedLibrary?.id && attr.id === splitKey[1]
-            );
-
-            return {...linkedAttribute, parentAttribute: {...rootAttribute, format: defaultLinkAttributeFilterFormat}};
-        }
-
-        return rootAttribute;
-    }
-
-    if (rootAttribute.type === AttributeType.tree) {
-        const [, libraryId, linkedTreeAttribute] = splitKey;
-
-        if (!libraryId && !linkedTreeAttribute) {
-            // Only root attribute => search on tree
-            return {...rootAttribute, format: defaultLinkAttributeFilterFormat};
-        } else if (libraryId && !linkedTreeAttribute) {
-            return rootAttribute;
-        }
-
-        const linkedAttribute = attributes.find(attr => attr.library === splitKey[1] && attr.id === splitKey[2]);
-
-        return linkedAttribute;
-    }
-};
-
-export const stopEvent = (e: SyntheticEvent) => {
-    e.stopPropagation();
-    e.preventDefault();
-};
-
-export const reorder = (list: any[], startIndex: number, endIndex: number) => {
-    const result = Array.from(list);
-    const [removed] = result.splice(startIndex, 1);
-    result.splice(endIndex, 0, removed);
-
-    return result.filter(element => !!element);
-};

package/src/antdTheme/index.ts

@@ -1,108 +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 {ThemeConfig} from 'antd/lib/config-provider/context';
-import {KitApp} from 'aristid-ds';
-import {ComponentProps} from 'react';
-
-export * from './types';
-
-// License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
-const baseTextColor = '#000000';
-export const themeVars = {
-    primaryColor: '#0f97e4',
-    primaryColorLighter: '#37b2f0',
-    defaultBg: '#ffffff',
-    invertedDefaultBg: '#000000',
-    defaultTextColor: baseTextColor,
-    invertedDefaultTextColor: '#ffffff',
-    secondaryTextColor: baseTextColor + '80',
-    activeColor: '#def4ff',
-    errorColor: '#e02020',
-    secondaryBg: '#f0f0f0',
-    lightBg: '#fafafa',
-    headerBg: '#f4f4f4',
-    borderColor: '#d9d9d9',
-    borderLightColor: 'rgb(240, 240, 240)',
-    headerHeight: '3rem',
-    navigationColumnWidth: '20rem',
-    inheritedValuesVersionColor: '#FFBA00',
-    checkerBoard: 'repeating-conic-gradient(rgb(220,220,220) 0% 25%, rgb(240,240,240) 0% 50%) 50% / 20px 20px',
-    imageDefaultBackground: 'rgb(245, 245, 245)'
-};
-
-export const customTheme: ThemeConfig = {
-    token: {
-        colorPrimary: themeVars.primaryColor,
-        colorError: themeVars.errorColor,
-        colorBgBase: themeVars.defaultBg,
-        colorTextBase: themeVars.defaultTextColor,
-        colorBorder: themeVars.borderColor,
-        colorBorderSecondary: themeVars.borderLightColor,
-        colorSplit: themeVars.borderColor,
-        wireframe: false
-    },
-    components: {
-        Layout: {
-            headerBg: themeVars.secondaryBg,
-            controlHeight: 24 // Used by antd to compute the height of the header (2 * controlHeight)
-        },
-        Dropdown: {
-            controlItemBgHover: themeVars.activeColor,
-            colorSplit: themeVars.borderLightColor
-        },
-        Menu: {
-            colorActiveBarBorderSize: 0
-        },
-        Table: {
-            colorBgContainer: 'transparent', // To avoid issues with border-radius on footer
-            colorFillAlter: themeVars.lightBg
-        }
-    }
-};
-
-export const dsTheme: ComponentProps<typeof KitApp>['customTheme'] = {
-    general: {
-        colors: {
-            primary: {
-                primary100: '#ddf1fd',
-                primary200: '#98d6f8',
-                primary300: '#54baf4',
-                primary400: themeVars.primaryColor,
-                primary500: '#0d80c2',
-                primary600: '#0b6aa0',
-                primary700: '#08537d'
-            }
-        }
-    },
-    components: {
-        Button: {
-            primary: {
-                colors: {
-                    background: {
-                        hover: themeVars.primaryColorLighter
-                    },
-                    border: {
-                        default: customTheme.token.colorPrimary,
-                        hover: themeVars.primaryColorLighter
-                    }
-                }
-            },
-            default: {
-                colors: {
-                    border: {
-                        hover: customTheme.token.colorPrimary
-                    }
-                }
-            }
-        },
-        Input: {
-            colors: {
-                border: {
-                    hover: customTheme.token.colorPrimary
-                }
-            }
-        }
-    }
-};

package/src/antdTheme/types.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 {theme} from 'antd';
-export type AntdThemeToken = ReturnType<typeof theme.useToken>['token'];

package/src/components/AttributePicker/AttributePicker.test.tsx

@@ -1,286 +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 {GetAttributesDocument, IsAllowedDocument, PermissionsActions, PermissionTypes} from '_ui/_gqlTypes';
-import {mockAttributeSimple} from '_ui/__mocks__/common/attribute';
-import {render, screen, waitFor, within} from '../../_tests/testUtils';
-import AttributePicker from './AttributePicker';
-
-window.matchMedia = query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
-});
-
-jest.mock('../EditAttributeModal', () => {
-    return {
-        EditAttributeModal: () => {
-            return <div>EditAttribute</div>;
-        }
-    };
-});
-
-jest.mock('../../hooks/useSharedTranslation/useSharedTranslation');
-
-describe('AttributePicker', () => {
-    const baseMocks = [
-        {
-            request: {
-                query: GetAttributesDocument,
-                variables: {pagination: {limit: 20, offset: 0}, filters: {}}
-            },
-            result: {
-                data: {
-                    attributes: {
-                        totalCount: 3,
-                        list: [
-                            {
-                                ...mockAttributeSimple,
-                                format: 'text',
-                                id: 'attributeA'
-                            },
-                            {
-                                ...mockAttributeSimple,
-                                format: 'numeric',
-                                id: 'attributeB'
-                            },
-                            {
-                                ...mockAttributeSimple,
-                                format: 'text',
-                                id: 'attributeC'
-                            }
-                        ]
-                    }
-                }
-            }
-        },
-        {
-            request: {
-                query: IsAllowedDocument,
-                variables: {
-                    type: PermissionTypes.admin,
-                    actions: [PermissionsActions.admin_create_attribute]
-                }
-            },
-            result: {
-                data: {
-                    isAllowed: [
-                        {
-                            name: PermissionsActions.admin_create_attribute,
-                            allowed: true
-                        }
-                    ]
-                }
-            }
-        }
-    ];
-
-    test('Display attributes', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<AttributePicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks: baseMocks});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        expect(screen.getByText('attributeA')).toBeInTheDocument();
-        expect(screen.getByText('attributeB')).toBeInTheDocument();
-        expect(screen.getByText('attributeC')).toBeInTheDocument();
-    });
-
-    test('Can filter list', async () => {
-        const mocksWithFilters = [
-            ...baseMocks,
-            {
-                request: {
-                    query: GetAttributesDocument,
-                    variables: {pagination: {limit: 20, offset: 0}, filters: {label: '%attributeA%'}}
-                },
-                result: {
-                    data: {
-                        attributes: {
-                            totalCount: 1,
-                            list: [
-                                {
-                                    ...mockAttributeSimple,
-                                    id: 'attributeA'
-                                }
-                            ]
-                        }
-                    }
-                }
-            }
-        ];
-
-        const mockHandleSubmit = jest.fn();
-        render(<AttributePicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks: mocksWithFilters});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        expect(screen.getByText('attributeA')).toBeInTheDocument();
-        expect(screen.getByText('attributeB')).toBeInTheDocument();
-        expect(screen.getByText('attributeC')).toBeInTheDocument();
-
-        await userEvent.type(screen.getByRole('textbox'), 'attributeA{Enter}');
-        expect(screen.getByRole('textbox')).toHaveValue('attributeA');
-
-        expect(screen.getByText('attributeA')).toBeInTheDocument();
-        expect(screen.queryByText('attributeB')).not.toBeInTheDocument();
-        expect(screen.queryByText('attributeC')).not.toBeInTheDocument();
-    });
-
-    test('Can sort list', async () => {
-        const mocksWithSort = [
-            ...baseMocks,
-            {
-                request: {
-                    query: GetAttributesDocument,
-                    variables: {pagination: {limit: 20, offset: 0}, sort: {field: 'type', order: 'asc'}, filters: {}}
-                },
-                result: {
-                    data: {
-                        attributes: {
-                            totalCount: 3,
-                            list: [
-                                {
-                                    ...mockAttributeSimple,
-                                    format: 'text',
-                                    id: 'attributeA'
-                                },
-                                {
-                                    ...mockAttributeSimple,
-                                    format: 'text',
-                                    id: 'attributeC'
-                                },
-                                {
-                                    ...mockAttributeSimple,
-                                    format: 'numeric',
-                                    id: 'attributeB'
-                                }
-                            ]
-                        }
-                    }
-                }
-            }
-        ];
-
-        const mockHandleSubmit = jest.fn();
-        render(<AttributePicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks: mocksWithSort});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        const rows = screen.getAllByRole('row');
-        expect(rows[0]).toHaveTextContent('attributeA');
-        expect(rows[1]).toHaveTextContent('attributeB');
-        expect(rows[2]).toHaveTextContent('attributeC');
-
-        await userEvent.click(screen.getByText('attributes.type'));
-        const newRows = screen.getAllByRole('row');
-        expect(newRows[0]).toHaveTextContent('attributeA');
-        expect(newRows[1]).toHaveTextContent('attributeC');
-        expect(newRows[2]).toHaveTextContent('attributeB');
-    });
-
-    test('Select elements and submit', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<AttributePicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks: baseMocks});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        userEvent.click(screen.getByText('attributeA'));
-        const rows = screen.getAllByRole('row');
-        const rowAttributeA = rows[0];
-        const rowAttributeB = rows[1];
-        const rowAttributeC = rows[2];
-
-        // Select 'attributeA'
-        const checkboxAttributeA = within(rowAttributeA).getByRole('checkbox'); // First checkbox is for the table header
-        await waitFor(() => expect(checkboxAttributeA).toBeChecked());
-
-        // Unselect 'attributeA'
-        userEvent.click(checkboxAttributeA);
-        await waitFor(() => expect(checkboxAttributeA).not.toBeChecked());
-
-        // Select "libB" and "libC"
-        const checkboxAttributeB = within(rowAttributeB).getByRole('checkbox'); // First checkbox is for the table header
-        userEvent.click(checkboxAttributeB);
-
-        const checkboxAttributeC = within(rowAttributeC).getByRole('checkbox'); // First checkbox is for the table header
-        userEvent.click(checkboxAttributeC);
-
-        userEvent.click(screen.getByRole('button', {name: /submit/i}));
-
-        await waitFor(() => expect(mockHandleSubmit).toHaveBeenCalledWith(['attributeB', 'attributeC']), {
-            timeout: 10000
-        });
-    });
-
-    test('If not multiple, only one element can be selected', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<AttributePicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open multiple={false} />, {
-            mocks: baseMocks
-        });
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        userEvent.click(screen.getByText('attributeA'));
-        const radioBtnAttributeA = within(screen.getByRole('row', {name: /attributeA/i})).getByRole('radio');
-        const radioBtnAttributeB = within(screen.getByRole('row', {name: /attributeA/i})).getByRole('radio');
-        await waitFor(() => expect(radioBtnAttributeA).toBeChecked());
-
-        userEvent.click(screen.getByText('attributeB'));
-        await waitFor(() => expect(radioBtnAttributeB).toBeChecked());
-        await waitFor(() => expect(radioBtnAttributeA).not.toBeChecked());
-    });
-
-    test('Can create new attribute', async () => {
-        const mockHandleSubmit = jest.fn();
-        render(<AttributePicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open />, {mocks: baseMocks});
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        const newAttributeButton = screen.queryByRole('button', {name: /new_attribute/i});
-        expect(newAttributeButton).toBeInTheDocument();
-
-        await userEvent.click(newAttributeButton);
-        expect(screen.getByText('EditAttribute')).toBeInTheDocument();
-    });
-
-    test('If not allowed, cannot create new attribute', async () => {
-        const mocksNotAllowed = [
-            baseMocks[0],
-            {
-                request: {
-                    query: IsAllowedDocument,
-                    variables: {
-                        type: PermissionTypes.admin,
-                        actions: [PermissionsActions.admin_create_attribute]
-                    }
-                },
-                result: {
-                    data: {
-                        isAllowed: [
-                            {
-                                name: PermissionsActions.admin_create_attribute,
-                                allowed: false
-                            }
-                        ]
-                    }
-                }
-            }
-        ];
-
-        const mockHandleSubmit = jest.fn();
-        render(<AttributePicker onClose={jest.fn()} onSubmit={mockHandleSubmit} open showCreateButton={false} />, {
-            mocks: mocksNotAllowed
-        });
-
-        await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
-
-        expect(screen.queryByRole('button', {name: /new_attribute/i})).not.toBeInTheDocument();
-    });
-});

package/src/components/AttributePicker/AttributePicker.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 {Modal} from 'antd';
-import {useState} from 'react';
-import {GetAttributesQueryVariables} from '_ui/_gqlTypes';
-import {useSharedTranslation} from '../../hooks/useSharedTranslation';
-import {ErrorBoundary} from '../ErrorBoundary';
-import {AttributesList} from './AttributesList';
-
-interface IAttributePickerProps {
-    open: boolean;
-    onClose: () => void;
-    onSubmit: (selectedAttributes: string[]) => Promise<void>;
-    showCreateButton?: boolean;
-    selected?: string[];
-    multiple?: boolean;
-    baseFilters?: GetAttributesQueryVariables['filters'];
-}
-
-function AttributePicker({
-    open,
-    onClose,
-    onSubmit,
-    selected = [],
-    showCreateButton = true,
-    multiple = true,
-    baseFilters
-}: IAttributePickerProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const [selectedAttributes, setSelectedAttributes] = useState<string[]>([]);
-    const [isLoading, setIsLoading] = useState(false);
-
-    const _handleSelect = (selection: string[]) => {
-        setSelectedAttributes(selection);
-    };
-
-    const _handleSubmit = async () => {
-        setIsLoading(true);
-        await onSubmit(selectedAttributes);
-        setIsLoading(false);
-        onClose();
-    };
-
-    return (
-        <Modal
-            open={open}
-            onCancel={onClose}
-            width={800}
-            title={t('attributes.select_attributes')}
-            onOk={_handleSubmit}
-            destroyOnClose
-            okText={t('global.submit')}
-            cancelText={t('global.cancel')}
-            confirmLoading={isLoading}
-            centered
-        >
-            <ErrorBoundary>
-                <AttributesList
-                    onSelect={_handleSelect}
-                    selected={selected}
-                    multiple={multiple}
-                    showCreateButton={showCreateButton}
-                    baseFilters={baseFilters}
-                />
-            </ErrorBoundary>
-        </Modal>
-    );
-}
-
-export default AttributePicker;