@jetbrains/ring-ui 5.1.22 → 6.0.1

package/components/title-ng/title-ng.js

@@ -1,120 +0,0 @@
-/**
- * @name Title Ng
- */
-import angular from 'angular';
-
-const angularModule = angular.module('Ring.title', []);
-
-angularModule.directive('rgPageTitle', function rgPageTitleDirective() {
-  return ({
-    scope: {
-      rgPageTitle: '@?',
-      noTitle: '@?',
-      delimiter: '@'
-    },
-
-    controller: function controller($rootScope, $scope, $element, $attrs, pageTitle, $injector) {
-      const element = $element[0];
-
-      // Get title prefix from title element
-      const elementText = element.textContent;
-      let offScopeWatch = angular.noop;
-
-      // Set page title on route change
-      const offRouteWatch = $rootScope.$on('$routeChangeSuccess', (event, current) => {
-        //Do nothing if we're being redirected
-        if (current.$$route && current.$$route.redirectTo) { // eslint-disable-line angular/no-private-call
-          return;
-        }
-        let routeTitle = current.$$route && current.$$route.title; // eslint-disable-line angular/no-private-call
-
-        pageTitle.setCurrent($scope.rgPageTitle || elementText);
-
-        // Use title: false to prevent title change on route
-        if (routeTitle !== false) {
-          if (angular.isArray(routeTitle) || angular.isFunction(routeTitle)) {
-            //Invoke injector
-            routeTitle = $injector.invoke(routeTitle);
-          }
-          pageTitle.addElement(routeTitle || $scope.noTitle);
-        }
-      });
-
-      $scope.$on('$destroy', () => {
-        offRouteWatch();
-        offScopeWatch();
-      });
-
-      this.$onInit = () => {
-        pageTitle.setDelimiter($scope.delimiter);
-
-        if ($attrs.rgPageTitle) {
-          offScopeWatch = $scope.$watch('rgPageTitle', newBaseTitle => {
-            pageTitle.setRootElement(newBaseTitle);
-          });
-        }
-      };
-    }
-  });
-});
-
-angularModule.service('pageTitle', function service($interpolate, $document) {
-  let delimiter = ' | ';
-  let current = $document[0].title;
-
-  function setTitle(text) {
-    current = text && $interpolate(text)();
-    updateDocumentTitle(current);
-  }
-
-  function updateDocumentTitle(text) {
-    $document[0].title = text;
-  }
-
-  function prepend(element) {
-    setTitle(current ? element + delimiter + current : element);
-  }
-
-  function replacePart(element, replaceIndex = 0) {
-    const titleElements = current.split(delimiter);
-    titleElements[replaceIndex === -1 ? titleElements.length - 1 : replaceIndex] = element;
-
-    setTitle(titleElements.join(delimiter));
-  }
-
-  this.setDelimiter = newDelimiter => {
-    delimiter = newDelimiter || delimiter;
-  };
-
-  this.setCurrent = newBase => {
-    current = newBase;
-  };
-
-  this.setText = text => updateDocumentTitle(text);
-
-  this.addElement = (element, fieldName) => {
-    if (element.$promise) {
-      element.$promise.then(Data => {
-        this.addElement(Data[fieldName || 'name']);
-      });
-    } else {
-      prepend(fieldName ? element[fieldName] : element);
-    }
-  };
-
-  this.updateElement = (element, fieldName) => {
-    if (element.$promise) {
-      element.$promise.then(Data => {
-        this.updateElement(Data[fieldName || 'name']);
-      });
-    } else {
-      replacePart(fieldName ? element[fieldName] : element);
-    }
-  };
-
-  this.setRootElement = element => {
-    replacePart(element, -1);
-  };
-});
-
-export default angularModule.name;

package/components/title-ng/title-ng.stories.js

@@ -1,30 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import TitleNG from './title-ng';
-
-export default {
-  title: 'Legacy Angular/Title Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'A component for manipulating page title.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [TitleNG]).run(pageTitle => {
-    pageTitle.addElement('Some page');
-  });
-
-  return `
-        <h4>Open the example in a separate tab to see how tab title changes.</h4>
-
-        <!--It is better to use this directive with <title> tag in your <head> section.-->
-        <div rg-page-title="App name">Title should be "Some page | App name"</div>
-    `;
-};
-
-basic.storyName = 'Title Ng';

package/components/title-ng/title-ng.test.js

@@ -1,47 +0,0 @@
-/* global inject */
-import angular from 'angular';
-
-import 'angular-mocks';
-import TitleNg from './title-ng';
-
-
-describe('pageTitle', () => {
-  beforeEach(window.module(TitleNg));
-  beforeEach(window.module($provide => {
-    $provide.value('$document', angular.element({title: ''}));
-  }));
-
-
-  let pageTitle;
-  let $document;
-  beforeEach(inject((_pageTitle_, _$document_) => {
-    pageTitle = _pageTitle_;
-    $document = _$document_;
-  }));
-
-
-  it('should export service', () => {
-    pageTitle.should.exist;
-  });
-
-
-  it('should set page title', () => {
-    pageTitle.addElement('foo');
-
-    $document[0].title.should.equal('foo');
-  });
-
-
-  it('should interpolate string', () => {
-    pageTitle.addElement('{{"foo" | uppercase}}');
-
-    $document[0].title.should.equal('FOO');
-  });
-
-
-  it('should allow set just text without interpolation', () => {
-    pageTitle.setText('{{A > B}}');
-
-    $document[0].title.should.equal('{{A > B}}');
-  });
-});

package/components/toggle-ng/toggle-ng.js

@@ -1,8 +0,0 @@
-/**
- * @name Toggle Ng
- */
-import angularComponentFactory from '../global/angular-component-factory';
-import Toggle from '../toggle/toggle';
-
-export default angularComponentFactory(Toggle, 'Toggle').name;
-

package/components/toggle-ng/toggle-ng.stories.js

@@ -1,22 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import ToggleNG from './toggle-ng';
-
-export default {
-  title: 'Legacy Angular/Toggle Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Toggle.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [ToggleNG]);
-
-  return '<rg-toggle>Toggle</rg-toggle>';
-};
-
-basic.storyName = 'Toggle Ng';

package/components/tooltip-ng/tooltip-ng.css

@@ -1,25 +0,0 @@
-@import "../global/variables.css";
-
-@value unit from "../global/global.css";
-
-:global(.ring-tooltip-ng) {
-  max-width: calc(unit * 50);
-  padding: unit;
-
-  text-align: left;
-}
-
-:global(.ring-tooltip-ng__hint-icon) {
-  position: relative;
-  top: -2px;
-
-  margin-left: unit;
-
-  cursor: pointer;
-
-  color: var(--ring-icon-color);
-}
-
-:global(.ring-tooltip-ng_open .ring-tooltip-ng__hint-icon) {
-  color: var(--ring-link-hover-color);
-}

package/components/tooltip-ng/tooltip-ng.js

@@ -1,100 +0,0 @@
-import angular from 'angular';
-
-import {createElement} from 'react';
-import classNames from 'classnames';
-
-import {render} from '../global/react-render-adapter';
-import Popup from '../popup/popup';
-
-import './tooltip-ng.css';
-
-/**
- * @name Tooltip Ng
-*/
-
-const OPEN_CLASS = 'ring-tooltip-ng_open';
-
-
-const name = angular.module('Ring.tooltip', []);
-
-name.directive('rgTooltip', function rgTooltipDirective(RgTooltipPopup) {
-  return {
-    restrict: 'A',
-
-    link: function link(scope, iElement, iAttrs) {
-      const element = iElement[0];
-      const getTooltipText = () => {
-        try {
-          return scope.$eval(iAttrs.rgTooltip);
-        } catch (err) {
-          return iAttrs.rgTooltip;
-        }
-      };
-      const popupWrapper = new RgTooltipPopup(element, getTooltipText);
-
-      element.addEventListener('mouseover', () => {
-        popupWrapper.displayTooltip(iAttrs.rgTooltipClass);
-        element.classList.add(OPEN_CLASS);
-      });
-
-      element.addEventListener('mouseout', () => {
-        popupWrapper.hideTooltip();
-        element.classList.remove(OPEN_CLASS);
-      });
-    }
-  };
-});
-
-name.factory('RgTooltipPopup', function RgTooltipPopupDirective() {
-  // eslint-disable-next-line func-names
-  return function (anchorElement, textGetter) {
-    this.wrapperElement = document.createElement('span');
-
-    this.defaultProps = {
-      anchorElement,
-      maxHeight: 400,
-      attached: false,
-      dontCloseOnAnchorClick: true,
-      trapFocus: false
-    };
-
-    this.renderPopup = props => render(
-      createElement(Popup, {
-        ...this.defaultProps,
-        ...props,
-        ref: instance => {
-          if (instance != null) {
-            this.popup = instance;
-          }
-        }
-      }, this.text),
-      this.wrapperElement
-    );
-
-    this.displayTooltip = customClass => {
-      const text = textGetter();
-      if (!text) {
-        return;
-      }
-
-      this.text = text;
-
-      const className = classNames({
-        'ring-tooltip-ng': true
-      }, customClass);
-
-      this.renderPopup({
-        hidden: false,
-        className
-      });
-    };
-
-    this.hideTooltip = () => {
-      this.renderPopup({
-        hidden: true
-      });
-    };
-  };
-});
-
-export default name.name;

package/components/tooltip-ng/tooltip-ng.stories.js

@@ -1,36 +0,0 @@
-import angular from 'angular';
-
-import warningIcon from '@jetbrains/icons/warning';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import IconNG from '../icon-ng/icon-ng';
-
-import TooltipNG from './tooltip-ng';
-
-export default {
-  title: 'Legacy Angular/Tooltip Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Tooltip.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [IconNG, TooltipNG]).controller('testController', function ctrl() {
-    this.warningIcon = warningIcon;
-    this.testMessageWithQuote = "It's a message with a single quotation mark";
-  });
-
-  return `
-      <div ng-controller="testController as ctrl" style="margin: 16px;">
-        Some text that needs an explanation
-        <rg-icon glyph="{{ctrl.warningIcon}}" rg-tooltip="'Test message'"></rg-icon>
-        <rg-icon glyph="{{ctrl.warningIcon}}" rg-tooltip="{{ctrl.testMessageWithQuote}}"></rg-icon>
-        <rg-icon glyph="{{ctrl.warningIcon}}" rg-tooltip="{{ctrl.someUndefinedValue}}"></rg-icon>
-      </div>
-    `;
-};
-
-basic.storyName = 'Tooltip Ng';

package/components/tooltip-ng/tooltip-ng.test.js

@@ -1,69 +0,0 @@
-/* global inject */
-/* eslint-disable angular/no-angular-mock */
-
-import angular from 'angular';
-import 'angular-mocks';
-
-import Tooltip from './tooltip-ng';
-
-describe('Tooltip Ng', () => {
-  const INNER_TEXT = 'test foo';
-  let RgTooltipPopup;
-  let element;
-  let popupWrapper;
-  let innerTextGetter;
-
-  beforeEach(angular.mock.module(Tooltip));
-
-  beforeEach(inject(_RgTooltipPopup_ => {
-    RgTooltipPopup = _RgTooltipPopup_;
-    innerTextGetter = sandbox.spy(() => INNER_TEXT);
-  }));
-
-  beforeEach(() => {
-    const container = document.createElement('div');
-    element = document.createElement('div');
-    container.appendChild(element);
-    popupWrapper = new RgTooltipPopup(element, innerTextGetter);
-  });
-
-  it('Should open popup', () => {
-    popupWrapper.displayTooltip();
-
-    popupWrapper.popup.props.hidden.should.be.false;
-  });
-
-  it('Should set ring-tooltip-ng class for popup', () => {
-    popupWrapper.displayTooltip();
-    const popup = popupWrapper.popup.popup;
-
-    popup.should.have.class('ring-tooltip-ng');
-  });
-
-  it('Should set custom class for popup', () => {
-    popupWrapper.displayTooltip('custom-class');
-    const popup = popupWrapper.popup.popup;
-
-    popup.should.have.class('custom-class');
-  });
-
-  it('Should display message inside', () => {
-    popupWrapper.displayTooltip();
-    popupWrapper.popup.popup.should.have.text(INNER_TEXT);
-  });
-
-  it('Should recalculate text on each opening', () => {
-    popupWrapper.displayTooltip();
-    popupWrapper.hideTooltip();
-    popupWrapper.displayTooltip();
-
-    innerTextGetter.should.been.calledTwice;
-  });
-
-  it('Should close popup', () => {
-    popupWrapper.displayTooltip();
-    popupWrapper.hideTooltip();
-
-    popupWrapper.popup.isVisible().should.be.false;
-  });
-});

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

@@ -1,16 +0,0 @@
-/**
- * @name User Card Ng
- */
-import angular from 'angular';
-
-import {createAngularComponent} from '../global/angular-component-factory';
-import SmartUserCardTooltip from '../user-card/smart-user-card-tooltip';
-import UserCardTooltip from '../user-card/tooltip';
-
-const angularModule = angular.module('Ring.user-card', []);
-
-angularModule.
-  component('rgUserCardTooltip', createAngularComponent(UserCardTooltip, 'UserCardTooltip')).
-  component('rgSmartUserCardTooltip', createAngularComponent(SmartUserCardTooltip, 'SmartUserCardTooltip'));
-
-export default angularModule.name;

package/components/user-card-ng/user-card-ng.stories.js

@@ -1,66 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import hubConfig from '../../.storybook/hub-config';
-
-import Auth from '../auth/auth';
-import {createHubUserCardSource} from '../hub-source/hub-source__user';
-
-import {avatarDataUri} from '../avatar/avatar-example-datauri';
-
-import UserCardNG from './user-card-ng';
-
-export default {
-  title: 'Legacy Angular/User Card Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for User Card.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [UserCardNG]).controller('ExampleCtrl', function ctrl() {
-    this.user = {
-      login: 'testuser',
-      name: 'Test User',
-      email: 'testuser@mail.com',
-      avatarUrl: avatarDataUri,
-      href: `${hubConfig.serverUri}/users/0`
-    };
-  });
-
-  return `
-      <div ng-controller="ExampleCtrl as ctrl">
-        <rg-user-card-tooltip user="ctrl.user">
-          Hover me to see {{ctrl.user.name}}'s card
-        </rg-user-card-tooltip>
-      </div>
-    `;
-};
-
-basic.storyName = 'basic';
-
-export const loadOnHover = () => {
-  angular.module(APP_NAME, [UserCardNG]).controller('ExampleCtrl', function ctrl() {
-    const auth = new Auth(hubConfig);
-
-    this.userSource = async () => {
-      await auth.init();
-      const userSource = createHubUserCardSource(auth, auth.user.id);
-      return userSource();
-    };
-  });
-
-  return `
-      <div ng-controller="ExampleCtrl as ctrl">
-        <rg-smart-user-card-tooltip user-data-source="ctrl.userSource">
-          Hover me to see current user's card
-        </rg-smart-user-card-tooltip>
-      </div>
-    `;
-};
-
-loadOnHover.storyName = 'load on hover';