@true-engineering/true-react-common-ui-kit 3.9.2 → 3.11.0

package/src/components/Selector/Selector.styles.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, dimensions, ITweakStyles, createThemedStyles, animations } from '../../theme';
 
 const SELECTOR_TOTAL_GAP = 4;
 const SELECTOR_BORDER_WIDTH = 1;
@@ -107,7 +107,7 @@ export const useStyles = createThemedStyles('Selector', {
       height: `calc(100% - ${SELECTOR_GAP * 2}px)`,
       backgroundColor: colors.CLASSIC_WHITE,
       borderRadius: dimensions.BORDER_RADIUS_SMALL,
-      transition: '0.25s ease-in-out',
+      transition: animations.defaultTransition,
       transitionProperty: 'transform, width',
     },
 
@@ -122,7 +122,8 @@ export const useStyles = createThemedStyles('Selector', {
       height: '100%',
       color: colors.FONT_MEDIUM,
       fontSize: 16,
-      transition: 'color 0.25s ease-in-out',
+      transition: animations.defaultTransition,
+      transitionProperty: 'color',
       background: 'none',
 
       '&$s': {

package/src/components/Switch/Switch.styles.ts

@@ -1,4 +1,4 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
+import { ITweakStyles, animations, createThemedStyles } from '../../theme';
 
 export const useStyles = createThemedStyles('Switch', {
   root: {
@@ -33,8 +33,8 @@ export const useStyles = createThemedStyles('Switch', {
     backgroundColor: '#333',
     borderRadius: 10,
     boxSizing: 'border-box',
+    transition: animations.defaultTransition,
     transitionProperty: 'opacity, background-color',
-    transition: '0.25s ease-in-out',
 
     '&::before': {
       content: '""',
@@ -48,8 +48,8 @@ export const useStyles = createThemedStyles('Switch', {
       backgroundColor: '#fff',
       borderRadius: '50%',
       zIndex: 1,
+      transition: animations.defaultTransition,
       transitionProperty: 'left, background-color',
-      transition: '0.25s ease-in-out',
     },
   },
 
@@ -58,8 +58,8 @@ export const useStyles = createThemedStyles('Switch', {
   },
 
   label: {
+    transition: animations.defaultTransition,
     transitionProperty: 'opacity, color',
-    transition: '0.25s ease-in-out',
   },
 
   labelLeft: {

package/src/components/TextArea/TextArea.styles.ts

@@ -1,4 +1,4 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
+import { ITweakStyles, animations, createThemedStyles } from '../../theme';
 
 const PADDING_X = 12;
 
@@ -16,7 +16,7 @@ export const useStyles = createThemedStyles('TextArea', {
     width: '100%',
     flexGrow: 1,
     boxSizing: 'border-box',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'border-color',
     backgroundColor: 'white',
     border: ['solid', 1, 'lightgray'],
@@ -31,7 +31,7 @@ export const useStyles = createThemedStyles('TextArea', {
     fontFamily: 'inherit',
     fontSize: 16,
     padding: [14, PADDING_X, 8],
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'background-color',
     border: 'none',
     resize: 'none',
@@ -95,7 +95,7 @@ export const useStyles = createThemedStyles('TextArea', {
     top: PADDING_X * 2,
     transformOrigin: 'top left',
     transform: 'translateY(-50%)',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: 'transform, color',
     fontSize: 16,
   },

package/src/components/TextButton/TextButton.stories.tsx

@@ -2,6 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { IIconType, iconsList } from '../Icon';
 import { complexIcons } from '../Icon/complexIcons';
 import { TextButton } from './TextButton';
+import { TEXT_BUTTON_SIZES, TEXT_BUTTON_VIEWS } from './constants';
 
 const iconTypes = [
   undefined,
@@ -28,8 +29,8 @@ export default {
 
   argTypes: {
     icon: { control: 'select', options: iconTypes },
-    size: { control: 'inline-radio' },
-    view: { control: 'inline-radio' },
+    size: { options: TEXT_BUTTON_SIZES, control: 'inline-radio' },
+    view: { options: TEXT_BUTTON_VIEWS, control: 'inline-radio' },
     iconPosition: { control: 'inline-radio' },
     preloaderType: { control: 'inline-radio' },
   },

package/src/components/TextButton/TextButton.styles.ts

@@ -1,4 +1,4 @@
-import { createThemedStyles, ITweakStyles } from '../../theme';
+import { animations, createThemedStyles, ITweakStyles } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
 
 export const useStyles = createThemedStyles('TextButton', {
@@ -12,7 +12,8 @@ export const useStyles = createThemedStyles('TextButton', {
     borderRadius: 0,
     cursor: 'pointer',
     outline: 'none',
-    transition: 'color 0.25s ease-in-out',
+    transition: animations.defaultTransition,
+    transitionProperty: 'color',
 
     '&[disabled]': {
       cursor: 'default',
@@ -65,7 +66,7 @@ export const useStyles = createThemedStyles('TextButton', {
     width: 24,
     height: 24,
     borderRadius: '50%',
-    transition: '0.25s ease-in-out',
+    transition: animations.defaultTransition,
     transitionProperty: ['background', 'color'],
   },
 

package/src/components/TextButton/TextButton.tsx

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
+import { forwardRef, ReactNode } from 'react';
 import clsx from 'clsx';
 import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
@@ -6,17 +6,18 @@ import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IIcon, renderIcon } from '../Icon';
 import { IThemedPreloaderProps, ThemedPreloader } from '../ThemedPreloader';
+import { ITextButtonHTMLBaseProps, ITextButtonSize, ITextButtonView } from './types';
 import { useStyles, ITextButtonStyles, preloaderStyles } from './TextButton.styles';
 
 export interface ITextButtonProps
   extends ICommonProps<ITextButtonStyles>,
-    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'disabled'> {
+    ITextButtonHTMLBaseProps {
   /** @default 'undefined' */
   children?: ReactNode;
   /** @default 'undefined' */
   icon?: IIcon;
   /** @default 'primary' */
-  view?: 'primary' | 'secondary' | 'custom';
+  view?: ITextButtonView;
   /** @default false */
   isBold?: boolean;
   /** @default false */
@@ -28,76 +29,82 @@ export interface ITextButtonProps
   /** @default false */
   isActive?: boolean;
   /** @default 'l' */
-  size?: 'l' | 'xl';
+  size?: ITextButtonSize;
   /** @default 'left' */
   iconPosition?: 'left' | 'right';
   /** @default 'dots' */
   preloaderType?: IThemedPreloaderProps['type'];
 }
 
-export const TextButton: FC<ITextButtonProps> = ({
-  children,
-  icon,
-  view = 'primary',
-  isDisabled = false,
-  isBold = false,
-  isLoading = false,
-  isActive = false,
-  hasCircleUnderIcon = false,
-  size = 'l',
-  iconPosition = 'left',
-  preloaderType = 'dots',
-  type = 'button',
-  testId,
-  tweakStyles,
-  data,
-  onClick,
-  ...restProps
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
+export const TextButton = forwardRef<HTMLButtonElement, ITextButtonProps>(
+  (
+    {
+      children,
+      icon,
+      view = 'primary',
+      isDisabled = false,
+      isBold = false,
+      isLoading = false,
+      isActive = false,
+      hasCircleUnderIcon = false,
+      size = 'l',
+      iconPosition = 'left',
+      preloaderType = 'dots',
+      type = 'button',
+      testId,
+      tweakStyles,
+      data,
+      onClick,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const classes = useStyles({ theme: tweakStyles });
 
-  const tweakPreloaderStyles = useTweakStyles({
-    innerStyles: preloaderStyles,
-    tweakStyles,
-    className: 'tweakPreloader',
-    currentComponentName: 'TextButton',
-  });
+    const tweakPreloaderStyles = useTweakStyles({
+      innerStyles: preloaderStyles,
+      tweakStyles,
+      className: 'tweakPreloader',
+      currentComponentName: 'TextButton',
+    });
 
-  const hasNoAction = isDisabled || isLoading;
+    const hasNoAction = isDisabled || isLoading;
 
-  return (
-    <button
-      className={clsx(classes.root, classes[size], classes[view], {
-        [classes.bold]: isBold,
-        [classes.loading]: isLoading,
-        [classes.active]: isActive,
-        [classes.disabled]: isDisabled,
-      })}
-      onClick={!hasNoAction ? onClick : undefined}
-      disabled={hasNoAction}
-      type={type}
-      {...restProps}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <span className={clsx(classes.content, iconPosition === 'right' && classes.reverseContent)}>
-        {isReactNodeNotEmpty(icon) && (
-          <span className={clsx(classes.iconContainer, hasCircleUnderIcon && classes.circle)}>
-            <span className={classes.icon}>{renderIcon(icon)}</span>
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={clsx(classes.root, classes[size], classes[view], {
+          [classes.bold]: isBold,
+          [classes.loading]: isLoading,
+          [classes.active]: isActive,
+          [classes.disabled]: isDisabled,
+        })}
+        disabled={hasNoAction}
+        onClick={!hasNoAction ? onClick : undefined}
+        {...restProps}
+        {...addDataTestId(testId)}
+        {...addDataAttributes(data)}
+      >
+        <span className={clsx(classes.content, iconPosition === 'right' && classes.reverseContent)}>
+          {isReactNodeNotEmpty(icon) && (
+            <span className={clsx(classes.iconContainer, hasCircleUnderIcon && classes.circle)}>
+              <span className={classes.icon}>{renderIcon(icon)}</span>
+            </span>
+          )}
+          {children}
+        </span>
+
+        {isLoading && (
+          <span className={classes.loader}>
+            <ThemedPreloader
+              type={preloaderType}
+              useCurrentColor
+              tweakStyles={tweakPreloaderStyles}
+            />
           </span>
         )}
-        {children}
-      </span>
-
-      {isLoading && (
-        <span className={classes.loader}>
-          <ThemedPreloader
-            type={preloaderType}
-            useCurrentColor
-            tweakStyles={tweakPreloaderStyles}
-          />
-        </span>
-      )}
-    </button>
-  );
-};
+      </button>
+    );
+  },
+);

package/src/components/TextButton/constants.ts

@@ -0,0 +1,3 @@
+export const TEXT_BUTTON_SIZES = ['l', 'xl'] as const;
+
+export const TEXT_BUTTON_VIEWS = ['primary', 'secondary', 'custom'] as const;

package/src/components/TextButton/index.ts

@@ -1,4 +1,3 @@
 export * from './TextButton';
-export * from './TextButton';
-
+export * from './types';
 export type { ITextButtonStyles } from './TextButton.styles';

package/src/components/TextButton/types.ts

@@ -0,0 +1,11 @@
+import { ButtonHTMLAttributes } from 'react';
+import { TEXT_BUTTON_SIZES, TEXT_BUTTON_VIEWS } from './constants';
+
+export type ITextButtonSize = (typeof TEXT_BUTTON_SIZES)[number];
+
+export type ITextButtonView = (typeof TEXT_BUTTON_VIEWS)[number];
+
+export type ITextButtonHTMLBaseProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'disabled' | 'style' | 'className'
+>;

package/src/components/Toaster/Toaster.styles.ts

@@ -1,5 +1,5 @@
 import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-import { ICloseButtonStyles } from '../CloseButton';
+import { IIconButtonStyles } from '../IconButton';
 
 export const useStyles = createThemedStyles('Toaster', {
   root: {
@@ -56,5 +56,5 @@ export const useStyles = createThemedStyles('Toaster', {
 
 export type IToasterStyles = ITweakStyles<
   typeof useStyles,
-  { tweakCloseButton: ICloseButtonStyles }
+  { tweakCloseButton: IIconButtonStyles }
 >;

package/src/components/Toaster/Toaster.tsx

@@ -9,8 +9,8 @@ import {
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { CloseButton } from '../CloseButton';
 import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
 import { DEFAULT_TIMEOUT } from './constants';
 import { IToasterType } from './types';
 import { useStyles, IToasterStyles } from './Toaster.styles';
@@ -96,10 +96,11 @@ export const Toaster: FC<IToasterProps> = ({
       </div>
       {hasCloseButton && isNotEmpty(onClose) && (
         <div className={classes.close}>
-          <CloseButton
-            onClose={onClose}
-            iconType="close-window"
+          <IconButton
+            view="cancel-light"
+            icon="close-window"
             tweakStyles={tweakCloseButtonStyles}
+            onClick={onClose}
           />
         </div>
       )}

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './FiltersPane';
 export * from './Flag';
 export * from './FlexibleTable';
 export * from './Icon';
+export * from './IconButton';
 export * from './IncrementInput';
 export * from './Input';
 export * from './List';

package/src/theme/common.ts

@@ -118,6 +118,7 @@ const SLIDE_UP_POSITION_START = 15;
 const SLIDE_UP_POSITION_END = 0;
 
 export const animations = {
+  defaultTransition: '0.25s ease-in-out',
   // Если понадобится, сюда можно пробросить параметры через useTheme props
   slideUp: {
     'slide-up-enter': {
@@ -150,6 +151,7 @@ export interface ICommonUiKitTheme extends IUiKitTheme {
   colors: typeof colors;
   dimensions: typeof dimensions;
   helpers: typeof helpers;
+  animations: typeof animations;
 }
 
 export const common: ICommonUiKitTheme = {

package/src/theme/types.ts

@@ -18,14 +18,19 @@ import type {
   IFilterSelectStyles,
   IFiltersPaneSearchStyles,
   IFiltersPaneStyles,
+  IFilterValueViewStyles,
   IFilterWithDatesStyles,
   IFilterWithPeriodStyles,
   IFilterWrapperStyles,
   IFlagStyles,
+  IFlexibleTableCellStyles,
+  IFlexibleTableRowStyles,
   IFlexibleTableStyles,
+  IIconButtonStyles,
   IIconStyles,
   IIncrementInputStyles,
   IInputStyles,
+  IListItemStyles,
   IListStyles,
   IModalStyles,
   IMoreMenuStyles,
@@ -39,20 +44,16 @@ import type {
   IRadioButtonStyles,
   ISearchInputStyles,
   ISelectListStyles,
-  ISelectStyles,
-  IFilterValueViewStyles,
-  IFlexibleTableCellStyles,
-  IFlexibleTableRowStyles,
-  IListItemStyles,
   ISelectorStyles,
+  ISelectStyles,
   ISkeletonStyles,
+  IStatusStyles,
   ISvgIcon,
   ISvgPreloaderStyles,
   ISwitchStyles,
   ITextAreaStyles,
   ITextButtonStyles,
   ITextWithInfoStyles,
-  IStatusStyles,
   ITextWithTooltipStyles,
   IThemedPreloaderStyles,
   IToasterStyles,
@@ -100,6 +101,7 @@ export interface IComponentStyles {
   FlexibleTableRow: IFlexibleTableRowStyles;
   FlexibleTableCell: IFlexibleTableCellStyles;
   Icon: IIconStyles;
+  IconButton: IIconButtonStyles;
   IncrementInput: IIncrementInputStyles;
   Input: IInputStyles;
   List: IListStyles;