@true-engineering/true-react-common-ui-kit 2.1.1 → 2.2.0

package/src/components/Switch/Switch.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes, addDataTestId, isNotEmpty } from '../../helpers';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
 import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { styles, SwitchStyles } from './Switch.styles';
@@ -67,7 +68,7 @@ export const Switch = <V extends string>({
           {...addDataTestId(testId, 'input')}
         />
       </span>
-      {isNotEmpty(children) && (
+      {isReactNodeNotEmpty(children) && (
         <span
           className={clsx(
             classes.label,

package/src/components/Toaster/Toaster.tsx

@@ -1,6 +1,11 @@
 import { FC, ReactNode, useEffect } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes, isNotEmpty } from '../../helpers';
+import {
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
 import { useTheme, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { CloseButton } from '../CloseButton';
@@ -87,11 +92,11 @@ export const Toaster: FC<IToasterProps> = ({
         <Icon type={`status-${type}`} />
       </div>
       <div>
-        {isNotEmpty(title) && <div className={classes.title}>{title}</div>}
-        {isNotEmpty(text) && <div className={classes.text}>{text}</div>}
-        {isNotEmpty(children) && <div className={classes.content}>{children}</div>}
+        {isStringNotEmpty(title) && <div className={classes.title}>{title}</div>}
+        {isStringNotEmpty(text) && <div className={classes.text}>{text}</div>}
+        {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
       </div>
-      {hasCloseButton && onClose !== undefined && (
+      {hasCloseButton && isNotEmpty(onClose) && (
         <div className={classes.close}>
           <CloseButton
             onClose={onClose}

package/src/helpers/deprecated.ts

@@ -0,0 +1,22 @@
+import {
+  addClickHandler as addClickHandlerHelper,
+  addDataTestId as addDataTestIdHelper,
+  createFilter as createFilterHelper,
+  getSelectKeyHandler as getSelectKeyHandlerHelper,
+  getTestId as getTestIdHelper,
+  isEmpty as isEmptyHelper,
+  isNumberInteger,
+  isString,
+  isStringNotEmpty as isStringNotEmptyHelper,
+} from '@true-engineering/true-react-platform-helpers';
+
+export const isInt = isNumberInteger;
+export const addClickHandler = addClickHandlerHelper;
+export const addDataTestId = addDataTestIdHelper;
+export const createFilter = createFilterHelper;
+export const getSelectKeyHandler = getSelectKeyHandlerHelper;
+export const getTestId = getTestIdHelper;
+export const isStringNotEmpty = isStringNotEmptyHelper;
+export const isEmpty = isEmptyHelper;
+export const isNotEmpty = <T>(val: T | null | undefined): val is T =>
+  (isString(val) && isStringNotEmpty(val)) || isNotEmpty(val);

package/src/helpers/index.ts

@@ -1,4 +1,4 @@
-export * from './colors';
-export * from './utils';
 export * from './popper-helpers';
 export * from './phone';
+export * from './misc';
+export * from './deprecated';

package/src/helpers/{utils.ts → misc.ts}

@@ -1,6 +1,13 @@
-import { HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';
+import hexToRgba from 'hex-to-rgba';
+import {
+  isNotEmpty,
+  isString,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { IDataAttributes } from '../types';
 
+export const rgba = hexToRgba;
+
 export const transformToKebab = (string: string): string => {
   let result = '';
   string.split('').forEach((char) => {
@@ -135,97 +142,17 @@ export const setCaretPosition = (elem: HTMLInputElement, caretPos: number | null
 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;
 
-// TODO: Не должен проверять строку, т.к. под это есть отдельный хелпер
-/**
- * Проверяет, что `val` не `null`, не `undefined` и не пустая строка
- */
-export const isNotEmpty = <T>(val: T | null | undefined): val is T =>
-  typeof val === 'string' ? val.trim() !== '' : val !== null && val !== undefined;
-
-/**
- * Проверяет, что переданное значение `null` или `undefined`
- */
-export const isEmpty = <T>(val: T | null | undefined): val is null | undefined =>
-  val === null || val === undefined;
-
-/**
- * Проверяет, что передана непустая строка
- */
-export const isStringNotEmpty = <T extends string>(value: T | undefined | null): value is T =>
-  (value ?? '').trim() !== '';
-
 export const trimStringToMaxLength = (val: string, maxLength: number) =>
   val.length > maxLength ? val.slice(0, maxLength) : val;
 
 export const addDataAttributes = (data: IDataAttributes = {}): IDataAttributes =>
   Object.fromEntries(
     Object.entries(data).map(([key, value]) =>
-      isNotEmpty(value) ? [`data-${transformToKebab(key)}`, value] : [],
+      (isString(value) && isStringNotEmpty(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;
-};
-
-export const getTestId = (
-  testId: string | undefined,
-  postfix?: string | number,
-): string | undefined => {
-  if (!isNotEmpty(testId)) {
-    return undefined;
-  }
-  return isNotEmpty(postfix) ? `${testId}-${postfix}` : testId;
-};
-
-export const getSelectKeyHandler =
-  (cb: (e: KeyboardEvent) => void): ((e: KeyboardEvent) => void) =>
-  (e) => {
-    if (e.code === 'Enter' || e.code === 'NumpadEnter') {
-      cb(e);
-    }
-  };
-
-export const addClickHandler = (
-  cb?: (e: MouseEvent | KeyboardEvent) => void,
-  hasAction = true,
-): HTMLAttributes<unknown> =>
-  hasAction && isNotEmpty(cb)
-    ? {
-        tabIndex: 0,
-        onClick: cb as (e: MouseEvent) => void,
-        onKeyDown: getSelectKeyHandler(cb),
-      }
-    : {
-        tabIndex: -1,
-      };
-
-/**
- * Позволяет создать текстовый фильтр для набора items
- * @param getter - функция возвращающая набор строковых значений из каждого item,
- * по которым должен осуществляться поиск
- */
-export const createFilter =
-  <T>(
-    getter: (item: T) => Array<string | undefined>,
-    compareFn?: (item: string, query: string) => boolean,
-  ): ((items: T[], query: string) => T[]) =>
-  (items, query) =>
-    items.filter((item) => {
-      const possibleValues = getter(item).reduce(
-        (acc, cur) => [...acc, ...(isStringNotEmpty(cur) ? [cur.toLowerCase()] : [])],
-        [] as string[],
-      );
-      const queryString = query.toLowerCase().trim();
-      return possibleValues.some((v) =>
-        (compareFn ?? (() => v?.includes(queryString)))(v, queryString),
-      );
-    });

package/src/helpers/phone.ts

@@ -1,16 +1,16 @@
+import { isNotEmpty, isEmpty } from '@true-engineering/true-react-platform-helpers';
 import { phoneInfo, IPhoneInfo, IPhoneValue } from '../components';
-import { isNotEmpty } from './utils';
 
 export const findCountryByCode = (
   countryCode?: string,
   countriesList = phoneInfo,
 ): IPhoneInfo | undefined =>
-  countryCode !== undefined
+  isNotEmpty(countryCode)
     ? countriesList.find((info) => info.countryCode === countryCode)
     : undefined;
 
 export const findCountryIndexByCode = (countryCode?: string, countriesList = phoneInfo): number =>
-  countryCode !== undefined
+  isNotEmpty(countryCode)
     ? countriesList.findIndex((info) => info.countryCode === countryCode)
     : -1;
 
@@ -47,7 +47,7 @@ export const getCountryCodeFromPhone = (phoneWithCode: string): string | undefin
     info.fullCodes.some((code) => phoneWithCode.startsWith(code)),
   )?.countryCode;
 
-  if (countryCode === undefined && isNotEmpty(phoneWithCode)) {
+  if (isEmpty(countryCode) && isNotEmpty(phoneWithCode)) {
     // если не нашли уникальный fullCode (dialCode + arealCode),
     // то пробуем найти dialCode и выбираем с наименьшим Priority
     countryCode = phoneInfo
@@ -72,7 +72,7 @@ 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) {
+  if (isNotEmpty(countryCode)) {
     const countrySettings = findCountryByCode(countryCode);
 
     if (countrySettings !== undefined) {

package/src/helpers/snippets.tsx

@@ -1,5 +1,6 @@
-import { ReactElement, ReactNode } from 'react';
-import { Icon, IIconType } from '../components';
+import { ReactNode } from 'react';
+import { Icon } from '../components';
+import { IIcon } from '../types';
 
-export const renderIcon = (icon: IIconType | ReactElement): ReactNode =>
+export const renderIcon = (icon: IIcon): ReactNode =>
   typeof icon === 'string' ? <Icon type={icon} /> : icon;

package/src/types.ts

@@ -1,6 +1,13 @@
+import { ReactElement } from 'react';
 import { Styles } from 'react-jss';
 import { Modifier, Placement } from 'react-overlays/usePopper';
-import { ICommonIcon, IComplexIcon, IPreloaderSvgType, ISvgIcon } from './components';
+import type {
+  ICommonIcon,
+  IComplexIcon,
+  IIconType,
+  IPreloaderSvgType,
+  ISvgIcon,
+} from './components';
 
 export interface IDataAttributes {
   [key: string]: unknown;
@@ -25,6 +32,8 @@ export interface IDropdownWithPopperOptions {
   flipOptions?: Record<string, any>; // только с shouldUsePopper
 }
 
+export type IIcon = IIconType | ReactElement;
+
 export type ComponentStyles<StyleSheet, Props = unknown> = Partial<Styles<keyof StyleSheet, Props>>;
 
 // TODO: Скрипт

package/dist/helpers/colors.d.ts

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

package/dist/helpers/utils.d.ts

@@ -1,43 +0,0 @@
-import { HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';
-import { IDataAttributes } from '../types';
-export declare const transformToKebab: (string: string) => string;
-export declare const hasExactParent: (element: Element, parent: Element) => boolean;
-export declare const getParentNode: (element: Element | ShadowRoot | Document) => Element;
-export declare const getStyleComputedProperty: (element: Element) => Partial<CSSStyleDeclaration>;
-export declare const getScrollParent: (element: Element | Document) => Element;
-export declare const isElementOffScreen: (element: HTMLElement, input?: HTMLElement) => boolean;
-export declare const getNumberInRange: (value: number, min?: number, max?: number) => number;
-export declare const formatStringNumber: (val?: string, separator?: string) => string;
-export declare const formatNumber: (val?: number, separator?: string) => string;
-export declare const removeStringFormat: (val?: string) => string;
-export declare const stringToNumber: (val?: string) => number | undefined;
-export declare const setCaretPosition: (elem: HTMLInputElement, caretPos: number | null) => void;
-export declare const isSpaceChar: (char?: string) => boolean;
-export declare const isInt: (n: number) => boolean;
-export declare const getNumberLength: (n?: number) => number;
-/**
- * Проверяет, что `val` не `null`, не `undefined` и не пустая строка
- */
-export declare const isNotEmpty: <T>(val: T | null | undefined) => val is T;
-/**
- * Проверяет, что переданное значение `null` или `undefined`
- */
-export declare const isEmpty: <T>(val: T | null | undefined) => val is null | undefined;
-/**
- * Проверяет, что передана непустая строка
- */
-export declare const isStringNotEmpty: <T extends string>(value: T | null | undefined) => value is T;
-export declare const trimStringToMaxLength: (val: string, maxLength: number) => string;
-export declare const addDataAttributes: (data?: IDataAttributes) => IDataAttributes;
-export declare const addDataTestId: (testId: string | undefined, postfix?: string | number | undefined) => {
-    'data-testid': string;
-} | undefined;
-export declare const getTestId: (testId: string | undefined, postfix?: string | number) => string | undefined;
-export declare const getSelectKeyHandler: (cb: (e: KeyboardEvent) => void) => (e: KeyboardEvent) => void;
-export declare const addClickHandler: (cb?: ((e: MouseEvent | KeyboardEvent) => void) | undefined, hasAction?: boolean) => HTMLAttributes<unknown>;
-/**
- * Позволяет создать текстовый фильтр для набора items
- * @param getter - функция возвращающая набор строковых значений из каждого item,
- * по которым должен осуществляться поиск
- */
-export declare const createFilter: <T>(getter: (item: T) => Array<string | undefined>, compareFn?: ((item: string, query: string) => boolean) | undefined) => (items: T[], query: string) => T[];

package/src/helpers/colors.ts

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

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

@@ -1,9 +0,0 @@
-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;