@gravity-ui/querieskit 1.1.0 → 1.3.0

package/build/esm/widgets/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["QueriesHistory","DashboardCharts","TutorialsHistory","QueriesNavigation","createTableDetailConfig","createNavigationDetailResolver"],"sources":["index.ts"],"sourcesContent":["export {QueriesHistory} from './QueriesHistory';\nexport type {QueriesHistoryProps} from './QueriesHistory';\nexport {DashboardCharts} from './DashboardCharts';\nexport {TutorialsHistory} from './TutorialsHistory';\nexport type {TutorialsHistoryProps} from './TutorialsHistory';\nexport {\n    QueriesNavigation,\n    createTableDetailConfig,\n    createNavigationDetailResolver,\n} from './QueriesNavigation';\nexport type {\n    QueriesNavigationProps,\n    CreateTableDetailConfigOptions,\n    NavigationPreviewResolver,\n    NavigationSchemaResolver,\n} from './QueriesNavigation';\n"],"mappings":"AAAA,SAAQA,cAAc;AAEtB,SAAQC,eAAe;AACvB,SAAQC,gBAAgB;AAExB,SACIC,iBAAiB,EACjBC,uBAAuB,EACvBC,8BAA8B","ignoreList":[]}
+{"version":3,"names":["QueriesHistory","SavedQueries","DashboardCharts","TutorialsHistory","QueryResults","QueriesNavigation","createTableDetailConfig","createNavigationDetailResolver"],"sources":["index.ts"],"sourcesContent":["export {QueriesHistory} from './QueriesHistory';\nexport type {QueriesHistoryProps} from './QueriesHistory';\nexport {SavedQueries} from './SavedQueries';\nexport type {SavedQueriesProps} from './SavedQueries';\nexport {DashboardCharts} from './DashboardCharts';\nexport {TutorialsHistory} from './TutorialsHistory';\nexport type {TutorialsHistoryProps} from './TutorialsHistory';\nexport {QueryResults} from './QueryResults';\nexport type {QueryResultsProps} from './QueryResults';\nexport {\n    QueriesNavigation,\n    createTableDetailConfig,\n    createNavigationDetailResolver,\n} from './QueriesNavigation';\nexport type {\n    QueriesNavigationProps,\n    CreateTableDetailConfigOptions,\n    NavigationPreviewResolver,\n    NavigationSchemaResolver,\n} from './QueriesNavigation';\n"],"mappings":"AAAA,SAAQA,cAAc;AAEtB,SAAQC,YAAY;AAEpB,SAAQC,eAAe;AACvB,SAAQC,gBAAgB;AAExB,SAAQC,YAAY;AAEpB,SACIC,iBAAiB,EACjBC,uBAAuB,EACvBC,8BAA8B","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/querieskit",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Query page component library",
   "main": "build/index.js",
   "scripts": {

package/plans/styles-rules.md

@@ -0,0 +1,137 @@
+# Правила владения SCSS-стилями
+
+Подробные правила для агентов, работающих со стилями в `@gravity-ui/querieskit`. Краткая обязательная выжимка находится в разделе [`## Styles`](../AGENTS.md) файла `AGENTS.md`.
+
+## Структура
+
+Каждый компонент, модуль или виджет, которому нужны стили, хранит одноимённый SCSS-файл рядом с файлом реализации и самостоятельно импортирует его:
+
+```text
+ComponentName/
+  ComponentName.tsx
+  ComponentName.scss
+  index.ts
+```
+
+```tsx
+// Child.tsx
+import cn from 'bem-cn-lite';
+
+import './Child.scss';
+
+const block = cn('qp-child');
+
+export type ChildProps = {
+    className?: string;
+};
+
+export const Child = ({className}: ChildProps) => (
+    <div className={block(null, className)}>...</div>
+);
+```
+
+```scss
+// Child.scss
+.qp-child {
+  // Внутренние стили Child.
+}
+```
+
+Если компоненту не нужны собственные стили, создавать пустой SCSS-файл не требуется.
+
+## Flex-раскладка
+
+Для flexbox-раскладки в приоритете компонент `Flex` из `@gravity-ui/uikit`. Если нужное поведение выражается его пропсами, следует задать направление, расстояние между детьми и выравнивание прямо в JSX, не дублируя их через `display: flex` в SCSS:
+
+```tsx
+import {Flex} from '@gravity-ui/uikit';
+
+export const Parent = () => (
+    <Flex direction="column" gap={2} alignItems="center">
+        <Child />
+        <AnotherChild />
+    </Flex>
+);
+```
+
+Не следует без необходимости заменять такую раскладку отдельным классом:
+
+```scss
+// Parent.scss — не нужно, если достаточно пропсов Flex
+.qp-parent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+```
+
+SCSS остаётся допустимым, когда API `Flex` не может выразить требуемое поведение: например, для псевдоклассов, вложенных селекторов, BEM-модификаторов состояния или отдельных правил внешней геометрии дочернего компонента. В таких случаях продолжают действовать правила владения стилями и передачи `className`.
+
+## Владение стилями
+
+Компонент владеет своим внутренним оформлением: размерами и расположением собственных элементов, цветами, состояниями, внутренними отступами и своим BEM-блоком. Его SCSS импортируется из его же файла реализации, поэтому компонент корректно выглядит независимо от того, через какого родителя он был отрендерен.
+
+Родитель владеет компоновкой своих детей: расположением относительно контейнера и соседних элементов, участием в grid/flex-раскладке и внешней геометрией, необходимой конкретному сценарию. Сначала следует использовать `Flex` и возможности его API, например `gap` и `alignItems`; для grid-раскладки — подходящий контейнер. Если стиль нужно применить непосредственно к корневому элементу ребёнка, родитель передаёт собственный BEM-элемент через `className`:
+
+```tsx
+// Parent.tsx
+import cn from 'bem-cn-lite';
+
+import {Child} from '../Child';
+import './Parent.scss';
+
+const block = cn('qp-parent');
+
+export const Parent = () => <Child className={block('child')} />;
+```
+
+```scss
+// Parent.scss
+.qp-parent {
+  &__child {
+    flex-shrink: 0;
+  }
+}
+```
+
+`Child` обязан объединить переданный `className` со своим корневым классом, а не заменить один класс другим. Текущий пример такого взаимодействия — [`HistorySearchRow`](../src/modules/HistorySearchRow/HistorySearchRow.tsx), который передаёт `className={block('icon')}` в [`QueryStatusIcon`](../src/components/QueryStatusIcon/QueryStatusIcon.tsx), а правило внешней компоновки хранит в [`HistorySearchRow.scss`](../src/modules/HistorySearchRow/HistorySearchRow.scss).
+
+## Запрещённый паттерн
+
+Нельзя складывать собственные стили дочерних компонентов в один SCSS-файл родителя и рассчитывать, что они загрузятся только потому, что родитель импортирует этот файл:
+
+```scss
+// Parent.scss — запрещено
+.qp-child {
+  width: 100%;
+
+  &__title {
+    min-width: 0;
+  }
+}
+
+.qp-another-child {
+  padding: var(--g-spacing-2);
+}
+```
+
+Такой подход связывает внешний вид ребёнка с конкретным родителем: при самостоятельном использовании или переносе ребёнка его стили не загрузятся. Родительский SCSS должен описывать BEM-блок родителя и его элементы, но не BEM-блоки самостоятельных дочерних компонентов.
+
+В текущем коде есть исторические нарушения этого правила:
+
+- [`ClustersList.scss`](../src/modules/ClustersList/ClustersList.scss) объявляет блок `.qp-cluster-row`, принадлежащий [`ClusterRow`](../src/components/ClusterRow/ClusterRow.tsx).
+- [`NavigationItemsList.scss`](../src/modules/NavigationItemsList/NavigationItemsList.scss) объявляет блок `.qp-navigation-item-row`, принадлежащий [`NavigationItemRow`](../src/components/NavigationItemRow/NavigationItemRow.tsx).
+
+Эти места зафиксированы как анти-примеры и не должны использоваться как образец для нового кода. Их исправление выполняется отдельно.
+
+## Чек-лист
+
+1. У каждого компонента со своими стилями есть одноимённый SCSS-файл рядом с `.tsx`.
+2. Компонент самостоятельно импортирует свой SCSS-файл.
+3. SCSS компонента объявляет его собственный BEM-блок, а не блоки самостоятельных дочерних компонентов.
+4. Внутреннее оформление ребёнка остаётся у ребёнка; родитель описывает только компоновку своего сценария.
+5. Flexbox-раскладка сначала выражается через `Flex` из `@gravity-ui/uikit`; `display: flex` в SCSS используется только при недостаточности его API.
+6. Для расстояний между детьми сначала используется `gap` компонента `Flex` или другое свойство подходящего контейнера.
+7. Если родителю нужен класс на корневом элементе ребёнка, ребёнок принимает `className` и объединяет его со своим BEM-классом.
+8. Переданный родителем класс является элементом BEM-блока родителя, например `qp-parent__child`.

package/src/components/AttachmentList/AttachmentList.scss

@@ -0,0 +1,25 @@
+.qp-attachment-list {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &__item {
+        min-width: 0;
+    }
+
+    &__button {
+        --g-button-padding: var(--g-spacing-2);
+
+        min-width: 0;
+        justify-content: flex-start;
+        text-align: start;
+
+        &_active {
+            --g-button-background-color: var(--g-color-base-selection);
+            --g-button-background-color-hover: var(--g-color-base-selection-hover);
+        }
+    }
+}

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

@@ -0,0 +1,243 @@
+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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,25 @@
+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

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

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

@@ -0,0 +1,10 @@
+{
+  "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

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