@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/esm/ui/ConfigPanel/FormErrorBoundary.js

@@ -0,0 +1,133 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ACTION, ACTION_SUBJECT, editorAnalyticsChannel, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import SectionMessage from '@atlaskit/section-message';
+import { messages } from './messages';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var FormErrorBoundaryInner = /*#__PURE__*/function (_React$Component) {
+  _inherits(FormErrorBoundaryInner, _React$Component);
+  var _super = _createSuper(FormErrorBoundaryInner);
+  function FormErrorBoundaryInner() {
+    var _this;
+    _classCallCheck(this, FormErrorBoundaryInner);
+    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));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      error: undefined
+    });
+    _defineProperty(_assertThisInitialized(_this), "getProductName", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var contextIdentifierProvider, context;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            contextIdentifierProvider = _this.props.contextIdentifierProvider;
+            if (!contextIdentifierProvider) {
+              _context.next = 7;
+              break;
+            }
+            _context.next = 4;
+            return contextIdentifierProvider;
+          case 4:
+            context = _context.sent;
+            if (!context.product) {
+              _context.next = 7;
+              break;
+            }
+            return _context.abrupt("return", context.product);
+          case 7:
+            return _context.abrupt("return", 'atlaskit');
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })));
+    _defineProperty(_assertThisInitialized(_this), "fireAnalytics", function (analyticsErrorPayload) {
+      var _this$props = _this.props,
+        createAnalyticsEvent = _this$props.createAnalyticsEvent,
+        extensionKey = _this$props.extensionKey,
+        fields = _this$props.fields;
+      _this.getProductName().then(function (product) {
+        var _window;
+        if (!createAnalyticsEvent) {
+          // eslint-disable-next-line no-console
+          console.error('ConfigPanel FormErrorBoundary: Missing `createAnalyticsEvent`', {
+            channel: editorAnalyticsChannel,
+            product: product,
+            error: analyticsErrorPayload
+          });
+          return;
+        }
+        var error = analyticsErrorPayload.error,
+          errorInfo = analyticsErrorPayload.errorInfo,
+          errorStack = analyticsErrorPayload.errorStack;
+        var payload = {
+          action: ACTION.ERRORED,
+          actionSubject: ACTION_SUBJECT.CONFIG_PANEL,
+          eventType: EVENT_TYPE.UI,
+          attributes: {
+            product: product,
+            browserInfo: ((_window = window) === null || _window === void 0 || (_window = _window.navigator) === null || _window === void 0 ? void 0 : _window.userAgent) || 'unknown',
+            extensionKey: extensionKey,
+            fields: JSON.stringify(fields),
+            error: error,
+            errorInfo: errorInfo,
+            errorStack: errorStack
+          }
+        };
+        createAnalyticsEvent(payload).fire(editorAnalyticsChannel);
+      }).catch(function (e) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to resolve product name from contextIdentifierProvider.', e);
+      });
+    });
+    return _this;
+  }
+  _createClass(FormErrorBoundaryInner, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      var _this2 = this;
+      this.setState({
+        error: error
+      }, function () {
+        // Log the error
+        _this2.fireAnalytics({
+          error: error.toString(),
+          errorInfo: errorInfo,
+          errorStack: error.stack
+        });
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var intl = this.props.intl;
+      var error = this.state.error;
+      if (!error) {
+        return this.props.children;
+      }
+      return /*#__PURE__*/React.createElement(SectionMessage, {
+        title: intl.formatMessage(messages.errorBoundaryTitle),
+        appearance: "error"
+      }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, error.message)), /*#__PURE__*/React.createElement("p", null, intl.formatMessage(messages.errorBoundaryNote)));
+    }
+  }]);
+  return FormErrorBoundaryInner;
+}(React.Component);
+export var FormErrorBoundaryImpl = injectIntl(FormErrorBoundaryInner);
+export var FormErrorBoundary = withAnalyticsContext()(withAnalyticsEvents()(FormErrorBoundaryImpl));
+FormErrorBoundary.displayName = 'FormErrorBoundary';

package/dist/esm/ui/ConfigPanel/Header.js

@@ -0,0 +1,140 @@
+/** @jsx jsx */
+import { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import Loadable from 'react-loadable';
+import Button from '@atlaskit/button/custom-theme-button';
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import { N200 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { messages } from './messages';
+var iconWidth = 40;
+var buttonWidth = 40;
+var margin = 16;
+var gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
+var itemStyles = css({
+  display: 'flex',
+  marginBottom: "var(--ds-space-300, 24px)"
+});
+var itemIconStyles = css({
+  width: iconWidth,
+  height: iconWidth,
+  overflow: 'hidden',
+  border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))"),
+  borderRadius: "".concat(borderRadius(), "px"),
+  boxSizing: 'border-box',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  div: {
+    width: iconWidth,
+    height: iconWidth
+  }
+});
+var itemBodyStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  justifyContent: 'space-between',
+  lineHeight: 1.4,
+  margin: "0 ".concat("var(--ds-space-200, 16px)"),
+  flexGrow: 3,
+  maxWidth: "calc(100% - ".concat(gapSizeForEllipsis, "px)")
+});
+var centeredItemTitleStyles = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center'
+});
+var itemTextStyles = css({
+  maxWidth: '100%',
+  whiteSpace: 'initial',
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  itemSummary: {
+    fontSize: relativeFontSizeToBase16(11.67),
+    color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+    marginTop: "var(--ds-space-050, 4px)",
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }
+});
+var descriptionStyles = css({
+  marginBottom: "var(--ds-space-300, 24px)"
+});
+var helpLinkStyles = css({
+  paddingTop: "var(--ds-space-150, 12px)"
+});
+var closeButtonWrapperStyles = css({
+  width: buttonWidth,
+  textAlign: 'right'
+});
+var Header = function Header(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    description = _ref.description,
+    summary = _ref.summary,
+    documentationUrl = _ref.documentationUrl,
+    enableHelpCTA = _ref.enableHelpCTA,
+    onClose = _ref.onClose,
+    intl = _ref.intl;
+  var ResolvedIcon = Loadable({
+    loader: icon,
+    loading: function loading() {
+      return null;
+    }
+  });
+  return jsx(Fragment, null, jsx("div", {
+    css: itemStyles
+  }, jsx("div", {
+    css: itemIconStyles
+  }, jsx(ResolvedIcon, {
+    label: title
+  })), jsx("div", {
+    css: itemBodyStyles
+  }, summary ? jsx("div", {
+    css: itemTextStyles
+  }, jsx("div", {
+    className: "item-title",
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
+  }, title), jsx("div", {
+    className: "item-summary"
+  }, summary)) : jsx("div", {
+    css: centeredItemTitleStyles,
+    id: "context-panel-title",
+    "data-testId": "context-panel-title"
+  }, title)), jsx("div", {
+    css: closeButtonWrapperStyles
+  }, jsx(Button, {
+    appearance: "subtle",
+    iconBefore: jsx(CrossIcon, {
+      label: intl.formatMessage(messages.close)
+    }),
+    onClick: onClose
+  }))), (description || documentationUrl) && jsx("p", {
+    css: descriptionStyles,
+    "data-testid": "config-panel-header-description"
+  }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && (enableHelpCTA ? jsx("p", {
+    css: helpLinkStyles
+  }, jsx(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: intl.formatMessage(messages.help)
+  })) : jsx(HelpLink, {
+    documentationUrl: documentationUrl,
+    label: intl.formatMessage(messages.documentation)
+  }))));
+};
+var HelpLink = function HelpLink(_ref2) {
+  var documentationUrl = _ref2.documentationUrl,
+    label = _ref2.label;
+  return jsx("a", {
+    target: "_blank",
+    rel: "noopener noreferrer",
+    href: documentationUrl,
+    "data-testid": "config-panel-header-documentation-link"
+  }, label);
+};
+export default injectIntl(Header);

package/dist/esm/ui/ConfigPanel/LoadingState.js

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+var spinnerWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-800, 64px)"
+});
+var LoadingState = function LoadingState() {
+  return jsx("div", {
+    css: spinnerWrapperStyles,
+    "data-testid": "ConfigPanelLoading"
+  }, jsx(Spinner, {
+    size: "small"
+  }));
+};
+export default LoadingState;

package/dist/esm/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -0,0 +1,53 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import { N80, R300 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
+import { messages } from '../messages';
+var removableFieldWrapperStyles = css({
+  position: 'relative',
+  marginBottom: 0
+});
+var wrapperWithMarginBottomStyles = css({
+  marginBottom: "var(--ds-space-200, 16px)"
+});
+var removeButtonWrapperStyles = css({
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  cursor: 'pointer',
+  color: "var(--ds-icon-subtle, ".concat(N80, ")"),
+  '&:hover': {
+    color: "var(--ds-icon-danger, ".concat(R300, ")")
+  }
+});
+var RemovableField = function RemovableField(_ref) {
+  var _children$props$field;
+  var name = _ref.name,
+    canRemoveField = _ref.canRemoveField,
+    onClickRemove = _ref.onClickRemove,
+    children = _ref.children,
+    intl = _ref.intl,
+    className = _ref.className;
+  var onClickCallback = React.useCallback(function () {
+    return onClickRemove && onClickRemove(name);
+  }, [name, onClickRemove]);
+  var hasMarginBottom = ((_children$props$field = children.props.field) === null || _children$props$field === void 0 ? void 0 : _children$props$field.type) !== 'expand';
+  return jsx("div", {
+    css: [removableFieldWrapperStyles, hasMarginBottom && wrapperWithMarginBottomStyles],
+    className: className
+  }, children, canRemoveField && jsx("div", {
+    css: removeButtonWrapperStyles,
+    "data-testid": "remove-field-".concat(name),
+    onClick: onClickCallback
+  }, jsx(Tooltip, {
+    content: intl.formatMessage(messages.removeField),
+    position: "left"
+  }, jsx(CrossCircleIcon, {
+    size: "small",
+    label: intl.formatMessage(messages.removeField)
+  }))));
+};
+export default injectIntl(RemovableField);

package/dist/esm/ui/ConfigPanel/constants.js

@@ -0,0 +1,7 @@
+// Allowlist of { macroKey: parameterName[] } for analytics logging
+export var ALLOWED_LOGGED_MACRO_PARAMS = {
+  children: ['all', 'first', 'depth', 'style', 'excerptType', 'sort', 'reverse'],
+  'recently-updated': ['width', 'types', 'max', 'theme', 'showProfilePic', 'hideHeading'],
+  excerpt: ['hidden']
+};
+export var ALLOWED_PARAM_TYPES = ['enum', 'number', 'boolean'];

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

@@ -0,0 +1,2 @@
+import ConfigPanelLoader from './ConfigPanelLoader';
+export default ConfigPanelLoader;

package/dist/esm/ui/ConfigPanel/messages.js

@@ -0,0 +1,93 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  submit: {
+    id: 'fabric.editor.configPanel.submit',
+    defaultMessage: 'Submit',
+    description: 'Submit button label'
+  },
+  cancel: {
+    id: 'fabric.editor.configPanel.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Cancel button label'
+  },
+  close: {
+    id: 'fabric.editor.configPanel.close',
+    defaultMessage: 'Close',
+    description: 'Close button label'
+  },
+  required: {
+    id: 'fabric.editor.configPanel.required',
+    defaultMessage: 'Required field',
+    description: 'Validation message for required field'
+  },
+  invalid: {
+    id: 'fabric.editor.configPanel.invalid',
+    defaultMessage: 'Invalid field',
+    description: 'Validation message when a field value is not acceptable'
+  },
+  isMultipleAndRadio: {
+    id: 'fabric.editor.configPanel.fieldTypeError.isMultipleAndRadio',
+    defaultMessage: 'Can not combine isMultiple with style: radio',
+    description: 'Configuration error'
+  },
+  addField: {
+    id: 'fabric.editor.configPanel.formType.addField',
+    defaultMessage: 'Add field',
+    description: 'Button to add a new field in nested forms'
+  },
+  removeField: {
+    id: 'fabric.editor.configPanel.formType.removeField',
+    defaultMessage: 'Remove field',
+    description: 'Button to remove a field in nested forms'
+  },
+  createOption: {
+    id: 'fabric.editor.configPanel.customSelect.createOption',
+    defaultMessage: 'Create',
+    description: 'Create a new option for a select field'
+  },
+  documentation: {
+    id: 'fabric.editor.configPanel.documentation',
+    defaultMessage: 'Documentation',
+    description: 'Label for the documentation link'
+  },
+  help: {
+    id: 'fabric.editor.configPanel.help',
+    defaultMessage: 'Need help?',
+    description: 'Label for documentation link v.2 (to replace "Documentation" text)'
+  },
+  custom: {
+    id: 'fabric.editor.configPanel.dateRange.option.custom',
+    defaultMessage: 'Custom',
+    description: 'Label for the option "Custom" in the date range UI element'
+  },
+  from: {
+    id: 'fabric.editor.configPanel.dateRange.custom.from',
+    defaultMessage: 'From',
+    description: 'Label for the initial date when the option "Custom" is selected in the date range UI element'
+  },
+  to: {
+    id: 'fabric.editor.configPanel.dateRange.custom.to',
+    defaultMessage: 'To',
+    description: 'Label for the end date when the option "Custom" is selected in the date range UI element'
+  },
+  expand: {
+    id: 'fabric.editor.configPanel.dateRange.grouping.expand',
+    defaultMessage: 'Expand',
+    description: 'Label for expanding a group of fields'
+  },
+  collapse: {
+    id: 'fabric.editor.configPanel.dateRange.grouping.collapse',
+    defaultMessage: 'Collapse',
+    description: 'Label for collapsing a group of fields'
+  },
+  errorBoundaryTitle: {
+    id: 'fabric.editor.configPanel.errorBoundary.title',
+    defaultMessage: 'Something went wrong.',
+    description: 'Title for uncaught config panel error'
+  },
+  errorBoundaryNote: {
+    id: 'fabric.editor.configPanel.errorBoundary.note',
+    defaultMessage: "We've let the team know. You can still edit and publish this page, or check the error console for more information.",
+    description: 'Note for uncaught config panel error'
+  }
+});