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

package/src/components/PageSidebar/PageSidebar.tsx

@@ -0,0 +1,143 @@
+import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
+import { VerticalMenuCloseSVG, VerticalMenuOpenSVG } from '@cloud-ru/ds-icons/interface/product';
+import { List, ListProps } from '@cloud-ru/ds-list';
+import { extractSupportProps, useUncontrolledProp, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useCallback, useState } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { SearchContextProvider } from './contexts';
+import { useItemsContent, useTopPinnedContent } from './hooks/useItemsCreator';
+import { useSearchFilter } from './hooks/useSearchFilter';
+import styles from './styles.module.scss';
+import { Documentation, HeaderProps, SidebarItem } from './types';
+
+export type PageSidebarProps = WithSupportProps<{
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChanged?(open: boolean): void;
+  items: SidebarItem[];
+  footerItems?: SidebarItem[];
+  header?: HeaderProps;
+  selected?: string | number;
+  onSelect?(id: string | number): void;
+  className?: string;
+  /** Зарезервировано, в текущей реализации не используется. */
+  documentation?: Documentation;
+  /** Зарезервировано, в текущей реализации не используется. */
+  pageContainerId?: string;
+  hasSearch?: boolean;
+  collapse?: ListProps['collapse'];
+}>;
+
+function PrivateSideBar({
+  open: openProp,
+  defaultOpen,
+  onOpenChanged,
+  className,
+  items,
+  footerItems = [],
+  header,
+  selected,
+  onSelect,
+  hasSearch,
+  collapse,
+  // documentation / pageContainerId — зарезервированы, в текущей реализации не используются.
+  // Деструктурируем, чтобы не попадали в otherProps и не ломали extractSupportProps.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  documentation,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  pageContainerId,
+  ...otherProps
+}: PageSidebarProps) {
+  const [open, setOpenState] = useUncontrolledProp(openProp, defaultOpen || true, onOpenChanged);
+  const [hoverOff, setHoverOff] = useState(false);
+
+  const toggleOpen = useCallback(
+    (newValue: boolean = !open) => {
+      if (newValue === open) {
+        return;
+      }
+
+      if (!newValue) {
+        /* кнопка сворачивания внутри сайдбара, а он раскрывается по ховеру — после клика
+        на время отключаем ховер, чтобы дать ему свернуться */
+        setHoverOff(true);
+        setTimeout(() => setHoverOff(false), 300);
+      }
+
+      setOpenState(newValue);
+    },
+    [open, setOpenState],
+  );
+
+  const { filteredList, searchValue, searchCollapseState } = useSearchFilter(items);
+  const list = useItemsContent(filteredList, onSelect);
+  const footerList = useItemsContent(footerItems);
+  const { pinTop } = useTopPinnedContent(header, hasSearch);
+
+  return (
+    <div
+      {...extractSupportProps(otherProps)}
+      data-collapsed={!open || undefined}
+      className={cn(styles.wrapper, className)}
+    >
+      {!open && (
+        <Button
+          view={VIEW.Elevated}
+          appearance={APPEARANCE.Neutral}
+          className={styles.expandButton}
+          data-test-id={TEST_IDS.sidebarToggle.expand}
+          icon={<VerticalMenuOpenSVG />}
+          onClick={() => toggleOpen(true)}
+        />
+      )}
+
+      <div
+        data-collapsed={!open || undefined}
+        data-hover-off={hoverOff || undefined}
+        data-has-search={hasSearch || undefined}
+        className={styles.body}
+      >
+        <div className={styles.content} data-collapsed={!open || undefined}>
+          <div className={styles.list}>
+            <List
+              selection={{ mode: 'single', value: selected }}
+              size='m'
+              items={list}
+              pinTop={pinTop}
+              pinBottom={footerList}
+              scroll
+              scrollToSelectedItem
+              collapse={searchValue ? searchCollapseState : collapse}
+              // Пустой список при активном поиске — это «ничего не найдено» (noResultsState),
+              // а не «нет данных» (noDataState). Флаг переключает empty-state в @cloud-ru/ds-list.
+              dataFiltered={Boolean(searchValue)}
+              barHideStrategy='leave'
+            />
+          </div>
+          {open && (
+            <div className={styles.toggler}>
+              <Button
+                view={VIEW.Elevated}
+                appearance={APPEARANCE.Neutral}
+                icon={<VerticalMenuCloseSVG />}
+                className={styles.button}
+                data-test-id={TEST_IDS.sidebarToggle.collapse}
+                onClick={() => toggleOpen(false)}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function PageSidebar(props: PageSidebarProps) {
+  return (
+    <SearchContextProvider>
+      <PrivateSideBar {...props} />
+    </SearchContextProvider>
+  );
+}

package/src/components/PageSidebar/contexts.tsx

@@ -0,0 +1,30 @@
+import { createContext, Dispatch, ReactNode, SetStateAction, useContext, useState } from 'react';
+
+type SearchContextValue = {
+  searchValue: string;
+  setSearchValue(searchValue: string): void;
+  searchOpened: boolean;
+  setSearchOpened: Dispatch<SetStateAction<boolean>>;
+};
+
+export const SearchContext = createContext<SearchContextValue>({
+  searchValue: '',
+  searchOpened: false,
+  setSearchValue: () => {},
+  setSearchOpened: () => {},
+});
+
+export function useSearchContext() {
+  return useContext(SearchContext);
+}
+
+export function SearchContextProvider({ children }: { children: ReactNode }) {
+  const [searchValue, setSearchValue] = useState('');
+  const [searchOpened, setSearchOpened] = useState(false);
+
+  return (
+    <SearchContext.Provider value={{ searchValue, setSearchValue, searchOpened, setSearchOpened }}>
+      {children}
+    </SearchContext.Provider>
+  );
+}

package/src/components/PageSidebar/helperComponents/SidebarSearch/SidebarSearch.tsx

@@ -0,0 +1,31 @@
+import { Search, SIZE } from '@cloud-ru/ds-search';
+import { useEffect, useRef } from 'react';
+
+import { pageLayoutLocale } from '../../../../locale';
+import { useSearchContext } from '../../contexts';
+
+export function SidebarSearch() {
+  const { searchValue, setSearchValue, searchOpened } = useSearchContext();
+
+  const ref = useRef<HTMLInputElement>(null);
+
+  const { t } = pageLayoutLocale.useTranslations();
+
+  useEffect(() => {
+    if (searchOpened) {
+      ref?.current?.focus();
+    }
+  }, [searchOpened]);
+
+  if (!searchOpened) return null;
+
+  return (
+    <Search
+      ref={ref}
+      size={SIZE.M}
+      placeholder={t('PageSidebar.searchByServices')}
+      value={searchValue}
+      onChange={setSearchValue}
+    />
+  );
+}

package/src/components/PageSidebar/helperComponents/SidebarSearch/index.ts

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

package/src/components/PageSidebar/helperComponents/SidebarSearchToggle/SidebarSearchToggle.tsx

@@ -0,0 +1,36 @@
+import { APPEARANCE, Button, SIZE, VIEW } from '@cloud-ru/ds-button';
+import { VerticalMenuRightCloseSVG } from '@cloud-ru/ds-icons/interface/product';
+import { SearchSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+
+import { TEST_IDS } from '../../../../constants';
+import { pageLayoutLocale } from '../../../../locale';
+import { useSearchContext } from '../../contexts';
+import styles from './styles.module.scss';
+
+export function SidebarSearchToggle() {
+  const { searchOpened, setSearchValue, setSearchOpened } = useSearchContext();
+
+  const { t } = pageLayoutLocale.useTranslations();
+
+  const toggle = () => {
+    setSearchValue('');
+    setSearchOpened(prev => !prev);
+  };
+
+  return (
+    <Tooltip
+      tip={searchOpened ? t('PageSidebar.closeSearch') : t('PageSidebar.openSearch')}
+      triggerClassName={styles.trigger}
+    >
+      <Button
+        view={VIEW.Function}
+        appearance={APPEARANCE.Neutral}
+        size={SIZE.M}
+        data-test-id={TEST_IDS.sidebarSearch.trigger}
+        onClick={toggle}
+        icon={searchOpened ? <VerticalMenuRightCloseSVG /> : <SearchSVG />}
+      />
+    </Tooltip>
+  );
+}

package/src/components/PageSidebar/helperComponents/SidebarSearchToggle/index.ts

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

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

@@ -0,0 +1,6 @@
+// Обёртка триггера тултипа по умолчанию block: её line-box выше кнопки (35 vs 32px)
+// и кнопка съезжает вверх в центрированной строке шапки. Flex прижимает высоту к кнопке.
+.trigger {
+  display: flex;
+  align-items: center;
+}

package/src/components/PageSidebar/helperComponents/SidebarSelect/SidebarSelect.tsx

@@ -0,0 +1,91 @@
+import { LAYOUT_TYPE, withLayoutType } from '@cloud-ru/ds-adaptive';
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist, DroplistProps } from '@cloud-ru/ds-list';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useMemo, useState } from 'react';
+
+import { TEST_IDS } from '../../../../constants';
+import { useItemsContent, useSearchFilter, useSelectedItem } from './hooks';
+import styles from './styles.module.scss';
+import { SidebarItem } from './types';
+
+export type SidebarSelectProps = WithSupportProps<{
+  items: SidebarItem[];
+  footerItems?: SidebarItem[];
+  selected?: string | number;
+  onSelect?(id: string | number): void;
+  className?: string;
+  collapse?: DroplistProps['collapse'];
+  hasSearch?: boolean;
+}>;
+
+function SidebarSelectBase({
+  className,
+  items,
+  footerItems = [],
+  selected,
+  onSelect,
+  collapse,
+  hasSearch,
+  ...otherProps
+}: SidebarSelectProps) {
+  const [searchValue, setSearchValue] = useState('');
+  const { filteredList, searchCollapseState } = useSearchFilter(items, searchValue);
+  const list = useItemsContent(filteredList, onSelect);
+  const footerList = useItemsContent(footerItems);
+  const [isOpen, setIsOpen] = useState(false);
+  const selectedItem = useSelectedItem(items, selected);
+
+  const selectedCollapsedState = useMemo(() => {
+    if (selectedItem.item) {
+      return { defaultValue: selectedItem.path };
+    }
+  }, [selectedItem.item, selectedItem.path]);
+
+  const handleSelect = (value: string | number) => {
+    if (value) {
+      onSelect?.(value);
+    }
+
+    setIsOpen(false);
+  };
+
+  const allItems = useMemo(() => [...list, ...footerList], [list, footerList]);
+
+  const shouldShowSearch = hasSearch ?? (allItems.length > 15 || Boolean(searchValue));
+
+  return (
+    <Droplist
+      size='m'
+      selection={{ mode: 'single', value: selected, onChange: handleSelect }}
+      items={allItems}
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      collapse={searchValue ? searchCollapseState : collapse || selectedCollapsedState}
+      search={shouldShowSearch ? { value: searchValue, onChange: setSearchValue } : undefined}
+      scrollToSelectedItem
+    >
+      <div
+        role='button'
+        tabIndex={0}
+        className={cn(styles.wrapper, className)}
+        data-test-id={TEST_IDS.sidebarSelect.trigger}
+        {...extractSupportProps(otherProps)}
+      >
+        <TruncateString className={styles.triggerText} text={selectedItem.item?.label || ''} />
+
+        {selectedItem.item?.afterContent}
+
+        {isOpen ? <ChevronUpSVG /> : <ChevronDownSVG />}
+      </div>
+    </Droplist>
+  );
+}
+
+/**
+ * Мобильный select-сайдбар. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы адаптивный
+ * `Droplist` всегда открывал `BottomSheet` (мобильный паттерн сайдбара), независимо от провайдера.
+ */
+export const SidebarSelect = withLayoutType(SidebarSelectBase, LAYOUT_TYPE.Mobile);

package/src/components/PageSidebar/helperComponents/SidebarSelect/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useItemsContent } from './useItemsContent';
+export { useSelectedItem } from './useSelectedItem';
+export { useSearchFilter } from './useSearchFilter';

package/src/components/PageSidebar/helperComponents/SidebarSelect/hooks/useItemsContent.tsx

@@ -0,0 +1,85 @@
+import { DroplistProps } from '@cloud-ru/ds-list';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { MouseEvent, ReactNode, useMemo } from 'react';
+
+import { SidebarItem } from '../types';
+
+const getItemsContent = (items: SidebarItem[], onSelect?: (id: string | number) => void): DroplistProps['items'] =>
+  items.map(({ id, label, onClick, afterContent, beforeContent, disabledReason, disabledReasonPlacement, ...rest }) => {
+    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);
+
+      if (!items.length) {
+        onSelect?.(id);
+      }
+    };
+
+    if (type === 'group') {
+      return {
+        ...rest,
+        label,
+        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,
+      afterContent,
+      beforeContent,
+      disabled: Boolean(disabledReason),
+    };
+
+    if (newItems?.length) {
+      return {
+        ...newItem,
+        type: 'collapse',
+        items: getItemsContent(newItems || [], onSelect),
+      };
+    }
+
+    return newItem;
+  });
+
+export function useItemsContent(
+  items: SidebarItem[],
+  onSelect?: (id: string | number) => void,
+): DroplistProps['items'] {
+  return useMemo(() => getItemsContent(items, onSelect), [items, onSelect]);
+}

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

@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+
+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 getItemIds = (list: SidebarItem[]): (string | number)[] =>
+  list.reduce(
+    (result, el) => {
+      result.push(el.id);
+
+      if ('items' in el && el.items?.length) {
+        const childItems = getItemIds(el.items);
+        result.push(...childItems);
+      }
+      return result;
+    },
+    [] as (string | number)[],
+  );
+
+export const useSearchFilter = (list: SidebarItem[], searchValue: string) => {
+  const filteredList = useMemo(() => filterService(list, searchValue), [list, searchValue]);
+  const searchCollapseState = useMemo(() => ({ value: getItemIds(filteredList) }), [filteredList]);
+
+  return {
+    filteredList,
+    searchCollapseState,
+  };
+};

package/src/components/PageSidebar/helperComponents/SidebarSelect/hooks/useSelectedItem.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+
+import { SidebarItem } from '../types';
+
+type SelectedItem = {
+  item: SidebarItem | undefined;
+  path: (string | number)[];
+};
+
+function findSelectedItem(items: SidebarItem[], selected: string | number | undefined): SelectedItem {
+  return items.reduce(
+    (result, el) => {
+      if (el.id === selected) {
+        result.path.push(el.id);
+        return { ...result, item: el };
+      }
+
+      if ('items' in el && el.items?.length) {
+        const child = findSelectedItem(el.items, selected);
+
+        if (child.item) {
+          result.path.push(el.id, ...child.path);
+          return { ...result, item: child.item };
+        }
+      }
+
+      return result;
+    },
+    { item: undefined, path: [] } as SelectedItem,
+  );
+}
+
+export function useSelectedItem(items: SidebarItem[], selected: string | number | undefined): SelectedItem {
+  return useMemo(() => findSelectedItem(items, selected), [items, selected]);
+}

package/src/components/PageSidebar/helperComponents/SidebarSelect/index.ts

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

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

@@ -0,0 +1,20 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.wrapper {
+  @include base.composite-var(base.$sn-regular-body-l);
+
+  cursor: pointer;
+
+  display: flex;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+
+  height: base.$sn-primitive-dimension-48;
+  padding: 0 base.$sn-primitive-dimension-12;
+
+  color: base.$sn-theme-color-available-version-textSecondary;
+}
+
+.triggerText {
+  flex-grow: 1;
+}

package/src/components/PageSidebar/helperComponents/SidebarSelect/types.ts

@@ -0,0 +1 @@
+export type { SidebarItem } from '../../types';

package/src/components/PageSidebar/helperComponents/SidebarTitle/SidebarTitle.tsx

@@ -0,0 +1,33 @@
+import { APPEARANCE, IconPredefined, SIZE } from '@cloud-ru/ds-icon-predefined';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { SIZE as TYPOGRAPHY_SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { Icon } from '../../types';
+import styles from './styles.module.scss';
+
+export type SidebarTitleProps = {
+  title: string;
+  icon: Icon;
+  className?: string;
+  afterContent?: ReactNode;
+};
+
+export function SidebarTitle({ title, className, icon, afterContent }: SidebarTitleProps) {
+  return (
+    <div className={cn(className, styles.wrapper)}>
+      <div className={styles.icon}>
+        {/* Иконка сайдбара 24px (Figma density/size/icon/s, node 3334:70387 → itemPinTop). У @cloud-ru/ds-icon-predefined
+            нет ключа 's'; SIZE.M squared даёт ровно 24px-глиф — визуальный паритет с легаси size='s'. */}
+        <IconPredefined appearance={APPEARANCE.Neutral} size={SIZE.M} shape='squared' icon={icon} />
+      </div>
+      <div className={styles.title}>
+        <Typography variant={VARIANT.label} size={TYPOGRAPHY_SIZE.l}>
+          <TruncateString text={title} />
+        </Typography>
+      </div>
+      {afterContent}
+    </div>
+  );
+}

package/src/components/PageSidebar/helperComponents/SidebarTitle/index.ts

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

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

@@ -0,0 +1,20 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+}
+
+.icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.title {
+  overflow: hidden;
+  flex-grow: 1;
+  flex-shrink: 1;
+  color: base.$sn-theme-color-available-version-textMain;
+}