@gravity-ui/dashkit 3.0.1

package/build/esm/utils/configure.js

@@ -0,0 +1,15 @@
+let subs = [];
+const config = {};
+export const configure = (newConfig) => {
+    Object.assign(config, newConfig);
+    subs.forEach((sub) => {
+        sub(config);
+    });
+};
+export const subscribeConfigure = (sub) => {
+    subs.push(sub);
+    return () => {
+        subs = subs.filter((item) => item !== sub);
+    };
+};
+export const getConfig = () => config;

package/build/esm/utils/i18n.d.ts

@@ -0,0 +1,7 @@
+import { Lang } from './configure';
+/**
+ * Preferred method to set language.
+ * @param lang
+ * @return {void}
+ */
+export declare const setLang: (lang: Lang) => void;

package/build/esm/utils/i18n.js

@@ -0,0 +1,9 @@
+import { configure } from './configure';
+/**
+ * Preferred method to set language.
+ * @param lang
+ * @return {void}
+ */
+export const setLang = (lang) => {
+    configure({ lang: lang });
+};

package/build/esm/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './i18n';
+export * from './register-manager';
+export * from './update-manager';

package/build/esm/utils/index.js

@@ -0,0 +1,3 @@
+export * from './i18n';
+export * from './register-manager';
+export * from './update-manager';

package/build/esm/utils/register-manager.d.ts

@@ -0,0 +1,46 @@
+import { Plugin, PluginDefaultLayout, Settings } from '../typings';
+interface RegisterManagerDefaultLayout {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    minW: number;
+    minH: number;
+}
+export declare type RegisterManagerPluginLayout = RegisterManagerDefaultLayout & PluginDefaultLayout;
+export interface RegisterManagerPlugin extends Omit<Plugin, 'defaultLayout'> {
+    defaultLayout: RegisterManagerDefaultLayout & Plugin['defaultLayout'];
+}
+export declare type RegisterManagerGridLayout = {
+    margin: [number, number];
+    rowHeight: number;
+    cols: number;
+    containerPadding: [number, number];
+} & Settings['gridLayout'];
+export declare type RegisterManagerSettings = {
+    theme: string;
+} & Settings;
+export declare class RegisterManager {
+    private _items;
+    private _defaultLayout;
+    private _gridLayout;
+    private _settings;
+    registerPlugin(plugin: Plugin): void;
+    setSettings(settings?: Settings): void;
+    get settings(): RegisterManagerSettings;
+    get gridLayout(): {
+        margin: [number, number];
+        rowHeight: number;
+        cols: number;
+        containerPadding: [number, number];
+    } & {
+        margin?: [number, number] | undefined;
+        rowHeight?: number | undefined;
+        cols?: number | undefined;
+        containerPadding?: [number, number] | undefined;
+    };
+    getPlugins(): RegisterManagerPlugin[];
+    getItem(type: string): RegisterManagerPlugin;
+    check(type: string): boolean;
+}
+export {};

package/build/esm/utils/register-manager.js

@@ -0,0 +1,54 @@
+import { __rest } from "tslib";
+export class RegisterManager {
+    constructor() {
+        this._items = {};
+        this._defaultLayout = {
+            x: 0,
+            y: Infinity,
+            w: Infinity,
+            h: 4,
+            minW: 4,
+            minH: 2,
+        };
+        this._gridLayout = {
+            rowHeight: 18,
+            cols: 36,
+            margin: [2, 2],
+            containerPadding: [0, 0],
+        };
+        this._settings = {
+            theme: 'default',
+        };
+    }
+    registerPlugin(plugin) {
+        const { type, defaultLayout = {} } = plugin, item = __rest(plugin, ["type", "defaultLayout"]);
+        if (type in this._items) {
+            throw new Error(`DashKit.registerPlugins: type ${type} уже был зарегистрирован`);
+        }
+        if (typeof plugin.renderer !== 'function') {
+            throw new Error('DashKit.registerPlugins: renderer должна быть функцией');
+        }
+        this._items[type] = Object.assign(Object.assign({}, item), { type, defaultLayout: Object.assign(Object.assign({}, this._defaultLayout), defaultLayout) });
+    }
+    setSettings(settings = {}) {
+        Object.assign(this._settings, settings);
+        if (settings.gridLayout) {
+            this._gridLayout = Object.assign(Object.assign({}, this._gridLayout), settings.gridLayout);
+        }
+    }
+    get settings() {
+        return this._settings;
+    }
+    get gridLayout() {
+        return this._gridLayout;
+    }
+    getPlugins() {
+        return Object.values(this._items);
+    }
+    getItem(type) {
+        return this._items[type];
+    }
+    check(type) {
+        return type in this._items;
+    }
+}

package/build/esm/utils/update-manager.d.ts

@@ -0,0 +1,37 @@
+import { Config, ConfigItem, ItemsStateAndParams, ItemStateAndParams } from '../shared';
+import { AddConfigItem, WidgetLayout } from '../typings';
+import { RegisterManagerPluginLayout } from './register-manager';
+interface RemoveItemArg {
+    id: string;
+    config: Config;
+    itemsStateAndParams: ItemsStateAndParams;
+}
+interface ChangeStateAndParamsArg {
+    id: string;
+    config: Config;
+    itemsStateAndParams: ItemsStateAndParams;
+    stateAndParams: ItemStateAndParams;
+}
+export declare class UpdateManager {
+    static addItem({ item, namespace, layout, config, }: {
+        item: AddConfigItem;
+        namespace: string;
+        layout: RegisterManagerPluginLayout;
+        config: Config;
+    }): Config;
+    static editItem({ item, namespace, config, }: {
+        item: ConfigItem;
+        namespace: string;
+        config: Config;
+    }): Config;
+    static removeItem({ id, config, itemsStateAndParams }: RemoveItemArg): {
+        config: Config;
+        itemsStateAndParams: ItemsStateAndParams;
+    };
+    static updateLayout({ layout, config }: {
+        layout: WidgetLayout[];
+        config: Config;
+    }): Config;
+    static changeStateAndParams({ id: initiatorId, config, stateAndParams, itemsStateAndParams, }: ChangeStateAndParamsArg): ItemsStateAndParams;
+}
+export {};

package/build/esm/utils/update-manager.js

@@ -0,0 +1,269 @@
+import update, { extend } from 'immutability-helper';
+import Hashids from 'hashids';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
+import { mergeParamsWithAliases, isItemWithTabs, getCurrentVersion, META_KEY, deleteFromQueue, addToQueue, getInitialItemsStateAndParamsMeta, resolveItemInnerId, getItemsStateAndParamsMeta, } from '../shared';
+import { DEFAULT_NAMESPACE } from '../constants';
+extend('$auto', (value, object) => (object ? update(object, value) : update({}, value)));
+function removeItemVersion1({ id, config, itemsStateAndParams }) {
+    const itemIndex = config.items.findIndex((item) => item.id === id);
+    const removeItem = config.items[itemIndex];
+    const { defaults = {} } = removeItem;
+    const itemParamsKeys = Object.keys(defaults);
+    const getParams = (excludeId, items) => {
+        return Object.keys(items.reduce((acc, item) => {
+            if (item.id !== excludeId) {
+                Object.assign(acc, item.defaults);
+            }
+            return acc;
+        }, {}));
+    };
+    const allParamsKeys = getParams(id, config.items);
+    const allNamespaceParamsKeys = getParams(id, config.items.filter((item) => item.namespace === removeItem.namespace));
+    const uniqParamsKeys = itemParamsKeys.filter((key) => !allParamsKeys.includes(key));
+    const uniqNamespaceParamsKeys = itemParamsKeys.filter((key) => !allNamespaceParamsKeys.includes(key));
+    const withoutUniqItemsParams = Object.keys(itemsStateAndParams)
+        .filter((key) => key !== id)
+        .reduce((acc, key) => {
+        const { params } = itemsStateAndParams[key];
+        // в state из урла могут быть элементы, которых нет в config.items
+        const item = config.items.find((configItem) => configItem.id === key);
+        if (params && item) {
+            const { namespace } = item;
+            const currentUniqParamsKeys = namespace === removeItem.namespace ? uniqNamespaceParamsKeys : uniqParamsKeys;
+            const resultParams = omit(params, currentUniqParamsKeys);
+            if (Object.keys(params).length !== Object.keys(resultParams).length) {
+                acc[key] = {
+                    params: {
+                        $set: resultParams,
+                    },
+                };
+            }
+        }
+        return acc;
+    }, {});
+    const newItemsStateAndParams = update(itemsStateAndParams, Object.assign({ $unset: [id] }, withoutUniqItemsParams));
+    const connections = config.connections.filter(({ from, to }) => id !== from && id !== to);
+    const newConfig = update(config, {
+        items: {
+            $splice: [[itemIndex, 1]],
+        },
+        layout: {
+            $splice: [[itemIndex, 1]],
+        },
+        connections: {
+            $set: connections,
+        },
+    });
+    return {
+        config: newConfig,
+        itemsStateAndParams: newItemsStateAndParams,
+    };
+}
+function getAllowableChangedParams(item, stateAndParams, itemsStateAndParams) {
+    var _a;
+    let allowedParams = {};
+    if (isItemWithTabs(item)) {
+        let tab;
+        if ('state' in stateAndParams && ((_a = stateAndParams.state) === null || _a === void 0 ? void 0 : _a.tabId)) {
+            tab = item.data.tabs.find(({ id }) => { var _a; return id === ((_a = stateAndParams.state) === null || _a === void 0 ? void 0 : _a.tabId); });
+        }
+        if (!tab) {
+            const tabId = resolveItemInnerId({ item, itemsStateAndParams });
+            tab = item.data.tabs.find(({ id }) => id === tabId);
+        }
+        allowedParams = pick(stateAndParams.params, Object.keys((tab === null || tab === void 0 ? void 0 : tab.params) || {}));
+    }
+    else {
+        allowedParams = pick(stateAndParams.params, Object.keys(item.defaults || {}));
+    }
+    if (Object.keys(allowedParams).length !== Object.keys(stateAndParams.params || {}).length) {
+        console.warn('Параметры, которых нет в defaults, будут проигнорированы!');
+    }
+    return allowedParams;
+}
+function changeStateAndParamsVersion1({ id: initiatorId, config, stateAndParams, itemsStateAndParams, }) {
+    const hasState = 'state' in stateAndParams;
+    const { aliases } = config;
+    if ('params' in stateAndParams) {
+        const initiatorItem = config.items.find(({ id }) => id === initiatorId);
+        const allowableParams = getAllowableChangedParams(initiatorItem, stateAndParams, itemsStateAndParams);
+        const allowableParamsWithAliases = mergeParamsWithAliases({
+            aliases,
+            namespace: initiatorItem.namespace,
+            params: allowableParams,
+        });
+        const ignoresInitiatorIds = config.connections
+            .filter(({ to }) => to === initiatorId)
+            .map(({ from }) => from);
+        const updateIds = config.items
+            .filter((item) => item.namespace === initiatorItem.namespace &&
+            !ignoresInitiatorIds.includes(item.id) &&
+            (!isItemWithTabs(item) ||
+                (isItemWithTabs(item) &&
+                    item.data.tabs.every(({ id }) => !ignoresInitiatorIds.includes(id)))))
+            .map(({ id }) => id);
+        return update(itemsStateAndParams, updateIds.reduce((acc, currentId) => {
+            var _a;
+            acc[currentId] = {
+                $auto: Object.assign({ params: {
+                        [((_a = itemsStateAndParams[currentId]) === null || _a === void 0 ? void 0 : _a.params)
+                            ? '$merge'
+                            : '$set']: allowableParamsWithAliases,
+                    } }, (hasState && currentId === initiatorId
+                    ? { state: { $set: stateAndParams.state } }
+                    : {})),
+            };
+            return acc;
+        }, {}));
+    }
+    else if (hasState) {
+        return update(itemsStateAndParams, {
+            [initiatorId]: {
+                $auto: {
+                    state: { $set: stateAndParams.state },
+                },
+            },
+        });
+    }
+    else {
+        return itemsStateAndParams;
+    }
+}
+export class UpdateManager {
+    // TODO: проверять, что id нового элемента уникальный
+    static addItem({ item, namespace = DEFAULT_NAMESPACE, layout, config, }) {
+        const layoutY = Math.max(0, ...config.layout.map(({ h, y }) => h + y));
+        const saveDefaultLayout = pick(layout, ['h', 'w', 'x', 'y']);
+        const hashids = new Hashids(config.salt);
+        let counter = config.counter;
+        const resultData = isItemWithTabs(item)
+            ? Object.assign(Object.assign({}, item.data), { tabs: item.data.tabs.map((tab) => tab.id ? tab : Object.assign(Object.assign({}, tab), { id: hashids.encode(++counter) })) }) : item.data;
+        const newItem = Object.assign(Object.assign({}, item), { id: hashids.encode(++counter), data: resultData, namespace });
+        return update(config, {
+            items: { $push: [newItem] },
+            layout: { $push: [Object.assign(Object.assign({}, saveDefaultLayout), { y: layoutY, i: newItem.id })] },
+            counter: { $set: counter },
+        });
+    }
+    static editItem({ item, namespace = DEFAULT_NAMESPACE, config, }) {
+        const hashids = new Hashids(config.salt);
+        let counter = config.counter;
+        const itemIndex = config.items.findIndex(({ id }) => item.id === id);
+        const resultData = isItemWithTabs(item)
+            ? Object.assign(Object.assign({}, item.data), { tabs: item.data.tabs.map((tab) => tab.id ? tab : Object.assign(Object.assign({}, tab), { id: hashids.encode(++counter) })) }) : item.data;
+        return update(config, {
+            items: { [itemIndex]: { $set: Object.assign(Object.assign({}, item), { data: resultData, namespace }) } },
+            counter: { $set: counter },
+        });
+    }
+    static removeItem({ id, config, itemsStateAndParams = {} }) {
+        if (getCurrentVersion(itemsStateAndParams) === 1) {
+            return removeItemVersion1({ id, config, itemsStateAndParams });
+        }
+        const itemIndex = config.items.findIndex((item) => item.id === id);
+        const item = config.items[itemIndex];
+        const itemIds = isItemWithTabs(item)
+            ? [id].concat(item.data.tabs.map((tab) => tab.id))
+            : [id];
+        const connections = config.connections.filter(({ from, to }) => !itemIds.includes(from) && !itemIds.includes(to));
+        return {
+            config: update(config, {
+                items: {
+                    $splice: [[itemIndex, 1]],
+                },
+                layout: {
+                    $splice: [[itemIndex, 1]],
+                },
+                connections: {
+                    $set: connections,
+                },
+            }),
+            itemsStateAndParams: update(itemsStateAndParams, {
+                $unset: [id],
+                [META_KEY]: {
+                    $set: deleteFromQueue({
+                        id,
+                        itemsStateAndParams,
+                        config,
+                    }),
+                },
+            }),
+        };
+    }
+    static updateLayout({ layout, config }) {
+        return update(config, {
+            layout: {
+                $set: layout.map(({ x, y, w, h, i }) => ({ x, y, w, h, i })),
+            },
+        });
+    }
+    static changeStateAndParams({ id: initiatorId, config, stateAndParams, itemsStateAndParams, }) {
+        var _a, _b;
+        if (getCurrentVersion(itemsStateAndParams) === 1) {
+            return changeStateAndParamsVersion1({
+                id: initiatorId,
+                config,
+                stateAndParams,
+                itemsStateAndParams,
+            });
+        }
+        const hasState = 'state' in stateAndParams;
+        const { items } = config;
+        const itemsIds = items.map(({ id: itemId }) => itemId);
+        const itemsStateAndParamsIds = Object.keys(omit(itemsStateAndParams, [META_KEY]));
+        const unusedIds = itemsStateAndParamsIds.filter((id) => !itemsIds.includes(id));
+        const initiatorItem = items.find(({ id }) => id === initiatorId);
+        const newTabId = (_a = stateAndParams.state) === null || _a === void 0 ? void 0 : _a.tabId;
+        const isTabSwitched = isItemWithTabs(initiatorItem) && Boolean(newTabId);
+        const currentMeta = getItemsStateAndParamsMeta(itemsStateAndParams);
+        if ('params' in stateAndParams) {
+            const allowableParams = getAllowableChangedParams(initiatorItem, stateAndParams, itemsStateAndParams);
+            const tabId = isItemWithTabs(initiatorItem)
+                ? newTabId || resolveItemInnerId({ item: initiatorItem, itemsStateAndParams })
+                : undefined;
+            const meta = addToQueue({ id: initiatorId, tabId, config, itemsStateAndParams });
+            let commandUpdateParams = ((_b = itemsStateAndParams[initiatorId]) === null || _b === void 0 ? void 0 : _b.params)
+                ? '$merge'
+                : '$set';
+            if (isTabSwitched) {
+                commandUpdateParams = '$set';
+            }
+            return update(itemsStateAndParams, {
+                $unset: unusedIds,
+                [initiatorId]: {
+                    $auto: Object.assign({ params: {
+                            [commandUpdateParams]: allowableParams,
+                        } }, (hasState ? { state: { $set: stateAndParams.state } } : {})),
+                },
+                [META_KEY]: { $set: meta },
+            });
+        }
+        else if (hasState) {
+            let metaSpec = {};
+            if (currentMeta && isTabSwitched) {
+                metaSpec = {
+                    [META_KEY]: {
+                        $set: deleteFromQueue({
+                            id: initiatorId,
+                            itemsStateAndParams,
+                            config,
+                        }),
+                    },
+                };
+            }
+            return update(itemsStateAndParams, Object.assign({ $unset: unusedIds, [initiatorId]: {
+                    $auto: Object.assign({ state: { $set: stateAndParams.state } }, (isTabSwitched ? { $unset: ['params'] } : {})),
+                } }, (currentMeta
+                ? metaSpec
+                : { [META_KEY]: { $set: getInitialItemsStateAndParamsMeta() } })));
+        }
+        else {
+            return update(itemsStateAndParams, Object.assign({ $unset: unusedIds }, (currentMeta
+                ? {}
+                : {
+                    [META_KEY]: { $set: getInitialItemsStateAndParamsMeta() },
+                })));
+        }
+    }
+}

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "@gravity-ui/dashkit",
+  "version": "3.0.1",
+  "description": "Library for rendering dashboard grid layout",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gravity-ui/dashkit"
+  },
+  "files": [
+    "build"
+  ],
+  "sideEffects": [
+    "*.scss",
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
+  "types": "build/esm/index.d.ts",
+  "scripts": {
+    "lint:prettier": "prettier --check --loglevel=error '**/*.{js,jsx,ts,tsx,scss}'",
+    "lint:js": "eslint src --ext .js,.jsx,.ts,.tsx",
+    "lint:styles": "stylelint 'src/**/*.scss'",
+    "lint": "run-p lint:*",
+    "test": "jest",
+    "clean": "gulp clean",
+    "build": "gulp",
+    "start": "start-storybook -p 7120",
+    "typecheck": "tsc --noEmit",
+    "build-storybook": "build-storybook -c .storybook -o storybook-static",
+    "prepare": "husky install",
+    "prepublishOnly": "npm run lint && npm run test && npm run build"
+  },
+  "dependencies": {
+    "hashids": "^2.2.8",
+    "immutability-helper": "^3.1.1",
+    "react-grid-layout": "^0.18.3"
+  },
+  "peerDependencies": {
+    "@gravity-ui/uikit": "^3.0.0",
+    "@gravity-ui/i18n": "^1.0.0",
+    "bem-cn-lite": "^4.0.0",
+    "react": "^16.0.0  || ^17.0.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.0.3",
+    "@commitlint/config-conventional": "^17.0.3",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.5.9",
+    "@types/enzyme": "^3.10.8",
+    "@types/jest": "^26.0.20",
+    "@types/lodash": "^4.14.170",
+    "@types/react": "^17.0.47",
+    "@gravity-ui/eslint-config": "^1.0.2",
+    "@gravity-ui/i18n": "^1.0.0",
+    "@gravity-ui/prettier-config": "^1.0.1",
+    "@gravity-ui/stylelint-config": "^1.0.1",
+    "@gravity-ui/tsconfig": "^1.0.0",
+    "@gravity-ui/uikit": "^3.0.0",
+    "babel-jest": "^26.6.3",
+    "bem-cn-lite": "^4.0.0",
+    "copyfiles": "^2.4.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "enzyme-to-json": "^3.6.1",
+    "eslint": "^8.11.0",
+    "gulp": "^4.0.2",
+    "gulp-cli": "^2.3.0",
+    "gulp-dart-sass": "^1.0.2",
+    "gulp-replace": "^1.1.3",
+    "gulp-typescript": "^6.0.0-alpha.1",
+    "husky": "^8.0.1",
+    "jest": "^26.6.3",
+    "lint-staged": "^13.0.3",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.12",
+    "prettier": "^2.6.0",
+    "react": "^17.0.2",
+    "react-docgen-typescript": "^2.2.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "sass": "^1.53.0",
+    "sass-loader": "^10.3.1",
+    "stylelint": "^14.6.0",
+    "ts-jest": "^26.5.3",
+    "typescript": "^4.7.4"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{css,scss}": [
+      "stylelint --fix --quiet",
+      "prettier --write"
+    ],
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix --quiet",
+      "prettier --write"
+    ]
+  }
+}