@sproutsocial/racine 11.3.1-beta-deps.4 → 11.4.0-input-beta.0

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.
Files changed (48) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/__flow__/Button/__snapshots__/index.test.js.snap +511 -0
  3. package/__flow__/Button/index.js +0 -2
  4. package/__flow__/Button/index.stories.js +67 -51
  5. package/__flow__/Button/index.test.js +113 -0
  6. package/__flow__/Button/styles.js +1 -1
  7. package/__flow__/EmptyState/index.test.js +1 -1
  8. package/__flow__/Input/index.js +185 -66
  9. package/__flow__/Input/index.stories.js +65 -0
  10. package/__flow__/Input/index.test.js +227 -1
  11. package/__flow__/Input/styles.js +1 -1
  12. package/__flow__/Link/index.js +2 -1
  13. package/__flow__/Menu/__snapshots__/index.test.js.snap +2 -2
  14. package/__flow__/TokenInput/index.js +1 -1
  15. package/__flow__/setupTests.js +1 -1
  16. package/__flow__/systemProps/tests/__snapshots__/layout.test.js.snap +14 -0
  17. package/__flow__/systemProps/tests/layout.test.js +9 -0
  18. package/__flow__/themes/dark/theme.js +3 -0
  19. package/__flow__/themes/light/theme.js +3 -0
  20. package/__flow__/types/theme.colors.flow.js +3 -0
  21. package/commonjs/Button/index.js +0 -1
  22. package/commonjs/Button/styles.js +0 -1
  23. package/commonjs/DatePicker/styles.js +1 -5
  24. package/commonjs/Input/index.js +125 -31
  25. package/commonjs/Input/styles.js +1 -1
  26. package/commonjs/Menu/index.js +10 -10
  27. package/commonjs/Modal/styles.js +1 -5
  28. package/commonjs/Toast/index.js +14 -14
  29. package/commonjs/Toast/styles.js +2 -5
  30. package/commonjs/TokenInput/index.js +1 -1
  31. package/commonjs/themes/dark/theme.js +4 -1
  32. package/commonjs/themes/light/theme.js +4 -1
  33. package/dist/themes/dark/dark.scss +4 -1
  34. package/dist/themes/light/light.scss +4 -1
  35. package/lib/Button/index.js +0 -1
  36. package/lib/Button/styles.js +0 -1
  37. package/lib/DatePicker/styles.js +1 -5
  38. package/lib/Input/index.js +118 -31
  39. package/lib/Input/styles.js +1 -1
  40. package/lib/Menu/index.js +10 -11
  41. package/lib/Modal/styles.js +1 -5
  42. package/lib/Toast/index.js +14 -14
  43. package/lib/Toast/styles.js +1 -5
  44. package/lib/TokenInput/index.js +1 -1
  45. package/lib/themes/dark/theme.js +4 -1
  46. package/lib/themes/light/theme.js +4 -1
  47. package/package.json +20 -25
  48. package/bin/buildNpm.js +0 -58
@@ -1,4 +1,4 @@
1
- var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "innerRef", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance"];
1
+ var _excluded = ["autoComplete", "autoFocus", "disabled", "readOnly", "isInvalid", "hasWarning", "id", "name", "placeholder", "type", "required", "value", "elemBefore", "elemAfter", "maxLength", "ariaLabel", "ariaDescribedby", "clearButtonLabel", "innerRef", "onBlur", "onChange", "onClear", "onFocus", "onKeyDown", "onKeyUp", "onPaste", "inputProps", "qa", "appearance", "size"];
2
2
 
3
3
  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); }
4
4
 
@@ -10,6 +10,69 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
10
10
 
11
11
  import * as React from "react";
12
12
  import Container, { Accessory } from "./styles";
13
+ import Button from "../Button";
14
+ import Icon from "../Icon";
15
+ import styled from "styled-components";
16
+ var InputContext = /*#__PURE__*/React.createContext({});
17
+ var StyledButton = styled(Button).withConfig({
18
+ displayName: "Input__StyledButton",
19
+ componentId: "sc-1ck1dnm-0"
20
+ })(["&:hover,&:active{color:", ";}"], function (props) {
21
+ return props.theme.utils.interact(props.theme.colors.icon.base);
22
+ });
23
+
24
+ var ClearButton = function ClearButton() {
25
+ var _React$useContext = React.useContext(InputContext),
26
+ onClear = _React$useContext.onClear,
27
+ handleClear = _React$useContext.handleClear,
28
+ clearButtonLabel = _React$useContext.clearButtonLabel,
29
+ hasValue = _React$useContext.hasValue,
30
+ inputSize = _React$useContext.size; // Hide the button when there is no text to clear.
31
+
32
+
33
+ if (!hasValue) {
34
+ return null;
35
+ } // Log a warning and hide the button when no onClear callback is provided.
36
+ // If we called handleClear with no onClear prop, all the button would do is focus the Input.
37
+
38
+
39
+ if (!onClear) {
40
+ console.warn("Warning: No onClear prop provided to Input when using Input.ClearButton. Omitting Input.ClearButton.");
41
+ return null;
42
+ } // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
43
+
44
+
45
+ if (!clearButtonLabel) {
46
+ console.warn("Warning: clearButtonLabel prop is required when using Input.ClearButton. Please pass a localized clearButtonLabel to Input.");
47
+ } // Reduce Button padding for size small Inputs so that the Button won't go outside the bounds of the Input.
48
+ // This adjustment is handled automatically for default and large Inputs via Button's size. There is no "small" Button.
49
+
50
+
51
+ var py = inputSize === "small" ? 100 : undefined;
52
+ var px = inputSize === "small" ? 200 : undefined;
53
+ var buttonSize = inputSize === "small" ? "default" : inputSize;
54
+ return /*#__PURE__*/React.createElement(StyledButton, {
55
+ onClick: handleClear,
56
+ size: buttonSize,
57
+ py: py,
58
+ px: px,
59
+ title: clearButtonLabel || "Clear",
60
+ ariaLabel: clearButtonLabel || "Clear",
61
+ color: "icon.base"
62
+ }, /*#__PURE__*/React.createElement(Icon, {
63
+ name: "circlex"
64
+ }));
65
+ }; // Used for positioning elementAfter. This logic will detect if the element is a ClearButton,
66
+ // regardless of whether it was manually passed as elemAfter or automatically added to a search Input.
67
+
68
+
69
+ var isClearButton = function isClearButton(elem) {
70
+ if (elem != null && elem.type) {
71
+ return elem.type.displayName === "Input.ClearButton";
72
+ }
73
+
74
+ return false;
75
+ };
13
76
 
14
77
  var Input = /*#__PURE__*/function (_React$Component) {
15
78
  _inheritsLoose(Input, _React$Component);
@@ -24,39 +87,38 @@ var Input = /*#__PURE__*/function (_React$Component) {
24
87
  _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
25
88
 
26
89
  _this.handleBlur = function (e) {
27
- if (_this.props.onBlur) {
28
- _this.props.onBlur(e);
90
+ return _this.props.onBlur == null ? void 0 : _this.props.onBlur(e);
91
+ };
92
+
93
+ _this.handleClear = function (e) {
94
+ // Only attempt to focus the input if the ref is an object. It won't work for refs that are functions.
95
+ if (typeof _this.props.innerRef === "object") {
96
+ var _this$props$innerRef$;
97
+
98
+ (_this$props$innerRef$ = _this.props.innerRef.current) == null ? void 0 : _this$props$innerRef$.focus();
29
99
  }
100
+
101
+ _this.props.onClear == null ? void 0 : _this.props.onClear(e);
30
102
  };
31
103
 
32
104
  _this.handleChange = function (e) {
33
- if (_this.props.onChange) {
34
- _this.props.onChange(e, e.currentTarget.value);
35
- }
105
+ return _this.props.onChange == null ? void 0 : _this.props.onChange(e, e.currentTarget.value);
36
106
  };
37
107
 
38
108
  _this.handleFocus = function (e) {
39
- if (_this.props.onFocus) {
40
- _this.props.onFocus(e);
41
- }
109
+ return _this.props.onFocus == null ? void 0 : _this.props.onFocus(e);
42
110
  };
43
111
 
44
112
  _this.handleKeyDown = function (e) {
45
- if (_this.props.onKeyDown) {
46
- _this.props.onKeyDown(e, e.currentTarget.value);
47
- }
113
+ return _this.props.onKeyDown == null ? void 0 : _this.props.onKeyDown(e, e.currentTarget.value);
48
114
  };
49
115
 
50
116
  _this.handleKeyUp = function (e) {
51
- if (_this.props.onKeyUp) {
52
- _this.props.onKeyUp(e, e.currentTarget.value);
53
- }
117
+ return _this.props.onKeyUp == null ? void 0 : _this.props.onKeyUp(e, e.currentTarget.value);
54
118
  };
55
119
 
56
120
  _this.handlePaste = function (e) {
57
- if (_this.props.onPaste) {
58
- _this.props.onPaste(e, e.currentTarget.value);
59
- }
121
+ return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
60
122
  };
61
123
 
62
124
  return _this;
@@ -83,9 +145,11 @@ var Input = /*#__PURE__*/function (_React$Component) {
83
145
  maxLength = _this$props.maxLength,
84
146
  ariaLabel = _this$props.ariaLabel,
85
147
  ariaDescribedby = _this$props.ariaDescribedby,
148
+ clearButtonLabel = _this$props.clearButtonLabel,
86
149
  innerRef = _this$props.innerRef,
87
150
  onBlur = _this$props.onBlur,
88
151
  onChange = _this$props.onChange,
152
+ onClear = _this$props.onClear,
89
153
  onFocus = _this$props.onFocus,
90
154
  onKeyDown = _this$props.onKeyDown,
91
155
  onKeyUp = _this$props.onKeyUp,
@@ -95,25 +159,44 @@ var Input = /*#__PURE__*/function (_React$Component) {
95
159
  _this$props$qa = _this$props.qa,
96
160
  qa = _this$props$qa === void 0 ? {} : _this$props$qa,
97
161
  appearance = _this$props.appearance,
98
- rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
162
+ size = _this$props.size,
163
+ rest = _objectWithoutPropertiesLoose(_this$props, _excluded); // Convert autoComplete from a boolean prop to a string value.
164
+
99
165
 
100
166
  var autoCompleteValue = undefined;
101
167
 
102
168
  if (autoComplete !== undefined) {
103
169
  autoCompleteValue = autoComplete ? "on" : "off";
104
- }
170
+ } // Add default elemBefore and elemAfter elements if type is search.
105
171
 
172
+
173
+ var elementBefore = type === "search" && !elemBefore ? /*#__PURE__*/React.createElement(Icon, {
174
+ name: "search",
175
+ ariaHidden: true,
176
+ color: "icon.base"
177
+ }) : elemBefore; // Do not add a ClearButton if no onClear callback is provided or if an elemAfter prop was passed.
178
+
179
+ var elementAfter = type === "search" && onClear && !elemAfter ? /*#__PURE__*/React.createElement(ClearButton, null) : elemAfter;
106
180
  return /*#__PURE__*/React.createElement(Container, _extends({
107
- hasBeforeElement: !!elemBefore,
108
- hasAfterElement: !!elemAfter,
181
+ hasBeforeElement: !!elementBefore,
182
+ hasAfterElement: !!elementAfter,
109
183
  disabled: disabled,
110
184
  invalid: !!isInvalid,
111
185
  warning: hasWarning,
112
- appearance: appearance // $FlowIssue - upgrade v0.112.0
113
-
114
- }, rest), elemBefore && /*#__PURE__*/React.createElement(Accessory, {
186
+ appearance: appearance,
187
+ size: size // $FlowIssue - upgrade v0.112.0
188
+
189
+ }, rest), /*#__PURE__*/React.createElement(InputContext.Provider, {
190
+ value: {
191
+ handleClear: this.handleClear,
192
+ hasValue: !!value,
193
+ clearButtonLabel: clearButtonLabel,
194
+ onClear: onClear,
195
+ size: size
196
+ }
197
+ }, elementBefore && /*#__PURE__*/React.createElement(Accessory, {
115
198
  before: true
116
- }, elemBefore), /*#__PURE__*/React.createElement("input", _extends({
199
+ }, elementBefore), /*#__PURE__*/React.createElement("input", _extends({
117
200
  "aria-invalid": !!isInvalid,
118
201
  "aria-label": ariaLabel,
119
202
  "aria-describedby": ariaDescribedby,
@@ -138,9 +221,10 @@ var Input = /*#__PURE__*/function (_React$Component) {
138
221
  "data-qa-input": name || "",
139
222
  "data-qa-input-isdisabled": disabled === true,
140
223
  "data-qa-input-isrequired": required === true
141
- }, qa, inputProps)), elemAfter && /*#__PURE__*/React.createElement(Accessory, {
142
- after: true
143
- }, elemAfter));
224
+ }, qa, inputProps)), elementAfter && /*#__PURE__*/React.createElement(Accessory, {
225
+ after: true,
226
+ isClearButton: isClearButton(elementAfter)
227
+ }, elementAfter)));
144
228
  };
145
229
 
146
230
  return Input;
@@ -151,6 +235,9 @@ Input.defaultProps = {
151
235
  disabled: false,
152
236
  type: "text",
153
237
  size: "default",
154
- appearance: "primary"
238
+ appearance: "primary",
239
+ innerRef: /*#__PURE__*/React.createRef()
155
240
  };
156
- export { Input as default };
241
+ Input.ClearButton = ClearButton;
242
+ Input.ClearButton.displayName = "Input.ClearButton";
243
+ export default Input;
@@ -73,7 +73,7 @@ export var Accessory = styled.div.withConfig({
73
73
  }, function (props) {
74
74
  return props.before && css(["left:", ";"], props.theme.space[350]);
75
75
  }, function (props) {
76
- return props.after && css(["right:", ";"], props.theme.space[350]);
76
+ return props.after && css(["right:", ";"], props.isClearButton ? 0 : props.theme.space[350]);
77
77
  });
78
78
  Container.displayName = "InputContainer";
79
79
  Accessory.displayName = "InputAccessory";
package/lib/Menu/index.js CHANGED
@@ -232,14 +232,6 @@ export var MenuRadio = function MenuRadio(props) {
232
232
  role: MENU_ITEM_ROLES.RADIO
233
233
  }, props));
234
234
  };
235
-
236
- var _StyledText = styled(Text).withConfig({
237
- displayName: "Menu___StyledText",
238
- componentId: "sc-1p3rdnp-0"
239
- })(["", ""], function (p) {
240
- return p._css;
241
- });
242
-
243
235
  export var MenuGroup = function MenuGroup(_ref2) {
244
236
  var children = _ref2.children,
245
237
  title = _ref2.title,
@@ -259,7 +251,7 @@ export var MenuGroup = function MenuGroup(_ref2) {
259
251
  fontWeight: 600,
260
252
  mt: 350,
261
253
  color: "text.headline",
262
- _css: isDisabled && disabled
254
+ $_css: isDisabled && disabled
263
255
  }, title)), /*#__PURE__*/React.createElement(Box, _extends({}, props, {
264
256
  p: 300,
265
257
  role: "group"
@@ -402,7 +394,7 @@ Menu.Divider.displayName = "Menu.Divider";
402
394
  Menu.FilterInput.displayName = "Menu.FilterInput";
403
395
  var CustomPopoutContent = styled(Popout.Content).withConfig({
404
396
  displayName: "Menu__CustomPopoutContent",
405
- componentId: "sc-1p3rdnp-1"
397
+ componentId: "sc-1p3rdnp-0"
406
398
  })(["padding:0;margin-left:0;margin-right:0;"]);
407
399
  export var MenuButton = function MenuButton(_ref5) {
408
400
  var content = _ref5.content,
@@ -456,4 +448,11 @@ export var MenuButton = function MenuButton(_ref5) {
456
448
  }
457
449
  }), children)));
458
450
  };
459
- export default Menu;
451
+ export default Menu;
452
+
453
+ var _StyledText = styled(Text).withConfig({
454
+ displayName: "Menu___StyledText",
455
+ componentId: "sc-1p3rdnp-1"
456
+ })(["", ""], function (p) {
457
+ return p.$_css;
458
+ });
@@ -1,9 +1,5 @@
1
- var _templateObject;
2
-
3
1
  var _excluded = ["className"];
4
2
 
5
- function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
6
-
7
3
  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); }
8
4
 
9
5
  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; }
@@ -38,7 +34,7 @@ function ReactModalAdapter(_ref) {
38
34
  }, props));
39
35
  }
40
36
 
41
- export var Body = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n .ReactModal__Body--open {\n overflow: hidden;\n }\n"]))); // eslint-disable-next-line prettier/prettier
37
+ export var Body = createGlobalStyle([".ReactModal__Body--open{overflow:hidden;}"]); // eslint-disable-next-line prettier/prettier
42
38
 
43
39
  export var Container = styled(ReactModalAdapter).withConfig({
44
40
  displayName: "styles__Container",
@@ -63,26 +63,14 @@ export function toast(options) {
63
63
  });
64
64
  }
65
65
 
66
- var _StyledBox = _styled(Box).withConfig({
67
- displayName: "Toast___StyledBox",
68
- componentId: "sc-1vii3dq-0"
69
- })(["", ""], function (p) {
70
- return p._css;
71
- });
72
-
73
66
  var IconBox = function IconBox(props) {
74
67
  return /*#__PURE__*/React.createElement(_StyledBox, _extends({
75
68
  display: "inline-block"
76
69
  }, props, {
77
- _css: "line-height: 1;"
70
+ $_css: "line-height: 1;"
78
71
  }));
79
72
  };
80
73
 
81
- var _StyledBox2 = _styled(Box).withConfig({
82
- displayName: "Toast___StyledBox2",
83
- componentId: "sc-1vii3dq-1"
84
- })(["transform:translateY(1px);"]);
85
-
86
74
  var Toast = function Toast(_ref) {
87
75
  var content = _ref.content,
88
76
  theme = _ref.theme,
@@ -120,4 +108,16 @@ var Toast = function Toast(_ref) {
120
108
  }))));
121
109
  };
122
110
 
123
- export default ToastContainer;
111
+ export default ToastContainer;
112
+
113
+ var _StyledBox = _styled(Box).withConfig({
114
+ displayName: "Toast___StyledBox",
115
+ componentId: "sc-1vii3dq-0"
116
+ })(["", ""], function (p) {
117
+ return p.$_css;
118
+ });
119
+
120
+ var _StyledBox2 = _styled(Box).withConfig({
121
+ displayName: "Toast___StyledBox2",
122
+ componentId: "sc-1vii3dq-1"
123
+ })(["transform:translateY(1px);"]);
@@ -1,7 +1,3 @@
1
- var _templateObject;
2
-
3
- function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
4
-
5
1
  import styled, { createGlobalStyle } from "styled-components";
6
2
  import Box from "../Box";
7
3
  import Icon from "../Icon"; // $FlowIssue
@@ -27,7 +23,7 @@ export var CustomIcon = styled(Icon).withConfig({
27
23
  }, function (p) {
28
24
  return p.customColor ? undefined : p.theme.colors.icon[p.type];
29
25
  });
30
- export var GlobalToastStyles = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\t", "\n\n\t.Toastify__toast:last-of-type {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.Toastify-container-overrides {\n\t\tpadding: 0;\n\t\twidth: 360px;\n\t}\n\n\t.Toastify-toast-overrides {\n\t\tpadding: 0;\n\t\tmin-height: 0;\n\t\tborder-radius: 2px;\n\t}\n\n\t.Toastify__toast-container--bottom-right {\n\t\tbottom: ", ";\n\t\tright: ", ";\n\t}\n\n\t/* Override React Toastify's mobile width styles */\n\t@media only screen and (max-width: 480px) {\n\t\t.Toastify-container-overrides {\n\t\t\tmin-width: initial;\n\t\t}\n\t}\n"])), toastStyles, function (p) {
26
+ export var GlobalToastStyles = createGlobalStyle(["", " .Toastify__toast:last-of-type{margin-bottom:0;}.Toastify-container-overrides{padding:0;width:360px;}.Toastify-toast-overrides{padding:0;min-height:0;border-radius:2px;}.Toastify__toast-container--bottom-right{bottom:", ";right:", ";}@media only screen and (max-width:480px){.Toastify-container-overrides{min-width:initial;}}"], toastStyles, function (p) {
31
27
  return p.theme.space[400];
32
28
  }, function (p) {
33
29
  return p.theme.space[400];
@@ -284,7 +284,7 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
284
284
  "aria-invalid": !!isInvalid,
285
285
  "aria-label": ariaLabel,
286
286
  autoFocus: autoFocus,
287
- autocomplete: autocomplete,
287
+ autoComplete: autocomplete,
288
288
  disabled: disabled,
289
289
  id: id,
290
290
  name: name,
@@ -159,7 +159,10 @@ var colors = _extends({}, lightTheme.colors, {
159
159
  subtext: COLORS.COLOR_NEUTRAL_300,
160
160
  body: COLORS.COLOR_NEUTRAL_100,
161
161
  inverse: COLORS.COLOR_NEUTRAL_900,
162
- error: COLORS.COLOR_RED_400
162
+ error: COLORS.COLOR_RED_400,
163
+ background: {
164
+ highlight: COLORS.COLOR_YELLOW_900
165
+ }
163
166
  },
164
167
  icon: {
165
168
  base: COLORS.COLOR_NEUTRAL_100,
@@ -157,7 +157,10 @@ var colors = _extends({
157
157
  subtext: COLORS.COLOR_NEUTRAL_700,
158
158
  body: COLORS.COLOR_NEUTRAL_800,
159
159
  inverse: COLORS.COLOR_NEUTRAL_0,
160
- error: COLORS.COLOR_RED_800
160
+ error: COLORS.COLOR_RED_800,
161
+ background: {
162
+ highlight: COLORS.COLOR_YELLOW_200
163
+ }
161
164
  },
162
165
  icon: {
163
166
  base: COLORS.COLOR_NEUTRAL_800,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/racine",
3
- "version": "11.3.1-beta-deps.4",
3
+ "version": "11.4.0-input-beta.0",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "__flow__",
@@ -69,7 +69,7 @@
69
69
  "lodash.curry": "^4.1.1",
70
70
  "lodash.uniqueid": "^4.0.1",
71
71
  "lru-memoize": "^1.1.0",
72
- "mutationobserver-shim": "^0.3.7",
72
+ "mutationobserver-shim": "^0.3.3",
73
73
  "polished": "^3.4.1",
74
74
  "raw-loader": "^3.0.0",
75
75
  "react-focus-lock": "^2.0.3",
@@ -84,7 +84,7 @@
84
84
  },
85
85
  "devDependencies": {
86
86
  "@babel/cli": "^7.5.5",
87
- "@babel/core": "^7.12.9",
87
+ "@babel/core": "^7.4.5",
88
88
  "@babel/plugin-proposal-class-properties": "^7.4.4",
89
89
  "@babel/plugin-syntax-dynamic-import": "^7.0.0",
90
90
  "@babel/preset-env": "^7.8.0",
@@ -99,27 +99,23 @@
99
99
  "@sproutsocial/seeds-networkcolor": "^2.9.0",
100
100
  "@sproutsocial/seeds-space": "^0.4.7",
101
101
  "@sproutsocial/seeds-typography": "^3.0.1",
102
- "@storybook/addon-a11y": "^6.4.19",
103
- "@storybook/addon-actions": "^6.4.19",
104
- "@storybook/addon-controls": "^6.4.19",
105
- "@storybook/addon-knobs": "^6.4.0",
106
- "@storybook/addon-storysource": "^6.4.19",
107
- "@storybook/addon-viewport": "^6.4.19",
108
- "@storybook/addons": "^6.4.19",
102
+ "@storybook/addon-a11y": "^6.1.11",
103
+ "@storybook/addon-actions": "^6.3.8",
104
+ "@storybook/addon-knobs": "^6.1.11",
105
+ "@storybook/addon-storysource": "^6.1.11",
106
+ "@storybook/addon-viewport": "^6.1.11",
107
+ "@storybook/addons": "^6.1.11",
109
108
  "@storybook/react": "^6.4.19",
110
- "@storybook/theming": "^6.4.19",
111
- "@testing-library/jest-dom": "^5.16.4",
109
+ "@storybook/theming": "^6.1.11",
112
110
  "@testing-library/react": "^11.2.2",
113
111
  "@testing-library/user-event": "^13.0.0",
114
- "@univision/babel-plugin-styled-components": "^1.10.9",
115
- "axios": "^0.26.1",
116
112
  "babel-core": "^7.0.0-bridge",
117
113
  "babel-eslint": "10.1.0",
118
- "babel-jest": "27.x.x",
119
- "babel-loader": "8.2.3",
114
+ "babel-jest": "26.1.0",
115
+ "babel-loader": "8.0.6",
120
116
  "babel-plugin-inline-import": "^3.0.0",
121
117
  "babel-plugin-polished": "^1.1.0",
122
- "babel-plugin-styled-components": "^2.0.7",
118
+ "babel-plugin-styled-components": "^1.10.0",
123
119
  "babel-polyfill": "^6.26.0",
124
120
  "chalk": "^2.3.2",
125
121
  "chokidar": "^3.0.2",
@@ -141,8 +137,9 @@
141
137
  "identity-obj-proxy": "^3.0.0",
142
138
  "inquirer": "^6.4.1",
143
139
  "is-glob": "^4.0.1",
144
- "jest": "27.x.x",
145
- "jest-axe": "6.0.0",
140
+ "jest": "26.1.0",
141
+ "jest-axe": "3.4.0",
142
+ "jest-dom": "^3.5.0",
146
143
  "jest-styled-components": "7.0.0-beta.1",
147
144
  "jscodeshift": "^0.6.4",
148
145
  "json-to-scss": "^1.6.2",
@@ -151,15 +148,15 @@
151
148
  "npm-run-all": "^4.1.2",
152
149
  "outdent": "^0.7.0",
153
150
  "pify": "^4.0.1",
154
- "playroom": "^0.27.9",
151
+ "playroom": "^0.22.2",
155
152
  "prettier": "^2.0.5",
156
153
  "prop-types": "^15.6.1",
157
154
  "react": "16.12.0",
158
155
  "react-dates": "^21.8.0",
159
156
  "react-dom": "16.12.0",
160
157
  "rimraf": "^2.6.3",
161
- "storybook-dark-mode": "^1.0.9",
162
- "styled-components": "^5.2.3",
158
+ "storybook-dark-mode": "^1.0.7",
159
+ "styled-components": "5.0.0-rc.2",
163
160
  "stylelint": "^13.8.0",
164
161
  "stylelint-config-recommended": "^2.2.0",
165
162
  "stylelint-config-styled-components": "^0.1.1",
@@ -181,15 +178,13 @@
181
178
  "prop-types": "^15.0.0",
182
179
  "react": "^16.2.0",
183
180
  "react-dates": "^21.8.0",
184
- "react-virtualized": "9.18.5",
185
- "styled-components": "^5.2.3"
181
+ "styled-components": "^5.0.0-rc.2"
186
182
  },
187
183
  "resolutions": {
188
184
  "lodash": "^4.17.21",
189
185
  "react-popper/create-react-context": "^0.3.0"
190
186
  },
191
187
  "jest": {
192
- "testEnvironment": "jsdom",
193
188
  "setupFilesAfterEnv": [
194
189
  "<rootDir>/src/setupTests.js"
195
190
  ],
package/bin/buildNpm.js DELETED
@@ -1,58 +0,0 @@
1
- /**
2
- * This file handles the generation of an .npmrc with Jfrog credentials during the CI process.
3
- * It replicates the local configuration requirements of a developer running `yarn` on their machine
4
- * If run locally please do not commit your auth credentials
5
- */
6
- const fs = require("fs");
7
- const https = require("https");
8
- const { exit } = require("process");
9
-
10
- const { ARTIFACTORY_KEY, CI } = process.env;
11
-
12
- // Check if we're in CI context, otherwise skip the process
13
- if (!CI) {
14
- exit();
15
- }
16
-
17
- const options = {
18
- hostname: "sproutsocial.jfrog.io",
19
- path: "/artifactory/api/npm/auth",
20
- method: "GET",
21
- headers: {
22
- "X-JFrog-Art-Api": ARTIFACTORY_KEY,
23
- },
24
- };
25
-
26
- const req = https.request(options, (res) => {
27
- console.log(`statusCode: ${res.statusCode}`);
28
-
29
- // Call our auth endpoint with environment credentials
30
- res.on("data", (data) => {
31
- // Writes out an .npmrc file with the response
32
- fs.writeFile(".npmrc", data, (err) => {
33
- if (err) console.log(err);
34
- else {
35
- console.log(".npmrc generated successfully!");
36
- }
37
- });
38
-
39
- // Once the file is created we append the registry info
40
- fs.appendFile(
41
- ".npmrc",
42
- "registry=https://sproutsocial.jfrog.io/artifactory/api/npm/npm_virtual",
43
- function (err) {
44
- if (err) throw err;
45
- console.log("Registry Config Added!");
46
- }
47
- );
48
-
49
- // Finally, we set permissions for the file so that netlify recognizes it
50
- fs.chmodSync(".npmrc", "0600");
51
- });
52
- });
53
-
54
- req.on("error", (error) => {
55
- console.error(error);
56
- });
57
-
58
- req.end();