@cloud-ru/uikit-product-page-layout 0.21.3

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

@@ -0,0 +1,138 @@
+import { MouseEvent, ReactNode, useMemo } from 'react';
+
+import { ChevronLeftSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ItemProps } from '@snack-uikit/list';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+import { SidebarSearchToggle } from '../helperComponents/SidebarSearchToggle';
+import { SidebarTitle } from '../helperComponents/SidebarTitle';
+import { HeaderProps, SidebarItem } from '../types';
+
+const EMPTY_LIST: ItemProps[] = [];
+
+export function useTopPinnedContent(
+  header?: HeaderProps,
+  hasSearch?: boolean,
+): { title?: ReactNode; pinTop: ItemProps[] } {
+  const { t } = useLocale('PageLayout');
+
+  return useMemo(() => {
+    switch (header?.type) {
+      case 'title':
+        return {
+          pinTop: [
+            {
+              content: <SidebarTitle title={header.label} icon={header.icon} afterContent={header.afterContent} />,
+              afterContent: hasSearch ? <SidebarSearchToggle /> : null,
+              inactive: true,
+            },
+          ],
+        };
+      case 'back':
+        return {
+          pinTop: [
+            {
+              content: { option: `${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]);
+}
+
+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 === 'group') {
+            return {
+              ...rest,
+              label,
+              type: 'group',
+              items: getItemsContent(newItems || [], onSelect),
+            };
+          }
+
+          const newItem = {
+            id,
+            content: { option: 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: '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,2 @@
+export * from './PageSidebar';
+export { type SidebarItem } from './types';

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

@@ -0,0 +1,101 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables.scss';
+
+$width: 256px;
+$catcherWidth: styles-theme-variables.$dimension-050m;
+$instantAnimation: left .15s ease-in-out;
+$delayedAnimation: left .15s .35s ease-in-out;
+$searchMargin: 52px;
+
+.wrapper {
+  width: $width;
+
+  &[data-collapsed] {
+    width: 0;
+  }
+
+  .body {
+    position: absolute;
+    height: 100%;
+    width: $width;
+    display: flex;
+    transition: $delayedAnimation;
+
+
+    &[data-hover-off] {
+      pointer-events: none;
+      transition: $instantAnimation;
+    }
+
+    &[data-collapsed] {
+      left: calc(-1 * $width);
+
+      &::before {
+        position: absolute;
+        content: ' ';
+        height: 100%;
+        right: calc(-1 * $catcherWidth);
+        width: $catcherWidth;
+        // uncomment for debug
+        // background-color: aqua;
+        // opacity: 0.2;
+      }
+
+      &:hover {
+        transition: $instantAnimation;
+        left: 0;
+
+        &::before {
+          right: calc(-4 * $catcherWidth);
+          width: calc(4 * $catcherWidth);
+        }
+      }
+    }
+  }
+
+  .content {
+    flex-grow: 1;
+    display: flex;
+    overflow: hidden;
+    box-sizing: border-box;
+    padding: 4px 0;
+    flex-direction: column;
+    background-color: styles-theme-variables.$sys-neutral-background;
+    border-right: 1px solid styles-theme-variables.$sys-neutral-decor-default;
+
+    &[data-collapsed] {
+      box-shadow: styles-theme-variables.$box-shadow-elevation-level3;
+      border-right: none;
+      margin: 4px;
+    }
+  }
+
+  .list {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column-reverse;
+    position: relative;
+  }
+
+  .searchWrapper {
+    position: absolute;
+    right: calc($searchMargin - 10px);
+    top: 4px;
+    width: calc($width - $searchMargin);
+  }
+
+  .toggler {
+    display: flex;
+    justify-content: end;
+    flex-shrink: 0;
+    flex-grow: 0;
+    padding: 0 4px;
+  }
+
+  .expandButton {
+    position: fixed;
+    bottom: 8px;
+    left: 8px;
+  }
+}

package/src/components/PageSidebar/types.ts

@@ -0,0 +1,41 @@
+import { AnchorHTMLAttributes, MouseEvent, MouseEventHandler, ReactNode } from 'react';
+
+import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
+import { TooltipProps } from '@snack-uikit/tooltip';
+
+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?: 'collapse' | 'group';
+  divider?: boolean;
+  // eslint-disable-next-line no-use-before-define
+  items?: SidebarItem[];
+};
+
+export type SidebarItem = SidebarItemWithHref | SidebarItemWithItems;
+
+export type Icon = IconPredefinedProps['icon'];
+
+export type HeaderProps =
+  | { type: 'title'; label: string; icon: Icon; afterContent?: ReactNode }
+  | { type: 'back'; label: string; href?: string; onClick?: MouseEventHandler };
+
+export type Documentation = {
+  href?: string;
+  onClick?: MouseEventHandler;
+  target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+};

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export * from './PageCatalog';
+export * from './PageForm';
+export * from './PageLoading';
+export * from './PageServices';
+export * from './DefaultSubHeader';
+export * from './PageSidebar';

package/src/index.ts

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