@jetbrains/ring-ui 6.0.6-beta.0 → 6.0.6

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,100 @@
+@import "../global/variables.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(var(--ring-unit) * 2);
+    height: calc(var(--ring-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';

package/components/input/input-legacy.css

@@ -0,0 +1,123 @@
+@import "../global/variables.css";
+
+/*
+Input
+
+ Markup:
+ <input class="{$modifiers} ring-input" type="text" placeholder="placeholder">
+
+ :disabled            - Disabled state, also available as the `.ring-input_disabled` class name.
+ :active              - Active state, also available as the `.ring-input_active` class name.
+ :focus               - Focus state, also available as the `.ring-input_focus` class name.
+ .ring-input_correct  - The entered value is correct.
+ .ring-input_error    - The entered value is incorrect.
+ */
+
+:global(.ring-input) {
+  /* .heightS */
+  --ring-input-padding-block: 1px;
+  --ring-input-padding-inline: var(--ring-unit);
+  --ring-input-padding-start: var(--ring-input-padding-inline);
+  --ring-input-padding-end: var(--ring-input-padding-inline);
+
+  /* stylelint-disable order/properties-order */
+
+  box-sizing: border-box;
+
+  font: inherit;
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+
+  width: 100%;
+
+  margin: 0;
+  padding-top: var(--ring-input-padding-block);
+  padding-right: var(--ring-input-padding-end);
+  padding-bottom: var(--ring-input-padding-block);
+  padding-left: var(--ring-input-padding-start);
+
+  transition: border-color var(--ring-ease);
+
+  color: var(--ring-text-color);
+  border: 1px solid var(--ring-borders-color);
+  border-radius: var(--ring-border-radius);
+  outline: none;
+  background-color: var(--ring-content-background-color);
+
+  caret-color: var(--ring-main-color);
+
+  /* stylelint-enable order/properties-order */
+
+  [dir="rtl"] & {
+    padding-right: var(--ring-input-padding-start);
+    padding-left: var(--ring-input-padding-end);
+  }
+
+  &:hover {
+    transition: none;
+
+    border-color: var(--ring-border-hover-color);
+  }
+
+  .error & {
+    border-color: var(--ring-icon-error-color);
+  }
+
+  &:focus {
+    transition: none;
+
+    border-color: var(--ring-main-color);
+  }
+
+  &[disabled] {
+    color: var(--ring-disabled-color);
+    border-color: var(--ring-border-disabled-color);
+    background-color: var(--ring-disabled-background-color);
+
+    -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
+  }
+
+  /*
+    Kill yellow/blue webkit autocomplete
+    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
+  */
+  &:-webkit-autofill {
+    &,
+    &:hover,
+    &:focus {
+      transition: background-color 50000s ease-in-out 0s;
+    }
+  }
+}
+
+:global(.ring-input_error) {
+  border-color: var(--ring-icon-error-color);
+}
+
+:global(.ring-input_filter-popup) {
+  width: 100%;
+  min-width: 200px;
+}
+
+:global(.ring-input.ring-input:disabled),
+:global(.ring-input.ring-input[disabled]),
+:global(.ring-input.ring-input_disabled) {
+  color: var(--ring-disabled-color);
+  border-color: var(--ring-border-disabled-color);
+  background-color: var(--ring-disabled-background-color);
+
+  -webkit-text-fill-color: var(--ring-disabled-color); /* Required for Safari, see RG-2063 for details */
+}
+
+:global(textarea.ring-input) {
+  box-sizing: border-box;
+
+  min-height: calc(8 * var(--ring-unit));
+
+  resize: none;
+}
+
+/* https://stackoverflow.com/questions/7144843/extra-space-under-textarea-differs-along-browsers */
+:global(.ring-input::placeholder) {
+  color: var(--ring-disabled-color);
+}