ydb-embedded-ui 0.1.0

package/dist/components/AsideNavigation/Logo/Logo.scss

@@ -0,0 +1,44 @@
+.nv-aside-header-logo {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    height: 32px;
+    margin: 12px 0;
+
+    font-family: 'Rubik', sans-serif;
+
+    &__logo-btn-place {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        justify-content: center;
+
+        width: var(--nv-aside-header-min-width);
+    }
+
+    &__logo {
+        vertical-align: middle;
+
+        font-family: 'Rubik', sans-serif;
+        font-size: 16px;
+        line-height: 20px;
+    }
+
+    &__logo-link {
+        &,
+        &:hover,
+        &:active,
+        &:visited,
+        &:focus {
+            text-decoration: none;
+
+            color: inherit;
+            outline: none;
+        }
+    }
+
+    .yc-root &__btn-logo.button2_theme_flat.button2_hovered_yes::before {
+        background-color: transparent;
+    }
+}

package/dist/components/AsideNavigation/Logo/Logo.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import {Button, Icon} from '@yandex-cloud/uikit';
+
+import './Logo.scss';
+
+const b = block('nv-aside-header-logo');
+
+export interface LogoProps {
+    onLogoIconClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    logoText: (() => React.ReactNode) | string;
+    logoIcon: SVGIconData;
+    logoIconClassName?: string;
+    logoIconSize?: string | number;
+    logoTextSize?: string | number;
+    logoHref?: string;
+    isCompact: boolean;
+    logoWrapper?: (node: React.ReactNode, isCompact: boolean) => React.ReactNode;
+}
+
+export const Logo: React.FC<LogoProps> = ({
+    onLogoIconClick,
+    logoText,
+    logoIcon,
+    logoIconSize = 24,
+    logoTextSize = 16,
+    logoHref = '/',
+    logoIconClassName,
+    isCompact,
+    logoWrapper,
+}) => {
+    const hasClickHandler = typeof onLogoIconClick === 'function';
+    const hasLogoWrapper = typeof logoWrapper === 'function';
+
+    const linkProps = hasClickHandler
+        ? {}
+        : {
+              target: '_self',
+              href: logoHref,
+          };
+
+    const button = (
+        <Button
+            view="flat"
+            size="l"
+            className={b('btn-logo')}
+            component={hasLogoWrapper ? 'span' : undefined}
+            onClick={onLogoIconClick}
+            {...linkProps}
+        >
+            <Icon data={logoIcon} size={logoIconSize} className={logoIconClassName} />
+        </Button>
+    );
+
+    let logo: React.ReactNode;
+
+    if (typeof logoText === 'function') {
+        logo = logoText();
+    } else {
+        logo = (
+            <div className={b('logo')} style={{fontSize: logoTextSize}}>
+                {logoText}
+            </div>
+        );
+    }
+
+    return (
+        <div className={b()}>
+            <div className={b('logo-btn-place')}>
+                {typeof logoWrapper === 'function' ? logoWrapper(button, isCompact) : button}
+            </div>
+            {!isCompact &&
+                (typeof logoWrapper === 'function' ? (
+                    logoWrapper(logo, isCompact)
+                ) : (
+                    <a {...linkProps} className={b('logo-link')} onClick={onLogoIconClick}>
+                        {logo}
+                    </a>
+                ))}
+        </div>
+    );
+};

package/dist/components/AsideNavigation/Settings/README.md

@@ -0,0 +1,92 @@
+### Settings
+
+Компонент для отображения настроек сервиса. Поддерживает
+
+- одно-уровневую и двух-уровневую группировки настроек;
+- поиск по заголовкам настроек;
+- отображение состояния загрузки;
+
+### PropTypes
+
+#### Settings
+
+| Property       | Type     | Required | Default | Description                                                              |
+| :------------- | :------- | :------: | :------ | :----------------------------------------------------------------------- |
+| loading        | boolean  |          |         | флаг неготовности настроек для отображения                               |
+| renderLoading  | Function |          |         | Содержимое компонента на время загрузки                                  |
+| renderNotFound | Function |          |         | Содержимое страницы при отсутствии найденных элементов                   |
+| initialPage    | string   |          |         | Активный раздел настроек по умолчанию в формате "/ид группы/ид страницы" |
+| onPageChange   | Function |          |         | Обработчик события изменения активной страницы настроек                  |
+
+#### Settings.Group
+
+| Property   | Type   | Required | Default | Description                              |
+| :--------- | :----- | :------: | :------ | :--------------------------------------- |
+| id         | string |          |         | Уникальный идентификатор группы настроек |
+| groupTitle | string |   true   |         | заголовок группы страниц настроек        |
+
+#### Settings.Page
+
+| Property | Type      | Required | Default | Description                                                |
+| :------- | :-------- | :------: | :------ | :--------------------------------------------------------- |
+| id       | string    |          |         | Уникальный идентификатор страницы настроек в рамках группы |
+| title    | string    |   true   |         | заголовок страницы настроек                                |
+| icon     | IconProps |   true   |         | данные иконки, отображаемой в меню                         |
+
+#### Settings.Section
+
+| Property  | Type      | Required | Default | Description                            |
+| :-------- | :-------- | :------: | :------ | :------------------------------------- |
+| title     | string    |   true   |         | заголовок раздела настроек на странице |
+| header    | ReactNode |          |         | Шапка секции                           |
+| withBadge | boolean   |          |         | Рисует бэйдж у секции и меню           |
+
+#### Settings.Item
+
+| Property             | Type            | Required | Default  | Description                                 |
+| :------------------- | :-------------- | :------: | :------- | :------------------------------------------ |
+| title                | string          |   true   |          | заголовок настройки                         |
+| renderTitleComponent | Function        |          |          | Произвольное содержимое заголовка настройки |
+| align                | 'top', 'center' |          | 'center' | выравнивание заголовка и контрола           |
+
+### Использование
+
+Смотрите в storybook пример `src/strories/demo/SettingsDemo`.
+
+### Описание
+
+Меню настроек может быть одно-уровневым:
+
+```jsx
+<Settings>
+  <Settings.Page title="Оформление">...</Settings.Page>
+  <Settings.Page title="Коммуникации">...</Settings.Page>
+</Settings>
+```
+
+или двух-уровневым:
+
+```jsx
+<Settings>
+  <Settings.Group groupTitle="Arcanum">
+    <Settings.Page title="Оформление">...</Settings.Page>
+    <Settings.Page title="Коммуникации">...</Settings.Page>
+  </Settings.Group>
+  <Settings.Group groupTitle="General">
+    <Settings.Page title="Оформление">...</Settings.Page>
+    <Settings.Page title="Коммуникации">...</Settings.Page>
+  </Settings.Group>
+</Settings>
+```
+
+Страницы настроек делятся на секции с наборами настроек:
+
+```jsx
+<Settings.Page title="Features" icon={'...'}>
+  <Settings.Section title="Common">
+    <Settings.Item title="Default VCS">...</Settings.Item>
+    <Settings.Item title="Search root">...</Settings.Item>
+  </Settings.Section>
+  <Settings.Section title="Beta functionality">...</Settings.Section>
+</Settings.Page>
+```

package/dist/components/AsideNavigation/Settings/Settings.scss

@@ -0,0 +1,113 @@
+.nv-settings {
+    display: grid;
+    grid-template-columns: 216px 1fr;
+    width: 834px;
+    height: 100%;
+
+    &_loading {
+        grid-template-columns: auto;
+    }
+
+    &__loader {
+        align-self: center;
+        justify-self: center;
+    }
+
+    &__not-found {
+        display: grid;
+        align-items: center;
+        justify-items: center;
+        height: 100%;
+    }
+
+    &__menu {
+        border-right: 1px solid var(--yc-color-line-generic);
+    }
+
+    &__heading {
+        margin: 20px 20px 0;
+        font-size: var(--yc-text-body2-font-size);
+        line-height: var(--yc-text-body2-line-height);
+        font-weight: 500;
+    }
+
+    &__search {
+        margin: 12px 20px 16px;
+    }
+
+    &__page {
+        padding: 20px;
+        overflow-y: auto;
+    }
+
+    &__section {
+        &-heading {
+            margin: 0;
+            font-size: var(--yc-text-body2-font-size);
+            line-height: var(--yc-text-body2-line-height);
+            font-weight: 500;
+
+            &_badge {
+                display: inline-block;
+                position: relative;
+
+                &::after {
+                    content: '';
+                    display: block;
+                    width: 6px;
+                    height: 6px;
+                    border-radius: 50%;
+                    background-color: var(--yc-color-text-danger);
+                    position: absolute;
+                    right: -8px;
+                    top: 1px;
+                }
+            }
+        }
+
+        &-item {
+            margin-top: 24px;
+        }
+
+        & + & {
+            margin-top: 32px;
+        }
+    }
+
+    &__item {
+        display: grid;
+        grid-template-columns: 216px 1fr;
+        justify-items: start;
+
+        &_align_top {
+            align-items: start;
+        }
+
+        &_align_center {
+            align-items: center;
+        }
+    }
+
+    &__item-heading {
+        &_badge {
+            position: relative;
+
+            &::after {
+                content: '';
+                display: block;
+                width: 4px;
+                height: 4px;
+                border-radius: 50%;
+                background-color: var(--yc-color-text-danger);
+                position: absolute;
+                right: -10px;
+                top: 1px;
+            }
+        }
+    }
+
+    &__found {
+        font-weight: 500;
+        background: var(--yc-color-base-selection);
+    }
+}

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

@@ -0,0 +1,270 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+import i18n from './i18n';
+
+import {IconProps, Loader} from '@yandex-cloud/uikit';
+import {SettingsSearch} from './SettingsSearch/SettingsSearch';
+import {SettingsMenu, SettingsMenuItems, SettingsMenuInstance} from './SettingsMenu/SettingsMenu';
+
+import {getSettingsFromChildren} from './collect-settings';
+import {filterSettings} from './filter-settings';
+import {escapeStringForRegExp} from './helpers';
+
+import './Settings.scss';
+
+const b = block('nv-settings');
+
+interface SettingsProps {
+    initialPage?: string;
+    onPageChange?: (page: string | undefined) => void;
+    children: React.ReactNode;
+    renderNotFound?: () => React.ReactNode;
+    renderLoading?: () => React.ReactNode;
+    loading?: boolean;
+}
+
+interface SettingsGroupProps {
+    id?: string;
+    groupTitle: string;
+    children: React.ReactNode;
+}
+
+interface SettingsPageProps {
+    id?: string;
+    title: string;
+    icon: IconProps;
+    children: React.ReactNode;
+}
+
+interface SettingsSectionProps {
+    title: string;
+    header?: React.ReactNode;
+    children: React.ReactNode;
+    withBadge?: boolean;
+}
+
+interface SettingsItemProps {
+    title: string;
+    renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
+    align?: 'top' | 'center';
+    children: React.ReactNode;
+    withBadge?: boolean;
+}
+
+const ItemContext = React.createContext<React.ReactNode>(undefined);
+
+export function Settings({
+    initialPage,
+    onPageChange,
+    children,
+    renderNotFound,
+    loading,
+    renderLoading,
+}: SettingsProps) {
+    const [search, setSearch] = React.useState('');
+    const [selectedPage, setCurrentPage] = React.useState<string | undefined>(initialPage);
+    const prevSelectedPageRef = React.useRef(initialPage);
+    const searchInputRef = React.useRef<HTMLInputElement>(null);
+    const menuRef = React.useRef<SettingsMenuInstance>(null);
+
+    React.useEffect(() => {
+        menuRef.current?.clearFocus();
+    }, [search]);
+
+    React.useEffect(() => {
+        const handler = () => {
+            menuRef.current?.clearFocus();
+        };
+        window.addEventListener('click', handler);
+        return () => {
+            window.removeEventListener('click', handler);
+        };
+    }, []);
+
+    if (selectedPage !== prevSelectedPageRef.current) {
+        onPageChange?.(selectedPage);
+        prevSelectedPageRef.current = selectedPage;
+    }
+
+    if (loading) {
+        return (
+            <div className={b({loading: true})}>
+                {typeof renderLoading === 'function' ? (
+                    renderLoading()
+                ) : (
+                    <Loader className={b('loader')} size="m" />
+                )}
+            </div>
+        );
+    }
+
+    const {menu, pages} = getSettingsFromChildren(children);
+    filterSettings(pages, search, prepareTitle);
+
+    const settingsMenu: SettingsMenuItems = [];
+    for (const fistLevel of menu) {
+        if ('groupTitle' in fistLevel) {
+            settingsMenu.push({
+                groupTitle: fistLevel.groupTitle,
+                items: fistLevel.items.map((item) => ({
+                    id: item.pageId,
+                    title: item.title,
+                    icon: item.icon,
+                    disabled: pages[item.pageId].hide,
+                    withBadge: item.withBadge,
+                })),
+            });
+        } else {
+            settingsMenu.push({
+                id: fistLevel.pageId,
+                title: fistLevel.title,
+                icon: fistLevel.icon,
+                disabled: pages[fistLevel.pageId].hide,
+                withBadge: fistLevel.withBadge,
+            });
+        }
+    }
+
+    let activePage = selectedPage;
+    if (!activePage || pages[activePage]?.hide) {
+        activePage = undefined;
+        for (const firstLevel of settingsMenu) {
+            if ('groupTitle' in firstLevel) {
+                for (const item of firstLevel.items) {
+                    if (!item.disabled) {
+                        activePage = item.id;
+                        break;
+                    }
+                }
+                if (activePage) {
+                    break;
+                }
+            } else if (!firstLevel.disabled) {
+                activePage = firstLevel.id;
+                break;
+            }
+        }
+    }
+
+    if (activePage !== selectedPage) {
+        setCurrentPage(activePage);
+    }
+
+    return (
+        <div className={b()}>
+            <div
+                className={b('menu')}
+                onClick={() => {
+                    if (searchInputRef.current) {
+                        searchInputRef.current.focus();
+                    }
+                }}
+                onKeyDown={(event) => {
+                    if (menuRef.current) {
+                        if (menuRef.current.handleKeyDown(event)) {
+                            event.preventDefault();
+                        }
+                    }
+                }}
+            >
+                <h2 className={b('heading')}>{i18n('heading_settings')}</h2>
+                <SettingsSearch
+                    inputRef={searchInputRef}
+                    className={b('search')}
+                    onChange={setSearch}
+                />
+                <SettingsMenu
+                    ref={menuRef}
+                    items={settingsMenu}
+                    onChange={setCurrentPage}
+                    activeItem={activePage}
+                />
+            </div>
+            <div className={b('page')}>
+                {activePage ? (
+                    pages[activePage].sections.map((section) => {
+                        if (section.hide) {
+                            return null;
+                        }
+                        return (
+                            <div key={section.title} className={b('section')}>
+                                <h3 className={b('section-heading', {badge: section.withBadge})}>
+                                    {section.title}
+                                </h3>
+                                {section.header ? section.header : null}
+                                {section.items.map(({hide, title, children, titleComponent}) =>
+                                    hide ? null : (
+                                        <div key={title} className={b('section-item')}>
+                                            <ItemContext.Provider value={titleComponent}>
+                                                {children}
+                                            </ItemContext.Provider>
+                                        </div>
+                                    ),
+                                )}
+                            </div>
+                        );
+                    })
+                ) : typeof renderNotFound === 'function' ? (
+                    renderNotFound()
+                ) : (
+                    <div className={b('not-found')}>{i18n('not-found')}</div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+Settings.Group = function SettingsGroup({children}: SettingsGroupProps) {
+    return <React.Fragment>{children}</React.Fragment>;
+};
+
+Settings.Page = function SettingsPage({children}: SettingsPageProps) {
+    return <React.Fragment>{children}</React.Fragment>;
+};
+
+Settings.Section = function SettingsSection({children}: SettingsSectionProps) {
+    return <React.Fragment>{children}</React.Fragment>;
+};
+
+Settings.Item = function SettingsItem({
+    title,
+    children,
+    align = 'center',
+    withBadge,
+}: SettingsItemProps) {
+    const contextTitle = React.useContext(ItemContext);
+    return (
+        <div className={b('item', {align})}>
+            <label className={b('item-heading', {badge: withBadge})}>{contextTitle ?? title}</label>
+            <div>{children}</div>
+        </div>
+    );
+};
+
+function prepareTitle(string: string, search: string) {
+    let temp = string.slice(0);
+    const title: React.ReactNode[] = [];
+    const parts = escapeStringForRegExp(search).split(' ').filter(Boolean);
+    let key = 0;
+    for (const part of parts) {
+        const regex = new RegExp(part, 'ig');
+        const match = regex.exec(temp);
+        if (match) {
+            const m = match[0];
+            const i = match.index;
+            if (i > 0) {
+                title.push(temp.slice(0, i));
+            }
+            title.push(
+                <strong key={key++} className={b('found')}>
+                    {m}
+                </strong>,
+            );
+            temp = temp.slice(i + m.length);
+        }
+    }
+    if (temp) {
+        title.push(temp);
+    }
+    return title;
+}

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

@@ -0,0 +1,70 @@
+.nv-settings-menu {
+    &__group {
+        &-heading {
+            display: inline-block;
+            padding: 0 20px;
+            margin-bottom: 12px;
+            font-weight: 500;
+            line-height: 18px;
+        }
+
+        & + & {
+            margin-top: 24px;
+        }
+    }
+
+    &__item {
+        $item: &;
+        display: flex;
+        align-items: center;
+        height: 40px;
+        padding: 0 20px;
+
+        &[class][class] {
+            color: var(--yc-color-text-primary);
+
+            &#{$item}_disabled {
+                color: var(--yc-color-text-secondary);
+
+                #{$item}-icon {
+                    color: var(--yc-color-base-misc-heavy);
+                }
+            }
+        }
+
+        &-icon {
+            color: var(--yc-color-text-misc);
+            margin-right: 5px;
+        }
+
+        &:hover,
+        &_focused {
+            background: var(--yc-color-base-simple-hover);
+        }
+
+        &_selected {
+            background: var(--yc-color-base-selection);
+        }
+
+        &_selected:hover,
+        &_selected#{$item}_focused {
+            background: var(--yc-color-base-selection-hover);
+        }
+
+        &_badge {
+            position: relative;
+
+            &::after {
+                content: '';
+                display: block;
+                width: 6px;
+                height: 6px;
+                border-radius: 50%;
+                background-color: var(--yc-color-text-danger);
+                position: absolute;
+                right: 9px;
+                top: calc(50% - 3px);
+            }
+        }
+    }
+}