@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

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

@@ -0,0 +1,139 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { Fragment, useEffect, useMemo, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { DatePicker } from '@atlaskit/datetime-picker';
+import { Field } from '@atlaskit/form';
+import { RadioGroup } from '@atlaskit/radio';
+import TextField from '@atlaskit/textfield';
+import FieldMessages from '../FieldMessages';
+import { messages } from '../messages';
+import { validate, validateRequired } from '../utils';
+const horizontalFieldsStyles = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between'
+});
+const horizontalFieldWrapperStyles = css({
+  flexBasis: '47%'
+});
+const hiddenStyles = css({
+  display: 'none'
+});
+const getFromDefaultValue = (field, attribute) => {
+  if (field.defaultValue) {
+    return field.defaultValue[attribute];
+  }
+};
+const DateField = ({
+  parentField,
+  scope,
+  fieldName,
+  onFieldChange,
+  intl,
+  isRequired
+}) => jsx("div", {
+  css: horizontalFieldWrapperStyles,
+  key: fieldName
+}, jsx(Field, {
+  name: `${scope}.${fieldName}`,
+  label: intl.formatMessage(messages[fieldName]),
+  defaultValue: getFromDefaultValue(parentField, fieldName),
+  isRequired: isRequired,
+  validate: value => {
+    return validateRequired({
+      isRequired
+    }, value);
+  }
+}, ({
+  fieldProps,
+  error
+}) => jsx(Fragment, null, jsx(DatePicker, _extends({}, fieldProps, {
+  onChange: date => {
+    fieldProps.onChange(date);
+    onFieldChange(parentField.name, true);
+  },
+  locale: intl.locale
+})), jsx(FieldMessages, {
+  error: error
+}))));
+const DateRange = function ({
+  name,
+  field,
+  onFieldChange,
+  intl
+}) {
+  const items = useMemo(() => {
+    return [...(field.items || []), {
+      label: intl.formatMessage(messages.custom),
+      value: 'custom'
+    }].map(option => ({
+      ...option,
+      name
+    }));
+  }, [field.items, name, intl]);
+  const [currentValue, setCurrentValue] = useState(getFromDefaultValue(field, 'value') || items[0].value);
+  useEffect(() => {
+    // calling onBlur here based on the currentValue changing will ensure that we
+    // get the most up to date value after the form has been rendered
+    onFieldChange(name, true);
+  }, [currentValue, onFieldChange, name]);
+  const element = jsx(Fragment, null, jsx("div", {
+    css: hiddenStyles
+  }, jsx(Field, {
+    name: `${name}.type`,
+    defaultValue: 'date-range'
+  }, ({
+    fieldProps
+  }) => jsx(TextField, _extends({}, fieldProps, {
+    type: "hidden"
+  })))), jsx(Field, {
+    name: `${name}.value`,
+    label: field.label,
+    defaultValue: currentValue,
+    isRequired: field.isRequired,
+    validate: value => validate(field, value || ''),
+    testId: `config-panel-date-range-${name}`
+  }, ({
+    fieldProps,
+    error
+  }) => jsx(Fragment, null, jsx(RadioGroup, _extends({}, fieldProps, {
+    options: items,
+    onChange: event => {
+      fieldProps.onChange(event.target.value);
+      setCurrentValue(event.target.value);
+    }
+  })), jsx(FieldMessages, {
+    error: error
+  }))), currentValue !== 'custom' ? jsx("div", {
+    css: hiddenStyles
+  }, jsx(Field, {
+    name: `${name}.from`,
+    defaultValue: currentValue
+  }, ({
+    fieldProps
+  }) => jsx(TextField, _extends({}, fieldProps, {
+    type: "hidden"
+  })))) : jsx("div", {
+    css: horizontalFieldsStyles
+  }, jsx(DateField, {
+    scope: name,
+    parentField: field,
+    fieldName: "from",
+    onFieldChange: onFieldChange,
+    intl: intl,
+    isRequired: field.isRequired
+  }), jsx(DateField, {
+    scope: name,
+    parentField: field,
+    fieldName: "to",
+    onFieldChange: onFieldChange,
+    intl: intl,
+    isRequired: field.isRequired
+  })), jsx(FieldMessages, {
+    description: field.description
+  }));
+  return element;
+};
+export default injectIntl(DateRange);

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import CheckboxGroup from './CheckboxGroup';
+import RadioGroup from './RadioGroup';
+import Select from './Select';
+export default function Enum({
+  name,
+  field,
+  autoFocus,
+  onFieldChange,
+  fieldDefaultValue
+}) {
+  switch (field.style) {
+    case 'checkbox':
+      return /*#__PURE__*/React.createElement(CheckboxGroup, {
+        name: name,
+        field: field,
+        onFieldChange: onFieldChange
+      });
+    case 'radio':
+      return /*#__PURE__*/React.createElement(RadioGroup, {
+        name: name,
+        field: field,
+        onFieldChange: onFieldChange
+      });
+    case 'select':
+      return /*#__PURE__*/React.createElement(Select, {
+        name: name,
+        field: field,
+        onFieldChange: onFieldChange,
+        placeholder: field.placeholder,
+        autoFocus: autoFocus,
+        fieldDefaultValue: fieldDefaultValue
+      });
+  }
+}

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

@@ -0,0 +1,73 @@
+/** @jsx jsx */
+import React, { useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import Button from '@atlaskit/button';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
+import { N40 } from '@atlaskit/theme/colors';
+import { messages } from '../messages';
+const expandContainerStyles = css({
+  borderBottom: `1px solid ${`var(--ds-border, ${N40})`}`
+});
+const expandControlStyles = css({
+  display: 'flex',
+  height: "var(--ds-space-600, 48px)",
+  justifyContent: 'center',
+  paddingRight: "var(--ds-space-100, 8px)"
+});
+const chevronContainerStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '& > button': {
+    width: "var(--ds-space-300, 24px)",
+    height: "var(--ds-space-300, 24px)"
+  }
+});
+const labelContainerStyles = css({
+  width: '100%',
+  alignItems: 'center',
+  display: 'flex',
+  fontWeight: 500
+});
+const expandContentContainerHiddenStyles = css({
+  display: 'none',
+  marginTop: "var(--ds-space-negative-100, -8px)"
+});
+const expandContentContainerVisibleStyles = css({
+  display: 'block',
+  marginTop: "var(--ds-space-negative-100, -8px)"
+});
+function Expand({
+  field,
+  children,
+  isExpanded = false,
+  intl
+}) {
+  const [expanded, setExpanded] = useState(isExpanded);
+  return jsx("div", {
+    "data-testid": "expand-config-field",
+    css: expandContainerStyles
+  }, jsx("div", {
+    css: expandControlStyles
+  }, jsx("div", {
+    css: labelContainerStyles
+  }, field.label), jsx("div", {
+    css: chevronContainerStyles
+  }, jsx(Button, {
+    onClick: () => {
+      setExpanded(!expanded);
+    },
+    testId: "form-expand-toggle",
+    iconBefore: expanded ? jsx(ChevronDownIcon, {
+      label: intl.formatMessage(messages.collapse)
+    }) : jsx(ChevronRightIcon, {
+      label: intl.formatMessage(messages.expand)
+    })
+  }))), jsx("div", {
+    "data-testid": "expand-content-container",
+    css: expanded ? expandContentContainerVisibleStyles : expandContentContainerHiddenStyles
+  }, children));
+}
+export default injectIntl(Expand);

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

@@ -0,0 +1,227 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/custom-theme-button';
+import AddCircleIcon from '@atlaskit/icon/glyph/add-circle';
+import SectionMessage from '@atlaskit/section-message';
+import Select from '@atlaskit/select';
+import { N40A } from '@atlaskit/theme/colors';
+import { messages } from '../messages';
+import { getNameFromDuplicateField, isDuplicateField } from '../utils';
+const actionsWrapperStyles = css({
+  borderTop: `1px solid ${`var(--ds-border, ${N40A})`}`,
+  marginTop: "var(--ds-space-200, 16px)",
+  paddingTop: "var(--ds-space-200, 16px)"
+});
+const populateFromParameters = (parameters, fields) => {
+  if (Object.keys(parameters).length) {
+    const keys = Object.keys(parameters);
+    const existingFieldKeys = keys.filter(key => fields.find(field => field.name === getNameFromDuplicateField(key)));
+    if (existingFieldKeys.length > 0) {
+      return existingFieldKeys;
+    }
+  }
+};
+const populateFromRequired = fields => {
+  return fields.filter(field => field.isRequired).map(field => field.name);
+};
+const getInitialFields = (parameters = {}, fields, isDynamic) => {
+  if (!isDynamic) {
+    return new Set(fields.map(field => field.name));
+  }
+  const dynamicFields = [];
+  const fromRequired = populateFromRequired(fields);
+  if (fromRequired) {
+    dynamicFields.push(...fromRequired);
+  }
+  const fromParameters = populateFromParameters(parameters, fields);
+  if (fromParameters) {
+    dynamicFields.push(...fromParameters);
+  }
+  if (dynamicFields.length === 0 && Array.isArray(fields) && fields.length > 0) {
+    dynamicFields.push(fields[0].name);
+  }
+  return new Set(dynamicFields);
+};
+// eslint-disable-next-line @repo/internal/react/no-class-components
+class FieldsetField extends React.Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "getSelectedFields", visibleFields => {
+      const {
+        field
+      } = this.props;
+      return [...visibleFields].map(fieldName => {
+        const originalFieldDef = field.fields.find(field => field.name === getNameFromDuplicateField(fieldName));
+        const fieldDef = {
+          ...originalFieldDef,
+          name: fieldName
+        };
+        // for duplicate fields we only want the first one to actually be required
+        if (originalFieldDef.name !== fieldName && fieldDef.isRequired === true) {
+          fieldDef.isRequired = false;
+        }
+        return fieldDef;
+      });
+    });
+    _defineProperty(this, "getSelectOptions", visibleFields => {
+      const {
+        field
+      } = this.props;
+      return field.fields.filter(field => field.allowDuplicates || !visibleFields.has(field.name)).map(field => ({
+        value: field.name,
+        label: field.label
+      }));
+    });
+    _defineProperty(this, "setIsAdding", value => {
+      this.setState(state => ({
+        ...state,
+        isAdding: value
+      }));
+    });
+    _defineProperty(this, "setCurrentParameters", parameters => {
+      this.setState(state => ({
+        ...state,
+        currentParameters: parameters
+      }),
+      // callback required so autosave can be triggered on
+      // the right moment if fields are being removed
+      () => this.props.onFieldChange(this.props.field.name, true));
+    });
+    _defineProperty(this, "setVisibleFields", fields => {
+      this.setState(state => ({
+        ...state,
+        visibleFields: fields,
+        selectedFields: this.getSelectedFields(fields),
+        selectOptions: this.getSelectOptions(fields)
+      }));
+    });
+    _defineProperty(this, "onSelectItem", option => {
+      const {
+        visibleFields
+      } = this.state;
+      let newItem = option.value;
+      const duplicates = [...visibleFields].filter(field => getNameFromDuplicateField(field) === newItem);
+      if (duplicates.length > 0) {
+        newItem += `:${duplicates.length}`;
+      }
+      this.setVisibleFields(new Set([...visibleFields, newItem]));
+      this.setIsAdding(false);
+    });
+    _defineProperty(this, "onClickRemove", fieldName => {
+      const {
+        visibleFields,
+        currentParameters
+      } = this.state;
+      visibleFields.delete(fieldName);
+      this.setVisibleFields(new Set(visibleFields));
+      const newParameters = {
+        ...currentParameters
+      };
+      delete newParameters[fieldName];
+      // if any there are duplicate fields that come after the one removed, we want to reduce their
+      // duplicate index eg. label:2 -> label:1
+      if (isDuplicateField(fieldName)) {
+        const [key, idx] = fieldName.split(':');
+        let currentIdx = +idx;
+        while (currentParameters[`${key}:${currentIdx + 1}`]) {
+          newParameters[`${key}:${currentIdx}`] = currentParameters[`${key}:${currentIdx + 1}`];
+          currentIdx++;
+        }
+        delete newParameters[`${key}:${currentIdx}`];
+      }
+      this.setCurrentParameters(newParameters);
+    });
+    _defineProperty(this, "renderActions", () => {
+      const {
+        intl
+      } = this.props;
+      const {
+        selectOptions,
+        isAdding
+      } = this.state;
+      if (selectOptions.length === 0) {
+        return null;
+      }
+      return jsx(React.Fragment, null, isAdding ? jsx(Select, {
+        testId: "field-picker",
+        defaultMenuIsOpen: true,
+        autoFocus: true,
+        placeholder: intl.formatMessage(messages.addField),
+        options: selectOptions,
+        onChange: option => {
+          if (option) {
+            this.onSelectItem(option);
+          }
+        }
+      }) : jsx(Button, {
+        testId: "add-more",
+        appearance: "subtle",
+        iconBefore: jsx(AddCircleIcon, {
+          size: "small",
+          label: intl.formatMessage(messages.addField)
+        }),
+        onClick: () => this.setIsAdding(true)
+      }, intl.formatMessage(messages.addField)));
+    });
+    const initialFields = getInitialFields(props.parameters, props.field.fields, props.field.options.isDynamic);
+    this.state = {
+      isAdding: false,
+      currentParameters: props.parameters || {},
+      visibleFields: initialFields,
+      selectedFields: this.getSelectedFields(initialFields),
+      selectOptions: this.getSelectOptions(initialFields)
+    };
+  }
+  render() {
+    const {
+      name,
+      field,
+      extensionManifest,
+      onFieldChange,
+      firstVisibleFieldName,
+      error,
+      formComponent: FormComponent
+    } = this.props;
+    const {
+      label,
+      options
+    } = field;
+    const {
+      selectedFields,
+      currentParameters,
+      visibleFields
+    } = this.state;
+    const children = this.renderActions();
+    return jsx(Fragment, null, error && jsx(FieldsetError, {
+      message: error
+    }), jsx("div", null, options.showTitle && jsx("h5", null, label), jsx(FormComponent, {
+      fields: selectedFields,
+      parentName: name,
+      extensionManifest: extensionManifest,
+      parameters: currentParameters,
+      canRemoveFields: field.options.isDynamic && visibleFields.size > 1,
+      onClickRemove: this.onClickRemove,
+      onFieldChange: onFieldChange,
+      firstVisibleFieldName: firstVisibleFieldName
+    }), children && jsx("div", {
+      css: actionsWrapperStyles,
+      "data-testId": "fieldset-actions"
+    }, children)));
+  }
+}
+function FieldsetError({
+  message
+}) {
+  return jsx("div", {
+    css: sectionMessageWrapperStyles
+  }, jsx(SectionMessage, {
+    appearance: "error"
+  }, jsx("p", null, message)));
+}
+const sectionMessageWrapperStyles = css({
+  marginBottom: "var(--ds-space-300, 24px)"
+});
+export default injectIntl(FieldsetField);

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

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import isNumber from 'is-number';
+import { Field } from '@atlaskit/form';
+import TextField from '@atlaskit/textfield';
+import FieldMessages from '../FieldMessages';
+import { ValidationError } from '../types';
+import { validate } from '../utils';
+export default function Number({
+  name,
+  field,
+  autoFocus,
+  onFieldChange,
+  placeholder
+}) {
+  const {
+    label,
+    description,
+    defaultValue,
+    isRequired
+  } = field;
+  function validateNumber(value) {
+    const error = validate(field, value || '');
+    if (error) {
+      return error;
+    }
+    if (value === '') {
+      return;
+    }
+    if (isNumber(value)) {
+      return;
+    }
+    return ValidationError.Invalid;
+  }
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    label: label,
+    defaultValue: defaultValue === undefined ? '' : String(defaultValue),
+    isRequired: isRequired,
+    validate: validateNumber,
+    testId: `config-panel-number-${name}`
+  }, ({
+    fieldProps,
+    error,
+    meta
+  }) => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+      autoFocus: autoFocus,
+      onBlur: () => {
+        fieldProps.onBlur();
+        onFieldChange(name, meta.dirty);
+      },
+      type: "text" // do not change this to type="number", it will return invalid strings as ''
+      ,
+      placeholder: placeholder
+    })), /*#__PURE__*/React.createElement(FieldMessages, {
+      error: error,
+      description: description
+    }));
+  });
+}

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

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Fragment } from 'react';
+import { Field } from '@atlaskit/form';
+import { RadioGroup } from '@atlaskit/radio';
+import FieldMessages from '../FieldMessages';
+import { FieldTypeError } from '../types';
+import { validate } from '../utils';
+export default function RadioField({
+  name,
+  field,
+  onFieldChange
+}) {
+  if (field.isMultiple) {
+    return /*#__PURE__*/React.createElement(FieldMessages, {
+      error: FieldTypeError.isMultipleAndRadio
+    });
+  }
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    label: field.label,
+    defaultValue: field.defaultValue,
+    isRequired: field.isRequired,
+    validate: value => validate(field, value),
+    testId: `config-panel-radio-group-${field.name}`
+  }, ({
+    fieldProps,
+    error
+  }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(RadioGroup, _extends({}, fieldProps, {
+    options: (field.items || []).map(option => ({
+      ...option,
+      name: field.name
+    })),
+    onChange: value => {
+      fieldProps.onChange(value);
+      onFieldChange(field.name, true);
+    }
+  })), /*#__PURE__*/React.createElement(FieldMessages, {
+    error: error
+  })));
+}

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

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Fragment } from 'react';
+import { Field } from '@atlaskit/form';
+import Select from '@atlaskit/select';
+import FieldMessages from '../FieldMessages';
+import { getOptionFromValue, validate } from '../utils';
+import { formatOptionLabel } from './SelectItem';
+export default function SelectField({
+  name,
+  field,
+  onFieldChange,
+  autoFocus,
+  placeholder,
+  fieldDefaultValue
+}) {
+  //ignore arrays as mutli-value select fields are always clearable
+  const hasValidSingleDefaultValue = !Array.isArray(fieldDefaultValue) && fieldDefaultValue !== undefined;
+  const isClearable = !hasValidSingleDefaultValue || field.isMultiple;
+  return /*#__PURE__*/React.createElement(Field, {
+    name: name,
+    label: field.label,
+    defaultValue: getOptionFromValue(field.items, field.defaultValue),
+    testId: `config-panel-select-${name}`,
+    isRequired: field.isRequired,
+    validate: value => {
+      return validate(field, value);
+    }
+  }, ({
+    fieldProps,
+    error
+  }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Select, _extends({}, fieldProps, {
+    onChange: value => {
+      fieldProps.onChange(value);
+      onFieldChange(name, true);
+    }
+    // add type cast to avoid adding a "IsMulti" generic prop (TODO: ED-12072)
+    ,
+    isMulti: field.isMultiple || false,
+    options: field.items || [],
+    isClearable: isClearable,
+    validationState: error ? 'error' : 'default',
+    formatOptionLabel: formatOptionLabel,
+    autoFocus: autoFocus,
+    menuPlacement: "auto",
+    placeholder: placeholder
+  })), /*#__PURE__*/React.createElement(FieldMessages, {
+    error: error,
+    description: field.description
+  })));
+}

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

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import Avatar from '@atlaskit/avatar';
+const itemWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  small: {
+    margin: 0,
+    display: 'block',
+    color: 'currentColor'
+  }
+});
+const iconWrapperStyles = css({
+  lineHeight: 1
+});
+const iconWrapperMenuStyles = css({
+  alignSelf: 'flex-start',
+  marginTop: '3px'
+});
+const getIconSize = (context, description) => {
+  if (context === 'value' || !description) {
+    return 'xsmall';
+  }
+  return 'small';
+};
+export const formatOptionLabel = ({
+  label,
+  icon,
+  description
+}, {
+  context
+}) => {
+  return jsx("div", {
+    css: itemWrapperStyles
+  }, jsx("span", {
+    css: [iconWrapperStyles, context === 'menu' && iconWrapperMenuStyles]
+  }, typeof icon === 'string' ? jsx(Avatar, {
+    src: icon,
+    size: getIconSize(context, description),
+    appearance: "square"
+  }) : icon), jsx("div", {
+    style: {
+      paddingLeft: icon ? "var(--ds-space-100, 8px)" : 0
+    }
+  }, jsx("p", null, label, description && context !== 'value' && jsx("small", null, description))));
+};