@atlaskit/smart-card 17.7.6 → 17.7.7

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/smart-card
 
+## 17.7.7
+
+### Patch Changes
+
+- [`c01f6404d0c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c01f6404d0c) - Add ability to trigger actions for a Smart Link from outside of the Smart Link card.
+
+  Example usage:
+
+  ```tsx
+  import { useSmartLinkActions } from '@atlaskit/smart-card/hooks';
+
+  const ExampleToolbar = () => {
+    const actions = useSmartLinkActions({
+      url,
+      appearance: 'block',
+      analyticsHandler: analytics,
+    });
+
+    return (
+      <ExampleToolbarWrapper>
+        {actions.map((action) => (
+          <Tooltip content={action.text}>
+            <ExampleToolbarItem key={action.id} onClick={action.invoke}>
+              {idToIcon[action.id] ?? action.id}
+            </ExampleToolbarItem>
+          </Tooltip>
+        ))}
+      </ExampleToolbarWrapper>
+    );
+  };
+  ```
+
 ## 17.7.6
 
 ### Patch Changes

package/dist/cjs/hooks.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useSmartLinkActions", {
+  enumerable: true,
+  get: function get() {
+    return _useSmartLinkActions.useSmartLinkActions;
+  }
+});
+
+var _useSmartLinkActions = require("./state/hooks-external/useSmartLinkActions");

package/dist/cjs/state/hooks-external/useSmartLinkActions.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSmartLinkActions = useSmartLinkActions;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _uuid = _interopRequireDefault(require("uuid"));
+
+var _block = require("../../extractors/block");
+
+var _actions = require("../actions");
+
+var _analytics = require("../analytics");
+
+var _store = require("../store");
+
+var _helpers = require("../helpers");
+
+function useSmartLinkActions(_ref) {
+  var url = _ref.url,
+      appearance = _ref.appearance,
+      analyticsHandler = _ref.analyticsHandler,
+      _ref$platform = _ref.platform,
+      platform = _ref$platform === void 0 ? 'web' : _ref$platform;
+  var id = (0, _react.useMemo)(function () {
+    return (0, _uuid.default)();
+  }, []);
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      actions = _useState2[0],
+      setActions = _useState2[1];
+
+  var linkState = (0, _store.useSmartCardState)(url);
+  var linkAnalytics = (0, _analytics.useSmartLinkAnalytics)(analyticsHandler);
+  var linkActions = (0, _actions.useSmartCardActions)(id, url, linkAnalytics);
+  (0, _react.useEffect)(function () {
+    if (!linkState.details) {
+      return;
+    }
+
+    var cardProperties = (0, _block.extractBlockProps)(linkState.details.data, linkState.details.meta, {
+      handleInvoke: function handleInvoke(opts) {
+        return linkActions.invoke(opts, appearance);
+      },
+      handleAnalytics: analyticsHandler,
+      extensionKey: (0, _helpers.getExtensionKey)(linkState.details)
+    }, undefined, platform);
+
+    if (!cardProperties.actions || cardProperties.actions.length === 0) {
+      return;
+    }
+
+    var cardActions = cardProperties.actions.map(function (action) {
+      return {
+        id: action.id,
+        text: action.text,
+        invoke: action.promise
+      };
+    });
+    setActions(cardActions);
+  }, [linkState, linkActions, analyticsHandler, appearance, platform]);
+  return actions;
+}

package/dist/cjs/utils/mocks.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.waitFor = exports.mocks = exports.fakeResponse = exports.fakeFactory = void 0;
+exports.waitFor = exports.mocks = exports.mockContext = exports.fakeResponse = exports.fakeFactory = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -27,6 +27,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 mockContext = {
+  '@vocab': 'https://www.w3.org/ns/activitystreams#',
+  atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+  schema: 'http://schema.org/'
+};
+exports.mockContext = mockContext;
 var mocks = {
   success: {
     meta: {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.7.6",
+	"version": "17.7.7",
 	"sideEffects": false
 }

package/dist/es2019/hooks.js

@@ -0,0 +1 @@
+export { useSmartLinkActions } from './state/hooks-external/useSmartLinkActions';

package/dist/es2019/state/hooks-external/useSmartLinkActions.js

@@ -0,0 +1,42 @@
+import { useEffect, useMemo, useState } from 'react';
+import uuid from 'uuid';
+import { extractBlockProps as extractCardProps } from '../../extractors/block';
+import { useSmartCardActions as useLinkActions } from '../actions';
+import { useSmartLinkAnalytics as useLinkAnalytics } from '../analytics';
+import { useSmartCardState as useLinkState } from '../store';
+import { getExtensionKey } from '../helpers';
+export function useSmartLinkActions({
+  url,
+  appearance,
+  analyticsHandler,
+  platform = 'web'
+}) {
+  const id = useMemo(() => uuid(), []);
+  const [actions, setActions] = useState([]);
+  const linkState = useLinkState(url);
+  const linkAnalytics = useLinkAnalytics(analyticsHandler);
+  const linkActions = useLinkActions(id, url, linkAnalytics);
+  useEffect(() => {
+    if (!linkState.details) {
+      return;
+    }
+
+    const cardProperties = extractCardProps(linkState.details.data, linkState.details.meta, {
+      handleInvoke: opts => linkActions.invoke(opts, appearance),
+      handleAnalytics: analyticsHandler,
+      extensionKey: getExtensionKey(linkState.details)
+    }, undefined, platform);
+
+    if (!cardProperties.actions || cardProperties.actions.length === 0) {
+      return;
+    }
+
+    const cardActions = cardProperties.actions.map(action => ({
+      id: action.id,
+      text: action.text,
+      invoke: action.promise
+    }));
+    setActions(cardActions);
+  }, [linkState, linkActions, analyticsHandler, appearance, platform]);
+  return actions;
+}

package/dist/es2019/utils/mocks.js

@@ -1,4 +1,9 @@
 import CardClient from '../client';
+export const mockContext = {
+  '@vocab': 'https://www.w3.org/ns/activitystreams#',
+  atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+  schema: 'http://schema.org/'
+};
 export const mocks = {
   success: {
     meta: {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.7.6",
+	"version": "17.7.7",
 	"sideEffects": false
 }

package/dist/esm/hooks.js

@@ -0,0 +1 @@
+export { useSmartLinkActions } from './state/hooks-external/useSmartLinkActions';

package/dist/esm/state/hooks-external/useSmartLinkActions.js

@@ -0,0 +1,54 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useMemo, useState } from 'react';
+import uuid from 'uuid';
+import { extractBlockProps as extractCardProps } from '../../extractors/block';
+import { useSmartCardActions as useLinkActions } from '../actions';
+import { useSmartLinkAnalytics as useLinkAnalytics } from '../analytics';
+import { useSmartCardState as useLinkState } from '../store';
+import { getExtensionKey } from '../helpers';
+export function useSmartLinkActions(_ref) {
+  var url = _ref.url,
+      appearance = _ref.appearance,
+      analyticsHandler = _ref.analyticsHandler,
+      _ref$platform = _ref.platform,
+      platform = _ref$platform === void 0 ? 'web' : _ref$platform;
+  var id = useMemo(function () {
+    return uuid();
+  }, []);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      actions = _useState2[0],
+      setActions = _useState2[1];
+
+  var linkState = useLinkState(url);
+  var linkAnalytics = useLinkAnalytics(analyticsHandler);
+  var linkActions = useLinkActions(id, url, linkAnalytics);
+  useEffect(function () {
+    if (!linkState.details) {
+      return;
+    }
+
+    var cardProperties = extractCardProps(linkState.details.data, linkState.details.meta, {
+      handleInvoke: function handleInvoke(opts) {
+        return linkActions.invoke(opts, appearance);
+      },
+      handleAnalytics: analyticsHandler,
+      extensionKey: getExtensionKey(linkState.details)
+    }, undefined, platform);
+
+    if (!cardProperties.actions || cardProperties.actions.length === 0) {
+      return;
+    }
+
+    var cardActions = cardProperties.actions.map(function (action) {
+      return {
+        id: action.id,
+        text: action.text,
+        invoke: action.promise
+      };
+    });
+    setActions(cardActions);
+  }, [linkState, linkActions, analyticsHandler, appearance, platform]);
+  return actions;
+}

package/dist/esm/utils/mocks.js

@@ -11,6 +11,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 import CardClient from '../client';
+export var mockContext = {
+  '@vocab': 'https://www.w3.org/ns/activitystreams#',
+  atlassian: 'https://schema.atlassian.com/ns/vocabulary#',
+  schema: 'http://schema.org/'
+};
 export var mocks = {
   success: {
     meta: {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.7.6",
+	"version": "17.7.7",
 	"sideEffects": false
 }

package/dist/types/hooks.d.ts

@@ -0,0 +1 @@
+export { useSmartLinkActions } from './state/hooks-external/useSmartLinkActions';

package/dist/types/state/hooks-external/useSmartLinkActions.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { JsonLd } from 'json-ld-types';
+import type { AnalyticsHandler } from '../../utils/types';
+import type { CardAppearance } from '../../view/Card/types';
+export interface LinkAction {
+    /**
+     * Unique ID for the action.
+     * @example `delete-action`
+     */
+    id: string;
+    /**
+     * Text to render for the action.
+     * @description Use this in tooltips and UI.
+     * @example `Delete`.
+     */
+    text: React.ReactNode;
+    /**
+     * Promise to invoke on triggering this action.
+     * @example Clicking on `Delete` leading to deletion of content.
+     */
+    invoke: () => Promise<any>;
+}
+export interface UseSmartLinkActionsOpts {
+    /**
+     * Smart Link URL for which actions will be invoked.
+     * @example https://start.atlassian.com
+     */
+    url: string;
+    /**
+     * Appearance under which these actions will be invoked.
+     * @example `block` for card views.
+     */
+    appearance: CardAppearance;
+    /**
+     * Callback for sending analytics events.
+     * @description Accepts an analytics payload and fires it to a system.
+     */
+    analyticsHandler: AnalyticsHandler;
+    /**
+     * Platform on which actions are being invoked.
+     * @default 'web'
+     */
+    platform?: JsonLd.Primitives.Platforms;
+}
+export declare function useSmartLinkActions({ url, appearance, analyticsHandler, platform, }: UseSmartLinkActionsOpts): LinkAction[];

package/dist/types/utils/mocks.d.ts

@@ -1,4 +1,9 @@
 import { JsonLd } from 'json-ld-types';
+export declare const mockContext: {
+    readonly '@vocab': "https://www.w3.org/ns/activitystreams#";
+    readonly atlassian: "https://schema.atlassian.com/ns/vocabulary#";
+    readonly schema: "http://schema.org/";
+};
 export declare const mocks: {
     success: JsonLd.Response<JsonLd.Data.BaseData>;
     notFound: JsonLd.Response<JsonLd.Data.BaseData>;

package/hooks/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/smart-card/hooks",
+  "main": "../dist/cjs/hooks.js",
+  "module": "../dist/esm/hooks.js",
+  "module:es2019": "../dist/es2019/hooks.js",
+  "types": "../dist/types/hooks.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "17.7.6",
+  "version": "17.7.7",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -111,6 +111,7 @@
     "react-dom": "^16.8.0",
     "react-intl-next": "npm:react-intl@^5.18.1",
     "react-test-renderer": "^16.8.0",
+    "ts-jest": "24.3.0",
     "typescript": "3.9.6",
     "xhr-mock": "^2.4.0"
   },
@@ -119,6 +120,7 @@
     "./in-product": "./src/in-product.ts",
     "./client": "./src/client/index.ts",
     "./types": "./src/types.ts",
+    "./hooks": "./src/hooks.ts",
     ".": "./src/index.ts"
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"