@cloud-ru/uikit-product-utils 7.0.0

package/src/hooks/index.ts

@@ -0,0 +1,13 @@
+export * from './useLanguage';
+export * from './useComponentSize';
+export * from './useTheme';
+export * from './useBrand';
+export * from './useForceUpdate';
+export * from './useForceUpdateOnPageLoadedCompletely';
+export * from './useEventHandler';
+export * from './useUniqueId';
+export * from './useConfig';
+export * from './useTextProvider';
+export * from './useAdaptive';
+export * from './useDisplayMode';
+export * from './useMatchMedia';

package/src/hooks/private/getCustomStore.ts

@@ -0,0 +1,19 @@
+import { DEFAULT } from '../../constants/environment';
+import { WindowStore } from '../../types';
+
+export function getCustomStore(
+  defaultStore: Partial<WindowStore['sbercloudUIKit']> = {},
+): WindowStore['sbercloudUIKit'] {
+  const customWindow: WindowStore = globalThis as WindowStore & { sbercloudUIKit: null };
+
+  if (!customWindow.sbercloudUIKit) {
+    customWindow.sbercloudUIKit = {
+      brand: DEFAULT.BRAND,
+      theme: DEFAULT.THEME,
+      languageCode: DEFAULT.LANGUAGE,
+      ...defaultStore,
+    };
+  }
+
+  return customWindow.sbercloudUIKit;
+}

package/src/hooks/useAdaptive.tsx

@@ -0,0 +1,8 @@
+import { LayoutType } from '../types/adaptive';
+import { getAdaptive } from '../utils';
+import { useAdaptiveMatchMedia } from './useMatchMedia';
+
+export function useAdaptive(): { layoutType: LayoutType } {
+  const matchMedia = useAdaptiveMatchMedia();
+  return getAdaptive(matchMedia);
+}

package/src/hooks/useBrand.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { isBrowser } from '@snack-uikit/utils';
+
+import { DEFAULT, POST_MESSAGE_KEY } from '../constants/environment';
+import { tryParseJson } from '../helpers/tryParseJson';
+import { Brand } from '../types/theme';
+import { getCustomStore } from './private/getCustomStore';
+
+export const useBrand = () => {
+  const store = getCustomStore();
+  const [brand, setBrand] = useState(store.brand || DEFAULT.BRAND);
+
+  useEffect(() => {
+    const receiveChangeThemeDoneMessage = (event: MessageEvent) => {
+      const eventData = tryParseJson(event.data);
+      if (eventData.key !== POST_MESSAGE_KEY.changeBrandDone) return;
+      setBrand(eventData.value);
+    };
+    window.addEventListener('message', receiveChangeThemeDoneMessage, false);
+
+    return () => window.removeEventListener('message', receiveChangeThemeDoneMessage, false);
+  }, []);
+
+  const changeBrand = useCallback((brand: Brand) => {
+    isBrowser() &&
+      window.postMessage(JSON.stringify({ key: POST_MESSAGE_KEY.changeBrand, value: brand }), location.origin);
+  }, []);
+
+  return { brand, changeBrand };
+};

package/src/hooks/useComponentSize.tsx

@@ -0,0 +1,42 @@
+import { RefObject, useCallback, useState } from 'react';
+
+import { useLayoutEffect } from '@snack-uikit/utils';
+
+function getSize(el: HTMLElement | null) {
+  if (!el) {
+    return {
+      width: 0,
+      height: 0,
+    };
+  }
+
+  return {
+    width: el.offsetWidth,
+    height: el.offsetHeight,
+  };
+}
+
+export function useComponentSize(ref: RefObject<HTMLElement>) {
+  const [size, setSize] = useState(getSize(ref.current));
+
+  const handleResize = useCallback(() => {
+    if (ref.current) {
+      setSize(getSize(ref.current));
+    }
+  }, [ref]);
+
+  useLayoutEffect(() => {
+    if (!ref.current) return;
+
+    handleResize();
+
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(ref.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [handleResize, ref]);
+
+  return size;
+}

package/src/hooks/useConfig.ts

@@ -0,0 +1,170 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import AdminBrandThemes from '@sbercloud/figma-tokens-admin/build/css/brand.module.css';
+import CloudBrandThemes from '@sbercloud/figma-tokens-cloud-platform/build/css/brand.module.css';
+import GigaIdBrandThemes from '@sbercloud/figma-tokens-giga-id/build/css/brand.module.css';
+import MLSpaceBrandThemes from '@sbercloud/figma-tokens-mlspace/build/css/brand.module.css';
+import SiteBrandThemes from '@sbercloud/figma-tokens-web/build/css/brand.module.css';
+import { isBrowser, useLayoutEffect } from '@snack-uikit/utils';
+
+import { POST_MESSAGE_KEY } from '../constants/environment';
+import { tryParseJson } from '../helpers/tryParseJson';
+import { Brand, LanguageCodeType, Themes } from '../types';
+import { getCustomStore } from './private/getCustomStore';
+
+type UseConfigProps = {
+  languageCode?: LanguageCodeType;
+  theme?: Themes;
+  brand?: Brand;
+};
+
+const themeMap = {
+  [Themes.Green]: CloudBrandThemes.light,
+  [Themes.GreenDark]: CloudBrandThemes.dark,
+  [Themes.Purple]: MLSpaceBrandThemes.light,
+  [Themes.PurpleDark]: MLSpaceBrandThemes.dark,
+};
+
+const brandMap = {
+  [Brand.Cloud]: CloudBrandThemes.light,
+  [Brand.CloudDark]: CloudBrandThemes.dark,
+  [Brand.MLSpace]: MLSpaceBrandThemes.light,
+  [Brand.MLSpaceDark]: MLSpaceBrandThemes.dark,
+  [Brand.Admin]: AdminBrandThemes.light,
+  [Brand.AdminDark]: AdminBrandThemes.dark,
+  [Brand.Site]: SiteBrandThemes.light,
+  [Brand.SiteDark]: SiteBrandThemes.dark,
+  [Brand.GigaId]: GigaIdBrandThemes.light,
+  [Brand.GigaIdDark]: GigaIdBrandThemes.dark,
+};
+
+export function useConfig({ languageCode, theme, brand }: UseConfigProps) {
+  const store = getCustomStore({ brand, theme, languageCode });
+  const [configLanguageCode, setConfigLanguageCodeTheme] = useState(store.languageCode);
+  const previousThemeRef = useRef<Themes>();
+  const previousBrandRef = useRef<Brand>();
+
+  const updateTheme = useCallback(
+    (newTheme: Themes) => {
+      if (isBrowser()) {
+        store.theme = newTheme;
+
+        const html = document.getElementsByTagName('html')[0];
+
+        if (previousThemeRef.current) {
+          html.classList.remove(themeMap[previousThemeRef.current]);
+        }
+
+        html.setAttribute('data-theme', newTheme);
+
+        const body = document.getElementsByTagName('body')[0];
+        body.setAttribute('data-theme', newTheme);
+
+        html.classList.add(themeMap[newTheme]);
+
+        window.postMessage(JSON.stringify({ key: POST_MESSAGE_KEY.changeThemeDone, value: newTheme }), location.origin);
+
+        previousThemeRef.current = newTheme;
+      }
+    },
+    [store],
+  );
+
+  const updateBrand = useCallback(
+    (newBrand: Brand) => {
+      if (isBrowser()) {
+        store.brand = newBrand;
+
+        const html = document.getElementsByTagName('html')[0];
+
+        if (previousBrandRef.current) {
+          html.classList.remove(brandMap[previousBrandRef.current]);
+        }
+
+        html.setAttribute('data-brand', newBrand);
+
+        const body = document.getElementsByTagName('body')[0];
+        body.setAttribute('data-brand', newBrand);
+
+        html.classList.add(brandMap[newBrand]);
+
+        window.postMessage(JSON.stringify({ key: POST_MESSAGE_KEY.changeBrandDone, value: newBrand }), location.origin);
+
+        previousBrandRef.current = newBrand;
+      }
+    },
+    [store],
+  );
+
+  useEffect(() => {
+    /*-----------
+        --- THEME/BRAND ---
+        -----------*/
+
+    const receiveChangeThemeMessage = (event: MessageEvent) => {
+      const eventData = tryParseJson(event.data);
+
+      switch (eventData.key) {
+        case POST_MESSAGE_KEY.changeTheme:
+          updateTheme(eventData.value);
+          break;
+
+        case POST_MESSAGE_KEY.changeBrand:
+          updateBrand(eventData.value);
+          break;
+
+        default:
+          return;
+      }
+    };
+
+    window.addEventListener('message', receiveChangeThemeMessage, false);
+
+    /*--------------
+        --- LANGUAGE ---
+        --------------*/
+
+    const receiveChangeLanguageMessage = (event: MessageEvent) => {
+      const eventData = tryParseJson(event.data);
+      if (eventData.key !== POST_MESSAGE_KEY.changeLanguage) return;
+      setConfigLanguageCodeTheme(eventData.value);
+    };
+    window.addEventListener('message', receiveChangeLanguageMessage, false);
+
+    return () => {
+      window.removeEventListener('message', receiveChangeThemeMessage, false);
+      window.removeEventListener('message', receiveChangeLanguageMessage, false);
+    };
+  }, [updateBrand, updateTheme]);
+
+  /*-------------
+    ---- THEME ----
+    -------------*/
+
+  // need to do it this way to update theme before any other child component render & useEffect/useLayoutEffect
+  if (previousThemeRef.current !== theme && theme) {
+    updateTheme(theme);
+  }
+
+  if (previousBrandRef.current !== brand && brand) {
+    updateBrand(brand);
+  }
+
+  /*--------------
+    --- LANGUAGE ---
+    --------------*/
+
+  useLayoutEffect(() => {
+    if (languageCode) {
+      store.languageCode = languageCode;
+      setConfigLanguageCodeTheme(store.languageCode);
+    }
+  }, [languageCode, store]);
+
+  useEffect(() => {
+    window.postMessage(
+      JSON.stringify({ key: POST_MESSAGE_KEY.changeLanguageDone, value: configLanguageCode }),
+      location.origin,
+    );
+  }, [configLanguageCode]);
+}

package/src/hooks/useDisplayMode.ts

@@ -0,0 +1,10 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { DISPLAY_MODES } from '../constants/displayMode';
+import { getDisplayMode } from '../utils/getDisplayMode';
+import { useDisplayModeMatchMedia } from './useMatchMedia';
+
+export function useDisplayMode(): 'unknown' | 'twa' | ValueOf<typeof DISPLAY_MODES> {
+  const matchMedia = useDisplayModeMatchMedia();
+  return getDisplayMode(matchMedia);
+}

package/src/hooks/useEventHandler.ts

@@ -0,0 +1,21 @@
+import { useCallback, useRef } from 'react';
+
+import { useLayoutEffect } from '@snack-uikit/utils';
+
+import { warning } from '../utils';
+
+export function useEventHandler<T extends (...args: never[]) => unknown>(handler: T) {
+  const handlerRef = useRef<T | null>(null);
+
+  useLayoutEffect(() => {
+    handlerRef.current = handler;
+  });
+
+  return useCallback((...args: Parameters<T>) => {
+    const handler = handlerRef.current;
+
+    warning('The event handler cannot be called during render', handler === null);
+
+    return handler?.(...args);
+  }, []) as T;
+}

package/src/hooks/useForceUpdate.ts

@@ -0,0 +1,6 @@
+import { useCallback, useState } from 'react';
+
+export function useForceUpdate() {
+  const [, setVersion] = useState(0);
+  return useCallback(() => setVersion(version => version + 1), []);
+}

package/src/hooks/useForceUpdateOnPageLoadedCompletely.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+import { useForceUpdate } from './useForceUpdate';
+
+export function useForceUpdateOnPageLoadedCompletely() {
+  const rerender = useForceUpdate();
+  useEffect(() => {
+    window.addEventListener('load', rerender);
+    return () => {
+      window.removeEventListener('load', rerender);
+    };
+  }, [rerender]);
+}

package/src/hooks/useLanguage.ts

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { isBrowser, useLayoutEffect } from '@snack-uikit/utils';
+
+import { DEFAULT, POST_MESSAGE_KEY } from '../constants/environment';
+import { tryParseJson } from '../helpers/tryParseJson';
+import { LanguageCodeType } from '../types';
+import { getCustomStore } from './private/getCustomStore';
+
+type useLanguageProps = {
+  onlyEnabledLanguage?: boolean;
+};
+
+export const useLanguage = (props?: useLanguageProps) => {
+  const store = getCustomStore();
+  const [languageCode, setLanguageCode] = useState<LanguageCodeType>(store.languageCode || DEFAULT.LANGUAGE);
+  const onlyEnabledLanguage = props?.onlyEnabledLanguage;
+
+  useEffect(() => {
+    const receiveChangeLanguageDoneMessage = (event: MessageEvent) => {
+      const eventData = tryParseJson(event.data);
+      if (eventData.key !== POST_MESSAGE_KEY.changeLanguageDone) return;
+      setLanguageCode(eventData.value);
+    };
+    window.addEventListener('message', receiveChangeLanguageDoneMessage, false);
+
+    return () => window.removeEventListener('message', receiveChangeLanguageDoneMessage, false);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!onlyEnabledLanguage) {
+      return;
+    }
+    const miniCode = languageCode.split('-')[0];
+    const enGroup = miniCode === 'en';
+    const ruGroup = ['ru', 'be'].includes(miniCode);
+    if (enGroup) {
+      setLanguageCode(LanguageCodeType.enGB);
+      return;
+    }
+    if (ruGroup) {
+      setLanguageCode(LanguageCodeType.ruRU);
+      return;
+    }
+    if (languageCode === LanguageCodeType.cimode) {
+      setLanguageCode(LanguageCodeType.cimode);
+      return;
+    }
+    setLanguageCode(LanguageCodeType.ruRU);
+  }, [languageCode, onlyEnabledLanguage]);
+
+  const changeLanguage = useCallback((languageCode: LanguageCodeType) => {
+    if (isBrowser()) {
+      window.postMessage(
+        JSON.stringify({ key: POST_MESSAGE_KEY.changeLanguage, value: languageCode }),
+        location.origin,
+      );
+    }
+  }, []);
+
+  return { languageCode, changeLanguage };
+};

package/src/hooks/useMatchMedia.ts

@@ -0,0 +1,52 @@
+import { useRef, useState } from 'react';
+
+import { useLayoutEffect } from '@snack-uikit/utils';
+
+import { ADAPTIVE_QUERIES, INITIAL_ADAPTIVE_QUERIES_VALUE } from '../constants/adaptive';
+import { DISPLAY_MODE_QUERIES, INITIAL_DISPLAY_MODE_QUERIES_VALUE } from '../constants/displayMode';
+import { MatchMediaGeneric } from '../types';
+import { getMatchMediaGeneric, getMediaQueryListGeneric } from '../utils/getMatchMedia';
+
+export const useMatchMediaGeneric = <T extends string>({
+  queryValues,
+  initialValues,
+}: {
+  queryValues: Record<T, string>;
+  initialValues: MatchMediaGeneric<T>;
+}): MatchMediaGeneric<T> => {
+  const updatedHandlers = {
+    getMatchMedia: () => getMatchMediaGeneric({ queryValues, initialValues }),
+    getMediaQueryList: () => getMediaQueryListGeneric({ queryValues }),
+  };
+
+  const handlersRef = useRef(updatedHandlers);
+  handlersRef.current = updatedHandlers;
+
+  const [value, setValue] = useState(handlersRef.current.getMatchMedia);
+
+  useLayoutEffect(() => {
+    const handler = () => setValue(handlersRef.current.getMatchMedia);
+
+    const mediaQueryList = handlersRef.current.getMediaQueryList();
+
+    mediaQueryList.forEach(([, mql]) => mql.addEventListener('change', handler));
+
+    return (): void => mediaQueryList.forEach(([, mql]) => mql.removeEventListener('change', handler));
+  }, []);
+
+  return value;
+};
+
+export function useAdaptiveMatchMedia() {
+  return useMatchMediaGeneric({
+    queryValues: ADAPTIVE_QUERIES,
+    initialValues: INITIAL_ADAPTIVE_QUERIES_VALUE,
+  });
+}
+
+export function useDisplayModeMatchMedia() {
+  return useMatchMediaGeneric({
+    queryValues: DISPLAY_MODE_QUERIES,
+    initialValues: INITIAL_DISPLAY_MODE_QUERIES_VALUE,
+  });
+}

package/src/hooks/useTextProvider.ts

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+
+import { LanguageCodeType } from '../types';
+import { useLanguage } from './useLanguage';
+
+type TextProviderFunction<T extends string> = (entity: T) => string;
+
+export const useTextProvider = <T extends string>(
+  textProvider: (language: LanguageCodeType, entity: T) => string,
+): TextProviderFunction<T> => {
+  const { languageCode } = useLanguage({ onlyEnabledLanguage: true });
+
+  return useCallback((entity: T) => textProvider(languageCode, entity), [languageCode, textProvider]);
+};

package/src/hooks/useTheme.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { isBrowser } from '@snack-uikit/utils';
+
+import { DEFAULT, POST_MESSAGE_KEY } from '../constants/environment';
+import { tryParseJson } from '../helpers/tryParseJson';
+import { Themes } from '../types/theme';
+import { getCustomStore } from './private/getCustomStore';
+
+export const useTheme = () => {
+  const store = getCustomStore();
+  const [theme, setTheme] = useState(store.theme || DEFAULT.THEME);
+
+  useEffect(() => {
+    const receiveChangeThemeDoneMessage = (event: MessageEvent) => {
+      const eventData = tryParseJson(event.data);
+      if (eventData.key !== POST_MESSAGE_KEY.changeThemeDone) return;
+      setTheme(eventData.value);
+    };
+    window.addEventListener('message', receiveChangeThemeDoneMessage, false);
+
+    return () => window.removeEventListener('message', receiveChangeThemeDoneMessage, false);
+  }, []);
+
+  const changeTheme = useCallback((theme: Themes) => {
+    isBrowser() &&
+      window.postMessage(JSON.stringify({ key: POST_MESSAGE_KEY.changeTheme, value: theme }), location.origin);
+  }, []);
+
+  return { theme, changeTheme };
+};

package/src/hooks/useUniqueId.ts

@@ -0,0 +1,7 @@
+import { useMemo } from 'react';
+
+import { uniqueId } from '../utils';
+
+export function useUniqueId(namespace?: string) {
+  return useMemo(() => uniqueId(namespace), [namespace]);
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './components';
+export * from './hooks';
+export * from './utils';
+export * from './types';
+export * from './styles';
+export * from './constants/adaptive';
+export * from './constants/displayMode';

package/src/styles/default.ts

@@ -0,0 +1,67 @@
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+
+function getLoadingWheelAnimationPerChild(quantity: number, duration: number) {
+  function getLoadingWheelAnimation(child: number) {
+    return `
+      &:nth-child(${child}) {
+        animation-delay: ${(-child / quantity) * duration}ms;
+        animation-duration: ${duration}ms;
+      }
+    `;
+  }
+
+  return Array.from({ length: quantity }, (_, index) => index + 1)
+    .map(getLoadingWheelAnimation)
+    .join('');
+}
+
+export const DEFAULT_STYLES = {
+  COMMON: `
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    outline: 0;
+  
+    &::after,
+    &::before {
+      box-sizing: border-box;
+    }
+  `,
+  BORDERLESS: `
+    border: none;
+    border-radius: 0;
+  `,
+};
+
+export const ANIMATIONS = {
+  TRANSITION: '0.2s ease-in-out',
+  LOADING_WHEEL: `
+    & > path {
+      @keyframes loading-wheel {
+        0% {
+          opacity: 1;
+        }
+
+        90% {
+          opacity: 0.125;
+        }
+
+        100% {
+          opacity: 1;
+        }
+      }
+
+      animation-iteration-count: infinite;
+      animation-name: loading-wheel;
+      animation-timing-function: linear;
+
+      ${getLoadingWheelAnimationPerChild(8, 1000)};
+    }
+  `,
+};
+
+export const SHADOW: Record<string, string> = {
+  SMALL: themeVars.boxShadow.elevation.level1, // old value: '0 2px 12px rgba(0, 0, 0, 0.04)',
+  MEDIUM: themeVars.boxShadow.elevation.level3, // old value: '0 4px 20px rgba(0, 0, 0, 0.08)',
+  LARGE: themeVars.boxShadow.elevation.level4, // old value: '0 8px 32px rgba(0, 0, 0, 0.08)',
+};

package/src/styles/index.ts

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

package/src/types/adaptive.ts

@@ -0,0 +1,9 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { LAYOUT_TYPE } from '../constants/adaptive';
+
+export type MatchMediaGeneric<T extends string> = Record<T, boolean>;
+
+export type LayoutType = ValueOf<typeof LAYOUT_TYPE>;
+
+export type WithLayoutType<T = object> = T & { layoutType: LayoutType };

package/src/types/general.ts

@@ -0,0 +1,10 @@
+import { LanguageCodeType } from './language';
+import { Brand, Themes } from './theme';
+
+export type WindowStore = {
+  sbercloudUIKit: {
+    languageCode: LanguageCodeType;
+    theme: Themes;
+    brand: Brand;
+  };
+};

package/src/types/index.ts

@@ -0,0 +1,5 @@
+export * from './adaptive';
+export * from './general';
+export * from './language';
+export * from './theme';
+export * from './withSupportProps';