@commercetools-frontend/experimental-components 0.0.2 → 0.0.3

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

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

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

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

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

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

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

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