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

package/components/user-agreement/user-agreement.js

@@ -1,124 +0,0 @@
-/**
- * @name User Agreement
- */
-
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Dialog from '../dialog/dialog';
-import {Content, Header} from '../island/island';
-import Panel from '../panel/panel';
-import Button from '../button/button';
-import Markdown from '../markdown/markdown';
-
-import style from './user-agreement.css';
-
-function noop() {}
-
-/**
- * A component that displays a user agreement dialog.
- */
-export default class UserAgreement extends PureComponent {
-  static propTypes = {
-    show: PropTypes.bool,
-    preview: PropTypes.bool,
-    text: PropTypes.string.isRequired,
-    onAccept: PropTypes.func,
-    onDecline: PropTypes.func,
-    onClose: PropTypes.func,
-    onRemindLater: PropTypes.func,
-    translations: PropTypes.shape({
-      userAgreement: PropTypes.string.isRequired,
-      accept: PropTypes.string.isRequired,
-      decline: PropTypes.string.isRequired,
-      close: PropTypes.string.isRequired,
-      scrollToAccept: PropTypes.string.isRequired,
-      remindLater: PropTypes.string.isRequired
-    }),
-    className: PropTypes.string
-  };
-
-  static defaultProps = {
-    translations: {
-      userAgreement: 'User Agreement',
-      accept: 'Accept',
-      decline: 'Decline',
-      close: 'Close',
-      scrollToAccept: 'View the entire agreement to continue',
-      remindLater: 'Remind me later'
-    },
-    show: false,
-    onAccept: noop,
-    onDecline: noop,
-    onClose: noop
-  };
-
-  state = {
-    scrolledDown: false
-  };
-
-  onScrollToBottom = () => this.setState({scrolledDown: true});
-
-  render() {
-    const {scrolledDown} = this.state;
-    const {
-      translations,
-      onAccept,
-      onDecline,
-      onClose,
-      onRemindLater,
-      text,
-      show,
-      preview,
-      className
-    } = this.props;
-
-    return (
-      <Dialog
-        label={translations.userAgreement}
-        show={show}
-        className={classNames(style.agreementDialog, className)}
-        contentClassName={style.dialogContent}
-        trapFocus
-        autoFocusFirst={false}
-        data-test="user-agreement"
-      >
-        <Header>{translations.userAgreement}</Header>
-        <Content
-          fade
-          onScrollToBottom={this.onScrollToBottom}
-        >
-          <Markdown source={text} tabindex={-1}/>
-        </Content>
-        {!preview && (
-          <Panel>
-            {onRemindLater && !scrolledDown && (
-              <div className={style.suggestion}>{translations.scrollToAccept}</div>
-            )}
-            <Button primary disabled={!scrolledDown} onClick={onAccept} data-test="accept">
-              {translations.accept}
-            </Button>
-            <Button onClick={onDecline} autoFocus data-test="decline">
-              {translations.decline}
-            </Button>
-
-            {!onRemindLater && !scrolledDown && (
-              <span className={style.suggestion}>{translations.scrollToAccept}</span>
-            )}
-            {onRemindLater && (
-              <Button className={style.remindLaterButton} onClick={onRemindLater} data-test="later">
-                {translations.remindLater}
-              </Button>
-            )}
-          </Panel>
-        )}
-        {preview && (
-          <Panel>
-            <Button onClick={onClose} autoFocus data-test="close">{translations.close}</Button>
-          </Panel>
-        )}
-      </Dialog>
-    );
-  }
-}

package/components/user-card/card.js

@@ -1,98 +0,0 @@
-import React, {PureComponent} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import Avatar, {Size} from '../avatar/avatar';
-import Link from '../link/link';
-import badgeStyles from '../badge/badge.css';
-
-import styles from './user-card.css';
-
-export default class UserCard extends PureComponent {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-
-    user: PropTypes.shape({
-      name: PropTypes.string.isRequired,
-      login: PropTypes.string.isRequired,
-      avatarUrl: PropTypes.string.isRequired,
-      email: PropTypes.string,
-      href: PropTypes.string,
-      online: PropTypes.bool,
-      banned: PropTypes.bool,
-      banReason: PropTypes.string
-    }).isRequired,
-
-    wording: PropTypes.shape({
-      banned: PropTypes.string.isRequired,
-      online: PropTypes.string.isRequired,
-      offline: PropTypes.string.isRequired
-    })
-  };
-
-  static defaultProps = {
-    wording: {
-      banned: 'banned',
-      online: 'online',
-      offline: 'offline'
-    }
-  };
-
-  render() {
-    const {children, className, user, wording, ...restProps} = this.props;
-
-    const classes = classNames(className, {});
-    const userActiveStatusClasses = classNames(
-      styles.userActiveStatus,
-      user.online ? styles.online : ''
-    );
-
-    return (
-      <div className={classes} {...restProps}>
-        <div className={styles.userInformationContainer}>
-          <Avatar
-            size={Size.Size56}
-            url={user.avatarUrl}
-          />
-          <div className={styles.userInformation}>
-            <div>
-              {user.href && (
-                <Link
-                  href={user.href}
-                  className={styles.userName}
-                >
-                  {user.name}
-                </Link>
-              )}
-              {!user.href && <span className={styles.userName}>{user.name}</span>}
-              {
-                user.banned &&
-                (
-                  <span
-                    className={classNames(badgeStyles.badge, badgeStyles.invalid)}
-                    title={user.banReason}
-                  >{wording.banned}</span>
-                )
-              }
-            </div>
-            <div>
-              {
-                typeof user.online === 'boolean' &&
-                (
-                  <span
-                    className={userActiveStatusClasses}
-                    title={user.online ? wording.online : wording.offline}
-                  />
-                )
-              }
-              {user.login}
-            </div>
-            {user.email && <div>{user.email}</div>}
-          </div>
-        </div>
-        {children}
-      </div>
-    );
-  }
-}

package/components/user-card/smart-user-card-tooltip.js

@@ -1,66 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-
-import LoaderInline from '../loader-inline/loader-inline';
-
-import UserCardTooltip from './tooltip';
-import styles from './user-card.css';
-
-export default class SmartUserCardTooltip extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    userDataSource: PropTypes.func
-  };
-
-  state = {
-    user: null,
-    loading: false
-  };
-
-  loadUser = async () => {
-    if (this.state.user) {
-      return;
-    }
-
-    try {
-      this.setState({loading: true});
-      const user = await this.props.userDataSource();
-      this.setState({user});
-    } catch (e) {
-      // Skip it
-    } finally {
-      this.setState({loading: false});
-    }
-  };
-
-  renderNoUser = () => (
-    this.state.loading
-      ? (
-        <div className={styles.userCardSpaced}>
-          <LoaderInline/>
-        </div>
-      )
-      : ''
-  );
-
-  render() {
-    const {user} = this.state;
-    const {children, userDataSource, ...restProps} = this.props;
-
-    const dropdownProps = {
-      onMouseEnter: this.loadUser,
-      ...UserCardTooltip.defaultProps.dropdownProps
-    };
-
-    return (
-      <UserCardTooltip
-        user={user}
-        renderNoUser={this.renderNoUser}
-        dropdownProps={dropdownProps}
-        {...restProps}
-      >
-        {children}
-      </UserCardTooltip>
-    );
-  }
-}

package/components/user-card/tooltip.js

@@ -1,58 +0,0 @@
-import React, {Component} from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import Dropdown from '../dropdown/dropdown';
-import Popup from '../popup/popup';
-
-import UserCard from './card';
-import styles from './user-card.css';
-
-const DEFAULT_TIMEOUT = 300;
-
-export default class UserCardTooltip extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-    dropdownProps: PropTypes.object,
-    user: PropTypes.object,
-    renderUserCard: PropTypes.func,
-    renderNoUser: PropTypes.func
-  };
-
-  static defaultProps = {
-    renderUserCard: props => {
-      const {className,
-        children, renderUserCard, renderNoUser, dropdownProps, ...restProps} = props;
-
-      return (
-        <UserCard
-          {...restProps}
-          className={classNames(styles.userCardSpaced, className)}
-        />
-      );
-    },
-    renderNoUser: () => '',
-    dropdownProps: {
-      hoverShowTimeOut: DEFAULT_TIMEOUT,
-      hoverHideTimeOut: DEFAULT_TIMEOUT
-    }
-  };
-
-  render() {
-    const {children, user, renderUserCard, renderNoUser, dropdownProps} = this.props;
-
-    return (
-      <Dropdown
-        anchor={children}
-        hoverMode
-        clickMode={false}
-        {...dropdownProps}
-      >
-        <Popup attached={false}>
-          {user ? renderUserCard(this.props) : renderNoUser()}
-        </Popup>
-      </Dropdown>
-    );
-  }
-}

package/components/user-card/user-card.examples.js

@@ -1,88 +0,0 @@
-import React from 'react';
-
-import reactDecorator from '../../.storybook/react-decorator';
-import hubConfig from '../../.storybook/hub-config';
-
-import Auth from '@jetbrains/ring-ui/components/auth/auth';
-import {createHubUserCardSource} from '@jetbrains/ring-ui/components/hub-source/hub-source__user';
-
-import {avatarDataUri} from '@jetbrains/ring-ui/components/avatar/avatar-example-datauri';
-
-import {UserCard, UserCardTooltip, SmartUserCardTooltip} from '@jetbrains/ring-ui/components/user-card/user-card';
-
-export default {
-  title: 'Components/User Card',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    notes: 'A component that displays user details.'
-  }
-};
-
-export const inline = () => {
-  const user = {
-    login: 'testuser',
-    name: 'Test User',
-    email: 'testuser@mail.com',
-    avatarUrl: avatarDataUri,
-    href: `${hubConfig.serverUri}/users/0`
-  };
-
-  return (
-    <div>
-      <div>Inline user card:</div>
-      <UserCard user={user} data-test="user-card-inline"/>
-
-      <UserCardTooltip user={user}>
-        <span>Hover this text see card in tooltip mode</span>
-      </UserCardTooltip>
-    </div>
-  );
-};
-
-inline.storyName = 'inline';
-
-export const smartTooltip = () => {
-  const user = {
-    login: 'testuser',
-    name: 'Test User',
-    email: 'testuser@mail.com',
-    avatarUrl: avatarDataUri,
-    href: `${hubConfig.serverUri}/users/0`,
-    banned: true,
-    online: false,
-    banReason: 'Bad guy: is accused of stealing potatoes'
-  };
-
-  function loadUser() {
-    return new Promise(resolve => setTimeout(resolve, 10000)).then(() => user);
-  }
-
-  return (
-    <SmartUserCardTooltip userDataSource={loadUser}>
-      <span>Hover this text load user information</span>
-    </SmartUserCardTooltip>
-  );
-};
-
-smartTooltip.storyName = 'smart tooltip';
-smartTooltip.parameters = {hermione: {skip: true}};
-
-export const hubUserCard = () => {
-  const auth = new Auth(hubConfig);
-
-  const waitForAuthAndGetUser = async () => {
-    await auth.init();
-    const userSource = createHubUserCardSource(auth, auth.user.id);
-    return userSource();
-  };
-
-  return (
-    <SmartUserCardTooltip userDataSource={waitForAuthAndGetUser}>
-      <span>Hover this text load user information</span>
-    </SmartUserCardTooltip>
-  );
-};
-
-hubUserCard.storyName = 'hub user card';
-hubUserCard.parameters = {hermione: {skip: true}};

package/components/user-card/user-card.test.js

@@ -1,102 +0,0 @@
-import React from 'react';
-import {shallow, mount} from 'enzyme';
-
-import {SmartUserCardTooltip, UserCard, UserCardTooltip} from './user-card';
-
-describe('UserCard', () => {
-  const fakeUser = {
-    login: 'testuser',
-    name: 'Test User',
-    email: 'testuser@mail.com',
-    avatarUrl: 'http://some-url',
-    href: 'http://foo'
-  };
-
-  describe('Card', () => {
-    const shallowCard = props => shallow(
-      <UserCard user={fakeUser} {...props}/>
-    );
-    const mountCard = props => mount(<UserCard user={fakeUser} {...props}/>);
-
-    it('should create component', () => {
-      mountCard().should.have.type(UserCard);
-    });
-
-    it('should wrap children with span', () => {
-      shallowCard().should.have.tagName('div');
-    });
-
-    it('should render link', () => {
-      shallowCard({user: {...fakeUser, href: null}}).
-        should.not.have.descendants('a[href="http://foo"]');
-    });
-
-    it('should not render link if user has no href', () => {
-      shallowCard({user: {...fakeUser, href: null}}).
-        should.not.have.descendants('a');
-    });
-
-    it('should use passed className', () => {
-      shallowCard({className: 'test-class'}).should.have.className('test-class');
-    });
-
-    it('should use pass rest props to dom node', () => {
-      shallowCard({'data-test': 'foo'}).should.have.data('test', 'foo');
-    });
-  });
-
-  describe('UserCardTooltip', () => {
-    const anchor = <span data-test="anchor">{'foo'}</span>;
-
-    const mountTooltip = props => mount(
-      <UserCardTooltip user={fakeUser} {...props}>
-        {anchor}
-      </UserCardTooltip>
-    );
-
-    it('should render anchor', () => {
-      const wrapper = mountTooltip();
-
-      wrapper.should.have.descendants('[data-test="anchor"]');
-    });
-
-    it('should allow to render multiple children', () => {
-      const tooltip = props => mount(
-        <UserCardTooltip user={fakeUser} {...props}>
-          <span data-test="anchor">{'foo'}</span>
-          <span data-test="anchor">{'foo'}</span>
-        </UserCardTooltip>
-      );
-
-      const wrapper = tooltip();
-      wrapper.should.have.descendants('[data-test="anchor"]');
-    });
-  });
-
-  describe('SmartUserCardTooltip', () => {
-    const anchor = <span>{'foo'}</span>;
-
-    function userSource() {
-      return fakeUser;
-    }
-
-    const mountTooltip = props => mount(
-      <SmartUserCardTooltip userDataSource={userSource} {...props}>
-        {anchor}
-      </SmartUserCardTooltip>
-    );
-
-    it('should load user on hover', () => {
-      const wrapper = mountTooltip();
-      sandbox.stub(wrapper.instance(), 'loadUser').callsFake(() => {});
-
-      // Force the component and wrapper to update so that the stub is used https://github.com/airbnb/enzyme/issues/586
-      wrapper.instance().forceUpdate();
-      wrapper.update();
-
-      wrapper.simulate('mouseenter');
-
-      wrapper.instance().loadUser.should.have.been.called;
-    });
-  });
-});

package/components/welcome.examples.js

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import ReadMe from '../README.md';
-import Contributing from '../CONTRIBUTING.md';
-import Changelog from '../CHANGELOG.md';
-
-import reactDecorator from '../.storybook/react-decorator';
-
-import Markdown from '@jetbrains/ring-ui/components/markdown/markdown';
-
-import License from 'raw-loader!../LICENSE.txt';
-
-export default {
-  title: 'Ring UI/Welcome',
-  decorators: [reactDecorator()],
-
-  parameters: {
-    hermione: {skip: true}
-  }
-};
-
-export const gettingStarted = () => <Markdown source={ReadMe}/>;
-export const contributing = () => <Markdown source={Contributing}/>;
-export const changelog = () => <Markdown source={Changelog}/>;
-export const license = () => <pre>{License}</pre>;