@twreporter/react-components 8.21.0-rc.3 → 8.21.0-rc.5

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.21.0-rc.5](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.21.0-rc.4...@twreporter/react-components@8.21.0-rc.5) (2023-11-14)
+
+
+### Bug Fixes
+
+* paragraph margin block ([949efb7](https://github.com/twreporter/twreporter-npm-packages/commit/949efb7c2d3213b9e0ebc35bdbc3739a14fa8b0e))
+
+
+
+
+
+# [8.21.0-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.21.0-rc.3...@twreporter/react-components@8.21.0-rc.4) (2023-11-14)
+
+
+### Features
+
+* upgrade storybook to v7 ([fa85736](https://github.com/twreporter/twreporter-npm-packages/commit/fa85736bd60eda26596bc89c5bccaf74892774f2))
+
+
+
+
+
 # [8.21.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.21.0-rc.2...@twreporter/react-components@8.21.0-rc.3) (2023-11-13)
 
 

package/lib/badge/badge.stories.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.badge = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _ = _interopRequireDefault(require("."));
 
 var _color = require("@twreporter/core/lib/constants/color");
@@ -18,15 +16,11 @@ var _default = {
   component: _["default"]
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_["default"], args);
+var badge = {
+  args: {
+    text: '不定期',
+    textColor: _color.colorBrand.heavy,
+    backgroundColor: 'white'
+  }
 };
-
-var badge = Template.bind({});
-exports.badge = badge;
-badge.args = {
-  text: '不定期',
-  textColor: _color.colorBrand.heavy,
-  backgroundColor: 'white'
-};
+exports.badge = badge;

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

@@ -11,18 +11,19 @@ var _bookmarks = _interopRequireDefault(require("../bookmarks"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Bookmark/Empty List',
   component: _bookmarks["default"]
 };
 exports["default"] = _default;
-
-var emptyList = function emptyList() {
-  return /*#__PURE__*/_react["default"].createElement(_bookmarks["default"], null);
+var emptyList = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_bookmarks["default"], null);
+  },
+  args: {
+    bookmarks: [],
+    total: 0
+  }
 };
-
-exports.emptyList = emptyList;
-emptyList.args = {
-  bookmarks: [],
-  total: 0
-};
+exports.emptyList = emptyList;

package/lib/button/stories/iconButton.stories.js

@@ -28,28 +28,25 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_iconButton["default"], args);
+var iconButton = {
+  args: {
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+      direction: "down"
+    }),
+    theme: _iconButton["default"].THEME.normal,
+    type: _iconButton["default"].Type.PRIMARY,
+    disabled: false,
+    active: false
+  }
 };
-
-var iconButton = Template.bind({});
 exports.iconButton = iconButton;
-iconButton.args = {
-  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-    direction: "down"
-  }),
-  theme: _iconButton["default"].THEME.normal,
-  type: _iconButton["default"].Type.PRIMARY,
-  disabled: false,
-  active: false
+var shareButton = {
+  args: {
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Share, null),
+    theme: _iconButton["default"].THEME.normal,
+    type: _iconButton["default"].Type.PRIMARY,
+    disabled: false,
+    active: false
+  }
 };
-var shareButton = Template.bind({});
-exports.shareButton = shareButton;
-shareButton.args = {
-  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Share, null),
-  theme: _iconButton["default"].THEME.normal,
-  type: _iconButton["default"].Type.PRIMARY,
-  disabled: false,
-  active: false
-};
+exports.shareButton = shareButton;

package/lib/button/stories/iconWithTextButton.stories.js

@@ -23,30 +23,27 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_iconWithTextButton["default"], args);
+var iconWithTextButton = {
+  args: {
+    text: '文字',
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+      direction: "down"
+    }),
+    theme: _iconWithTextButton["default"].THEME.normal,
+    disabled: false,
+    active: false,
+    hideText: false
+  }
 };
-
-var iconWithTextButton = Template.bind({});
 exports.iconWithTextButton = iconWithTextButton;
-iconWithTextButton.args = {
-  text: '文字',
-  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-    direction: "down"
-  }),
-  theme: _iconWithTextButton["default"].THEME.normal,
-  disabled: false,
-  active: false,
-  hideText: false
+var shareButton = {
+  args: {
+    text: '分享',
+    iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Share, null),
+    theme: _iconWithTextButton["default"].THEME.normal,
+    disabled: false,
+    active: false,
+    hideText: false
+  }
 };
-var shareButton = Template.bind({});
-exports.shareButton = shareButton;
-shareButton.args = {
-  text: '分享',
-  iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Share, null),
-  theme: _iconWithTextButton["default"].THEME.normal,
-  disabled: false,
-  active: false,
-  hideText: false
-};
+exports.shareButton = shareButton;

package/lib/button/stories/link.stories.js

@@ -25,6 +25,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Button/Link',
   component: _link["default"],
@@ -55,86 +56,83 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_link["default"], args);
-};
-
-var link = Template.bind({});
-exports.link = link;
-link.args = {
-  text: '文字',
-  type: _link["default"].Type.DEFAULT,
-  link: {
-    to: 'https://www.twreporter.org'
-  }
-};
-link.parameters = {
-  controls: {
-    exclude: ['textComponent', 'leftWord', 'rightWord']
+var link = {
+  args: {
+    text: '文字',
+    type: _link["default"].Type.DEFAULT,
+    link: {
+      to: 'https://www.twreporter.org'
+    }
+  },
+  parameters: {
+    controls: {
+      exclude: ['textComponent', 'leftWord', 'rightWord']
+    }
   }
 };
+exports.link = link;
+var changeTextComponent = {
+  render: function render(args) {
+    if (args.textComponent === 'P2') {
+      args.TextComponent = _paragraph.P2;
+    }
 
-var changeTextComponent = function changeTextComponent(args) {
-  if (args.textComponent === 'P2') {
-    args.TextComponent = _paragraph.P2;
-  }
+    if (args.textComponent === 'H4') {
+      args.TextComponent = _headline.H4;
+    }
 
-  if (args.textComponent === 'H4') {
-    args.TextComponent = _headline.H4;
+    return /*#__PURE__*/_react["default"].createElement(_link["default"], args);
+  },
+  args: {
+    text: '文字',
+    type: _link["default"].Type.DEFAULT,
+    textComponent: 'P2',
+    link: {
+      to: 'https://www.twreporter.org'
+    }
+  },
+  parameters: {
+    controls: {
+      exclude: ['TextComponent', 'leftWord', 'rightWord']
+    }
   }
-
-  return /*#__PURE__*/_react["default"].createElement(_link["default"], args);
 };
-
 exports.changeTextComponent = changeTextComponent;
-changeTextComponent.args = {
-  text: '文字',
-  type: _link["default"].Type.DEFAULT,
-  textComponent: 'P2',
-  link: {
-    to: 'https://www.twreporter.org'
-  }
-};
-changeTextComponent.parameters = {
-  controls: {
-    exclude: ['TextComponent', 'leftWord', 'rightWord']
-  }
-};
-var disabledLink = Template.bind({});
-exports.disabledLink = disabledLink;
-disabledLink.args = {
-  text: '文字',
-  type: _link["default"].Type.DEFAULT,
-  link: {
-    to: 'https://www.twreporter.org'
+var disabledLink = {
+  args: {
+    text: '文字',
+    type: _link["default"].Type.DEFAULT,
+    link: {
+      to: 'https://www.twreporter.org'
+    },
+    disabled: true
   },
-  disabled: true
-};
-disabledLink.parameters = {
-  controls: {
-    exclude: ['textComponent', 'disabled', 'leftWord', 'rightWord']
+  parameters: {
+    controls: {
+      exclude: ['textComponent', 'disabled', 'leftWord', 'rightWord']
+    }
   }
 };
+exports.disabledLink = disabledLink;
 var StyledP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
   displayName: "linkstories__StyledP1",
   componentId: "sc-1i9kyc3-0"
 })(["display:unset;"]);
-
-var linkInParagraph = function linkInParagraph(args) {
-  return /*#__PURE__*/_react["default"].createElement(StyledP1, null, args.leftWord, /*#__PURE__*/_react["default"].createElement(_link.InheritLinkButton, args), args.rightWord);
-};
-
-exports.linkInParagraph = linkInParagraph;
-linkInParagraph.args = {
-  text: '文字',
-  type: _link["default"].Type.DEFAULT,
-  link: {
-    to: 'https://www.twreporter.org'
+var linkInParagraph = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(StyledP1, null, args.leftWord, /*#__PURE__*/_react["default"].createElement(_link.InheritLinkButton, args), args.rightWord);
+  },
+  args: {
+    text: '文字',
+    type: _link["default"].Type.DEFAULT,
+    link: {
+      to: 'https://www.twreporter.org'
+    }
+  },
+  parameters: {
+    controls: {
+      exclude: ['textComponent', 'disabled', 'weight', 'TextComponent']
+    }
   }
 };
-linkInParagraph.parameters = {
-  controls: {
-    exclude: ['textComponent', 'disabled', 'weight', 'TextComponent']
-  }
-};
+exports.linkInParagraph = linkInParagraph;

package/lib/button/stories/menuButton.stories.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.menuButton = exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _menuButton = _interopRequireDefault(require("../components/menuButton"));
 
 var _color = require("@twreporter/core/lib/constants/color");
@@ -23,18 +21,15 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var menuButton = function menuButton(args) {
-  return /*#__PURE__*/_react["default"].createElement(_menuButton["default"], args);
+var menuButton = {
+  args: {
+    text: '文字',
+    link: {},
+    color: _color.colorGrayscale.gray800,
+    hoverBgColor: _color.colorGrayscale.gray100,
+    activeBgColor: _color.colorGrayscale.gray200,
+    paddingLeft: 32,
+    paddingRight: 32
+  }
 };
-
-exports.menuButton = menuButton;
-menuButton.args = {
-  text: '文字',
-  link: {},
-  color: _color.colorGrayscale.gray800,
-  hoverBgColor: _color.colorGrayscale.gray100,
-  activeBgColor: _color.colorGrayscale.gray200,
-  paddingLeft: 32,
-  paddingRight: 32
-};
+exports.menuButton = menuButton;

package/lib/button/stories/pillButton.stories.js

@@ -19,6 +19,7 @@ var _constants = require("../../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Button/Pill Button',
   component: _pillButton["default"],
@@ -43,48 +44,44 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_pillButton["default"], args);
+var pillButton = {
+  args: {
+    text: '文字',
+    size: _pillButton["default"].Size.S,
+    theme: _pillButton["default"].THEME.normal,
+    style: _pillButton["default"].Style.BRAND,
+    type: _pillButton["default"].Type.PRIMARY,
+    disabled: false,
+    loading: false
+  },
+  parameters: {
+    controls: {
+      exclude: ['showLeft', 'showRight']
+    }
+  }
 };
-
-var pillButton = Template.bind({});
 exports.pillButton = pillButton;
-pillButton.args = {
-  text: '文字',
-  size: _pillButton["default"].Size.S,
-  theme: _pillButton["default"].THEME.normal,
-  style: _pillButton["default"].Style.BRAND,
-  type: _pillButton["default"].Type.PRIMARY,
-  disabled: false,
-  loading: false
-};
-pillButton.parameters = {
-  controls: {
-    exclude: ['showLeft', 'showRight']
+var toggleIconDisplay = {
+  render: function render(args) {
+    args.leftIconComponent = args.showLeft ? /*#__PURE__*/_react["default"].createElement(_icon.Cross, null) : null;
+    args.rightIconComponent = args.showRight ? /*#__PURE__*/_react["default"].createElement(_icon.Cross, null) : null;
+    return /*#__PURE__*/_react["default"].createElement(_pillButton["default"], args);
+  },
+  args: {
+    showLeft: true,
+    showRight: true,
+    text: '文字',
+    size: _pillButton["default"].Size.S,
+    theme: _pillButton["default"].THEME.normal,
+    style: _pillButton["default"].Style.BRAND,
+    type: _pillButton["default"].Type.PRIMARY,
+    disabled: false,
+    loading: false
+  },
+  parameters: {
+    controls: {
+      exclude: ['leftIconComponent', 'rightIconComponent']
+    }
   }
 };
-
-var toggleIconDisplay = function toggleIconDisplay(args) {
-  args.leftIconComponent = args.showLeft ? /*#__PURE__*/_react["default"].createElement(_icon.Cross, null) : null;
-  args.rightIconComponent = args.showRight ? /*#__PURE__*/_react["default"].createElement(_icon.Cross, null) : null;
-  return /*#__PURE__*/_react["default"].createElement(_pillButton["default"], args);
-};
-
-exports.toggleIconDisplay = toggleIconDisplay;
-toggleIconDisplay.args = {
-  showLeft: true,
-  showRight: true,
-  text: '文字',
-  size: _pillButton["default"].Size.S,
-  theme: _pillButton["default"].THEME.normal,
-  style: _pillButton["default"].Style.BRAND,
-  type: _pillButton["default"].Type.PRIMARY,
-  disabled: false,
-  loading: false
-};
-toggleIconDisplay.parameters = {
-  controls: {
-    exclude: ['leftIconComponent', 'rightIconComponent']
-  }
-};
+exports.toggleIconDisplay = toggleIconDisplay;

package/lib/button/stories/textButton.stories.js

@@ -19,6 +19,7 @@ var _constants = require("../../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Button/Text Button',
   component: _textButton["default"],
@@ -43,58 +44,54 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_textButton["default"], args);
+var textButton = {
+  args: {
+    text: '文字',
+    size: _textButton["default"].Size.S,
+    theme: _textButton["default"].THEME.normal,
+    type: _textButton["default"].Type.PRIMARY,
+    style: _textButton["default"].Style.DARK,
+    active: false,
+    disabled: false,
+    leftIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+      direction: "left"
+    }),
+    rightIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+      direction: "right"
+    })
+  },
+  parameters: {
+    controls: {
+      exclude: ['showLeft', 'showRight']
+    }
+  }
 };
-
-var textButton = Template.bind({});
 exports.textButton = textButton;
-textButton.args = {
-  text: '文字',
-  size: _textButton["default"].Size.S,
-  theme: _textButton["default"].THEME.normal,
-  type: _textButton["default"].Type.PRIMARY,
-  style: _textButton["default"].Style.DARK,
-  active: false,
-  disabled: false,
-  leftIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-    direction: "left"
-  }),
-  rightIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-    direction: "right"
-  })
-};
-textButton.parameters = {
-  controls: {
-    exclude: ['showLeft', 'showRight']
+var toggleIconDisplay = {
+  render: function render(args) {
+    args.leftIconComponent = args.showLeft ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+      direction: "left"
+    }) : null;
+    args.rightIconComponent = args.showRight ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
+      direction: "right"
+    }) : null;
+    return /*#__PURE__*/_react["default"].createElement(_textButton["default"], args);
+  },
+  args: {
+    showLeft: true,
+    showRight: true,
+    text: '文字',
+    size: _textButton["default"].Size.S,
+    theme: _textButton["default"].THEME.normal,
+    type: _textButton["default"].Type.PRIMARY,
+    style: _textButton["default"].Style.DARK,
+    active: false,
+    disabled: false
+  },
+  parameters: {
+    controls: {
+      exclude: ['leftIconComponent', 'rightIconComponent']
+    }
   }
 };
-
-var toggleIconDisplay = function toggleIconDisplay(args) {
-  args.leftIconComponent = args.showLeft ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-    direction: "left"
-  }) : null;
-  args.rightIconComponent = args.showRight ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-    direction: "right"
-  }) : null;
-  return /*#__PURE__*/_react["default"].createElement(_textButton["default"], args);
-};
-
-exports.toggleIconDisplay = toggleIconDisplay;
-toggleIconDisplay.args = {
-  showLeft: true,
-  showRight: true,
-  text: '文字',
-  size: _textButton["default"].Size.S,
-  theme: _textButton["default"].THEME.normal,
-  type: _textButton["default"].Type.PRIMARY,
-  style: _textButton["default"].Style.DARK,
-  active: false,
-  disabled: false
-};
-toggleIconDisplay.parameters = {
-  controls: {
-    exclude: ['leftIconComponent', 'rightIconComponent']
-  }
-};
+exports.toggleIconDisplay = toggleIconDisplay;

package/lib/button/stories/toggleButton.stories.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toggleButton = exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _toggleButton = _interopRequireDefault(require("../components/toggleButton"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -22,17 +20,13 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_toggleButton["default"], args);
+var toggleButton = {
+  args: {
+    value: false,
+    labelOn: '已訂閱',
+    labelOff: '未訂閱',
+    disabled: false,
+    onChange: function onChange() {}
+  }
 };
-
-var toggleButton = Template.bind({});
-exports.toggleButton = toggleButton;
-toggleButton.args = {
-  value: false,
-  labelOn: '已訂閱',
-  labelOff: '未訂閱',
-  disabled: false,
-  onChange: function onChange() {}
-};
+exports.toggleButton = toggleButton;