@arcblock/ux 1.16.8 → 1.16.9

package/lib/Result/common.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComingSoon = exports.Maintenance = exports.Error = exports.InternalServerError = exports.Forbidden = exports.PageNotFound = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _useTheme = _interopRequireDefault(require("@material-ui/core/styles/useTheme"));
+
+var _result = _interopRequireDefault(require("./result"));
+
+var _translations = _interopRequireDefault(require("./translations"));
+
+var _Logo = _interopRequireDefault(require("../Logo"));
+
+var _context = require("../Locale/context");
+
+const _excluded = ["locale"],
+      _excluded2 = ["locale"],
+      _excluded3 = ["locale"],
+      _excluded4 = ["locale"],
+      _excluded5 = ["locale"],
+      _excluded6 = ["locale"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+// 优先使用显式指定的 locale, 再尝试使用 context 中的 locale, 最后使用默认 'en'
+const useLocale = locale => {
+  locale = ['zh', 'en'].includes(locale) ? locale : '';
+  const {
+    locale: localeFromContext
+  } = (0, _context.useLocaleContext)() || {
+    locale: 'en'
+  };
+  return locale || localeFromContext;
+}; // 404
+
+
+const PageNotFound = _ref => {
+  let {
+    locale
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  locale = useLocale(locale);
+  return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
+    icon: /*#__PURE__*/_react.default.createElement(StyledLogo, null),
+    title: _translations.default[locale][404].title,
+    description: _translations.default[locale][404].description
+  }, rest));
+};
+
+exports.PageNotFound = PageNotFound;
+PageNotFound.status = '404'; // 403
+
+const Forbidden = _ref2 => {
+  let {
+    locale
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+
+  locale = useLocale(locale);
+  return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
+    icon: /*#__PURE__*/_react.default.createElement(StyledLogo, null),
+    title: _translations.default[locale][403].title,
+    description: _translations.default[locale][403].description
+  }, rest));
+};
+
+exports.Forbidden = Forbidden;
+Forbidden.status = '403'; // 500
+
+const InternalServerError = _ref3 => {
+  let {
+    locale
+  } = _ref3,
+      rest = _objectWithoutProperties(_ref3, _excluded3);
+
+  locale = useLocale(locale);
+  return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
+    icon: /*#__PURE__*/_react.default.createElement(StyledLogo, null),
+    title: _translations.default[locale][500].title,
+    description: _translations.default[locale][500].description
+  }, rest));
+};
+
+exports.InternalServerError = InternalServerError;
+InternalServerError.status = '500'; // 通用错误
+
+const Error = _ref4 => {
+  let {
+    locale
+  } = _ref4,
+      rest = _objectWithoutProperties(_ref4, _excluded4);
+
+  locale = useLocale(locale);
+  return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
+    icon: /*#__PURE__*/_react.default.createElement(StyledLogo, null),
+    title: _translations.default[locale].error.title,
+    description: _translations.default[locale].error.description
+  }, rest));
+};
+
+exports.Error = Error;
+Error.status = 'error'; // under maintenance
+
+const Maintenance = _ref5 => {
+  let {
+    locale
+  } = _ref5,
+      rest = _objectWithoutProperties(_ref5, _excluded5);
+
+  locale = useLocale(locale);
+  return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
+    icon: /*#__PURE__*/_react.default.createElement(StyledLogo, null),
+    title: _translations.default[locale].maintenance.title,
+    description: _translations.default[locale].maintenance.description
+  }, rest));
+};
+
+exports.Maintenance = Maintenance;
+Maintenance.status = 'maintenance'; // coming soon
+
+const ComingSoon = _ref6 => {
+  let {
+    locale
+  } = _ref6,
+      rest = _objectWithoutProperties(_ref6, _excluded6);
+
+  locale = useLocale(locale);
+  return /*#__PURE__*/_react.default.createElement(_result.default, Object.assign({
+    icon: /*#__PURE__*/_react.default.createElement(StyledLogo, null),
+    title: _translations.default[locale]['coming-soon'].title,
+    description: _translations.default[locale]['coming-soon'].description
+  }, rest));
+};
+
+exports.ComingSoon = ComingSoon;
+ComingSoon.status = 'coming-soon'; // arcblock logo
+
+const StyledLogo = props => {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement(StyledLogoRoot, Object.assign({
+    showText: false,
+    theme: theme
+  }, props));
+};
+
+const StyledLogoRoot = (0, _styledComponents.default)(_Logo.default).withConfig({
+  displayName: "common__StyledLogoRoot",
+  componentId: "sc-1wnp76o-0"
+})(["*{stroke:", ";}"], _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.palette.grey[500];
+});

package/lib/Result/html/index.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = render;
+
+var _template = _interopRequireDefault(require("./template"));
+
+var _translations = _interopRequireDefault(require("../translations"));
+
+const _excluded = ["locale"],
+      _excluded2 = ["locale"],
+      _excluded3 = ["locale"],
+      _excluded4 = ["locale"],
+      _excluded5 = ["locale"],
+      _excluded6 = ["locale"],
+      _excluded7 = ["status", "locale"];
+
+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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+const renderers = {
+  404: _ref => {
+    let {
+      locale = 'en'
+    } = _ref,
+        rest = _objectWithoutProperties(_ref, _excluded);
+
+    return _template.default.render(_objectSpread({
+      title: _translations.default[locale][404].title,
+      description: _translations.default[locale][404].description
+    }, rest));
+  },
+  403: _ref2 => {
+    let {
+      locale = 'en'
+    } = _ref2,
+        rest = _objectWithoutProperties(_ref2, _excluded2);
+
+    return _template.default.render(_objectSpread({
+      title: _translations.default[locale][403].title,
+      description: _translations.default[locale][403].description
+    }, rest));
+  },
+  500: _ref3 => {
+    let {
+      locale = 'en'
+    } = _ref3,
+        rest = _objectWithoutProperties(_ref3, _excluded3);
+
+    return _template.default.render(_objectSpread({
+      title: _translations.default[locale][500].title,
+      description: _translations.default[locale][500].description
+    }, rest));
+  },
+  error: _ref4 => {
+    let {
+      locale = 'en'
+    } = _ref4,
+        rest = _objectWithoutProperties(_ref4, _excluded4);
+
+    return _template.default.render(_objectSpread({
+      title: _translations.default[locale].error.title,
+      description: _translations.default[locale].error.description
+    }, rest));
+  },
+  maintenance: _ref5 => {
+    let {
+      locale = 'en'
+    } = _ref5,
+        rest = _objectWithoutProperties(_ref5, _excluded5);
+
+    return _template.default.render(_objectSpread({
+      title: _translations.default[locale].maintenance.title,
+      description: _translations.default[locale].maintenance.description
+    }, rest));
+  },
+  'coming-soon': _ref6 => {
+    let {
+      locale = 'en'
+    } = _ref6,
+        rest = _objectWithoutProperties(_ref6, _excluded6);
+
+    return _template.default.render(_objectSpread({
+      title: _translations.default[locale]['coming-soon'].title,
+      description: _translations.default[locale]['coming-soon'].description
+    }, rest));
+  }
+};
+
+function render() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  const {
+    status,
+    locale = 'en'
+  } = options,
+        rest = _objectWithoutProperties(options, _excluded7);
+
+  if (status) {
+    const renderer = renderers[status];
+
+    if (!renderer) {
+      throw new Error("Please provide a valid status. Valid values are: ".concat(Object.keys(renderers).join(', ')));
+    }
+
+    return renderer(_objectSpread({
+      locale
+    }, rest));
+  }
+
+  return _template.default.render(_objectSpread({}, rest));
+}

package/lib/Result/html/template.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const arcblockLogoSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="52" viewBox="0 0 45 52"><g fill="none" fill-rule="evenodd" stroke="#000"><path d="M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"></path><path d="M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"></path></g></svg>';
+
+function render(_ref) {
+  let {
+    pageTitle,
+    title,
+    icon,
+    description,
+    extra
+  } = _ref;
+  // eslint-disable-next-line no-param-reassign
+  pageTitle = pageTitle || "".concat(title, " - Blocklet Server");
+  return "\n    <!DOCTYPE html>\n      <html lang=\"en\">\n      <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>".concat(pageTitle, "</title>\n        <style>\n          html {\n            box-sizing: border-box;\n            font-size: 16px;\n          }\n          *, *::before, *::after {\n            box-sizing: inherit;\n          }\n          html, body {\n            height: 100%;\n          }\n          body {\n            margin: 0;\n          }\n          .container {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            height: 100%;\n            padding: 16px;\n            background-color: #f7f8fb;\n          }\n          .svg-wrapper *{\n            stroke: #9e9e9e;\n          }\n          .title {\n            margin-top: 24px;\n            font-size: 22px;\n            font-weight: 400;\n            color: #47494E;\n            text-align: center;\n          }\n          .description {\n            margin-top: 8px;\n            font-size: 14px;\n            color: #7F828B;\n            text-align: center;\n          }\n          .extra {\n            margin-top: 24px;\n          }\n        </style>\n      </head>\n      <body>\n        <div class=\"container\">\n          ").concat(icon ? "<img src=\"".concat(icon, "\" />") : "<span class=\"svg-wrapper\">".concat(arcblockLogoSvg, "</span>"), "\n          <div class=\"title\">\n            ").concat(title, "\n          </div>\n          ").concat(description ? "<div class=\"description\">".concat(description, "</div>") : '', "\n          ").concat(extra ? "<div class=\"extra\">".concat(extra, "</div>") : '', "\n        </div>\n      </body>\n    </html>");
+}
+
+var _default = {
+  render
+};
+exports.default = _default;

package/lib/Result/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ResultWrapper;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _result = _interopRequireDefault(require("./result"));
+
+var common = _interopRequireWildcard(require("./common"));
+
+const _excluded = ["status"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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; }
+
+const componentsKeyByStatus = Object.keys(common).reduce((acc, cur) => _objectSpread(_objectSpread({}, acc), {}, {
+  [common[cur].status || cur]: common[cur]
+}), {});
+
+function ResultWrapper(_ref) {
+  let {
+    status
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  if (status) {
+    if (componentsKeyByStatus[status]) {
+      const Component = componentsKeyByStatus[status];
+      return /*#__PURE__*/_react.default.createElement(Component, rest);
+    }
+
+    throw new Error("Please provide a valid status for Result.status. Valid values are: ".concat(Object.keys(componentsKeyByStatus).join(', ')));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_result.default, rest);
+}
+
+ResultWrapper.propTypes = {
+  status: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+ResultWrapper.defaultProps = {
+  status: ''
+};

package/lib/Result/result.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
+
+const _excluded = ["icon", "title", "description", "extra"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function Result(_ref) {
+  let {
+    icon,
+    title,
+    description,
+    extra
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(Root, rest, icon, typeof title === 'string' ? /*#__PURE__*/_react.default.createElement(_Box.default, {
+    mt: 3,
+    fontSize: 22,
+    fontWeight: 400,
+    color: "#47494E",
+    textAlign: "center"
+  }, title) : title, typeof description === 'string' ? /*#__PURE__*/_react.default.createElement(_Box.default, {
+    mt: 1,
+    fontSize: 14,
+    color: "#7F828B",
+    textAlign: "center"
+  }, description) : description, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    mt: 3
+  }, extra));
+}
+
+Result.propTypes = {
+  icon: _propTypes.default.any,
+  title: _propTypes.default.any.isRequired,
+  description: _propTypes.default.any,
+  actions: _propTypes.default.any,
+  extra: _propTypes.default.any
+};
+Result.defaultProps = {
+  icon: '',
+  description: '',
+  actions: null,
+  extra: null
+};
+
+const Root = _styledComponents.default.div.withConfig({
+  displayName: "result__Root",
+  componentId: "sc-1ttf6c9-0"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:16px;background-color:#f7f8fb;"]);
+
+var _default = Result;
+exports.default = _default;

package/lib/Result/translations.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    404: {
+      title: '404 - Page Not Found',
+      description: 'Sorry about that, the page you are looking for does not exist or has been moved.'
+    },
+    403: {
+      title: '403 – Forbidden',
+      description: 'Sorry, you are not authorized to access this page.'
+    },
+    500: {
+      title: '500 - Internal Server Error',
+      description: 'An internal server error has occured. Please try again later.'
+    },
+    error: {
+      title: 'Application Error',
+      description: 'Something went wrong. Please try again later.'
+    },
+    maintenance: {
+      title: 'Offline for maintenance',
+      description: 'This app is undergoing maintenance right now. Please check back later.'
+    },
+    'coming-soon': {
+      title: 'Coming Soon',
+      description: "Our website is under construction. We'll be here soon with our new website."
+    }
+  },
+  zh: {
+    404: {
+      title: '404 - 页面未找到',
+      description: '很抱歉，您正在寻找的页面不存在或已被移动。'
+    },
+    403: {
+      title: '403 – 禁止访问',
+      description: '很抱歉，您没有权限访问此页面。'
+    },
+    500: {
+      title: '500 - 内部服务器错误',
+      description: '发生了一个内部服务器错误。请稍后再试。'
+    },
+    error: {
+      title: 'Application Error',
+      description: '出错了, 请稍后再试。'
+    },
+    maintenance: {
+      title: '维护中',
+      description: '应用程序正在进行维护。请稍后再查看。'
+    },
+    'coming-soon': {
+      title: '即将上线',
+      description: '我们的网站正在建设中。我们很快就会在这里推出我们的新网站。'
+    }
+  }
+};
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.16.8",
+  "version": "1.16.9",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "743834431fb6773c17fe7e955afc2d397eea8d3d",
+  "gitHead": "4dc8cf3eb4ca262e22b21cba7feaba2cab88f14d",
   "dependencies": {
-    "@arcblock/icons": "^1.16.8",
-    "@arcblock/react-hooks": "^1.16.8",
+    "@arcblock/icons": "^1.16.9",
+    "@arcblock/react-hooks": "^1.16.9",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "4.11.2",

package/src/Result/common.js

@@ -0,0 +1,111 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-param-reassign */
+import React from 'react';
+import styled from 'styled-components';
+import useTheme from '@material-ui/core/styles/useTheme';
+import Result from './result';
+import translations from './translations';
+import Logo from '../Logo';
+import { useLocaleContext } from '../Locale/context';
+
+// 优先使用显式指定的 locale, 再尝试使用 context 中的 locale, 最后使用默认 'en'
+const useLocale = locale => {
+  locale = ['zh', 'en'].includes(locale) ? locale : '';
+  const { locale: localeFromContext } = useLocaleContext() || { locale: 'en' };
+  return locale || localeFromContext;
+};
+
+// 404
+export const PageNotFound = ({ locale, ...rest }) => {
+  locale = useLocale(locale);
+  return (
+    <Result
+      icon={<StyledLogo />}
+      title={translations[locale][404].title}
+      description={translations[locale][404].description}
+      {...rest}
+    />
+  );
+};
+PageNotFound.status = '404';
+
+// 403
+export const Forbidden = ({ locale, ...rest }) => {
+  locale = useLocale(locale);
+  return (
+    <Result
+      icon={<StyledLogo />}
+      title={translations[locale][403].title}
+      description={translations[locale][403].description}
+      {...rest}
+    />
+  );
+};
+Forbidden.status = '403';
+
+// 500
+export const InternalServerError = ({ locale, ...rest }) => {
+  locale = useLocale(locale);
+  return (
+    <Result
+      icon={<StyledLogo />}
+      title={translations[locale][500].title}
+      description={translations[locale][500].description}
+      {...rest}
+    />
+  );
+};
+InternalServerError.status = '500';
+
+// 通用错误
+export const Error = ({ locale, ...rest }) => {
+  locale = useLocale(locale);
+  return (
+    <Result
+      icon={<StyledLogo />}
+      title={translations[locale].error.title}
+      description={translations[locale].error.description}
+      {...rest}
+    />
+  );
+};
+Error.status = 'error';
+
+// under maintenance
+export const Maintenance = ({ locale, ...rest }) => {
+  locale = useLocale(locale);
+  return (
+    <Result
+      icon={<StyledLogo />}
+      title={translations[locale].maintenance.title}
+      description={translations[locale].maintenance.description}
+      {...rest}
+    />
+  );
+};
+Maintenance.status = 'maintenance';
+
+// coming soon
+export const ComingSoon = ({ locale, ...rest }) => {
+  locale = useLocale(locale);
+  return (
+    <Result
+      icon={<StyledLogo />}
+      title={translations[locale]['coming-soon'].title}
+      description={translations[locale]['coming-soon'].description}
+      {...rest}
+    />
+  );
+};
+ComingSoon.status = 'coming-soon';
+
+// arcblock logo
+const StyledLogo = props => {
+  const theme = useTheme();
+  return <StyledLogoRoot showText={false} theme={theme} {...props} />;
+};
+const StyledLogoRoot = styled(Logo)`
+  * {
+    stroke: ${({ theme }) => theme.palette.grey[500]};
+  }
+`;

package/src/Result/html/index.js

@@ -0,0 +1,61 @@
+import template from './template';
+import translations from '../translations';
+
+const renderers = {
+  404: ({ locale = 'en', ...rest }) => {
+    return template.render({
+      title: translations[locale][404].title,
+      description: translations[locale][404].description,
+      ...rest,
+    });
+  },
+  403: ({ locale = 'en', ...rest }) => {
+    return template.render({
+      title: translations[locale][403].title,
+      description: translations[locale][403].description,
+      ...rest,
+    });
+  },
+  500: ({ locale = 'en', ...rest }) => {
+    return template.render({
+      title: translations[locale][500].title,
+      description: translations[locale][500].description,
+      ...rest,
+    });
+  },
+  error: ({ locale = 'en', ...rest }) => {
+    return template.render({
+      title: translations[locale].error.title,
+      description: translations[locale].error.description,
+      ...rest,
+    });
+  },
+  maintenance: ({ locale = 'en', ...rest }) => {
+    return template.render({
+      title: translations[locale].maintenance.title,
+      description: translations[locale].maintenance.description,
+      ...rest,
+    });
+  },
+  'coming-soon': ({ locale = 'en', ...rest }) => {
+    return template.render({
+      title: translations[locale]['coming-soon'].title,
+      description: translations[locale]['coming-soon'].description,
+      ...rest,
+    });
+  },
+};
+
+export default function render(options = {}) {
+  const { status, locale = 'en', ...rest } = options;
+  if (status) {
+    const renderer = renderers[status];
+    if (!renderer) {
+      throw new Error(
+        `Please provide a valid status. Valid values are: ${Object.keys(renderers).join(', ')}`
+      );
+    }
+    return renderer({ locale, ...rest });
+  }
+  return template.render({ ...rest });
+}

package/src/Result/html/template.js

@@ -0,0 +1,71 @@
+const arcblockLogoSvg =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="52" viewBox="0 0 45 52"><g fill="none" fill-rule="evenodd" stroke="#000"><path d="M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"></path><path d="M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"></path></g></svg>';
+
+function render({ pageTitle, title, icon, description, extra }) {
+  // eslint-disable-next-line no-param-reassign
+  pageTitle = pageTitle || `${title} - Blocklet Server`;
+  return `
+    <!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>${pageTitle}</title>
+        <style>
+          html {
+            box-sizing: border-box;
+            font-size: 16px;
+          }
+          *, *::before, *::after {
+            box-sizing: inherit;
+          }
+          html, body {
+            height: 100%;
+          }
+          body {
+            margin: 0;
+          }
+          .container {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+            padding: 16px;
+            background-color: #f7f8fb;
+          }
+          .svg-wrapper *{
+            stroke: #9e9e9e;
+          }
+          .title {
+            margin-top: 24px;
+            font-size: 22px;
+            font-weight: 400;
+            color: #47494E;
+            text-align: center;
+          }
+          .description {
+            margin-top: 8px;
+            font-size: 14px;
+            color: #7F828B;
+            text-align: center;
+          }
+          .extra {
+            margin-top: 24px;
+          }
+        </style>
+      </head>
+      <body>
+        <div class="container">
+          ${icon ? `<img src="${icon}" />` : `<span class="svg-wrapper">${arcblockLogoSvg}</span>`}
+          <div class="title">
+            ${title}
+          </div>
+          ${description ? `<div class="description">${description}</div>` : ''}
+          ${extra ? `<div class="extra">${extra}</div>` : ''}
+        </div>
+      </body>
+    </html>`;
+}
+
+export default { render };

package/src/Result/index.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Result from './result';
+import * as common from './common';
+
+const componentsKeyByStatus = Object.keys(common).reduce(
+  (acc, cur) => ({ ...acc, [common[cur].status || cur]: common[cur] }),
+  {}
+);
+
+export default function ResultWrapper({ status, ...rest }) {
+  if (status) {
+    if (componentsKeyByStatus[status]) {
+      const Component = componentsKeyByStatus[status];
+      return <Component {...rest} />;
+    }
+    throw new Error(
+      `Please provide a valid status for Result.status. Valid values are: ${Object.keys(
+        componentsKeyByStatus
+      ).join(', ')}`
+    );
+  }
+  return <Result {...rest} />;
+}
+
+ResultWrapper.propTypes = {
+  status: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+ResultWrapper.defaultProps = {
+  status: '',
+};

package/src/Result/result.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import Box from '@material-ui/core/Box';
+
+function Result({ icon, title, description, extra, ...rest }) {
+  return (
+    <Root {...rest}>
+      {icon}
+      {typeof title === 'string' ? (
+        <Box mt={3} fontSize={22} fontWeight={400} color="#47494E" textAlign="center">
+          {title}
+        </Box>
+      ) : (
+        title
+      )}
+
+      {typeof description === 'string' ? (
+        <Box mt={1} fontSize={14} color="#7F828B" textAlign="center">
+          {description}
+        </Box>
+      ) : (
+        description
+      )}
+
+      <Box mt={3}>{extra}</Box>
+    </Root>
+  );
+}
+
+Result.propTypes = {
+  icon: PropTypes.any,
+  title: PropTypes.any.isRequired,
+  description: PropTypes.any,
+  actions: PropTypes.any,
+  extra: PropTypes.any,
+};
+Result.defaultProps = {
+  icon: '',
+  description: '',
+  actions: null,
+  extra: null,
+};
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 16px;
+
+  background-color: #f7f8fb;
+`;
+
+export default Result;

package/src/Result/translations.js

@@ -0,0 +1,56 @@
+export default {
+  en: {
+    404: {
+      title: '404 - Page Not Found',
+      description:
+        'Sorry about that, the page you are looking for does not exist or has been moved.',
+    },
+    403: {
+      title: '403 – Forbidden',
+      description: 'Sorry, you are not authorized to access this page.',
+    },
+    500: {
+      title: '500 - Internal Server Error',
+      description: 'An internal server error has occured. Please try again later.',
+    },
+    error: {
+      title: 'Application Error',
+      description: 'Something went wrong. Please try again later.',
+    },
+    maintenance: {
+      title: 'Offline for maintenance',
+      description: 'This app is undergoing maintenance right now. Please check back later.',
+    },
+    'coming-soon': {
+      title: 'Coming Soon',
+      description: "Our website is under construction. We'll be here soon with our new website.",
+    },
+  },
+
+  zh: {
+    404: {
+      title: '404 - 页面未找到',
+      description: '很抱歉，您正在寻找的页面不存在或已被移动。',
+    },
+    403: {
+      title: '403 – 禁止访问',
+      description: '很抱歉，您没有权限访问此页面。',
+    },
+    500: {
+      title: '500 - 内部服务器错误',
+      description: '发生了一个内部服务器错误。请稍后再试。',
+    },
+    error: {
+      title: 'Application Error',
+      description: '出错了, 请稍后再试。',
+    },
+    maintenance: {
+      title: '维护中',
+      description: '应用程序正在进行维护。请稍后再查看。',
+    },
+    'coming-soon': {
+      title: '即将上线',
+      description: '我们的网站正在建设中。我们很快就会在这里推出我们的新网站。',
+    },
+  },
+};