@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

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/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"]'}
-};

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

@@ -1,88 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-import hubConfig from '../../.storybook/hub-config';
-
-import Auth from '@jetbrains/ring-ui/components/auth/auth';
-import {createHubUserCardSource} from '@jetbrains/ring-ui/components/hub-source/hub-source__user';
-
-import {avatarDataUri} from '@jetbrains/ring-ui/components/avatar/avatar-example-datauri';
-
-import {UserCard, UserCardTooltip, SmartUserCardTooltip} from '@jetbrains/ring-ui/components/user-card/user-card';
-
-export default {
-  title: 'Components/User Card',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'A component that displays user details.'
-  }
-};
-
-export const inline = () => {
-  const user = {
-    login: 'testuser',
-    name: 'Test User',
-    email: 'testuser@mail.com',
-    avatarUrl: avatarDataUri,
-    href: `${hubConfig.serverUri}/users/0`
-  };
-
-  return (
-    <div>
-      <div>Inline user card:</div>
-      <UserCard user={user} data-test="user-card-inline"/>
-
-      <UserCardTooltip user={user}>
-        <span>Hover this text see card in tooltip mode</span>
-      </UserCardTooltip>
-    </div>
-  );
-};
-
-inline.storyName = 'inline';
-
-export const smartTooltip = () => {
-  const user = {
-    login: 'testuser',
-    name: 'Test User',
-    email: 'testuser@mail.com',
-    avatarUrl: avatarDataUri,
-    href: `${hubConfig.serverUri}/users/0`,
-    banned: true,
-    online: false,
-    banReason: 'Bad guy: is accused of stealing potatoes'
-  };
-
-  function loadUser() {
-    return new Promise(resolve => setTimeout(resolve, 10000)).then(() => user);
-  }
-
-  return (
-    <SmartUserCardTooltip userDataSource={loadUser}>
-      <span>Hover this text load user information</span>
-    </SmartUserCardTooltip>
-  );
-};
-
-smartTooltip.storyName = 'smart tooltip';
-smartTooltip.parameters = {hermione: {skip: true}};
-
-export const hubUserCard = () => {
-  const auth = new Auth(hubConfig);
-
-  const waitForAuthAndGetUser = async () => {
-    await auth.init();
-    const userSource = createHubUserCardSource(auth, auth.user.id);
-    return userSource();
-  };
-
-  return (
-    <SmartUserCardTooltip userDataSource={waitForAuthAndGetUser}>
-      <span>Hover this text load user information</span>
-    </SmartUserCardTooltip>
-  );
-};
-
-hubUserCard.storyName = 'hub user card';
-hubUserCard.parameters = {hermione: {skip: true}};

package/components/user-card/user-card.test.js

@@ -1,102 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import {SmartUserCardTooltip, UserCard, UserCardTooltip} from './user-card';
-
-describe('UserCard', () => {
-  const fakeUser = {
-    login: 'testuser',
-    name: 'Test User',
-    email: 'testuser@mail.com',
-    avatarUrl: 'http://some-url',
-    href: 'http://foo'
-  };
-
-  describe('Card', () => {
-    const shallowCard = props => shallow(
-      <UserCard user={fakeUser} {...props}/>
-    );
-    const mountCard = props => mount(<UserCard user={fakeUser} {...props}/>);
-
-    it('should create component', () => {
-      mountCard().should.have.type(UserCard);
-    });
-
-    it('should wrap children with span', () => {
-      shallowCard().should.have.tagName('div');
-    });
-
-    it('should render link', () => {
-      shallowCard({user: {...fakeUser, href: null}}).
-        should.not.have.descendants('a[href="http://foo"]');
-    });
-
-    it('should not render link if user has no href', () => {
-      shallowCard({user: {...fakeUser, href: null}}).
-        should.not.have.descendants('a');
-    });
-
-    it('should use passed className', () => {
-      shallowCard({className: 'test-class'}).should.have.className('test-class');
-    });
-
-    it('should use pass rest props to dom node', () => {
-      shallowCard({'data-test': 'foo'}).should.have.data('test', 'foo');
-    });
-  });
-
-  describe('UserCardTooltip', () => {
-    const anchor = <span data-test="anchor">{'foo'}</span>;
-
-    const mountTooltip = props => mount(
-      <UserCardTooltip user={fakeUser} {...props}>
-        {anchor}
-      </UserCardTooltip>
-    );
-
-    it('should render anchor', () => {
-      const wrapper = mountTooltip();
-
-      wrapper.should.have.descendants('[data-test="anchor"]');
-    });
-
-    it('should allow to render multiple children', () => {
-      const tooltip = props => mount(
-        <UserCardTooltip user={fakeUser} {...props}>
-          <span data-test="anchor">{'foo'}</span>
-          <span data-test="anchor">{'foo'}</span>
-        </UserCardTooltip>
-      );
-
-      const wrapper = tooltip();
-      wrapper.should.have.descendants('[data-test="anchor"]');
-    });
-  });
-
-  describe('SmartUserCardTooltip', () => {
-    const anchor = <span>{'foo'}</span>;
-
-    function userSource() {
-      return fakeUser;
-    }
-
-    const mountTooltip = props => mount(
-      <SmartUserCardTooltip userDataSource={userSource} {...props}>
-        {anchor}
-      </SmartUserCardTooltip>
-    );
-
-    it('should load user on hover', () => {
-      const wrapper = mountTooltip();
-      sandbox.stub(wrapper.instance(), 'loadUser').callsFake(() => {});
-
-      // Force the component and wrapper to update so that the stub is used https://github.com/airbnb/enzyme/issues/586
-      wrapper.instance().forceUpdate();
-      wrapper.update();
-
-      wrapper.simulate('mouseenter');
-
-      wrapper.instance().loadUser.should.have.been.called;
-    });
-  });
-});

package/components/welcome.examples.js

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import ReadMe from '../README.md';
-import Contributing from '../CONTRIBUTING.md';
-import Changelog from '../CHANGELOG.md';
-
-import reactDecorator from '../.storybook/react-decorator';
-
-import Markdown from '@jetbrains/ring-ui/components/markdown/markdown';
-
-import License from 'raw-loader!../LICENSE.txt';
-
-export default {
-  title: 'Ring UI/Welcome',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    hermione: {skip: true}
-  }
-};
-
-export const gettingStarted = () => <Markdown source={ReadMe}/>;
-export const contributing = () => <Markdown source={Contributing}/>;
-export const changelog = () => <Markdown source={Changelog}/>;
-export const license = () => <pre>{License}</pre>;

package/dist/_helpers/inject-styles.js

@@ -1,22 +0,0 @@
-import { conicGradientWithMask } from '../global/conic-gradient.js';
-import { injectRuleSet } from '../global/inject-styles.js';
-import memoize from '../global/memoize.js';
-import radialGradientMask from '../global/radial-gradient-mask.js';
-import Theme from '../global/theme.js';
-
-var modules_e49a3529 = {"unit":"8px","loader":"loader_rui_423e","spin":"spin_rui_423e","pulse":"pulse_rui_423e","children":"children_rui_423e"};
-
-const IMAGE_SIZE = 32;
-var injectStyles = memoize(() => {
-  const mask = radialGradientMask(modules_e49a3529.unit, {
-    /* eslint-disable no-magic-numbers */
-    transparent: `${23 / 32 * 100}%`,
-    white: `${25 / 32 * 100}%`
-    /* eslint-enable */
-
-  });
-  injectRuleSet(`.${modules_e49a3529.loader}_${[Theme.LIGHT]}::after, .ring-loader-inline::after`, conicGradientWithMask(mask, '#ff00eb,#bd3bff,#008eff, #58ba00,#f48700,#ff00eb', IMAGE_SIZE));
-  injectRuleSet(`.${modules_e49a3529.loader}_${[Theme.DARK]}::after, .ring-loader-inline_dark::after`, conicGradientWithMask(mask, '#ff2eef,#d178ff,#289fff,#88d444,#ffe000,#ff2eef', IMAGE_SIZE));
-});
-
-export { injectStyles as i, modules_e49a3529 as m };

package/dist/global/conic-gradient.js

@@ -1,35 +0,0 @@
-import 'conic-gradient';
-import memoize from './memoize.js';
-import supportsCss from './supports-css.js';
-
-const conicGradient = memoize(_ref => {
-  let {
-    stops,
-    size
-  } = _ref;
-  return supportsCss('background-image: conic-gradient(white, black)') ? `conic-gradient(${stops})` : new ConicGradient({
-    stops,
-    size
-  });
-});
-var conicGradient$1 = (stops => conicGradient(stops).toString());
-const conicGradientWithMask = (mask, stops, size) => {
-  const gradient = conicGradient({
-    stops,
-    size
-  });
-
-  if (!mask.supports && gradient instanceof ConicGradient) {
-    Object.defineProperty(gradient, 'svg', {
-      value: gradient.svg.replace('<image ', `
-        ${mask.svgDefs}    
-        <image mask="url(#${mask.maskId})" `)
-    });
-  }
-
-  return { ...mask.css,
-    'background-image': gradient.toString()
-  };
-};
-
-export { conicGradientWithMask, conicGradient$1 as default };

package/dist/global/radial-gradient-mask.js

@@ -1,49 +0,0 @@
-import getUID from './get-uid.js';
-import supportsCss from './supports-css.js';
-import './memoize.js';
-
-const radialGradient = (length, stops) => `radial-gradient(${length}, ${Object.entries(stops).map(entry => entry.join(' ')).join(', ')})`;
-
-var radialGradientMask = ((length, stops) => {
-  for (const prefix of ['', '-webkit-']) {
-    const property = `${prefix}mask-image`;
-    const declaration = `${property}: radial-gradient(black, white)`;
-
-    if (supportsCss(declaration)) {
-      return {
-        supports: true,
-        css: {
-          [property]: radialGradient(length, stops)
-        }
-      };
-    }
-  }
-
-  const gradientId = getUID('gradient');
-  const maskId = getUID('mask');
-  const svgDefs = `
-    <svg>
-      <defs>
-        <radialGradient id="${gradientId}">
-          ${Object.entries(stops).map(_ref => {
-    let [color, offset] = _ref;
-    return `
-            <stop offset="${offset}" stop-color="${color}"/>
-          `;
-  }).join('')}
-        </radialGradient>
-        <mask id="${maskId}">
-          <rect height="100%" width="100%" fill="url(#${gradientId})"/>
-        </mask>
-      </defs>
-    </svg>
-  `;
-  return {
-    supports: false,
-    css: {},
-    maskId,
-    svgDefs
-  };
-});
-
-export { radialGradientMask as default };

package/dist/global/supports-css.js

@@ -1,20 +0,0 @@
-import memoize from './memoize.js';
-
-var supportsCss = memoize(declaration => {
-  const [property, value] = declaration.split(': ');
-  const camelCaseProperty = property.replace(/-(\w)/g, (_, letter) => letter.toUpperCase());
-  const div = document.createElement('div');
-
-  if (div.style[camelCaseProperty] === undefined) {
-    return false;
-  }
-
-  if (value) {
-    div.style[camelCaseProperty] = value;
-    return Boolean(div.style[camelCaseProperty]);
-  }
-
-  return true;
-});
-
-export { supportsCss as default };

package/dist/global/variables_dark.js

@@ -1,57 +0,0 @@
-var variables_dark = {
-  '--ring-line-color': '#475159',
-  '--ring-borders-color': '#406380',
-  '--ring-icon-color': '#80929d',
-  '--ring-icon-secondary-color': '#80929d',
-  '--ring-border-disabled-color': '#475159',
-  '--ring-border-hover-color': '#70b1e6',
-  '--ring-icon-error-color': '#c22731',
-  '--ring-icon-warning-color': '#cc8b00',
-  '--ring-icon-success-color': '#1c8c32',
-  '--ring-popup-border-components': '0, 42, 76',
-  '--ring-popup-border-color': 'rgba(var(--ring-popup-border-components), 0.1)',
-  '--ring-popup-shadow-color': 'rgba(var(--ring-popup-border-components), 0.15)',
-  '--ring-message-shadow-color': 'rgba(var(--ring-popup-border-components), 0.3)',
-  '--ring-pinned-shadow-color': '#000',
-
-  /* Text */
-  '--ring-hint-color': '#80929d',
-  '--ring-link-color': '#70b1e6',
-  '--ring-error-color': '#db5860',
-  '--ring-warning-color': '#eda200',
-  '--ring-success-color': '#59a869',
-  '--ring-text-color': '#bbb',
-  '--ring-heading-color': 'var(--ring-text-color)',
-  '--ring-secondary-color': '#80929d',
-  '--ring-disabled-color': '#80929d',
-
-  /* Background */
-  '--ring-content-background-color': '#23272b',
-  '--ring-popup-background-color': '#111314',
-  '--ring-sidebar-background-color': '#28343d',
-  '--ring-selected-background-color': '#062640',
-  '--ring-hover-background-color': '#0b1a26',
-  '--ring-message-background-color': 'var(--ring-popup-background-color)',
-  '--ring-navigation-background-color': '#111314',
-  '--ring-tag-background-color': '#3e4d59',
-  '--ring-removed-background-color': '#8f5247',
-  '--ring-warning-background-color': '#593d01',
-  '--ring-added-background-color': '#365947',
-
-  /* Code */
-  '--ring-code-background-color': '#2b2b2b',
-  '--ring-code-color': '#a9b7c6',
-  '--ring-code-meta-color': '#bbb529',
-  '--ring-code-keyword-color': '#cc7832',
-  '--ring-code-tag-background-color': '#2b2b2b',
-  '--ring-code-tag-color': '#e8BF6a',
-  '--ring-code-tag-font-weight': 'normal',
-  '--ring-code-field-color': '#9876aa',
-  '--ring-code-attribute-color': '#bababa',
-  '--ring-code-number-color': '#6897bb',
-  '--ring-code-string-color': '#6a8759',
-  '--ring-code-addition-color': '#447152',
-  '--ring-code-deletion-color': '#656e76'
-};
-
-export { variables_dark as default };

package/dist/loader-inline/inject-styles.js

@@ -1,11 +0,0 @@
-import '../global/conic-gradient.js';
-import '../global/inject-styles.js';
-import '../global/memoize.js';
-import '../global/radial-gradient-mask.js';
-import '../global/theme.js';
-export { i as default } from '../_helpers/inject-styles.js';
-import 'conic-gradient';
-import '../global/supports-css.js';
-import '../global/get-uid.js';
-import '../_helpers/_rollupPluginBabelHelpers.js';
-import 'react';