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

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

@@ -0,0 +1,33 @@
+import { Avatar } from '@cloud-ru/ds-avatar';
+import { SettingsSVG } from '@cloud-ru/ds-icons/interface/system';
+import { BaseItemProps } from '@cloud-ru/ds-list';
+import { useMemo } from 'react';
+
+import { UserProfileProps } from '../types';
+
+export function useProfileItem({
+  fullName = '',
+  email = '',
+  itemWrapRender,
+  onClick,
+}: UserProfileProps): BaseItemProps {
+  return useMemo(
+    () => ({
+      content: {
+        label: fullName,
+        description: email,
+        truncate: {
+          description: 1,
+        },
+      },
+      onClick,
+      beforeContent: <Avatar appearance='red' size='s' name={fullName} showTwoSymbols />,
+      afterContent: <SettingsSVG />,
+      itemWrapRender,
+
+      id: 'header__user-menu__button',
+      'data-test-id': 'header__user-menu__manage-profile',
+    }),
+    [email, fullName, itemWrapRender, onClick],
+  );
+}

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

@@ -0,0 +1,70 @@
+import { DaySVG, LaptopPhoneSVG, NightSVG, ThemeContrastSVG } from '@cloud-ru/ds-icons/interface/system';
+import { DroplistProps } from '@cloud-ru/ds-list';
+import { useCallback, useMemo } from 'react';
+
+import { headerLocale } from '../../../locale';
+import { THEME_MODE, ThemeMode, ThemeProps } from '../types';
+
+export function useThemeItem({
+  value: themeMode,
+  onChange,
+  isMobile,
+  onClose,
+}: ThemeProps & { isMobile?: boolean; onClose?(): void }): DroplistProps['items'][0] {
+  const { t } = headerLocale.useTranslations();
+
+  const handleClick = useCallback(
+    (themeMode: ThemeMode) => () => {
+      onChange?.(themeMode);
+      !isMobile && onClose?.();
+    },
+    [isMobile, onChange, onClose],
+  );
+
+  const themeModeOptions = useMemo(
+    () => [
+      {
+        beforeContent: <DaySVG />,
+        content: {
+          label: t('themeModeLight'),
+        },
+        onClick: handleClick(THEME_MODE.Light),
+        checked: themeMode === THEME_MODE.Light,
+        'data-test-id': 'header__user-menu__theme-mode__light-option',
+      },
+      {
+        beforeContent: <NightSVG />,
+        content: {
+          label: t('themeModeDark'),
+        },
+        checked: themeMode === THEME_MODE.Dark,
+        onClick: handleClick(THEME_MODE.Dark),
+        'data-test-id': 'header__user-menu__theme-mode__dark-option',
+      },
+      {
+        beforeContent: <LaptopPhoneSVG />,
+        content: {
+          label: 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],
+  );
+
+  return useMemo(
+    () => ({
+      type: 'next-list',
+      content: {
+        label: t('themeModeLabel'),
+      },
+      placement: 'left-start',
+      beforeContent: <ThemeContrastSVG />,
+      'data-test-id': 'header__user-menu__theme-mode',
+      items: themeModeOptions,
+    }),
+    [t, themeModeOptions],
+  );
+}

package/src/components/UserMenu/hooks/useUserMenuItems.ts

@@ -0,0 +1,77 @@
+import { BaseItemProps, GroupItemProps, isBaseItemProps, ListProps } from '@cloud-ru/ds-list';
+import { MouseEvent, useMemo } from 'react';
+
+import { shouldBeOpenedInNewTab } from '../../../utils/shouldBeOpenedInNewTab';
+import { ThemeProps, UserProfileProps } from '../types';
+import { useLogoutItem } from './useLogoutItem';
+import { useProfileItem } from './useProfileItem';
+import { useThemeItem } from './useThemeItem';
+
+type UseMenuItems = {
+  profile: UserProfileProps;
+
+  theme?: ThemeProps;
+
+  items?: ListProps['items'];
+
+  settingItems?: BaseItemProps[];
+
+  onLogout?(): void;
+
+  onClose?(): void;
+
+  isMobile?: boolean;
+};
+
+const DIVIDER_ITEM: GroupItemProps = {
+  type: 'group',
+  divider: true,
+  items: [],
+};
+
+export function useUserMenuItems({
+  profile,
+  theme,
+  onLogout,
+  items: itemsProp = [],
+  isMobile,
+  onClose,
+  settingItems = [],
+}: UseMenuItems) {
+  const profileItem = useProfileItem(profile);
+  const themeItem = useThemeItem({ ...(theme || {}), isMobile, onClose });
+  const logoutItem = useLogoutItem({ onLogout });
+
+  const items = useMemo(() => {
+    let items: ListProps['items'] = [profileItem];
+
+    if (themeItem) {
+      items = items.concat([DIVIDER_ITEM, themeItem]);
+    }
+
+    items = items.concat(itemsProp);
+    items = items.concat(logoutItem);
+
+    if (isMobile && Boolean(settingItems?.length)) {
+      items = items.concat([DIVIDER_ITEM, ...settingItems]);
+    }
+
+    return items.map(item => {
+      if (isBaseItemProps(item)) {
+        return {
+          ...item,
+          onClick: (e: MouseEvent<HTMLElement>) => {
+            item.onClick?.(e);
+
+            if (!shouldBeOpenedInNewTab(e)) {
+              onClose?.();
+            }
+          },
+        };
+      }
+      return item;
+    });
+  }, [isMobile, itemsProp, logoutItem, onClose, profileItem, settingItems, themeItem]);
+
+  return items;
+}

package/src/components/UserMenu/index.ts

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

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

@@ -0,0 +1,7 @@
+.userMenuDroplist {
+  width: 272px;
+}
+
+.userMenuTrigger {
+  display: block;
+}

package/src/components/UserMenu/types.ts

@@ -0,0 +1,24 @@
+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 const THEME_MODE = {
+  Light: 'light',
+  Dark: 'dark',
+  System: 'system',
+} as const;
+
+export type ThemeMode = ValueOf<typeof THEME_MODE>;
+
+export type ThemeProps = {
+  value?: ThemeMode;
+  onChange?(themeMode: ThemeMode): void;
+};

package/src/components/index.ts

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

package/src/constants.ts

@@ -0,0 +1,20 @@
+export const TEST_IDS = {
+  headerLayout: {
+    root: 'header-layout',
+  },
+  mainMenu: {
+    root: 'header',
+    drawerButton: 'header__drawer-menu-button',
+    drawer: 'header__drawer-menu',
+    drawerMobile: 'header__drawer-menu-mobile',
+    search: 'header__drawer-menu__search',
+  },
+  userMenu: {
+    root: 'header__user-menu',
+    button: 'header__user-menu__button',
+    mobile: 'header__user-menu-mobile',
+  },
+  breadcrumbs: {
+    root: 'header__breadcrumbs',
+  },
+} as const;

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './constants';
+export * from './locale';
+export { useLocalStorage } from '@cloud-ru/ds-utils';

package/src/locale/index.ts

@@ -0,0 +1,64 @@
+import { defineLocale, defineMessages } from '@cloud-ru/ds-locale';
+
+const HEADER_MESSAGES = defineMessages({
+  'en-GB': {
+    searchByServices: 'Search by services and their sections',
+    services: 'Services',
+    user: 'User',
+    logout: 'Log out',
+    noData: 'No data',
+    noDataFound: 'Nothing found',
+    dragGroup: 'Drag group',
+    themeModeLabel: 'Theme',
+    themeModeLight: 'Light',
+    themeModeDark: 'Dark',
+    themeModeSystem: 'System',
+    contentExpandAllGroups: 'Expand all groups',
+    contentCollapseAllGroups: 'Collapse all groups',
+    favorite: {
+      title: 'Favorites',
+      emptyDesktop: 'Drag service cards here from the panel on the right',
+      emptyMobile: 'Click the star on the service card to add it here',
+    },
+    recent: {
+      title: 'Recent',
+      empty: 'Services you have recently opened will appear here',
+    },
+    close: 'Close',
+    menuSettingsTitle: 'Menu settings',
+    menuSettingsShowGroupsColors: 'Show category colors',
+    menuSettingsShowDescription: 'Show service descriptions',
+  },
+  'ru-RU': {
+    searchByServices: 'Поиск по сервисам и их разделам',
+    services: 'Сервисы',
+    user: 'Пользователь',
+    logout: 'Выйти',
+    noData: 'Нет данных',
+    noDataFound: 'Ничего не найдено',
+    dragGroup: 'Перетащить группу',
+    themeModeLabel: 'Тема',
+    themeModeLight: 'Светлая',
+    themeModeDark: 'Тёмная',
+    themeModeSystem: 'Системная',
+    contentExpandAllGroups: 'Развернуть все группы',
+    contentCollapseAllGroups: 'Свернуть все группы',
+    favorite: {
+      title: 'Избранное',
+      emptyDesktop: 'Перетащите сюда\nкарточки сервисов,\nрасположенные справа',
+      emptyMobile: 'Нажмите звездочку на карточке сервиса, чтобы добавить его сюда',
+    },
+    recent: {
+      title: 'Недавнее',
+      empty: 'Здесь появятся сервисы,\nкоторое вы недавно\nоткрывали',
+    },
+    close: 'Закрыть',
+    menuSettingsTitle: 'Настройки меню',
+    menuSettingsShowGroupsColors: 'Показывать цвета категорий',
+    menuSettingsShowDescription: 'Показывать описания сервисов',
+  },
+});
+
+export type HeaderMessages = (typeof HEADER_MESSAGES)['en-GB'];
+
+export const headerLocale = defineLocale('@cloud-ru/ds-uikit-product-header', HEADER_MESSAGES);

package/src/mobileOverlays.ts

@@ -0,0 +1,26 @@
+import { LAYOUT_TYPE, withLayoutType } from '@cloud-ru/ds-adaptive';
+import { DrawerCustom, DrawerCustomProps } from '@cloud-ru/ds-drawer';
+import { ModalCustom, ModalCustomProps } from '@cloud-ru/ds-modal';
+
+const MobileDrawerBase = withLayoutType(DrawerCustom, LAYOUT_TYPE.Mobile);
+const MobileModalBase = withLayoutType(ModalCustom, LAYOUT_TYPE.Mobile);
+
+/** Mobile-only drawer surface (bottom sheet). Форс раскладки через `withLayoutType`. */
+export const MobileDrawerCustom = Object.assign(MobileDrawerBase, {
+  Header: DrawerCustom.Header,
+  Body: DrawerCustom.Body,
+}) as typeof MobileDrawerBase & {
+  Header: typeof DrawerCustom.Header;
+  Body: typeof DrawerCustom.Body;
+};
+
+/** Mobile-only modal surface (bottom sheet). Форс раскладки через `withLayoutType`. */
+export const MobileModalCustom = Object.assign(MobileModalBase, {
+  Header: ModalCustom.Header,
+  Body: ModalCustom.Body,
+}) as typeof MobileModalBase & {
+  Header: typeof ModalCustom.Header;
+  Body: typeof ModalCustom.Body;
+};
+
+export type { DrawerCustomProps, ModalCustomProps };

package/src/utils/shouldBeOpenedInNewTab.ts

@@ -0,0 +1,5 @@
+import { MouseEvent } from 'react';
+
+export function shouldBeOpenedInNewTab(e?: MouseEvent<HTMLElement>): boolean {
+  return Boolean(e?.metaKey || e?.ctrlKey);
+}