@twreporter/react-components 8.7.0 → 8.8.0-rc.0

package/lib/text/paragraph.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.P4 = exports.P3 = exports.P2 = exports.P1 = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _font = require("@twreporter/core/lib/constants/font");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var defaultContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "paragraph__defaultContainer",
+  componentId: "sc-1aejhao-0"
+})(["font-weight:", ";font-family:", ";line-height:150%;"], function (props) {
+  return _font.fontWeight[props.weight];
+}, _font.fontFamily["default"]);
+
+var P1Container = /*#__PURE__*/(0, _styledComponents["default"])(defaultContainer).withConfig({
+  displayName: "paragraph__P1Container",
+  componentId: "sc-1aejhao-1"
+})(["font-size:16px;"]);
+var P2Container = /*#__PURE__*/(0, _styledComponents["default"])(defaultContainer).withConfig({
+  displayName: "paragraph__P2Container",
+  componentId: "sc-1aejhao-2"
+})(["font-size:14px;"]);
+var P3Container = /*#__PURE__*/(0, _styledComponents["default"])(defaultContainer).withConfig({
+  displayName: "paragraph__P3Container",
+  componentId: "sc-1aejhao-3"
+})(["font-size:12px;"]);
+var P4Container = /*#__PURE__*/(0, _styledComponents["default"])(defaultContainer).withConfig({
+  displayName: "paragraph__P4Container",
+  componentId: "sc-1aejhao-4"
+})(["font-size:10px;"]);
+
+var P1 = function P1(_ref) {
+  var _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
+  return /*#__PURE__*/_react["default"].createElement(P1Container, {
+    weight: weight
+  }, text);
+};
+
+exports.P1 = P1;
+P1.propTypes = {
+  text: _propTypes["default"].string,
+  weight: _propTypes["default"].oneOf(['extraLight', 'normal', 'bold'])
+};
+
+var P2 = function P2(_ref2) {
+  var _ref2$text = _ref2.text,
+      text = _ref2$text === void 0 ? '' : _ref2$text,
+      _ref2$weight = _ref2.weight,
+      weight = _ref2$weight === void 0 ? 'normal' : _ref2$weight;
+  return /*#__PURE__*/_react["default"].createElement(P2Container, {
+    weight: weight
+  }, text);
+};
+
+exports.P2 = P2;
+P2.propTypes = {
+  text: _propTypes["default"].string,
+  weight: _propTypes["default"].oneOf(['extraLight', 'normal', 'bold'])
+};
+
+var P3 = function P3(_ref3) {
+  var _ref3$text = _ref3.text,
+      text = _ref3$text === void 0 ? '' : _ref3$text,
+      _ref3$weight = _ref3.weight,
+      weight = _ref3$weight === void 0 ? 'normal' : _ref3$weight;
+  return /*#__PURE__*/_react["default"].createElement(P3Container, {
+    weight: weight
+  }, text);
+};
+
+exports.P3 = P3;
+P3.propTypes = {
+  text: _propTypes["default"].string,
+  weight: _propTypes["default"].oneOf(['extraLight', 'normal', 'bold'])
+};
+
+var P4 = function P4(_ref4) {
+  var _ref4$text = _ref4.text,
+      text = _ref4$text === void 0 ? '' : _ref4$text,
+      _ref4$weight = _ref4.weight,
+      weight = _ref4$weight === void 0 ? 'normal' : _ref4$weight;
+  return /*#__PURE__*/_react["default"].createElement(P4Container, {
+    weight: weight
+  }, text);
+};
+
+exports.P4 = P4;
+P4.propTypes = {
+  text: _propTypes["default"].string,
+  weight: _propTypes["default"].oneOf(['extraLight', 'normal', 'bold'])
+};
+var _default = {
+  P1: P1,
+  P2: P2,
+  P3: P3,
+  P4: P4
+};
+exports["default"] = _default;

package/lib/text/stories/headline.stories.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.h6 = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _headline = require("../headline");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Text/Headline',
+  component: _headline.H1
+};
+exports["default"] = _default;
+var defaultText = '標題「標題」：標題，《標題》標題English標題123標題？';
+
+var h1 = function h1(args) {
+  return /*#__PURE__*/_react["default"].createElement(_headline.H1, args);
+};
+
+exports.h1 = h1;
+h1.args = {
+  text: defaultText,
+  type: 'default'
+};
+
+var h2 = function h2(args) {
+  return /*#__PURE__*/_react["default"].createElement(_headline.H2, args);
+};
+
+exports.h2 = h2;
+h2.args = {
+  text: defaultText,
+  type: 'default'
+};
+
+var h3 = function h3(args) {
+  return /*#__PURE__*/_react["default"].createElement(_headline.H3, args);
+};
+
+exports.h3 = h3;
+h3.args = {
+  text: defaultText,
+  type: 'default'
+};
+
+var h4 = function h4(args) {
+  return /*#__PURE__*/_react["default"].createElement(_headline.H4, args);
+};
+
+exports.h4 = h4;
+h4.args = {
+  text: defaultText,
+  type: 'default'
+};
+
+var h5 = function h5(args) {
+  return /*#__PURE__*/_react["default"].createElement(_headline.H5, args);
+};
+
+exports.h5 = h5;
+h5.args = {
+  text: defaultText,
+  type: 'default'
+};
+
+var h6 = function h6(args) {
+  return /*#__PURE__*/_react["default"].createElement(_headline.H6, args);
+};
+
+exports.h6 = h6;
+h6.args = {
+  text: defaultText,
+  type: 'default'
+};

package/lib/text/stories/paragraph.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.p4 = exports.p3 = exports.p2 = exports.p1 = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _paragraph = require("../paragraph");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Text/Paragraph',
+  component: _paragraph.P1
+};
+exports["default"] = _default;
+var defaultText = '內文「內文」：內文，《內文》內文English內文123內文？';
+var defaultWeight = 'normal';
+
+var p1 = function p1(args) {
+  return /*#__PURE__*/_react["default"].createElement(_paragraph.P1, args);
+};
+
+exports.p1 = p1;
+p1.args = {
+  text: defaultText,
+  weight: defaultWeight
+};
+
+var p2 = function p2(args) {
+  return /*#__PURE__*/_react["default"].createElement(_paragraph.P2, args);
+};
+
+exports.p2 = p2;
+p2.args = {
+  text: defaultText,
+  weight: defaultWeight
+};
+
+var p3 = function p3(args) {
+  return /*#__PURE__*/_react["default"].createElement(_paragraph.P3, args);
+};
+
+exports.p3 = p3;
+p3.args = {
+  text: defaultText,
+  weight: defaultWeight
+};
+
+var p4 = function p4(args) {
+  return /*#__PURE__*/_react["default"].createElement(_paragraph.P4, args);
+};
+
+exports.p4 = p4;
+p4.args = {
+  text: defaultText,
+  weight: defaultWeight
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.7.0",
+  "version": "8.8.0-rc.0",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -9,11 +9,14 @@
     "clean": "make clean",
     "build": "make build",
     "dev": "make dev",
-    "prepublishOnly": "make build"
+    "prepublishOnly": "make build",
+    "storybook": "start-storybook -p 3000",
+    "build-storybook": "build-storybook",
+    "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
     "@twreporter/core": "^1.4.0",
-    "@twreporter/redux": "^7.2.0",
+    "@twreporter/redux": "^7.2.1",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
     "memoize-one": "^5.0.5",
@@ -29,5 +32,17 @@
   "files": [
     "lib"
   ],
-  "gitHead": "89fdf1e8005eea6efc14310ad4cb7b21c407ade9"
+  "devDependencies": {
+    "@babel/core": "^7.17.9",
+    "@storybook/addon-actions": "^6.4.21",
+    "@storybook/addon-essentials": "^6.4.21",
+    "@storybook/addon-interactions": "^6.4.21",
+    "@storybook/addon-links": "^6.4.21",
+    "@storybook/addon-viewport": "^6.4.21",
+    "@storybook/react": "^6.4.21",
+    "@storybook/testing-library": "^0.0.9",
+    "babel-loader": "^8.2.4",
+    "chromatic": "^6.5.4"
+  },
+  "gitHead": "8aa2920506747c9d98e2cd38a86b28f33634a036"
 }