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

package/components/grid/grid.d.ts

@@ -0,0 +1,14 @@
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Grid
+ */
+export declare class Grid extends Component<HTMLAttributes<HTMLDivElement>> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): React.JSX.Element;
+}
+export { default as Row } from './row';
+export { default as Col } from './col';

package/components/grid/grid.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './grid.css';
+/**
+ * @name Grid
+ */
+export class Grid extends Component {
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, ...restProps } = this.props;
+        const classes = classNames(styles['container-fluid'], className);
+        return (<div {...restProps} className={classes}>
+        {children}
+      </div>);
+    }
+}
+export { default as Row } from './row';
+export { default as Col } from './col';

package/components/grid/row.d.ts

@@ -0,0 +1,40 @@
+import React, { Component, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+declare const ModifierType: PropTypes.Requireable<string>;
+type ModifierType = 'xs' | 'sm' | 'md' | 'lg';
+export interface RowProps {
+    children?: ReactNode;
+    reverse?: boolean | null | undefined;
+    start?: ModifierType | null | undefined;
+    center?: ModifierType | null | undefined;
+    end?: ModifierType | null | undefined;
+    top?: ModifierType | null | undefined;
+    middle?: ModifierType | null | undefined;
+    baseline?: ModifierType | null | undefined;
+    bottom?: ModifierType | null | undefined;
+    around?: ModifierType | null | undefined;
+    between?: ModifierType | null | undefined;
+    first?: ModifierType | null | undefined;
+    last?: ModifierType | null | undefined;
+    className?: string | null | undefined;
+}
+export default class Row extends Component<RowProps> {
+    static propTypes: {
+        reverse: PropTypes.Requireable<boolean>;
+        start: PropTypes.Requireable<string>;
+        center: PropTypes.Requireable<string>;
+        end: PropTypes.Requireable<string>;
+        top: PropTypes.Requireable<string>;
+        middle: PropTypes.Requireable<string>;
+        baseline: PropTypes.Requireable<string>;
+        bottom: PropTypes.Requireable<string>;
+        around: PropTypes.Requireable<string>;
+        between: PropTypes.Requireable<string>;
+        first: PropTypes.Requireable<string>;
+        last: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+    render(): React.JSX.Element;
+}
+export {};

package/components/grid/row.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './grid.css';
+const ModifierType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg']);
+const modifierKeys = [
+    'start', 'center', 'end', // text-align, justify-content
+    'around', 'between', // justify-content
+    'top', 'middle', 'baseline', 'bottom', // align-items
+    'first', 'last' // order
+];
+/**
+ * Converts xs="middle" to class "middle-xs"
+ * @param {Object} props incoming props
+ * @returns {Array} result modifier classes
+ */
+function getModifierClassNames(props) {
+    return modifierKeys.reduce((result, key) => {
+        if (props[key]) {
+            return result.concat(styles[`${key}-${props[key]}`]);
+        }
+        return result;
+    }, []);
+}
+export default class Row extends Component {
+    static propTypes = {
+        reverse: PropTypes.bool,
+        start: ModifierType,
+        center: ModifierType,
+        end: ModifierType,
+        top: ModifierType,
+        middle: ModifierType,
+        baseline: ModifierType,
+        bottom: ModifierType,
+        around: ModifierType,
+        between: ModifierType,
+        first: ModifierType,
+        last: ModifierType,
+        className: PropTypes.string,
+        children: PropTypes.node
+    };
+    render() {
+        const { children, className, reverse, ...restProps } = this.props;
+        const classes = classNames(className, styles.row, getModifierClassNames(restProps), {
+            [styles.reverse]: reverse
+        });
+        return (<div className={classes}>
+        {children}
+      </div>);
+    }
+}

package/components/group/group.css

@@ -0,0 +1,7 @@
+@import "../global/variables.css";
+
+.group {
+  & > *:not(:last-child) {
+    margin-right: var(--ring-unit);
+  }
+}

package/components/group/group.d.ts

@@ -0,0 +1,12 @@
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+/**
+ * @name Group
+ */
+export default class Group extends Component<HTMLAttributes<HTMLSpanElement>> {
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}

package/components/group/group.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import styles from './group.css';
+/**
+ * @name Group
+ */
+export default class Group extends Component {
+    static propTypes = {
+        children: PropTypes.node,
+        className: PropTypes.string
+    };
+    render() {
+        const { children, className, ...restProps } = this.props;
+        const classes = classNames(styles.group, className);
+        return (<span {...restProps} className={classes}>
+        {children}
+      </span>);
+    }
+}

package/components/header/header.css

@@ -0,0 +1,169 @@
+@import "../global/variables.css";
+
+@value dark from "../global/variables_dark.css";
+@value link, active from "../link/link.css";
+@value compensate: 3px;
+@value compensated: calc(calc(var(--ring-unit) * 8) - compensate);
+
+:root {
+  --ring-header-link-color: var(--ring-link-color);
+}
+
+.dark,
+:global(.ring-ui-theme-dark) {
+  --ring-header-link-color: var(--ring-text-color);
+}
+
+.header {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+
+  box-sizing: border-box;
+  height: calc(var(--ring-unit) * 8);
+
+  color: var(--ring-text-color);
+
+  background-color: var(--ring-navigation-background-color);
+
+  line-height: compensated;
+
+  & > * {
+    display: inline-block;
+
+    box-sizing: border-box;
+    height: calc(var(--ring-unit) * 8);
+    padding: 0 calc(var(--ring-unit) * 1.5) compensate;
+  }
+
+  /* override link */
+  & .link {
+    color: var(--ring-header-link-color);
+  }
+
+  & .active {
+    color: var(--ring-active-text-color);
+  }
+}
+
+.headerSpaced {
+  & > *:first-child {
+    padding-left: calc(var(--ring-unit) * 4);
+  }
+
+  & > *:last-child {
+    padding-right: calc(var(--ring-unit) * 4);
+  }
+}
+
+.logo {
+  display: inline-flex;
+  align-items: center;
+
+  height: calc(var(--ring-unit) * 8);
+
+  color: var(--ring-navigation-background-color);
+
+  line-height: normal;
+
+  & svg {
+    vertical-align: bottom;
+  }
+}
+
+.tray {
+  align-items: flex-end;
+
+  margin-left: auto;
+  padding: 0 0 compensate;
+}
+
+/* override .header > * */
+.tray.tray {
+  display: flex;
+}
+
+.trayItemContent {
+  height: compensated;
+}
+
+.icon {
+  width: calc(var(--ring-unit) * 5);
+
+  text-align: center;
+
+  vertical-align: top;
+}
+
+/* override button */
+.icon.icon {
+  height: compensated;
+
+  padding-top: calc(var(--ring-unit) / 2);
+
+  line-height: compensated;
+}
+
+.main svg {
+  color: var(--ring-main-color);
+}
+
+.rotatable svg {
+  transition: transform 0.3s ease-out;
+  transform: rotate(0deg);
+  transform-origin: 50% 50%;
+}
+
+.rotated svg {
+  transform: rotate(90deg);
+}
+
+.profileEmpty {
+  align-items: center;
+
+  width: auto;
+  height: compensated;
+  padding-left: var(--ring-unit);
+
+  vertical-align: bottom;
+}
+
+/* override dropdown */
+.profileEmpty.profileEmpty {
+  display: inline-flex;
+}
+
+.profile {
+  composes: profileEmpty;
+
+  height: compensated;
+
+  cursor: pointer;
+}
+
+.avatarWrapper {
+  composes: resetButton from "../global/global.css";
+
+  line-height: 0;
+}
+
+.hasUpdates {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    top: calc(15% - 5px);
+    right: calc(15% - 5px);
+
+    display: block;
+
+    width: var(--ring-unit);
+    height: var(--ring-unit);
+
+    content: "";
+
+    border: 1px solid var(--ring-white-text-color);
+    border-radius: 50%;
+    background-color: var(--ring-link-hover-color);
+  }
+}

package/components/header/header.d.ts

@@ -0,0 +1,34 @@
+import React, { Component, HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import Theme from '../global/theme';
+interface HeaderProps extends HTMLAttributes<HTMLElement> {
+    spaced: boolean;
+    theme: Theme;
+}
+/**
+ * @name Header
+ */
+/**
+ * Displays a configurable page header. See available presentation options in the knobs panel.
+ */
+declare class Header extends Component<HeaderProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        spaced: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        spaced: boolean;
+        theme: Theme;
+    };
+    render(): React.JSX.Element;
+}
+export type HeaderAttrs = JSX.LibraryManagedAttributes<typeof Header, HeaderProps>;
+export default Header;
+export { default as Logo } from './logo';
+export { default as Tray } from './tray';
+export { default as TrayIcon } from './tray-icon';
+export { default as Profile } from './profile';
+export { default as SmartProfile } from './smart-profile';
+export { default as Services } from './services';
+export { default as SmartServices } from './smart-services';

package/components/header/header.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Theme, { ThemeProvider } from '../global/theme';
+import styles from './header.css';
+/**
+ * @name Header
+ */
+/**
+ * Displays a configurable page header. See available presentation options in the knobs panel.
+ */
+class Header extends Component {
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node,
+        spaced: PropTypes.bool
+    };
+    static defaultProps = {
+        spaced: true,
+        theme: Theme.DARK
+    };
+    render() {
+        const { children, className, spaced, theme, ...restProps } = this.props;
+        const classes = classNames(styles.header, className, {
+            [styles.headerSpaced]: spaced
+        });
+        const overrideOuterTheme = theme !== Theme.LIGHT;
+        const header = (<header {...restProps} className={classes}>
+        {children}
+      </header>);
+        if (overrideOuterTheme) {
+            return (<ThemeProvider theme={theme}>
+          {header}
+        </ThemeProvider>);
+        }
+        return header;
+    }
+}
+export default Header;
+export { default as Logo } from './logo';
+export { default as Tray } from './tray';
+export { default as TrayIcon } from './tray-icon';
+export { default as Profile } from './profile';
+export { default as SmartProfile } from './smart-profile';
+export { default as Services } from './services';
+export { default as SmartServices } from './smart-services';

package/components/header/logo.d.ts

@@ -0,0 +1,14 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { IconAttrs, Size } from '../icon/icon';
+export default class Logo extends PureComponent<IconAttrs> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        size: Size;
+        suppressSizeWarning: boolean;
+    };
+    static Size: typeof Size;
+    render(): React.JSX.Element;
+}

package/components/header/logo.js

@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Icon, { Size } from '../icon/icon';
+import styles from './header.css';
+export default class Logo extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string
+    };
+    static defaultProps = {
+        size: Size.Size48,
+        suppressSizeWarning: true
+    };
+    static Size = Size;
+    render() {
+        const { className, ...restProps } = this.props;
+        const classes = classNames(styles.logo, className);
+        return (<div className={classes}>
+        <Icon {...restProps}/>
+      </div>);
+    }
+}

package/components/header/profile.d.ts

@@ -0,0 +1,75 @@
+import React, { ComponentType, HTMLAttributes, PureComponent, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { Size } from '../avatar/avatar';
+import { ListDataItem } from '../list/consts';
+import { AuthUser } from '../auth/auth';
+import { ClickableLinkProps } from '../link/clickableLink';
+export interface ProfileTranslations {
+    applyChangedUser?: string | null | undefined;
+    login?: string | null | undefined;
+    profile?: string | null | undefined;
+    switchUser?: string | null | undefined;
+    logout?: string | null | undefined;
+    certificateMismatch?: string | null | undefined;
+}
+export interface ProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    closeOnSelect: boolean;
+    renderPopupItems: (items: ListDataItem[]) => readonly ListDataItem[];
+    translations?: ProfileTranslations | null | undefined;
+    size: Size;
+    renderGuest: (props: ProfileProps) => ReactNode;
+    hasUpdates?: boolean | null | undefined;
+    loading?: boolean | undefined;
+    onLogin?: (() => void) | undefined;
+    onLogout?: (() => void) | null | undefined;
+    onSwitchUser?: (() => void) | null | undefined;
+    profileUrl?: string | undefined;
+    LinkComponent?: ComponentType<ClickableLinkProps> | null | undefined;
+    user?: AuthUser | null | undefined | void;
+    round?: boolean | null | undefined;
+    showLogIn?: boolean | null | undefined;
+    showLogOut?: boolean | null | undefined;
+    showSwitchUser?: boolean | null | undefined;
+    showApplyChangedUser?: boolean | null | undefined;
+    onRevertPostponement?: (() => void) | null | undefined;
+}
+export default class Profile extends PureComponent<ProfileProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        closeOnSelect: PropTypes.Requireable<boolean>;
+        hasUpdates: PropTypes.Requireable<boolean>;
+        loading: PropTypes.Requireable<boolean>;
+        onLogin: PropTypes.Requireable<(...args: any[]) => any>;
+        onLogout: PropTypes.Requireable<(...args: any[]) => any>;
+        onSwitchUser: PropTypes.Requireable<(...args: any[]) => any>;
+        profileUrl: PropTypes.Requireable<string>;
+        renderPopupItems: PropTypes.Requireable<(...args: any[]) => any>;
+        LinkComponent: PropTypes.Requireable<NonNullable<string | ((...args: any[]) => any) | React.Component<unknown, unknown, unknown> | null | undefined>>;
+        translations: PropTypes.Requireable<PropTypes.InferProps<{
+            profile: PropTypes.Requireable<string>;
+            login: PropTypes.Requireable<string>;
+            logout: PropTypes.Requireable<string>;
+            applyChangedUser: PropTypes.Requireable<string>;
+            switchUser: PropTypes.Requireable<string>;
+        }>>;
+        user: PropTypes.Requireable<PropTypes.InferProps<{
+            guest: PropTypes.Requireable<boolean>;
+            profile: PropTypes.Requireable<object>;
+            name: PropTypes.Requireable<string>;
+        }>>;
+        size: PropTypes.Requireable<number>;
+        round: PropTypes.Requireable<boolean>;
+        showLogIn: PropTypes.Requireable<boolean>;
+        showLogOut: PropTypes.Requireable<boolean>;
+        showSwitchUser: PropTypes.Requireable<boolean>;
+        showApplyChangedUser: PropTypes.Requireable<boolean>;
+        onRevertPostponement: PropTypes.Requireable<(...args: any[]) => any>;
+        renderGuest: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: ProfileProps;
+    static contextType: React.Context<import("../i18n/i18n-context").I18nContextProps>;
+    context: React.ContextType<typeof Profile.contextType>;
+    static Size: typeof Size;
+    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+}
+export type ProfileAttrs = JSX.LibraryManagedAttributes<typeof Profile, ProfileProps>;

package/components/header/profile.js

@@ -0,0 +1,119 @@
+import React, { Component, PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Avatar, { Size } from '../avatar/avatar';
+import Button from '../button/button';
+import DropdownMenu from '../dropdown-menu/dropdown-menu';
+import PopupMenu from '../popup-menu/popup-menu';
+import { I18nContext } from '../i18n/i18n-context';
+import { isTruthy } from '../global/typescript-utils';
+import styles from './header.css';
+const rgItemType = PopupMenu.ListProps.Type.LINK;
+export default class Profile extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        closeOnSelect: PropTypes.bool,
+        hasUpdates: PropTypes.bool,
+        loading: PropTypes.bool,
+        onLogin: PropTypes.func,
+        onLogout: PropTypes.func,
+        onSwitchUser: PropTypes.func,
+        profileUrl: PropTypes.string,
+        renderPopupItems: PropTypes.func,
+        LinkComponent: PropTypes.oneOfType([
+            PropTypes.instanceOf(Component),
+            PropTypes.func,
+            PropTypes.string
+        ]),
+        translations: PropTypes.shape({
+            profile: PropTypes.string,
+            login: PropTypes.string,
+            logout: PropTypes.string,
+            applyChangedUser: PropTypes.string,
+            switchUser: PropTypes.string
+        }),
+        user: PropTypes.shape({
+            guest: PropTypes.bool,
+            profile: PropTypes.object,
+            name: PropTypes.string
+        }),
+        size: PropTypes.number,
+        round: PropTypes.bool,
+        showLogIn: PropTypes.bool,
+        showLogOut: PropTypes.bool,
+        showSwitchUser: PropTypes.bool,
+        showApplyChangedUser: PropTypes.bool,
+        onRevertPostponement: PropTypes.func,
+        renderGuest: PropTypes.func
+    };
+    static defaultProps = {
+        closeOnSelect: true,
+        renderPopupItems: items => items,
+        size: Size.Size32,
+        renderGuest: ({ loading, onLogin, className, translations }) => (<I18nContext.Consumer>
+        {({ translate }) => (<div className={classNames(styles.profileEmpty, className)}>
+            <Button primary data-test="ring-header-login-button" disabled={loading} loader={loading} onClick={onLogin}>
+              {translations?.login ?? translate('login')}
+            </Button>
+          </div>)}
+      </I18nContext.Consumer>)
+    };
+    static contextType = I18nContext;
+    static Size = Size;
+    render() {
+        const { className, closeOnSelect, hasUpdates, onLogout, user, profileUrl, LinkComponent, onSwitchUser, renderPopupItems, onRevertPostponement, showApplyChangedUser, showLogIn, showLogOut, showSwitchUser, renderGuest, translations, size, round, loading, onLogin, ...props } = this.props;
+        const { translate } = this.context;
+        if (!user) {
+            return (<div {...props} className={classNames(styles.profileEmpty, className)}>
+          <Avatar size={size} round={round}/>
+        </div>);
+        }
+        if (user.guest) {
+            return renderGuest(this.props);
+        }
+        const anchorClassName = classNames(styles.avatarWrapper, {
+            [styles.hasUpdates]: hasUpdates
+        });
+        const anchor = (<button type="button" className={anchorClassName}>
+        <Avatar url={user.profile && user.profile.avatar && user.profile.avatar.url} size={size} round={round}/>
+      </button>);
+        const items = [
+            showApplyChangedUser && {
+                rgItemType,
+                label: translations?.applyChangedUser ?? translate('applyChangedUser'),
+                className: styles.profileMenuItem,
+                onClick: onRevertPostponement
+            },
+            showLogIn && {
+                rgItemType,
+                label: translations?.login ?? translate('login'),
+                className: styles.profileMenuItem,
+                onClick: onRevertPostponement
+            },
+            {
+                rgItemType: PopupMenu.ListProps.Type.LINK,
+                label: translations?.profile ?? translate('profile'),
+                target: '_self', // Full page reload in Angular
+                href: profileUrl,
+                LinkComponent
+            },
+            showSwitchUser && {
+                rgItemType,
+                label: translations?.switchUser ?? translate('switchUser'),
+                className: styles.profileMenuItem,
+                onClick: onSwitchUser
+            },
+            showLogOut && {
+                rgItemType,
+                label: translations?.logout ?? translate('logout'),
+                onClick: onLogout
+            }
+        ].filter(isTruthy);
+        return (<DropdownMenu {...props} title={user.name} anchor={anchor} data={renderPopupItems(items)} data-test="ring-profile" className={classNames(styles.profile, className)} menuProps={{
+                closeOnSelect,
+                left: -2,
+                top: -8,
+                sidePadding: 32
+            }}/>);
+    }
+}

package/components/header/services-link.d.ts

@@ -0,0 +1,25 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { LinkProps } from '../link/link';
+export interface Service {
+    id: string;
+    applicationName?: string | null | undefined;
+    iconUrl?: string | null | undefined;
+    homeUrl: string;
+    name: string;
+}
+export interface ServicesLinkProps extends Partial<LinkProps> {
+    service: Service;
+}
+export default class ServicesLink extends PureComponent<ServicesLinkProps> {
+    static propTypes: {
+        isActive: PropTypes.Requireable<boolean>;
+        service: PropTypes.Requireable<PropTypes.InferProps<{
+            applicationName: PropTypes.Requireable<string>;
+            iconUrl: PropTypes.Requireable<string>;
+            homeUrl: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
+        }>>;
+    };
+    render(): React.JSX.Element;
+}