@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-product-type-reference-input.spec.js

@@ -1,146 +0,0 @@
-import '@commercetools-local/test-utils/src/ui-kit-mocks';
-import { graphql } from 'msw';
-import { setupServer } from 'msw/node';
-import {
-  screen,
-  waitFor,
-  fireEvent,
-} from '@commercetools-frontend/application-shell/test-utils';
-import { buildGraphqlList } from '@commercetools-test-data/core';
-import { ProductType } from '@commercetools-local/test-data';
-import {
-  renderCustomFieldsWithGraphqlMock,
-  clearValue,
-} from '../../test-utils';
-
-const milk = ProductType.presets.milk().buildGraphql();
-const tshirt = ProductType.presets.tshirt();
-
-const mockServer = setupServer(
-  graphql.query('FetchIndicesExist', (req, res, ctx) =>
-    res(
-      ctx.data({
-        indicesExist: {
-          products: {
-            searchableIndexExists: false,
-            newInProgress: false,
-          },
-          productTypes: {
-            searchableIndexExists: false,
-            newInProgress: false,
-          },
-        },
-      })
-    )
-  ),
-  graphql.query('GetProductTypeQuery', (req, res, ctx) =>
-    res(
-      ctx.data({
-        productType: milk,
-      })
-    )
-  ),
-  graphql.query('GetProductTypesQuery', (req, res, ctx) =>
-    res(
-      ctx.data({
-        productTypes: buildGraphqlList([tshirt], {
-          name: 'ProductType',
-          total: 2,
-        }),
-      })
-    )
-  )
-);
-
-afterEach(() => {
-  mockServer.resetHandlers();
-});
-
-beforeAll(() => mockServer.listen({ onUnhandledRequest: 'error' }));
-
-afterAll(() => mockServer.close());
-
-describe('CustomProductReferenceInput', () => {
-  const fieldDefinitions = [
-    {
-      name: 'productTypeRefAttr',
-      type: {
-        name: 'reference',
-        referenceTypeId: 'product-type',
-      },
-    },
-  ];
-
-  it('should show placeholder when value is empty', async () => {
-    renderCustomFieldsWithGraphqlMock({ fieldDefinitions });
-    await screen.findByText(/Search by product type name/);
-  });
-
-  it('should load a product type by provided product id value', async () => {
-    renderCustomFieldsWithGraphqlMock({
-      fieldDefinitions,
-      initialValues: {
-        productTypeRefAttr: { id: milk.id, typeId: 'product-type' },
-      },
-    });
-    await screen.findByText(/Milk/);
-  });
-
-  it('should behave fine if product type was not found', async () => {
-    mockServer.use(
-      graphql.query('GetProductQuery', (req, res, ctx) =>
-        res.once(
-          ctx.data({
-            product: null,
-          })
-        )
-      )
-    );
-
-    renderCustomFieldsWithGraphqlMock({
-      fieldDefinitions,
-      initialValues: {
-        productTypeRefAttr: { id: milk.id, typeId: 'product-type' },
-      },
-    });
-  });
-
-  it('should let user change value', async () => {
-    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
-      fieldDefinitions,
-      initialValues: {
-        productTypeRefAttr: { id: milk.id, typeId: 'product-type' },
-      },
-    });
-    await screen.findByText(/Milk/);
-
-    const input = screen.getByLabelText('productTypeRefAttr');
-    fireEvent.change(input, { target: { value: 'T-sh' } });
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-
-    const option = await screen.findByText('T-shirt Product Type');
-    fireEvent.click(option);
-
-    await waitFor(() =>
-      expect(getFormikValues()).toStrictEqual({
-        productTypeRefAttr: {
-          id: tshirt.buildGraphql().id,
-          typeId: 'product-type',
-        },
-      })
-    );
-  });
-
-  it('should drop empty value from formik values', async () => {
-    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
-      fieldDefinitions,
-      initialValues: {
-        productTypeRefAttr: { id: milk.id, typeId: 'product-type' },
-      },
-    });
-    await screen.findByText(/Milk/);
-    await clearValue('productTypeRefAttr');
-    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
-  });
-});

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-raw-id-reference-input.jsx

@@ -1,32 +0,0 @@
-import PropTypes from 'prop-types';
-import { TextInput } from '@commercetools-frontend/ui-kit';
-import CustomFieldTooltip from '../../custom-field-tooltip';
-
-export default function CustomRawIdReferenceInput(props) {
-  const value = props.value?.id || '';
-
-  return (
-    <CustomFieldTooltip title={value}>
-      <TextInput
-        id={props.name}
-        value={value}
-        onChange={props.onChange}
-        onBlur={props.onBlur}
-        hasError={props.hasError}
-        isDisabled={props.isDisabled}
-        isReadOnly={props.isReadOnly}
-      />
-    </CustomFieldTooltip>
-  );
-}
-
-CustomRawIdReferenceInput.displayName = 'CustomRawIdReferenceInput';
-CustomRawIdReferenceInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  value: PropTypes.any,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  onBlur: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  hasError: PropTypes.bool,
-};

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-raw-id-reference-input.spec.js

@@ -1,83 +0,0 @@
-import xhrMock from 'xhr-mock';
-import { createGraphqlMock } from '@commercetools-local/test-utils';
-import {
-  screen,
-  waitFor,
-  fireEvent,
-} from '@commercetools-frontend/application-shell/test-utils';
-import {
-  renderCustomFieldsWithGraphqlMock,
-  enterValue,
-} from '../../test-utils';
-
-beforeEach(() => {
-  xhrMock.setup();
-  const resolvers = {
-    ctp: {
-      query: {},
-    },
-  };
-  createGraphqlMock(xhrMock, { resolvers });
-});
-
-afterEach(() => {
-  xhrMock.teardown();
-});
-
-describe('CustomRawIdReferenceInput (for reference attributes for which pickers are not implemented yet)', () => {
-  const fieldDefinitions = [
-    {
-      name: 'referenceAttr',
-      type: {
-        name: 'reference',
-        referenceTypeId: 'shopping-list',
-      },
-    },
-  ];
-
-  it('should show placeholder when value is empty', async () => {
-    renderCustomFieldsWithGraphqlMock({ fieldDefinitions });
-    await screen.findByDisplayValue('');
-  });
-
-  it('should show reference type name and give user a hint that ID should be entered', async () => {
-    renderCustomFieldsWithGraphqlMock({ fieldDefinitions });
-    await screen.findByText('Shopping-list ID');
-  });
-
-  it('should render provided value', async () => {
-    renderCustomFieldsWithGraphqlMock({
-      fieldDefinitions,
-      initialValues: { referenceAttr: { id: 'shopping-list-id' } },
-    });
-    await screen.findByDisplayValue('shopping-list-id');
-  });
-
-  it('should let user change value', async () => {
-    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
-      fieldDefinitions,
-    });
-    const input = await screen.findByDisplayValue('');
-    fireEvent.change(input, {
-      target: { name: 'referenceAttr', value: 'shopping-list-id' },
-    });
-
-    await waitFor(() =>
-      expect(getFormikValues()).toStrictEqual({
-        referenceAttr: {
-          id: 'shopping-list-id',
-          typeId: 'shopping-list',
-        },
-      })
-    );
-  });
-
-  it('should drop empty value from formik values', async () => {
-    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
-      fieldDefinitions,
-      initialValues: { referenceAttr: { id: 'shopping-list-id' } },
-    });
-    await enterValue('referenceAttr', '');
-    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
-  });
-});

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-reference-input.jsx

@@ -1,78 +0,0 @@
-import PropTypes from 'prop-types';
-import CustomRawIdReferenceInput from './custom-raw-id-reference-input';
-import CustomCategoryReferenceInput from './custom-category-reference-input';
-import CustomCartDiscountReferenceInput from './custom-cart-discount-reference-input';
-import CustomProductReferenceInput from './custom-product-reference-input';
-import CustomProductTypeReferenceInput from './custom-product-type-reference-input';
-import CustomChannelReferenceInput from './custom-channel-reference-input';
-import CustomStateReferenceInput from './custom-state-reference-input';
-import { SEARCHABLE_REFERENCES } from '../../../../constants';
-import { makeChangeHandler } from '../../utils';
-
-/*
- This component is an entry point for all the reference inputs.
- Whenever new reference input is implemented, this component has to
- be extended to support it.
-
- All reference types which do not have a corresponding picker yet
- fallback to raw id input, which is just a TextInput under the hood,
- without any type-ahead suggestions.
-*/
-export default function CustomReferenceInput(props) {
-  const type = props.fieldDefinition.type;
-  const referenceTypeId = type.referenceTypeId;
-
-  const handleChange = makeChangeHandler((rawValue) => {
-    const nullifiedIfNeeded = rawValue
-      ? { id: rawValue, typeId: referenceTypeId }
-      : undefined;
-    props.setFieldValue(props.name, nullifiedIfNeeded);
-  });
-
-  const ReferenceInputComponent = do {
-    if (referenceTypeId === SEARCHABLE_REFERENCES.category)
-      CustomCategoryReferenceInput;
-    else if (referenceTypeId === SEARCHABLE_REFERENCES.cartDiscount)
-      CustomCartDiscountReferenceInput;
-    else if (referenceTypeId === SEARCHABLE_REFERENCES.product)
-      CustomProductReferenceInput;
-    else if (referenceTypeId === SEARCHABLE_REFERENCES.productType)
-      CustomProductTypeReferenceInput;
-    else if (referenceTypeId === SEARCHABLE_REFERENCES.channel)
-      CustomChannelReferenceInput;
-    else if (referenceTypeId === SEARCHABLE_REFERENCES.state)
-      CustomStateReferenceInput;
-    else CustomRawIdReferenceInput;
-  };
-
-  return (
-    <ReferenceInputComponent
-      id={props.name}
-      name={props.name}
-      fieldDefinition={props.fieldDefinition}
-      value={props.value}
-      setFieldValue={props.setFieldValue}
-      isDisabled={props.isDisabled}
-      isReadOnly={props.isReadOnly}
-      onBlur={props.onBlur}
-      hasError={props.hasError}
-      onChange={handleChange}
-    />
-  );
-}
-
-CustomReferenceInput.displayName = 'CustomReferenceInput';
-CustomReferenceInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  fieldDefinition: PropTypes.shape({
-    type: PropTypes.shape({
-      referenceTypeId: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
-  value: PropTypes.any,
-  setFieldValue: PropTypes.func.isRequired,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  onBlur: PropTypes.func.isRequired,
-  hasError: PropTypes.bool,
-};

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-state-reference-input.jsx

@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types';
-import { StatePickerInput } from '../../../../internal-index';
-
-export default function CustomStateReferenceInput(props) {
-  const value = props.value?.id || '';
-
-  return (
-    <StatePickerInput
-      value={value}
-      name={props.name}
-      isClearable={!props.fieldDefinition.required}
-      isReadOnly={props.isReadOnly}
-      isDisabled={props.isDisabled}
-      onBlur={props.onBlur}
-      onChange={props.onChange}
-      hasError={props.hasError}
-      onError={() => null}
-    />
-  );
-}
-CustomStateReferenceInput.displayName = 'CustomStateReferenceInput';
-CustomStateReferenceInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  fieldDefinition: PropTypes.shape({
-    type: PropTypes.shape({
-      referenceTypeId: PropTypes.string.isRequired,
-    }).isRequired,
-    required: PropTypes.bool,
-  }).isRequired,
-  value: PropTypes.any,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  onBlur: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  hasError: PropTypes.bool,
-};

package/src/custom-fields/custom-fields/types/custom-reference-input/custom-state-reference-input.spec.js

@@ -1,130 +0,0 @@
-import '@commercetools-local/test-utils/src/ui-kit-mocks';
-import { graphql } from 'msw';
-import { setupServer } from 'msw/node';
-import {
-  screen,
-  waitFor,
-  fireEvent,
-} from '@commercetools-frontend/application-shell/test-utils';
-import { buildGraphqlList } from '@commercetools-test-data/core';
-import { State } from '@commercetools-local/test-data';
-import {
-  renderCustomFieldsWithGraphqlMock,
-  clearValue,
-} from '../../test-utils';
-
-const packedState = State.presets.packed().buildGraphql();
-const shippedState = State.presets.shipped();
-
-const mockServer = setupServer(
-  graphql.query('GetStateQuery', (req, res, ctx) =>
-    res(
-      ctx.data({
-        state: packedState,
-      })
-    )
-  ),
-  graphql.query('GetStatesQuery', (req, res, ctx) =>
-    res(
-      ctx.data({
-        states: buildGraphqlList([shippedState], {
-          name: 'State',
-          total: 2,
-        }),
-      })
-    )
-  )
-);
-
-afterEach(() => {
-  mockServer.resetHandlers();
-});
-
-beforeAll(() => mockServer.listen({ onUnhandledRequest: 'error' }));
-
-afterAll(() => mockServer.close());
-
-describe('CustomStateReferenceInput', () => {
-  const fieldDefinitions = [
-    {
-      name: 'stateRefAttr',
-      type: {
-        name: 'reference',
-        referenceTypeId: 'state',
-      },
-    },
-  ];
-
-  it('should show placeholder when value is empty', async () => {
-    renderCustomFieldsWithGraphqlMock({ fieldDefinitions });
-    await screen.findByText(/Search by state name, key or type an ID/);
-  });
-
-  it('should load a state by provided state id value', async () => {
-    renderCustomFieldsWithGraphqlMock({
-      fieldDefinitions,
-      initialValues: {
-        stateRefAttr: { id: packedState.id, typeId: 'state' },
-      },
-    });
-    await screen.findByText(/Packed/);
-  });
-
-  it('should behave fine if state was not found', async () => {
-    mockServer.use(
-      graphql.query('GetStateQuery', (req, res, ctx) =>
-        res.once(
-          ctx.data({
-            state: null,
-          })
-        )
-      )
-    );
-
-    renderCustomFieldsWithGraphqlMock({
-      fieldDefinitions,
-      initialValues: {
-        stateRefAttr: { id: packedState.id, typeId: 'state' },
-      },
-    });
-  });
-
-  it('should let user change value', async () => {
-    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
-      fieldDefinitions,
-      initialValues: {
-        stateRefAttr: { id: packedState.id, typeId: 'state' },
-      },
-    });
-    await screen.findByText(/Packed/);
-
-    const input = screen.getByLabelText('stateRefAttr');
-    fireEvent.change(input, { target: { value: 'Ship' } });
-    fireEvent.focus(input);
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-
-    const option = await screen.findByText('Shipped');
-    fireEvent.click(option);
-
-    await waitFor(() =>
-      expect(getFormikValues()).toStrictEqual({
-        stateRefAttr: {
-          id: shippedState.buildGraphql().id,
-          typeId: 'state',
-        },
-      })
-    );
-  });
-
-  it('should drop empty value from formik values', async () => {
-    const { getFormikValues } = renderCustomFieldsWithGraphqlMock({
-      fieldDefinitions,
-      initialValues: {
-        stateRefAttr: { id: packedState.id, typeId: 'state' },
-      },
-    });
-    await screen.findByText(/Packed/);
-    await clearValue('stateRefAttr');
-    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
-  });
-});

package/src/custom-fields/custom-fields/types/custom-reference-input/index.js

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

package/src/custom-fields/custom-fields/types/custom-text-input.jsx

@@ -1,46 +0,0 @@
-import { MultilineTextInput, TextInput } from '@commercetools-frontend/ui-kit';
-import PropTypes from 'prop-types';
-import { makeChangeHandler } from '../utils';
-import CustomFieldTooltip from '../custom-field-tooltip';
-
-export default function CustomTextInput(props) {
-  const isMultiLine = props.fieldDefinition.inputHint === 'MultiLine';
-
-  const InputComponent = isMultiLine ? MultilineTextInput : TextInput;
-
-  const value = props.value || '';
-
-  const handleChange = makeChangeHandler((rawValue) =>
-    props.setFieldValue(props.name, rawValue || undefined)
-  );
-
-  const tooltipValue = isMultiLine ? '' : value;
-
-  return (
-    <CustomFieldTooltip title={tooltipValue}>
-      <InputComponent
-        id={props.name}
-        name={props.name}
-        value={value}
-        onChange={handleChange}
-        onBlur={props.onBlur}
-        hasError={props.hasError}
-        isDisabled={props.isDisabled}
-        isReadOnly={props.isReadOnly}
-      />
-    </CustomFieldTooltip>
-  );
-}
-CustomTextInput.displayName = 'CustomTextInput';
-CustomTextInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  fieldDefinition: PropTypes.shape({
-    inputHint: PropTypes.string,
-  }).isRequired,
-  value: PropTypes.any,
-  setFieldValue: PropTypes.func.isRequired,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  onBlur: PropTypes.func.isRequired,
-  hasError: PropTypes.bool,
-};

package/src/custom-fields/custom-fields/types/custom-text-input.spec.js

@@ -1,66 +0,0 @@
-import '@commercetools-local/test-utils/src/ui-kit-mocks';
-import {
-  screen,
-  waitFor,
-  fireEvent,
-} from '@commercetools-frontend/application-shell/test-utils';
-import { renderCustomFields, enterValue } from '../test-utils';
-
-const fieldDefinitions = [
-  {
-    name: 'textAttr',
-    type: {
-      name: 'text',
-    },
-    inputTip: { en: 'input field description' },
-  },
-];
-
-describe('CustomTextInput', () => {
-  it('should show placeholder when value is empty', async () => {
-    renderCustomFields({ fieldDefinitions });
-    await screen.findByDisplayValue('');
-  });
-
-  it('should show input tip', async () => {
-    renderCustomFields({
-      fieldDefinitions,
-    });
-    await screen.findByText('input field description');
-  });
-
-  it('should render provided value', async () => {
-    renderCustomFields({
-      fieldDefinitions,
-      initialValues: { textAttr: 'some text' },
-    });
-    await screen.findByDisplayValue('some text');
-
-    expect(screen.queryByText('some text')).not.toBeInTheDocument();
-  });
-
-  it('should let user change values', async () => {
-    const { getFormikValues } = renderCustomFields({
-      fieldDefinitions,
-    });
-    await screen.findByDisplayValue('');
-
-    enterValue('textAttr', 'some text');
-    expect(getFormikValues()).toStrictEqual({ textAttr: 'some text' });
-
-    enterValue('textAttr', '');
-    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
-  });
-
-  it('should show the tooltip on hover when the value is greater than 40 characters', async () => {
-    const value = 'this is a test label which is forty plus chars';
-    renderCustomFields({
-      fieldDefinitions,
-      initialValues: { textAttr: value },
-    });
-    fireEvent.mouseOver(screen.getByLabelText('textAttr'));
-
-    expect(screen.getAllByDisplayValue(value)).toHaveLength(1); // field value
-    expect(screen.getAllByText(value)).toHaveLength(1); // tooltip
-  });
-});

package/src/custom-fields/custom-fields/types/custom-time-input.jsx

@@ -1,74 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { TimeInput } from '@commercetools-frontend/ui-kit';
-import { makeChangeHandler } from '../utils';
-
-export default function CustomTimeInput(props) {
-  const { timeZone, projectLanguage } = useApplicationContext(
-    (applicationContext) => ({
-      timeZone: applicationContext.user.timeZone,
-      projectLanguage: applicationContext.dataLocale,
-    })
-  );
-
-  const formatTime = useCallback(
-    (valueToFormat) =>
-      TimeInput.toLocaleTime(valueToFormat, projectLanguage) || '',
-    [projectLanguage]
-  );
-
-  const [internalValue, setInternalValue] = useState(formatTime(props.value));
-
-  const lastValueSentToFormik = useRef();
-
-  useEffect(() => {
-    if (lastValueSentToFormik.current !== props.value) {
-      setInternalValue(formatTime(props.value));
-    }
-  }, [props.value, formatTime]);
-
-  const handleChange = makeChangeHandler((rawValue) => {
-    setInternalValue(rawValue);
-    const in24hFormat = TimeInput.to24h(rawValue) || undefined;
-    // Avoid sending malformed values to Formik. Otherwise, due to the
-    // conversions we do back and forth input field will be reset to empty
-    // string once a malformed value is sent to Formik. Which results in
-    // horrible UX.
-    const isMalformed = rawValue && !in24hFormat;
-    if (!isMalformed) {
-      lastValueSentToFormik.current = in24hFormat;
-      props.setFieldValue(props.name, in24hFormat);
-    }
-  });
-
-  return (
-    <TimeInput
-      id={props.name}
-      name={props.name}
-      value={internalValue}
-      onChange={handleChange}
-      onBlur={props.onBlur}
-      timeZone={timeZone}
-      hasError={props.hasError}
-      isDisabled={props.isDisabled}
-      isReadOnly={props.isReadOnly}
-    />
-  );
-}
-
-CustomTimeInput.displayName = 'CustomTimeInput';
-CustomTimeInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  fieldDefinition: PropTypes.shape({
-    type: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
-  value: PropTypes.any,
-  setFieldValue: PropTypes.func.isRequired,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  onBlur: PropTypes.func.isRequired,
-  hasError: PropTypes.bool,
-};