@jetbrains/ring-ui 4.1.3 → 5.0.0-beta.0

package/components/tooltip/tooltip.js

@@ -1,168 +0,0 @@
-import React, {Component, createContext} from 'react';
-import PropTypes from 'prop-types';
-
-import Popup from '../popup/popup';
-import {Listeners} from '../global/dom';
-import dataTests from '../global/data-tests';
-import scheduleRAF from '../global/schedule-raf';
-
-import styles from './tooltip.css';
-
-const scheduleScroll = scheduleRAF();
-
-const TooltipContext = createContext();
-
-/**
- * @name Tooltip
- */
-export default class Tooltip extends Component {
-  static propTypes = {
-    delay: PropTypes.number,
-    selfOverflowOnly: PropTypes.bool,
-    popupProps: PropTypes.object,
-    title: PropTypes.node,
-    children: PropTypes.node,
-    'data-test': PropTypes.string
-  };
-
-  static defaultProps = {
-    title: '',
-    selfOverflowOnly: false,
-    popupProps: {}
-  };
-
-  state = {
-    showPopup: false,
-    showNestedPopup: false
-  };
-
-  componentDidMount() {
-    if (this.props.title) {
-      this.addListeners();
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if (!prevProps.title && this.props.title) {
-      this.addListeners();
-    } else if (prevProps.title && !this.props.title) {
-      this.listeners.removeAll();
-    }
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timeout);
-    this.listeners.removeAll();
-  }
-
-  static PopupProps = Popup.PopupProps;
-  static contextType = TooltipContext;
-
-  listeners = new Listeners();
-  containerRef = el => {
-    this.containerNode = el;
-  };
-
-  tryToShowPopup = () => {
-    const {delay, title} = this.props;
-
-    if (!title) {
-      return;
-    }
-
-    if (delay) {
-      this.timeout = setTimeout(this.showPopup, delay);
-    } else {
-      this.showPopup();
-    }
-  };
-
-  showPopup = () => {
-    if (this.props.selfOverflowOnly) {
-      const {containerNode} = this;
-
-      // rare cases when containerNode is null are possible;
-      // probably the collision is due to the asynchronous nature of the code,
-      // i.e. this code runs after the component is unmounted,
-      // although at first glance it looks unlikely.
-      if (!containerNode) {
-        return;
-      }
-
-      // inline element?
-      if (containerNode.clientWidth === 0 && containerNode.clientHeight === 0) {
-        return;
-      }
-      if (
-        containerNode.scrollWidth <= containerNode.clientWidth &&
-        containerNode.scrollHeight <= containerNode.clientHeight
-      ) {
-        return;
-      }
-    }
-
-    this.context?.onNestedTooltipShow();
-    this.setState({showPopup: true});
-  };
-
-  hidePopup = () => {
-    clearTimeout(this.timeout);
-    this.context?.onNestedTooltipHide();
-    this.setState({showPopup: false});
-  };
-
-  addListeners() {
-    this.listeners.add(this.containerNode, 'mouseover', this.tryToShowPopup);
-    this.listeners.add(this.containerNode, 'mouseout', this.hidePopup);
-    this.listeners.add(document, 'scroll', () => scheduleScroll(this.hidePopup), {passive: true});
-  }
-
-  popupRef = el => {
-    this.popup = el;
-  };
-
-  onNestedTooltipShow = () => {
-    this.setState({showNestedPopup: true});
-  };
-
-  onNestedTooltipHide = () => {
-    this.setState({showNestedPopup: false});
-  };
-
-  render() {
-    const {children, 'data-test': dataTest,
-      title, delay, selfOverflowOnly, popupProps, ...restProps} = this.props;
-
-    const ariaProps = typeof title === 'string' && !!title
-      ? {'aria-label': title, role: 'tooltip'}
-      : {};
-
-    const {onNestedTooltipShow, onNestedTooltipHide} = this;
-
-    return (
-      <TooltipContext.Provider value={{onNestedTooltipShow, onNestedTooltipHide}}>
-        <span
-          {...ariaProps}
-          {...restProps}
-          ref={this.containerRef}
-          data-test={dataTests('ring-tooltip', dataTest)}
-          data-test-title={typeof title === 'string' ? title : undefined}
-        >
-          {children}
-          <Popup
-            trapFocus={false}
-            hidden={!this.state.showPopup || this.state.showNestedPopup}
-            onCloseAttempt={this.hidePopup}
-            maxHeight={400}
-            className={styles.tooltip}
-            attached={false}
-            top={4}
-            dontCloseOnAnchorClick
-            ref={this.popupRef}
-            {...popupProps}
-          >{title}</Popup>
-        </span>
-      </TooltipContext.Provider>
-    );
-  }
-}

package/components/tooltip/tooltip.test.js

@@ -1,128 +0,0 @@
-import React from 'react';
-import {
-  isCompositeComponentWithType
-} from 'react-dom/test-utils';
-import {mount, render} from 'enzyme';
-
-import Popup from '../popup/popup';
-
-import Tooltip from './tooltip';
-
-describe('Tooltip', () => {
-  const defaultProps = {
-    title: 'test tooltip',
-    className: 'test-class',
-    children: 'test elem'
-  };
-  const mountTooltip = props => mount(<Tooltip {...defaultProps} {...props}/>);
-  const renderTooltip = props => render(<Tooltip {...defaultProps} {...props}/>);
-
-  it('should create component', () => {
-    mountTooltip().should.have.type(Tooltip);
-  });
-
-  describe('Children', () => {
-    it('should wrap text children', () => {
-      const wrapper = renderTooltip();
-      wrapper.should.have.text('test elem');
-      wrapper.should.have.tagName('span');
-    });
-
-    it('should wrap children', () => {
-      const wrapper = renderTooltip({
-        title: 'test tooltip',
-        children: <span>{'test span'}</span>
-      });
-
-      wrapper.should.have.tagName('span');
-      wrapper.children().first().should.have.text('test span');
-      wrapper.children().first().should.have.tagName('span');
-    });
-
-    it('should pass props to children', () => {
-      mountTooltip().should.have.className('test-class');
-    });
-
-    it('should not pass title to children', () => {
-      const wrapper = mountTooltip();
-      wrapper.children().first().should.not.have.prop('title');
-    });
-  });
-
-  describe('Popup', () => {
-    it('should unbind listeners when empty title is provided', () => {
-      const wrapper = mountTooltip();
-      const bindEvents = sandbox.spy(wrapper.getDOMNode(), 'removeEventListener');
-
-      wrapper.setProps({
-        title: ''
-      });
-
-      bindEvents.should.have.been.calledTwice;
-    });
-
-    it('should render popup', () => {
-      const wrapper = mountTooltip();
-      const instance = wrapper.instance();
-      instance.tryToShowPopup();
-
-      isCompositeComponentWithType(instance.popup, Popup).should.be.true;
-    });
-
-    it('should not render popup when empty title is provided', () => {
-      const wrapper = mountTooltip({
-        title: ''
-      });
-      const instance = wrapper.instance();
-
-      instance.tryToShowPopup();
-      instance.popup.isVisible().should.be.false;
-    });
-
-    it('should render with delay when provided', () => {
-      const clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
-      const wrapper = mountTooltip({
-        delay: 100
-      });
-      const instance = wrapper.instance();
-
-      instance.tryToShowPopup();
-
-      instance.popup.isVisible().should.be.false;
-
-      // eslint-disable-next-line no-magic-numbers
-      clock.tick(200);
-      instance.popup.isVisible().should.be.true;
-    });
-
-    it('should pass custom props to popup', () => {
-      const wrapper = mountTooltip({
-        popupProps: {
-          className: 'tooltip-test-popup'
-        }
-      });
-      const instance = wrapper.instance();
-
-      instance.tryToShowPopup();
-      instance.popup.popup.should.have.class('tooltip-test-popup');
-    });
-
-    it('should close popup on unmount', () => {
-      const wrapper = mountTooltip();
-      const instance = wrapper.instance();
-      instance.tryToShowPopup();
-      wrapper.unmount();
-
-      should.not.exist(instance.popup);
-    });
-
-    it('should not close popup on click on tooltip', () => {
-      const wrapper = mountTooltip();
-      const instance = wrapper.instance();
-      instance.tryToShowPopup();
-      wrapper.simulate('click');
-
-      instance.popup.isVisible().should.be.true;
-    });
-  });
-});

package/components/user-agreement/service.js

@@ -1,292 +0,0 @@
-import React from 'react';
-import {render, unmountComponentAtNode} from 'react-dom';
-
-import Storage from '../storage/storage';
-import alertService from '../alert-service/alert-service';
-import Link from '../link/link';
-import Alert from '../alert/alert';
-import Group from '../group/group';
-
-import UserAgreement from './user-agreement';
-
-const GUEST_SESSION_KEY = 'end-user-agreement-consent';
-const ONE_HOUR = 60 * 60 * 1000; // eslint-disable-line no-magic-numbers
-
-const storageKey = 'userAgreementKey';
-export const showMessage = 'userAgreementShow';
-export const hideMessage = 'userAgreementHide';
-
-const DEFAULT_CONSENT = {
-  accepted: false,
-  majorVersion: 0,
-  minorVersion: 0
-};
-
-const DEFAULT_AGREEMENT = {
-  enabled: false,
-  majorVersion: 0,
-  minorVersion: 0,
-  requiredForREST: false,
-  text: ''
-};
-
-export default class UserAgreementService {
-  constructor(config = {}) {
-    if (!config.getUserAgreement) {
-      throw new Error('Please pass a "getUserAgreement" option to UserAgreementService');
-    }
-
-    if (!config.getUserConsent) {
-      throw new Error('Please pass a "getUserConsent" option to UserAgreementService');
-    }
-
-    if (!config.setUserConsent) {
-      throw new Error('Please pass a "setUserConsent" option to UserAgreementService');
-    }
-
-    this.config = config;
-    this.interval = config.interval || this.interval;
-  }
-
-  _dialogPromise = null;
-  _alertPromise = null;
-  tabId = Math.random();
-  interval = ONE_HOUR;
-  container = document.createElement('div');
-  storage = new Storage();
-  checkingPromise = null;
-  guest = false;
-
-  userAgreement = DEFAULT_AGREEMENT;
-  userConsent = DEFAULT_CONSENT;
-
-  startChecking = () => {
-    this.intervalId = setInterval(this.checkConsentAndShowDialog, this.interval);
-    window.addEventListener('storage', this.onStorageEvent);
-    this.checkConsentAndShowDialog();
-  };
-
-  stopChecking = () => {
-    clearInterval(this.intervalId);
-    window.removeEventListener('storage', this.onStorageEvent);
-    this.hideDialog();
-  };
-
-  onStorageEvent = event => {
-    if (event.key === storageKey) {
-      const {tabId, command} = JSON.parse(event.newValue);
-
-      if (tabId !== this.tabId) {
-        if (command === showMessage) {
-          this.checkConsentAndShowDialog(true);
-        } else if (command === hideMessage) {
-          this.hideDialogAndAlert(true);
-        }
-      }
-    }
-  };
-
-  _notifyAboutShowing = () => {
-    localStorage.setItem(storageKey, JSON.stringify({command: showMessage, tabId: this.tabId}));
-  };
-
-  _notifyAboutHiding = () => {
-    localStorage.setItem(storageKey, JSON.stringify({command: hideMessage, tabId: this.tabId}));
-  };
-
-  getUserAgreement = async () => {
-    this.userAgreement = await this.config.getUserAgreement() || DEFAULT_AGREEMENT;
-    return this.userAgreement;
-  };
-
-  getUserConsent = async () => {
-    const {guest, endUserAgreementConsent} = await this.config.getUserConsent();
-
-    this.guest = guest;
-
-    if (guest) {
-      this.userConsent = await this.storage.get(GUEST_SESSION_KEY) || this.userConsent;
-    } else {
-      this.userConsent = endUserAgreementConsent || this.userConsent;
-    }
-
-    return this.userConsent;
-  };
-
-  checkConsentAndShowDialog = async withoutNotifications => {
-    if (await this.checkConsent()) {
-      return this.hideDialogAndAlert(withoutNotifications);
-    } else {
-      return this.showDialogOrAlert(withoutNotifications);
-    }
-  };
-
-  checkConsent = async () => {
-    if (!this.checkingPromise) {
-      this.checkingPromise = Promise.all([
-        this.getUserAgreement(),
-        this.getUserConsent()
-      ]);
-    }
-
-    const [userAgreement, userConsent] = await this.checkingPromise;
-    this.checkingPromise = null;
-
-    const {enabled, majorVersion: actualVersion} = userAgreement;
-    const {accepted, majorVersion: acceptedVersion} = userConsent;
-
-    return !enabled || (accepted && actualVersion === acceptedVersion);
-  };
-
-  showAlert = withoutNotifications => {
-    if (this._alertPromise) {
-      return this._alertPromise;
-    }
-    this._alertPromise = new Promise((resolve, reject) => {
-      const {userAgreement, reviewNow, remindLater} = (this.config.translations || {});
-      const onRemind = () => {
-        this.hideDialogAndAlert(withoutNotifications);
-        reject('Postponed');
-      };
-
-      const onReview = async () => {
-        await this.showDialog(true, false, {onRemindLater: onRemind});
-        this.hideAlert(withoutNotifications);
-        resolve();
-      };
-
-      const message = (
-        <Group>
-          <span>{userAgreement || 'User Agreement'}</span>
-          <Link onClick={onReview} data-test="review">{reviewNow || 'Review now'}</Link>
-          <Link onClick={onRemind} data-test="later">{remindLater || 'Remind me later'}</Link>
-        </Group>
-      );
-      this.alertKey = alertService.addAlert(message, Alert.Type.WARNING, 0, {closeable: false});
-    });
-
-    if (!withoutNotifications) {
-      this._notifyAboutShowing();
-    }
-
-    return this._alertPromise;
-  };
-
-  hideAlert = withoutNotifications => {
-    const {onRemindLater} = this.config;
-
-    alertService.remove(this.alertKey);
-    this.alertKey = null;
-    this._alertPromise = null;
-
-    if (onRemindLater) {
-      onRemindLater();
-    }
-
-    if (!withoutNotifications) {
-      this._notifyAboutHiding();
-    }
-  };
-
-  showDialog = (withoutNotifications, preview = false, restOptions) => {
-    const {translations, onDialogShow} = this.config;
-    const {text} = this.userAgreement;
-    const show = true;
-
-    if (!this._dialogPromise) {
-      this._dialogPromise = new Promise((resolve, reject) => {
-        const onAccept = async () => {
-          await this.onAccept();
-          resolve();
-        };
-
-        const onDecline = async () => {
-          await this.onDecline();
-          reject();
-        };
-
-        const onClose = this.hideDialogAndAlert;
-
-        const props = {
-          text,
-          show,
-          onAccept,
-          onDecline,
-          onClose,
-          translations,
-          preview, ...restOptions
-        };
-
-        render(
-          <UserAgreement {...props}/>,
-          this.container
-        );
-
-        if (onDialogShow) {
-          onDialogShow();
-        }
-      });
-
-      if (!withoutNotifications) {
-        this._notifyAboutShowing();
-      }
-    }
-
-    return this._dialogPromise;
-  };
-
-  hideDialog = withoutNotifications => {
-    const {onDialogHide} = this.config;
-
-    unmountComponentAtNode(this.container);
-
-    if (onDialogHide) {
-      onDialogHide();
-      this._dialogPromise = null;
-
-      if (!withoutNotifications) {
-        this._notifyAboutHiding();
-      }
-    }
-  };
-
-  showDialogOrAlert = (...args) => {
-    if (this.guest && !this.userAgreement.requiredForREST) {
-      return this.showAlert(...args);
-    }
-    return this.showDialog(...args);
-  };
-
-  hideDialogAndAlert = (...args) => {
-    this.hideAlert(...args);
-    this.hideDialog(...args);
-  };
-
-  onAccept = async () => {
-    const {setUserConsent, onAccept} = this.config;
-
-    if (this.guest) {
-      const {majorVersion, minorVersion} = this.userAgreement;
-      this.userConsent = {majorVersion, minorVersion, accepted: true};
-      await this.storage.set(GUEST_SESSION_KEY, this.userConsent);
-    } else {
-      this.userConsent = await setUserConsent();
-    }
-
-    this.hideDialog();
-
-    if (onAccept) {
-      onAccept();
-    }
-  };
-
-  onDecline = () => {
-    const {onDecline} = this.config;
-
-    this.hideDialog();
-
-    if (onDecline) {
-      onDecline();
-    }
-  };
-}

package/components/user-agreement/user-agreement.examples.js

@@ -1,112 +0,0 @@
-import React, {Component} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import alert from '@jetbrains/ring-ui/components/alert-service/alert-service';
-
-import UserAgreement from '@jetbrains/ring-ui/components/user-agreement/user-agreement';
-import UserAgreementService from '@jetbrains/ring-ui/components/user-agreement/service';
-import text from '@jetbrains/ring-ui/components/user-agreement/toolbox.eula';
-
-export default {
-  title: 'Components/User Agreement',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: UserAgreement,
-    framework: 'react',
-    hermione: {captureSelector: '*[data-test~=ring-dialog]'},
-    a11y: {element: '*[data-test~=ring-dialog]'}
-  }
-};
-
-export const dialog = args => (
-  <div>
-    <UserAgreement {...args}/>
-  </div>
-);
-
-dialog.args = {
-  show: true,
-  text,
-  onRemindLater: null
-};
-dialog.argTypes = {
-  onRemindLater: {}
-};
-dialog.parameters = {
-  actions: {argTypesRegex: '^on(?!RemindLater).*'}
-};
-dialog.storyName = 'dialog';
-
-function noop() {}
-export const service = ({
-  onGetUserAgreement = noop,
-  onGetUserConsent = noop,
-  onSetUserConsent = noop,
-  onAccept,
-  onDecline,
-  onDialogShow,
-  onDialogHide
-}) => {
-  const fakeUserAgreement = {
-    enabled: true,
-    majorVersion: 1.0,
-    text
-  };
-
-  const fakeUserConsent = {
-    guest: true,
-    accepted: false
-  };
-
-  const agreementService = new UserAgreementService({
-    getUserAgreement: () => {
-      onGetUserAgreement(fakeUserAgreement);
-      return fakeUserAgreement;
-    },
-    getUserConsent: () => {
-      onGetUserConsent(fakeUserConsent);
-      return fakeUserConsent;
-    },
-    setUserConsent: onSetUserConsent,
-    onAccept,
-    onDecline,
-    onDialogShow,
-    onDialogHide,
-    interval: 10000
-  });
-
-  class UserAgreementServiceDemo extends Component {
-    componentDidMount() {
-      agreementService.startChecking();
-    }
-
-    componentWillUnmount() {
-      agreementService.stopChecking();
-      alert._getShowingAlerts().forEach(item => alert.removeWithoutAnimation(item.key));
-    }
-
-    render() {
-      return null;
-    }
-  }
-
-  return <UserAgreementServiceDemo/>;
-};
-
-service.argTypes = {
-  onGetUserAgreement: {},
-  onGetUserConsent: {},
-  onSetUserConsent: {},
-  onAccept: {},
-  onDecline: {},
-  onDialogShow: {},
-  onDialogHide: {}
-};
-service.storyName = 'service';
-service.parameters = {
-  component: null,
-  hermione: {skip: true},
-  a11y: {element: '*[data-test="alert-container"]'}
-};