@transferwise/components 46.27.0 → 46.29.0

package/src/dynamicFieldDefinitionList/DynamicFieldDefinitionList.story.js

@@ -1,134 +0,0 @@
-import { select, text, number, date } from '@storybook/addon-knobs';
-
-import { Layout } from '../common';
-
-import DynamicFieldDefinitionList from './DynamicFieldDefinitionList';
-
-export default {
-  component: DynamicFieldDefinitionList,
-  title: 'Other/DynamicFieldDefinitionList',
-};
-
-export const Basic = () => {
-  const textDF = text('textDF', 'helloworld');
-  const numberDF = number('numberDF', 123456);
-  const dateDF = date('dateDF', new Date('01-01-2000'));
-  const passwordDF = text('passwordDF', 'password');
-  const phoneDF = text('phoneDF', '+441234567890');
-  const textareaDF = text('textareaDF', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit');
-  const selectDF = select('selectDF', ['1', '2'], '1');
-  const radioDF = select('radioDF', ['1', '2'], '1');
-
-  return (
-    <DynamicFieldDefinitionList
-      title="title"
-      layout={Layout.VERTICAL_TWO_COLUMN}
-      model={{
-        text: textDF,
-        number: numberDF,
-        select: selectDF,
-        date: new Date(dateDF),
-        checkbox: true,
-        radio: radioDF,
-        password: passwordDF,
-        telephone: phoneDF,
-        textarea: textareaDF,
-      }}
-      fields={{
-        text: {
-          title: 'Text',
-          type: 'text',
-          displayFormat: '***** - *****||*-*-*',
-          width: 'md',
-          refreshRequirementsOnChange: true,
-          tagClassName: {
-            h3: true,
-          },
-        },
-        number: {
-          title: 'Number',
-          type: 'number',
-          width: 'md',
-          refreshRequirementsOnChange: true,
-        },
-        select: {
-          title: 'Select',
-          type: 'string',
-          control: 'select',
-          width: 'md',
-          refreshRequirementsOnChange: true,
-          values: [
-            {
-              key: '1',
-              name: 'One',
-            },
-            {
-              key: '2',
-              name: 'Two',
-            },
-          ],
-        },
-        password: {
-          title: 'Password',
-          type: 'string',
-          control: 'password',
-          width: 'md',
-          refreshRequirementsOnChange: true,
-        },
-        date: {
-          title: 'Date',
-          type: 'string',
-          format: 'date',
-          refreshRequirementsOnChange: true,
-        },
-        telephone: {
-          title: 'Telephone',
-          type: 'string',
-          control: 'tel',
-          placeholder: 'Enter...',
-        },
-        radio: {
-          title: 'Radio',
-          type: 'string',
-          control: 'radio',
-          width: 'md',
-          refreshRequirementsOnChange: true,
-          values: [
-            {
-              key: '1',
-              name: 'One',
-            },
-            {
-              key: '2',
-              name: 'Two',
-            },
-          ],
-        },
-        checkbox: {
-          title: 'Checkbox',
-          type: 'boolean',
-          placeholder: 'Label',
-          width: 'md',
-          refreshRequirementsOnChange: true,
-        },
-        textarea: {
-          title: 'Textarea',
-          type: 'string',
-          control: 'textarea',
-          refreshRequirementsOnChange: true,
-        },
-        file: {
-          title: 'File',
-          type: 'string',
-          format: 'base64url',
-          refreshRequirementsOnChange: true,
-        },
-        hidden: {
-          type: 'string',
-          hidden: true,
-          default: 'hidden-value',
-        },
-      }}
-    />
-  );
-};

package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css

@@ -1,5 +0,0 @@
-.formatted-value__h3-custom-alignment {
-  margin-bottom: 16px;
-  margin-bottom: var(--size-16);
-  line-height: 24px;
-}

package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.js

@@ -1,73 +0,0 @@
-import { formatDate, formatNumber } from '@transferwise/formatting';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import { formatUsingPattern } from '../utils/text-format';
-
-/**
- *
- * @param {Array} options
- * @param {string|number} value
- */
-const getValueLabel = (options, value) => {
-  const option = options.find((currentOption) => currentOption.value === value);
-  return option && option.label ? option.label : value;
-};
-
-/**
- *
- * @param {string} value
- */
-const mask = (value) => new Array(value.length + 1).join('*');
-
-const FormattedValue = ({ field, value }) => {
-  const { locale } = useIntl();
-  const style = [];
-  if (field.tagClassName && field.tagClassName.h3) {
-    style.push('np-text-body-large-bold');
-    style.push('formatted-value__h3-custom-alignment');
-  }
-
-  switch (field.control) {
-    case 'select':
-    case 'radio':
-      return <span>{getValueLabel(field.values, value)}</span>;
-    case 'date':
-      return <span>{formatDate(value instanceof Date ? value : new Date(value), locale)}</span>;
-    case 'number':
-      return <span>{formatNumber(value, locale)}</span>;
-    case 'password':
-      return <span>{mask(value)}</span>;
-    case 'file':
-      return (
-        <div className="thumbnail">
-          <img alt={field.title} src={value} />
-        </div>
-      );
-    case 'checkbox':
-      return <span>{JSON.stringify(value)}</span>;
-    default:
-      return (
-        <span className={classNames(style)}>{formatUsingPattern(value, field.displayFormat)}</span>
-      );
-  }
-};
-
-FormattedValue.propTypes = {
-  field: PropTypes.shape({
-    control: PropTypes.string.isRequired,
-    displayFormat: PropTypes.string,
-    refreshRequirementsOnChange: PropTypes.bool,
-    title: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-    width: PropTypes.string,
-    tagClassName: PropTypes.shape({
-      h3: PropTypes.bool,
-    }),
-    values: PropTypes.arrayOf(PropTypes.shape({ value: PropTypes.any })),
-  }).isRequired,
-  value: PropTypes.any.isRequired,
-};
-
-export default FormattedValue;

package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.less

@@ -1,4 +0,0 @@
-.formatted-value__h3-custom-alignment {
-  margin-bottom: var(--size-16);
-  line-height: 24px;
-}

package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.spec.js

@@ -1,200 +0,0 @@
-import { formatNumber } from '@transferwise/formatting';
-import { shallow } from 'enzyme';
-import { useIntl } from 'react-intl';
-
-import FormattedValue from './FormattedValue';
-
-jest.mock('react-intl');
-
-describe('FormattedValue', () => {
-  let props;
-  let value;
-  let component;
-  let item;
-  useIntl.mockReturnValue({ locale: 'en-GB' });
-
-  describe('when given a text field', () => {
-    beforeEach(() => {
-      props = {
-        value: 'ABCD',
-        field: {
-          control: 'text',
-          displayFormat: '** - **',
-          refreshRequirementsOnChange: true,
-          title: 'Text',
-          type: 'string',
-          width: 'md',
-          tagClassName: {
-            h3: true,
-          },
-        },
-      };
-      component = shallow(<FormattedValue {...props} />);
-      item = component.find('span');
-    });
-
-    it('should display the formatted text value', () => {
-      expect(item.text()).toBe('AB - CD');
-    });
-
-    it('has h3 styling added when provided', () => {
-      expect(item.find('.np-text-body-large-bold')).toHaveLength(1);
-    });
-  });
-
-  describe('when given a number field', () => {
-    beforeEach(() => {
-      value = 1234;
-      props = {
-        value,
-        field: {
-          title: 'Number',
-          type: 'number',
-          width: 'md',
-          refreshRequirementsOnChange: true,
-          control: 'number',
-        },
-      };
-      component = shallow(<FormattedValue {...props} />);
-      item = component.find('span');
-    });
-
-    it('should display the formatted number value', () => {
-      expect(item.text()).toBe(formatNumber(value));
-    });
-  });
-
-  describe('when given a date field', () => {
-    beforeEach(() => {
-      props = {
-        value: '2000-12-20T00:00:00.000Z',
-        field: {
-          title: 'Date label',
-          type: 'date',
-          control: 'date',
-        },
-      };
-      component = shallow(<FormattedValue {...props} />);
-      item = component.find('span');
-    });
-
-    it('should display the formatted date value', () => {
-      expect(item.text()).toBe('20/12/2000');
-    });
-  });
-
-  describe('when given a select field', () => {
-    beforeEach(() => {
-      props = {
-        value: '2',
-        field: {
-          title: 'Select label',
-          type: 'select',
-          control: 'select',
-          values: [
-            {
-              value: '1',
-              label: 'One',
-            },
-            {
-              value: '2',
-              label: 'Two',
-            },
-          ],
-        },
-      };
-      component = shallow(<FormattedValue {...props} />);
-      item = component.find('span');
-    });
-
-    it('should display the selected option value', () => {
-      expect(item.text()).toBe('Two');
-    });
-  });
-
-  describe('when given a radio field', () => {
-    beforeEach(() => {
-      props = {
-        value: '2',
-        field: {
-          title: 'Radio label',
-          type: 'radio',
-          control: 'select',
-          values: [
-            {
-              value: '1',
-              label: 'One',
-            },
-            {
-              value: '2',
-              label: 'Two',
-            },
-          ],
-        },
-      };
-      component = shallow(<FormattedValue {...props} />);
-      item = component.find('span');
-    });
-
-    it('should display the selected radio value', () => {
-      expect(item.text()).toBe('Two');
-    });
-  });
-
-  describe('when given a checkbox field', () => {
-    beforeEach(() => {
-      props = {
-        value: true,
-        field: {
-          title: 'Checkbox label',
-          type: 'boolean',
-          control: 'checkbox',
-        },
-      };
-      component = shallow(<FormattedValue {...props} />);
-      item = component.find('span');
-    });
-
-    it('should display the boolean', () => {
-      expect(item.text()).toBe('true');
-    });
-  });
-
-  describe('when given a password field', () => {
-    beforeEach(() => {
-      props = {
-        value: 'qwe123',
-        field: {
-          title: 'Password label',
-          type: 'string',
-          control: 'password',
-        },
-      };
-      component = shallow(<FormattedValue {...props} />);
-      item = component.find('span');
-    });
-
-    it('should display the password masked', () => {
-      expect(item.text()).toBe('******');
-    });
-  });
-
-  describe('when given a file', () => {
-    beforeEach(() => {
-      props = {
-        value: 'qwe123',
-        field: {
-          title: 'A File',
-          type: 'file',
-          control: 'file',
-        },
-      };
-      component = shallow(<FormattedValue {...props} />);
-      item = component.find('img');
-    });
-
-    it('should display the value as source', () => {
-      expect(item.prop('src')).toBe('qwe123');
-    });
-  });
-});

package/src/dynamicFieldDefinitionList/FormattedValue/index.js

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

package/src/dynamicFieldDefinitionList/index.js

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

package/src/dynamicFieldDefinitionList/utils/createDefinitions.js

@@ -1,33 +0,0 @@
-import toPairs from 'lodash.topairs';
-
-import FormattedValue from '../FormattedValue';
-
-export default function createDefinitions(fields, model) {
-  return toPairs(fields)
-    .map(([name, field]) => createDefinition(name, field, model))
-    .filter((definition) => !!definition);
-}
-
-function createDefinition(name, field, model) {
-  const { title, group, hidden } = field;
-
-  if (!model[name] || hidden) {
-    return null;
-  }
-
-  return {
-    title,
-    value: group ? (
-      group.map((groupField, groupFieldIndex) => (
-        <FormattedValue
-          key={groupFieldIndex} // eslint-disable-line react/no-array-index-key
-          field={groupField}
-          value={model[name]}
-        />
-      ))
-    ) : (
-      <FormattedValue field={field} value={model[name]} />
-    ),
-    key: name,
-  };
-}

package/src/dynamicFieldDefinitionList/utils/createDefinitions.spec.js

@@ -1,83 +0,0 @@
-import createDefinitions from './createDefinitions';
-
-const FIELD = { title: 'First', control: 'control', type: 'type' };
-
-describe('createDefinitions', () => {
-  it('creates definitions with titles', () => {
-    const fields = {
-      first: { ...FIELD, title: 'First' },
-      second: { ...FIELD, title: 'Second' },
-    };
-    const model = { first: 'first value', second: 'second value' };
-
-    const definitions = createDefinitions(fields, model);
-
-    const titles = definitions.map(({ title }) => title);
-    expect(titles).toStrictEqual(['First', 'Second']);
-  });
-
-  it('creates definitions with non-group and group values', () => {
-    const FIRST_SOLO = { ...FIELD, title: 'Solo title' };
-    const FIRST_GROUP = { ...FIELD, title: 'First group title' };
-    const SECOND_GROUP = { ...FIELD, title: 'Second group title' };
-
-    const fields = {
-      first: FIRST_SOLO,
-      second: {
-        group: [FIRST_GROUP, SECOND_GROUP],
-      },
-    };
-
-    const model = {
-      first: 'first value',
-      second: 'second value',
-    };
-
-    const definitions = createDefinitions(fields, model);
-
-    const values = definitions.map(({ value }) => value);
-
-    expect(values).toHaveLength(2);
-
-    const [first, [groupFirst, groupSecond]] = values;
-
-    expect(first.props.field).toStrictEqual(FIRST_SOLO);
-    expect(first.props.value).toBe('first value');
-
-    expect(groupFirst.props.field).toStrictEqual(FIRST_GROUP);
-    expect(groupFirst.props.value).toBe('second value');
-
-    expect(groupSecond.props.field).toStrictEqual(SECOND_GROUP);
-    expect(groupSecond.props.value).toBe('second value');
-  });
-
-  it('creates definitions with keys from names', () => {
-    const fields = {
-      first: { ...FIELD, title: 'First' },
-      second: { ...FIELD, title: 'Second' },
-    };
-    const model = { first: 'first value', second: 'second value' };
-
-    const definitions = createDefinitions(fields, model);
-
-    const keys = definitions.map(({ key }) => key);
-    expect(keys).toStrictEqual(['first', 'second']);
-  });
-
-  it('creates definitions without fields hidden or missing from model', () => {
-    const fields = {
-      hidden: { ...FIELD, title: 'Hidden', hidden: true },
-      present: { ...FIELD, title: 'Present' },
-      missing: { ...FIELD, title: 'Missing' },
-    };
-    const model = {
-      hidden: 'hidden value',
-      present: 'present value',
-    };
-
-    const definitions = createDefinitions(fields, model);
-
-    expect(definitions).toHaveLength(1);
-    expect(definitions[0].key).toBe('present');
-  });
-});

package/src/dynamicFieldDefinitionList/utils/text-format.js

@@ -1,46 +0,0 @@
-const formatUsingPattern = (value = '', pattern) => {
-  if (typeof pattern !== 'string') {
-    return value;
-  }
-
-  let newPattern = pattern;
-
-  if (newPattern.indexOf('||') > 0) {
-    newPattern = newPattern.slice(0, Math.max(0, pattern.indexOf('||')));
-  }
-
-  let newValue = '';
-  let separators = 0;
-  let charactersToAllocate = value.length;
-  let position = 0;
-
-  while (charactersToAllocate) {
-    if (positionIsSeparator(newPattern, position)) {
-      newValue += newPattern[position];
-      separators += 1;
-    } else {
-      newValue += value[position - separators];
-      charactersToAllocate -= 1;
-    }
-    position += 1;
-  }
-
-  const separatorsAfterCursor = countSeparatorsAfterCursor(newPattern, position);
-  if (separatorsAfterCursor) {
-    newValue += newPattern.slice(position, separatorsAfterCursor);
-  }
-  return newValue;
-};
-
-const countSeparatorsAfterCursor = (newPattern, position) => {
-  let separators = 0;
-  while (positionIsSeparator(newPattern, position + separators)) {
-    separators += 1;
-  }
-  return separators;
-};
-
-const positionIsSeparator = (newPattern, position) =>
-  newPattern[position] && newPattern[position] !== '*';
-
-export { formatUsingPattern };

package/src/dynamicFieldDefinitionList/utils/text-format.spec.js

@@ -1,43 +0,0 @@
-import { formatUsingPattern } from './text-format';
-
-describe('TextFormat,', () => {
-  let pattern;
-  let value;
-
-  describe('Given there is a pattern', () => {
-    describe('for numeric string', () => {
-      beforeEach(() => {
-        pattern = '** - ** - **';
-        value = '123456';
-      });
-
-      it('should format the value', () => {
-        expect(formatUsingPattern(value, pattern)).toBe('12 - 34 - 56');
-      });
-    });
-  });
-
-  describe('Given there are multiple patterns', () => {
-    describe('for string', () => {
-      beforeEach(() => {
-        pattern = '** - **||**-**-**';
-        value = 'ABCDEF';
-      });
-
-      it('should use the first option', () => {
-        expect(formatUsingPattern(value, pattern)).toBe('AB - CDEF');
-      });
-    });
-  });
-
-  describe('When no pattern supplied', () => {
-    beforeEach(() => {
-      pattern = '';
-      value = '123456';
-    });
-
-    it('should leave the value unaltered', () => {
-      expect(formatUsingPattern(value, pattern)).toBe('123456');
-    });
-  });
-});