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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.9.2",
+  "version": "3.10.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/Button/Button.stories.tsx

@@ -2,9 +2,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { IIconType, iconsList } from '../Icon';
 import { complexIcons } from '../Icon/complexIcons';
 import { Button, IButtonProps } from './Button';
-import { BUTTON_VIEWS } from './constants';
-
-const sizeTypes: Array<IButtonProps['size']> = ['s', 'm', 'l', 'xl'];
+import { BUTTON_SIZES, BUTTON_VIEWS } from './constants';
 
 const iconTypes = [
   undefined,
@@ -31,9 +29,9 @@ export default {
     isFullWidth: false,
   },
   argTypes: {
-    view: { options: BUTTON_VIEWS, control: 'inline-radio' },
     icon: { options: iconTypes, control: 'select' },
-    size: { options: sizeTypes, control: 'inline-radio' },
+    size: { options: BUTTON_SIZES, control: 'inline-radio' },
+    view: { options: BUTTON_VIEWS, control: 'inline-radio' },
     iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
     preloaderType: { options: preloaderTypes, control: 'inline-radio' },
   },

package/src/components/Button/constants.ts

@@ -1,3 +1,5 @@
+export const BUTTON_SIZES = ['s', 'm', 'l', 'xl'] as const;
+
 export const BUTTON_VIEWS = [
   'primary',
   'secondary',

package/src/components/Button/types.ts

@@ -1,5 +1,5 @@
-import { BUTTON_VIEWS } from './constants';
+import { BUTTON_SIZES, BUTTON_VIEWS } from './constants';
 
-export type IButtonSize = 's' | 'm' | 'l' | 'xl';
+export type IButtonSize = (typeof BUTTON_SIZES)[number];
 
 export type IButtonView = (typeof BUTTON_VIEWS)[number];

package/src/components/CloseButton/CloseButton.stories.tsx

@@ -0,0 +1,11 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { CloseButton } from './CloseButton';
+
+export default {
+  title: 'Buttons/CloseButton',
+  component: CloseButton,
+  args: {},
+  argTypes: {},
+} as ComponentMeta<typeof CloseButton>;
+
+export const Default: ComponentStory<typeof CloseButton> = (args) => <CloseButton {...args} />;

package/src/components/CloseButton/CloseButton.tsx

@@ -11,6 +11,7 @@ export interface ICloseButtonProps extends ICommonProps<ICloseButtonStyles> {
   onClose?: () => void;
 }
 
+/** @deprecated */
 export const CloseButton: FC<ICloseButtonProps> = ({
   tweakStyles,
   testId,

package/src/components/IconButton/IconButton.stories.tsx

@@ -0,0 +1,32 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { IIconType, iconsList } from '../Icon';
+import { complexIcons } from '../Icon/complexIcons';
+import { IconButton } from './IconButton';
+import { ICON_BUTTON_SIZES, ICON_BUTTON_VIEWS } from './constants';
+
+const iconTypes = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+
+export default {
+  title: 'Buttons/IconButton',
+  component: IconButton,
+  args: {
+    icon: iconTypes[0],
+    view: 'main',
+    size: 'm',
+    isDisabled: false,
+    isLoading: false,
+    isActive: false,
+  },
+  argTypes: {
+    icon: { options: iconTypes, control: 'select' },
+    size: { options: ICON_BUTTON_SIZES, control: 'inline-radio' },
+    view: { options: ICON_BUTTON_VIEWS, control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: ['tweakStyles', 'testId', 'data'],
+    },
+  },
+} as ComponentMeta<typeof IconButton>;
+
+export const Default: ComponentStory<typeof IconButton> = (args) => <IconButton {...args} />;

package/src/components/IconButton/IconButton.styles.ts

@@ -0,0 +1,88 @@
+import { ITweakStyles, createThemedStyles } from '../../theme';
+
+const BUTTON_SIZE_S = 24;
+const BUTTON_SIZE_M = 32;
+const ICON_SIZE = 20;
+
+export const useStyles = createThemedStyles('IconButton', {
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    outline: 'none',
+    boxSizing: 'border-box',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'background-color, color, border-color',
+    border: 'none',
+    position: 'relative',
+    boxShadow: 'none',
+    borderRadius: '50%',
+    background: 'none',
+    padding: 0,
+    flexShrink: 0,
+
+    '&:disabled': {
+      extend: 'disabled',
+    },
+
+    '&:active': {
+      extend: 'active',
+    },
+  },
+
+  'cancel-light': {},
+
+  cancel: {},
+
+  main: {},
+
+  custom: {},
+
+  active: {},
+
+  disabled: {
+    cursor: 'not-allowed',
+    pointerEvents: 'none',
+  },
+
+  loading: {
+    '& $content': {
+      visibility: 'hidden',
+    },
+
+    '& $loader': {
+      display: 'block',
+    },
+  },
+
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+  },
+
+  loader: {
+    display: 'none',
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+  },
+
+  s: {
+    width: BUTTON_SIZE_S,
+    height: BUTTON_SIZE_S,
+  },
+
+  m: {
+    width: BUTTON_SIZE_M,
+    height: BUTTON_SIZE_M,
+  },
+});
+
+export type IIconButtonStyles = ITweakStyles<typeof useStyles>;

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,74 @@
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { renderIcon, IIcon } from '../Icon';
+import { ThemedPreloader } from '../ThemedPreloader';
+import { IIconButtonSize, IIconButtonView, IIconButtonHTMLBaseProps } from './types';
+import { useStyles, IIconButtonStyles } from './IconButton.styles';
+
+export interface IIconButtonProps
+  extends IIconButtonHTMLBaseProps,
+    ICommonProps<IIconButtonStyles> {
+  icon: IIcon;
+  /** @default 'm' */
+  size?: IIconButtonSize;
+  /** @default 'cancel-light' */
+  view?: IIconButtonView;
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isActive?: boolean;
+  /** @default false */
+  isLoading?: boolean;
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IIconButtonProps>(
+  (
+    {
+      icon,
+      size = 'm',
+      view = 'cancel-light',
+      isDisabled = false,
+      isActive = false,
+      isLoading = false,
+      type = 'button',
+      testId,
+      tweakStyles,
+      data,
+      onClick,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const classes = useStyles({ theme: tweakStyles });
+
+    const hasNoAction = isDisabled || isLoading;
+
+    return (
+      <button
+        ref={ref}
+        className={clsx(classes.root, classes[view], classes[size], {
+          [classes.disabled]: isDisabled,
+          [classes.active]: isActive,
+          [classes.loading]: isLoading,
+        })}
+        type={type}
+        disabled={isDisabled}
+        onClick={hasNoAction ? undefined : onClick}
+        {...restProps}
+        {...addDataTestId(testId)}
+        {...addDataAttributes(data)}
+      >
+        {isLoading ? (
+          <span className={classes.loader}>
+            <ThemedPreloader type="default" useCurrentColor />
+          </span>
+        ) : (
+          <span className={classes.icon}>{renderIcon(icon)}</span>
+        )}
+      </button>
+    );
+  },
+);

package/src/components/IconButton/constants.ts

@@ -0,0 +1,3 @@
+export const ICON_BUTTON_SIZES = ['s', 'm'] as const;
+
+export const ICON_BUTTON_VIEWS = ['cancel', 'cancel-light', 'main', 'custom'] as const;

package/src/components/IconButton/index.ts

@@ -0,0 +1,3 @@
+export * from './IconButton';
+export * from './types';
+export type { IIconButtonStyles } from './IconButton.styles';

package/src/components/IconButton/types.ts

@@ -0,0 +1,11 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ICON_BUTTON_SIZES, ICON_BUTTON_VIEWS } from './constants';
+
+export type IIconButtonSize = (typeof ICON_BUTTON_SIZES)[number];
+
+export type IIconButtonView = (typeof ICON_BUTTON_VIEWS)[number];
+
+export type IIconButtonHTMLBaseProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'disabled' | 'style' | 'className'
+>;

package/src/components/Modal/Modal.styles.ts

@@ -1,6 +1,6 @@
 import { rgba } from '../../helpers';
 import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
-import { ICloseButtonStyles } from '../CloseButton';
+import { IIconButtonStyles } from '../IconButton';
 
 const VERTICAL_OVERLAY_PADDING = 50;
 
@@ -8,6 +8,9 @@ const MODAL_HORIZONTAL_PADDING_L = 40;
 const MODAL_HORIZONTAL_PADDING_M = 36;
 const MODAL_HORIZONTAL_PADDING_S = 26;
 
+const MODAL_CLOSE_BUTTON_SIZE = 40;
+const MODAL_CLOSE_BUTTON_ICON_SIZE = 30;
+
 export const useStyles = createThemedStyles('Modal', {
   root: {},
 
@@ -300,4 +303,16 @@ export const useStyles = createThemedStyles('Modal', {
   'modal-exit-active': { extend: 'animationEnd' },
 });
 
-export type IModalStyles = ITweakStyles<typeof useStyles, { tweakCloseButton: ICloseButtonStyles }>;
+export const closeButtonStyles: IIconButtonStyles = {
+  m: {
+    width: MODAL_CLOSE_BUTTON_SIZE,
+    height: MODAL_CLOSE_BUTTON_SIZE,
+  },
+
+  icon: {
+    width: MODAL_CLOSE_BUTTON_ICON_SIZE,
+    height: MODAL_CLOSE_BUTTON_ICON_SIZE,
+  },
+};
+
+export type IModalStyles = ITweakStyles<typeof useStyles, { tweakCloseButton: IIconButtonStyles }>;

package/src/components/Modal/Modal.tsx

@@ -10,9 +10,9 @@ import {
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { CloseButton } from '../CloseButton';
+import { IconButton } from '../IconButton';
 import { IModalPosition, IModalTransitionProps } from './types';
-import { useStyles, IModalStyles } from './Modal.styles';
+import { useStyles, IModalStyles, closeButtonStyles } from './Modal.styles';
 
 export interface IModalProps extends ICommonProps<IModalStyles>, IModalTransitionProps {
   title?: ReactNode;
@@ -68,6 +68,7 @@ export const Modal: FC<IModalProps> = ({
   const classes = useStyles({ theme: tweakStyles });
 
   const tweakCloseButtonStyles = useTweakStyles({
+    innerStyles: closeButtonStyles,
     tweakStyles,
     className: 'tweakCloseButton',
     currentComponentName: 'Modal',
@@ -154,10 +155,12 @@ export const Modal: FC<IModalProps> = ({
               >
                 {hasCloseButton && (
                   <div className={classes.close}>
-                    <CloseButton
+                    <IconButton
                       testId={getTestId(testId, 'close-button')}
                       tweakStyles={tweakCloseButtonStyles}
-                      onClose={onClose}
+                      view="cancel-light"
+                      icon="close"
+                      onClick={onClose}
                     />
                   </div>
                 )}

package/src/components/Select/CustomSelect.stories.tsx

@@ -180,7 +180,7 @@ function SelectWithCustomProps({
 }
 
 export default {
-  title: 'Select',
+  title: 'Controls/Select',
   component: SelectWithCustomProps,
   argTypes: {
     scrollParent: {

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.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';