@cloud-ru/uikit-product-header 5.0.17

package/dist/esm/components/UserMenu/hooks/useThemeItem.d.ts

@@ -0,0 +1,6 @@
+import { DroplistProps } from '@snack-uikit/list';
+import { ThemeProps } from '../types';
+export declare function useThemeItem({ value: themeMode, onChange, isMobile, onClose, }: ThemeProps & {
+    isMobile?: boolean;
+    onClose?(): void;
+}): DroplistProps['items'][0];

package/dist/esm/components/UserMenu/hooks/useThemeItem.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { ChevronRightSVG, DaySVG, LaptopPhoneSVG, NightSVG, ThemeContrastSVG } from '@sbercloud/uikit-product-icons';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileModalCustom } from '@sbercloud/uikit-product-mobile-modal';
+import { List } from '@snack-uikit/list';
+import { THEME_MODE } from '../types';
+export function useThemeItem({ value: themeMode, onChange, isMobile, onClose, }) {
+    const { t } = useLocale('Header');
+    const [open, setOpen] = useState(false);
+    const handleClick = useCallback((themeMode) => () => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(themeMode);
+        !isMobile && (onClose === null || onClose === void 0 ? void 0 : onClose());
+    }, [isMobile, onChange, onClose]);
+    const themeModeOptions = useMemo(() => [
+        {
+            beforeContent: _jsx(DaySVG, {}),
+            content: {
+                option: t('themeModeLight'),
+            },
+            onClick: handleClick(THEME_MODE.Light),
+            checked: themeMode === THEME_MODE.Light,
+            'data-test-id': 'header__user-menu__theme-mode__light-option',
+        },
+        {
+            beforeContent: _jsx(NightSVG, {}),
+            content: {
+                option: t('themeModeDark'),
+            },
+            checked: themeMode === THEME_MODE.Dark,
+            onClick: handleClick(THEME_MODE.Dark),
+            'data-test-id': 'header__user-menu__theme-mode__dark-option',
+        },
+        {
+            beforeContent: _jsx(LaptopPhoneSVG, {}),
+            content: {
+                option: t('themeModeSystem'),
+            },
+            checked: themeMode === THEME_MODE.System,
+            onClick: handleClick(THEME_MODE.System),
+            'data-test-id': 'header__user-menu__theme-mode__system-option',
+        },
+    ], [handleClick, t, themeMode]);
+    const themeItem = useMemo(() => ({
+        type: 'next-list',
+        content: {
+            option: t('themeModeLabel'),
+        },
+        placement: 'left-start',
+        beforeContent: _jsx(ThemeContrastSVG, {}),
+        'data-test-id': 'header__user-menu__theme-mode',
+        items: themeModeOptions,
+    }), [t, themeModeOptions]);
+    const mobileThemeItem = useMemo(() => ({
+        id: 'header__user-menu__theme-mode',
+        beforeContent: _jsx(ThemeContrastSVG, {}),
+        'data-test-id': 'header__user-menu__theme-mode',
+        afterContent: (_jsx("span", { style: {
+                color: 'var(--sys-neutral-text-light)',
+            }, children: _jsx(ChevronRightSVG, {}) })),
+        content: {
+            option: t('themeModeLabel'),
+        },
+        onClick: () => {
+            setOpen(true);
+        },
+        itemWrapRender: (node) => (_jsxs(_Fragment, { children: [node, _jsxs(MobileModalCustom, { open: open, onClose: () => {
+                        setOpen(false);
+                    }, closeButtonEnabled: true, closeOnPopstate: true, children: [_jsx(MobileModalCustom.Header, { title: t('themeModeLabel') }), _jsx(List, { items: themeModeOptions, size: 'l', selection: { mode: 'single', value: themeMode } })] })] })),
+    }), [open, t, themeMode, themeModeOptions]);
+    return isMobile ? mobileThemeItem : themeItem;
+}

package/dist/esm/components/UserMenu/hooks/useUserMenuItems.d.ts

@@ -0,0 +1,13 @@
+import { BaseItemProps, ListProps } from '@snack-uikit/list';
+import { ThemeProps, UserProfileProps } from '../types';
+type UseMenuItems = {
+    profile: UserProfileProps;
+    theme?: ThemeProps;
+    items?: ListProps['items'];
+    settingItems?: BaseItemProps[];
+    onLogout?(): void;
+    onClose?(): void;
+    isMobile?: boolean;
+};
+export declare function useUserMenuItems({ profile, theme, onLogout, items: itemsProp, isMobile, onClose, settingItems, }: UseMenuItems): import("@snack-uikit/list/dist/esm/components/Items").Item[];
+export {};

package/dist/esm/components/UserMenu/hooks/useUserMenuItems.js

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import { isBaseItemProps } from '@snack-uikit/list';
+import { useLogoutItem } from './useLogoutItem';
+import { useProfileItem } from './useProfileItem';
+import { useThemeItem } from './useThemeItem';
+const DIVIDER_ITEM = {
+    type: 'group',
+    divider: true,
+    items: [],
+};
+export function useUserMenuItems({ profile, theme, onLogout, items: itemsProp = [], isMobile, onClose, settingItems = [], }) {
+    const profileItem = useProfileItem(profile);
+    const themeItem = useThemeItem(Object.assign(Object.assign({}, (theme || {})), { isMobile, onClose }));
+    const logoutItem = useLogoutItem({ onLogout });
+    const items = useMemo(() => {
+        let items = [profileItem];
+        if (themeItem) {
+            items = items.concat([DIVIDER_ITEM, themeItem]);
+        }
+        items = items.concat(itemsProp);
+        items = items.concat(logoutItem);
+        if (isMobile && Boolean(settingItems === null || settingItems === void 0 ? void 0 : settingItems.length)) {
+            items = items.concat([DIVIDER_ITEM, ...settingItems]);
+        }
+        return items.map(item => {
+            if (isBaseItemProps(item) && item.id !== 'header__user-menu__theme-mode') {
+                return Object.assign(Object.assign({}, item), { onClick: (e) => {
+                        var _a;
+                        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+                        if (!e.metaKey) {
+                            onClose === null || onClose === void 0 ? void 0 : onClose();
+                        }
+                    } });
+            }
+            return item;
+        });
+    }, [isMobile, itemsProp, logoutItem, onClose, profileItem, settingItems, themeItem]);
+    return items;
+}

package/dist/esm/components/UserMenu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './UserMenu';
+export * from './types';

package/dist/esm/components/UserMenu/index.js

@@ -0,0 +1,2 @@
+export * from './UserMenu';
+export * from './types';

package/dist/esm/components/UserMenu/styles.module.css

@@ -0,0 +1,21 @@
+.userMenuDroplist{
+  width:272px;
+}
+
+.mobileList{
+  padding:16px;
+  padding-top:0;
+}
+
+.settingIcon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+
+.userMenuInfoItem [data-test-id=list__base-item-option]{
+  font-family:var(--sans-label-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-m-font-weight, Semibold);
+  line-height:var(--sans-label-m-line-height, 16px);
+  font-size:var(--sans-label-m-font-size, 12px);
+  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
+}

package/dist/esm/components/UserMenu/types.d.ts

@@ -0,0 +1,20 @@
+import { MouseEvent, ReactNode } from 'react';
+export type UserProfileProps = {
+    fullName?: string;
+    email?: string;
+    inviteCount?: number;
+    onClick?(e: MouseEvent<HTMLElement>): void;
+    itemWrapRender?(node: ReactNode): ReactNode;
+};
+type ValueOf<T> = T[keyof T];
+export declare const THEME_MODE: {
+    readonly Light: "light";
+    readonly Dark: "dark";
+    readonly System: "system";
+};
+export type ThemeMode = ValueOf<typeof THEME_MODE>;
+export type ThemeProps = {
+    value?: ThemeMode;
+    onChange?(themeMode: ThemeMode): void;
+};
+export {};

package/dist/esm/components/UserMenu/types.js

@@ -0,0 +1,5 @@
+export const THEME_MODE = {
+    Light: 'light',
+    Dark: 'dark',
+    System: 'system',
+};

package/dist/esm/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './HeaderLayout';
+export * from './MainMenu';
+export * from './UserMenu';
+export * from './Logo';
+export * from './PathBreadcrumbs';
+export * from './PlatformLogo';

package/dist/esm/components/index.js

@@ -0,0 +1,6 @@
+export * from './HeaderLayout';
+export * from './MainMenu';
+export * from './UserMenu';
+export * from './Logo';
+export * from './PathBreadcrumbs';
+export * from './PlatformLogo';

package/dist/esm/hooks/index.d.ts

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

package/dist/esm/hooks/index.js

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

package/dist/esm/hooks/useLocalStorage.d.ts

@@ -0,0 +1 @@
+export declare function useLocalStorage<T extends string = string>(key: string, defaultValue: T): [T, (newValue: T) => void];

package/dist/esm/hooks/useLocalStorage.js

@@ -0,0 +1,10 @@
+import { useCallback, useState } from 'react';
+export function useLocalStorage(key, defaultValue) {
+    var _a;
+    const [value, setValueState] = useState((_a = localStorage.getItem(key)) !== null && _a !== void 0 ? _a : defaultValue);
+    const setValue = useCallback((newValue) => {
+        localStorage.setItem(key, newValue);
+        setValueState(newValue);
+    }, [key]);
+    return [value, setValue];
+}

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@cloud-ru/uikit-product-header",
+  "title": "Header",
+  "version": "5.0.17",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "Common header",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/cjs/index.js"
+  },
+  "files": [
+    "dist/esm",
+    "dist/cjs",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "homepage": "https://gitverse.ru/cloud-ru-tech/uikit-product/-/tree/master/packages/header",
+  "repository": {
+    "type": "git",
+    "url": "https://gitverse.ru/cloud-ru-tech/uikit-product.git",
+    "directory": "packages/header"
+  },
+  "author": {
+    "name": "Akhremenko Grigorii",
+    "url": "https://github.com/AGrigorii"
+  },
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {},
+  "dependencies": {
+    "@cloud-ru/uikit-product-card-predefined": "0.8.12",
+    "@cloud-ru/uikit-product-icons": "15.1.1",
+    "@cloud-ru/uikit-product-mobile-drawer": "0.9.15",
+    "@cloud-ru/uikit-product-mobile-modal": "0.9.18",
+    "@cloud-ru/uikit-product-title-clickable": "0.0.48",
+    "@cloud-ru/uikit-product-utils": "7.0.0",
+    "@snack-uikit/avatar": "0.8.14",
+    "@snack-uikit/breadcrumbs": "0.11.22",
+    "@snack-uikit/button": "0.19.16",
+    "@snack-uikit/chips": "0.28.1",
+    "@snack-uikit/drawer": "0.13.4",
+    "@snack-uikit/list": "0.32.2",
+    "@snack-uikit/scroll": "0.10.5",
+    "@snack-uikit/search": "0.12.13",
+    "@snack-uikit/skeleton": "0.6.9",
+    "@snack-uikit/typography": "0.8.11",
+    "@snack-uikit/utils": "4.0.0",
+    "classnames": "2.5.1",
+    "fuse.js": "7.1.0",
+    "lodash.debounce": "4.0.8",
+    "react-transition-state": "2.1.3"
+  },
+  "devDependencies": {
+    "@types/lodash.debounce": "4.0.9"
+  },
+  "peerDependencies": {
+    "@cloud-ru/uikit-product-locale": "*"
+  },
+  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+}

package/src/components/HeaderLayout/HeaderLayout.tsx

@@ -0,0 +1,46 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+import styles from './styles.module.scss';
+
+export type HeaderLayoutProps = WithSupportProps<{
+  className?: string;
+  menu?: ReactNode;
+  logo?: ReactNode;
+  select?: ReactNode;
+  breadcrumbs?: ReactNode;
+  toolbar?: ReactNode;
+  isMobile?: boolean;
+}>;
+
+export function HeaderLayout({
+  menu,
+  logo,
+  select,
+  breadcrumbs,
+  toolbar,
+  className,
+  isMobile,
+  ...rest
+}: HeaderLayoutProps) {
+  return (
+    <header className={cn(styles.header, className)} {...extractSupportProps(rest)}>
+      <div className={styles.top}>
+        <div className={styles.left}>
+          {menu}
+
+          {logo}
+
+          {!isMobile && select}
+          {!isMobile && breadcrumbs}
+        </div>
+
+        <div className={styles.right}>{toolbar}</div>
+      </div>
+
+      {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,38 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
+
+.header {
+  box-sizing: border-box;
+
+  background-color: ste.$sys-neutral-background;
+}
+
+.top {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  padding: 0 ste.$dimension-1m 0 0;
+  height: ste.$dimension-6m;
+  gap: ste.$dimension-2m;
+  justify-content: space-between;
+  border-bottom: ste.$border-width-012m ste.$border-styles-solid ste.$sys-neutral-decor-default;
+}
+
+.bottom {
+  height: 32px;
+  box-sizing: border-box;
+  border-bottom: ste.$border-width-012m ste.$border-styles-solid ste.$sys-neutral-decor-default;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.left {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+}

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,93 @@
+import cn from 'classnames';
+import { MouseEventHandler, useEffect, useMemo, useState } from 'react';
+
+import { CloudLogoDevSVG, CloudLogoHybridSVG, CloudLogoStageSVG, CloudLogoSVG } from '@cloud-ru/uikit-product-icons';
+import { Skeleton } from '@snack-uikit/skeleton';
+import { extractDataTestProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export const HEADER_LOGO_MODE = {
+  develop: 'develop',
+  stage: 'stage',
+  hybrid: 'hybrid',
+  prod: 'prod',
+} as const;
+
+type ValueOf<T> = T[keyof T];
+
+export type HeaderLogoMode = ValueOf<typeof HEADER_LOGO_MODE>;
+
+export type LogoProps = WithSupportProps<{
+  loading?: boolean;
+
+  path?: string;
+
+  mode?: HeaderLogoMode;
+
+  href: string;
+
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+
+  className?: string;
+}>;
+
+export function Logo({ path, loading, mode, href, onClick, className, ...rest }: LogoProps) {
+  const [error, setError] = useState<boolean>(false);
+
+  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);
+          }}
+        />
+      );
+    }
+
+    if (mode === HEADER_LOGO_MODE.develop) {
+      return <CloudLogoDevSVG size={64} />;
+    }
+
+    if (mode === HEADER_LOGO_MODE.stage) {
+      return <CloudLogoStageSVG size={74} />;
+    }
+
+    if (mode === HEADER_LOGO_MODE.hybrid) {
+      return <CloudLogoHybridSVG size={78} />;
+    }
+
+    return <CloudLogoSVG size={24} />;
+  }, [error, mode, path]);
+
+  if (loading) {
+    return (
+      <div className={styles.skeletonWrapper}>
+        <Skeleton width={24} height={24} loading borderRadius={4} />
+      </div>
+    );
+  }
+
+  return (
+    <a
+      className={cn(styles.logo, className)}
+      href={href}
+      tabIndex={0}
+      onClick={onClick}
+      {...extractDataTestProps(rest)}
+    >
+      {logo}
+    </a>
+  );
+}

package/src/components/Logo/index.ts

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

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

@@ -0,0 +1,30 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
+
+a.logo {
+  display: flex;
+  flex-shrink: 0;
+  padding: ste.$dimension-1m;
+  cursor: pointer;
+  border-radius: ste.$dimension-050m;
+  min-width: 40px;
+  box-sizing: border-box;
+  max-height: 40px;
+  min-height: 40px;
+  align-items: center;
+
+  &:focus-visible {
+    @include ste.outline-var(ste.$container-focused-s);
+
+    outline-color: ste.$sys-available-complementary;
+  }
+}
+
+.skeletonWrapper {
+  padding: ste.$dimension-1m;
+}
+
+.logoImg {
+  width: auto;
+  max-height: 24px;
+  min-height: 24px;
+}

package/src/components/MainMenu/Content/Content.tsx

@@ -0,0 +1,137 @@
+import { MouseEvent, ReactElement, ReactNode, useCallback, useMemo } from 'react';
+
+import { CardServiceSmall } from '@cloud-ru/uikit-product-card-predefined';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { TitleClickable } from '@cloud-ru/uikit-product-title-clickable';
+
+import { LinksGroup } from '../types';
+import styles from './styles.module.scss';
+
+export type ContentProps = {
+  searchValue?: string;
+
+  serviceGroups?: LinksGroup[];
+
+  search?: ReactNode;
+
+  banners?: ReactNode;
+
+  cards?: ReactElement[];
+
+  footer?: ReactNode;
+
+  favorite?: {
+    value: string[];
+    onChange: (productId: string) => (addingValue: boolean) => void;
+  };
+
+  isMobile?: boolean;
+
+  initialEmpty?: boolean;
+
+  className?: string;
+
+  onLinkChange?: (value: string) => void;
+
+  onClose?(): void;
+};
+
+export function Content({
+  searchValue,
+  banners,
+  search,
+  serviceGroups,
+  className,
+  footer,
+  favorite,
+  isMobile,
+  onClose,
+  onLinkChange,
+}: ContentProps) {
+  const { t } = useLocale('Header');
+
+  const wrappedClick = useCallback(
+    ({ disabled, onClick }: { disabled?: boolean; onClick?(e?: MouseEvent<HTMLElement>): void }, cb?: () => void) =>
+      (e?: MouseEvent<HTMLElement>) => {
+        if (disabled) {
+          e?.preventDefault();
+          return;
+        }
+
+        if (!e?.metaKey) {
+          e?.preventDefault();
+          onClose?.();
+        }
+
+        onClick?.(e);
+
+        cb?.();
+      },
+    [onClose],
+  );
+
+  const cards = useMemo(
+    () =>
+      serviceGroups?.map(({ id, label, items }) => (
+        <div key={String(id)} className={styles.card} id={id} data-test-id={`header__drawer-menu__group-card-${id}`}>
+          {!label.onClick ? (
+            <span className={styles.cardTitle}>{label.text}</span>
+          ) : (
+            <TitleClickable title={label.text} href='#' onClick={label.onClick} />
+          )}
+
+          <div className={styles.cardBody} data-mobile={isMobile || undefined}>
+            {items.map(service => (
+              <CardServiceSmall
+                key={String(id) + service.id}
+                title={service.label}
+                emblem={{ icon: service.icon }}
+                data-test-id={`header__drawer-menu__link-${service.id}`}
+                outline
+                href={service.href}
+                onClick={wrappedClick(service, () => onLinkChange?.(service.id))}
+                favorite={
+                  favorite
+                    ? {
+                        checked: favorite?.value.includes(service.id),
+                        onChange: favorite?.onChange(service.id),
+                        visibilityStrategy: isMobile ? 'always' : 'hover',
+                        enabled: !service.disabled,
+                      }
+                    : undefined
+                }
+                promoBadge={service.badge}
+              />
+            ))}
+          </div>
+        </div>
+      )),
+    [favorite, isMobile, onLinkChange, serviceGroups, wrappedClick],
+  );
+
+  return (
+    <>
+      {(Boolean(serviceGroups?.length) || searchValue) && search}
+
+      <div className={className}>
+        {!searchValue && banners}
+
+        {cards}
+
+        {!cards?.length && !searchValue && (
+          <div className={styles.noData} data-test-id='header__drawer-menu__no-data'>
+            {t('noData')}
+          </div>
+        )}
+
+        {!cards?.length && searchValue && (
+          <div className={styles.noData} data-test-id='header__drawer-menu__no-data-found'>
+            {t('noDataFound')}
+          </div>
+        )}
+
+        {footer}
+      </div>
+    </>
+  );
+}

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

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