@commercetools-frontend/experimental-components 0.0.2

package/src/components/product-type-picker-input/product-type-picker-input.spec.js

@@ -0,0 +1,266 @@
+import { graphql } from 'msw';
+import { setupServer } from 'msw/node';
+import { GtmContext } from '@commercetools-frontend/application-shell';
+import {
+  renderAppWithRedux,
+  fireEvent,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { buildGraphqlList } from '@commercetools-test-data/core';
+import { ProductType } from '@commercetools-local/test-data';
+import { selectInputUtils } from '@commercetools-local/test-utils';
+import PropTypes from 'prop-types';
+import ProductTypePickerInput from './product-type-picker-input';
+
+const track = jest.fn();
+
+const createTestProps = (custom) => ({
+  name: 'product-type-picker-input',
+  isClearable: true,
+  onChange: jest.fn(),
+  onError: jest.fn(),
+  ...custom,
+});
+
+const render = (ui, renderOptions) => {
+  const Wrapper = ({ children }) => (
+    <GtmContext.Provider value={{ track }}>
+      <>
+        <label htmlFor="product-type-picker-input">Product type picker</label>
+        {children}
+      </>
+    </GtmContext.Provider>
+  );
+  Wrapper.propTypes = {
+    children: PropTypes.element.isRequired,
+  };
+
+  renderAppWithRedux(ui, {
+    wrapper: Wrapper,
+    ...renderOptions,
+  });
+};
+
+const productType = ProductType.presets.milk();
+const builtProductType = productType.buildGraphql();
+
+let queriesSent;
+
+const mockServer = setupServer(
+  graphql.query('GetProductTypeQuery', (req, res, ctx) => {
+    const productTypeId = req.body.variables.id;
+    return res(
+      ctx.data({
+        productType:
+          productTypeId === builtProductType.id ? builtProductType : null,
+      })
+    );
+  }),
+
+  graphql.query('GetProductTypesQuery', (req, res, ctx) => {
+    queriesSent.GetProductTypesQuery += 1;
+
+    const whereQuery = req.body.variables.where;
+
+    const foundProductTypes =
+      whereQuery.includes('name >= "Milk"') ||
+      whereQuery === `id = "${builtProductType.id}"`
+        ? [productType]
+        : [];
+
+    return res(
+      ctx.data({
+        productTypes: buildGraphqlList(foundProductTypes, {
+          name: 'ProductType',
+          total: 1,
+        }),
+      })
+    );
+  }),
+  graphql.query('FetchIndicesExist', (req, res, ctx) =>
+    res(
+      ctx.data({
+        indicesExist: {
+          products: {
+            searchableIndexExists: false,
+            newInProgress: false,
+          },
+          productTypes: {
+            searchableIndexExists: false,
+            newInProgress: false,
+          },
+        },
+      })
+    )
+  )
+);
+
+beforeEach(() => {
+  queriesSent = {
+    GetProductTypesQuery: 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 debounce the search', async () => {
+    const props = createTestProps();
+    render(<ProductTypePickerInput {...props} />);
+
+    const input = await screen.findByLabelText('Product type picker');
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.change(input, { target: { value: 'M' } });
+    fireEvent.change(input, { target: { value: 'i' } });
+    fireEvent.change(input, { target: { value: 'l' } });
+    fireEvent.change(input, { target: { value: 'k' } });
+
+    await waitFor(() => expect(queriesSent.GetProductTypesQuery).toBe(1));
+  });
+
+  it('should show a message when no product types are found', async () => {
+    const props = createTestProps();
+    render(<ProductTypePickerInput {...props} />);
+
+    const input = await screen.findByLabelText('Product type picker');
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.change(input, { target: { value: 'Missing' } });
+
+    await screen.findByText(
+      /there are no product types that match your search/i
+    );
+  });
+
+  it('should call onError on network error', async () => {
+    mockServer.use(
+      graphql.query('GetProductTypesQuery', (req, res, ctx) =>
+        res(ctx.status(500))
+      )
+    );
+
+    const props = createTestProps();
+    render(<ProductTypePickerInput {...props} />);
+
+    const input = await screen.findByLabelText('Product type picker');
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.change(input, { target: { value: 'Milk' } });
+
+    await waitFor(() => expect(props.onError).toHaveBeenCalled());
+  });
+
+  it('should render a loading spinner when initial product option is being loaded', async () => {
+    mockServer.use(
+      graphql.query('GetProductTypeQuery', () => Promise.resolve())
+    );
+    const props = createTestProps({
+      value: builtProductType.id,
+    });
+    render(<ProductTypePickerInput {...props} />);
+    expect(screen.getByTestId('centered-loading-spinner')).toBeInTheDocument();
+
+    await waitFor(() =>
+      expect(
+        screen.queryByTestId('centered-loading-spinner')
+      ).not.toBeInTheDocument()
+    );
+  });
+
+  it('should render the error message on loading error', async () => {
+    mockServer.use(
+      graphql.query('GetProductTypeQuery', (req, res, ctx) =>
+        res(ctx.status(500))
+      )
+    );
+
+    const props = createTestProps({
+      value: builtProductType.id,
+    });
+    render(<ProductTypePickerInput {...props} />);
+
+    await screen.findByText(
+      'Unable to load resource. Check the connection and try again.'
+    );
+  });
+});
+
+describe('selecting options', () => {
+  it('should select option', async () => {
+    const props = createTestProps();
+    render(<ProductTypePickerInput {...props} />);
+
+    const input = await screen.findByLabelText('Product type picker');
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.change(input, { target: { value: 'Milk' } });
+
+    await waitForElementToBeRemoved(() => screen.queryByText(/loading/i));
+    selectInputUtils.selectFirstOption(input);
+
+    await waitFor(() => {
+      expect(props.onChange).toHaveBeenLastCalledWith({
+        persist: expect.any(Function),
+        target: {
+          id: 'product-type-picker-input',
+          name: 'product-type-picker-input',
+          value: builtProductType.id,
+        },
+      });
+    });
+  });
+
+  it('should track options selections', async () => {
+    const props = createTestProps();
+    render(<ProductTypePickerInput {...props} />);
+
+    const input = await screen.findByLabelText('Product type picker');
+    fireEvent.focus(input);
+    fireEvent.keyDown(input, { key: 'ArrowDown' });
+    fireEvent.change(input, { target: { value: 'P' } });
+
+    const getLoadingElement = () => screen.getByText(/loading/i);
+
+    await waitForElementToBeRemoved(getLoadingElement);
+    selectInputUtils.selectFirstOption(input);
+    await waitFor(() =>
+      expect(track).toHaveBeenCalledWith(
+        'select',
+        'ReferenceProductType',
+        'name'
+      )
+    );
+
+    // should track id selection
+    fireEvent.change(input, { target: { value: builtProductType.id } });
+
+    await waitForElementToBeRemoved(getLoadingElement);
+    selectInputUtils.selectFirstOption(input);
+    await waitFor(() =>
+      expect(track).toHaveBeenLastCalledWith(
+        'select',
+        'ReferenceProductType',
+        'id'
+      )
+    );
+  });
+});

package/src/components/product-type-picker-input/tracking-events.js

@@ -0,0 +1,14 @@
+const trackingEvents = {
+  selectProductTypeName: {
+    action: 'select',
+    category: 'ReferenceProductType',
+    label: 'name',
+  },
+  selectProductTypeId: {
+    action: 'select',
+    category: 'ReferenceProductType',
+    label: 'id',
+  },
+};
+
+export default trackingEvents;

package/src/components/required-indicator/__snapshots__/required-indicator.spec.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`when uncolored should match snapshot 1`] = `
+<em
+  className=""
+>
+  *
+</em>
+`;
+
+exports[`with default props should match snapshot 1`] = `
+<em
+  className="colored"
+>
+  *
+</em>
+`;

package/src/components/required-indicator/index.js

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

package/src/components/required-indicator/required-indicator.jsx

@@ -0,0 +1,16 @@
+// NOTE: this component is duplicated in `app-shell/from-core`.
+// It's a temporary solution to avoid importing `core` components from AppShell.
+// Be careful when you change something here, remember to duplicate the changes.
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import styles from './required-indicator.module.css';
+
+const RequiredIndicator = ({ uncolored }) => (
+  <em className={classnames({ [styles.colored]: !uncolored })}>{'*'}</em>
+);
+RequiredIndicator.displayName = 'RequiredIndicator';
+RequiredIndicator.propTypes = {
+  uncolored: PropTypes.bool,
+};
+
+export default RequiredIndicator;

package/src/components/required-indicator/required-indicator.module.css

@@ -0,0 +1,3 @@
+.colored {
+  color: var(--color-warning);
+}

package/src/components/required-indicator/required-indicator.spec.js

@@ -0,0 +1,14 @@
+import { shallow } from 'enzyme';
+import RequiredIndicator from './required-indicator';
+
+describe('with default props', () => {
+  it('should match snapshot', () => {
+    expect(shallow(<RequiredIndicator />)).toMatchSnapshot();
+  });
+});
+
+describe('when uncolored', () => {
+  it('should match snapshot', () => {
+    expect(shallow(<RequiredIndicator uncolored={true} />)).toMatchSnapshot();
+  });
+});

package/src/components/scroll-to-field-error/index.js

@@ -0,0 +1 @@
+export { default } from './scroll-to-field-error';

package/src/components/scroll-to-field-error/scroll-to-field-error.js

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+import { useFormikContext } from 'formik';
+
+const ScrollToFieldError = () => {
+  const formik = useFormikContext();
+  const { isValid, submitCount } = formik;
+
+  useEffect(() => {
+    // Do not run the effect if the form hasn't been submitted yet.
+    if (submitCount === 0) return;
+    // Do not run the effect if the form is valid.
+    if (isValid) return;
+
+    const firstErrorElement = document.querySelector('[aria-invalid="true"]');
+    if (firstErrorElement) {
+      // Get a reference to the label.
+      const id = firstErrorElement.getAttribute('id');
+
+      // Scroll to the label (if found), otherwise to the input element itself.
+      const elementToScrollTo =
+        document.querySelector(`label[for="${id}"]`) ??
+        document.querySelector(`label#${id}`) ??
+        firstErrorElement;
+
+      elementToScrollTo.scrollIntoView?.({ behavior: 'smooth' });
+    }
+  }, [isValid, submitCount]);
+
+  return null;
+};
+
+export default ScrollToFieldError;

package/src/components/selectable-field-search-input/index.js

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

package/src/components/selectable-field-search-input/messages.js

@@ -0,0 +1,14 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  buttonLabel: {
+    id: 'SearchInput.buttonLabel',
+    description: 'Label for "Search" button.',
+    defaultMessage: 'Search',
+  },
+  placeholder: {
+    id: 'SearchInput.placeholder',
+    description: 'Placeholder for "Search" input field',
+    defaultMessage: 'Search',
+  },
+});

package/src/components/selectable-field-search-input/selectable-field-search-input.jsx

@@ -0,0 +1,147 @@
+import PropTypes from 'prop-types';
+import { useState } from 'react';
+import {
+  AccessibleHidden,
+  SelectInput,
+  Constraints,
+  Text,
+} from '@commercetools-frontend/ui-kit';
+import { SearchInput } from '../../internal-index';
+import styles from './selectable-field-search-input.module.css';
+
+const SearchModeOption = (props) => (
+  <SelectInput.Option {...props}>
+    <Text.Body
+      truncate={true}
+      title={props.title || props.label}
+      tone={props.isDisabled ? 'secondary' : null}
+    >
+      {props.label ?? ' '}
+    </Text.Body>
+  </SelectInput.Option>
+);
+
+SearchModeOption.displayName = 'SearchModeOption';
+SearchModeOption.propTypes = {
+  label: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  isDisabled: PropTypes.bool,
+};
+
+const SearchModeSingleValue = (props) => (
+  <SelectInput.SingleValue {...props}>
+    <Text.Body
+      truncate={true}
+      title={props.data.title || props.data.label}
+      tone={props.data.isDisabled ? 'primary' : null}
+    >
+      {props.data.label ?? ' '}
+    </Text.Body>
+  </SelectInput.SingleValue>
+);
+
+SearchModeSingleValue.displayName = 'SearchModeSingleValue';
+SearchModeSingleValue.propTypes = {
+  data: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    isDisabled: PropTypes.bool,
+  }),
+};
+
+const SearchModeMenu = (props) => (
+  <SelectInput.Menu className={styles['search-mode-menu']} {...props}>
+    {props.children}
+  </SelectInput.Menu>
+);
+
+SearchModeMenu.displayName = 'SearchModeMenu';
+SearchModeMenu.propTypes = {
+  children: PropTypes.object,
+  getStyles: PropTypes.func,
+  innerRef: PropTypes.func,
+  innerProps: PropTypes.object,
+};
+
+export const SelectableFieldSearchInput = (props) => {
+  const [searchString, setSearchString] = useState(props.initialValue);
+  const handleChangeInput = (value) => {
+    if (typeof props.onTextInputChange === 'function') {
+      props.onTextInputChange(value);
+    }
+    setSearchString(value);
+  };
+
+  const selectInputProps = props.disabled
+    ? {}
+    : {
+        components: {
+          Option: SearchModeOption,
+          SingleValue: SearchModeSingleValue,
+          Menu: SearchModeMenu,
+        },
+      };
+
+  return (
+    <div className={styles.container}>
+      <AccessibleHidden>
+        <label htmlFor="select-search-mode">Open search mode</label>
+      </AccessibleHidden>
+      <SelectInput
+        id="select-search-mode"
+        value={props.searchMode}
+        aria-label="search-mode"
+        horizontalConstraint={3}
+        options={props.options}
+        isDisabled={props.disabled}
+        onChange={(option) =>
+          props.onChange({
+            option: option.target.value,
+            value: searchString,
+          })
+        }
+        showOptionGroupDivider={true}
+        {...selectInputProps}
+      />
+      <Constraints.Horizontal max="scale">
+        <SearchInput
+          searchMode={props.searchMode}
+          aria-label="search-input"
+          isGranular={true}
+          onChange={handleChangeInput}
+          placeholder={props.placeholder}
+          initialValue={props.initialValue}
+          onSubmit={(value) => {
+            props.onChange({ option: props.searchMode, value });
+          }}
+          throttleMS={
+            1 /* we pass 1ms to prevent user search before state update */
+          }
+          onReset={props.onReset}
+          disabled={props.disabled}
+          enableDisabledStyle={props.enableDisabledStyle}
+        />
+      </Constraints.Horizontal>
+    </div>
+  );
+};
+
+SelectableFieldSearchInput.displayName = 'SelectableFieldSearchInput';
+SelectableFieldSearchInput.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string,
+      label: PropTypes.string,
+    }).isRequired
+  ),
+  onTextInputChange: PropTypes.func,
+  onReset: PropTypes.func,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  initialValue: PropTypes.string,
+  searchMode: PropTypes.string,
+  disabled: PropTypes.bool,
+  enableDisabledStyle: PropTypes.bool,
+};
+
+export default SelectableFieldSearchInput;

package/src/components/selectable-field-search-input/selectable-field-search-input.module.css

@@ -0,0 +1,14 @@
+.container {
+  width: 100%;
+  position: relative;
+  display: flex;
+  z-index: 3;
+  max-width: 800px;
+}
+
+.search-mode-menu {
+  border-radius: var(--border-radius-6);
+  border: 1px solid var(--color-primary);
+  margin-top: 2px;
+  position: absolute;
+}

package/src/components/selectable-field-search-input/selectable-field-search-input.spec.js

@@ -0,0 +1,82 @@
+import {
+  renderApp,
+  fireEvent,
+  screen,
+} from '@commercetools-frontend/application-shell/test-utils';
+import SelectableFieldSearchInput from './selectable-field-search-input';
+
+const createTestProps = (custom) => ({
+  options: [
+    {
+      value: 'lastName',
+      label: 'Last name',
+    },
+    {
+      value: 'email',
+      label: 'Email',
+    },
+  ],
+  searchMode: '',
+  onReset: jest.fn(),
+  onChange: jest.fn(),
+  clearSearchField: jest.fn(),
+  ...custom,
+});
+
+describe('<SelectableFieldSearchInput />', () => {
+  it('should render default placeholder', async () => {
+    const props = createTestProps();
+    renderApp(<SelectableFieldSearchInput {...props} />);
+    await screen.findByPlaceholderText('Search');
+  });
+
+  it('should render with a provided placeholder', async () => {
+    const props = createTestProps({ placeholder: 'enter something...' });
+    renderApp(<SelectableFieldSearchInput {...props} />);
+    await screen.findByPlaceholderText('enter something...');
+  });
+
+  it('should submit on search icon click', async () => {
+    const props = createTestProps({
+      initialValue: 'foo',
+    });
+    renderApp(<SelectableFieldSearchInput {...props} />);
+    fireEvent.click(screen.getByTestId('search-button'));
+
+    expect(props.onChange).toHaveBeenCalledWith({ option: '', value: 'foo' });
+  });
+
+  it('should submit on hitting Enter', async () => {
+    const props = createTestProps({
+      initialValue: 'foo',
+    });
+    renderApp(<SelectableFieldSearchInput {...props} />);
+    fireEvent.keyDown(screen.getByDisplayValue('foo'), {
+      key: 'Enter',
+      keyCode: 13,
+    });
+    expect(props.onChange).toHaveBeenCalledWith({ option: '', value: 'foo' });
+  });
+  it('should pass value and option as a prop if both are specified', async () => {
+    const props = createTestProps({});
+    renderApp(<SelectableFieldSearchInput {...props} />);
+
+    const searchInput = await screen.findByPlaceholderText('Search');
+    fireEvent.change(searchInput, { target: { value: 'foo' } });
+    fireEvent.keyDown(searchInput, {
+      key: 'Enter',
+      keyCode: 13,
+    });
+
+    const select = await screen.findByText('Select...');
+    fireEvent.focus(select);
+    fireEvent.keyDown(select, { key: 'ArrowDown' });
+    const option = await screen.findByText('Last name');
+    fireEvent.click(option);
+
+    expect(props.onChange).toHaveBeenCalledWith({
+      option: 'lastName',
+      value: 'foo',
+    });
+  });
+});

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

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

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

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

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

@@ -0,0 +1,24 @@
+query GetStatesQuery($where: String, $sortByNamePath: String!) {
+  states(where: $where, sort: [$sortByNamePath, "key"], limit: 60) {
+    total
+    results {
+      id
+      key
+      nameAllLocales {
+        locale
+        value
+      }
+    }
+  }
+}
+
+query GetStateQuery($id: String) {
+  state(id: $id) {
+    id
+    key
+    nameAllLocales {
+      locale
+      value
+    }
+  }
+}