@twreporter/react-components 8.17.0-rc.10 → 8.17.0-rc.11

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.17.0-rc.11](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.10...@twreporter/react-components@8.17.0-rc.11) (2023-05-05)
+
+
+### Features
+
+* add empty state component ([ca74cbb](https://github.com/twreporter/twreporter-npm-packages/commit/ca74cbbc08dd5c7ea0ee651df5a932d0fe61d57e))
+* add empty state enums ([0fb55fd](https://github.com/twreporter/twreporter-npm-packages/commit/0fb55fd59cfbd2fdde6e13eefaf1781c5f726221))
+* fix comment ([f97b2bb](https://github.com/twreporter/twreporter-npm-packages/commit/f97b2bb22f1542b31ba474517f25122bacb67708))
+* fix comment ([028e8b9](https://github.com/twreporter/twreporter-npm-packages/commit/028e8b9798e2164930e584d050964f98ceb70aee))
+* fix comment ([9e20be1](https://github.com/twreporter/twreporter-npm-packages/commit/9e20be174f3b939437d3ddfb400520be9bb6449e))
+* set props and storybook ([9aabed0](https://github.com/twreporter/twreporter-npm-packages/commit/9aabed0640f1d509859aaf659705b1f93c766f04))
+* set style to bookmark ([91c76fb](https://github.com/twreporter/twreporter-npm-packages/commit/91c76fb73f9656dee57bb8ba823d7e92709e4a14))
+
+
+
+
+
 # [8.17.0-rc.10](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.9...@twreporter/react-components@8.17.0-rc.10) (2023-05-03)
 
 

package/lib/bookmark-list/bookmarks.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _bookmark = _interopRequireDefault(require("./bookmark"));
 
-var _emptyGuide = _interopRequireDefault(require("./empty-guide"));
+var _emptyState = _interopRequireDefault(require("../empty-state"));
 
 var _headline = require("../text/headline");
 
@@ -21,6 +21,8 @@ var _paragraph = require("../text/paragraph");
 
 var _divider = _interopRequireDefault(require("../divider"));
 
+var _icon = require("../icon");
+
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
 var _propTypes2 = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
@@ -29,6 +31,8 @@ var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/consta
 
 var _color = require("@twreporter/core/lib/constants/color");
 
+var _requestOrigins = _interopRequireDefault(require("@twreporter/core/lib/constants/request-origins"));
+
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
@@ -100,7 +104,19 @@ function Bookmarks(_ref) {
     text: total,
     weight: "bold"
   }));
-  var contentJSX = total === 0 ? /*#__PURE__*/_react["default"].createElement(_emptyGuide["default"], {
+  var contentJSX = total === 0 ? /*#__PURE__*/_react["default"].createElement(_emptyState["default"], {
+    style: _emptyState["default"].Style.DEFAULT,
+    title: "\u4F60\u9084\u6C92\u6709\u5132\u5B58\u4EFB\u4F55\u6587\u7AE0\uFF01",
+    guide: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+      text: "\u9EDE\u64CA"
+    }), /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
+      type: _icon.Bookmark.Type.ADD,
+      releaseBranch: releaseBranch
+    }), /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+      text: "\u5C07\u559C\u611B\u7684\u6587\u7AE0\u52A0\u5165\u6211\u7684\u66F8\u7C64"
+    })),
+    buttonText: "\u958B\u59CB\u63A2\u7D22",
+    buttonUrl: _requestOrigins["default"].forClientSideRendering[releaseBranch].main,
     releaseBranch: releaseBranch
   }) : /*#__PURE__*/_react["default"].createElement(BookmarksContainer, null, _.map(bookmarks, buildBookmark));
   return /*#__PURE__*/_react["default"].createElement(PageContainer, null, /*#__PURE__*/_react["default"].createElement(Column, null, /*#__PURE__*/_react["default"].createElement(StatusBar, null, /*#__PURE__*/_react["default"].createElement(TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_headline.H1, {

package/lib/empty-state/enums/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Style = void 0;
+var Style = Object.freeze({
+  DEFAULT: 'default',
+  PENCIL: 'pencil',
+  UNDER_CONSTRUCTION: 'under_construction'
+});
+exports.Style = Style;

package/lib/empty-state/index.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
+
+var _paragraph = require("../text/paragraph");
+
+var _button = require("../button");
+
+var _enums = require("./enums");
+
+var _sharedEnum = require("../shared-enum");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// @twreporter
+// components
+var OuterContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "empty-state__OuterContainer",
+  componentId: "sc-4ba2ko-0"
+})(["width:100%;margin-top:8px;display:flex;flex-direction:column;align-items:center;"]);
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "empty-state__Container",
+  componentId: "sc-4ba2ko-1"
+})(["display:flex;flex-direction:column;align-items:center;max-width:280px;"]);
+
+var TextContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "empty-state__TextContainer",
+  componentId: "sc-4ba2ko-2"
+})(["margin:48px 0 24px 0;display:flex;flex-direction:column;align-items:center;color:", ";"], _color.colorGrayscale.gray800);
+
+var ButtonContainer = /*#__PURE__*/_styledComponents["default"].a.withConfig({
+  displayName: "empty-state__ButtonContainer",
+  componentId: "sc-4ba2ko-3"
+})(["text-decoration:none;"]);
+
+var GuideContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "empty-state__GuideContainer",
+  componentId: "sc-4ba2ko-4"
+})(["display:flex;align-items:baseline;color:", ";svg{background-color:", ";width:18px;height:18px;margin:0 4px;transform:translateY(3px);}"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray600);
+
+var getImageUrl = function getImageUrl(style, releaseBranch) {
+  switch (style) {
+    case _enums.Style.DEFAULT:
+    default:
+      return "https://www.twreporter.org/assets/empty-state/".concat(releaseBranch, "/seek.png");
+
+    case _enums.Style.PENCIL:
+      return "https://www.twreporter.org/assets/empty-state/".concat(releaseBranch, "/pencil.png");
+
+    case _enums.Style.UNDER_CONSTRUCTION:
+      return "https://www.twreporter.org/assets/empty-state/".concat(releaseBranch, "/under_construction.png");
+  }
+};
+
+var EmptyState = function EmptyState(_ref) {
+  var _ref$releaseBranch = _ref.releaseBranch,
+      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch.BRANCH.master : _ref$releaseBranch,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? _enums.Style.DEFAULT : _ref$style,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$showGuide = _ref.showGuide,
+      showGuide = _ref$showGuide === void 0 ? true : _ref$showGuide,
+      _ref$guide = _ref.guide,
+      guide = _ref$guide === void 0 ? null : _ref$guide,
+      _ref$showButton = _ref.showButton,
+      showButton = _ref$showButton === void 0 ? true : _ref$showButton,
+      _ref$buttonText = _ref.buttonText,
+      buttonText = _ref$buttonText === void 0 ? '' : _ref$buttonText,
+      _ref$buttonUrl = _ref.buttonUrl,
+      buttonUrl = _ref$buttonUrl === void 0 ? '/' : _ref$buttonUrl;
+  return /*#__PURE__*/_react["default"].createElement(OuterContainer, null, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement("img", {
+    src: getImageUrl(style, releaseBranch),
+    width: "170"
+  }), /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
+    text: title,
+    weight: _paragraph.P1.Weight.BOLD
+  }), showGuide && /*#__PURE__*/_react["default"].createElement(GuideContainer, null, typeof guide === 'string' ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
+    text: guide
+  }) : guide)), showButton && /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+    href: buttonUrl
+  }, /*#__PURE__*/_react["default"].createElement(_button.PillButton, {
+    text: buttonText,
+    size: _sharedEnum.Size.L
+  }))));
+};
+
+EmptyState.propTypes = {
+  releaseBranch: _releaseBranch.BRANCH_PROP_TYPES,
+  style: _propTypes["default"].oneOf(Object.values(_enums.Style)),
+  title: _propTypes["default"].string,
+  showGuide: _propTypes["default"].bool,
+  guide: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
+  showButton: _propTypes["default"].bool,
+  buttonText: _propTypes["default"].string,
+  buttonUrl: _propTypes["default"].string
+};
+EmptyState.Style = _enums.Style;
+var _default = EmptyState;
+exports["default"] = _default;

package/lib/empty-state/stories/empty-guide.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emptyState = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("../index"));
+
+var _enums = require("../enums");
+
+var _getEnumArg = require("../../storybook/utils/get-enum-arg");
+
+var _constants = require("../../storybook/constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Empty State',
+  component: _index["default"],
+  argTypes: {
+    releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE,
+    style: (0, _getEnumArg.getRadioArg)(_enums.Style, _enums.Style.DEFAULT)
+  }
+};
+exports["default"] = _default;
+
+var emptyState = function emptyState(args) {
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], args);
+};
+
+exports.emptyState = emptyState;
+emptyState.args = {
+  title: '文字',
+  showGuide: true,
+  guide: '文字文字',
+  showButton: true,
+  buttonText: '按鈕',
+  buttonUrl: '/'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.17.0-rc.10",
+  "version": "8.17.0-rc.11",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -45,5 +45,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "5683a389b16e6ed857cd3faad348951f556f3746"
+  "gitHead": "1abfcdef4a25f767e72208b5065d59306b05f237"
 }

package/lib/bookmark-list/empty-guide.js

@@ -1,81 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _color = require("@twreporter/core/lib/constants/color");
-
-var _propTypes = _interopRequireDefault(require("@twreporter/core/lib/constants/prop-types"));
-
-var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
-
-var _requestOrigins = _interopRequireDefault(require("@twreporter/core/lib/constants/request-origins"));
-
-var _icon = require("../icon");
-
-var _paragraph = require("../text/paragraph");
-
-var _button = require("../button");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-// @twreporter
-// components
-var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "empty-guide__Container",
-  componentId: "sc-1y7u9aq-0"
-})(["width:100%;display:flex;flex-direction:column;align-items:center;margin-top:8px;"]);
-
-var TextContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "empty-guide__TextContainer",
-  componentId: "sc-1y7u9aq-1"
-})(["margin:48px 0 24px 0;display:flex;flex-direction:column;align-items:center;color:", ";"], _color.colorGrayscale.gray800);
-
-var ButtonContainer = /*#__PURE__*/_styledComponents["default"].a.withConfig({
-  displayName: "empty-guide__ButtonContainer",
-  componentId: "sc-1y7u9aq-2"
-})(["text-decoration:none;"]);
-
-var GuideContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "empty-guide__GuideContainer",
-  componentId: "sc-1y7u9aq-3"
-})(["display:flex;align-items:baseline;color:", ";svg{background-color:", ";width:18px;height:18px;margin:0 4px;transform:translateY(3px);}"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray600);
-
-var EmptyGuide = function EmptyGuide(_ref) {
-  var _ref$releaseBranch = _ref.releaseBranch,
-      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch["default"].master : _ref$releaseBranch;
-  var homepageUrl = _requestOrigins["default"].forClientSideRendering[releaseBranch].main;
-  var seekImageUrl = "https://www.twreporter.org/assets/bookmark/".concat(releaseBranch, "/seek.png");
-  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement("img", {
-    alt: "Seek Bookmark",
-    src: seekImageUrl,
-    width: "170"
-  }), /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
-    text: "\u4F60\u9084\u6C92\u6709\u5132\u5B58\u4EFB\u4F55\u6587\u7AE0\uFF01",
-    weight: "bold"
-  }), /*#__PURE__*/_react["default"].createElement(GuideContainer, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
-    text: "\u9EDE\u64CA"
-  }), /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
-    type: "add",
-    releaseBranch: releaseBranch
-  }), /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
-    text: "\u5C07\u559C\u611B\u7684\u6587\u7AE0\u52A0\u5165\u6211\u7684\u66F8\u7C64"
-  }))), /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
-    href: homepageUrl
-  }, /*#__PURE__*/_react["default"].createElement(_button.PillButton, {
-    text: "\u958B\u59CB\u63A2\u7D22",
-    size: "L"
-  })));
-};
-
-EmptyGuide.propTypes = {
-  releaseBranch: _propTypes["default"].releaseBranch
-};
-var _default = EmptyGuide;
-exports["default"] = _default;

package/lib/bookmark-list/stories/empty-guide.stories.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.emptyGuide = exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _emptyGuide = _interopRequireDefault(require("../empty-guide"));
-
-var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var master = _releaseBranch["default"].master,
-    staging = _releaseBranch["default"].staging,
-    preview = _releaseBranch["default"].preview,
-    release = _releaseBranch["default"].release;
-var _default = {
-  title: 'Bookmark/Empty Guide',
-  component: _emptyGuide["default"],
-  argTypes: {
-    releaseBranch: {
-      defaultValue: master,
-      options: [master, staging, preview, release],
-      control: {
-        type: 'radio'
-      }
-    }
-  }
-};
-exports["default"] = _default;
-
-var emptyGuide = function emptyGuide(args) {
-  return /*#__PURE__*/_react["default"].createElement(_emptyGuide["default"], args);
-};
-
-exports.emptyGuide = emptyGuide;