@twreporter/react-components 8.21.0-rc.1 → 8.21.0-rc.10

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;

package/lib/card/stories/articleCard.stories.js

@@ -17,6 +17,7 @@ var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Card/Article',
   component: _articleCard["default"],
@@ -34,22 +35,23 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   return props.size === _articleCard["default"].Size.S ? '343' : '878';
 });
 
-var article = function article(args) {
-  return /*#__PURE__*/_react["default"].createElement(Container, {
-    size: args.size
-  }, /*#__PURE__*/_react["default"].createElement(_articleCard["default"], args));
-};
-
-exports.article = article;
-article.args = {
-  size: _articleCard["default"].Size.L,
-  title: '文章標題文章標題文章標題文章標題文章標題文章標題文章標題文章標題',
-  description: '文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述',
-  category: '主分類',
-  date: '2022/01/01',
-  image: {
-    src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png',
-    alt: 'test'
+var article = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(Container, {
+      size: args.size
+    }, /*#__PURE__*/_react["default"].createElement(_articleCard["default"], args));
   },
-  releaseBranch: _releaseBranch.BRANCH.master
-};
+  args: {
+    size: _articleCard["default"].Size.L,
+    title: '文章標題文章標題文章標題文章標題文章標題文章標題文章標題文章標題',
+    description: '文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述文章描述',
+    category: '主分類',
+    date: '2022/01/01',
+    image: {
+      src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/220px-Google_Images_2015_logo.svg.png',
+      alt: 'test'
+    },
+    releaseBranch: _releaseBranch.BRANCH.master
+  }
+};
+exports.article = article;

package/lib/card/stories/dialog.stories.js

@@ -15,6 +15,7 @@ var _constants = require("../../storybook/constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Card/Dialog',
   component: _dialog["default"],
@@ -27,18 +28,18 @@ var StyledDialog = /*#__PURE__*/(0, _styledComponents["default"])(_dialog["defau
   displayName: "dialogstories__StyledDialog",
   componentId: "sc-1h10bts-0"
 })(["width:fit-content;"]);
-
-var dialog = function dialog(args) {
-  return /*#__PURE__*/_react["default"].createElement(StyledDialog, args);
-};
-
-exports.dialog = dialog;
-dialog.args = {
-  text: '登出',
-  size: _dialog["default"].Size.S
-};
-dialog.parameters = {
-  backgrounds: {
-    "default": 'normal'
+var dialog = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(StyledDialog, args);
+  },
+  args: {
+    text: '登出',
+    size: _dialog["default"].Size.S
+  },
+  parameters: {
+    backgrounds: {
+      "default": 'normal'
+    }
   }
-};
+};
+exports.dialog = dialog;

package/lib/checkbox/checkbox.stories.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.checkbox = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _ = _interopRequireDefault(require("."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -22,18 +20,14 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_["default"], args);
-};
-
-var checkbox = Template.bind({});
-exports.checkbox = checkbox;
-checkbox.args = {
-  label: '藝術',
-  value: false,
-  disabled: false,
-  onChange: function onChange(e) {
-    console.log('callback', e.target.checked);
+var checkbox = {
+  args: {
+    label: '藝術',
+    value: false,
+    disabled: false,
+    onChange: function onChange(e) {
+      console.log('callback', e.target.checked);
+    }
   }
-};
+};
+exports.checkbox = checkbox;

package/lib/divider.stories.js

@@ -13,6 +13,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+/* eslint react/display-name:0 */
 var _default = {
   title: 'Divider/Line',
   component: _divider["default"]
@@ -40,37 +41,38 @@ var VerticalContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig
   componentId: "sc-166xqvx-2"
 })(["height:200px;"]);
 
-var divider = function divider(args) {
-  return /*#__PURE__*/_react["default"].createElement(FlexContainer, args, /*#__PURE__*/_react["default"].createElement(Cube, null), /*#__PURE__*/_react["default"].createElement(_divider["default"], args), /*#__PURE__*/_react["default"].createElement(Cube, null));
+var divider = {
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(FlexContainer, args, /*#__PURE__*/_react["default"].createElement(Cube, null), /*#__PURE__*/_react["default"].createElement(_divider["default"], args), /*#__PURE__*/_react["default"].createElement(Cube, null));
+  },
+  args: {
+    direction: _divider["default"].Direction.HORIZONTAL
+  }
 };
-
 exports.divider = divider;
-divider.args = {
-  direction: _divider["default"].Direction.HORIZONTAL
-};
-
-var horizontal = function horizontal() {
-  return /*#__PURE__*/_react["default"].createElement(_divider["default"], {
-    direction: _divider["default"].Direction.HORIZONTAL
-  });
+var horizontal = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+      direction: _divider["default"].Direction.HORIZONTAL
+    });
+  },
+  parameters: {
+    controls: {
+      exclude: ['direction']
+    }
+  }
 };
-
 exports.horizontal = horizontal;
-horizontal.parameters = {
-  controls: {
-    exclude: ['direction']
+var vertical = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(VerticalContainer, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+      direction: _divider["default"].Direction.VERTICAL
+    }));
+  },
+  parameters: {
+    controls: {
+      exclude: ['direction']
+    }
   }
 };
-
-var vertical = function vertical() {
-  return /*#__PURE__*/_react["default"].createElement(VerticalContainer, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], {
-    direction: _divider["default"].Direction.VERTICAL
-  }));
-};
-
-exports.vertical = vertical;
-vertical.parameters = {
-  controls: {
-    exclude: ['direction']
-  }
-};
+exports.vertical = vertical;

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.emptyState = exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _index = _interopRequireDefault(require("../index"));
 
 var _enums = require("../enums");
@@ -26,17 +24,14 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var emptyState = function emptyState(args) {
-  return /*#__PURE__*/_react["default"].createElement(_index["default"], args);
+var emptyState = {
+  args: {
+    title: '文字',
+    showGuide: true,
+    guide: '文字文字',
+    showButton: true,
+    buttonText: '按鈕',
+    buttonUrl: '/'
+  }
 };
-
-exports.emptyState = emptyState;
-emptyState.args = {
-  title: '文字',
-  showGuide: true,
-  guide: '文字文字',
-  showButton: true,
-  buttonText: '按鈕',
-  buttonUrl: '/'
-};
+exports.emptyState = emptyState;

package/lib/icon/stories/arrow.stories.js

@@ -5,14 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.up = exports.right = exports.left = exports.down = exports["default"] = exports.arrow = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../index");
 
 var _constants = require("../../storybook/constants");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var _default = {
   title: 'Icon/Arrow',
   component: _index.Arrow,
@@ -21,53 +17,53 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_index.Arrow, args);
+var arrow = {
+  args: {
+    direction: _index.Arrow.Direction.RIGHT
+  }
 };
-
-var arrow = Template.bind({});
 exports.arrow = arrow;
-arrow.args = {
-  direction: _index.Arrow.Direction.RIGHT
+var right = {
+  parameters: {
+    controls: {
+      exclude: ['direction']
+    }
+  },
+  args: {
+    direction: _index.Arrow.Direction.RIGHT
+  }
 };
-var right = Template.bind({});
 exports.right = right;
-right.parameters = {
-  controls: {
-    exclude: ['direction']
+var left = {
+  parameters: {
+    controls: {
+      exclude: ['direction']
+    }
+  },
+  args: {
+    direction: _index.Arrow.Direction.LEFT
   }
 };
-right.args = {
-  direction: _index.Arrow.Direction.RIGHT
-};
-var left = Template.bind({});
 exports.left = left;
-left.parameters = {
-  controls: {
-    exclude: ['direction']
+var up = {
+  parameters: {
+    controls: {
+      exclude: ['direction']
+    }
+  },
+  args: {
+    direction: _index.Arrow.Direction.UP
   }
 };
-left.args = {
-  direction: _index.Arrow.Direction.LEFT
-};
-var up = Template.bind({});
 exports.up = up;
-up.parameters = {
-  controls: {
-    exclude: ['direction']
-  }
-};
-up.args = {
-  direction: _index.Arrow.Direction.UP
-};
-var down = Template.bind({});
-exports.down = down;
-down.parameters = {
-  controls: {
-    exclude: ['direction']
+var down = {
+  parameters: {
+    controls: {
+      exclude: ['direction']
+    }
+  },
+  args: {
+    direction: _index.Arrow.Direction.DOWN
   }
 };
-down.args = {
-  direction: _index.Arrow.Direction.DOWN
-};
+exports.down = down;

package/lib/icon/stories/article.stories.js

@@ -5,14 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.article = void 0;
 
-var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../index");
 
 var _constants = require("../../storybook/constants");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var _default = {
   title: 'Icon/Article',
   component: _index.Article,
@@ -21,9 +17,5 @@ var _default = {
   }
 };
 exports["default"] = _default;
-
-var article = function article(args) {
-  return /*#__PURE__*/_react["default"].createElement(_index.Article, args);
-};
-
+var article = {};
 exports.article = article;