@cloud-app-dev/vidc 2.0.0-alpha.0 → 2.0.0-alpha.12

package/.umirc.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'dumi';
 import path from 'path';
 
 const token =
-  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NiIsImV4dCI6MTYzODY4NzgyNzEwNywidWlkIjoiMTAxMDAwMDAwMjQ5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTAzODddLCJ2YWxpZFRpbWUiOm51bGwsIm9wdENlbnRlcklkIjoiMTAwMTAwMDAwMjMzIiwidXNlclR5cGUiOjEwMDcwMiwiaWF0IjoxNjM4NDI4NjI3MTA3fQ.eEvUc9_eGBdUi2QCMDNjOYgTzTKwiLX-7DEQ_O9kjhs';
+  'eyJhbGciOiJIUzI1NiJ9.eyJvcmdhbml6YXRpb25JZCI6IjEwMDEwMTAwMDQ0NiIsImV4dCI6MTY0MDQwOTc4NjQ3OCwidWlkIjoiMTAxMDAwMDAwMjQ5IiwidmFsaWRTdGF0ZSI6MTA0NDA2LCJyb2xlSWQiOlsxMDAwMDAxMTAzODddLCJ2YWxpZFRpbWUiOm51bGwsIm9wdENlbnRlcklkIjoiMTAwMTAwMDAwMjMzIiwidXNlclR5cGUiOjEwMDcwMiwiaWF0IjoxNjQwMTUwNTg2NDc4fQ.9a8me82dxS_DJ52Ac8eBu1Y2Gigs7mZ6Cm3Rd-tj5Vk';
 
 export default defineConfig({
   title: '云应用-业务组件库',
@@ -13,7 +13,6 @@ export default defineConfig({
   targets: { chrome: 60 },
   extraBabelPlugins: [
     ['import', { libraryName: 'antd', style: true }, 'antd'],
-    ['import', { libraryName: '@cloud-app-dev/basic-components', style: false, camel2DashComponentName: false, libraryDirectory: 'es' }, 'basic-components'],
     ['import', { libraryName: '@cloud-app-dev/utils', style: false, camel2DashComponentName: false, libraryDirectory: 'es' }, 'utils'],
     ['import', { libraryName: 'ahooks', style: false, camel2DashComponentName: false, libraryDirectory: 'es' }, 'ahooks'],
     ['import', { libraryName: '@cloud-app-dev/map', style: false, camel2DashComponentName: false, libraryDirectory: 'es' }, 'map-components'],
@@ -25,7 +24,7 @@ export default defineConfig({
     null, // null 值代表保留约定式生成的导航，只做增量配置
     {
       title: 'GitLab',
-      path: 'https://git.topvdn.com/micro-basic/video-cloud-components',
+      path: 'https://git.topvdn.com/cloudapp/vidc',
     },
   ],
   alias: {

package/es/Api/index.d.ts

@@ -1,9 +1,8 @@
-import { OrgItemType } from '@cloud-app-dev/basic-components/es/Store/org';
-import { UserInfo } from '@cloud-app-dev/basic-components/es/Store/app';
-import { BzTreeItemType, PostItemType } from '../core';
+import { BzTreeItemType, PostItemType, OrgItemType } from '../core';
+import { UserInfoType } from '../AppContext/interface';
 declare class Api {
     getOrgs(): Promise<OrgItemType[]>;
-    getUsers(organizationId: string, params?: any, filterUserIds?: string[]): Promise<UserInfo[]>;
+    getUsers(organizationId: string, params?: any, filterUserIds?: string[]): Promise<UserInfoType[]>;
     getPosts(orgId: string): Promise<PostItemType[]>;
     getDeviceBzTree(): Promise<BzTreeItemType[]>;
     getCustomDeviceGroup(): Promise<BzTreeItemType[]>;

package/es/Api/index.js

@@ -1,5 +1,3 @@
-import _Service from "@cloud-app-dev/basic-components/es/Service";
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -7,6 +5,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
 import { __awaiter } from "tslib";
+import Service from '../Service';
 import { getHeader } from '../utils';
 
 var Api = /*#__PURE__*/function () {
@@ -24,7 +23,7 @@ var Api = /*#__PURE__*/function () {
             switch (_context.prev = _context.next) {
               case 0:
                 _context.next = 2;
-                return _Service.$http({
+                return Service.$http({
                   url: '/api/user/v1/organization/queryChildOrganizationsById',
                   method: 'post',
                   requestId: 'queryChildOrganizationsById',
@@ -61,7 +60,7 @@ var Api = /*#__PURE__*/function () {
             switch (_context2.prev = _context2.next) {
               case 0:
                 _context2.next = 2;
-                return _Service.$http({
+                return Service.$http({
                   url: '/api/user/v1/queryUsers',
                   method: 'post',
                   requestId: 'queryUsers',
@@ -99,7 +98,7 @@ var Api = /*#__PURE__*/function () {
             switch (_context3.prev = _context3.next) {
               case 0:
                 _context3.next = 2;
-                return _Service.$http({
+                return Service.$http({
                   url: "/api/user/v2/post/queryPostByOrgId/".concat(orgId),
                   method: 'post',
                   requestId: 'queryPostByOrgId',
@@ -129,7 +128,7 @@ var Api = /*#__PURE__*/function () {
             switch (_context4.prev = _context4.next) {
               case 0:
                 _context4.next = 2;
-                return _Service.$http({
+                return Service.$http({
                   url: '/api/udm-api/DeviceBuzTree/queryList',
                   method: 'post',
                   requestId: 'getDeviceBzTree',
@@ -159,7 +158,7 @@ var Api = /*#__PURE__*/function () {
             switch (_context5.prev = _context5.next) {
               case 0:
                 _context5.next = 2;
-                return _Service.$http({
+                return Service.$http({
                   url: '/api/udm-api/customDeviceGroup/queryList',
                   method: 'post',
                   requestId: 'customDeviceGroup',
@@ -189,7 +188,7 @@ var Api = /*#__PURE__*/function () {
             switch (_context6.prev = _context6.next) {
               case 0:
                 _context6.next = 2;
-                return _Service.$http({
+                return Service.$http({
                   url: '/api/place/v1/getPlacesByHasDevice',
                   method: 'post',
                   requestId: 'getPlacesByHasDevice',

package/es/AppContext/index.js

@@ -16,7 +16,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useCallback, useMemo, useState } from 'react';
 import Sync from './Sync';
-import { _USER_SESSION_, _OPERATION_SESSION_, _LOGIN_STATUS_SESSION_, _USER_EVENT_CHANGE_, _OPERATION_EVENT_CHANGE_, _LOGIN_STATUS_EVENT_CHANGE_ } from './static';
+import * as Static from './static';
+var _USER_SESSION_ = Static._USER_SESSION_,
+    _OPERATION_SESSION_ = Static._OPERATION_SESSION_,
+    _LOGIN_STATUS_SESSION_ = Static._LOGIN_STATUS_SESSION_,
+    _USER_EVENT_CHANGE_ = Static._USER_EVENT_CHANGE_,
+    _OPERATION_EVENT_CHANGE_ = Static._OPERATION_EVENT_CHANGE_,
+    _LOGIN_STATUS_EVENT_CHANGE_ = Static._LOGIN_STATUS_EVENT_CHANGE_;
 var Context = /*#__PURE__*/React.createContext(null);
 
 function Provider(_ref) {

package/es/AppRedirect/index.d.ts

@@ -0,0 +1,16 @@
+import * as H from 'history';
+import './index.less';
+interface AppRedirectProps {
+    /**
+     * @description 匹配路径
+     * @default -
+     */
+    path?: string | string[];
+    /**
+     * @description 重定向路径
+     * @description -
+     */
+    to: H.LocationDescriptor<any>;
+}
+declare function AppRedirect({ path, to }: AppRedirectProps): JSX.Element;
+export default AppRedirect;

package/es/AppRedirect/index.js

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import useNavigate from '../useNavigate';
+import "./index.css";
+
+var getKey = function getKey() {
+  return Math.random().toString(36).substr(2);
+};
+
+function AppRedirect(_ref) {
+  var path = _ref.path,
+      to = _ref.to;
+  var navigate = useNavigate();
+  var location = useLocation();
+  useEffect(function () {
+    if (path === location.pathname) {
+      if (typeof to !== 'string') {
+        navigate("".concat(to.pathname).concat(to.search ? "".concat(to.search, "&key=").concat(getKey()) : "?key=".concat(getKey())), {
+          replace: true,
+          state: Object.assign({}, to.state, {
+            isReplace: true
+          })
+        });
+      } else {
+        navigate("".concat(to, "?key").concat(getKey()), {
+          replace: true
+        });
+      }
+    }
+  }, [path, location.pathname, to, history]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+}
+
+export default AppRedirect;

package/es/AppRoute/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IAppRouteProps } from './interface';
+declare class AppRoute extends React.PureComponent<IAppRouteProps, any> {
+    private isRender;
+    constructor(props: IAppRouteProps);
+    shouldComponentUpdate(props: IAppRouteProps): boolean;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+export default AppRoute;

package/es/AppRoute/index.js

@@ -0,0 +1,115 @@
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+import _cache from "@cloud-app-dev/utils/es/cache";
+import _useUnmount from "ahooks/es/useUnmount";
+import _useMount from "ahooks/es/useMount";
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+import React from 'react';
+import { Route } from 'react-router-dom';
+var _global = window;
+
+function RenderSingleRoute(_ref) {
+  var onMount = _ref.onMount,
+      onUnmount = _ref.onUnmount;
+
+  _useMount(function () {
+    return onMount();
+  });
+
+  _useUnmount(function () {
+    return onUnmount();
+  });
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+}
+
+var AppRoute = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(AppRoute, _React$PureComponent);
+
+  var _super = _createSuper(AppRoute);
+
+  function AppRoute(props) {
+    var _this;
+
+    _classCallCheck(this, AppRoute);
+
+    _this = _super.call(this, props); //可能存在路由创建但是没有render 导致UI无法渲染
+
+    _this.isRender = false;
+    _this.state = {
+      isMatch: false
+    };
+    return _this;
+  }
+
+  _createClass(AppRoute, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(props) {
+      if (!_global._IS_RUN_MICRO_BASIC || !this.isRender || _global._IS_ALLOW_ROUTE_RENDER) {
+        return true;
+      }
+
+      return (props.currentId || _cache.getCache('currentTabKey', 'session')) === props.tabId;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      console.debug('路由销毁');
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          element = _this$props.element,
+          path = _this$props.path;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Route, {
+        path: path,
+        element: /*#__PURE__*/React.createElement(RenderSingleRoute, {
+          onMount: function onMount() {
+            return _this2.setState({
+              isMatch: true
+            });
+          },
+          onUnmount: function onUnmount() {
+            return _this2.setState({
+              isMatch: false
+            });
+          }
+        })
+      }), this.state.isMatch && element, /*#__PURE__*/React.createElement(RenderSingleRoute, {
+        onMount: function onMount() {
+          return _this2.isRender = true;
+        },
+        onUnmount: function onUnmount() {
+          return _this2.isRender = false;
+        }
+      }));
+    }
+  }]);
+
+  return AppRoute;
+}(React.PureComponent);
+
+export default AppRoute;

package/es/AppRoute/interface.d.ts

@@ -0,0 +1,8 @@
+import * as H from 'history';
+import { RouteProps } from 'react-router-dom';
+
+export interface IAppRouteProps extends RouteProps, IAppRouteType {
+  routes?: RouteProps[];
+  tabId?: string;
+  currentId?: string;
+}

package/es/Auth/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IAuthProps {
+    featureId: string;
+    noAuthContent?: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare function Auth({ featureId, noAuthContent, children }: IAuthProps): JSX.Element;
+export default Auth;

package/es/Auth/index.js

@@ -0,0 +1,17 @@
+import React, { useMemo } from 'react';
+import Config from '../Config';
+
+function Auth(_ref) {
+  var featureId = _ref.featureId,
+      noAuthContent = _ref.noAuthContent,
+      children = _ref.children;
+  var action = useMemo(function () {
+    return !!Config.feature.find(function (v) {
+      return v === featureId;
+    });
+  }, [featureId]); //获取按钮权限
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !action ? noAuthContent ? noAuthContent : null : children);
+}
+
+export default Auth;

package/es/AutoExit/index.js

@@ -1,18 +1,21 @@
-import _Store from "@cloud-app-dev/basic-components/es/Store";
-import _useHistory from "@cloud-app-dev/basic-components/es/useHistory";
-import React from 'react';
+import _useMount from "ahooks/es/useMount";
+import React, { useContext } from 'react';
+import useNavigate from '../useNavigate';
+import AppContext from '../AppContext';
 
 function AutoExit(_ref) {
   var children = _ref.children;
 
-  var history = _useHistory();
+  var _useContext = useContext(AppContext.Context),
+      loginStatus = _useContext.loginStatus;
 
-  if (!_Store.app.isLogin) {
-    history.replace('/login');
-    return null;
-  }
+  var navigate = useNavigate();
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  _useMount(function () {
+    !loginStatus && navigate('/login');
+  });
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !loginStatus ? children : null);
 }
 
 export default AutoExit;

package/es/Box/BetweenBox/index.css

@@ -0,0 +1,5 @@
+.lm-between-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

package/es/Box/BetweenBox/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.less';
+interface BetweentBoxProps {
+    className?: string;
+    children?: React.ReactNode;
+    extNode?: React.ReactNode;
+    style?: React.CSSProperties;
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+}
+declare function BetweenBox({ className, left, right, style, children, extNode }: BetweentBoxProps): JSX.Element;
+export default BetweenBox;

package/es/Box/BetweenBox/index.js

@@ -0,0 +1,24 @@
+import React, { useMemo } from 'react';
+import "./index.css";
+
+function BetweenBox(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      left = _ref.left,
+      right = _ref.right,
+      style = _ref.style,
+      children = _ref.children,
+      extNode = _ref.extNode;
+  var title = useMemo(function () {
+    return left || children;
+  }, [left, children]);
+  var other = useMemo(function () {
+    return right || extNode;
+  }, [right, extNode]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "lm-between-box ".concat(className),
+    style: style
+  }, title && /*#__PURE__*/React.createElement("div", null, title), other && /*#__PURE__*/React.createElement("div", null, other));
+}
+
+export default BetweenBox;

package/es/Box/InfoBox/index.css

@@ -0,0 +1,23 @@
+.info-box-layout {
+  width: 100%;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+}
+.info-box-layout .info-box-title-wrapper {
+  background-color: var(--content-info-box-title-bg);
+  border: 1px solid var(--content-info-box-title-bd);
+  border-bottom: none;
+  height: var(--content-info-box-title-height);
+  line-height: var(--content-info-box-title-height);
+  min-height: max-content;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  font-weight: 700;
+}
+.info-box-layout .info-box-content-wrapper {
+  background-color: var(--content-info-box-bg);
+  border: 1px solid var(--content-info-box-bd-color);
+  flex: 1;
+}

package/es/Box/InfoBox/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.less';
+interface InfoBoxProps {
+    className?: string;
+    title?: React.ReactNode;
+    titleExt?: React.ReactNode;
+    style?: React.CSSProperties;
+    contentStyle?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+declare function InfoBox({ title, titleExt, children, className, style, contentStyle }: InfoBoxProps): JSX.Element;
+export default InfoBox;

package/es/Box/InfoBox/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import BetweenBox from '../BetweenBox';
+import "./index.css";
+
+function InfoBox(_ref) {
+  var title = _ref.title,
+      titleExt = _ref.titleExt,
+      children = _ref.children,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      style = _ref.style,
+      contentStyle = _ref.contentStyle;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "info-box-layout ".concat(className),
+    style: style
+  }, (!!title || !!titleExt) && /*#__PURE__*/React.createElement(BetweenBox, {
+    className: "info-box-title-wrapper",
+    left: title,
+    right: titleExt
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "info-box-content-wrapper",
+    style: contentStyle
+  }, children));
+}
+
+export default InfoBox;

package/es/Box/TwoColumnBox/index.css

@@ -0,0 +1,77 @@
+.two-column-layout-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  color: var(--content-two-column-box-color);
+}
+.two-column-layout-container .two-column-aside {
+  transition: width 0.1s ease-in;
+  width: var(--sider-size);
+  height: 100%;
+  z-index: 9;
+  position: absolute;
+  left: 0;
+  top: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+.two-column-layout-container .two-column-aside .two-colum-left-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.two-column-layout-container .two-column-aside .two-colum-left-content {
+  width: var(--sider-size);
+  height: 100%;
+  background-color: var(--content-two-column-box-left-bg);
+}
+.two-column-layout-container .two-column-aside .left-aside-slider-btn {
+  position: absolute;
+  width: 16px;
+  height: 20px;
+  right: -16px;
+  top: 50%;
+  margin-top: -8px;
+  font-size: var(--fs-large);
+  cursor: pointer;
+  background-color: red;
+}
+.two-column-layout-container .two-column-aside .left-aside-slider-btn .anticon {
+  background: var(--content-two-column-box-left-bg);
+  vertical-align: unset;
+  position: relative;
+  z-index: 3;
+}
+.two-column-layout-container .two-column-aside .left-aside-slider-btn:before,
+.two-column-layout-container .two-column-aside .left-aside-slider-btn:after {
+  content: '';
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  background-color: var(--content-two-column-box-left-bg);
+  position: absolute;
+}
+.two-column-layout-container .two-column-aside .left-aside-slider-btn:before {
+  left: 0;
+  bottom: -10px;
+  transform: skewY(-20deg);
+}
+.two-column-layout-container .two-column-aside .left-aside-slider-btn:after {
+  right: 0;
+  top: -10px;
+  transform: skewY(20deg);
+}
+.two-column-layout-container .two-column-aside.hide-left-aside {
+  width: 0;
+}
+.two-column-layout-container .two-column-aside.hide-left-aside + .two-column-content {
+  padding-left: 0;
+}
+.two-column-layout-container .two-column-content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding-left: var(--sider-size);
+  background-color: var(--content-two-column-box-right-bg);
+  transition: padding-left 0.3s ease-in-out;
+  box-sizing: border-box;
+}

package/es/Box/TwoColumnBox/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.less';
+export interface TwoColumnBoxProps {
+    className?: string;
+    collapsible?: boolean;
+    leftContent?: React.ReactNode | JSX.Element;
+    children?: React.ReactNode;
+}
+declare function TwoColumnBox({ className, collapsible, leftContent, children }: TwoColumnBoxProps): JSX.Element;
+export default TwoColumnBox;

package/es/Box/TwoColumnBox/index.js

@@ -0,0 +1,50 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useState } from 'react';
+import IconFont from '../../IconFont';
+import "./index.css";
+
+function TwoColumnBox(_ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$collapsible = _ref.collapsible,
+      collapsible = _ref$collapsible === void 0 ? true : _ref$collapsible,
+      leftContent = _ref.leftContent,
+      children = _ref.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      collapsed = _useState2[0],
+      setCollapsed = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "two-column-layout-container ".concat(className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "two-column-aside ".concat(collapsed ? 'hide-left-aside' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "two-colum-left-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "two-colum-left-content"
+  }, leftContent, collapsible && /*#__PURE__*/React.createElement("span", {
+    onClick: function onClick() {
+      return setCollapsed(!collapsed);
+    },
+    className: "left-aside-slider-btn"
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: collapsed ? 'icon-S_Arrow_SmallRight' : 'icon-S_Arrow_SmallLeft'
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: "two-column-content"
+  }, children));
+}
+
+export default TwoColumnBox;

package/es/Box/deps/content-grid.d.ts

@@ -0,0 +1,9 @@
+declare const grid: {
+    xxl: number;
+    xl: number;
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+};
+export default grid;

package/es/Box/deps/content-grid.js

@@ -0,0 +1,9 @@
+var grid = {
+  xxl: 22,
+  xl: 22,
+  lg: 23,
+  md: 23,
+  sm: 23,
+  xs: 23
+};
+export default grid;

package/es/Box/deps/grid-factory.d.ts

@@ -0,0 +1,10 @@
+export declare function getGridClassName(grid: any): any[];
+export declare function computedGrid(grid: any): {
+    xxl: number;
+    xl: number;
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+};
+export declare function computedCuurentGrid(): "xxl" | "xl" | "lg" | "md" | "sm" | "xs";