@true-engineering/true-react-common-ui-kit 4.0.0-alpha54 → 4.0.0-alpha61

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import { FocusEventHandler, KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
 import { Modifier, Placement } from 'react-overlays/usePopper';
-import { JssStyle } from 'jss';
-import { IMaybeArray } from './theme';
+import { IMaybeArray } from '@true-engineering/true-react-platform-helpers';
+import { IStyle } from './theme';
 export interface ITestIdProps {
     testId?: string;
 }
@@ -45,7 +45,7 @@ export interface IDomElementInteractions<T> {
     onPointerUp?: PointerEventHandler<T>;
 }
 export type IRenderNode<T> = ReactNode | ((props: T) => ReactNode);
-export type IExtendableProps<T extends string | readonly string[]> = Record<T extends ReadonlyArray<infer P> ? P : T, JssStyle>;
+export type IExtendableProps<T extends string | readonly string[]> = Record<T extends ReadonlyArray<infer P> ? P : T, IStyle>;
 export type IDefaultExtendableProps = IExtendableProps<'custom'>;
 export type IWithPrefix<T, P extends string> = {
     [K in keyof T as `${P}${K & string}`]: T[K];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha54",
+  "version": "4.0.0-alpha61",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -55,7 +55,6 @@
     "filesize": "10.1.1",
     "hex-to-rgba": "2.0.1",
     "jss": "10.10.0",
-    "lodash-es": "4.17.21",
     "react": "^18.2.0",
     "react-datepicker": "8.4.0",
     "react-dom": "^18.2.0",
@@ -72,7 +71,6 @@
     "@storybook/react": "9.1.10",
     "@swc/core": "1.3.30",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
-    "@types/lodash-es": "4.17.11",
     "@types/node": "24.7.2",
     "@types/react": "18.2.79",
     "@types/react-dom": "18.2.25",

package/src/components/AccountInfo/AccountInfo.tsx

@@ -1,8 +1,7 @@
 import { FC, ReactNode, useRef, useState, MouseEvent } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
@@ -46,7 +45,7 @@ export const AccountInfo: FC<IAccountInfoProps> = ({
   useOnClickOutsideWithRef(dropdownRef, () => setIsMenuOpen(false), nameRef);
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       {avatar ?? (
         <div className={classes.avatarIcon}>
           <Icon type="avatar" />

package/src/components/AddButton/AddButton.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { useStyles, IAddButtonStyles } from './AddButton.styles';
@@ -17,7 +16,7 @@ export interface IAddButtonProps extends ICommonProps<IAddButtonStyles> {
   onClick?: () => void | Promise<void>;
 }
 
-// TODO: Весьма сомнительный компонент
+/** @deprecated Весьма сомнительный компонент */
 export const AddButton: FC<IAddButtonProps> = ({
   text,
   type = 'button',
@@ -40,8 +39,7 @@ export const AddButton: FC<IAddButtonProps> = ({
       )}
       onClick={!isDisabled ? onClick : undefined}
       disabled={isDisabled}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <div className={classes.icon}>
         <Icon type="plus" />

package/src/components/Button/Button.tsx

@@ -1,7 +1,9 @@
 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 {
+  addDataAttributes,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps, IDomElementInteractions } from '../../types';
 import { renderIcon, IIcon } from '../Icon';
@@ -46,84 +48,81 @@ export interface IButtonProps
   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 });
+export const Button = forwardRef<HTMLButtonElement, IButtonProps>(function Button(
+  {
+    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 tweakPreloaderStyles = useTweakStyles({
+    innerStyles: getPreloaderStyles(size),
+    tweakStyles,
+    className: 'tweakPreloader',
+    currentComponentName: 'Button',
+  });
 
-    const hasIcon = isReactNodeNotEmpty(icon);
-    const hasChildren = isReactNodeNotEmpty(children);
-    const hasNoAction = isDisabled || isLoading;
+  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,
+  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}
+      {...addDataAttributes(data, testId)}
+    >
+      <span
+        className={clsx(classes.content, {
+          [classes.iconFromRight]: hasChildren && hasIcon && iconPosition === 'right',
+          [classes.iconFromLeft]: hasChildren && hasIcon && iconPosition === 'left',
         })}
-        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>
+        {hasIcon && (
+          <span className={classes.icon}>{isReactNodeNotEmpty(icon) && renderIcon(icon)}</span>
         )}
-      </button>
-    );
-  },
-);
+        {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/CloseButton/CloseButton.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { ICloseButtonStyles, useStyles } from './CloseButton.styles';
@@ -26,8 +25,7 @@ export const CloseButton: FC<ICloseButtonProps> = ({
       type="button"
       className={classes.root}
       onClick={onClose}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <Icon type={icon} />
     </button>

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

@@ -1,8 +1,9 @@
 import { FC } from 'react';
+import { createUseStyles } from 'react-jss';
 import { type Meta } from '@storybook/react';
-import { createThemedStyles, useTheme } from '../../theme';
+import { useTheme } from '../../theme';
 
-const useStyles = createThemedStyles({
+const useStyles = createUseStyles({
   root: {
     display: 'flex',
     flexWrap: 'wrap',

package/src/components/ControlWrapper/ControlWrapper.tsx

@@ -5,12 +5,12 @@ import {
   addDataAttributes,
   addDataTestId,
   getArray,
+  IMaybeArray,
   isArrayNotEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
-import { IMaybeArray } from '../../theme';
 import { IClickHandlerEvent, ICommonProps } from '../../types';
 import { IIcon, renderIcon } from '../Icon';
 import { ThemedPreloader } from '../ThemedPreloader';
@@ -89,7 +89,7 @@ export const ControlWrapper: FC<IControlWrapperProps> = ({
     (node: HTMLDivElement | null) => {
       setStartControlsWidth(node?.clientWidth);
     },
-    // eslint-disable-next-line
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [startIcon, size],
   );
 

package/src/components/CssBaseline/CssBaseline.styles.ts

@@ -8,6 +8,8 @@ export const useStyles = createThemedStyles('CssBaseline', {
     margin: 0,
   },
 
+  '@global': {},
+
   root: {},
 });
 

package/src/components/CssBaseline/CssBaseline.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
 import { useStyles, ICssBaselineStyles } from './CssBaseline.styles';
 
@@ -9,5 +8,5 @@ export type ICssBaselineProps = ICommonProps<ICssBaselineStyles>;
 export const CssBaseline: FC<ICssBaselineProps> = ({ data, testId, tweakStyles }) => {
   const classes = useStyles({ theme: tweakStyles });
 
-  return <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)} />;
+  return <div className={classes.root} {...addDataAttributes(data, testId)} />;
 };

package/src/components/DateInput/DateInput.tsx

@@ -22,68 +22,66 @@ export interface IDateInputProps
   onChange?: (event: IChangeInputEvent, 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 });
+export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(function DateInput(
+  {
+    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 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 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);
-    };
+  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)} {...addDataAttributes(data)} onClick={onClick}>
-        <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>
-    );
-  },
-);
+  return (
+    <div className={clsx(classes.root, className)} {...addDataAttributes(data)} onClick={onClick}>
+      <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>
+  );
+});