@jetbrains/ring-ui 5.1.1 → 6.0.2-beta.0

package/components/error-page-ng/error-page-ng.test.js

@@ -1,138 +0,0 @@
-/* eslint-disable angular/deferred */
-
-import 'angular';
-import 'angular-mocks';
-import 'angular-route';
-
-import AuthProviderMock from '../auth-ng/auth-ng.mock';
-
-import ErrorPage from './error-page-ng';
-
-const fakeUserPermissions = {
-  load: () => Promise.resolve({has: () => false})
-};
-
-const MESSAGE_SELECTOR = '[data-test~=ring-error-message]';
-const TITLE_SELECTOR = '[data-test~=ring-error-message-title]';
-
-describe('Error Page Ng', () => {
-  beforeEach(
-    window.module('Ring.error-page',
-      $provide => {
-        $provide.provider('auth', AuthProviderMock);
-        $provide.value('userPermissions', fakeUserPermissions);
-      })
-  );
-
-  /* global inject */
-  it('should define module', inject(() => {
-    window.angular.module(ErrorPage).should.exist;
-  }));
-
-  it('should define factory errorPageConfiguration', inject(errorPageConfiguration => {
-    errorPageConfiguration.should.exist;
-  }));
-
-  it('should compile directive to content if no errors', inject(($rootScope, $compile) => {
-    let elem = window.angular.element('<div rg-error-page><div class="content">Hello!</div></div>');
-    elem = $compile(elem)($rootScope);
-    $rootScope.$digest();
-
-    elem[0].querySelector('.content').should.have.text('Hello!');
-    elem[0].should.not.contain(MESSAGE_SELECTOR);
-  }));
-
-  it('should compile directive to default error if has empty error',
-    inject(($rootScope, $compile, RingMessageBundle) => {
-      let elem = window.angular.
-        element(`
-<div rg-error-page="{error: {}}"><div class="content">Hello!</div></div>
-      `);
-      elem = $compile(elem)($rootScope);
-      $rootScope.$digest();
-
-      elem[0].should.contain(MESSAGE_SELECTOR);
-      elem[0].querySelector(TITLE_SELECTOR).should.
-        contain.text(RingMessageBundle.errorpage_seriouslywrong());
-    })
-  );
-
-  it('should show error message for 404',
-    inject(($rootScope, $compile, RingMessageBundle) => {
-      let elem = window.angular.element(`
-<div rg-error-page="{error: {status: 404}}"><div class="content">Hello!</div></div>
-      `);
-      elem = $compile(elem)($rootScope);
-      $rootScope.$digest();
-
-      elem[0].should.contain(MESSAGE_SELECTOR);
-      elem[0].querySelector(TITLE_SELECTOR).should.contain.text(`404: ${RingMessageBundle.errorpage_404()}`);
-    })
-  );
-
-  it('should not show error message for resolved promise',
-    inject(($rootScope, $compile, $q) => {
-      $rootScope.errorSource = $q.defer();
-
-      let elem = window.angular.element(`
-<div rg-error-page="errorSource"><div class="content">Hello!</div></div>
-      `);
-      elem = $compile(elem)($rootScope);
-      $rootScope.errorSource.resolve();
-      $rootScope.$digest();
-
-      elem[0].querySelector('.content').should.contain.text('Hello!');
-      elem[0].should.not.contain(MESSAGE_SELECTOR);
-    })
-  );
-
-  it('should show error message for empty rejected promise',
-    inject(($rootScope, $compile, RingMessageBundle, $q) => {
-      $rootScope.errorSource = $q.defer();
-      let elem = window.angular.element(`
-<div rg-error-page="errorSource"><div class="content">Hello!</div></div>
-      `);
-      elem = $compile(elem)($rootScope);
-      $rootScope.errorSource.reject();
-      $rootScope.$digest();
-
-      elem[0].should.contain(MESSAGE_SELECTOR);
-      elem[0].querySelector(TITLE_SELECTOR).should.
-        contain.text(RingMessageBundle.errorpage_seriouslywrong());
-    })
-  );
-
-  it('should show error message for rejected promise with code 403',
-    inject(($rootScope, $compile, RingMessageBundle, $q) => {
-      $rootScope.errorSource = $q.defer();
-      let elem = window.angular.element(`
-<div rg-error-page="errorSource"><div class="content">Hello!</div></div>
-      `);
-      elem = $compile(elem)($rootScope);
-      $rootScope.errorSource.reject({status: 403});
-      $rootScope.$digest();
-
-      elem[0].should.contain(MESSAGE_SELECTOR);
-      elem[0].querySelector(TITLE_SELECTOR).should.
-        contain.text(`403: ${RingMessageBundle.errorpage_403()}`);
-    })
-  );
-
-  it('should show error message for rejected resource',
-    inject(($rootScope, $compile, RingMessageBundle, $q) => {
-      const df = $q.defer();
-      $rootScope.errorSource = {$promise: df.promise};
-
-      let elem = window.angular.element(`
-<div rg-error-page="errorSource"><div class="content">Hello!</div></div>
-      `);
-      elem = $compile(elem)($rootScope);
-      df.reject({status: 403});
-      $rootScope.$digest();
-
-      elem[0].should.contain(MESSAGE_SELECTOR);
-      elem[0].querySelector(TITLE_SELECTOR).should.
-        contain.text(`403: ${RingMessageBundle.errorpage_403()}`);
-    })
-  );
-});

package/components/footer-ng/footer-ng.examples.js

@@ -1,35 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-import '../link/link__legacy.css';
-
-import FooterNG from './footer-ng';
-
-export default {
-  title: 'Legacy Angular/Footer Ng',
-  decorators: [angularDecorator()]
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [FooterNG]);
-
-  return `
-      <rg-footer>
-        <rg-footer-left>
-          <rg-footer-line>Left</rg-footer-line>
-          <rg-footer-line>Build 1.0.0 1234</rg-footer-line>
-        </rg-footer-left>
-        <rg-footer-center>
-          <rg-footer-line>
-            <rg-footer-copyright year="2000" company-name="JetBrains"></rg-footer-copyright>
-          </rg-footer-line>
-          <rg-footer-line><a class="ring-link">License agreement</a></rg-footer-line>
-        </rg-footer-center>
-        <rg-footer-right>
-          <rg-footer-line>Right</rg-footer-line>
-        </rg-footer-right>
-      </rg-footer>
-    `;
-};
-
-basic.storyName = 'Footer Ng';

package/components/footer-ng/footer-ng.js

@@ -1,61 +0,0 @@
-import angular from 'angular';
-
-import RingAngularComponent from '../global/ring-angular-component';
-import styles from '../footer/footer.css';
-import {copyright} from '../footer/footer';
-
-/**
- * @name Footer Ng
- */
-
-
-const angularModule = angular.module('Ring.footer', []);
-
-class rgFooterComponent extends RingAngularComponent {
-  styles = styles;
-
-  static transclude = {
-    left: '?rgFooterLeft',
-    center: '?rgFooterCenter',
-    right: '?rgFooterRight'
-  };
-
-  static template = `<footer ng-class=":: $ctrl.styles.footer" data-test="ring-footer">
-  <div ng-class=":: $ctrl.styles.columnLeft">
-    <div ng-transclude="left" ng-class=":: $ctrl.styles.columnItem"></div>
-  </div>
-
-  <div ng-class=":: $ctrl.styles.columnCenter">
-    <div ng-transclude="center" ng-class=":: $ctrl.styles.columnItem"></div>
-  </div>
-
-  <div ng-class=":: $ctrl.styles.columnRight">
-    <div ng-transclude="right" ng-class=":: $ctrl.styles.columnItem"></div>
-  </div>
-</footer>`;
-}
-
-class rgFooterLineComponent extends RingAngularComponent {
-  static transclude = true;
-
-  static template = `<div class="${styles.line}" ng-transclude></div>`;
-}
-
-class rgFooterCopyrightComponent extends RingAngularComponent {
-  static template = '<span>{{:: $ctrl.copyrightYears}} {{:: $ctrl.companyName}}</span>';
-
-  static bindings = {
-    year: '@',
-    companyName: '@'
-  };
-
-  $onInit() {
-    this.copyrightYears = copyright(this.year);
-  }
-}
-
-angularModule.component('rgFooter', rgFooterComponent);
-angularModule.component('rgFooterLine', rgFooterLineComponent);
-angularModule.component('rgFooterCopyright', rgFooterCopyrightComponent);
-
-export default angularModule.name;

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

@@ -1,41 +0,0 @@
-/*global inject*/
-import 'angular';
-import 'angular-mocks';
-
-import Footer from './footer-ng';
-
-describe('Footer', () => {
-  let element;
-  let scope;
-  let $compile;
-
-  beforeEach(window.module(Footer));
-
-  beforeEach(inject(($rootScope, _$compile_) => {
-    scope = $rootScope.$new();
-    $compile = _$compile_;
-    element = $compile(`
-      <rg-footer>
-        <rg-footer-left>
-          <rg-footer-line>Left column</rg-footer-line>
-        </rg-footer-left>
-        <rg-footer-center>
-          <rg-footer-line><rg-footer-copyright year="2000" company-name="JetBrains"></rg-footer-copyright></rg-footer-line>
-        </rg-footer-center>
-      </rg-footer>
-    `)(scope)[0];
-    scope.$digest();
-  }));
-
-  it('should have root div element', () => {
-    element.should.contain('div');
-  });
-
-  it('should render left column', () => {
-    element.should.contain.text('Left column');
-  });
-
-  it('should copyright', () => {
-    element.should.contain.text('JetBrains');
-  });
-});

package/components/form-ng/error-bubble-ng.css

@@ -1,7 +0,0 @@
-.errorBubbleNg {
-  position: absolute;
-  top: 0;
-  left: calc(100% + 2px);
-
-  display: inline-block;
-}

package/components/form-ng/form-ng.examples.js

@@ -1,73 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import '../form/form.css';
-
-import ButtonNG from '../button-ng/button-ng';
-import SelectNG from '../select-ng/select-ng';
-import CheckboxNG from '../checkbox-ng/checkbox-ng';
-
-import InputNG from '../input-ng/input-ng';
-
-import FormNG from './form-ng';
-
-export default {
-  title: 'Legacy Angular/Form Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Form.'
-  }
-};
-
-export const basic = () => {
-  angular.
-    module(APP_NAME, [FormNG, CheckboxNG, SelectNG, ButtonNG, InputNG]).
-    controller('FormExampleCtrl', function ctrl() {
-      this.checkedModel = true;
-      this.data = [{name: 'Ada'}, {name: 'Nik'}];
-    });
-
-  return `
-      <div style="width: 700px"
-        ng-controller="FormExampleCtrl as formExampleCtrl">
-
-        <form class="ring-form" name="ExampleForm" novalidate>
-          <span class="ring-form__title">Form Title</span>
-
-          <div class="ring-form__group">
-            <rg-input size="M" required ng-model="formExampleCtrl.inputValue" label="Medium Input" name="inputMD" type="text"></rg-input>
-            <div rg-error-bubble="ExampleForm.inputMD"></div>
-          </div>
-
-          <div class="ring-form__group">
-            <rg-select options="item.name for item in formExampleCtrl.data track by item.name"></rg-select>
-            <div class="ring-form__control__description">I am a simple description</div>
-          </div>
-
-          <div class="ring-form__group">
-            <div>
-              <rg-checkbox ng-model="formExampleCtrl.checkedModel">Checkbox 1</rg-checkbox>
-            </div>
-            <div>
-              <rg-checkbox ng-model="formExampleCtrl.checkedModel">Checkbox 2</rg-checkbox>
-            </div>
-            <div>
-              <rg-checkbox>Checkbox 3</rg-checkbox>
-            </div>
-            <div>
-              <rg-checkbox>Checkbox 4</rg-checkbox>
-            </div>
-          </div>
-
-          <div class="ring-form__footer">
-            <rg-button mode="primary">Save</rg-button>
-            <rg-button>Cancel</rg-button>
-          </div>
-        </form>
-      </div>
-    `;
-};
-
-basic.storyName = 'Form Ng';

package/components/form-ng/form-ng.js

@@ -1,176 +0,0 @@
-import angular from 'angular';
-
-import MessageBundle from '../message-bundle-ng/message-bundle-ng';
-import '../input/input-legacy.css';
-import '../error-bubble/error-bubble-legacy.css';
-
-/**
- * @name Form Ng
- */
-
-const angularModule = angular.module('Ring.form', [MessageBundle]);
-
-angularModule.factory('getFormErrorMessages',
-  function getFormErrorMessagesDirective(RingMessageBundle) {
-    function msg(id, formError) {
-      const messageBundleId = `form_${id}`;
-      if (RingMessageBundle.hasOwnProperty(messageBundleId)) {
-        return RingMessageBundle[messageBundleId]();
-      }
-
-      const formErrors = (formError && formError[id]) || [];
-      for (let j = 0; j < formErrors.length; ++j) {
-        if (formErrors[j] && formErrors[j].message) {
-          return formErrors[j].message;
-        }
-      }
-
-      return undefined;
-    }
-
-    return formErrors => {
-      const errorMessages = [];
-      for (const key in formErrors) {
-        if (formErrors.hasOwnProperty(key) && formErrors[key]) {
-          errorMessages.push(msg(key, formErrors));
-        }
-      }
-      return errorMessages;
-    };
-  });
-
-/**
- * <div rg-error-bubble="form.name"></div>
- * @param {object} error-bubble Ng-model for this control
- *
- * Where form.name is a reference to angularJS form input
- */
-angularModule.directive('rgErrorBubble', function rgErrorBubbleDirective(getFormErrorMessages) {
-  return {
-    scope: {
-      errorBubble: '&rgErrorBubble'
-    },
-
-    replace: true,
-    template: `<div class="ring-error-bubble" ng-class="{ active: active, 'ring-error-bubble_material': material }" ng-style="style">
-  <div ng-repeat="errorMessage in getFormErrorMessages(errorBubble().$error)">{{ errorMessage }}</div>
-</div>`,
-
-    link: function link(scope, iElement, iAttrs) {
-      scope.style = {};
-
-      const siblings = Array.from(iElement[0].parentNode.children);
-      let element;
-      let tagName;
-
-      for (let i = 0; i < siblings.length; i++) {
-        tagName = siblings[i].tagName.toLowerCase();
-
-        if (tagName === 'input' || tagName === 'textarea') {
-          element = siblings[i];
-          break;
-        }
-      }
-
-      scope.material = iAttrs.material !== undefined;
-
-      scope.$watch(() => {
-        const result = scope.errorBubble();
-
-        return result.$invalid && result.$dirty;
-      }, active => {
-        scope.active = active;
-
-        if (active && element) {
-          scope.style.left = element.offsetWidth + 2;
-        }
-      });
-
-      scope.getFormErrorMessages = getFormErrorMessages;
-    }
-  };
-});
-/**
- * <input name="confirm" type="password" rg-equal-value="data.password" ng-model="data.confirm">
- * Constraint to be user for confirm password fields.
- */
-angularModule.directive('rgEqualValue', function rgEqualValueDirective() {
-  return {
-    require: 'ngModel',
-
-    link: function link(scope, iElement, iAttrs, ngModelCtrl) {
-      const element = iElement[0];
-
-      function assertEqual(thisValue, thatValue) {
-        ngModelCtrl.$setValidity('equalvalue', thisValue === thatValue);
-      }
-
-      scope.$watch(iAttrs.rgEqualValue, value => {
-        assertEqual(element.value, value);
-      });
-
-      element.addEventListener('keyup', () => {
-        const thatValue = scope.$eval(iAttrs.rgEqualValue);
-        scope.$apply(() => {
-          assertEqual(element.value, thatValue);
-        });
-      });
-    }
-  };
-});
-/**
- * <input name="name" required type="text" ng-class="form.name | rgInputClass:submitted" ng-model="name">
- *
- * Is intended to be used for the value of ng-class. Accepts a reference to an angularJS form input
- */
-angularModule.filter('rgInputClass', () => (input, submitted) => ({
-  'ring-input': true,
-  'ring-input_error': input.$invalid && (input.$dirty || submitted),
-  'ring-input_correct': !input.$invalid && (input.$dirty || submitted)
-}));
-/**
- * <form rg-form-autofill-fix ...>
- *
- * Fixes Chrome bug: https://github.com/angular/angular.js/issues/1460
- */
-angularModule.directive('rgFormAutofillFix', $timeout => ({
-  require: '?form',
-  priority: 10,
-
-  link: function link($scope, element, attrs, form) {
-    if (form) {
-      const POLL_INTERVAL = 150;
-      const MAX_COUNT = 5;
-      let promise;
-      let count = 0;
-
-      (function poll() {
-        let filled;
-
-        angular.forEach(element.find('input'), elem => {
-          const $elem = angular.element(elem);
-          const controller = $elem.controller('ngModel');
-          const val = $elem.val();
-          const type = $elem.attr('type');
-
-          if (controller && val && type !== 'checkbox' && type !== 'radio') {
-            controller.$setViewValue(val);
-            filled = true;
-          }
-        });
-
-        if (!filled || count < MAX_COUNT) {
-          promise = $timeout(poll, POLL_INTERVAL);
-          count++;
-        }
-      }());
-
-      element.on('$destroy', () => {
-        $timeout.cancel(promise);
-      });
-
-    }
-  }
-}));
-
-export default angularModule.name;

package/components/global/angular-component-factory.js

@@ -1,87 +0,0 @@
-import angular from 'angular';
-
-import React from 'react';
-
-import {render, unmountComponentAtNode} from './react-render-adapter';
-import RingAngularComponent from './ring-angular-component';
-
-import DomRenderer from './react-dom-renderer';
-
-function getAngularComponentName(name) {
-  return `rg${name}`;
-}
-
-function createAngularComponent(Component) {
-  const propKeys = Object.keys(Component.propTypes);
-
-  const bindings = {};
-  propKeys.forEach(key => {
-    bindings[key] = '<';
-  });
-
-  return class AngularComponent extends RingAngularComponent {
-    static $inject = ['$scope', '$element', '$transclude'];
-
-    static bindings = bindings;
-    static transclude = true;
-
-    $postLink() {
-      const {$transclude} = this.$inject;
-
-      $transclude(clone => {
-        this.innerNodes = Array.from(clone);
-        this.render();
-      });
-    }
-
-    $onChanges() {
-      if (!this.innerNodes) {
-        return;
-      }
-      this.render();
-    }
-
-    $onDestroy() {
-      unmountComponentAtNode(this.$inject.$element[0]);
-    }
-
-    render() {
-      const {$scope, $element: {0: container}} = this.$inject;
-
-      const props = {};
-      propKeys.forEach(key => {
-        if (this[key] !== undefined) {
-          if (typeof this[key] === 'function') {
-            props[key] = (...rest) => {
-              const ret = this[key](...rest);
-              $scope.$applyAsync();
-              return ret;
-            };
-          } else {
-            props[key] = this[key];
-          }
-        }
-      });
-
-      const hasInnerContent = this.innerNodes && this.innerNodes.length;
-
-      render(
-        <Component {...props}>
-          {hasInnerContent ? <DomRenderer nodes={this.innerNodes}/> : null}
-        </Component>,
-        container
-      );
-    }
-  };
-}
-
-function angularComponentFactory(Component, name) {
-  const angularModuleName = `Ring.${name[0].toLowerCase() + name.slice(1)}`;
-
-  return angular.
-    module(angularModuleName, []).
-    component(getAngularComponentName(name), createAngularComponent(Component));
-}
-
-export default angularComponentFactory;
-export {createAngularComponent};