@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/components/AttachmentList/AttachmentList.stories.tsx

@@ -1,243 +0,0 @@
-import React, {useState} from 'react';
-import type {Meta, StoryObj} from '@storybook/react';
-import {Text} from '@gravity-ui/uikit';
-import {EditAttachmentItem, EditLinkValues} from './internal/EditAttachmentItem';
-import {fn} from 'storybook/test';
-
-import {AttachmentList, type AttachmentListProps} from './AttachmentList';
-
-const attachments: AttachmentListProps['attachments'] = [
-    {id: 'readme', name: 'README'},
-    {id: 'javascript', name: 'index.js'},
-    {id: 'python', name: 'main.py'},
-    {id: 'csv', name: 'sales.csv'},
-    {id: 'link-image', name: 'https://home/tutorial', link: 'https://home/tutorial'},
-    {id: 'excel', name: 'forecast.xlsx'},
-    {id: 'cpp', name: 'processor.cpp'},
-    {id: 'ql', name: 'analytics.ql'},
-    {id: 'yql', name: 'events.yql'},
-    {id: 'sql', name: 'report.sql'},
-    {id: 'link', name: 'link to file.cpp', link: 'link/to/file.cpp'},
-];
-
-const meta = {
-    title: 'Components/AttachmentList',
-    component: AttachmentList,
-    tags: ['autodocs'],
-    parameters: {
-        layout: 'padded',
-    },
-    decorators: [
-        (Story) => (
-            <div style={{width: 360, height: 360}}>
-                <Story />
-            </div>
-        ),
-    ],
-    args: {
-        attachments,
-        onDelete: fn(),
-        onEdit: fn(),
-    },
-} satisfies Meta<typeof AttachmentList>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Attachments with supported extensions use their corresponding icons. Row actions appear on hover. */
-export const Default: Story = {};
-
-/** `wasAddedIds` and `wasEditedIds` highlight attachments with their current change state. */
-export const ChangeStates: Story = {
-    args: {
-        wasAddedIds: ['javascript', 'csv'],
-        wasEditedIds: ['python', 'sql'],
-    },
-};
-
-/** The inherited List filtering API can be enabled when a consumer needs local attachment search. */
-export const Filterable: Story = {
-    args: {
-        filterable: true,
-        filterPlaceholder: 'Filter by attachment name',
-        filterItem: (filter) => (attachment) =>
-            (attachment as AttachmentListProps['attachments'][number]).name
-                .toLocaleLowerCase()
-                .includes(filter.toLocaleLowerCase()),
-    },
-};
-
-const InteractiveAttachmentList = (props: AttachmentListProps) => {
-    const [currentAttachments, setCurrentAttachments] = useState(props.attachments);
-    const [editedIds, setEditedIds] = useState<string[]>([]);
-
-    return (
-        <AttachmentList
-            {...props}
-            attachments={currentAttachments}
-            wasEditedIds={editedIds}
-            onDelete={(attachment) => {
-                props.onDelete?.(attachment);
-                setCurrentAttachments((current) =>
-                    current.filter((item) => item.id !== attachment.id),
-                );
-                setEditedIds((current) => current.filter((id) => id !== attachment.id));
-            }}
-            onEdit={(attachment) => {
-                props.onEdit?.(attachment);
-                setEditedIds((current) =>
-                    current.includes(attachment.id)
-                        ? current.filter((id) => id !== attachment.id)
-                        : [...current, attachment.id],
-                );
-            }}
-        />
-    );
-};
-
-/** Hover a row: edit toggles its edited state and delete removes it from the list. */
-export const InteractiveActions: Story = {
-    render: (args) => <InteractiveAttachmentList {...args} />,
-};
-
-const EditableAttachmentList = (props: AttachmentListProps) => {
-    const [currentAttachments, setCurrentAttachments] = useState(props.attachments);
-    const [editingId, setEditingId] = useState<string>();
-    const [draftName, setDraftName] = useState('');
-    const [draftLink, setDraftLink] = useState<EditLinkValues>({
-        link: '',
-        token: '',
-        name: '',
-    });
-
-    const handleAcceptDraft = () => {
-        setCurrentAttachments((prevState) => {
-            return prevState.map((attach) => {
-                if (attach.id === editingId && attach.link === undefined) {
-                    return {
-                        ...attach,
-                        name: draftName,
-                    };
-                }
-                if (attach.id === editingId && typeof attach.link === 'string') {
-                    return {
-                        ...attach,
-                        name: draftLink.name,
-                        link: draftLink.link,
-                    };
-                }
-                return attach;
-            });
-        });
-        setDraftName('');
-        setEditingId('');
-    };
-
-    return (
-        <AttachmentList
-            {...props}
-            attachments={currentAttachments}
-            editingIds={editingId ? [editingId] : []}
-            onDelete={(attach) =>
-                setCurrentAttachments((list) => list.filter((l) => l.id !== attach.id))
-            }
-            onEdit={(attachment) => {
-                props.onEdit?.(attachment);
-                setEditingId(attachment.id);
-                setDraftName(attachment.name);
-                if (typeof attachment.link === 'string') {
-                    setDraftLink({...draftLink, name: attachment.name, link: attachment.link});
-                }
-            }}
-            renderEditForm={(attachment) => {
-                const isLink = typeof attachment.link === 'string';
-
-                if (isLink) {
-                    return (
-                        <EditAttachmentItem
-                            onCancel={() => setEditingId('')}
-                            onAccept={handleAcceptDraft}
-                            values={draftLink}
-                            onChange={setDraftLink}
-                            tokens={[
-                                {value: 'default_database_logs', title: 'default_database_logs'},
-                                {value: 'default_yt', title: 'default_yt'},
-                                {value: 'default_yql', title: 'default_yql'},
-                                {
-                                    value: 'default_long_token_title',
-                                    title: 'default_long_token_title',
-                                },
-                            ]}
-                            type={'link'}
-                        />
-                    );
-                }
-
-                return (
-                    <EditAttachmentItem
-                        fileName={draftName}
-                        onChangeFileName={setDraftName}
-                        onCancel={() => setEditingId('')}
-                        onAccept={handleAcceptDraft}
-                        type={'file'}
-                    />
-                );
-            }}
-        />
-    );
-};
-
-/** Hover a row and click edit to replace it with a consumer-provided rename form. */
-export const CustomEditForm: Story = {
-    render: (args) => <EditableAttachmentList {...args} />,
-};
-
-const SortableAttachmentList = (props: AttachmentListProps) => {
-    const [orderedAttachments, setOrderedAttachments] = useState(props.attachments);
-
-    return (
-        <AttachmentList
-            {...props}
-            attachments={orderedAttachments}
-            onSortEnd={({oldIndex, newIndex}) => {
-                props.onSortEnd?.({oldIndex, newIndex});
-                setOrderedAttachments((current) => {
-                    const next = [...current];
-                    const [movedAttachment] = next.splice(oldIndex, 1);
-
-                    if (movedAttachment) {
-                        next.splice(newIndex, 0, movedAttachment);
-                    }
-
-                    return next;
-                });
-            }}
-        />
-    );
-};
-
-/** Drag attachments by the handle to reorder them using the inherited List sorting API. */
-export const Sortable: Story = {
-    args: {
-        sortable: true,
-        sortHandleAlign: 'left',
-        onSortEnd: fn(),
-    },
-    render: (args) => <SortableAttachmentList {...args} />,
-};
-
-/** Consumer-provided content is displayed when the attachment array is empty. */
-export const Empty: Story = {
-    args: {
-        attachments: [],
-        emptyPlaceholder: <Text color="secondary">No attachments yet</Text>,
-    },
-};
-
-/** The inherited loading state can be used while the attachment collection is being fetched. */
-export const Loading: Story = {
-    args: {
-        attachments: [],
-        loading: true,
-    },
-};

package/src/components/AttachmentList/AttachmentList.tsx

@@ -1,67 +0,0 @@
-import React, {ReactNode, useMemo} from 'react';
-import {Flex, List, ListProps} from '@gravity-ui/uikit';
-import {AttachmentItem, AttachmentItemProps} from './internal/AttachmentItem/AttachmentItem';
-import './AttachmentList.scss';
-
-export type AttachmentListProps = Omit<ListProps, 'items' | 'selectedItemIndex' | 'virtualized'> & {
-    attachments: AttachmentItemProps['attachment'][];
-    className?: string;
-    onDelete?: (attachment: AttachmentItemProps['attachment']) => void;
-    onEdit?: (attachment: AttachmentItemProps['attachment']) => void;
-    onRevert?: (attachment: AttachmentItemProps['attachment']) => void;
-
-    renderEditForm?: (attachment: AttachmentItemProps['attachment']) => ReactNode;
-
-    wasAddedIds?: string[];
-    wasEditedIds?: string[];
-
-    editingIds?: string[];
-
-    isDeleted?: boolean;
-};
-
-export const AttachmentList = ({
-    attachments,
-    onEdit,
-    onDelete,
-    onRevert,
-    wasAddedIds,
-    wasEditedIds,
-    editingIds,
-    renderEditForm,
-    className,
-    isDeleted,
-    ...listProps
-}: AttachmentListProps) => {
-    const addedIdsSet = useMemo(() => new Set(wasAddedIds), [wasAddedIds]);
-    const editedIdsSet = useMemo(() => new Set(wasEditedIds), [wasEditedIds]);
-    const editingIdsSet = useMemo(() => new Set(editingIds), [editingIds]);
-
-    return (
-        <Flex className={className} width="100%" height="100%">
-            <List<AttachmentListProps['attachments'][number]>
-                filterable={false}
-                virtualized={false}
-                items={attachments}
-                renderItem={(attachment) => {
-                    if (editingIdsSet.has(attachment.id)) {
-                        return renderEditForm?.(attachment);
-                    }
-
-                    return (
-                        <AttachmentItem
-                            attachment={attachment}
-                            wasAdded={addedIdsSet.has(attachment.id)}
-                            wasEdited={editedIdsSet.has(attachment.id)}
-                            onEdit={onEdit}
-                            onRevert={onRevert}
-                            onDelete={onDelete}
-                            isDeleted={isDeleted}
-                        />
-                    );
-                }}
-                {...listProps}
-            />
-        </Flex>
-    );
-};

package/src/components/AttachmentList/helpers/getIconByAttachmentName.ts

@@ -1,36 +0,0 @@
-import {AbbrQl, AbbrSql, FileCode, LayoutList, LogoNodejs, LogoPython} from '@gravity-ui/icons';
-import {LogoCPlusPlus} from '../../Icons';
-
-const iconMatcher = {
-    js: LogoNodejs,
-    ql: AbbrQl,
-    sql: AbbrSql,
-    yql: AbbrSql,
-    py: LogoPython,
-    csv: LayoutList,
-    xls: LayoutList,
-    xlsx: LayoutList,
-    cpp: LogoCPlusPlus,
-    unknown: FileCode,
-} as const;
-
-export const getAttachmentExtension = (attachmentName: string) => {
-    const name = attachmentName.split('/').pop();
-
-    if (name === undefined) return 'unknown';
-
-    const index = name?.lastIndexOf('.');
-
-    if (index === undefined) return 'unknown';
-
-    const extension = index > 0 ? name.slice(index + 1) : '';
-
-    if (extension in iconMatcher) return extension as keyof typeof iconMatcher;
-
-    return 'unknown';
-};
-
-export const getAttachmentIcon = (attachmentName: string) => {
-    const extension = getAttachmentExtension(attachmentName);
-    return iconMatcher[extension];
-};

package/src/components/AttachmentList/helpers/objectLinkValidator.ts

@@ -1,40 +0,0 @@
-import {stringRequiredValidator} from './stringRequiredValidator';
-
-export type EditLinkErrors = Partial<{
-    link: string;
-    token: string;
-    name: string;
-}>;
-
-export type ObjectLinkValidator = (
-    values: Record<string, unknown>,
-    isTokenRequired?: boolean,
-) => EditLinkErrors | null;
-
-export const objectLinkValidator = (values: Record<string, unknown>, isTokenRequired?: boolean) => {
-    const patchErrors: Partial<EditLinkErrors> = {};
-
-    const linkError = stringRequiredValidator(values.link);
-
-    if (linkError) {
-        patchErrors['link'] = linkError;
-    }
-
-    const tokenError = isTokenRequired ? stringRequiredValidator(values.token) : null;
-
-    if (tokenError) {
-        patchErrors['token'] = tokenError;
-    }
-
-    const nameError = stringRequiredValidator(values.name);
-
-    if (nameError) {
-        patchErrors['name'] = nameError;
-    }
-
-    if (Object.keys(patchErrors).length === 0) {
-        return null;
-    }
-
-    return patchErrors;
-};

package/src/components/AttachmentList/helpers/stringRequiredValidator.ts

@@ -1,24 +0,0 @@
-import i18n from '../i18n';
-
-const DEFAULT_MAX_LENGTH = 256;
-
-export type Validator = (value: unknown) => string | null;
-
-export const stringRequiredValidator: Validator = (
-    value: unknown,
-    maxLength: number = DEFAULT_MAX_LENGTH,
-) => {
-    if (typeof value !== 'string') {
-        return i18n('alert_value-must-be-string');
-    }
-
-    if (!value.trim()) {
-        return i18n('alert_required-field');
-    }
-
-    if (value.length > maxLength) {
-        return i18n('alert_max-length', {maxLength});
-    }
-
-    return null;
-};

package/src/components/AttachmentList/hooks/useKeyDownFormControl.ts

@@ -1,22 +0,0 @@
-export const useKeyDownFormControl = (onAccept: () => void, onCancel: () => void) => {
-    const handleInputKeyDown = (
-        event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,
-    ) => {
-        if (event.key === 'Enter' && !event.shiftKey) {
-            event.preventDefault();
-            onAccept();
-        }
-    };
-
-    const handleEditorKeyDown = (event: React.KeyboardEvent<'div'>) => {
-        if (event.key !== 'Escape' || event.nativeEvent.isComposing) {
-            return;
-        }
-
-        event.preventDefault();
-        event.stopPropagation();
-        onCancel?.();
-    };
-
-    return {handleInputKeyDown, handleEditorKeyDown};
-};

package/src/components/AttachmentList/hooks/useLabelRef.ts

@@ -1,25 +0,0 @@
-import {useLayoutEffect, useRef, useState} from 'react';
-
-export const useLabelRef = (labelText: string) => {
-    const labelRef = useRef<HTMLLabelElement>(null);
-    const [labelWidth, setLabelWidth] = useState(0);
-
-    useLayoutEffect(() => {
-        const label = labelRef.current;
-
-        if (!label) return undefined;
-
-        const updateLabelWidth = () => setLabelWidth(label.offsetWidth);
-
-        updateLabelWidth();
-
-        if (typeof ResizeObserver === 'undefined') return undefined;
-
-        const observer = new ResizeObserver(updateLabelWidth);
-        observer.observe(label);
-
-        return () => observer.disconnect();
-    }, [labelText]);
-
-    return {labelRef, labelWidth};
-};

package/src/components/AttachmentList/i18n/dicts.ts

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

package/src/components/AttachmentList/i18n/en.json

@@ -1,10 +0,0 @@
-{
-  "field_link": "Link:",
-  "field_token": "Token:",
-  "field_name": "Name:",
-  "action_save": "Save",
-  "action_cancel": "Cancel",
-  "alert_value-must-be-string": "Value must be a string",
-  "alert_required-field": "Required field",
-  "alert_max-length": "Maximum length is {{maxLength}}"
-}

package/src/components/AttachmentList/i18n/index.ts

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

package/src/components/AttachmentList/i18n/ru.json

@@ -1,10 +0,0 @@
-{
-  "field_link": "Ссылка:",
-  "field_token": "Токен:",
-  "field_name": "Имя:",
-  "action_save": "Сохранить",
-  "action_cancel": "Отменить",
-  "alert_value-must-be-string": "Значение должно быть строкой",
-  "alert_required-field": "Обязательное поле",
-  "alert_max-length": "Максимальная длина — {{maxLength}}"
-}

package/src/components/AttachmentList/index.ts

@@ -1,4 +0,0 @@
-export {AttachmentList} from './AttachmentList';
-export type {AttachmentListProps} from './AttachmentList';
-export * from './internal/EditAttachmentItem';
-export * from './internal/AttachmentItem';

package/src/components/AttachmentList/internal/AttachmentItem/AttachmentItem.scss

@@ -1,23 +0,0 @@
-.qp-attachment-item {
-    &__info {
-        flex: 1;
-        min-width: 0;
-    }
-
-    &__actions {
-        flex-shrink: 0;
-    }
-
-    &__attachment-name {
-        flex: 1;
-        min-width: 0;
-    }
-
-    &_wasAdded {
-        background-color: var(--g-color-base-positive-light);
-    }
-
-    &_wasEdited {
-        background-color: var(--g-color-base-info-light);
-    }
-}

package/src/components/AttachmentList/internal/AttachmentItem/AttachmentItem.tsx

@@ -1,75 +0,0 @@
-import React, {useMemo, useState} from 'react';
-import {Button, Flex, Icon, Text} from '@gravity-ui/uikit';
-import {ArrowRotateLeft, Link, Pencil, TrashBin} from '@gravity-ui/icons';
-import {getAttachmentIcon} from '../../helpers/getIconByAttachmentName';
-import cn from 'bem-cn-lite';
-import './AttachmentItem.scss';
-
-export type AttachmentItemProps = {
-    attachment: {id: string; name: string; link?: string};
-    wasEdited?: boolean;
-    wasAdded?: boolean;
-    onEdit?: (attachment: AttachmentItemProps['attachment']) => void;
-    onDelete?: (attachment: AttachmentItemProps['attachment']) => void;
-    onRevert?: (attachment: AttachmentItemProps['attachment']) => void;
-    isDeleted?: boolean;
-};
-
-const block = cn('qp-attachment-item');
-
-export const AttachmentItem = ({
-    attachment,
-    wasAdded,
-    wasEdited,
-    onEdit,
-    onDelete,
-    onRevert,
-    isDeleted,
-}: AttachmentItemProps) => {
-    const [isHovered, setIsHovered] = useState(false);
-
-    const attachmentIcon = useMemo(() => {
-        if (typeof attachment.link === 'string') return Link;
-        return getAttachmentIcon(attachment.name);
-    }, [attachment.name, attachment.link]);
-
-    return (
-        <Flex
-            width="100%"
-            height="32px"
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
-            alignItems="center"
-            justifyContent="space-between"
-            spacing={{px: 4}}
-            className={block({wasEdited, wasAdded})}
-        >
-            <Flex gap={2} alignItems="center" className={block('info')}>
-                <Icon width={16} className={block('attachment-icon')} data={attachmentIcon} />
-                <Text variant="body-1" ellipsis className={block('attachment-name')}>
-                    {attachment.name}
-                </Text>
-            </Flex>
-
-            {isHovered && !isDeleted && (
-                <Flex gap={1} className={block('actions')}>
-                    <Button size="s" view="flat" onClick={() => onEdit?.(attachment)}>
-                        <Icon data={Pencil} />
-                    </Button>
-
-                    <Button size="s" view="flat" onClick={() => onDelete?.(attachment)}>
-                        <Icon data={TrashBin} />
-                    </Button>
-                </Flex>
-            )}
-
-            {isHovered && isDeleted && (
-                <Flex gap={1} className={block('actions')}>
-                    <Button size="s" view="flat" onClick={() => onRevert?.(attachment)}>
-                        <Icon data={ArrowRotateLeft} />
-                    </Button>
-                </Flex>
-            )}
-        </Flex>
-    );
-};

package/src/components/AttachmentList/internal/AttachmentItem/index.ts

@@ -1,2 +0,0 @@
-export {AttachmentItem} from './AttachmentItem';
-export type {AttachmentItemProps} from './AttachmentItem';

package/src/components/AttachmentList/internal/EditAttachmentItem/EditAttachmentItem.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import {FileEdit} from './FileEdit';
-import {EditLinkItem} from './EditLinkItem';
-import type {EditFileItemProps} from './FileEdit';
-import type {EditLinkItemProps} from './EditLinkItem';
-
-export type EditAttachmentItemProps =
-    | (EditFileItemProps & {
-          type: 'file';
-      })
-    | (EditLinkItemProps & {
-          type: 'link';
-      });
-
-export const EditAttachmentItem = ({...props}: EditAttachmentItemProps) => {
-    if (props.type === 'file') {
-        return <FileEdit {...props} />;
-    }
-
-    return <EditLinkItem {...props} />;
-};

package/src/components/AttachmentList/internal/EditAttachmentItem/EditLinkItem.scss

@@ -1,21 +0,0 @@
-.edit-link-item {
-    &__link-field-container {
-        padding: 1px;
-    }
-
-    &__link-field-label {
-        position: absolute;
-        z-index: 1;
-        inset-block-start: calc(var(--g-spacing-1) + 1px);
-        inset-inline-start: var(--g-spacing-2);
-        font-weight: 600;
-    }
-
-    .g-select {
-        padding: 1px;
-    }
-
-    .g-text-input {
-        padding: 1px;
-    }
-}