@commercetools-frontend/experimental-components 0.0.2

package/src/features/platform-limits/zones/index.js

@@ -0,0 +1,2 @@
+export { useZonesPlatformLimits } from './hooks';
+export { injectZonesPlatformLimits } from './hocs';

package/src/fields/attribute-reference-label/attribute-reference-label.jsx

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import { SEARCHABLE_REFERENCES } from '../../constants';
+import { getReferenceTypeId } from '../../internal-index';
+import styles from './attribute-reference-label.module.css';
+
+const AttributeReferenceLabel = ({
+  definition,
+  definition: {
+    type: { name },
+  },
+}) => {
+  if (
+    name === 'reference' ||
+    (name === 'set' && definition.type.elementType.name === 'reference')
+  ) {
+    const typeId = getReferenceTypeId(definition);
+    const isSearchable = Boolean(SEARCHABLE_REFERENCES[typeId]);
+    return (
+      <span className={styles['attribute-reference']}>
+        {typeId}
+        {!isSearchable && ' ID'}
+      </span>
+    );
+  }
+
+  return null;
+};
+AttributeReferenceLabel.displayName = 'AttributeReferenceLabel';
+AttributeReferenceLabel.propTypes = {
+  definition: PropTypes.shape({
+    type: PropTypes.shape({
+      name: PropTypes.string,
+      elementType: PropTypes.shape({ name: PropTypes.string }),
+    }).isRequired,
+  }).isRequired,
+};
+
+export default AttributeReferenceLabel;

package/src/fields/attribute-reference-label/attribute-reference-label.module.css

@@ -0,0 +1,7 @@
+.attribute-reference {
+  font-size: 0.923rem;
+  color: var(--color-solid);
+  font-weight: normal;
+  display: inline-block;
+  margin-bottom: var(--spacing-s);
+}

package/src/fields/attribute-reference-label/index.js

@@ -0,0 +1 @@
+export { default } from './attribute-reference-label';

package/src/fields/autocomplete/README.md

@@ -0,0 +1,66 @@
+## Autocomplete
+
+This component can be used as either a synchronous or asynchronous autocomplete.
+
+### Synchronous use
+
+Simply have the `loadItems` prop return an array of options and it will be done
+synchronously. It will receive the current value of the text field so you can do
+any filtering of items that you want here
+
+### Asynchronous use
+
+Just have the `loadItems` prop returns a promise and do everything else as
+usual.
+
+### All options
+
+| Property             | Type        | Required | Values               | Default | Description                                                                                                                                                                                                                      |
+| -------------------- | ----------- | -------- | -------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
+| onChange             | function    | ✅       |                      |         | triggered when an option has been selected, will be called with the new value.                                                                                                                                                   |
+| onFocus              | function    |          |                      |         | handle focus events on the control                                                                                                                                                                                               |
+| onBlur               | function    |          |                      |         | handle blur events on the control                                                                                                                                                                                                |
+| loadItems            | function    | ✅       |                      |         | Should either return an array of items, or a promise that resolves to the array of items you wish to load into the autocomplete dropdown. The shape of the items is not important as it's defined by the `mapItemToOption` prop. |
+| mapItemToOption      | function    | ✅       |                      |         | will receive an item and should map it to the shape: `{ value: string, label: string                                                                                                                                             | ReactNode }` |
+| mapValueToItem       | function    | ✅       |                      |         | will receive a value and should map it back to the corresponding item                                                                                                                                                            |
+| renderItem           | function    |          |                      |         | allows custom item rendering, if not specified then just the label will be rendered                                                                                                                                              |
+| filterOption         | function    |          |                      |         | defines a function to filter options while searching. The function has the following signature: `(value: any, search: string) => boolean`                                                                                        |
+| autoload             | boolean     |          |                      | `false` | to determine if the options should be loaded as soon as the component is mounted                                                                                                                                                 |
+| maxMenuHeight        | number      |          |                      |         |                                                                                                                                                                                                                                  |
+| placeholderLabel     | string      |          |                      |         |                                                                                                                                                                                                                                  |
+| name                 | string      |          |                      |         |                                                                                                                                                                                                                                  |
+| value                | string      |          |                      |         |                                                                                                                                                                                                                                  |
+| isMulti              | boolean     |          |                      | `false` | to handle multiple selections                                                                                                                                                                                                    |
+| isClearable          | boolean     |          |                      | `false` |                                                                                                                                                                                                                                  |
+| className            | string      |          |                      |         |                                                                                                                                                                                                                                  |
+| disabled             | boolean     |          |                      | `false` |                                                                                                                                                                                                                                  |
+| menuPortalTarget     | HTMLElement |          |                      |         | Dom element to portal the select menu to                                                                                                                                                                                         |
+| menuPortalZIndex     | HTMLElement |          |                      |         | z-index value for the menu portal                                                                                                                                                                                                |
+| horizontalConstraint | string      |          | `s, m, l, xl, scale` | `scale` | Horizontal size limit of the input fields                                                                                                                                                                                        |
+
+### Example use
+
+```js
+const options = [
+  { id: 'py_001', name: 'python' },
+  { id: 'jas_001', name: 'javascript' },
+  { id: 'jav_001', name: 'java' },
+  { id: 'ru_001', name: 'ruby' },
+  { id: 'hask_001', name: 'haskell' },
+  { id: 'lis_001', name: 'lisp' },
+  { id: 'elm_001', name: 'elm' },
+];
+
+const LanguagesAutocomplete = (props) => (
+  <Autocomplete
+    value={props.value}
+    loadItems={(value) =>
+      options.filter((option) => option.name.startsWith(value))
+    }
+    onChange={props.onChange}
+    mapItemToOption={(item) => ({ value: item.id, label: item.name })}
+    mapValueToItem={(value) => options.find((option) => option.id === value)}
+    renderItem={(item) => <div>{item.label}</div>}
+  />
+);
+```

package/src/fields/autocomplete/autocomplete.jsx

@@ -0,0 +1,129 @@
+import {
+  AccessibleHidden,
+  AsyncSelectInput,
+} from '@commercetools-frontend/ui-kit';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { memo } from 'react';
+import styles from './autocomplete.module.css';
+import DropdownIndicator from './dropdown-indicator';
+
+const canUseDOM = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+);
+const SafeHTMLElement = canUseDOM ? window.HTMLElement : {};
+
+function Autocomplete(props) {
+  /**
+   * react-select will use the returned promise to populate the select
+   * options when it resolves.
+   */
+  const handleLoadItems = (value) =>
+    Promise.resolve(props.loadItems(value)).then((items) =>
+      items.map((item) => props.mapItemToOption(item))
+    );
+
+  // Since we are always dealing with references here, the value is always the
+  // resource `id`, thus we should return this instead of a `Reference` object.
+  const handleChange = (event) => {
+    const option = props.isMulti
+      ? event.target.value.map((item) => item.value)
+      : event.target.value?.value || null;
+    props.onChange(option);
+  };
+
+  let value = null;
+  if (props.value)
+    value = props.isMulti
+      ? props.value.map(props.mapItemToOption)
+      : props.mapItemToOption(props.value);
+
+  return (
+    <div className={classnames(props.className, styles.container)}>
+      <AccessibleHidden>
+        <label htmlFor={props.id}>autocomplete input</label>
+      </AccessibleHidden>
+      <AsyncSelectInput
+        horizontalConstraint={props.horizontalConstraint}
+        placeholder={props.placeholderLabel}
+        isMulti={props.isMulti}
+        name={props.name}
+        id={props.id}
+        value={value}
+        hasError={props.hasError}
+        onFocus={props.onFocus}
+        onBlur={props.onBlur}
+        onChange={handleChange}
+        loadOptions={handleLoadItems}
+        components={{
+          DropdownIndicator,
+          ...props.components,
+        }}
+        isClearable={props.isClearable}
+        filterOption={props.filterOption}
+        isReadOnly={props.isReadOnly}
+        isDisabled={props.disabled}
+        defaultOptions={props.autoload}
+        maxMenuHeight={props.maxMenuHeight}
+        menuPortalTarget={props.menuPortalTarget}
+        menuPortalZIndex={props.menuPortalZIndex}
+        noOptionsMessage={() => props.noResultsLabel}
+      />
+    </div>
+  );
+}
+Autocomplete.propTypes = {
+  /**
+   * triggered when value changes, returns item selected
+   */
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  /**
+   * should return a promise that resolves to an array of items,
+   * or just the array of items directly
+   */
+  loadItems: PropTypes.func.isRequired,
+  /**
+   * maps items to shape: { value, label }
+   */
+  mapItemToOption: PropTypes.func.isRequired,
+  components: PropTypes.object,
+  /**
+   * defines the behaviour in the select to filter the values.
+   * use this function in case you want the select component to filter the
+   * data. If you do not want the select to filter anything and do the filters
+   * only calling the API, pass this as () => true.
+   */
+  filterOption: PropTypes.func,
+  /**
+   * If set to true, it will load the options as soon as the component mounts
+   */
+  autoload: PropTypes.bool,
+  hasError: PropTypes.bool,
+  maxMenuHeight: PropTypes.number,
+  placeholderLabel: PropTypes.string,
+  noResultsLabel: PropTypes.string,
+  name: PropTypes.string,
+  id: PropTypes.string,
+  value: PropTypes.any,
+  isMulti: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  menuPortalTarget: PropTypes.instanceOf(SafeHTMLElement),
+  menuPortalZIndex: PropTypes.number,
+  horizontalConstraint: PropTypes.oneOf(['s', 'm', 'l', 'xl', 'scale']),
+};
+Autocomplete.defaultProps = {
+  isMulti: false,
+  isClearable: false,
+  autoload: false,
+  disabled: false,
+  hasError: false,
+};
+
+export default memo(Autocomplete);

package/src/fields/autocomplete/autocomplete.module.css

@@ -0,0 +1,3 @@
+.container {
+  position: relative;
+}

package/src/fields/autocomplete/autocomplete.spec.js

@@ -0,0 +1,144 @@
+import PropTypes from 'prop-types';
+import {
+  fireEvent,
+  renderApp,
+  screen,
+  waitFor,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { selectInputUtils } from '@commercetools-local/test-utils';
+import Autocomplete from './autocomplete';
+
+const items = [
+  {
+    id: '1',
+    name: 'item 1',
+  },
+  {
+    id: '2',
+    name: 'item 2',
+  },
+  {
+    id: '3',
+    name: 'item 3',
+  },
+];
+
+const createTestProps = (custom) => ({
+  id: 'autocomplete-input',
+  mapItemToOption: jest.fn((item) => ({
+    ...item,
+    value: item.id,
+    label: item.name,
+  })),
+  onChange: jest.fn(),
+  loadItems: jest.fn(() => Promise.resolve(items)),
+  onFocus: jest.fn(),
+  components: {},
+  value: null,
+  noResultsLabel: 'no results',
+  placeholderLabel: 'search your category ...',
+  searchPromptLabel: 'Type something ...',
+  name: 'name',
+  isMulti: false,
+  isClearable: false,
+  autoload: false,
+  disabled: false,
+  hasError: false,
+  ...custom,
+});
+
+function render(ui, renderOptions) {
+  return renderApp(ui, { ...renderOptions });
+}
+
+it('should load default options', async () => {
+  const props = createTestProps({
+    autoload: true,
+  });
+  render(<Autocomplete {...props} />);
+  selectInputUtils.openDropdown(screen.getByLabelText(/autocomplete input/i));
+  await waitFor(() => {
+    expect(props.loadItems).toHaveBeenCalledWith('');
+  });
+});
+
+it('should load options when searching', async () => {
+  const props = createTestProps();
+  render(<Autocomplete {...props} />);
+  fireEvent.change(screen.getByLabelText(/autocomplete input/i), {
+    target: { value: 'item' },
+  });
+  await waitFor(() => {
+    expect(props.loadItems).toHaveBeenCalledWith('item');
+  });
+  await waitFor(() => {
+    items.forEach((item) => {
+      expect(screen.getByText(item.name)).toBeInTheDocument();
+    });
+  });
+});
+
+it('should handle selecting option', async () => {
+  const props = createTestProps();
+  render(<Autocomplete {...props} />);
+  await selectInputUtils.selectOptionAsync(
+    screen.getByLabelText(/autocomplete input/i),
+    items[0].name
+  );
+  expect(props.onChange).toHaveBeenCalledWith(items[0].id);
+});
+
+describe('Picker components', () => {
+  describe('Option component', () => {
+    it('should display the default option (label) when there is no customization', async () => {
+      const props = createTestProps();
+      render(<Autocomplete {...props} />);
+      fireEvent.change(screen.getByLabelText(/autocomplete input/i), {
+        target: { value: 'item' },
+      });
+      // the default option is the option label
+      await waitFor(() => {
+        items.forEach((item) => {
+          // the name was mapped to the option label in mapItemToOption
+          expect(screen.getByText(item.name)).toBeInTheDocument();
+        });
+      });
+    });
+
+    it('should display the custom option when it is provided', async () => {
+      const Option = (props) => {
+        const item = props.data;
+        return (
+          <>
+            <span>item ID: {item.id}</span>
+            <span>item name: {item.name}</span>
+          </>
+        );
+      };
+      Option.propTypes = {
+        data: PropTypes.shape({
+          id: PropTypes.string.isRequired,
+          name: PropTypes.string.isRequired,
+        }).isRequired,
+      };
+
+      const props = createTestProps({
+        components: {
+          Option,
+        },
+      });
+      render(<Autocomplete {...props} />);
+      fireEvent.change(screen.getByLabelText(/autocomplete input/i), {
+        target: { value: 'item' },
+      });
+      await waitFor(() => {
+        items.forEach((item) => {
+          expect(screen.getByText(`item ID: ${item.id}`)).toBeInTheDocument();
+          expect(
+            screen.getByText(`item name: ${item.name}`)
+          ).toBeInTheDocument();
+        });
+      });
+    });
+  });
+});

package/src/fields/autocomplete/dropdown-indicator.jsx

@@ -0,0 +1,14 @@
+import { SearchIcon } from '@commercetools-frontend/ui-kit';
+import styles from './dropdown-indicator.module.css';
+
+// This should be separated into a new shared components in the packages-shared
+// and used all over instead of SearchIconDropdownIndicator in application-product
+function DropdownIndicator() {
+  return (
+    <div className={styles.dropdownIndicator}>
+      <SearchIcon scale="medium" color="primary" />
+    </div>
+  );
+}
+
+export default DropdownIndicator;

package/src/fields/autocomplete/dropdown-indicator.module.css

@@ -0,0 +1,5 @@
+.dropdownIndicator {
+  display: flex;
+  align-items: center;
+  margin-left: var(--spacing-s);
+}

package/src/fields/autocomplete/index.js

@@ -0,0 +1 @@
+export { default } from './autocomplete';

package/src/fields/boolean-field/boolean-field.jsx

@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import { SelectInput } from '@commercetools-frontend/ui-kit';
+import messages from './messages';
+
+export const valueMapping = {
+  yes: true,
+  no: false,
+  all: [true, false],
+};
+
+export const BooleanField = (props) => {
+  let selectedValue;
+
+  if (typeof props.value === 'boolean')
+    selectedValue = getBooleanValue(props.value);
+  else if (props.isMulti && Array.isArray(props.value) && props.value.length)
+    selectedValue =
+      props.value.length === 2 ? 'all' : getBooleanValue(props.value[0]);
+
+  const yesLabel = props.intl.formatMessage(messages.yes);
+  const noLabel = props.intl.formatMessage(messages.no);
+  const options = [
+    { value: 'yes', label: yesLabel },
+    { value: 'no', label: noLabel },
+  ];
+  if (props.isMulti)
+    options.push({
+      value: 'all',
+      label: `${yesLabel} / ${noLabel}`,
+    });
+
+  return (
+    <SelectInput
+      {...{
+        name: props.name,
+        isClearable: !props.isRequired,
+        isSearchable: false,
+        value: selectedValue,
+
+        onChange: (event) => {
+          const option = event.target.value;
+          let newValue = option ? valueMapping[option.toLowerCase()] : null;
+          if (newValue !== null && newValue !== undefined && props.isMulti)
+            newValue = Array.isArray(newValue) ? newValue : [newValue];
+          props.onChange(newValue);
+        },
+        options,
+        isDisabled: props.disabled,
+      }}
+    />
+  );
+};
+BooleanField.displayName = 'BooleanField';
+
+BooleanField.propTypes = {
+  isMulti: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
+  // will be called with `value` argument that can be:
+  // null: when no option is selected
+  // boolean: when isMulti prop is false
+  // array<boolean>: when isMulti prop is true and an option is selected
+  onChange: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+  // injectIntl
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+  }).isRequired,
+};
+BooleanField.defaultProps = {
+  isRequired: false,
+  disabled: false,
+};
+
+export default injectIntl(BooleanField);
+
+function getBooleanValue(value) {
+  if (typeof value !== 'boolean') return undefined;
+  return value === false ? 'no' : 'yes';
+}

package/src/fields/boolean-field/boolean-field.spec.js

@@ -0,0 +1,80 @@
+import { SelectInput } from '@commercetools-frontend/ui-kit';
+import { intlMock } from '@commercetools-local/test-utils';
+import { shallow } from 'enzyme';
+import { BooleanField, valueMapping } from './boolean-field';
+
+const createTestProps = (props) => ({
+  name: 'name',
+  onChange: jest.fn(),
+  intl: intlMock,
+  ...props,
+});
+
+describe('rendering the component', () => {
+  it('renders a boolean field with a SelectInput component', () => {
+    const props = createTestProps();
+    const wrapper = shallow(<BooleanField {...props} />);
+
+    expect(wrapper.type()).toBe(SelectInput);
+  });
+
+  it('is a boolean field with only two options (multi disabled)', () => {
+    const props = createTestProps();
+    const wrapper = shallow(<BooleanField {...props} />);
+
+    const options = wrapper.find(SelectInput).prop('options');
+    expect(options).toHaveLength(2);
+  });
+
+  it('is a boolean field three options (multi enabled)', () => {
+    const props = createTestProps({ isMulti: true });
+    const wrapper = shallow(<BooleanField {...props} />);
+
+    const options = wrapper.find(SelectInput).prop('options');
+    expect(options).toHaveLength(3);
+  });
+
+  it('renders a non isClearable boolean field when is required', () => {
+    const props = createTestProps({ isRequired: true });
+    const wrapper = shallow(<BooleanField {...props} />);
+
+    const isClearable = wrapper.find(SelectInput).prop('isClearable');
+    expect(isClearable).toBe(false);
+  });
+
+  it('renders a isClearable boolean field when is not required', () => {
+    const props = createTestProps({ isRequired: false });
+    const wrapper = shallow(<BooleanField {...props} />);
+
+    const isClearable = wrapper.find(SelectInput).prop('isClearable');
+    expect(isClearable).toBe(true);
+  });
+
+  it('shows the "all" option when isMulti and yes/no values are set', () => {
+    const props = createTestProps({
+      isMulti: true,
+      value: ['yes', 'no'],
+    });
+    const wrapper = shallow(<BooleanField {...props} />);
+
+    const selectedValue = wrapper.find(SelectInput).prop('value');
+    expect(selectedValue).toBe('all');
+  });
+});
+
+describe('callbacks', () => {
+  it('calls the onChange function when a change event happens', () => {
+    const valueMappingKeys = Object.keys(valueMapping);
+    valueMappingKeys.forEach((key) => {
+      const onChange = jest.fn();
+      const props = createTestProps({ onChange });
+      const wrapper = shallow(<BooleanField {...props} />);
+
+      wrapper.find(SelectInput).prop('onChange')({
+        target: { value: key },
+      });
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange).toHaveBeenCalledWith(valueMapping[key]);
+    });
+  });
+});

package/src/fields/boolean-field/index.js

@@ -0,0 +1,3 @@
+export { default } from './boolean-field';
+export * from './boolean-field';
+export { default as messages } from './messages';

package/src/fields/boolean-field/messages.js

@@ -0,0 +1,14 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  yes: {
+    id: 'BooleanField.yes',
+    description: 'The label for boolean attribute `true` value',
+    defaultMessage: 'YES',
+  },
+  no: {
+    id: 'BooleanField.no',
+    description: 'The label for boolean attribute `false` value',
+    defaultMessage: 'NO',
+  },
+});

package/src/fields/checkbox-field/checkbox-field.jsx

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { filterDataAttributes } from '../../internal-index';
+import styles from './checkbox-field.module.css';
+
+const CheckboxField = (props) => {
+  // Pass only `data-*` props
+  const dataAttributes = filterDataAttributes(props);
+
+  return (
+    <label
+      className={classnames(props.labelClassName, styles['custom-check'], {
+        [styles.disabled]: props.disabled,
+      })}
+      {...dataAttributes}
+    >
+      <input
+        type="checkbox"
+        className={classnames(props.inputClassName, styles['input-checkbox'], {
+          [styles.disabled]: props.disabled,
+        })}
+        name={props.name}
+        checked={props.checked}
+        onChange={props.onChange}
+        disabled={props.disabled}
+      />
+      <span className={styles['check-element']} />
+      {props.label ? (
+        <span className={styles['check-text']}>{props.label}</span>
+      ) : null}
+    </label>
+  );
+};
+CheckboxField.displayName = 'CheckboxField';
+CheckboxField.propTypes = {
+  name: PropTypes.string.isRequired,
+  checked: PropTypes.bool.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  onChange: PropTypes.func,
+  labelClassName: PropTypes.string,
+  inputClassName: PropTypes.string,
+  disabled: PropTypes.bool,
+};
+
+CheckboxField.defaultProps = {
+  onChange: () => {},
+  disabled: false,
+};
+
+export default CheckboxField;