@commercetools-frontend/experimental-components 0.0.2 → 0.1.0

package/src/components/channel-picker-input/channel-picker-input.spec.js

@@ -1,405 +0,0 @@
-import * as Channel from '@commercetools-test-data/channel';
-import { graphql } from 'msw';
-import { setupServer } from 'msw/node';
-import { GtmContext } from '@commercetools-frontend/application-shell';
-import times from 'lodash.times';
-import {
-  renderAppWithRedux,
-  fireEvent,
-  screen,
-  waitFor,
-} from '@commercetools-frontend/application-shell/test-utils';
-import { buildGraphqlList } from '@commercetools-test-data/core';
-import { LocalizedString } from '@commercetools-test-data/commons';
-import { selectInputUtils } from '@commercetools-local/test-utils';
-import PropTypes from 'prop-types';
-import ChannelPickerInput from './channel-picker-input';
-
-const track = jest.fn();
-
-const createTestProps = (custom) => ({
-  name: 'channel-picker-input',
-  isClearable: true,
-  onChange: jest.fn(),
-  onError: jest.fn(),
-  ...custom,
-});
-
-const render = (ui, renderOptions) => {
-  const Wrapper = ({ children }) => (
-    <GtmContext.Provider value={{ track }}>
-      <>
-        <label htmlFor="channel-picker-input">Channel picker</label>
-        {children}
-      </>
-    </GtmContext.Provider>
-  );
-  Wrapper.propTypes = {
-    children: PropTypes.element.isRequired,
-  };
-
-  renderAppWithRedux(ui, {
-    wrapper: Wrapper,
-    ...renderOptions,
-  });
-};
-
-const noNameChannel = Channel.random()
-  .name(LocalizedString.presets.empty())
-  .key('');
-const foodStoreChannel = Channel.presets.foodStore();
-const clothesStoreChannel = Channel.presets.clothesStore();
-const builtFoodStoreChannel = foodStoreChannel.buildGraphql();
-const builtClothesStoreChannel = clothesStoreChannel.buildGraphql();
-const builtNoNameChannel = noNameChannel.buildGraphql();
-
-let queriesSent;
-
-const mockServer = setupServer(
-  graphql.query('GetChannelQuery', (req, res, ctx) => {
-    const channelId = req.body.variables.id;
-    const channel = do {
-      if (channelId === builtFoodStoreChannel.id) builtFoodStoreChannel;
-      else if (channelId === builtClothesStoreChannel.id)
-        builtClothesStoreChannel;
-      else null;
-    };
-
-    return res(
-      ctx.data({
-        channel,
-      })
-    );
-  }),
-
-  graphql.query('GetChannelsQuery', (req, res, ctx) => {
-    queriesSent.GetChannelsQuery += 1;
-
-    const whereQuery = req.body.variables.where || '';
-
-    const foundChannels = do {
-      if (whereQuery.includes('name(en >= "Missing')) [];
-      else if (whereQuery.includes('name(en >= "Food"')) [foodStoreChannel];
-      else if (whereQuery.includes('key >= "food-store-key'))
-        [foodStoreChannel];
-      else if (whereQuery.includes(`id = "${builtFoodStoreChannel.id}`))
-        [foodStoreChannel];
-      else if (whereQuery.includes('name(de >= "Lebens')) [foodStoreChannel];
-      else if (whereQuery.includes('name(en >= "Clothes'))
-        [clothesStoreChannel];
-      else if (whereQuery.includes(`id = "${builtNoNameChannel.id}`))
-        [noNameChannel];
-      else [foodStoreChannel, clothesStoreChannel];
-    };
-
-    return res(
-      ctx.data({
-        channels: buildGraphqlList(foundChannels, {
-          name: 'Channel',
-          total: foundChannels.length,
-        }),
-      })
-    );
-  })
-);
-
-beforeEach(() => {
-  queriesSent = {
-    GetChannelsQuery: 0,
-  };
-  console.config.addSilencedWarning(
-    /Can't perform a React state update on an unmounted component/
-  );
-});
-
-afterEach(() => {
-  mockServer.resetHandlers();
-});
-
-beforeAll(() => {
-  // This test somehow causes this: https://github.com/andyearnshaw/Intl.js/issues/256
-  // That's a work-around:
-
-  mockServer.listen({
-    onUnhandledRequest: 'error',
-  });
-});
-
-afterAll(() => mockServer.close());
-
-describe('searching options', () => {
-  it('should load initial options without typing anything', async () => {
-    const props = createTestProps();
-    render(<ChannelPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Channel picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-
-    await screen.findByText('Food Store');
-    await screen.findByText('Clothes Store');
-  });
-
-  it('should debounce the search', async () => {
-    const props = createTestProps();
-    render(<ChannelPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Channel picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-
-    fireEvent.change(input, { target: { value: 'F' } });
-    fireEvent.change(input, { target: { value: 'o' } });
-    fireEvent.change(input, { target: { value: 'o' } });
-    fireEvent.change(input, { target: { value: 'd' } });
-
-    await waitFor(() => expect(queriesSent.GetChannelsQuery).toBe(1));
-  });
-
-  it('should show both name and key of loaded channels', async () => {
-    const props = createTestProps();
-    render(<ChannelPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Channel picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-
-    await screen.findByText('Food Store');
-    await screen.findByText(/Key: food-store-key/);
-  });
-
-  it('should show channel name in selected data locale', async () => {
-    const props = createTestProps();
-    render(<ChannelPickerInput {...props} />, {
-      dataLocale: 'de',
-    });
-
-    const input = await screen.findByLabelText('Channel picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.change(input, { target: { value: 'Lebens' } });
-
-    await screen.findByText('Lebensmittelgeschäft');
-  });
-
-  it('should show a message when no channels are found', async () => {
-    const props = createTestProps();
-    render(<ChannelPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Channel picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.change(input, { target: { value: 'Missing' } });
-
-    await screen.findByText(/there are no channels that match your search/i);
-  });
-
-  it('should render a loading spinner when initial option is being loaded', () => {
-    const props = createTestProps({
-      value: builtFoodStoreChannel.id,
-    });
-    render(<ChannelPickerInput {...props} />);
-    expect(screen.getByTestId('centered-loading-spinner')).toBeInTheDocument();
-  });
-
-  it('should render the error message on loading error', async () => {
-    mockServer.use(
-      graphql.query('GetChannelQuery', (req, res, ctx) => res(ctx.status(500)))
-    );
-
-    const props = createTestProps({
-      value: builtFoodStoreChannel.id,
-      showLoadingErrorMessage: true,
-    });
-    render(<ChannelPickerInput {...props} />);
-
-    await screen.findByText(
-      'Unable to load resource. Check the connection and try again.'
-    );
-  });
-
-  it('should fallback to "- -" when channel has no name or no key', async () => {
-    const props = createTestProps();
-    render(<ChannelPickerInput {...props} />, {
-      dataLocale: 'de',
-    });
-
-    const input = await screen.findByLabelText('Channel picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.change(input, { target: { value: builtNoNameChannel.id } });
-
-    await screen.findByText(/key: - -/i);
-    await screen.findByText('- -');
-  });
-
-  it('should call onError when network error', async () => {
-    mockServer.use(
-      graphql.query('GetChannelsQuery', (req, res, ctx) =>
-        res.once(ctx.status(500))
-      )
-    );
-
-    const props = createTestProps();
-    render(<ChannelPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Channel picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-
-    await waitFor(() => expect(props.onError).toHaveBeenCalled());
-  });
-
-  it('should not show the message when there are no more than 60 channels', async () => {
-    const props = createTestProps();
-    render(<ChannelPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Channel picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-
-    await screen.findByText('Food Store');
-
-    expect(
-      screen.queryByText(/start typing above to load more/i)
-    ).not.toBeInTheDocument();
-  });
-
-  it('should show the message when there are more than 60 channels', async () => {
-    mockServer.use(
-      graphql.query('GetChannelsQuery', (req, res, ctx) =>
-        res.once(
-          ctx.data({
-            channels: buildGraphqlList(times(60, Channel.random), {
-              name: 'Channel',
-              total: 100,
-            }),
-          })
-        )
-      )
-    );
-    const props = createTestProps();
-    render(<ChannelPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Channel picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-
-    await waitFor(() => screen.findByText(/start typing above to load more/i));
-  });
-
-  it('should not show the message if there is an input value regardless of the number of channels', async () => {
-    mockServer.use(
-      graphql.query('GetChannelsQuery', (req, res, ctx) =>
-        res.once(
-          ctx.data({
-            channels: buildGraphqlList([foodStoreChannel], {
-              name: 'Channel',
-              total: 100,
-            }),
-          })
-        )
-      )
-    );
-
-    const props = createTestProps();
-    render(<ChannelPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Channel picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.change(input, { target: { value: 'Food' } });
-
-    await screen.findByText('Food Store');
-
-    expect(
-      screen.queryByText(/start typing above to load more/i)
-    ).not.toBeInTheDocument();
-  });
-});
-
-describe('selecting options', () => {
-  it('should select option', async () => {
-    const props = createTestProps();
-    render(<ChannelPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Channel picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.change(input, { target: { value: 'Food' } });
-
-    await screen.findByText('Food Store');
-
-    selectInputUtils.selectFirstOption(input);
-
-    expect(props.onChange).toHaveBeenCalledWith({
-      persist: expect.any(Function),
-      target: {
-        id: 'channel-picker-input',
-        name: 'channel-picker-input',
-        value: builtFoodStoreChannel.id,
-      },
-    });
-  });
-
-  it('should track options selections', async () => {
-    const props = createTestProps();
-    render(<ChannelPickerInput {...props} />);
-
-    const input = await screen.findByLabelText('Channel picker');
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-
-    await screen.findByText('Food Store');
-    selectInputUtils.selectFirstOption(input);
-
-    expect(track).toHaveBeenCalledWith('select', 'ReferenceChannel', 'noEntry');
-
-    // should track name selection
-    fireEvent.change(input, { target: { value: 'Food' } });
-
-    await screen.findByText('Food Store');
-    selectInputUtils.selectFirstOption(input);
-
-    expect(track).toHaveBeenCalledWith('select', 'ReferenceChannel', 'name');
-
-    // should track key selection
-    fireEvent.change(input, { target: { value: 'food-store-key' } });
-
-    await screen.findByText('Food Store');
-    selectInputUtils.selectFirstOption(input);
-
-    expect(track).toHaveBeenLastCalledWith('select', 'ReferenceChannel', 'key');
-
-    // should track id selection
-    fireEvent.change(input, { target: { value: builtFoodStoreChannel.id } });
-
-    await screen.findByText('Food Store');
-    selectInputUtils.selectFirstOption(input);
-
-    expect(track).toHaveBeenLastCalledWith('select', 'ReferenceChannel', 'id');
-  });
-
-  it('should clear selected value', async () => {
-    const props = createTestProps({
-      value: builtFoodStoreChannel.id,
-    });
-    render(<ChannelPickerInput {...props} />);
-
-    await screen.findByText('Food Store');
-
-    const clearButton = await screen.findByLabelText('Clear');
-    fireEvent.click(clearButton);
-
-    await waitFor(() => {
-      expect(props.onChange).toHaveBeenCalledWith({
-        persist: expect.any(Function),
-        target: {
-          id: 'channel-picker-input',
-          name: 'channel-picker-input',
-          value: undefined,
-        },
-      });
-    });
-  });
-});

package/src/components/channel-picker-input/index.js

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

package/src/components/channel-picker-input/messages.js

@@ -1,14 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  noChannelsFound: {
-    id: 'Products.ChannelPickerInput.noChannelsFound',
-    description: 'The message to display when no channels were found',
-    defaultMessage: 'There are no channels that match your search',
-  },
-  placeholder: {
-    id: 'Products.ChannelPickerInput.placeholder',
-    description: 'The placeholder of the input',
-    defaultMessage: 'Search by name, key or type an ID',
-  },
-});

package/src/components/channel-picker-input/tracking-events.js

@@ -1,24 +0,0 @@
-const trackingEvents = {
-  selectChannelName: {
-    action: 'select',
-    category: 'ReferenceChannel',
-    label: 'name',
-  },
-  selectChannelKey: {
-    action: 'select',
-    category: 'ReferenceChannel',
-    label: 'key',
-  },
-  selectChannelId: {
-    action: 'select',
-    category: 'ReferenceChannel',
-    label: 'id',
-  },
-  selectWithoutTyping: {
-    action: 'select',
-    category: 'ReferenceChannel',
-    label: 'noEntry',
-  },
-};
-
-export default trackingEvents;

package/src/components/country-picker/components/countries-async-select-dropdown/countries-async-select-dropdown.jsx

@@ -1,89 +0,0 @@
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { AsyncSelectField } from '@commercetools-frontend/ui-kit';
-import messages from '../../messages';
-
-const emptyCountryOption = (intl) => [
-  {
-    label: intl.formatMessage(
-      messages.countriesAsyncSelectDropdownTypeAheadPrompt
-    ),
-    value: undefined,
-    isDisabled: true,
-  },
-];
-
-export default function CountriesAsyncSelectDropdown(props) {
-  const intl = useIntl();
-  const handleLoadOptions = async (searchTerm) => {
-    const filteredOptions = props.options?.filter((country) =>
-      country.label.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-
-    if (searchTerm) {
-      return filteredOptions.slice(0, props.countriesAsyncLoadingLimit);
-    }
-
-    return [
-      { options: props.options?.slice(0, props.countriesAsyncLoadingLimit) },
-      { options: emptyCountryOption(intl) },
-    ];
-  };
-  const onOptionChange = (event) => {
-    const countries = event.target.value;
-
-    props.onChange({
-      target: {
-        ...event.target,
-        value: countries.map((country) => country?.value ?? country),
-      },
-    });
-  };
-
-  return (
-    <AsyncSelectField
-      id={props.id}
-      name={props.name}
-      title={props.title}
-      description={props.description}
-      isRequired={props.isRequired}
-      isMulti={props.isMulti}
-      showOptionGroupDivider
-      isSearchable
-      value={props.value.map((countryCode) =>
-        props.options.find((country) => country.value === countryCode)
-      )}
-      placeholder={intl.formatMessage(messages.countriesAsyncSelectPlaceholder)}
-      loadOptions={handleLoadOptions}
-      onChange={onOptionChange}
-      isDisabled={props.isDisabled}
-      isReadOnly={props.isReadOnly}
-      defaultOptions
-      hasWarning={props.hasWarning}
-    />
-  );
-}
-
-CountriesAsyncSelectDropdown.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  title: PropTypes.shape({}).isRequired,
-  isRequired: PropTypes.bool.isRequired,
-  isMulti: PropTypes.bool.isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string.isRequired),
-    PropTypes.string,
-  ]),
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-    })
-  ),
-  description: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  isReadOnly: PropTypes.bool.isRequired,
-  hasWarning: PropTypes.bool.isRequired,
-  countriesAsyncLoadingLimit: PropTypes.number.isRequired,
-};

package/src/components/country-picker/components/countries-async-select-dropdown/index.js

@@ -1 +0,0 @@
-export { default } from './countries-async-select-dropdown';

package/src/components/country-picker/components/countries-basic-select-dropdown/countries-basic-select-dropdown.jsx

@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { SelectField } from '@commercetools-frontend/ui-kit';
-import messages from '../../messages';
-
-export default function CountriesBasicSelectDropdown(props) {
-  const intl = useIntl();
-
-  return (
-    <SelectField
-      id={props.id}
-      name={props.name}
-      title={props.title}
-      isMulti={props.isMulti}
-      value={props.value}
-      isRequired={props.isRequired}
-      description={props.description}
-      placeholder={intl.formatMessage(messages.countriesBasicSelectPlaceholder)}
-      options={props.options}
-      onChange={props.onChange}
-      isDisabled={props.isDisabled}
-      isReadOnly={props.isReadOnly}
-      hasWarning={props.hasWarning}
-      isSearchable
-    />
-  );
-}
-
-CountriesBasicSelectDropdown.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  title: PropTypes.shape({}).isRequired,
-  isRequired: PropTypes.bool.isRequired,
-  isMulti: PropTypes.bool.isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string.isRequired),
-    PropTypes.string,
-  ]),
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-    })
-  ),
-  description: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  isReadOnly: PropTypes.bool.isRequired,
-  hasWarning: PropTypes.bool.isRequired,
-};

package/src/components/country-picker/components/countries-basic-select-dropdown/index.js

@@ -1 +0,0 @@
-export { default } from './countries-basic-select-dropdown';

package/src/components/country-picker/constants.js

@@ -1 +0,0 @@
-export const COUNTRIES_ASYNC_LOADING_LIMIT = 60;

package/src/components/country-picker/country-picker.jsx

@@ -1,49 +0,0 @@
-import PropTypes from 'prop-types';
-import { Spacings } from '@commercetools-frontend/ui-kit';
-import { COUNTRIES_ASYNC_LOADING_LIMIT } from './constants';
-import CountriesBasicSelectDropdown from './components/countries-basic-select-dropdown';
-import CountriesAsyncSelectDropdown from './components/countries-async-select-dropdown';
-
-export default function CountriesPicker(props) {
-  const CustomCountriesPicker =
-    props.options?.length <= props.countriesAsyncLoadingLimit
-      ? CountriesBasicSelectDropdown
-      : CountriesAsyncSelectDropdown;
-
-  return (
-    <Spacings.Stack>
-      <CustomCountriesPicker {...props} />
-    </Spacings.Stack>
-  );
-}
-
-CountriesPicker.defaultProps = {
-  countriesAsyncLoadingLimit: COUNTRIES_ASYNC_LOADING_LIMIT,
-  isMulti: false,
-  isRequired: false,
-  hasWarning: false,
-};
-
-CountriesPicker.propTypes = {
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  title: PropTypes.shape({}).isRequired,
-  isRequired: PropTypes.bool.isRequired,
-  isMulti: PropTypes.bool,
-  value: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string.isRequired),
-    PropTypes.string,
-  ]),
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-    })
-  ),
-  description: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  isReadOnly: PropTypes.bool.isRequired,
-  countriesAsyncLoadingLimit: PropTypes.number,
-  hasWarning: PropTypes.bool,
-};

package/src/components/country-picker/index.js

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

package/src/components/country-picker/messages.js

@@ -1,20 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  countriesBasicSelectPlaceholder: {
-    id: 'CountriesPicker.countriesBasicSelectPlaceholder',
-    description: 'Placeholder of the basic field for countries',
-    defaultMessage: 'Not restricted to any country yet',
-  },
-  countriesAsyncSelectPlaceholder: {
-    id: 'CountriesPicker.countriesAsyncSelectPlaceholder',
-    description: 'Placeholder of the async select field for countries',
-    defaultMessage: 'Search for countries by name',
-  },
-  countriesAsyncSelectDropdownTypeAheadPrompt: {
-    id: 'CountriesPicker.countriesAsyncSelectDropdownTypeAheadPrompt',
-    description:
-      'Message to be shown to the user to start typing to load more more countries',
-    defaultMessage: 'Start typing above to load more',
-  },
-});

package/src/components/divider/divider.jsx

@@ -1,21 +0,0 @@
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import styles from './divider.module.css';
-
-export default function Divider({ size = 's', isDashed }) {
-  return (
-    <hr
-      className={classnames({
-        [styles['divider-solid']]: !isDashed,
-        [styles['divider-dashed']]: isDashed,
-        [styles.size_s]: size === 's',
-        [styles.size_m]: size === 'm',
-      })}
-    />
-  );
-}
-Divider.displayName = 'Divider';
-Divider.propTypes = {
-  size: PropTypes.oneOf(['s', 'm']),
-  isDashed: PropTypes.bool,
-};