@atlaskit/editor-plugin-card 0.10.8 → 0.10.10

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-card
 
+## 0.10.10
+
+### Patch Changes
+
+- [#42151](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42151) [`192b62f6d36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/192b62f6d36) - Cleans up editor feature flag 'lp-analytics-events-next'. Card plugin will now always dispatch link tracking events.
+
+## 0.10.9
+
+### Patch Changes
+
+- [#42607](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42607) [`87e6390f290`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87e6390f290) - [ux] Added a DiscoveryPulse component that can be used for feature discovery based on local storage keys
+- Updated dependencies
+
 ## 0.10.8
 
 ### Patch Changes

package/dist/cjs/common/local-storage.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.markLocalStorageKeyDiscovered = exports.isLocalStorageKeyDiscovered = exports.LOCAL_STORAGE_DISCOVERED_KEY = exports.LOCAL_STORAGE_CLIENT_KEY = void 0;
+var _frontendUtilities = require("@atlaskit/frontend-utilities");
+var LOCAL_STORAGE_CLIENT_KEY = exports.LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/editor-plugin-card';
+var LOCAL_STORAGE_DISCOVERED_KEY = exports.LOCAL_STORAGE_DISCOVERED_KEY = 'discovered';
+var storageClient = new _frontendUtilities.StorageClient(LOCAL_STORAGE_CLIENT_KEY);
+var isLocalStorageKeyDiscovered = exports.isLocalStorageKeyDiscovered = function isLocalStorageKeyDiscovered(key) {
+  var localStorageValue = storageClient.getItem(key);
+  return !!localStorageValue && localStorageValue === LOCAL_STORAGE_DISCOVERED_KEY;
+};
+var markLocalStorageKeyDiscovered = exports.markLocalStorageKeyDiscovered = function markLocalStorageKeyDiscovered(key, expiration) {
+  storageClient.setItemWithExpiry(key, LOCAL_STORAGE_DISCOVERED_KEY, expiration);
+};

package/dist/cjs/common/pulse/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DiscoveryPulse = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _linkingCommon = require("@atlaskit/linking-common");
+var _localStorage = require("../local-storage");
+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; }
+var DiscoveryPulse = exports.DiscoveryPulse = function DiscoveryPulse(_ref) {
+  var children = _ref.children,
+    localStorageKey = _ref.localStorageKey,
+    isDiscovered = _ref.isDiscovered,
+    timeToDiscoverInMs = _ref.timeToDiscoverInMs,
+    localStorageKeyExpirationInMs = _ref.localStorageKeyExpirationInMs;
+  var onDiscovery = (0, _react.useCallback)(function () {
+    (0, _localStorage.markLocalStorageKeyDiscovered)(localStorageKey, localStorageKeyExpirationInMs);
+  }, [localStorageKey, localStorageKeyExpirationInMs]);
+  (0, _react.useEffect)(function () {
+    if (timeToDiscoverInMs) {
+      var timeoutUntilDiscovery = setTimeout(function () {
+        onDiscovery();
+      }, timeToDiscoverInMs);
+      return function () {
+        return clearTimeout(timeoutUntilDiscovery);
+      };
+    }
+    onDiscovery();
+  }, [isDiscovered, localStorageKey, onDiscovery, timeToDiscoverInMs]);
+  return /*#__PURE__*/_react.default.createElement(_linkingCommon.Pulse, {
+    isDiscovered: isDiscovered
+  }, children);
+};
+var _default = exports.default = _linkingCommon.Pulse;

package/dist/cjs/plugin.js

@@ -35,7 +35,7 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
   var options = _ref.config,
     api = _ref.api;
   var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
-  var cardPluginEvents = featureFlags !== null && featureFlags !== void 0 && featureFlags.lpAnalyticsEventsNext ? (0, _createEventsQueue.createEventsQueue)() : undefined;
+  var cardPluginEvents = (0, _createEventsQueue.createEventsQueue)();
   return {
     name: 'card',
     getSharedState: function getSharedState(editorState) {
@@ -101,7 +101,7 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
         popupsBoundariesElement = _ref3.popupsBoundariesElement;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_EditorSmartCardEvents.EditorSmartCardEvents, {
         editorView: editorView
-      }), cardPluginEvents && /*#__PURE__*/_react.default.createElement(_EditorLinkingPlatformAnalytics.EditorLinkingPlatformAnalytics, {
+      }), /*#__PURE__*/_react.default.createElement(_EditorLinkingPlatformAnalytics.EditorLinkingPlatformAnalytics, {
         cardPluginEvents: cardPluginEvents,
         editorView: editorView
       }), /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {

package/dist/cjs/ui/EditorLinkingPlatformAnalytics/index.js

@@ -29,14 +29,15 @@ var EditorLinkingPlatformAnalytics = exports.EditorLinkingPlatformAnalytics = /*
   (0, _createClass2.default)(EditorLinkingPlatformAnalytics, [{
     key: "render",
     value: function render() {
-      var cardContext = this.context.contextAdapter.card;
+      var _this$context;
+      var cardContext = (_this$context = this.context) === null || _this$context === void 0 || (_this$context = _this$context.contextAdapter) === null || _this$context === void 0 ? void 0 : _this$context.card;
 
       /**
        * The analytics hook needs to be able to communicate with the card context
        * If we can't access it, don't mount the event bindings
        * This effectively entirely disables all tracking behaviour
        */
-      if (!cardContext) {
+      if (!(cardContext !== null && cardContext !== void 0 && cardContext.value)) {
         return null;
       }
       return /*#__PURE__*/_react.default.createElement(cardContext.Provider, {

package/dist/es2019/common/local-storage.js

@@ -0,0 +1,11 @@
+import { StorageClient } from '@atlaskit/frontend-utilities';
+export const LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/editor-plugin-card';
+export const LOCAL_STORAGE_DISCOVERED_KEY = 'discovered';
+const storageClient = new StorageClient(LOCAL_STORAGE_CLIENT_KEY);
+export const isLocalStorageKeyDiscovered = key => {
+  const localStorageValue = storageClient.getItem(key);
+  return !!localStorageValue && localStorageValue === LOCAL_STORAGE_DISCOVERED_KEY;
+};
+export const markLocalStorageKeyDiscovered = (key, expiration) => {
+  storageClient.setItemWithExpiry(key, LOCAL_STORAGE_DISCOVERED_KEY, expiration);
+};

package/dist/es2019/common/pulse/index.js

@@ -0,0 +1,27 @@
+import React, { useCallback, useEffect } from 'react';
+import { Pulse } from '@atlaskit/linking-common';
+import { markLocalStorageKeyDiscovered } from '../local-storage';
+export const DiscoveryPulse = ({
+  children,
+  localStorageKey,
+  isDiscovered,
+  timeToDiscoverInMs,
+  localStorageKeyExpirationInMs
+}) => {
+  const onDiscovery = useCallback(() => {
+    markLocalStorageKeyDiscovered(localStorageKey, localStorageKeyExpirationInMs);
+  }, [localStorageKey, localStorageKeyExpirationInMs]);
+  useEffect(() => {
+    if (timeToDiscoverInMs) {
+      const timeoutUntilDiscovery = setTimeout(() => {
+        onDiscovery();
+      }, timeToDiscoverInMs);
+      return () => clearTimeout(timeoutUntilDiscovery);
+    }
+    onDiscovery();
+  }, [isDiscovered, localStorageKey, onDiscovery, timeToDiscoverInMs]);
+  return /*#__PURE__*/React.createElement(Pulse, {
+    isDiscovered: isDiscovered
+  }, children);
+};
+export default Pulse;

package/dist/es2019/plugin.js

@@ -26,7 +26,7 @@ export const cardPlugin = ({
 }) => {
   var _api$featureFlags;
   const featureFlags = (api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
-  const cardPluginEvents = featureFlags !== null && featureFlags !== void 0 && featureFlags.lpAnalyticsEventsNext ? createEventsQueue() : undefined;
+  const cardPluginEvents = createEventsQueue();
   return {
     name: 'card',
     getSharedState(editorState) {
@@ -93,7 +93,7 @@ export const cardPlugin = ({
     }) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorSmartCardEvents, {
         editorView: editorView
-      }), cardPluginEvents && /*#__PURE__*/React.createElement(EditorLinkingPlatformAnalytics, {
+      }), /*#__PURE__*/React.createElement(EditorLinkingPlatformAnalytics, {
         cardPluginEvents: cardPluginEvents,
         editorView: editorView
       }), /*#__PURE__*/React.createElement(LayoutButton, {

package/dist/es2019/ui/EditorLinkingPlatformAnalytics/index.js

@@ -8,14 +8,15 @@ import { LinkEventsBinding } from './LinkEvents';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class EditorLinkingPlatformAnalytics extends React.PureComponent {
   render() {
-    const cardContext = this.context.contextAdapter.card;
+    var _this$context, _this$context$context;
+    const cardContext = (_this$context = this.context) === null || _this$context === void 0 ? void 0 : (_this$context$context = _this$context.contextAdapter) === null || _this$context$context === void 0 ? void 0 : _this$context$context.card;
 
     /**
      * The analytics hook needs to be able to communicate with the card context
      * If we can't access it, don't mount the event bindings
      * This effectively entirely disables all tracking behaviour
      */
-    if (!cardContext) {
+    if (!(cardContext !== null && cardContext !== void 0 && cardContext.value)) {
       return null;
     }
     return /*#__PURE__*/React.createElement(cardContext.Provider, {

package/dist/esm/common/local-storage.js

@@ -0,0 +1,11 @@
+import { StorageClient } from '@atlaskit/frontend-utilities';
+export var LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/editor-plugin-card';
+export var LOCAL_STORAGE_DISCOVERED_KEY = 'discovered';
+var storageClient = new StorageClient(LOCAL_STORAGE_CLIENT_KEY);
+export var isLocalStorageKeyDiscovered = function isLocalStorageKeyDiscovered(key) {
+  var localStorageValue = storageClient.getItem(key);
+  return !!localStorageValue && localStorageValue === LOCAL_STORAGE_DISCOVERED_KEY;
+};
+export var markLocalStorageKeyDiscovered = function markLocalStorageKeyDiscovered(key, expiration) {
+  storageClient.setItemWithExpiry(key, LOCAL_STORAGE_DISCOVERED_KEY, expiration);
+};

package/dist/esm/common/pulse/index.js

@@ -0,0 +1,28 @@
+import React, { useCallback, useEffect } from 'react';
+import { Pulse } from '@atlaskit/linking-common';
+import { markLocalStorageKeyDiscovered } from '../local-storage';
+export var DiscoveryPulse = function DiscoveryPulse(_ref) {
+  var children = _ref.children,
+    localStorageKey = _ref.localStorageKey,
+    isDiscovered = _ref.isDiscovered,
+    timeToDiscoverInMs = _ref.timeToDiscoverInMs,
+    localStorageKeyExpirationInMs = _ref.localStorageKeyExpirationInMs;
+  var onDiscovery = useCallback(function () {
+    markLocalStorageKeyDiscovered(localStorageKey, localStorageKeyExpirationInMs);
+  }, [localStorageKey, localStorageKeyExpirationInMs]);
+  useEffect(function () {
+    if (timeToDiscoverInMs) {
+      var timeoutUntilDiscovery = setTimeout(function () {
+        onDiscovery();
+      }, timeToDiscoverInMs);
+      return function () {
+        return clearTimeout(timeoutUntilDiscovery);
+      };
+    }
+    onDiscovery();
+  }, [isDiscovered, localStorageKey, onDiscovery, timeToDiscoverInMs]);
+  return /*#__PURE__*/React.createElement(Pulse, {
+    isDiscovered: isDiscovered
+  }, children);
+};
+export default Pulse;

package/dist/esm/plugin.js

@@ -28,7 +28,7 @@ export var cardPlugin = function cardPlugin(_ref) {
   var options = _ref.config,
     api = _ref.api;
   var featureFlags = (api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()) || {};
-  var cardPluginEvents = featureFlags !== null && featureFlags !== void 0 && featureFlags.lpAnalyticsEventsNext ? createEventsQueue() : undefined;
+  var cardPluginEvents = createEventsQueue();
   return {
     name: 'card',
     getSharedState: function getSharedState(editorState) {
@@ -94,7 +94,7 @@ export var cardPlugin = function cardPlugin(_ref) {
         popupsBoundariesElement = _ref3.popupsBoundariesElement;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorSmartCardEvents, {
         editorView: editorView
-      }), cardPluginEvents && /*#__PURE__*/React.createElement(EditorLinkingPlatformAnalytics, {
+      }), /*#__PURE__*/React.createElement(EditorLinkingPlatformAnalytics, {
         cardPluginEvents: cardPluginEvents,
         editorView: editorView
       }), /*#__PURE__*/React.createElement(LayoutButton, {

package/dist/esm/ui/EditorLinkingPlatformAnalytics/index.js

@@ -23,14 +23,15 @@ export var EditorLinkingPlatformAnalytics = /*#__PURE__*/function (_React$PureCo
   _createClass(EditorLinkingPlatformAnalytics, [{
     key: "render",
     value: function render() {
-      var cardContext = this.context.contextAdapter.card;
+      var _this$context;
+      var cardContext = (_this$context = this.context) === null || _this$context === void 0 || (_this$context = _this$context.contextAdapter) === null || _this$context === void 0 ? void 0 : _this$context.card;
 
       /**
        * The analytics hook needs to be able to communicate with the card context
        * If we can't access it, don't mount the event bindings
        * This effectively entirely disables all tracking behaviour
        */
-      if (!cardContext) {
+      if (!(cardContext !== null && cardContext !== void 0 && cardContext.value)) {
         return null;
       }
       return /*#__PURE__*/React.createElement(cardContext.Provider, {

package/dist/types/common/local-storage.d.ts

@@ -0,0 +1,4 @@
+export declare const LOCAL_STORAGE_CLIENT_KEY = "@atlaskit/editor-plugin-card";
+export declare const LOCAL_STORAGE_DISCOVERED_KEY = "discovered";
+export declare const isLocalStorageKeyDiscovered: (key: string) => boolean;
+export declare const markLocalStorageKeyDiscovered: (key: string, expiration?: number) => void;

package/dist/types/common/pulse/index.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { Pulse } from '@atlaskit/linking-common';
+export interface PulseProps {
+    /**
+     * The component around which the Pulse should be displayed
+     */
+    children: JSX.Element;
+    /**
+     * The key that is used in local storage to identify the descoverability of a feature where the Pulse is used
+     */
+    localStorageKey: string;
+    /**
+     * The time in ms after which the key in local storage will be considered expired and the Pulse will be shown again
+     */
+    localStorageKeyExpirationInMs?: number;
+    /**
+     * The time in ms since the Pulse has started after which the key will be stored in local storage.
+     */
+    timeToDiscoverInMs?: number;
+    /**
+     * And indicator that the feature was discovered externally and the pulsation needs to stop.
+     */
+    isDiscovered?: boolean;
+}
+export declare const DiscoveryPulse: ({ children, localStorageKey, isDiscovered, timeToDiscoverInMs, localStorageKeyExpirationInMs, }: PulseProps) => JSX.Element;
+export default Pulse;

package/dist/types/ui/EditorLinkingPlatformAnalytics/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { AnalyticsBindingsProps } from './common';
+import type { AnalyticsBindingsProps } from './common';
 export declare class EditorLinkingPlatformAnalytics extends React.PureComponent<AnalyticsBindingsProps> {
     static contextTypes: {
         contextAdapter: PropTypes.Requireable<object>;

package/dist/types-ts4.5/common/local-storage.d.ts

@@ -0,0 +1,4 @@
+export declare const LOCAL_STORAGE_CLIENT_KEY = "@atlaskit/editor-plugin-card";
+export declare const LOCAL_STORAGE_DISCOVERED_KEY = "discovered";
+export declare const isLocalStorageKeyDiscovered: (key: string) => boolean;
+export declare const markLocalStorageKeyDiscovered: (key: string, expiration?: number) => void;

package/dist/types-ts4.5/common/pulse/index.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { Pulse } from '@atlaskit/linking-common';
+export interface PulseProps {
+    /**
+     * The component around which the Pulse should be displayed
+     */
+    children: JSX.Element;
+    /**
+     * The key that is used in local storage to identify the descoverability of a feature where the Pulse is used
+     */
+    localStorageKey: string;
+    /**
+     * The time in ms after which the key in local storage will be considered expired and the Pulse will be shown again
+     */
+    localStorageKeyExpirationInMs?: number;
+    /**
+     * The time in ms since the Pulse has started after which the key will be stored in local storage.
+     */
+    timeToDiscoverInMs?: number;
+    /**
+     * And indicator that the feature was discovered externally and the pulsation needs to stop.
+     */
+    isDiscovered?: boolean;
+}
+export declare const DiscoveryPulse: ({ children, localStorageKey, isDiscovered, timeToDiscoverInMs, localStorageKeyExpirationInMs, }: PulseProps) => JSX.Element;
+export default Pulse;

package/dist/types-ts4.5/ui/EditorLinkingPlatformAnalytics/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { AnalyticsBindingsProps } from './common';
+import type { AnalyticsBindingsProps } from './common';
 export declare class EditorLinkingPlatformAnalytics extends React.PureComponent<AnalyticsBindingsProps> {
     static contextTypes: {
         contextAdapter: PropTypes.Requireable<object>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "0.10.8",
+  "version": "0.10.10",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -44,9 +44,11 @@
     "@atlaskit/editor-plugin-width": "^0.2.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.8.0",
+    "@atlaskit/frontend-utilities": "^2.7.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/link-analytics": "^8.3.0",
-    "@atlaskit/link-datasource": "^1.12.0",
+    "@atlaskit/link-datasource": "^1.13.0",
+    "@atlaskit/linking-common": "^4.16.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/smart-card": "^26.41.0",
     "@atlaskit/theme": "^12.6.0",