@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

package/src/utils/should-update-attribute-input/should-update-attribute-input.js

@@ -1,43 +0,0 @@
-import { deepEqual } from 'fast-equals';
-
-export default function shouldUpdateAttributeInput({
-  currentProps,
-  currentState,
-  nextProps,
-  nextState,
-}) {
-  const hasHandleChangeNestedAttributeChanged =
-    currentProps.handleChangeNestedAttribute !==
-    nextProps.handleChangeNestedAttribute;
-  const hasLangChanged =
-    currentProps.selectedLanguage !== nextProps.selectedLanguage;
-  const hasNameChanged =
-    currentProps.attribute.name !== nextProps.attribute.name;
-  const hasValueChanged = !deepEqual(
-    currentProps.attribute.value,
-    nextProps.attribute.value
-  );
-  const hasStateChanged = !deepEqual(currentState, nextState);
-  const hasTypeChanged = !deepEqual(
-    currentProps.definition.type,
-    nextProps.definition.type
-  );
-
-  const havePropsOrStateChanged =
-    hasHandleChangeNestedAttributeChanged ||
-    hasLangChanged ||
-    hasNameChanged ||
-    hasValueChanged ||
-    hasStateChanged ||
-    hasTypeChanged;
-
-  if (currentProps.expandSettings) {
-    const haveSettingsChanged = !deepEqual(
-      currentProps.expandSettings,
-      nextProps.expandSettings
-    );
-    return havePropsOrStateChanged || haveSettingsChanged;
-  }
-
-  return havePropsOrStateChanged;
-}

package/src/utils/should-update-attribute-input/should-update-attribute-input.spec.js

@@ -1,96 +0,0 @@
-import shouldUpdateAttributeInput from './should-update-attribute-input';
-
-const handleChangeNestedAttribute = jest.fn();
-
-const createTestProps = (custom) => ({
-  selectedLanguage: 'en',
-  definition: {
-    type: {
-      name: 'text',
-    },
-  },
-  attribute: {
-    name: 'something',
-    value: 'some value here',
-  },
-  handleChangeNestedAttribute,
-  ...custom,
-});
-const createTestState = (custom) => ({
-  isOk: true,
-  objects: [{ id: 'something1' }, { id: 'something2' }],
-  ...custom,
-});
-const createFunctionArgs = (custom) => ({
-  currentProps: createTestProps(),
-  currentState: createTestState(),
-  nextProps: createTestProps(),
-  nextState: createTestState(),
-  ...custom,
-});
-
-describe('shouldUpdateAttributeInput function', () => {
-  it('should return false if nothing changes', () => {
-    expect(shouldUpdateAttributeInput(createFunctionArgs())).toBe(false);
-  });
-
-  it('should return true when state has changed', () => {
-    const args = createFunctionArgs({
-      nextState: createTestState({ somethingNew: true }),
-    });
-    expect(shouldUpdateAttributeInput(args)).toBe(true);
-  });
-
-  it('should return true when language changes', () => {
-    const args = createFunctionArgs({
-      nextProps: createTestProps({ selectedLanguage: 'de' }),
-    });
-    expect(shouldUpdateAttributeInput(args)).toBe(true);
-  });
-
-  it('should return true when attribute value changes', () => {
-    const args = createFunctionArgs({
-      nextProps: createTestProps({
-        attribute: {
-          name: 'something',
-          value: 'a new value',
-        },
-      }),
-    });
-    expect(shouldUpdateAttributeInput(args)).toBe(true);
-  });
-
-  it('should return true when attribute name changes', () => {
-    const args = createFunctionArgs({
-      nextProps: createTestProps({
-        attribute: {
-          name: 'something different',
-          value: 'some value here',
-        },
-      }),
-    });
-    expect(shouldUpdateAttributeInput(args)).toBe(true);
-  });
-
-  it('should return true when attribute type changes', () => {
-    const args = createFunctionArgs({
-      nextProps: createTestProps({
-        definition: {
-          type: {
-            name: 'set',
-          },
-        },
-      }),
-    });
-    expect(shouldUpdateAttributeInput(args)).toBe(true);
-  });
-
-  it('should return true when `handleChangeNestedAttribute` prop changes', () => {
-    const args = createFunctionArgs({
-      nextProps: createTestProps({
-        handleChangeNestedAttribute: jest.fn(),
-      }),
-    });
-    expect(shouldUpdateAttributeInput(args)).toBe(true);
-  });
-});

package/src/utils/slugify/index.js

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

package/src/utils/slugify/slugify.js

@@ -1,10 +0,0 @@
-export default function slugify(text) {
-  return text
-    .toString()
-    .toLowerCase()
-    .replace(/\s+/g, '-') // Replace spaces with -
-    .replace(/[^\w-]+/g, '') // Remove all non-word chars
-    .replace(/--+/g, '-') // Replace multiple - with single -
-    .replace(/^-+/, '') // Trim - from start of text
-    .replace(/-+$/, ''); // Trim - from end of text
-}

package/src/utils/slugify/slugify.spec.js

@@ -1,11 +0,0 @@
-import slugify from './slugify';
-
-describe('utility functions', () => {
-  const unsluggedString = "--Wowee isn't this-----a coolo 234!! thing?-";
-  const sluggedString = slugify(unsluggedString);
-  const expectedSlug = 'wowee-isnt-this-a-coolo-234-thing';
-
-  it('string should be slugged', () => {
-    expect(sluggedString).toEqual(expectedSlug);
-  });
-});

package/src/utils/swap-array-items/index.js

@@ -1,2 +0,0 @@
-export { default } from './swap-array-items';
-export { reorderArrayItems } from './swap-array-items';

package/src/utils/swap-array-items/swap-array-items.js

@@ -1,13 +0,0 @@
-export default function swapArrayItems(array, from, to) {
-  const result = [...array];
-  result[to] = array[from];
-  result[from] = array[to];
-  return result;
-}
-
-export const reorderArrayItems = (array, from, to) => {
-  const result = [...array];
-  const item = result.splice(from, 1)[0];
-  result.splice(to, 0, item);
-  return result;
-};

package/src/utils/swap-array-items/swap-array-items.spec.js

@@ -1,52 +0,0 @@
-import swapArrayItems, { reorderArrayItems } from './swap-array-items';
-
-const input = [1, 2, 3, 4];
-
-describe('swapArrayItems', () => {
-  it('swaps items', () => {
-    const output = swapArrayItems(input, 0, 3);
-    expect(output).toEqual([4, 2, 3, 1]);
-  });
-
-  it('keeps original array intact', () => {
-    swapArrayItems(input, 0, 3);
-    expect(input).toEqual([1, 2, 3, 4]);
-  });
-
-  it('should swap lower index to higher', () => {
-    const output = swapArrayItems([1, 2, 3, 4], 2, 3);
-    expect(output).toEqual([1, 2, 4, 3]);
-  });
-
-  it('should swap items from out of bounds, ', () => {
-    const output = swapArrayItems([1, 2, 3, 4], 4, 1);
-    expect(output).toEqual([1, undefined, 3, 4, 2]);
-  });
-
-  it('should swap higher index item to lower', () => {
-    const output = swapArrayItems([1, 2, 3, 4], 3, 1);
-    expect(output).toEqual([1, 4, 3, 2]);
-  });
-});
-
-describe('reorderArrayItems', () => {
-  it('keeps original array intact', () => {
-    reorderArrayItems(input, 0, 3);
-    expect(input).toEqual([1, 2, 3, 4]);
-  });
-
-  it('should reorder lower index to higher', () => {
-    const output = reorderArrayItems([1, 2, 3, 4], 2, 3);
-    expect(output).toEqual([1, 2, 4, 3]);
-  });
-
-  it('should reorder items from out of bounds, ', () => {
-    const output = reorderArrayItems([1, 2, 3, 4], 4, 1);
-    expect(output).toEqual([1, undefined, 2, 3, 4]);
-  });
-
-  it('should reorder higher index item to lower', () => {
-    const output = reorderArrayItems([1, 2, 3, 4], 3, 1);
-    expect(output).toEqual([1, 4, 2, 3]);
-  });
-});

package/src/utils/text-fallback/text-fallback.js

@@ -1,6 +0,0 @@
-import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
-
-export const safelyAddFallback = (string, fallback = NO_VALUE_FALLBACK) => do {
-  if (string === '') fallback;
-  else string ?? fallback;
-};

package/src/utils/time-zones/index.js

@@ -1,5 +0,0 @@
-export {
-  getTimeZoneId,
-  getTimeZoneLabel,
-  mapTimeZonesToOptions,
-} from './time-zone-utils';

package/src/utils/time-zones/time-zone-utils.js

@@ -1,34 +0,0 @@
-import memoize from 'memoize-one';
-
-export const mapTimeZonesToOptions = memoize((timeZones) =>
-  Object.entries(timeZones).map(([code, value]) => ({
-    value: code,
-    //E.g. `(GMT +02:00) Central European Time - Berlin`
-    // unicode clock hex code: \u25F7
-    //
-    label: `(GMT ${value.offset}) ${value.name}`,
-  }))
-);
-
-export const getTimeZoneId = memoize((selectedTimeZone, timeZones) => {
-  if (timeZones[selectedTimeZone]) {
-    return selectedTimeZone;
-  } else {
-    const fallbackTimeZoneId = Object.keys(timeZones).find((timeZoneId) =>
-      timeZones[timeZoneId]?.translationFor?.some(
-        (fallbackTimeZone) => fallbackTimeZone === selectedTimeZone
-      )
-    );
-    if (fallbackTimeZoneId?.length) {
-      return fallbackTimeZoneId.toString();
-    } else {
-      return 'UTC';
-    }
-  }
-});
-
-export const getTimeZoneLabel = memoize((selectedTimeZone, timeZones) => {
-  const timeZoneId = getTimeZoneId(selectedTimeZone, timeZones);
-  const timeZoneData = timeZones[timeZoneId];
-  return `(GMT ${timeZoneData.offset}) ${timeZoneData.name}`;
-});

package/src/utils/time-zones/time-zone-utils.spec.js

@@ -1,47 +0,0 @@
-import {
-  getTimeZoneId,
-  getTimeZoneLabel,
-  mapTimeZonesToOptions,
-} from './time-zone-utils';
-import { MOCK_TIME_ZONES, MOCK_TIME_ZONE_OPTIONS } from '../../constants';
-
-const translatedTimeZone = 'America/New_York';
-const untranslatedTimeZone = 'EST';
-const fakeTimeZone = 'space/moon';
-
-describe('mapTimeZoneToOptions', () => {
-  it('returns an array of time zone objects with the correct formatting', () => {
-    const result = mapTimeZonesToOptions(MOCK_TIME_ZONES);
-    expect(result).toEqual(MOCK_TIME_ZONE_OPTIONS);
-  });
-});
-
-describe('getTimeZoneId', () => {
-  it('returns the selected time zone id if the selected time zone has a translation object', () => {
-    const result = getTimeZoneId(translatedTimeZone, MOCK_TIME_ZONES);
-    expect(result).toEqual(translatedTimeZone);
-  });
-  it('returns the time zone id for the fallback translated time zone if the selected time zone is not translated', () => {
-    const result = getTimeZoneId(untranslatedTimeZone, MOCK_TIME_ZONES);
-    expect(result).toEqual(translatedTimeZone);
-  });
-  it('returns UTC as a fallback if the selected time zone is not translated and is not mapped to a fallback translation', () => {
-    const result = getTimeZoneId(fakeTimeZone, MOCK_TIME_ZONES);
-    expect(result).toEqual('UTC');
-  });
-});
-
-describe('getTimeZoneLabel', () => {
-  it('returns a correctly formatted label string for a translated time zone', () => {
-    const result = getTimeZoneLabel(translatedTimeZone, MOCK_TIME_ZONES);
-    expect(result).toEqual(MOCK_TIME_ZONE_OPTIONS[0].label);
-  });
-  it('returns a correctly formatted label string for the time zone that is mapped to an untranslated time zone', () => {
-    const result = getTimeZoneLabel(untranslatedTimeZone, MOCK_TIME_ZONES);
-    expect(result).toEqual(MOCK_TIME_ZONE_OPTIONS[0].label);
-  });
-  it('returns UTC as a fallback if the selected time zone is not translated or mapped to a fallback translation', () => {
-    const result = getTimeZoneLabel(fakeTimeZone, MOCK_TIME_ZONES);
-    expect(result).toEqual(MOCK_TIME_ZONE_OPTIONS[3].label);
-  });
-});

package/src/utils/track-menu-click/index.js

@@ -1 +0,0 @@
-export { default } from './track-menu-click';

package/src/utils/track-menu-click/track-menu-click.js

@@ -1,28 +0,0 @@
-import { matchPath } from 'react-router-dom';
-
-function findButtonLinkPathname(element) {
-  if (element.tagName === 'A') {
-    const linkUrl = new URL(element.href);
-    return `${linkUrl.pathname}${linkUrl.search}`;
-  }
-
-  return findButtonLinkPathname(element.parentElement);
-}
-
-export default function trackMenuClick({
-  event,
-  track,
-  pathToMatch,
-  trackingEvent,
-}) {
-  const buttonLinkPathname = findButtonLinkPathname(event.target);
-  const shouldTrackEvent = !!matchPath(buttonLinkPathname, {
-    path: pathToMatch,
-    exact: true,
-    strict: true,
-  });
-
-  if (shouldTrackEvent) {
-    track(trackingEvent.action, trackingEvent.category, trackingEvent.label);
-  }
-}

package/src/utils/track-menu-click/track-menu-click.spec.js

@@ -1,66 +0,0 @@
-import trackMenuClick from './track-menu-click';
-
-const pathToMatch = '/path/:id';
-const trackingEvent = {
-  action: 'action',
-  category: 'category',
-  label: 'label',
-};
-
-describe('trackMenuClick', () => {
-  it('should track menu click event', () => {
-    const trackFn = jest.fn();
-    const mockEvent = {
-      target: {
-        tagName: 'A',
-        href: 'https://example.com/path/path-id',
-      },
-    };
-    trackMenuClick({
-      track: trackFn,
-      event: mockEvent,
-      trackingEvent,
-      pathToMatch,
-    });
-    expect(trackFn).toHaveBeenCalled();
-    expect(trackFn).toHaveBeenCalledWith('action', 'category', 'label');
-  });
-
-  it('should track menu click event when element wrapper is a div', () => {
-    const trackFn = jest.fn();
-    const mockEvent = {
-      target: {
-        tagName: 'DIV',
-        parentElement: {
-          tagName: 'A',
-          href: 'https://example.com/path/path-id',
-        },
-      },
-    };
-    trackMenuClick({
-      track: trackFn,
-      event: mockEvent,
-      trackingEvent,
-      pathToMatch,
-    });
-    expect(trackFn).toHaveBeenCalled();
-    expect(trackFn).toHaveBeenCalledWith('action', 'category', 'label');
-  });
-
-  it('should not track menu click event', () => {
-    const trackFn = jest.fn();
-    const mockEvent = {
-      target: {
-        tagName: 'A',
-        href: 'https://example.com/hello-world',
-      },
-    };
-    trackMenuClick({
-      track: trackFn,
-      event: mockEvent,
-      trackingEvent,
-      pathToMatch,
-    });
-    expect(trackFn).not.toHaveBeenCalled();
-  });
-});

package/src/utils/transform-to-proper-noun-case/index.js

@@ -1 +0,0 @@
-export * from './transform-to-proper-noun-case';

package/src/utils/transform-to-proper-noun-case/transform-to-proper-noun-case.js

@@ -1,10 +0,0 @@
-const transformToProperNounCase = (text) =>
-  text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
-
-const transformAllToProperNounCase = (text) =>
-  text
-    .split(' ')
-    .map((term) => transformToProperNounCase(term))
-    .join(' ');
-
-export { transformToProperNounCase, transformAllToProperNounCase };

package/src/utils/transform-to-proper-noun-case/transform-to-proper-noun-case.spec.js

@@ -1,23 +0,0 @@
-import {
-  transformToProperNounCase,
-  transformAllToProperNounCase,
-} from './transform-to-proper-noun-case';
-
-describe('utility functions', () => {
-  describe('transformToProperNounCase', () => {
-    it('should capitalize first char', () => {
-      expect(transformToProperNounCase('foo')).toBe('Foo');
-    });
-    it('should lower case from second char', () => {
-      expect(transformToProperNounCase('FOO')).toBe('Foo');
-    });
-  });
-  describe('transformAllToProperNounCase', () => {
-    it('should capitalize first char of every word', () => {
-      expect(transformAllToProperNounCase('foo test')).toBe('Foo Test');
-    });
-    it('should lower case from second char every word', () => {
-      expect(transformAllToProperNounCase('FOO TEST')).toBe('Foo Test');
-    });
-  });
-});

package/src/utils/truncate/index.js

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

package/src/utils/truncate/truncate.js

@@ -1,9 +0,0 @@
-const DEFAULT_LENGTH = 50;
-const DEFAULT_END = '...';
-
-export default function (text, length = DEFAULT_LENGTH, end = DEFAULT_END) {
-  if (!text) return '';
-  if (text.length < length) return text;
-
-  return `${text.substring(0, length)}${end}`;
-}

package/src/utils/truncate/truncate.spec.js

@@ -1,23 +0,0 @@
-import truncate from './truncate';
-
-describe('truncate', () => {
-  it('should return empty string when no text passed', () => {
-    expect(truncate()).toBe('');
-  });
-
-  it('should return the whole text when text length is lower than max size', () => {
-    const text = 'test text';
-    expect(truncate(text, 50)).toBe(text);
-  });
-
-  it('should return text with ellipsis when text length is bigger than max size', () => {
-    const text = 'test text';
-    expect(truncate(text, 4)).toBe('test...');
-  });
-
-  it('should return text with custom truncate when set', () => {
-    const text = 'test text';
-    const customEnd = '----';
-    expect(truncate(text, 4, customEnd)).toBe('test----');
-  });
-});

package/src/utils/type-definitions/index.js

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

package/src/utils/type-definitions/type-definitions.js

@@ -1,118 +0,0 @@
-const REGEX_ISO8601 = /(\d{4}-\d{2}-\d{2}[T]\d{2}:\d{2}:\d{2}(\.\d{3}[Z]?))/;
-const REGEX_TIME = /\d{2}:\d{2}/;
-const REGEX_DATE = /\d{4}-\d{2}-\d{2}/;
-
-/**
- * Filter the `value` key in an updateActions set for Custom-Type
- * @param {Array} updateActions
- * @param {Array} fieldDefinitions
- */
-export function filterCustomTypeUpdateActionValues(
-  updateActions = [],
-  fieldDefinitions = []
-) {
-  return updateActions.map((updateAction) => {
-    if (
-      updateAction.action === 'setCustomField' &&
-      Array.isArray(updateAction.value)
-    ) {
-      const definition = fieldDefinitions.find(
-        (field) => field.name === updateAction.name
-      );
-
-      const definitionName = definition.type.elementType.name;
-      return {
-        ...updateAction,
-        value: filterNotDefinedValues(updateAction.value, definitionName),
-      };
-    }
-    return updateAction;
-  });
-}
-
-export function filterNotDefinedValues(values = [], definitionName) {
-  return values.filter((value) => !isNotDefinedValue(value, definitionName));
-}
-
-export function isNotDefinedValue(value, definitionName) {
-  if (typeof value === 'string') return !value.length;
-  if (isNotDefined(value)) return true;
-
-  switch (definitionName) {
-    case 'Enum':
-    case 'LocalizedEnum':
-      return isNotDefined(value.key) || isNotDefined(value.label);
-    case 'Money':
-      return isNotDefined(value.currencyCode) || isNotDefined(value.centAmount);
-    case 'Reference': {
-      return isNotDefined(value.typeId) || isNotDefined(value.id);
-    }
-    default:
-      return isNotDefined(value);
-  }
-}
-
-function isNotDefined(value) {
-  return value === undefined || value === null;
-}
-
-export function getReferenceTypeId(definition) {
-  const { type } = definition;
-
-  return type.elementType && type.elementType.referenceTypeId
-    ? type.elementType.referenceTypeId
-    : type.referenceTypeId;
-}
-
-export function getTypeNameOfType(type) {
-  return type.elementType ? type.elementType.name : type.name;
-}
-
-export function getAttributeValueType(value) {
-  if (Array.isArray(value)) return getAttributeValueType(value[0]);
-
-  if (typeof value === 'object') {
-    const valueKeys = Object.keys(value);
-    if (valueKeys.includes('label') && valueKeys.includes('key')) {
-      if (typeof value.label === 'object') return 'lenum';
-
-      return 'enum';
-    }
-
-    if (valueKeys.includes('centAmount') && valueKeys.includes('currencyCode'))
-      return 'money';
-
-    if (valueKeys.includes('id') && valueKeys.includes('typeId'))
-      return 'reference';
-
-    return 'ltext';
-  }
-
-  if (typeof value === 'boolean') return 'boolean';
-  if (typeof value === 'number') return 'number';
-  if (REGEX_ISO8601.test(value)) return 'date-time';
-  if (REGEX_TIME.test(value)) return 'time';
-  if (REGEX_DATE.test(value)) return 'date';
-
-  return 'text';
-}
-
-/**
- * Filters out all of those field definitions that are not supporte by
- * CustomAttributes component which are the nested ones (Set of Sets)
- * @param {Array} fieldDefinitions - All the fieldDefinitions
- * @return {Array} fieldDefinitions without nested resources
- */
-export function omitSetsOfSets(fieldDefinitions = []) {
-  const setsOfSetsFieldDefinitions = fieldDefinitions
-    .filter((fieldDefinition) => fieldDefinition.type.name === 'Set')
-    .filter(
-      (fieldDefinition) => fieldDefinition.type.elementType.name === 'Set'
-    )
-    .map((fieldDefinition) => fieldDefinition.name);
-
-  return fieldDefinitions.filter(
-    (fieldDefinition) =>
-      !setsOfSetsFieldDefinitions.includes(fieldDefinition.name)
-  );
-}