@commercetools-frontend/experimental-components 0.0.2 → 0.1.0

package/src/custom-fields/custom-fields/test-utils.jsx

@@ -1,167 +0,0 @@
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Formik } from 'formik';
-import {
-  renderApp,
-  renderAppWithRedux,
-  screen,
-  fireEvent,
-  act,
-} from '@commercetools-frontend/application-shell/test-utils';
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-import { CartDiscountsCount } from '../../actions/reference-search/cart-discount/cart-discount.ctp.graphql';
-import CustomFields from './custom-fields';
-
-// TODO(pa3): cosider moving all the helpers (or at least parts of their logic) to packages-shared/test-utils/select-input.js
-export const renderCustomFields = ({
-  fieldDefinitions,
-  initialValues = {},
-  initialTouched = {},
-  name,
-  isDisabled = false,
-  isReadOnly = false,
-}) => {
-  let formikValues = initialValues;
-  let submitForm = () => {};
-  let touchedFields = initialTouched;
-  let resetForm = () => {};
-  let setInitialValues = () => {};
-
-  const Wrapper = ({ children }) => {
-    const [internalInitialValues, setInternalInitialValues] =
-      useState(initialValues);
-
-    setInitialValues = setInternalInitialValues;
-
-    return (
-      <Formik
-        enableReinitialize
-        initialValues={internalInitialValues}
-        initialTouched={initialTouched}
-        onSubmit={() => {}}
-      >
-        {(formikBag) => {
-          formikValues = formikBag.values;
-          submitForm = formikBag.handleSubmit;
-          touchedFields = formikBag.touched;
-          resetForm = formikBag.resetForm;
-
-          return children;
-        }}
-      </Formik>
-    );
-  };
-  Wrapper.displayName = 'Wrapper';
-  Wrapper.propTypes = {
-    children: PropTypes.node.isRequired,
-  };
-
-  renderApp(
-    <CustomFields
-      name={name}
-      isDisabled={isDisabled}
-      isReadOnly={isReadOnly}
-      fieldDefinitions={fieldDefinitions}
-    />,
-    {
-      wrapper: Wrapper,
-      mocks: [
-        {
-          request: {
-            query: CartDiscountsCount,
-            context: {
-              target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-            },
-          },
-          result: {
-            data: {
-              cartDiscounts: {
-                __typename: 'CartDiscountQueryResult',
-                total: 100,
-              },
-            },
-          },
-        },
-      ],
-    }
-  );
-
-  return {
-    getFormikValues: () => formikValues,
-    getTouchedFields: () => touchedFields,
-    submitForm: () => act(() => submitForm()),
-    resetForm: () => act(() => resetForm()),
-    setInitialValues: (values) => act(() => setInitialValues(values)),
-  };
-};
-
-export const renderCustomFieldsWithGraphqlMock = ({
-  fieldDefinitions,
-  initialValues = {},
-  name,
-  isDisabled = false,
-  isReadOnly = false,
-}) => {
-  let formikValues = initialValues;
-
-  renderAppWithRedux(
-    <Formik initialValues={initialValues}>
-      {({ values }) => {
-        formikValues = values;
-        return (
-          <CustomFields
-            name={name}
-            isDisabled={isDisabled}
-            isReadOnly={isReadOnly}
-            fieldDefinitions={fieldDefinitions}
-          />
-        );
-      }}
-    </Formik>
-  );
-
-  return { getFormikValues: () => formikValues };
-};
-
-export const selectValue = (name, value) => {
-  const input = screen.getByLabelText(name);
-  fireEvent.focus(input);
-  fireEvent.blur(input);
-  fireEvent.keyDown(input, {
-    key: 'ArrowDown',
-  });
-  const optionToSelect = screen.getByText(value);
-  fireEvent.click(optionToSelect);
-};
-
-export const enterValue = (name, value) => {
-  const input = screen.getByLabelText(name);
-  input.focus();
-  fireEvent.change(input, {
-    target: {
-      value,
-    },
-  });
-  fireEvent.keyDown(input, {
-    key: 'Enter',
-  });
-};
-
-export const clearValue = async (name) => {
-  const input = screen.getByLabelText(name);
-  fireEvent.focus(input);
-  fireEvent.keyDown(input, { key: 'Backspace' });
-  fireEvent.change(input, {
-    target: {
-      value: '',
-    },
-  });
-  fireEvent.keyDown(input, {
-    key: 'Enter',
-  });
-};
-
-export const clickClearButton = async () => {
-  const clearButton = await screen.findByLabelText(/clear/i);
-  fireEvent.click(clearButton);
-};

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

@@ -1,49 +0,0 @@
-import isNil from 'lodash.isnil';
-import PropTypes from 'prop-types';
-import { SelectInput } from '@commercetools-frontend/ui-kit';
-import { makeChangeHandler } from '../utils';
-
-const options = [
-  { value: 'true', label: 'YES' },
-  { value: 'false', label: 'NO' },
-];
-
-export default function CustomBooleanInput(props) {
-  const value = isNil(props.value) ? props.value : String(props.value);
-
-  const handleChange = makeChangeHandler((rawValue) =>
-    props.setFieldValue(
-      props.name,
-      isNil(rawValue) ? undefined : rawValue === 'true'
-    )
-  );
-
-  return (
-    <SelectInput
-      id={props.name}
-      name={props.name}
-      value={value}
-      options={options}
-      onChange={handleChange}
-      onBlur={props.onBlur}
-      isClearable={!props.fieldDefinition.required}
-      isDisabled={props.isDisabled}
-      isReadOnly={props.isReadOnly}
-      hasError={props.hasError}
-    />
-  );
-}
-
-CustomBooleanInput.displayName = 'CustomBooleanInput';
-CustomBooleanInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  fieldDefinition: PropTypes.shape({
-    required: PropTypes.bool,
-  }).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-boolean-input.spec.js

@@ -1,51 +0,0 @@
-import {
-  screen,
-  waitFor,
-} from '@commercetools-frontend/application-shell/test-utils';
-import { renderCustomFields, selectValue, clearValue } from '../test-utils';
-
-const fieldDefinitions = [
-  {
-    name: 'booleanAttr',
-    type: {
-      name: 'boolean',
-    },
-  },
-];
-
-describe('CustomBooleanInput', () => {
-  it('should show placeholder when value is empty', async () => {
-    renderCustomFields({ fieldDefinitions });
-    await screen.findByText('Select...');
-  });
-
-  it('should render `YES` for true value', async () => {
-    renderCustomFields({
-      fieldDefinitions,
-      initialValues: { booleanAttr: true },
-    });
-    await screen.findByText('YES');
-  });
-
-  it('should render `NO` for false value', async () => {
-    renderCustomFields({
-      fieldDefinitions,
-      initialValues: { booleanAttr: false },
-    });
-    await screen.findByText('NO');
-  });
-
-  it('should let user change values', async () => {
-    const { getFormikValues } = renderCustomFields({
-      fieldDefinitions,
-      initialValues: { booleanAttr: false },
-    });
-    await screen.findByText('NO');
-
-    selectValue('booleanAttr', 'YES');
-    expect(getFormikValues()).toStrictEqual({ booleanAttr: true });
-
-    await clearValue('booleanAttr');
-    await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
-  });
-});

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

@@ -1,53 +0,0 @@
-import PropTypes from 'prop-types';
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { DateInput, DateTimeInput } from '@commercetools-frontend/ui-kit';
-import { makeChangeHandler } from '../utils';
-
-export default function CustomDateTimeInput(props) {
-  const timeZone = useApplicationContext(
-    (applicationContext) => applicationContext.user.timeZone
-  );
-
-  const value = props.value || '';
-
-  const typeName = props.fieldDefinition.type.name.toLowerCase();
-
-  const handleChange = makeChangeHandler((rawValue) => {
-    props.setFieldValue(props.name, rawValue || undefined);
-  });
-
-  const InputComponent = do {
-    if (typeName === 'date') DateInput;
-    else DateTimeInput;
-  };
-
-  return (
-    <InputComponent
-      id={props.name}
-      name={props.name}
-      value={value}
-      onChange={handleChange}
-      onBlur={props.onBlur}
-      timeZone={timeZone}
-      hasError={props.hasError}
-      isDisabled={props.isDisabled}
-      isReadOnly={props.isReadOnly}
-    />
-  );
-}
-
-CustomDateTimeInput.displayName = 'CustomDateTimeInput';
-CustomDateTimeInput.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,
-};

package/src/custom-fields/custom-fields/types/custom-date-time-input.spec.js

@@ -1,116 +0,0 @@
-import {
-  screen,
-  fireEvent,
-  waitFor,
-} from '@commercetools-frontend/application-shell/test-utils';
-import {
-  renderCustomFields,
-  enterValue,
-  clickClearButton,
-} from '../test-utils';
-
-describe('CustomDateTimeInput', () => {
-  describe('when field is of type `date`', () => {
-    const fieldDefinitions = [
-      {
-        name: 'datetimeAttr',
-        type: {
-          name: 'date',
-        },
-      },
-    ];
-
-    it('should show empty input when value is empty', async () => {
-      renderCustomFields({ fieldDefinitions });
-      const input = await screen.findByLabelText('datetimeAttr');
-      expect(input.value).toBe('');
-    });
-
-    it('should render provided date value', async () => {
-      renderCustomFields({
-        fieldDefinitions,
-        initialValues: { datetimeAttr: '2021-12-21' },
-      });
-      await screen.findByDisplayValue('12/21/2021');
-    });
-
-    it('should let user change value', async () => {
-      const { getFormikValues } = renderCustomFields({
-        fieldDefinitions,
-        initialValues: { datetimeAttr: '2021-12-21' },
-      });
-      await screen.findByDisplayValue('12/21/2021');
-      enterValue('datetimeAttr', '10/22/2021 3pm');
-      const openCalendarButton = await screen.findByLabelText('open menu');
-      fireEvent.click(openCalendarButton);
-      const dayButton = await screen.findByText('22');
-      fireEvent.click(dayButton);
-      await waitFor(() =>
-        expect(getFormikValues()).toStrictEqual({ datetimeAttr: '2021-10-22' })
-      );
-    });
-
-    it('should drop empty value from formik values', async () => {
-      const { getFormikValues } = renderCustomFields({
-        fieldDefinitions,
-        initialValues: { datetimeAttr: '2021-12-21' },
-      });
-      await screen.findByDisplayValue('12/21/2021');
-      await clickClearButton();
-      await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
-    });
-  });
-
-  describe('when field is of type `datetime`', () => {
-    const fieldDefinitions = [
-      {
-        name: 'datetimeAttr',
-        type: {
-          name: 'datetime',
-        },
-      },
-    ];
-
-    it('should show empty input when value is empty', async () => {
-      renderCustomFields({ fieldDefinitions });
-      const input = await screen.findByLabelText('datetimeAttr');
-      expect(input.value).toBe('');
-    });
-
-    it('should render provided datetime value', async () => {
-      renderCustomFields({
-        fieldDefinitions,
-        initialValues: { datetimeAttr: '2021-12-21 10:00' },
-      });
-      await screen.findByDisplayValue('12/21/2021 10:00 AM');
-    });
-
-    it('should let user change value', async () => {
-      const { getFormikValues } = renderCustomFields({
-        fieldDefinitions,
-        initialValues: { datetimeAttr: '2021-12-21 10:00' },
-      });
-      await screen.findByDisplayValue('12/21/2021 10:00 AM');
-
-      enterValue('datetimeAttr', '12/23/2021 3:00 PM');
-      await screen.findByDisplayValue('12/23/2021 3:00 PM');
-
-      await waitFor(() =>
-        expect(getFormikValues()).toStrictEqual({
-          datetimeAttr: '2021-12-23T15:00:00.000Z',
-        })
-      );
-    });
-
-    it('should drop empty value from formik values', async () => {
-      const { getFormikValues } = renderCustomFields({
-        fieldDefinitions,
-        initialValues: { datetimeAttr: '2021-12-21 10:00' },
-      });
-      await screen.findByDisplayValue('12/21/2021 10:00 AM');
-
-      await clickClearButton();
-      await waitFor(() => expect(getFormikValues()).toStrictEqual({}));
-    });
-  });
-});

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

@@ -1,61 +0,0 @@
-import { SelectInput } from '@commercetools-frontend/ui-kit';
-import PropTypes from 'prop-types';
-import { defaultMemoize } from 'reselect';
-import CustomFieldTooltip from '../custom-field-tooltip';
-import { makeChangeHandler } from '../utils';
-
-const convertTypeValuesToOptions = defaultMemoize((typeValues) =>
-  typeValues.map((typeValue) => ({
-    label: typeValue.label || `${typeValue.key} (key)`,
-    value: typeValue.key,
-  }))
-);
-export default function CustomEnumInput(props) {
-  const options = convertTypeValuesToOptions(props.fieldDefinition.type.values);
-
-  const handleChange = makeChangeHandler((rawValue) =>
-    props.setFieldValue(props.name, rawValue)
-  );
-
-  const tooltipTitle = props.value
-    ? options.find((option) => option.value === props.value)?.label ?? ''
-    : '';
-
-  return (
-    <CustomFieldTooltip title={tooltipTitle}>
-      <SelectInput
-        isClearable={!props.fieldDefinition.required}
-        id={props.name}
-        name={props.name}
-        value={props.value}
-        onChange={handleChange}
-        onBlur={props.onBlur}
-        options={options}
-        hasError={props.hasError}
-        isDisabled={props.isDisabled}
-        isReadOnly={props.isReadOnly}
-      />
-    </CustomFieldTooltip>
-  );
-}
-CustomEnumInput.displayName = 'CustomEnumInput';
-CustomEnumInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  fieldDefinition: PropTypes.shape({
-    type: PropTypes.shape({
-      values: PropTypes.arrayOf(
-        PropTypes.shape({
-          label: PropTypes.string.isRequired,
-          key: PropTypes.string.isRequired,
-        }).isRequired
-      ),
-    }).isRequired,
-    required: PropTypes.bool,
-  }).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-enum-input.spec.js

@@ -1,113 +0,0 @@
-import '@commercetools-local/test-utils/src/ui-kit-mocks';
-import {
-  screen,
-  waitFor,
-  fireEvent,
-} from '@commercetools-frontend/application-shell/test-utils';
-import { renderCustomFields, selectValue, clearValue } from '../test-utils';
-
-describe('CustomEnumInput', () => {
-  const fieldDefinitions = [
-    {
-      name: 'enumAttr',
-      type: {
-        name: 'enum',
-        values: [
-          { label: 'label-1', key: 'key-1' },
-          { label: 'label-2', key: 'key-2' },
-          { label: '', key: 'key-3' },
-          {
-            label: 'this is a test label which is forty plus chars',
-            key: 'key-4',
-          },
-        ],
-      },
-    },
-  ];
-
-  it('should show empty input when value is empty', async () => {
-    renderCustomFields({ fieldDefinitions });
-    await screen.findByText('Select...');
-  });
-
-  it('should render provided enum value', async () => {
-    renderCustomFields({
-      fieldDefinitions,
-      initialValues: { enumAttr: 'key-1' },
-    });
-    await screen.findByText('label-1');
-    expect(screen.getAllByText('label-1')).toHaveLength(1);
-  });
-
-  it('should fallback to key if enum label is missing', async () => {
-    renderCustomFields({
-      fieldDefinitions,
-      initialValues: { enumAttr: 'key-3' },
-    });
-    await screen.findByText('key-3 (key)');
-  });
-
-  it('should not let user clear required field', async () => {
-    const requiredFieldDefinitions = [
-      {
-        name: 'enumAttr',
-        required: true,
-        type: {
-          name: 'enum',
-          values: [
-            { label: 'label-1', key: 'key-1' },
-            { label: 'label-2', key: 'key-2' },
-          ],
-        },
-      },
-    ];
-
-    renderCustomFields({
-      fieldDefinitions: requiredFieldDefinitions,
-      initialValues: { enumAttr: 'key-1' },
-    });
-    await screen.findByText('label-1');
-    expect(screen.queryByLabelText('Clear')).not.toBeInTheDocument();
-  });
-
-  it('should let user change value', async () => {
-    const { getFormikValues } = renderCustomFields({
-      fieldDefinitions,
-      initialValues: { enumAttr: 'key-1' },
-    });
-    await screen.findByText('label-1');
-    selectValue('enumAttr', 'label-2');
-    await screen.findByText('label-2');
-
-    expect(getFormikValues()).toStrictEqual({ enumAttr: 'key-2' });
-  });
-
-  it('should drop empty value from formik values', async () => {
-    const { getFormikValues } = renderCustomFields({
-      fieldDefinitions,
-      initialValues: { enumAttr: 'key-1' },
-    });
-
-    await clearValue('enumAttr');
-
-    // TODO(pa3): that's not how clearing this input is suppossed to work by design.
-    // Empty value should be removed from formik values to ease prevent keeping
-    // form `dirty` when user add change initially empty value, but then clear it.
-    // But that (broken) behaviour is here for quite some time and maybe some
-    // parts of application are reling on it already. Find out and fix.
-    await waitFor(() =>
-      expect(getFormikValues()).toStrictEqual({ enumAttr: null })
-    );
-  });
-
-  it('should show the tooltip on hover when the value is greater than 40 characters', async () => {
-    renderCustomFields({
-      fieldDefinitions,
-      initialValues: { enumAttr: 'key-4' },
-    });
-    fireEvent.mouseOver(screen.getByLabelText('enumAttr'));
-    expect(
-      screen.getAllByText(fieldDefinitions[0].type.values[3].label)
-    ).toHaveLength(2);
-  });
-});

package/src/custom-fields/custom-fields/types/custom-localized-enum-input.jsx

@@ -1,70 +0,0 @@
-import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { SelectInput } from '@commercetools-frontend/ui-kit';
-import PropTypes from 'prop-types';
-import { defaultMemoize } from 'reselect';
-import CustomFieldTooltip from '../custom-field-tooltip';
-import { makeChangeHandler } from '../utils';
-
-const convertTypeValuesToOptions = defaultMemoize((type, language) =>
-  type.values.map((value) => ({
-    label: value.label?.[language] || `${value.key} (key)`,
-    value: value.key,
-  }))
-);
-
-export default function CustomLocalizedEnumInput(props) {
-  const language = useApplicationContext(
-    (applicationContext) => applicationContext.dataLocale
-  );
-
-  const options = convertTypeValuesToOptions(
-    props.fieldDefinition.type,
-    language
-  );
-
-  const handleChange = makeChangeHandler((rawValue) =>
-    props.setFieldValue(props.name, rawValue)
-  );
-
-  const tooltipTitle = props.value
-    ? options.find((option) => option.value === props.value)?.label ?? ''
-    : '';
-
-  return (
-    <CustomFieldTooltip title={tooltipTitle}>
-      <SelectInput
-        id={props.name}
-        name={props.name}
-        value={props.value}
-        onChange={handleChange}
-        onBlur={props.onBlur}
-        options={options}
-        isClearable={!props.fieldDefinition.required}
-        hasError={props.hasError}
-        isDisabled={props.isDisabled}
-        isReadOnly={props.isReadOnly}
-      />
-    </CustomFieldTooltip>
-  );
-}
-CustomLocalizedEnumInput.displayName = 'CustomLocalizedEnumInput';
-CustomLocalizedEnumInput.propTypes = {
-  name: PropTypes.string.isRequired,
-  fieldDefinition: PropTypes.shape({
-    type: PropTypes.shape({
-      values: PropTypes.arrayOf(
-        PropTypes.shape({
-          label: PropTypes.object,
-          key: PropTypes.string.isRequired,
-        }).isRequired
-      ),
-    }).isRequired,
-    required: PropTypes.bool,
-  }).isRequired,
-  value: PropTypes.any,
-  setFieldValue: PropTypes.func.isRequired,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  onBlur: PropTypes.func.isRequired,
-  hasError: PropTypes.bool,
-};