@cloud-ru/uikit-product-header 5.0.17

package/src/components/UserMenu/UserMenu.tsx

@@ -0,0 +1,138 @@
+import { useMemo } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { MobileDrawerCustom } from '@cloud-ru/uikit-product-mobile-drawer';
+import { Avatar } from '@snack-uikit/avatar';
+import { ButtonFunction } from '@snack-uikit/button';
+import { BaseItemProps, Droplist, List, ListProps } from '@snack-uikit/list';
+import { Scroll } from '@snack-uikit/scroll';
+import { useValueControl } from '@snack-uikit/utils';
+
+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;
+
+  onClick?(): void;
+
+  isMobile?: boolean;
+};
+
+export function UserMenu({
+  profile = {},
+  open: openProp,
+  setOpen: setOpenProp,
+  onLogout,
+  items,
+  settingItems,
+  theme,
+  isMobile,
+  onClick,
+}: UserMenuProps) {
+  const { t } = useLocale('Header');
+
+  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(
+    () => (
+      <ButtonFunction
+        size='m'
+        onClick={() => {
+          setOpen?.(true);
+          onClick?.();
+        }}
+        counter={
+          Number(inviteCount)
+            ? {
+                value: Number(inviteCount),
+                appearance: 'primary',
+              }
+            : undefined
+        }
+        data-test-id='header__user-menu__button'
+        icon={<Avatar size='xs' name={fullName} showTwoSymbols />}
+      />
+    ),
+    [fullName, inviteCount, onClick, setOpen],
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        {trigger}
+
+        <MobileDrawerCustom
+          open={open}
+          onClose={() => {
+            setOpen(false);
+          }}
+          position='right'
+          swipeEnabled={false}
+          data-test-id='header__user-menu-mobile'
+          closeOnPopstate
+        >
+          <MobileDrawerCustom.Header title={t('user')} />
+          <Scroll barHideStrategy='never'>
+            <div className={styles.mobileList}>
+              <List
+                items={userMenuItems}
+                selection={{
+                  mode: 'single',
+                  value: 'null',
+                }}
+                size='m'
+              />
+            </div>
+          </Scroll>
+        </MobileDrawerCustom>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Droplist
+        items={userMenuItems}
+        selection={{
+          mode: 'single',
+          value: 'null',
+        }}
+        trigger='click'
+        placement='bottom-end'
+        className={styles.userMenuDroplist}
+        closeOnPopstate
+        closeDroplistOnItemClick
+        data-test-id='header__user-menu'
+      >
+        {trigger}
+      </Droplist>
+    </>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+
+import { ExitSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ListProps } from '@snack-uikit/list';
+
+type UseLogoutItemProps = {
+  onLogout?(): void;
+};
+
+export function useLogoutItem({ onLogout }: UseLogoutItemProps): ListProps['items'] {
+  const { t } = useLocale('Header');
+
+  return useMemo(
+    () => [
+      { type: 'group', divider: true, items: [] },
+      {
+        content: {
+          option: t('logout'),
+        },
+        beforeContent: <ExitSVG />,
+        onClick: onLogout,
+        'data-test-id': 'header__user-menu__logout',
+      },
+    ],
+    [onLogout, t],
+  );
+}

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

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+
+import { SettingsSVG } from '@cloud-ru/uikit-product-icons';
+import { Avatar } from '@snack-uikit/avatar';
+import { BaseItemProps } from '@snack-uikit/list';
+
+import styles from '../styles.module.scss';
+import { UserProfileProps } from '../types';
+
+export function useProfileItem({
+  fullName = '',
+  email = '',
+  itemWrapRender,
+  onClick,
+}: UserProfileProps): BaseItemProps {
+  return useMemo(
+    () => ({
+      content: {
+        option: fullName,
+        description: email,
+        truncate: {
+          description: 1,
+        },
+      },
+      onClick,
+      beforeContent: <Avatar size='xs' name={fullName} showTwoSymbols />,
+      afterContent: (
+        <div className={styles.settingIcon}>
+          <SettingsSVG />
+        </div>
+      ),
+      itemWrapRender,
+
+      id: 'header__user-menu__button',
+      'data-test-id': 'header__user-menu__manage-profile',
+
+      className: styles.userMenuInfoItem,
+    }),
+    [email, fullName, itemWrapRender, onClick],
+  );
+}

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

@@ -0,0 +1,116 @@
+import { ReactNode, useCallback, useMemo, useState } from 'react';
+
+import { ChevronRightSVG, DaySVG, LaptopPhoneSVG, NightSVG, ThemeContrastSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { MobileModalCustom } from '@cloud-ru/uikit-product-mobile-modal';
+import { DroplistProps, List } from '@snack-uikit/list';
+
+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 } = useLocale('Header');
+
+  const [open, setOpen] = useState(false);
+
+  const handleClick = useCallback(
+    (themeMode: ThemeMode) => () => {
+      onChange?.(themeMode);
+      !isMobile && onClose?.();
+    },
+    [isMobile, onChange, onClose],
+  );
+
+  const themeModeOptions = useMemo(
+    () => [
+      {
+        beforeContent: <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: <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: <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: <ThemeContrastSVG />,
+      'data-test-id': 'header__user-menu__theme-mode',
+      items: themeModeOptions,
+    }),
+    [t, themeModeOptions],
+  );
+
+  const mobileThemeItem = useMemo(
+    () => ({
+      id: 'header__user-menu__theme-mode',
+      beforeContent: <ThemeContrastSVG />,
+      'data-test-id': 'header__user-menu__theme-mode',
+      afterContent: (
+        <span
+          style={{
+            color: 'var(--sys-neutral-text-light)',
+          }}
+        >
+          <ChevronRightSVG />
+        </span>
+      ),
+      content: {
+        option: t('themeModeLabel'),
+      },
+      onClick: () => {
+        setOpen(true);
+      },
+      itemWrapRender: (node: ReactNode) => (
+        <>
+          {node}
+          <MobileModalCustom
+            open={open}
+            onClose={() => {
+              setOpen(false);
+            }}
+            closeButtonEnabled
+            closeOnPopstate
+          >
+            <MobileModalCustom.Header title={t('themeModeLabel')} />
+            <List items={themeModeOptions} size='l' selection={{ mode: 'single', value: themeMode }} />
+          </MobileModalCustom>
+        </>
+      ),
+    }),
+    [open, t, themeMode, themeModeOptions],
+  );
+
+  return isMobile ? mobileThemeItem : themeItem;
+}

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

@@ -0,0 +1,77 @@
+import { MouseEvent, useMemo } from 'react';
+
+import { BaseItemProps, GroupItemProps, isBaseItemProps, ListProps } from '@snack-uikit/list';
+
+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) && item.id !== 'header__user-menu__theme-mode') {
+        return {
+          ...item,
+          onClick: (e: MouseEvent<HTMLElement>) => {
+            item.onClick?.(e);
+
+            if (!e.metaKey) {
+              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,21 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
+
+.userMenuDroplist {
+  width: 272px;
+}
+
+.mobileList {
+  padding: 16px;
+  padding-top: 0;
+}
+
+.settingIcon {
+  color: ste.$sys-neutral-text-light;
+}
+
+.userMenuInfoItem {
+  [data-test-id='list__base-item-option'] {
+    // TODO: подумать как "нормально" прокидывать стили/типографику
+    @include ste.composite-var(ste.$sans-label-m);
+  }
+}

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,6 @@
+export * from './HeaderLayout';
+export * from './MainMenu';
+export * from './UserMenu';
+export * from './Logo';
+export * from './PathBreadcrumbs';
+export * from './PlatformLogo';

package/src/hooks/index.ts

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

package/src/hooks/useLocalStorage.ts

@@ -0,0 +1,15 @@
+import { useCallback, useState } from 'react';
+
+export function useLocalStorage<T extends string = string>(key: string, defaultValue: T): [T, (newValue: T) => void] {
+  const [value, setValueState] = useState((localStorage.getItem(key) as T) ?? defaultValue);
+
+  const setValue = useCallback(
+    (newValue: T) => {
+      localStorage.setItem(key, newValue);
+      setValueState(newValue);
+    },
+    [key],
+  );
+
+  return [value, setValue];
+}

package/src/index.ts

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