@atlaskit/reactions 21.5.1 → 21.6.1

package/extract-react-type/ConnectedReactionsView.ts

@@ -1,8 +1,6 @@
-import type { Props as ConnectedReactionViewProps } from '../src/containers/ConnectedReactionsView';
+import type { ConnectedReactionsViewProps } from '../src/containers';
 
 /**
- * The props definition in custom-item.tsx breaks ERT unfortunately,
- * because we had to typecast the component to make forwardRef work with generics
- * (for the custom component props).
+ * The props definition in src/containers/ConnectedReactionsView.tsx breaks ERT unfortunately, hence this hack (for the custom component props).
  */
-export default function (_: ConnectedReactionViewProps) {}
+export default function (_: ConnectedReactionsViewProps) {}

package/extract-react-type/Reaction.ts

@@ -1,8 +1,6 @@
-import type { Props as ReactionProps } from '../src/components/Reaction';
+import type { ReactionProps } from '../src/components';
 
 /**
- * The props definition in custom-item.tsx breaks ERT unfortunately,
- * because we had to typecast the component to make forwardRef work with generics
- * (for the custom component props).
+ * The props definition in src/components/Reaction/Reaction.ts breaks ERT unfortunately, hence this hack (for the custom component props).
  */
 export default function (_: ReactionProps) {}

package/extract-react-type/Reactions.ts

@@ -1,8 +1,6 @@
-import type { ReactionsProps } from '../src/components/Reactions';
+import type { ReactionsProps } from '../src/components';
 
 /**
- * The props definition in custom-item.tsx breaks ERT unfortunately,
- * because we had to typecast the component to make forwardRef work with generics
- * (for the custom component props).
+ * The props definition in src/components/Reactions/Reactions.tsx breaks ERT unfortunately, hence this hack (for the custom component props).
  */
 export default function (_: ReactionsProps) {}

package/extract-react-type/actions.ts

@@ -1,8 +1,6 @@
 import type { Actions } from '../src/types';
 
 /**
- * The props definition in custom-item.tsx breaks ERT unfortunately,
- * because we had to typecast the component to make forwardRef work with generics
- * (for the custom component props).
+ * The props definition in src/types/action.ts breaks ERT unfortunately, hence this hack (for the custom component props).
  */
 export default function (_: Actions) {}

package/extract-react-type/reactionClient.ts

@@ -1,8 +1,6 @@
-import type { ReactionClient } from '../src/client/ReactionClient';
+import type { Client } from '../src/types';
 
 /**
- * The props definition in custom-item.tsx breaks ERT unfortunately,
- * because we had to typecast the component to make forwardRef work with generics
- * (for the custom component props).
+ * The props definition in src/types/client.ts breaks ERT unfortunately, hence this hack (for the custom component props).
  */
-export default function (_: ReactionClient) {}
+export default function (_: Client) {}

package/extract-react-type/reactionsStore.ts

@@ -1,8 +1,6 @@
-import type { ReactionsStore } from '../src/store/ReactionsStore';
+import type { Store } from '../src/types';
 
 /**
- * The props definition in custom-item.tsx breaks ERT unfortunately,
- * because we had to typecast the component to make forwardRef work with generics
- * (for the custom component props).
+ * The props definition in src/types/store.ts breaks ERT unfortunately, hence this hack (for the custom component props).
  */
-export default function (_: ReactionsStore) {}
+export default function (_: Store) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "21.5.1",
+  "version": "21.6.1",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "atlaskit:src": "src/index.ts",
   "atlassian": {
     "team": "TWP Collaboration Platform",
@@ -30,11 +37,11 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/emoji": "^65.1.0",
+    "@atlaskit/emoji": "^65.2.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/motion": "^1.2.0",
     "@atlaskit/popper": "^5.0.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/ufo": "^0.1.0",
@@ -50,21 +57,27 @@
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.4.5",
     "@atlaskit/docs": "^9.0.0",
-    "@atlaskit/editor-test-helpers": "^17.1.0",
+    "@atlaskit/editor-test-helpers": "^17.2.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/section-message": "^6.0.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/util-data-test": "^17.5.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.1.0",
+    "@emotion/jest": "^11.8.0",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "@types/webpack-dev-server": "^3.11.2",
+    "dotenv": "^8.2.0",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "es6-promise": "^4.0.5",
     "fetch-mock": "^8.0.0",
     "react": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0",
     "webpack-dev-server": "^3.11.2"
   },
@@ -80,5 +93,15 @@
       "tree-shaking": []
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "scripts": {
+    "setup-first-time": "yarn run setup-local-config; yarn run setup-env",
+    "setup-local-config": "cp -nv local-config-template.ts local-config.ts",
+    "setup-env": "cp -nv .env-template .env",
+    "start": "cd ../../ && yarn start reactions",
+    "test": "cd ../../ && yarn test reactions",
+    "typecheck": "cd ../../ && yarn typecheck:package ./packages/elements/reactions",
+    "start:dev": "cd ../../ && yarn start reactions --proxy ./packages/elements/reactions/proxy.ts",
+    "start:edge": "cd ../../ && PROXY_TARGET_ENV=edge yarn start reactions --proxy ./packages/elements/reactions/proxy.ts"
+  }
 }

package/dist/cjs/components/EmojiButton.js

@@ -1,100 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EmojiButton = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _core = require("@emotion/core");
-
-var _element = require("@atlaskit/emoji/element");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _utils = require("./utils");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var emojiButtonStyle = (0, _core.css)({
-  outline: 'none',
-  display: 'flex',
-  backgroundColor: 'transparent',
-  border: 0,
-  borderRadius: '5px',
-  cursor: 'pointer',
-  margin: '0',
-  padding: '10px 8px',
-  '&:hover > span': {
-    transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
-    transform: 'scale(1.33)'
-  }
-});
-
-var EmojiButton = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(EmojiButton, _PureComponent);
-
-  var _super = _createSuper(EmojiButton);
-
-  function EmojiButton() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, EmojiButton);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseDown", function (event) {
-      event.preventDefault();
-
-      if (_this.props.onClick && (0, _utils.isLeftClick)(event)) {
-        _this.props.onClick(_this.props.emojiId, undefined, event);
-      }
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(EmojiButton, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          emojiId = _this$props.emojiId,
-          emojiProvider = _this$props.emojiProvider;
-      return (0, _core.jsx)("button", {
-        onMouseUp: this.handleMouseDown,
-        css: emojiButtonStyle
-      }, (0, _core.jsx)(_element.ResourcedEmoji, {
-        emojiProvider: emojiProvider,
-        emojiId: emojiId
-      }));
-    }
-  }]);
-  return EmojiButton;
-}(_react.PureComponent);
-
-exports.EmojiButton = EmojiButton;

package/dist/cjs/components/Reaction.js

@@ -1,229 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Reaction = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _core = require("@emotion/core");
-
-var _analyticsNext = require("@atlaskit/analytics-next");
-
-var _element = require("@atlaskit/emoji/element");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _tokens = require("@atlaskit/tokens");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _analytics = require("../analytics");
-
-var _Counter = require("./Counter");
-
-var _FlashAnimation = require("./FlashAnimation");
-
-var _ReactionTooltip = require("./ReactionTooltip");
-
-var _utils = require("./utils");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-/**
- * Styling Note:
- * Padding and line height are set within the child components
- * of FlashAnimation b/c it otherwise throws off the flash styling
- */
-var emojiStyle = (0, _core.css)({
-  transformOrigin: 'center center 0',
-  lineHeight: '12px',
-  padding: '4px 4px 4px 8px'
-});
-var reactionStyle = (0, _core.css)({
-  outline: 'none',
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'flex-start',
-  minWidth: '36px',
-  height: "".concat(_utils.akHeight, "px"),
-  background: 'transparent',
-  border: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N40)),
-  boxSizing: 'border-box',
-  borderRadius: '20px',
-  color: "".concat((0, _tokens.token)('color.text.subtle', _colors.N400)),
-  cursor: 'pointer',
-  margin: 0,
-  padding: 0,
-  transition: '200ms ease-in-out',
-  '&:hover': {
-    background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
-  }
-});
-var reactedStyle = (0, _core.css)({
-  backgroundColor: (0, _tokens.token)('color.background.selected', _colors.B50),
-  borderColor: (0, _tokens.token)('color.border.selected', _colors.B300),
-  '&:hover': {
-    background: "".concat((0, _tokens.token)('color.background.selected.hovered', _colors.B75))
-  }
-});
-var flashHeight = _utils.akHeight - 2; // height without the 1px border
-
-var flashStyle = (0, _core.css)({
-  display: 'flex',
-  flexDirection: 'row',
-  borderRadius: '10px',
-  height: "".concat(flashHeight, "px")
-});
-/**
- * @param id give id for the emoji
- * @param event selected mouse event proerties
- */
-
-var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(ReactionWithoutAnalytics, _PureComponent);
-
-  var _super = _createSuper(ReactionWithoutAnalytics);
-
-  function ReactionWithoutAnalytics(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ReactionWithoutAnalytics);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mounted", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseDown", function (event) {
-      event.preventDefault();
-      event.stopPropagation();
-
-      if (_this.props.onClick && (0, _utils.isLeftClick)(event)) {
-        var _this$props = _this.props,
-            _reaction = _this$props.reaction,
-            createAnalyticsEvent = _this$props.createAnalyticsEvent;
-        var reacted = _reaction.reacted,
-            emojiId = _reaction.emojiId;
-        (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionClickedEvent, !reacted, emojiId);
-
-        _this.props.onClick(_this.props.reaction.emojiId, event);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseEnter", function (event) {
-      event.preventDefault();
-      var _this$props2 = _this.props,
-          onMouseEnter = _this$props2.onMouseEnter,
-          reaction = _this$props2.reaction;
-
-      if (!reaction.users || !reaction.users.length) {
-        _this.hoverStart = Date.now();
-      }
-
-      if (onMouseEnter) {
-        onMouseEnter(_this.props.reaction, event);
-      }
-    });
-    _this.state = {};
-    return _this;
-  }
-
-  (0, _createClass2.default)(ReactionWithoutAnalytics, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(_ref) {
-      var prevReaction = _ref.reaction;
-
-      if (!prevReaction.users && this.props.reaction.users) {
-        (0, _analytics.createAndFireSafe)(this.props.createAnalyticsEvent, _analytics.createReactionHoveredEvent, this.hoverStart);
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      this.mounted = true;
-      this.props.emojiProvider.then(function (emojiResource) {
-        return emojiResource.findByEmojiId({
-          shortName: '',
-          id: _this2.props.reaction.emojiId
-        });
-      }).then(function (foundEmoji) {
-        if (foundEmoji && _this2.mounted) {
-          _this2.setState({
-            emojiName: foundEmoji.name
-          });
-        }
-      });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.mounted = false;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          emojiProvider = _this$props3.emojiProvider,
-          reaction = _this$props3.reaction,
-          classNameProp = _this$props3.className,
-          flash = _this$props3.flash;
-      var emojiName = this.state.emojiName;
-      var emojiId = {
-        id: reaction.emojiId,
-        shortName: ''
-      };
-      return (0, _core.jsx)(_ReactionTooltip.ReactionTooltip, {
-        emojiName: emojiName,
-        reaction: reaction
-      }, (0, _core.jsx)("button", {
-        className: classNameProp,
-        css: [reactionStyle, reaction.reacted && reactedStyle],
-        onMouseUp: this.handleMouseDown,
-        onMouseEnter: this.handleMouseEnter
-      }, (0, _core.jsx)(_FlashAnimation.FlashAnimation, {
-        flash: flash,
-        css: flashStyle
-      }, (0, _core.jsx)("div", {
-        css: emojiStyle
-      }, (0, _core.jsx)(_element.ResourcedEmoji, {
-        emojiProvider: emojiProvider,
-        emojiId: emojiId,
-        fitToHeight: 16
-      })), (0, _core.jsx)(_Counter.Counter, {
-        value: reaction.count,
-        highlight: reaction.reacted
-      }))));
-    }
-  }]);
-  return ReactionWithoutAnalytics;
-}(_react.PureComponent);
-
-(0, _defineProperty2.default)(ReactionWithoutAnalytics, "defaultProps", {
-  flash: false,
-  className: undefined,
-  onMouseEnter: undefined
-});
-(0, _defineProperty2.default)(ReactionWithoutAnalytics, "displayName", 'Reaction');
-var Reaction = (0, _analyticsNext.withAnalyticsEvents)()(ReactionWithoutAnalytics);
-exports.Reaction = Reaction;