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

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@cloud-ru/ds-uikit-product-header",
+  "version": "1.0.1-preview-7665e9c3.0",
+  "description": "Продуктовая шапка консоли — HeaderLayout, MainMenu, UserMenu, Logo, PathBreadcrumbs и PlatformLogo.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloud-ru-tech/snack-v2.git",
+    "directory": "packages/uikit-product-header"
+  },
+  "homepage": "https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/uikit-product-header",
+  "license": "Apache-2.0",
+  "author": "Aleksei Belov <anbelov@cloud.ru>",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./locale": {
+      "source": "./src/locale/index.ts",
+      "types": "./dist/esm/locale/index.d.ts",
+      "import": "./dist/esm/locale/index.js",
+      "require": "./dist/cjs/locale/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "classnames": "^2.5.1",
+    "fuse.js": "^7.1.0",
+    "@cloud-ru/ds-avatar": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-accordion": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-breadcrumbs": "1.0.2-preview-7665e9c3.0",
+    "@cloud-ru/ds-adaptive": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-skeleton": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-button": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-divider": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-drag-and-drop": "1.1.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-drawer": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-icons": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-info-block": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-list": "1.1.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-modal": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-locale": "1.0.0",
+    "@cloud-ru/ds-promo-tag": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-scroll": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-segment-control": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-search": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-theme": "1.0.0",
+    "@cloud-ru/ds-tooltip": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-typography": "1.0.0",
+    "@cloud-ru/ds-uikit-product-switch-row": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-uikit-product-title-clickable": "1.0.1-preview-7665e9c3.0",
+    "@cloud-ru/ds-uikit-product-card-predefined": "1.0.2-preview-7665e9c3.0",
+    "@cloud-ru/ds-utils": "1.0.1-preview-7665e9c3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/HeaderButton/HeaderButton.tsx

@@ -0,0 +1,57 @@
+import { Button, ButtonProps } from '@cloud-ru/ds-button';
+import { useThemeClassnames } from '@cloud-ru/ds-theme';
+import { TooltipProps, WithTooltip } from '@cloud-ru/ds-tooltip';
+import cn from 'classnames';
+import { ElementType } from 'react';
+
+import styles from './styles.module.scss';
+
+export type HeaderButtonProps<T extends ElementType = 'button'> = Omit<
+  ButtonProps<T>,
+  'size' | 'appearance' | 'view'
+> & {
+  /** Настройки тултипа. `placement` и `disableSpanWrapper` зафиксированы под анатомию хедера */
+  tooltip?: Omit<TooltipProps, 'placement'>;
+  isMobile?: boolean;
+};
+
+/**
+ * HeaderButton — кнопка хедера с тултипом (лого, пользовательское меню и т.п.).
+ * `size`, `appearance`, `view` кнопки и `placement`/`disableSpanWrapper` тултипа зафиксированы,
+ * остальное API `Button` и `Tooltip` передаётся как есть.
+ */
+export function HeaderButton<T extends ElementType = 'button'>({
+  tooltip,
+  isMobile,
+  className,
+  ...rest
+}: HeaderButtonProps<T>) {
+  const compactThemeClassName = useThemeClassnames({ density: 'compact' });
+
+  return (
+    // FIXME: typescript ломается, если не указать tip явно
+    //  пока не разбирался почему так
+    <WithTooltip
+      tooltip={
+        isMobile
+          ? undefined
+          : {
+              disableSpanWrapper: true,
+              hoverDelayOpen: 300,
+              tip: tooltip?.tip,
+              placement: 'bottom',
+              ...tooltip,
+              triggerClassName: styles.tooltipTrigger,
+            }
+      }
+    >
+      <Button<T>
+        {...(rest as ButtonProps<T>)}
+        size='m'
+        appearance='neutral'
+        view='simple'
+        className={cn(styles.headerButton, compactThemeClassName, className)}
+      />
+    </WithTooltip>
+  );
+}

package/src/components/HeaderButton/index.ts

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

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

@@ -0,0 +1,3 @@
+.tooltipTrigger {
+  display: inline-flex;
+}

package/src/components/HeaderLayout/HeaderLayout.tsx

@@ -0,0 +1,56 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { Divider } from '@cloud-ru/ds-divider';
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import styles from './styles.module.scss';
+
+export type HeaderLayoutProps = WithSupportProps<{
+  className?: string;
+  menu?: ReactNode;
+  logo?: ReactNode;
+  select?: ReactNode;
+  breadcrumbs?: ReactNode;
+  toolbar?: ReactNode;
+}>;
+
+export function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }: HeaderLayoutProps) {
+  const isMobile = isMobileLayout(useAdaptiveLayout().layoutType);
+
+  return (
+    <header className={cn(styles.header, className)} {...extractSupportProps(rest)}>
+      <div className={styles.top}>
+        <div className={styles.left}>
+          {logo && <>{logo}</>}
+
+          {menu && (
+            <>
+              <Divider orientation='vertical' />
+              {menu}
+            </>
+          )}
+
+          {!isMobile && select && (
+            <>
+              <Divider orientation='vertical' />
+              {select}
+            </>
+          )}
+
+          {!isMobile && breadcrumbs && (
+            <>
+              <Divider orientation='vertical' />
+              {breadcrumbs}
+            </>
+          )}
+        </div>
+
+        <div className={styles.right}>{toolbar}</div>
+      </div>
+      <Divider orientation='horizontal' />
+
+      {isMobile && Boolean(breadcrumbs) && <div className={styles.bottom}>{breadcrumbs}</div>}
+    </header>
+  );
+}

package/src/components/HeaderLayout/index.ts

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

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

@@ -0,0 +1,42 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.header {
+  box-sizing: border-box;
+  background-color: base.$sn-theme-color-neutral-background;
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  box-sizing: border-box;
+  height: base.$sn-primitive-dimension-40;
+  padding: 0 base.$sn-primitive-dimension-4;
+}
+
+.bottom {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  height: base.$sn-primitive-dimension-24;
+  border-bottom: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-neutral-decor;
+}
+
+.left {
+  display: flex;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+
+  min-width: 0;
+  height: 100%;
+}
+
+.right {
+  display: flex;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+  height: 100%;
+}

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,76 @@
+import { HomeFilledSVG } from '@cloud-ru/ds-icons/interface/product';
+import { CloudLogo } from '@cloud-ru/ds-icons/logos';
+import { PromoTag } from '@cloud-ru/ds-promo-tag';
+import { useThemeClassnames } from '@cloud-ru/ds-theme';
+import { TooltipProps } from '@cloud-ru/ds-tooltip';
+import { extractDataTestProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { MouseEventHandler, useEffect, useMemo, useState } from 'react';
+
+import { HeaderButton } from '../HeaderButton';
+import { HEADER_LOGO_MODE, HeaderLogoMode, MAP_LOGO_MODE_TO_APPEARANCE } from './constants';
+import styles from './styles.module.scss';
+
+export type LogoProps = WithSupportProps<{
+  loading?: boolean;
+  path?: string;
+  mode?: HeaderLogoMode;
+  href: string;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  className?: string;
+  tooltip?: TooltipProps;
+}>;
+
+export function Logo({ path, loading, mode, href, onClick, className, tooltip, ...rest }: LogoProps) {
+  const [error, setError] = useState<boolean>(false);
+  const brancCThemeClassName = useThemeClassnames({ brand: 'brandC' });
+
+  useEffect(() => {
+    setError(false);
+  }, [path, loading]);
+
+  const logo = useMemo(() => {
+    if (path && !error) {
+      return (
+        <img
+          src={path}
+          alt='logo'
+          className={styles.logoImg}
+          onLoad={() => {
+            setError(false);
+          }}
+          onError={() => {
+            setError(true);
+          }}
+        />
+      );
+    }
+
+    return (
+      <span className={styles.logoWrap}>
+        <span className={styles.iconStack}>
+          <CloudLogo size={24} className={cn(styles.icon, brancCThemeClassName, styles.iconDefault)} />
+          <HomeFilledSVG size={24} className={cn(styles.icon, brancCThemeClassName, styles.iconHover)} />
+        </span>
+
+        {mode && mode !== HEADER_LOGO_MODE.prod && (
+          <PromoTag as='span' label={mode} size='xs' appearance={MAP_LOGO_MODE_TO_APPEARANCE[mode]} />
+        )}
+      </span>
+    );
+  }, [error, mode, path, brancCThemeClassName]);
+
+  return (
+    <HeaderButton
+      as='a'
+      tooltip={tooltip}
+      className={cn(styles.logo, className)}
+      href={href}
+      tabIndex={0}
+      onClick={onClick}
+      loading={loading}
+      icon={logo}
+      {...extractDataTestProps(rest)}
+    />
+  );
+}

package/src/components/Logo/constants.ts

@@ -0,0 +1,17 @@
+import { PromoTagProps } from '@cloud-ru/ds-promo-tag';
+import { ValueOf } from '@cloud-ru/ds-utils';
+
+export const HEADER_LOGO_MODE = {
+  develop: 'develop',
+  stage: 'stage',
+  hybrid: 'hybrid',
+  prod: 'prod',
+} as const;
+
+export type HeaderLogoMode = ValueOf<typeof HEADER_LOGO_MODE>;
+
+export const MAP_LOGO_MODE_TO_APPEARANCE: Record<Exclude<HeaderLogoMode, 'prod'>, PromoTagProps['appearance']> = {
+  [HEADER_LOGO_MODE.develop]: 'blue',
+  [HEADER_LOGO_MODE.stage]: 'orange',
+  [HEADER_LOGO_MODE.hybrid]: 'violet',
+} as const;

package/src/components/Logo/index.ts

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

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

@@ -0,0 +1,64 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.logoImg {
+  width: auto;
+  min-height: base.$sn-primitive-dimension-24;
+  max-height: base.$sn-primitive-dimension-24;
+}
+
+.logoWrap {
+  display: flex;
+  gap: base.$sn-primitive-dimension-4;
+  align-items: center;
+}
+
+// Стек из двух иконок (бренд-логотип + hover-хинт «домой»), сложенных друг на друга.
+.iconStack {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+}
+
+.icon {
+  transform-origin: 50% center;
+  transform-box: fill-box;
+  color: base.$sn-theme-color-primary-accent;
+  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.iconDefault {
+  opacity: 1;
+}
+
+.iconHover {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+}
+
+.logo {
+  position: relative;
+  flex-shrink: 0;
+
+  &:active:not([data-disabled]) {
+    .iconDefault {
+      opacity: 0;
+    }
+
+    .iconHover {
+      opacity: 1;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      .iconDefault {
+        opacity: 0;
+      }
+
+      .iconHover {
+        opacity: 1;
+      }
+    }
+  }
+}

package/src/components/MainMenu/MainMenu.tsx

@@ -0,0 +1,84 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { MainMenuSVG } from '@cloud-ru/ds-icons/interface/product';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { useEffect } from 'react';
+
+import { headerLocale } from '../../locale';
+import { HeaderButton } from '../HeaderButton';
+import { MenuDesktop } from './helperComponents/MenuDesktop';
+import { MenuMobile } from './helperComponents/MenuMobile';
+import { MainMenuProps } from './types';
+
+export function MainMenu({
+  open: openProp,
+  setOpen: setOpenProp,
+  settingItems,
+  platformGroups,
+  logo,
+  leftTop,
+  rightTop,
+  segments,
+  segmentPrefs,
+  activeSegmentId,
+  onActiveSegmentChange,
+  onSegmentOrderChange,
+  onSegmentExpandedChange,
+  favorite,
+  search,
+  preferences,
+  disabled,
+  defaultWidth,
+  onWidthChangeEnd,
+  draggerTooltip,
+  loading,
+}: MainMenuProps) {
+  const { t } = headerLocale.useTranslations();
+
+  const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: setOpenProp });
+
+  useEffect(() => {
+    if (!openProp && search?.value) search?.onChange('');
+  }, [openProp, search]);
+
+  const isMobile = isMobileLayout(useAdaptiveLayout().layoutType);
+
+  const MenuComponent = isMobile ? MenuMobile : MenuDesktop;
+
+  return (
+    <>
+      <HeaderButton
+        tooltip={open ? undefined : { tip: t('services') }}
+        isMobile={isMobile}
+        disabled={disabled}
+        icon={<MainMenuSVG />}
+        onClick={() => {
+          setOpen(true);
+        }}
+        data-test-id='header__drawer-menu-button'
+      />
+
+      <MenuComponent
+        settingItems={settingItems}
+        segments={segments}
+        segmentPrefs={segmentPrefs}
+        activeSegmentId={activeSegmentId}
+        onActiveSegmentChange={onActiveSegmentChange}
+        onSegmentOrderChange={onSegmentOrderChange}
+        onSegmentExpandedChange={onSegmentExpandedChange}
+        platformGroups={platformGroups}
+        search={search}
+        logo={logo}
+        leftTop={leftTop}
+        rightTop={rightTop}
+        favorite={favorite}
+        open={open}
+        setOpen={setOpen}
+        preferences={preferences}
+        defaultWidth={defaultWidth}
+        onWidthChangeEnd={onWidthChangeEnd}
+        draggerTooltip={draggerTooltip}
+        loading={loading}
+      />
+    </>
+  );
+}

package/src/components/MainMenu/constants.ts

@@ -0,0 +1,24 @@
+export const FUZZY_SEARCH_THRESHOLD = 0.3;
+
+export enum SearchGroupsAccessor {
+  GroupId = 'id',
+  GroupLabelText = 'label.text',
+  GroupAliases = 'aliases',
+  ItemId = 'items.id',
+  ItemLabelText = 'items.label',
+  ItemAliases = 'items.aliases',
+  ItemNestedId = 'items.items.id',
+  ItemNestedLabelText = 'items.items.label',
+  ItemNestedAliases = 'items.items.aliases',
+}
+
+const enCharacters = "qwertyuiop[]asdfghjkl;'zxcvbnm,./`";
+const ruCharacters = 'йцукенгшщзхъфывапролджэячсмитьбю.ё';
+
+export const enToRuMap: Record<string, string> = {};
+export const ruToEnMap: Record<string, string> = {};
+
+for (let i = 0; i < enCharacters.length; i++) {
+  enToRuMap[enCharacters[i]] = ruCharacters[i];
+  ruToEnMap[ruCharacters[i]] = enCharacters[i];
+}

package/src/components/MainMenu/helperComponents/Banners/MenuBanner.tsx

@@ -0,0 +1,103 @@
+import { Button } from '@cloud-ru/ds-button';
+import { CrossSVG } from '@cloud-ru/ds-icons/interface/system';
+import { PromoTag, PromoTagProps, ROLE_APPEARANCE, SIZE } from '@cloud-ru/ds-promo-tag';
+import { useThemeClassnames } from '@cloud-ru/ds-theme';
+import { Typography } from '@cloud-ru/ds-typography';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { AnchorHTMLAttributes, MouseEventHandler, ReactElement, ReactNode, useCallback } from 'react';
+
+import { headerLocale } from '../../../../locale';
+import { MENU_BANNER_TEST_IDS } from './constants';
+import styles from './styles.module.scss';
+
+export type MenuBannerProps = WithSupportProps<
+  {
+    /** Заголовок баннера */
+    title: string;
+    /** Текст промо-тега рядом с заголовком */
+    promoTag?: Omit<PromoTagProps, 'data-test-id' | 'size' | 'role' | 'as'>;
+    /** Слот справа от заголовка и промо-тега */
+    afterTitle?: ReactNode;
+    /** Колбэк закрытия. При наличии отображается кнопка «Закрыть» на hover */
+    onClose?: MouseEventHandler<HTMLElement>;
+    /** CSS-класс корневого элемента */
+    className?: string;
+  } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title' | 'children'>
+>;
+
+export function MenuBanner({
+  title,
+  promoTag,
+  afterTitle,
+  onClose,
+  className,
+  href = '#',
+  target,
+  'data-test-id': dataTestId,
+  ...rest
+}: MenuBannerProps): ReactElement {
+  const { t } = headerLocale.useTranslations();
+  const compactThemeClassname = useThemeClassnames({ density: 'compact' });
+
+  const handleClose: MouseEventHandler<HTMLButtonElement> = useCallback(
+    e => {
+      e.preventDefault();
+      e.stopPropagation();
+      onClose?.(e);
+    },
+    [onClose],
+  );
+
+  return (
+    <a
+      href={href}
+      target={target}
+      rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+      className={cn(styles.root, className)}
+      data-test-id={dataTestId ?? MENU_BANNER_TEST_IDS.root}
+      {...rest}
+    >
+      <span className={styles.titleWrapper}>
+        <Typography
+          as='span'
+          variant='body'
+          size='m'
+          className={styles.title}
+          data-test-id={MENU_BANNER_TEST_IDS.title}
+        >
+          {title}
+        </Typography>
+
+        {promoTag && (
+          <PromoTag
+            {...promoTag}
+            as='span'
+            role={ROLE_APPEARANCE.Decor}
+            size={SIZE.Xs}
+            data-test-id={MENU_BANNER_TEST_IDS.promoTag}
+          />
+        )}
+      </span>
+
+      {afterTitle && (
+        <div className={styles.afterTitle} data-test-id={MENU_BANNER_TEST_IDS.afterTitle}>
+          {afterTitle}
+        </div>
+      )}
+
+      {onClose && (
+        <Button
+          className={cn(styles.closeButton, compactThemeClassname)}
+          view='elevated'
+          appearance='neutral'
+          size='s'
+          icon={<CrossSVG size={16} />}
+          onClick={handleClose}
+          aria-label={t('close')}
+          data-test-id={MENU_BANNER_TEST_IDS.close}
+        />
+      )}
+    </a>
+  );
+}

package/src/components/MainMenu/helperComponents/Banners/constants.ts

@@ -0,0 +1,7 @@
+export const MENU_BANNER_TEST_IDS = {
+  root: 'header__menu-banner',
+  title: 'header__menu-banner__title',
+  promoTag: 'header__menu-banner__promo-tag',
+  afterTitle: 'header__menu-banner__after-title',
+  close: 'header__menu-banner__close',
+} as const;

package/src/components/MainMenu/helperComponents/Banners/index.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './MenuBanner';