@commercetools-frontend/experimental-components 0.0.2

package/src/fields/localized-field/localized-field.jsx

@@ -0,0 +1,320 @@
+import { forwardRef, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import classnames from 'classnames';
+import { Tooltip } from '@commercetools-frontend/ui-kit';
+import ModalContainer from '../../components/modal-container';
+import ModalContentLayout from '../../components/modal-content-layout';
+import {
+  activeModals,
+  getDataAttribute,
+  validationMessages as messages,
+} from '../../internal-index';
+
+import styles from './localized-field.module.css';
+
+// This component is used to "reset" the default wrapper styles of
+// the Tooltip in order to render the underlying input with full width.
+// eslint-disable-next-line react/display-name
+const WrapperComponent = forwardRef((props, ref) => (
+  <div {...props} ref={ref} />
+));
+
+export default function localizedField(FieldComponent, FieldFooter) {
+  class LocalizedField extends PureComponent {
+    static displayName = 'LocalizedField';
+
+    static propTypes = {
+      autoComplete: PropTypes.string,
+      name: PropTypes.string.isRequired,
+      placeholder: PropTypes.string,
+      value: PropTypes.object,
+      onChangeValue: PropTypes.func,
+      onBlurValue: PropTypes.func,
+      onKeyUp: PropTypes.func,
+      hasExpand: PropTypes.bool,
+      isExpanded: PropTypes.bool,
+      onToggle: PropTypes.func,
+      selectedLanguage: PropTypes.string.isRequired,
+      languages: PropTypes.array.isRequired,
+      modalTitle: PropTypes.oneOfType([PropTypes.element, PropTypes.string])
+        .isRequired,
+      modalSubtitle: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+      modalWarningMessage: PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.string,
+      ]),
+      onModalOpen: PropTypes.func,
+      definition: PropTypes.object,
+      isSearch: PropTypes.bool,
+      // Custom props passed down to the related wrapped components
+      localizedFieldProps: PropTypes.object,
+      footerProps: PropTypes.object,
+      disabled: PropTypes.bool,
+
+      // injectIntl
+      intl: PropTypes.shape({
+        formatMessage: PropTypes.func.isRequired,
+      }).isRequired,
+    };
+
+    static defaultProps = {
+      placeholder: '',
+      value: {},
+      definition: {},
+      isSearch: false,
+      isValid: true,
+      disabled: false,
+      modalSubtitle: null,
+      modalTitle: null,
+    };
+
+    state = {
+      modalIsOpen: false,
+      hasReceivedFocus: false,
+      activeModalCount: 0,
+    };
+
+    calculateEmptyLocales = () => {
+      const filledLocales = this.props.languages.reduce((count, lang) => {
+        if (this.props.value && lang in this.props.value)
+          // eslint-disable-next-line no-param-reassign
+          count += 1;
+        return count;
+      }, 0);
+
+      return (
+        <div>
+          <span className={styles['current-locale']}>
+            {this.props.selectedLanguage.toUpperCase()}
+          </span>
+          <span className={styles['available-locales']}>
+            {`${filledLocales} / ${this.props.languages.length}`}
+          </span>
+        </div>
+      );
+    };
+
+    handleChange = (event) => {
+      const lang = getDataAttribute(event.target, 'data-lang');
+
+      const newValue = {
+        ...this.props.value,
+        [lang]: event.target.value,
+      };
+      if (!event.target.value) delete newValue[lang];
+
+      const val = Object.keys(newValue).length ? newValue : undefined;
+
+      if (this.props.onKeyUp) this.props.onKeyUp(val, event);
+      if (this.props.onChangeValue) this.props.onChangeValue(val, event);
+    };
+
+    handleBlur = (value) => {
+      this.setState({ hasReceivedFocus: true });
+
+      if (this.props.onBlurValue) this.props.onBlurValue(value);
+    };
+
+    editAll = () => {
+      this.setState(
+        {
+          modalIsOpen: true,
+          activeModalCount: activeModals(),
+        },
+        () => {
+          if (this.props.onModalOpen) this.props.onModalOpen(this.modalContent);
+        }
+      );
+    };
+
+    closeModal = () => {
+      if (this.props.onBlurValue) this.props.onBlurValue();
+
+      this.setState({ modalIsOpen: false });
+    };
+
+    valuesAreEmpty = () => {
+      if (this.props.value === null || this.props.value === undefined)
+        return true;
+
+      const localeKeys = Object.keys(this.props.value);
+      const localeWithValues = localeKeys.filter(
+        (lang) => !!this.props.value[lang]
+      );
+      return !localeWithValues.length;
+    };
+
+    renderInputGroups = (locales, withModal = false) => {
+      const hasLocales = withModal && this.props.languages.length > 1;
+      const isRequired = Boolean(
+        this.props.definition && this.props.definition.isRequired
+      );
+      const showEmptyErrorModal =
+        isRequired && !withModal && this.valuesAreEmpty();
+      const showEmptyErrorNonModal =
+        this.state.hasReceivedFocus &&
+        isRequired &&
+        withModal &&
+        this.valuesAreEmpty();
+      const showError = (lang) =>
+        Boolean(
+          showEmptyErrorNonModal ||
+            (showEmptyErrorModal && lang === this.props.selectedLanguage)
+        );
+      return (
+        <div
+          className={styles.fields}
+          data-track-component={hasLocales ? 'LocalizedField' : 'DetailInput'}
+          ref={(div) => {
+            this.modalContent = div;
+          }}
+        >
+          {locales.map((lang) => (
+            <div
+              key={lang}
+              className={classnames(
+                styles.field,
+                { [styles['field-modal']]: !withModal },
+                {
+                  [styles['field-modal-search']]:
+                    !withModal && this.props.isSearch,
+                }
+              )}
+            >
+              <div
+                className={styles[withModal ? 'container' : 'container-modal']}
+              >
+                <div
+                  className={classnames(styles['left-cell'], {
+                    [styles['set-width']]: this.props.isSearch,
+                  })}
+                >
+                  <Tooltip
+                    isOpen={showError(lang)}
+                    placement="top"
+                    title={this.props.intl.formatMessage(messages.required)}
+                    styles={{ body: { alignSelf: 'flex-start' } }}
+                    components={{ WrapperComponent }}
+                  >
+                    {/* FIXME:
+                    move into a separate component and wrap the change
+                    handler, to avoid passing `data-lang` attributes
+                  */}
+                    <FieldComponent
+                      autoComplete={this.props.autoComplete}
+                      name={this.props.name}
+                      placeholder={this.props.placeholder}
+                      value={this.props.value && this.props.value[lang]}
+                      onChange={this.handleChange}
+                      onBlurValue={this.handleBlur}
+                      onKeyUp={this.handleChange}
+                      onToggle={this.props.onToggle}
+                      autoExpand={!withModal}
+                      hasExpand={this.props.hasExpand}
+                      isExpanded={this.props.isExpanded}
+                      data-testid={`localized-field-${lang}`}
+                      data-lang={lang}
+                      data-track-event="change"
+                      data-track-label={this.props.name}
+                      localizedFieldProps={this.props.localizedFieldProps}
+                      isValid={!showError(lang)}
+                      inputClassName={styles.input}
+                      expandableFieldModalClassName={classnames({
+                        [styles['expandable-field-modal']]: !withModal,
+                      })}
+                      textAreaClassName={classnames({
+                        [styles['textarea-modal']]: !withModal,
+                      })}
+                      disabled={this.props.disabled}
+                    />
+                  </Tooltip>
+                </div>
+                <div className={styles['right-cell']}>
+                  {hasLocales ? (
+                    <div>
+                      <div
+                        className={classnames(styles['all-locales'])}
+                        data-track-component="Edit"
+                        data-track-event="click"
+                        data-track-label={this.props.name}
+                        onClick={this.editAll}
+                      >
+                        <span className={styles.counter}>
+                          {this.calculateEmptyLocales()}
+                        </span>
+                      </div>
+                      {this.renderEditModal()}
+                    </div>
+                  ) : (
+                    <div
+                      className={classnames(styles.locale, {
+                        [styles['locale-modal']]: !withModal,
+                      })}
+                    >
+                      {lang}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {FieldFooter ? (
+                <div>
+                  <FieldFooter
+                    name={this.props.name}
+                    value={this.props.value}
+                    lang={lang}
+                    footerProps={this.props.footerProps}
+                    disabled={this.props.disabled}
+                  />
+                </div>
+              ) : null}
+            </div>
+          ))}
+        </div>
+      );
+    };
+
+    renderModalWarning = () =>
+      this.props.modalWarningMessage ? (
+        <div className={styles.warning}>{this.props.modalWarningMessage}</div>
+      ) : null;
+
+    renderEditModal = () => {
+      const overlayClassName = styles['transition-modal-overlay'];
+      const contentClassName = classnames(
+        styles['transition-modal-content'],
+        this.state.activeModalCount === 0
+          ? styles['second-layer']
+          : styles['third-layer']
+      );
+
+      return (
+        <ModalContainer
+          isOpen={this.state.modalIsOpen}
+          closeTimeoutMS={150}
+          onRequestClose={this.closeModal}
+          overlayClassName={overlayClassName}
+          className={contentClassName}
+          contentLabel="localized-field"
+        >
+          <ModalContentLayout
+            title={this.props.modalTitle}
+            subtitle={this.props.modalSubtitle}
+            onClose={this.closeModal}
+            data-track-component={this.props.name}
+          >
+            {this.renderModalWarning()}
+            {this.renderInputGroups(this.props.languages)}
+          </ModalContentLayout>
+        </ModalContainer>
+      );
+    };
+
+    render() {
+      return this.renderInputGroups([this.props.selectedLanguage], true);
+    }
+  }
+
+  return injectIntl(LocalizedField);
+}

package/src/fields/localized-field/localized-field.module.css

@@ -0,0 +1,291 @@
+:root {
+  --width-locale-modal-selector: 80px;
+
+  /* Left navigation */
+  --width-leftNavigation: 64px;
+}
+
+.fields {
+  width: 100%;
+  float: none;
+  clear: both;
+}
+
+.fields::after {
+  clear: both;
+  content: ' ';
+  display: block;
+}
+
+.input-text {
+  transition: all 0.2s ease;
+  width: calc(100% - 90px);
+  margin: 0;
+  min-height: 36px;
+  overflow: hidden;
+}
+
+.all-locales {
+  transition: 0.2s ease;
+  background: var(--color-neutral-95);
+  border-radius: 6px;
+  border: 1px var(--color-neutral-60) solid;
+  bottom: 0;
+  cursor: pointer;
+  max-width: var(--width-locale-modal-selector);
+  text-align: center;
+  margin-left: var(--spacing-s);
+}
+
+/* States */
+
+.all-locales:hover {
+  background: var(--color-primary);
+}
+
+.all-locales:hover .current-locale,
+.all-locales:hover .available-locales {
+  color: var(--color-surface) !important;
+}
+
+.counter {
+  color: var(--color-surface) !important;
+}
+
+.locale {
+  background: var(--color-neutral-95);
+  color: var(--color-neutral-60);
+  border: 1px var(--color-neutral-60) solid;
+  border-radius: var(--border-radius-4);
+  display: inline-block;
+  font-size: 0.923rem;
+  margin-left: var(--spacing-s);
+  min-width: 70px;
+  padding: var(--spacing-s);
+  text-align: center;
+  text-transform: uppercase;
+  width: auto;
+  bottom: 0;
+  right: 0;
+}
+
+.locale-modal {
+  margin: 0 var(--spacing-s);
+  position: relative;
+}
+
+.text-area ~ .locale {
+  bottom: 5px;
+  height: 40px;
+  position: absolute;
+  top: inherit;
+}
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  width: 100%;
+}
+
+.container-expandable {
+  composes: container;
+  align-items: flex-start;
+}
+
+.container > .left-cell {
+  flex-grow: 1;
+}
+
+.container > .left-cell.set-width {
+  flex-grow: 0;
+  width: 50%;
+}
+
+.container > .right-cell {
+  flex-grow: 0;
+}
+
+.current-locale {
+  border-bottom: 1px var(--color-neutral-60) dashed;
+  color: var(--color-neutral-60);
+  display: inline-block;
+  padding: 2px 0;
+  transition: all 0.2s linear;
+  width: 100%;
+}
+
+.available-locales {
+  color: var(--color-primary-25);
+  display: inline-block;
+  padding: 2px 0;
+  transition: all 0.2s linear;
+  width: 60px;
+}
+
+.field {
+  clear: both;
+  position: relative;
+  width: 100%;
+}
+
+.field::after {
+  clear: both;
+  content: ' ';
+  display: block;
+}
+
+/* with Modal */
+
+.container-modal {
+  composes: container;
+  margin-top: var(--spacing-m);
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.expandable-field-modal {
+  float: left;
+  width: 100%;
+}
+
+.textarea-modal {
+  width: 100%;
+}
+
+.edit-modal-form {
+  height: 100%;
+  overflow: auto;
+  padding: 40px;
+  padding-top: 20px;
+  background-color: var(--color-surface);
+}
+
+.field-modal-search {
+  float: left;
+  width: 100% !important;
+}
+
+.locale-modal-search {
+  float: left;
+  width: 100%;
+}
+
+.input-text {
+  transition: 0.2s ease;
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  color: var(--color-solid);
+  font-weight: 500;
+  font-size: 1rem;
+  font-family: 'Open Sans', sans-serif !important;
+  padding: 7.5px 10px;
+  outline: none;
+  box-shadow: none;
+  appearance: none;
+}
+
+.input {
+  composes: input-text;
+  background-color: var(--color-neutral-95);
+  border-color: var(--color-surface);
+  width: 100%;
+}
+
+.transition-modal-overlay {
+  display: flex;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(32, 62, 72, 0.5);
+  z-index: 2000;
+}
+
+.transition-modal-content {
+  padding: 0;
+  border-radius: 0;
+  background: var(--color-surface);
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  outline: none;
+  height: 100%; /* hack for safari */
+  transition: left 150ms ease-out;
+  left: 100%;
+}
+
+.second-layer {
+  /* Needed for showing a bit of
+  the background when there's an overlay */
+  width: calc(100% - var(--width-leftNavigation));
+  margin-left: auto;
+}
+
+.third-layer {
+  /* Needed for showing a bit of
+  the background & the first overlay
+  when there's a second layer overlay */
+  width: calc(100% - var(--width-leftNavigation) - var(--width-leftNavigation));
+  margin-left: auto;
+}
+
+.push-right {
+  float: right;
+}
+
+.field-modal {
+  /* this is here so the unit tests work */
+}
+
+@media screen and (--screen-max-desktop) {
+  .field-modal {
+    width: 80%;
+  }
+}
+
+@media screen and (--screen-min-desktop) {
+  .field-modal {
+    clear: none;
+    float: left;
+    width: 50%;
+  }
+
+  .field-modal:nth-of-type(2n + 1) {
+    clear: both;
+  }
+}
+
+/* Bigger screens */
+
+@media screen and (--screen-min-giantdesktop) {
+  .field-modal {
+    width: 33.33%;
+  }
+
+  .field-modal:nth-of-type(2n + 1),
+  .field-modal:first-of-type {
+    clear: none;
+  }
+
+  .field-modal:nth-of-type(3n + 1) {
+    clear: both;
+  }
+}
+
+.warning {
+  padding: 6px;
+  border-radius: 5px;
+  min-width: 100px;
+  vertical-align: middle;
+  font-size: 0.857rem;
+  background-color: var(--color-warning-95);
+  border: solid 1px var(--color-warning);
+  box-shadow: none;
+}
+
+.container-tooltip {
+  align-self: flex-start;
+}

package/src/fields/localized-field/localized-field.spec.js

@@ -0,0 +1,53 @@
+import { render, fireEvent, within, waitFor } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import ThrottledField from '../throttled-field';
+import localizedField from './localized-field';
+
+const createTestProps = (props) => ({
+  languages: ['en', 'de'],
+  selectedLanguage: 'en',
+  name: 'some name',
+  modalTitle: 'Some localized field',
+  modalWarningMessage: 'This is warning message',
+  onChangeValue: jest.fn(),
+  ...props,
+});
+
+describe('rendering', () => {
+  it('should show localized values', async () => {
+    const Input = (props) => <ThrottledField as="text" {...props} />;
+    const LocalizedField = localizedField(Input);
+    const props = createTestProps();
+    const rendered = render(
+      <IntlProvider locale="en" messages={{}}>
+        <LocalizedField {...props} />
+      </IntlProvider>
+    );
+
+    // Selected locale
+    expect(rendered.getByText('EN')).toBeInTheDocument();
+    // Number of available locales
+    expect(rendered.getByText('0 / 2')).toBeInTheDocument();
+
+    // Open modal
+    fireEvent.click(rendered.getByText('EN'));
+
+    await rendered.findByLabelText('localized-field');
+
+    expect(rendered.getByText('Some localized field')).toBeInTheDocument();
+    expect(rendered.getByText('This is warning message')).toBeInTheDocument();
+
+    // enter text in first input field
+    const input = within(
+      rendered.getByLabelText('localized-field')
+    ).getByTestId('localized-field-en');
+    fireEvent.change(input, { target: { value: 'English text' } });
+    await waitFor(() => {
+      expect(props.onChangeValue).toHaveBeenCalledWith(
+        { en: 'English text' },
+        expect.anything()
+      );
+    });
+  });
+});
+// TODO: more tests

package/src/fields/localized-input/index.js

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

package/src/fields/localized-input/localized-input.jsx

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import localizedField from '../localized-field';
+import ThrottledField from '../throttled-field';
+
+const LocalizedInput = (props) => <ThrottledField {...props} onKeyUp={noop} />;
+LocalizedInput.displayName = 'LocalizedInput';
+LocalizedInput.propTypes = {
+  value: PropTypes.string,
+  definition: PropTypes.object,
+};
+
+LocalizedInput.defaultProps = {
+  // text inputs don't respond to changes with null or undefined
+  // https://github.com/facebook/react/issues/2533
+  value: '',
+};
+
+export default localizedField(LocalizedInput);
+
+function noop() {}

package/src/fields/localized-textarea/index.js

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