@gravity-ui/querieskit 1.0.4 → 1.1.0

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

@@ -0,0 +1,327 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.to-string.js";
+import React from 'react';
+import { Chart } from '@gravity-ui/charts';
+import { Button, Flex, Text } from '@gravity-ui/uikit';
+import { action } from 'storybook/actions';
+import { Dashboard } from "./Dashboard";
+import "./Dashboard.stories.css";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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__*/_jsx(Chart, {
+    data: errorsChart
+  })
+}, {
+  id: 'latency',
+  content: /*#__PURE__*/_jsx(Chart, {
+    data: latencyChart
+  })
+}, {
+  id: 'availability',
+  content: /*#__PURE__*/_jsxs(Flex, {
+    direction: "column",
+    gap: 1,
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "display-3",
+      children: "98.7%"
+    }), /*#__PURE__*/_jsx(Text, {
+      color: "secondary",
+      children: "Availability during the last 24 hours"
+    })]
+  })
+}];
+var operationalItems = [].concat(baseItems, [{
+  id: 'requests',
+  content: /*#__PURE__*/_jsxs(Flex, {
+    direction: "column",
+    gap: 1,
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "display-3",
+      children: "12.4k"
+    }), /*#__PURE__*/_jsx(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__*/_jsxs("div", {
+    className: "qp-dashboard-story",
+    children: [/*#__PURE__*/_jsxs(Flex, {
+      direction: "column",
+      gap: 1,
+      className: "qp-dashboard-story__header",
+      children: [/*#__PURE__*/_jsxs(Flex, {
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 4,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "header-1",
+          children: title
+        }), actions && /*#__PURE__*/_jsx(Flex, {
+          gap: 2,
+          children: actions
+        })]
+      }), /*#__PURE__*/_jsx(Text, {
+        color: "secondary",
+        children: description
+      })]
+    }), /*#__PURE__*/_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.useState(baseItems),
+    _React$useState2 = _slicedToArray(_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(_toConsumableArray(currentItems), [{
+        id: "metric-".concat(itemNumber),
+        content: /*#__PURE__*/_jsxs(Flex, {
+          direction: "column",
+          gap: 1,
+          children: [/*#__PURE__*/_jsx(Text, {
+            variant: "display-3",
+            children: itemNumber * 128
+          }), /*#__PURE__*/_jsxs(Text, {
+            color: "secondary",
+            children: ["Dynamically added metric #", itemNumber]
+          })]
+        })
+      }]);
+    });
+  };
+  var handleRemoveItem = function handleRemoveItem() {
+    setItems(function (currentItems) {
+      return currentItems.slice(0, -1);
+    });
+  };
+  return /*#__PURE__*/_jsx(StoryFrame, {
+    title: "Dynamic items",
+    description: "Add and remove items: Dashboard creates layout entries for new stable ids automatically.",
+    actions: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: handleAddItem,
+        children: "Add metric"
+      }), /*#__PURE__*/_jsx(Button, {
+        disabled: items.length === 0,
+        onClick: handleRemoveItem,
+        children: "Remove last"
+      })]
+    }),
+    children: /*#__PURE__*/_jsx(Dashboard, {
+      items: items,
+      onLayoutChange: action('onLayoutChange')
+    })
+  });
+}
+function ControlledLayoutStory() {
+  var _React$useState3 = React.useState(balancedLayout),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    layout = _React$useState4[0],
+    setLayout = _React$useState4[1];
+  return /*#__PURE__*/_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__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        selected: layout === balancedLayout,
+        onClick: function onClick() {
+          return setLayout(balancedLayout);
+        },
+        children: "Balanced"
+      }), /*#__PURE__*/_jsx(Button, {
+        selected: layout === overviewLayout,
+        onClick: function onClick() {
+          return setLayout(overviewLayout);
+        },
+        children: "Overview"
+      })]
+    }),
+    children: /*#__PURE__*/_jsx(Dashboard, {
+      items: operationalItems,
+      defaultLayout: layout,
+      onLayoutChange: function onLayoutChange(nextLayout) {
+        setLayout(nextLayout);
+        action('onLayoutChange')(nextLayout);
+      }
+    })
+  });
+}
+function NarrowGridStory() {
+  return /*#__PURE__*/_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__*/_jsx(Dashboard, {
+      items: baseItems,
+      grid: {
+        cols: 1,
+        rowHeight: 56,
+        gap: 12,
+        compactType: 'vertical'
+      },
+      onLayoutChange: action('onLayoutChange')
+    })
+  });
+}
+var meta = {
+  title: 'Components/Dashboard',
+  component: Dashboard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+export default meta;
+/** A draggable and resizable dashboard with charts and arbitrary React content. */
+export var Default = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(StoryFrame, {
+      title: "Service overview",
+      description: "Drag cards by the handle or resize them from the corner to rearrange the dashboard.",
+      children: /*#__PURE__*/_jsx(Dashboard, {
+        items: baseItems,
+        onLayoutChange: action('onLayoutChange')
+      })
+    });
+  }
+};
+
+/** Dashboard manages a default layout and creates positions for items added at runtime. */
+export var DynamicItems = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(DynamicItemsStory, {});
+  }
+};
+
+/** The layout can be fully controlled, persisted and replaced with a preset. */
+export var ControlledLayout = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(ControlledLayoutStory, {});
+  }
+};
+
+/** Grid columns, row height, gaps and compaction can be adapted to the host container. */
+export var CustomGrid = {
+  render: function render() {
+    return /*#__PURE__*/_jsx(NarrowGridStory, {});
+  }
+};
+// #sourceMappingURL=Dashboard.stories.js.map

package/build/esm/components/Dashboard/Dashboard.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Chart","Button","Flex","Text","action","Dashboard","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","errorsChart","legend","enabled","xAxis","type","yAxis","min","series","data","name","map","y","x","latencyChart","baseItems","id","content","direction","gap","children","variant","color","operationalItems","concat","balancedLayout","i","w","h","overviewLayout","StoryFrame","_ref","title","description","actions","_ref$narrow","narrow","className","alignItems","justifyContent","DynamicItemsStory","_React$useState","useState","_React$useState2","_slicedToArray","items","setItems","handleAddItem","currentItems","itemNumber","length","_toConsumableArray","handleRemoveItem","slice","onClick","disabled","onLayoutChange","ControlledLayoutStory","_React$useState3","_React$useState4","layout","setLayout","selected","defaultLayout","nextLayout","NarrowGridStory","grid","cols","rowHeight","compactType","meta","component","tags","parameters","Default","render","DynamicItems","ControlledLayout","CustomGrid"],"sources":["Dashboard.stories.tsx"],"sourcesContent":["import React from 'react';\nimport {Chart, type ChartData} from '@gravity-ui/charts';\nimport type {ConfigLayout} from '@gravity-ui/dashkit';\nimport {Button, Flex, Text} from '@gravity-ui/uikit';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {action} from 'storybook/actions';\n\nimport {Dashboard} from './Dashboard';\nimport type {DashboardRenderItem} from './types';\n\nimport './Dashboard.stories.scss';\n\nconst errorsChart: ChartData = {\n    legend: {enabled: false},\n    xAxis: {type: 'linear'},\n    yAxis: [{type: 'linear', min: 0}],\n    series: {\n        data: [\n            {\n                type: 'line',\n                name: 'Errors',\n                data: [82, 76, 79, 68, 84, 61, 74, 44, 71, 59, 66, 63, 77, 72, 80, 75].map(\n                    (y, x) => ({x, y}),\n                ),\n            },\n        ],\n    },\n};\n\nconst latencyChart: ChartData = {\n    legend: {enabled: false},\n    xAxis: {type: 'linear'},\n    yAxis: [{type: 'linear', min: 0}],\n    series: {\n        data: [\n            {\n                type: 'area',\n                name: 'Latency',\n                data: [42, 58, 47, 69, 52, 74, 63, 78, 68, 81, 73, 86, 79, 88, 83, 91].map(\n                    (y, x) => ({x, y}),\n                ),\n            },\n        ],\n    },\n};\n\nconst baseItems: DashboardRenderItem[] = [\n    {id: 'errors', content: <Chart data={errorsChart} />},\n    {id: 'latency', content: <Chart data={latencyChart} />},\n    {\n        id: 'availability',\n        content: (\n            <Flex direction=\"column\" gap={1}>\n                <Text variant=\"display-3\">98.7%</Text>\n                <Text color=\"secondary\">Availability during the last 24 hours</Text>\n            </Flex>\n        ),\n    },\n];\n\nconst operationalItems: DashboardRenderItem[] = [\n    ...baseItems,\n    {\n        id: 'requests',\n        content: (\n            <Flex direction=\"column\" gap={1}>\n                <Text variant=\"display-3\">12.4k</Text>\n                <Text color=\"secondary\">Requests per minute</Text>\n            </Flex>\n        ),\n    },\n];\n\nconst balancedLayout: ConfigLayout[] = [\n    {i: 'errors', x: 0, y: 0, w: 2, h: 4},\n    {i: 'latency', x: 2, y: 0, w: 2, h: 4},\n    {i: 'availability', x: 0, y: 4, w: 2, h: 3},\n    {i: 'requests', x: 2, y: 4, w: 2, h: 3},\n];\n\nconst overviewLayout: ConfigLayout[] = [\n    {i: 'errors', x: 0, y: 0, w: 4, h: 5},\n    {i: 'latency', x: 0, y: 5, w: 2, h: 4},\n    {i: 'availability', x: 2, y: 5, w: 1, h: 4},\n    {i: 'requests', x: 3, y: 5, w: 1, h: 4},\n];\n\nfunction StoryFrame({\n    title,\n    description,\n    actions,\n    children,\n    narrow = false,\n}: {\n    title: string;\n    description: string;\n    actions?: React.ReactNode;\n    children: React.ReactNode;\n    narrow?: boolean;\n}) {\n    return (\n        <div className=\"qp-dashboard-story\">\n            <Flex direction=\"column\" gap={1} className=\"qp-dashboard-story__header\">\n                <Flex alignItems=\"center\" justifyContent=\"space-between\" gap={4}>\n                    <Text variant=\"header-1\">{title}</Text>\n                    {actions && <Flex gap={2}>{actions}</Flex>}\n                </Flex>\n                <Text color=\"secondary\">{description}</Text>\n            </Flex>\n            <div\n                className={\n                    narrow\n                        ? 'qp-dashboard-story__dashboard qp-dashboard-story__dashboard_narrow'\n                        : 'qp-dashboard-story__dashboard'\n                }\n            >\n                {children}\n            </div>\n        </div>\n    );\n}\n\nfunction DynamicItemsStory() {\n    const [items, setItems] = React.useState(baseItems);\n\n    const handleAddItem = () => {\n        setItems((currentItems) => {\n            const itemNumber = currentItems.length + 1;\n\n            return [\n                ...currentItems,\n                {\n                    id: `metric-${itemNumber}`,\n                    content: (\n                        <Flex direction=\"column\" gap={1}>\n                            <Text variant=\"display-3\">{itemNumber * 128}</Text>\n                            <Text color=\"secondary\">Dynamically added metric #{itemNumber}</Text>\n                        </Flex>\n                    ),\n                },\n            ];\n        });\n    };\n\n    const handleRemoveItem = () => {\n        setItems((currentItems) => currentItems.slice(0, -1));\n    };\n\n    return (\n        <StoryFrame\n            title=\"Dynamic items\"\n            description=\"Add and remove items: Dashboard creates layout entries for new stable ids automatically.\"\n            actions={\n                <>\n                    <Button onClick={handleAddItem}>Add metric</Button>\n                    <Button disabled={items.length === 0} onClick={handleRemoveItem}>\n                        Remove last\n                    </Button>\n                </>\n            }\n        >\n            <Dashboard items={items} onLayoutChange={action('onLayoutChange')} />\n        </StoryFrame>\n    );\n}\n\nfunction ControlledLayoutStory() {\n    const [layout, setLayout] = React.useState(balancedLayout);\n\n    return (\n        <StoryFrame\n            title=\"Controlled layout\"\n            description=\"Switch presets, then drag or resize a card: every change is saved back to the controlled layout.\"\n            actions={\n                <>\n                    <Button\n                        selected={layout === balancedLayout}\n                        onClick={() => setLayout(balancedLayout)}\n                    >\n                        Balanced\n                    </Button>\n                    <Button\n                        selected={layout === overviewLayout}\n                        onClick={() => setLayout(overviewLayout)}\n                    >\n                        Overview\n                    </Button>\n                </>\n            }\n        >\n            <Dashboard\n                items={operationalItems}\n                defaultLayout={layout}\n                onLayoutChange={(nextLayout) => {\n                    setLayout(nextLayout);\n                    action('onLayoutChange')(nextLayout);\n                }}\n            />\n        </StoryFrame>\n    );\n}\n\nfunction NarrowGridStory() {\n    return (\n        <StoryFrame\n            narrow\n            title=\"Custom grid\"\n            description=\"A one-column grid with custom row height and gap fits the same items into a narrow container.\"\n        >\n            <Dashboard\n                items={baseItems}\n                grid={{cols: 1, rowHeight: 56, gap: 12, compactType: 'vertical'}}\n                onLayoutChange={action('onLayoutChange')}\n            />\n        </StoryFrame>\n    );\n}\n\nconst meta: Meta<typeof Dashboard> = {\n    title: 'Components/Dashboard',\n    component: Dashboard,\n    tags: ['autodocs'],\n    parameters: {layout: 'fullscreen'},\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Dashboard>;\n\n/** A draggable and resizable dashboard with charts and arbitrary React content. */\nexport const Default: Story = {\n    render: () => (\n        <StoryFrame\n            title=\"Service overview\"\n            description=\"Drag cards by the handle or resize them from the corner to rearrange the dashboard.\"\n        >\n            <Dashboard items={baseItems} onLayoutChange={action('onLayoutChange')} />\n        </StoryFrame>\n    ),\n};\n\n/** Dashboard manages a default layout and creates positions for items added at runtime. */\nexport const DynamicItems: Story = {render: () => <DynamicItemsStory />};\n\n/** The layout can be fully controlled, persisted and replaced with a preset. */\nexport const ControlledLayout: Story = {render: () => <ControlledLayoutStory />};\n\n/** Grid columns, row height, gaps and compaction can be adapted to the host container. */\nexport const CustomGrid: Story = {render: () => <NarrowGridStory />};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/components/Dashboard/Dashboard.stories.scss

@@ -0,0 +1,18 @@
+.qp-dashboard-story {
+    min-height: 100vh;
+    box-sizing: border-box;
+    padding: var(--g-spacing-4);
+    background: var(--g-color-base-background);
+
+    &__header {
+        margin-bottom: var(--g-spacing-4);
+    }
+
+    &__dashboard {
+        width: 100%;
+
+        &_narrow {
+            max-width: 520px;
+        }
+    }
+}

package/build/esm/components/Dashboard/helpers/createDefaultLayout.d.ts

@@ -0,0 +1,10 @@
+import type { DashboardRenderItem } from '../types';
+import type { ConfigLayout } from '@gravity-ui/dashkit';
+export declare const createDefaultLayout: (items: DashboardRenderItem[], columns: number) => ConfigLayout[];
+export declare const createDefaultLayoutForItem: (item: DashboardRenderItem, columns: number, index: number) => {
+    i: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};

package/build/esm/components/Dashboard/helpers/createDefaultLayout.js

@@ -0,0 +1,33 @@
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.string.iterator.js";
+var DEFAULT_ITEM_HEIGHT = 4;
+export var createDefaultLayout = function createDefaultLayout(items, columns) {
+  var itemCount = items.length;
+  var width = Math.min(Math.ceil(columns / 2), columns);
+  var height = DEFAULT_ITEM_HEIGHT;
+  var itemsPerRow = Math.max(Math.floor(columns / width), 1);
+  return Array.from({
+    length: itemCount
+  }, function (_, index) {
+    return {
+      i: items[index].id,
+      x: index % itemsPerRow * width,
+      y: Math.floor(index / itemsPerRow) * height,
+      w: width,
+      h: height
+    };
+  });
+};
+export var createDefaultLayoutForItem = function createDefaultLayoutForItem(item, columns, index) {
+  var width = Math.min(Math.ceil(columns / 2), columns);
+  var height = DEFAULT_ITEM_HEIGHT;
+  var itemsPerRow = Math.max(Math.floor(columns / width), 1);
+  return {
+    i: item.id,
+    x: index % itemsPerRow * width,
+    y: Math.floor(index / itemsPerRow) * height,
+    w: width,
+    h: DEFAULT_ITEM_HEIGHT
+  };
+};
+// #sourceMappingURL=createDefaultLayout.js.map

package/build/esm/components/Dashboard/helpers/createDefaultLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_ITEM_HEIGHT","createDefaultLayout","items","columns","itemCount","length","width","Math","min","ceil","height","itemsPerRow","max","floor","Array","from","_","index","i","id","x","y","w","h","createDefaultLayoutForItem","item"],"sources":["createDefaultLayout.ts"],"sourcesContent":["import type {DashboardRenderItem} from '../types';\nimport type {ConfigLayout} from '@gravity-ui/dashkit';\n\nconst DEFAULT_ITEM_HEIGHT = 4;\n\nexport const createDefaultLayout = (\n    items: DashboardRenderItem[],\n    columns: number,\n): ConfigLayout[] => {\n    const itemCount = items.length;\n\n    const width = Math.min(Math.ceil(columns / 2), columns);\n    const height = DEFAULT_ITEM_HEIGHT;\n\n    const itemsPerRow = Math.max(Math.floor(columns / width), 1);\n\n    return Array.from({length: itemCount}, (_, index) => ({\n        i: items[index].id,\n        x: (index % itemsPerRow) * width,\n        y: Math.floor(index / itemsPerRow) * height,\n        w: width,\n        h: height,\n    }));\n};\n\nexport const createDefaultLayoutForItem = (\n    item: DashboardRenderItem,\n    columns: number,\n    index: number,\n) => {\n    const width = Math.min(Math.ceil(columns / 2), columns);\n    const height = DEFAULT_ITEM_HEIGHT;\n\n    const itemsPerRow = Math.max(Math.floor(columns / width), 1);\n\n    return {\n        i: item.id,\n        x: (index % itemsPerRow) * width,\n        y: Math.floor(index / itemsPerRow) * height,\n        w: width,\n        h: DEFAULT_ITEM_HEIGHT,\n    };\n};\n"],"mappings":";;AAGA,IAAMA,mBAAmB,GAAG,CAAC;AAE7B,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAC5BC,KAA4B,EAC5BC,OAAe,EACE;EACjB,IAAMC,SAAS,GAAGF,KAAK,CAACG,MAAM;EAE9B,IAAMC,KAAK,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,IAAI,CAACN,OAAO,GAAG,CAAC,CAAC,EAAEA,OAAO,CAAC;EACvD,IAAMO,MAAM,GAAGV,mBAAmB;EAElC,IAAMW,WAAW,GAAGJ,IAAI,CAACK,GAAG,CAACL,IAAI,CAACM,KAAK,CAACV,OAAO,GAAGG,KAAK,CAAC,EAAE,CAAC,CAAC;EAE5D,OAAOQ,KAAK,CAACC,IAAI,CAAC;IAACV,MAAM,EAAED;EAAS,CAAC,EAAE,UAACY,CAAC,EAAEC,KAAK;IAAA,OAAM;MAClDC,CAAC,EAAEhB,KAAK,CAACe,KAAK,CAAC,CAACE,EAAE;MAClBC,CAAC,EAAGH,KAAK,GAAGN,WAAW,GAAIL,KAAK;MAChCe,CAAC,EAAEd,IAAI,CAACM,KAAK,CAACI,KAAK,GAAGN,WAAW,CAAC,GAAGD,MAAM;MAC3CY,CAAC,EAAEhB,KAAK;MACRiB,CAAC,EAAEb;IACP,CAAC;EAAA,CAAC,CAAC;AACP,CAAC;AAED,OAAO,IAAMc,0BAA0B,GAAG,SAA7BA,0BAA0BA,CACnCC,IAAyB,EACzBtB,OAAe,EACfc,KAAa,EACZ;EACD,IAAMX,KAAK,GAAGC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,IAAI,CAACN,OAAO,GAAG,CAAC,CAAC,EAAEA,OAAO,CAAC;EACvD,IAAMO,MAAM,GAAGV,mBAAmB;EAElC,IAAMW,WAAW,GAAGJ,IAAI,CAACK,GAAG,CAACL,IAAI,CAACM,KAAK,CAACV,OAAO,GAAGG,KAAK,CAAC,EAAE,CAAC,CAAC;EAE5D,OAAO;IACHY,CAAC,EAAEO,IAAI,CAACN,EAAE;IACVC,CAAC,EAAGH,KAAK,GAAGN,WAAW,GAAIL,KAAK;IAChCe,CAAC,EAAEd,IAAI,CAACM,KAAK,CAACI,KAAK,GAAGN,WAAW,CAAC,GAAGD,MAAM;IAC3CY,CAAC,EAAEhB,KAAK;IACRiB,CAAC,EAAEvB;EACP,CAAC;AACL,CAAC","ignoreList":[]}

package/build/esm/components/Dashboard/hooks/useDashboardConfig.d.ts

@@ -0,0 +1,9 @@
+import type { DashboardProps, DashboardRenderItem } from '../types';
+import type { Config, ConfigLayout, DashKitGroup, ReactGridLayoutProps } from '@gravity-ui/dashkit';
+export declare const DASHBOARD_PLUGIN_TYPE = "querieskit-dashboard-item";
+export declare const DEFAULT_COLUMNS = 4;
+export declare const DEFAULT_GRID: DashboardProps['grid'];
+export declare const useDashboardConfig: (items: DashboardRenderItem[], customerGridState?: ReactGridLayoutProps, defaultLayout?: ConfigLayout[]) => {
+    config: Config;
+    gridGroups: DashKitGroup[];
+};

package/build/esm/components/Dashboard/hooks/useDashboardConfig.js

@@ -0,0 +1,59 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.object.to-string.js";
+import { useMemo } from 'react';
+import { createDefaultLayout } from "../helpers/createDefaultLayout";
+export var DASHBOARD_PLUGIN_TYPE = 'querieskit-dashboard-item';
+export var DEFAULT_COLUMNS = 4;
+export var DEFAULT_GRID = {
+  cols: DEFAULT_COLUMNS,
+  rowHeight: 64,
+  gap: 8,
+  compactType: 'vertical'
+};
+export var useDashboardConfig = function useDashboardConfig(items, customerGridState, defaultLayout) {
+  var gridProps = useMemo(function () {
+    var _customerGridState$ga;
+    var gap = (_customerGridState$ga = customerGridState === null || customerGridState === void 0 ? void 0 : customerGridState.gap) !== null && _customerGridState$ga !== void 0 ? _customerGridState$ga : DEFAULT_GRID.gap;
+    return _objectSpread(_objectSpread({
+      containerPadding: [0, 0],
+      margin: typeof gap === 'number' ? [gap, gap] : gap
+    }, DEFAULT_GRID), customerGridState);
+  }, [customerGridState]);
+  var gridGroups = useMemo(function () {
+    return [{
+      gridProperties: function gridProperties() {
+        return gridProps;
+      }
+    }];
+  }, [gridProps]);
+  var cols = gridProps.cols;
+  var layout = useMemo(function () {
+    return defaultLayout !== null && defaultLayout !== void 0 ? defaultLayout : createDefaultLayout(items, cols);
+  }, [defaultLayout, items, cols]);
+  var config = useMemo(function () {
+    return {
+      salt: 'querieskit-dashboard',
+      counter: 0,
+      aliases: {},
+      connections: [],
+      items: items.map(function (_ref) {
+        var id = _ref.id;
+        return {
+          id: id,
+          type: DASHBOARD_PLUGIN_TYPE,
+          namespace: 'default',
+          data: {}
+        };
+      }),
+      layout: layout
+    };
+  }, [layout, items]);
+  return {
+    config: config,
+    gridGroups: gridGroups
+  };
+};
+// #sourceMappingURL=useDashboardConfig.js.map

package/build/esm/components/Dashboard/hooks/useDashboardConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","createDefaultLayout","DASHBOARD_PLUGIN_TYPE","DEFAULT_COLUMNS","DEFAULT_GRID","cols","rowHeight","gap","compactType","useDashboardConfig","items","customerGridState","defaultLayout","gridProps","_customerGridState$ga","_objectSpread","containerPadding","margin","gridGroups","gridProperties","layout","config","salt","counter","aliases","connections","map","_ref","id","type","namespace","data"],"sources":["useDashboardConfig.ts"],"sourcesContent":["import {useMemo} from 'react';\nimport {createDefaultLayout} from '../helpers/createDefaultLayout';\nimport type {DashboardProps, DashboardRenderItem} from '../types';\nimport type {Config, ConfigLayout, DashKitGroup, ReactGridLayoutProps} from '@gravity-ui/dashkit';\n\nexport const DASHBOARD_PLUGIN_TYPE = 'querieskit-dashboard-item';\n\nexport const DEFAULT_COLUMNS = 4;\n\nexport const DEFAULT_GRID: DashboardProps['grid'] = {\n    cols: DEFAULT_COLUMNS,\n    rowHeight: 64,\n    gap: 8,\n    compactType: 'vertical',\n};\n\nexport const useDashboardConfig = (\n    items: DashboardRenderItem[],\n    customerGridState?: ReactGridLayoutProps,\n    defaultLayout?: ConfigLayout[],\n) => {\n    const gridProps: ReactGridLayoutProps = useMemo(() => {\n        const gap = customerGridState?.gap ?? DEFAULT_GRID.gap;\n\n        return {\n            containerPadding: [0, 0],\n            margin: typeof gap === 'number' ? [gap, gap] : gap,\n            ...DEFAULT_GRID,\n            ...customerGridState,\n        };\n    }, [customerGridState]);\n\n    const gridGroups = useMemo<DashKitGroup[]>(\n        () => [{gridProperties: () => gridProps}],\n        [gridProps],\n    );\n\n    const cols = gridProps.cols;\n\n    const layout = useMemo(\n        () => defaultLayout ?? createDefaultLayout(items, cols),\n        [defaultLayout, items, cols],\n    );\n\n    const config: Config = useMemo(\n        () => ({\n            salt: 'querieskit-dashboard',\n            counter: 0,\n            aliases: {},\n            connections: [],\n            items: items.map(({id}) => ({\n                id,\n                type: DASHBOARD_PLUGIN_TYPE,\n                namespace: 'default',\n                data: {},\n            })),\n            layout,\n        }),\n        [layout, items],\n    );\n\n    return {config, gridGroups};\n};\n"],"mappings":";;;;;AAAA,SAAQA,OAAO,QAAO,OAAO;AAC7B,SAAQC,mBAAmB;AAI3B,OAAO,IAAMC,qBAAqB,GAAG,2BAA2B;AAEhE,OAAO,IAAMC,eAAe,GAAG,CAAC;AAEhC,OAAO,IAAMC,YAAoC,GAAG;EAChDC,IAAI,EAAEF,eAAe;EACrBG,SAAS,EAAE,EAAE;EACbC,GAAG,EAAE,CAAC;EACNC,WAAW,EAAE;AACjB,CAAC;AAED,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAC3BC,KAA4B,EAC5BC,iBAAwC,EACxCC,aAA8B,EAC7B;EACD,IAAMC,SAA+B,GAAGb,OAAO,CAAC,YAAM;IAAA,IAAAc,qBAAA;IAClD,IAAMP,GAAG,IAAAO,qBAAA,GAAGH,iBAAiB,aAAjBA,iBAAiB,uBAAjBA,iBAAiB,CAAEJ,GAAG,cAAAO,qBAAA,cAAAA,qBAAA,GAAIV,YAAY,CAACG,GAAG;IAEtD,OAAAQ,aAAA,CAAAA,aAAA;MACIC,gBAAgB,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACxBC,MAAM,EAAE,OAAOV,GAAG,KAAK,QAAQ,GAAG,CAACA,GAAG,EAAEA,GAAG,CAAC,GAAGA;IAAG,GAC/CH,YAAY,GACZO,iBAAiB;EAE5B,CAAC,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAEvB,IAAMO,UAAU,GAAGlB,OAAO,CACtB;IAAA,OAAM,CAAC;MAACmB,cAAc,EAAE,SAAhBA,cAAcA,CAAA;QAAA,OAAQN,SAAS;MAAA;IAAA,CAAC,CAAC;EAAA,GACzC,CAACA,SAAS,CACd,CAAC;EAED,IAAMR,IAAI,GAAGQ,SAAS,CAACR,IAAI;EAE3B,IAAMe,MAAM,GAAGpB,OAAO,CAClB;IAAA,OAAMY,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIX,mBAAmB,CAACS,KAAK,EAAEL,IAAI,CAAC;EAAA,GACvD,CAACO,aAAa,EAAEF,KAAK,EAAEL,IAAI,CAC/B,CAAC;EAED,IAAMgB,MAAc,GAAGrB,OAAO,CAC1B;IAAA,OAAO;MACHsB,IAAI,EAAE,sBAAsB;MAC5BC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE,CAAC,CAAC;MACXC,WAAW,EAAE,EAAE;MACff,KAAK,EAAEA,KAAK,CAACgB,GAAG,CAAC,UAAAC,IAAA;QAAA,IAAEC,EAAE,GAAAD,IAAA,CAAFC,EAAE;QAAA,OAAO;UACxBA,EAAE,EAAFA,EAAE;UACFC,IAAI,EAAE3B,qBAAqB;UAC3B4B,SAAS,EAAE,SAAS;UACpBC,IAAI,EAAE,CAAC;QACX,CAAC;MAAA,CAAC,CAAC;MACHX,MAAM,EAANA;IACJ,CAAC;EAAA,CAAC,EACF,CAACA,MAAM,EAAEV,KAAK,CAClB,CAAC;EAED,OAAO;IAACW,MAAM,EAANA,MAAM;IAAEH,UAAU,EAAVA;EAAU,CAAC;AAC/B,CAAC","ignoreList":[]}

package/build/esm/components/Dashboard/index.d.ts

@@ -0,0 +1,2 @@
+export { Dashboard } from './Dashboard';
+export type { DashboardItemAppearance, DashboardProps } from './types';

package/build/esm/components/Dashboard/index.js

@@ -0,0 +1,2 @@
+export { Dashboard } from "./Dashboard";
+// #sourceMappingURL=index.js.map

package/build/esm/components/Dashboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dashboard"],"sources":["index.ts"],"sourcesContent":["export {Dashboard} from './Dashboard';\nexport type {DashboardItemAppearance, DashboardProps} from './types';\n"],"mappings":"AAAA,SAAQA,SAAS","ignoreList":[]}

package/build/esm/components/Dashboard/internal/DashPlate.css

@@ -0,0 +1,22 @@
+.qp-dashplate__item {
+  background: var(--g-color-base-background);
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-m);
+}
+.qp-dashplate__drag-icon {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  width: 100%;
+  color: var(--g-color-text-secondary);
+  text-align: center;
+  cursor: grab;
+  opacity: 0;
+}
+.qp-dashplate__item:hover .qp-dashplate__drag-icon, .qp-dashplate__item:focus-within .qp-dashplate__drag-icon {
+  opacity: 1;
+}
+/*# sourceMappingURL=DashPlate.css.map */

package/build/esm/components/Dashboard/internal/DashPlate.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DashPlate.scss"],"names":[],"mappings":"AACI;EACI,0CAAA;EACA,6CAAA;EACA,uCAAA;AAAR;AAGI;EACI,kBAAA;EACA,UAAA;EACA,MAAA;EAAA,QAAA;EAAA,YAAA;EAAA,OAAA;EACA,WAAA;EACA,oCAAA;EACA,kBAAA;EACA,YAAA;EACA,UAAA;AADR;AAII;EAEI,UAAA;AAHR","file":"DashPlate.css","sourcesContent":[".qp-dashplate {\n    &__item {\n        background: var(--g-color-base-background);\n        border: 1px solid var(--g-color-line-generic);\n        border-radius: var(--g-border-radius-m);\n    }\n\n    &__drag-icon {\n        position: absolute;\n        z-index: 1;\n        inset: 0 0 auto;\n        width: 100%;\n        color: var(--g-color-text-secondary);\n        text-align: center;\n        cursor: grab;\n        opacity: 0;\n    }\n\n    &__item:hover &__drag-icon,\n    &__item:focus-within &__drag-icon {\n        opacity: 1;\n    }\n}"],"sourceRoot":""}

package/build/esm/components/Dashboard/internal/DashPlate.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { PluginWidgetProps } from '@gravity-ui/dashkit';
+import './DashPlate.scss';
+export declare const DRAG_HANDLE_CLASSNAME = "DRAG_HANDLE_CLASSNAME";
+export declare const DashPlate: ({ id }: PluginWidgetProps) => React.JSX.Element | null;

package/build/esm/components/Dashboard/internal/DashPlate.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { GripHorizontal } from '@gravity-ui/icons';
+import { Flex, Icon } from '@gravity-ui/uikit';
+import { useDashboardContext } from "./DashboardProvider";
+import cn from 'bem-cn-lite';
+import "./DashPlate.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var block = cn('qp-dashplate');
+export var DRAG_HANDLE_CLASSNAME = 'DRAG_HANDLE_CLASSNAME';
+export var DashPlate = function DashPlate(_ref) {
+  var id = _ref.id;
+  var _useDashboardContext = useDashboardContext(),
+    getItem = _useDashboardContext.getItem;
+  var item = getItem(id);
+  if (!item) return null;
+  return /*#__PURE__*/_jsxs(Flex, {
+    direction: "column",
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    spacing: {
+      p: 4
+    },
+    className: block('item'),
+    children: [/*#__PURE__*/_jsx(Icon, {
+      data: GripHorizontal,
+      className: block('drag-icon', DRAG_HANDLE_CLASSNAME)
+    }), /*#__PURE__*/_jsx(Flex, {
+      width: "100%",
+      height: "100%",
+      overflow: "hidden",
+      className: block('content'),
+      children: item.content
+    })]
+  });
+};
+// #sourceMappingURL=DashPlate.js.map

package/build/esm/components/Dashboard/internal/DashPlate.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","GripHorizontal","Flex","Icon","useDashboardContext","cn","jsx","_jsx","jsxs","_jsxs","block","DRAG_HANDLE_CLASSNAME","DashPlate","_ref","id","_useDashboardContext","getItem","item","direction","position","width","height","overflow","spacing","p","className","children","data","content"],"sources":["DashPlate.tsx"],"sourcesContent":["import React from 'react';\nimport {GripHorizontal} from '@gravity-ui/icons';\nimport {Flex, Icon} from '@gravity-ui/uikit';\nimport type {PluginWidgetProps} from '@gravity-ui/dashkit';\nimport {useDashboardContext} from './DashboardProvider';\nimport cn from 'bem-cn-lite';\nimport './DashPlate.scss';\n\nconst block = cn('qp-dashplate');\n\nexport const DRAG_HANDLE_CLASSNAME = 'DRAG_HANDLE_CLASSNAME';\n\nexport const DashPlate = ({id}: PluginWidgetProps) => {\n    const {getItem} = useDashboardContext();\n    const item = getItem(id);\n\n    if (!item) return null;\n\n    return (\n        <Flex\n            direction=\"column\"\n            position=\"relative\"\n            width=\"100%\"\n            height=\"100%\"\n            overflow=\"hidden\"\n            spacing={{p: 4}}\n            className={block('item')}\n        >\n            <Icon data={GripHorizontal} className={block('drag-icon', DRAG_HANDLE_CLASSNAME)} />\n            <Flex width=\"100%\" height=\"100%\" overflow=\"hidden\" className={block('content')}>\n                {item.content}\n            </Flex>\n        </Flex>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,cAAc,QAAO,mBAAmB;AAChD,SAAQC,IAAI,EAAEC,IAAI,QAAO,mBAAmB;AAE5C,SAAQC,mBAAmB;AAC3B,OAAOC,EAAE,MAAM,aAAa;AAC5B;AAA0B,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE1B,IAAMC,KAAK,GAAGL,EAAE,CAAC,cAAc,CAAC;AAEhC,OAAO,IAAMM,qBAAqB,GAAG,uBAAuB;AAE5D,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAAC,IAAA,EAAgC;EAAA,IAA3BC,EAAE,GAAAD,IAAA,CAAFC,EAAE;EACzB,IAAAC,oBAAA,GAAkBX,mBAAmB,CAAC,CAAC;IAAhCY,OAAO,GAAAD,oBAAA,CAAPC,OAAO;EACd,IAAMC,IAAI,GAAGD,OAAO,CAACF,EAAE,CAAC;EAExB,IAAI,CAACG,IAAI,EAAE,OAAO,IAAI;EAEtB,oBACIR,KAAA,CAACP,IAAI;IACDgB,SAAS,EAAC,QAAQ;IAClBC,QAAQ,EAAC,UAAU;IACnBC,KAAK,EAAC,MAAM;IACZC,MAAM,EAAC,MAAM;IACbC,QAAQ,EAAC,QAAQ;IACjBC,OAAO,EAAE;MAACC,CAAC,EAAE;IAAC,CAAE;IAChBC,SAAS,EAAEf,KAAK,CAAC,MAAM,CAAE;IAAAgB,QAAA,gBAEzBnB,IAAA,CAACJ,IAAI;MAACwB,IAAI,EAAE1B,cAAe;MAACwB,SAAS,EAAEf,KAAK,CAAC,WAAW,EAAEC,qBAAqB;IAAE,CAAE,CAAC,eACpFJ,IAAA,CAACL,IAAI;MAACkB,KAAK,EAAC,MAAM;MAACC,MAAM,EAAC,MAAM;MAACC,QAAQ,EAAC,QAAQ;MAACG,SAAS,EAAEf,KAAK,CAAC,SAAS,CAAE;MAAAgB,QAAA,EAC1ET,IAAI,CAACW;IAAO,CACX,CAAC;EAAA,CACL,CAAC;AAEf,CAAC","ignoreList":[]}

package/build/esm/components/Dashboard/internal/DashPlate.scss

@@ -0,0 +1,23 @@
+.qp-dashplate {
+    &__item {
+        background: var(--g-color-base-background);
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-m);
+    }
+
+    &__drag-icon {
+        position: absolute;
+        z-index: 1;
+        inset: 0 0 auto;
+        width: 100%;
+        color: var(--g-color-text-secondary);
+        text-align: center;
+        cursor: grab;
+        opacity: 0;
+    }
+
+    &__item:hover &__drag-icon,
+    &__item:focus-within &__drag-icon {
+        opacity: 1;
+    }
+}

package/build/esm/components/Dashboard/internal/DashboardProvider.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { DashboardRenderItem } from '../types';
+type DashboardContextValue = {
+    items: DashboardRenderItem[];
+    getItem: (id: string) => DashboardRenderItem | undefined;
+};
+type DashboardProviderProps = {
+    items: DashboardRenderItem[];
+    children: React.ReactNode;
+};
+export declare const DashboardProvider: ({ items, children }: DashboardProviderProps) => React.JSX.Element;
+export declare const useDashboardContext: () => DashboardContextValue;
+export {};