@commercetools-frontend/experimental-components 0.0.2

package/src/components/tooltip/tooltip.spec.js

@@ -0,0 +1,138 @@
+import { shallow } from 'enzyme';
+import { promisedTimeout } from '@commercetools-local/test-utils';
+import { Tooltip } from './tooltip';
+
+jest.useFakeTimers();
+jest.mock('is-touch-device', () => jest.fn().mockReturnValue(false));
+
+const createTestProps = (props) => ({
+  trigger: 'force',
+  display: false,
+  position: 'top',
+  message: "I'm a tooltip",
+  autohide: {
+    enabled: true,
+    timeout: 5000,
+    onHide: jest.fn(),
+  },
+  children: 'tooltip element',
+  ...props,
+});
+
+describe('rendering', () => {
+  describe('rendering tooltip content', () => {
+    const props = createTestProps();
+    const wrapper = shallow(<Tooltip {...props} />);
+    it('contains the message passed in props', () => {
+      expect(wrapper.find({ className: 'body' }).text()).toBe(props.message);
+    });
+  });
+
+  describe('rendering different tooltip types', () => {
+    const props = createTestProps();
+    const wrapper = shallow(<Tooltip {...props} />);
+    it('renders a warning tooltip', () => {
+      wrapper.setProps({ type: 'warning' });
+      expect(wrapper.find('.warning')).toHaveLength(1);
+    });
+
+    it('renders an info tooltip', () => {
+      wrapper.setProps({ type: 'info' });
+      expect(wrapper.find('.info')).toHaveLength(1);
+    });
+
+    it('renders an error tooltip', () => {
+      wrapper.setProps({ type: 'error' });
+      expect(wrapper.find('.error')).toHaveLength(1);
+    });
+  });
+
+  describe('tooltip visibility', () => {
+    const props = createTestProps();
+    const wrapper = shallow(<Tooltip {...props} />);
+    it('renders a tooltip not visible by default', () => {
+      expect(wrapper.state('visible')).toBe(false);
+    });
+
+    it('renders a visible tooltip when forcing it', () => {
+      wrapper.setProps({ display: true, trigger: 'force' });
+      expect(wrapper.state('visible')).toBe(true);
+    });
+  });
+
+  describe('rendering hover events', () => {
+    const props = createTestProps({
+      trigger: 'hover',
+      display: true,
+    });
+    const wrapper = shallow(<Tooltip {...props} />);
+
+    it('simulates HOVER events showing the component', () => {
+      wrapper.simulate('mouseenter');
+      expect(wrapper.state('visible')).toBe(true);
+      jest.runAllTimers();
+    });
+
+    it('simulates HOVER events hiding the component', async () => {
+      wrapper.simulate('mouseleave');
+      expect(wrapper.state('visible')).toBe(false);
+      jest.runAllTimers();
+    });
+  });
+});
+
+describe('callbacks', () => {
+  let props;
+  let wrapper;
+  describe('onHide event', () => {
+    beforeAll(() => {
+      props = createTestProps({
+        autohide: {
+          enabled: true,
+          timeout: 0,
+          onHide: jest.fn(),
+        },
+      });
+      wrapper = shallow(<Tooltip {...props} />);
+      wrapper.instance().setupTimeout(); // simulate componentDidMount
+    });
+    it('sets the lifetimeTimeout property', () => {
+      expect(wrapper.instance().lifetimeTimeout).toBeDefined();
+    });
+
+    it('calls the onHide method after timeout occurs', () => {
+      promisedTimeout(() => {
+        expect(props.autohide.onHide).toHaveBeenCalledTimes(1);
+      });
+      jest.runAllTimers();
+    });
+  });
+
+  describe.skip('onClick event', () => {
+    beforeAll(() => {
+      props = createTestProps({
+        autohide: {
+          enabled: true,
+          timeout: 30,
+          onHide: jest.fn(),
+        },
+        trigger: 'click',
+      });
+      wrapper = shallow(<Tooltip {...props} />);
+      wrapper.simulate('click');
+    });
+    it('calls onClick method showing the component and hiding it after timeout', () => {
+      expect(wrapper.state('visible')).toBe(true);
+      // wait 29 seconds before checking the tooltip is hidden (it is not yet)
+      promisedTimeout(() => {
+        expect(wrapper.state('visible')).toBe(true);
+      }, props.autohide.timeout - 1);
+      // wait 31 seconds before checking the tooltip is hidden (it is)
+      promisedTimeout(() => {
+        expect(wrapper.state('visible')).toBe(false);
+      }, props.autohide.timeout + 1);
+
+      jest.runAllTimers();
+    });
+  });
+});

package/src/components/validated-input/__snapshots__/validated-input.spec.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`simpleInput rendering should match snapshot 1`] = `
+<input
+  className=""
+  disabled={false}
+  name="simple-input"
+  onBlur={[Function]}
+  onChange={[MockFunction]}
+  type="text"
+  value="simple-input-value"
+/>
+`;

package/src/components/validated-input/index.js

@@ -0,0 +1,2 @@
+export { default } from './validated-input';
+export * from './validated-input';

package/src/components/validated-input/validated-input.jsx

@@ -0,0 +1,318 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { injectIntl } from 'react-intl';
+import { oneLineTrim } from 'common-tags';
+import { deepEqual } from 'fast-equals';
+import has from 'lodash.has';
+import isNil from 'lodash.isnil';
+import warning from 'tiny-warning';
+import * as numbers from '../../utils/numbers';
+import { messages } from '../../utils/validation';
+
+// FIXME: use uikit Tooltip!!
+import Tooltip from '../tooltip';
+import styles from './validated-input.module.css';
+
+// Note: don't use `g`! Regex with global flag have state
+// and subsequent calls may give false results.
+export const EMAIL_REGEX =
+  /^[-!#$%&'*+/0-9=?A-Z^_a-z`{|}~](\.?[-!#$%&'*+/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*\.?[a-zA-Z0-9])*\.[a-zA-Z](-?[a-zA-Z0-9])+$/i;
+
+export const getIsEvent = (event) =>
+  typeof event === 'object' && !isNil(event.target);
+
+const validateRequired = (value) => {
+  let isValid = true;
+
+  if (Array.isArray(value) && value.length === 0) isValid = false;
+  else if (isNil(value)) isValid = false;
+
+  return isValid;
+};
+
+export const VALIDATOR_REQUIRED = {
+  name: 'required',
+  message: messages.required,
+  permanent: true,
+  validators: {
+    change(value) {
+      if (!this.state.validStatus.required) return validateRequired(value);
+
+      return this.state.validStatus.required;
+    },
+    blur(value) {
+      return validateRequired(value);
+    },
+  },
+};
+
+export const VALIDATOR_NUMERIC = {
+  name: 'numeric',
+  message: messages.numeric,
+  permanent: false,
+  validators: {
+    change: (v) => [undefined, null, ''].includes(v) || numbers.isNumberish(v),
+    blur: (v) => [undefined, null, ''].includes(v) || numbers.isNumberish(v),
+  },
+};
+
+export const VALIDATOR_INTEGER = {
+  name: 'integer',
+  message: messages.integer,
+  permanent: false,
+  validators: {
+    change: (v) => [undefined, null, ''].includes(v) || numbers.isInteger(v),
+    blur: (v) => [undefined, null, ''].includes(v) || numbers.isInteger(v),
+  },
+};
+
+export const VALIDATOR_EMAIL = {
+  name: 'email',
+  message: messages.email,
+  permanent: false,
+  validators: {
+    // Note: it's a bit weird to validate it on every change,
+    // let's just validate it when the user blurs out of the input.
+    blur(value) {
+      return EMAIL_REGEX.test(value);
+    },
+  },
+};
+
+/**
+ * This var is placed here to ensure that this component
+ * has emitted a warning once in the logs, not for every instance
+ */
+let hasWarned = false;
+export const warningMessage = oneLineTrim`
+  \`validatedInput\` is no longer supported.
+  Please use \`formik\` instead.
+`;
+
+export default function validatedInput(
+  InnerComponent,
+  validators,
+  // Custom class names
+  { containerClassName, tooltipContainerClassName } = {},
+  // Callback handlers
+  { changeHandler = null, blurHandler = null } = {}
+) {
+  let _InnerComponent = InnerComponent;
+
+  if (typeof InnerComponent === 'string')
+    _InnerComponent = simpleInput(InnerComponent);
+
+  const _validators = [];
+  const _initialValidState = {};
+
+  validators.forEach((v) => {
+    _validators.push(v);
+    _initialValidState[v.name] = true;
+  });
+
+  class ValidatedInput extends PureComponent {
+    static displayName = `ValidatedInput(${_InnerComponent.displayName})`;
+
+    static propTypes = {
+      onChange: PropTypes.func,
+      onBlurValue: PropTypes.func,
+      attribute: PropTypes.object,
+      value: PropTypes.any,
+      // This props is forwarded to <input /> of `simpleInput`
+      // ref: https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components
+      getInputRef: PropTypes.func,
+      // A passthrough by the parent.
+      // In the context of SET,
+      // the value within in the input can be deemed valid by the validators,
+      // but still invalid if it were e.g a duplicated value
+      isValid: PropTypes.bool,
+
+      // injectIntl
+      intl: PropTypes.shape({
+        formatMessage: PropTypes.func.isRequired,
+      }).isRequired,
+    };
+
+    static defaultProps = {
+      isValid: true,
+      getInputRef: () => {},
+    };
+
+    state = { validStatus: _initialValidState };
+    componentDidMount() {
+      warning(hasWarned, warningMessage);
+      hasWarned = true;
+    }
+    // eslint-disable-next-line camelcase
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      if (
+        (nextProps.attribute && nextProps.attribute.value) ||
+        nextProps.value
+      ) {
+        this.resetValidity();
+        this.handleChange(nextProps.value, { triggerUpdate: false });
+      }
+    }
+
+    conditionalSetValidStatus = (nextValidStatus) => {
+      if (!deepEqual(this.state.validStatus, nextValidStatus)) {
+        this.setState({ validStatus: nextValidStatus });
+      }
+    };
+
+    handleChange = (event, { triggerUpdate = true } = {}) => {
+      let value = '';
+      const nextValidStatus = {};
+      const onChange =
+        (changeHandler && this.props[changeHandler]) || this.props.onChange;
+
+      // If the actual event is passed, validate the value
+      if (getIsEvent(event)) value = event.target.value;
+      else value = event;
+
+      _validators.forEach((v) => {
+        if (v.validators.change)
+          nextValidStatus[v.name] = v.validators.change.call(this, value);
+        else nextValidStatus[v.name] = true;
+      });
+
+      if (onChange && triggerUpdate) onChange(event);
+
+      this.conditionalSetValidStatus(nextValidStatus);
+    };
+
+    /**
+     * Only triggers when there is a value, but its not valid
+     * so it must be an invalid numeric value
+     */
+    handleInvalid = () => {
+      const nextValidStatus = { ...this.state.validStatus };
+
+      if (has(nextValidStatus, 'numeric')) {
+        nextValidStatus.numeric = false;
+        this.conditionalSetValidStatus(nextValidStatus);
+      }
+    };
+
+    handleBlur = (event) => {
+      let value = '';
+      const nextValidStatus = {};
+      const onBlur =
+        (blurHandler && this.props[blurHandler]) || this.props.onBlurValue;
+
+      // If the actual event is passed, validate the value
+      if (getIsEvent(event)) value = event.target.value;
+      else value = event;
+
+      _validators.forEach((v) => {
+        if (v.validators.blur)
+          nextValidStatus[v.name] = v.validators.blur.call(this, value);
+        else nextValidStatus[v.name] = true;
+      });
+
+      if (onBlur) onBlur(event);
+
+      this.conditionalSetValidStatus(nextValidStatus);
+    };
+
+    resetValidity = () => {
+      const nextValidStatus = {};
+
+      _validators.forEach((v) => {
+        nextValidStatus[v.name] = true;
+      });
+
+      this.conditionalSetValidStatus(nextValidStatus);
+    };
+
+    render() {
+      const isValid = _validators.reduce((prev, v) => {
+        if (prev) return this.state.validStatus[v.name];
+        return prev;
+      }, true);
+
+      const componentProps = {
+        ...this.props,
+        [blurHandler || 'onBlurValue']: this.handleBlur,
+        [changeHandler || 'onChange']: this.handleChange,
+        onInvalidValue: this.handleInvalid,
+        isValid: this.props.isValid && isValid,
+        getInputRef: this.props.getInputRef,
+      };
+
+      const firstFailedValidator = _validators.find(
+        (v) => !this.state.validStatus[v.name]
+      );
+
+      const tooltipProps = {
+        position: 'top',
+        className: tooltipContainerClassName,
+        trigger: 'force',
+        display: !isValid,
+        autohide: {
+          enabled: firstFailedValidator && !firstFailedValidator.permanent,
+          timeout: 5000,
+          onHide: this.resetValidity,
+        },
+        message:
+          (firstFailedValidator &&
+            this.props.intl.formatMessage(firstFailedValidator.message)) ||
+          '',
+      };
+
+      return (
+        <div className={classnames(styles.container, containerClassName)}>
+          <Tooltip {...tooltipProps}>
+            <_InnerComponent {...componentProps} />
+          </Tooltip>
+        </div>
+      );
+    }
+  }
+
+  return injectIntl(ValidatedInput);
+}
+
+export function simpleInput(type) {
+  return class extends PureComponent {
+    static displayName = 'SimpleInput';
+
+    static propTypes = {
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      isValid: PropTypes.bool.isRequired,
+      name: PropTypes.string,
+      getInputRef: PropTypes.func,
+      onBlurValue: PropTypes.func,
+      onChange: PropTypes.func.isRequired,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    };
+
+    static defaultProps = {
+      getInputRef: () => {},
+      name: 'simple-validated-input',
+    };
+
+    handleBlur = (event) => {
+      if (this.props.onBlurValue) this.props.onBlurValue(event.target.value);
+    };
+
+    render() {
+      return (
+        <input
+          className={classnames(this.props.className, {
+            [styles.invalid]: !this.props.isValid,
+          })}
+          name={this.props.name}
+          disabled={this.props.disabled}
+          ref={this.props.getInputRef}
+          value={this.props.value === undefined ? '' : this.props.value}
+          type={type}
+          onBlur={this.handleBlur}
+          onChange={this.props.onChange}
+        />
+      );
+    }
+  };
+}

package/src/components/validated-input/validated-input.module.css

@@ -0,0 +1,9 @@
+.invalid {
+  /* this needs !important because react-select has a :focus style that
+    stops the border colour being set unless the element is blurred */
+  border-color: var(--color-error) !important;
+}
+
+.container {
+  display: inline;
+}

package/src/components/validated-input/validated-input.spec.js

@@ -0,0 +1,91 @@
+import { shallow } from 'enzyme';
+import { getIsEvent, simpleInput } from './validated-input';
+
+const Child = () => <div>Child</div>;
+Child.displayName = 'Child';
+
+jest.mock('warning', () => jest.fn());
+
+describe('getIsEvent', () => {
+  let event;
+  describe('when is event', () => {
+    beforeEach(() => {
+      event = {
+        target: { value: '1' },
+      };
+    });
+    it('should return `true`', () => {
+      expect(getIsEvent(event)).toBe(true);
+    });
+  });
+  describe('when is an object', () => {
+    beforeEach(() => {
+      event = {
+        name: { en: '1' },
+      };
+    });
+    it('should return `false`', () => {
+      expect(getIsEvent(event)).toBe(false);
+    });
+  });
+  describe('when is a string', () => {
+    beforeEach(() => {
+      event = 'string';
+    });
+    it('should return `false`', () => {
+      expect(getIsEvent(event)).toBe(false);
+    });
+  });
+  describe('when is a number', () => {
+    beforeEach(() => {
+      event = 99;
+    });
+    it('should return `false`', () => {
+      expect(getIsEvent(event)).toBe(false);
+    });
+  });
+  describe('when is number 0', () => {
+    beforeEach(() => {
+      event = 0;
+    });
+    it('should return `false`', () => {
+      expect(getIsEvent(event)).toBe(false);
+    });
+  });
+});
+
+describe('simpleInput', () => {
+  const createTestProps = (...custom) => ({
+    className: '',
+    disabled: false,
+    isValid: true,
+    name: 'simple-input',
+    getInputRef: jest.fn(),
+    onBlurValue: jest.fn(),
+    onChange: jest.fn(),
+    value: 'simple-input-value',
+    ...custom,
+  });
+  const TextInput = simpleInput('text');
+  let props;
+  let wrapper;
+
+  describe('rendering', () => {
+    beforeEach(() => {
+      props = createTestProps();
+      wrapper = shallow(<TextInput {...props} />);
+    });
+    it('should match snapshot', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('should render `input`', () => {
+      expect(wrapper).toRender('input');
+    });
+    it('should propagate `onChange`', () => {
+      expect(wrapper.find('input')).toHaveProp('onChange', props.onChange);
+    });
+    it('should propagate `value`', () => {
+      expect(wrapper.find('input')).toHaveProp('value', props.value);
+    });
+  });
+});

package/src/components/validation-error/README.md

@@ -0,0 +1,87 @@
+# ValidationError.Switch & ValidationError.Match
+
+## Usage
+
+```js
+import ValidationError from '@commercetools-local/core/src/components/validation-error';
+```
+
+#### Description
+
+The `ValidationError` module comes with two components sublementing one another. The `<ValidationError.Switch>` is meant to pass in `errors` and `touched` from e.g. a validated form. The `<ValidationError.Match>` a `rule`. Allowing selective rendering of children in case an error occured.
+
+#### Usage
+
+The `validate` passed to e.g. `<Formik validate={validate} />` should return an object with the shape of
+
+```js
+{ [ field: string] : { [rule: string]: boolean }}
+```
+
+with this structure a validation could yield
+
+```js
+const errors = {
+  firstName: {
+    required: false,
+    max: true
+  }
+  lastName: {
+    required: true,
+  }
+}
+```
+
+this validation indicates the following:
+
+1.  `firstName` _is not_ missing (`required` is `false`)
+2.  `firstName` _has_ too many characters (`max` is `true`)
+3.  `lastName` _is_ missing (`required` is `true`)
+
+This indicates that `errors` contains the rule violations per field and not the validation requirements. Given this structure `<ValidationError.Switch />` and `<ValidationError.Match />` operate on it:
+
+```js
+<ValidationError.Switch errors={errors.firstName} isTouched={touched.firstName}>
+  <ValidationError.Match rule="required">
+    <FormattedMessage {...messages.firstNameMissing} />
+  </ValidationError.Match>
+  <ValidationError.Match rule="max" component={MySpecialErrorComponent} />>
+</ValidationError.Switch>
+
+<ValidationError.Switch errors={errors.lastName} isTouched={touched.lastName}>
+  <ValidationError.Match rule="required">
+    <FormattedMessage {...messages.lastNameTooShort} />
+  </ValidationError.Match>
+</ValidationError.Switch>
+```
+
+#### Properties
+
+#### `<ValidationError.Switch>`
+
+| Props       | Type     | Required | Values                              | Default | Description                                    |
+| ----------- | -------- | :------: | ----------------------------------- | ------- | ---------------------------------------------- |
+| `errors`    | `object` |    ✅    | Nested object or errors per field   | -       | Indicates which fields have validation errors. |
+| `isTouched` | `bool`   |    ✅    | Boolean if field is touched         | -       | Errors only show for touched fields            |
+| `children`  | `node`   |    ✅    | only of `<ValidationError.Match />` | -       | `<ValidationError.Match />`s to match a `rule` |
+
+#### `<ValidationError.Match>`
+
+> NOTE: Rendering children supports a variaty of options with FaaC, render-prop or component.
+
+| Props       | Type     | Required | Values                           | Default | Description                                           |
+| ----------- | -------- | :------: | -------------------------------- | ------- | ----------------------------------------------------- |
+| `rule`      | `string` |    ✅    | Any rule of errors for the field | -       | Targets a `rule` of the `errors` (e.g. `required`)    |
+| `children`  | `Node`   |    ✅    | `Node` (e.g. `FormattedMessage`) | -       | Node in case of error.                                |
+| `component` | `func`   |    ✅    | Component to be rendered         | -       | Component rendered (`createElement`) in case of error |
+
+#### Where to use
+
+Main Functions and use cases are:
+
+- Form validation
+
+#### Future Feature Ideas
+
+- Use a `maxErrors` on `<ValidationError.Switch />` to only show the first `n` errors rendered by `<ValidationError.Match />`
+- Have an implicit catch all `Match` which reports to Sentry in case an `error` for a field is not visualized to the user by `<ValidationError.Match />`

package/src/components/validation-error/__snapshots__/validation-error-match.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Match> rendering when not \`isTouched should match snapshot 1`] = `""`;
+
+exports[`<Match> rendering with \`error\` for \`rule\` when \`isTouched\` with \`children\` should match snapshot 1`] = `<ChildComponent />`;
+
+exports[`<Match> rendering with \`error\` for \`rule\` when \`isTouched\` with \`component\` should match snapshot 1`] = `<ChildComponent />`;
+
+exports[`<Match> rendering without \`error\` for \`rule\` should match snapshot 1`] = `""`;

package/src/components/validation-error/__snapshots__/validation-error-switch.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Switch> rendering should match snapshot 1`] = `
+<ValidationErrorMatch
+  hasError={false}
+  isTouched={true}
+  key=".0"
+  rule="rule-bar"
+>
+  <ChildComponent />
+</ValidationErrorMatch>
+`;

package/src/components/validation-error/index.js

@@ -0,0 +1,4 @@
+import Switch from './validation-error-switch';
+import Match from './validation-error-match';
+
+export default { Switch, Match };