@gravity-ui/querieskit 1.5.1 → 1.7.0

package/build/cjs/widgets/TutorialsHistory/TutorialsHistory.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_modules","_i18n","_getListKey","_TutorialRowContent","_bemCnLite","_jsxRuntime","e","__esModule","default","block","cn","TutorialsHistory","exports","_ref","_search$value","title","logo","search","filter","items","selectedRowId","onListItemClick","className","fullSearchAvailable","showSearchResults","Boolean","fullSearch","value","trim","rowVariant","_jsx","HistoryLayout","i18n","header","HistoryHeader","hasClear","onUpdate","children","RowsList","renderRow","data","TutorialRowContent","_objectSpread","showFiltersHint","onItemClick","getListKey"],"sources":["TutorialsHistory.tsx"],"sourcesContent":["import React from 'react';\nimport {HistoryHeader, HistoryLayout, RowsList} from '../../modules';\nimport i18n from './i18n';\nimport {QueryListFilterConfig, QueryListItem, QueryListSearchConfig} from '../../types/queryList';\nimport {TutorialHistoryRow} from '../../types/tutorial';\nimport {getListKey} from '../../helpers/getListKey';\nimport {TutorialRowContent} from './TutorialRowContent';\nimport cn from 'bem-cn-lite';\nimport './TutorialsHistory.scss';\n\nexport type TutorialsHistoryProps<T extends TutorialHistoryRow = TutorialHistoryRow> = {\n    className?: string;\n    title?: string;\n    logo?: React.ReactNode;\n    search: QueryListSearchConfig;\n    filter?: QueryListFilterConfig;\n    items: QueryListItem<T>[];\n    selectedRowId?: T['id'];\n    onListItemClick?: (item: QueryListItem<T>) => void;\n};\n\nconst block = cn('qp-tutorials-history');\n\nexport const TutorialsHistory = <T extends TutorialHistoryRow>({\n    title,\n    logo,\n    search,\n    filter,\n    items,\n    selectedRowId,\n    onListItemClick,\n    className,\n}: TutorialsHistoryProps<T>) => {\n    const fullSearchAvailable = search.fullSearchAvailable !== false;\n    const showSearchResults = Boolean(\n        fullSearchAvailable && search.fullSearch && search.value?.trim(),\n    );\n    const rowVariant = showSearchResults ? 'search' : 'default';\n\n    return (\n        <HistoryLayout\n            className={block(null, className)}\n            title={title || i18n('title_tutorials')}\n            logo={logo}\n            header={\n                <HistoryHeader\n                    search={search.value}\n                    fullSearch={search.fullSearch}\n                    fullSearchAvailable={fullSearchAvailable}\n                    hasClear={search.hasClear}\n                    filter={filter}\n                    onUpdate={search.onUpdate}\n                />\n            }\n        >\n            <RowsList\n                key={getListKey(items, rowVariant)}\n                items={items}\n                rowVariant={rowVariant}\n                selectedRowId={selectedRowId}\n                renderRow={(data) => <TutorialRowContent {...data} />}\n                showFiltersHint={Boolean(filter)}\n                onItemClick={onListItemClick}\n            />\n        </HistoryLayout>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AAGA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,mBAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAN,sBAAA,CAAAC,OAAA;AACAA,OAAA;AAAiC,IAAAM,WAAA,GAAAN,OAAA;AAAA,SAAAD,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAajC,IAAMG,KAAK,GAAG,IAAAC,kBAAE,EAAC,sBAAsB,CAAC;AAEjC,IAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,SAAnBA,gBAAgBA,CAAAE,IAAA,EASG;EAAA,IAAAC,aAAA;EAAA,IAR5BC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACJC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IACNC,MAAM,GAAAL,IAAA,CAANK,MAAM;IACNC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,aAAa,GAAAP,IAAA,CAAbO,aAAa;IACbC,eAAe,GAAAR,IAAA,CAAfQ,eAAe;IACfC,SAAS,GAAAT,IAAA,CAATS,SAAS;EAET,IAAMC,mBAAmB,GAAGN,MAAM,CAACM,mBAAmB,KAAK,KAAK;EAChE,IAAMC,iBAAiB,GAAGC,OAAO,CAC7BF,mBAAmB,IAAIN,MAAM,CAACS,UAAU,MAAAZ,aAAA,GAAIG,MAAM,CAACU,KAAK,cAAAb,aAAA,uBAAZA,aAAA,CAAcc,IAAI,CAAC,CAAC,CACpE,CAAC;EACD,IAAMC,UAAU,GAAGL,iBAAiB,GAAG,QAAQ,GAAG,SAAS;EAE3D,oBACI,IAAAM,eAAA,EAACC,sBAAa;IACVT,SAAS,EAAEb,KAAK,CAAC,IAAI,EAAEa,SAAS,CAAE;IAClCP,KAAK,EAAEA,KAAK,IAAI,IAAAiB,aAAI,EAAC,iBAAiB,CAAE;IACxChB,IAAI,EAAEA,IAAK;IACXiB,MAAM,eACF,IAAAH,eAAA,EAACI,sBAAa;MACVjB,MAAM,EAAEA,MAAM,CAACU,KAAM;MACrBD,UAAU,EAAET,MAAM,CAACS,UAAW;MAC9BH,mBAAmB,EAAEA,mBAAoB;MACzCY,QAAQ,EAAElB,MAAM,CAACkB,QAAS;MAC1BjB,MAAM,EAAEA,MAAO;MACfkB,QAAQ,EAAEnB,MAAM,CAACmB;IAAS,CAC7B,CACJ;IAAAC,QAAA,eAED,IAAAP,eAAA,EAACQ,iBAAQ;MAELnB,KAAK,EAAEA,KAAM;MACbU,UAAU,EAAEA,UAAW;MACvBT,aAAa,EAAEA,aAAc;MAC7BmB,SAAS,EAAE,SAAXA,SAASA,CAAGC,IAAI;QAAA,oBAAK,IAAAV,eAAA,EAACW,sCAAkB,MAAAC,sBAAA,MAAKF,IAAI,CAAG,CAAC;MAAA,CAAC;MACtDG,eAAe,EAAElB,OAAO,CAACP,MAAM,CAAE;MACjC0B,WAAW,EAAEvB;IAAgB,GANxB,IAAAwB,sBAAU,EAAC1B,KAAK,EAAEU,UAAU,CAOpC;EAAC,CACS,CAAC;AAExB,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_HistoryHeader","_HistoryLayout","_RowsList","_i18n","_useListKey","_TutorialRowContent","_bemCnLite","_jsxRuntime","e","__esModule","default","block","cn","TutorialsHistory","exports","_ref","_search$value","title","logo","search","filter","items","selectedRowId","renderRowItem","onListItemClick","hasMore","loading","onLoadMore","renderLink","className","fullSearchAvailable","showSearchResults","Boolean","fullSearch","value","trim","rowVariant","listKey","useListKey","_jsx","HistoryLayout","i18n","header","HistoryHeader","hasClear","onUpdate","children","RowsList","renderRow","data","TutorialRowContent","_objectSpread","showFiltersHint","onItemClick"],"sources":["TutorialsHistory.tsx"],"sourcesContent":["import React from 'react';\nimport {HistoryHeader} from '../../modules/HistoryHeader';\nimport {HistoryLayout} from '../../modules/HistoryLayout';\nimport {RowsList} from '../../modules/RowsList';\nimport i18n from './i18n';\nimport type {\n    QueryListFilterConfig,\n    QueryListItem,\n    QueryListLinkRenderer,\n    QueryListRowRenderData,\n    QueryListSearchConfig,\n} from '../../types/queryList';\nimport type {TutorialHistoryRow} from '../../types/tutorial';\nimport {useListKey} from '../../helpers/useListKey';\nimport {TutorialRowContent} from './TutorialRowContent';\nimport cn from 'bem-cn-lite';\nimport './TutorialsHistory.scss';\n\nexport type TutorialsHistoryProps<T extends TutorialHistoryRow = TutorialHistoryRow> = {\n    className?: string;\n    title?: string;\n    logo?: React.ReactNode;\n    search: QueryListSearchConfig;\n    filter?: QueryListFilterConfig;\n    items: QueryListItem<T>[];\n    selectedRowId?: T['id'];\n    renderRowItem?: (data: QueryListRowRenderData<T>) => React.ReactNode;\n    onListItemClick?: (item: QueryListItem<T>) => void;\n    hasMore?: boolean;\n    loading?: boolean;\n    onLoadMore?: () => void;\n    renderLink?: QueryListLinkRenderer;\n};\n\nconst block = cn('qp-tutorials-history');\n\nexport const TutorialsHistory = <T extends TutorialHistoryRow>({\n    title,\n    logo,\n    search,\n    filter,\n    items,\n    selectedRowId,\n    renderRowItem,\n    onListItemClick,\n    hasMore,\n    loading,\n    onLoadMore,\n    renderLink,\n    className,\n}: TutorialsHistoryProps<T>) => {\n    const fullSearchAvailable = search.fullSearchAvailable !== false;\n    const showSearchResults = Boolean(\n        fullSearchAvailable && search.fullSearch && search.value?.trim(),\n    );\n    const rowVariant = showSearchResults ? 'search' : 'default';\n    const listKey = useListKey(items, rowVariant, Boolean(onLoadMore));\n\n    return (\n        <HistoryLayout\n            className={block(null, className)}\n            title={title || i18n('title_tutorials')}\n            logo={logo}\n            header={\n                <HistoryHeader\n                    search={search.value}\n                    fullSearch={search.fullSearch}\n                    fullSearchAvailable={fullSearchAvailable}\n                    hasClear={search.hasClear}\n                    filter={filter}\n                    onUpdate={search.onUpdate}\n                />\n            }\n        >\n            <RowsList\n                key={listKey}\n                items={items}\n                rowVariant={rowVariant}\n                selectedRowId={selectedRowId}\n                renderRow={(data) =>\n                    renderRowItem ? renderRowItem(data) : <TutorialRowContent {...data} />\n                }\n                showFiltersHint={Boolean(filter)}\n                hasMore={hasMore}\n                loading={loading}\n                onLoadMore={onLoadMore}\n                renderLink={renderLink}\n                onItemClick={onListItemClick}\n            />\n        </HistoryLayout>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/build/cjs/widgets/TutorialsHistory/TutorialsHistory.stories.d.ts

@@ -5,3 +5,8 @@ export default meta;
 type Story = StoryObj<typeof TutorialsHistory>;
 export declare const Default: Story;
 export declare const Empty: Story;
+export declare const InitialLoading: Story;
+export declare const Paginated: Story;
+export declare const LoadingMore: Story;
+export declare const RouterLinks: Story;
+export declare const CustomRowRenderer: Story;

package/build/cjs/widgets/TutorialsHistory/TutorialsHistory.stories.js

@@ -3,19 +3,46 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Empty = exports.Default = void 0;
+exports.default = exports.RouterLinks = exports.Paginated = exports.LoadingMore = exports.InitialLoading = exports.Empty = exports.Default = exports.CustomRowRenderer = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.from.js");
 require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.map.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/web.timers.js");
 var _react = _interopRequireWildcard(require("react"));
+var _uikit = require("@gravity-ui/uikit");
+var _components = require("../../components");
 var _TutorialsHistory = require("./TutorialsHistory");
 var _actions = require("storybook/actions");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _excluded = ["onClick"];
+var BookOpenIcon = function BookOpenIcon(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M7.345 2.634q.136.069.268.145L8 3l.387-.221q.133-.076.268-.145a6.7 6.7 0 0 1 6.052-.03c.486.242.793.74.793 1.283v8.938c0 .65-.526 1.175-1.175 1.175h-.04c-.187 0-.37-.05-.529-.146a4.8 4.8 0 0 0-4.61-.177l-.199.1A2.1 2.1 0 0 1 8 14h-.117a1.6 1.6 0 0 1-.726-.171l-.233-.117a4.94 4.94 0 0 0-4.748.183.74.74 0 0 1-.381.105h-.12A1.175 1.175 0 0 1 .5 12.825V3.887c0-.543.307-1.04.793-1.284a6.7 6.7 0 0 1 6.052.03m1.405 9.572V4.3l.382-.218A5.2 5.2 0 0 1 14 3.927v8.357a6.3 6.3 0 0 0-5.25-.078m-1.5.005V4.299l-.382-.218A5.2 5.2 0 0 0 2 3.927v8.365a6.44 6.44 0 0 1 5.25-.082",
+      clipRule: "evenodd"
+    })
+  }));
+};
+BookOpenIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  fill: "none",
+  viewBox: "0 0 16 16"
+};
 var QUERY = "use test;\n\nSELECT\n    \"test_session\" AS session_id,\n    \"test_task\" AS task_id,\n    SUBSTRING(\"test\", 1, 1) AS truncated_char";
 var filterFields = [{
   id: 'onlyMine',
@@ -57,6 +84,56 @@ var BASE_ITEMS = [{
   query: QUERY,
   height: 28
 }];
+var LINK_ITEMS = BASE_ITEMS.map(function (item) {
+  return 'id' in item ? (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+    href: "/tutorials/".concat(item.id)
+  }) : item;
+});
+var PAGINATION_PAGES = [Array.from({
+  length: 8
+}, function (_, index) {
+  return {
+    id: "basics-".concat(index + 1),
+    title: "YQL basics: lesson ".concat(index + 1),
+    query: QUERY,
+    href: "/tutorials/basics-".concat(index + 1),
+    height: 28
+  };
+}), Array.from({
+  length: 8
+}, function (_, index) {
+  return {
+    id: "advanced-".concat(index + 1),
+    title: "Advanced YQL: lesson ".concat(index + 1),
+    query: QUERY,
+    href: "/tutorials/advanced-".concat(index + 1),
+    height: 28
+  };
+})];
+var CUSTOM_ROW_ITEMS = [{
+  header: 'Getting started',
+  height: 28
+}, {
+  id: '01HZXB4K8P7Y2Q9T6M3N5R1C0A',
+  title: 'Getting started with YQL',
+  href: '/tutorials/getting-started',
+  height: 32
+}];
+var renderRouterLink = function renderRouterLink(_ref) {
+  var _onClick = _ref.onClick,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    "data-router-link": true,
+    onClick: function onClick(event) {
+      _onClick === null || _onClick === void 0 || _onClick(event);
+      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+        return;
+      }
+      event.preventDefault();
+      (0, _actions.action)('routerNavigate')(props.href);
+    }
+  }));
+};
 var meta = {
   title: 'Widgets/TutorialsHistory',
   component: _TutorialsHistory.TutorialsHistory,
@@ -144,6 +221,117 @@ var EmptyStory = function EmptyStory() {
     })
   });
 };
+var PaginatedStory = function PaginatedStory() {
+  var _useState7 = (0, _react.useState)(PAGINATION_PAGES[0]),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    items = _useState8[0],
+    setItems = _useState8[1];
+  var _useState9 = (0, _react.useState)(1),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    page = _useState0[0],
+    setPage = _useState0[1];
+  var _useState1 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
+    loading = _useState10[0],
+    setLoading = _useState10[1];
+  var handleLoadMore = function handleLoadMore() {
+    var nextPage = PAGINATION_PAGES[page];
+    if (loading || !nextPage) {
+      return;
+    }
+    (0, _actions.action)('onLoadMore')(page);
+    setLoading(true);
+    window.setTimeout(function () {
+      setItems(function (currentItems) {
+        return [].concat((0, _toConsumableArray2.default)(currentItems), (0, _toConsumableArray2.default)(nextPage));
+      });
+      setPage(function (currentPage) {
+        return currentPage + 1;
+      });
+      setLoading(false);
+    }, 1500);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: 300,
+      height: 300
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TutorialsHistory.TutorialsHistory, {
+      title: "Paginated tutorials",
+      items: items,
+      selectedRowId: "basics-2",
+      loading: loading,
+      hasMore: page < PAGINATION_PAGES.length,
+      onLoadMore: handleLoadMore,
+      renderLink: renderRouterLink,
+      search: {
+        onUpdate: (0, _actions.action)('onSearchUpdate')
+      }
+    })
+  });
+};
+var RouterLinksStory = function RouterLinksStory() {
+  var _useState11 = (0, _react.useState)({
+      value: '',
+      fullSearch: false
+    }),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    search = _useState12[0],
+    setSearch = _useState12[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: 500,
+      height: 500
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TutorialsHistory.TutorialsHistory, {
+      title: "Router links",
+      items: LINK_ITEMS,
+      renderLink: renderRouterLink,
+      search: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, search), {}, {
+        hasClear: true,
+        onUpdate: setSearch
+      })
+    })
+  });
+};
+var CustomRowRendererStory = function CustomRowRendererStory() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: 400,
+      height: 300
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TutorialsHistory.TutorialsHistory, {
+      title: "Custom tutorial rows",
+      items: CUSTOM_ROW_ITEMS,
+      selectedRowId: "01HZXB4K8P7Y2Q9T6M3N5R1C0A",
+      renderLink: renderRouterLink,
+      renderRowItem: function renderRowItem(_ref2) {
+        var item = _ref2.item,
+          renderLink = _ref2.renderLink;
+        return 'header' in item ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.HistoryGroupHeader, {
+          title: item.header
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RowLink, {
+          href: item.href,
+          renderLink: renderLink,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
+            alignItems: "center",
+            gap: 2,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+              data: BookOpenIcon,
+              size: 16
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+              ellipsis: true,
+              children: item.title
+            })]
+          })
+        });
+      },
+      search: {
+        onUpdate: (0, _actions.action)('onSearchUpdate')
+      }
+    })
+  });
+};
 var Default = exports.Default = {
   render: function render() {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(DefaultStory, {});
@@ -154,4 +342,59 @@ var Empty = exports.Empty = {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyStory, {});
   }
 };
+var InitialLoading = exports.InitialLoading = {
+  args: {
+    title: 'Loading tutorials',
+    items: [],
+    loading: true,
+    search: {
+      onUpdate: (0, _actions.action)('onSearchUpdate')
+    }
+  },
+  decorators: [function (StoryComponent) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 300,
+        height: 500
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StoryComponent, {})
+    });
+  }]
+};
+var Paginated = exports.Paginated = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginatedStory, {});
+  }
+};
+var LoadingMore = exports.LoadingMore = {
+  args: {
+    title: 'Loading next page',
+    items: PAGINATION_PAGES[0],
+    loading: true,
+    hasMore: true,
+    onLoadMore: (0, _actions.action)('onLoadMore'),
+    search: {
+      onUpdate: (0, _actions.action)('onSearchUpdate')
+    }
+  },
+  decorators: [function (StoryComponent) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 300,
+        height: 300
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StoryComponent, {})
+    });
+  }]
+};
+var RouterLinks = exports.RouterLinks = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouterLinksStory, {});
+  }
+};
+var CustomRowRenderer = exports.CustomRowRenderer = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomRowRendererStory, {});
+  }
+};
 // #sourceMappingURL=TutorialsHistory.stories.js.map

package/build/cjs/widgets/TutorialsHistory/TutorialsHistory.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_TutorialsHistory","_actions","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_interopRequireDefault","QUERY","filterFields","id","type","title","initialValue","items","logFilterApply","action","logFilterReset","BASE_ITEMS","query","height","meta","component","TutorialsHistory","tags","parameters","layout","_default","exports","DefaultStory","_useState","useState","concat","_useState2","_slicedToArray","setItems","_useState3","value","fullSearch","_useState4","search","setSearch","handleOnSearch","data","newItems","filter","item","_item$query","toLowerCase","searchValue","includes","_jsx","style","width","children","fields","onApply","onReset","hasClear","onUpdate","EmptyStory","_useState5","_useState6","Default","render","Empty"],"sources":["TutorialsHistory.stories.tsx"],"sourcesContent":["import React, {useState} from 'react';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {TutorialsHistory} from './TutorialsHistory';\nimport {QueryListFilterConfig, QueryListItem} from '../../types/queryList';\nimport {TutorialHistoryRow} from '../../types/tutorial';\nimport {action} from 'storybook/actions';\n\nconst QUERY = `use test;\n\nSELECT\n    \"test_session\" AS session_id,\n    \"test_task\" AS task_id,\n    SUBSTRING(\"test\", 1, 1) AS truncated_char`;\n\nconst filterFields: QueryListFilterConfig['fields'] = [\n    {id: 'onlyMine', type: 'switch', title: 'My queries only', initialValue: true},\n    {id: 'range', type: 'rangeDatePicker', title: 'Period'},\n    {\n        id: 'dialect',\n        type: 'checkboxGroup',\n        title: 'Dialect',\n        initialValue: [],\n        items: [\n            {id: 'yql', title: 'YQL'},\n            {id: 'sql', title: 'SQL'},\n        ],\n    },\n];\n\nconst logFilterApply = action('onFilterApply');\nconst logFilterReset = action('onFilterReset');\n\nconst BASE_ITEMS: QueryListItem<TutorialHistoryRow>[] = [\n    {\n        id: 1,\n        title: 'Getting started with YQL',\n        query: QUERY,\n        height: 28,\n    },\n    {\n        id: 2,\n        title: 'Working with tables',\n        query: QUERY,\n        height: 28,\n    },\n    {\n        id: 3,\n        title: 'Window functions',\n        query: QUERY,\n        height: 28,\n    },\n];\n\nconst meta: Meta<typeof TutorialsHistory> = {\n    title: 'Widgets/TutorialsHistory',\n    component: TutorialsHistory,\n    tags: ['autodocs'],\n    parameters: {\n        layout: 'padded',\n    },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TutorialsHistory>;\n\nconst DefaultStory = () => {\n    const [items, setItems] = useState([...BASE_ITEMS]);\n    const [search, setSearch] = useState({value: '', fullSearch: false});\n\n    const handleOnSearch = (data: {value: string; fullSearch: boolean}) => {\n        setSearch(data);\n\n        if (!data.value) {\n            setItems(BASE_ITEMS);\n            return;\n        }\n\n        const newItems = BASE_ITEMS.filter((item) => {\n            if (!('id' in item)) return false;\n\n            const title = item.title.toLowerCase();\n            const query = item.query?.toLowerCase();\n            const searchValue = data.value.toLowerCase();\n\n            if (data.fullSearch) {\n                return title.includes(searchValue) || query?.includes(searchValue);\n            }\n\n            return title.includes(searchValue);\n        });\n        setItems(newItems);\n    };\n\n    return (\n        <div style={{width: 300, height: 500}}>\n            <TutorialsHistory\n                title=\"Tutorials\"\n                items={items}\n                filter={{\n                    fields: filterFields,\n                    onApply: logFilterApply,\n                    onReset: logFilterReset('reset'),\n                }}\n                search={{\n                    value: search.value,\n                    fullSearch: search.fullSearch,\n                    hasClear: true,\n                    onUpdate: handleOnSearch,\n                }}\n            />\n        </div>\n    );\n};\n\nconst EmptyStory = () => {\n    const [search, setSearch] = useState({value: '', fullSearch: false});\n\n    return (\n        <div style={{width: 300, height: 500}}>\n            <TutorialsHistory\n                title=\"Tutorials\"\n                items={[]}\n                search={{\n                    value: search.value,\n                    fullSearch: search.fullSearch,\n                    hasClear: true,\n                    onUpdate: setSearch,\n                }}\n            />\n        </div>\n    );\n};\n\nexport const Default: Story = {render: () => <DefaultStory />};\nexport const Empty: Story = {render: () => <EmptyStory />};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_uikit","_components","_TutorialsHistory","_actions","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_interopRequireDefault","BookOpenIcon","props","_jsx","_objectSpread","children","fill","fillRule","d","clipRule","defaultProps","xmlns","width","height","viewBox","QUERY","filterFields","id","type","title","initialValue","items","logFilterApply","action","logFilterReset","BASE_ITEMS","query","LINK_ITEMS","map","item","href","concat","PAGINATION_PAGES","Array","from","length","_","index","CUSTOM_ROW_ITEMS","header","renderRouterLink","_ref","_onClick","onClick","_objectWithoutProperties","_excluded","event","defaultPrevented","button","metaKey","ctrlKey","shiftKey","altKey","preventDefault","meta","component","TutorialsHistory","tags","parameters","layout","_default","exports","DefaultStory","_useState","useState","_useState2","_slicedToArray","setItems","_useState3","value","fullSearch","_useState4","search","setSearch","handleOnSearch","data","newItems","filter","_item$query","toLowerCase","searchValue","includes","style","fields","onApply","onReset","hasClear","onUpdate","EmptyStory","_useState5","_useState6","PaginatedStory","_useState7","_useState8","_useState9","_useState0","page","setPage","_useState1","_useState10","loading","setLoading","handleLoadMore","nextPage","window","setTimeout","currentItems","_toConsumableArray","currentPage","selectedRowId","hasMore","onLoadMore","renderLink","RouterLinksStory","_useState11","_useState12","CustomRowRendererStory","renderRowItem","_ref2","HistoryGroupHeader","RowLink","_jsxs","Flex","alignItems","gap","Icon","size","Text","ellipsis","Default","render","Empty","InitialLoading","args","decorators","StoryComponent","Paginated","LoadingMore","RouterLinks","CustomRowRenderer"],"sources":["TutorialsHistory.stories.tsx"],"sourcesContent":["import React, {useState} from 'react';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {Flex, Icon, Text} from '@gravity-ui/uikit';\nimport BookOpenIcon from '@gravity-ui/icons/svgs/book-open.svg';\nimport {HistoryGroupHeader, RowLink} from '../../components';\nimport {TutorialsHistory} from './TutorialsHistory';\nimport type {\n    QueryListFilterConfig,\n    QueryListItem,\n    QueryListLinkRenderer,\n} from '../../types/queryList';\nimport type {TutorialHistoryRow} from '../../types/tutorial';\nimport {action} from 'storybook/actions';\n\nconst QUERY = `use test;\n\nSELECT\n    \"test_session\" AS session_id,\n    \"test_task\" AS task_id,\n    SUBSTRING(\"test\", 1, 1) AS truncated_char`;\n\nconst filterFields: QueryListFilterConfig['fields'] = [\n    {id: 'onlyMine', type: 'switch', title: 'My queries only', initialValue: true},\n    {id: 'range', type: 'rangeDatePicker', title: 'Period'},\n    {\n        id: 'dialect',\n        type: 'checkboxGroup',\n        title: 'Dialect',\n        initialValue: [],\n        items: [\n            {id: 'yql', title: 'YQL'},\n            {id: 'sql', title: 'SQL'},\n        ],\n    },\n];\n\nconst logFilterApply = action('onFilterApply');\nconst logFilterReset = action('onFilterReset');\n\nconst BASE_ITEMS: QueryListItem<TutorialHistoryRow>[] = [\n    {\n        id: 1,\n        title: 'Getting started with YQL',\n        query: QUERY,\n        height: 28,\n    },\n    {\n        id: 2,\n        title: 'Working with tables',\n        query: QUERY,\n        height: 28,\n    },\n    {\n        id: 3,\n        title: 'Window functions',\n        query: QUERY,\n        height: 28,\n    },\n];\n\nconst LINK_ITEMS = BASE_ITEMS.map((item) =>\n    'id' in item ? {...item, href: `/tutorials/${item.id}`} : item,\n);\n\nconst PAGINATION_PAGES: QueryListItem<TutorialHistoryRow>[][] = [\n    Array.from({length: 8}, (_, index) => ({\n        id: `basics-${index + 1}`,\n        title: `YQL basics: lesson ${index + 1}`,\n        query: QUERY,\n        href: `/tutorials/basics-${index + 1}`,\n        height: 28,\n    })),\n    Array.from({length: 8}, (_, index) => ({\n        id: `advanced-${index + 1}`,\n        title: `Advanced YQL: lesson ${index + 1}`,\n        query: QUERY,\n        href: `/tutorials/advanced-${index + 1}`,\n        height: 28,\n    })),\n];\n\nconst CUSTOM_ROW_ITEMS: QueryListItem<TutorialHistoryRow>[] = [\n    {header: 'Getting started', height: 28},\n    {\n        id: '01HZXB4K8P7Y2Q9T6M3N5R1C0A',\n        title: 'Getting started with YQL',\n        href: '/tutorials/getting-started',\n        height: 32,\n    },\n];\n\nconst renderRouterLink: QueryListLinkRenderer = ({onClick, ...props}) => (\n    <a\n        {...props}\n        data-router-link\n        onClick={(event) => {\n            onClick?.(event);\n\n            if (\n                event.defaultPrevented ||\n                event.button !== 0 ||\n                event.metaKey ||\n                event.ctrlKey ||\n                event.shiftKey ||\n                event.altKey\n            ) {\n                return;\n            }\n\n            event.preventDefault();\n            action('routerNavigate')(props.href);\n        }}\n    />\n);\n\nconst meta: Meta<typeof TutorialsHistory> = {\n    title: 'Widgets/TutorialsHistory',\n    component: TutorialsHistory,\n    tags: ['autodocs'],\n    parameters: {\n        layout: 'padded',\n    },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof TutorialsHistory>;\n\nconst DefaultStory = () => {\n    const [items, setItems] = useState([...BASE_ITEMS]);\n    const [search, setSearch] = useState({value: '', fullSearch: false});\n\n    const handleOnSearch = (data: {value: string; fullSearch: boolean}) => {\n        setSearch(data);\n\n        if (!data.value) {\n            setItems(BASE_ITEMS);\n            return;\n        }\n\n        const newItems = BASE_ITEMS.filter((item) => {\n            if (!('id' in item)) return false;\n\n            const title = item.title.toLowerCase();\n            const query = item.query?.toLowerCase();\n            const searchValue = data.value.toLowerCase();\n\n            if (data.fullSearch) {\n                return title.includes(searchValue) || query?.includes(searchValue);\n            }\n\n            return title.includes(searchValue);\n        });\n        setItems(newItems);\n    };\n\n    return (\n        <div style={{width: 300, height: 500}}>\n            <TutorialsHistory\n                title=\"Tutorials\"\n                items={items}\n                filter={{\n                    fields: filterFields,\n                    onApply: logFilterApply,\n                    onReset: logFilterReset('reset'),\n                }}\n                search={{\n                    value: search.value,\n                    fullSearch: search.fullSearch,\n                    hasClear: true,\n                    onUpdate: handleOnSearch,\n                }}\n            />\n        </div>\n    );\n};\n\nconst EmptyStory = () => {\n    const [search, setSearch] = useState({value: '', fullSearch: false});\n\n    return (\n        <div style={{width: 300, height: 500}}>\n            <TutorialsHistory\n                title=\"Tutorials\"\n                items={[]}\n                search={{\n                    value: search.value,\n                    fullSearch: search.fullSearch,\n                    hasClear: true,\n                    onUpdate: setSearch,\n                }}\n            />\n        </div>\n    );\n};\n\nconst PaginatedStory = () => {\n    const [items, setItems] = useState<QueryListItem<TutorialHistoryRow>[]>(PAGINATION_PAGES[0]);\n    const [page, setPage] = useState(1);\n    const [loading, setLoading] = useState(false);\n\n    const handleLoadMore = () => {\n        const nextPage = PAGINATION_PAGES[page];\n\n        if (loading || !nextPage) {\n            return;\n        }\n\n        action('onLoadMore')(page);\n        setLoading(true);\n\n        window.setTimeout(() => {\n            setItems((currentItems) => [...currentItems, ...nextPage]);\n            setPage((currentPage) => currentPage + 1);\n            setLoading(false);\n        }, 1500);\n    };\n\n    return (\n        <div style={{width: 300, height: 300}}>\n            <TutorialsHistory\n                title=\"Paginated tutorials\"\n                items={items}\n                selectedRowId=\"basics-2\"\n                loading={loading}\n                hasMore={page < PAGINATION_PAGES.length}\n                onLoadMore={handleLoadMore}\n                renderLink={renderRouterLink}\n                search={{onUpdate: action('onSearchUpdate')}}\n            />\n        </div>\n    );\n};\n\nconst RouterLinksStory = () => {\n    const [search, setSearch] = useState({value: '', fullSearch: false});\n\n    return (\n        <div style={{width: 500, height: 500}}>\n            <TutorialsHistory\n                title=\"Router links\"\n                items={LINK_ITEMS}\n                renderLink={renderRouterLink}\n                search={{...search, hasClear: true, onUpdate: setSearch}}\n            />\n        </div>\n    );\n};\n\nconst CustomRowRendererStory = () => (\n    <div style={{width: 400, height: 300}}>\n        <TutorialsHistory\n            title=\"Custom tutorial rows\"\n            items={CUSTOM_ROW_ITEMS}\n            selectedRowId=\"01HZXB4K8P7Y2Q9T6M3N5R1C0A\"\n            renderLink={renderRouterLink}\n            renderRowItem={({item, renderLink}) =>\n                'header' in item ? (\n                    <HistoryGroupHeader title={item.header} />\n                ) : (\n                    <RowLink href={item.href} renderLink={renderLink}>\n                        <Flex alignItems=\"center\" gap={2}>\n                            <Icon data={BookOpenIcon} size={16} />\n                            <Text ellipsis>{item.title}</Text>\n                        </Flex>\n                    </RowLink>\n                )\n            }\n            search={{onUpdate: action('onSearchUpdate')}}\n        />\n    </div>\n);\n\nexport const Default: Story = {render: () => <DefaultStory />};\nexport const Empty: Story = {render: () => <EmptyStory />};\nexport const InitialLoading: Story = {\n    args: {\n        title: 'Loading tutorials',\n        items: [],\n        loading: true,\n        search: {onUpdate: action('onSearchUpdate')},\n    },\n    decorators: [\n        (StoryComponent) => (\n            <div style={{width: 300, height: 500}}>\n                <StoryComponent />\n            </div>\n        ),\n    ],\n};\nexport const Paginated: Story = {render: () => <PaginatedStory />};\nexport const LoadingMore: Story = {\n    args: {\n        title: 'Loading next page',\n        items: PAGINATION_PAGES[0],\n        loading: true,\n        hasMore: true,\n        onLoadMore: action('onLoadMore'),\n        search: {onUpdate: action('onSearchUpdate')},\n    },\n    decorators: [\n        (StoryComponent) => (\n            <div style={{width: 300, height: 300}}>\n                <StoryComponent />\n            </div>\n        ),\n    ],\n};\nexport const RouterLinks: Story = {render: () => <RouterLinksStory />};\nexport const CustomRowRenderer: Story = {render: () => <CustomRowRendererStory />};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/components/QueryGraph/QueryGraph.css

@@ -0,0 +1,70 @@
+.qp-query-graph {
+  position: relative;
+  min-height: 360px;
+  height: 100%;
+  overflow: hidden;
+  background: var(--g-color-base-background);
+}
+.qp-query-graph__canvas {
+  width: 100%;
+  height: 100%;
+  min-height: 360px;
+}
+.qp-query-graph__toolbox {
+  position: absolute;
+  z-index: 4;
+  top: var(--g-spacing-4);
+  left: var(--g-spacing-4);
+  display: flex;
+  width: 28px;
+  flex-direction: column;
+}
+.qp-query-graph__popup {
+  position: absolute;
+  z-index: 5;
+  width: min(440px, 100% - var(--g-spacing-8));
+  max-height: calc(100% - var(--g-spacing-8));
+  overflow: auto;
+  padding: var(--g-spacing-4);
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-l);
+  box-shadow: 0 4px 24px var(--g-color-sfx-shadow);
+  background: var(--g-color-base-float);
+}
+.qp-query-graph__popup-content, .qp-query-graph__jobs, .qp-query-graph__schemas, .qp-query-graph__details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-3);
+}
+.qp-query-graph__popup-title {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.qp-query-graph__popup-title > div {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+.qp-query-graph__detail-row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--g-spacing-3);
+}
+.qp-query-graph__state {
+  height: 100%;
+  min-height: 360px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--g-spacing-6);
+  text-align: center;
+}
+.qp-query-graph__large-graph {
+  display: flex;
+  max-width: 480px;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--g-spacing-4);
+}
+/*# sourceMappingURL=QueryGraph.css.map */

package/build/esm/components/QueryGraph/QueryGraph.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["QueryGraph.scss"],"names":[],"mappings":"AAAA;EACI,kBAAA;EACA,iBAAA;EACA,YAAA;EACA,gBAAA;EACA,0CAAA;AACJ;AACI;EACI,WAAA;EACA,YAAA;EACA,iBAAA;AACR;AAEI;EACI,kBAAA;EACA,UAAA;EACA,uBAAA;EACA,wBAAA;EACA,aAAA;EACA,WAAA;EACA,sBAAA;AAAR;AAGI;EACI,kBAAA;EACA,UAAA;EACA,4CAAA;EACA,2CAAA;EACA,cAAA;EACA,2BAAA;EACA,6CAAA;EACA,uCAAA;EACA,gDAAA;EACA,qCAAA;AADR;AAII;EAII,aAAA;EACA,sBAAA;EACA,uBAAA;AALR;AAQI;EACI,aAAA;EACA,mBAAA;EACA,uBAAA;AANR;AAQQ;EACI,aAAA;EACA,YAAA;EACA,sBAAA;AANZ;AAUI;EACI,aAAA;EACA,8BAAA;EACA,uBAAA;AARR;AAWI;EACI,YAAA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,2BAAA;EACA,kBAAA;AATR;AAYI;EACI,aAAA;EACA,gBAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;AAVR","file":"QueryGraph.css","sourcesContent":[".qp-query-graph {\n    position: relative;\n    min-height: 360px;\n    height: 100%;\n    overflow: hidden;\n    background: var(--g-color-base-background);\n\n    &__canvas {\n        width: 100%;\n        height: 100%;\n        min-height: 360px;\n    }\n\n    &__toolbox {\n        position: absolute;\n        z-index: 4;\n        top: var(--g-spacing-4);\n        left: var(--g-spacing-4);\n        display: flex;\n        width: 28px;\n        flex-direction: column;\n    }\n\n    &__popup {\n        position: absolute;\n        z-index: 5;\n        width: min(440px, calc(100% - var(--g-spacing-8)));\n        max-height: calc(100% - var(--g-spacing-8));\n        overflow: auto;\n        padding: var(--g-spacing-4);\n        border: 1px solid var(--g-color-line-generic);\n        border-radius: var(--g-border-radius-l);\n        box-shadow: 0 4px 24px var(--g-color-sfx-shadow);\n        background: var(--g-color-base-float);\n    }\n\n    &__popup-content,\n    &__jobs,\n    &__schemas,\n    &__details {\n        display: flex;\n        flex-direction: column;\n        gap: var(--g-spacing-3);\n    }\n\n    &__popup-title {\n        display: flex;\n        align-items: center;\n        gap: var(--g-spacing-2);\n\n        > div {\n            display: flex;\n            min-width: 0;\n            flex-direction: column;\n        }\n    }\n\n    &__detail-row {\n        display: flex;\n        justify-content: space-between;\n        gap: var(--g-spacing-3);\n    }\n\n    &__state {\n        height: 100%;\n        min-height: 360px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: var(--g-spacing-6);\n        text-align: center;\n    }\n\n    &__large-graph {\n        display: flex;\n        max-width: 480px;\n        flex-direction: column;\n        align-items: center;\n        gap: var(--g-spacing-4);\n    }\n}\n"],"sourceRoot":""}

package/build/esm/components/QueryGraph/QueryGraph.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { QueryGraphProps } from '../../types/queryGraph';
+import './QueryGraph.scss';
+export declare function QueryGraph({ nodes, edges, loading, errorContent, className, autoCenter, active, largeGraphThreshold, renderNodePopup, onNodeClick, onError, }: QueryGraphProps): React.JSX.Element;