@commercetools-frontend/experimental-components 0.0.2

package/src/components/buttons/file-input/file-input.spec.js

@@ -0,0 +1,115 @@
+import { shallow } from 'enzyme';
+import { FormattedMessage } from 'react-intl';
+import FileInput from './file-input';
+
+const createProps = (custom) => ({
+  onChange: jest.fn(),
+  ...custom,
+});
+
+describe('rendering', () => {
+  describe('when has no children provided', () => {
+    let props;
+    let wrapper;
+    beforeEach(() => {
+      props = createProps({ name: 'bar' });
+      wrapper = shallow(<FileInput {...props} />);
+    });
+
+    it('should render fallback text', () => {
+      expect(wrapper).toRender(FormattedMessage);
+    });
+    it('should pass fallback defaultMessage', () => {
+      expect(wrapper.find(FormattedMessage)).toHaveProp(
+        'id',
+        'ButtonFileInput.chooseFile'
+      );
+    });
+  });
+  describe('when children is provided', () => {
+    let props;
+    let wrapper;
+    let wrapperFileInput;
+    beforeEach(() => {
+      props = createProps({ children: 'foo', name: 'bar' });
+      wrapperFileInput = shallow(
+        <div>
+          <FileInput {...props} />
+        </div>
+      );
+      wrapper = shallow(<FileInput {...props} />);
+    });
+
+    it('should render label wrapper', () => {
+      expect(wrapper).toRender('label');
+    });
+
+    it('input should have correct `name` prop value', () => {
+      expect(wrapper.find('input')).toHaveProp('name', 'bar');
+    });
+
+    it('should default `acceptTypes`', () => {
+      expect(wrapper.find('input')).toHaveProp(
+        'accept',
+        FileInput.defaultProps.acceptTypes
+      );
+    });
+
+    it('should default `allowMultiple` as false', () => {
+      expect(wrapper.find('input')).toHaveProp('multiple', false);
+    });
+
+    it('should have correct text', () => {
+      expect(wrapper).toHaveText('foo');
+    });
+
+    it('should have `allowMultiple` prop defined as false', () => {
+      expect(wrapperFileInput.find('FileInput')).toHaveProp(
+        'allowMultiple',
+        false
+      );
+    });
+  });
+  describe('statics', () => {
+    describe('defaultProps', () => {
+      let wrapper;
+      beforeEach(() => {
+        const props = createProps({ children: 'foo', name: 'bar' });
+        wrapper = shallow(<FileInput {...props} />);
+      });
+      it('should default `acceptTypes`', () => {
+        expect(wrapper.find('input')).toHaveProp(
+          'accept',
+          'image/png,image/jpeg,image/gif'
+        );
+      });
+    });
+  });
+});
+describe('callbacks', () => {
+  describe('of `<FileInput />`', () => {
+    describe('onChange', () => {
+      let props;
+      let wrapper;
+
+      beforeEach(() => {
+        props = createProps({ onChange: jest.fn() });
+        wrapper = shallow(<FileInput {...props} />);
+
+        wrapper
+          .find('input')
+          .simulate('change', { target: { files: ['bar'] } });
+      });
+
+      it('should call the onChange callback', () => {
+        expect(props.onChange).toHaveBeenCalledTimes(1);
+      });
+
+      it('should call the onChange callback with event', () => {
+        expect(props.onChange).toHaveBeenCalledWith({
+          target: { files: ['bar'] },
+        });
+      });
+    });
+  });
+});

package/src/components/buttons/file-input/index.js

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

package/src/components/buttons/file-input/messages.js

@@ -0,0 +1,9 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  chooseFile: {
+    id: 'ButtonFileInput.chooseFile',
+    description: 'The label text of the field for upload local file',
+    defaultMessage: 'Choose file',
+  },
+});

package/src/components/buttons/index.jsx

@@ -0,0 +1,42 @@
+import { defineMessages, FormattedMessage } from 'react-intl';
+import ButtonTyped from './button-typed';
+
+const messages = defineMessages({
+  cancel: {
+    id: 'Button.cancel',
+    description: 'Label for the cancel button',
+    defaultMessage: 'Cancel',
+  },
+  confirm: {
+    id: 'Button.confirm',
+    description: 'Label for the confirm button',
+    defaultMessage: 'Confirm',
+  },
+  save: {
+    id: 'Button.save',
+    description: 'Label for the save button',
+    defaultMessage: 'Save',
+  },
+});
+
+export const ButtonCancel = ButtonTyped('ButtonCancel', {
+  type: 'cancel',
+  defaultLabel: <FormattedMessage {...messages.cancel} />,
+  hasAlternativeStyle: true,
+});
+
+export const ButtonConfirm = ButtonTyped('ButtonConfirm', {
+  type: 'confirm',
+  defaultLabel: <FormattedMessage {...messages.confirm} />,
+  hasAlternativeStyle: true,
+});
+
+export const ButtonSave = ButtonTyped('ButtonSave', {
+  type: 'save',
+  defaultLabel: <FormattedMessage {...messages.save} />,
+  hasAlternativeStyle: true,
+});
+
+export { default as Button } from './button';
+export { default as ButtonClose } from './button-close';
+export { default as ButtonTyped } from './button-typed';

package/src/components/centered-loading-spinner/centered-loading-spinner.jsx

@@ -0,0 +1,18 @@
+import { LoadingSpinner } from '@commercetools-frontend/ui-kit';
+import styles from './centered-loading-spinner.module.css';
+
+/**
+ * renders a centered LoadingSpinner that assumes the height of its parent
+ * - the ui-kit Spacings.Stack does not allow for custom styles, nor does it stretch to fill its container's height
+ */
+const CenteredLoadingSpinner = () => (
+  <div
+    className={styles['loading-container']}
+    data-testid="centered-loading-spinner"
+  >
+    <LoadingSpinner />
+  </div>
+);
+CenteredLoadingSpinner.displayName = 'CenteredLoadingSpinner';
+
+export default CenteredLoadingSpinner;

package/src/components/centered-loading-spinner/centered-loading-spinner.module.css

@@ -0,0 +1,7 @@
+.loading-container {
+  height: 100%;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+}

package/src/components/centered-loading-spinner/centered-loading-spinner.spec.js

@@ -0,0 +1,13 @@
+import {
+  renderApp,
+  screen,
+} from '@commercetools-frontend/application-shell/test-utils';
+import CenteredLoadingSpinner from './centered-loading-spinner';
+
+describe('<CenteredLoadingSpinner />', () => {
+  it('should render successfully', async () => {
+    renderApp(<CenteredLoadingSpinner />);
+    const spinnerContainer = screen.getByTestId('centered-loading-spinner');
+    expect(spinnerContainer).toBeInTheDocument();
+  });
+});

package/src/components/centered-loading-spinner/index.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default } from './centered-loading-spinner';

package/src/components/channel-picker-input/channel-picker-input.ctp.graphql

@@ -0,0 +1,24 @@
+query GetChannelsQuery($where: String, $sortByNamePath: String!) {
+  channels(where: $where, sort: [$sortByNamePath, "key"], limit: 60) {
+    total
+    results {
+      id
+      key
+      nameAllLocales {
+        locale
+        value
+      }
+    }
+  }
+}
+
+query GetChannelQuery($id: String) {
+  channel(id: $id) {
+    id
+    key
+    nameAllLocales {
+      locale
+      value
+    }
+  }
+}

package/src/components/channel-picker-input/channel-picker-input.jsx

@@ -0,0 +1,210 @@
+import { useCallback, useMemo, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import {
+  AsyncSelectInput,
+  Text,
+  Spacings,
+  Constraints,
+} from '@commercetools-frontend/ui-kit';
+import {
+  CenteredLoadingSpinner,
+  useFormatLocalizedFieldToString,
+  useDebouncedPromiseCallback,
+  Option,
+  useHandlers,
+  useLoadOptions,
+  useCurrentOption,
+  getBottomOption,
+  CustomFieldTooltip,
+} from '../../internal-index';
+
+import { useIntl } from 'react-intl';
+
+import {
+  GetChannelsQuery,
+  GetChannelQuery,
+} from './channel-picker-input.ctp.graphql';
+import messages from './messages';
+import commonPickerMessages from '../messages';
+import trackingEvents from './tracking-events';
+
+const getTrackingEvent = (inputValue, selectedValue) => {
+  const { value: id, key, name } = selectedValue;
+  const trackingEvent = do {
+    if (!inputValue) trackingEvents.selectWithoutTyping;
+    else if (name.startsWith(inputValue)) trackingEvents.selectChannelName;
+    else if (key.startsWith(inputValue)) trackingEvents.selectChannelKey;
+    else if (id === inputValue) trackingEvents.selectChannelId;
+  };
+
+  return trackingEvent;
+};
+
+const ChannelPickerInput = ({
+  isClearable,
+  isDisabled,
+  isReadOnly,
+  onChange,
+  name,
+  onBlur,
+  value,
+  hasError,
+  onError,
+}) => {
+  const formatLocalizedFieldToString = useFormatLocalizedFieldToString();
+  const { formatMessage } = useIntl();
+  const dataLocale = useApplicationContext(
+    (applicationContext) => applicationContext.dataLocale
+  );
+
+  const variables = useMemo(
+    () => ({
+      sortByNamePath: `name.${dataLocale}`,
+    }),
+    [dataLocale]
+  );
+
+  const [loadingError, setLoadingError] = useState();
+
+  const convertChannelToOption = useCallback(
+    (channel) => {
+      if (channel) {
+        const localizedName = formatLocalizedFieldToString(
+          channel.nameAllLocales,
+          channel.key
+        );
+        return {
+          label: localizedName,
+          value: channel.id,
+          name: localizedName,
+          key: channel.key,
+        };
+      }
+      return channel;
+    },
+    [formatLocalizedFieldToString]
+  );
+
+  const prefixSearchFields = useMemo(
+    () => [`name.${dataLocale}`, 'key'],
+    [dataLocale]
+  );
+
+  const loadOptions = useLoadOptions({
+    query: GetChannelsQuery,
+    variables,
+    prefixSearchFields,
+  });
+
+  const currentOption = useCurrentOption({
+    query: GetChannelQuery,
+    id: value,
+    convertQueryResultToOption: ({ channel }) =>
+      convertChannelToOption(channel),
+  });
+
+  const handleLoadOptions = useCallback(
+    (inputValue) =>
+      loadOptions(inputValue)
+        .then(({ data }) => {
+          const channels = data.channels.results.map(convertChannelToOption);
+          return inputValue.length === 0 && data.channels.total > 60
+            ? [...channels, getBottomOption()]
+            : channels;
+        })
+        .catch((error) => {
+          setLoadingError(error);
+          onError(error);
+        }),
+    [loadOptions, convertChannelToOption, onError]
+  );
+
+  const loadOptionsDebounced = useDebouncedPromiseCallback(
+    handleLoadOptions,
+    300
+  );
+
+  const [handleInternalInputChange, handleChange] = useHandlers(
+    onChange,
+    getTrackingEvent
+  );
+
+  const handleInputChange = useCallback(
+    (event) => {
+      setLoadingError(null);
+      handleInternalInputChange(event);
+    },
+    [handleInternalInputChange]
+  );
+
+  const isCurrentOptionLoadingFailed = Boolean(currentOption?.error);
+
+  useEffect(() => {
+    if (isCurrentOptionLoadingFailed) onError(currentOption.error);
+  }, [isCurrentOptionLoadingFailed, onError, currentOption]);
+
+  const isLoadingFailed = isCurrentOptionLoadingFailed || Boolean(loadingError);
+
+  const handleNoOptions = useCallback(
+    () => (loadingError ? null : formatMessage(messages.noChannelsFound)),
+    [loadingError, formatMessage]
+  );
+
+  const tooltipTitle = currentOption?.data?.label ?? '';
+
+  return (
+    <Constraints.Horizontal max="scale">
+      {currentOption.loading ? (
+        <CenteredLoadingSpinner />
+      ) : (
+        <Spacings.Stack scale="xs">
+          <CustomFieldTooltip title={tooltipTitle}>
+            <AsyncSelectInput
+              key={dataLocale}
+              id={name}
+              name={name}
+              placeholder={formatMessage(messages.placeholder)}
+              loadOptions={loadOptionsDebounced}
+              defaultOptions
+              showOptionGroupDivider
+              isClearable={isClearable}
+              isReadOnly={isReadOnly}
+              isDisabled={isDisabled}
+              components={{
+                Option,
+              }}
+              onChange={handleChange}
+              onInputChange={handleInputChange}
+              onBlur={onBlur}
+              value={currentOption.data}
+              noOptionsMessage={handleNoOptions}
+              hasError={hasError || isLoadingFailed}
+            />
+          </CustomFieldTooltip>
+          {isLoadingFailed && (
+            <Text.Body
+              tone="negative"
+              intlMessage={commonPickerMessages.loadingErrorMessage}
+            />
+          )}
+        </Spacings.Stack>
+      )}
+    </Constraints.Horizontal>
+  );
+};
+
+ChannelPickerInput.displayName = 'ChannelPickerInput';
+ChannelPickerInput.propTypes = {
+  name: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func,
+  value: PropTypes.string,
+  hasError: PropTypes.bool,
+  onError: PropTypes.func,
+  isClearable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+};
+
+export default ChannelPickerInput;