@jetbrains/ring-ui 6.0.1-beta.0 → 6.0.1

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

@@ -1,84 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import TableLegacyToolbar from '../table-legacy-ng/table-legacy-ng__toolbar';
-import Selection from '../table/selection';
-import data from '../table/table.examples.json';
-
-import TableNG from './table-ng';
-
-export default {
-  title: 'Legacy Angular/Table Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Table.'
-  }
-};
-
-export const basic = () => {
-  angular.
-    module(APP_NAME, [TableNG, TableLegacyToolbar]).
-    controller('testCtrl', function controller() {
-      const columns = [
-        {
-          id: 'country',
-          title: 'Country'
-        },
-        {
-          id: 'city',
-          title: 'City',
-          sortable: true
-        },
-        {
-          id: 'url',
-          title: 'URL'
-        }
-      ];
-
-      this.data = data;
-      this.columns = columns;
-      this.selection = new Selection({data});
-      this.sortKey = 'city';
-      this.sortOrder = false;
-
-      this.onSelect = selection => {
-        this.selection = selection;
-      };
-
-      this.onSort = ({column: {id: key}, order}) => {
-        this.sortOrder = order;
-        this.data = this.data.
-          slice().
-          sort((itemA, itemB) =>
-            (order ? itemA[key].localeCompare(itemB[key]) : itemB[key].localeCompare(itemA[key]))
-          );
-      };
-    });
-
-  return `
-      <div ng-controller="testCtrl as ctrl">
-        <h3>Title of the page</h3>
-
-        <rg-legacy-table-toolbar stick>
-          <div>Some toolbar content. Focused: {{ctrl.selection.getFocused().country}}</div>
-        </rg-legacy-table-toolbar>
-
-        <rg-table
-          data="ctrl.data"
-          columns="ctrl.columns"
-          selection="ctrl.selection"
-          on-select="ctrl.onSelect"
-          autofocus="true"
-          sticky-header-offset="'56px'"
-
-          sort-key="ctrl.sortKey"
-          sort-order="ctrl.sortOrder"
-          on-sort="ctrl.onSort"
-        ></rg-table>
-      </div>
-    `;
-};
-
-basic.storyName = 'Table Ng';

package/components/table-ng/table-ng.js

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

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

@@ -1,30 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import RingTabs from './tabs-ng';
-
-export default {
-  title: 'Legacy Angular/Tabs Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Displays a tabset.'
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [RingTabs]);
-
-  return `
-      <rg-tabs class="container container_tabs">
-        <rg-tabs-pane x-title="Settings">Settings tab content</rg-tabs-pane>
-        <rg-tabs-pane x-title="Access" counter="7">Access tab content</rg-tabs-pane>
-        <rg-tabs-pane x-title="Disabled" ng-disabled="true" counter="8">Inaccessible tab content</rg-tabs-pane>
-        <rg-tabs-pane x-title="Members">Members tab content</rg-tabs-pane>
-        <rg-tabs-pane x-title="Members" counter="666">Members 666 tab content</rg-tabs-pane>
-      </rg-tabs>
-    `;
-};
-
-basic.storyName = 'basic';

package/components/tabs-ng/tabs-ng.js

@@ -1,206 +0,0 @@
-import angular from 'angular';
-
-import className from 'classnames';
-
-import styles from '../tabs/tabs.css';
-
-import template from './tabs-ng__template';
-
-/**
- * @name Tabs Ng
- */
-
-const angularModule = angular.module('Ring.tabs', []);
-
-angularModule.directive('rgTabs', function rgTabsDirective($location, $rootScope) {
-  return {
-    restrict: 'E',
-    transclude: true,
-    template,
-    replace: true,
-
-    scope: {
-      tabParameter: '@',
-      tabsClass: '=',
-      control: '=?',
-      disableLocationChanging: '='
-    },
-
-    controller: function controller($scope) {
-      $scope.panes = [];
-      $scope.current = null;
-      $scope.styles = styles;
-
-      function getTabIdFromUrl() {
-        return $location.search()[$scope.tabParameter];
-      }
-
-      function doSelect(newPane, skipUrlUpdate) {
-        if (newPane === $scope.current || newPane.ngDisabled) {
-          return;
-        }
-
-        for (let index = 0; index < $scope.panes.length; index++) {
-          const pane = $scope.panes[index];
-
-          // Update current tab
-          if (pane === newPane || pane.tabId === newPane) {
-            $scope.current = newPane;
-            pane.selected = true;
-
-            if (!skipUrlUpdate) {
-              $location.search($scope.tabParameter, newPane.tabId);
-            }
-          } else { // Deselect all other
-            pane.selected = false;
-          }
-        }
-      }
-
-      function getNextPaneIndex(reverseOrder) {
-        const currentTabIndex = $scope.panes.indexOf($scope.current);
-        let next = currentTabIndex;
-
-        do {
-          next += (reverseOrder ? -1 : 1);
-        } while (next > -1 && next < $scope.panes.length && $scope.panes[next].ngDisabled);
-
-        if (next >= $scope.panes.length) {
-          next = $scope.panes.length - 1;
-        } else if (next < 0) {
-          next = 0;
-        }
-
-        // if no suitable tab found till the end of array
-        if ($scope.panes[next].ngDisabled) {
-          return currentTabIndex;
-        }
-
-        return next;
-      }
-
-      function getCurrentTab() {
-        const currentTabId = getTabIdFromUrl();
-
-        if (currentTabId) {
-          const currentTab = $scope.panes.find(pane => pane.tabId === currentTabId);
-
-          if (currentTab && !currentTab.ngDisabled) {
-            return currentTab;
-          } else {
-            return $scope.panes[getNextPaneIndex()];
-          }
-        } else {
-          return $scope.panes[0];
-        }
-      }
-
-      // controller methods
-
-      function checkCurrentTab() {
-        if ($scope.panes.length) {
-          doSelect(getCurrentTab(), true);
-        }
-      }
-
-      this.addTab = tab => {
-        $scope.panes.push(tab);
-
-        if ($scope.panes.length === 1 || tab.tabId === getTabIdFromUrl()) {
-          doSelect(tab, true);
-        }
-      };
-
-      this.removeTab = tab => {
-        const index = $scope.panes.indexOf(tab);
-
-        $scope.panes.splice(index, 1);
-        checkCurrentTab();
-      };
-
-      this.checkPane = checkCurrentTab;
-
-      // scope
-
-      $scope.$on('$destroy', $rootScope.$on('$routeUpdate', checkCurrentTab));
-
-      // Exposed methods
-      $scope.control = {};
-
-      $scope.control.isLast =
-        () => $scope.panes.indexOf($scope.current) === $scope.panes.length - 1;
-
-      $scope.control.isFirst = () => $scope.panes.indexOf($scope.current) === 0;
-
-      $scope.control.select = pane => {
-        doSelect(pane, $scope.disableLocationChanging);
-      };
-
-      $scope.control.next = () => {
-        const next = getNextPaneIndex();
-        doSelect($scope.panes[next], $scope.disableLocationChanging);
-      };
-
-      $scope.control.prev = () => {
-        const prev = getNextPaneIndex(true);
-        doSelect($scope.panes[prev], $scope.disableLocationChanging);
-      };
-
-      $scope.keyMap = {
-        next: $scope.control.next,
-        prev: $scope.control.prev,
-        focus: () => {
-          $scope.focus = !$scope.focus;
-          return !$scope.focus;
-        }
-      };
-
-      // For some reason ng-class doesn't work properly on tabs.
-      // From time to time several tabs look like selected despite correct scope state.
-      // I think this bug depends on the frequency of addTab calls (actually on digests)
-      // and ng-class detection of added and removed classes becomes broken.
-      // @maxim.erekhinskiy
-      $scope.tabClass = pane => className(styles.title, styles.titleLegacy, {
-        [styles.selected]: pane.selected
-      });
-
-      this.$onInit = () => {
-        if (!$scope.tabParameter) {
-          $scope.tabParameter = 'tab';
-        }
-      };
-    }
-  };
-});
-
-angularModule.directive('rgTabsPane', function rgTabsPaneDirective() {
-  return {
-    require: '^rgTabs',
-    restrict: 'E',
-    transclude: true,
-
-    scope: {
-      title: '@',
-      counter: '@',
-      tabId: '@?',
-      tabIndex: '@?',
-      selected: '=?',
-      ngDisabled: '=?'
-    },
-
-    link: function link(scope, element, attrs, tabsCtrl) {
-      scope.tabId = scope.tabId || scope.title.toLowerCase().replace(' ', '-');
-      scope.tabIndex = scope.tabIndex ? +scope.tabIndex : 0;
-
-      tabsCtrl.addTab(scope);
-
-      scope.$on('$destroy', () => {
-        tabsCtrl.removeTab(scope);
-      });
-    },
-
-    template: '<div class="ring-tabs__content" ng-class="{\'ring-tabs__content_active\':selected}" ng-if="selected" ng-transclude></div>'
-  };
-});
-
-export default angularModule.name;

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

@@ -1,76 +0,0 @@
-import 'angular';
-import 'angular-route';
-import 'angular-mocks';
-
-import styles from '../tabs/tabs.css';
-
-import Tabs from './tabs-ng';
-
-describe('Tabs Ng', () => {
-  let $rootScope;
-  let $compile;
-
-  function getActiveTab(element) {
-    return {
-      title: element[0].querySelector('[data-test-active="true"]'),
-      content: element[0].querySelector('div[ng-transclude]')
-    };
-  }
-
-  beforeEach(window.module(Tabs));
-
-  /* global inject */
-  beforeEach(inject((_$rootScope_, _$compile_) => {
-    $rootScope = _$rootScope_;
-    $compile = _$compile_;
-  }));
-
-  describe('DOM', () => {
-    it('Empty tabs', () => {
-      const element = $compile(
-        '<rg-tabs>' +
-        '</rg-tabs>'
-      )($rootScope);
-
-      $rootScope.$digest();
-      element[0].className.should.contain(styles.tabs);
-    });
-
-    it('One tab', () => {
-      const element = $compile(
-        '<rg-tabs>' +
-        '<rg-tabs-pane x-title="General">' +
-        'General' +
-        '</rg-tabs-pane>' +
-        '</rg-tabs>'
-      )($rootScope);
-
-      $rootScope.$digest();
-      const tab = getActiveTab(element);
-
-      tab.title.firstChild.should.contain.text('General');
-      tab.content.should.contain.text('General');
-    });
-
-    it('Two tabs', () => {
-      const element = $compile(
-        '<rg-tabs>' +
-        '<rg-tabs-pane x-title="General">' +
-        'General' +
-        '</rg-tabs-pane>' +
-        '<rg-tabs-pane x-title="Second">' +
-        'Second' +
-        '</rg-tabs-pane>' +
-        '</rg-tabs>'
-      )($rootScope);
-      element.isolateScope().control.next();
-
-      $rootScope.$digest();
-
-      const tab = getActiveTab(element);
-
-      tab.title.firstChild.should.contain.text('Second');
-      tab.content.should.contain.text('Second');
-    });
-  });
-});

package/components/tabs-ng/tabs-ng__template.js

@@ -1,38 +0,0 @@
-export default `<div
-  ng-class=":: styles.tabs"
-  rg-shortcuts="ring-tabs"
-  shortcuts-map="keyMap"
-  shortcuts-focus="focus"
->
-  <div
-    ng-class=":: [styles.titles, tabsClass]"
-    role="tablist"
-  >
-    <button
-      role="tab"
-      type="button"
-      ng-repeat="pane in panes | orderBy:'tabIndex'"
-      ng-click="control.select(pane)"
-      ng-attr-tabindex="{{(pane.selected || pane.ngDisabled) ? -1 : 0}}"
-      ng-disabled="pane.ngDisabled"
-      data-test="ring-tab"
-      ng-attr-data-test-active="{{pane.selected  ? 'true' : 'false'}}"
-      ng-attr-class="{{ tabClass(pane) }}"
-    ><span
-      ng-class=":: styles.visible">{{pane.title}}<span
-      ng-class=":: styles.tabCounter"
-      ng-show="pane.counter !== undefined">{{ pane.counter }}</span
-    ></span><!--
-      hack for preserving constant tab width
-    --><span ng-class=":: styles.hidden">{{pane.title}}<span
-      ng-class=":: styles.tabCounter" ng-show="pane.counter !== undefined">{{ pane.counter }}</span></span>
-      <span ng-class=":: styles.hiddenBold">{{pane.title}}<span
-        ng-class=":: styles.tabCounter" ng-show="pane.counter !== undefined">{{ pane.counter }}</span></span>
-      <span ng-class=":: styles.hiddenRegular">{{pane.title}}<span
-        ng-class=":: styles.tabCounter" ng-show="pane.counter !== undefined">{{ pane.counter }}</span></span>
-    </button>
-  </div>
-
-  <div ng-transclude></div>
-
-</div>`;

package/components/tags-input-ng/tags-input-ng.examples.js

@@ -1,41 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import TagsInputNG from './tags-input-ng';
-
-export default {
-  title: 'Legacy Angular/Tags Input Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    notes: 'Provides an Angular wrapper for Tags Input.'
-  }
-};
-
-export const basic = ({onAddTag, onRemoveTag}) => {
-  angular.module(APP_NAME, [TagsInputNG]).controller('ExampleCtrl', function ctrl($q) {
-    this.tags = [{key: 'test1', label: 'test1'}, {key: 'test2', label: 'test2'}];
-
-    this.dataSource = () =>
-      $q.when([{key: 'test3', label: 'test3'}, {key: 'test4', label: 'test4'}]);
-
-    this.onAddTag = onAddTag;
-
-    this.removeTag = onRemoveTag;
-  });
-  return `
-      <div ng-controller="ExampleCtrl as ctrl">
-        <rg-tags-input
-          tags="ctrl.tags"
-          x-data-source="ctrl.dataSource"
-          placeholder="'Type something'"
-          on-add-tag="ctrl.onAddTag"
-          on-remove-tag="ctrl.removeTag"
-        ></rg-tags-input>
-      </div>
-    `;
-};
-
-basic.storyName = 'Tags Input Ng';
-basic.argTypes = {onAddTag: {}, onRemoveTag: {}};

package/components/tags-input-ng/tags-input-ng.js

@@ -1,7 +0,0 @@
-/**
- * @name Tags Input Ng
- */
-import angularComponentFactory from '../global/angular-component-factory';
-import TagsInput from '../tags-input/tags-input';
-
-export default angularComponentFactory(TagsInput, 'TagsInput').name;

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

@@ -1,32 +0,0 @@
-import angular from 'angular';
-
-import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
-
-import TemplateNG from './template-ng';
-
-export default {
-  title: 'Legacy Angular/Template Ng',
-  decorators: [angularDecorator()],
-
-  parameters: {
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  angular.module(APP_NAME, [TemplateNG]);
-
-  return '<rg-template template="\'<label>Input<br/><input/></label>\'"></rg-template>';
-};
-
-basic.storyName = 'basic';
-
-export const withController = () => {
-  angular.module(APP_NAME, [TemplateNG]).controller('ExampleCtrl', function ctrl() {
-    this.template = '<button>button</button>';
-  });
-
-  return '<rg-template template="ctrl.template" ng-controller="ExampleCtrl as ctrl"></rg-template>';
-};
-
-withController.storyName = 'with controller';

package/components/template-ng/template-ng.js

@@ -1,57 +0,0 @@
-import angular from 'angular';
-
-import RingAngularComponent from '../global/ring-angular-component';
-
-/**
- * @name Template Ng
-*/
-
-const angularModule = angular.module('Ring.template', []);
-
-class RgTemplateController extends RingAngularComponent {
-  currentScope = null;
-
-  constructor(...args) {
-    super(...args);
-
-    const {$scope, $attrs} = this.$inject;
-    $scope.$watch($attrs.rgTemplate || $attrs.template, this.render);
-  }
-
-  render = template => {
-    const {$scope, $element, $compile} = this.$inject;
-
-    this.cleanup();
-
-    this.currentScope = $scope.$new();
-
-    this.currentScope.$evalAsync(() => {
-      $element.html(template);
-      this.addInnerClass();
-      $compile($element.contents())(this.currentScope);
-    });
-  };
-
-  addInnerClass = () => {
-    const {rgTemplateClass} = this.$inject.$attrs;
-    if (rgTemplateClass) {
-      this.$inject.$element.contents().addClass(rgTemplateClass);
-    }
-  };
-
-  cleanup() {
-    if (this.currentScope) {
-      this.currentScope.$destroy();
-      this.currentScope = null;
-    }
-  }
-}
-RgTemplateController.$inject = ['$scope', '$element', '$attrs', '$compile'];
-
-angularModule.directive('rgTemplate', function rgTemplateDirective() {
-  return {
-    controller: RgTemplateController
-  };
-});
-
-export default angularModule.name;

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

@@ -1,97 +0,0 @@
-/* global inject */
-import Template from './template-ng';
-
-describe('Template Ng', () => {
-  let $compile;
-  let $rootScope;
-
-  beforeEach(window.module(Template));
-
-  beforeEach(inject((_$rootScope_, _$compile_) => {
-    $rootScope = _$rootScope_;
-    $compile = _$compile_;
-  }));
-
-  afterEach(() => {
-    $rootScope.$destroy();
-  });
-
-  function build(template) {
-    const $element = $compile(template)($rootScope);
-    const element = $element[0];
-    const ctrl = $element.controller('rgTemplate');
-
-    $rootScope.$digest();
-
-    return {element, ctrl};
-  }
-
-  it('should work as an element', () => {
-    const {element} = build('<rg-template template="\'<test></test>\'"></rg-template>');
-
-    element.should.contain('test');
-  });
-
-  it('should work as an attribute', () => {
-    const {element} = build('<div rg-template="\'<test></test>\'"></div>');
-
-    element.should.contain('test');
-  });
-
-  it('should render a given template', () => {
-    $rootScope.template = '<test></test>';
-    const {element} = build('<rg-template template="template"></rg-template>');
-
-    element.should.contain('test');
-  });
-
-  it('should apply a given template class', () => {
-    $rootScope.template = '<test></test>';
-    const {element} = build('<rg-template template="template" rg-template-class="test-class"></rg-template>');
-
-    element.querySelector('test').should.match('.test-class');
-  });
-
-  it('should watch a given template expression', () => {
-    $rootScope.template = '<test></test>';
-    const {element} = build('<rg-template template="template"></rg-template>');
-    $rootScope.template = '<test2></test2>';
-    $rootScope.$digest();
-
-    element.should.contain('test2');
-  });
-
-  it('should watch a parent scope', () => {
-    $rootScope.template = '<test>{{ id }}</test>';
-    $rootScope.id = '123';
-    const {element} = build('<rg-template template="template"></rg-template>');
-
-    element.should.contain.text('123');
-
-    $rootScope.id = '456';
-    $rootScope.$digest();
-
-    element.should.contain.text('456');
-  });
-
-  it('should work correctly with an empty template', () => {
-    $rootScope.template = '<test></test>';
-    const {element} = build('<rg-template template="template"></rg-template>');
-    $rootScope.template = '';
-    $rootScope.$digest();
-
-    element.should.be.empty;
-  });
-
-  it('should remove current elements after changing a template expression', () => {
-    $rootScope.template = '<test></test>';
-    const {element} = build('<div><rg-template template="template"></rg-template></div>');
-
-    element.should.contain('test');
-
-    $rootScope.template = '<test2></test2>';
-    $rootScope.$digest();
-
-    element.should.not.contain('test');
-  });
-});