@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/esm/ui/ConfigPanel/Fields/ColorPicker.js

@@ -0,0 +1,414 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/** @jsx jsx */
+import { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
+import { chartsColorPaletteTooltipMessages, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
+import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
+import { Field } from '@atlaskit/form';
+import { headingSizes } from '@atlaskit/theme/typography';
+import FieldMessages from '../FieldMessages';
+import { validate as _validate } from '../utils';
+import { requiredIndicator } from './common/RequiredIndicator';
+/*
+    NOTE: color used here are not yet in atlaskit code
+    this is part of extended color pack from ADG, which is yet to be release
+    at the time of writing this.
+
+    Colour sequence source: https://product-fabric.atlassian.net/browse/ED-12650?focusedCommentId=204875
+*/
+
+export var colorPalette = [{
+  label: 'Light Blue',
+  value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
+},
+// 400
+{
+  label: 'Light Green',
+  value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
+},
+// 400
+{
+  label: 'Light Yellow',
+  value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
+},
+// 400
+{
+  label: 'Light Red',
+  value: "var(--ds-background-accent-red-subtle, #FF8F73)"
+},
+// 400
+{
+  label: 'Light Purple',
+  value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
+},
+// 400
+
+{
+  label: 'Blue',
+  value: "var(--ds-chart-blue-bold, #247FFF)"
+},
+// 600
+{
+  label: 'Green',
+  value: "var(--ds-chart-green-bold, #23A971)"
+},
+// 600
+{
+  label: 'Yellow',
+  value: "var(--ds-chart-yellow-bold, #FFBE33)"
+},
+// 600
+{
+  label: 'Red',
+  value: "var(--ds-chart-red-bold, #FC552C)"
+},
+// 600
+{
+  label: 'Purple',
+  value: "var(--ds-chart-purple-bold, #8B77EE)"
+},
+// 600
+
+{
+  label: 'Dark Blue',
+  value: "var(--ds-chart-blue-bolder, #0055CC)"
+},
+// 800
+{
+  label: 'Dark Green',
+  value: "var(--ds-chart-green-bolder, #177D52)"
+},
+// 800
+{
+  label: 'Dark Yellow',
+  value: "var(--ds-chart-yellow-bolder, #FF9D00)"
+},
+// 800
+{
+  label: 'Dark Red',
+  value: "var(--ds-chart-red-bolder, #D32D03)"
+},
+// 800
+{
+  label: 'Dark Purple',
+  value: "var(--ds-chart-purple-bolder, #5A43D0)"
+},
+// 800
+
+{
+  label: 'Darker Blue',
+  value: "var(--ds-chart-blue-boldest, #003884)"
+},
+// 1000
+{
+  label: 'Darker Green',
+  value: "var(--ds-chart-green-boldest, #055C3F)"
+},
+// 1000
+{
+  label: 'Darker Yellow',
+  value: "var(--ds-chart-yellow-boldest, #946104)"
+},
+// 1000
+{
+  label: 'Darker Red',
+  value: "var(--ds-chart-red-boldest, #A32000)"
+},
+// 1000
+{
+  label: 'Darker Purple',
+  value: "var(--ds-chart-purple-boldest, #44368B)"
+} // 1000
+].map(function (color) {
+  return _objectSpread(_objectSpread({}, color), {}, {
+    border: DEFAULT_BORDER_COLOR
+  });
+});
+
+/**
+ * Extended chart colors.
+ * Decided here https://product-fabric.atlassian.net/wiki/spaces/EUXQ/pages/3477245015/Tokenising+table+charts+color
+ */
+export var extendedColorPalette = [{
+  label: 'Darker Blue',
+  value: "var(--ds-chart-blue-boldest, #003884)"
+},
+// 1000
+{
+  label: 'Darker Teal',
+  value: "var(--ds-chart-teal-boldest, #206B74)"
+},
+// 1000
+{
+  label: 'Darker Green',
+  value: "var(--ds-chart-green-boldest, #055C3F)"
+},
+// 1000
+{
+  label: 'Darker Yellow',
+  value: "var(--ds-chart-yellow-boldest, #946104)"
+},
+// 1000
+{
+  label: 'Darker Orange',
+  value: "var(--ds-chart-orange-boldest, #974F0C)"
+},
+// 1000
+{
+  label: 'Darker Red',
+  value: "var(--ds-chart-red-boldest, #A32000)"
+},
+// 1000
+{
+  label: 'Darker Magenta',
+  value: "var(--ds-chart-magenta-boldest, #943D73)"
+},
+// 1000
+{
+  label: 'Darker Purple',
+  value: "var(--ds-chart-purple-boldest, #44368B)"
+},
+// 1000
+{
+  label: 'Darker Gray',
+  value: "var(--ds-chart-gray-boldest, #44546F)"
+},
+// 1000
+
+{
+  label: 'Dark Blue',
+  value: "var(--ds-chart-blue-bolder, #0055CC)"
+},
+// 800
+{
+  label: 'Dark Teal',
+  value: "var(--ds-chart-teal-bolder, #1D7F8C)"
+},
+// 800
+{
+  label: 'Dark Green',
+  value: "var(--ds-chart-green-bolder, #177D52)"
+},
+// 800
+{
+  label: 'Dark Yellow',
+  value: "var(--ds-chart-yellow-bolder, #FF9D00)"
+},
+// 800
+{
+  label: 'Dark Orange',
+  value: "var(--ds-chart-orange-bolder, #B65C02)"
+},
+// 800
+{
+  label: 'Dark Red',
+  value: "var(--ds-chart-red-bolder, #D32D03)"
+},
+// 800
+{
+  label: 'Dark Magenta',
+  value: "var(--ds-chart-magenta-bolder, #CD519D)"
+},
+// 800
+{
+  label: 'Dark Purple',
+  value: "var(--ds-chart-purple-bolder, #5A43D0)"
+},
+// 800
+{
+  label: 'Dark Gray',
+  value: "var(--ds-chart-gray-bolder, #758195)"
+},
+// 800
+
+{
+  label: 'Blue',
+  value: "var(--ds-chart-blue-bold, #247FFF)"
+},
+// 600
+{
+  label: 'Teal',
+  value: "var(--ds-chart-teal-bold, #1D9AAA)"
+},
+// 600
+{
+  label: 'Green',
+  value: "var(--ds-chart-green-bold, #23A971)"
+},
+// 600
+{
+  label: 'Yellow',
+  value: "var(--ds-chart-yellow-bold, #FFBE33)"
+},
+// 600
+{
+  label: 'Orange',
+  value: "var(--ds-chart-orange-bold, #D97008)"
+},
+// 600
+{
+  label: 'Red',
+  value: "var(--ds-chart-red-bold, #FC552C)"
+},
+// 600
+{
+  label: 'Magenta',
+  value: "var(--ds-chart-magenta-bold, #DA62AC)"
+},
+// 600
+{
+  label: 'Purple',
+  value: "var(--ds-chart-purple-bold, #8B77EE)"
+},
+// 600
+{
+  label: 'Gray',
+  value: "var(--ds-chart-gray-bold, #8590A2)"
+},
+// 600
+
+{
+  label: 'Light Blue',
+  value: "var(--ds-background-accent-blue-subtle, #7AB2FF)"
+},
+// 400
+{
+  label: 'Light Teal',
+  value: "var(--ds-background-accent-teal-subtle, #60C6D2)"
+},
+// 400
+{
+  label: 'Light Green',
+  value: "var(--ds-background-accent-green-subtle, #6BE1B0)"
+},
+// 400
+{
+  label: 'Light Yellow',
+  value: "var(--ds-background-accent-yellow-subtle, #FFDB57)"
+},
+// 400
+{
+  label: 'Light Orange',
+  value: "var(--ds-background-accent-orange-subtle, #FAA53D)"
+},
+// 400
+{
+  label: 'Light Red',
+  value: "var(--ds-background-accent-red-subtle, #FF8F73)"
+},
+// 400
+{
+  label: 'Light Magenta',
+  value: "var(--ds-background-accent-magenta-subtle, #E774BB)"
+},
+// 400
+{
+  label: 'Light Purple',
+  value: "var(--ds-background-accent-purple-subtle, #B5A7FB)"
+},
+// 400
+{
+  label: 'Light Gray',
+  value: "var(--ds-background-accent-gray-subtle, #8993A5)"
+} // 400
+].map(function (color) {
+  return _objectSpread(_objectSpread({}, color), {}, {
+    border: DEFAULT_BORDER_COLOR
+  });
+});
+var colorPickerWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: "var(--ds-space-400, 32px)",
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+var colorPickerLabelStyles = css({
+  fontSize: "".concat(headingSizes.h400.size, "px"),
+  marginTop: 0
+});
+export var EXPANDED_COLOR_PICKER_COLUMNS = 9;
+export var ORIGINAL_COLOR_PICKER_COLUMNS = 5;
+var ColorPicker = function ColorPicker(props) {
+  var name = props.name,
+    title = props.title,
+    currentColor = props.currentColor,
+    onChange = props.onChange,
+    onFieldChange = props.onFieldChange;
+  var onColorChange = function onColorChange(color) {
+    var colorValue = color.value;
+    onChange(colorValue);
+    onFieldChange(name, currentColor !== colorValue);
+  };
+  return jsx(ColorPickerButton, {
+    title: title,
+    currentColor: currentColor,
+    onChange: onColorChange,
+    colorPalette: extendedColorPalette,
+    paletteColorTooltipMessages: chartsColorPaletteTooltipMessages,
+    cols: EXPANDED_COLOR_PICKER_COLUMNS,
+    alignX: "right",
+    placement: "ConfigPanel",
+    size: {
+      width: "var(--ds-space-300, 24px)",
+      height: "var(--ds-space-300, 24px)"
+    }
+    /* ED-18288 We align the palette to the right edge which is 1.5rem spacing away to avoid
+      excess overflow on left. Additional 1 is to mitigate 1px added by floating toolbar. */,
+    absoluteOffset: {
+      right: Number(-1.5 * getCurrentRemSize() - 1)
+    }
+  });
+};
+var ColorPickerField = function ColorPickerField(_ref) {
+  var name = _ref.name,
+    field = _ref.field,
+    onFieldChange = _ref.onFieldChange,
+    featureFlags = _ref.featureFlags;
+  var label = field.label,
+    defaultValue = field.defaultValue,
+    isRequired = field.isRequired;
+  return jsx(Field, {
+    name: name,
+    isRequired: isRequired,
+    defaultValue: defaultValue,
+    testId: "config-panel-color-picker-".concat(name),
+    validate: function validate(value) {
+      return _validate(field, value || '');
+    }
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps,
+      error = _ref2.error;
+    return jsx(Fragment, null, jsx("div", {
+      css: colorPickerWrapperStyles
+    }, jsx("label", {
+      css: colorPickerLabelStyles
+    }, label, isRequired &&
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("span", {
+      css: requiredIndicator,
+      "aria-hidden": "true"
+    }, "*")), jsx(ColorPicker, {
+      name: name,
+      title: label,
+      currentColor: fieldProps.value,
+      onChange: fieldProps.onChange,
+      onFieldChange: onFieldChange,
+      featureFlags: featureFlags
+    })), error && jsx(FieldMessages, {
+      error: error,
+      description: ""
+    }));
+  });
+};
+var getCurrentRemSize = function getCurrentRemSize() {
+  var fallback = 16; // 16px is the default rem size for most browsers
+  if (typeof document === 'undefined' || typeof getComputedStyle === 'undefined') {
+    return fallback;
+  }
+  var value = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  return value || fallback;
+};
+export default ColorPickerField;

package/dist/esm/ui/ConfigPanel/Fields/CustomSelect.js

@@ -0,0 +1,182 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState } from 'react';
+import { injectIntl } from 'react-intl-next';
+import { getCustomFieldResolver } from '@atlaskit/editor-common/extensions';
+import { Field } from '@atlaskit/form';
+import { AsyncCreatableSelect } from '@atlaskit/select';
+import FieldMessages from '../FieldMessages';
+import { messages } from '../messages';
+import { validate as _validate } from '../utils';
+import { formatOptionLabel } from './SelectItem';
+import UnhandledType from './UnhandledType';
+function FieldError(_ref) {
+  var name = _ref.name,
+    field = _ref.field;
+  var type = field.options.resolver.type;
+  return /*#__PURE__*/React.createElement(UnhandledType, {
+    key: name,
+    field: field,
+    errorMessage: "Field \"".concat(name, "\" can't be rendered. Missing resolver for \"").concat(type, "\".")
+  });
+}
+function CustomSelect(_ref2) {
+  var name = _ref2.name,
+    autoFocus = _ref2.autoFocus,
+    extensionManifest = _ref2.extensionManifest,
+    placeholder = _ref2.placeholder,
+    field = _ref2.field,
+    onFieldChange = _ref2.onFieldChange,
+    parameters = _ref2.parameters,
+    intl = _ref2.intl;
+  var fieldDefaultValue = field.defaultValue,
+    description = field.description,
+    isMultiple = field.isMultiple,
+    isRequired = field.isRequired,
+    label = field.label,
+    options = field.options;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    resolver = _useState4[0],
+    setResolver = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    defaultOptions = _useState6[0],
+    setDefaultOptions = _useState6[1];
+  var _useState7 = useState(undefined),
+    _useState8 = _slicedToArray(_useState7, 2),
+    defaultValue = _useState8[0],
+    setDefaultValue = _useState8[1];
+  useEffect(function () {
+    var cancel = false;
+    function fetchResolver() {
+      return _fetchResolver.apply(this, arguments);
+    }
+    function _fetchResolver() {
+      _fetchResolver = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _resolver, _options;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              setLoading(true);
+              _context.prev = 1;
+              _context.next = 4;
+              return getCustomFieldResolver(extensionManifest, field.options.resolver);
+            case 4:
+              _resolver = _context.sent;
+              if (!cancel) {
+                _context.next = 7;
+                break;
+              }
+              return _context.abrupt("return");
+            case 7:
+              setResolver(function () {
+                return _resolver;
+              });
+
+              // fetch the default values
+              _context.next = 10;
+              return _resolver(undefined, fieldDefaultValue, parameters);
+            case 10:
+              _options = _context.sent;
+              setDefaultOptions(_options);
+              if (!cancel) {
+                _context.next = 14;
+                break;
+              }
+              return _context.abrupt("return");
+            case 14:
+              // filter returned values to match the defaultValue
+              if (fieldDefaultValue && isMultiple) {
+                setDefaultValue(_options.filter(function (option) {
+                  return fieldDefaultValue.includes(option.value);
+                }));
+              }
+              if (fieldDefaultValue && !isMultiple) {
+                setDefaultValue(_options.find(function (option) {
+                  return fieldDefaultValue === option.value;
+                }));
+              }
+              _context.next = 21;
+              break;
+            case 18:
+              _context.prev = 18;
+              _context.t0 = _context["catch"](1);
+              // eslint-disable-next-line no-console
+              console.error(_context.t0);
+            case 21:
+              setLoading(false);
+            case 22:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[1, 18]]);
+      }));
+      return _fetchResolver.apply(this, arguments);
+    }
+    fetchResolver();
+    return function () {
+      cancel = true;
+    };
+  }, [extensionManifest, field.options.resolver, fieldDefaultValue, isMultiple, parameters]);
+  function _formatCreateLabel(value) {
+    if (!value) {
+      return null;
+    }
+    var message = intl.formatMessage(messages.createOption);
+    return "".concat(message, " \"").concat(value, "\"");
+  }
+  var isCreatable = options.isCreatable;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    defaultValue: defaultValue,
+    validate: function validate(value) {
+      return _validate(field, value);
+    },
+    testId: "config-panel-custom-select-".concat(name)
+  }, function (_ref3) {
+    var fieldProps = _ref3.fieldProps,
+      error = _ref3.error;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, resolver && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AsyncCreatableSelect, _extends({}, fieldProps, {
+      onChange: function onChange(value) {
+        fieldProps.onChange(value);
+        // We assume onChange is called whenever values actually changed
+        // for isDirty
+        onFieldChange(name, true);
+      }
+      // add type cast to avoid adding a "IsMulti" generic prop (TODO: ED-12072)
+      ,
+      isMulti: isMultiple || false,
+      isClearable: true,
+      isValidNewOption: function isValidNewOption(value) {
+        return !!(isCreatable && value);
+      },
+      validationState: error ? 'error' : 'default',
+      defaultOptions: defaultOptions,
+      formatCreateLabel: function formatCreateLabel(value) {
+        return _formatCreateLabel(value);
+      },
+      formatOptionLabel: formatOptionLabel,
+      loadOptions: function loadOptions(searchTerm) {
+        return resolver(searchTerm, fieldDefaultValue, parameters);
+      },
+      autoFocus: autoFocus,
+      placeholder: placeholder
+    })), /*#__PURE__*/React.createElement(FieldMessages, {
+      error: error,
+      description: description
+    })), !loading && !resolver && /*#__PURE__*/React.createElement(FieldError, {
+      name: name,
+      field: field
+    }));
+  });
+}
+export default injectIntl(CustomSelect);

package/dist/esm/ui/ConfigPanel/Fields/Date.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { DatePicker } from '@atlaskit/datetime-picker';
+import { Field } from '@atlaskit/form';
+import FieldMessages from '../FieldMessages';
+import { validate as _validate } from '../utils';
+function Date(_ref) {
+  var name = _ref.name,
+    field = _ref.field,
+    autoFocus = _ref.autoFocus,
+    onFieldChange = _ref.onFieldChange,
+    placeholder = _ref.placeholder,
+    intl = _ref.intl;
+  var label = field.label,
+    description = field.description,
+    defaultValue = field.defaultValue,
+    isRequired = field.isRequired;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    label: label,
+    defaultValue: defaultValue,
+    isRequired: isRequired,
+    validate: function validate(value) {
+      return _validate(field, value);
+    },
+    testId: "config-panel-date-picker-".concat(name)
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps,
+      error = _ref2.error;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DatePicker, _extends({}, fieldProps, {
+      autoFocus: autoFocus,
+      onBlur: function onBlur() {
+        fieldProps.onBlur();
+      },
+      onChange: function onChange(value) {
+        fieldProps.onChange(value);
+        onFieldChange(name, true);
+      },
+      locale: intl.locale,
+      placeholder: placeholder
+    })), /*#__PURE__*/React.createElement(FieldMessages, {
+      error: error,
+      description: description
+    }));
+  });
+}
+export default injectIntl(Date);