@gravity-ui/dashkit 3.0.1

package/CHANGELOG.md

@@ -0,0 +1,58 @@
+# Changelog
+
+## [3.0.1](https://github.com/gravity-ui/dashkit/compare/v3.0.0...v3.0.1) (2022-10-03)
+
+
+### Bug Fixes
+
+* move to gravity-ui org ([#17](https://github.com/gravity-ui/dashkit/issues/17)) ([6748e5f](https://github.com/gravity-ui/dashkit/commit/6748e5f51589dfa027ef69ef5d4d59abb13e9d79))
+
+## [3.0.0](https://github.com/yandex-cloud/dashkit/compare/v2.0.1...v3.0.0) (2022-09-30)
+
+
+### ⚠ BREAKING CHANGES
+
+* migrate to gravity-ui deps and new i18n usage (#15)
+
+### Features
+
+* migrate to gravity-ui deps and new i18n usage ([#15](https://github.com/yandex-cloud/dashkit/issues/15)) ([1b4eeb1](https://github.com/yandex-cloud/dashkit/commit/1b4eeb1165b02f37af27d11958858ae571160194))
+
+## [2.0.1](https://github.com/yandex-cloud/dashkit/compare/v2.0.0...v2.0.1) (2022-08-22)
+
+
+### Bug Fixes
+
+* downgrade dependent package ([#13](https://github.com/yandex-cloud/dashkit/issues/13)) ([d0a30d3](https://github.com/yandex-cloud/dashkit/commit/d0a30d3b0fbf3da6f1c82608a430f6a989b3cd3a))
+
+## [2.0.0](https://github.com/yandex-cloud/dashkit/compare/v1.2.0...v2.0.0) (2022-08-11)
+
+
+### ⚠ BREAKING CHANGES
+
+* migrate to i18n 0.6.0 (#11)
+
+### Features
+
+* migrate to i18n 0.6.0 ([#11](https://github.com/yandex-cloud/dashkit/issues/11)) ([8cbdda6](https://github.com/yandex-cloud/dashkit/commit/8cbdda6d035411cb8f6b6c5d11f7949a997314f5))
+
+## [1.2.0](https://github.com/yandex-cloud/dashkit/compare/v1.1.0...v1.2.0) (2022-08-08)
+
+
+### Features
+
+* add custom dropdown menu item filter in edit mode ([#8](https://github.com/yandex-cloud/dashkit/issues/8)) ([5c2824a](https://github.com/yandex-cloud/dashkit/commit/5c2824a4a9a25174eff69b2f0b7b04b74cf74e0c))
+
+## [1.1.0](https://github.com/yandex-cloud/dashkit/compare/v1.0.0...v1.1.0) (2022-08-02)
+
+
+### Features
+
+* flag to prevent double height optimizer ([#6](https://github.com/yandex-cloud/dashkit/issues/6)) ([8503a59](https://github.com/yandex-cloud/dashkit/commit/8503a59293bdff0b69a28ffb171b96d0b2551c16))
+
+## 1.0.0 (2022-07-15)
+
+
+### Bug Fixes
+
+* try publish ([#2](https://github.com/yandex-cloud/dashkit/issues/2)) ([a76fb55](https://github.com/yandex-cloud/dashkit/commit/a76fb5552e0f4697f3d889e03d9740fa8ad948d4))

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 YANDEX LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,364 @@
+# DashKit
+
+A dashboard grid rendering library.
+
+## Installation
+
+```bash
+npm i @gravity-ui/dashkit @gravity-ui/uikit @gravity-ui/i18n
+```
+
+## Description
+
+The library is used to line up widgets in a grid, resize them, add new ones, and delete them.
+The widget is a react component. For example, text, graphics, and images.
+
+New widgets are added via a plugin system.
+
+### Plugins
+
+Plugins are required to create custom widgets.
+
+### Props
+
+```ts
+interface DashKitProps {
+  config: Config;
+  editMode: boolean;
+  onItemEdit: ({id}: {id: string}) => void;
+  onChange: (data: {config: Config; itemsStateAndParams: ItemsStateAndParams}) => void;
+  defaultGlobalParams: GlobalParams;
+  globalParams: GlobalParams;
+  itemsStateAndParams: ItemsStateAndParams;
+  settings: SettingsProps;
+  context: ContextProps;
+  overlayControls?: Record<string, OverlayControlItem[]>;
+  noOverlay?: boolean;
+}
+```
+
+- **config**: [сonfig](#Config).
+- **editMode**: Whether edit mode is enabled.
+- **onItemEdit**: Called when you click to edit a widget.
+- **onChange**: Called when config or [itemsStateAndParams](#temsStateAndParams) are changed.
+- **defaultGlobalParams**, **globalParams**: [Parameters](#Params) that affect all widgets. In DataLens, `defaultGlobalParams` are global parameters set in the dashboard settings. `globalParams` are globals parameters that can be set in the url.
+- **itemsStateAndParams**: [itemsStateAndParams](#temsStateAndParams).
+- **settings**: DashKit settings.
+- **context**: Object that will be propped up on all widgets.
+- **overlayControls**: Object that overrides widget controls at the time of editing. If not transmitted, basic controls will be displayed.
+- **noOverlay**: If `true`, overlay and controls are not displayed while editing.
+- **draggableHandleClassName** : СSS class name of the element that makes the widget draggable.
+
+## Usage
+
+### DashKit configuration
+
+Before using `DashKit` as a react component, it must be configured.
+
+- setLang
+
+  Used for setting the language of DashKit provided ui elements. Currently the languages supported are: ru, en.
+
+  ```js
+  import {setLang} from '@gravity-ui/dashkit';
+
+  setLang('en');
+  ```
+
+  **From version 3.0.0 the language must be set separately for each DashKit and Gravity-ui instances**
+
+  ```js
+  import {setLang} from '@gravity-ui/dashkit';
+  import {configure as uiKitConfigure, Lang as UILang} from '@gravity-ui/uikit';
+    
+  setLang('en');
+  uiKitConfigure({lang: lang as UILang});
+  ```
+
+- DashKit.setSettings
+
+  Used for global DashKit settings (such as margins between widgets, default widget sizes and widget overlay menu)
+
+  ```js
+  import {DashKit} from '@gravity-ui/dashkit';
+
+  DashKit.setSettings({
+    gridLayout: {margin: [8, 8]},
+    isMobile: true,
+    // menu: [] as Array<MenuItem>,
+  });
+  ```
+
+- DashKit.registerPlugins
+
+  Registering and configuring plugins
+
+  ```js
+  import {DashKit} from '@gravity-ui/dashkit';
+  import pluginTitle from '@gravity-ui/dashkit/build/esm/plugins/Title/Title';
+  import pluginText from '@gravity-ui/dashkit/build/esm/plugins/Text/Text';
+
+  DashKit.registerPlugins(
+    pluginTitle,
+    pluginText.setSettings({
+      apiHandler({text}) {
+        return api.getMarkdown(text);
+      },
+    }),
+  );
+
+  DashKit.registerPlugins({
+    type: 'custom',
+    defaultLayout: {
+      w: 10,
+      h: 8,
+    },
+    renderer: function CustomPlugin() {
+      return <div>Custom widget with custom controls</div>;
+    },
+  });
+  ```
+
+### Config
+
+```ts
+export interface Config {
+  salt: string; // to form a unique id
+  counter: number; // to form a unique id, only increases
+  items: ConfigItem[]; //  initial widget states
+  layout: ConfigLayout[]; // widget position on the grid https://github.com/react-grid-layout
+  aliases: ConfigAliases; // aliases for parameters see #Params
+  connections: ConfigConnection[]; // links between widgets see #Params
+}
+```
+
+Config example:
+
+```ts
+import {DashKitProps} from '@gravity-ui/dashkit';
+
+const config: DashKitProps['config'] = {
+  salt: '0.46703554571365613',
+  counter: 4,
+  items: [
+    {
+      id: 'tT',
+      data: {
+        size: 'm',
+        text: 'Caption',
+        showInTOC: true,
+      },
+      type: 'title',
+      namespace: 'default',
+      orderId: 1,
+    },
+    {
+      id: 'Ea',
+      data: {
+        text: 'mode _editActive',
+        _editActive: true,
+      },
+      type: 'text',
+      namespace: 'default',
+    },
+    {
+      id: 'zR',
+      data: {
+        text: '### Text',
+      },
+      type: 'text',
+      namespace: 'default',
+      orderId: 0,
+    },
+    {
+      id: 'Dk',
+      data: {
+        foo: 'bar',
+      },
+      type: 'custom',
+      namespace: 'default',
+      orderId: 5,
+    },
+  ],
+  layout: [
+    {
+      h: 2,
+      i: 'tT',
+      w: 36,
+      x: 0,
+      y: 0,
+    },
+    {
+      h: 6,
+      i: 'Ea',
+      w: 12,
+      x: 0,
+      y: 2,
+    },
+    {
+      h: 6,
+      i: 'zR',
+      w: 12,
+      x: 12,
+      y: 2,
+    },
+    {
+      h: 4,
+      i: 'Dk',
+      w: 8,
+      x: 0,
+      y: 8,
+    },
+  ],
+  aliases: {},
+  connections: [],
+};
+```
+
+Add a new item to the config:
+
+```ts
+const newConfig = DashKit.setItem({
+  item: {
+    data: {
+      text: `Some text`,
+    },
+    namespace: 'default',
+    type: 'text',
+  },
+  config: config,
+});
+```
+
+Change an existing item in the config:
+
+```ts
+const newConfig = DashKit.setItem({
+  item: {
+    id: 'tT', // item.id
+    data: {
+      size: 'm',
+      text: `New caption`,
+    },
+    namespace: 'default',
+    type: 'title',
+  },
+  config: config,
+});
+```
+
+Delete an item from the config:
+
+```ts
+import {DashKitProps} from '@gravity-ui/dashkit';
+
+const oldItemsStateAndParams: DashKitProps['itemsStateAndParams'] = {};
+
+const {config: newConfig, itemsStateAndParams} = DashKit.removeItem({
+  id: 'tT', // item.id
+  config: config,
+  itemsStateAndParams: this.state.itemsStateAndParams,
+});
+```
+
+### Params
+
+```ts
+type Params = Record<string, string | string[]>;
+```
+
+`DashKit` generates parameters according to the default parameters for widgets, links, and aliases. These parameters are required for the [ChartKit](https://github.com/gravity-ui/chartkit) library.
+
+Generation order:
+
+1. `defaultGlobalParams`
+2. Default widget parameters `item.default`
+3. `globalParams`
+4. Parameters from [itemsStateAndParams](#itemsStateAndParams) according to the queue.
+
+### itemsStateAndParams
+
+Object that stores widget parameters and states as well as a parameter change queue.
+It has a `__meta__` field for storing queue and meta information.
+
+```ts
+interface StateAndParamsMeta = {
+    __meta__: {
+        queue: {id: string}[]; // queue
+        version: number; // current version itemsStateAndParams
+    };
+}
+```
+
+And also widget states and parameters:
+
+```ts
+interface ItemsStateAndParamsBase {
+  [itemId: string]: {
+    state?: Record<string, any>;
+    params?: Params;
+  };
+}
+```
+
+```ts
+type ItemsStateAndParams = StateAndParamsMeta & ItemsStateAndParamsBase;
+```
+
+### Menu
+
+You can specify custom DashKit widget overlay menu in edit mode
+
+```ts
+type MenuItem = {
+  id: string; // uniq id
+  title?: string; // string title
+  icon?: ReactNode; // node of icon
+  iconSize?: number | string; // icon size in px as number or as string with units
+  handler?: (item: ConfigItem) => void; // custom item action handler
+  visible?: (item: ConfigItem) => boolean; // optional visibility handler for filtering menu items
+  className?: string; // custom class property
+};
+
+// use array of menu items in settings
+DashKit.setSettings({menu: [] as Array<MenuItem>});
+```
+
+## Development
+
+### Build & watch
+
+- Build dependencies `npm ci`
+- Build a project `npm run build`
+- Build storybook `npm run start`
+
+By default, storybook runs on `http://localhost:7120/`.
+New changes from a project aren't always picked up when storybook is running, so it's better to rebuild a project manually and restart storybook.
+
+### Example of an nginx config for development on a dev machine
+
+```bash
+server {
+    server_name dashkit.username.ru;
+
+    include common/ssl;
+
+    access_log /home/username/logs/common.access.log;
+    error_log /home/username/logs/common.error.log;
+
+    root /home/username/projects/dashkit;
+
+    location / {
+        try_files $uri @node;
+    }
+
+    location @node {
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_pass http://127.0.0.1:7120;
+        proxy_redirect off;
+    }
+}
+
+```

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import GridLayout from '../GridLayout/GridLayout';
+import { SetConfigItem, Settings, SettingsProps, ContextProps, Plugin } from '../../typings';
+import { GlobalParams, Config, ConfigItem, ItemsStateAndParams } from '../../shared';
+import { OverlayControlItem } from '../OverlayControls/OverlayControls';
+interface DashKitGeneralProps {
+    config: Config;
+    editMode: boolean;
+}
+interface DashKitDefaultProps {
+    onItemEdit: (item: ConfigItem) => void;
+    onChange: (data: {
+        config: Config;
+        itemsStateAndParams: ItemsStateAndParams;
+    }) => void;
+    defaultGlobalParams: GlobalParams;
+    globalParams: GlobalParams;
+    itemsStateAndParams: ItemsStateAndParams;
+    settings: SettingsProps;
+    context: ContextProps;
+    overlayControls?: Record<string, OverlayControlItem[]>;
+    noOverlay?: boolean;
+    draggableHandleClassName?: string;
+    _EXPERIMENTAL_preventDoubleCompact?: boolean;
+}
+export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
+}
+declare type DashKitInnerProps = DashKitGeneralProps & DashKitDefaultProps;
+export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
+    static defaultProps: DashKitDefaultProps;
+    static registerPlugins(...plugins: Plugin[]): void;
+    static setSettings(settings: Settings): void;
+    static setItem({ item: setItem, namespace, config, }: {
+        item: SetConfigItem;
+        namespace?: string;
+        config: Config;
+    }): Config;
+    static removeItem({ id, config, itemsStateAndParams, }: {
+        id: string;
+        config: Config;
+        itemsStateAndParams: ItemsStateAndParams;
+    }): {
+        config: Config;
+        itemsStateAndParams: ItemsStateAndParams;
+    };
+    metaRef: React.RefObject<GridLayout>;
+    render(): JSX.Element;
+    getItemsMeta(): any;
+}
+export {};

package/build/cjs/components/DashKit/DashKit.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashKit = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const utils_1 = require("../../utils");
+const DashKitView_1 = tslib_1.__importDefault(require("../DashKitView/DashKitView"));
+const constants_1 = require("../../constants");
+const registerManager = new utils_1.RegisterManager();
+class DashKit extends react_1.default.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.metaRef = react_1.default.createRef();
+    }
+    static registerPlugins(...plugins) {
+        plugins.forEach((plugin) => {
+            registerManager.registerPlugin(plugin);
+        });
+    }
+    static setSettings(settings) {
+        registerManager.setSettings(settings);
+    }
+    static setItem({ item: setItem, namespace = constants_1.DEFAULT_NAMESPACE, config, }) {
+        if (setItem.id) {
+            return utils_1.UpdateManager.editItem({ item: setItem, namespace, config });
+        }
+        else {
+            const item = setItem;
+            const layout = Object.assign({}, registerManager.getItem(item.type).defaultLayout);
+            if (item.layout) {
+                Object.assign(layout, item.layout);
+            }
+            return utils_1.UpdateManager.addItem({
+                item,
+                namespace,
+                config,
+                layout,
+            });
+        }
+    }
+    static removeItem({ id, config, itemsStateAndParams, }) {
+        return utils_1.UpdateManager.removeItem({ id, config, itemsStateAndParams });
+    }
+    render() {
+        return (react_1.default.createElement(DashKitView_1.default
+        // @ts-ignore
+        , Object.assign({ 
+            // @ts-ignore
+            registerManager: registerManager, ref: this.metaRef }, this.props)));
+    }
+    getItemsMeta() {
+        var _a;
+        return (_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.getItemsMeta();
+    }
+}
+exports.DashKit = DashKit;
+DashKit.defaultProps = {
+    onItemEdit: noop_1.default,
+    onChange: noop_1.default,
+    defaultGlobalParams: {},
+    globalParams: {},
+    itemsStateAndParams: {},
+    settings: {
+        autoupdateInterval: 0,
+        silentLoading: false,
+    },
+    context: {},
+    noOverlay: false,
+};

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

@@ -0,0 +1 @@
+export * from './DashKit';

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DashKit"), exports);

package/build/cjs/components/DashKitView/DashKitView.css

@@ -0,0 +1,4 @@
+.dashkit {
+  width: 100%;
+  position: relative;
+}

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

@@ -0,0 +1,3 @@
+export default DashKitViewForwardedMeta;
+declare const DashKitViewForwardedMeta: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/build/cjs/components/DashKitView/DashKitView.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const DashKitContext_1 = require("../../context/DashKitContext");
+const GridLayout_1 = tslib_1.__importDefault(require("../GridLayout/GridLayout"));
+const MobileLayout_1 = tslib_1.__importDefault(require("../MobileLayout/MobileLayout"));
+const withContext_1 = require("../../hocs/withContext");
+const useCalcLayout_1 = require("../../hooks/useCalcLayout");
+const b = (0, bem_cn_lite_1.default)('dashkit');
+function DashKitView() {
+    const context = react_1.default.useContext(DashKitContext_1.DashKitContext);
+    const { registerManager, forwardedMetaRef } = context;
+    return (react_1.default.createElement("div", { className: b({ theme: registerManager.settings.theme }) }, registerManager.settings.isMobile ? (react_1.default.createElement(MobileLayout_1.default, null)) : (react_1.default.createElement(GridLayout_1.default, { ref: forwardedMetaRef }))));
+}
+const DashKitViewWithContext = (0, withContext_1.withContext)(DashKitView);
+const DashKitViewForwardedMeta = react_1.default.forwardRef((props, ref) => {
+    const layout = (0, useCalcLayout_1.useCalcPropsLayout)(props.config, props.registerManager);
+    return react_1.default.createElement(DashKitViewWithContext, Object.assign({}, props, { layout: layout, forwardedMetaRef: ref }));
+});
+DashKitViewForwardedMeta.displayName = 'DashKitViewForwardedMeta';
+exports.default = DashKitViewForwardedMeta;

package/build/cjs/components/GridItem/GridItem.css

@@ -0,0 +1,83 @@
+.dashkit-grid-item {
+  position: relative;
+}
+.dashkit-grid-item__overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 3px;
+  background-color: rgba(230, 230, 230, 0.2);
+  border: solid 1px rgba(0, 0, 0, 0.1);
+}
+.dashkit-grid-item__item {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: 3px;
+}
+.dashkit-grid-item__item_editMode {
+  opacity: 0.5;
+  border-color: transparent;
+  pointer-events: none;
+}
+
+.react-grid-layout {
+  position: relative;
+  transition: height 200ms ease;
+}
+
+.react-grid-item {
+  transition: all 200ms ease;
+  transition-property: left, top;
+}
+
+.react-grid-item.cssTransforms {
+  transition-property: transform;
+}
+
+.react-grid-item.resizing {
+  z-index: 1;
+  will-change: width, height;
+}
+
+.react-grid-item.react-draggable:not(.dashkit-grid-item_with-custom-handle) {
+  cursor: move;
+}
+
+.react-grid-item.react-draggable-dragging {
+  transition: none;
+  z-index: 3;
+  will-change: transform;
+}
+
+.react-grid-item.react-grid-placeholder {
+  background: #fc0;
+  opacity: 0.2;
+  transition-duration: 100ms;
+  z-index: 2;
+  user-select: none;
+}
+
+.react-grid-item .react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  bottom: 0;
+  right: 0;
+  cursor: se-resize;
+  z-index: 6;
+}
+
+.react-grid-item .react-resizable-handle::after {
+  content: "";
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  border: 4px solid transparent;
+  border-right-color: rgba(0, 0, 0, 0.4);
+  border-bottom-color: rgba(0, 0, 0, 0.4);
+}

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

@@ -0,0 +1,3 @@
+declare const _default: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export default _default;
+import React from "react";