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

package/src/components/Toaster/index.ts

@@ -1,2 +1,2 @@
-export * from './Toaster';
-export type { ToasterStyles } from './Toaster.styles';
+export * from './Toaster';
+export type { ToasterStyles } from './Toaster.styles';

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,21 +1,19 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Tooltip } from './Tooltip';
-
-export default {
-  title: 'Tooltip',
-  component: Tooltip,
-  args: {
-    text: 'Tooltip Text',
-    view: 'tooltip',
-    type: 'info',
-  },
-  argTypes: {
-    text: { control: 'text' },
-    view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
-    type: { control: 'inline-radio', options: ['info', 'error'] },
-  },
-} as ComponentMeta<typeof Tooltip>;
-
-export const Default: ComponentStory<typeof Tooltip> = (args) => (
-  <Tooltip {...args} />
-);
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+
+export default {
+  title: 'Tooltip',
+  component: Tooltip,
+  args: {
+    text: 'Tooltip Text',
+    view: 'tooltip',
+    type: 'info',
+  },
+  argTypes: {
+    text: { control: 'text' },
+    view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
+    type: { control: 'inline-radio', options: ['info', 'error'] },
+  },
+} as ComponentMeta<typeof Tooltip>;
+
+export const Default: ComponentStory<typeof Tooltip> = (args) => <Tooltip {...args} />;

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

@@ -1,45 +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>;
+import { rgba } from '../../helpers';
+import { colors, dimensions } from '../../theme';
+import { ComponentStyles } from '../../types';
+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

@@ -1,40 +1,35 @@
-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>
-  );
-};
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+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

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

package/src/components/Tooltip/types.ts

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

package/src/components/index.ts

@@ -1,36 +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';
+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/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 './popper-helpers';
+export * from './phone';
+export * from './misc';
+export * from './deprecated';

package/src/helpers/misc.ts

@@ -0,0 +1,158 @@
+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) => {
+    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 getNumberLength = (n?: number): number =>
+  n === undefined || isNaN(n) ? 0 : n.toString().length;
+
+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]) =>
+      (isString(value) && isStringNotEmpty(value)) || isNotEmpty(value)
+        ? [`data-${transformToKebab(key)}`, value]
+        : [],
+    ),
+  );