fix: fix imports in attachments, import from package, change api of q…

package.json

@@ -2,7 +2,34 @@
   "name": "@gravity-ui/querieskit",
   "version": "1.3.0",
   "description": "Query page component library",
-  "main": "build/index.js",
+  "main": "./build/cjs/index.js",
+  "module": "./build/esm/index.js",
+  "types": "./build/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./build/esm/index.d.ts",
+        "default": "./build/esm/index.js"
+      },
+      "require": {
+        "types": "./build/cjs/index.d.ts",
+        "default": "./build/cjs/index.js"
+      }
+    },
+    "./build/esm": {
+      "types": "./build/esm/index.d.ts",
+      "default": "./build/esm/index.js"
+    },
+    "./build/cjs": {
+      "types": "./build/cjs/index.d.ts",
+      "default": "./build/cjs/index.js"
+    },
+    "./build/*": "./build/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "build"
+  ],
   "scripts": {
     "build": "app-builder build",
     "lint": "eslint",

src/components/AttachmentListPlaceholder/AttachmentListPlaceholder.tsx

@@ -1,8 +1,8 @@
 import React, {ReactNode} from 'react';
 import {Button, Flex, Icon, Link, Text} from '@gravity-ui/uikit';
+import {Folder} from '@gravity-ui/illustrations';
 import {Plus} from '@gravity-ui/icons';
 import cn from 'bem-cn-lite';
-import image from './assets/empty-attachments.svg';
 import i18n from './i18n';
 import './AttachmentListPlaceholder.scss';
 
@@ -44,7 +44,7 @@ export const AttachmentListPlaceholder = ({
             className={block(null, className)}
             data-qa={qa}
         >
-            <img src={`${image}`} alt="empty-attachments-image" />
+            <Folder height={100} width={100} />
 
             <Flex gap={1} direction="column" alignItems="center">
                 <Text variant="subheader-1">{title}</Text>

src/modules/HistoryLayout/HistoryLayout.tsx

@@ -6,7 +6,7 @@ import './HistoryLayout.scss';
 const block = cn('qp-history-layout');
 
 export type HistoryLayoutProps = {
-    title: ReactNode;
+    title?: ReactNode;
     logo?: ReactNode;
     actions?: ReactNode;
     header?: ReactNode;
@@ -33,7 +33,7 @@ export const HistoryLayout: FC<HistoryLayoutProps> = ({
                         {actions}
                     </Flex>
                 )}
-                <Text variant="subheader-1">{title}</Text>
+                {title !== null && <Text variant="subheader-1">{title}</Text>}
                 {header}
             </Flex>
             {children}

src/modules/RowsList/RowsList.scss

@@ -1,4 +1,7 @@
 .qp-rows-list {
+  height: 100%;
+  overflow: auto;
+
   .g-list__item_selected:hover {
     background-color: var(--g-color-base-selection-hover);
   }

src/types/queryList.ts

@@ -9,7 +9,7 @@ export type QueryListRowRenderProps = {height: number};
 export type QueryListHeader = {header: string} & QueryListRowRenderProps;
 
 export type QueryListRow = {
-    id: number;
+    id: number | string;
     title: string;
     query?: string;
     href?: string;

src/widgets/QueriesHistory/QueriesHistory.stories.tsx

@@ -1,5 +1,6 @@
 import React, {useState} from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
+import {SegmentedRadioGroup} from '@gravity-ui/uikit';
 import {QueriesHistory} from './QueriesHistory';
 import {
     QueryListFieldKey,
@@ -76,6 +77,36 @@ const BASE_ITEMS: QueryListItem<QueryHistoryRow>[] = [
         query: QUERY,
         height: 52,
     },
+    {
+        id: 6,
+        title: 'Query 6',
+        status: 'draft',
+        engine: 'YQL',
+        mode: 'Test',
+        startTime: now - 30 * 60 * min,
+        query: QUERY,
+        height: 52,
+    },
+    {
+        id: 7,
+        title: 'Query 7',
+        status: 'draft',
+        engine: 'YQL',
+        mode: 'Test',
+        startTime: now - 30 * 60 * min,
+        query: QUERY,
+        height: 52,
+    },
+    {
+        id: 8,
+        title: 'Query 8',
+        status: 'draft',
+        engine: 'YQL',
+        mode: 'Test',
+        startTime: now - 30 * 60 * min,
+        query: QUERY,
+        height: 52,
+    },
 ];
 
 type VisibleFields = QueryListVisibleFieldsConfig<QueryHistoryRow>['fields'];
@@ -136,6 +167,17 @@ const meta: Meta<typeof QueriesHistory> = {
     },
 };
 
+const operationFilterOptions = [
+    {
+        value: 'My',
+        content: 'My',
+    },
+    {
+        value: 'All',
+        content: 'All',
+    },
+];
+
 export default meta;
 type Story = StoryObj<typeof QueriesHistory>;
 
@@ -145,8 +187,8 @@ const DefaultStory = () => {
     const [visibleFields, setVisibleFields] =
         useState<QueryListFieldKey<QueryHistoryRow>[]>(activeFields);
     const [compareMode, setCompareMode] = useState(false);
-    const [comparedRows, setComparedRows] = useState<number[]>([]);
-    const [editingId, setEditingId] = useState<number | undefined>(undefined);
+    const [comparedRows, setComparedRows] = useState<(number | string)[]>([]);
+    const [editingId, setEditingId] = useState<number | string | undefined>(undefined);
 
     const handleCompareChange = (item: QueryHistoryRow, selected: boolean) => {
         const result = selected
@@ -272,5 +314,33 @@ const EmptyStory = () => {
     );
 };
 
+const WithHeaderStory = () => {
+    const [search, setSearch] = useState({value: '', fullSearch: false});
+    const [visibleFields, setVisibleFields] =
+        useState<QueryListFieldKey<QueryHistoryRow>[]>(activeFields);
+
+    return (
+        <div style={{width: 300, height: 500}}>
+            <QueriesHistory
+                items={BASE_ITEMS}
+                logo={<SegmentedRadioGroup options={operationFilterOptions} />}
+                visibleFields={{value: visibleFields, fields, onChange: setVisibleFields}}
+                filter={{
+                    fields: filterFields,
+                    onApply: logFilterApply,
+                    onReset: logFilterReset('reset'),
+                }}
+                search={{
+                    value: search.value,
+                    fullSearch: search.fullSearch,
+                    hasClear: true,
+                    onUpdate: setSearch,
+                }}
+            />
+        </div>
+    );
+};
+
 export const Default: Story = {render: () => <DefaultStory />};
 export const Empty: Story = {render: () => <EmptyStory />};
+export const WithHeader: Story = {render: () => <WithHeaderStory />};

src/widgets/QueriesHistory/QueriesHistory.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
 import {QueriesList} from '../../modules';
-import i18n from './i18n';
 import {
     QueryListComparisonConfig,
     QueryListEditingConfig,
@@ -52,7 +51,7 @@ export const QueriesHistory = <T extends QueryHistoryRow>({
     return (
         <QueriesList
             className={block(null, className)}
-            title={title || i18n('title_history')}
+            title={title}
             logo={logo}
             search={search}
             filter={filter}

src/widgets/SavedQueries/SavedQueries.stories.tsx

@@ -86,8 +86,8 @@ const SavedQueriesStory = () => {
         'engine',
         'author',
     ]);
-    const [comparedRowIds, setComparedRowIds] = useState<number[]>([]);
-    const [editingRowId, setEditingRowId] = useState<number>();
+    const [comparedRowIds, setComparedRowIds] = useState<(number | string)[]>([]);
+    const [editingRowId, setEditingRowId] = useState<number | string>();
 
     const filteredItems = useMemo(() => {
         if (!search.value) return items;