@cloud-ru/uikit-product-header 5.0.17

package/src/components/MainMenu/Search/SearchMobile/styles.module.scss

@@ -0,0 +1,72 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
+
+.searchItem {
+  position: sticky;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 1;
+  top: -0.5px;
+  background-color: ste.$sys-neutral-background;
+
+  display: flex;
+  flex-direction: column;
+  gap: ste.$dimension-1m;
+
+  padding: 0;
+  padding-bottom: ste.$dimension-1m;
+  padding-top: 1px;
+  margin-top: 7px;
+}
+
+.searchWrap {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: ste.$sys-neutral-text-main;
+}
+
+.searchMobile {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+  right: 0;
+  overflow: hidden;
+
+  display: flex;
+  align-items: center;
+
+  transition-timing-function: ease-in-out;
+  transition-property: all;
+  transition-duration: calc(var(--sc-header-animation-enter) * 1ms);
+
+  width: 100%;
+  max-width: ste.$size-button-m;
+  box-sizing: border-box;
+
+  opacity: 0;
+
+  &[data-transition-status='entering'],
+  &[data-transition-status='entered'] {
+    max-width: 100%;
+    right: 0;
+    width: 100%;
+    opacity: 1;
+    transition-duration: calc(var(--sc-header-animation-exit) * 1ms);
+  }
+}
+
+.searchButton {
+  // TODO: почему-то сломался порядок стилей при интеграции компонента в сервис хедера
+  &[data-appearance='primary'] {
+    background-color: ste.$sys-neutral-background2-level;
+  }
+
+  &[data-search-active] {
+    visibility: hidden;
+  }
+}
+
+.searchModalBody {
+  padding: ste.$dimension-2m 0;
+}

package/src/components/MainMenu/Search/SearchSettingsButton/SearchSettingsButton.tsx

@@ -0,0 +1,22 @@
+import { ConfigurationSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonFunction } from '@snack-uikit/button';
+
+import styles from './styles.module.scss';
+
+export type SearchSettingsButtonProps = {
+  onClick(): void;
+};
+
+export function SearchSettingsButton({ onClick }: SearchSettingsButtonProps) {
+  return (
+    <div className={styles.searchSettings}>
+      <ButtonFunction
+        icon={<ConfigurationSVG />}
+        size='xs'
+        className={styles.searchSettingsButton}
+        onClick={onClick}
+        data-test-id='header__drawer-menu__search-config-button'
+      />
+    </div>
+  );
+}

package/src/components/MainMenu/Search/SearchSettingsButton/index.ts

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

package/src/components/MainMenu/Search/SearchSettingsButton/styles.module.scss

@@ -0,0 +1,13 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
+
+.searchSettings {
+  border-left: 1px solid ste.$sys-neutral-decor-default;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.searchSettingsButton {
+  margin-left: ste.$dimension-1m;
+}

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

@@ -0,0 +1,3 @@
+export * from './SearchDesktop';
+export * from './SearchMobile';
+export * from './types';

package/src/components/MainMenu/Search/types.ts

@@ -0,0 +1,20 @@
+import { LinksGroup } from '../types';
+
+export type SearchHandler = (searchValue: string, items: LinksGroup[]) => LinksGroup[] | undefined;
+export type SearchFunction = {
+  id: string;
+  label: string;
+  handler: SearchHandler;
+};
+
+export type SearchProps = {
+  searchValue: string;
+  // Колбек на измение значения в поиске
+  onSearchValueChange(value: string): void;
+  // Опции для чипов
+  searchFunctions: SearchFunction[];
+  // Колбек на смену функции
+  onChangeSearchFn(id: string): void;
+  // Выбранная функция (по id из searchFunctions)
+  searchFn?: string;
+};

package/src/components/MainMenu/Search/useSearch.tsx

@@ -0,0 +1,212 @@
+import Fuse from 'fuse.js';
+import { useMemo, useState } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+
+import { InnerLink, LinksGroup } from '../types';
+import { SearchFunction, SearchProps } from './types';
+
+export enum SearchGroupsAccessor {
+  GroupLabelText = 'label.text',
+  ItemLabelText = 'items.label',
+  ItemAliases = 'items.aliases',
+}
+
+function matchSearchString(value: string, search: string) {
+  return value.trim().toLowerCase().includes(search.trim().toLowerCase());
+}
+
+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 => {
+    group.items.forEach(item => {
+      item.aliases.forEach(alias => {
+        const key = prepareItemAccessorKey(group.id, alias);
+        itemsMap[key] = item;
+      });
+    });
+  });
+
+  return itemsMap;
+}
+
+const enCharacters = "qwertyuiop[]asdfghjkl;'zxcvbnm,./`";
+const ruCharacters = 'йцукенгшщзхъфывапролджэячсмитьбю.ё';
+
+const enToRuMap: Record<string, string> = {};
+const ruToEnMap: Record<string, string> = {};
+
+for (let i = 0; i < enCharacters.length; i++) {
+  enToRuMap[enCharacters[i]] = ruCharacters[i];
+  ruToEnMap[ruCharacters[i]] = enCharacters[i];
+}
+
+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;
+}
+
+export function useSearch(): SearchProps {
+  const [searchValue, onSearchValueChange] = useState<string>('');
+
+  const { t } = useLocale('Header');
+
+  const [searchFn, onChangeSearchFn] = useState<string>('fuzzy');
+
+  const searchFunctions: SearchFunction[] = useMemo(
+    () => [
+      {
+        id: 'fuzzy',
+        label: t('searchSettingsFuzzyChipLabel'),
+        handler: (searchValue, links) => {
+          if (!searchValue) {
+            return links;
+          }
+
+          const itemsMap = createItemsMap(links);
+          const linksFuse = new Fuse(links, {
+            keys: Object.values(SearchGroupsAccessor),
+            includeMatches: true,
+            threshold: 0.3,
+          });
+
+          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.find(match => match.key === SearchGroupsAccessor.GroupLabelText);
+            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: {
+                  const item = links[originalGroupIndex].items[match.refIndex];
+                  if (item && !itemsInnerMap[item.id]) {
+                    itemsInnerMap[item.id] = item;
+                    items.push(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 && !itemsInnerMap[item.id]) {
+                    itemsInnerMap[item.id] = item;
+                    items.push(item);
+                  }
+                  break;
+                }
+
+                case SearchGroupsAccessor.GroupLabelText:
+                default:
+                  return;
+              }
+            });
+
+            if (items.length > 0) {
+              accResult.push({
+                ...group,
+                items,
+              });
+            }
+
+            return accResult;
+          }, [] as LinksGroup[]);
+        },
+      },
+      {
+        id: 'precise',
+        label: t('searchSettingsPreciseChipLabel'),
+        handler: (searchValue, links) => {
+          if (!searchValue || links.length < 1) {
+            return links;
+          }
+
+          return links.reduce((result, group) => {
+            if (group.label && matchSearchString(group.label.text, searchValue)) {
+              result.push(group);
+              return result;
+            }
+
+            const items = group.items.filter(item => matchSearchString(item.label, searchValue));
+
+            if (items.length > 0) {
+              result.push({ ...group, items });
+              return result;
+            }
+
+            return result;
+          }, [] as LinksGroup[]);
+        },
+      },
+    ],
+    [t],
+  );
+
+  return {
+    searchValue,
+    onSearchValueChange,
+    searchFunctions,
+    onChangeSearchFn,
+    searchFn,
+  };
+}

package/src/components/MainMenu/hooks.tsx

@@ -0,0 +1,135 @@
+import debounce from 'lodash.debounce';
+import { useMemo, useRef } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { BaseItemProps } from '@snack-uikit/list';
+
+import { SearchHandler } from './Search/types';
+import styles from './styles.module.scss';
+import { InnerLink, LinksGroup, MainMenuProps } from './types';
+
+export function useHighlight(className: string) {
+  const element = useRef<HTMLElement>();
+
+  const highlight = useMemo(
+    () => {
+      const scheduleHighlight = debounce(() => {
+        element.current?.classList.add(className);
+        setTimeout(
+          () => {
+            element.current?.classList.remove(className);
+            element.current = undefined;
+          },
+          300,
+          { trailing: false },
+        );
+      }, 80);
+
+      return (elementToHighlight?: HTMLElement | null) => {
+        if (elementToHighlight) {
+          element.current = elementToHighlight;
+        }
+        scheduleHighlight();
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  return highlight;
+}
+
+type UseMenuItemsProps = Pick<MainMenuProps, 'favorite' | 'serviceGroups' | 'search'>;
+
+export function useMenuItems({ search, serviceGroups, favorite }: UseMenuItemsProps) {
+  const { t } = useLocale('Header');
+
+  const { searchValue = '', searchFn, searchFunctions, onSearchValueChange } = search || {};
+
+  const searchRef = useRef<HTMLInputElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const highlight = useHighlight(styles.highlight);
+
+  const groupWithFavorites = useMemo(() => {
+    if (!favorite || !favorite.value) {
+      return serviceGroups;
+    }
+
+    const flatMapItems = serviceGroups.flatMap(serviceGroup => serviceGroup.items);
+
+    const favoriteServices = favorite.value.reduce((acc, cur) => {
+      const item = flatMapItems.find(item => item.id === cur);
+      if (item) {
+        acc.push(item);
+      }
+      return acc;
+    }, [] as InnerLink[]);
+
+    return [
+      {
+        id: 'favorite',
+        label: {
+          text: t('favorite'),
+        },
+        items: favoriteServices,
+      } as LinksGroup,
+    ].concat(serviceGroups);
+  }, [favorite, serviceGroups, t]);
+
+  const groupItems: BaseItemProps[] = groupWithFavorites
+    .filter(group => group.items.length > 0)
+    .map(({ id, label: { text } }) => ({
+      id,
+      content: {
+        option: text,
+        truncate: {
+          option: 2,
+        },
+      },
+
+      onClick() {
+        onSearchValueChange?.('');
+
+        setTimeout(() => {
+          // TODO: remove or move
+          // eslint-disable-next-line @cloud-ru/ssr-safe-react/domApi
+          const element = document.getElementById(id);
+          if (!element) return;
+
+          scrollRef.current?.scrollTo({
+            left: 0,
+            top: element.offsetTop - (searchRef.current?.offsetHeight || 0),
+            behavior: 'smooth',
+          });
+
+          // Задержка approximately равна времени скроллинга
+          setTimeout(() => {
+            highlight(element);
+          }, 500);
+        }, 0);
+      },
+    }));
+
+  const searchFnMap = searchFunctions?.reduce(
+    (acc, cur) => {
+      acc[cur.id] = cur.handler;
+
+      return acc;
+    },
+    {} as Record<string, SearchHandler>,
+  );
+
+  const itemsWithoutEmptyGroups = groupWithFavorites.filter(group => group.items.length > 0);
+
+  const resultItems =
+    (searchFn ? searchFnMap?.[searchFn] : searchFunctions?.[0]?.handler)?.(searchValue, itemsWithoutEmptyGroups) ||
+    itemsWithoutEmptyGroups;
+
+  return {
+    resultItems,
+    groupItems,
+    searchRef,
+    scrollRef,
+  };
+}

package/src/components/MainMenu/index.ts

@@ -0,0 +1,4 @@
+export * from './MainMenu';
+export * from './types';
+export * from './Search/useSearch';
+export * from './Search/types';

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

@@ -0,0 +1,28 @@
+.highlight {
+  animation: shake-animation 300ms ease 1;
+  transform-origin: 100% 100%;
+}
+
+@keyframes shake-animation {
+  0% {
+    transform: translate(0, 0);
+  }
+  18% {
+    transform: translate(5px, 0);
+  }
+  35% {
+    transform: translate(0, 0);
+  }
+  53% {
+    transform: translate(5px, 0);
+  }
+  71% {
+    transform: translate(0, 0);
+  }
+  89% {
+    transform: translate(3px, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}

package/src/components/MainMenu/types.ts

@@ -0,0 +1,62 @@
+import { JSXElementConstructor, MouseEvent, MouseEventHandler, ReactNode } from 'react';
+
+import { CardServiceSmallProps } from '@cloud-ru/uikit-product-card-predefined';
+import { ListProps } from '@snack-uikit/list';
+
+import { SearchProps } from './Search/types';
+
+export type InnerLink = {
+  id: string;
+  icon: JSXElementConstructor<{
+    size?: number;
+    className?: string;
+  }>;
+  label: string;
+  onClick(e?: MouseEvent<HTMLElement>): void;
+  href?: string;
+  disabled?: boolean;
+  hidden?: boolean;
+  badge?: CardServiceSmallProps['promoBadge'];
+  aliases: string[];
+};
+
+type TitleStatic = {
+  text: string;
+  onClick?: never;
+};
+
+type TitleClickable = {
+  text: string;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+};
+
+export type LinksGroupTitle = TitleStatic | TitleClickable;
+
+export type LinksGroup = {
+  id: string;
+  label: LinksGroupTitle;
+  hidden?: boolean;
+  items: InnerLink[];
+};
+
+export type MainMenuProps = {
+  open?: boolean;
+  setOpen?(open: boolean): void;
+
+  leftTop?: ReactNode;
+  rightTop?: ReactNode;
+
+  settingItems: ListProps['items'];
+  serviceGroups: LinksGroup[];
+
+  onLinkChange?(value: string): void;
+
+  favorite?: {
+    value: string[];
+    onChange: (productId: string) => (addingValue: boolean) => void;
+  };
+
+  search?: SearchProps;
+
+  isMobile?: boolean;
+};

package/src/components/PathBreadcrumbs/PathBreadcrumbs.tsx

@@ -0,0 +1,21 @@
+import { Breadcrumbs, BreadcrumbsProps } from '@snack-uikit/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,10 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
+
+.breadcrumbs {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding: ste.$dimension-1m !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  margin: calc(0px - #{ste.$dimension-1m}) 0 !important;
+
+  min-width: 0;
+}

package/src/components/PlatformLogo/Container.tsx

@@ -0,0 +1,32 @@
+import { JSXElementConstructor, PropsWithChildren } from 'react';
+
+import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+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,8 @@
+import { AdvancedSVG, EvolutionSVG, MlSpaceSVG, VmwareSVG } from '@cloud-ru/uikit-product-icons';
+
+import { getPlatformIconComponent } from './Container';
+
+export const AdvancedPlatformLogo = getPlatformIconComponent(AdvancedSVG);
+export const EnterprisePlatformLogo = getPlatformIconComponent(VmwareSVG);
+export const EvolutionPlatformLogo = getPlatformIconComponent(EvolutionSVG);
+export const MLSpacePlatformLogo = getPlatformIconComponent(MlSpaceSVG);

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

@@ -0,0 +1,13 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.container {
+  width: 24px;
+  height: 24px;
+  color: var.$sys-primary-on-accent;
+  fill: var.$sys-primary-on-accent;
+  background-color: var.$sys-neutral-accent-default;
+  border-radius: var.$dimension-050m;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}