@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/Tooltip/Tooltip.styles.ts

@@ -0,0 +1,45 @@
+import { colors, dimensions } from '../../theme';
+import { ComponentStyles } from '../../types';
+import { rgba } from '../../helpers';
+import { ITooltipProps } from './Tooltip';
+
+interface IStyleProps {
+  type: NonNullable<ITooltipProps['type']>;
+}
+
+export const styles = {
+  root: {
+    display: 'inline-block',
+    boxSizing: 'border-box',
+  },
+
+  tooltip: {
+    fontSize: 14,
+    padding: [18, 20],
+    letterSpacing: 0.15,
+    backgroundColor: ({ type }: IStyleProps): string =>
+      type === 'error' ? colors.RED_WARNING : colors.CLASSIC_WHITE,
+    color: ({ type }: IStyleProps): string =>
+      type === 'error' ? colors.CLASSIC_WHITE : colors.FONT_MAIN,
+    boxShadow: `0 0 1px ${rgba(colors.FONT_MAIN, 0.4)}, 0 -2px 6px ${rgba(
+      colors.FONT_MAIN,
+      0.06,
+    )}, 0 8px 32px -8px ${rgba(colors.FONT_MAIN, 0.3)}`,
+    borderRadius: 12,
+    lineHeight: 1.4,
+    maxWidth: 320,
+  },
+
+  hint: {
+    whiteSpace: 'nowrap',
+    fontSize: 12,
+    padding: [8, 12],
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    backgroundColor: ({ type }: { type: ITooltipProps['type'] }): string =>
+      type === 'error' ? colors.RED_WARNING : colors.FONT_MEDIUM,
+    color: colors.CLASSIC_WHITE,
+    letterSpacing: 0.2,
+  },
+};
+
+export type TooltipStyles = ComponentStyles<typeof styles, IStyleProps>;

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,40 @@
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { addDataAttributes } from '../../helpers';
+
+import { styles, TooltipStyles } from './Tooltip.styles';
+
+export interface ITooltipProps extends ICommonProps {
+  tweakStyles?: TooltipStyles;
+  text: ReactNode;
+  /**
+   * @default `tooltip`
+   */
+  view?: 'tooltip' | 'hint';
+  /**
+   * @default `info`
+   */
+  type?: 'info' | 'error';
+}
+
+export const Tooltip: FC<ITooltipProps> = ({
+  text,
+  view = 'tooltip',
+  type = 'info',
+  data,
+  tweakStyles,
+}) => {
+  const { classes } = useTheme('Tooltip', styles, tweakStyles, { type });
+
+  return (
+    <div
+      className={clsx(classes.root, classes[view])}
+      {...addDataAttributes(data)}
+    >
+      {text}
+    </div>
+  );
+};

package/src/components/Tooltip/index.ts

@@ -0,0 +1,3 @@
+export * from './Tooltip';
+export type { TooltipStyles } from './Tooltip.styles';
+export type { ITooltipType } from './types';

package/src/components/Tooltip/types.ts

@@ -0,0 +1 @@
+export type ITooltipType = 'info' | 'warning';

package/src/components/index.ts

@@ -0,0 +1,36 @@
+export * from './AccountInfo';
+export * from './AddButton';
+export * from './Button';
+export * from './Checkbox';
+export * from './CloseButton';
+export * from './Colors';
+export * from './CssBaseline';
+export * from './DateInput';
+export * from './DatePicker';
+export * from './Description';
+export * from './FiltersPane';
+export * from './Flag';
+export * from './FlexibleTable';
+export * from './Icon';
+export * from './IncrementInput';
+export * from './Input';
+export * from './List';
+export * from './Modal';
+export * from './MoreMenu';
+export * from './MultiSelect';
+export * from './MultiSelectList';
+export * from './Notification';
+export * from './NumberInput';
+export * from './SearchInput';
+export * from './SmartInput';
+export * from './PhoneInput';
+export * from './RadioButton';
+export * from './Select';
+export * from './Switch';
+export * from './TextArea';
+export * from './TextWithInfo';
+export * from './TextWithTooltip';
+export * from './ThemedPreloader';
+export * from './Toaster';
+export * from './Tooltip';
+export * from './ScrollIntoViewIfNeeded';

package/src/helpers/colors.ts

@@ -0,0 +1,2 @@
+import hexToRgba from 'hex-to-rgba';
+export const rgba = hexToRgba;

package/src/helpers/data-attributes.ts

@@ -0,0 +1,18 @@
+import { transformToKebab, getTestId, isNotEmpty } from './utils';
+import { IDataAttributes } from '../types';
+
+export const addDataAttributes = (
+  data: IDataAttributes = {},
+): IDataAttributes =>
+  Object.fromEntries(
+    Object.entries(data).map(([key, value]) =>
+      isNotEmpty(value) ? [`data-${transformToKebab(key)}`, value] : [],
+    ),
+  );
+
+export const addDataTestId = (
+  ...args: Parameters<typeof getTestId>
+): { 'data-testid': string } | undefined => {
+  const testId = getTestId(...args);
+  return isNotEmpty(testId) ? { 'data-testid': testId } : undefined;
+};

package/src/helpers/dateHelpers/date-helpers.ts

@@ -0,0 +1,9 @@
+import { parse, isValid } from 'date-fns';
+
+export const DATE_FORMAT = 'dd.MM.yyyy';
+
+export const isDateValid = (value: string): boolean =>
+  isValid(parse(value, DATE_FORMAT, new Date()));
+
+export const parseStringToDate = (value: string): Date =>
+  parse(value, DATE_FORMAT, new Date()) || null;

package/src/helpers/index.ts

@@ -0,0 +1,5 @@
+export * from './data-attributes';
+export * from './colors';
+export * from './utils';
+export * from './popper-helpers';
+export * from './phone';

package/src/helpers/phone.ts

@@ -0,0 +1,106 @@
+import { phoneInfo, IPhoneInfo, IPhoneValue } from '../components';
+import { isNotEmpty } from './utils';
+
+export const findCountryByCode = (
+  countryCode?: string,
+  countriesList = phoneInfo,
+): IPhoneInfo | undefined =>
+  countryCode !== undefined
+    ? countriesList.find((info) => info.countryCode === countryCode)
+    : undefined;
+
+export const findCountryIndexByCode = (
+  countryCode?: string,
+  countriesList = phoneInfo,
+): number =>
+  countryCode !== undefined
+    ? countriesList.findIndex((info) => info.countryCode === countryCode)
+    : -1;
+
+export const getCountryTextByLocale = (
+  country: IPhoneInfo,
+  locale: string,
+): string =>
+  locale.toLowerCase() === 'ru' ? country.countryRu : country.countryEn;
+
+export const sortCountriesByLocale = (
+  countriesList: IPhoneInfo[],
+  locale: string,
+) =>
+  countriesList.sort((countryA, countryB) =>
+    getCountryTextByLocale(countryA, locale).localeCompare(
+      getCountryTextByLocale(countryB, locale),
+    ),
+  );
+
+export const checkSearchStringInCountry = (
+  country: IPhoneInfo,
+  searchString: string,
+): boolean => {
+  const checkValue = searchString.toLowerCase().trim().replace('+', '');
+
+  const possibleValues = [
+    country.countryRu,
+    country.countryEn,
+    ...country.countryRu.split(' '),
+    ...country.countryEn.split(' '),
+    country.dialCode,
+  ].map((part) => part.toLowerCase());
+
+  return possibleValues.some((v) => v.startsWith(checkValue));
+};
+
+export const getFullPhone = (phone?: IPhoneValue): string =>
+  (phone?.dialCode ?? '') + (phone?.phoneNumber ?? '');
+
+export const getCountryCodeFromPhone = (
+  phoneWithCode: string,
+): string | undefined => {
+  // попробуем найти уникальный код страны fullCode (dialCode + arealCode)
+  let countryCode = phoneInfo.find((info) =>
+    info.fullCodes.some((code) => phoneWithCode.startsWith(code)),
+  )?.countryCode;
+
+  if (countryCode === undefined && isNotEmpty(phoneWithCode)) {
+    // если не нашли уникальный fullCode (dialCode + arealCode),
+    // то пробуем найти dialCode и выбираем с наименьшим Priority
+    countryCode = phoneInfo
+      .filter((info) => phoneWithCode.startsWith(info.dialCode))
+      .sort(
+        (infoA, infoB) =>
+          (infoA.dialCodePriority ?? 1000) - (infoB.dialCodePriority ?? 1000),
+      )[0]?.countryCode;
+  }
+
+  return countryCode;
+};
+
+export const getPhoneObjFromString = (
+  fullPhone: string,
+  countryCode?: string,
+): IPhoneValue => {
+  const newCountryCode = countryCode ?? getCountryCodeFromPhone(fullPhone);
+  const dialCode = findCountryByCode(newCountryCode)?.dialCode;
+  const phoneNumber = fullPhone.slice(dialCode?.length);
+
+  return { dialCode, phoneNumber, countryCode: newCountryCode };
+};
+
+export const DEFAULT_PHONE_MASK = '+ 9 999 999 999 999 99';
+
+export const getPhoneMask = (countryCode?: string): string => {
+  let mask = DEFAULT_PHONE_MASK;
+  if (countryCode !== undefined) {
+    const countrySettings = findCountryByCode(countryCode);
+
+    if (countrySettings !== undefined) {
+      const dialCodeLength = countrySettings.dialCode.length;
+      const areaAndPhoneMask =
+        countrySettings.phoneMask ??
+        mask.substring(2, mask.length - dialCodeLength);
+      mask = `+ ${'9'.repeat(dialCodeLength)} ${areaAndPhoneMask}`;
+    }
+  }
+
+  return mask;
+};

package/src/helpers/popper-helpers.ts

@@ -0,0 +1,17 @@
+import { Modifier } from 'react-overlays/usePopper';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const minWidthModifier: Partial<Modifier<any, any>> = {
+  name: 'minWidth',
+  enabled: true,
+  phase: 'beforeWrite',
+  requires: ['computeStyles'],
+  fn: ({ state }) => {
+    state.styles.popper.minWidth = `${state.rects.reference.width}px`;
+  },
+  effect: ({ state }) => {
+    state.elements.popper.style.minWidth = `${
+      (state.elements.reference as HTMLElement).offsetWidth
+    }px`;
+  },
+};

package/src/helpers/utils.ts

@@ -0,0 +1,164 @@
+export const transformToKebab = (string: string): string => {
+  let result = '';
+  string.split('').forEach((char) => {
+    if (char.toLowerCase() === char) {
+      result += char;
+    } else {
+      result += `-${char.toLowerCase()}`;
+    }
+  });
+
+  return result;
+};
+
+export const getParentNode = (element: Element | ShadowRoot): Element =>
+  element.nodeName === 'HTML'
+    ? (element as Element)
+    : (element.parentNode as Element) ?? (element as ShadowRoot).host;
+
+export const getStyleComputedProperty = (
+  element: Element,
+): Partial<CSSStyleDeclaration> =>
+  element.nodeType !== 1 ? {} : getComputedStyle(element, null);
+
+export const getScrollParent = (element: Element | Document): Element => {
+  if (!element) {
+    return document.body;
+  }
+
+  switch (element.nodeName) {
+    case 'HTML':
+    case 'BODY':
+      return (element as Element).ownerDocument.body;
+    case '#document':
+      return (element as Document).body;
+  }
+
+  const { overflow, overflowX, overflowY } =
+    getStyleComputedProperty(element as Element) ?? {};
+  if (
+    /(auto|scroll|overlay)/.test(
+      (overflow ?? '') + (overflowY ?? '') + (overflowX ?? ''),
+    )
+  ) {
+    return element as Element;
+  }
+  return getScrollParent(getParentNode(element as Element));
+};
+
+export const isElementOffScreen = (
+  element: HTMLElement,
+  input?: HTMLElement,
+): boolean => {
+  const el = element;
+  const scrollParent = getScrollParent(element);
+
+  const { scrollHeight: scrollHeightWithElement } = scrollParent;
+  el.hidden = true;
+  const { scrollHeight: scrollHeightWithoutElement } = scrollParent;
+  el.hidden = false;
+
+  const isOffscreen = scrollHeightWithElement !== scrollHeightWithoutElement;
+
+  if (isOffscreen && input !== undefined) {
+    const elRect = el.getBoundingClientRect();
+    const scrollParentRect = scrollParent.getBoundingClientRect();
+    const topOffset = elRect.top - scrollParentRect.top;
+    if (input.clientHeight + el.clientHeight > topOffset) {
+      return false;
+    }
+  }
+
+  return isOffscreen;
+};
+
+export const getNumberInRange = (
+  value: number,
+  min = -Infinity,
+  max = Infinity,
+): number => Math.min(max, Math.max(min, value));
+
+const DEFAULT_THOUSANDS_SEPARATOR = '\u2009';
+
+export const formatStringNumber = (
+  val?: string,
+  separator = DEFAULT_THOUSANDS_SEPARATOR,
+): string => {
+  if (val === undefined) {
+    return '';
+  }
+  const parts = val.split('.');
+
+  parts[0] = parts[0]
+    // убрать лидирующие нули
+    .replace(/^0+(?=\d)/, '')
+    // проставить сепараторы тысяч
+    .replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+  return (parts[1] ?? '').length > 0 ? parts.join('.') : parts[0];
+};
+
+export const formatNumber = (
+  val?: number,
+  separator = DEFAULT_THOUSANDS_SEPARATOR,
+): string => {
+  if (val === undefined || isNaN(val)) {
+    return '';
+  }
+  return formatStringNumber(String(val), separator);
+};
+
+export const removeStringFormat = (val?: string): string =>
+  (val ?? '').replace(',', '.').replace(/\s/g, '');
+
+export const stringToNumber = (val?: string): number | undefined => {
+  const trimmed = removeStringFormat(val);
+  if (trimmed === '') {
+    return undefined;
+  }
+  const num = Number(trimmed);
+  return isNaN(num) ? undefined : num;
+};
+
+export const setCaretPosition = (
+  elem: HTMLInputElement,
+  caretPos: number | null,
+): void => {
+  if (caretPos === null || elem === null) {
+    return;
+  }
+  if (elem.selectionStart) {
+    elem.focus();
+    elem.setSelectionRange(caretPos, caretPos);
+  } else {
+    elem.focus();
+  }
+};
+
+export const isSpaceChar = (char?: string): boolean =>
+  char !== undefined && char.match(/\s/) !== null;
+
+export const isInt = (n: number): boolean => n % 1 === 0;
+
+export const getNumberLength = (n?: number): number =>
+  n === undefined || isNaN(n) ? 0 : n.toString().length;
+
+/**
+ * Проверяет, что `val` не `null`, не `undefined` и не пустая строка
+ */
+export const isNotEmpty = <T>(val: T | null | undefined): val is T =>
+  typeof val === 'string'
+    ? val.trim() !== ''
+    : val !== null && val !== undefined;
+
+export const trimStringToMaxLength = (val: string, maxLength: number) =>
+  val.length > maxLength ? val.slice(0, maxLength) : val;
+
+export const getTestId = (
+  testId: string | undefined,
+  postfix?: string | number,
+): string | undefined => {
+  if (!isNotEmpty(testId)) {
+    return undefined;
+  }
+  return isNotEmpty(postfix) ? `${testId}-${postfix}` : testId;
+};

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from './use-is-mounted';
+export * from './use-on-click-outside';
+export * from './use-theme';
+export * from './use-dropdown';
+export * from './use-tweak-styles';
+export * from './use-did-mount-effect';

package/src/hooks/use-did-mount-effect.ts

@@ -0,0 +1,21 @@
+import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
+
+export const useDidMountEffect = (
+  effect: EffectCallback,
+  dependencies: DependencyList,
+): void => {
+  const isMountedRef = useRef(false);
+  useEffect(() => {
+    let unmount: ReturnType<EffectCallback>;
+    if (isMountedRef.current) {
+      unmount = effect();
+    } else {
+      isMountedRef.current = true;
+    }
+    return () => {
+      if (unmount !== undefined) {
+        unmount();
+      }
+    };
+  }, dependencies);
+};

package/src/hooks/use-dropdown.ts

@@ -0,0 +1,85 @@
+import { DependencyList, useEffect } from 'react';
+import usePopper, { VirtualElement } from 'react-overlays/usePopper';
+
+import { IDropdownWithPopperOptions } from '../types';
+import { getScrollParent, minWidthModifier } from '../helpers';
+
+export const useDropdown = ({
+  isOpen,
+  onDropdownClose,
+  referenceElement,
+  dropdownElement,
+  options,
+  dependenciesForPositionUpdating = [],
+}: {
+  isOpen: boolean;
+  onDropdownClose: () => void;
+  referenceElement: VirtualElement | null | undefined;
+  dropdownElement: HTMLElement | null | undefined;
+  options?: IDropdownWithPopperOptions;
+  dependenciesForPositionUpdating?: DependencyList;
+}): ReturnType<typeof usePopper> | undefined => {
+  const {
+    shouldUsePopper = false,
+    shouldRenderInBody = false,
+    shouldHideOnScroll = false,
+    scrollParent = 'document',
+    canBeFlipped = false,
+    modifiers = [],
+    placement = 'bottom-start',
+    flipOptions,
+  } = options ?? {};
+
+  useEffect(() => {
+    if (!shouldHideOnScroll || !isOpen) {
+      return;
+    }
+
+    const scrollParentEl =
+      scrollParent === 'auto'
+        ? getScrollParent(referenceElement as Element)
+        : scrollParent === 'document'
+        ? document
+        : scrollParent;
+    scrollParentEl.addEventListener('scroll', onDropdownClose);
+
+    return () => {
+      scrollParentEl.removeEventListener('scroll', onDropdownClose);
+    };
+  }, [shouldHideOnScroll, isOpen]);
+
+  let popperData: ReturnType<typeof usePopper> | undefined;
+  if (shouldUsePopper) {
+    popperData = usePopper(referenceElement, dropdownElement, {
+      enabled: isOpen,
+      placement,
+      modifiers: [
+        ...(shouldRenderInBody ? [minWidthModifier] : []),
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 6],
+          },
+        },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: canBeFlipped
+              ? ['bottom-start', 'top-start']
+              : ['bottom-start'],
+            ...flipOptions,
+          },
+        },
+        ...modifiers,
+      ],
+    });
+  }
+
+  useEffect(() => {
+    if (dependenciesForPositionUpdating.length !== 0) {
+      popperData?.update();
+    }
+  }, dependenciesForPositionUpdating);
+
+  return popperData;
+};

package/src/hooks/use-is-mounted.ts

@@ -0,0 +1,15 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export const useIsMounted = (): (() => boolean) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return useCallback(() => isMounted.current, []);
+};

package/src/hooks/use-on-click-outside.ts

@@ -0,0 +1,92 @@
+import { RefObject, useEffect } from 'react';
+
+export const checkElementParentsClassNames = (
+  element: HTMLElement,
+  className: string,
+): boolean => {
+  if (element.classList.contains(className)) {
+    return true;
+  }
+
+  if (element === document.body) {
+    return false;
+  }
+
+  if (element.parentElement) {
+    return checkElementParentsClassNames(element.parentElement, className);
+  }
+
+  return false;
+};
+
+export const isElementOneOfParents = (
+  element: HTMLElement,
+  elToSearch: HTMLElement,
+): boolean => {
+  if (element === elToSearch) {
+    return true;
+  }
+
+  if (element === document.body) {
+    return false;
+  }
+
+  if (element.parentElement) {
+    return isElementOneOfParents(element.parentElement, elToSearch);
+  }
+
+  return false;
+};
+
+export function useOnClickOutsideWithRef<
+  Elem extends HTMLElement,
+  IgnoreElem extends HTMLElement,
+>(
+  ref: RefObject<Elem>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  ignoreRef?: RefObject<IgnoreElem>,
+): void {
+  useOnClickOutside(ref, handler, undefined, ignoreRef);
+}
+
+export function useOnClickOutside<
+  Elem extends HTMLElement,
+  IgnoreElem extends HTMLElement,
+>(
+  ref: RefObject<Elem>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  ignoreClassName?: string,
+  ignoreRef?: RefObject<IgnoreElem>,
+): void {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
+        return;
+      }
+
+      if (
+        (ignoreClassName !== undefined &&
+          checkElementParentsClassNames(
+            event.target as HTMLElement,
+            ignoreClassName,
+          )) ||
+        (ignoreRef !== undefined &&
+          ignoreRef.current !== null &&
+          isElementOneOfParents(event.target as HTMLElement, ignoreRef.current))
+      ) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler, ignoreClassName]);
+}