@cloud-ru/ds-uikit-product-header 1.0.1-preview-7665e9c3.0

package/src/components/MainMenu/utils/filterLinksGroupsFuzzy.ts

@@ -0,0 +1,205 @@
+import Fuse from 'fuse.js';
+
+import { FUZZY_SEARCH_THRESHOLD, SearchGroupsAccessor } from '../constants';
+import { InnerLink, LinksGroup } from '../types';
+import { findNestedInnerLinkParent, flatInnerLinks, hasNestedItems } from './innerLink';
+import { toggleLayout } from './search';
+
+const prepareItemAccessorKey = (groupId: string, alias: string): string => `${groupId}-${alias}`;
+
+type ItemsMap = Record<string, InnerLink>;
+
+function createItemsMap(links: LinksGroup[]): ItemsMap {
+  const itemsMap: ItemsMap = {};
+
+  links.forEach(group => {
+    flatInnerLinks(group.items).forEach(item => {
+      item.aliases.forEach(alias => {
+        const key = prepareItemAccessorKey(group.id, alias);
+        itemsMap[key] = item;
+      });
+    });
+  });
+
+  return itemsMap;
+}
+
+function appendFilteredGroupItem(
+  group: LinksGroup,
+  itemsInnerMap: Record<string, InnerLink>,
+  items: InnerLink[],
+  item: InnerLink,
+) {
+  if (!itemsInnerMap[item.id]) {
+    itemsInnerMap[item.id] = item;
+    items.push(item);
+  }
+}
+
+function appendNestedLeafMatch(
+  group: LinksGroup,
+  itemsInnerMap: Record<string, InnerLink>,
+  items: InnerLink[],
+  leafItem: InnerLink,
+) {
+  const parent = findNestedInnerLinkParent(group, leafItem.id);
+
+  if (!parent) {
+    appendFilteredGroupItem(group, itemsInnerMap, items, leafItem);
+    return;
+  }
+
+  const existingParent = itemsInnerMap[parent.id];
+
+  if (existingParent) {
+    const hasLeaf = existingParent.items?.some(item => item.id === leafItem.id);
+
+    if (!hasLeaf) {
+      existingParent.items = [...(existingParent.items ?? []), leafItem];
+    }
+
+    return;
+  }
+
+  itemsInnerMap[parent.id] = {
+    ...parent,
+    items: [leafItem],
+  };
+  items.push(itemsInnerMap[parent.id]);
+}
+
+function isGroupLabelMatch(matchKey: string | undefined): boolean {
+  return (
+    matchKey === SearchGroupsAccessor.GroupLabelText ||
+    matchKey === SearchGroupsAccessor.GroupId ||
+    matchKey === SearchGroupsAccessor.GroupAliases
+  );
+}
+
+export function filterLinksGroupsFuzzy(searchValue: string, links: LinksGroup[]): LinksGroup[] {
+  if (!searchValue) {
+    return links;
+  }
+
+  const itemsMap = createItemsMap(links);
+  const linksFuse = new Fuse(links, {
+    keys: Object.values(SearchGroupsAccessor),
+    includeMatches: true,
+    threshold: FUZZY_SEARCH_THRESHOLD,
+  });
+
+  let fuseSearchResults = linksFuse.search(searchValue);
+
+  if (fuseSearchResults.length < 1) {
+    const fixedLayoutValue = toggleLayout(searchValue);
+    fuseSearchResults = linksFuse.search(fixedLayoutValue);
+  }
+
+  return fuseSearchResults.reduce((accResult, fuseResult) => {
+    if (!fuseResult.matches) {
+      return accResult;
+    }
+
+    const isMatchByGroup = fuseResult.matches.some(match => isGroupLabelMatch(match.key));
+
+    if (isMatchByGroup) {
+      accResult.push(fuseResult.item);
+      return accResult;
+    }
+
+    const group = fuseResult.item;
+    const originalGroupIndex = fuseResult.refIndex;
+    const itemsInnerMap: Record<string, InnerLink> = {};
+    const items: InnerLink[] = [];
+
+    fuseResult.matches.forEach(match => {
+      if (match.refIndex === undefined) {
+        return;
+      }
+
+      switch (match.key) {
+        case SearchGroupsAccessor.ItemLabelText:
+        case SearchGroupsAccessor.ItemId: {
+          const item = links[originalGroupIndex].items[match.refIndex];
+
+          if (item && !item.hidden) {
+            if (hasNestedItems(item)) {
+              appendFilteredGroupItem(group, itemsInnerMap, items, item);
+            } else {
+              appendNestedLeafMatch(group, itemsInnerMap, items, item);
+            }
+          }
+
+          break;
+        }
+
+        case SearchGroupsAccessor.ItemNestedLabelText:
+        case SearchGroupsAccessor.ItemNestedId: {
+          // Fuse `refIndex` для `items.items.*` — индекс во вложенном массиве (или «плоский» по всем
+          // nested), а не индекс родителя в `group.items`. Ищем leaf по value среди всех родителей.
+          const nestedItem = links[originalGroupIndex].items
+            .flatMap(parent => parent.items ?? [])
+            .find(child =>
+              match.key === SearchGroupsAccessor.ItemNestedLabelText
+                ? child.label === match.value
+                : child.id === match.value,
+            );
+
+          if (nestedItem && !nestedItem.hidden) {
+            appendNestedLeafMatch(group, itemsInnerMap, items, nestedItem);
+          }
+
+          break;
+        }
+
+        case SearchGroupsAccessor.ItemNestedAliases: {
+          if (!match.value) {
+            break;
+          }
+
+          const groupId = fuseResult.item.id;
+          const alias = match.value;
+          const key = prepareItemAccessorKey(groupId, alias);
+          const item = itemsMap[key];
+
+          if (item) {
+            appendNestedLeafMatch(group, itemsInnerMap, items, item);
+          }
+
+          break;
+        }
+
+        case SearchGroupsAccessor.ItemAliases: {
+          if (!match.value) {
+            break;
+          }
+
+          const groupId = fuseResult.item.id;
+          const alias = match.value;
+          const key = prepareItemAccessorKey(groupId, alias);
+          const item = itemsMap[key];
+
+          if (item) {
+            appendNestedLeafMatch(group, itemsInnerMap, items, item);
+          }
+
+          break;
+        }
+
+        case SearchGroupsAccessor.GroupLabelText:
+        case SearchGroupsAccessor.GroupId:
+        default:
+          return;
+      }
+    });
+
+    if (items.length > 0) {
+      accResult.push({
+        ...group,
+        items,
+      });
+    }
+
+    return accResult;
+  }, [] as LinksGroup[]);
+}

package/src/components/MainMenu/utils/flatLinksGroups.ts

@@ -0,0 +1,6 @@
+import { InnerLink, LinksGroup } from '../types';
+import { flatInnerLinks } from './innerLink';
+
+export function flatLinksGroups(groups: LinksGroup[] = []): InnerLink[] {
+  return groups.flatMap(({ items }) => flatInnerLinks(items));
+}

package/src/components/MainMenu/utils/getAvatarNameFromLabel.ts

@@ -0,0 +1,24 @@
+/**
+ * Формирует двухбуквенный текст для пропа `name` компонента Avatar в MainMenu.
+ *
+ * - Одно слово — первые две буквы в верхнем регистре (`Маркетплейс` → `МА`).
+ * - Два и более слов — первая буква первых двух слов (`Партнерский кабинет` → `ПК`).
+ *
+ * @param label — подпись карточки (`InnerLink.label`).
+ * @returns Строка из двух символов для отображения в аватаре.
+ *
+ * @example
+ * getAvatarNameFromLabel('Маркетплейс'); // 'МА'
+ * getAvatarNameFromLabel('Партнерский кабинет'); // 'ПК'
+ */
+export function getAvatarNameFromLabel(label: string): string {
+  const words = label.trim().split(/\s+/).filter(Boolean);
+
+  if (words.length >= 2) {
+    return `${words[0][0] ?? ''}${words[1][0] ?? ''}`.toUpperCase();
+  }
+
+  const word = words[0] ?? '';
+
+  return word.slice(0, 2).toUpperCase();
+}

package/src/components/MainMenu/utils/getLinkEmblem.tsx

@@ -0,0 +1,27 @@
+import { Avatar } from '@cloud-ru/ds-avatar';
+import { CardServiceLightProps } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { createElement, JSXElementConstructor } from 'react';
+
+import { InnerLink } from '../types';
+import { getAvatarNameFromLabel } from './getAvatarNameFromLabel';
+
+type IconComponent = JSXElementConstructor<{
+  size?: number;
+  className?: string;
+}>;
+
+function createAvatarIcon(displayName: string): IconComponent {
+  return function LinkAvatarIcon({ className }: { className?: string }) {
+    return (
+      <Avatar name={displayName} showTwoSymbols shape='squared' appearance='neutral' size='s' className={className} />
+    );
+  };
+}
+
+export function getLinkEmblem(link: InnerLink): CardServiceLightProps['icon'] {
+  if (!link.icon) {
+    return createElement(createAvatarIcon(getAvatarNameFromLabel(link.label)));
+  }
+
+  return createElement(link.icon);
+}

package/src/components/MainMenu/utils/index.ts

@@ -0,0 +1,12 @@
+export * from './innerLink';
+export * from './getAvatarNameFromLabel';
+export * from './flatLinksGroups';
+export * from './getLinkEmblem';
+export * from './mapInnerLinksToListItems';
+export * from './pinGroupToBottom';
+export * from './dedupeSearchGroups';
+export * from './filterLinksGroupsFuzzy';
+export * from './resolveInnerLinksByIds';
+export * from './mapOrderedFavoriteIdsToLinks';
+export * from './resolveGroupBlockColor';
+export * from './dnd';

package/src/components/MainMenu/utils/innerLink.ts

@@ -0,0 +1,45 @@
+import { InnerLink, LinksGroup } from '../types';
+
+export function hasNestedItems(item: InnerLink): boolean {
+  return Boolean(item.items?.some(child => !child.hidden));
+}
+
+export function flatInnerLinks(items: InnerLink[] = []): InnerLink[] {
+  return items.flatMap(item => {
+    if (item.hidden) {
+      return [];
+    }
+
+    if (hasNestedItems(item)) {
+      return [item, ...flatInnerLinks(item.items)];
+    }
+
+    return [item];
+  });
+}
+
+export function getLinksGroupVisibleItemsCount(group: LinksGroup): number {
+  return group.items.reduce((count, item) => {
+    if (item.hidden) {
+      return count;
+    }
+
+    if (hasNestedItems(item)) {
+      return count + flatInnerLinks(item.items).length;
+    }
+
+    return count + 1;
+  }, 0);
+}
+
+export function getSubCategoryId(groupId: string, serviceId: string): string {
+  return `${groupId}__${serviceId}`;
+}
+
+export function getNestedServiceGroupId(groupId: string, serviceId: string): string {
+  return `${groupId}/${serviceId}`;
+}
+
+export function findNestedInnerLinkParent(group: LinksGroup, leafId: string): InnerLink | undefined {
+  return group.items.find(item => hasNestedItems(item) && item.items?.some(child => child.id === leafId));
+}

package/src/components/MainMenu/utils/mapInnerLinksToListItems.tsx

@@ -0,0 +1,17 @@
+import { BaseItemProps } from '@cloud-ru/ds-list';
+
+import { InnerLink } from '../types';
+import { getLinkEmblem } from './getLinkEmblem';
+
+export function mapInnerLinksToListItems(items: InnerLink[]): BaseItemProps[] {
+  return items.map(link => ({
+    id: link.id,
+    content: {
+      label: link.label,
+    },
+    beforeContent: getLinkEmblem(link),
+    onClick: link.onClick,
+    href: link.href,
+    disabled: link.disabled,
+  }));
+}

package/src/components/MainMenu/utils/mapOrderedFavoriteIdsToLinks.ts

@@ -0,0 +1,13 @@
+import { InnerLink } from '../types';
+
+export function mapOrderedFavoriteIdsToLinks(
+  orderedIds: string[],
+  currentFavorites: InnerLink[],
+  catalog: Map<string, InnerLink>,
+): InnerLink[] {
+  const currentById = new Map(currentFavorites.map(service => [service.id, service]));
+
+  return orderedIds
+    .map(id => currentById.get(id) ?? catalog.get(id))
+    .filter((service): service is InnerLink => Boolean(service));
+}

package/src/components/MainMenu/utils/pinGroupToBottom.ts

@@ -0,0 +1,17 @@
+import { LinksGroup } from '../types';
+
+export function pinGroupToBottom(groups: LinksGroup[], adminGroupIds: string | string[]): LinksGroup[] {
+  const ids = Array.isArray(adminGroupIds) ? adminGroupIds : [adminGroupIds];
+
+  if (ids.length === 0) {
+    return groups;
+  }
+
+  const adminIdSet = new Set(ids);
+  const adminGroups = ids
+    .map(id => groups.find(group => group.id === id))
+    .filter((group): group is LinksGroup => Boolean(group));
+  const otherGroups = groups.filter(group => !adminIdSet.has(group.id));
+
+  return [...otherGroups, ...adminGroups];
+}

package/src/components/MainMenu/utils/resolveGroupBlockColor.ts

@@ -0,0 +1,14 @@
+import { LinksGroupBlockColor } from '../types';
+
+/**
+ * Резолвит цвет блока группы с учётом глобального переключателя `showGroupsColors`.
+ *
+ * `showGroupsColors === false` скрывает цвета всех групп — возвращает `undefined`,
+ * что даёт `SortableGroup` дефолт `'neutral'`.
+ */
+export function resolveGroupBlockColor(
+  blockColor: LinksGroupBlockColor | undefined,
+  showGroupsColors: boolean | undefined,
+): LinksGroupBlockColor | undefined {
+  return showGroupsColors === false ? undefined : blockColor;
+}

package/src/components/MainMenu/utils/resolveInnerLinksByIds.ts

@@ -0,0 +1,12 @@
+import { InnerLink, LinksGroup } from '../types';
+import { flatLinksGroups } from './flatLinksGroups';
+
+export function resolveInnerLinksByIds(ids: string[], groups: LinksGroup[]): InnerLink[] {
+  if (!ids.length) {
+    return [];
+  }
+
+  const itemsById = new Map(flatLinksGroups(groups).map(item => [item.id, item]));
+
+  return ids.map(id => itemsById.get(id)).filter((item): item is InnerLink => Boolean(item));
+}

package/src/components/MainMenu/utils/search.ts

@@ -0,0 +1,32 @@
+import { enToRuMap, ruToEnMap } from '../constants';
+
+function convertLayout(text: string, direction: 'en-ru' | 'ru-en' = 'en-ru') {
+  const map = direction === 'en-ru' ? enToRuMap : ruToEnMap;
+
+  return text
+    .split('')
+    .map(ch => map[ch] ?? ch)
+    .join('');
+}
+
+function isCyrillic(text: string): boolean {
+  return /[а-яё]/i.test(text);
+}
+
+function isLatin(text: string): boolean {
+  return /[a-z]/i.test(text);
+}
+
+export function toggleLayout(text: string): string {
+  const lowercaseValue = text.toLowerCase();
+
+  if (isCyrillic(lowercaseValue)) {
+    return convertLayout(lowercaseValue, 'ru-en');
+  }
+
+  if (isLatin(lowercaseValue)) {
+    return convertLayout(lowercaseValue, 'en-ru');
+  }
+
+  return text;
+}

package/src/components/PathBreadcrumbs/PathBreadcrumbs.tsx

@@ -0,0 +1,21 @@
+import { Breadcrumbs, BreadcrumbsProps } from '@cloud-ru/ds-breadcrumbs';
+
+import styles from './styles.module.scss';
+
+type PathBreadcrumbsProps = {
+  items: BreadcrumbsProps['items'];
+  isMobile?: boolean;
+};
+
+export function PathBreadcrumbs({ isMobile, items }: PathBreadcrumbsProps) {
+  return (
+    <Breadcrumbs
+      items={items}
+      className={styles.breadcrumbs}
+      inactiveLastItem={items.length > 1}
+      separator='/'
+      size={isMobile ? 'xs' : 's'}
+      data-test-id='header__breadcrumbs'
+    />
+  );
+}

package/src/components/PathBreadcrumbs/index.ts

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

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

@@ -0,0 +1,7 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.breadcrumbs {
+  min-width: 0;
+  /* stylelint-disable-next-line declaration-no-important */
+  padding: 0 base.$sn-primitive-dimension-8 !important;
+}

package/src/components/PlatformLogo/Container.tsx

@@ -0,0 +1,31 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { JSXElementConstructor, PropsWithChildren } from 'react';
+
+import styled from './styles.module.scss';
+
+export type ContainerProps = PropsWithChildren<
+  WithSupportProps<{
+    className?: string;
+  }>
+>;
+
+export function Container({ children, ...otherProps }: ContainerProps) {
+  return (
+    <div className={styled.container} {...otherProps}>
+      {children}
+    </div>
+  );
+}
+
+export type IconComponentProps = {
+  className?: string;
+};
+
+export const getPlatformIconComponent = (Icon: JSXElementConstructor<{ size: number }>) =>
+  function IconComponent(props: IconComponentProps) {
+    return (
+      <Container {...props}>
+        <Icon size={24} />
+      </Container>
+    );
+  };

package/src/components/PlatformLogo/index.ts

@@ -0,0 +1,17 @@
+import {
+  AdvancedSVG,
+  EvolutionSVG,
+  MarketplaceSVG,
+  MlSpaceSVG,
+  PartnerAccountSVG,
+  VmwareSVG,
+} from '@cloud-ru/ds-icons/services';
+
+import { getPlatformIconComponent } from './Container';
+
+export const AdvancedPlatformLogo = getPlatformIconComponent(AdvancedSVG);
+export const EnterprisePlatformLogo = getPlatformIconComponent(VmwareSVG);
+export const EvolutionPlatformLogo = getPlatformIconComponent(EvolutionSVG);
+export const MLSpacePlatformLogo = getPlatformIconComponent(MlSpaceSVG);
+export const PartnerPlatformLogo = getPlatformIconComponent(PartnerAccountSVG);
+export const MarketplacePlatformLogo = getPlatformIconComponent(MarketplaceSVG);

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

@@ -0,0 +1,13 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: base.$sn-primitive-dimension-24;
+  height: base.$sn-primitive-dimension-24;
+  border-radius: base.$sn-density-radius-2xs;
+
+  background: base.$sn-theme-color-neutral-decor;
+}

package/src/components/UserMenu/UserMenu.tsx

@@ -0,0 +1,106 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { Avatar } from '@cloud-ru/ds-avatar';
+import { BaseItemProps, Droplist, ListProps } from '@cloud-ru/ds-list';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { useMemo } from 'react';
+
+import { headerLocale } from '../../locale';
+import { HeaderButton } from '../HeaderButton';
+import { useUserMenuItems } from './hooks/useUserMenuItems';
+import styles from './styles.module.scss';
+import { ThemeProps, UserProfileProps } from './types';
+
+export type UserMenuProps = {
+  profile?: UserProfileProps;
+
+  theme?: ThemeProps;
+
+  items?: ListProps['items'];
+
+  settingItems?: BaseItemProps[];
+
+  onLogout?(): void;
+
+  open?: boolean;
+  setOpen?(open: boolean): void;
+  triggerTooltip?: string;
+
+  onClick?(): void;
+};
+
+export function UserMenu({
+  profile = {},
+  open: openProp,
+  setOpen: setOpenProp,
+  onLogout,
+  items,
+  settingItems,
+  theme,
+  onClick,
+  triggerTooltip,
+}: UserMenuProps) {
+  const { t } = headerLocale.useTranslations();
+  const { layoutType } = useAdaptiveLayout();
+  const isMobile = isMobileLayout(layoutType);
+
+  const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: setOpenProp });
+
+  const { fullName = '', inviteCount } = profile;
+
+  const userMenuItems = useUserMenuItems({
+    isMobile,
+    profile,
+    theme,
+    items,
+    settingItems,
+    onClose: () => {
+      setOpen(false);
+    },
+    onLogout,
+  });
+
+  const trigger = useMemo(
+    () => (
+      <HeaderButton
+        tooltip={{ tip: triggerTooltip }}
+        isMobile={isMobile}
+        onClick={() => {
+          setOpen?.(true);
+          onClick?.();
+        }}
+        counter={
+          Number(inviteCount)
+            ? {
+                value: Number(inviteCount),
+              }
+            : undefined
+        }
+        data-test-id='header__user-menu__button'
+        icon={<Avatar appearance='red' size='s' name={fullName} showTwoSymbols />}
+        data-pressed={open}
+      />
+    ),
+    [fullName, inviteCount, onClick, open, setOpen, isMobile, triggerTooltip],
+  );
+
+  return (
+    <Droplist
+      open={open}
+      onOpenChange={setOpen}
+      size='m'
+      items={userMenuItems}
+      selection={{
+        mode: 'single',
+        value: 'null',
+      }}
+      trigger='click'
+      placement='bottom-end'
+      className={styles.userMenuDroplist}
+      closeOnPopstate
+      data-test-id='header__user-menu'
+      label={t('user')}
+    >
+      {trigger}
+    </Droplist>
+  );
+}

package/src/components/UserMenu/hooks/useLogoutItem.tsx

@@ -0,0 +1,23 @@
+import { ExitSVG } from '@cloud-ru/ds-icons/interface/product';
+import { ListProps } from '@cloud-ru/ds-list';
+import { useMemo } from 'react';
+
+import { headerLocale } from '../../../locale';
+
+export function useLogoutItem({ onLogout }: { onLogout?(): void }): ListProps['items'] {
+  const { t } = headerLocale.useTranslations();
+
+  return useMemo<ListProps['items']>(
+    () => [
+      {
+        beforeContent: <ExitSVG />,
+        content: {
+          label: t('logout'),
+        },
+        onClick: onLogout,
+        'data-test-id': 'header__user-menu__logout',
+      },
+    ],
+    [onLogout, t],
+  );
+}