@gravity-ui/querieskit 1.0.4 → 1.2.0

package/build/cjs/components/ChartEditorForm/internal/Field.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Field: ({ label, children }: {
+    label: React.ReactNode;
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/build/cjs/components/ChartEditorForm/internal/Field.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Field = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _uikit = require("@gravity-ui/uikit");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var Field = exports.Field = function Field(_ref) {
+  var label = _ref.label,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
+    direction: "column",
+    gap: 1,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      variant: "body-1",
+      color: "secondary",
+      children: label
+    }), children]
+  });
+};
+// #sourceMappingURL=Field.js.map

package/build/cjs/components/ChartEditorForm/internal/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_uikit","_jsxRuntime","e","__esModule","default","Field","exports","_ref","label","children","_jsxs","Flex","direction","gap","_jsx","Text","variant","color"],"sources":["Field.tsx"],"sourcesContent":["import React from 'react';\nimport {Flex, Text} from '@gravity-ui/uikit';\n\nexport const Field = ({label, children}: {label: React.ReactNode; children: React.ReactNode}) => (\n    <Flex direction=\"column\" gap={1}>\n        <Text variant=\"body-1\" color=\"secondary\">\n            {label}\n        </Text>\n        {children}\n    </Flex>\n);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAA6C,IAAAE,WAAA,GAAAF,OAAA;AAAA,SAAAD,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEtC,IAAMG,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG,SAARA,KAAKA,CAAAE,IAAA;EAAA,IAAKC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;EAAA,oBAClC,IAAAC,gBAAA,EAACC,WAAI;IAACC,SAAS,EAAC,QAAQ;IAACC,GAAG,EAAE,CAAE;IAAAJ,QAAA,gBAC5B,IAAAK,eAAA,EAACC,WAAI;MAACC,OAAO,EAAC,QAAQ;MAACC,KAAK,EAAC,WAAW;MAAAR,QAAA,EACnCD;IAAK,CACJ,CAAC,EACNC,QAAQ;EAAA,CACP,CAAC;AAAA,CACV","ignoreList":[]}

package/build/cjs/components/ChartEditorForm/types.d.ts

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type { ChartAxisType } from '@gravity-ui/charts';
+export type ChartEditorOption<TValue extends string = string> = {
+    value: TValue;
+    content: ReactNode;
+    disabled?: boolean;
+};
+export type ChartEditorFormValues = Partial<{
+    dataIds: string[];
+    axisType: ChartAxisType;
+    axisCategories: string[];
+    chartTitle: string;
+    xTitle: string;
+    yTitle: string;
+    showLegend: boolean;
+}>;
+export type ChartEditorLabels = Partial<{
+    formTitle: string;
+    data: string;
+    x: string;
+    axisType: string;
+    chartTitle: string;
+    xTitle: string;
+    yTitle: string;
+    showLegend: string;
+    empty: string;
+    cancelLabel: string;
+    submitLabel: string;
+}>;
+export type ChartEditorFormProps = {
+    dataIds?: string[];
+    axisVariants?: ChartAxisType[];
+    formValues: ChartEditorFormValues;
+    labels?: ChartEditorLabels;
+    disabled?: boolean;
+    className?: string;
+    onFormValuesChange?: (values: ChartEditorFormValues) => void;
+    onCancel?: () => void;
+    onSubmit?: () => void;
+};

package/build/cjs/components/ChartEditorForm/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+// #sourceMappingURL=types.js.map

package/build/cjs/components/ChartEditorForm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type {ReactNode} from 'react';\nimport type {ChartAxisType} from '@gravity-ui/charts';\n\nexport type ChartEditorOption<TValue extends string = string> = {\n    value: TValue;\n    content: ReactNode;\n    disabled?: boolean;\n};\n\nexport type ChartEditorFormValues = Partial<{\n    dataIds: string[];\n    axisType: ChartAxisType;\n    axisCategories: string[];\n    chartTitle: string;\n    xTitle: string;\n    yTitle: string;\n    showLegend: boolean;\n}>;\n\nexport type ChartEditorLabels = Partial<{\n    formTitle: string;\n    data: string;\n    x: string;\n    axisType: string;\n    chartTitle: string;\n    xTitle: string;\n    yTitle: string;\n    showLegend: string;\n    empty: string;\n    cancelLabel: string;\n    submitLabel: string;\n}>;\n\nexport type ChartEditorFormProps = {\n    dataIds?: string[];\n    axisVariants?: ChartAxisType[];\n    formValues: ChartEditorFormValues;\n    labels?: ChartEditorLabels;\n    disabled?: boolean;\n    className?: string;\n    onFormValuesChange?: (values: ChartEditorFormValues) => void;\n    onCancel?: () => void;\n    onSubmit?: () => void;\n};\n"],"mappings":"","ignoreList":[]}

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

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { NavigationCluster } from '../../types/navigation';
+export type ClusterRowProps = {
+    cluster: NavigationCluster;
+};
+export declare const ClusterRow: FC<ClusterRowProps>;

package/build/cjs/components/ClusterRow/ClusterRow.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClusterRow = void 0;
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireDefault(require("react"));
+var _uikit = require("@gravity-ui/uikit");
+var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var block = (0, _bemCnLite.default)('qp-cluster-row');
+var ClusterRow = exports.ClusterRow = function ClusterRow(_ref) {
+  var _ref$cluster = _ref.cluster,
+    icon = _ref$cluster.icon,
+    title = _ref$cluster.title,
+    color = _ref$cluster.color,
+    backgroundColor = _ref$cluster.backgroundColor,
+    description = _ref$cluster.description;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
+    gap: 2,
+    alignItems: "center",
+    className: block(),
+    children: [icon !== null && icon !== void 0 ? icon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Avatar, {
+      text: title,
+      shape: "square",
+      size: "2xs",
+      backgroundColor: backgroundColor,
+      color: color
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      className: block('title'),
+      ellipsis: true,
+      children: title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      color: "secondary",
+      ellipsis: true,
+      children: description
+    })]
+  });
+};
+// #sourceMappingURL=ClusterRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_uikit","_bemCnLite","_jsxRuntime","e","__esModule","default","block","cn","ClusterRow","exports","_ref","_ref$cluster","cluster","icon","title","color","backgroundColor","description","_jsxs","Flex","gap","alignItems","className","children","_jsx","Avatar","text","shape","size","Text","ellipsis"],"sources":["ClusterRow.tsx"],"sourcesContent":["import React, {FC} from 'react';\nimport {Avatar, Flex, Text} from '@gravity-ui/uikit';\nimport cn from 'bem-cn-lite';\nimport {NavigationCluster} from '../../types/navigation';\n\nconst block = cn('qp-cluster-row');\n\nexport type ClusterRowProps = {\n    cluster: NavigationCluster;\n};\n\nexport const ClusterRow: FC<ClusterRowProps> = ({\n    cluster: {icon, title, color, backgroundColor, description},\n}) => {\n    return (\n        <Flex gap={2} alignItems=\"center\" className={block()}>\n            {icon ?? (\n                <Avatar\n                    text={title}\n                    shape=\"square\"\n                    size=\"2xs\"\n                    backgroundColor={backgroundColor}\n                    color={color}\n                />\n            )}\n            <Text className={block('title')} ellipsis>\n                {title}\n            </Text>\n            <Text color=\"secondary\" ellipsis>\n                {description}\n            </Text>\n        </Flex>\n    );\n};\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA6B,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAG7B,IAAMG,KAAK,GAAG,IAAAC,kBAAE,EAAC,gBAAgB,CAAC;AAM3B,IAAMC,UAA+B,GAAAC,OAAA,CAAAD,UAAA,GAAG,SAAlCA,UAA+BA,CAAAE,IAAA,EAEtC;EAAA,IAAAC,YAAA,GAAAD,IAAA,CADFE,OAAO;IAAGC,IAAI,GAAAF,YAAA,CAAJE,IAAI;IAAEC,KAAK,GAAAH,YAAA,CAALG,KAAK;IAAEC,KAAK,GAAAJ,YAAA,CAALI,KAAK;IAAEC,eAAe,GAAAL,YAAA,CAAfK,eAAe;IAAEC,WAAW,GAAAN,YAAA,CAAXM,WAAW;EAE1D,oBACI,IAAAC,gBAAA,EAACC,WAAI;IAACC,GAAG,EAAE,CAAE;IAACC,UAAU,EAAC,QAAQ;IAACC,SAAS,EAAEhB,KAAK,CAAC,CAAE;IAAAiB,QAAA,GAChDV,IAAI,aAAJA,IAAI,cAAJA,IAAI,gBACD,IAAAW,eAAA,EAACC,aAAM;MACHC,IAAI,EAAEZ,KAAM;MACZa,KAAK,EAAC,QAAQ;MACdC,IAAI,EAAC,KAAK;MACVZ,eAAe,EAAEA,eAAgB;MACjCD,KAAK,EAAEA;IAAM,CAChB,CAAC,eAEN,IAAAS,eAAA,EAACK,WAAI;MAACP,SAAS,EAAEhB,KAAK,CAAC,OAAO,CAAE;MAACwB,QAAQ;MAAAP,QAAA,EACpCT;IAAK,CACJ,CAAC,eACP,IAAAU,eAAA,EAACK,WAAI;MAACd,KAAK,EAAC,WAAW;MAACe,QAAQ;MAAAP,QAAA,EAC3BN;IAAW,CACV,CAAC;EAAA,CACL,CAAC;AAEf,CAAC","ignoreList":[]}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["_ClusterRow","require"],"sources":["index.ts"],"sourcesContent":["export {ClusterRow} from './ClusterRow';\nexport type {ClusterRowProps} from './ClusterRow';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA","ignoreList":[]}

package/build/cjs/components/Dashboard/Dashboard.css

@@ -0,0 +1,5 @@
+.qp-dashboard {
+  --dashkit-grid-item-border-radius: var(--g-border-radius-m);
+  --dashkit-placeholder-color: var(--g-color-base-brand);
+}
+/*# sourceMappingURL=Dashboard.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Dashboard.scss"],"names":[],"mappings":"AAAA;EACI,2DAAA;EACA,sDAAA;AACJ","file":"Dashboard.css","sourcesContent":[".qp-dashboard {\n    --dashkit-grid-item-border-radius: var(--g-border-radius-m);\n    --dashkit-placeholder-color: var(--g-color-base-brand);\n}\n"],"sourceRoot":""}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DashboardProps } from './types';
+import './Dashboard.scss';
+export declare const Dashboard: ({ items, defaultLayout, grid: customerGridState, focusable, className, onLayoutChange, }: DashboardProps) => React.JSX.Element;

package/build/cjs/components/Dashboard/Dashboard.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dashboard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _uikit = require("@gravity-ui/uikit");
+var _DashPlate = require("./internal/DashPlate");
+var _DashboardProvider = require("./internal/DashboardProvider");
+var _dashkit = require("@gravity-ui/dashkit");
+var _useDashboardConfig2 = require("./hooks/useDashboardConfig");
+var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
+require("./Dashboard.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var block = (0, _bemCnLite.default)('qp-dashboard');
+var DASHBOARD_PLUGIN_TYPE = 'querieskit-dashboard-item';
+_dashkit.DashKit.reloadPlugins({
+  type: DASHBOARD_PLUGIN_TYPE,
+  renderer: _DashPlate.DashPlate,
+  defaultLayout: {
+    minW: 1,
+    minH: 1
+  }
+});
+var Dashboard = exports.Dashboard = function Dashboard(_ref) {
+  var items = _ref.items,
+    defaultLayout = _ref.defaultLayout,
+    customerGridState = _ref.grid,
+    _ref$focusable = _ref.focusable,
+    focusable = _ref$focusable === void 0 ? false : _ref$focusable,
+    className = _ref.className,
+    onLayoutChange = _ref.onLayoutChange;
+  var _useDashboardConfig = (0, _useDashboardConfig2.useDashboardConfig)(items, customerGridState, defaultLayout),
+    config = _useDashboardConfig.config,
+    gridGroups = _useDashboardConfig.gridGroups;
+  var handleChange = function handleChange(_ref2) {
+    var nextConfig = _ref2.config;
+    onLayoutChange === null || onLayoutChange === void 0 || onLayoutChange(nextConfig.layout);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Flex, {
+    width: "100%",
+    height: "100%",
+    className: block(null, className),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DashboardProvider.DashboardProvider, {
+      items: items,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dashkit.DashKit, {
+        config: config,
+        groups: gridGroups,
+        editMode: true,
+        noOverlay: true,
+        draggableHandleClassName: _DashPlate.DRAG_HANDLE_CLASSNAME,
+        focusable: focusable,
+        onChange: handleChange
+      })
+    })
+  });
+};
+// #sourceMappingURL=Dashboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_uikit","_DashPlate","_DashboardProvider","_dashkit","_useDashboardConfig2","_bemCnLite","_jsxRuntime","e","__esModule","default","block","cn","DASHBOARD_PLUGIN_TYPE","DashKit","reloadPlugins","type","renderer","DashPlate","defaultLayout","minW","minH","Dashboard","exports","_ref","items","customerGridState","grid","_ref$focusable","focusable","className","onLayoutChange","_useDashboardConfig","useDashboardConfig","config","gridGroups","handleChange","_ref2","nextConfig","layout","_jsx","Flex","width","height","children","DashboardProvider","groups","editMode","noOverlay","draggableHandleClassName","DRAG_HANDLE_CLASSNAME","onChange"],"sources":["Dashboard.tsx"],"sourcesContent":["import React from 'react';\nimport type {Config} from '@gravity-ui/dashkit';\nimport type {DashboardProps} from './types';\nimport {Flex} from '@gravity-ui/uikit';\nimport {DRAG_HANDLE_CLASSNAME, DashPlate} from './internal/DashPlate';\nimport {DashboardProvider} from './internal/DashboardProvider';\nimport {DashKit} from '@gravity-ui/dashkit';\nimport {useDashboardConfig} from './hooks/useDashboardConfig';\nimport cn from 'bem-cn-lite';\n\nimport './Dashboard.scss';\n\nconst block = cn('qp-dashboard');\nconst DASHBOARD_PLUGIN_TYPE = 'querieskit-dashboard-item';\n\nDashKit.reloadPlugins({\n    type: DASHBOARD_PLUGIN_TYPE,\n    renderer: DashPlate,\n    defaultLayout: {minW: 1, minH: 1},\n});\n\nexport const Dashboard = ({\n    items,\n    defaultLayout,\n    grid: customerGridState,\n    focusable = false,\n    className,\n    onLayoutChange,\n}: DashboardProps) => {\n    const {config, gridGroups} = useDashboardConfig(items, customerGridState, defaultLayout);\n\n    const handleChange = ({config: nextConfig}: {config: Config}) => {\n        onLayoutChange?.(nextConfig.layout);\n    };\n\n    return (\n        <Flex width=\"100%\" height=\"100%\" className={block(null, className)}>\n            <DashboardProvider items={items}>\n                <DashKit\n                    config={config}\n                    groups={gridGroups}\n                    editMode\n                    noOverlay\n                    draggableHandleClassName={DRAG_HANDLE_CLASSNAME}\n                    focusable={focusable}\n                    onChange={handleChange}\n                />\n            </DashboardProvider>\n        </Flex>\n    );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAL,OAAA;AACA,IAAAM,UAAA,GAAAP,sBAAA,CAAAC,OAAA;AAEAA,OAAA;AAA0B,IAAAO,WAAA,GAAAP,OAAA;AAAA,SAAAD,uBAAAS,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE1B,IAAMG,KAAK,GAAG,IAAAC,kBAAE,EAAC,cAAc,CAAC;AAChC,IAAMC,qBAAqB,GAAG,2BAA2B;AAEzDC,gBAAO,CAACC,aAAa,CAAC;EAClBC,IAAI,EAAEH,qBAAqB;EAC3BI,QAAQ,EAAEC,oBAAS;EACnBC,aAAa,EAAE;IAACC,IAAI,EAAE,CAAC;IAAEC,IAAI,EAAE;EAAC;AACpC,CAAC,CAAC;AAEK,IAAMC,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,SAAZA,SAASA,CAAAE,IAAA,EAOA;EAAA,IANlBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLN,aAAa,GAAAK,IAAA,CAAbL,aAAa;IACPO,iBAAiB,GAAAF,IAAA,CAAvBG,IAAI;IAAAC,cAAA,GAAAJ,IAAA,CACJK,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,KAAK,GAAAA,cAAA;IACjBE,SAAS,GAAAN,IAAA,CAATM,SAAS;IACTC,cAAc,GAAAP,IAAA,CAAdO,cAAc;EAEd,IAAAC,mBAAA,GAA6B,IAAAC,uCAAkB,EAACR,KAAK,EAAEC,iBAAiB,EAAEP,aAAa,CAAC;IAAjFe,MAAM,GAAAF,mBAAA,CAANE,MAAM;IAAEC,UAAU,GAAAH,mBAAA,CAAVG,UAAU;EAEzB,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAAC,KAAA,EAA+C;IAAA,IAAlCC,UAAU,GAAAD,KAAA,CAAlBH,MAAM;IACzBH,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAGO,UAAU,CAACC,MAAM,CAAC;EACvC,CAAC;EAED,oBACI,IAAAC,eAAA,EAACC,WAAI;IAACC,KAAK,EAAC,MAAM;IAACC,MAAM,EAAC,MAAM;IAACb,SAAS,EAAEnB,KAAK,CAAC,IAAI,EAAEmB,SAAS,CAAE;IAAAc,QAAA,eAC/D,IAAAJ,eAAA,EAACK,oCAAiB;MAACpB,KAAK,EAAEA,KAAM;MAAAmB,QAAA,eAC5B,IAAAJ,eAAA,EAAC1B,gBAAO;QACJoB,MAAM,EAAEA,MAAO;QACfY,MAAM,EAAEX,UAAW;QACnBY,QAAQ;QACRC,SAAS;QACTC,wBAAwB,EAAEC,gCAAsB;QAChDrB,SAAS,EAAEA,SAAU;QACrBsB,QAAQ,EAAEf;MAAa,CAC1B;IAAC,CACa;EAAC,CAClB,CAAC;AAEf,CAAC","ignoreList":[]}

package/build/cjs/components/Dashboard/Dashboard.stories.css

@@ -0,0 +1,16 @@
+.qp-dashboard-story {
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: var(--g-spacing-4);
+  background: var(--g-color-base-background);
+}
+.qp-dashboard-story__header {
+  margin-bottom: var(--g-spacing-4);
+}
+.qp-dashboard-story__dashboard {
+  width: 100%;
+}
+.qp-dashboard-story__dashboard_narrow {
+  max-width: 520px;
+}
+/*# sourceMappingURL=Dashboard.stories.css.map */

package/build/cjs/components/Dashboard/Dashboard.stories.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Dashboard.stories.scss"],"names":[],"mappings":"AAAA;EACI,iBAAA;EACA,sBAAA;EACA,2BAAA;EACA,0CAAA;AACJ;AACI;EACI,iCAAA;AACR;AAEI;EACI,WAAA;AAAR;AAEQ;EACI,gBAAA;AAAZ","file":"Dashboard.stories.css","sourcesContent":[".qp-dashboard-story {\n    min-height: 100vh;\n    box-sizing: border-box;\n    padding: var(--g-spacing-4);\n    background: var(--g-color-base-background);\n\n    &__header {\n        margin-bottom: var(--g-spacing-4);\n    }\n\n    &__dashboard {\n        width: 100%;\n\n        &_narrow {\n            max-width: 520px;\n        }\n    }\n}\n"],"sourceRoot":""}

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Dashboard } from './Dashboard';
+import './Dashboard.stories.scss';
+declare const meta: Meta<typeof Dashboard>;
+export default meta;
+type Story = StoryObj<typeof Dashboard>;
+/** A draggable and resizable dashboard with charts and arbitrary React content. */
+export declare const Default: Story;
+/** Dashboard manages a default layout and creates positions for items added at runtime. */
+export declare const DynamicItems: Story;
+/** The layout can be fully controlled, persisted and replaced with a preset. */
+export declare const ControlledLayout: Story;
+/** Grid columns, row height, gaps and compaction can be adapted to the host container. */
+export declare const CustomGrid: Story;

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

@@ -0,0 +1,334 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DynamicItems = exports.Default = exports.CustomGrid = exports.ControlledLayout = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.slice.js");
+require("core-js/modules/es.object.to-string.js");
+var _react = _interopRequireDefault(require("react"));
+var _charts = require("@gravity-ui/charts");
+var _uikit = require("@gravity-ui/uikit");
+var _actions = require("storybook/actions");
+var _Dashboard = require("./Dashboard");
+require("./Dashboard.stories.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var errorsChart = {
+  legend: {
+    enabled: false
+  },
+  xAxis: {
+    type: 'linear'
+  },
+  yAxis: [{
+    type: 'linear',
+    min: 0
+  }],
+  series: {
+    data: [{
+      type: 'line',
+      name: 'Errors',
+      data: [82, 76, 79, 68, 84, 61, 74, 44, 71, 59, 66, 63, 77, 72, 80, 75].map(function (y, x) {
+        return {
+          x: x,
+          y: y
+        };
+      })
+    }]
+  }
+};
+var latencyChart = {
+  legend: {
+    enabled: false
+  },
+  xAxis: {
+    type: 'linear'
+  },
+  yAxis: [{
+    type: 'linear',
+    min: 0
+  }],
+  series: {
+    data: [{
+      type: 'area',
+      name: 'Latency',
+      data: [42, 58, 47, 69, 52, 74, 63, 78, 68, 81, 73, 86, 79, 88, 83, 91].map(function (y, x) {
+        return {
+          x: x,
+          y: y
+        };
+      })
+    }]
+  }
+};
+var baseItems = [{
+  id: 'errors',
+  content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_charts.Chart, {
+    data: errorsChart
+  })
+}, {
+  id: 'latency',
+  content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_charts.Chart, {
+    data: latencyChart
+  })
+}, {
+  id: 'availability',
+  content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
+    direction: "column",
+    gap: 1,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      variant: "display-3",
+      children: "98.7%"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      color: "secondary",
+      children: "Availability during the last 24 hours"
+    })]
+  })
+}];
+var operationalItems = [].concat(baseItems, [{
+  id: 'requests',
+  content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
+    direction: "column",
+    gap: 1,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      variant: "display-3",
+      children: "12.4k"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+      color: "secondary",
+      children: "Requests per minute"
+    })]
+  })
+}]);
+var balancedLayout = [{
+  i: 'errors',
+  x: 0,
+  y: 0,
+  w: 2,
+  h: 4
+}, {
+  i: 'latency',
+  x: 2,
+  y: 0,
+  w: 2,
+  h: 4
+}, {
+  i: 'availability',
+  x: 0,
+  y: 4,
+  w: 2,
+  h: 3
+}, {
+  i: 'requests',
+  x: 2,
+  y: 4,
+  w: 2,
+  h: 3
+}];
+var overviewLayout = [{
+  i: 'errors',
+  x: 0,
+  y: 0,
+  w: 4,
+  h: 5
+}, {
+  i: 'latency',
+  x: 0,
+  y: 5,
+  w: 2,
+  h: 4
+}, {
+  i: 'availability',
+  x: 2,
+  y: 5,
+  w: 1,
+  h: 4
+}, {
+  i: 'requests',
+  x: 3,
+  y: 5,
+  w: 1,
+  h: 4
+}];
+function StoryFrame(_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    actions = _ref.actions,
+    children = _ref.children,
+    _ref$narrow = _ref.narrow,
+    narrow = _ref$narrow === void 0 ? false : _ref$narrow;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "qp-dashboard-story",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
+      direction: "column",
+      gap: 1,
+      className: "qp-dashboard-story__header",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 4,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+          variant: "header-1",
+          children: title
+        }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Flex, {
+          gap: 2,
+          children: actions
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+        color: "secondary",
+        children: description
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: narrow ? 'qp-dashboard-story__dashboard qp-dashboard-story__dashboard_narrow' : 'qp-dashboard-story__dashboard',
+      children: children
+    })]
+  });
+}
+function DynamicItemsStory() {
+  var _React$useState = _react.default.useState(baseItems),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    items = _React$useState2[0],
+    setItems = _React$useState2[1];
+  var handleAddItem = function handleAddItem() {
+    setItems(function (currentItems) {
+      var itemNumber = currentItems.length + 1;
+      return [].concat((0, _toConsumableArray2.default)(currentItems), [{
+        id: "metric-".concat(itemNumber),
+        content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Flex, {
+          direction: "column",
+          gap: 1,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Text, {
+            variant: "display-3",
+            children: itemNumber * 128
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikit.Text, {
+            color: "secondary",
+            children: ["Dynamically added metric #", itemNumber]
+          })]
+        })
+      }]);
+    });
+  };
+  var handleRemoveItem = function handleRemoveItem() {
+    setItems(function (currentItems) {
+      return currentItems.slice(0, -1);
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StoryFrame, {
+    title: "Dynamic items",
+    description: "Add and remove items: Dashboard creates layout entries for new stable ids automatically.",
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+        onClick: handleAddItem,
+        children: "Add metric"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+        disabled: items.length === 0,
+        onClick: handleRemoveItem,
+        children: "Remove last"
+      })]
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dashboard.Dashboard, {
+      items: items,
+      onLayoutChange: (0, _actions.action)('onLayoutChange')
+    })
+  });
+}
+function ControlledLayoutStory() {
+  var _React$useState3 = _react.default.useState(balancedLayout),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    layout = _React$useState4[0],
+    setLayout = _React$useState4[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StoryFrame, {
+    title: "Controlled layout",
+    description: "Switch presets, then drag or resize a card: every change is saved back to the controlled layout.",
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+        selected: layout === balancedLayout,
+        onClick: function onClick() {
+          return setLayout(balancedLayout);
+        },
+        children: "Balanced"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikit.Button, {
+        selected: layout === overviewLayout,
+        onClick: function onClick() {
+          return setLayout(overviewLayout);
+        },
+        children: "Overview"
+      })]
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dashboard.Dashboard, {
+      items: operationalItems,
+      defaultLayout: layout,
+      onLayoutChange: function onLayoutChange(nextLayout) {
+        setLayout(nextLayout);
+        (0, _actions.action)('onLayoutChange')(nextLayout);
+      }
+    })
+  });
+}
+function NarrowGridStory() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StoryFrame, {
+    narrow: true,
+    title: "Custom grid",
+    description: "A one-column grid with custom row height and gap fits the same items into a narrow container.",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dashboard.Dashboard, {
+      items: baseItems,
+      grid: {
+        cols: 1,
+        rowHeight: 56,
+        gap: 12,
+        compactType: 'vertical'
+      },
+      onLayoutChange: (0, _actions.action)('onLayoutChange')
+    })
+  });
+}
+var meta = {
+  title: 'Components/Dashboard',
+  component: _Dashboard.Dashboard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+var _default = exports.default = meta;
+/** A draggable and resizable dashboard with charts and arbitrary React content. */
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StoryFrame, {
+      title: "Service overview",
+      description: "Drag cards by the handle or resize them from the corner to rearrange the dashboard.",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dashboard.Dashboard, {
+        items: baseItems,
+        onLayoutChange: (0, _actions.action)('onLayoutChange')
+      })
+    });
+  }
+};
+
+/** Dashboard manages a default layout and creates positions for items added at runtime. */
+var DynamicItems = exports.DynamicItems = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DynamicItemsStory, {});
+  }
+};
+
+/** The layout can be fully controlled, persisted and replaced with a preset. */
+var ControlledLayout = exports.ControlledLayout = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ControlledLayoutStory, {});
+  }
+};
+
+/** Grid columns, row height, gaps and compaction can be adapted to the host container. */
+var CustomGrid = exports.CustomGrid = {
+  render: function render() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(NarrowGridStory, {});
+  }
+};
+// #sourceMappingURL=Dashboard.stories.js.map