@jetbrains/ring-ui 5.1.23 → 5.1.25

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: string;
+    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

@@ -0,0 +1,53 @@
+import HubSource from './hub-source';
+const defaultOptions = {
+    searchMax: 20,
+    searchSideThreshold: 200
+};
+export default class HubSourceUsersGroups {
+    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
+        });
+    }
+    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)]);
+    }
+}

package/components/i18n/README.md

@@ -0,0 +1,46 @@
+This is localisation layer, that allows to translate the app into different languages.
+
+All messages should be stored in a messages.json, using that format https://www.i18next.com/misc/json-format#i18next-json-v4
+
+### How to use
+
+1. Using your project i18n tooling, construct an object with localised messages, like:
+```
+// You can use https://ttag.js.org/ for example:
+const localised = {
+  login: t`Log in`,
+  ...
+}
+```
+
+2. Pass it to i18n singleton, using `setTranslations`. That would provide localisation to non-react components, like Auth.
+
+```
+// Your messages object should have localised strings at that moment
+const localised = {
+  login: 'Inloggen',
+  ...
+}
+
+setTranslations(localised);
+```
+
+3. Add I18nContextHolder into your root React tree. If you replace "localised" object with another one, consumers would be updated automatically.  
+
+```
+  <I18nContextHolder messages={localised}>
+    <App />
+  </I18nContextHolder>
+```  
+
+
+
+### Utilities
+
+There is some ways to automate strings extraction from messages.json. You can do:
+
+```
+npx i18next-conv -s messages.json -t messages.pot -l en --ctxSeparator "|" --compatibilityJSON v4
+```
+
+And get a .pot file, which you can merge with your other sources

package/components/i18n/i18n-context.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type Messages } from './i18n';
+export interface I18nContextProps {
+    translate(key: keyof Messages): string;
+    messages: Messages;
+}
+export declare const I18nContext: React.Context<I18nContextProps>;
+interface I18nContextHolderProps {
+    messages: Messages;
+    children?: React.ReactNode;
+}
+export declare const I18nContextHolder: React.FC<I18nContextHolderProps>;
+export {};

package/components/i18n/i18n-context.js

@@ -0,0 +1,14 @@
+import React, { useEffect } from 'react';
+import { getTranslations, setTranslations, translate } from './i18n';
+export const I18nContext = React.createContext({
+    messages: getTranslations(),
+    translate
+});
+export const I18nContextHolder = ({ children, messages }) => {
+    useEffect(() => {
+        setTranslations(messages);
+    }, [messages]);
+    return (<I18nContext.Provider value={{ messages, translate }}>
+      {children}
+    </I18nContext.Provider>);
+};

package/components/i18n/i18n.d.ts

@@ -0,0 +1,59 @@
+import defaultMessages from './messages.json';
+export type MessagesStrict = typeof defaultMessages;
+export type Messages = Partial<MessagesStrict>;
+export declare function setTranslations(newMessages: Messages): void;
+export declare function getTranslations(): Partial<{
+    login: string;
+    logout: string;
+    loginTo: string;
+    ok: string;
+    cancel: string;
+    tryAgainLabel: string;
+    postpone: string;
+    youHaveLoggedInAs: string;
+    applyChange: string;
+    backendIsNotAvailable: string;
+    checkAgain: string;
+    nothingHappensLink: string;
+    errorMessage: string;
+    applyChangedUser: string;
+    profile: string;
+    switchUser: string;
+    addFirstDate: string;
+    addSecondDate: string;
+    addTime: string;
+    selectName: string;
+    setDate: string;
+    setDateTime: string;
+    setPeriod: string;
+    clear: string;
+    gotIt: string;
+    dismiss: string;
+    perPage: string;
+    firstPage: string;
+    lastPage: string;
+    nextPage: string;
+    previousPage: string;
+    searchTitle: string;
+    clearTitle: string;
+    userAgreement: string;
+    accept: string;
+    decline: string;
+    close: string;
+    scrollToAccept: string;
+    remindLater: string;
+    filterItems: string;
+    selectOption: string;
+    progress: string;
+    loading: string;
+    noOptionsFound: string;
+    banned: string;
+    online: string;
+    offline: string;
+    copyToClipboard: string;
+    copiedToClipboard: string;
+    copingToClipboardError: string;
+    unverified: string;
+}>;
+export declare function getTranslationsWithFallback(): MessagesStrict;
+export declare function translate(key: keyof MessagesStrict): string;

package/components/i18n/i18n.js

@@ -0,0 +1,26 @@
+import defaultMessages from './messages.json';
+let messages = defaultMessages;
+const warned = new Set();
+function warnMissedKeyOnce(key) {
+    if (warned.has(key)) {
+        return;
+    }
+    warned.add(key);
+    // eslint-disable-next-line no-console
+    console.warn(`Missing localisation for key "${key}"`);
+}
+export function setTranslations(newMessages) {
+    messages = newMessages;
+}
+export function getTranslations() {
+    return messages;
+}
+export function getTranslationsWithFallback() {
+    return { ...defaultMessages, ...messages };
+}
+export function translate(key) {
+    if (!(key in messages)) {
+        warnMissedKeyOnce(key);
+    }
+    return messages[key] ?? defaultMessages[key];
+}

package/components/i18n/messages.json

@@ -0,0 +1,53 @@
+{
+  "login": "Log in",
+  "logout": "Log out",
+  "loginTo": "Log in to {{serviceName}}",
+  "ok": "OK",
+  "cancel": "Cancel",
+  "tryAgainLabel": "Try again",
+  "postpone": "Postpone",
+  "youHaveLoggedInAs": "You have logged in as another user: {{userName}}",
+  "applyChange": "Apply change",
+  "backendIsNotAvailable": "Connection lost",
+  "checkAgain": "try again",
+  "nothingHappensLink": "Click here if nothing happens",
+  "errorMessage": "There may be a problem with your network connection. Make sure that you are online and",
+  "applyChangedUser": "Apply changed user",
+  "profile": "Profile",
+  "switchUser": "Switch user",
+  "addFirstDate": "Add first date",
+  "addSecondDate": "Add second date",
+  "addTime": "Add time",
+  "selectName": "Select {{name}}",
+  "setDate": "Set a date",
+  "setDateTime": "Set date and time",
+  "setPeriod": "Set a period",
+  "clear": "Clear input",
+  "gotIt": "Got it",
+  "dismiss": "Dismiss",
+  "perPage": "per page",
+  "firstPage": "First page",
+  "lastPage": "Last page",
+  "nextPage": "Next page",
+  "previousPage": "Previous",
+  "searchTitle": "Search",
+  "clearTitle": "Clear search input",
+  "userAgreement": "User Agreement",
+  "accept": "Accept",
+  "decline": "Decline",
+  "close": "Close",
+  "scrollToAccept": "View the entire agreement to continue",
+  "remindLater": "Remind me later",
+  "filterItems": "Filter items",
+  "selectOption": "Select an option",
+  "progress": "Progress",
+  "loading": "Loading...",
+  "noOptionsFound": "No options found",
+  "banned": "banned",
+  "online": "online",
+  "offline": "offline",
+  "copyToClipboard": "Copy email to clipboard",
+  "copiedToClipboard": "Email was copied to clipboard",
+  "copingToClipboardError": "Failed to copy to clipboard",
+  "unverified": "Unverified"
+}

package/components/icon/icon.css

@@ -0,0 +1,102 @@
+@import "../global/variables.css";
+
+@value unit from "../global/global.css";
+
+.icon {
+  display: inline-block;
+
+  fill: currentColor;
+}
+
+.glyph {
+  display: inline-flex;
+
+  margin-right: -1px;
+  margin-left: -1px;
+
+  pointer-events: none;
+
+  &[width="10"] {
+    vertical-align: -1px;
+  }
+
+  &[width="14"] {
+    margin-right: -2px;
+    margin-left: 0;
+
+    vertical-align: -3px;
+  }
+
+  &[width="16"] {
+    vertical-align: -3px;
+  }
+
+  &[width="20"] {
+    vertical-align: -2px;
+  }
+
+  &.compatibilityMode {
+    width: calc(unit * 2);
+    height: calc(unit * 2);
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+/* HACK: This media query hack makes styles applied for WebKit browsers only */
+/* stylelint-disable-next-line media-feature-name-no-vendor-prefix */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .glyph {
+    width: auto; /* Safari size bug workaround, see https://youtrack.jetbrains.com/issue/RG-1983 */
+  }
+}
+
+.gray {
+  color: var(--ring-icon-secondary-color);
+}
+
+.hover {
+  color: var(--ring-icon-hover-color);
+}
+
+.green {
+  color: var(--ring-icon-success-color);
+}
+
+.magenta {
+  color: var(--ring-link-hover-color);
+}
+
+.red {
+  color: var(--ring-icon-error-color);
+}
+
+.blue {
+  color: var(--ring-main-color);
+}
+
+.white {
+  color: var(--ring-white-text-color);
+}
+
+.loading {
+  animation-name: icon-loading;
+  animation-duration: 1200ms;
+  animation-iteration-count: infinite;
+}
+
+@keyframes icon-loading {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.9);
+
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

package/components/icon/icon.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @name Icon
+ */
+import React, { PureComponent, ComponentType, SVGAttributes, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import { Color, Size } from './icon__constants';
+export type IconType = ComponentType<SVGAttributes<SVGSVGElement>>;
+export interface IconProps extends HTMLAttributes<HTMLElement> {
+    color: Color;
+    glyph: string | IconType | null;
+    height?: number | undefined;
+    size?: Size | number | 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<NonNullable<NonNullable<PropTypes.ReactComponentLike | null | undefined>>>;
+        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(): React.JSX.Element | null;
+}
+export type IconAttrs = JSX.LibraryManagedAttributes<typeof Icon, IconProps>;
+export { Color, Size };

package/components/icon/icon.js

@@ -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

@@ -0,0 +1,32 @@
+/**
+ * Commonly used icon colors.
+ * @enum {string}
+ */
+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 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): React.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.js

@@ -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';

package/components/icon/index.js

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