@jetbrains/ring-ui 4.1.6 → 5.0.0-beta.3

package/components/storage/storage.test.js

@@ -1,248 +0,0 @@
-/* eslint-disable import/no-duplicates */
-import Storage from './storage__local';
-import FallbackStorage from './storage__fallback';
-
-import MockedStorage from 'imports-loader?imports=default|storage-mock|window!./storage__local';
-
-function noop() {}
-
-function testStorage(storage) {
-  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;
-
-      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');
-      value.should.deep.equal(test);
-    });
-
-    it('should not return same objects', async () => {
-      await storage.set('test', test);
-      const value = await storage.get('test');
-      value.should.not.equal(test);
-    });
-
-    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', '');
-      storage.each().should.be.rejected;
-    });
-  });
-}
-
-function testStorageEvents(storage) {
-  describe('events', () => {
-    let stop;
-
-    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 = 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 Storage();
-    const storageSession = new Storage({
-      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/tab-trap/tab-trap.examples.js

@@ -1,49 +0,0 @@
-import React, {Component} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Input from '@jetbrains/ring-ui/components/input/input';
-import Button from '@jetbrains/ring-ui/components/button/button';
-import Link from '@jetbrains/ring-ui/components/link/link';
-import Group from '@jetbrains/ring-ui/components/group/group';
-
-import TabTrap from '@jetbrains/ring-ui/components/tab-trap/tab-trap';
-
-export default {
-  title: 'Components/TabTrap',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Disallows tabbing out of a designated area.',
-    hermione: {skip: true}
-  }
-};
-
-export const basic = () => {
-  class TabTrapDemo extends Component {
-    render() {
-      return (
-        <div>
-          <Button>Outside of trap</Button>
-
-          <h4>Trap start</h4>
-          <TabTrap>
-            <Input placeholder="inside trap" autoFocus/>
-            <Group>
-              <Button>Test</Button>
-              <Link href="#">Test link</Link>
-            </Group>
-          </TabTrap>
-
-          <h4>Trap end</h4>
-
-          <Button>Outside of trap</Button>
-        </div>
-      );
-    }
-  }
-
-  return <TabTrapDemo/>;
-};
-
-basic.storyName = 'TabTrap';

package/components/table/table.examples.js

@@ -1,346 +0,0 @@
-import React, {Component} from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import {Grid, Row, Col} from '@jetbrains/ring-ui/components/grid/grid';
-import Link from '@jetbrains/ring-ui/components/link/link';
-import Pager from '@jetbrains/ring-ui/components/pager/pager';
-import Button from '@jetbrains/ring-ui/components/button/button';
-
-import Table, {Table as BaseTable} from '@jetbrains/ring-ui/components/table/table';
-import MultiTable from '@jetbrains/ring-ui/components/table/multitable';
-import Selection from '@jetbrains/ring-ui/components/table/selection';
-import mock from '@jetbrains/ring-ui/components/table/table.examples.json';
-import {continents, countries} from '@jetbrains/ring-ui/components/table/table.examples2.json';
-
-export default {
-  title: 'Components/Table',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    component: BaseTable,
-    framework: 'react',
-    hermione: {skip: true}
-  },
-  argTypes: {
-    selection: {
-      control: {disable: true}
-    }
-  }
-};
-
-const PAGE_SIZE = 7;
-const TOTAL = mock.length;
-class BasicDemo extends Component {
-  state = {
-    data: [],
-    selection: new Selection(),
-    page: 1,
-    pageSize: PAGE_SIZE,
-    total: TOTAL,
-    sortKey: 'country',
-    sortOrder: true
-  };
-
-  componentDidMount() {
-    this.loadPage();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const {page, sortKey, sortOrder} = this.state;
-    if (
-      page !== prevState.page ||
-      sortKey !== prevState.sortKey ||
-      sortOrder !== prevState.sortOrder
-    ) {
-      this.loadPage();
-    }
-  }
-
-  onSort = event => {
-    this.props.onSort(event);
-    this.setState({sortKey: event.column.id, sortOrder: event.order});
-  };
-
-  onPageChange = page => {
-    this.setState({page});
-  };
-
-  isItemSelectable(item) {
-    return item.id !== 14;
-  }
-
-  loadPage = () => {
-    const {page, pageSize, sortKey, sortOrder} = this.state;
-
-    let data = [...mock];
-    data.sort((a, b) => a[sortKey].localeCompare(b[sortKey]) * (sortOrder ? 1 : -1));
-    data = data.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
-
-    const selection = new Selection({data, isItemSelectable: this.isItemSelectable});
-
-    this.setState({data, selection});
-  };
-
-  render() {
-    const {onSelect, withCaption, onReorder, ...restProps} = this.props;
-    const {
-      data,
-      page,
-      pageSize,
-      total,
-      selection,
-      sortKey,
-      sortOrder
-    } = this.state;
-
-    return (
-      <div>
-        <Table
-          {...restProps}
-          data={data}
-          selection={selection}
-          onSelect={newSelection => {
-            onSelect(newSelection);
-            this.setState({selection: newSelection});
-          }}
-          onReorder={event => {
-            onReorder(event);
-            this.setState({data: event.data});
-          }}
-          onSort={this.onSort}
-          sortKey={sortKey}
-          sortOrder={sortOrder}
-          caption={withCaption ? 'Countries' : undefined}
-          isItemSelectable={this.isItemSelectable}
-          getItemDataTest={it => it.country}
-        />
-
-        <Grid>
-          <Row>
-            <Col>
-              <Pager
-                total={total}
-                pageSize={pageSize}
-                currentPage={page}
-                disablePageSizeSelector
-                onPageChange={this.onPageChange}
-              />
-            </Col>
-          </Row>
-
-          <Row>
-            <Col>
-              Active items: {[...selection.getActive()].map(item => item.country).join(', ')}
-            </Col>
-          </Row>
-
-          <Row>
-            <Col>
-              <Button onClick={() => this.setState({data: [...data]})}>
-                Recreate data array
-              </Button>
-              {page === 1 && data.length > 5 && (
-                <>
-                  {' '}
-                  <span id="button-select-bulgaria">
-                    {selection.isSelected(data[3])
-                      ? (
-                        <Button
-                          onClick={() => this.setState({selection: selection.deselect(data[3])})}
-                        >
-                          Deselect {data[3].country}
-                        </Button>
-                      )
-                      : (
-                        <Button
-                          onClick={() => this.setState({selection: selection.select(data[3])})}
-                        >
-                          Select {data[3].country}
-                        </Button>
-                      )}
-                  </span>
-
-                  <span id="button-select-finland">
-                    {' '}
-                    {selection.isSelected(data[5])
-                      ? (
-                        <Button
-                          onClick={() => this.setState({selection: selection.deselect(data[5])})}
-                        >
-                          Deselect {data[5].country}
-                        </Button>
-                      )
-                      : (
-                        <Button
-                          onClick={() => this.setState({selection: selection.select(data[5])})}
-                        >
-                          Select {data[5].country}
-                        </Button>
-                      )}
-                  </span>
-                </>
-              )}
-            </Col>
-          </Row>
-        </Grid>
-      </div>
-    );
-  }
-}
-export const basic = args => <BasicDemo {...args}/>;
-basic.args = {
-  columns: [
-    {
-      id: 'country',
-      title: 'Country',
-      sortable: true
-    },
-
-    {
-      id: 'id',
-      title: 'ID',
-      rightAlign: true
-    },
-
-    {
-      id: 'city',
-      title: 'City',
-      getDataTest: item => item.city,
-      sortable: true
-    },
-
-    {
-      id: 'url',
-      title: 'URL',
-      getValue({url}) {
-        return <Link href={url}>{url}</Link>;
-      }
-    }
-  ],
-  autofocus: true,
-  selectable: true,
-  draggable: true,
-  withCaption: false,
-  isItemSelectable: item => item.id !== 14
-};
-basic.argTypes = {
-  data: {
-    control: {disable: true}
-  },
-  sortKey: {
-    control: {disable: true}
-  },
-  sortOrder: {
-    control: {disable: true}
-  },
-  caption: {
-    control: {disable: true}
-  }
-};
-basic.storyName = 'basic';
-
-const data1 = continents;
-const data2 = countries;
-
-class MultiTableDemo extends Component {
-  state = {
-    selection1: new Selection({data: data1}),
-    selection2: new Selection({data: data2})
-  };
-
-  columns1 = [
-    {
-      id: 'continent',
-      title: 'Continent'
-    },
-    {
-      id: 'url',
-      title: 'URL'
-    }
-  ];
-
-  columns2 = [
-    {
-      id: 'country',
-      title: 'Country'
-    },
-    {
-      id: 'city',
-      title: 'City'
-    },
-    {
-      id: 'url',
-      title: 'URL'
-    }
-  ];
-
-  render() {
-    return (
-      <MultiTable>
-        <Table
-          data={data1}
-          columns={this.columns1}
-          caption="Continents"
-          selection={this.state.selection1}
-          onSelect={selection => this.setState({selection1: selection})}
-        />
-
-        <Table
-          data={data2}
-          columns={this.columns2}
-          caption="Countries"
-          autofocus
-          selection={this.state.selection2}
-          onSelect={selection => this.setState({selection2: selection})}
-        />
-      </MultiTable>
-    );
-  }
-}
-export const multiTable = () => <MultiTableDemo/>;
-multiTable.storyName = 'multi table';
-
-
-class EmptyTableDemo extends Component {
-  state = {
-    selection: new Selection({})
-  };
-
-  render() {
-    const {onSelect, ...restProps} = this.props;
-
-    return (
-      <Table
-        {...restProps}
-        selection={this.state.selection}
-        onSelect={selection => {
-          onSelect(selection);
-          this.setState({selection});
-        }}
-      />
-    );
-  }
-}
-
-export const emptyTable = args => <EmptyTableDemo {...args}/>;
-emptyTable.args = {
-  data: [],
-  columns: [
-    {
-      id: 'country',
-      title: 'Country'
-    },
-    {
-      id: 'city',
-      title: 'City'
-    },
-    {
-      id: 'url',
-      title: 'URL'
-    }
-  ],
-  renderEmpty: () => 'Empty table',
-  selectable: false
-};
-emptyTable.storyName = 'empty table';