@gravity-ui/querieskit 1.0.1

package/README.md

@@ -0,0 +1,146 @@
+# QueriesKit · [![npm package](https://img.shields.io/npm/v/@gravity-ui/querieskit?logo=npm)](https://www.npmjs.com/package/@gravity-ui/querieskit) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/querieskit/ci.yml?branch=main&label=CI&logo=github)](https://github.com/gravity-ui/querieskit/actions/workflows/ci.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685?logo=storybook)](https://preview.gravity-ui.com/querieskit/)
+
+React component library for building **query pages** — history, tutorials, editors, and related UI. Part of the [Gravity UI](https://gravity-ui.com) design system.
+
+## Install
+
+```shell
+npm install @gravity-ui/querieskit
+```
+
+### Peer dependencies
+
+Your project must also provide:
+
+- `react` / `react-dom` (^18 or ^19)
+- `@gravity-ui/uikit` (>=7)
+- `@gravity-ui/icons` (>=2)
+
+See `peerDependencies` in `package.json` for the exact ranges.
+
+## Setup
+
+QueriesKit builds on UIKit theming and styles. At the app entry point:
+
+```js
+import '@gravity-ui/uikit/styles/fonts.css';
+import '@gravity-ui/uikit/styles/styles.css';
+```
+
+Wrap the app in `ThemeProvider`:
+
+```jsx
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+createRoot(document.getElementById('root')).render(
+  <ThemeProvider theme="light">
+    <App />
+  </ThemeProvider>,
+);
+```
+
+See [UIKit docs](https://github.com/gravity-ui/uikit#styles) for theming and i18n setup.
+
+## Architecture
+
+The public API has three levels:
+
+| Level | Path | Role |
+| --- | --- | --- |
+| **Widgets** | `src/widgets` | Ready-to-use feature blocks for a queries page |
+| **Modules** | `src/modules` | Scenario blocks composed from components (lists, rows, headers) |
+| **Components** | `src/components` | Small reusable UI pieces with a stable props contract |
+
+Import direction is one-way: `widgets → modules → components`.
+
+Prefer widgets for product screens. Use modules and components when you need a custom layout or only a part of a scenario.
+
+## Usage
+
+### QueriesHistory
+
+Ready-made query history sidebar: search, filters, editable titles, row actions, and optional compare mode.
+
+```tsx
+import {useState} from 'react';
+import {QueriesHistory} from '@gravity-ui/querieskit';
+import type {QueryHistoryItem, QueryHistoryRow} from '@gravity-ui/querieskit';
+
+const items: QueryHistoryItem<QueryHistoryRow>[] = [
+  {header: 'Today', height: 28},
+  {
+    id: 1,
+    title: 'My query',
+    status: 'completed',
+    engine: 'YQL',
+    startTime: Date.now() - 60_000,
+    endTime: Date.now(),
+    query: 'SELECT 1',
+    height: 52,
+  },
+];
+
+function HistoryPanel() {
+  const [search, setSearch] = useState({value: '', fullSearch: false});
+
+  return (
+    <QueriesHistory
+      title="History"
+      items={items}
+      search={{
+        value: search.value,
+        fullSearch: search.fullSearch,
+        hasClear: true,
+        onUpdate: setSearch,
+      }}
+      onListItemClick={(item) => {
+        if ('id' in item) {
+          // open query by id
+        }
+      }}
+    />
+  );
+}
+```
+
+### TutorialsHistory
+
+Same layout pattern for tutorial lists — search, optional filters, and selectable rows.
+
+```tsx
+import {TutorialsHistory} from '@gravity-ui/querieskit';
+```
+
+Browse interactive examples in [Storybook](https://preview.gravity-ui.com/querieskit/).
+
+## Widgets
+
+| Widget | Description |
+| --- | --- |
+| `QueriesHistory` | Query history with search, filters, visible fields, editing, and comparison |
+| `TutorialsHistory` | Tutorials list with search and filters |
+
+## Development
+
+```shell
+git clone git@github.com:gravity-ui/querieskit.git
+cd querieskit
+npm ci
+npm run storybook   # http://localhost:6006
+```
+
+Useful scripts:
+
+```shell
+npm run build            # library build
+npm run lint:all         # ESLint
+npm run build-storybook  # static Storybook
+```
+
+## Contributing
+
+Please read [CONTRIBUTING.md](CONTRIBUTING.md) before opening a pull request.
+
+## License
+
+MIT — see [LICENSE](LICENSE).

package/app-builder.config.ts

@@ -0,0 +1,9 @@
+import type {LibraryConfig} from '@gravity-ui/app-builder';
+
+const config: LibraryConfig = {
+    lib: {
+        newJsxTransform: true,
+    },
+};
+
+export default config;

package/build/cjs/components/FieldsSelector/FieldsSelector.css

@@ -0,0 +1,15 @@
+.qp-fields-selector {
+  padding: 8px 16px;
+}
+.qp-fields-selector__checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: pointer;
+  color: var(--g-color-base-generic-medium);
+}
+.qp-fields-selector__checkbox_checked {
+  color: var(--g-color-base-brand);
+}
+/*# sourceMappingURL=FieldsSelector.css.map */

package/build/cjs/components/FieldsSelector/FieldsSelector.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["FieldsSelector.scss"],"names":[],"mappings":"AAAA;EACE,iBAAA;AACF;AACE;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EAGA,cAAA;EACA,eAAA;EACA,yCAAA;AADJ;AAGI;EACE,gCAAA;AADN","file":"FieldsSelector.css","sourcesContent":[".qp-fields-selector {\n  padding: 8px 16px;\n\n  &__checkbox {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    //width: 16px;\n    //height: 16px;\n    flex-shrink: 0;\n    cursor: pointer;\n    color: var(--g-color-base-generic-medium);\n\n    &_checked {\n      color: var(--g-color-base-brand);\n    }\n  }\n}\n"],"sourceRoot":""}

package/build/cjs/components/FieldsSelector/FieldsSelector.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import './FieldsSelector.scss';
+export type FieldsSelectorOption<K extends string = string> = {
+    id: K;
+    title: ReactNode;
+};
+export type FieldsSelectorProps<K extends string = string> = {
+    fields: FieldsSelectorOption<K>[];
+    value: K[];
+    onChange: (value: K[]) => void;
+    buttonLabel?: string;
+};
+export declare const FieldsSelector: <K extends string = string>({ fields, value, onChange, buttonLabel, }: FieldsSelectorProps<K>) => React.JSX.Element;

package/build/cjs/components/FieldsSelector/FieldsSelector.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldsSelector = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.iterator.constructor.js");
+require("core-js/modules/es.iterator.filter.js");
+require("core-js/modules/es.iterator.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+var _react = _interopRequireWildcard(require("react"));
+var _uikit = require("@gravity-ui/uikit");
+var _useToggle3 = require("../../helpers/useToggle");
+var _i18n = _interopRequireDefault(require("./i18n"));
+require("./FieldsSelector.css");
+var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
+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 GearIcon = function GearIcon(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.199 2H8.8a.2.2 0 0 1 .2.2c0 1.808 1.958 2.939 3.524 2.034a.2.2 0 0 1 .271.073l.802 1.388a.2.2 0 0 1-.073.272c-1.566.904-1.566 3.164 0 4.069a.2.2 0 0 1 .073.271l-.802 1.388a.2.2 0 0 1-.271.073C10.958 10.863 9 11.993 9 13.8a.2.2 0 0 1-.199.2H7.2a.2.2 0 0 1-.2-.2c0-1.808-1.958-2.938-3.524-2.034a.2.2 0 0 1-.272-.073l-.8-1.388a.2.2 0 0 1 .072-.271c1.566-.905 1.566-3.165 0-4.07a.2.2 0 0 1-.073-.27l.801-1.389a.2.2 0 0 1 .272-.072C5.042 5.138 7 4.007 7 2.199c0-.11.089-.199.199-.199M5.5 2.2c0-.94.76-1.7 1.699-1.7H8.8c.94 0 1.7.76 1.7 1.7a.85.85 0 0 0 1.274.735 1.7 1.7 0 0 1 2.32.622l.802 1.388c.469.813.19 1.851-.622 2.32a.85.85 0 0 0 0 1.472 1.7 1.7 0 0 1 .622 2.32l-.802 1.388a1.7 1.7 0 0 1-2.32.622.85.85 0 0 0-1.274.735c0 .939-.76 1.7-1.699 1.7H7.2a1.7 1.7 0 0 1-1.699-1.7.85.85 0 0 0-1.274-.735 1.7 1.7 0 0 1-2.32-.622l-.802-1.388a1.7 1.7 0 0 1 .622-2.32.85.85 0 0 0 0-1.471 1.7 1.7 0 0 1-.622-2.32l.801-1.389a1.7 1.7 0 0 1 2.32-.622A.85.85 0 0 0 5.5 2.2m4 5.8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0",
+      clipRule: "evenodd"
+    })
+  }));
+};
+GearIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  fill: "none",
+  viewBox: "0 0 16 16"
+};
+var CheckIcon = function CheckIcon(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: "M13.488 3.43a.75.75 0 0 1 .081 1.058l-6 7a.75.75 0 0 1-1.1.042l-3.5-3.5A.75.75 0 0 1 4.03 6.97l2.928 2.927 5.473-6.385a.75.75 0 0 1 1.057-.081",
+      clipRule: "evenodd"
+    })
+  }));
+};
+CheckIcon.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  fill: "none",
+  viewBox: "0 0 16 16"
+};
+var block = (0, _bemCnLite.default)('qp-fields-selector');
+var FieldsSelector = exports.FieldsSelector = function FieldsSelector(_ref) {
+  var fields = _ref.fields,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$buttonLabel = _ref.buttonLabel,
+    buttonLabel = _ref$buttonLabel === void 0 ? (0, _i18n.default)('action_configure-visible-fields') : _ref$buttonLabel;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    buttonElement = _useState2[0],
+    setButtonElement = _useState2[1];
+  var _useToggle = (0, _useToggle3.useToggle)(false),
+    _useToggle2 = (0, _slicedToArray2.default)(_useToggle, 2),
+    open = _useToggle2[0],
+    toggleOpen = _useToggle2[1];
+  var handleOnChange = function handleOnChange(field, isChecked) {
+    var newValue = isChecked ? [].concat((0, _toConsumableArray2.default)(value), [field]) : value.filter(function (key) {
+      return key !== field;
+    });
+    onChange(newValue);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+      ref: setButtonElement,
+      onClick: toggleOpen,
+      "aria-label": buttonLabel,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+        data: GearIcon,
+        size: 16
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Popup, {
+      anchorElement: buttonElement,
+      placement: "right-start",
+      open: open,
+      onOpenChange: toggleOpen,
+      className: block(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Flex, {
+        direction: "column",
+        alignItems: "flex-start",
+        gap: 1,
+        children: fields.map(function (field) {
+          var isChecked = value.includes(field.id);
+          var checkboxLabel = typeof field.title === 'string' ? field.title : undefined;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
+            gap: 3,
+            alignItems: "center",
+            role: "checkbox",
+            "aria-checked": isChecked,
+            "aria-label": checkboxLabel,
+            tabIndex: 0,
+            className: block('checkbox', {
+              checked: isChecked
+            }),
+            onClick: function onClick() {
+              handleOnChange(field.id, !isChecked);
+            },
+            onKeyDown: function onKeyDown(event) {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                handleOnChange(field.id, !isChecked);
+              }
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Icon, {
+              data: CheckIcon,
+              size: 16,
+              className: block('checkbox-icon')
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+              variant: "body-1",
+              color: "primary",
+              children: field.title
+            })]
+          }, field.id);
+        })
+      })
+    })]
+  });
+};
+// #sourceMappingURL=FieldsSelector.js.map

package/build/cjs/components/FieldsSelector/FieldsSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_uikit","_useToggle3","_i18n","_interopRequireDefault","_bemCnLite","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GearIcon","props","_jsx","_objectSpread","children","fill","fillRule","d","clipRule","defaultProps","xmlns","width","height","viewBox","CheckIcon","block","cn","FieldsSelector","exports","_ref","fields","value","onChange","_ref$buttonLabel","buttonLabel","i18n","_useState","useState","_useState2","_slicedToArray","buttonElement","setButtonElement","_useToggle","useToggle","_useToggle2","open","toggleOpen","handleOnChange","field","isChecked","newValue","concat","_toConsumableArray","filter","key","_jsxs","_Fragment","Button","ref","onClick","Icon","data","size","Popup","anchorElement","placement","onOpenChange","className","Flex","direction","alignItems","gap","map","includes","id","checkboxLabel","title","undefined","role","tabIndex","checked","onKeyDown","event","preventDefault","Text","variant","color"],"sources":["FieldsSelector.tsx"],"sourcesContent":["import React, {ReactNode, useState} from 'react';\nimport {Button, Flex, Icon, Popup, Text} from '@gravity-ui/uikit';\nimport GearIcon from '@gravity-ui/icons/svgs/gear.svg';\nimport CheckIcon from '@gravity-ui/icons/svgs/check.svg';\nimport {useToggle} from '../../helpers/useToggle';\nimport i18n from './i18n';\nimport './FieldsSelector.scss';\nimport cn from 'bem-cn-lite';\n\nexport type FieldsSelectorOption<K extends string = string> = {\n    id: K;\n    title: ReactNode;\n};\n\nexport type FieldsSelectorProps<K extends string = string> = {\n    fields: FieldsSelectorOption<K>[];\n    value: K[];\n    onChange: (value: K[]) => void;\n    buttonLabel?: string;\n};\n\nconst block = cn('qp-fields-selector');\n\nexport const FieldsSelector = <K extends string = string>({\n    fields,\n    value,\n    onChange,\n    buttonLabel = i18n('action_configure-visible-fields'),\n}: FieldsSelectorProps<K>) => {\n    const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null);\n    const [open, toggleOpen] = useToggle(false);\n\n    const handleOnChange = (field: K, isChecked: boolean) => {\n        const newValue = isChecked ? [...value, field] : value.filter((key) => key !== field);\n        onChange(newValue);\n    };\n\n    return (\n        <>\n            <Button ref={setButtonElement} onClick={toggleOpen} aria-label={buttonLabel}>\n                <Icon data={GearIcon} size={16} />\n            </Button>\n            <Popup\n                anchorElement={buttonElement}\n                placement=\"right-start\"\n                open={open}\n                onOpenChange={toggleOpen}\n                className={block()}\n            >\n                <Flex direction=\"column\" alignItems=\"flex-start\" gap={1}>\n                    {fields.map((field) => {\n                        const isChecked = value.includes(field.id);\n                        const checkboxLabel =\n                            typeof field.title === 'string' ? field.title : undefined;\n\n                        return (\n                            <Flex\n                                key={field.id}\n                                gap={3}\n                                alignItems=\"center\"\n                                role=\"checkbox\"\n                                aria-checked={isChecked}\n                                aria-label={checkboxLabel}\n                                tabIndex={0}\n                                className={block('checkbox', {checked: isChecked})}\n                                onClick={() => {\n                                    handleOnChange(field.id, !isChecked);\n                                }}\n                                onKeyDown={(event) => {\n                                    if (event.key === 'Enter' || event.key === ' ') {\n                                        event.preventDefault();\n                                        handleOnChange(field.id, !isChecked);\n                                    }\n                                }}\n                            >\n                                <Icon\n                                    data={CheckIcon}\n                                    size={16}\n                                    className={block('checkbox-icon')}\n                                />\n\n                                <Text variant=\"body-1\" color=\"primary\">\n                                    {field.title}\n                                </Text>\n                            </Flex>\n                        );\n                    })}\n                </Flex>\n            </Popup>\n        </>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/build/cjs/components/FieldsSelector/FieldsSelector.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FieldsSelector } from './FieldsSelector';
+declare const meta: Meta<typeof FieldsSelector>;
+export default meta;
+type Story = StoryObj<typeof FieldsSelector>;
+/** Fully controlled example: selected fields persist between openings of the popup */
+export declare const Controlled: Story;

package/build/cjs/components/FieldsSelector/FieldsSelector.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Controlled = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _actions = require("storybook/actions");
+var _FieldsSelector = require("./FieldsSelector");
+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 meta = {
+  title: 'Components/FieldsSelector',
+  component: _FieldsSelector.FieldsSelector,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded'
+  },
+  argTypes: {
+    onChange: {
+      action: true
+    }
+  }
+};
+var _default = exports.default = meta;
+var fields = [{
+  id: 'id',
+  title: 'Id'
+}, {
+  id: 'title',
+  title: 'Title'
+}, {
+  id: 'author',
+  title: 'Author'
+}, {
+  id: 'status',
+  title: 'Status'
+}, {
+  id: 'createdAt',
+  title: 'Created at'
+}, {
+  id: 'updatedAt',
+  title: 'Updated at'
+}];
+var logOnChange = (0, _actions.action)('onChange');
+
+/** Fully controlled example: selected fields persist between openings of the popup */
+var Controlled = exports.Controlled = {
+  render: function ControlledFieldsSelector() {
+    var _useState = (0, _react.useState)(['id', 'status']),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      values = _useState2[0],
+      setValues = _useState2[1];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldsSelector.FieldsSelector, {
+      fields: fields,
+      value: values,
+      onChange: function onChange(newValue) {
+        logOnChange(newValue);
+        setValues(newValue);
+      }
+    });
+  }
+};
+// #sourceMappingURL=FieldsSelector.stories.js.map

package/build/cjs/components/FieldsSelector/FieldsSelector.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_actions","_FieldsSelector","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_interopRequireDefault","meta","title","component","FieldsSelector","tags","parameters","layout","argTypes","onChange","action","_default","exports","fields","id","logOnChange","Controlled","render","ControlledFieldsSelector","_useState","useState","_useState2","_slicedToArray","values","setValues","_jsx","value","newValue"],"sources":["FieldsSelector.stories.tsx"],"sourcesContent":["import React, {useState} from 'react';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {action} from 'storybook/actions';\nimport {FieldsSelector} from './FieldsSelector';\n\nconst meta: Meta<typeof FieldsSelector> = {\n    title: 'Components/FieldsSelector',\n    component: FieldsSelector,\n    tags: ['autodocs'],\n    parameters: {\n        layout: 'padded',\n    },\n    argTypes: {\n        onChange: {action: true},\n    },\n};\n\nexport default meta;\ntype Story = StoryObj<typeof FieldsSelector>;\n\nconst fields = [\n    {id: 'id', title: 'Id'},\n    {id: 'title', title: 'Title'},\n    {id: 'author', title: 'Author'},\n    {id: 'status', title: 'Status'},\n    {id: 'createdAt', title: 'Created at'},\n    {id: 'updatedAt', title: 'Updated at'},\n];\n\nconst logOnChange = action('onChange');\n\n/** Fully controlled example: selected fields persist between openings of the popup */\nexport const Controlled: Story = {\n    render: function ControlledFieldsSelector() {\n        const [values, setValues] = useState<string[]>(['id', 'status']);\n\n        return (\n            <FieldsSelector\n                fields={fields}\n                value={values}\n                onChange={(newValue) => {\n                    logOnChange(newValue);\n                    setValues(newValue);\n                }}\n            />\n        );\n    },\n};\n"],"mappings":"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","ignoreList":[]}

package/build/cjs/components/FieldsSelector/i18n/dicts.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    en: {
+        "action_configure-visible-fields": string;
+    };
+    ru: {
+        "action_configure-visible-fields": string;
+    };
+};
+export default _default;

package/build/cjs/components/FieldsSelector/i18n/dicts.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _en = _interopRequireDefault(require("./en.json"));
+var _ru = _interopRequireDefault(require("./ru.json"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  en: _en.default,
+  ru: _ru.default
+};
+// #sourceMappingURL=dicts.js.map

package/build/cjs/components/FieldsSelector/i18n/dicts.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_en","_interopRequireDefault","require","_ru","e","__esModule","default","_default","exports","en","ru"],"sources":["dicts.ts"],"sourcesContent":["import en from './en.json';\nimport ru from './ru.json';\n\nexport default {en, ru};\n"],"mappings":";;;;;;AAAA,IAAAA,GAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,GAAA,GAAAF,sBAAA,CAAAC,OAAA;AAAS,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEM;EAACG,EAAE,EAAFA,WAAE;EAAEC,EAAE,EAAFA;AAAE,CAAC","ignoreList":[]}

package/build/cjs/components/FieldsSelector/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "action_configure-visible-fields": "Configure visible fields"
+}

package/build/cjs/components/FieldsSelector/i18n/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: ((key: "action_configure-visible-fields", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "qp:fields-selector": Record<"action_configure-visible-fields", import("@gravity-ui/i18n").KeyData>;
+    };
+};
+export default _default;

package/build/cjs/components/FieldsSelector/i18n/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _i18n = require("../../../i18n");
+var _dicts = _interopRequireDefault(require("./dicts"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = (0, _i18n.addI18Keysets)('qp:fields-selector', _dicts.default);
+// #sourceMappingURL=index.js.map

package/build/cjs/components/FieldsSelector/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_i18n","require","_dicts","_interopRequireDefault","e","__esModule","default","_default","exports","addI18Keysets","dicts"],"sources":["index.ts"],"sourcesContent":["import {addI18Keysets} from '../../../i18n';\n\nimport dicts from './dicts';\n\nexport default addI18Keysets('qp:fields-selector', dicts);\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAY,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEG,IAAAG,mBAAa,EAAC,oBAAoB,EAAEC,cAAK,CAAC","ignoreList":[]}

package/build/cjs/components/FieldsSelector/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+    "action_configure-visible-fields": "Настроить видимые поля"
+}

package/build/cjs/components/FieldsSelector/index.d.ts

@@ -0,0 +1 @@
+export { FieldsSelector } from './FieldsSelector';

package/build/cjs/components/FieldsSelector/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FieldsSelector", {
+  enumerable: true,
+  get: function () {
+    return _FieldsSelector.FieldsSelector;
+  }
+});
+var _FieldsSelector = require("./FieldsSelector");
+// #sourceMappingURL=index.js.map

package/build/cjs/components/FieldsSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_FieldsSelector","require"],"sources":["index.ts"],"sourcesContent":["export {FieldsSelector} from './FieldsSelector';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,eAAA,GAAAC,OAAA","ignoreList":[]}

package/build/cjs/components/HistoryFilter/HistoryFilter.css

@@ -0,0 +1,4 @@
+.qp-history-filter__container {
+  padding: 20px;
+}
+/*# sourceMappingURL=HistoryFilter.css.map */

package/build/cjs/components/HistoryFilter/HistoryFilter.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["HistoryFilter.scss"],"names":[],"mappings":"AACE;EACE,aAAA;AAAJ","file":"HistoryFilter.css","sourcesContent":[".qp-history-filter {\n  &__container {\n    padding: 20px;\n  }\n}"],"sourceRoot":""}

package/build/cjs/components/HistoryFilter/HistoryFilter.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { QueryHistoryFilterConfig } from '../../types/history';
+import './HistoryFilter.scss';
+export declare const HistoryFilter: FC<QueryHistoryFilterConfig>;