@cloud-ru/uikit-product-utils 7.0.0

package/src/types/language.ts

@@ -0,0 +1,227 @@
+export enum LanguageCodeType {
+  arSA = 'ar-SA',
+  bgBG = 'bg-BG',
+  caES = 'ca-ES',
+  zhTW = 'zh-TW',
+  csCZ = 'cs-CZ',
+  daDK = 'da-DK',
+  deDE = 'de-DE',
+  elGR = 'el-GR',
+  enUS = 'en-US',
+  es = 'es',
+  fiFI = 'fi-FI',
+  frFR = 'fr-FR',
+  heIL = 'he-IL',
+  huHU = 'hu-HU',
+  isIS = 'is-IS',
+  itIT = 'it-IT',
+  jaJP = 'ja-JP',
+  koKR = 'ko-KR',
+  nlNL = 'nl-NL',
+  nbNO = 'nb-NO',
+  plPL = 'pl-PL',
+  ptBR = 'pt-BR',
+  rmCH = 'rm-CH',
+  roRO = 'ro-RO',
+  ruRU = 'ru-RU',
+  hrHR = 'hr-HR',
+  skSK = 'sk-SK',
+  sqAL = 'sq-AL',
+  svSE = 'sv-SE',
+  thTH = 'th-TH',
+  trTR = 'tr-TR',
+  urPK = 'ur-PK',
+  idID = 'id-ID',
+  ukUA = 'uk-UA',
+  beBY = 'be-BY',
+  slSI = 'sl-SI',
+  etEE = 'et-EE',
+  lvLV = 'lv-LV',
+  ltLT = 'lt-LT',
+  tgCyrlTJ = 'tg-Cyrl-TJ',
+  faIR = 'fa-IR',
+  viVN = 'vi-VN',
+  hyAM = 'hy-AM',
+  azLatnAZ = 'az-Latn-AZ',
+  euES = 'eu-ES',
+  hsbDE = 'hsb-DE',
+  mkMK = 'mk-MK',
+  tnZA = 'tn-ZA',
+  xhZA = 'xh-ZA',
+  zuZA = 'zu-ZA',
+  afZA = 'af-ZA',
+  kaGE = 'ka-GE',
+  foFO = 'fo-FO',
+  hiIN = 'hi-IN',
+  mtMT = 'mt-MT',
+  seNO = 'se-NO',
+  msMY = 'ms-MY',
+  kkKZ = 'kk-KZ',
+  kyKG = 'ky-KG',
+  swKE = 'sw-KE',
+  tkTM = 'tk-TM',
+  uzLatnUZ = 'uz-Latn-UZ',
+  ttRU = 'tt-RU',
+  bnIN = 'bn-IN',
+  paIN = 'pa-IN',
+  guIN = 'gu-IN',
+  orIN = 'or-IN',
+  taIN = 'ta-IN',
+  teIN = 'te-IN',
+  knIN = 'kn-IN',
+  mlIN = 'ml-IN',
+  asIN = 'as-IN',
+  mrIN = 'mr-IN',
+  saIN = 'sa-IN',
+  mnMN = 'mn-MN',
+  boCN = 'bo-CN',
+  cyGB = 'cy-GB',
+  kmKH = 'km-KH',
+  loLA = 'lo-LA',
+  chrCherUS = 'chr-Cher-US',
+  iuCansCA = 'iu-Cans-CA',
+  glES = 'gl-ES',
+  kokIN = 'kok-IN',
+  syrSY = 'syr-SY',
+  siLK = 'si-LK',
+  amET = 'am-ET',
+  neNP = 'ne-NP',
+  fyNL = 'fy-NL',
+  psAF = 'ps-AF',
+  filPH = 'fil-PH',
+  dvMV = 'dv-MV',
+  haLatnNG = 'ha-Latn-NG',
+  yoNG = 'yo-NG',
+  quzBO = 'quz-BO',
+  nsoZA = 'nso-ZA',
+  baRU = 'ba-RU',
+  lbLU = 'lb-LU',
+  klGL = 'kl-GL',
+  igNG = 'ig-NG',
+  tiET = 'ti-ET',
+  hawUS = 'haw-US',
+  iiCN = 'ii-CN',
+  arnCL = 'arn-CL',
+  mohCA = 'moh-CA',
+  brFR = 'br-FR',
+  ugCN = 'ug-CN',
+  miNZ = 'mi-NZ',
+  ocFR = 'oc-FR',
+  coFR = 'co-FR',
+  gswFR = 'gsw-FR',
+  sahRU = 'sah-RU',
+  qutGT = 'qut-GT',
+  rwRW = 'rw-RW',
+  woSN = 'wo-SN',
+  prsAF = 'prs-AF',
+  gdGB = 'gd-GB',
+  kuArabIQ = 'ku-Arab-IQ',
+  arIQ = 'ar-IQ',
+  caESvalencia = 'ca-ES-valencia',
+  zhCN = 'zh-CN',
+  deCH = 'de-CH',
+  enGB = 'en-GB',
+  esMX = 'es-MX',
+  frBE = 'fr-BE',
+  itCH = 'it-CH',
+  nlBE = 'nl-BE',
+  nnNO = 'nn-NO',
+  ptPT = 'pt-PT',
+  ruMO = 'ru-MO',
+  srLatnCS = 'sr-Latn-CS',
+  svFI = 'sv-FI',
+  azCyrlAZ = 'az-Cyrl-AZ',
+  dsbDE = 'dsb-DE',
+  tnBW = 'tn-BW',
+  seSE = 'se-SE',
+  gaIE = 'ga-IE',
+  msBN = 'ms-BN',
+  uzCyrlUZ = 'uz-Cyrl-UZ',
+  bnBD = 'bn-BD',
+  paArabPK = 'pa-Arab-PK',
+  taLK = 'ta-LK',
+  mnMongCN = 'mn-Mong-CN',
+  sdArabPK = 'sd-Arab-PK',
+  iuLatnCA = 'iu-Latn-CA',
+  tzmLatnDZ = 'tzm-Latn-DZ',
+  ffLatnSN = 'ff-Latn-SN',
+  quzEC = 'quz-EC',
+  tiER = 'ti-ER',
+  arEG = 'ar-EG',
+  zhHK = 'zh-HK',
+  deAT = 'de-AT',
+  enAU = 'en-AU',
+  esES = 'es-ES',
+  frCA = 'fr-CA',
+  srCyrlCS = 'sr-Cyrl-CS',
+  seFI = 'se-FI',
+  quzPE = 'quz-PE',
+  arLY = 'ar-LY',
+  zhSG = 'zh-SG',
+  deLU = 'de-LU',
+  enCA = 'en-CA',
+  esGT = 'es-GT',
+  frCH = 'fr-CH',
+  hrBA = 'hr-BA',
+  smjNO = 'smj-NO',
+  tzmTfngMA = 'tzm-Tfng-MA',
+  arDZ = 'ar-DZ',
+  zhMO = 'zh-MO',
+  deLI = 'de-LI',
+  enNZ = 'en-NZ',
+  esCR = 'es-CR',
+  frLU = 'fr-LU',
+  bsLatnBA = 'bs-Latn-BA',
+  smjSE = 'smj-SE',
+  arMA = 'ar-MA',
+  enIE = 'en-IE',
+  esPA = 'es-PA',
+  frMC = 'fr-MC',
+  srSPCyrl = 'sr-SP-Cyrl',
+  smaNO = 'sma-NO',
+  arTN = 'ar-TN',
+  enZA = 'en-ZA',
+  esDO = 'es-DO',
+  srCyrlBA = 'sr-Cyrl-BA',
+  smaSE = 'sma-SE',
+  arOM = 'ar-OM',
+  enJM = 'en-JM',
+  esVE = 'es-VE',
+  bsCyrlBA = 'bs-Cyrl-BA',
+  smsFI = 'sms-FI',
+  arYE = 'ar-YE',
+  en029 = 'en-029',
+  esCO = 'es-CO',
+  srLatnRS = 'sr-Latn-RS',
+  smnFI = 'smn-FI',
+  arSY = 'ar-SY',
+  enBZ = 'en-BZ',
+  esPE = 'es-PE',
+  srCyrlRS = 'sr-Cyrl-RS',
+  arJO = 'ar-JO',
+  enTT = 'en-TT',
+  esAR = 'es-AR',
+  srLatnME = 'sr-Latn-ME',
+  arLB = 'ar-LB',
+  enZW = 'en-ZW',
+  esEC = 'es-EC',
+  srCyrlME = 'sr-Cyrl-ME',
+  arKW = 'ar-KW',
+  enPH = 'en-PH',
+  esCL = 'es-CL',
+  arAE = 'ar-AE',
+  esUY = 'es-UY',
+  arBH = 'ar-BH',
+  esPY = 'es-PY',
+  arQA = 'ar-QA',
+  enIN = 'en-IN',
+  esBO = 'es-BO',
+  enMY = 'en-MY',
+  esSV = 'es-SV',
+  enSG = 'en-SG',
+  esHN = 'es-HN',
+  esNI = 'es-NI',
+  esPR = 'es-PR',
+  esUS = 'es-US',
+  cimode = 'cimode',
+}

package/src/types/theme.ts

@@ -0,0 +1,19 @@
+export enum Themes {
+  Purple = 'purple',
+  PurpleDark = 'purpleDark',
+  Green = 'green',
+  GreenDark = 'greenDark',
+}
+
+export enum Brand {
+  Cloud = 'Cloud',
+  CloudDark = 'CloudDark',
+  MLSpace = 'MLSpace',
+  MLSpaceDark = 'MLSpaceDark',
+  Site = 'Site',
+  SiteDark = 'SiteDark',
+  Admin = 'Admin',
+  AdminDark = 'AdminDark',
+  GigaId = 'GigaId',
+  GigaIdDark = 'GigaIdDark',
+}

package/src/types/withSupportProps.ts

@@ -0,0 +1,6 @@
+import { AriaAttributes } from 'react';
+
+export type WithSupportProps<T> = {
+  'data-test-id'?: string;
+} & AriaAttributes &
+  T;

package/src/utils/alert.ts

@@ -0,0 +1,5 @@
+import { configureDevAlerts } from '@cloud-ru/ft-debug-mode';
+
+const { error, warning } = configureDevAlerts({ scope: 'uikit-product', enabled: true });
+
+export { error, warning };

package/src/utils/createTextProvider.ts

@@ -0,0 +1,18 @@
+import { LanguageCodeType } from '../types/language';
+
+export function createTextProvider<T extends string = string, V = string>(
+  dictionary: Partial<Record<LanguageCodeType, Record<T, V>>>,
+  packageName: string,
+) {
+  return <R extends V>(language: LanguageCodeType, entity: T) => {
+    const langKey = language === LanguageCodeType.cimode ? LanguageCodeType.ruRU : language;
+    const value = dictionary?.[langKey]?.[entity] || '';
+
+    if (language === LanguageCodeType.cimode) {
+      const key = `uikit-${packageName}.${entity}`;
+      return (value instanceof Function ? () => key : key) as unknown as R;
+    }
+
+    return value as R;
+  };
+}

package/src/utils/excludeSupportProps.ts

@@ -0,0 +1,6 @@
+import { DATA_AND_ARIA_REGEXP } from './private/constants';
+import { excludeProps } from './private/excludeProps';
+
+export function excludeSupportProps(props: Record<string, unknown>) {
+  return excludeProps(props, DATA_AND_ARIA_REGEXP);
+}

package/src/utils/extractSupportProps.ts

@@ -0,0 +1,6 @@
+import { DATA_AND_ARIA_REGEXP } from './private/constants';
+import { extractProps } from './private/extractProps';
+
+export function extractSupportProps(props: Record<string, unknown>) {
+  return extractProps(props, DATA_AND_ARIA_REGEXP);
+}

package/src/utils/getAdaptive.ts

@@ -0,0 +1,23 @@
+import { AdaptiveQueriesTitle } from '../constants/adaptive';
+import { LayoutType, MatchMediaGeneric } from '../types/adaptive';
+import { getUserAgentInfo } from './getUserAgentInfo';
+
+export function getAdaptive({ isMobile }: MatchMediaGeneric<AdaptiveQueriesTitle>) {
+  const { device } = getUserAgentInfo();
+
+  let layoutType: LayoutType;
+
+  switch (device.type) {
+    case 'mobile':
+      layoutType = 'mobile';
+      break;
+    case 'tablet':
+      layoutType = 'tablet';
+      break;
+    default:
+      layoutType = isMobile ? 'desktopSmall' : 'desktop';
+      break;
+  }
+
+  return { layoutType };
+}

package/src/utils/getDisplayMode.ts

@@ -0,0 +1,34 @@
+import { isBrowser } from '@snack-uikit/utils';
+
+import { DISPLAY_MODE_QUERIES, DISPLAY_MODES } from '../constants/displayMode';
+import { MatchMediaGeneric } from '../types';
+
+export function getDisplayMode(matchMedia: MatchMediaGeneric<keyof typeof DISPLAY_MODE_QUERIES>) {
+  if (isBrowser()) {
+    if (document.referrer.startsWith('android-app://')) {
+      return 'twa';
+    }
+
+    if (matchMedia.isBrowser) {
+      return DISPLAY_MODES.Browser;
+    }
+
+    if (matchMedia.isPwa) {
+      return DISPLAY_MODES.Pwa;
+    }
+
+    if (matchMedia.isFullscreen) {
+      return DISPLAY_MODES.Fullscreen;
+    }
+
+    if (matchMedia.isMinimalUI) {
+      return DISPLAY_MODES.MinimalUI;
+    }
+
+    if (matchMedia.isWindowControlsOverlay) {
+      return DISPLAY_MODES.WindowControlsOverlay;
+    }
+  }
+
+  return 'unknown';
+}

package/src/utils/getMatchMedia.ts

@@ -0,0 +1,38 @@
+import { isBrowser } 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';
+
+function getMediaQueries<T extends string>({ queryValues }: { queryValues: Record<T, string> }) {
+  return Object.keys(queryValues).reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: isBrowser() ? globalThis.matchMedia(queryValues[key as T]) : undefined,
+    }),
+    {} as Record<T, MediaQueryList>,
+  );
+}
+
+export function getMediaQueryListGeneric<T extends string>({ queryValues }: { queryValues: Record<T, string> }) {
+  return Object.entries(getMediaQueries({ queryValues })) as Array<[T, MediaQueryList]>;
+}
+
+export function getMatchMediaGeneric<T extends string>({
+  queryValues,
+  initialValues,
+}: {
+  queryValues: Record<T, string>;
+  initialValues: MatchMediaGeneric<T>;
+}) {
+  return getMediaQueryListGeneric<T>({ queryValues }).reduce(
+    (acc, [key, q]) => ({ ...acc, [key]: q?.matches || false }),
+    initialValues,
+  );
+}
+
+export const getAdaptiveMatchMedia = () =>
+  getMatchMediaGeneric({ queryValues: ADAPTIVE_QUERIES, initialValues: INITIAL_ADAPTIVE_QUERIES_VALUE });
+
+export const getDisplayModeMatchMedia = () =>
+  getMatchMediaGeneric({ queryValues: DISPLAY_MODE_QUERIES, initialValues: INITIAL_DISPLAY_MODE_QUERIES_VALUE });

package/src/utils/getUserAgentInfo.ts

@@ -0,0 +1,36 @@
+import { UAParser } from 'ua-parser-js';
+
+import { ValueOf } from '@snack-uikit/utils';
+
+const DEVICE_TYPE = {
+  Console: 'console',
+  Mobile: 'mobile',
+  Tablet: 'tablet',
+  Smarttv: 'smarttv',
+  Wearable: 'wearable',
+  Embedded: 'embedded',
+  Desktop: 'desktop',
+} as const;
+
+const DEVICE_TYPES = Object.values(DEVICE_TYPE);
+
+type DeviceType = ValueOf<typeof DEVICE_TYPE>;
+
+const getDeviceType = (type: string | undefined): DeviceType =>
+  DEVICE_TYPES.find(value => value === type) || DEVICE_TYPE.Desktop;
+
+export function getUserAgentInfo() {
+  const parser = new UAParser(globalThis.navigator.userAgent);
+  const device = parser.getDevice();
+  const browser = parser.getBrowser();
+  const os = parser.getOS();
+
+  return {
+    device: {
+      model: device.model,
+      type: getDeviceType(device.type),
+    },
+    os,
+    browser,
+  };
+}

package/src/utils/index.ts

@@ -0,0 +1,10 @@
+export * from './alert';
+export * from './createTextProvider';
+export * from './excludeSupportProps';
+export * from './extractSupportProps';
+export * from './getAdaptive';
+export * from './getDisplayMode';
+export * from './getMatchMedia';
+export * from './getUserAgentInfo';
+export * from './keyboardSelectHandler';
+export * from './uniqueId';

package/src/utils/keyboardSelectHandler.ts

@@ -0,0 +1,8 @@
+import { KeyboardEvent } from 'react';
+
+export function keyboardSelectHandler<T>(callback: (event?: KeyboardEvent<T>) => void) {
+  return (event: KeyboardEvent<T>) => {
+    if (!['Enter', 'Space'].includes(event.code)) return;
+    callback(event);
+  };
+}

package/src/utils/private/constants.ts

@@ -0,0 +1 @@
+export const DATA_AND_ARIA_REGEXP = /^(data|aria)-/;

package/src/utils/private/excludeProps.ts

@@ -0,0 +1,11 @@
+export function excludeProps(props: Record<string, unknown>, regexp: RegExp) {
+  return Object.keys(props)
+    .filter(prop => !prop.match(regexp))
+    .reduce(
+      (nextProps: Record<string, unknown>, prop) => ({
+        ...nextProps,
+        [prop]: props[prop],
+      }),
+      {},
+    );
+}

package/src/utils/private/extractProps.ts

@@ -0,0 +1,7 @@
+export function extractProps(props: Record<string, unknown>, regex: RegExp) {
+  return Object.keys(props).reduce((nextProps: Record<string, unknown>, prop) => {
+    if (prop.match(regex)) nextProps[prop] = props[prop];
+
+    return nextProps;
+  }, {});
+}

package/src/utils/uniqueId.ts

@@ -0,0 +1,18 @@
+const KEY = Symbol.for('SBERCLOUD_UIKIT_PRODUCT_UTILS_UNIQUE_ID_KEY');
+const DEFAULT_NAMESPACE = '__DEFAULT_NAMESPACE__';
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface Window {
+    [KEY]: Record<string, number>;
+  }
+}
+
+export function uniqueId(namespace = DEFAULT_NAMESPACE) {
+  window[KEY] ??= {};
+  window[KEY][namespace] ??= 0;
+
+  const id = ++window[KEY][namespace];
+
+  return namespace === DEFAULT_NAMESPACE ? id.toString() : `${namespace}__${id}`;
+}