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

package/src/components/EditLibraryModal/EditLibrary/EditLibraryPreviewsSettings/EditLibraryPreviewsSettings.test.tsx

@@ -1,85 +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 {mockLibraryWithPreviewsSettings} from '_ui/__mocks__/common/library';
-import * as gqlTypes from '../../../../_gqlTypes';
-import {render, screen, waitFor} from '../../../../_tests/testUtils';
-import EditLibraryPreviewsSettings from './EditLibraryPreviewsSettings';
-
-jest.mock('../../../../hooks/useSharedTranslation/useSharedTranslation');
-
-jest.mock('./EditPreviewsSettingsModal', () => {
-    return {
-        EditPreviewsSettingsModal: () => {
-            return <div>EditPreviewsSettingsModal</div>;
-        }
-    };
-});
-
-describe('EditLibraryPreviewsSettings', () => {
-    test('Display list of previews settings', async () => {
-        render(<EditLibraryPreviewsSettings library={mockLibraryWithPreviewsSettings} />);
-
-        expect(screen.getAllByRole('row')).toHaveLength(2);
-
-        // Labels
-        expect(screen.getByText('Ma config')).toBeInTheDocument();
-
-        // Density
-        expect(screen.getByText('300 dpi')).toBeInTheDocument();
-
-        // Sizes
-        expect(screen.getByText('200')).toBeInTheDocument();
-
-        // Display description on hover label
-        const firstVersionLabel = screen.getByText('Ma config');
-        await userEvent.hover(firstVersionLabel);
-        expect(await screen.findByText('Ma description')).toBeInTheDocument();
-
-        // Display size name on hover size
-        await userEvent.hover(screen.getByText('1337'));
-        expect(await screen.findByText('other_size2')).toBeInTheDocument();
-
-        const editButtons = screen.getAllByRole('button', {name: /expand/, hidden: true});
-        expect(editButtons).toHaveLength(2);
-
-        userEvent.click(editButtons[0]);
-        expect(await screen.findByText('EditPreviewsSettingsModal')).toBeInTheDocument();
-    });
-
-    test('Can add new settings', async () => {
-        render(<EditLibraryPreviewsSettings library={mockLibraryWithPreviewsSettings} />);
-        const addNewSettingsButton = screen.getByRole('button', {name: /add_settings/i});
-        userEvent.click(addNewSettingsButton);
-
-        expect(await screen.findByText('EditPreviewsSettingsModal')).toBeInTheDocument();
-    });
-
-    test('Can delete settings', async () => {
-        const mockSaveLibraryMutation = jest.fn().mockReturnValue({
-            data: {
-                saveLibrary: {
-                    ...mockLibraryWithPreviewsSettings,
-                    previewsSettings: [mockLibraryWithPreviewsSettings.previewsSettings[0]]
-                }
-            }
-        });
-
-        jest.spyOn(gqlTypes, 'useSaveLibraryMutation').mockImplementation(() => [
-            mockSaveLibraryMutation,
-            {loading: false, called: true, client: null, reset: null, error: null}
-        ]);
-
-        render(<EditLibraryPreviewsSettings library={mockLibraryWithPreviewsSettings} />);
-
-        const deleteButtons = screen.getAllByRole('button', {name: /delete/i});
-        expect(deleteButtons).toHaveLength(2);
-        expect(deleteButtons[0]).toBeDisabled(); // System version, cannot delete
-
-        await userEvent.click(deleteButtons[1]);
-        userEvent.click(await screen.findByRole('button', {name: /submit/i}));
-
-        await waitFor(() => expect(mockSaveLibraryMutation).toBeCalled());
-    });
-});

package/src/components/EditLibraryModal/EditLibrary/EditLibraryPreviewsSettings/EditLibraryPreviewsSettings.tsx

@@ -1,51 +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 {LibraryDetailsFragment, LibraryPreviewsSettingsFragment, useSaveLibraryMutation} from '../../../../_gqlTypes';
-import {PreviewsSettingsList} from './PreviewsSettingsList';
-
-interface IEditLibraryPreviewsSettingsProps {
-    library: LibraryDetailsFragment;
-    readOnly?: boolean;
-}
-
-function EditLibraryPreviewsSettings({library, readOnly}: IEditLibraryPreviewsSettingsProps): JSX.Element {
-    const [saveLibrary] = useSaveLibraryMutation();
-
-    const _cleanPreviewsSettings = (previewsSettings: LibraryPreviewsSettingsFragment[]) => {
-        return previewsSettings
-            .filter(settings => !settings.system) // Don't save system settings
-            .map(previewSetting => ({
-                label: previewSetting.label,
-                description: previewSetting.description,
-                versions: {
-                    background: previewSetting.versions.background,
-                    density: previewSetting.versions.density,
-                    sizes: previewSetting.versions.sizes
-                        .filter(({name, size}) => name && size) // Remove empty sizes
-                        .map(({name, size}) => ({name, size}))
-                }
-            }));
-    };
-
-    const _handleChange = async (newPreviewsSettings: LibraryPreviewsSettingsFragment[]) => {
-        await saveLibrary({
-            variables: {
-                library: {
-                    id: library.id,
-                    previewsSettings: _cleanPreviewsSettings(newPreviewsSettings)
-                }
-            }
-        });
-    };
-
-    return (
-        <PreviewsSettingsList
-            readOnly={readOnly}
-            previewsSettings={library.previewsSettings}
-            onChange={_handleChange}
-        />
-    );
-}
-
-export default EditLibraryPreviewsSettings;

package/src/components/EditLibraryModal/EditLibrary/EditLibraryPreviewsSettings/EditPreviewsSettingsModal/EditPreviewsSettingsModal.test.tsx

@@ -1,76 +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 {mockLibraryWithPreviewsSettings} from '_ui/__mocks__/common/library';
-import {render, screen, waitFor} from '../../../../../_tests/testUtils';
-import EditPreviewsSettingsModal from './EditPreviewsSettingsModal';
-
-jest.mock('../../../../../hooks/useSharedTranslation/useSharedTranslation');
-
-describe('EditPreviewsSettingsModal', () => {
-    test('Display form', async () => {
-        const mockHandleSubmit = jest.fn();
-
-        render(
-            <EditPreviewsSettingsModal
-                previewsSetting={{...mockLibraryWithPreviewsSettings.previewsSettings[0], system: false}}
-                open
-                onClose={jest.fn()}
-                onSubmit={mockHandleSubmit}
-            />
-        );
-
-        expect(screen.getByRole('textbox', {name: /label_en/i})).toHaveValue('My settings');
-        expect(screen.getByRole('textbox', {name: /description_en/i})).toHaveValue('My settings description');
-        expect(screen.getByRole('spinbutton', {name: /density/i})).toHaveValue('300');
-        expect(screen.getAllByRole('textbox', {name: /size_name/i})).toHaveLength(2);
-
-        await userEvent.click(screen.getByRole('button', {name: /submit/i}));
-
-        await waitFor(() => {
-            expect(mockHandleSubmit).toHaveBeenCalled();
-        });
-    });
-
-    test('Can add/delete sizes', async () => {
-        const mockHandleSubmit = jest.fn();
-
-        render(
-            <EditPreviewsSettingsModal
-                previewsSetting={{...mockLibraryWithPreviewsSettings.previewsSettings[0], system: false}}
-                open
-                onClose={jest.fn()}
-                onSubmit={mockHandleSubmit}
-            />
-        );
-
-        expect(screen.getAllByRole('textbox', {name: /size_name/i})).toHaveLength(2);
-
-        await userEvent.click(screen.getByText(/add_size/i));
-
-        expect(screen.getAllByRole('textbox', {name: /size_name/i})).toHaveLength(3);
-
-        await userEvent.click(screen.getAllByRole('button', {name: /delete/i})[0]);
-        await userEvent.click(screen.getByRole('button', {name: /confirm/i}));
-        expect(screen.getAllByRole('textbox', {name: /size_name/i})).toHaveLength(2);
-    });
-
-    test('If readonly, everything is disabled', async () => {
-        const mockHandleSubmit = jest.fn();
-
-        render(
-            <EditPreviewsSettingsModal
-                previewsSetting={{...mockLibraryWithPreviewsSettings.previewsSettings[0], system: true}}
-                open
-                onClose={jest.fn()}
-                onSubmit={mockHandleSubmit}
-            />
-        );
-
-        expect(screen.getByRole('textbox', {name: /label_en/i})).toBeDisabled();
-        expect(screen.getByRole('textbox', {name: /description_en/i})).toBeDisabled();
-        expect(screen.getByRole('spinbutton', {name: /density/i})).toBeDisabled();
-        expect(screen.getAllByRole('textbox', {name: /size_name/i})[0]).toBeDisabled();
-    });
-});

package/src/components/EditLibraryModal/EditLibrary/EditLibraryPreviewsSettings/EditPreviewsSettingsModal/EditPreviewsSettingsModal.tsx

@@ -1,180 +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 {ColorPicker, Form, Input, InputNumber, Modal, Radio, Space} from 'antd';
-import {ComponentProps, useState} from 'react';
-import {useLang} from '../../../../../hooks';
-import {useSharedTranslation} from '../../../../../hooks/useSharedTranslation';
-import {LibraryPreviewsSettingsFragment} from '../../../../../_gqlTypes';
-import FieldsGroup from '../../../../FieldsGroup';
-import {SizesEditor} from './SizesEditor';
-
-enum BackgroundMode {
-    transparent = 'transparent',
-    color = 'color'
-}
-
-interface IEditPreviewsSettingsModalProps {
-    previewsSetting?: LibraryPreviewsSettingsFragment;
-    open: boolean;
-    onClose: () => void;
-    onSubmit: (previewsSetting: LibraryPreviewsSettingsFragment) => Promise<void>;
-    readOnly?: boolean;
-}
-
-function EditPreviewsSettingsModal({
-    previewsSetting,
-    readOnly,
-    open,
-    onClose,
-    onSubmit
-}: IEditPreviewsSettingsModalProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const {availableLangs, defaultLang} = useLang();
-    const isReadOnly = readOnly || previewsSetting?.system;
-    const hasBackground = previewsSetting?.versions?.background !== 'false';
-    const [isSubmitLoading, setIsSubmitLoading] = useState(false);
-
-    const formInitValues: LibraryPreviewsSettingsFragment = previewsSetting
-        ? {
-              ...previewsSetting,
-              versions: {
-                  ...previewsSetting.versions,
-                  background:
-                      !previewsSetting.versions.background || previewsSetting.versions.background === 'false'
-                          ? '#00000000'
-                          : previewsSetting.versions.background
-              }
-          }
-        : {
-              label: null,
-              description: null,
-              system: false,
-              versions: {
-                  background: '#ffffff',
-                  density: 300,
-                  sizes: []
-              }
-          };
-
-    const [backgroundMode, setBackgroundMode] = useState<BackgroundMode>(
-        hasBackground ? BackgroundMode.color : BackgroundMode.transparent
-    );
-
-    const [form] = Form.useForm<LibraryPreviewsSettingsFragment>();
-
-    const _handleSizesChange = (sizes: LibraryPreviewsSettingsFragment['versions']['sizes']) => {
-        form.setFieldValue(['versions', 'sizes'], sizes);
-    };
-
-    const _handleBackgroundChange: ComponentProps<typeof ColorPicker>['onChange'] = color => {
-        const hexColor = color.toHexString();
-        form.setFieldValue(['versions', 'background'], hexColor);
-    };
-
-    const _handleSubmit = async () => {
-        setIsSubmitLoading(true);
-        await form.validateFields();
-        const values = form.getFieldsValue();
-        await onSubmit(values);
-        setIsSubmitLoading(false);
-    };
-
-    const _handleBackgroundModeChange: ComponentProps<typeof Radio.Group>['onChange'] = e => {
-        setBackgroundMode(e.target.value);
-        const newFieldValue = e.target.value === BackgroundMode.transparent ? 'false' : '#ffffff';
-        form.setFieldValue(['versions', 'background'], newFieldValue);
-    };
-
-    return (
-        <Modal
-            width={800}
-            onCancel={onClose}
-            open={open}
-            centered
-            okText={t('global.submit')}
-            cancelText={t('global.cancel')}
-            onOk={_handleSubmit}
-            bodyStyle={{height: 'calc(95vh - 15rem)', overflow: 'auto'}}
-            title={t('libraries.previews_settings.title')}
-            confirmLoading={isSubmitLoading}
-        >
-            <Form form={form} labelCol={{span: 6}} wrapperCol={{span: 24}} initialValues={formInitValues}>
-                <FieldsGroup label={t('libraries.previews_settings.label')}>
-                    {availableLangs.map(availableLang => (
-                        <Form.Item
-                            key={`label_${availableLang}`}
-                            name={['label', availableLang]}
-                            label={availableLang.toLowerCase()}
-                            labelCol={{span: 2}}
-                            wrapperCol={{span: 22}}
-                            rules={[
-                                {
-                                    required: availableLang === defaultLang,
-                                    message: t('errors.default_language_required')
-                                }
-                            ]}
-                            style={{marginBottom: '0.5rem'}}
-                        >
-                            <Input aria-label={`label_${availableLang}`} disabled={isReadOnly} />
-                        </Form.Item>
-                    ))}
-                </FieldsGroup>
-                <FieldsGroup label={t('libraries.previews_settings.description')}>
-                    {availableLangs.map(availableLang => (
-                        <Form.Item
-                            key={`description_${availableLang}`}
-                            name={['description', availableLang]}
-                            label={availableLang.toLowerCase()}
-                            labelCol={{span: 2}}
-                            wrapperCol={{span: 22}}
-                            style={{marginBottom: '0.5rem'}}
-                        >
-                            <Input.TextArea
-                                aria-label={`description_${availableLang}`}
-                                disabled={isReadOnly}
-                                rows={1}
-                            />
-                        </Form.Item>
-                    ))}
-                </FieldsGroup>
-                <Form.Item
-                    key="density"
-                    name={['versions', 'density']}
-                    label={t('libraries.previews_settings.density')}
-                >
-                    <InputNumber aria-label="density" disabled={isReadOnly} addonAfter="dpi" />
-                </Form.Item>
-                <Form.Item label={t('libraries.previews_settings.background')}>
-                    <Space>
-                        <Radio.Group onChange={_handleBackgroundModeChange} value={backgroundMode} buttonStyle="solid">
-                            <Radio.Button value={BackgroundMode.transparent}>
-                                {t('libraries.previews_settings.transparent')}
-                            </Radio.Button>
-                            <Radio.Button value={BackgroundMode.color}>
-                                {t('libraries.previews_settings.color')}
-                            </Radio.Button>
-                        </Radio.Group>
-                        <Form.Item key="background" name={['versions', 'background']} style={{margin: 0}}>
-                            <ColorPicker
-                                style={backgroundMode !== BackgroundMode.color ? {display: 'none'} : null}
-                                allowClear
-                                disabled={isReadOnly}
-                                onChange={_handleBackgroundChange}
-                            />
-                        </Form.Item>
-                    </Space>
-                </Form.Item>
-                <Form.Item key="sizes" name={['versions', 'sizes']} label={t('libraries.previews_settings.sizes')}>
-                    <SizesEditor
-                        sizes={previewsSetting?.versions?.sizes ?? []}
-                        readOnly={isReadOnly}
-                        onChange={_handleSizesChange}
-                    />
-                </Form.Item>
-            </Form>
-        </Modal>
-    );
-}
-
-export default EditPreviewsSettingsModal;

package/src/components/EditLibraryModal/EditLibrary/EditLibraryPreviewsSettings/EditPreviewsSettingsModal/SizesEditor/SizesEditor.tsx

@@ -1,182 +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, PlusOutlined} from '@ant-design/icons';
-import {idFormatRegex} from '@leav/utils';
-import {Form, Input, InputNumber, Popconfirm, Table} from 'antd';
-import {useEffect, useState} from 'react';
-import styled from 'styled-components';
-import {useSharedTranslation} from '../../../../../../hooks/useSharedTranslation';
-import {LibraryPreviewsSettingsFragment} from '../../../../../../_gqlTypes';
-import {BasicButton} from '../../../../../BasicButton';
-
-const SizeEditorFormItem = styled(Form.Item)`
-    margin: 0;
-`;
-
-interface ISizesEditorProps {
-    sizes: LibraryPreviewsSettingsFragment['versions']['sizes'];
-    onChange: (sizes: LibraryPreviewsSettingsFragment['versions']['sizes']) => void;
-    readOnly: boolean;
-}
-
-function SizesEditor({sizes, readOnly, onChange}: ISizesEditorProps): JSX.Element {
-    const {t} = useSharedTranslation();
-    const [sizesList, setSizesList] = useState(sizes);
-
-    useEffect(() => {
-        setSizesList(sizes);
-    }, [sizes]);
-
-    const sizesColumns = [
-        {
-            key: 'name',
-            dataIndex: 'name',
-            title: t('libraries.previews_settings.size_name'),
-            render: (name, item, index) => {
-                const _handleChange = e => {
-                    const newSizes = [...sizesList];
-                    newSizes[index] = {...newSizes[index], name: e.target.value};
-                    onChange(newSizes);
-                    setSizesList(newSizes);
-                };
-
-                return (
-                    <SizeEditorFormItem
-                        rules={[
-                            {
-                                pattern: idFormatRegex,
-                                message: t('errors.invalid_id_format')
-                            },
-                            {
-                                required: true,
-                                message: t('errors.field_required', {
-                                    interpolation: {escapeValue: false},
-                                    fieldName: t('libraries.previews_settings.size_name')
-                                })
-                            },
-                            {
-                                validator: (_, value) => {
-                                    const names = sizesList.map(size => size.name);
-                                    const isNotUnique = names.find((sizeName, i) => sizeName === value && i !== index);
-                                    if (isNotUnique) {
-                                        return Promise.reject(t('libraries.previews_settings.duplicate_size_name'));
-                                    }
-                                    return Promise.resolve();
-                                }
-                            }
-                        ]}
-                        validateTrigger={['onBlur']}
-                        name={['versions', 'sizes', index, 'name']}
-                    >
-                        <Input disabled={readOnly} type="text" onChange={_handleChange} aria-label="size_name" />
-                    </SizeEditorFormItem>
-                );
-            }
-        },
-        {
-            key: 'size',
-            dataIndex: 'size',
-            title: t('libraries.previews_settings.size'),
-            render: (size, item, index) => {
-                const _handleChange = value => {
-                    const newSizes = [...sizesList];
-                    newSizes[index] = {...newSizes[index], size: value};
-                    onChange(newSizes);
-                    setSizesList(newSizes);
-                };
-
-                return (
-                    <SizeEditorFormItem
-                        rules={[
-                            {
-                                required: true,
-                                message: t('errors.field_required', {
-                                    interpolation: {escapeValue: false},
-                                    fieldName: t('libraries.previews_settings.size')
-                                })
-                            }
-                        ]}
-                        validateTrigger={['onBlur']}
-                        name={['versions', 'sizes', index, 'size']}
-                    >
-                        <InputNumber
-                            min={1}
-                            disabled={readOnly}
-                            addonAfter="px"
-                            onChange={_handleChange}
-                            aria-label="size"
-                        />
-                    </SizeEditorFormItem>
-                );
-            }
-        }
-    ];
-
-    if (!readOnly) {
-        sizesColumns.push({
-            key: 'actions',
-            dataIndex: null,
-            title: null,
-            render: (_, item, index) => {
-                const _handleRemoveSize = () => {
-                    const newSizes = [...sizesList];
-                    newSizes.splice(index, 1);
-                    onChange(newSizes);
-                    setSizesList(newSizes);
-                };
-
-                return (
-                    <Popconfirm
-                        onConfirm={_handleRemoveSize}
-                        title={t('libraries.previews_settings.delete_size_confirm')}
-                        okText={t('global.submit')}
-                        cancelText={t('global.cancel')}
-                        okButtonProps={{'aria-label': 'delete-confirm'}}
-                    >
-                        <BasicButton
-                            shape="circle"
-                            size="small"
-                            danger
-                            icon={<CloseOutlined />}
-                            centered
-                            aria-label="delete"
-                        />
-                    </Popconfirm>
-                );
-            }
-        });
-    }
-
-    const sizesData = sizesList.map((size, index) => ({
-        key: index,
-        name: size.name,
-        size: size.size
-    }));
-
-    const _handleAddSize = () => {
-        const newSizes = [...sizesList];
-        newSizes.push({name: '', size: null});
-        setSizesList(newSizes);
-    };
-
-    const footer = () => (
-        <BasicButton size="small" icon={<PlusOutlined />} onClick={_handleAddSize}>
-            {t('libraries.previews_settings.add_size')}
-        </BasicButton>
-    );
-
-    return (
-        <Table
-            size="small"
-            bordered
-            data-testid="sizes-table"
-            columns={sizesColumns}
-            dataSource={sizesData}
-            pagination={false}
-            footer={!readOnly ? footer : null}
-        />
-    );
-}
-
-export default SizesEditor;

package/src/components/EditLibraryModal/EditLibrary/EditLibraryPreviewsSettings/EditPreviewsSettingsModal/SizesEditor/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 SizesEditor} from './SizesEditor';

package/src/components/EditLibraryModal/EditLibrary/EditLibraryPreviewsSettings/EditPreviewsSettingsModal/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 EditPreviewsSettingsModal} from './EditPreviewsSettingsModal';