ydb-embedded-ui 0.1.0

package/dist/components/AsideNavigation/Settings/SettingsMenu/SettingsMenu.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+
+import {Icon, IconProps, Link} from '@yandex-cloud/uikit';
+
+import {useCurrent, useStableCallback} from '../helpers';
+
+import './SettingsMenu.scss';
+
+const b = block('nv-settings-menu');
+
+interface GroupItem {
+    groupTitle: string;
+    items: Item[];
+}
+
+interface Item {
+    id: string;
+    title: string;
+    icon?: IconProps;
+    disabled?: boolean;
+    withBadge?: boolean;
+}
+
+export type SettingsMenuItems = (GroupItem | Item)[];
+
+interface SettingsMenuProps {
+    items: SettingsMenuItems;
+    onChange: (id: string) => void;
+    activeItem?: string;
+    focusItem?: string;
+}
+
+export interface SettingsMenuInstance {
+    handleKeyDown(event: React.KeyboardEvent): boolean;
+    clearFocus(): void;
+}
+
+export const SettingsMenu = React.forwardRef<SettingsMenuInstance, SettingsMenuProps>(
+    function SettingsMenu({items, onChange, activeItem}, ref) {
+        const [focusItem, setFocus] = React.useState<string>();
+        const containerRef = React.useRef<HTMLDivElement>(null);
+        const handleChange = useStableCallback(onChange);
+        const getFocused = useCurrent(focusItem);
+
+        React.useImperativeHandle(
+            ref,
+            () => ({
+                handleKeyDown(event) {
+                    if (!containerRef.current) {
+                        return false;
+                    }
+                    const focused = getFocused();
+                    if (focused && event.key === 'Enter') {
+                        handleChange(focused);
+                        return true;
+                    } else if (event.key === 'ArrowDown') {
+                        setFocus(focusNext(containerRef.current, focused, 1));
+                        return true;
+                    } else if (event.key === 'ArrowUp') {
+                        setFocus(focusNext(containerRef.current, focused, -1));
+                        return true;
+                    }
+                    return false;
+                },
+                clearFocus() {
+                    setFocus(undefined);
+                },
+            }),
+            [getFocused, handleChange],
+        );
+
+        return (
+            <div ref={containerRef} className={b()}>
+                {items.map((firstLevelItem) => {
+                    if ('groupTitle' in firstLevelItem) {
+                        return (
+                            <div key={firstLevelItem.groupTitle} className={b('group')}>
+                                <span className={b('group-heading')}>
+                                    {firstLevelItem.groupTitle}
+                                </span>
+                                {firstLevelItem.items.map((item) => {
+                                    return renderMenuItem(item, onChange, activeItem, focusItem);
+                                })}
+                            </div>
+                        );
+                    }
+                    return renderMenuItem(firstLevelItem, onChange, activeItem, focusItem);
+                })}
+            </div>
+        );
+    },
+);
+
+function renderMenuItem(
+    item: Item,
+    onChange: (id: string) => void,
+    activeItem: string | undefined,
+    focusItem: string | undefined,
+) {
+    return (
+        <Link
+            key={item.title}
+            // @ts-ignore
+            extraProps={{'data-id': item.id, tabIndex: -1, disabled: item.disabled}}
+            className={b('item', {
+                selected: activeItem === item.id,
+                disabled: item.disabled,
+                focused: focusItem === item.id,
+                badge: item.withBadge,
+            })}
+            iconLeft={
+                item.icon ? <Icon size={16} {...item.icon} className={b('item-icon')} /> : undefined
+            }
+            onClick={() => {
+                onChange(item.id);
+            }}
+        >
+            {item.icon ? <Icon size={16} {...item.icon} className={b('item-icon')} /> : undefined}
+            <span>{item.title}</span>
+        </Link>
+    );
+}
+
+function focusNext(container: HTMLElement, focused: string | undefined, direction: number) {
+    const elements = container.querySelectorAll(`.${b('item')}:not(.${b('item')}_disabled)`);
+    if (elements.length === 0) {
+        return undefined;
+    }
+
+    let currentIndex = direction > 0 ? -1 : 0;
+    if (focused) {
+        currentIndex = Array.prototype.findIndex.call(
+            elements,
+            (element) => element.getAttribute('data-id') === focused,
+        );
+    }
+
+    currentIndex = (elements.length + currentIndex + direction) % elements.length;
+    return elements[currentIndex].getAttribute('data-id') ?? undefined;
+}

package/dist/components/AsideNavigation/Settings/SettingsSearch/SettingsSearch.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import {TextInput} from '@yandex-cloud/uikit';
+
+import i18n from '../i18n';
+
+const b = block('nv-settings-search');
+
+interface SettingsSearchProps {
+    className?: string;
+    onChange: (search: string) => void;
+    debounce?: number;
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+
+export function SettingsSearch({
+    className,
+    onChange,
+    debounce = 200,
+    inputRef,
+}: SettingsSearchProps) {
+    const [search, setSearch] = React.useState<string>();
+    const onChangeRef = React.useRef(onChange);
+    onChangeRef.current = onChange;
+    const debounceRef = React.useRef(debounce);
+    debounceRef.current = debounce;
+
+    React.useEffect(() => {
+        let timerId: number;
+        if (search !== undefined) {
+            timerId = window.setTimeout(() => {
+                onChangeRef.current(search);
+            }, debounceRef.current);
+        }
+        return () => {
+            clearTimeout(timerId);
+        };
+    }, [search]);
+    return (
+        <div className={b(null, className)}>
+            <TextInput
+                controlRef={(node) => {
+                    if (typeof inputRef === 'function') {
+                        inputRef(node as HTMLInputElement);
+                    } else if (inputRef) {
+                        (inputRef.current as HTMLInputElement) = node as HTMLInputElement;
+                    }
+                }}
+                hasClear
+                autoFocus
+                placeholder={i18n('placeholder_search')}
+                value={search}
+                onUpdate={setSearch}
+            />
+        </div>
+    );
+}

package/dist/components/AsideNavigation/Settings/collect-settings.ts

@@ -0,0 +1,156 @@
+import React from 'react';
+import {IconProps} from '@yandex-cloud/uikit';
+import {invariant} from './helpers';
+
+type SettingsMenu = (SettingsMenuGroup | SettingsMenuItem)[];
+
+interface SettingsMenuGroup {
+    groupTitle: string;
+    items: SettingsMenuItem[];
+}
+
+interface SettingsMenuItem {
+    title: string;
+    icon?: IconProps;
+    pageId: string;
+    withBadge?: boolean;
+}
+
+export interface SettingsPage {
+    sections: SettingsPageSection[];
+    hide?: boolean;
+    withBadge?: boolean;
+}
+
+interface SettingsPageSection {
+    title: string;
+    header?: React.ReactNode;
+    items: SettingsItem[];
+    hide?: boolean;
+    withBadge?: boolean;
+}
+
+interface SettingsItem {
+    title: string;
+    children: React.ReactNode;
+    hide?: boolean;
+    titleComponent?: React.ReactNode;
+    renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
+}
+
+export function getSettingsFromChildren(
+    children: React.ReactNode,
+    basepath = '',
+): {menu: SettingsMenu; pages: Record<string, SettingsPage>} {
+    const menu: SettingsMenu = [];
+    const pages: Record<string, SettingsPage> = {};
+    let hasGroup = false;
+    let hasItems = false;
+    React.Children.forEach(children, (element) => {
+        if (!React.isValidElement(element)) {
+            // Ignore non-elements.
+            return;
+        }
+        if (element.type === React.Fragment) {
+            // Transparently support React.Fragment and its children.
+            const {menu: menuFragment, pages: pagesFragment} = getSettingsFromChildren(
+                element.props.children,
+                basepath,
+            );
+            menu.push(...menuFragment);
+            Object.assign(pages, pagesFragment);
+        } else if (element.props.groupTitle) {
+            if (process.env.NODE_ENV === 'development') {
+                invariant(!hasItems, 'Setting menu must not mix groups and pages on one level');
+            }
+
+            const pageId = `${basepath}/${element.props.id ?? element.props.groupTitle}`;
+            hasGroup = true;
+
+            const {menu: menuFragment, pages: pagesFragment} = getSettingsFromChildren(
+                element.props.children,
+                pageId,
+            );
+
+            if (process.env.NODE_ENV === 'development') {
+                const hasInnerGroup = menuFragment.some((item) => 'groupTitle' in item);
+                invariant(
+                    !hasInnerGroup,
+                    `Group ${element.props.groupTitle} should not include groups`,
+                );
+            }
+
+            menu.push({
+                groupTitle: element.props.groupTitle,
+                // @ts-ignore
+                items: menuFragment,
+            });
+            Object.assign(pages, pagesFragment);
+        } else {
+            hasItems = true;
+            const pageId = `${basepath}/${element.props.id ?? element.props.title}`;
+
+            if (process.env.NODE_ENV === 'development') {
+                invariant(Boolean(element.props.title), 'Component must include title prop');
+                invariant(!hasGroup, 'Setting menu must not mix groups and pages on one level');
+                invariant(!pages[pageId], `Setting menu page id must be uniq (${pageId})`);
+            }
+
+            pages[pageId] = getSettingsPageFromChildren(element.props.children);
+            menu.push({
+                pageId,
+                title: element.props.title,
+                icon: element.props.icon,
+                withBadge: pages[pageId].withBadge,
+            });
+        }
+    });
+    return {menu, pages};
+}
+
+function getSettingsPageFromChildren(children: React.ReactNode): SettingsPage {
+    const page: SettingsPage = {sections: []};
+    React.Children.forEach(children, (element) => {
+        if (!React.isValidElement(element)) {
+            // Ignore non-elements.
+            return;
+        }
+        if (element.type === React.Fragment) {
+            // Transparently support React.Fragment and its children.
+            const {sections, withBadge} = getSettingsPageFromChildren(element.props.children);
+            page.sections.push(...sections);
+            page.withBadge = withBadge || page.withBadge;
+        } else {
+            const {title, header} = element.props;
+            page.withBadge = element.props.withBadge || page.withBadge;
+            page.sections.push({
+                title,
+                header,
+                withBadge: element.props.withBadge,
+                items: getSettingsItemsFromChildren(element.props.children),
+            });
+        }
+    });
+    return page;
+}
+
+function getSettingsItemsFromChildren(children: React.ReactNode): SettingsItem[] {
+    const items: SettingsItem[] = [];
+    React.Children.forEach(children, (element) => {
+        if (!React.isValidElement(element)) {
+            // Ignore non-elements.
+            return;
+        }
+        if (element.type === React.Fragment) {
+            // Transparently support React.Fragment and its children.
+            items.push(...getSettingsItemsFromChildren(element.props.children));
+        } else {
+            items.push({
+                title: element.props.title,
+                renderTitleComponent: element.props.renderTitleComponent,
+                children: element,
+            });
+        }
+    });
+    return items;
+}

package/dist/components/AsideNavigation/Settings/filter-settings.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import {escapeStringForRegExp} from './helpers';
+import {SettingsPage} from './collect-settings';
+
+function identity(x: any) {
+    return x;
+}
+
+export function filterSettings(
+    pages: Record<string, SettingsPage>,
+    search = '',
+    wrapFoundTitle: (title: string, search: string) => React.ReactNode = identity,
+) {
+    // 'abc def fg' -> abc.*?cde.*?fg
+    const preparedFilter = escapeStringForRegExp(search).replace(/\s+/g, '.*?');
+    const filterRe = new RegExp(preparedFilter, 'i');
+    for (const page of Object.values(pages)) {
+        let hidePage = true;
+        for (const section of page.sections) {
+            let hideSection = true;
+            for (const item of section.items) {
+                item.hide = Boolean(search) && !filterRe.test(item.title);
+                if (item.renderTitleComponent) {
+                    item.titleComponent = item.renderTitleComponent(
+                        search && !item.hide ? wrapFoundTitle(item.title, search) : null,
+                    );
+                } else {
+                    item.titleComponent =
+                        search && !item.hide ? wrapFoundTitle(item.title, search) : item.title;
+                }
+                hideSection = hideSection && item.hide;
+            }
+            section.hide = hideSection;
+            hidePage = hidePage && hideSection;
+        }
+        page.hide = hidePage;
+    }
+}

package/dist/components/AsideNavigation/Settings/helpers.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+type AnyFunc = (...args: any[]) => any;
+
+export function useStableCallback<T extends AnyFunc>(
+    func: T,
+): (...args: Parameters<T>) => ReturnType<T> | undefined {
+    const funcRef = React.useRef<T>();
+
+    React.useEffect(() => {
+        funcRef.current = func;
+        return () => {
+            funcRef.current = undefined;
+        };
+    }, [func]);
+
+    return React.useCallback((...args: Parameters<T>) => {
+        if (typeof funcRef.current === 'function') {
+            return funcRef.current(...args);
+        }
+        return undefined;
+    }, []);
+}
+
+export function useCurrent<T>(value: T) {
+    const ref = React.useRef(value);
+    ref.current = value;
+    return React.useCallback(() => ref.current, []);
+}
+
+export function invariant(cond: boolean, message: string): void {
+    if (!cond) {
+        throw new Error(message);
+    }
+}
+
+export function escapeStringForRegExp(input: string) {
+    return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}

package/dist/components/AsideNavigation/Settings/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "heading_settings": "Settings",
+  "placeholder_search": "Search settings",
+  "not-found": "No results found"
+}

package/dist/components/AsideNavigation/Settings/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, I18N} from '../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'nv-settings';
+
+i18n.registerKeyset(I18N.LANGS.en, COMPONENT, en);
+i18n.registerKeyset(I18N.LANGS.ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/components/AsideNavigation/Settings/i18n/ru.json

@@ -0,0 +1,5 @@
+{
+  "heading_settings": "Настройки",
+  "placeholder_search": "Найти настройки",
+  "not-found": "Ничего не найдено"
+}

package/dist/components/AsideNavigation/Settings/index.ts

@@ -0,0 +1 @@
+export * from './Settings';

package/dist/components/AsideNavigation/constants.ts

@@ -0,0 +1,28 @@
+export const ASIDE_HEADER_COMPACT_WIDTH = 56;
+export const ASIDE_HEADER_EXPANDED_WIDTH = 236;
+export const ASIDE_HEADER_COLLAPSE_BUTTON_SIZE = 28;
+
+export const ASIDE_HEADER_ICON_SIZE = 24;
+
+export const ASIDE_HEADER_STORE_KEY = 'nvAsideHeader';
+
+export enum AsideHeaderEvent {
+    SETTINGS_OPEN = 'SETTINGS_OPEN',
+    SETTINGS_CLOSE = 'SETTINGS_CLOSE',
+}
+
+export enum AsideHeaderVisibleItem {
+    Settings = 'settings',
+}
+
+export enum FooterItemIcon {
+    Bug = 'bug',
+    Support = 'support',
+    Settings = 'settings',
+    SettingsWithDot = 'settings-with-dot',
+}
+
+export enum FooterItemIconView {
+    Normal = 'normal',
+    WithDot = 'with-dot',
+}

package/dist/components/AsideNavigation/helpers.ts

@@ -0,0 +1,34 @@
+import {ASIDE_HEADER_STORE_KEY} from './constants';
+import {AsideHeaderLocalStorage} from './types';
+
+function store<T = unknown>(key: string, data: T) {
+    try {
+        window.localStorage.setItem(key, JSON.stringify(data));
+    } catch (err) {
+        console.error(`data not saved in localeStorage: ${err}`);
+    }
+}
+
+function restore<T = any>(key: string): T | null {
+    try {
+        const data = window.localStorage.getItem(key);
+        if (data === null) {
+            return null;
+        }
+        return JSON.parse(data) as T;
+    } catch (err) {
+        return null;
+    }
+}
+
+export function getLocalData() {
+    return restore<AsideHeaderLocalStorage>(ASIDE_HEADER_STORE_KEY);
+}
+
+export function setLocalData(data: Partial<AsideHeaderLocalStorage> | null) {
+    const storeData = getLocalData();
+    store<AsideHeaderLocalStorage>(ASIDE_HEADER_STORE_KEY, {
+        ...storeData,
+        ...data,
+    });
+}

package/dist/components/AsideNavigation/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "switch_settings": "Settings",
+  "label_more": "More"
+}

package/dist/components/AsideNavigation/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, I18N} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-embedded-ui';
+
+i18n.registerKeyset(I18N.LANGS.en, COMPONENT, en);
+i18n.registerKeyset(I18N.LANGS.ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/components/AsideNavigation/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "switch_settings": "Настройки",
+  "label_more": "Ещё"
+}

package/dist/components/AsideNavigation/icons.ts

@@ -0,0 +1,32 @@
+import {FooterItemIcon, FooterItemIconView} from './constants';
+import {SlotName} from './AsideHeaderFooterSlot/AsideHeaderFooterSlot';
+
+import bugIcon from '../../assets/icons/bug.svg';
+import supportIcon from '../../assets/icons/support.svg';
+import settingsIcon from '../../assets/icons/settings.svg';
+import settingsWithDotIcon from '../../assets/icons/settings-with-dot.svg';
+
+export const footerItemIconMap = {
+    [FooterItemIcon.Bug]: bugIcon,
+    [FooterItemIcon.Support]: supportIcon,
+    [FooterItemIcon.Settings]: settingsIcon,
+    [FooterItemIcon.SettingsWithDot]: settingsWithDotIcon,
+};
+
+export function getFooterItemIcon(slot: SlotName, view?: FooterItemIconView) {
+    switch (slot) {
+        case SlotName.BugReport:
+            return footerItemIconMap[FooterItemIcon.Bug];
+        case SlotName.Support:
+            return footerItemIconMap[FooterItemIcon.Support];
+        case SlotName.Settings:
+            switch (view) {
+                case FooterItemIconView.WithDot:
+                    return footerItemIconMap[FooterItemIcon.SettingsWithDot];
+                default:
+                    return footerItemIconMap[FooterItemIcon.Settings];
+            }
+        default:
+            return undefined;
+    }
+}

package/dist/components/AsideNavigation/types.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export interface AsideHeaderMenuItem {
+    id: string;
+    title: string;
+    tooltipText?: string;
+    icon?: SVGIconData;
+    iconSize?: number | string;
+    link?: string;
+    current?: boolean;
+    pinned?: boolean;
+    onItemClick?: (item: AsideHeaderMenuItem, isCollapsed: boolean) => void;
+    itemWrapper?: (
+        node: React.ReactNode,
+        item: AsideHeaderMenuItem,
+        isCollapsed: boolean,
+        isCompact: boolean,
+    ) => React.ReactNode;
+}
+
+export interface AsideHeaderLocalStorage {
+    isCompact?: boolean;
+}

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'bem-cn-lite';
+import {Breadcrumbs as BreadcrumbsUiKit} from '@yandex-cloud/uikit';
+
+import './Breadcrumbs.scss';
+
+const b = cn('kv-breadcrumbs');
+
+class Breadcrumbs extends React.Component {
+    static propTypes = {
+        items: PropTypes.array,
+    };
+
+    static defaultProps = {
+        items: [],
+    };
+
+    render() {
+        const {items} = this.props;
+        return <BreadcrumbsUiKit items={items} firstDisplayedItemsCount={1} className={b()} />;
+    }
+}
+
+export default Breadcrumbs;

package/dist/components/Breadcrumbs/Breadcrumbs.scss

@@ -0,0 +1,4 @@
+.kv-breadcrumbs {
+    font-size: var(--yc-text-body2-font-size);
+    padding: 20px 0;
+}