@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/tabs/tabs.examples.js

@@ -1,275 +0,0 @@
-import React, {Component} from 'react';
-import searchIcon from '@jetbrains/icons/search';
-import warningIcon from '@jetbrains/icons/warning';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-import Icon from '@jetbrains/ring-ui/components/icon/icon';
-
-import {Tabs, Tab, SmartTabs, CustomItem} from '@jetbrains/ring-ui/components/tabs/tabs';
-
-export default {
-  title: 'Components/Tabs',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a tab set.'
-  }
-};
-
-class BasicDemo extends Component {
-  state = {selected: 'first'};
-
-  render() {
-    return (
-      <Tabs selected={this.state.selected} onSelect={selected => this.setState({selected})}>
-        <Tab id="first" title="First tab">
-          First tab content
-        </Tab>
-        <Tab id="second" title="Second tab">
-          Second tab content
-        </Tab>
-        <Tab id="third" title="Third tab">
-          Third tab content
-        </Tab>
-        <Tab id="fourth" title="Fourth tab (Link)" href="/">
-          Fourth tab content
-        </Tab>
-        <Tab disabled id="disabled" title="Disabled tab">
-          Disabled tab content
-        </Tab>
-      </Tabs>
-    );
-  }
-}
-export const basic = () => <BasicDemo/>;
-
-basic.storyName = 'basic';
-
-
-const autocollapseData = [
-  {
-    id: 'first',
-    title: 'First tab',
-    content: 'First tab content'
-  },
-  {
-    id: 'second',
-    title: 'Second tab',
-    content: 'Second tab content'
-  },
-  {
-    id: 'third',
-    title: 'Third tab',
-    content: 'Third tab content'
-  },
-  {
-    id: 'fourth',
-    title: 'Fourth tab (Link)',
-    href: '/',
-    content: 'Fourth tab content'
-  },
-  {
-    id: 'disabled1',
-    title: 'Disabled tab',
-    content: 'Disabled tab content',
-    disabled: true
-  },
-  {
-    id: 'fifth',
-    title: 'Fifth tab (Always hidden)',
-    alwaysHidden: true,
-    href: '/',
-    content: 'Hidden tab content'
-  },
-  {
-    id: 'custom',
-    alwaysHidden: true,
-    custom: true,
-    content: <Button text style={{padding: 0}}>Custom Item</Button>
-  }
-];
-
-const AutoCollapseDemo = () => {
-  const [selected, setSelected] = React.useState('first');
-  const [tabs, setTabs] = React.useState(autocollapseData.map(item => {
-    const {content, ...tabProps} = item;
-    const Host = item.custom === true ? CustomItem : Tab;
-
-    return <Host key={item.id} {...tabProps}>{content}</Host>;
-  }));
-
-  const addTab = React.useCallback(() => {
-    setTabs(state => {
-      const newTab = (
-        <Tab
-          id={String(state.length)}
-          key={state.length}
-          title={`Example ${state.length + 1}`}
-        >{`Example ${state.length + 1} tab content`}</Tab>
-      );
-
-      return [
-        ...state,
-        newTab
-      ];
-    });
-  }, []);
-
-  const selectHandler = React.useCallback(key => {
-    setSelected(key);
-  }, []);
-
-  return (
-    <>
-      <Button onClick={addTab} title={'Add tab'} style={{margin: '10px 0'}}>{'Add tab'}</Button>
-      <Tabs
-        selected={selected}
-        onSelect={selectHandler}
-        autoCollapse
-        initialVisibleItems={3}
-      >
-        {tabs}
-      </Tabs>
-    </>
-  );
-};
-export const autoCollapseDemo = () => <AutoCollapseDemo/>;
-
-autoCollapseDemo.storyName = 'Auto collapsing';
-
-
-class DarkDemo extends Component {
-  state = {selected: 'first'};
-
-  render() {
-    return (
-      <Tabs
-        selected={this.state.selected}
-        onSelect={selected => this.setState({selected})}
-        theme={Tabs.Theme.DARK}
-        className="dark-wrapper"
-      >
-        <Tab id="first" title="First tab">
-          First tab content
-        </Tab>
-        <Tab id="second" title="Second tab">
-          Second tab content
-        </Tab>
-        <Tab id="third" title="Third tab">
-          Third tab content
-        </Tab>
-        <Tab id="fourth" title="Fourth tab (Link)" href="/">
-          Fourth tab content
-        </Tab>
-        <Tab disabled id="disabled" title="Disabled tab">
-          Disabled tab content
-        </Tab>
-      </Tabs>
-    );
-  }
-}
-export const dark = () => <DarkDemo/>;
-
-dark.storyName = 'dark';
-
-dark.parameters = {
-  storyStyles: `
-<style>
-  .dark-wrapper {
-    background: #000;
-    padding: 8px;
-    color: #fff;
-  }
-</style>`
-};
-
-export const smart = () => (
-  <SmartTabs>
-    <Tab title="First tab">First tab content</Tab>
-    <Tab title="Second tab">Second tab content</Tab>
-    <Tab title="Third tab">Third tab content</Tab>
-    <Tab title="Fourth  tab (Link)" href="/">
-      Fourth tab content
-    </Tab>
-    <Tab disabled title="Disabled tab">
-      Disabled tab content
-    </Tab>
-  </SmartTabs>
-);
-smart.storyName = 'smart';
-
-function Title({glyph, title, children, className}) {
-  return (
-    <span className={className}>
-      <Icon glyph={glyph} title={title} className="icon"/>
-      {children}
-    </span>
-  );
-}
-export const customTitles = () => (
-  <SmartTabs>
-    <Tab title={<Title glyph={searchIcon}>First tab</Title>}>First tab content</Tab>
-    <Tab title={<Title glyph={warningIcon}>Second tab</Title>}>Second tab content</Tab>
-    <Tab title={<Title glyph={warningIcon}>Third tab (Link)</Title>} href="/">
-      Third tab content
-    </Tab>
-    <CustomItem>
-      <Button text>Action</Button>
-    </CustomItem>
-  </SmartTabs>
-);
-customTitles.storyName = 'custom titles';
-
-customTitles.parameters = {
-  storyStyles: `
-<style>
-  .icon.icon {
-    vertical-align: 1px;
-    line-height: normal;
-    margin-right: 4px;
-  }
-</style>
-      `
-};
-
-export const customTitlesFunction = () => (
-  <SmartTabs>
-    <Tab
-      title={isSelected => (
-        <Title title={isSelected ? undefined : 'First tab'} glyph={searchIcon} className={isSelected ? 'has-content' : ''}>
-          {isSelected && 'First tab'}
-        </Title>
-      )}
-    >
-      First tab content
-    </Tab>
-    <Tab
-      title={isSelected => (
-        <Title title={isSelected ? undefined : 'Second tab (Link)'} glyph={warningIcon} className={isSelected ? 'has-content' : ''}>
-          {isSelected && 'Second tab (Link)'}
-        </Title>
-      )}
-      href="/"
-    >
-      Second tab content
-    </Tab>
-  </SmartTabs>
-);
-customTitlesFunction.storyName = 'custom titles (function)';
-
-customTitlesFunction.parameters = {
-  storyStyles: `
-<style>
-  .icon.icon {
-    vertical-align: 3px;
-    line-height: normal;
-  }
-
-  .has-content .icon.icon {
-    margin-right: 4px;
-  }
-</style>
-      `
-};

package/components/tabs/tabs.test.js

@@ -1,26 +0,0 @@
-import {mount} from 'enzyme';
-import React from 'react';
-
-import {Tabs, Tab} from './tabs';
-
-describe('Tabs', () => {
-  const mountTabs = props => mount(
-    <Tabs {...props}>
-      <Tab title="1"/>
-      <Tab title="2"/>
-    </Tabs>
-  );
-  const getTabsDiv = props => mountTabs(props).find('div').at(0);
-
-  it('should create component', () => {
-    mountTabs().should.exist;
-  });
-
-  it('should wrap children with div', () => {
-    getTabsDiv().should.exist;
-  });
-
-  it('should use passed className', () => {
-    getTabsDiv({className: 'test-class'}).should.have.className('test-class');
-  });
-});

package/components/tag/tag.examples.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import checkmarkIcon from '@jetbrains/icons/checkmark';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Tag from '@jetbrains/ring-ui/components/tag/tag';
-
-export default {
-  title: 'Components/Tag',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a tag.'
-  }
-};
-
-export const demo = () => {
-  const avatarUrl =
-    'data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDAgNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxkZWZzPiAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNENTBGNkIiIG9mZnNldD0iMCIvPiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNFNzNBRTgiIG9mZnNldD0iMSIvPiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4gICAgPC9kZWZzPiAgICA8Zz4gICAgICAgIDxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiAgICAgICAgICAgICAgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiAgICAgICAgICAgICAgcng9IjMiIHJ5PSIzIi8+ICAgICAgICA8dGV4dCB4PSI1IiB5PSIxOSIgICAgICAgICAgICAgIGZvbnQtZmFtaWx5PSJBcmlhbCwgSGVsdmV0aWNhLCBzYW5zLXNlcmlmIiAgICAgICAgICAgICAgZm9udC1zaXplPSIxNXB4IiAgICAgICAgICAgICAgbGV0dGVyLXNwYWNpbmc9IjEiICAgICAgICAgICAgICBmaWxsPSIjRkZGRkZGIj4gICAgICAgICAgICA8dHNwYW4+SkI8L3RzcGFuPiAgICAgICAgICAgIDx0c3BhbiB4PSI2IiB5PSIyOCI+XzwvdHNwYW4+ICAgICAgICA8L3RleHQ+ICAgIDwvZz48L3N2Zz4=';
-
-  class TagDemo extends React.Component {
-    render() {
-      return (
-        <div>
-          <Tag>Simple</Tag>
-          <Tag readOnly>Read-only</Tag>
-          <Tag angled>With angle</Tag>
-          <Tag backgroundColor="#422" textColor="#FFF">Colored</Tag>
-          <Tag angled className="limited-width">
-            With angle and long truncated text
-          </Tag>
-          <Tag className="limited-width">With long truncated text</Tag>
-          <Tag rgTagIcon={checkmarkIcon} rgTagTitle="I am an icon title">
-            With icon title
-          </Tag>
-          <Tag avatar={avatarUrl} readOnly={false}>
-            With avatar
-          </Tag>
-          <Tag render={({children, ...restProps}) => <a href="/" {...restProps}>{children}</a>}>
-            With custom render
-          </Tag>
-        </div>
-      );
-    }
-  }
-
-  return <TagDemo/>;
-};
-
-demo.storyName = 'Tag';

package/components/tag/tag.test.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {shallow} from 'enzyme';
-import closeIcon from '@jetbrains/icons/close';
-
-import Icon from '../icon/icon';
-
-import Tag from './tag';
-
-describe('Tag', () => {
-  const tagMock = {key: 1, label: 'test1', rgTagIcon: closeIcon};
-
-  const shallowTag = props => shallow(<Tag {...tagMock} {...props}/>);
-
-  it('should render tags', () => {
-    shallowTag().find('button').should.have.data('test', 'ring-tag');
-  });
-
-  it('should contains icon', () => {
-    shallowTag().find(Icon).length.should.not.equal(0);
-  });
-});

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

@@ -1,133 +0,0 @@
-import React from 'react';
-import checkmarkIcon from '@jetbrains/icons/checkmark';
-import exceptionIcon from '@jetbrains/icons/exception';
-import frownIcon from '@jetbrains/icons/frown';
-
-import reactDecorator from '../../.storybook/react-decorator';
-
-import Button from '@jetbrains/ring-ui/components/button/button';
-import Dialog from '@jetbrains/ring-ui/components/dialog/dialog';
-import {Content} from '@jetbrains/ring-ui/components/island/island';
-
-import TagsInput from '@jetbrains/ring-ui/components/tags-input/tags-input';
-
-export default {
-  title: 'Components/Tags Input',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'Displays a tags input field.'
-  }
-};
-
-export const basic = () => {
-  function dataSource() {
-    return new Promise(resolve => setTimeout(resolve, 200)).then(() =>
-      Promise.resolve(
-        [...Array(20)].map((it, index) => ({key: `test${index}`, label: `test${index}`}))
-      )
-    );
-  }
-
-  return (
-    <TagsInput
-      className="test-additional-class"
-      tags={[{key: 'test1', label: 'test1'}, {key: 'test2', label: 'test2'}]}
-      maxPopupHeight={250}
-      dataSource={dataSource}
-      allowAddNewTags
-      filter
-    />
-  );
-};
-
-basic.storyName = 'basic';
-
-export const withIcons = () => {
-  const tags = [
-    {key: 'test1', label: 'test1', rgTagIcon: checkmarkIcon},
-    {key: 'test2', label: 'test2'}
-  ];
-
-  function dataSource() {
-    return [
-      {key: 'test3', label: 'test3', rgTagIcon: exceptionIcon, rgTagTitle: 'I am the tag title'},
-      {key: 'test4', label: 'test4', rgTagIcon: frownIcon}
-    ];
-  }
-
-  return <TagsInput tags={tags} dataSource={dataSource}/>;
-};
-
-withIcons.storyName = 'with icons';
-
-export const disabled = () => (
-  <TagsInput disabled tags={[{key: 'test2', label: 'test2'}]} dataSource={() => []}/>
-);
-
-disabled.storyName = 'disabled';
-
-export const withTooLongTagLabels = () => {
-  const tags = [{key: 'test1', label: 'Label'}, {key: 'test2', label: 'Very long label'}];
-
-  function dataSource() {
-    return [
-      {key: 'test3', label: 'Very very long label'},
-      {key: 'test4', label: 'Very very very long label'}
-    ];
-  }
-
-  return <TagsInput tags={tags} dataSource={dataSource}/>;
-};
-
-withTooLongTagLabels.storyName = 'with too long tag labels';
-
-export const autoOpen = () => {
-  const tags = [{key: 'test1', label: 'test1'}, {key: 'test2', label: 'test2'}];
-
-  function dataSource() {
-    return [
-      {key: 'test3', label: 'test3'},
-      {key: 'test4', label: 'test4'}
-    ];
-  }
-
-  return <TagsInput tags={tags} dataSource={dataSource} autoOpen/>;
-};
-
-autoOpen.parameters = {
-  hermione: {
-    captureSelector: ['#root', '[data-test~=ring-popup]']
-  },
-  a11y: {element: '#root,[data-test~=ring-popup]'}
-};
-
-
-export const autoOpenInADialog = () => {
-  const tags = [{key: 'test1', label: 'test1'}, {key: 'test2', label: 'test2'}];
-
-  function dataSource() {
-    return [
-      {key: 'test3', label: 'test3'},
-      {key: 'test4', label: 'test4'}
-    ];
-  }
-
-  return (
-    <>
-      <Button>Button</Button>
-      <Dialog label="Tags" show trapFocus autoFocusFirst={false}>
-        <Content>
-          <TagsInput tags={tags} dataSource={dataSource} autoOpen/>
-        </Content>
-      </Dialog>
-    </>
-  );
-};
-
-autoOpenInADialog.parameters = {
-  hermione: {
-    captureSelector: ['[data-test~=ring-dialog]', '[data-test~=ring-popup]']
-  },
-  a11y: {element: '[data-test~=ring-dialog],[data-test~=ring-popup]'}
-};