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

package/components/shortcuts/shortcuts.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {shallow, mount} from 'enzyme';
+
+import simulateCombo from '../../test-helpers/simulate-combo';
+import getUID from '../global/get-uid';
+
+import Shortcuts, {ShortcutsProps} from './shortcuts';
+
+type ShortcutsAttrs = JSX.LibraryManagedAttributes<typeof Shortcuts, ShortcutsProps>
+type FactoryProps = Omit<ShortcutsAttrs, 'map' | 'scope'>
+
+describe('ShortcutsComponent', () => {
+  const factory = (props?: FactoryProps) => (
+    <Shortcuts
+      map={{enter: sandbox.spy()}}
+      scope={getUID('shortcuts-test-')}
+      {...props}
+    />
+  );
+
+  const shallowShortcuts = (props?: FactoryProps) => shallow(factory(props));
+  const mountShortcuts = (props?: FactoryProps) => mount(factory(props));
+
+
+  it('should initialize', () => {
+    shallowShortcuts().should.exist;
+  });
+
+
+  it('should call shortcut handler', () => {
+    const wrapper = mountShortcuts();
+    simulateCombo('enter');
+
+    wrapper.prop('map').enter.should.be.called;
+  });
+
+  it('should enable shortcuts if disabled becomes "false"', () => {
+    const wrapper = mountShortcuts({disabled: true});
+
+    simulateCombo('enter');
+    wrapper.prop('map').enter.should.not.be.called;
+
+    wrapper.setProps({disabled: false});
+
+    simulateCombo('enter');
+    wrapper.prop('map').enter.should.be.called;
+  });
+});

package/components/shortcuts/shortcuts.ts

@@ -0,0 +1,64 @@
+import {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+
+import shortcuts, {ShortcutsMap, ShortcutsScopeOptions} from './core';
+
+export interface ShortcutsProps {
+  map: ShortcutsMap
+  scope: string
+  options: ShortcutsScopeOptions
+  children?: React.ReactNode
+  disabled?: boolean | null | undefined
+}
+
+export default class Shortcuts extends PureComponent<ShortcutsProps> {
+  static propTypes = {
+    map: PropTypes.object.isRequired,
+    scope: PropTypes.string.isRequired,
+    options: PropTypes.object,
+    disabled: PropTypes.bool,
+    children: PropTypes.node
+  };
+
+  static defaultProps = {
+    options: {}
+  };
+
+  componentDidMount() {
+    if (!this.props.disabled) {
+      this.turnShorcutsOn();
+    }
+  }
+
+  componentDidUpdate(prevProps: ShortcutsProps) {
+    const {disabled} = this.props;
+    if (!prevProps.disabled && disabled) {
+      this.turnShorcutsOff();
+    }
+    if (prevProps.disabled && !disabled) {
+      this.turnShorcutsOn();
+    }
+  }
+
+  componentWillUnmount() {
+    if (!this.props.disabled) {
+      this.turnShorcutsOff();
+    }
+  }
+
+  turnShorcutsOn() {
+    const {map, scope, options} = this.props;
+    shortcuts.bindMap(map, this.props);
+    shortcuts.pushScope(scope, options);
+  }
+
+  turnShorcutsOff() {
+    const {scope} = this.props;
+    shortcuts.unbindScope(scope);
+    shortcuts.spliceScope(scope);
+  }
+
+  render() {
+    return this.props.children || null;
+  }
+}

package/components/shortcuts-hint-ng/shortcuts-hint-ng.examples.js

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import ShortcutsHintNg from '@jetbrains/ring-ui/components/shortcuts-hint-ng/shortcuts-hint-ng';
+import ShortcutsHintNg from './shortcuts-hint-ng';
 
 export default {
   title: 'Legacy Angular/ShortcutsHint Ng',

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

@@ -2,10 +2,10 @@ import angular from 'angular';
 
 import angularDecorator, {APP_NAME} from '../../.storybook/angular-decorator';
 
-import '@jetbrains/ring-ui/components/link/link__legacy.css';
-import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
+import '../link/link__legacy.css';
+import SelectNG from '../select-ng/select-ng';
 
-import SidebarNG from '@jetbrains/ring-ui/components/sidebar-ng/sidebar-ng';
+import SidebarNG from './sidebar-ng';
 
 export default {
   title: 'Legacy Angular/Sidebar Ng',

package/components/storage/storage.examples.ts

@@ -0,0 +1,37 @@
+import Storage from './storage';
+
+export default {
+  title: 'Components/Storage',
+
+  parameters: {
+    notes: 'Provides a façade to localStorage/sessionStorage/cookies.',
+    hermione: {skip: true}
+  }
+};
+
+export const basic = () => {
+  const STORAGE_KEY = 'storage-example-key';
+  const storage = new Storage();
+  const node = document.createElement('div');
+
+  let value;
+
+  async function init() {
+    const storedValue = await storage.get(STORAGE_KEY);
+    if (!storedValue) {
+      const generatedValue = Math.random().toString();
+      await storage.set(STORAGE_KEY, generatedValue);
+      value = generatedValue;
+    } else {
+      value = storedValue;
+    }
+
+    node.innerText = `Stored value = ${value}`;
+  }
+
+  init();
+
+  return node;
+};
+
+basic.storyName = 'Storage';

package/components/storage/storage.test.ts

@@ -0,0 +1,254 @@
+import {StorageInterface} from './storage';
+import LocalStorage from './storage__local';
+import FallbackStorage from './storage__fallback';
+
+// eslint-disable-next-line import/no-commonjs
+const MockedStorage: typeof LocalStorage = require('imports-loader?imports=default|storage-mock|window!./storage__local').default;
+
+function noop() {}
+
+type Circular = {
+  circular?: Circular
+}
+
+function testStorage(storage: StorageInterface) {
+  describe('set', () => {
+    it('should be fulfilled', () => storage.set('empty', {}).should.be.fulfilled);
+
+    it('should correctly set url incompatible characters', async () => {
+      await storage.set('test;', 'value;');
+      const value = await storage.get('test;');
+      'value;'.should.equal(value);
+    });
+
+    it('should fail on wrong input (e.g. on circular objects)', () => {
+      const circular: Circular = {};
+      circular.circular = circular;
+
+      return storage.set('circular', circular).should.be.rejected;
+    });
+  });
+
+  describe('get', () => {
+    const test = {a: 666};
+
+    it('should get items', async () => {
+      await storage.set('test2', test);
+      const value = await storage.get('test2');
+      test.should.deep.equal(value);
+    });
+
+    it('should not return same objects', async () => {
+      await storage.set('test', test);
+      const value = await storage.get('test');
+      test.should.not.equal(value);
+    });
+
+    it('should return null when there is no item', () => storage.get('test').should.become(null));
+  });
+
+  describe('remove', () => {
+    it('should remove present items', async () => {
+      await storage.set('empty', {});
+      await storage.remove('empty');
+      storage.get('empty').should.become(null);
+    });
+
+    it('should be fulfilled when is correct', async () => {
+      await storage.set('empty', {});
+      storage.remove('empty').
+        should.be.fulfilled;
+    });
+
+    it('should be fulfilled for missing element', () => (
+      storage.remove('missing').should.be.fulfilled
+    ));
+  });
+
+  describe('each', () => {
+    it('should be fulfilled', async () => {
+      await storage.set('test1', '');
+      storage.each(noop).
+        should.be.fulfilled;
+    });
+
+    it('should iterate over items', async () => {
+      const iterator = sandbox.stub();
+      await storage.set('test', 'value');
+      await storage.each(iterator);
+      iterator.should.have.been.calledWith('test', 'value');
+    });
+
+    it('should not iterate without items', async () => {
+      const iterator = sandbox.stub();
+      await storage.each(iterator);
+      iterator.should.not.been.called;
+    });
+
+    it('should iterate over all items', async () => {
+      const iterator = sandbox.stub();
+      await storage.set('test1', '');
+      await storage.set('test2', '');
+      await storage.set('test3', '');
+      await storage.each(iterator);
+      iterator.should.have.been.calledThrice;
+    });
+
+    it('should fail on wrong callback', async () => {
+      await storage.set('test', '');
+      // @ts-expect-error testing a wrong usage
+      storage.each().should.be.rejected;
+    });
+  });
+}
+
+function testStorageEvents(storage: StorageInterface) {
+  describe('events', () => {
+    let stop: () => void;
+
+    afterEach(() => {
+      stop();
+    });
+
+    it('on after set should be fired', () => {
+      const testEvent = 'testKey';
+
+      const change = new Promise(resolve => {
+        stop = storage.on(testEvent, resolve);
+      });
+
+      storage.set(testEvent, 'testValue');
+
+      return change.should.be.fulfilled;
+    });
+
+    it('on after set should be fired with correct value', () => {
+      const testEvent = 'testKey2';
+      const testValue = 'testValue';
+
+      const change = new Promise(resolve => {
+        stop = storage.on(testEvent, resolve);
+      });
+
+      storage.set(testEvent, testValue);
+
+      return change.should.become(testValue);
+    });
+
+    it('on after remove should be fired with null', async () => {
+      const testEvent = 'testKey3';
+      const testValue = 'test2Value';
+
+      // Set test value and wait for it
+      storage.set(testEvent, testValue);
+
+      const disposer: () => void = await new Promise(resolve => {
+        const stopSetListening = storage.on(testEvent, () => {
+          resolve(stopSetListening);
+        });
+      });
+      disposer();
+
+      // Set up listening for test target change
+      const change = new Promise(resolve => {
+        stop = storage.on(testEvent, resolve);
+      });
+
+      // Trigger target remove action
+      storage.remove(testEvent);
+
+      change.should.become(null);
+    });
+
+    it('on after set with other key shouldn\'t be fired', () => {
+      const clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
+      const spy = sandbox.stub();
+
+      stop = storage.on('testKey4', spy);
+      storage.set('testWrong', 'testValue');
+
+      clock.tick(1);
+      spy.should.not.have.been.called;
+    });
+
+    it('stop should stop', () => {
+      const clock = sandbox.useFakeTimers({toFake: ['setTimeout']});
+      const spy = sandbox.spy();
+
+      const testEvent = 'testKey5';
+      stop = storage.on(testEvent, spy);
+      stop();
+      storage.set(testEvent, 'testValue');
+
+      clock.tick(1);
+      spy.should.not.have.been.called;
+    });
+  });
+}
+
+describe('Storage', () => {
+  describe('Local', () => {
+    beforeEach(() => {
+      localStorage.clear();
+      sessionStorage.clear();
+    });
+
+    const storage = new LocalStorage();
+    const storageSession = new LocalStorage({
+      type: 'session'
+    });
+
+    describe('Long-term', () => {
+      testStorage(storage);
+    });
+    describe('Session', () => {
+      testStorage(storageSession);
+    });
+    testStorageEvents(new MockedStorage());
+
+    describe('specific', () => {
+      beforeEach(() => {
+        localStorage.setItem('invalid-json', 'invalid-json');
+      });
+
+      it('should get non-parseable values', () => (
+        storage.get('invalid-json').should.be.become('invalid-json')
+      ));
+
+      it('shouldn\'t break iteration on non-parseable values', () => storage.each(noop).should.be.fulfilled);
+
+      it('should iterate over items with non-parseable values', async () => {
+        const iterator = sandbox.stub();
+        await storage.set('test', 'value');
+        await storage.each(iterator);
+        iterator.should.have.been.calledWith('invalid-json', 'invalid-json');
+      });
+    });
+  });
+
+  describe('Fallback', () => {
+    const cookieName = 'testCookie';
+
+    beforeEach(() => {
+      document.cookie = `${cookieName}=;`;
+    });
+
+    const storage = new FallbackStorage({
+      cookieName,
+      checkDelay: 200
+    });
+
+    const storageSession = new FallbackStorage({
+      cookieName,
+      checkDelay: 200,
+      type: 'session'
+    });
+    describe('Long-term', () => {
+      testStorage(storage);
+    });
+    describe('Session', () => {
+      testStorage(storageSession);
+    });
+    testStorageEvents(storage);
+  });
+});

package/components/storage/storage.ts

@@ -0,0 +1,44 @@
+import LocalStorage from './storage__local';
+import FallbackStorage from './storage__fallback';
+
+export interface StorageConfig {
+  type?: 'local' | 'session' | null | undefined
+  cookieName?: string | null | undefined
+  checkDelay?: number | null | undefined
+}
+
+export interface StorageInterface {
+  get<T>(name: string): Promise<T | null>
+  set<T>(name: string, value: T | null): Promise<T | null>
+  remove(name: string): Promise<void>
+  each<R>(callback: (item: string, value: unknown) => R | Promise<R>): Promise<R[]>
+  on<T>(name: string, callback: (value: T | null) => void): () => void
+}
+
+export interface StorageClass {
+  new (config?: StorageConfig | undefined): StorageInterface
+  QUOTA?: number
+}
+
+/**
+ * @name Storage
+ */
+
+/**
+ * @constructor
+ * @extends {LocalStorage}
+ */
+let Storage: StorageClass = LocalStorage;
+
+// Using try/catch here because of IE10+ protected mode and other browsers' quirks
+// See https://github.com/Modernizr/Modernizr/blob/master/feature-detects/storage/localstorage.js
+try {
+  const temp = 'testStorage';
+  localStorage.setItem(temp, temp);
+  localStorage.removeItem(temp);
+} catch (e) {
+  Storage = FallbackStorage;
+}
+
+const ActualStorage = Storage;
+export default ActualStorage;

package/components/storage/storage__fallback.ts

@@ -0,0 +1,211 @@
+import deepEqual from 'deep-equal';
+
+import {StorageInterface, StorageConfig} from './storage';
+
+const DEFAULT_CHECK_DELAY = 3000;
+const COOKIE_EXPIRES = 365;
+const QUOTA = 4093;
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
+const SECONDS_IN_DAY = 24 * 60 * 60 * 1000;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Data = Record<string, any>
+
+/**
+ * @prop {string} cookieName
+ *
+ * @param {{cookieName: string}} config
+ * @param {{checkDelay: number}} config
+ * @param {{type: string}} config
+ * @return {FallbackStorage}
+ * @constructor
+ */
+export default class FallbackStorage implements StorageInterface {
+  static DEFAULT_COOKIE_NAME = 'localStorage';
+  static DEFAULT_SESSION_COOKIE_NAME = 'sessionStorage';
+  static DEFAULT_CHECK_DELAY = DEFAULT_CHECK_DELAY;
+  static COOKIE_EXPIRES = COOKIE_EXPIRES;
+
+  /**
+   * Maximum storage size
+   * @see http://browsercookielimits.squawky.net/
+   * @type {number}
+   */
+  static QUOTA = QUOTA;
+
+  /**
+   * @param {string} name
+   * @param {string} value
+   * @param {number} days
+   * @private
+   */
+  private static _createCookie(name: string, value: string, days: number | null) {
+    let date;
+    let expires;
+
+    if (days) {
+      date = new Date();
+      date.setTime(date.getTime() + (days * SECONDS_IN_DAY));
+      expires = `; expires=${date.toUTCString()}`;
+    } else {
+      expires = ';';
+    }
+
+    document.cookie = `${name}=${value}${expires}; path=/`;
+  }
+
+  /**
+   *
+   * @param {string} name
+   * @return {string}
+   * @private
+   */
+  private static _readCookie(name: string) {
+    const nameEQ = `${name}=`;
+    const cookies = document.cookie.split(';');
+
+    let cookie;
+    for (let i = 0; i < cookies.length; i++) {
+      cookie = cookies[i];
+      while (cookie.charAt(0) === ' ') {
+        cookie = cookie.substring(1, cookie.length);
+      }
+
+      if (cookie.indexOf(nameEQ) === 0) {
+        return cookie.substring(nameEQ.length, cookie.length);
+      }
+    }
+
+    return undefined;
+  }
+
+  cookieName: string;
+  checkDelay: number;
+  expires: number | null;
+  constructor(config: StorageConfig = {}) {
+    const session = config.type === 'session';
+
+    this.cookieName = config.cookieName ||
+      (
+        session
+          ? FallbackStorage.DEFAULT_SESSION_COOKIE_NAME
+          : FallbackStorage.DEFAULT_COOKIE_NAME
+      );
+    this.checkDelay = config.checkDelay || FallbackStorage.DEFAULT_CHECK_DELAY;
+    this.expires = session ? FallbackStorage.COOKIE_EXPIRES : null;
+  }
+
+  /**
+   * @return {Promise}
+   * @private
+   */
+  private _read(): Promise<Data> {
+    return new Promise<Data>((resolve, reject) => {
+      const rawData = FallbackStorage._readCookie(this.cookieName);
+      if (rawData != null) {
+        resolve(JSON.parse(decodeURIComponent(rawData)));
+      } else {
+        reject();
+      }
+    }).catch(() => ({}));
+  }
+
+  /**
+   * @param data
+   * @return {Promise}
+   * @private
+   */
+  private _write(data: Data) {
+    return new Promise(resolve => {
+      const stringData = encodeURIComponent(JSON.stringify(data));
+      FallbackStorage.
+        _createCookie(this.cookieName, stringData === '{}' ? '' : stringData, this.expires);
+      return resolve(data);
+    });
+  }
+
+  /**
+   * @param {string} key
+   * @return {Promise}
+   */
+  get(key: string) {
+    return this._read().then(data => data[key] || null);
+  }
+
+  /**
+   * @param {string} key
+   * @param {object} value
+   * @return {Promise}
+   */
+  async set<T>(key: string, value: T | null) {
+    const data = await this._read();
+    if (key) {
+      if (value != null) {
+        data[key] = value;
+      } else {
+        Reflect.deleteProperty(data, key);
+      }
+    }
+
+    await this._write(data);
+    return value;
+  }
+
+  /**
+   * @param {string} key
+   * @return {Promise}
+   */
+  async remove(key: string) {
+    await this.set(key, null);
+  }
+
+  /**
+   *
+   * @param {function(string, value)} callback
+   * @return {Promise}
+   */
+  each<R>(callback: (item: string, value: unknown) => R | Promise<R>) {
+    if (typeof callback !== 'function') {
+      return Promise.reject(new Error('Callback is not a function'));
+    }
+
+    return this._read().then(data => {
+      const promises = [];
+      for (const key in data) {
+        if (data.hasOwnProperty(key)) {
+          promises.push(callback(key, data[key]));
+        }
+      }
+      return Promise.all(promises);
+    });
+  }
+
+  /**
+   * @param {string} key
+   * @param {Function} callback
+   * @return {Function}
+   */
+  on<T>(key: string, callback: (value: T | null) => void) {
+    let stop = false;
+
+    const checkForChange = (oldValue: T | null) => {
+      this.get(key).then(newValue => {
+        if (stop) {
+          return;
+        }
+
+        if (!deepEqual(oldValue, newValue)) {
+          callback(newValue);
+        }
+
+        window.setTimeout(() => checkForChange(oldValue), this.checkDelay);
+      });
+    };
+
+    this.get(key).then(checkForChange);
+
+    return () => {
+      stop = true;
+    };
+  }
+}