ydb-ui-components 1.1.0 → 1.1.3

package/CHANGELOG.md

@@ -1,3 +1,27 @@
 # Changelog
 
+### [1.1.3](https://github.com/ydb-platform/ydb-ui-components/compare/v1.1.2...v1.1.3) (2022-05-23)
+
+
+### Bug Fixes
+
+* add @yandex-cloud/uikit to peer deps ([61d5628](https://github.com/ydb-platform/ydb-ui-components/commit/61d5628088528e5c532c096bacebb2eca3f68206))
+
+### [1.1.2](https://github.com/ydb-platform/ydb-ui-components/compare/v1.1.1...v1.1.2) (2022-05-19)
+
+
+### Bug Fixes
+
+* move react-treeview to prod deps ([#5](https://github.com/ydb-platform/ydb-ui-components/issues/5)) ([04d307b](https://github.com/ydb-platform/ydb-ui-components/commit/04d307b226b8b0d7bdaf58542df8d214fb49acce))
+* @yandex-cloud/browserslist-config as peer dependency ([c3b48a7](https://github.com/ydb-platform/ydb-ui-components/commit/c3b48a7ea0370c854fb68b1e1fc12541e8a6494e))
+* use provided root path ([203abd1](https://github.com/ydb-platform/ydb-ui-components/commit/203abd1892ad1e8c8c4555b06b99aa41ff01ab01))
+* include i18n files ([8363de6](https://github.com/ydb-platform/ydb-ui-components/commit/8363de686cbad9e10753b47a62e7917610dcc84d))
+
+### [1.1.1](https://www.github.com/ydb-platform/ydb-ui-components/compare/v1.1.0...v1.1.1) (2022-05-13)
+
+
+### Bug Fixes
+
+* fix package ([67b3b0e](https://www.github.com/ydb-platform/ydb-ui-components/commit/67b3b0e3c2678452847ca3b1489be11fc73ea6c2))
+
 ## 1.1.0 (2022-04-18)

package/build/components/NavigationTree/EmptyView/EmptyView.css

@@ -0,0 +1,4 @@
+.ydb-navigation-tree-view-empty {
+  color: var(--yc-color-text-secondary);
+  font-style: italic;
+}

package/build/components/NavigationTree/EmptyView/EmptyView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './EmptyView.scss';
+export declare function EmptyView(): JSX.Element;

package/build/components/NavigationTree/EmptyView/EmptyView.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyView = EmptyView;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
+
+var _i18n = _interopRequireDefault(require("../i18n"));
+
+var _TreeView = require("../../TreeView/TreeView");
+
+require("./EmptyView.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const b = (0, _bemCnLite.default)('ydb-navigation-tree-view-empty');
+
+function EmptyView() {
+  return /*#__PURE__*/_react.default.createElement(_TreeView.TreeView, {
+    name: /*#__PURE__*/_react.default.createElement("span", {
+      className: b()
+    }, (0, _i18n.default)('label_empty'))
+  });
+}

package/build/components/NavigationTree/ErrorView/ErrorView.css

@@ -0,0 +1,3 @@
+.ydb-navigation-tree-view-error {
+  color: var(--yc-color-text-danger);
+}

package/build/components/NavigationTree/ErrorView/ErrorView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './ErrorView.scss';
+export declare function ErrorView(): JSX.Element;

package/build/components/NavigationTree/ErrorView/ErrorView.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorView = ErrorView;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
+
+var _i18n = _interopRequireDefault(require("../i18n"));
+
+var _TreeView = require("../../TreeView/TreeView");
+
+require("./ErrorView.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const b = (0, _bemCnLite.default)('ydb-navigation-tree-view-error');
+
+function ErrorView() {
+  return /*#__PURE__*/_react.default.createElement(_TreeView.TreeView, {
+    name: /*#__PURE__*/_react.default.createElement("span", {
+      className: b()
+    }, (0, _i18n.default)('label_error'))
+  });
+}

package/build/components/NavigationTree/LoaderView/LoaderView.css

@@ -0,0 +1,7 @@
+.ydb-navigation-tree-view-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 24px;
+}

package/build/components/NavigationTree/LoaderView/LoaderView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import './LoaderView.scss';
+export declare function LoaderView(): JSX.Element;

package/build/components/NavigationTree/LoaderView/LoaderView.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoaderView = LoaderView;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
+
+var _uikit = require("@yandex-cloud/uikit");
+
+var _TreeView = require("../../TreeView/TreeView");
+
+require("./LoaderView.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const b = (0, _bemCnLite.default)('ydb-navigation-tree-view-loader');
+
+function LoaderView() {
+  return /*#__PURE__*/_react.default.createElement(_TreeView.TreeView, {
+    name: /*#__PURE__*/_react.default.createElement("div", {
+      className: b()
+    }, /*#__PURE__*/_react.default.createElement(_uikit.Spin, {
+      size: "xs"
+    }))
+  });
+}

package/build/components/NavigationTree/NavigationTree.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { NavigationTreeProps } from './types';
+export type { NavigationTreeProps };
+export declare function NavigationTree({ rootState: partialRootState, fetchPath, getActions, activePath, onActivePathUpdate, }: NavigationTreeProps): JSX.Element;

package/build/components/NavigationTree/NavigationTree.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationTree = NavigationTree;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _state = require("./state");
+
+var _NavigationTreeNode = require("./NavigationTreeNode");
+
+var _NavigationTreeDirectory = require("./NavigationTreeDirectory");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function NavigationTree(_ref) {
+  let {
+    rootState: partialRootState,
+    fetchPath,
+    getActions,
+    activePath,
+    onActivePathUpdate
+  } = _ref;
+
+  const [state, dispatch] = _react.default.useReducer(_state.reducer, {
+    [partialRootState.path]: _objectSpread(_objectSpread({}, (0, _state.getDefaultNodeState)()), partialRootState)
+  });
+
+  const rootState = state[partialRootState.path];
+  return /*#__PURE__*/_react.default.createElement(_NavigationTreeNode.NavigationTreeNode, {
+    path: rootState.path,
+    state: state,
+    dispatch: dispatch,
+    active: rootState.path === activePath,
+    onActivate: onActivePathUpdate,
+    getActions: getActions
+  }, /*#__PURE__*/_react.default.createElement(_NavigationTreeDirectory.NavigationTreeDirectory, {
+    state: state,
+    dispatch: dispatch,
+    path: rootState.path,
+    fetchPath: fetchPath,
+    activePath: activePath,
+    onItemActivate: onActivePathUpdate,
+    getActions: getActions
+  }));
+}

package/build/components/NavigationTree/NavigationTreeDirectory.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { NavigationTreeState, NavigationTreeProps } from './types';
+import { NavigationTreeAction } from './state';
+export interface NavigationTreeDirectoryProps {
+    state: NavigationTreeState;
+    dispatch: React.Dispatch<NavigationTreeAction>;
+    path: string;
+    fetchPath: NavigationTreeProps['fetchPath'];
+    activePath?: string;
+    onItemActivate?: (itemPath: string) => void;
+    getActions?: NavigationTreeProps['getActions'];
+}
+export declare function NavigationTreeDirectory({ state, dispatch, path, fetchPath, activePath, onItemActivate, getActions, }: NavigationTreeDirectoryProps): JSX.Element;

package/build/components/NavigationTree/NavigationTreeDirectory.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationTreeDirectory = NavigationTreeDirectory;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _state = require("./state");
+
+var _NavigationTreeNode = require("./NavigationTreeNode");
+
+var _LoaderView = require("./LoaderView/LoaderView");
+
+var _ErrorView = require("./ErrorView/ErrorView");
+
+var _EmptyView = require("./EmptyView/EmptyView");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function NavigationTreeDirectory(_ref) {
+  let {
+    state,
+    dispatch,
+    path,
+    fetchPath,
+    activePath,
+    onItemActivate,
+    getActions
+  } = _ref;
+  const nodeState = state[path];
+
+  _react.default.useEffect(() => {
+    if (!nodeState.loaded && !nodeState.loading) {
+      dispatch({
+        type: _state.NavigationTreeActionType.StartLoading,
+        payload: {
+          path
+        }
+      });
+      fetchPath(path).then(data => {
+        dispatch({
+          type: _state.NavigationTreeActionType.FinishLoading,
+          payload: {
+            path,
+            data
+          }
+        });
+      }).catch(error => {
+        dispatch({
+          type: _state.NavigationTreeActionType.FinishLoading,
+          payload: {
+            path,
+            error
+          }
+        });
+      });
+    }
+  }, []);
+
+  if (nodeState.loading) {
+    return /*#__PURE__*/_react.default.createElement(_LoaderView.LoaderView, null);
+  }
+
+  if (nodeState.error) {
+    return /*#__PURE__*/_react.default.createElement(_ErrorView.ErrorView, null);
+  }
+
+  if (nodeState.loaded && nodeState.children.length > 0) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, nodeState.children.map(childName => {
+      const childPath = `${path}/${childName}`;
+      let children;
+
+      if (state[childPath].type === 'directory') {
+        children = /*#__PURE__*/_react.default.createElement(NavigationTreeDirectory, {
+          state: state,
+          dispatch: dispatch,
+          path: childPath,
+          fetchPath: fetchPath,
+          activePath: activePath,
+          onItemActivate: onItemActivate,
+          getActions: getActions
+        });
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_NavigationTreeNode.NavigationTreeNode, {
+        key: childPath,
+        path: childPath,
+        state: state,
+        dispatch: dispatch,
+        active: childPath === activePath,
+        onActivate: onItemActivate,
+        getActions: getActions,
+        children: children
+      });
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_EmptyView.EmptyView, null);
+}

package/build/components/NavigationTree/NavigationTreeNode.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { NavigationTreeState, NavigationTreeProps } from './types';
+import { NavigationTreeAction } from './state';
+export interface NavigationTreeNodeProps {
+    path: string;
+    state: NavigationTreeState;
+    dispatch: React.Dispatch<NavigationTreeAction>;
+    children?: React.ReactNode;
+    active?: boolean;
+    onActivate?: (path: string) => void;
+    getActions?: NavigationTreeProps['getActions'];
+}
+export declare function NavigationTreeNode({ path, state, dispatch, children, active, onActivate, getActions, }: NavigationTreeNodeProps): JSX.Element;

package/build/components/NavigationTree/NavigationTreeNode.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationTreeNode = NavigationTreeNode;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _state = require("./state");
+
+var _Database = require("../icons/Database");
+
+var _Folder = require("../icons/Folder");
+
+var _FolderOpen = require("../icons/FolderOpen");
+
+var _Table = require("../icons/Table");
+
+var _TreeView = require("../TreeView/TreeView");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function renderIcon(type, collapsed) {
+  switch (type) {
+    case 'database':
+      return /*#__PURE__*/_react.default.createElement(_Database.DatabaseIcon, {
+        height: 14
+      });
+
+    case 'directory':
+      return collapsed ? /*#__PURE__*/_react.default.createElement(_Folder.FolderIcon, {
+        height: 14
+      }) : /*#__PURE__*/_react.default.createElement(_FolderOpen.FolderOpenIcon, {
+        height: 14
+      });
+
+    case 'table':
+      return /*#__PURE__*/_react.default.createElement(_Table.TableIcon, {
+        height: 14
+      });
+
+    default:
+      return null;
+  }
+}
+
+function isArrowVisible(type) {
+  return type === 'database' || type === 'directory';
+}
+
+function NavigationTreeNode(_ref) {
+  let {
+    path,
+    state,
+    dispatch,
+    children,
+    active,
+    onActivate,
+    getActions
+  } = _ref;
+  const nodeState = state[path];
+
+  const handleClick = _react.default.useCallback(() => {
+    if (onActivate) {
+      onActivate(path);
+    }
+  }, [path, onActivate]);
+
+  const handleArrowClick = _react.default.useCallback(() => {
+    dispatch({
+      type: _state.NavigationTreeActionType.ToggleCollapsed,
+      payload: {
+        path
+      }
+    });
+  }, []);
+
+  const actions = _react.default.useMemo(() => {
+    return getActions === null || getActions === void 0 ? void 0 : getActions(nodeState.path, nodeState.type);
+  }, [getActions, nodeState]);
+
+  return /*#__PURE__*/_react.default.createElement(_TreeView.TreeView, {
+    name: nodeState.name,
+    icon: renderIcon(nodeState.type, nodeState.collapsed),
+    collapsed: nodeState.collapsed,
+    active: active,
+    actions: actions,
+    hasArrow: isArrowVisible(nodeState.type),
+    onClick: handleClick,
+    onArrowClick: handleArrowClick
+  }, children);
+}

package/build/components/NavigationTree/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "label_error": "Error",
+  "label_empty": "No data"
+}

package/build/components/NavigationTree/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@yandex-cloud/i18n").Params | undefined) => string;
+export default _default;

package/build/components/NavigationTree/i18n/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _i18n = require("../../i18n");
+
+var _en = _interopRequireDefault(require("./en.json"));
+
+var _ru = _interopRequireDefault(require("./ru.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const COMPONENT = 'ydb-navigation-tree';
+
+_i18n.i18n.registerKeyset(_i18n.I18N.LANGS.en, COMPONENT, _en.default);
+
+_i18n.i18n.registerKeyset(_i18n.I18N.LANGS.ru, COMPONENT, _ru.default);
+
+var _default = _i18n.i18n.keyset(COMPONENT);
+
+exports.default = _default;

package/build/components/NavigationTree/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "label_error": "Ошибка",
+  "label_empty": "Нет данных"
+}

package/build/components/NavigationTree/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NavigationTree';
+export * from './types';

package/build/components/NavigationTree/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _NavigationTree = require("./NavigationTree");
+
+Object.keys(_NavigationTree).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NavigationTree[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NavigationTree[key];
+    }
+  });
+});
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});

package/build/components/NavigationTree/state.d.ts

@@ -0,0 +1,18 @@
+import { NavigationTreeState } from './types';
+export declare enum NavigationTreeActionType {
+    ToggleCollapsed = "toggle-collapsed",
+    StartLoading = "start-loading",
+    FinishLoading = "finish-loading"
+}
+export interface NavigationTreeAction {
+    type: NavigationTreeActionType;
+    payload: any;
+}
+export declare function getDefaultNodeState(): {
+    collapsed: boolean;
+    loading: boolean;
+    loaded: boolean;
+    error: boolean;
+    children: never[];
+};
+export declare function reducer(state: NavigationTreeState | undefined, action: NavigationTreeAction): NavigationTreeState;

package/build/components/NavigationTree/state.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavigationTreeActionType = void 0;
+exports.getDefaultNodeState = getDefaultNodeState;
+exports.reducer = reducer;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+let NavigationTreeActionType;
+exports.NavigationTreeActionType = NavigationTreeActionType;
+
+(function (NavigationTreeActionType) {
+  NavigationTreeActionType["ToggleCollapsed"] = "toggle-collapsed";
+  NavigationTreeActionType["StartLoading"] = "start-loading";
+  NavigationTreeActionType["FinishLoading"] = "finish-loading";
+})(NavigationTreeActionType || (exports.NavigationTreeActionType = NavigationTreeActionType = {}));
+
+function getDefaultNodeState() {
+  return {
+    collapsed: true,
+    loading: false,
+    loaded: false,
+    error: false,
+    children: []
+  };
+}
+
+function reducer() {
+  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let action = arguments.length > 1 ? arguments[1] : undefined;
+
+  switch (action.type) {
+    case NavigationTreeActionType.ToggleCollapsed:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        [action.payload.path]: _objectSpread(_objectSpread({}, state[action.payload.path]), {}, {
+          collapsed: !state[action.payload.path].collapsed
+        })
+      });
+
+    case NavigationTreeActionType.StartLoading:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        [action.payload.path]: _objectSpread(_objectSpread({}, state[action.payload.path]), {}, {
+          loading: true,
+          loaded: false,
+          error: false
+        })
+      });
+
+    case NavigationTreeActionType.FinishLoading:
+      {
+        const newState = _objectSpread(_objectSpread({}, state), {}, {
+          [action.payload.path]: _objectSpread(_objectSpread({}, state[action.payload.path]), {}, {
+            loading: false,
+            loaded: Boolean(action.payload.data),
+            error: Boolean(action.payload.error)
+          })
+        });
+
+        if (action.payload.data) {
+          newState[action.payload.path].children = action.payload.data.map(_ref => {
+            let {
+              name
+            } = _ref;
+            return name;
+          });
+
+          for (const item of action.payload.data) {
+            const path = `${action.payload.path}/${item.name}`;
+            const name = item.name;
+            const type = item.type;
+            newState[path] = _objectSpread(_objectSpread({}, getDefaultNodeState()), {}, {
+              path,
+              name,
+              type
+            });
+          }
+        }
+
+        return newState;
+      }
+
+    default:
+      return state;
+  }
+}

package/build/components/NavigationTree/types.d.ts

@@ -0,0 +1,26 @@
+import { DropdownMenuItemMixed } from '@yandex-cloud/uikit';
+export declare type NavigationTreeNodeType = 'database' | 'directory' | 'table';
+export interface NavigationTreeDataItem {
+    name: string;
+    type: NavigationTreeNodeType;
+}
+export interface NavigationTreeState {
+    [path: string]: NavigationTreeNodeState;
+}
+export interface NavigationTreeNodeState {
+    path: string;
+    name: string;
+    type: NavigationTreeNodeType;
+    collapsed: boolean;
+    loading: boolean;
+    loaded: boolean;
+    error: boolean;
+    children: string[];
+}
+export interface NavigationTreeProps<D = any> {
+    rootState: Omit<NavigationTreeNodeState, 'loading' | 'loaded' | 'error' | 'children'>;
+    fetchPath: (path: string) => Promise<NavigationTreeDataItem[]>;
+    getActions?: (path: string, type: NavigationTreeNodeType) => DropdownMenuItemMixed<D>[];
+    activePath?: string;
+    onActivePathUpdate?: (activePath: string) => void;
+}

package/build/components/NavigationTree/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/build/components/TreeView/TreeView.css

@@ -0,0 +1,87 @@
+.ydb-tree-view {
+  font-size: 13px;
+  line-height: 18px;
+}
+.ydb-tree-view, .ydb-tree-view * {
+  box-sizing: border-box;
+}
+.ydb-tree-view__item {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  padding-right: 3px;
+  border-bottom: 1px solid var(--yc-color-line-solid);
+  cursor: pointer;
+}
+.ydb-tree-view__item:hover {
+  background-color: var(--yc-color-base-simple-hover);
+}
+.ydb-tree-view__item:hover .ydb-tree-view__actions {
+  display: block;
+}
+.ydb-tree-view__item_active {
+  font-weight: bold;
+  background-color: var(--yc-color-base-selection);
+}
+.ydb-tree-view__item_active:hover {
+  background-color: var(--yc-color-base-selection-hover);
+}
+.ydb-tree-view__content {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+.ydb-tree-view__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--yc-color-text-hint);
+}
+.ydb-tree-view__icon svg {
+  display: block;
+}
+.ydb-tree-view__text {
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ydb-tree-view__actions {
+  display: none;
+  margin-left: 6px;
+}
+.ydb-tree-view .tree-view_arrow {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12" width="6" height="12"><path d="M0.192529 10.7483C-0.0845649 11.0562 -0.0596061 11.5304 0.248276 11.8075C0.556159 12.0846 1.03038 12.0596 1.30747 11.7517L0.192529 10.7483ZM5.25 6.25L5.80747 6.75172C6.06418 6.46649 6.06418 6.0335 5.80747 5.74828L5.25 6.25ZM1.30747 0.748277C1.03038 0.440394 0.556159 0.415435 0.248276 0.69253C-0.0596065 0.969624 -0.0845653 1.44384 0.192529 1.75172L1.30747 0.748277ZM1.30747 11.7517L5.80747 6.75172L4.69253 5.74828L0.192529 10.7483L1.30747 11.7517ZM5.80747 5.74828L1.30747 0.748277L0.192529 1.75172L4.69253 6.75172L5.80747 5.74828Z" fill="rgba(0, 0, 0, 0.85)"/></svg>') no-repeat center center;
+}
+.yc-root_theme_dark .ydb-tree-view .tree-view_arrow {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 12" width="6" height="12"><path d="M0.192529 10.7483C-0.0845649 11.0562 -0.0596061 11.5304 0.248276 11.8075C0.556159 12.0846 1.03038 12.0596 1.30747 11.7517L0.192529 10.7483ZM5.25 6.25L5.80747 6.75172C6.06418 6.46649 6.06418 6.0335 5.80747 5.74828L5.25 6.25ZM1.30747 0.748277C1.03038 0.440394 0.556159 0.415435 0.248276 0.69253C-0.0596065 0.969624 -0.0845653 1.44384 0.192529 1.75172L1.30747 0.748277ZM1.30747 11.7517L5.80747 6.75172L4.69253 5.74828L0.192529 10.7483L1.30747 11.7517ZM5.80747 5.74828L1.30747 0.748277L0.192529 1.75172L4.69253 6.75172L5.80747 5.74828Z" fill="rgba(255, 255, 255, 0.85)"/></svg>') no-repeat center center;
+}
+.ydb-tree-view .tree-view_arrow:not(.tree-view_arrow-collapsed) {
+  transform: rotate(90deg);
+}
+.ydb-tree-view_no-arrow .tree-view_arrow {
+  visibility: hidden;
+}
+.ydb-tree-view .ydb-tree-view .ydb-tree-view__item {
+  padding-left: calc(24px * 1);
+}
+.ydb-tree-view .ydb-tree-view .ydb-tree-view .ydb-tree-view__item {
+  padding-left: calc(24px * 2);
+}
+.ydb-tree-view .ydb-tree-view .ydb-tree-view .ydb-tree-view .ydb-tree-view__item {
+  padding-left: calc(24px * 3);
+}
+.ydb-tree-view .ydb-tree-view .ydb-tree-view .ydb-tree-view .ydb-tree-view .ydb-tree-view__item {
+  padding-left: calc(24px * 4);
+}
+.ydb-tree-view .ydb-tree-view .ydb-tree-view .ydb-tree-view .ydb-tree-view .ydb-tree-view .ydb-tree-view__item {
+  padding-left: calc(24px * 5);
+}

package/build/components/TreeView/TreeView.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { DropdownMenuItemMixed } from '@yandex-cloud/uikit';
+import './TreeView.scss';
+export interface TreeViewProps {
+    children?: React.ReactNode;
+    name: React.ReactNode;
+    title?: string;
+    icon?: React.ReactNode;
+    collapsed?: boolean;
+    active?: boolean;
+    onClick?: () => void;
+    onArrowClick?: () => void;
+    hasArrow?: boolean;
+    actions?: DropdownMenuItemMixed<any>[];
+}
+export declare function TreeView({ children, name, title, icon, collapsed, active, onClick, onArrowClick, hasArrow, actions, }: TreeViewProps): JSX.Element;

package/build/components/TreeView/TreeView.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeView = TreeView;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _bemCnLite = _interopRequireDefault(require("bem-cn-lite"));
+
+var _reactTreeview = _interopRequireDefault(require("react-treeview"));
+
+var _uikit = require("@yandex-cloud/uikit");
+
+require("./TreeView.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const b = (0, _bemCnLite.default)('ydb-tree-view');
+
+function TreeView(_ref) {
+  let {
+    children,
+    name,
+    title,
+    icon,
+    collapsed = true,
+    active = false,
+    onClick,
+    onArrowClick,
+    hasArrow = false,
+    actions
+  } = _ref;
+
+  const rootRef = _react.default.useRef(null);
+
+  const nodeLabel = /*#__PURE__*/_react.default.createElement("div", {
+    className: b('content')
+  }, icon && /*#__PURE__*/_react.default.createElement("div", {
+    className: b('icon')
+  }, icon), /*#__PURE__*/_react.default.createElement("div", {
+    className: b('text'),
+    title: title
+  }, name), actions && actions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: b('actions')
+  }, /*#__PURE__*/_react.default.createElement(_uikit.DropdownMenu, {
+    defaultSwitcherProps: {
+      view: 'clear',
+      size: 's'
+    },
+    items: actions
+  })));
+
+  _react.default.useEffect(() => {
+    const rootEl = rootRef.current;
+    const itemEl = rootEl && rootEl.querySelector(`.${b('item')}`);
+
+    if (!onClick || !itemEl) {
+      return;
+    }
+
+    const skipClicksSelector = `.tree-view_arrow, .${b('actions')}`;
+
+    function handleClick(event) {
+      const path = event.composedPath().filter(item => item.nodeType === Node.ELEMENT_NODE);
+      const hasSkipped = path.some(el => el.matches(skipClicksSelector));
+
+      if (!hasSkipped) {
+        onClick();
+      }
+    }
+
+    itemEl.addEventListener('click', handleClick);
+    return () => {
+      itemEl.removeEventListener('click', handleClick);
+    };
+  }, [onClick]);
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: rootRef,
+    className: b({
+      'no-arrow': !hasArrow
+    })
+  }, /*#__PURE__*/_react.default.createElement(_reactTreeview.default, {
+    collapsed: collapsed,
+    itemClassName: b('item', {
+      active
+    }),
+    nodeLabel: nodeLabel,
+    onClick: onArrowClick
+  }, children));
+}

package/build/components/i18n.d.ts

@@ -0,0 +1,3 @@
+import { I18N } from '@yandex-cloud/i18n';
+export declare const i18n: I18N;
+export { I18N } from '@yandex-cloud/i18n';

package/build/components/i18n.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "I18N", {
+  enumerable: true,
+  get: function () {
+    return _i18n.I18N;
+  }
+});
+exports.i18n = void 0;
+
+var _i18n = require("@yandex-cloud/i18n");
+
+const i18n = new _i18n.I18N();
+exports.i18n = i18n;

package/build/components/icons/Database.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function DatabaseIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/components/icons/Database.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatabaseIcon = DatabaseIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function DatabaseIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 448 512",
+    fill: "currentColor"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M448 80V128C448 172.2 347.7 208 224 208C100.3 208 0 172.2 0 128V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80zM393.2 214.7C413.1 207.3 433.1 197.8 448 186.1V288C448 332.2 347.7 368 224 368C100.3 368 0 332.2 0 288V186.1C14.93 197.8 34.02 207.3 54.85 214.7C99.66 230.7 159.5 240 224 240C288.5 240 348.3 230.7 393.2 214.7V214.7zM54.85 374.7C99.66 390.7 159.5 400 224 400C288.5 400 348.3 390.7 393.2 374.7C413.1 367.3 433.1 357.8 448 346.1V432C448 476.2 347.7 512 224 512C100.3 512 0 476.2 0 432V346.1C14.93 357.8 34.02 367.3 54.85 374.7z"
+  }));
+}

package/build/components/icons/Folder.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function FolderIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/components/icons/Folder.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FolderIcon = FolderIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function FolderIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
+    fill: "currentColor"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M512 144v288c0 26.5-21.5 48-48 48h-416C21.5 480 0 458.5 0 432v-352C0 53.5 21.5 32 48 32h160l64 64h192C490.5 96 512 117.5 512 144z"
+  }));
+}

package/build/components/icons/FolderOpen.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function FolderOpenIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/components/icons/FolderOpen.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FolderOpenIcon = FolderOpenIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function FolderOpenIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 576 512",
+    fill: "currentColor"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M147.8 192H480V144C480 117.5 458.5 96 432 96h-160l-64-64h-160C21.49 32 0 53.49 0 80v328.4l90.54-181.1C101.4 205.6 123.4 192 147.8 192zM543.1 224H147.8C135.7 224 124.6 230.8 119.2 241.7L0 480h447.1c12.12 0 23.2-6.852 28.62-17.69l96-192C583.2 249 567.7 224 543.1 224z"
+  }));
+}

package/build/components/icons/Table.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function TableIcon(props: React.SVGProps<SVGSVGElement>): JSX.Element;

package/build/components/icons/Table.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableIcon = TableIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function TableIcon(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512",
+    fill: "currentColor"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M448 32C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H448zM224 256V160H64V256H224zM64 320V416H224V320H64zM288 416H448V320H288V416zM448 256V160H288V256H448z"
+  }));
+}

package/build/index.d.ts

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

package/build/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _NavigationTree = require("./components/NavigationTree");
+
+Object.keys(_NavigationTree).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NavigationTree[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NavigationTree[key];
+    }
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-ui-components",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "description": "",
   "license": "MIT",
   "main": "build/index.js",
@@ -19,10 +19,12 @@
     "lint:js": "eslint --ext .js,.jsx,.ts,.tsx .",
     "lint:styles": "stylelint 'src/**/*.scss'",
     "lint": "run-p lint:*",
-    "start": "start-storybook -p 7002"
+    "start": "start-storybook -p 7002",
+    "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "bem-cn-lite": "^4.1.0"
+    "bem-cn-lite": "^4.1.0",
+    "react-treeview": "^0.4.7"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",
@@ -55,7 +57,6 @@
     "react": "^16.14.0",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^16.14.0",
-    "react-treeview": "^0.4.7",
     "rimraf": "^3.0.2",
     "sass": "^1.49.9",
     "sass-loader": "^10.2.1",
@@ -64,7 +65,9 @@
     "typescript": "^4.6.2"
   },
   "peerDependencies": {
+    "@yandex-cloud/browserslist-config": "^1.0.1",
     "@yandex-cloud/i18n": "^0.4.0",
+    "@yandex-cloud/uikit": "^1.8.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0"
   },