ydb-embedded-ui 0.1.0

package/dist/components/AsideNavigation/AsideHeader.tsx

@@ -0,0 +1,388 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import noop from 'lodash/noop';
+import throttle from 'lodash/throttle';
+
+import {Button, Icon} from '@yandex-cloud/uikit';
+
+import {Drawer, DrawerItem} from './Drawer';
+import {Logo, LogoProps} from './Logo/Logo';
+import {CompositeBar} from './CompositeBar/CompositeBar';
+import {AsideHeaderFooterItem} from './AsideHeaderFooterItem/AsideHeaderFooterItem';
+import {Content, RenderContentType} from './Content/Content';
+import {AsideHeaderMenuItem} from './types';
+import {
+    ASIDE_HEADER_COLLAPSE_BUTTON_SIZE,
+    ASIDE_HEADER_COMPACT_WIDTH,
+    ASIDE_HEADER_EXPANDED_WIDTH,
+    AsideHeaderEvent,
+    AsideHeaderVisibleItem,
+    FooterItemIconView,
+} from './constants';
+import i18n from './i18n';
+import {Lang} from 'utils/i18n';
+import {getLocalData, setLocalData} from './helpers';
+import {SetSlotsContext, SlotsProvider} from './AsideHeaderFooterSlot/SlotsContext';
+import {SlotName} from './AsideHeaderFooterSlot/AsideHeaderFooterSlot';
+
+import controlMenuButton from '../../assets/icons/control-menu-button.svg';
+
+import './AsideHeader.scss';
+
+const b = block('nv-aside-header');
+
+export type {AsideHeaderMenuItem};
+
+interface AsideHeaderGeneralProps
+    extends Pick<
+        LogoProps,
+        | 'onLogoIconClick'
+        | 'logoText'
+        | 'logoIcon'
+        | 'logoIconClassName'
+        | 'logoIconSize'
+        | 'logoTextSize'
+        | 'logoHref'
+        | 'logoWrapper'
+    > {
+    className?: string;
+    panelClassName?: string;
+    renderContent?: RenderContentType;
+    renderPanel?: () => React.ReactNode;
+    lang?: Lang;
+    renderFooter?: (data: {
+        size: number;
+        isCompact: boolean;
+        asideRef: React.RefObject<HTMLDivElement>;
+    }) => React.ReactNode;
+    onEvent?: (event: AsideHeaderEvent) => void;
+    settings?: React.ReactNode;
+    settingsIconWithBadge?: boolean;
+    onChangeCompact?: (compact: boolean) => void;
+    isCompact?: boolean;
+    initIsCompact?: boolean;
+}
+
+interface AsideHeaderDefaultProps {
+    menuItems: AsideHeaderMenuItem[];
+    panelVisible: boolean;
+    onClosePanel: () => void;
+}
+
+export interface AsideHeaderProps
+    extends AsideHeaderGeneralProps,
+        Partial<AsideHeaderDefaultProps> {}
+
+type AsideHeaderInnerProps = AsideHeaderGeneralProps & AsideHeaderDefaultProps;
+
+interface AsideHeaderState {
+    visibleItem: AsideHeaderVisibleItem | null;
+    isCompact: boolean;
+    isButtonVisible: boolean;
+}
+
+export {AsideHeaderFooterItem};
+
+export {SlotName};
+
+export class AsideHeader extends React.Component<AsideHeaderInnerProps, AsideHeaderState> {
+    static getDerivedStateFromProps(props: AsideHeaderInnerProps, state: AsideHeaderState) {
+        if (typeof props.isCompact !== 'undefined') {
+            const newState: Partial<AsideHeaderState> = {
+                isCompact: props.isCompact,
+            };
+            if ((!props.isCompact || !state.isCompact) && !state.isButtonVisible) {
+                newState.isButtonVisible = true;
+            }
+            return newState;
+        }
+        return null;
+    }
+
+    constructor(props: AsideHeaderInnerProps) {
+        super(props);
+
+        this.throttledPageMouseMove = throttle(this.onPageMouseMove, 300);
+
+        const isCompact =
+            typeof getLocalData()?.isCompact === 'boolean'
+                ? Boolean(getLocalData()?.isCompact)
+                : Boolean(props.initIsCompact);
+
+        this.state = {
+            visibleItem: null,
+            isCompact,
+            isButtonVisible: !isCompact,
+        };
+    }
+
+    componentDidUpdate(prevProps: AsideHeaderInnerProps, prevState: AsideHeaderState) {
+        if (!prevProps.panelVisible && this.props.panelVisible && this.state.visibleItem) {
+            this.setState({visibleItem: null});
+        }
+
+        if (
+            (prevState.visibleItem === AsideHeaderVisibleItem.Settings) !==
+            this.isVisibleItem(AsideHeaderVisibleItem.Settings)
+        ) {
+            this.props.onEvent?.(
+                this.isVisibleItem(AsideHeaderVisibleItem.Settings)
+                    ? AsideHeaderEvent.SETTINGS_OPEN
+                    : AsideHeaderEvent.SETTINGS_CLOSE,
+            );
+        }
+    }
+
+    render() {
+        const size = this.state.isCompact
+            ? ASIDE_HEADER_COMPACT_WIDTH
+            : ASIDE_HEADER_EXPANDED_WIDTH;
+
+        return (
+            <div className={b(null, this.props.className)}>
+                <div
+                    className={b('pane-container')}
+                    onMouseMove={(event) => {
+                        if (!this.state.isCompact) {
+                            return;
+                        }
+                        event.persist();
+                        this.throttledPageMouseMove(event);
+                    }}
+                >
+                    {this.renderFirstPane(size)}
+                    {this.renderSecondPane(size)}
+                </div>
+            </div>
+        );
+    }
+
+    static defaultProps: AsideHeaderDefaultProps = {
+        menuItems: [],
+        panelVisible: false,
+        onClosePanel: noop,
+    };
+
+    asideRef = React.createRef<HTMLDivElement>();
+
+    throttledPageMouseMove: (_event: React.MouseEvent<HTMLDivElement>) => void;
+
+    triggerEvent = (event: AsideHeaderEvent) => {
+        switch (event) {
+            case AsideHeaderEvent.SETTINGS_OPEN:
+                this.onSettingsToggle(true);
+                break;
+        }
+    };
+
+    private renderFirstPane = (size: number) => {
+        const {menuItems, panelVisible, renderPanel, panelClassName, settings} = this.props;
+        const {isCompact} = this.state;
+
+        return (
+            <SlotsProvider>
+                <div className={b('aside')} style={{width: size}}>
+                    {this.renderCollapseButton()}
+                    <div className={b('aside-popup-anchor')} ref={this.asideRef} />
+                    <div className={b('aside-content')}>
+                        <Logo
+                            onLogoIconClick={this.props.onLogoIconClick}
+                            logoWrapper={this.props.logoWrapper}
+                            logoText={this.props.logoText}
+                            logoIcon={this.props.logoIcon}
+                            logoIconSize={this.props.logoIconSize}
+                            logoTextSize={this.props.logoTextSize}
+                            logoHref={this.props.logoHref}
+                            logoIconClassName={this.props.logoIconClassName}
+                            isCompact={isCompact}
+                        />
+                        <CompositeBar
+                            items={menuItems}
+                            isCompact={isCompact}
+                            onClickItem={this.onCompositeBarClick}
+                        />
+                        {this.renderFooter(size)}
+                    </div>
+                </div>
+                <Drawer
+                    className={b('drawer')}
+                    onVeilClick={this.onCloseDrawer}
+                    onEscape={this.onCloseDrawer}
+                    style={{left: size}}
+                >
+                    <DrawerItem visible={panelVisible} className={b('panel', panelClassName)}>
+                        {renderPanel?.()}
+                    </DrawerItem>
+                    <DrawerItem visible={this.isVisibleItem(AsideHeaderVisibleItem.Settings)}>
+                        {settings}
+                    </DrawerItem>
+                </Drawer>
+            </SlotsProvider>
+        );
+    };
+
+    private renderSecondPane = (size: number) => {
+        return (
+            <Content
+                size={size}
+                renderContent={this.props.renderContent}
+                className={b('content')}
+            />
+        );
+    };
+
+    private renderFooter = (size: number) => {
+        const {settings, settingsIconWithBadge} = this.props;
+        const {isCompact} = this.state;
+
+        return (
+            <SetSlotsContext.Consumer>
+                {(registerSlot) => {
+                    if (!registerSlot) {
+                        return null;
+                    }
+                    return (
+                        <div className={b('footer')}>
+                            {this.props.renderFooter?.({
+                                size,
+                                isCompact,
+                                asideRef: this.asideRef,
+                            })}
+                            <div
+                                ref={(node) => {
+                                    registerSlot(SlotName.Support, node);
+                                }}
+                            />
+                            <div
+                                ref={(node) => {
+                                    registerSlot(SlotName.BugReport, node);
+                                }}
+                            />
+                            <div
+                                ref={(node) => {
+                                    registerSlot(SlotName.Settings, node);
+                                }}
+                            >
+                                {settings ? (
+                                    <AsideHeaderFooterItem
+                                        slot={SlotName.Settings}
+                                        view={
+                                            settingsIconWithBadge
+                                                ? FooterItemIconView.WithDot
+                                                : FooterItemIconView.Normal
+                                        }
+                                        text={i18n('switch_settings')}
+                                        isCompact={isCompact}
+                                        isCurrent={this.isVisibleItem(
+                                            AsideHeaderVisibleItem.Settings,
+                                        )}
+                                        onClick={() => this.onSettingsToggle()}
+                                    />
+                                ) : null}
+                            </div>
+                            <div
+                                ref={(node) => {
+                                    registerSlot(SlotName.User, node);
+                                }}
+                            />
+                        </div>
+                    );
+                }}
+            </SetSlotsContext.Consumer>
+        );
+    };
+
+    private renderCollapseButton = () => {
+        const {isCompact, isButtonVisible} = this.state;
+
+        const buttonVisibility = isButtonVisible ? 'visible' : 'hidden';
+
+        return (
+            <Button
+                className={b('collapse-button', {compact: isCompact})}
+                view="flat"
+                style={{visibility: buttonVisibility}}
+                onClick={this.onCollapseButtonClick}
+            >
+                <Icon
+                    data={controlMenuButton}
+                    className={b('collapse-icon')}
+                    width="14"
+                    height="14"
+                />
+            </Button>
+        );
+    };
+
+    private onCollapseButtonClick = () => {
+        const newIsCompact = !this.state.isCompact;
+
+        if (typeof this.props.isCompact === 'undefined') {
+            setLocalData({isCompact: newIsCompact});
+            this.setState({
+                isCompact: newIsCompact,
+                isButtonVisible: !newIsCompact,
+            });
+        } else {
+            this.setState({isButtonVisible: !newIsCompact});
+        }
+        if (this.props.onChangeCompact) {
+            this.props.onChangeCompact(newIsCompact);
+        }
+    };
+
+    private onCloseDrawer = () => {
+        this.setState({visibleItem: null});
+        this.props.onClosePanel?.();
+    };
+
+    private onSettingsToggle = (open?: boolean) => {
+        let visibleItem;
+
+        if (typeof open === 'undefined') {
+            visibleItem = this.getToggledVisibleItem(AsideHeaderVisibleItem.Settings);
+        } else {
+            visibleItem = open ? AsideHeaderVisibleItem.Settings : null;
+        }
+
+        this.setState({visibleItem});
+        if (this.props.panelVisible) {
+            this.props.onClosePanel?.();
+        }
+    };
+
+    private isVisibleItem = (item: AsideHeaderVisibleItem) => {
+        return item === this.state.visibleItem;
+    };
+
+    private getToggledVisibleItem = (item: AsideHeaderVisibleItem) => {
+        return !this.isVisibleItem(item) ? item : null;
+    };
+
+    private onPageMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
+        const xPointerCoordinate = event.clientX;
+
+        const hoverArea = ASIDE_HEADER_COMPACT_WIDTH + ASIDE_HEADER_COLLAPSE_BUTTON_SIZE;
+
+        if (
+            !this.state.isButtonVisible &&
+            xPointerCoordinate <= hoverArea &&
+            xPointerCoordinate >= 0
+        ) {
+            this.setState({isButtonVisible: true});
+            return;
+        }
+
+        if (
+            this.state.isButtonVisible &&
+            (xPointerCoordinate > hoverArea || xPointerCoordinate < 0)
+        ) {
+            this.setState({isButtonVisible: false});
+            return;
+        }
+    };
+
+    private onCompositeBarClick = () => {
+        this.setState({visibleItem: null});
+    };
+}

package/dist/components/AsideNavigation/AsideHeaderFooterItem/AsideHeaderFooterItem.scss

@@ -0,0 +1,82 @@
+@mixin aside-header-popup-animation() {
+    &.popup2_theme_normal.popup2_direction_right-bottom.popup2_visible_yes {
+        /* stylelint-disable-next-line */
+        animation-name: popup2_theme_normal_bottom_visible;
+    }
+
+    &.popup2_theme_normal.popup2_direction_right-bottom {
+        /* stylelint-disable-next-line */
+        animation-name: popup2_theme_normal_bottom;
+    }
+}
+
+.nv-aside-header-footer-item {
+    $class: &;
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+
+    width: 100%;
+    min-height: 40px;
+
+    &_current {
+        background-color: var(--yc-color-base-selection);
+    }
+
+    &:hover {
+        cursor: pointer;
+    }
+
+    &:not(&_current):hover {
+        background-color: var(--yc-color-base-simple-hover);
+    }
+
+    &__icon-place {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        justify-content: center;
+
+        width: var(--nv-aside-header-min-width);
+        height: 100%;
+    }
+
+    &__text {
+        overflow: hidden;
+
+        width: 100%;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    &__icon-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 38px;
+        height: 38px;
+    }
+
+    #{$class} &__icon {
+        color: var(--yc-color-text-misc);
+    }
+
+    &__btn-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 100%;
+        height: 100%;
+    }
+
+    &__popup {
+        @include aside-header-popup-animation();
+    }
+
+    @at-root .yc-list__item_active &:not(&_current) {
+        background-color: var(--yc-color-base-simple-hover);
+    }
+}

package/dist/components/AsideNavigation/AsideHeaderFooterItem/AsideHeaderFooterItem.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import {Icon, Popup, PopupPlacement, PopupProps} from '@yandex-cloud/uikit';
+
+import {AsideHeaderTooltip} from '../AsideHeaderTooltip/AsideHeaderTooltip';
+import {AsideHeaderFooterSlot, SlotName} from '../AsideHeaderFooterSlot/AsideHeaderFooterSlot';
+import {ASIDE_HEADER_ICON_SIZE, FooterItemIconView} from '../constants';
+import {footerItemIconMap, getFooterItemIcon} from '../icons';
+
+import settingsIcon from '../../../assets/icons/settings.svg';
+
+import './AsideHeaderFooterItem.scss';
+
+const b = block('nv-aside-header-footer-item');
+
+export const defaultAsideHeaderFooterPopupPlacement: PopupPlacement = ['right-end'];
+export const defaultAsideHeaderFooterPopupOffset: NonNullable<PopupProps['offset']> = [-20, 8];
+
+export interface AsideHeaderFooterItemProps {
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    isCompact: boolean;
+    isCurrent?: boolean;
+    text: React.ReactNode;
+    tooltipText?: React.ReactNode;
+    enableTooltip?: boolean;
+    iconSize?: string | number;
+    slot?: SlotName;
+    view?: FooterItemIconView;
+    className?: string;
+    popupVisible?: boolean;
+    popupAnchor?: React.RefObject<HTMLElement>;
+    popupPlacement?: PopupPlacement;
+    popupOffset?: PopupProps['offset'];
+    renderPopupContent?: () => React.ReactNode;
+    onClosePopup?: () => void;
+    renderCustomIcon?: () => React.ReactNode;
+}
+
+export const AsideHeaderFooterItem: React.FC<AsideHeaderFooterItemProps> = ({
+    onClick,
+    isCompact,
+    isCurrent = false,
+    enableTooltip = true,
+    tooltipText,
+    text,
+    iconSize = ASIDE_HEADER_ICON_SIZE,
+    slot,
+    view,
+    className,
+    popupAnchor,
+    popupVisible = false,
+    popupPlacement = defaultAsideHeaderFooterPopupPlacement,
+    popupOffset = defaultAsideHeaderFooterPopupOffset,
+    onClosePopup,
+    renderPopupContent,
+    renderCustomIcon,
+}) => {
+    const [tooltipAnchor, setTooltipAnchor] = React.useState<HTMLDivElement | null>(null);
+    const ref = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+        if (!isCompact) {
+            setTooltipAnchor(null);
+        }
+    }, [isCompact]);
+
+    const icon = (slot && getFooterItemIcon(slot, view)) || settingsIcon;
+    let iconPlaceNode: React.ReactNode;
+
+    if (typeof renderCustomIcon === 'function') {
+        iconPlaceNode = renderCustomIcon();
+    } else {
+        const iconData = typeof icon === 'string' ? footerItemIconMap[icon as never] : icon;
+        iconPlaceNode = isCompact ? (
+            <React.Fragment>
+                <div
+                    onMouseEnter={(event) => setTooltipAnchor(event.currentTarget)}
+                    onMouseLeave={() => setTooltipAnchor(null)}
+                    className={b('btn-icon', {current: isCurrent})}
+                >
+                    <Icon data={iconData} size={iconSize} className={b('icon')} />
+                </div>
+                {enableTooltip && (
+                    <AsideHeaderTooltip anchor={tooltipAnchor} text={tooltipText || text} />
+                )}
+            </React.Fragment>
+        ) : (
+            <div className={b('icon-wrap')}>
+                <Icon data={iconData} size={iconSize} className={b('icon')} />
+            </div>
+        );
+    }
+
+    const anchorRef = popupAnchor || ref;
+
+    const onClose = React.useCallback(
+        (event: MouseEvent | KeyboardEvent) => {
+            if (
+                event instanceof MouseEvent &&
+                event.target &&
+                ref.current?.contains(event.target as Node)
+            ) {
+                return;
+            }
+            onClosePopup?.();
+        },
+        [onClosePopup],
+    );
+
+    const contentNode = (
+        <React.Fragment>
+            <div
+                className={b({compact: isCompact, current: isCurrent}, className)}
+                onClick={onClick}
+                ref={ref}
+            >
+                <div className={b('icon-place')}>{iconPlaceNode}</div>
+                {!isCompact && <div className={b('text')}>{text}</div>}
+            </div>
+            <Popup
+                className={b('popup')}
+                open={popupVisible}
+                placement={popupPlacement}
+                offset={popupOffset}
+                anchorRef={anchorRef}
+                onClose={onClose}
+            >
+                {renderPopupContent?.()}
+            </Popup>
+        </React.Fragment>
+    );
+
+    return slot ? (
+        <AsideHeaderFooterSlot name={slot}>{contentNode}</AsideHeaderFooterSlot>
+    ) : (
+        contentNode
+    );
+};

package/dist/components/AsideNavigation/AsideHeaderFooterSlot/AsideHeaderFooterSlot.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {useSlot} from './SlotsContext';
+
+export enum SlotName {
+    Settings = 'settings',
+    User = 'user',
+    Support = 'support',
+    BugReport = 'bug-report',
+}
+
+interface AsideHeaderFooterSlotProps {
+    name: SlotName;
+    children: React.ReactNode;
+    slotRef?: React.Ref<HTMLElement>;
+}
+
+export function AsideHeaderFooterSlot({name, slotRef, children}: AsideHeaderFooterSlotProps) {
+    const slot = useSlot(name);
+
+    if (typeof slotRef === 'function') {
+        slotRef(slot || null);
+    } else if (slotRef) {
+        // @ts-ignore
+        slotRef.current = slot;
+    }
+
+    if (slot) {
+        return ReactDOM.createPortal(children, slot);
+    }
+
+    return null;
+}

package/dist/components/AsideNavigation/AsideHeaderFooterSlot/SlotsContext.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import {SlotName} from './AsideHeaderFooterSlot';
+
+type Slots = Partial<Record<SlotName, HTMLElement | null>>;
+
+const SlotsContext = React.createContext<Slots | undefined>(undefined);
+export const SetSlotsContext = React.createContext<
+    ((name: SlotName, node: HTMLElement | null) => void) | undefined
+>(undefined);
+
+export function SlotsProvider({children}: {children: React.ReactNode}) {
+    const [slots, setSlots] = React.useState<Slots>({});
+
+    const registerSlot = React.useCallback(
+        (name: SlotName, node: HTMLElement | null) => {
+            setSlots((prevSlots) => {
+                if (prevSlots[name] === node) {
+                    return prevSlots;
+                }
+                return {
+                    ...prevSlots,
+                    [name]: node,
+                };
+            });
+        },
+        [setSlots],
+    );
+
+    return (
+        <SetSlotsContext.Provider value={registerSlot}>
+            <SlotsContext.Provider value={slots}>{children}</SlotsContext.Provider>
+        </SetSlotsContext.Provider>
+    );
+}
+
+function useSlotsValue() {
+    const slots = React.useContext(SlotsContext);
+
+    if (slots === undefined) {
+        throw new Error('useSlots must be used within a SlotsProvider');
+    }
+
+    return slots;
+}
+
+export function useSlot(name: SlotName) {
+    const slots = useSlotsValue();
+    return slots[name];
+}

package/dist/components/AsideNavigation/AsideHeaderTooltip/AsideHeaderTooltip.scss

@@ -0,0 +1,16 @@
+.nv-aside-header-tooltip {
+    &.yc-popup {
+        animation-name: none;
+
+        border: none;
+        box-shadow: none;
+    }
+
+    &__text {
+        padding: 6px 12px;
+
+        color: var(--yc-color-text-light-primary);
+        border-radius: 4px;
+        background-color: var(--yc-color-base-float-heavy);
+    }
+}