@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

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

@@ -0,0 +1,411 @@
+/** @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 } 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 const 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(color => ({
+  ...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 const 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(color => ({
+  ...color,
+  border: DEFAULT_BORDER_COLOR
+}));
+const colorPickerWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  height: "var(--ds-space-400, 32px)",
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+const colorPickerLabelStyles = css({
+  fontSize: `${headingSizes.h400.size}px`,
+  marginTop: 0
+});
+export const EXPANDED_COLOR_PICKER_COLUMNS = 9;
+export const ORIGINAL_COLOR_PICKER_COLUMNS = 5;
+const ColorPicker = props => {
+  const {
+    name,
+    title,
+    currentColor,
+    onChange,
+    onFieldChange
+  } = props;
+  const onColorChange = color => {
+    const 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)
+    }
+  });
+};
+const ColorPickerField = ({
+  name,
+  field,
+  onFieldChange,
+  featureFlags
+}) => {
+  const {
+    label,
+    defaultValue,
+    isRequired
+  } = field;
+  return jsx(Field, {
+    name: name,
+    isRequired: isRequired,
+    defaultValue: defaultValue,
+    testId: `config-panel-color-picker-${name}`,
+    validate: value => validate(field, value || '')
+  }, ({
+    fieldProps,
+    error
+  }) => 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: ""
+  })));
+};
+const getCurrentRemSize = () => {
+  const fallback = 16; // 16px is the default rem size for most browsers
+  if (typeof document === 'undefined' || typeof getComputedStyle === 'undefined') {
+    return fallback;
+  }
+  const value = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  return value || fallback;
+};
+export default ColorPickerField;

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

@@ -0,0 +1,132 @@
+import _extends from "@babel/runtime/helpers/extends";
+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 } from '../utils';
+import { formatOptionLabel } from './SelectItem';
+import UnhandledType from './UnhandledType';
+function FieldError({
+  name,
+  field
+}) {
+  const {
+    type
+  } = field.options.resolver;
+  return /*#__PURE__*/React.createElement(UnhandledType, {
+    key: name,
+    field: field,
+    errorMessage: `Field "${name}" can't be rendered. Missing resolver for "${type}".`
+  });
+}
+function CustomSelect({
+  name,
+  autoFocus,
+  extensionManifest,
+  placeholder,
+  field,
+  onFieldChange,
+  parameters,
+  intl
+}) {
+  const {
+    defaultValue: fieldDefaultValue,
+    description,
+    isMultiple,
+    isRequired,
+    label,
+    options
+  } = field;
+  const [loading, setLoading] = useState(true);
+  const [resolver, setResolver] = useState(null);
+  const [defaultOptions, setDefaultOptions] = useState([]);
+  const [defaultValue, setDefaultValue] = useState(undefined);
+  useEffect(() => {
+    let cancel = false;
+    async function fetchResolver() {
+      setLoading(true);
+      try {
+        const resolver = await getCustomFieldResolver(extensionManifest, field.options.resolver);
+        if (cancel) {
+          return;
+        }
+        setResolver(() => resolver);
+
+        // fetch the default values
+        const options = await resolver(undefined, fieldDefaultValue, parameters);
+        setDefaultOptions(options);
+        if (cancel) {
+          return;
+        }
+
+        // filter returned values to match the defaultValue
+        if (fieldDefaultValue && isMultiple) {
+          setDefaultValue(options.filter(option => fieldDefaultValue.includes(option.value)));
+        }
+        if (fieldDefaultValue && !isMultiple) {
+          setDefaultValue(options.find(option => fieldDefaultValue === option.value));
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e);
+      }
+      setLoading(false);
+    }
+    fetchResolver();
+    return () => {
+      cancel = true;
+    };
+  }, [extensionManifest, field.options.resolver, fieldDefaultValue, isMultiple, parameters]);
+  function formatCreateLabel(value) {
+    if (!value) {
+      return null;
+    }
+    const message = intl.formatMessage(messages.createOption);
+    return `${message} "${value}"`;
+  }
+  const {
+    isCreatable
+  } = options;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    defaultValue: defaultValue,
+    validate: value => validate(field, value),
+    testId: `config-panel-custom-select-${name}`
+  }, ({
+    fieldProps,
+    error
+  }) => /*#__PURE__*/React.createElement(React.Fragment, null, resolver && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AsyncCreatableSelect, _extends({}, fieldProps, {
+    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: value => !!(isCreatable && value),
+    validationState: error ? 'error' : 'default',
+    defaultOptions: defaultOptions,
+    formatCreateLabel: value => formatCreateLabel(value),
+    formatOptionLabel: formatOptionLabel,
+    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/es2019/ui/ConfigPanel/Fields/Date.js

@@ -0,0 +1,50 @@
+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 } from '../utils';
+function Date({
+  name,
+  field,
+  autoFocus,
+  onFieldChange,
+  placeholder,
+  intl
+}) {
+  const {
+    label,
+    description,
+    defaultValue,
+    isRequired
+  } = field;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    label: label,
+    defaultValue: defaultValue,
+    isRequired: isRequired,
+    validate: value => validate(field, value),
+    testId: `config-panel-date-picker-${name}`
+  }, ({
+    fieldProps,
+    error
+  }) => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DatePicker, _extends({}, fieldProps, {
+      autoFocus: autoFocus,
+      onBlur: () => {
+        fieldProps.onBlur();
+      },
+      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);