@cloud-ru/ds-uikit-product-page-layout 1.0.0

package/src/components/PageSidebar/hooks/useItemsCreator.tsx

@@ -0,0 +1,161 @@
+import { ChevronLeftSVG } from '@cloud-ru/ds-icons/interface/system';
+import { ITEM_TYPE, ItemProps } from '@cloud-ru/ds-list';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import cn from 'classnames';
+import { MouseEvent, ReactNode, useMemo } from 'react';
+
+import { SIDEBAR_HEADER_TYPE, SIDEBAR_ITEM_TYPE } from '../../../constants';
+import { pageLayoutLocale } from '../../../locale';
+import { useSearchContext } from '../contexts';
+import { SidebarSearch } from '../helperComponents/SidebarSearch';
+import { SidebarSearchToggle } from '../helperComponents/SidebarSearchToggle';
+import { SidebarTitle } from '../helperComponents/SidebarTitle';
+import styles from '../styles.module.scss';
+import { HeaderProps, SidebarItem } from '../types';
+
+const EMPTY_LIST: ItemProps[] = [];
+
+export function useTopPinnedContent(
+  header?: HeaderProps,
+  hasSearch?: boolean,
+): { title?: ReactNode; pinTop: ItemProps[] } {
+  const { t } = pageLayoutLocale.useTranslations();
+  const { searchOpened } = useSearchContext();
+
+  return useMemo(() => {
+    switch (header?.type) {
+      case SIDEBAR_HEADER_TYPE.Title:
+        return {
+          pinTop: [
+            {
+              // Кнопка поиска живёт в `content` рядом с заголовком/полем, а не в `afterContent`:
+              // отдельный слот `afterContent` центрируется по-своему и ломает вертикальное
+              // выравнивание кнопки с полем.
+              content: (
+                <div
+                  className={cn(styles.pinnedHeaderSlot, hasSearch && searchOpened && styles.pinnedHeaderSlotSearch)}
+                >
+                  <div className={styles.pinnedHeaderContent}>
+                    {
+                      // При открытом поиске строка заголовка заменяется полем поиска (без наложения).
+                      hasSearch && searchOpened ? (
+                        <SidebarSearch />
+                      ) : (
+                        <SidebarTitle title={header.label} icon={header.icon} afterContent={header.afterContent} />
+                      )
+                    }
+                  </div>
+                  {hasSearch && <SidebarSearchToggle />}
+                </div>
+              ),
+              inactive: true,
+            },
+          ],
+        };
+      case SIDEBAR_HEADER_TYPE.Back:
+        return {
+          pinTop: [
+            {
+              content: { label: `${t('PageSidebar.backTo')} ${header.label}` },
+              beforeContent: <ChevronLeftSVG />,
+              onClick: header.href ? undefined : header.onClick,
+              itemWrapRender: header.href
+                ? item => (
+                    <a href={header.href} onClick={header.onClick}>
+                      {item}
+                    </a>
+                  )
+                : undefined,
+            },
+          ],
+        };
+      default:
+        return { pinTop: EMPTY_LIST };
+    }
+  }, [header, t, hasSearch, searchOpened]);
+}
+
+export function useItemsContent(items: SidebarItem[], onSelect?: (id: string | number) => void): ItemProps[] {
+  return useMemo(() => {
+    const getItemsContent = (items: SidebarItem[], onSelect?: (id: string | number) => void) =>
+      items.map(
+        ({
+          id,
+          label,
+          beforeContent,
+          onClick,
+          afterContent,
+          disabledReason,
+          disabledReasonPlacement,
+          ...rest
+        }): ItemProps => {
+          const href = 'href' in rest ? rest.href : undefined;
+          const newItems = 'items' in rest ? rest.items : undefined;
+          const type = 'type' in rest ? rest.type : undefined;
+
+          const clickHandler = (event: MouseEvent<HTMLElement>) => {
+            if (href && (event?.metaKey || event?.button === 1)) {
+              return;
+            }
+
+            event.preventDefault();
+            onClick?.(event);
+            onSelect?.(id);
+          };
+
+          if (type === SIDEBAR_ITEM_TYPE.Group) {
+            return {
+              ...rest,
+              label,
+              type: ITEM_TYPE.Group,
+              items: getItemsContent(newItems || [], onSelect),
+            };
+          }
+
+          const newItem = {
+            id,
+            content: { label: label },
+            itemWrapRender: (item: ReactNode) => {
+              if (!disabledReason) {
+                return href ? (
+                  <a href={href} onClick={clickHandler}>
+                    {item}
+                  </a>
+                ) : (
+                  item
+                );
+              }
+
+              return (
+                <Tooltip
+                  hoverDelayOpen={500}
+                  open={disabledReason ? undefined : false}
+                  tip={disabledReason}
+                  placement={disabledReasonPlacement}
+                >
+                  {item}
+                </Tooltip>
+              );
+            },
+
+            onClick: href ? undefined : clickHandler,
+            beforeContent,
+            afterContent,
+            disabled: Boolean(disabledReason),
+          };
+
+          if (newItems?.length) {
+            return {
+              ...newItem,
+              type: ITEM_TYPE.Collapse,
+              items: getItemsContent(newItems || [], onSelect),
+            };
+          }
+
+          return newItem;
+        },
+      );
+
+    return getItemsContent(items, onSelect);
+  }, [items, onSelect]);
+}

package/src/components/PageSidebar/hooks/useSearchFilter.tsx

@@ -0,0 +1,57 @@
+import { useMemo } from 'react';
+
+import { useSearchContext } from '../contexts';
+import { SidebarItem } from '../types';
+
+const matchString = (value: string, searchValue: string) =>
+  value.trim().toLowerCase().includes(searchValue.trim().toLowerCase());
+
+const filterService = (servicesList: SidebarItem[], searchValue: string): SidebarItem[] => {
+  if (!searchValue) return servicesList;
+
+  return servicesList.reduce((result, service) => {
+    if (service.label && matchString(service.label, searchValue)) {
+      result.push(service);
+      return result;
+    }
+
+    if ('items' in service && service.items?.length) {
+      const items = filterService(service.items, searchValue);
+
+      if (items.length) {
+        result.push({ ...service, items });
+      }
+
+      return result;
+    }
+
+    return result;
+  }, [] as SidebarItem[]);
+};
+
+const getSidebarItemIds = (list: SidebarItem[]): (string | number)[] =>
+  list.reduce(
+    (result, el) => {
+      result.push(el.id);
+      if ('items' in el && el.items?.length) {
+        const childItems = getSidebarItemIds(el.items);
+        result.push(...childItems);
+      }
+      return result;
+    },
+    [] as (string | number)[],
+  );
+
+export const useSearchFilter = (list: SidebarItem[]) => {
+  const { searchValue, setSearchValue, searchOpened } = useSearchContext();
+  const filteredList = useMemo(() => filterService(list, searchValue), [list, searchValue]);
+  const searchCollapseState = useMemo(() => ({ value: getSidebarItemIds(filteredList) }), [filteredList]);
+
+  return {
+    searchOpened,
+    searchValue,
+    setSearchValue,
+    filteredList,
+    searchCollapseState,
+  };
+};

package/src/components/PageSidebar/index.ts

@@ -0,0 +1,3 @@
+export * from './PageSidebar';
+export * from './helperComponents/SidebarSelect';
+export * from './types';

package/src/components/PageSidebar/styles.module.scss

@@ -0,0 +1,133 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+// Ширина сайдбара 256px — фиксированный layout-размер из Figma-мастера, токена нет.
+$width: 256px;
+// Ширина hover-ловушки слева от свёрнутого сайдбара.
+$catcherWidth: base.$sn-primitive-dimension-4;
+// Тайминги slide-анимации — анимационные литералы, токенов нет.
+$instantAnimation: left 0.15s ease-in-out;
+$delayedAnimation: left 0.15s 0.35s ease-in-out;
+
+.wrapper {
+  width: $width;
+
+  &[data-collapsed] {
+    width: 0;
+  }
+
+  .body {
+    position: absolute;
+
+    display: flex;
+
+    width: $width;
+    height: 100%;
+
+    transition: $delayedAnimation;
+
+    &[data-hover-off] {
+      pointer-events: none;
+      transition: $instantAnimation;
+    }
+
+    &[data-collapsed] {
+      left: calc(-1 * $width);
+
+      &::before {
+        content: ' ';
+
+        position: absolute;
+        right: calc(-1 * $catcherWidth);
+
+        width: $catcherWidth;
+        height: 100%;
+      }
+
+      &:hover {
+        left: 0;
+        transition: $instantAnimation;
+
+        &::before {
+          right: calc(-4 * $catcherWidth);
+          width: calc(4 * $catcherWidth);
+        }
+      }
+    }
+  }
+
+  .content {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+
+    box-sizing: border-box;
+    padding: base.$sn-primitive-dimension-4 0;
+    // Правый разделитель = stateLayer/borderOnBackground color.
+    border-right: base.$sn-primitive-strokeWeight-strokeRegular solid
+      base.$sn-theme-color-material-stateLayer-neutral-border-default-borderColor;
+
+    background-color: base.$sn-theme-color-neutral-background;
+
+    // Правило сравнивает этот селектор с `.body:hover` выше, хотя это разные элементы
+    // (`.content` и `.body`) и каскад между ними невозможен.
+    // stylelint-disable-next-line no-descending-specificity
+    &[data-collapsed] {
+      margin: base.$sn-primitive-dimension-4;
+      border-right: none;
+      box-shadow: base.$sn-boxShadow-elevation-level3;
+    }
+  }
+
+  .list {
+    position: relative;
+
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column-reverse;
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  .toggler {
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    justify-content: end;
+
+    padding: 0 base.$sn-primitive-dimension-4;
+  }
+
+  .expandButton {
+    position: fixed;
+    bottom: base.$sn-primitive-dimension-8;
+    left: base.$sn-primitive-dimension-8;
+  }
+}
+
+.button {
+  background-color: base.$sn-theme-color-neutral-background2Level;
+}
+
+// Высота строки шапки 48px. 44 − 1px: разделитель-полоску listItemGroup (1px)
+// добавляет сверху хост @cloud-ru/ds-list.
+.pinnedHeaderSlot {
+  display: flex;
+  flex-direction: row;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+
+  min-height: calc(base.$sn-primitive-dimension-44 - base.$sn-primitive-strokeWeight-strokeRegular);
+}
+
+.pinnedHeaderContent {
+  display: flex;
+  flex-grow: 1;
+  min-width: 0;
+}
+
+// Инсет под focus-outline поля: строка списка держит overflow: hidden и обрезала бы
+// рамку по краям. Только для поиска — иконка заголовка остаётся выровнена с навигацией.
+.pinnedHeaderSlotSearch {
+  padding-inline: base.$sn-primitive-dimension-4;
+}

package/src/components/PageSidebar/types.ts

@@ -0,0 +1,42 @@
+import { IconPredefinedProps } from '@cloud-ru/ds-icon-predefined';
+import { TooltipProps } from '@cloud-ru/ds-tooltip';
+import { AnchorHTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from 'react';
+
+import { SIDEBAR_HEADER_TYPE } from '../../constants';
+import { SidebarItemType } from '../../types';
+
+export type SidebarItemBase = {
+  id: string | number;
+  label: string;
+  'data-test-id'?: string;
+  onClick?(e: MouseEvent<HTMLElement>): void;
+  afterContent?: ReactNode;
+  disabledReason?: ReactNode;
+  disabledReasonPlacement?: TooltipProps['placement'];
+  beforeContent?: ReactNode;
+};
+
+export type SidebarItemWithHref = SidebarItemBase & {
+  href: string;
+};
+
+export type SidebarItemWithItems = SidebarItemBase & {
+  /** @default collapse */
+  type?: SidebarItemType;
+  divider?: boolean;
+  items?: SidebarItem[];
+};
+
+export type SidebarItem = SidebarItemWithHref | SidebarItemWithItems;
+
+export type Icon = IconPredefinedProps['icon'];
+
+export type HeaderProps =
+  | { type: typeof SIDEBAR_HEADER_TYPE.Title; label: string; icon: Icon; afterContent?: ReactNode }
+  | { type: typeof SIDEBAR_HEADER_TYPE.Back; label: string; href?: string; onClick?: MouseEventHandler };
+
+export type Documentation = {
+  href?: string;
+  onClick?: MouseEventHandler;
+  target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+};

package/src/components/TreeNavigation/TreeNavigation.tsx

@@ -0,0 +1,108 @@
+import { APPEARANCE, Button, SIZE, VIEW } from '@cloud-ru/ds-button';
+import { BurgerSVG, CloseSVG } from '@cloud-ru/ds-icons/interface/product';
+import { Status } from '@cloud-ru/ds-status';
+import { SIZE as TYPOGRAPHY_SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useMemo } from 'react';
+
+import { TREE_NAVIGATION_MODE } from '../../constants';
+import { pageLayoutLocale } from '../../locale';
+import { ConditionalPopover, Menu } from './helperComponents';
+import styles from './styles.module.scss';
+import { TreeNavigationProps } from './types';
+
+export function TreeNavigation({
+  header: { title, icon, description, status, actions },
+  menu: {
+    menuTitle,
+    items,
+    enableShrinkMenuButton,
+    withDefaultOpenedMenuList,
+    isMenuOpen,
+    defaultMenuOpened,
+    onMenuToggle,
+    selected,
+    onSelect,
+  },
+  content,
+  mode,
+  contentClassName,
+}: TreeNavigationProps) {
+  const [open, setOpen] = useUncontrolledProp(isMenuOpen, defaultMenuOpened, onMenuToggle);
+  const { t } = pageLayoutLocale.useTranslations();
+
+  // В режиме `fixed` aside-меню всегда раскрыто, переключатель неактуален.
+  const isFixed = mode === TREE_NAVIGATION_MODE.Fixed;
+  const isAsideOpen = isFixed || (mode === TREE_NAVIGATION_MODE.Aside && Boolean(open));
+
+  const menu = useMemo(
+    () => (
+      <Menu
+        menuItems={items}
+        menuTitle={menuTitle}
+        enableShrinkMenuButton={enableShrinkMenuButton}
+        withDefaultOpenedMenuList={withDefaultOpenedMenuList}
+        selected={selected}
+        onSelect={onSelect}
+      />
+    ),
+    [onSelect, selected, items, menuTitle, enableShrinkMenuButton, withDefaultOpenedMenuList],
+  );
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.header}>
+        <div className={styles.titleWrapper}>
+          <div className={styles.titleInner}>
+            {!isFixed && (
+              <ConditionalPopover
+                isOpen={Boolean(open)}
+                onOpenChange={setOpen}
+                tip={menu}
+                withPopover={mode === TREE_NAVIGATION_MODE.Popover}
+              >
+                <div className={styles.innerElement}>
+                  <Button
+                    view={VIEW.Simple}
+                    appearance={APPEARANCE.Neutral}
+                    size={SIZE.S}
+                    aria-label={open ? t('TreeNavigation.closeMenu') : t('TreeNavigation.openMenu')}
+                    icon={open ? <CloseSVG /> : <BurgerSVG />}
+                    onClick={() => setOpen(!open)}
+                  />
+                </div>
+              </ConditionalPopover>
+            )}
+            {icon && (
+              <div className={styles.innerElement}>
+                <div className={styles.icon}>{icon}</div>
+              </div>
+            )}
+            <Typography variant={VARIANT.title} size={TYPOGRAPHY_SIZE.l} className={styles.title}>
+              {title}
+            </Typography>
+
+            {status && (
+              <div className={styles.innerElement}>
+                <Status {...status} />
+              </div>
+            )}
+          </div>
+          {description && (
+            <Typography variant={VARIANT.body} size={TYPOGRAPHY_SIZE.s} className={styles.description}>
+              {description}
+            </Typography>
+          )}
+        </div>
+
+        {actions && <div className={styles.headerActions}>{actions}</div>}
+      </div>
+
+      <div className={styles.body}>
+        {isAsideOpen && <aside className={styles.sidebar}>{menu}</aside>}
+        <div className={cn(styles.main, contentClassName)}>{content}</div>
+      </div>
+    </div>
+  );
+}

package/src/components/TreeNavigation/helperComponents/ConditionalPopover/ConditionalPopover.tsx

@@ -0,0 +1,31 @@
+import { PLACEMENT, Popover, TRIGGER } from '@cloud-ru/ds-popover';
+import { ReactNode } from 'react';
+
+import styles from './styles.module.scss';
+
+type ConditionalPopoverProps = {
+  isOpen: boolean;
+  onOpenChange(value: boolean): void;
+  tip: ReactNode;
+  withPopover?: boolean;
+  children: ReactNode;
+};
+
+export function ConditionalPopover({ tip, withPopover, isOpen, onOpenChange, children }: ConditionalPopoverProps) {
+  if (withPopover) {
+    return (
+      <Popover
+        className={styles.popover}
+        open={isOpen}
+        onOpenChange={nextOpen => onOpenChange(nextOpen)}
+        content={tip}
+        trigger={TRIGGER.Click}
+        placement={PLACEMENT.BottomStart}
+      >
+        {children}
+      </Popover>
+    );
+  }
+
+  return children;
+}

package/src/components/TreeNavigation/helperComponents/ConditionalPopover/styles.module.scss

@@ -0,0 +1,7 @@
+.popover {
+  max-height: 80%;
+
+  & > div {
+    overflow: auto;
+  }
+}

package/src/components/TreeNavigation/helperComponents/Menu/Menu.tsx

@@ -0,0 +1,69 @@
+import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
+import { HorizontalMenuCloseSVG, HorizontalMenuOpenSVG } from '@cloud-ru/ds-icons/interface/product';
+import { Tree, TreeNodeId, TreeNodeProps } from '@cloud-ru/ds-tree';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { useMemo, useState } from 'react';
+
+import { pageLayoutLocale } from '../../../../locale';
+import styles from './styles.module.scss';
+import { getExpandedNodes } from './utils';
+
+type MenuProps = {
+  menuTitle?: string;
+  menuItems: TreeNodeProps[];
+  enableShrinkMenuButton?: boolean;
+  withDefaultOpenedMenuList?: boolean;
+  selected?: TreeNodeId;
+  onSelect?(selectedKey: TreeNodeId | undefined, node: TreeNodeProps): void;
+};
+
+export function Menu({
+  menuTitle,
+  menuItems,
+  enableShrinkMenuButton = true,
+  withDefaultOpenedMenuList,
+  selected,
+  onSelect,
+}: MenuProps) {
+  const { t } = pageLayoutLocale.useTranslations();
+  const allExpandedNodes = useMemo(() => getExpandedNodes(menuItems), [menuItems]);
+
+  const [expandedNodes, setExpandedNodes] = useState<string[]>(withDefaultOpenedMenuList ? allExpandedNodes : []);
+
+  const isExpanded = expandedNodes.length > 0;
+
+  const handleExpandAll = () => setExpandedNodes(getExpandedNodes(menuItems));
+  const handleCollapseAll = () => setExpandedNodes([]);
+
+  const showSubheader = Boolean(menuTitle || enableShrinkMenuButton);
+
+  return (
+    <div className={styles.sidebar}>
+      {showSubheader && (
+        <div className={styles.subheader}>
+          <Typography variant={VARIANT.title} size={SIZE.m}>
+            {menuTitle}
+          </Typography>
+          {enableShrinkMenuButton && (
+            <Button
+              view={VIEW.Simple}
+              appearance={APPEARANCE.Neutral}
+              label={isExpanded ? t('TreeNavigation.collapseAll') : t('TreeNavigation.expandAll')}
+              icon={isExpanded ? <HorizontalMenuCloseSVG /> : <HorizontalMenuOpenSVG />}
+              onClick={isExpanded ? handleCollapseAll : handleExpandAll}
+            />
+          )}
+        </div>
+      )}
+
+      <Tree
+        data={menuItems}
+        selectionMode='single'
+        expandedNodes={expandedNodes}
+        onExpand={setExpandedNodes}
+        selected={selected}
+        onSelect={onSelect}
+      />
+    </div>
+  );
+}

package/src/components/TreeNavigation/helperComponents/Menu/styles.module.scss

@@ -0,0 +1,17 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+// Ширина меню 292px (общая 324px из-за 16px paddings родителя) — layout-литерал из Figma-мастера.
+$sidebar-width: 292px;
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-12;
+  min-width: $sidebar-width;
+}
+
+.subheader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

package/src/components/TreeNavigation/helperComponents/Menu/utils.ts

@@ -0,0 +1,22 @@
+import { TreeNodeProps } from '@cloud-ru/ds-tree';
+
+/**
+ * Рекурсивно собирает все ID узлов дерева для их разворачивания
+ * @param nodes - Массив узлов дерева
+ * @returns Массив ID всех узлов (включая вложенные)
+ */
+export const getExpandedNodes = (nodes: TreeNodeProps[]): string[] => {
+  if (!nodes || nodes.length === 0) {
+    return [];
+  }
+
+  const ids: string[] = [];
+
+  nodes.forEach(el => {
+    const children = 'nested' in el && el.nested ? getExpandedNodes(el.nested) : [];
+
+    ids.push(el.id, ...children);
+  });
+
+  return ids;
+};

package/src/components/TreeNavigation/helperComponents/index.ts

@@ -0,0 +1,2 @@
+export * from './Menu/Menu';
+export * from './ConditionalPopover/ConditionalPopover';

package/src/components/TreeNavigation/index.ts

@@ -0,0 +1,2 @@
+export * from './TreeNavigation';
+export * from './types';