@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

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

@@ -1,91 +0,0 @@
-import {
-  screen,
-  fireEvent,
-  waitFor,
-} from '@commercetools-frontend/application-shell/test-utils';
-import { renderCustomFields, enterValue } from '../test-utils';
-
-describe('CustomTimeInput', () => {
-  const fieldDefinitions = [
-    {
-      name: 'datetimeAttr',
-      type: {
-        name: 'time',
-      },
-    },
-  ];
-
-  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 time value', async () => {
-    renderCustomFields({
-      fieldDefinitions,
-      initialValues: { datetimeAttr: '14:00' },
-    });
-    await screen.findByDisplayValue('2:00 PM');
-  });
-
-  it('should let user change value', async () => {
-    const { getFormikValues } = renderCustomFields({
-      fieldDefinitions,
-      initialValues: { datetimeAttr: '14:00' },
-    });
-    const input = await screen.findByDisplayValue('2:00 PM');
-
-    enterValue('datetimeAttr', '15:00');
-    fireEvent.blur(input);
-    await screen.findByDisplayValue('3:00 PM');
-    await waitFor(() => {
-      expect(getFormikValues()).toStrictEqual({ datetimeAttr: '15:00' });
-    });
-  });
-
-  it('should drop empty value from formik values', async () => {
-    const { getFormikValues } = renderCustomFields({
-      fieldDefinitions,
-      initialValues: { datetimeAttr: '14:00' },
-    });
-    // TODO(pa3): add a proper label to a close button in UIKIT
-    // and use clickClearButton here
-    const clearButton = screen.getByRole('button', {
-      ariaLabel: 'clear',
-    });
-    fireEvent.click(clearButton);
-
-    await waitFor(() => {
-      expect(getFormikValues()).toStrictEqual({});
-    });
-  });
-
-  it('should reset entered value if Formik resets', async () => {
-    const { resetForm } = renderCustomFields({
-      fieldDefinitions,
-      initialValues: { datetimeAttr: '14:00' },
-    });
-    const input = await screen.findByDisplayValue('2:00 PM');
-    enterValue('datetimeAttr', '15:00');
-    fireEvent.blur(input);
-
-    resetForm();
-
-    await screen.findByDisplayValue('2:00 PM');
-  });
-
-  it('should not update Formik with malformed values', async () => {
-    const { getFormikValues } = renderCustomFields({
-      fieldDefinitions,
-      initialValues: { datetimeAttr: '14:00' },
-    });
-    await screen.findByDisplayValue('2:00 PM');
-
-    enterValue('datetimeAttr', 'wat?!');
-
-    await waitFor(() => {
-      expect(getFormikValues()).toStrictEqual({ datetimeAttr: '14:00' });
-    });
-  });
-});

package/src/custom-fields/custom-fields/utils/index.js

@@ -1 +0,0 @@
-export * from './utils';

package/src/custom-fields/custom-fields/utils/utils.js

@@ -1,22 +0,0 @@
-import isNil from 'lodash.isnil';
-import omitBy from 'lodash.omitby';
-
-export const getType = (fieldDefinition) => {
-  const fieldDefinitionType =
-    fieldDefinition.type.name.toLowerCase() === 'set'
-      ? fieldDefinition.type.elementType
-      : fieldDefinition.type;
-  return fieldDefinitionType;
-};
-
-export const makeChangeHandler = (setValue) => (event) => {
-  const { name, value } = event.target;
-  setValue(value, name);
-};
-
-// In case attribute were removed from a product it still will be
-// present in attribute values. This, in turn, will lead to errors
-// when updating a product. So, we want to omit this kind of left-over
-// attributes.
-export const omitUnknownValues = (valuesAsMap, fieldDefinitionsAsMap) =>
-  omitBy(valuesAsMap, (value, key) => isNil(fieldDefinitionsAsMap[key]));

package/src/custom-fields/custom-fields/validations/index.js

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

package/src/custom-fields/custom-fields/validations/validations.js

@@ -1,117 +0,0 @@
-import isNil from 'lodash.isnil';
-import has from 'lodash.has';
-import {
-  withoutEmptyErrorsByField,
-  unique as extractDuplicatedValue,
-} from '../../../internal-index';
-import { TextInput } from '@commercetools-frontend/ui-kit';
-import { getType } from '../utils';
-import { REFERENCED_TYPES } from '../constants';
-
-const extractDuplicatedValues = (values, type, language, languages) => {
-  let validatedValues = [];
-  if (type.name.toLowerCase() === 'money') {
-    validatedValues = extractDuplicatedValue(values, [
-      'amount',
-      'currencyCode',
-    ]);
-  } else if (type.name.toLowerCase() === 'reference')
-    validatedValues = extractDuplicatedValue(
-      values.filter((value) => value?.id),
-      ['id']
-    );
-  else if (type.name.toLowerCase() === 'localizedstring') {
-    validatedValues = extractDuplicatedValue(values, languages);
-  } else validatedValues = extractDuplicatedValue(values);
-
-  return validatedValues;
-};
-
-const setDuplicatedIfSet = (
-  formValues,
-  fieldDefinition,
-  language,
-  languages
-) => {
-  const fieldValue = formValues.custom.fields[fieldDefinition.name];
-  if (
-    fieldDefinition.type.name.toLowerCase() === 'set' &&
-    Array.isArray(fieldValue)
-  ) {
-    const duplicatedValues = extractDuplicatedValues(
-      fieldValue,
-      getType(fieldDefinition),
-      language,
-      languages
-    );
-    return {
-      duplicated: {
-        // although this is mixing concerns, we pass down `duplicatedValues` to the form.
-        // we do this to avoid extracting duplicate values also on render phase of the CustomField component,
-        values: duplicatedValues,
-      },
-    };
-  }
-  return {};
-};
-
-/**
- * Return true if the value is an object whose every value
- *   is equivalent to an empty string. Return false otherwise.
- * @param {*} value - Value to test against.
- * @returns {boolean}
- */
-// TODO(pa3): investigate if empty object can be a value returned from CustomFields at all
-const objectWithEmptyValues = (value) => {
-  // typeof null is an object
-  // make sure value is something that we can call Object.keys on.
-  if (typeof value !== 'object' || value === null) return false;
-  // Calling `every` method on an empty array will return true for any condition!
-  // Works fine in our case, for an empty object.
-  return Object.keys(value).every(
-    (key) => typeof value[key] === 'string' && TextInput.isEmpty(value[key])
-  );
-};
-
-const hasMissingValues = (value) => {
-  if (isNil(value)) return true;
-  if (typeof value === 'string' && value.trim() === '') return true;
-  if (has(REFERENCED_TYPES, value.typeId) && !value.id) return true;
-  if (value.currencyCode && value.amount === '') return true;
-  if (objectWithEmptyValues(value)) return true;
-  return false;
-};
-
-const setMissingIfRequired = (formValues, fieldDefinition) => {
-  if (fieldDefinition.required) {
-    const fieldValue = formValues.custom.fields[fieldDefinition.name];
-    if (Array.isArray(fieldValue)) {
-      return fieldValue.every(hasMissingValues) && { missing: true };
-    }
-    return hasMissingValues(fieldValue) && { missing: true };
-  }
-  return {};
-};
-
-export default function (formValues, language, languages) {
-  // Collect all required and set type fields
-  const fieldDefinitionsToValidate =
-    formValues.custom.type.fieldDefinitions.filter(
-      (fieldDefinition) =>
-        fieldDefinition.required ||
-        fieldDefinition.type.name.toLowerCase() === 'set'
-    );
-
-  const errors = fieldDefinitionsToValidate.reduce(
-    (acc, fieldDefinition) => ({
-      ...acc,
-      [fieldDefinition.name]: {
-        ...setMissingIfRequired(formValues, fieldDefinition),
-        ...setDuplicatedIfSet(formValues, fieldDefinition, language, languages),
-      },
-    }),
-    {}
-  );
-
-  return withoutEmptyErrorsByField(errors);
-}

package/src/custom-fields/custom-fields/validations/validations.spec.js

@@ -1,134 +0,0 @@
-import validations from './validations';
-
-const createFormValues = (values) => ({
-  custom: {
-    fields: {
-      'single-required-text-field': 'test',
-      'set-DateTime-text': [
-        '2019-11-29T00:00:00.000Z',
-        '2019-11-05T00:00:00.000Z',
-      ],
-      'set-of-text-fields': ['text - 3', 'text - 2', 'text - 1'],
-      'number-field': 12,
-      'money-field': {
-        centAmount: 169900,
-        currencyCode: 'AUD',
-        fractionDigits: 2,
-        type: 'centPrecision',
-      },
-      ...values,
-    },
-    type: {
-      id: '9a566288-43ae-4ad6-b61e-bb5bf2f8516e',
-      key: 'third-super-custom-type',
-      name: {
-        en: 'Super custom type',
-      },
-      fieldDefinitions: [
-        {
-          name: 'number-field',
-          required: true,
-          type: {
-            name: 'Number',
-          },
-        },
-        {
-          name: 'money-field',
-          required: true,
-          type: {
-            name: 'Money',
-          },
-        },
-        {
-          name: 'single-required-text-field',
-          required: true,
-          inputHint: 'SingleLine',
-          type: {
-            name: 'String',
-          },
-          label: {
-            fr: 'String SingleLine',
-            it: 'String SingleLine',
-            en: 'String SingleLine',
-            de: 'String SingleLine',
-            es: 'String SingleLine',
-          },
-        },
-        {
-          name: 'set-of-text-fields',
-          required: false,
-          inputHint: 'SingleLine',
-          type: {
-            name: 'Set',
-            elementType: {
-              name: 'single-required-text-field',
-              required: false,
-              inputHint: 'SingleLine',
-              type: {
-                name: 'String',
-              },
-              label: {
-                fr: 'String SingleLine',
-                it: 'String SingleLine',
-                en: 'String SingleLine',
-                de: 'String SingleLine',
-                es: 'String SingleLine',
-              },
-            },
-          },
-          label: {
-            fr: 'Set String',
-            it: 'Set String',
-            en: 'Set String',
-            de: 'Set String',
-            es: 'Set String',
-          },
-        },
-      ],
-    },
-  },
-});
-
-describe('Validations', () => {
-  describe('when all values are provided', () => {
-    it('should return empty errors', () => {
-      const values = createFormValues();
-      expect(validations(values, 'en', ['en', 'de'])).toEqual({});
-    });
-  });
-
-  describe('when required field is missing', () => {
-    it('should return missing value error', () => {
-      const values = createFormValues({
-        'single-required-text-field': undefined,
-      });
-      expect(validations(values, 'en', ['en', 'de'])).toEqual({
-        'single-required-text-field': {
-          missing: true,
-        },
-      });
-    });
-  });
-
-  describe('when duplicated values are provided', () => {
-    it('should return the duplicated value', () => {
-      const values = createFormValues({
-        'set-of-text-fields': [
-          'val-1',
-          'val-2',
-          'val-3',
-          'val-2',
-          'val-5',
-          'val-3',
-        ],
-      });
-      expect(validations(values, 'en', ['en', 'de'])).toEqual({
-        'set-of-text-fields': {
-          duplicated: {
-            values: ['val-2', 'val-3'],
-          },
-        },
-      });
-    });
-  });
-});

package/src/custom-fields/custom-fields-error-text-notification/custom-fields-error-text-notification.jsx

@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types';
-import { Spacings, Text } from '@commercetools-frontend/ui-kit';
-import messages from './messages';
-
-const CustomFieldsErrorTextNotification = (props) => (
-  <Spacings.Stack scale="s">
-    <Text.Wrap intlMessage={{ ...messages.customFieldsError }} />
-    <Spacings.Stack scale="xs">
-      {props.formErrors.map((formError) => (
-        <Text.Detail key={formError.field} isBold>
-          {formError.field}
-        </Text.Detail>
-      ))}
-    </Spacings.Stack>
-  </Spacings.Stack>
-);
-
-CustomFieldsErrorTextNotification.displayName =
-  'CustomFieldsErrorTextNotification';
-
-CustomFieldsErrorTextNotification.propTypes = {
-  formErrors: PropTypes.arrayOf(
-    PropTypes.shape({
-      field: PropTypes.string.isRequired,
-    })
-  ).isRequired,
-};
-
-export default CustomFieldsErrorTextNotification;

package/src/custom-fields/custom-fields-error-text-notification/custom-fields-error-text-notification.spec.js

@@ -1,31 +0,0 @@
-import { renderApp } from '@commercetools-frontend/application-shell/test-utils';
-import CustomFieldsErrorTextNotification from './custom-fields-error-text-notification';
-
-const createTestProps = (customProps) => ({
-  formErrors: [
-    {
-      field: 'String-1',
-    },
-    {
-      field: 'String-2',
-    },
-  ],
-  ...customProps,
-});
-
-describe('rendering', () => {
-  it('should render error message with the fields', async () => {
-    const props = createTestProps();
-    const rendered = renderApp(
-      <CustomFieldsErrorTextNotification {...props} />
-    );
-
-    expect(
-      rendered.getByText(
-        /Some of the custom fields that you have defined are required or not valid. Please check the following fields:/
-      )
-    ).toBeInTheDocument();
-    expect(rendered.getByText('String-1')).toBeInTheDocument();
-    expect(rendered.getByText('String-2')).toBeInTheDocument();
-  });
-});

package/src/custom-fields/custom-fields-error-text-notification/index.js

@@ -1 +0,0 @@
-export { default } from './custom-fields-error-text-notification';

package/src/custom-fields/custom-fields-error-text-notification/messages.js

@@ -1,10 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  customFieldsError: {
-    id: 'CustomFieldsError.Error',
-    description: 'The message when there are errors adding custom fields',
-    defaultMessage:
-      'Some of the custom fields that you have defined are required or not valid.\nPlease check the following fields:',
-  },
-});

package/src/custom-fields/messages/custom-fields.js

@@ -1,17 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-// eslint-disable-next-line import/prefer-default-export
-export const customFieldsMessages = defineMessages({
-  aboveFifthLevelWarning: {
-    id: 'attributeInputByType.nestedAttributes.aboveFifthLevelWarning',
-    description:
-      'Warning message shown when nested attribute are above the fifth level',
-    defaultMessage:
-      'The Merchant Center currently supports the edition of nested attributes up to five levels only.',
-  },
-  emptySetItem: {
-    id: 'NestedAttributes.tooltip.emptySetItem',
-    description: 'Empty set item',
-    defaultMessage: 'Empty',
-  },
-});

package/src/features/picker/index.js

@@ -1,11 +0,0 @@
-export { Option, getBottomOption } from './shared/components';
-
-export { default as useHandlers } from './shared/hooks/use-handlers';
-
-/* options loading */
-// it's enough to use this default hook to load picker options
-export { default as useLoadOptions } from './shared/hooks/use-load-options';
-// but if you need customization, consider creating your own hook
-export { default as useProductTypeOptions } from './shared/hooks/use-product-type-options';
-
-export { default as useCurrentOption } from './shared/hooks/use-current-option';

package/src/features/picker/shared/components/index.js

@@ -1 +0,0 @@
-export { Option, getBottomOption } from './option';

package/src/features/picker/shared/components/messages.js

@@ -1,9 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  bottomOption: {
-    id: 'Products.Pickers.bottomOption',
-    description: 'The message to display at the end of the options menu',
-    defaultMessage: 'Start typing above to load more',
-  },
-});

package/src/features/picker/shared/components/option.jsx

@@ -1,51 +0,0 @@
-import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
-import {
-  AsyncSelectInput,
-  Spacings,
-  Text,
-} from '@commercetools-frontend/ui-kit';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import messages from './messages';
-
-const getBottomOption = () => ({
-  options: [
-    {
-      label: messages.bottomOption,
-      isBottomOption: true,
-      isDisabled: true,
-    },
-  ],
-});
-
-const Option = (props) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <AsyncSelectInput.Option {...props}>
-      {props.data.isBottomOption ? (
-        <Text.Detail tone="secondary">
-          {formatMessage(props.data.label)}
-        </Text.Detail>
-      ) : (
-        <Spacings.Stack scale="xs">
-          <Text.Detail isBold>
-            {props.data.name || NO_VALUE_FALLBACK}
-          </Text.Detail>
-          <Text.Detail>Key: {props.data.key || NO_VALUE_FALLBACK}</Text.Detail>
-        </Spacings.Stack>
-      )}
-    </AsyncSelectInput.Option>
-  );
-};
-Option.displayName = 'Option';
-Option.propTypes = {
-  data: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-    name: PropTypes.string,
-    key: PropTypes.string,
-    isBottomOption: PropTypes.bool,
-  }).isRequired,
-};
-
-export { Option, getBottomOption };

package/src/features/picker/shared/hooks/use-current-option.js

@@ -1,24 +0,0 @@
-import { useQuery } from '@apollo/client/react/hooks';
-import { GRAPHQL_TARGETS } from '@commercetools-frontend/constants';
-
-export default function useCurrentOption({
-  id,
-  query,
-  convertQueryResultToOption,
-}) {
-  const item = useQuery(query, {
-    context: {
-      target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM,
-    },
-    variables: {
-      id,
-    },
-    skip: !id,
-  });
-
-  return {
-    loading: item.loading,
-    data: item.data && convertQueryResultToOption(item.data),
-    error: item.error,
-  };
-}