@commercetools-frontend/experimental-components 0.0.2

package/src/components/divider/divider.module.css

@@ -0,0 +1,25 @@
+.divider {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  border: 0;
+  border-top-width: 1px;
+}
+
+.divider-solid {
+  composes: divider;
+  border-style: solid;
+}
+
+.divider-dashed {
+  composes: divider;
+  border-style: dashed;
+}
+
+.size_s {
+  border-top-color: var(--color-neutral);
+}
+
+.size_m {
+  border-top-color: var(--color-neutral-60);
+}

package/src/components/divider/index.js

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

package/src/components/formatted-date-time/README.md

@@ -0,0 +1,44 @@
+# FormattedDateTime
+
+The `<FormattedDateTime />` helps working with dates taking into account the locale
+and the timeZone selected by the user.
+
+This uses behind the scenes the components from `moment` and `moment-timezone` for formatting dates.
+http://momentjs.com/
+http://momentjs.com/timezone/
+
+**NOTE**
+This component is needed since there is no way (currently) for setting the timeZone globally to the `<IntlProvider />`.
+There is an open PR for this (https://github.com/yahoo/react-intl/pull/893) but seems to be no activity or plans for having it
+merged.
+
+## Examples
+
+```js
+<FormattedDateTime value="2018-02-21T14:57:07.113Z" type="date" />
+```
+
+```js
+<FormattedDateTime value="2018-02-21T14:57:07.113Z" type="time" />
+```
+
+## Migration from formatDateTime util function
+
+formatDateTime('datetime', value);
+
+```js
+// before
+formatDateTime('datetime', value);
+```
+
+```js
+// now
+<FormattedDateTime value={value} type="datetime" />
+```
+
+## Props
+
+| Props   | Type     | Required | Values | Default | Description                                       |
+| ------- | -------- | :------: | ------ | ------- | ------------------------------------------------- |
+| `type`  | `string` |    ✅    | -      | -       | The value type to apply certain format or another |
+| `value` | `string` |    ✅    | -      | -       | The date                                          |

package/src/components/formatted-date-time/__snapshots__/formatted-date-time.spec.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering when the type is \`date\` should output correct tree 1`] = `
+<ApplicationContext
+  render={[Function]}
+/>
+`;
+
+exports[`rendering when the type is \`datetime\` should output correct tree 1`] = `
+<ApplicationContext
+  render={[Function]}
+/>
+`;
+
+exports[`rendering when the type is \`time\` should output correct tree 1`] = `
+<ApplicationContext
+  render={[Function]}
+/>
+`;

package/src/components/formatted-date-time/formatted-date-time.jsx

@@ -0,0 +1,35 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import { ApplicationContext } from '@commercetools-frontend/application-shell-connectors';
+import { formatDateTime } from '../../internal-index';
+
+export class FormattedDateTime extends PureComponent {
+  static displayName = 'FormattedDateTime';
+
+  static propTypes = {
+    type: PropTypes.oneOf(['time', 'datetime', 'date']),
+    value: PropTypes.string.isRequired,
+    timeZone: PropTypes.string,
+
+    // Intl
+    intl: PropTypes.shape({
+      locale: PropTypes.string.isRequired,
+    }),
+  };
+
+  render() {
+    return (
+      <ApplicationContext
+        render={({ user }) =>
+          formatDateTime(this.props.type, this.props.value, {
+            timeZone: this?.props?.timeZone || user?.timeZone,
+            locale: this.props.intl.locale,
+          })
+        }
+      />
+    );
+  }
+}
+
+export default injectIntl(FormattedDateTime);

package/src/components/formatted-date-time/formatted-date-time.spec.js

@@ -0,0 +1,68 @@
+/* eslint-disable testing-library/no-render-in-setup */
+import { shallow } from 'enzyme';
+import {
+  render,
+  screen,
+} from '@commercetools-frontend/application-shell/test-utils';
+import { FormattedDateTime } from './formatted-date-time';
+
+const createTestProps = (props) => ({
+  value: '2018-02-21T14:57:07.113Z',
+  type: 'date',
+  intl: { locale: 'es' },
+
+  ...props,
+});
+
+describe('rendering', () => {
+  let props;
+  let wrapper;
+
+  describe('when the type is `date`', () => {
+    beforeEach(() => {
+      props = createTestProps();
+      wrapper = shallow(<FormattedDateTime {...props} />);
+    });
+
+    it('should output correct tree', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('when the type is `time`', () => {
+    beforeEach(() => {
+      props = createTestProps({ type: 'time' });
+      wrapper = shallow(<FormattedDateTime {...props} />);
+    });
+
+    it('should output correct tree', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('when the type is `datetime`', () => {
+    beforeEach(() => {
+      props = createTestProps({ type: 'datetime' });
+      wrapper = shallow(<FormattedDateTime {...props} />);
+    });
+
+    it('should output correct tree', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('when optional timeZone prop is `utc`', () => {
+    beforeEach(() => {
+      const customProps = createTestProps({
+        timeZone: 'utc',
+        type: 'datetime',
+      });
+      render(<FormattedDateTime {...customProps} />);
+    });
+
+    it('should output to be datetime format in UTC', () => {
+      const format = screen.queryByText('21/02/2018 14:57');
+      expect(format).toBeInTheDocument();
+    });
+  });
+});

package/src/components/formatted-date-time/index.js

@@ -0,0 +1 @@
+export { default } from './formatted-date-time';

package/src/components/keep-display-name/index.js

@@ -0,0 +1 @@
+export { default } from './keep-display-name';

package/src/components/keep-display-name/keep-display-name.js

@@ -0,0 +1,6 @@
+import getDisplayName from '../../hocs/utils/get-display-name/get-display-name';
+import setDisplayName from '../../hocs/utils/set-display-name/set-display-name';
+
+const keepDisplayName = (component) =>
+  setDisplayName(getDisplayName(component));
+export default keepDisplayName;

package/src/components/messages.js

@@ -0,0 +1,17 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  loadingErrorMessage: {
+    id: 'Pickers.loadingErrorMessage',
+    description:
+      'Message shown to used when picker fails to load data from server.',
+    defaultMessage:
+      'Unable to load resource. Check the connection and try again.',
+  },
+  shortLoadingErrorMessage: {
+    id: 'Pickers.shortLoadingErrorMessage',
+    description:
+      'Message shown to used when picker fails to load data from server. A short version.',
+    defaultMessage: 'Unable to load data',
+  },
+});

package/src/components/modal-container/__snapshots__/modal-container.spec.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering outputs correct tree 1`] = `
+<Modal
+  ariaHideApp={false}
+  bodyOpenClassName="ReactModal__Body--open"
+  closeTimeoutMS={0}
+  contentElement={[Function]}
+  contentLabel="foo"
+  isOpen={false}
+  overlayElement={[Function]}
+  parentSelector={[Function]}
+  portalClassName="ReactModalPortal"
+  preventScroll={false}
+  role="dialog"
+  shouldCloseOnEsc={true}
+  shouldCloseOnOverlayClick={true}
+  shouldFocusAfterRender={true}
+  shouldReturnFocusAfterClose={true}
+/>
+`;

package/src/components/modal-container/index.js

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

package/src/components/modal-container/modal-container.jsx

@@ -0,0 +1,36 @@
+// NOTE: this component is duplicated in `app-shell/from-core`.
+// It's a temporary solution to avoid importing `core` components from AppShell.
+// Be careful when you change something here, remember to duplicate the changes.
+import PropTypes from 'prop-types';
+import Modal from 'react-modal';
+import { PORTALS_CONTAINER_ID } from '@commercetools-frontend/constants';
+
+// When running tests, we don't render the AppShell. Instead we mock the
+// application context to make the data available to the application under
+// test. However, this also means that the AppShell tree is not rendered,
+// which contains among other things the <div id="portals-container" />
+// element, used to render the modal content.
+// Apparently though, when the <Modal> component unmounts between tests, it
+// tries to remove the child elements within the parent selector
+// ("portals-container") which may have been cleaned up by another test,
+// resulting in the <Modal> to throw an NotFoundError.
+// To solve this, we can simply use "document.body" as the parent selector
+// instead of a specific element that will be cleaned up, resulting in
+// console errors (even though the test passes). We only need to to this in
+// test environment.
+const parentSelector = () =>
+  process.env.NODE_ENV === 'test'
+    ? document.body
+    : document.querySelector(`#${PORTALS_CONTAINER_ID}`);
+
+const ModalContainer = (props) => (
+  <Modal {...props} parentSelector={parentSelector} ariaHideApp={false}>
+    {props.children}
+  </Modal>
+);
+ModalContainer.displayName = 'ModalContainer';
+ModalContainer.propTypes = {
+  children: PropTypes.node,
+};
+
+export default ModalContainer;

package/src/components/modal-container/modal-container.spec.js

@@ -0,0 +1,10 @@
+import { shallow } from 'enzyme';
+import ModalContainer from './modal-container';
+
+describe('rendering', () => {
+  const wrapper = shallow(<ModalContainer contentLabel="foo" />);
+
+  it('outputs correct tree', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

package/src/components/modal-content-layout/index.js

@@ -0,0 +1 @@
+export { default } from './modal-content-layout';

package/src/components/modal-content-layout/modal-content-layout.jsx

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import { Text } from '@commercetools-frontend/ui-kit';
+import { filterDataAttributes } from '../../internal-index';
+import ButtonClose from '../buttons/button-close';
+import styles from './modal-content-layout.module.css';
+
+const ModalContentLayout = (props) => {
+  const dataAttrProps = filterDataAttributes(props);
+  return (
+    <div className={styles.container} {...dataAttrProps}>
+      <div className={styles.header}>
+        {Boolean(props.onClose) && (
+          <div className={styles['button-close']}>
+            <ButtonClose onClick={props.onClose} />
+          </div>
+        )}
+        <Text.Headline as="h2">{props.title}</Text.Headline>
+        <div className={styles.subheader}>
+          <div className={styles.subtitle}>{props.subtitle}</div>
+          <div>{props.controls}</div>
+        </div>
+      </div>
+      <div className={styles.content}>{props.children}</div>
+      {props.footer && <div className={styles.footer}>{props.footer}</div>}
+    </div>
+  );
+};
+ModalContentLayout.displayName = 'ModalContentLayout';
+ModalContentLayout.propTypes = {
+  title: PropTypes.node.isRequired,
+  subtitle: PropTypes.node,
+  footer: PropTypes.node,
+  children: PropTypes.node,
+  onClose: PropTypes.func,
+  controls: PropTypes.node,
+};
+
+export default ModalContentLayout;

package/src/components/modal-content-layout/modal-content-layout.module.css

@@ -0,0 +1,69 @@
+:root {
+  /* save toolbar */
+  --height-save-toolbar: 57px;
+
+  /* additional spacing at the bottom of view that has a save-toolbar */
+  --spacing-bottom-with-save-toolbar: calc(
+    var(--height-save-toolbar) + var(--spacing-m)
+  );
+}
+
+/* Modal */
+
+.container {
+  padding: var(--spacing-m) var(--spacing-m) 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.header {
+  position: relative;
+  border-bottom: 2px var(--color-neutral) solid;
+  padding-bottom: var(--spacing-m);
+  margin: 0;
+}
+
+.subtitle {
+  font-size: 1rem;
+  color: var(--color-solid);
+  margin-top: var(--spacing-s);
+  flex-grow: 1;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-m) 0;
+}
+
+/*
+ * manually set the margin bottom of the last child in the container. We need
+ * to do this in order to add some more space to the bottom of the scroll
+ * container. Just using a padding-bottom in the .content-container does not
+ * work in firefox unfortunately. It is a reported bug in FF that is not fixed.
+ */
+.content > :last-child {
+  margin-bottom: var(--spacing-bottom-with-save-toolbar);
+}
+
+.footer {
+  padding: var(--spacing-m) 0;
+}
+
+.button-close {
+  float: right;
+  margin-top: calc(var(--spacing-xs) * -1);
+}
+
+.subheader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.controls {
+  position: absolute;
+  right: 0;
+  bottom: var(--spacing-s);
+}

package/src/components/modal-content-layout/modal-content-layout.spec.js

@@ -0,0 +1,109 @@
+import { shallow } from 'enzyme';
+import { Text } from '@commercetools-frontend/ui-kit';
+import ModalContentLayout from './modal-content-layout';
+
+const createTestProps = (props) => ({
+  title: '',
+  subtitle: '',
+  children: [],
+  footer: '',
+  controls: '',
+  onClose: jest.fn(),
+  ...props,
+});
+
+describe('modal-content-layout component', () => {
+  let props;
+  let wrapper;
+
+  beforeEach(() => {
+    props = createTestProps({
+      title: 'foo',
+      subtitle: 'bar',
+    });
+
+    wrapper = shallow(
+      <ModalContentLayout {...props}>
+        <div>{'foo-bar'}</div>
+      </ModalContentLayout>
+    );
+  });
+
+  describe('tracking', () => {
+    let container;
+    const tracking = {
+      component: 'track-foo-component',
+      event: 'track-foo-event',
+      strict: 'track-foo-strictness',
+      label: 'track-foo-label',
+    };
+
+    beforeEach(() => {
+      wrapper = shallow(
+        <ModalContentLayout
+          {...props}
+          data-track-component={tracking.component}
+          data-track-event={tracking.event}
+          data-track-strict={tracking.strict}
+          data-track-label={tracking.label}
+        />
+      );
+
+      container = wrapper.find({ className: 'container' });
+    });
+
+    it('should add a track component on the `container`', () => {
+      expect(container.prop('data-track-component')).toBe(tracking.component);
+    });
+
+    it('should add a track event on the `container`', () => {
+      expect(container.prop('data-track-event')).toBe(tracking.event);
+    });
+
+    it('should add a track label on the `container`', () => {
+      expect(container.prop('data-track-label')).toBe(tracking.label);
+    });
+
+    it('should add a track strict on the `container`', () => {
+      expect(container.prop('data-track-strict')).toBe(tracking.strict);
+    });
+  });
+
+  describe('rendering', () => {
+    describe('header', () => {
+      it('should render container', () => {
+        expect(wrapper).toRender({ className: 'header' });
+      });
+      it('should render title', () => {
+        expect(wrapper.find(Text.Headline).contains('foo')).toBeTruthy();
+      });
+
+      it('should render subtitle', () => {
+        expect(wrapper.find({ className: 'subtitle' }).text()).toBe('bar');
+      });
+      it('should render subheader', () => {
+        expect(wrapper).toRender({ className: 'subheader' });
+      });
+    });
+
+    describe('body', () => {
+      it('should render content', () => {
+        expect(wrapper.find({ className: 'content' }).text()).toBe('foo-bar');
+      });
+    });
+  });
+
+  describe('callbacks', () => {
+    describe('when closing', () => {
+      let closeButton;
+      beforeEach(() => {
+        closeButton = wrapper.find('ButtonClose');
+        closeButton.simulate('click');
+      });
+
+      it('should invoke `onClose`', () => {
+        expect(props.onClose).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/src/components/product-attributes/README.md

@@ -0,0 +1,72 @@
+# Product attributes
+
+#### Description
+
+A component for inputs based on provided `attributesDefinitions`.
+
+This component must be rendered inside Formik context. The whole Formik values object or its nested field on any depth is considered to hold attributes values being edited. That is specified by providing `name` property. In case `name` is omitted the whole values object is treated as attributes values. If string path is provided, then the object found by that path is considered to be the attribute values (see an Usage section below).
+
+What is an attribute definition? https://docs.commercetools.com/api/projects/productTypes#attributedefinition
+
+#### Requirements
+
+This component was made taking into account some technical decisions that we will explain later on, but for good usage this component needs:
+
+- `Formik` ([https://github.com/jaredpalmer/formik](https://github.com/jaredpalmer/formik))
+- `UIKit` ([https://github.com/commercetools/ui-kit](https://github.com/commercetools/ui-kit))
+
+#### Usage
+
+```js
+import { ProductAttributes } from '@commercetools-local/core/src/components/product-attributes';
+
+const product = {
+  id: 'XXXX-XXXX-XXXX-XXXX',
+  name: 'Product Name',
+  masterVariant: {
+    attributes: {
+      weight: 20,
+    },
+  },
+};
+
+<Formik initialValues={product}>
+  <ProductAttributes
+    name="masterVariant.attributes"
+    fieldDefinitions={definitions}
+    isDisabled={isDisabled}
+  />
+  ;
+</Formik>;
+```
+
+#### Properties
+
+| Props                | Type   | Required | Description                                                                                                                    |
+| -------------------- | ------ | :------: | ------------------------------------------------------------------------------------------------------------------------------ |
+| name                 | String |    -     | Attributes field name in Formik values. If not provided, the whole formik values are considered to be attributes being edited. |
+| attributeDefinitions | Array  |    ✅    | Definitions for rendering inputs depending on the type                                                                         |
+| isDisabled           | bool   |    -     | Render the component in disabled mode                                                                                          |
+
+#### Technical decisions
+
+Product Attributes and Custom Fields are closely mimicking each other in CTP APIs and could be mapped to each other quite easily, allow huge code reuse. That's why this component (`ProductAttributes`) was implemented in terms of the existing `CustomFields` component. It's just a thin layer taking care of type names and some data shape transformation and hading all the job to `CustomFields` as depicted on the following chart:
+
+```
++--------------------+                           +--------------------+
+|                    |                           |                    |
+|  CustomNestedInput <---------------------------+    CustomFields    |
+|                    |                           |                    |
++--------------------+                           +--------------------+
+          |                                                |
+          |                                                |
+          |                                                |
+   map to attributes                                       |
+          |                                                |
+          |                                                |
++---------v----------+                           +---------v------------+
+|                    |                           |                      |
+| ProductAttributes  +--map to custom fields-----> CustomFieldsInternal |
+|                    |                           |                      |
++--------------------+                           +----------------------+
+```

package/src/components/product-attributes/conversions.js

@@ -0,0 +1,75 @@
+import isNil from 'lodash.isnil';
+
+const getTypeName = (type) => type.name.toLowerCase();
+
+const findLabel = (enumType, key) => {
+  const emptyValue = getTypeName(enumType) === 'enum' ? '' : {};
+  return (
+    enumType.values.find((value) => value.key === key)?.label ?? emptyValue
+  );
+};
+
+export const convertEnumValues = (value, attributeDefinition) => {
+  if (isNil(value)) return value;
+  const typeName = getTypeName(attributeDefinition.type);
+  if (['enum', 'lenum'].includes(typeName)) return value.key;
+  if (
+    typeName === 'set' &&
+    ['enum', 'lenum'].includes(
+      getTypeName(attributeDefinition.type.elementType)
+    )
+  )
+    return value.map(({ key }) => key);
+  return value;
+};
+
+export const customFieldToAttribute = (value, attributeDefinition) => {
+  if (isNil(value)) return value;
+  if (!attributeDefinition) return value;
+
+  const type = attributeDefinition.type;
+  const typeName = getTypeName(type);
+
+  if (['enum', 'lenum'].includes(typeName))
+    return {
+      key: value,
+      label: findLabel(type, value),
+    };
+
+  if (
+    typeName === 'set' &&
+    ['enum', 'lenum'].includes(getTypeName(type.elementType))
+  )
+    return value.map((val) => ({
+      key: val,
+      label: findLabel(type.elementType, val),
+    }));
+
+  return value;
+};
+
+export const attributeToCustomField = (attributeValue, attributeDefinition) => {
+  if (!attributeDefinition) return attributeValue;
+  return convertEnumValues(attributeValue, attributeDefinition);
+};
+
+export const attributeDefinitionToFieldDefinition = (attributeDefinition) => ({
+  name: attributeDefinition.name,
+  label: attributeDefinition.label,
+  inputHint: attributeDefinition.inputHint,
+  inputTip: attributeDefinition.inputTip,
+  required: attributeDefinition.isRequired,
+  type: attributeDefinition.type,
+});
+
+export const nameValuePairsToMap = (pairs) =>
+  pairs.reduce(
+    (result, { name, value }) => ({
+      ...result,
+      [name]: value,
+    }),
+    {}
+  );
+
+export const attributesMapToNameValuePairs = (map) =>
+  Object.entries(map).map(([name, value]) => ({ name, value }));