@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

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

@@ -1,266 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,17 +0,0 @@
-// 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

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

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

@@ -1,16 +0,0 @@
-// 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

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

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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,32 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,147 +0,0 @@
-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

@@ -1,14 +0,0 @@
-.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

@@ -1,82 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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
-    }
-  }
-}