@atlaskit/emoji 65.0.0 → 65.2.0

package/docs/0-intro.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
-import { md, Example, code, AtlassianInternalWarning } from '@atlaskit/docs';
-import SectionMessage, {
-  SectionMessageAction,
-} from '@atlaskit/section-message';
+import {
+  md,
+  Example,
+  code,
+  AtlassianInternalWarning,
+  Props,
+} from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
 import SimpleEmojiExample from '../examples/00-simple-emoji';
 
 const SimpleEmojiSource = require('!!raw-loader!../examples/00-simple-emoji');
+const EmojiProps = require('!!extract-react-types-loader!../src/components/common/Emoji');
 
 export default md`
   ${(<AtlassianInternalWarning />)}
@@ -20,9 +25,9 @@ export default md`
 
   ${code`
   import EmojiPicker from '@atlaskit/emoji/picker';
-  import { EmojiResource } from '@atlaskit/emoji/resource';
+  import { EmojiResource, EmojiResourceConfig } from '@atlaskit/emoji/resource';
 
-  const emojiProvider = new EmojiResource({
+  const config: EmojiResourceConfig = {
     providers: [
       {
         url: 'https://emoji-example/emoji/standard',
@@ -36,7 +41,9 @@ export default md`
         }),
       },
     ],
-  });
+  }
+
+  const emojiProvider = new EmojiResource(config);
 
   ReactDOM.render(
     <EmojiPicker
@@ -46,7 +53,25 @@ export default md`
       }}
     />,
     container,
-  );`}
+  );
+  `}
+
+
+
+  ${(
+    <>
+      <br />
+      <SectionMessage
+        appearance="warning"
+        title="Emoji provider is required to be configured in order to use components from this package."
+      >
+        <p>
+          Please refer to `Emoji picker` section for more information on how to
+          configure emoji provider.
+        </p>
+      </SectionMessage>
+    </>
+  )}
 
   ### Other emoji components import examples
 
@@ -75,27 +100,10 @@ export default md`
     <Example
       packageName="@atlaskit/emoji"
       Component={SimpleEmojiExample}
-      title="Emoji"
+      title=" Simple Emoji"
       source={SimpleEmojiSource}
     />
   )}
 
-  ${(
-    <SectionMessage
-      appearance="warning"
-      title="Props can not be displayed for the time being."
-      actions={[
-        {
-          key: '1',
-          href:
-            'https://bitbucket.org/atlassian/atlaskit-mk-2/src/master/packages/elements/emoji/src/components/common/Emoji.tsx',
-          text: 'Emoji Props',
-        },
-      ].map(({ text, ...restAction }) => (
-        <SectionMessageAction {...restAction}>{text}</SectionMessageAction>
-      ))}
-    >
-      <p>You can still find props in the source code.</p>
-    </SectionMessage>
-  )}
+  ${(<Props props={EmojiProps} />)}
 `;

package/docs/1-resourced-emoji.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { md, Example, code, Props } from '@atlaskit/docs';
+import ResourcedEmojiExample from '../examples/23-optimistic-emoji';
+
+const ResourcedEmojiSource = require('!!raw-loader!../examples/23-optimistic-emoji');
+const ResourcedEmojiProps = require('!!extract-react-types-loader!../src/components/common/ResourcedEmojiComponent');
+
+export default md`
+  ## Usage
+
+  Import the component in your React app as follows:
+
+  ${code`
+  import { ResourcedEmoji } from '@atlaskit/emoji';
+  import { EmojiResource, EmojiResourceConfig } from '@atlaskit/emoji/resource';
+
+  const config: EmojiResourceConfig = {
+    singleEmojiApi: {
+      getUrl: (emojiId: string) => 'https://emoji-example/emoji/site-id/emojiId',
+      securityProvider: () => ({
+        headers: {
+          'User-Context': '{{token}}',
+          Authorization: 'Bearer {{token}}',
+        },
+      })
+    },
+    optimisticImageApi: {
+      getUrl: (emojiId: string) => 'https://emoji-example/emoji/site-id/emojiId/path',
+      securityProvider: () => ({
+        headers: {
+          'User-Context': '{{token}}',
+          Authorization: 'Bearer {{token}}',
+        },
+      })
+    },
+    providers: [
+      {
+        url: 'https://emoji-example/emoji/standard',
+      },
+      {
+        url: 'https://emoji-example/emoji/site-id/site',
+        securityProvider: () => ({
+          headers: {
+            Authorization: 'Bearer {{token}}',
+          },
+        }),
+      },
+    ],
+  }
+
+  const emojiProvider = new EmojiResource(config);
+  const emojiId = { shortName: ':grimacing:', id: '1f603' };
+
+  ReactDOM.render(
+    <ResourcedEmoji
+      emojiId={emojiId}
+      emojiProvider={emojiProvider}
+      optimistic
+      optimisticImageURL={emojiProvider.getOptimisticImageURL(emojiId)}
+    />,
+    container,
+  );`}
+
+  ${(
+    <Example
+      packageName="@atlaskit/emoji"
+      Component={ResourcedEmojiExample}
+      title="Resourced Emoji"
+      source={ResourcedEmojiSource}
+    />
+  )}
+
+  ${(<Props props={ResourcedEmojiProps} />)}
+`;

package/docs/2-emoji-picker.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { md, Example, code, Props } from '@atlaskit/docs';
+import EmojiPickerExample from '../examples/05-standard-emoji-picker-with-upload';
+
+const EmojiPickerSource = require('!!raw-loader!../examples/05-standard-emoji-picker-with-upload');
+const EmojiPickerProps = require('!!extract-react-types-loader!../src/components/picker/EmojiPickerComponent');
+
+export default md`
+  ## Usage
+
+  Import the component in your React app as follows:
+
+  ${code`
+  import EmojiPicker from '@atlaskit/emoji/picker';
+  import { EmojiResource, EmojiResourceConfig } from '@atlaskit/emoji/resource';
+
+  const config: EmojiResourceConfig = {
+    providers: [
+      {
+        url: 'https://emoji-example/emoji/standard',
+      },
+      {
+        url: 'https://emoji-example/emoji/site-id/site',
+        securityProvider: () => ({
+          headers: {
+            Authorization: 'Bearer token',
+          },
+        }),
+      },
+    ],
+  }
+
+  const emojiProvider = new EmojiResource(config);
+
+  ReactDOM.render(
+    <EmojiPicker
+      emojiProvider={emojiProvider}
+      onSelection={emoji => {
+        /* do something */
+      }}
+    />,
+    container,
+  );
+  `}
+
+  ${(
+    <Example
+      packageName="@atlaskit/emoji"
+      Component={EmojiPickerExample}
+      title="Emoji Picker"
+      source={EmojiPickerSource}
+    />
+  )}
+
+  ${(<Props props={EmojiPickerProps} />)}
+`;

package/docs/3-typeahead.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { md, Example, Props } from '@atlaskit/docs';
+import TypeAheadiExample from '../examples/03-standard-emoji-typeahead';
+
+const TypeAheadSource = require('!!raw-loader!../examples/03-standard-emoji-typeahead');
+const TypeAheadProps = require('!!extract-react-types-loader!../src/components/typeahead/EmojiTypeAheadComponent');
+
+export default md`
+
+  ${(
+    <Example
+      packageName="@atlaskit/emoji"
+      Component={TypeAheadiExample}
+      title="Typeahead"
+      source={TypeAheadSource}
+    />
+  )}
+
+  ${(<Props props={TypeAheadProps} />)}
+`;

package/docs/4-emoji-provider.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { md, code } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
+
+export default md`
+Emoji provider mainly controls what type of emojis you want to support, how to resolve emojis, and how to upload custom emojis if enabled.
+
+This is a basic example of emoji provider, supporting standard, atlassian, and site emojis:
+
+${code`
+  const emojiProvider = new EmojiResource({
+    providers: [
+      {
+        url: '/gateway/emoji/standard',
+      },
+      {
+        url: '/gateway/emoji/atlassian',
+      },
+      {
+        url: '/gateway/emoji/{cloudId}/site',
+        securityProvider: () => ({ headers: { Authorization: 'Bearer token' }}), // not needed if session token cookie is available.
+      },
+    ],
+    allowUpload: true,
+    currentUser: { id: { uid } }
+  });`}
+
+  ${(
+    <>
+      <br />
+      <SectionMessage
+        appearance="warning"
+        title="There should be only one instance of EmojiResource in your application"
+      >
+        <p>Make sure EmojiResource is initialised only once.</p>
+      </SectionMessage>
+    </>
+  )}
+
+The emoji provider plays a vital role to glue with our backend emoji service. Emoji metadata is fetched based on the url defined in providers array.
+After a successful fetch the emoji resource holds emoji data for rendering emoji in picker, single emoji or the typeahead component.
+Uploading and rendering site specific emojis is only available for Atlassian services.
+
+Initialising EmojiResource doesn't fetch emoji data on initialization. If EmojiResource is being passed into ResourcedEmoji, EmojiPicker or Typeahead no further action is required.
+Emoji meta data will be fetched on first component render. If EmojiResource is being used outside of the context of the above components, fetching meta data requires to be triggered manually.
+
+${code`
+  const emojiProvider = new EmojiResource(emojiConfig);
+  emojiProvider.fetchEmojiProvider();
+`}
+
+### Configuration options
+
+${code`
+  interface EmojiResourceConfig {
+    /**
+     * The service configuration for remotely recording emoji selections.
+     * A post will be performed to this URL with the EmojiId as the body.
+     */
+    recordConfig?: ServiceConfig;
+
+    /**
+     * This defines the different providers. Later providers will override earlier
+     * providers when performing shortName based look up.
+     */
+    providers: ServiceConfig[];
+
+    /**
+     * Must be set to true to enable upload support in the emoji components.
+     *
+     * Can be used for the restriction of the upload UI based on permissions, or feature flags.
+     *
+     * Note this also requires that other conditions are met (for example, one of the providers
+     * must support upload for the UploadingEmojiResource implementation of UploadingEmojiProvider).
+     */
+    allowUpload?: boolean;
+
+    /**
+     * Logged user in the Product.
+     */
+    currentUser?: User;
+
+    /**
+     * This is specifically used for fetching a meta information of a single emoji.
+     * Useful for when rendering a single or a subset of emojis on a page that does not require the
+     * whole provider list to be downloaded.
+     */
+    singleEmojiApi?: SingleEmojiApiLoaderConfig;
+
+    /**
+     * Renders an image while the provider is being downloaded to reduce the time
+     * the user is being presented with a placeholder
+     */
+    optimisticImageApi?: OptimisticImageApiLoaderConfig;
+  }
+`}
+
+`;

package/local-config-example.ts

@@ -29,7 +29,9 @@ export default {
   },
   optimisticImageApi: {
     getUrl: (emojiId: EmojiId) =>
-      `http://www.example.org/site-id/${emojiId.id || emojiId.shortName}/path`,
+      `http://www.example.org/emoji/site-id/${
+        emojiId.id || emojiId.shortName
+      }/path`,
     securityProvider: () => ({
       headers: {
         'User-Context': '{token}',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "65.0.0",
+  "version": "65.2.0",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,8 +31,8 @@
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/media-client": "^17.1.0",
     "@atlaskit/spinner": "^15.0.0",
-    "@atlaskit/textfield": "^5.1.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/textfield": "^5.2.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/ufo": "^0.1.0",
@@ -56,18 +56,21 @@
     "@atlaskit/editor-test-helpers": "^17.1.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/media-core": "^33.0.0",
-    "@atlaskit/section-message": "^6.0.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/util-data-test": "^17.4.0",
+    "@atlaskit/util-data-test": "^17.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.1.10",
+    "@emotion/jest": "^11.8.0",
+    "@testing-library/dom": "^7.7.3",
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^8.0.1",
     "@testing-library/user-event": "10.4.0",
     "@types/js-search": "^1.4.0",
     "@types/react-virtualized": "^9.18.12",
     "@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",
@@ -78,7 +81,7 @@
     "react-intl-next": "npm:react-intl@^5.18.1",
     "rxjs": "^5.5.0",
     "sinon": "^2.2.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.5",
     "wait-for-expect": "^1.2.0",
     "webpack-dev-server": "^3.11.2"
   },
@@ -91,5 +94,15 @@
     "@repo/internal": {
       "theming": "tokens"
     }
+  },
+  "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 emoji",
+    "test": "cd ../../ && yarn test emoji",
+    "typecheck": "cd ../../ && yarn typecheck:package ./packages/elements/emoji",
+    "start:dev": "cd ../../ && yarn start emoji --proxy ./packages/elements/emoji/proxy.ts",
+    "start:edge": "cd ../../ && PROXY_TARGET_ENV=edge yarn start emoji --proxy ./packages/elements/emoji/proxy.ts"
   }
 }

package/dist/cjs/components/common/EmojiPreview.js

@@ -1,194 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.EmojiPreview = 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 _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-
-var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
-
-var _react = require("react");
-
-var _reactIntlNext = require("react-intl-next");
-
-var _EmojiButton = _interopRequireDefault(require("../../components/common/EmojiButton"));
-
-var _i18n = require("../i18n");
-
-var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
-
-var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
-
-var _styles = require("./styles");
-
-var _EmojiPreviewComponent = require("./EmojiPreviewComponent");
-
-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 EmojiPreview = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(EmojiPreview, _PureComponent);
-
-  var _super = _createSuper(EmojiPreview);
-
-  function EmojiPreview() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, EmojiPreview);
-
-    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), "state", {
-      selectingTone: false
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToneButtonClick", function () {
-      _this.setState({
-        selectingTone: !_this.state.selectingTone
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToneSelected", function (toneValue) {
-      _this.setState({
-        selectingTone: false
-      });
-
-      if (_this.props.onToneSelected) {
-        _this.props.onToneSelected(toneValue);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function () {
-      var selectingTone = _this.state.selectingTone;
-      var onToneSelectorCancelled = _this.props.onToneSelectorCancelled;
-
-      if (selectingTone && onToneSelectorCancelled) {
-        onToneSelectorCancelled();
-      }
-
-      _this.setState({
-        selectingTone: false
-      });
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(EmojiPreview, [{
-    key: "renderTones",
-    value: function renderTones() {
-      var _this$props = this.props,
-          toneEmoji = _this$props.toneEmoji,
-          selectedTone = _this$props.selectedTone,
-          intl = _this$props.intl;
-      var formatMessage = intl.formatMessage;
-
-      if (!toneEmoji) {
-        return null;
-      }
-
-      var previewEmoji = toneEmoji;
-
-      if (selectedTone && previewEmoji.skinVariations) {
-        previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
-      }
-
-      return (0, _core.jsx)("div", {
-        className: _styles.toneSelectorContainer
-      }, this.state.selectingTone && (0, _core.jsx)(_ToneSelector.default, {
-        emoji: toneEmoji,
-        onToneSelected: this.onToneSelected,
-        previewEmojiId: previewEmoji.id
-      }), (0, _core.jsx)(_EmojiButton.default, {
-        ariaExpanded: this.state.selectingTone,
-        emoji: previewEmoji,
-        selectOnHover: true,
-        onSelected: this.onToneButtonClick,
-        ariaLabelText: formatMessage(_i18n.messages.emojiSelectSkinToneButtonAriaLabelText, {
-          selectedTone: "".concat((0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(previewEmoji.name), " selected")
-        })
-      }));
-    }
-  }, {
-    key: "renderEmojiPreview",
-    value: function renderEmojiPreview() {
-      var selectingTone = this.state.selectingTone;
-      var _this$props2 = this.props,
-          emoji = _this$props2.emoji,
-          uploadEnabled = _this$props2.uploadEnabled;
-
-      if (!emoji || selectingTone || uploadEnabled) {
-        return null;
-      }
-
-      return (0, _core.jsx)(_EmojiPreviewComponent.EmojiPreviewComponent, {
-        emoji: emoji
-      });
-    } // note: emoji-picker-add-emoji className is used by pollinator synthetic checks
-
-  }, {
-    key: "renderAddOwnEmoji",
-    value: function renderAddOwnEmoji() {
-      var _this$props3 = this.props,
-          onOpenUpload = _this$props3.onOpenUpload,
-          uploadEnabled = _this$props3.uploadEnabled,
-          intl = _this$props3.intl;
-      var selectingTone = this.state.selectingTone;
-      var formatMessage = intl.formatMessage;
-
-      if (!uploadEnabled || selectingTone) {
-        return null;
-      }
-
-      return (0, _core.jsx)("div", {
-        css: _styles.addCustomEmoji
-      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
-        return (0, _core.jsx)(_standardButton.default, {
-          onClick: onOpenUpload,
-          iconBefore: (0, _core.jsx)(_add.default, {
-            label: formatMessage(_i18n.messages.addCustomEmojiLabel),
-            size: "small"
-          }),
-          appearance: "subtle",
-          css: _styles.addCustomEmojiButton,
-          className: _styles.emojiPickerAddEmoji
-        }, label);
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return (0, _core.jsx)("div", {
-        css: _styles.emojiPreview,
-        onMouseLeave: this.onMouseLeave
-      }, this.renderAddOwnEmoji(), this.renderEmojiPreview(), this.renderTones());
-    }
-  }]);
-  return EmojiPreview;
-}(_react.PureComponent);
-
-exports.EmojiPreview = EmojiPreview;
-
-var _default = (0, _reactIntlNext.injectIntl)(EmojiPreview);
-
-exports.default = _default;