@jetbrains/ring-ui 4.1.4 → 5.0.0-beta.1

package/components/hub-source/hub-source.js

@@ -1,9 +1,8 @@
 const defaultOptions = {
-  searchMax: 20,
-  searchSideThreshold: 100,
-  queryFormatter: query => `${query} or ${query}*`
+    searchMax: 20,
+    searchSideThreshold: 100,
+    queryFormatter: query => `${query} or ${query}*`
 };
-
 /**
  * HubSource is designed to speed up search requests for small installations.
  * If there are less than "searchSideThreshold" items, it uses client-side filtering
@@ -11,113 +10,98 @@ const defaultOptions = {
  * select data source.
  */
 export default class HubSource {
-  static TOP_ALL = -1;
-
-  constructor(auth, relativeUrl, options) {
-    this.http = auth.http;
-    this.relativeUrl = relativeUrl;
-    this.options = Object.assign({}, defaultOptions, options);
-
-
-    this.storedData = null;
-    this.isClientSideSearch = null;
-    this.filterFn = null;
-  }
-
-  makeRequest(queryParams) {
-    return this.http.get(this.relativeUrl, {query: queryParams});
-  }
-
-  async makeCachedRequest(params) {
-    if (this.storedData) {
-      return this.storedData;
+    static TOP_ALL = -1;
+    http;
+    relativeUrl;
+    options;
+    storedData;
+    isClientSideSearch;
+    filterFn;
+    constructor(auth, relativeUrl, options) {
+        this.http = auth.http;
+        this.relativeUrl = relativeUrl;
+        this.options = Object.assign({}, defaultOptions, options);
+        this.storedData = null;
+        this.isClientSideSearch = null;
+        this.filterFn = () => true;
     }
-    const res = await this.makeRequest(params);
-    this.storedData = res;
-    return res;
-  }
-
-  static mergeParams(params, toMerge) {
-    return Object.assign({}, params, toMerge);
-  }
-
-  checkIsClientSideSearch(res) {
-    return res.total <= this.options.searchSideThreshold;
-  }
-
-  getDefaultFilterFn(query) {
-    if (!query) {
-      return () => true;
+    makeRequest(queryParams) {
+        return this.http.get(this.relativeUrl, { query: queryParams });
     }
-    return it => it.name.toLowerCase().indexOf(query.toLowerCase()) !== -1;
-  }
-
-  formatQuery(query) {
-    return query ? this.options.queryFormatter(query) : '';
-  }
-
-  static validateInputParams(params) {
-    if (params.top) {
-      throw new Error('HubSource: params.top should not be filled, configure "options.searchMax" instead');
+    async makeCachedRequest(params) {
+        if (this.storedData) {
+            return this.storedData;
+        }
+        const res = await this.makeRequest(params);
+        this.storedData = res;
+        return res;
     }
-    if (params.query) {
-      throw new Error('HubSource: params.query should not be filled, configure "options.queryFormatter" instead');
+    static mergeParams(params, toMerge) {
+        return Object.assign({}, params, toMerge);
     }
-  }
-
-  processResults(res) {
-    const items = res[this.relativeUrl] || [];
-
-    if (this.isClientSideSearch) {
-      return items.
-        filter(it => this.filterFn(it)).
-        slice(0, this.options.searchMax);
+    checkIsClientSideSearch(res) {
+        return res.total <= this.options.searchSideThreshold;
     }
-    return items;
-  }
-
-  async sideDetectionRequest(params, query) {
-    const res = await this.makeCachedRequest(HubSource.mergeParams(params, {
-      $top: this.options.searchSideThreshold
-    }));
-    this.isClientSideSearch = this.checkIsClientSideSearch(res);
-
-    if (!this.isClientSideSearch) {
-      return this.doServerSideSearch(params, query);
+    getDefaultFilterFn(query) {
+        if (!query) {
+            return () => true;
+        }
+        return (it) => it.name.toLowerCase().indexOf(query.toLowerCase()) !== -1;
     }
-
-    return res;
-  }
-
-  doClientSideSearch(params) {
-    return this.makeCachedRequest(HubSource.mergeParams(params, {$top: this.constructor.TOP_ALL}));
-  }
-
-  doServerSideSearch(params, query) {
-    return this.makeRequest(HubSource.mergeParams(params, {
-      query: this.formatQuery(query),
-      $top: this.options.searchMax
-    }));
-  }
-
-  getValueFromSuitableSource(query, params) {
-    if (this.isClientSideSearch === null) {
-      return this.sideDetectionRequest(params, query);
+    formatQuery(query) {
+        return query ? this.options.queryFormatter(query) : '';
     }
-
-    if (this.isClientSideSearch) {
-      return this.doClientSideSearch(params);
+    static validateInputParams(params) {
+        if (params.top) {
+            throw new Error('HubSource: params.top should not be filled, configure "options.searchMax" instead');
+        }
+        if (params.query) {
+            throw new Error('HubSource: params.query should not be filled, configure "options.queryFormatter" instead');
+        }
+    }
+    processResults(res) {
+        const items = res[this.relativeUrl] || [];
+        if (this.isClientSideSearch) {
+            return items.
+                filter(it => this.filterFn(it)).
+                slice(0, this.options.searchMax);
+        }
+        return items;
+    }
+    async sideDetectionRequest(params, query) {
+        const res = await this.makeCachedRequest(HubSource.mergeParams(params, {
+            $top: this.options.searchSideThreshold
+        }));
+        this.isClientSideSearch = this.checkIsClientSideSearch(res);
+        if (!this.isClientSideSearch) {
+            return this.doServerSideSearch(params, query);
+        }
+        return res;
+    }
+    doClientSideSearch(params) {
+        return this.makeCachedRequest(HubSource.mergeParams(params, {
+            $top: this.constructor.TOP_ALL
+        }));
+    }
+    doServerSideSearch(params, query) {
+        return this.makeRequest(HubSource.mergeParams(params, {
+            query: this.formatQuery(query),
+            $top: this.options.searchMax
+        }));
+    }
+    getValueFromSuitableSource(query, params) {
+        if (this.isClientSideSearch === null) {
+            return this.sideDetectionRequest(params, query);
+        }
+        if (this.isClientSideSearch) {
+            return this.doClientSideSearch(params);
+        }
+        return this.doServerSideSearch(params, query);
+    }
+    async get(query, params, filterFn) {
+        HubSource.validateInputParams(params);
+        this.filterFn = filterFn || this.getDefaultFilterFn(query);
+        const res = await this.getValueFromSuitableSource(query, params);
+        return this.processResults(res);
     }
-
-    return this.doServerSideSearch(params, query);
-  }
-
-  async get(query, params, filterFn) {
-    HubSource.validateInputParams(params);
-
-    this.filterFn = filterFn || this.getDefaultFilterFn(query);
-
-    const res = await this.getValueFromSuitableSource(query, params);
-    return this.processResults(res);
-  }
 }

package/components/hub-source/hub-source__user.d.ts

@@ -0,0 +1,4 @@
+import Auth, { AuthUser } from '../auth/auth';
+import { UserCardUser } from '../user-card/card';
+export declare function convertUserForCard(hubUser: AuthUser, serverUri?: string): UserCardUser;
+export declare function createHubUserCardSource(auth: Auth, userId: string | number, fields?: string): () => Promise<UserCardUser>;

package/components/hub-source/hub-source__user.js

@@ -1,27 +1,20 @@
 import HTTP from '../http/http';
-
 const DEFAULT_FIELDS = 'id,name,login,banned,banReason,profile(email/email,avatar/url)';
-
 export function convertUserForCard(hubUser, serverUri = '') {
-  return {
-    name: hubUser.name,
-    login: hubUser.login,
-    banned: hubUser.banned,
-    banReason: hubUser.banReason,
-    email: hubUser.profile.email && hubUser.profile.email.email,
-    avatarUrl: hubUser.profile.avatar.url,
-    href: `${serverUri}users/${hubUser.id}`
-  };
+    return {
+        name: hubUser.name,
+        login: hubUser.login,
+        banned: hubUser.banned,
+        banReason: hubUser.banReason,
+        email: hubUser.profile?.email?.email,
+        avatarUrl: hubUser.profile?.avatar?.url,
+        href: `${serverUri}users/${hubUser.id}`
+    };
 }
-
 export function createHubUserCardSource(auth, userId, fields = DEFAULT_FIELDS) {
-  const http = new HTTP(auth);
-
-  return async function getHubUser() {
-    const hubUser = await http.get(
-      `${auth.config.serverUri}api/rest/users/${userId}?fields=${fields}`
-    );
-
-    return convertUserForCard(hubUser, auth.config.serverUri);
-  };
+    const http = new HTTP(auth);
+    return async function getHubUser() {
+        const hubUser = await http.get(`${auth.config.serverUri}api/rest/users/${userId}?fields=${fields}`);
+        return convertUserForCard(hubUser, auth.config.serverUri);
+    };
 }

package/components/hub-source/hub-source__users-groups.d.ts

@@ -0,0 +1,24 @@
+import Auth, { AuthUser } from '../auth/auth';
+import HubSource, { Item } from './hub-source';
+export interface HubSourceUsersGroupsOptions {
+    searchMax: number;
+    searchSideThreshold: number;
+}
+export interface UserGroup extends Item {
+    id: number;
+    total?: number;
+    userCount: number;
+    iconUrl?: string;
+}
+export default class HubSourceUsersGroups {
+    auth: Auth;
+    options: HubSourceUsersGroupsOptions;
+    usersSource: HubSource<AuthUser, 'users'>;
+    groupsSource: HubSource<UserGroup, 'usergroups'>;
+    constructor(auth: Auth, options?: Partial<HubSourceUsersGroupsOptions>);
+    static wrapMultiwordQuery(query?: string): string | undefined;
+    createUsersFilterFn(query?: string): (it: AuthUser) => boolean;
+    getUsers(query?: string): Promise<AuthUser[]>;
+    getGroups(query?: string): Promise<UserGroup[]>;
+    getUserAndGroups(query?: string): Promise<[AuthUser[], UserGroup[]]>;
+}

package/components/hub-source/hub-source__users-groups.js

@@ -1,60 +1,53 @@
 import HubSource from './hub-source';
-
 const defaultOptions = {
-  searchMax: 20,
-  searchSideThreshold: 200
+    searchMax: 20,
+    searchSideThreshold: 200
 };
-
 export default class HubSourceUsersGroups {
-  constructor(auth, options) {
-    this.auth = auth;
-    this.options = Object.assign({}, defaultOptions, options);
-
-    this.usersSource = new HubSource(auth, 'users', {
-      searchMax: this.options.searchMax,
-      searchSideThreshold: this.options.searchSideThreshold,
-      queryFormatter: query => `nameStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)} or loginStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)}`
-    });
-    this.groupsSource = new HubSource(auth, 'usergroups', {
-      searchMax: this.options.searchMax,
-      searchSideThreshold: this.options.searchSideThreshold
-    });
-  }
-
-  static wrapMultiwordQuery(query) {
-    if (query && query.indexOf(' ') !== -1) {
-      return `{${query}}`;
+    auth;
+    options;
+    usersSource;
+    groupsSource;
+    constructor(auth, options) {
+        this.auth = auth;
+        this.options = Object.assign({}, defaultOptions, options);
+        this.usersSource = new HubSource(auth, 'users', {
+            searchMax: this.options.searchMax,
+            searchSideThreshold: this.options.searchSideThreshold,
+            queryFormatter: query => `nameStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)} or loginStartsWith: ${HubSourceUsersGroups.wrapMultiwordQuery(query)}`
+        });
+        this.groupsSource = new HubSource(auth, 'usergroups', {
+            searchMax: this.options.searchMax,
+            searchSideThreshold: this.options.searchSideThreshold
+        });
     }
-    return query;
-  }
-
-  createUsersFilterFn(query) {
-    if (!query) {
-      return () => true;
+    static wrapMultiwordQuery(query) {
+        if (query && query.indexOf(' ') !== -1) {
+            return `{${query}}`;
+        }
+        return query;
+    }
+    createUsersFilterFn(query) {
+        if (!query) {
+            return () => true;
+        }
+        const normalizedQuery = query.toLowerCase();
+        return (it) => (it.name.toLowerCase().indexOf(normalizedQuery) !== -1 ||
+            it.login.toLowerCase().indexOf(normalizedQuery) !== -1);
+    }
+    getUsers(query = '') {
+        return this.usersSource.get(query, {
+            fields: 'id,name,login,total,profile/avatar/url',
+            orderBy: 'name'
+        }, this.createUsersFilterFn(query));
+    }
+    getGroups(query = '') {
+        return this.groupsSource.get(query, {
+            fields: 'id,name,total,userCount,iconUrl',
+            orderBy: 'name'
+        });
+    }
+    getUserAndGroups(query) {
+        return Promise.all([this.getUsers(query), this.getGroups(query)]);
     }
-    const normalizedQuery = query.toLowerCase();
-
-    return it => (
-      it.name.toLowerCase().indexOf(normalizedQuery) !== -1 ||
-      it.login.toLowerCase().indexOf(normalizedQuery) !== -1
-    );
-  }
-
-  getUsers(query = '') {
-    return this.usersSource.get(query, {
-      fields: 'id,name,login,total,profile/avatar/url',
-      orderBy: 'name'
-    }, this.createUsersFilterFn(query));
-  }
-
-  getGroups(query = '') {
-    return this.groupsSource.get(query, {
-      fields: 'id,name,total,userCount,iconUrl',
-      orderBy: 'name'
-    });
-  }
-
-  getUserAndGroups(query) {
-    return Promise.all([this.getUsers(query), this.getGroups(query)]);
-  }
 }

package/components/icon/icon.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @name Icon
+ */
+import { PureComponent, ComponentType, SVGAttributes, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { Color, Size } from './icon__constants';
+export declare type IconType = ComponentType<SVGAttributes<SVGSVGElement>>;
+export interface IconProps extends HTMLAttributes<HTMLElement> {
+    color: Color;
+    glyph: string | IconType | null;
+    height?: number | undefined;
+    size?: Size | null | undefined;
+    width?: number | undefined;
+    loading?: boolean | null | undefined;
+    suppressSizeWarning?: boolean | null | undefined;
+}
+export default class Icon extends PureComponent<IconProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        color: PropTypes.Requireable<string>;
+        glyph: PropTypes.Validator<PropTypes.ReactComponentLike>;
+        height: PropTypes.Requireable<number>;
+        size: PropTypes.Requireable<number>;
+        width: PropTypes.Requireable<number>;
+        loading: PropTypes.Requireable<boolean>;
+        suppressSizeWarning: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        className: string;
+        color: Color;
+        glyph: string;
+    };
+    static Color: typeof Color;
+    static Size: typeof Size;
+    warnSize(): void;
+    getStyle(): {
+        width: number | undefined;
+        height: number | undefined;
+    } | undefined;
+    render(): JSX.Element | null;
+}
+export declare type IconAttrs = JSX.LibraryManagedAttributes<typeof Icon, IconProps>;
+export { Color, Size };

package/components/icon/icon.jsx

@@ -0,0 +1,69 @@
+/**
+ * @name Icon
+ */
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import deprecate from 'util-deprecate';
+import { Color, Size } from './icon__constants';
+import styles from './icon.css';
+import IconSVG from './icon__svg';
+const warnSize = deprecate(() => { }, `\`size\`, \`width\` and \`height\` props are not recommended to use in Ring UI \`Icon\` component. The intrinsic sizes of SVG icon (\`width\` and \`height\` SVG attributes) are used instead.
+
+We strongly recommend to use icons handcrafted for particular sizes. If your icon doesn't exist in the desired size, please ask your designer to draw one. "Responsive" checkmark should be unchecked when exporting icon.'`);
+export default class Icon extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        color: PropTypes.string,
+        glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]).isRequired,
+        height: PropTypes.number,
+        size: PropTypes.number,
+        width: PropTypes.number,
+        loading: PropTypes.bool,
+        suppressSizeWarning: PropTypes.bool
+    };
+    static defaultProps = ({
+        className: '',
+        color: Color.DEFAULT,
+        glyph: ''
+    });
+    static Color = Color;
+    static Size = Size;
+    warnSize() {
+        if (this.props.suppressSizeWarning) {
+            return;
+        }
+        warnSize();
+    }
+    getStyle() {
+        const { size, width, height } = this.props;
+        if (width || height) {
+            this.warnSize();
+            return { width, height };
+        }
+        if (size) {
+            this.warnSize();
+            return {
+                width: size,
+                height: size
+            };
+        }
+        return undefined;
+    }
+    render() {
+        const { className, size, color, loading, glyph: Glyph, width, height, suppressSizeWarning, ...restProps } = this.props;
+        if (!Glyph) {
+            return null;
+        }
+        const classes = classNames(styles.icon, {
+            [styles[color]]: !!color,
+            [styles.loading]: loading
+        }, className);
+        return (<span {...restProps} className={classes}>
+        {typeof Glyph === 'string'
+                ? <IconSVG src={Glyph} style={this.getStyle()}/>
+                : <Glyph className={styles.glyph} style={this.getStyle()}/>}
+      </span>);
+    }
+}
+export { Color, Size };

package/components/icon/icon__constants.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Commonly used icon colors.
+ * @enum {string}
+ */
+export declare enum Color {
+    BLUE = "blue",
+    DEFAULT = "",
+    GRAY = "gray",
+    GREEN = "green",
+    MAGENTA = "magenta",
+    RED = "red",
+    WHITE = "white"
+}
+/**
+ * @enum {number}
+ */
+export declare enum Size {
+    Size12 = 12,
+    Size14 = 14,
+    Size16 = 16,
+    Size18 = 18,
+    Size20 = 20,
+    Size24 = 24,
+    Size32 = 32,
+    Size40 = 40,
+    Size48 = 48,
+    Size64 = 64,
+    Size96 = 96,
+    Size128 = 128
+}

package/components/icon/icon__constants.js

@@ -2,30 +2,31 @@
  * Commonly used icon colors.
  * @enum {string}
  */
-export const Color = {
-  BLUE: 'blue',
-  DEFAULT: '',
-  GRAY: 'gray',
-  GREEN: 'green',
-  MAGENTA: 'magenta',
-  RED: 'red',
-  WHITE: 'white'
-};
-
+export var Color;
+(function (Color) {
+    Color["BLUE"] = "blue";
+    Color["DEFAULT"] = "";
+    Color["GRAY"] = "gray";
+    Color["GREEN"] = "green";
+    Color["MAGENTA"] = "magenta";
+    Color["RED"] = "red";
+    Color["WHITE"] = "white";
+})(Color || (Color = {}));
 /**
  * @enum {number}
  */
-export const Size = {
-  Size12: 12,
-  Size14: 14,
-  Size16: 16,
-  Size18: 18,
-  Size20: 20,
-  Size24: 24,
-  Size32: 32,
-  Size40: 40,
-  Size48: 48,
-  Size64: 64,
-  Size96: 96,
-  Size128: 128
-};
+export var Size;
+(function (Size) {
+    Size[Size["Size12"] = 12] = "Size12";
+    Size[Size["Size14"] = 14] = "Size14";
+    Size[Size["Size16"] = 16] = "Size16";
+    Size[Size["Size18"] = 18] = "Size18";
+    Size[Size["Size20"] = 20] = "Size20";
+    Size[Size["Size24"] = 24] = "Size24";
+    Size[Size["Size32"] = 32] = "Size32";
+    Size[Size["Size40"] = 40] = "Size40";
+    Size[Size["Size48"] = 48] = "Size48";
+    Size[Size["Size64"] = 64] = "Size64";
+    Size[Size["Size96"] = 96] = "Size96";
+    Size[Size["Size128"] = 128] = "Size128";
+})(Size || (Size = {}));

package/components/icon/icon__svg.d.ts

@@ -0,0 +1,15 @@
+import React, { SVGAttributes } from 'react';
+import PropTypes from 'prop-types';
+export interface IconSVGProps extends SVGAttributes<SVGSVGElement> {
+    src: string;
+}
+declare function IconSVG({ src, className, ...rest }: IconSVGProps): JSX.Element;
+declare namespace IconSVG {
+    var propTypes: {
+        className: PropTypes.Requireable<string>;
+        src: PropTypes.Validator<string>;
+        style: PropTypes.Requireable<object>;
+    };
+}
+declare const _default: React.MemoExoticComponent<typeof IconSVG>;
+export default _default;

package/components/icon/icon__svg.jsx

@@ -0,0 +1,58 @@
+// Inspired by https://github.com/sairion/svg-inline-react
+import React, { memo } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import memoize from '../global/memoize';
+import styles from './icon.css';
+function convertReactSVGDOMProperty(str) {
+    return str.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());
+}
+function serializeAttrs(map) {
+    const res = {};
+    for (let i = 0; i < map.length; i++) {
+        const key = map[i].name;
+        let prop = key;
+        if (key === 'class') {
+            prop = 'className';
+        }
+        else if (!key.startsWith('data-')) {
+            prop = convertReactSVGDOMProperty(key);
+        }
+        res[prop] = map[i].value;
+    }
+    return res;
+}
+function extractSVGProps(svgNode) {
+    const map = svgNode.attributes;
+    return (map.length > 0) ? serializeAttrs(map) : null;
+}
+const getSVGFromSource = memoize((src) => {
+    const svgContainer = document.createElement('div');
+    svgContainer.innerHTML = src;
+    const svg = svgContainer.firstElementChild;
+    svg.remove ? svg.remove() : svgContainer.removeChild(svg);
+    return {
+        props: extractSVGProps(svg),
+        html: svg.innerHTML
+    };
+});
+function isCompatibilityMode(iconSrc) {
+    const hasWidth = /width="[\d\.]+"/ig.test(iconSrc);
+    const hasHeight = /height="[\d\.]+"/ig.test(iconSrc);
+    return !hasWidth || !hasHeight;
+}
+function IconSVG({ src, className, ...rest }) {
+    const glyphClasses = classNames(styles.glyph, {
+        [styles.compatibilityMode]: isCompatibilityMode(src)
+    }, className);
+    const { props, html } = getSVGFromSource(src);
+    return (<svg {...props} {...rest} className={glyphClasses} dangerouslySetInnerHTML={{
+            __html: html
+        }}/>);
+}
+IconSVG.propTypes = {
+    className: PropTypes.string,
+    src: PropTypes.string.isRequired,
+    style: PropTypes.object
+};
+export default memo(IconSVG);

package/components/icon/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './icon';
+export * from './icon';