@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/modules/Attachments/Attachments.tsx

@@ -1,336 +0,0 @@
-import React, {useMemo, useRef, useState} from 'react';
-import {Button, Flex, Icon, Tab, TabList, TabPanel, TabProvider, Text} from '@gravity-ui/uikit';
-import {AttachmentList, AttachmentListPlaceholder, EditAttachmentItem} from '../../components';
-import {createUuid} from '../../helpers/createUuid';
-import {isObjectEqual} from '../../helpers/isObjectEqual';
-import {Plus} from '@gravity-ui/icons';
-import type {
-    AttachmentItemProps,
-    AttachmentListPlaceholderProps,
-    AttachmentListProps,
-    EditLinkValues,
-} from '../../components';
-import cn from 'bem-cn-lite';
-
-import i18n from './i18n';
-
-import './Attachments.scss';
-
-type TabVariants = 'Current' | 'Deleted';
-
-export type AttachItem = AttachmentItemProps['attachment'] & {token?: string; isNew?: boolean};
-
-export type AttachmentsProps = {
-    tokens?: {value: string; title: string}[];
-    placeholderProps?: Omit<AttachmentListPlaceholderProps, 'onAddFile' | 'onAddLink'>;
-    attachmentListProps?: Pick<AttachmentListProps, 'className'>;
-    attachments?: AttachItem[];
-    deletedAttachments?: AttachItem[];
-    onChange?: (payload: {attachments: AttachItem[]; deletedAttachments: AttachItem[]}) => void;
-};
-
-const block = cn('qp-attachments');
-
-export const Attachments = ({
-    tokens,
-    placeholderProps,
-    attachmentListProps,
-    onChange,
-    attachments: customerAttachments,
-    deletedAttachments: customerDeletedAttachments,
-}: AttachmentsProps) => {
-    const [currentTab, setCurrentTab] = useState<'Current' | 'Deleted'>('Current');
-
-    const [innerAttachList, setInnerAttachList] = useState<AttachItem[]>(customerAttachments ?? []);
-    const [innerDeletedAttachList, setInnerDeletedAttachList] = useState<AttachItem[]>(
-        customerDeletedAttachments ?? [],
-    );
-
-    const [editingIds, setEditingIds] = useState<string[]>([]);
-    const [wasAddedIds, setWasAddedIds] = useState<string[]>([]);
-    const [wasEdited, setWasEditedIds] = useState<string[]>([]);
-
-    const attachList = customerAttachments ?? innerAttachList;
-    const deletedAttachList = customerDeletedAttachments ?? innerDeletedAttachList;
-
-    const attachCount = useMemo(() => attachList.filter((a) => !a.isNew).length, [attachList]);
-
-    const defaultAttachList = useRef(attachList);
-
-    const getDefaultValuesForLink = (linkId: string) => {
-        const currentLink = attachList.find((a) => a.id === linkId);
-        return {
-            name: currentLink?.name ?? '',
-            link: currentLink?.link ?? '',
-            token: currentLink?.token ?? '',
-        };
-    };
-
-    const runAfterAttachAdded = (attachId: string, newAttach: AttachItem) => {
-        const editedAttach = defaultAttachList.current.find((a) => a.id === attachId);
-
-        if (!editedAttach) return;
-
-        if (isObjectEqual(editedAttach, newAttach)) {
-            setWasEditedIds(wasEdited.filter((id) => id !== attachId));
-            return;
-        }
-
-        setWasEditedIds([...wasEdited, attachId]);
-    };
-
-    const handleAddEmptyFile = () => {
-        const id = createUuid();
-
-        const patchAttachList = [
-            ...attachList.filter((a) => !a.isNew),
-            {id, name: '', isNew: true},
-        ];
-
-        setInnerAttachList(patchAttachList);
-        setWasAddedIds([...wasAddedIds, id]);
-        setEditingIds([...editingIds, id]);
-
-        onChange?.({
-            attachments: patchAttachList,
-            deletedAttachments: deletedAttachList,
-        });
-    };
-
-    const handleAddEmptyLink = () => {
-        const id = createUuid();
-
-        const patchAttachList = [
-            ...attachList.filter((a) => !a.isNew),
-            {id, name: '', token: '', link: '', isNew: true},
-        ];
-
-        setInnerAttachList(patchAttachList);
-        setWasAddedIds([...wasAddedIds, id]);
-        setEditingIds([...editingIds, id]);
-
-        onChange?.({
-            attachments: patchAttachList,
-            deletedAttachments: deletedAttachList,
-        });
-    };
-
-    const handleAcceptFile = (fileId: string, fileName: string) => {
-        const patchedFile = attachList.find((a) => a.id === fileId);
-        if (!patchedFile) return;
-
-        const patchEditingIds = editingIds.filter((id) => id !== fileId);
-        const patchAttachList = attachList.map((attach) => {
-            if (attach.id === fileId) return {id: fileId, name: fileName};
-            return attach;
-        });
-
-        setEditingIds(patchEditingIds);
-        setInnerAttachList(patchAttachList);
-
-        onChange?.({
-            attachments: patchAttachList,
-            deletedAttachments: deletedAttachList,
-        });
-
-        runAfterAttachAdded(fileId, {id: fileId, name: fileName});
-    };
-
-    const handleAcceptLink = (linkId: string, link: EditLinkValues) => {
-        const patchedLink = attachList.find((a) => a.id === linkId);
-        if (!patchedLink) return;
-
-        const patchEditingIds = editingIds.filter((id) => id !== linkId);
-        const patchAttachList = attachList.map((attach) => {
-            if (attach.id === linkId) return {id: linkId, ...link};
-            return attach;
-        });
-
-        setEditingIds(patchEditingIds);
-        setInnerAttachList(patchAttachList);
-
-        onChange?.({
-            attachments: patchAttachList,
-            deletedAttachments: deletedAttachList,
-        });
-
-        runAfterAttachAdded(linkId, {id: linkId, ...link});
-    };
-
-    const handleCancelEdit = (fileId: string) => {
-        const patchEditingIds = editingIds.filter((id) => id !== fileId);
-        const patchAttachList = attachList.filter((a) => !a.isNew);
-
-        const wasItNewAttach = attachList.some((a) => a.isNew);
-        if (wasItNewAttach) {
-            setWasAddedIds(wasAddedIds.filter((id) => id !== fileId));
-        }
-
-        setInnerAttachList(patchAttachList);
-        setEditingIds(patchEditingIds);
-
-        onChange?.({
-            attachments: patchAttachList,
-            deletedAttachments: deletedAttachList,
-        });
-    };
-
-    const handleEdit = (editAttachId: string) => {
-        const patchEditingIds = [...editingIds, editAttachId];
-
-        setEditingIds(patchEditingIds);
-    };
-
-    const handleDelete = (attachId: string) => {
-        const deletedAttachmen = attachList.find((a) => a.id === attachId);
-
-        if (!deletedAttachmen) return;
-
-        const patchAttachList = attachList.filter((a) => a.id !== attachId);
-        const patchDeletedAttachList = [...deletedAttachList, deletedAttachmen];
-
-        setInnerAttachList(patchAttachList);
-        setInnerDeletedAttachList(patchDeletedAttachList);
-
-        onChange?.({
-            attachments: patchAttachList,
-            deletedAttachments: patchDeletedAttachList,
-        });
-    };
-
-    const handleDeleteAll = () => {
-        const patchAttachList: never[] = [];
-        const patchDeletedAttachList = [
-            ...deletedAttachList,
-            ...attachList.filter((a) => !a.isNew),
-        ];
-
-        setInnerAttachList(patchAttachList);
-        setInnerDeletedAttachList(patchDeletedAttachList);
-
-        onChange?.({
-            attachments: patchAttachList,
-            deletedAttachments: patchDeletedAttachList,
-        });
-    };
-
-    const handleRevertDelete = (attachId: string) => {
-        const revertAttach = deletedAttachList.find((a) => a.id === attachId);
-
-        if (!revertAttach) return;
-
-        const patchAttachList = [...attachList, revertAttach];
-        const patchDeletedAttachList = deletedAttachList.filter((a) => a.id !== attachId);
-
-        setInnerAttachList(patchAttachList);
-        setInnerDeletedAttachList(patchDeletedAttachList);
-
-        onChange?.({
-            attachments: patchAttachList,
-            deletedAttachments: patchDeletedAttachList,
-        });
-    };
-
-    return (
-        <Flex className={block()} direction="column" width="100%" height="100%">
-            <TabProvider value={currentTab} onUpdate={(tab) => setCurrentTab(tab as TabVariants)}>
-                <TabList>
-                    <Tab className={block('tab')} value="Current">
-                        <Text variant="body-1">Current</Text>
-                        <Text color="hint" variant="body-1">
-                            {attachCount}
-                        </Text>
-                    </Tab>
-                    <Tab className={block('tab')} value="Deleted">
-                        <Text variant="body-1">Deleted</Text>
-                        <Text color="hint" variant="body-1">
-                            {deletedAttachList.length}
-                        </Text>
-                    </Tab>
-                </TabList>
-
-                <TabPanel className={block('panel')} value="Current">
-                    <Flex spacing={{pt: 3}} direction="column" width="100%" height="100%">
-                        {attachList.length ? (
-                            <AttachmentList
-                                {...attachmentListProps}
-                                attachments={attachList}
-                                wasAddedIds={wasAddedIds}
-                                wasEditedIds={wasEdited}
-                                editingIds={editingIds}
-                                onEdit={(attach) => handleEdit(attach.id)}
-                                onDelete={(attach) => handleDelete(attach.id)}
-                                renderEditForm={(attach) => {
-                                    const isLink = typeof attach.link === 'string';
-
-                                    if (isLink) {
-                                        const defaultLinkValues = getDefaultValuesForLink(
-                                            attach.id,
-                                        );
-
-                                        return (
-                                            <EditAttachmentItem
-                                                type="link"
-                                                onAccept={(link) =>
-                                                    handleAcceptLink(attach.id, link)
-                                                }
-                                                defaultValues={defaultLinkValues}
-                                                tokens={tokens}
-                                                onCancel={() => handleCancelEdit(attach.id)}
-                                            />
-                                        );
-                                    }
-
-                                    return (
-                                        <EditAttachmentItem
-                                            type="file"
-                                            defaultFileName={attach.name}
-                                            onAccept={(pathName) =>
-                                                handleAcceptFile(attach.id, pathName)
-                                            }
-                                            onCancel={() => handleCancelEdit(attach.id)}
-                                        />
-                                    );
-                                }}
-                            />
-                        ) : (
-                            <AttachmentListPlaceholder
-                                onAddFile={handleAddEmptyFile}
-                                onAddLink={handleAddEmptyLink}
-                                {...placeholderProps}
-                            />
-                        )}
-                        {Boolean(attachList.length) && (
-                            <Flex gap={2}>
-                                <Button onClick={handleAddEmptyFile}>
-                                    <Icon data={Plus} />
-                                    {i18n('action_add-file')}
-                                </Button>
-
-                                <Button view="outlined" onClick={handleAddEmptyLink}>
-                                    <Icon data={Plus} />
-                                    {i18n('action_add-link')}
-                                </Button>
-
-                                <Button view="flat" onClick={handleDeleteAll}>
-                                    {i18n('action_remove-all')}
-                                </Button>
-                            </Flex>
-                        )}
-                    </Flex>
-                </TabPanel>
-
-                <TabPanel className={block('panel')} value="Deleted">
-                    <Flex spacing={{pt: 3}} width="100%" height="100%">
-                        <AttachmentList
-                            {...attachmentListProps}
-                            isDeleted
-                            attachments={deletedAttachList}
-                            onRevert={(attach) => handleRevertDelete(attach.id)}
-                        />
-                    </Flex>
-                </TabPanel>
-            </TabProvider>
-        </Flex>
-    );
-};

package/src/modules/Attachments/i18n/dicts.ts

@@ -1,4 +0,0 @@
-import en from './en.json';
-import ru from './ru.json';
-
-export default {en, ru};

package/src/modules/Attachments/i18n/en.json

@@ -1,5 +0,0 @@
-{
-  "action_add-file": "File",
-  "action_add-link": "Link",
-  "action_remove-all": "Remove all"
-}

package/src/modules/Attachments/i18n/index.ts

@@ -1,5 +0,0 @@
-import {addI18Keysets} from '../../../i18n';
-
-import dicts from './dicts';
-
-export default addI18Keysets('qp:attachments', dicts);

package/src/modules/Attachments/i18n/ru.json

@@ -1,5 +0,0 @@
-{
-  "action_add-file": "Файл",
-  "action_add-link": "Ссылка",
-  "action_remove-all": "Удалить все"
-}

package/src/modules/Attachments/index.ts

@@ -1,2 +0,0 @@
-export {Attachments} from './Attachments';
-export type {AttachmentsProps, AttachItem} from './Attachments';

package/src/modules/ChartEditor/ChartEditor.scss

@@ -1,12 +0,0 @@
-.qp-chart-editor {
-    background: var(--g-color-base-background);
-
-    &__preview {
-        flex: 1 1 auto;
-    }
-
-    &__panel {
-        min-width: 320px;
-        border-left: 1px solid var(--g-color-line-generic);
-    }
-}

package/src/modules/ChartEditor/ChartEditor.tsx

@@ -1,116 +0,0 @@
-import React, {useMemo, useState} from 'react';
-import {Chart} from '@gravity-ui/charts';
-import {Box, Flex, Text} from '@gravity-ui/uikit';
-import cn from 'bem-cn-lite';
-
-import {ChartEditorForm} from '../../components/ChartEditorForm';
-import type {ChartEditorFormProps} from '../../components/ChartEditorForm';
-import type {ChartData, ChartEditorProps, ChartSeries} from './types';
-import i18n from './i18n';
-
-import './ChartEditor.scss';
-
-const block = cn('qp-chart-editor');
-
-export const ChartEditor = ({
-    axisVariants,
-    chartSeriesMap,
-    className,
-    emptyDataLabel,
-    onCancel,
-    onSubmit,
-    onChange,
-    formProps,
-    formValues: customerFormValues,
-}: ChartEditorProps) => {
-    const emptyLabel = emptyDataLabel ?? i18n('alert_no-chart-data');
-
-    const dataIdsOptions = useMemo(() => Object.keys(chartSeriesMap ?? []), [chartSeriesMap]);
-
-    const [formValues, setFormValues] = useState<ChartEditorFormProps['formValues']>(
-        customerFormValues ?? {
-            dataIds: dataIdsOptions.length ? [dataIdsOptions[0]] : [],
-            axisType: 'linear',
-        },
-    );
-
-    const selectedChartSeries = useMemo(() => {
-        const selectedDataIdsSet = new Set(formValues.dataIds);
-        const record: ChartSeries[] = [];
-        for (const dataId in chartSeriesMap) {
-            if (selectedDataIdsSet.has(dataId)) {
-                record.push(chartSeriesMap[dataId]);
-            }
-        }
-        return record;
-    }, [chartSeriesMap, formValues.dataIds]);
-
-    const chartData: ChartData = useMemo(() => {
-        const {axisType, xTitle, yTitle, showLegend, chartTitle, axisCategories} = formValues;
-
-        return {
-            series: {
-                data: selectedChartSeries,
-            },
-            xAxis: {
-                type: axisType,
-                title: {text: xTitle},
-                categories: axisCategories,
-            },
-            yAxis: [
-                {
-                    title: {text: yTitle},
-                },
-            ],
-            legend: {enabled: Boolean(showLegend)},
-            title: chartTitle ? {text: chartTitle} : undefined,
-        };
-    }, [selectedChartSeries, formValues]);
-
-    const handleSubmit = () => {
-        onSubmit?.(chartData);
-    };
-
-    const handleCancel = () => {
-        onCancel?.();
-    };
-
-    const handleFormValuesChange = (patchedFormValues: ChartEditorFormProps['formValues']) => {
-        setFormValues(patchedFormValues);
-        onChange?.(patchedFormValues);
-    };
-
-    return (
-        <Flex
-            width="100%"
-            height="100%"
-            overflow="hidden"
-            as="section"
-            className={block(null, className)}
-        >
-            <Box spacing={{p: 5}} className={block('preview')}>
-                {selectedChartSeries.length ? (
-                    <Box overflow="hidden" width="100%" height="100%">
-                        <Chart data={chartData} />
-                    </Box>
-                ) : (
-                    <Flex width="100%" height="100%" centerContent className={block('empty')}>
-                        <Text color="secondary">{emptyLabel}</Text>
-                    </Flex>
-                )}
-            </Box>
-
-            <div className={block('panel')}>
-                <ChartEditorForm
-                    dataIds={dataIdsOptions}
-                    axisVariants={axisVariants}
-                    formValues={formValues}
-                    onFormValuesChange={handleFormValuesChange}
-                    onSubmit={handleSubmit}
-                    onCancel={handleCancel}
-                    {...formProps}
-                />
-            </div>
-        </Flex>
-    );
-};

package/src/modules/ChartEditor/i18n/dicts.ts

@@ -1,4 +0,0 @@
-import en from './en.json';
-import ru from './ru.json';
-
-export default {en, ru};

package/src/modules/ChartEditor/i18n/en.json

@@ -1,3 +0,0 @@
-{
-  "alert_no-chart-data": "No data for the selected category"
-}

package/src/modules/ChartEditor/i18n/index.ts

@@ -1,5 +0,0 @@
-import {addI18Keysets} from '../../../i18n';
-
-import dicts from './dicts';
-
-export default addI18Keysets('qp:chart-editor', dicts);

package/src/modules/ChartEditor/i18n/ru.json

@@ -1,3 +0,0 @@
-{
-  "alert_no-chart-data": "Нет данных для выбранной категории"
-}

package/src/modules/ChartEditor/index.ts

@@ -1,2 +0,0 @@
-export {ChartEditor} from './ChartEditor';
-export type {ChartEditorProps} from './types';