@commercetools-frontend/experimental-components 0.0.2 → 0.1.0

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

@@ -1,31 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,33 +0,0 @@
-# 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

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

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

@@ -1,32 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,90 +0,0 @@
-## `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

@@ -1,7 +0,0 @@
-// 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

@@ -1,54 +0,0 @@
-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
-        }
-      }
-    }
-  }
-}