@twreporter/react-components 8.18.0-rc.3 → 8.18.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [8.18.0-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.18.0-rc.3...@twreporter/react-components@8.18.0-rc.4) (2023-06-13)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * add `style` props for TextButton & deprecate TEXT_BUTTON_THEME ([0d697b8](https://github.com/twreporter/twreporter-npm-packages/commit/0d697b804cb4c0d5b0b505614008a939e7bd0212))
12
+ * address review comments ([f346356](https://github.com/twreporter/twreporter-npm-packages/commit/f34635625eb9d638bc0ca03768ecc14c9b5944d2))
13
+ * deprecate TEXT_BUTTON_THEME_PROP_TYPES ([9a661de](https://github.com/twreporter/twreporter-npm-packages/commit/9a661de3ce68953c083e8677e39c0b87887e1749))
14
+ * migrate TextButton usage in other place ([1f812f3](https://github.com/twreporter/twreporter-npm-packages/commit/1f812f36d77ff9c32800ff41ca73298537c5dce1))
15
+
16
+
17
+ ### Features
18
+
19
+ * add TextField component ([40eb6b1](https://github.com/twreporter/twreporter-npm-packages/commit/40eb6b1358e45c89b5d531599db5b1361e1fbad5))
20
+
21
+
22
+
23
+
24
+
6
25
  # [8.18.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.18.0-rc.2...@twreporter/react-components@8.18.0-rc.3) (2023-06-12)
7
26
 
8
27
 
@@ -25,7 +25,7 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
25
25
 
26
26
  var _theme2 = require("@twreporter/core/lib/constants/theme");
27
27
 
28
- var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "type", "active", "disabled"];
28
+ var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "type", "style", "active", "disabled"];
29
29
 
30
30
  var _templateObject;
31
31
 
@@ -73,9 +73,11 @@ var TextButton = function TextButton(_ref) {
73
73
  _ref$size = _ref.size,
74
74
  size = _ref$size === void 0 ? _sharedEnum.Size.S : _ref$size,
75
75
  _ref$theme = _ref.theme,
76
- theme = _ref$theme === void 0 ? _theme2.TEXT_BUTTON_THEME.normal : _ref$theme,
76
+ theme = _ref$theme === void 0 ? _theme2.THEME.normal : _ref$theme,
77
77
  _ref$type = _ref.type,
78
78
  type = _ref$type === void 0 ? _enums.Type.PRIMARY : _ref$type,
79
+ _ref$style = _ref.style,
80
+ style = _ref$style === void 0 ? _enums.Style.DARK : _ref$style,
79
81
  _ref$active = _ref.active,
80
82
  active = _ref$active === void 0 ? false : _ref$active,
81
83
  _ref$disabled = _ref.disabled,
@@ -92,7 +94,7 @@ var TextButton = function TextButton(_ref) {
92
94
  themeFunc = type === _enums.Type.PRIMARY ? _theme.getPrimaryTextButtonTheme : _theme.getSecondaryTextButtonTheme;
93
95
  }
94
96
 
95
- var _themeFunc = themeFunc(theme, active),
97
+ var _themeFunc = themeFunc(theme, style),
96
98
  color = _themeFunc.color,
97
99
  hoverColor = _themeFunc.hoverColor;
98
100
 
@@ -120,13 +122,15 @@ TextButton.propTypes = {
120
122
  rightIconComponent: _propTypes["default"].element,
121
123
  text: _propTypes["default"].string,
122
124
  size: _propTypes["default"].oneOf(Object.values(_sharedEnum.Size)),
123
- theme: _propTypes["default"].oneOf(Object.values(_theme2.TEXT_BUTTON_THEME)),
125
+ theme: _propTypes["default"].oneOf(Object.values(_theme2.THEME)),
124
126
  type: _propTypes["default"].oneOf(Object.values(_enums.Type)),
127
+ style: _propTypes["default"].oneOf(Object.values(_enums.Style)),
125
128
  active: _propTypes["default"].bool,
126
129
  disabled: _propTypes["default"].bool
127
130
  };
128
- TextButton.THEME = _theme2.TEXT_BUTTON_THEME;
131
+ TextButton.THEME = _theme2.THEME;
129
132
  TextButton.Size = _sharedEnum.Size;
130
133
  TextButton.Type = _enums.Type;
134
+ TextButton.Style = _enums.Style;
131
135
  var _default = TextButton;
132
136
  exports["default"] = _default;
@@ -25,6 +25,7 @@ var _default = {
25
25
  argTypes: {
26
26
  theme: _constants.THEME_STORYBOOK_ARG_TYPE,
27
27
  type: (0, _getEnumArg.getRadioArg)(_enums.Type, _enums.Type.PRIMARY),
28
+ style: (0, _getEnumArg.getRadioArg)(_enums.Style, _enums.Style.DARK),
28
29
  size: _constants.SIZE_STORYBOOK_ARG_TYPE,
29
30
  // showLeft & showRight args are only for storybook check
30
31
  showLeft: {
@@ -54,6 +55,7 @@ textButton.args = {
54
55
  size: _textButton["default"].Size.S,
55
56
  theme: _textButton["default"].THEME.normal,
56
57
  type: _textButton["default"].Type.PRIMARY,
58
+ style: _textButton["default"].Style.DARK,
57
59
  active: false,
58
60
  disabled: false,
59
61
  leftIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
@@ -87,6 +89,7 @@ toggleIconDisplay.args = {
87
89
  size: _textButton["default"].Size.S,
88
90
  theme: _textButton["default"].THEME.normal,
89
91
  type: _textButton["default"].Type.PRIMARY,
92
+ style: _textButton["default"].Style.DARK,
90
93
  active: false,
91
94
  disabled: false
92
95
  };
@@ -322,87 +322,85 @@ var getIconWithTextButtonTheme = function getIconWithTextButtonTheme(theme, isAc
322
322
 
323
323
  exports.getIconWithTextButtonTheme = getIconWithTextButtonTheme;
324
324
 
325
- var getPrimaryTextButtonTheme = function getPrimaryTextButtonTheme(theme) {
325
+ var getPrimaryTextButtonTheme = function getPrimaryTextButtonTheme(theme, style) {
326
326
  switch (theme) {
327
- case _theme.TEXT_BUTTON_THEME.photography:
327
+ case _theme.THEME.photography:
328
328
  return {
329
329
  color: _color.colorGrayscale.white,
330
330
  hoverColor: _color.colorSupportive.main
331
331
  };
332
332
 
333
- case _theme.TEXT_BUTTON_THEME.transparent:
333
+ case _theme.THEME.transparent:
334
334
  return {
335
335
  color: _color.colorGrayscale.white,
336
336
  hoverColor: _color.colorGrayscale.gray800
337
337
  };
338
338
 
339
- case _theme.TEXT_BUTTON_THEME.brand:
340
- return {
341
- color: _color.colorBrand.heavy,
342
- hoverColor: _color.colorBrand.dark
343
- };
339
+ case _theme.THEME.normal:
340
+ default:
341
+ switch (style) {
342
+ case _enums.Style.DARK:
343
+ return {
344
+ color: _color.colorGrayscale.gray800,
345
+ hoverColor: _color.colorBrand.heavy
346
+ };
344
347
 
345
- case _theme.TEXT_BUTTON_THEME.dark:
346
- return {
347
- color: _color.colorGrayscale.gray800,
348
- hoverColor: _color.colorBrand.heavy
349
- };
348
+ case _enums.Style.LIGHT:
349
+ return {
350
+ color: _color.colorGrayscale.gray600,
351
+ hoverColor: _color.colorGrayscale.gray800
352
+ };
350
353
 
351
- case _theme.TEXT_BUTTON_THEME.light:
352
- return {
353
- color: _color.colorGrayscale.gray600,
354
- hoverColor: _color.colorGrayscale.gray800
355
- };
354
+ case _enums.Style.BRAND:
355
+ default:
356
+ return {
357
+ color: _color.colorBrand.heavy,
358
+ hoverColor: _color.colorBrand.dark
359
+ };
360
+ }
356
361
 
357
- case _theme.TEXT_BUTTON_THEME.normal:
358
- default:
359
- return {
360
- color: _color.colorGrayscale.gray800,
361
- hoverColor: _color.colorBrand.heavy
362
- };
363
362
  }
364
363
  };
365
364
 
366
365
  exports.getPrimaryTextButtonTheme = getPrimaryTextButtonTheme;
367
366
 
368
- var getSecondaryTextButtonTheme = function getSecondaryTextButtonTheme(theme) {
367
+ var getSecondaryTextButtonTheme = function getSecondaryTextButtonTheme(theme, style) {
369
368
  switch (theme) {
370
- case _theme.TEXT_BUTTON_THEME.photography:
369
+ case _theme.THEME.photography:
371
370
  return {
372
371
  color: _color.colorGrayscale.gray400,
373
372
  hoverColor: _color.colorSupportive.main
374
373
  };
375
374
 
376
- case _theme.TEXT_BUTTON_THEME.transparent:
375
+ case _theme.THEME.transparent:
377
376
  return {
378
377
  color: _color.colorGrayscale.gray600,
379
378
  hoverColor: _color.colorGrayscale.gray800
380
379
  };
381
380
 
382
- case _theme.TEXT_BUTTON_THEME.brand:
383
- return {
384
- color: _color.colorBrand.heavy,
385
- hoverColor: _color.colorBrand.dark
386
- };
381
+ case _theme.THEME.normal:
382
+ default:
383
+ switch (style) {
384
+ case _enums.Style.DARK:
385
+ return {
386
+ color: _color.colorGrayscale.gray800,
387
+ hoverColor: _color.colorBrand.heavy
388
+ };
387
389
 
388
- case _theme.TEXT_BUTTON_THEME.dark:
389
- return {
390
- color: _color.colorGrayscale.gray800,
391
- hoverColor: _color.colorBrand.heavy
392
- };
390
+ case _enums.Style.LIGHT:
391
+ return {
392
+ color: _color.colorGrayscale.gray600,
393
+ hoverColor: _color.colorGrayscale.gray800
394
+ };
393
395
 
394
- case _theme.TEXT_BUTTON_THEME.light:
395
- return {
396
- color: _color.colorGrayscale.gray600,
397
- hoverColor: _color.colorGrayscale.gray800
398
- };
396
+ case _enums.Style.BRAND:
397
+ default:
398
+ return {
399
+ color: _color.colorBrand.heavy,
400
+ hoverColor: _color.colorBrand.dark
401
+ };
402
+ }
399
403
 
400
- case _theme.TEXT_BUTTON_THEME.normal:
401
- default:
402
- return {
403
- color: _color.colorGrayscale.gray600,
404
- hoverColor: _color.colorBrand.heavy
405
- };
406
404
  }
407
405
  };
408
406
 
@@ -410,22 +408,19 @@ exports.getSecondaryTextButtonTheme = getSecondaryTextButtonTheme;
410
408
 
411
409
  var getDisabledTextButtonTheme = function getDisabledTextButtonTheme(theme) {
412
410
  switch (theme) {
413
- case _theme.TEXT_BUTTON_THEME.photography:
411
+ case _theme.THEME.photography:
414
412
  return {
415
413
  color: _color.colorGrayscale.gray600,
416
414
  hoverColor: _color.colorGrayscale.gray600
417
415
  };
418
416
 
419
- case _theme.TEXT_BUTTON_THEME.transparent:
417
+ case _theme.THEME.transparent:
420
418
  return {
421
419
  color: _color.colorGrayscale.gray200,
422
420
  hoverColor: _color.colorGrayscale.gray200
423
421
  };
424
422
 
425
- case _theme.TEXT_BUTTON_THEME.brand:
426
- case _theme.TEXT_BUTTON_THEME.dark:
427
- case _theme.TEXT_BUTTON_THEME.light:
428
- case _theme.TEXT_BUTTON_THEME.normal:
423
+ case _theme.THEME.normal:
429
424
  default:
430
425
  return {
431
426
  color: _color.colorGrayscale.gray400,
@@ -436,44 +431,43 @@ var getDisabledTextButtonTheme = function getDisabledTextButtonTheme(theme) {
436
431
 
437
432
  exports.getDisabledTextButtonTheme = getDisabledTextButtonTheme;
438
433
 
439
- var getActiveTextButtonTheme = function getActiveTextButtonTheme(theme) {
434
+ var getActiveTextButtonTheme = function getActiveTextButtonTheme(theme, style) {
440
435
  switch (theme) {
441
- case _theme.TEXT_BUTTON_THEME.photography:
436
+ case _theme.THEME.photography:
442
437
  return {
443
438
  color: _color.colorSupportive.main,
444
439
  hoverColor: _color.colorSupportive.main
445
440
  };
446
441
 
447
- case _theme.TEXT_BUTTON_THEME.transparent:
442
+ case _theme.THEME.transparent:
448
443
  return {
449
444
  color: _color.colorGrayscale.white,
450
445
  hoverColor: _color.colorGrayscale.white
451
446
  };
452
447
 
453
- case _theme.TEXT_BUTTON_THEME.brand:
454
- return {
455
- color: _color.colorBrand.dark,
456
- hoverColor: _color.colorBrand.dark
457
- };
448
+ case _theme.THEME.normal:
449
+ default:
450
+ switch (style) {
451
+ case _enums.Style.DARK:
452
+ return {
453
+ color: _color.colorBrand.heavy,
454
+ hoverColor: _color.colorBrand.heavy
455
+ };
458
456
 
459
- case _theme.TEXT_BUTTON_THEME.dark:
460
- return {
461
- color: _color.colorBrand.heavy,
462
- hoverColor: _color.colorBrand.heavy
463
- };
457
+ case _enums.Style.LIGHT:
458
+ return {
459
+ color: _color.colorGrayscale.gray800,
460
+ hoverColor: _color.colorGrayscale.gray800
461
+ };
464
462
 
465
- case _theme.TEXT_BUTTON_THEME.light:
466
- return {
467
- color: _color.colorGrayscale.gray800,
468
- hoverColor: _color.colorGrayscale.gray800
469
- };
463
+ case _enums.Style.BRAND:
464
+ default:
465
+ return {
466
+ color: _color.colorBrand.dark,
467
+ hoverColor: _color.colorBrand.dark
468
+ };
469
+ }
470
470
 
471
- case _theme.TEXT_BUTTON_THEME.normal:
472
- default:
473
- return {
474
- color: _color.colorBrand.heavy,
475
- hoverColor: _color.colorBrand.heavy
476
- };
477
471
  }
478
472
  };
479
473
 
@@ -139,7 +139,8 @@ var ArticleCard = function ArticleCard(_ref) {
139
139
  });
140
140
 
141
141
  var bookmarkButton = size === _sharedEnum.Size.S ? /*#__PURE__*/_react["default"].createElement(_button.TextButton, {
142
- theme: _button.TextButton.THEME.light,
142
+ theme: _button.TextButton.THEME.normal,
143
+ style: _button.TextButton.Style.LIGHT,
143
144
  leftIconComponent: bookmarkIcon,
144
145
  text: "\u53D6\u6D88\u6536\u85CF"
145
146
  }) : /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
@@ -0,0 +1,117 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
13
+
14
+ var _enums = require("../enums");
15
+
16
+ var _color = require("@twreporter/core/lib/constants/color");
17
+
18
+ var _paragraph = require("../../text/paragraph");
19
+
20
+ var _excluded = ["placeholder", "align", "state", "message", "onSubmit", "onChange"];
21
+
22
+ var _textColor, _messageColor;
23
+
24
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
25
+
26
+ 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); }
27
+
28
+ 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; }
29
+
30
+ 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; }
31
+
32
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
33
+
34
+ var textColor = (_textColor = {}, _defineProperty(_textColor, _enums.TextState.DEFAULT, _color.colorGrayscale.gray800), _defineProperty(_textColor, _enums.TextState.ERROR, _color.colorGrayscale.gray800), _defineProperty(_textColor, _enums.TextState.DISABLED, _color.colorGrayscale.gray500), _textColor);
35
+ var messageColor = (_messageColor = {}, _defineProperty(_messageColor, _enums.TextState.DEFAULT, _color.colorGrayscale.gray800), _defineProperty(_messageColor, _enums.TextState.ERROR, _color.COLOR_SEMANTIC.danger), _defineProperty(_messageColor, _enums.TextState.DISABLED, _color.colorGrayscale.gray500), _messageColor);
36
+ var borderColor = messageColor;
37
+
38
+ var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
39
+ displayName: "text-field__Input",
40
+ componentId: "ld9aag-0"
41
+ })(["height:40px;font-size:16px;border-width:0 0 1px 0;background-color:inherit;color:", ";border-color:", ";&:focus,&:focus-visible{outline-width:0;}&::placeholder{color:", ";}"], function (props) {
42
+ return textColor[props.state];
43
+ }, function (props) {
44
+ return borderColor[props.state];
45
+ }, _color.colorGrayscale.gray400);
46
+
47
+ var Message = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P3).withConfig({
48
+ displayName: "text-field__Message",
49
+ componentId: "ld9aag-1"
50
+ })(["color:", ";margin:8px 0 0 4px;"], function (props) {
51
+ return messageColor[props.state];
52
+ });
53
+
54
+ var Container = /*#__PURE__*/_styledComponents["default"].form.withConfig({
55
+ displayName: "text-field__Container",
56
+ componentId: "ld9aag-2"
57
+ })(["", ",", "{width:100%;text-align:", ";justify-content:", ";}"], Input, Message, function (props) {
58
+ return props.align;
59
+ }, function (props) {
60
+ return props.align;
61
+ });
62
+
63
+ var defaultFunc = function defaultFunc() {};
64
+
65
+ var TextField = function TextField(_ref) {
66
+ var _ref$placeholder = _ref.placeholder,
67
+ placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
68
+ _ref$align = _ref.align,
69
+ align = _ref$align === void 0 ? _enums.TextAlign.LEFT : _ref$align,
70
+ _ref$state = _ref.state,
71
+ state = _ref$state === void 0 ? _enums.TextState.DEFAULT : _ref$state,
72
+ _ref$message = _ref.message,
73
+ message = _ref$message === void 0 ? '' : _ref$message,
74
+ _ref$onSubmit = _ref.onSubmit,
75
+ onSubmit = _ref$onSubmit === void 0 ? defaultFunc : _ref$onSubmit,
76
+ _ref$onChange = _ref.onChange,
77
+ onChange = _ref$onChange === void 0 ? defaultFunc : _ref$onChange,
78
+ props = _objectWithoutProperties(_ref, _excluded);
79
+
80
+ var handleSubmit = function handleSubmit(e) {
81
+ e.preventDefault();
82
+ e.stopPropagation();
83
+ onSubmit(e.target.input.value);
84
+ };
85
+
86
+ var handleChange = function handleChange(e) {
87
+ onChange(e.target.value);
88
+ };
89
+
90
+ return /*#__PURE__*/_react["default"].createElement(Container, _extends({
91
+ onSubmit: handleSubmit,
92
+ align: align
93
+ }, props), /*#__PURE__*/_react["default"].createElement(Input, {
94
+ name: "input",
95
+ type: "text",
96
+ placeholder: placeholder,
97
+ state: state,
98
+ disabled: state === _enums.TextState.DISABLED,
99
+ onChange: handleChange
100
+ }), message && /*#__PURE__*/_react["default"].createElement(Message, {
101
+ text: message,
102
+ state: state
103
+ }));
104
+ };
105
+
106
+ TextField.propTypes = {
107
+ placeholder: _propTypes["default"].string,
108
+ align: _propTypes["default"].oneOf(Object.values(_enums.TextAlign)),
109
+ state: _propTypes["default"].oneOf(Object.values(_enums.TextState)),
110
+ message: _propTypes["default"].string,
111
+ onSubmit: _propTypes["default"].func,
112
+ onChange: _propTypes["default"].func
113
+ };
114
+ TextField.Align = _enums.TextAlign;
115
+ TextField.State = _enums.TextState;
116
+ var _default = TextField;
117
+ exports["default"] = _default;
@@ -3,9 +3,22 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.WidthType = void 0;
6
+ exports.TextState = exports.TextAlign = exports.WidthType = void 0;
7
+ // enums for search-bar
7
8
  var WidthType = Object.freeze({
8
9
  FIT: 'fit',
9
10
  STRETCH: 'stretch'
11
+ }); // enums for text-field
12
+
13
+ exports.WidthType = WidthType;
14
+ var TextAlign = Object.freeze({
15
+ LEFT: 'left',
16
+ CENTER: 'center'
17
+ });
18
+ exports.TextAlign = TextAlign;
19
+ var TextState = Object.freeze({
20
+ DEFAULT: 'default',
21
+ ERROR: 'error',
22
+ DISABLED: 'disabled'
10
23
  });
11
- exports.WidthType = WidthType;
24
+ exports.TextState = TextState;
@@ -9,13 +9,22 @@ Object.defineProperty(exports, "SearchBar", {
9
9
  return _searchBar["default"];
10
10
  }
11
11
  });
12
+ Object.defineProperty(exports, "TextField", {
13
+ enumerable: true,
14
+ get: function get() {
15
+ return _textField["default"];
16
+ }
17
+ });
12
18
  exports["default"] = void 0;
13
19
 
14
20
  var _searchBar = _interopRequireDefault(require("./components/search-bar"));
15
21
 
22
+ var _textField = _interopRequireDefault(require("./components/text-field"));
23
+
16
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
17
25
 
18
26
  var _default = {
19
- SearchBar: _searchBar["default"]
27
+ SearchBar: _searchBar["default"],
28
+ TextField: _textField["default"]
20
29
  };
21
30
  exports["default"] = _default;
@@ -0,0 +1,53 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.textField = exports["default"] = void 0;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
+
12
+ var _getEnumArg = require("../../storybook/utils/get-enum-arg");
13
+
14
+ var _textField = _interopRequireDefault(require("../components/text-field"));
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
17
+
18
+ var _default = {
19
+ title: 'Input/Text Field',
20
+ component: _textField["default"],
21
+ argTypes: {
22
+ align: (0, _getEnumArg.getRadioArg)(_textField["default"].Align, _textField["default"].Align.LEFT),
23
+ state: (0, _getEnumArg.getRadioArg)(_textField["default"].State, _textField["default"].State.DEFAULT)
24
+ }
25
+ };
26
+ exports["default"] = _default;
27
+ var Form = /*#__PURE__*/(0, _styledComponents["default"])(_textField["default"]).withConfig({
28
+ displayName: "text-fieldstories__Form",
29
+ componentId: "sc-1rwuni4-0"
30
+ })(["width:200px;"]);
31
+
32
+ var textField = function textField(args) {
33
+ return /*#__PURE__*/_react["default"].createElement(Form, args);
34
+ };
35
+
36
+ exports.textField = textField;
37
+
38
+ var onSubmit = function onSubmit(value) {
39
+ console.log('submit', value);
40
+ };
41
+
42
+ var onChange = function onChange(value) {
43
+ console.log('change', value);
44
+ };
45
+
46
+ textField.args = {
47
+ onSubmit: onSubmit,
48
+ onChange: onChange,
49
+ placeholder: 'test',
50
+ align: _textField["default"].Align.LEFT,
51
+ state: _textField["default"].State.DEFAULT,
52
+ message: '系統文字'
53
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@twreporter/react-components",
3
- "version": "8.18.0-rc.3",
3
+ "version": "8.18.0-rc.4",
4
4
  "main": "lib/index.js",
5
5
  "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
6
6
  "author": "twreporter <developer@twreporter.org>",
@@ -15,8 +15,8 @@
15
15
  "chromatic": "npx chromatic --exit-zero-on-changes"
16
16
  },
17
17
  "dependencies": {
18
- "@twreporter/core": "^1.10.0-rc.2",
19
- "@twreporter/redux": "^7.6.0-rc.0",
18
+ "@twreporter/core": "^1.10.0-rc.3",
19
+ "@twreporter/redux": "^7.6.0-rc.1",
20
20
  "fontfaceobserver-es": "^3.3.3",
21
21
  "hoist-non-react-statics": "^2.3.1",
22
22
  "lodash": "^4.0.0",
@@ -44,5 +44,5 @@
44
44
  "babel-loader": "^8.2.4",
45
45
  "chromatic": "^6.5.4"
46
46
  },
47
- "gitHead": "7f423041f31558196c12a2cb438b506619bc5f68"
47
+ "gitHead": "a4737bc4c6aa045b90d1e879a950c156a4f6cbd1"
48
48
  }
@@ -1,16 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.TEXT_BUTTON_THEME_PROP_TYPES = void 0;
7
-
8
- var _propTypes = _interopRequireDefault(require("prop-types"));
9
-
10
- var _theme = require("@twreporter/core/lib/constants/theme");
11
-
12
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
13
-
14
- var TEXT_BUTTON_THEME_PROP_TYPES = _propTypes["default"].oneOf(Object.values(_theme.TEXT_BUTTON_THEME));
15
-
16
- exports.TEXT_BUTTON_THEME_PROP_TYPES = TEXT_BUTTON_THEME_PROP_TYPES;