@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/cjs/ui/ConfigPanel/ErrorMessage/ErrorImage.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// Quality Ticket: https://product-fabric.atlassian.net/browse/DSP-4249
+/** @jsx jsx */
+
+var imageContainerStyles = (0, _react2.css)({
+  margin: "0 auto ".concat("var(--ds-space-300, 24px)"),
+  height: '80px'
+});
+var ErrorImage = function ErrorImage() {
+  return (0, _react2.jsx)("div", {
+    css: imageContainerStyles
+  }, (0, _react2.jsx)("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 163.28 218",
+    height: "80"
+  }, (0, _react2.jsx)("defs", null, (0, _react2.jsx)("linearGradient", {
+    id: "linear-gradient",
+    x1: "133.86",
+    x2: "-2.79",
+    y1: "136.43",
+    y2: "200.15",
+    gradientUnits: "userSpaceOnUse"
+  }, (0, _react2.jsx)("stop", {
+    offset: "0",
+    stopColor: "#ffd740"
+  }), (0, _react2.jsx)("stop", {
+    offset: "1",
+    stopColor: "#ffab00"
+  })), (0, _react2.jsx)("clipPath", {
+    id: "clip-path"
+  }, (0, _react2.jsx)("path", {
+    id: "_Polygon_",
+    d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
+    className: "cls-1",
+    "data-name": "<Polygon>"
+  })), (0, _react2.jsx)("style", null, ".cls-1{fill:url(#linear-gradient)}.cls-2{fill:#253858}.cls-6{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;stroke:#5e6c84}")), (0, _react2.jsx)("g", {
+    id: "Layer_2",
+    "data-name": "Layer 2"
+  }, (0, _react2.jsx)("g", {
+    id: "Software"
+  }, (0, _react2.jsx)("path", {
+    id: "_Polygon_2",
+    d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
+    className: "cls-1",
+    "data-name": "<Polygon>"
+  }), (0, _react2.jsx)("path", {
+    d: "M87.22 163.71l2.88-44.35a9.18 9.18 0 00-9.16-9.78 9.18 9.18 0 00-9.16 9.78l2.88 44.35a6.3 6.3 0 006.28 5.89 6.3 6.3 0 006.28-5.89zM71.38 187.25a9.53 9.53 0 0010.39 9.58 9.68 9.68 0 00-.9-19.32 9.64 9.64 0 00-9.49 9.74z",
+    className: "cls-2"
+  }), (0, _react2.jsx)("path", {
+    fill: "#ffc400",
+    d: "M91.7 27.17L84.29.45A.61.61 0 0083.1.5l-4.66 25.1-5.8-1.08a.61.61 0 00-.7.76L79.35 52a.61.61 0 001.19 0l4.66-25.1 5.8 1.03a.61.61 0 00.7-.76z"
+  }), (0, _react2.jsx)("path", {
+    fill: "#ffab00",
+    d: "M65.12 41.81l-10.88-8.55a.27.27 0 00-.41.33L59.36 45l-2.66 1.31a.27.27 0 000 .45l10.87 8.55a.27.27 0 00.41-.33l-5.57-11.43 2.66-1.29a.27.27 0 00.05-.45z"
+  }), (0, _react2.jsx)("path", {
+    fill: "none",
+    stroke: "#344563",
+    strokeLinecap: "round",
+    strokeMiterlimit: "10",
+    strokeWidth: "2",
+    d: "M115.15 36.6c-1.17 1.59-11-5.6-12.16-4s8.66 8.79 7.5 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39"
+  }), (0, _react2.jsx)("path", {
+    d: "M119.92 64.19c-1.46 1.33-7.05-4.78-8.51-3.44s4.13 7.45 2.67 8.78-7.05-4.78-8.51-3.44c-.68.62.16 2.27 1.11 4M44.8 64c1.82.77 5-6.87 6.86-6.1s-1.39 8.4.43 9.17 5-6.87 6.86-6.1c.85.36.61 2.19.29 4.13",
+    className: "cls-6"
+  })))));
+};
+var _default = exports.default = ErrorImage;

package/dist/cjs/ui/ConfigPanel/ErrorMessage/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
+var _ErrorImage = _interopRequireDefault(require("./ErrorImage"));
+var messages = (0, _reactIntlNext.defineMessages)({
+  configFailedToLoad: {
+    id: 'fabric.editor.configFailedToLoad',
+    defaultMessage: 'Failed to load',
+    description: 'Displayed when the config panel fails to load fields'
+  }
+});
+var ConfigPanelErrorMessage = function ConfigPanelErrorMessage(_ref) {
+  var errorMessage = _ref.errorMessage,
+    intl = _ref.intl;
+  return /*#__PURE__*/_react.default.createElement(_emptyState.default, {
+    header: intl.formatMessage(messages.configFailedToLoad),
+    description: errorMessage,
+    renderImage: function renderImage() {
+      return /*#__PURE__*/_react.default.createElement(_ErrorImage.default, null);
+    },
+    size: "narrow",
+    imageHeight: 80,
+    testId: "config-panel-error-message"
+  });
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(ConfigPanelErrorMessage);

package/dist/cjs/ui/ConfigPanel/FieldMessages.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _form = require("@atlaskit/form");
+var _messages = require("./messages");
+var _types = require("./types");
+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; }
+// sidestep XSS issues
+function makeMarkup(fragment, key) {
+  var nodeName = fragment.nodeName,
+    nodeType = fragment.nodeType,
+    childNodes = fragment.childNodes,
+    textContent = fragment.textContent;
+  if (nodeType === Node.TEXT_NODE) {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: key
+    }, textContent);
+  }
+
+  // NOTE: NodeList doesn't have .map
+  var children = [];
+  childNodes.forEach(function (childNode, i) {
+    var markup = makeMarkup(childNode, String(i));
+    if (markup) {
+      children.push(markup);
+    }
+  });
+  switch (nodeName) {
+    case 'B':
+      return /*#__PURE__*/_react.default.createElement("b", {
+        key: key
+      }, children);
+    case 'I':
+      return /*#__PURE__*/_react.default.createElement("i", {
+        key: key
+      }, children);
+    case 'STRONG':
+      return /*#__PURE__*/_react.default.createElement("strong", {
+        key: key
+      }, children);
+    case 'EM':
+      return /*#__PURE__*/_react.default.createElement("em", {
+        key: key
+      }, children);
+    case 'CODE':
+      return /*#__PURE__*/_react.default.createElement("code", {
+        key: key
+      }, children);
+  }
+  if (children.length === 1) {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: key
+    }, children[0]);
+  }
+  if (children.length) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      key: key
+    }, children);
+  }
+  return null;
+}
+function Description(_ref) {
+  var description = _ref.description;
+  var markup = (0, _react.useMemo)(function () {
+    var dom = new DOMParser().parseFromString(description, 'text/html');
+    return makeMarkup(dom);
+  }, [description]);
+  return /*#__PURE__*/_react.default.createElement(_form.HelperMessage, {
+    testId: "field-message-description"
+  }, markup);
+}
+var FieldMessages = function FieldMessages(_ref2) {
+  var error = _ref2.error,
+    description = _ref2.description,
+    intl = _ref2.intl;
+  if (!error && description) {
+    return /*#__PURE__*/_react.default.createElement(Description, {
+      description: description
+    });
+  }
+  switch (error) {
+    case _types.ValidationError.Required:
+      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(_messages.messages.required));
+    case _types.ValidationError.Invalid:
+      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(_messages.messages.invalid));
+    case _types.FieldTypeError.isMultipleAndRadio:
+      return /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+        testId: "config-panel-error-message"
+      }, intl.formatMessage(_messages.messages.isMultipleAndRadio));
+    default:
+      return null;
+  }
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(FieldMessages);

package/dist/cjs/ui/ConfigPanel/Fields/Boolean.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Boolean;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _checkbox = require("@atlaskit/checkbox");
+var _form = require("@atlaskit/form");
+var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
+var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
+var _types = require("../types");
+var _RequiredIndicator = require("./common/RequiredIndicator");
+var _excluded = ["value"],
+  _excluded2 = ["id", "value"];
+/** @jsx jsx */
+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 toggleFieldWrapperStyles = (0, _react2.css)({
+  display: 'flex'
+});
+var toggleLabelStyles = (0, _react2.css)({
+  display: 'flex',
+  padding: '3px 3px 3px 0px',
+  flexGrow: 1
+});
+function _validate(value, isRequired) {
+  if (isRequired && !value) {
+    return _types.ValidationError.Required;
+  }
+}
+function parseBoolean(value) {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+  return value === 'true';
+}
+function handleOnChange(onChange, onFieldChange, event) {
+  var _event$target;
+  onChange((event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.checked) || false);
+  // Note: prior to bumping typescript to version 2.4.2 onFieldChange
+  // was being called with a global variable (which had a value of '')
+  // While this was not intended, the code still worked as expected.
+  // In typescript 2.4.2 accessing the global variable name has been
+  // deprecated, so this has been replaced with the value it was
+  // previously passing.
+  onFieldChange('', true);
+}
+function Checkbox(_ref) {
+  var name = _ref.name,
+    field = _ref.field,
+    onFieldChange = _ref.onFieldChange;
+  var label = field.label,
+    description = field.description,
+    _field$isRequired = field.isRequired,
+    isRequired = _field$isRequired === void 0 ? false : _field$isRequired,
+    _field$defaultValue = field.defaultValue,
+    defaultValue = _field$defaultValue === void 0 ? false : _field$defaultValue;
+  return (0, _react2.jsx)(_form.Field, {
+    name: name,
+    isRequired: isRequired,
+    validate: function validate(value) {
+      return _validate(value, isRequired);
+    },
+    defaultValue: defaultValue
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps,
+      error = _ref2.error;
+    var isChecked = fieldProps.value,
+      restFieldProps = (0, _objectWithoutProperties2.default)(fieldProps, _excluded);
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_checkbox.Checkbox, (0, _extends2.default)({}, restFieldProps, {
+      label: label,
+      onChange: function onChange(event) {
+        return handleOnChange(fieldProps.onChange, onFieldChange, event);
+      },
+      isChecked: parseBoolean(isChecked)
+    })), (0, _react2.jsx)(_FieldMessages.default, {
+      error: error,
+      description: description
+    }));
+  });
+}
+function Toggle(_ref3) {
+  var name = _ref3.name,
+    field = _ref3.field,
+    onFieldChange = _ref3.onFieldChange;
+  var label = field.label,
+    description = field.description,
+    _field$isRequired2 = field.isRequired,
+    isRequired = _field$isRequired2 === void 0 ? false : _field$isRequired2,
+    _field$defaultValue2 = field.defaultValue,
+    defaultValue = _field$defaultValue2 === void 0 ? false : _field$defaultValue2;
+  return (0, _react2.jsx)(_form.Field, {
+    name: name,
+    isRequired: isRequired,
+    validate: function validate(value) {
+      return _validate(value, isRequired);
+    },
+    defaultValue: defaultValue,
+    testId: "config-panel-toggle-".concat(name)
+  }, function (_ref4) {
+    var fieldProps = _ref4.fieldProps,
+      error = _ref4.error;
+    var id = fieldProps.id,
+      isChecked = fieldProps.value,
+      restFieldProps = (0, _objectWithoutProperties2.default)(fieldProps, _excluded2);
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
+      css: toggleFieldWrapperStyles
+    }, (0, _react2.jsx)("label", {
+      css: toggleLabelStyles,
+      id: id,
+      htmlFor: id
+    }, label, isRequired ?
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("span", {
+      css: _RequiredIndicator.requiredIndicator,
+      "aria-hidden": "true"
+    }, "*") : null), (0, _react2.jsx)(_toggle.default, (0, _extends2.default)({}, restFieldProps, {
+      onChange: function onChange(event) {
+        return handleOnChange(fieldProps.onChange, onFieldChange, event);
+      },
+      isChecked: parseBoolean(isChecked)
+    }))), (0, _react2.jsx)(_FieldMessages.default, {
+      error: error,
+      description: description
+    }));
+  });
+}
+function Boolean(_ref5) {
+  var name = _ref5.name,
+    field = _ref5.field,
+    onFieldChange = _ref5.onFieldChange;
+  if (field.style === 'toggle') {
+    return (0, _react2.jsx)(Toggle, {
+      name: name,
+      field: field,
+      onFieldChange: onFieldChange
+    });
+  }
+  return (0, _react2.jsx)(Checkbox, {
+    name: name,
+    field: field,
+    onFieldChange: onFieldChange
+  });
+}

package/dist/cjs/ui/ConfigPanel/Fields/CheckboxGroup.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CheckboxGroup;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _checkbox = require("@atlaskit/checkbox");
+var _form = require("@atlaskit/form");
+var _FieldMessages = _interopRequireDefault(require("../FieldMessages"));
+var _types = require("../types");
+var _excluded = ["onChange", "value"];
+/** @jsx jsx */
+function _validate(value, isRequired) {
+  if (isRequired && !(value !== null && value !== void 0 && value.length)) {
+    return _types.ValidationError.Required;
+  }
+}
+var requiredIndicatorStyles = (0, _react2.css)({
+  color: "var(--ds-text-danger, #bf2600)"
+});
+function CheckboxGroupInner(_ref) {
+  var label = _ref.label,
+    description = _ref.description,
+    onFieldChange = _ref.onFieldChange,
+    options = _ref.options,
+    error = _ref.error,
+    fieldProps = _ref.fieldProps;
+  var onChange = fieldProps.onChange,
+    value = fieldProps.value,
+    restFieldProps = (0, _objectWithoutProperties2.default)(fieldProps, _excluded);
+  function _onChange(optionValue, isChecked) {
+    var active = new Set(value ? value : []);
+    if (isChecked) {
+      active.add(optionValue);
+    } else {
+      active.delete(optionValue);
+    }
+    onChange((0, _toConsumableArray2.default)(active));
+    onFieldChange();
+  }
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_form.Fieldset, {
+    legend: label
+  }, options.map(function (_ref2, i) {
+    var optionLabel = _ref2.label,
+      optionValue = _ref2.value;
+    var isChecked = value && value.includes(optionValue);
+    var onOptionChange = function onOptionChange(event) {
+      _onChange(optionValue, event.target.checked);
+    };
+    return (0, _react2.jsx)(_checkbox.Checkbox, (0, _extends2.default)({
+      key: i
+    }, restFieldProps, {
+      isRequired: false,
+      label: optionLabel,
+      isChecked: isChecked,
+      onChange: onOptionChange
+    }));
+  })), (0, _react2.jsx)(_FieldMessages.default, {
+    error: error,
+    description: description
+  }));
+}
+function CheckboxGroup(_ref3) {
+  var name = _ref3.name,
+    field = _ref3.field,
+    onFieldChange = _ref3.onFieldChange;
+  var labelBase = field.label,
+    description = field.description,
+    defaultValue = field.defaultValue,
+    _field$isRequired = field.isRequired,
+    isRequired = _field$isRequired === void 0 ? false : _field$isRequired,
+    options = field.items;
+  var label = (0, _react2.jsx)(_react.Fragment, null, labelBase, isRequired ? (0, _react2.jsx)("span", {
+    css: requiredIndicatorStyles,
+    "aria-hidden": "true"
+  }, ' ', "*") : null);
+  var _onFieldChange = (0, _react.useCallback)(function () {
+    onFieldChange(name, true);
+  }, [name, onFieldChange]);
+  return (0, _react2.jsx)(_form.Field, {
+    name: name,
+    isRequired: isRequired,
+    defaultValue: defaultValue,
+    validate: function validate(value) {
+      return _validate(value, isRequired);
+    }
+  }, function (props) {
+    return (0, _react2.jsx)(CheckboxGroupInner, (0, _extends2.default)({
+      label: label,
+      description: description,
+      options: options,
+      onFieldChange: _onFieldChange
+    }, props));
+  });
+}