@commercetools-frontend/experimental-components 0.0.2

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

@@ -0,0 +1,31 @@
+import { Children, createElement, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import requiredIf from 'react-required-if';
+
+const isEmptyChildren = (children) => Children.count(children) === 0;
+
+class Match extends PureComponent {
+  static displayName = 'ValidationErrorMatch';
+  static propTypes = {
+    // Options for rendering
+    children: requiredIf(PropTypes.node, (props) => !props.component),
+    component: requiredIf(PropTypes.func, (props) => !props.children),
+
+    // From parent through compound pattern
+    isTouched: PropTypes.bool,
+    hasError: PropTypes.bool,
+  };
+
+  render() {
+    if (this.props.isTouched && this.props.hasError) {
+      if (this.props.component) return createElement(this.props.component);
+
+      if (this.props.children && !isEmptyChildren(this.props.children))
+        return Children.only(this.props.children);
+    }
+
+    return null;
+  }
+}
+
+export default Match;

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

@@ -0,0 +1,102 @@
+import { shallow } from 'enzyme';
+import Match from './validation-error-match';
+
+const ChildComponent = () => <div />;
+ChildComponent.displayName = 'ChildComponent';
+
+const createTestProps = (custom) => ({
+  rule: 'rule-foo',
+  isTouched: true,
+  hasError: false,
+
+  ...custom,
+});
+
+describe('<Match>', () => {
+  describe('rendering', () => {
+    let props;
+    let wrapper;
+
+    describe('without `error` for `rule`', () => {
+      beforeEach(() => {
+        props = createTestProps();
+        wrapper = shallow(
+          <Match {...props}>
+            <ChildComponent />
+          </Match>
+        );
+      });
+
+      it('should match snapshot', () => {
+        expect(wrapper).toMatchSnapshot();
+      });
+
+      it('should not render `children`', () => {
+        expect(wrapper).not.toRender(ChildComponent);
+      });
+    });
+
+    describe('with `error` for `rule`', () => {
+      beforeEach(() => {
+        props = createTestProps({
+          hasError: true,
+        });
+      });
+      describe('when `isTouched`', () => {
+        describe('with `children`', () => {
+          beforeEach(() => {
+            wrapper = shallow(
+              <Match {...props}>
+                <ChildComponent />
+              </Match>
+            );
+          });
+
+          it('should match snapshot', () => {
+            expect(wrapper).toMatchSnapshot();
+          });
+
+          it('should render `children`', () => {
+            expect(wrapper).toRender(ChildComponent);
+          });
+        });
+
+        describe('with `component`', () => {
+          beforeEach(() => {
+            wrapper = shallow(<Match {...props} component={ChildComponent} />);
+          });
+
+          it('should match snapshot', () => {
+            expect(wrapper).toMatchSnapshot();
+          });
+
+          it('should render `children`', () => {
+            expect(wrapper).toRender(ChildComponent);
+          });
+        });
+      });
+    });
+
+    describe('when not `isTouched', () => {
+      beforeEach(() => {
+        props = createTestProps({
+          hasError: true,
+          isTouched: false,
+        });
+        wrapper = shallow(
+          <Match {...props}>
+            <ChildComponent />
+          </Match>
+        );
+      });
+
+      it('should match snapshot', () => {
+        expect(wrapper).toMatchSnapshot();
+      });
+
+      it('should not render `children`', () => {
+        expect(wrapper).not.toRender(ChildComponent);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,45 @@
+import { Children, cloneElement, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import invariant from 'tiny-invariant';
+import Match from './validation-error-match';
+
+const hasUnknownChildren = (children) =>
+  Children.toArray(children).some(
+    (child) => child.type.displayName !== Match.displayName
+  );
+const hasError = (errors, rule) => Boolean(errors[rule]);
+
+class Switch extends PureComponent {
+  static displayName = 'ValidationErrorSwitch';
+  static propTypes = {
+    errors: PropTypes.objectOf(PropTypes.bool),
+    isTouched: PropTypes.bool,
+    children: PropTypes.node.isRequired,
+  };
+  static defaultProps = {
+    errors: {},
+    isTouched: false,
+  };
+
+  componentDidMount() {
+    /**
+     * NOTE:
+     *    The `<ValidationError.Switch>` only works with `<ValidationError.Match>` as its children.
+     */
+    invariant(
+      !hasUnknownChildren(this.props.children),
+      '@commercetools-local/core/src/validation-error/validation-error-switch: children can only be of type <ValidationError.Match>'
+    );
+  }
+
+  render() {
+    return Children.map(this.props.children, (child) =>
+      cloneElement(child, {
+        isTouched: this.props.isTouched,
+        hasError: hasError(this.props.errors, child.props.rule),
+      })
+    );
+  }
+}
+
+export default Switch;

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

@@ -0,0 +1,78 @@
+import { shallow } from 'enzyme';
+import invariant from 'tiny-invariant';
+import Switch from './validation-error-switch';
+import Match from './validation-error-match';
+
+jest.mock('tiny-invariant');
+
+const ChildComponent = () => <div />;
+ChildComponent.displayName = 'ChildComponent';
+
+const createErrors = (custom) => ({
+  'rule-foo': false,
+  'rule-bar': false,
+  'rule-faz': false,
+
+  ...custom,
+});
+const createTestProps = (custom) => ({
+  isTouched: true,
+  errors: createErrors(),
+
+  ...custom,
+});
+const createMatchTestProps = (custom) => ({
+  rule: 'rule-bar',
+  isTouched: true,
+
+  ...custom,
+});
+
+describe('<Switch>', () => {
+  describe('rendering', () => {
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+      props = createTestProps();
+      wrapper = shallow(
+        <Switch {...props}>
+          <Match {...createMatchTestProps()}>
+            <ChildComponent />
+          </Match>
+        </Switch>
+      );
+    });
+
+    it('should match snapshot', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
+
+describe('lifecycle', () => {
+  let props;
+  let wrapper;
+
+  describe('componentDidMount', () => {
+    describe('with children other than `<Match>`', () => {
+      beforeEach(() => {
+        props = createTestProps();
+        wrapper = shallow(
+          <Switch {...props}>
+            <Match {...createMatchTestProps()}>
+              <ChildComponent />
+            </Match>
+            <div />
+          </Switch>
+        );
+
+        wrapper.instance().componentDidMount();
+      });
+
+      it('should invoke `invariant`', () => {
+        expect(invariant).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/src/components/with-mouse-over-state/README.md

@@ -0,0 +1,33 @@
+# HoCs: withMouseOverState
+
+## Usage
+
+```js
+import withMouseOverState from '@commercetools-local/core/src/components/with-mouse-over-state';
+
+const FooElement = (props) => (
+  <div onMouseOver={props.handleMouseOver} onMouseOut={props.handleMouseOut}>
+    {props.isMouseOver ? 'Mouse is over' : 'Mouse is out'}
+  </div>
+);
+
+export default withMouseOverState(FooElement);
+```
+
+#### Description
+
+Manages the state of `isMouseOver` injecting it into a wrapped component.
+Moreover, the handlers injected must be used to update the state in the HoC.
+
+#### Properties
+
+| Props             | Type   | Required | Values | Default | Description                                                      |
+| ----------------- | ------ | :------: | ------ | ------- | ---------------------------------------------------------------- |
+| `isMouseOver`     | `bool` |    ✅    | -      | -       | Indicates if the mouse is currently over the element             |
+| `handleMouseOver` | `func` |    ✅    | -      | -       | Callback function to update the state whenever the mouse is over |
+| `handleMouseOut`  | `func` |    ✅    | -      | -       | Callback function to update the state whenever the mouse is out  |
+
+Main Functions and use cases are:
+
+- Buttons and icons _example: icon needs change in theme whenever button is
+  hovered_

package/src/components/with-mouse-over-state/index.js

@@ -0,0 +1 @@
+export { default } from './with-mouse-over-state';

package/src/components/with-mouse-over-state/with-mouse-over-state.jsx

@@ -0,0 +1,32 @@
+import { Component } from 'react';
+import wrapDisplayName from '../../hocs/wrap-display-name';
+
+const withMouseOverState = (BaseComponent) => {
+  class WithMouseOverState extends Component {
+    static displayName = wrapDisplayName(BaseComponent, 'withMouseOverState');
+
+    state = {
+      isMouseOver: false,
+    };
+
+    setMouseOver = (nextMouseOver) =>
+      this.setState({ isMouseOver: nextMouseOver });
+
+    handleMouseOver = () => this.setMouseOver(true);
+    handleMouseOut = () => this.setMouseOver(false);
+
+    render() {
+      const injectedProps = {
+        isMouseOver: this.state.isMouseOver,
+        handleMouseOver: this.handleMouseOver,
+        handleMouseOut: this.handleMouseOut,
+      };
+
+      return <BaseComponent {...{ ...this.props, ...injectedProps }} />;
+    }
+  }
+
+  return WithMouseOverState;
+};
+
+export default withMouseOverState;

package/src/components/with-mouse-over-state/with-mouse-over-state.spec.js

@@ -0,0 +1,35 @@
+import { render, fireEvent } from '@testing-library/react';
+import withMouseOverState from './with-mouse-over-state';
+
+const Component = withMouseOverState((props) => (
+  <div
+    data-testid="div"
+    onMouseOver={props.handleMouseOver}
+    onMouseOut={props.handleMouseOut}
+  >
+    {props.isMouseOver ? 'mouse over' : 'mouse not over'}
+  </div>
+));
+
+it('should provide isMouseOver as "false" by default', () => {
+  const { queryByTestId } = render(<Component />);
+  expect(queryByTestId('div')).toHaveTextContent('mouse not over');
+});
+
+it('should work through the whole cycle', () => {
+  const { getByTestId, queryByTestId } = render(<Component />);
+
+  // it should provide isMouseOver as "true" when mouse is over
+  fireEvent(
+    getByTestId('div'),
+    new MouseEvent('mouseover', { bubbles: true, cancelable: true })
+  );
+  expect(queryByTestId('div')).toHaveTextContent('mouse over');
+
+  // it should provide isMouseOver as "false" when mouse is up again
+  fireEvent(
+    getByTestId('div'),
+    new MouseEvent('mouseout', { bubbles: true, cancelable: true })
+  );
+  expect(queryByTestId('div')).toHaveTextContent('mouse not over');
+});

package/src/constants/index.js

@@ -0,0 +1,114 @@
+export const QUERY_MAX_LIMIT = 500;
+export const SHOW_TOOLTIP_CHARS_COUNT = 40;
+
+export const SEARCHABLE_REFERENCES = {
+  cartDiscount: 'cart-discount',
+  category: 'category',
+  channel: 'channel',
+  product: 'product',
+  productType: 'product-type',
+  state: 'state',
+};
+
+export const trackingEvents = {
+  showInfoNotification: {
+    category: 'Account-Profile',
+    action: 'showMyProfileUpdateNotification',
+    label: 'Show My Profile Update Notification',
+  },
+  clickOnInfoNotification: {
+    category: 'Account-Profile',
+    action: 'openAccountMyProfilePage',
+    label: 'Open My Profile Page',
+  },
+  clickCloseInfoNotification: {
+    category: 'Account-Profile',
+    action: 'closeInfoNotification',
+    label: 'Close Info Notification',
+  },
+  updateBusinessRoleOnProfilePage: {
+    category: 'Account-Profile',
+    action: 'updateMyProfilePage',
+    label: 'Update My Profile Page',
+  },
+};
+
+export const MOCK_TIME_ZONES = {
+  'America/New_York': {
+    id: 'America/New_York',
+    abbr: 'EST',
+    name: 'Eastern Time - New York',
+    offset: '-05:00',
+    translationFor: ['EST', 'Etc/GMT-5'],
+  },
+  'Europe/Berlin': {
+    id: 'Europe/Berlin',
+    abbr: 'CEST',
+    name: 'Central European Time - Berlin',
+    offset: '+02:00',
+    translationFor: ['CEST', 'Etc/GMT+2'],
+  },
+  'Asia/Shanghai': {
+    id: 'Asia/Shanghai',
+    abbr: 'CST',
+    name: 'China Standard Time - Shanghai',
+    offset: '+08:00',
+    translationFor: ['Asia/Chungking', 'Etc/GMT+8'],
+  },
+  UTC: {
+    id: 'UTC',
+    abbr: 'UTC',
+    name: 'Coordinated Universal Time',
+    offset: '+00:00',
+    translationFor: ['UCT', 'Etc/UTC'],
+  },
+};
+
+export const MOCK_TIME_ZONE_OPTIONS = [
+  {
+    value: 'America/New_York',
+    label: '(GMT -05:00) Eastern Time - New York',
+  },
+  {
+    value: 'Europe/Berlin',
+    label: '(GMT +02:00) Central European Time - Berlin',
+  },
+  {
+    value: 'Asia/Shanghai',
+    label: '(GMT +08:00) China Standard Time - Shanghai',
+  },
+  {
+    value: 'UTC',
+    label: '(GMT +00:00) Coordinated Universal Time',
+  },
+];
+
+export const BUSINESS_ROLE_NOTIFICATION = 'businessRoleNotification';
+
+// The max API limit for one request
+export const QUERY_LIMIT = {
+  // ref: https://docs.commercetools.com/api/contract#queries
+  DEFAULT_MAX: 500,
+};
+
+export const REMINDER_OPTION_1_HOUR = '1hour';
+export const REMINDER_OPTION_4_HOUR = '4hour';
+export const REMINDER_OPTION_1_DAY = '1day';
+export const REMINDER_OPTION_2_DAY = '2day';
+export const REMINDER_OPTION_3_DAY = '3day';
+export const REMINDER_OPTION_5_DAY = '5day';
+export const REMINDER_OPTION_7_DAY = '7day';
+export const REMINDER_OPTION_10_DAY = '10day';
+
+export const INTERVALS_IN_SECONDS = {
+  [REMINDER_OPTION_1_HOUR]: 3600,
+  [REMINDER_OPTION_4_HOUR]: 14400,
+  [REMINDER_OPTION_1_DAY]: 86400,
+  [REMINDER_OPTION_2_DAY]: 172800,
+  [REMINDER_OPTION_3_DAY]: 259200,
+  [REMINDER_OPTION_5_DAY]: 432000,
+  [REMINDER_OPTION_7_DAY]: 604800,
+  [REMINDER_OPTION_10_DAY]: 864000,
+};
+
+export const UTC = 'UTC';

package/src/custom-fields/custom-field-definitions-connector/README.md

@@ -0,0 +1,90 @@
+## `CustomFieldDefinitionsConnector`
+
+A Connector that injects the custom field definitions for the requested resources. Whenever is called, it injects a new object `customFieldDefinitionsFetcher` as prop containing all the custom field definitions for the provided resources and information about loading state. An example of this object will be:
+
+```js
+customFieldDefinitionsFetcher: {
+  isLoading: false,
+  customFieldDefinitions: [
+    {
+      name: 'definition-1-name',
+      label: {
+        en: 'definition-1-label-en',
+        de: 'definition-1-label-de',
+      },
+      type: { name: 'Boolean' },
+    },
+    {
+      name: 'definition-2-name',
+      label: {
+        en: 'definition-2-label-en',
+        de: 'definition-2-label-de',
+      },
+      type: { name: 'String' },
+    },
+    ...
+  ]
+}
+```
+
+## Usage
+
+```js
+import CustomFieldDefinitionsConnector from '@commercetools-local/core/src/components/custom-field-definitions-connector';
+
+<CustomFieldDefinitionsConnector resources={['customer']}>
+  {({ customFieldDefinitionsFetcher }) => (
+    <MyAwesomeComponent
+      customFieldDefinitionsFetcher={customFieldDefinitionsFetcher}
+    />
+  )}
+</CustomFieldDefinitionsConnector>;
+```
+
+## API
+
+### Example
+
+For instance if we want to get all the custom field definitions set in the project for orders we can get them by adding the following:
+
+```js
+<CustomFieldDefinitionsConnector resources={['order']}>
+  {({ customFieldDefinitionsFetcher }) => (
+    <MyAwesomeComponent
+      customFieldDefinitionsFetcher={customFieldDefinitionsFetcher}
+    />
+  )}
+</CustomFieldDefinitionsConnector>
+```
+
+Another case can be getting all the custom field definitions for custom line items and line items. We can do it easily by adding:
+
+```js
+<CustomFieldDefinitionsConnector resources={['line-item', 'custom-line-item']}>
+  {({ customFieldDefinitionsFetcher }) => (
+    <MyAwesomeComponent
+      customFieldDefinitionsFetcher={customFieldDefinitionsFetcher}
+    />
+  )}
+</CustomFieldDefinitionsConnector>
+```
+
+In case invalid resources are passed, they are ignored when querying.
+
+```js
+<CustomFieldDefinitionsConnector
+  resources={['line-item', 'custom-line-item-wrong']}
+>
+  {({ customFieldDefinitionsFetcher }) => (
+    <MyAwesomeComponent
+      customFieldDefinitionsFetcher={customFieldDefinitionsFetcher}
+    />
+  )}
+</CustomFieldDefinitionsConnector>
+```
+
+This will throw an error. Whenever we have a typo, an error is thrown informing about the resource which is not correctly set.
+
+### Arguments
+
+- `resources` (`string[]`): Names of the resources we want to get the custom fields definitions. You can find all the available resources [here](https://dev.commercetools.com/http-api-projects-custom-fields.html#customizable-resources)

package/src/custom-fields/custom-field-definitions-connector/__snapshots__/custom-field-definitions-connector.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render should match snapshot 1`] = `
+<div
+  className="child"
+/>
+`;

package/src/custom-fields/custom-field-definitions-connector/custom-field-definitions-connector.ctp.graphql

@@ -0,0 +1,54 @@
+query FetchTypeDefinitionsQuery($where: String, $limit: Int, $offset: Int) {
+  typeDefinitions(where: $where, limit: $limit, offset: $offset) {
+    results {
+      fieldDefinitions {
+        type {
+          name
+          ... on SetType {
+            elementType {
+              name
+              ... on EnumType {
+                values {
+                  key
+                  label
+                }
+              }
+              ... on LocalizedEnumType {
+                values {
+                  key
+                  labelAllLocales {
+                    value
+                    locale
+                  }
+                }
+              }
+            }
+          }
+          ... on EnumType {
+            values {
+              key
+              label
+            }
+          }
+          ... on LocalizedEnumType {
+            values {
+              key
+              labelAllLocales {
+                value
+                locale
+              }
+            }
+          }
+          ... on ReferenceType {
+            referenceTypeId
+          }
+        }
+        name
+        labelAllLocales {
+          value
+          locale
+        }
+      }
+    }
+  }
+}