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

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

@@ -1,101 +1,66 @@
 /**
  * @name User Agreement
  */
-
-import React, {PureComponent} from 'react';
+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 { 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() {}
-
+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"
-      >
+    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 fade onScrollToBottom={this.onScrollToBottom}>
+          <Markdown source={text}/>
         </Content>
-        {!preview && (
-          <Panel>
-            {onRemindLater && !scrolledDown && (
-              <div className={style.suggestion}>{translations.scrollToAccept}</div>
-            )}
+        {!preview && (<Panel>
+            {onRemindLater && !scrolledDown && (<div className={style.suggestion}>{translations.scrollToAccept}</div>)}
             <Button primary disabled={!scrolledDown} onClick={onAccept} data-test="accept">
               {translations.accept}
             </Button>
@@ -103,22 +68,14 @@ export default class UserAgreement extends PureComponent {
               {translations.decline}
             </Button>
 
-            {!onRemindLater && !scrolledDown && (
-              <span className={style.suggestion}>{translations.scrollToAccept}</span>
-            )}
-            {onRemindLater && (
-              <Button className={style.remindLaterButton} onClick={onRemindLater} data-test="later">
+            {!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>)}
+          </Panel>)}
+        {preview && (<Panel>
             <Button onClick={onClose} autoFocus data-test="close">{translations.close}</Button>
-          </Panel>
-        )}
-      </Dialog>
-    );
-  }
+          </Panel>)}
+      </Dialog>);
+    }
 }

package/components/user-card/card.d.ts

@@ -0,0 +1,52 @@
+import { HTMLAttributes, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+export interface UserCardUser {
+    name: string;
+    login: string;
+    avatarUrl?: string | null | undefined;
+    email?: string | null | undefined;
+    href?: string | null | undefined;
+    online?: boolean | null | undefined;
+    banned?: boolean | null | undefined;
+    banReason?: string | undefined;
+}
+export interface UserCardWording {
+    banned: string;
+    online: string;
+    offline: string;
+}
+export interface UserCardProps extends HTMLAttributes<HTMLDivElement> {
+    user: UserCardUser;
+    wording: UserCardWording;
+    'data-test'?: string | null | undefined;
+}
+export default class UserCard extends PureComponent<UserCardProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        user: PropTypes.Validator<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            login: PropTypes.Validator<string>;
+            avatarUrl: PropTypes.Validator<string>;
+            email: PropTypes.Requireable<string>;
+            href: PropTypes.Requireable<string>;
+            online: PropTypes.Requireable<boolean>;
+            banned: PropTypes.Requireable<boolean>;
+            banReason: PropTypes.Requireable<string>;
+        }>>;
+        wording: PropTypes.Requireable<PropTypes.InferProps<{
+            banned: PropTypes.Validator<string>;
+            online: PropTypes.Validator<string>;
+            offline: PropTypes.Validator<string>;
+        }>>;
+    };
+    static defaultProps: {
+        wording: {
+            banned: string;
+            online: string;
+            offline: string;
+        };
+    };
+    render(): JSX.Element;
+}
+export declare type UserCardAttrs = JSX.LibraryManagedAttributes<typeof UserCard, UserCardProps>;

package/components/user-card/card.js

@@ -1,98 +1,62 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
-import Avatar, {Size} from '../avatar/avatar';
+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}>
+    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}
-          />
+          <Avatar size={Size.Size56} url={user.avatarUrl}/>
           <div className={styles.userInformation}>
             <div>
-              {user.href && (
-                <Link
-                  href={user.href}
-                  className={styles.userName}
-                >
+              {user.href && (<Link href={user.href} className={styles.userName}>
                   {user.name}
-                </Link>
-              )}
+                </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>
-                )
-              }
+              {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}
-                  />
-                )
-              }
+              {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>
-    );
-  }
+      </div>);
+    }
 }

package/components/user-card/smart-user-card-tooltip.d.ts

@@ -0,0 +1,20 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { UserCardTooltipAttrs } from './tooltip';
+import { UserCardUser } from './card';
+export interface SmartUserCardTooltipProps extends UserCardTooltipAttrs {
+    userDataSource: () => Promise<UserCardUser | null | undefined> | UserCardUser | null | undefined;
+}
+export default class SmartUserCardTooltip extends Component<SmartUserCardTooltipProps> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        userDataSource: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    state: {
+        user: null;
+        loading: boolean;
+    };
+    loadUser: () => Promise<void>;
+    renderNoUser: () => JSX.Element | "";
+    render(): JSX.Element;
+}

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

@@ -1,66 +1,47 @@
-import React, {Component} from 'react';
+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
+    static propTypes = {
+        children: PropTypes.node,
+        userDataSource: PropTypes.func
+    };
+    state = {
+        user: null,
+        loading: false
     };
-
-    return (
-      <UserCardTooltip
-        user={user}
-        renderNoUser={this.renderNoUser}
-        dropdownProps={dropdownProps}
-        {...restProps}
-      >
+    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>
-    );
-  }
+      </UserCardTooltip>);
+    }
 }

package/components/user-card/tooltip.d.ts

@@ -0,0 +1,31 @@
+import { Component, ReactElement, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { DropdownAttrs } from '../dropdown/dropdown';
+import { UserCardAttrs, UserCardUser } from './card';
+export interface UserCardTooltipProps extends Omit<UserCardAttrs, 'user'> {
+    user?: UserCardUser | null | undefined;
+    children: ReactElement | readonly ReactElement[] | string;
+    dropdownProps: Partial<DropdownAttrs>;
+    renderUserCard: (props: UserCardTooltipProps) => ReactNode;
+    renderNoUser: () => ReactNode;
+}
+export default class UserCardTooltip extends Component<UserCardTooltipProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        dropdownProps: PropTypes.Requireable<object>;
+        user: PropTypes.Requireable<object>;
+        renderUserCard: PropTypes.Requireable<(...args: any[]) => any>;
+        renderNoUser: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        renderUserCard: (props: UserCardTooltipProps) => JSX.Element | null | undefined;
+        renderNoUser: () => string;
+        dropdownProps: {
+            hoverShowTimeOut: number;
+            hoverHideTimeOut: number;
+        };
+    };
+    render(): JSX.Element;
+}
+export declare type UserCardTooltipAttrs = JSX.LibraryManagedAttributes<typeof UserCardTooltip, UserCardTooltipProps>;

package/components/user-card/tooltip.js

@@ -1,58 +1,37 @@
-import React, {Component} from 'react';
+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}
-      >
+    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, user, ...restProps } = props;
+            return user && (<UserCard user={user} {...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>
-    );
-  }
+      </Dropdown>);
+    }
 }

package/components/user-card/user-card.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @name User Card
+ * @category Components
+ * @tags Ring UI Language
+ * @framework React
+ * @constructor
+ * @description A component that displays user details.
+ */
+export { default as UserCard } from './card';
+export { default as UserCardTooltip } from './tooltip';
+export { default as SmartUserCardTooltip } from './smart-user-card-tooltip';

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

@@ -1,4 +1,3 @@
-
 /**
  * @name User Card
  * @category Components
@@ -7,7 +6,6 @@
  * @constructor
  * @description A component that displays user details.
  */
-
-export {default as UserCard} from './card';
-export {default as UserCardTooltip} from './tooltip';
-export {default as SmartUserCardTooltip} from './smart-user-card-tooltip';
+export { default as UserCard } from './card';
+export { default as UserCardTooltip } from './tooltip';
+export { default as SmartUserCardTooltip } from './smart-user-card-tooltip';

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

@@ -4,12 +4,12 @@ import angularDecorator, {APP_NAME} from '../../.storybook/angular-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 Auth from '../auth/auth';
+import {createHubUserCardSource} from '../hub-source/hub-source__user';
 
-import {avatarDataUri} from '@jetbrains/ring-ui/components/avatar/avatar-example-datauri';
+import {avatarDataUri} from '../avatar/avatar-example-datauri';
 
-import UserCardNG from '@jetbrains/ring-ui/components/user-card-ng/user-card-ng';
+import UserCardNG from './user-card-ng';
 
 export default {
   title: 'Legacy Angular/User Card Ng',