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

package/src/types.ts

@@ -1,105 +1,107 @@
-import { Styles } from 'react-jss';
-import { Modifier, Placement } from 'react-overlays/usePopper';
-import {
-  ICommonIcon,
-  IComplexIcon,
-  IPreloaderSvgType,
-  ISvgIcon,
-} from './components';
-
-export interface IDataAttributes {
-  [key: string]: unknown;
-}
-
-export interface ICommonProps {
-  data?: IDataAttributes;
-}
-
-export interface IDropdownWithPopperOptions {
-  shouldUsePopper?: boolean;
-  shouldRenderInBody?: boolean;
-  scrollParent?: 'auto' | 'document' | Element;
-
-  shouldHideOnScroll?: boolean; // работает весьма условно без shouldUsePopper
-  canBeFlipped?: boolean; // только с shouldUsePopper
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  modifiers?: Array<Partial<Modifier<any, any>>>; // только с shouldUsePopper
-  placement?: Placement; // only with shouldUsePopper
-  // https://popper.js.org/docs/v2/modifiers/flip/
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  flipOptions?: Record<string, any>; // только с shouldUsePopper
-}
-
-export type ComponentStyles<StyleSheet, Props = unknown> = Partial<
-  Styles<keyof StyleSheet, Props>
->;
-
-// TODO: Скрипт
-export type ComponentName =
-  | 'AccountInfo'
-  | 'AddButton'
-  | 'Button'
-  | 'CloseButton'
-  | 'Checkbox'
-  | 'CssBaseline'
-  | 'Colors'
-  | 'DateInput'
-  | 'DatePicker'
-  | 'DatePickerHeader'
-  | 'Description'
-  | 'DotsPreloader'
-  | 'SvgPreloader'
-  | 'FiltersPane'
-  | 'FilterInterval'
-  | 'FilterSelect'
-  | 'FilterWithDates'
-  | 'FilterWithPeriod'
-  | 'FilterWrapper'
-  | 'FiltersPaneSearch'
-  | 'Flag'
-  | 'FlexibleTable'
-  | 'Icon'
-  | 'IncrementInput'
-  | 'Input'
-  | 'List'
-  | 'Modal'
-  | 'MoreMenu'
-  | 'MultiSelect'
-  | 'MultiSelectInput'
-  | 'MultiSelectList'
-  | 'Notification'
-  | 'PhoneInput'
-  | 'PhoneInputCountryList'
-  | 'RadioButton'
-  | 'SearchInput'
-  | 'Select'
-  | 'SelectList'
-  | 'ScrollIntoViewIfNeeded'
-  | 'Switch'
-  | 'TextArea'
-  | 'TextWithInfo'
-  | 'TextWithTooltip'
-  | 'ThemedPreloader'
-  | 'Tooltip'
-  | 'Toaster';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type UiKitAnimations = Record<string, any>;
-export type UiKitHelpers = Record<string, Styles | (() => Styles)>;
-
-export interface UiKitTheme {
-  name: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
-  /**
-   * Для переопределения иконок, которые есть в UiKit
-   */
-  icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
-  complexIcons?: Partial<Record<IComplexIcon, string>>;
-  preloaders?: Partial<Record<IPreloaderSvgType, string>>; // TODO: заменить string
-  animations?: UiKitAnimations;
-  colors?: Record<string, string>;
-  dimensions?: Record<string, number>;
-  boxShadows?: Record<string, string>;
-  helpers?: UiKitHelpers;
-}
+import { ReactElement } from 'react';
+import { Styles } from 'react-jss';
+import { Modifier, Placement } from 'react-overlays/usePopper';
+import type {
+  ICommonIcon,
+  IComplexIcon,
+  IIconType,
+  IPreloaderSvgType,
+  ISvgIcon,
+} from './components';
+
+export interface IDataAttributes {
+  [key: string]: unknown;
+}
+
+export interface ICommonProps {
+  data?: IDataAttributes;
+}
+
+export interface IDropdownWithPopperOptions {
+  shouldUsePopper?: boolean;
+  shouldRenderInBody?: boolean;
+  scrollParent?: 'auto' | 'document' | Element;
+
+  shouldHideOnScroll?: boolean; // работает весьма условно без shouldUsePopper
+  canBeFlipped?: boolean; // только с shouldUsePopper
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  modifiers?: Array<Partial<Modifier<any, any>>>; // только с shouldUsePopper
+  placement?: Placement; // only with shouldUsePopper
+  // https://popper.js.org/docs/v2/modifiers/flip/
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  flipOptions?: Record<string, any>; // только с shouldUsePopper
+}
+
+export type IIcon = IIconType | ReactElement;
+
+export type ComponentStyles<StyleSheet, Props = unknown> = Partial<Styles<keyof StyleSheet, Props>>;
+
+// TODO: Скрипт
+export type ComponentName =
+  | 'AccountInfo'
+  | 'AddButton'
+  | 'Button'
+  | 'CloseButton'
+  | 'Checkbox'
+  | 'CssBaseline'
+  | 'Colors'
+  | 'DateInput'
+  | 'DatePicker'
+  | 'DatePickerHeader'
+  | 'Description'
+  | 'DotsPreloader'
+  | 'SvgPreloader'
+  | 'FiltersPane'
+  | 'FilterInterval'
+  | 'FilterSelect'
+  | 'FilterWithDates'
+  | 'FilterWithPeriod'
+  | 'FilterWrapper'
+  | 'FiltersPaneSearch'
+  | 'Flag'
+  | 'FlexibleTable'
+  | 'Icon'
+  | 'IncrementInput'
+  | 'Input'
+  | 'List'
+  | 'Modal'
+  | 'MoreMenu'
+  | 'MultiSelect'
+  | 'MultiSelectInput'
+  | 'MultiSelectList'
+  | 'Notification'
+  | 'PhoneInput'
+  | 'PhoneInputCountryList'
+  | 'RadioButton'
+  | 'SearchInput'
+  | 'Select'
+  | 'SelectList'
+  | 'ScrollIntoViewIfNeeded'
+  | 'Switch'
+  | 'TextArea'
+  | 'TextWithInfo'
+  | 'TextWithTooltip'
+  | 'ThemedPreloader'
+  | 'Tooltip'
+  | 'Toaster';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type UiKitAnimations = Record<string, any>;
+export type UiKitHelpers = Record<string, Styles | (() => Styles)>;
+
+export interface UiKitTheme {
+  name: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
+  /**
+   * Для переопределения иконок, которые есть в UiKit
+   */
+  icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
+  complexIcons?: Partial<Record<IComplexIcon, string>>;
+  preloaders?: Partial<Record<IPreloaderSvgType, string>>; // TODO: заменить string
+  animations?: UiKitAnimations;
+  colors?: Record<string, string>;
+  dimensions?: Record<string, number>;
+  boxShadows?: Record<string, string>;
+  helpers?: UiKitHelpers;
+}

package/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

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 { IDataAttributes } from '../types';
-import { HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';
-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,2 +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;

package/src/helpers/utils.ts

@@ -1,261 +0,0 @@
-import { IDataAttributes } from '../types';
-import { HTMLAttributes, KeyboardEvent, MouseEvent } from 'react';
-
-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 hasExactParent = (element: Element, parent: Element): boolean => {
-  if (element === parent) {
-    return true; // Found the exact parent
-  }
-
-  const parentNode = getParentNode(element);
-
-  if (parentNode === element) {
-    return false; // Reached the top-level HTML element or Shadow DOM host
-  }
-
-  return hasExactParent(parentNode, parent);
-};
-
-export const getParentNode = (
-  element: Element | ShadowRoot | Document,
-): Element =>
-  element.nodeName === 'HTML' || element === document
-    ? (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;
-
-// 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] : [],
-    ),
-  );
-
-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),
-      );
-    });