@gravity-ui/querieskit 1.0.1

package/src/widgets/TutorialsHistory/TutorialsHistory.stories.tsx

@@ -0,0 +1,135 @@
+import React, {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+import {TutorialsHistory} from './TutorialsHistory';
+import {QueryHistoryFilterConfig, QueryHistoryItem} from '../../types/history';
+import {TutorialHistoryRow} from '../../types/tutorial';
+import {action} from 'storybook/actions';
+
+const QUERY = `use test;
+
+SELECT
+    "test_session" AS session_id,
+    "test_task" AS task_id,
+    SUBSTRING("test", 1, 1) AS truncated_char`;
+
+const filterFields: QueryHistoryFilterConfig['fields'] = [
+    {id: 'onlyMine', type: 'switch', title: 'My queries only', initialValue: true},
+    {id: 'range', type: 'rangeDatePicker', title: 'Period'},
+    {
+        id: 'dialect',
+        type: 'checkboxGroup',
+        title: 'Dialect',
+        initialValue: [],
+        items: [
+            {id: 'yql', title: 'YQL'},
+            {id: 'sql', title: 'SQL'},
+        ],
+    },
+];
+
+const logFilterApply = action('onFilterApply');
+const logFilterReset = action('onFilterReset');
+
+const BASE_ITEMS: QueryHistoryItem<TutorialHistoryRow>[] = [
+    {
+        id: 1,
+        title: 'Getting started with YQL',
+        query: QUERY,
+        height: 28,
+    },
+    {
+        id: 2,
+        title: 'Working with tables',
+        query: QUERY,
+        height: 28,
+    },
+    {
+        id: 3,
+        title: 'Window functions',
+        query: QUERY,
+        height: 28,
+    },
+];
+
+const meta: Meta<typeof TutorialsHistory> = {
+    title: 'Widgets/TutorialsHistory',
+    component: TutorialsHistory,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof TutorialsHistory>;
+
+const DefaultStory = () => {
+    const [items, setItems] = useState([...BASE_ITEMS]);
+    const [search, setSearch] = useState({value: '', fullSearch: false});
+
+    const handleOnSearch = (data: {value: string; fullSearch: boolean}) => {
+        setSearch(data);
+
+        if (!data.value) {
+            setItems(BASE_ITEMS);
+            return;
+        }
+
+        const newItems = BASE_ITEMS.filter((item) => {
+            if (!('id' in item)) return false;
+
+            const title = item.title.toLowerCase();
+            const query = item.query?.toLowerCase();
+            const searchValue = data.value.toLowerCase();
+
+            if (data.fullSearch) {
+                return title.includes(searchValue) || query?.includes(searchValue);
+            }
+
+            return title.includes(searchValue);
+        });
+        setItems(newItems);
+    };
+
+    return (
+        <div style={{width: 300, height: 500}}>
+            <TutorialsHistory
+                title="Tutorials"
+                items={items}
+                filter={{
+                    fields: filterFields,
+                    onApply: logFilterApply,
+                    onReset: logFilterReset('reset'),
+                }}
+                search={{
+                    value: search.value,
+                    fullSearch: search.fullSearch,
+                    hasClear: true,
+                    onUpdate: handleOnSearch,
+                }}
+            />
+        </div>
+    );
+};
+
+const EmptyStory = () => {
+    const [search, setSearch] = useState({value: '', fullSearch: false});
+
+    return (
+        <div style={{width: 300, height: 500}}>
+            <TutorialsHistory
+                title="Tutorials"
+                items={[]}
+                search={{
+                    value: search.value,
+                    fullSearch: search.fullSearch,
+                    hasClear: true,
+                    onUpdate: setSearch,
+                }}
+            />
+        </div>
+    );
+};
+
+export const Default: Story = {render: () => <DefaultStory />};
+export const Empty: Story = {render: () => <EmptyStory />};

package/src/widgets/TutorialsHistory/TutorialsHistory.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {HistoryHeader, HistoryLayout, RowsList} from '../../modules';
+import i18n from './i18n';
+import {
+    QueryHistoryFilterConfig,
+    QueryHistoryItem,
+    QueryHistorySearchConfig,
+} from '../../types/history';
+import {TutorialHistoryRow} from '../../types/tutorial';
+import {getListKey} from '../../helpers/getListKey';
+import {TutorialRowContent} from './TutorialRowContent';
+import cn from 'bem-cn-lite';
+
+export type TutorialsHistoryProps<T extends TutorialHistoryRow = TutorialHistoryRow> = {
+    className?: string;
+    title?: string;
+    logo?: React.ReactNode;
+    search: QueryHistorySearchConfig;
+    filter?: QueryHistoryFilterConfig;
+    items: QueryHistoryItem<T>[];
+    selectedRowId?: T['id'];
+    onListItemClick?: (item: QueryHistoryItem<T>) => void;
+};
+
+const block = cn('qp-tutorials-history');
+
+export const TutorialsHistory = <T extends TutorialHistoryRow>({
+    title,
+    logo,
+    search,
+    filter,
+    items,
+    selectedRowId,
+    onListItemClick,
+    className,
+}: TutorialsHistoryProps<T>) => {
+    const showSearchResults = Boolean(search.fullSearch && search.value?.trim());
+    const rowVariant = showSearchResults ? 'search' : 'default';
+
+    return (
+        <HistoryLayout
+            className={block(null, className)}
+            title={title || i18n('title_tutorials')}
+            logo={logo}
+            header={
+                <HistoryHeader
+                    search={search.value}
+                    fullSearch={search.fullSearch}
+                    hasClear={search.hasClear}
+                    filter={filter}
+                    onUpdate={search.onUpdate}
+                />
+            }
+        >
+            <RowsList
+                key={getListKey(items, rowVariant)}
+                items={items}
+                rowVariant={rowVariant}
+                selectedRowId={selectedRowId}
+                renderRow={(data) => <TutorialRowContent {...data} />}
+                showFiltersHint={Boolean(filter)}
+                onItemClick={onListItemClick}
+            />
+        </HistoryLayout>
+    );
+};

package/src/widgets/TutorialsHistory/i18n/dicts.ts

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

package/src/widgets/TutorialsHistory/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "title_tutorials": "Tutorials"
+}

package/src/widgets/TutorialsHistory/i18n/index.ts

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

package/src/widgets/TutorialsHistory/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+    "title_tutorials": "Туториалы"
+}

package/src/widgets/TutorialsHistory/index.ts

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

package/src/widgets/index.ts

@@ -0,0 +1,4 @@
+export {QueriesHistory} from './QueriesHistory';
+export type {QueriesHistoryProps} from './QueriesHistory';
+export {TutorialsHistory} from './TutorialsHistory';
+export type {TutorialsHistoryProps} from './TutorialsHistory';

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "extends": "@gravity-ui/tsconfig/tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./build/",
+        "rootDir": "src",
+        "target": "es2020",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "noEmitOnError": true,
+        "allowJs": true,
+        "esModuleInterop": true,
+        "experimentalDecorators": true,
+        "typeRoots": ["./node_modules/@types"],
+        "skipLibCheck": true,
+        "jsx": "react",
+        "declaration": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "build"]
+}

package/tsconfig.publish.json

@@ -0,0 +1,11 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "build/esm",
+        "declaration": true,
+        "emitDeclarationOnly": true,
+        "noEmit": false
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "build", "**/*.visual.test.tsx"]
+}