@true-engineering/true-react-common-ui-kit 3.25.1 → 3.26.0

package/src/components/Button/Button.tsx

@@ -1,129 +1,129 @@
-import { ReactNode, ButtonHTMLAttributes, MouseEvent, forwardRef } from 'react';
-import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { renderIcon, IIcon } from '../Icon';
-import { ThemedPreloader, IThemedPreloaderProps } from '../ThemedPreloader';
-import { IButtonSize, IButtonView } from './types';
-import { useStyles, IButtonStyles, getPreloaderStyles } from './Button.styles';
-
-export interface IButtonProps extends ICommonProps<IButtonStyles> {
-  children?: ReactNode;
-  /** @default 'button' */
-  type?: ButtonHTMLAttributes<unknown>['type'];
-  /** @default 'l' */
-  size?: IButtonSize;
-  /** @default 'primary' */
-  view?: IButtonView;
-  /** @default false */
-  shouldSkipTabNavigation?: boolean;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default false */
-  isFullWidth?: boolean;
-  /**
-   * Нужно ли убирать скругление у кнопки слева
-   * @default false
-   */
-  isInline?: boolean;
-  /**
-   * Нужно ли показать лоадер и заблокировать кнопку
-   * @default false
-   */
-  isLoading?: boolean;
-  /** @default false */
-  isActive?: boolean;
-  icon?: IIcon;
-  /** @default 'left' */
-  iconPosition?: 'left' | 'right';
-  /** @default 'dots' */
-  preloaderType?: IThemedPreloaderProps['type'];
-  onClick?: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;
-  onMouseDown?: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;
-}
-
-export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
-  (
-    {
-      type = 'button',
-      children,
-      size = 'l',
-      view = 'primary',
-      isFullWidth = false,
-      isInline = false,
-      isDisabled = false,
-      isActive = false,
-      isLoading = false,
-      shouldSkipTabNavigation = false,
-      data,
-      testId,
-      tweakStyles,
-      icon,
-      iconPosition = 'left',
-      preloaderType = 'dots',
-      onClick,
-      onMouseDown,
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const tweakPreloaderStyles = useTweakStyles({
-      innerStyles: getPreloaderStyles(size),
-      tweakStyles,
-      className: 'tweakPreloader',
-      currentComponentName: 'Button',
-    });
-
-    const hasIcon = isReactNodeNotEmpty(icon);
-    const hasChildren = isReactNodeNotEmpty(children);
-    const hasNoAction = isDisabled || isLoading;
-
-    return (
-      <button
-        ref={ref}
-        type={type}
-        className={clsx(classes.root, classes[size], classes[view], {
-          [classes.disabled]: isDisabled,
-          [classes.fullWidth]: isFullWidth,
-          [classes.inline]: isInline,
-          [classes.active]: isActive,
-          [classes.loading]: isLoading,
-          [classes.onlyIcon]: hasIcon && !hasChildren,
-        })}
-        tabIndex={shouldSkipTabNavigation ? -1 : undefined}
-        disabled={hasNoAction}
-        onClick={!hasNoAction ? onClick : undefined}
-        onMouseDown={!hasNoAction ? onMouseDown : undefined}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
-      >
-        <span
-          className={clsx(classes.content, {
-            [classes.iconFromRight]: hasChildren && hasIcon && iconPosition === 'right',
-            [classes.iconFromLeft]: hasChildren && hasIcon && iconPosition === 'left',
-          })}
-        >
-          {hasIcon && (
-            <span className={classes.icon}>{isReactNodeNotEmpty(icon) && renderIcon(icon)}</span>
-          )}
-          {hasChildren && (
-            <span className={clsx(classes.children, hasIcon && classes.withIcon)}>{children}</span>
-          )}
-        </span>
-
-        {isLoading && (
-          <span className={classes.loader}>
-            <ThemedPreloader
-              type={preloaderType}
-              useCurrentColor
-              tweakStyles={tweakPreloaderStyles}
-            />
-          </span>
-        )}
-      </button>
-    );
-  },
-);
+import { ReactNode, ButtonHTMLAttributes, MouseEvent, forwardRef } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps, IDomElementInteractions } from '../../types';
+import { renderIcon, IIcon } from '../Icon';
+import { ThemedPreloader, IThemedPreloaderProps } from '../ThemedPreloader';
+import { IButtonSize, IButtonView } from './types';
+import { useStyles, IButtonStyles, getPreloaderStyles } from './Button.styles';
+
+export interface IButtonProps
+  extends ICommonProps<IButtonStyles>,
+    IDomElementInteractions<HTMLButtonElement> {
+  children?: ReactNode;
+  /** @default 'button' */
+  type?: ButtonHTMLAttributes<unknown>['type'];
+  /** @default 'l' */
+  size?: IButtonSize;
+  /** @default 'primary' */
+  view?: IButtonView;
+  /** @default false */
+  shouldSkipTabNavigation?: boolean;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isFullWidth?: boolean;
+  /**
+   * Нужно ли убирать скругление у кнопки слева
+   * @default false
+   */
+  isInline?: boolean;
+  /**
+   * Нужно ли показать лоадер и заблокировать кнопку
+   * @default false
+   */
+  isLoading?: boolean;
+  /** @default false */
+  isActive?: boolean;
+  icon?: IIcon;
+  /** @default 'left' */
+  iconPosition?: 'left' | 'right';
+  /** @default 'dots' */
+  preloaderType?: IThemedPreloaderProps['type'];
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+  onMouseDown?: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+}
+
+export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
+  (
+    {
+      type = 'button',
+      children,
+      size = 'l',
+      view = 'primary',
+      isFullWidth = false,
+      isInline = false,
+      isDisabled = false,
+      isActive = false,
+      isLoading = false,
+      shouldSkipTabNavigation = false,
+      data,
+      testId,
+      tweakStyles,
+      icon,
+      iconPosition = 'left',
+      preloaderType = 'dots',
+      ...interactions
+    },
+    ref,
+  ) => {
+    const classes = useStyles({ theme: tweakStyles });
+
+    const tweakPreloaderStyles = useTweakStyles({
+      innerStyles: getPreloaderStyles(size),
+      tweakStyles,
+      className: 'tweakPreloader',
+      currentComponentName: 'Button',
+    });
+
+    const hasIcon = isReactNodeNotEmpty(icon);
+    const hasChildren = isReactNodeNotEmpty(children);
+    const hasNoAction = isDisabled || isLoading;
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={clsx(classes.root, classes[size], classes[view], {
+          [classes.disabled]: isDisabled,
+          [classes.fullWidth]: isFullWidth,
+          [classes.inline]: isInline,
+          [classes.active]: isActive,
+          [classes.loading]: isLoading,
+          [classes.onlyIcon]: hasIcon && !hasChildren,
+        })}
+        tabIndex={shouldSkipTabNavigation ? -1 : undefined}
+        disabled={hasNoAction}
+        {...interactions}
+        {...addDataTestId(testId)}
+        {...addDataAttributes(data)}
+      >
+        <span
+          className={clsx(classes.content, {
+            [classes.iconFromRight]: hasChildren && hasIcon && iconPosition === 'right',
+            [classes.iconFromLeft]: hasChildren && hasIcon && iconPosition === 'left',
+          })}
+        >
+          {hasIcon && (
+            <span className={classes.icon}>{isReactNodeNotEmpty(icon) && renderIcon(icon)}</span>
+          )}
+          {hasChildren && (
+            <span className={clsx(classes.children, hasIcon && classes.withIcon)}>{children}</span>
+          )}
+        </span>
+
+        {isLoading && (
+          <span className={classes.loader}>
+            <ThemedPreloader
+              type={preloaderType}
+              useCurrentColor
+              tweakStyles={tweakPreloaderStyles}
+            />
+          </span>
+        )}
+      </button>
+    );
+  },
+);

package/src/components/Colors/Colors.stories.tsx

@@ -1,7 +1,7 @@
-import { Colors } from './Colors';
-
-export default {
-  title: 'Data Display/Colors',
-};
-
-export const Default = (): JSX.Element => <Colors />;
+import { Colors } from './Colors';
+
+export default {
+  title: 'Data Display/Colors',
+};
+
+export const Default = (): JSX.Element => <Colors />;

package/src/components/DateInput/DateInput.tsx

@@ -1,90 +1,90 @@
-import { FormEvent, MouseEvent, forwardRef, ChangeEvent } from 'react';
-import clsx from 'clsx';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { IInputProps, Input } from '../Input';
-import { EMPTY_DATE_INPUT_VALUE, EMPTY_DATE_RANGE_INPUT_VALUE } from './constants';
-import { useStyles, IDateInputStyles } from './DateInput.styles';
-
-export interface IDateInputProps
-  extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange' | 'tweakStyles'>,
-    ICommonProps<IDateInputStyles> {
-  date?: string;
-  /** @default  '' */
-  startDate?: string;
-  /** @default '' */
-  endDate?: string;
-  className?: string;
-  /** @default false */
-  isRange?: boolean;
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-  // react-datepicker ожидает event первым аргументом
-  onChange?: (event: FormEvent<HTMLInputElement>, value: string) => void;
-}
-
-export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
-  (
-    {
-      date,
-      startDate = '',
-      endDate = '',
-      mask,
-      className,
-      placeholder,
-      data,
-      isRange = false,
-      tweakStyles,
-      onClick,
-      onChange,
-      ...inputProps
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const tweakInputStyles = useTweakStyles({
-      tweakStyles,
-      className: 'tweakInput',
-      currentComponentName: 'DateInput',
-    });
-
-    const beforeMaskedStateChange: IInputProps['beforeMaskedStateChange'] = ({ nextState }) => {
-      // Если в инпуте отсутствует введенное значение, то выставляем
-      // пустую строку для корректной работы react-datepicker
-      if (
-        nextState.value === EMPTY_DATE_INPUT_VALUE ||
-        nextState.value === EMPTY_DATE_RANGE_INPUT_VALUE
-      ) {
-        return { value: '', selection: { start: 0, end: 0 } };
-      }
-      return nextState;
-    };
-
-    const handleChange: IInputProps['onChange'] = (value, event) => {
-      // Событие click срабатывает только при нажатии на кнопку очистки
-      if (event.type === 'click') {
-        // react-datepicker ожидает пустую строку в event.target.value
-        (event as ChangeEvent<HTMLInputElement>).target.value = '';
-      }
-      onChange?.(event, value);
-    };
-
-    return (
-      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
-        <Input
-          {...inputProps}
-          ref={ref}
-          value={isRange ? `${startDate}${endDate}` : date}
-          mask={mask ?? (isRange ? '99.99.9999 - 99.99.9999' : '99.99.9999')}
-          placeholder={
-            placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
-          }
-          tweakStyles={tweakInputStyles}
-          onChange={handleChange}
-          beforeMaskedStateChange={beforeMaskedStateChange}
-        />
-      </div>
-    );
-  },
-);
+import { FormEvent, MouseEvent, forwardRef, ChangeEvent } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { IInputProps, Input } from '../Input';
+import { EMPTY_DATE_INPUT_VALUE, EMPTY_DATE_RANGE_INPUT_VALUE } from './constants';
+import { useStyles, IDateInputStyles } from './DateInput.styles';
+
+export interface IDateInputProps
+  extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange' | 'tweakStyles'>,
+    ICommonProps<IDateInputStyles> {
+  date?: string;
+  /** @default  '' */
+  startDate?: string;
+  /** @default '' */
+  endDate?: string;
+  className?: string;
+  /** @default false */
+  isRange?: boolean;
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+  // react-datepicker ожидает event первым аргументом
+  onChange?: (event: FormEvent<HTMLInputElement>, value: string) => void;
+}
+
+export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
+  (
+    {
+      date,
+      startDate = '',
+      endDate = '',
+      mask,
+      className,
+      placeholder,
+      data,
+      isRange = false,
+      tweakStyles,
+      onClick,
+      onChange,
+      ...inputProps
+    },
+    ref,
+  ) => {
+    const classes = useStyles({ theme: tweakStyles });
+
+    const tweakInputStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakInput',
+      currentComponentName: 'DateInput',
+    });
+
+    const beforeMaskedStateChange: IInputProps['beforeMaskedStateChange'] = ({ nextState }) => {
+      // Если в инпуте отсутствует введенное значение, то выставляем
+      // пустую строку для корректной работы react-datepicker
+      if (
+        nextState.value === EMPTY_DATE_INPUT_VALUE ||
+        nextState.value === EMPTY_DATE_RANGE_INPUT_VALUE
+      ) {
+        return { value: '', selection: { start: 0, end: 0 } };
+      }
+      return nextState;
+    };
+
+    const handleChange: IInputProps['onChange'] = (value, event) => {
+      // Событие click срабатывает только при нажатии на кнопку очистки
+      if (event.type === 'click') {
+        // react-datepicker ожидает пустую строку в event.target.value
+        (event as ChangeEvent<HTMLInputElement>).target.value = '';
+      }
+      onChange?.(event, value);
+    };
+
+    return (
+      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
+        <Input
+          {...inputProps}
+          ref={ref}
+          value={isRange ? `${startDate}${endDate}` : date}
+          mask={mask ?? (isRange ? '99.99.9999 - 99.99.9999' : '99.99.9999')}
+          placeholder={
+            placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
+          }
+          tweakStyles={tweakInputStyles}
+          onChange={handleChange}
+          beforeMaskedStateChange={beforeMaskedStateChange}
+        />
+      </div>
+    );
+  },
+);

package/src/components/DateInput/constants.ts

@@ -1,2 +1,2 @@
-export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
-export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;
+export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
+export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;

package/src/components/Description/Description.stories.tsx

@@ -1,27 +1,27 @@
-import { ComponentStory } from '@storybook/react';
-import { Description } from './Description';
-
-export default {
-  title: 'Data Display/Description',
-  component: Description,
-  argTypes: {
-    truncateIndex: {
-      control: { type: 'range', min: 20, max: 600, step: 10 },
-    },
-  },
-};
-
-const lorem =
-  'Lorem ipsum dolor, sit amet consectetur adipisicing. Alias necessitatibus quidem nobis molestiae dolor sed at, voluptatum nulla qui enim maiores consectetur dolorum atque odit id ratione pariatur ut nihil. http://google.com';
-
-const Template: ComponentStory<typeof Description> = (args) => <Description {...args} />;
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: lorem,
-  moreTitle: 'подробнее',
-  lessTitle: 'скрыть',
-  truncateIndex: 150,
-  isAlwaysOpen: false,
-};
+import { ComponentStory } from '@storybook/react';
+import { Description } from './Description';
+
+export default {
+  title: 'Data Display/Description',
+  component: Description,
+  argTypes: {
+    truncateIndex: {
+      control: { type: 'range', min: 20, max: 600, step: 10 },
+    },
+  },
+};
+
+const lorem =
+  'Lorem ipsum dolor, sit amet consectetur adipisicing. Alias necessitatibus quidem nobis molestiae dolor sed at, voluptatum nulla qui enim maiores consectetur dolorum atque odit id ratione pariatur ut nihil. http://google.com';
+
+const Template: ComponentStory<typeof Description> = (args) => <Description {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: lorem,
+  moreTitle: 'подробнее',
+  lessTitle: 'скрыть',
+  truncateIndex: 150,
+  isAlwaysOpen: false,
+};

package/src/components/Description/Description.tsx

@@ -1,61 +1,61 @@
-import { FC, useState } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { LINK_REGEXP } from './constants';
-import { useStyles, IDescriptionStyles } from './Description.styles';
-
-export interface IDescriptionProps extends ICommonProps<IDescriptionStyles> {
-  text: string;
-  moreTitle?: string;
-  lessTitle?: string;
-  /** @default 150 */
-  truncateIndex?: number;
-  /** @default true */
-  isAlwaysOpen?: boolean;
-}
-
-export const Description: FC<IDescriptionProps> = ({
-  text,
-  moreTitle,
-  lessTitle,
-  truncateIndex = 150,
-  isAlwaysOpen = true,
-  testId,
-  data,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const isTooShort = text.length < truncateIndex;
-  const [isOpen, setIsOpen] = useState(isAlwaysOpen);
-  const link = text.match(LINK_REGEXP);
-  const linkText = link && link[0];
-  const textWithNoLink = text.replace(LINK_REGEXP, '');
-
-  const shortText = text.slice(0, text.slice(0, truncateIndex).lastIndexOf(' '));
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {isAlwaysOpen || isOpen || isTooShort ? (
-        <div>
-          <span>{textWithNoLink} </span>
-          {!!linkText && (
-            <a className={classes.link} href={linkText} target="_blank" rel="noopener noreferrer">
-              {linkText}
-            </a>
-          )}
-        </div>
-      ) : (
-        <div>
-          <span>{shortText}</span>
-        </div>
-      )}
-      {isAlwaysOpen || isTooShort ? undefined : (
-        <div className={classes.button} onClick={() => setIsOpen(!isOpen)}>
-          {isOpen ? lessTitle : moreTitle}
-        </div>
-      )}
-    </div>
-  );
-};
+import { FC, useState } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { LINK_REGEXP } from './constants';
+import { useStyles, IDescriptionStyles } from './Description.styles';
+
+export interface IDescriptionProps extends ICommonProps<IDescriptionStyles> {
+  text: string;
+  moreTitle?: string;
+  lessTitle?: string;
+  /** @default 150 */
+  truncateIndex?: number;
+  /** @default true */
+  isAlwaysOpen?: boolean;
+}
+
+export const Description: FC<IDescriptionProps> = ({
+  text,
+  moreTitle,
+  lessTitle,
+  truncateIndex = 150,
+  isAlwaysOpen = true,
+  testId,
+  data,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const isTooShort = text.length < truncateIndex;
+  const [isOpen, setIsOpen] = useState(isAlwaysOpen);
+  const link = text.match(LINK_REGEXP);
+  const linkText = link && link[0];
+  const textWithNoLink = text.replace(LINK_REGEXP, '');
+
+  const shortText = text.slice(0, text.slice(0, truncateIndex).lastIndexOf(' '));
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      {isAlwaysOpen || isOpen || isTooShort ? (
+        <div>
+          <span>{textWithNoLink} </span>
+          {!!linkText && (
+            <a className={classes.link} href={linkText} target="_blank" rel="noopener noreferrer">
+              {linkText}
+            </a>
+          )}
+        </div>
+      ) : (
+        <div>
+          <span>{shortText}</span>
+        </div>
+      )}
+      {isAlwaysOpen || isTooShort ? undefined : (
+        <div className={classes.button} onClick={() => setIsOpen(!isOpen)}>
+          {isOpen ? lessTitle : moreTitle}
+        </div>
+      )}
+    </div>
+  );
+};