@twreporter/react-components 8.12.0 → 8.13.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.13.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.12.1-rc.1...@twreporter/react-components@8.13.0-rc.0) (2022-09-05)
+
+
+### Bug Fixes
+
+* make `useSnackBar` headless ([ddaf3dd](https://github.com/twreporter/twreporter-npm-packages/commit/ddaf3ddbd44abba3684f9209fc1b9e8b4c678c15))
+
+
+### Features
+
+* add useSnackBar hook ([32696ab](https://github.com/twreporter/twreporter-npm-packages/commit/32696ab41d619d1f675931adaf4550e435be64f4))
+
+
+
+
+
+## [8.12.1-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.12.1-rc.0...@twreporter/react-components@8.12.1-rc.1) (2022-08-22)
+
+
+### Bug Fixes
+
+* fix title bar text color ([de712ab](https://github.com/twreporter/twreporter-npm-packages/commit/de712ab54ccd886458d94b9c3ed0a98a40b39e51))
+
+
+
+
+
+## [8.12.1-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.12.0...@twreporter/react-components@8.12.1-rc.0) (2022-08-17)
+
+**Note:** Version bump only for package @twreporter/react-components
+
+
+
+
+
 # [8.12.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.12.0-rc.1...@twreporter/react-components@8.12.0) (2022-08-11)
 
 **Note:** Version bump only for package @twreporter/react-components

package/lib/button/components/pillButton.js

@@ -17,9 +17,16 @@ var _theme = require("../utils/theme");
 
 var _size = require("../utils/size");
 
+var _excluded = ["text", "iconComponent", "size", "theme", "type", "disabled"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-// utils
+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 _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; }
+
 var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "pillButton__ButtonContainer",
   componentId: "xa7tsy-0"
@@ -58,7 +65,9 @@ var PillButton = function PillButton(_ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'primary' : _ref$type,
       _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   var themeFunc = type === 'primary' ? _theme.getFilledPillButtonTheme : _theme.getOutlinePillButtonTheme;
 
   var _themeFunc = themeFunc(theme, disabled),
@@ -78,7 +87,7 @@ var PillButton = function PillButton(_ref) {
     text: text,
     weight: "bold"
   });
-  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, _extends({
     type: type,
     padding: padding,
     color: color,
@@ -86,7 +95,7 @@ var PillButton = function PillButton(_ref) {
     iconSize: iconSize,
     hoverColor: hoverColor,
     hoverBgColor: hoverBgColor
-  }, textJSX, iconComponent);
+  }, props), textJSX, iconComponent);
 };
 
 PillButton.propTypes = {

package/lib/listing-page/components/list.js

@@ -153,7 +153,9 @@ var List = /*#__PURE__*/function (_PureComponent) {
         }));
       });
 
-      return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Header, null, catName || (tagName ? "#".concat(tagName) : '')), /*#__PURE__*/_react["default"].createElement(Items, {
+      var headerTitle = catName || (tagName ? "#".concat(tagName) : '');
+      var headerJSX = headerTitle ? /*#__PURE__*/_react["default"].createElement(Header, null, headerTitle) : null;
+      return /*#__PURE__*/_react["default"].createElement(Container, null, headerJSX, /*#__PURE__*/_react["default"].createElement(Items, {
         isFetching: isFetching,
         showSpinner: showSpinner
       }, listJSX));

package/lib/snack-bar/hooks/use-snack-bar.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = require("react");
+
+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; }
+
+var useSnackBar = function useSnackBar() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showSnackBar = _useState2[0],
+      setShowSnackBar = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      snackBarText = _useState4[0],
+      setSnackBarText = _useState4[1];
+
+  var toastr = function toastr(_ref) {
+    var _ref$text = _ref.text,
+        text = _ref$text === void 0 ? '' : _ref$text,
+        _ref$timeout = _ref.timeout,
+        timeout = _ref$timeout === void 0 ? 3000 : _ref$timeout;
+    setSnackBarText(text);
+    setShowSnackBar(true);
+    setTimeout(function () {
+      setShowSnackBar(false);
+    }, timeout);
+  };
+
+  return {
+    toastr: toastr,
+    showSnackBar: showSnackBar,
+    snackBarText: snackBarText
+  };
+};
+
+var _default = useSnackBar;
+exports["default"] = _default;

package/lib/snack-bar/index.js

@@ -9,13 +9,22 @@ Object.defineProperty(exports, "SnackBar", {
     return _snackBar["default"];
   }
 });
+Object.defineProperty(exports, "useSnackBar", {
+  enumerable: true,
+  get: function get() {
+    return _useSnackBar["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _snackBar = _interopRequireDefault(require("./components/snack-bar"));
 
+var _useSnackBar = _interopRequireDefault(require("./hooks/use-snack-bar"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
-  SnackBar: _snackBar["default"]
+  SnackBar: _snackBar["default"],
+  useSnackBar: _useSnackBar["default"]
 };
 exports["default"] = _default;

package/lib/snack-bar/stories/snackBar.stories.js

@@ -3,14 +3,30 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.snackBar = exports["default"] = void 0;
+exports.clickToShow = exports.snackBar = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _useSnackBar2 = _interopRequireDefault(require("../hooks/use-snack-bar"));
+
 var _snackBar = _interopRequireDefault(require("../components/snack-bar"));
 
+var _button = require("../../button");
+
+var _random = _interopRequireDefault(require("lodash/random"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// hooks
+// components
+// lodash
+var _ = {
+  random: _random["default"]
+};
 var _default = {
   title: 'Snack Bar',
   component: _snackBar["default"]
@@ -25,4 +41,63 @@ exports.snackBar = snackBar;
 snackBar.args = {
   text: '系統作業文字',
   theme: 'normal'
+};
+
+var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "snackBarstories__Container",
+  componentId: "sc-1vgclkn-0"
+})(["display:flex;flex-direction:column;align-items:center;width:fit-content;"]);
+
+var SnackBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "snackBarstories__SnackBarContainer",
+  componentId: "sc-1vgclkn-1"
+})(["margin-bottom:4px;transition:opacity 1s;opacity:", ";"], function (props) {
+  return props.showSnackBar ? 1 : 0;
+});
+
+var ClickToShowSnackBar = function ClickToShowSnackBar(_ref) {
+  var timeout = _ref.timeout;
+
+  var _useSnackBar = (0, _useSnackBar2["default"])(),
+      toastr = _useSnackBar.toastr,
+      showSnackBar = _useSnackBar.showSnackBar,
+      snackBarText = _useSnackBar.snackBarText;
+
+  var handleClick = function handleClick() {
+    var textPool = ['click!', 'hahaha', 'hello', 'world', 'yoyo'];
+
+    var text = textPool[_.random(0, 4)];
+
+    toastr({
+      text: text,
+      timeout: timeout
+    });
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(SnackBarContainer, {
+    showSnackBar: showSnackBar
+  }, /*#__PURE__*/_react["default"].createElement(_snackBar["default"], {
+    text: snackBarText
+  })), /*#__PURE__*/_react["default"].createElement(_button.PillButton, {
+    text: "click me",
+    onClick: handleClick
+  }));
+};
+
+ClickToShowSnackBar.propTypes = {
+  timeout: _propTypes["default"].number
+};
+
+var clickToShow = function clickToShow(props) {
+  return /*#__PURE__*/_react["default"].createElement(ClickToShowSnackBar, props);
+};
+
+exports.clickToShow = clickToShow;
+clickToShow.parameters = {
+  controls: {
+    exclude: ['text', 'theme']
+  }
+};
+clickToShow.args = {
+  timeout: 800
 };

package/lib/title-bar/components/bar.js

@@ -17,13 +17,16 @@ var _paragraph = require("../../text/paragraph");
 
 var _divider = _interopRequireDefault(require("../../divider"));
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 // component
+// @twreporter
 var BarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bar__BarContainer",
   componentId: "sc-18ncllq-0"
-})(["display:flex;width:100%;flex-direction:column;& > div{margin-bottom:16px;&:last-child{margin-bottom:0;}}"]);
+})(["display:flex;width:100%;flex-direction:column;color:", ";& > div{margin-bottom:16px;&:last-child{margin-bottom:0;}}"], _color.colorGrayscale.gray800);
 
 var TitleBar = function TitleBar(_ref) {
   var _ref$title = _ref.title,

package/lib/title-bar/components/tab.js

@@ -62,7 +62,7 @@ var tabPropType = _propTypes["default"].shape({
 var BarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "tab__BarContainer",
   componentId: "ywb8e-0"
-})(["display:flex;width:100%;flex-direction:column;& > div{margin-bottom:16px;&:last-child{margin-bottom:0;}}"]);
+})(["display:flex;width:100%;flex-direction:column;color:", ";& > div{margin-bottom:16px;&:last-child{margin-bottom:0;}}"], _color.colorGrayscale.gray800);
 
 var TabItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "tab__TabItemContainer",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.12.0",
+  "version": "8.13.0-rc.0",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -15,8 +15,8 @@
     "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
-    "@twreporter/core": "^1.5.0",
-    "@twreporter/redux": "^7.2.2",
+    "@twreporter/core": "^1.6.0-rc.0",
+    "@twreporter/redux": "^7.3.0-rc.0",
     "fontfaceobserver-es": "^3.3.3",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "9cca19bcfce6ed53c6eeb5582b917b2c74ad9908"
+  "gitHead": "a94c5e961dbe609191117cd9e67b0b5a6d883e31"
 }