@true-engineering/true-react-common-ui-kit 4.0.0-alpha2 → 4.0.0-alpha4

package/src/components/Button/Button.styles.ts

@@ -1,200 +1,200 @@
-import { animations, createThemedStyles, ITweakStyles } from '../../theme';
-import { IThemedPreloaderStyles } from '../ThemedPreloader';
-import { IButtonSize } from './types';
-
-export const useStyles = createThemedStyles('Button', {
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    cursor: 'pointer',
-    outline: 'none',
-    boxSizing: 'border-box',
-    transition: animations.defaultTransition,
-    transitionProperty: 'background-color, color, box-shadow, border-color',
-    maxWidth: '100%',
-    border: [1, 'solid', 'transparent'],
-    position: 'relative',
-    boxShadow: 'none',
-
-    '&[disabled]': {
-      cursor: 'default',
-      pointerEvents: 'none',
-    },
-  },
-
-  primary: {},
-  secondary: {},
-  outline: {},
-  warning: {},
-  destructive: {},
-  text: {},
-  custom: {},
-
-  children: {},
-
-  icon: {
-    width: 20,
-    height: 20,
-    flexShrink: 0,
-  },
-
-  iconFromLeft: {
-    flexDirection: 'row',
-    gap: 6,
-
-    '& $icon': {
-      marginLeft: -4,
-    },
-  },
-
-  iconFromRight: {
-    flexDirection: 'row-reverse',
-    gap: 6,
-
-    '& $icon': {
-      marginRight: -4,
-    },
-  },
-
-  onlyIcon: {},
-
-  withIcon: {},
-
-  s: {
-    padding: [0, 12],
-    height: 32,
-    fontSize: 14,
-    letterSpacing: 0.15,
-
-    '&$onlyIcon': {
-      padding: 0,
-      width: 32,
-    },
-
-    '& $icon': {
-      width: 16,
-      height: 16,
-    },
-
-    '& $iconFromLeft': {
-      gap: 4,
-    },
-
-    '& $iconFromRight': {
-      gap: 4,
-    },
-  },
-
-  m: {
-    padding: [0, 12],
-    height: 42,
-    fontSize: 16,
-
-    '& $iconFromLeft': {
-      gap: 6,
-    },
-
-    '& $iconFromRight': {
-      gap: 6,
-    },
-
-    '&$onlyIcon': {
-      padding: 0,
-      width: 42,
-    },
-  },
-
-  l: {
-    padding: [0, 16],
-    height: 48,
-    fontSize: 16,
-
-    '& $iconFromLeft': {
-      gap: 6,
-    },
-
-    '& $iconFromRight': {
-      gap: 6,
-    },
-
-    '&$onlyIcon': {
-      padding: 0,
-      width: 48,
-    },
-  },
-
-  xl: {
-    padding: [0, 20],
-    height: 56,
-    fontSize: 16,
-
-    '&$onlyIcon': {
-      padding: 0,
-      width: 56,
-    },
-
-    '& $iconFromLeft': {
-      gap: 8,
-    },
-
-    '& $iconFromRight': {
-      gap: 8,
-    },
-  },
-
-  fullWidth: {
-    minWidth: 'auto',
-    width: '100%',
-  },
-
-  inline: {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-  },
-
-  active: {},
-
-  content: {
-    display: 'flex',
-    alignItems: 'center',
-    height: '100%',
-  },
-
-  loader: {
-    display: 'none',
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-    transform: 'translate(-50%, -50%)',
-  },
-
-  loading: {
-    '& $content': {
-      visibility: 'hidden',
-    },
-
-    '& $loader': {
-      display: 'block',
-    },
-  },
-
-  disabled: {},
-});
-
-const dotsPreloaderStyles: IThemedPreloaderStyles = {
-  tweakDotsPreloader: {
-    fadedDot: {
-      width: 6,
-      height: 6,
-    },
-  },
-};
-
-export const getPreloaderStyles = (size: IButtonSize): IThemedPreloaderStyles | undefined =>
-  size === 's' || size === 'm' ? dotsPreloaderStyles : undefined;
-
-export type IButtonStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakPreloader: IThemedPreloaderStyles }
->;
+import { animations, createThemedStyles, ITweakStyles } from '../../theme';
+import { IThemedPreloaderStyles } from '../ThemedPreloader';
+import { IButtonSize } from './types';
+
+export const useStyles = createThemedStyles('Button', {
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    outline: 'none',
+    boxSizing: 'border-box',
+    transition: animations.defaultTransition,
+    transitionProperty: 'background-color, color, box-shadow, border-color',
+    maxWidth: '100%',
+    border: [1, 'solid', 'transparent'],
+    position: 'relative',
+    boxShadow: 'none',
+
+    '&[disabled]': {
+      cursor: 'default',
+      pointerEvents: 'none',
+    },
+  },
+
+  primary: {},
+  secondary: {},
+  outline: {},
+  warning: {},
+  destructive: {},
+  text: {},
+  custom: {},
+
+  children: {},
+
+  icon: {
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+  },
+
+  iconFromLeft: {
+    flexDirection: 'row',
+    gap: 6,
+
+    '& $icon': {
+      marginLeft: -4,
+    },
+  },
+
+  iconFromRight: {
+    flexDirection: 'row-reverse',
+    gap: 6,
+
+    '& $icon': {
+      marginRight: -4,
+    },
+  },
+
+  onlyIcon: {},
+
+  withIcon: {},
+
+  s: {
+    padding: [0, 12],
+    height: 32,
+    fontSize: 14,
+    letterSpacing: 0.15,
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 32,
+    },
+
+    '& $icon': {
+      width: 16,
+      height: 16,
+    },
+
+    '& $iconFromLeft': {
+      gap: 4,
+    },
+
+    '& $iconFromRight': {
+      gap: 4,
+    },
+  },
+
+  m: {
+    padding: [0, 12],
+    height: 42,
+    fontSize: 16,
+
+    '& $iconFromLeft': {
+      gap: 6,
+    },
+
+    '& $iconFromRight': {
+      gap: 6,
+    },
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 42,
+    },
+  },
+
+  l: {
+    padding: [0, 16],
+    height: 48,
+    fontSize: 16,
+
+    '& $iconFromLeft': {
+      gap: 6,
+    },
+
+    '& $iconFromRight': {
+      gap: 6,
+    },
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 48,
+    },
+  },
+
+  xl: {
+    padding: [0, 20],
+    height: 56,
+    fontSize: 16,
+
+    '&$onlyIcon': {
+      padding: 0,
+      width: 56,
+    },
+
+    '& $iconFromLeft': {
+      gap: 8,
+    },
+
+    '& $iconFromRight': {
+      gap: 8,
+    },
+  },
+
+  fullWidth: {
+    minWidth: 'auto',
+    width: '100%',
+  },
+
+  inline: {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  active: {},
+
+  content: {
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+  },
+
+  loader: {
+    display: 'none',
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+  },
+
+  loading: {
+    '& $content': {
+      visibility: 'hidden',
+    },
+
+    '& $loader': {
+      display: 'block',
+    },
+  },
+
+  disabled: {},
+});
+
+const dotsPreloaderStyles: IThemedPreloaderStyles = {
+  tweakDotsPreloader: {
+    fadedDot: {
+      width: 6,
+      height: 6,
+    },
+  },
+};
+
+export const getPreloaderStyles = (size: IButtonSize): IThemedPreloaderStyles | undefined =>
+  size === 's' || size === 'm' ? dotsPreloaderStyles : undefined;
+
+export type IButtonStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakPreloader: IThemedPreloaderStyles }
+>;

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, 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>
-    );
-  },
-);
+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/Button/constants.ts

@@ -1,11 +1,11 @@
-export const BUTTON_SIZES = ['s', 'm', 'l', 'xl'] as const;
-
-export const BUTTON_VIEWS = [
-  'primary',
-  'secondary',
-  'outline',
-  'warning',
-  'destructive',
-  'text',
-  'custom', // специальный стиль для кастомизации на своем проекте
-] as const;
+export const BUTTON_SIZES = ['s', 'm', 'l', 'xl'] as const;
+
+export const BUTTON_VIEWS = [
+  'primary',
+  'secondary',
+  'outline',
+  'warning',
+  'destructive',
+  'text',
+  'custom', // специальный стиль для кастомизации на своем проекте
+] as const;

package/src/components/Button/index.ts

@@ -1,3 +1,3 @@
-export * from './Button';
-export * from './types';
-export type { IButtonStyles } from './Button.styles';
+export * from './Button';
+export * from './types';
+export type { IButtonStyles } from './Button.styles';