@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

package/src/utils/formats/percentage/percentage.spec.js

@@ -1,18 +0,0 @@
-import { formatPercentage, convertRatioToPercentage } from './percentage';
-
-describe('formatting', () => {
-  it('converts ratio to percentage', () => {
-    const percentage = convertRatioToPercentage(0.8);
-    expect(percentage).toBe(80);
-  });
-
-  it('converts ratio to percentage (edge cases)', () => {
-    expect(convertRatioToPercentage(0.09975)).toBe(9.98);
-    expect(convertRatioToPercentage(0.07)).toBe(7);
-  });
-
-  it('formats a percentage', () => {
-    const formattedPercentage = formatPercentage(80);
-    expect(formattedPercentage).toBe('80%');
-  });
-});

package/src/utils/formats/product-attribute/index.js

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

package/src/utils/formats/product-attribute/messages.js

@@ -1,14 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  booleanYes: {
-    id: 'AttributeTypeFormats.boolean.yes',
-    description: 'The label for boolean attribute `true` value',
-    defaultMessage: 'YES',
-  },
-  booleanNo: {
-    id: 'AttributeTypeFormats.boolean.no',
-    description: 'The label for boolean attribute `false` value',
-    defaultMessage: 'NO',
-  },
-});

package/src/utils/formats/product-attribute/product-attribute.js

@@ -1,127 +0,0 @@
-import isNil from 'lodash.isnil';
-import { formatLocalizedString } from '@commercetools-frontend/l10n';
-import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
-import { reportErrorToSentry } from '@commercetools-frontend/sentry';
-import { formatMoney as formatMoneyValue } from '../money';
-import messages from './messages';
-
-const formatEnum = ({ value, fallbackValue }) =>
-  value.label || `${fallbackValue} (${value.key})`;
-
-const formatLenum = ({ value, language, languages, fallbackValue }) =>
-  formatLocalizedString(value, {
-    key: 'label',
-    locale: language,
-    fallback: `${fallbackValue} (${value.key})`,
-    fallbackOrder: languages,
-  });
-
-const formatLtext = ({ value, language }) =>
-  formatLocalizedString({ value }, { key: 'value', locale: language });
-
-const formatMoney = ({ value, intl }) => formatMoneyValue(value, intl);
-
-const formatReference = ({ value }) => value.id;
-
-const formatDate = ({ value, intl }) =>
-  intl.formatDate(Date.parse(value), {
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
-    // prevents timezone conversion
-    timeZone: 'utc',
-  });
-
-const formatDateTime = ({ value, intl }) => {
-  const date = formatDate({ value, intl });
-  const time = intl.formatTime(Date.parse(value), {
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric',
-  });
-  return `${date} (${time})`;
-};
-
-const formatBoolean = ({ value, intl }) =>
-  value
-    ? intl.formatMessage(messages.booleanYes)
-    : intl.formatMessage(messages.booleanNo);
-
-const formatNilType = ({ value, fallbackValue }) => {
-  reportErrorToSentry(new Error('Type was not provided'), {
-    extra: { value },
-  });
-
-  return fallbackValue;
-};
-
-const formatUnknown = ({ type, value, fallbackValue }) => {
-  // NOTE This is reporting within the render function, which is supposed to
-  // be pure. This is quite bad as this is a side-effect in the render fn.
-  reportErrorToSentry(
-    new Error(`Unhandled custom attribute type '${type.name}' for value`),
-    { extra: { value } }
-  );
-
-  return fallbackValue;
-};
-
-const formatNested = ({ fallbackValue }) => fallbackValue;
-
-const formatSet = ({
-  type,
-  value,
-  intl,
-  language,
-  languages,
-  fallbackValue,
-}) => {
-  const formatedElements = value.map((elementValue) =>
-    formatAttribute({
-      type: type.elementType,
-      value: elementValue,
-      intl,
-      language,
-      languages,
-      fallbackValue,
-    })
-  );
-  return formatedElements.join(', ');
-};
-
-const doNotFormat = ({ value }) => value;
-
-const getFormatter = (type) => do {
-  if (isNil(type)) formatNilType;
-  else if (type.name === 'nested') formatNested;
-  else if (type.name === 'set') formatSet;
-  else if (type.name === 'enum') formatEnum;
-  else if (type.name === 'lenum') formatLenum;
-  else if (type.name === 'ltext') formatLtext;
-  else if (type.name === 'money') formatMoney;
-  else if (type.name === 'reference') formatReference;
-  else if (type.name === 'date') formatDate;
-  else if (type.name === 'time') doNotFormat;
-  else if (type.name === 'datetime') formatDateTime;
-  else if (type.name === 'boolean') formatBoolean;
-  else if (type.name === 'text') doNotFormat;
-  else if (type.name === 'number') doNotFormat;
-  else formatUnknown;
-};
-
-export default function formatAttribute({
-  type,
-  value,
-  intl,
-  language,
-  languages,
-  fallbackValue = NO_VALUE_FALLBACK,
-}) {
-  if (isNil(value)) {
-    return fallbackValue;
-  }
-
-  const formatter = getFormatter(type);
-
-  return formatter({ type, value, intl, language, languages, fallbackValue });
-}

package/src/utils/formats/product-attribute/product-attribute.spec.js

@@ -1,128 +0,0 @@
-import { intlMock } from '@commercetools-local/test-utils';
-import { NO_VALUE_FALLBACK } from '@commercetools-frontend/constants';
-import { reportErrorToSentry } from '@commercetools-frontend/sentry';
-import formatProductAttribute from './product-attribute';
-
-jest.mock('@commercetools-frontend/sentry');
-
-const format = (type, value) =>
-  formatProductAttribute({
-    type,
-    value,
-    intl: intlMock,
-    language: 'en',
-    languages: ['en'],
-  });
-
-describe('formatProductAttribute', () => {
-  describe('simple types', () => {
-    it.each([
-      ['boolean', true, 'AttributeTypeFormats.boolean.yes'],
-      ['text', 'foo', 'foo'],
-      ['ltext', { en: 'en-text' }, 'en-text'],
-      ['enum', { label: 'enum-label' }, 'enum-label'],
-      ['lenum', { label: { en: 'en-enum-label' } }, 'en-enum-label'],
-      ['number', 100, 100],
-      ['money', { centAmount: 10000, currencyCode: 'EUR' }, 'EUR 100'],
-      ['date', '1985-05-29', '29.5.1985'],
-      ['time', '03:00:00', '03:00:00'],
-      ['datetime', '1985-05-29T10:20:30.000Z', '29.5.1985 (10:20)'],
-      ['reference', { id: 'reference-id' }, 'reference-id'],
-    ])(
-      "formats attribute of type '%s'",
-      (attributeTypeName, value, expected) => {
-        const type = { name: attributeTypeName };
-        const formatted = format(type, value);
-        expect(formatted).toEqual(expected);
-      }
-    );
-
-    it.todo('should format date without timezone conversions');
-  });
-
-  describe('composite types', () => {
-    it('always returns fallback value for `nested` type', () => {
-      const type = { name: 'nested' };
-      const value = 'whatever i pass';
-      const formatted = format(type, value);
-      expect(formatted).toEqual(NO_VALUE_FALLBACK);
-    });
-
-    it('formats `set` type', () => {
-      const type = { name: 'set', elementType: { name: 'money' } };
-      const value = [
-        {
-          centAmount: 10000,
-          currencyCode: 'EUR',
-        },
-        {
-          centAmount: 15000,
-          currencyCode: 'EUR',
-        },
-        {
-          centAmount: 20000,
-          currencyCode: 'EUR',
-        },
-      ];
-      const formatted = format(type, value);
-      expect(formatted).toBe('EUR 100, EUR 150, EUR 200');
-    });
-  });
-
-  describe('nil values', () => {
-    it.each([null, undefined])(
-      'replaces `%s` with default fallback value',
-      (value) => {
-        const type = { name: 'fake-type' };
-        const formatted = format(type, value);
-        expect(formatted).toBe(NO_VALUE_FALLBACK);
-      }
-    );
-
-    it.each([null, undefined])(
-      'replaces `%s` with provided fallback value',
-      (value) => {
-        const type = { name: 'fake-type' };
-        const formatted = formatProductAttribute({
-          type,
-          value,
-          intl: intlMock,
-          language: 'en',
-          languages: ['en'],
-          fallbackValue: '?',
-        });
-        expect(formatted).toEqual('?');
-      }
-    );
-  });
-
-  describe('unknown types', () => {
-    const type = { name: 'unknown-type' };
-    const value = 'whatever value';
-
-    it('reports error to sentry', () => {
-      format(type, value);
-      expect(reportErrorToSentry).toHaveBeenCalled();
-    });
-
-    it('replaces provided value with fallback value', () => {
-      const formatted = format(type, value);
-      expect(formatted).toEqual(NO_VALUE_FALLBACK);
-    });
-  });
-
-  describe('type was not provided', () => {
-    const type = undefined;
-    const value = 'whatever value';
-
-    it('reports error to sentry', () => {
-      format(type, value);
-      expect(reportErrorToSentry).toHaveBeenCalled();
-    });
-
-    it('replaces provided value with fallback value', () => {
-      const formatted = format(type, value);
-      expect(formatted).toEqual(NO_VALUE_FALLBACK);
-    });
-  });
-});