@true-engineering/true-react-common-ui-kit 2.3.2 → 2.5.0

package/src/components/Button/Button.tsx

@@ -1,167 +1,154 @@
-import { useMemo, ReactNode, ButtonHTMLAttributes, MouseEvent, forwardRef } from 'react';
-import clsx from 'clsx';
-import merge from 'lodash-es/merge';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { renderIcon } from '../../helpers/snippets';
-import { useTheme } from '../../hooks';
-import { ICommonProps, IIcon } from '../../types';
-import { ThemedPreloader, IThemedPreloaderProps, ThemedPreloaderStyles } from '../ThemedPreloader';
-import { ButtonStyles, styles, dotsPreloaderStyles } from './Button.styles';
-
-export type IButtonSize = 's' | 'm' | 'l' | 'xl';
-
-export const BUTTON_VIEWS = [
-  'primary',
-  'secondary',
-  'outline',
-  'warning',
-  'destructive',
-  'text',
-  'custom', // специальный стиль для кастомизации на своем проекте
-] as const;
-
-export type IButtonView = (typeof BUTTON_VIEWS)[number];
-
-export interface IButtonProps extends ICommonProps {
-  tweakStyles?: ButtonStyles;
-  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'];
-  testId?: string;
-  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, componentStyles } = useTheme('Button', styles, tweakStyles);
-
-    const tweakPreloaderStyles = useMemo(
-      () =>
-        merge(
-          {},
-          size === 's' || size === 'm' ? dotsPreloaderStyles : undefined,
-          componentStyles.tweakPreloader,
-          tweakStyles?.tweakPreloader,
-        ) as ThemedPreloaderStyles,
-      [tweakStyles?.tweakPreloader, size],
-    );
-
-    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 { useMemo, ReactNode, ButtonHTMLAttributes, MouseEvent, forwardRef } from 'react';
+import clsx from 'clsx';
+import merge from 'lodash-es/merge';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { renderIcon } from '../../helpers/snippets';
+import { useTheme } from '../../hooks';
+import { ICommonProps, IIcon } from '../../types';
+import { ThemedPreloader, IThemedPreloaderProps, ThemedPreloaderStyles } from '../ThemedPreloader';
+import { IButtonSize, IButtonView } from './types';
+import { ButtonStyles, styles, dotsPreloaderStyles } from './Button.styles';
+
+export interface IButtonProps extends ICommonProps {
+  tweakStyles?: ButtonStyles;
+  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'];
+  testId?: string;
+  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, componentStyles } = useTheme('Button', styles, tweakStyles);
+
+    const tweakPreloaderStyles = useMemo(
+      () =>
+        merge(
+          {},
+          size === 's' || size === 'm' ? dotsPreloaderStyles : undefined,
+          componentStyles.tweakPreloader,
+          tweakStyles?.tweakPreloader,
+        ) as ThemedPreloaderStyles,
+      [tweakStyles?.tweakPreloader, size],
+    );
+
+    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>
+    );
+  },
+);

package/src/components/Button/constants.ts

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

package/src/components/Button/index.ts

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

package/src/components/Button/types.ts

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

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,32 +1,32 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Checkbox } from './Checkbox';
-
-export default {
-  title: 'Checkbox',
-  component: Checkbox,
-  args: {
-    value: 'value',
-    size: 18,
-    alignItems: 'center',
-    labelPosition: 'right',
-    isReadonly: false,
-    isInvalid: false,
-    isDisabled: false,
-    isSemiChecked: false,
-  },
-  argTypes: {
-    value: { control: 'text' },
-    alignItems: { control: 'inline-radio', options: ['top', 'center'] },
-  },
-  parameters: {
-    controls: {
-      exclude: ['data', 'tweakStyles', 'testId', 'onSelect'],
-    },
-  },
-} as ComponentMeta<typeof Checkbox>;
-
-export const Default: ComponentStory<typeof Checkbox> = (args) => (
-  <Checkbox {...args} onSelect={(value) => console.log('Value was selected', value)}>
-    <div>some text</div>
-  </Checkbox>
-);
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Checkbox } from './Checkbox';
+
+export default {
+  title: 'Checkbox',
+  component: Checkbox,
+  args: {
+    value: 'value',
+    size: 18,
+    alignItems: 'center',
+    labelPosition: 'right',
+    isReadonly: false,
+    isInvalid: false,
+    isDisabled: false,
+    isSemiChecked: false,
+  },
+  argTypes: {
+    value: { control: 'text' },
+    alignItems: { control: 'inline-radio', options: ['top', 'center'] },
+  },
+  parameters: {
+    controls: {
+      exclude: ['data', 'tweakStyles', 'testId', 'onSelect'],
+    },
+  },
+} as ComponentMeta<typeof Checkbox>;
+
+export const Default: ComponentStory<typeof Checkbox> = (args) => (
+  <Checkbox {...args} onSelect={(value) => console.log('Value was selected', value)}>
+    <div>some text</div>
+  </Checkbox>
+);

package/src/components/Checkbox/Checkbox.tsx

@@ -1,105 +1,105 @@
-import { useEffect, useState, ReactNode } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  getSelectKeyHandler,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { CheckboxStyles, styles } from './Checkbox.styles';
-
-export interface ICheckboxProps<V> extends ICommonProps {
-  tweakStyles?: CheckboxStyles;
-  children?: ReactNode;
-  isChecked?: boolean;
-  isSemiChecked?: boolean;
-  isDisabled?: boolean;
-  isReadonly?: boolean;
-  isInvalid?: boolean;
-  value: V;
-  /**
-   * @default 18
-   */
-  size?: number;
-  /**
-   * @default `center`
-   */
-  alignItems?: 'top' | 'center';
-  /**
-   * @default `size - 4px`
-   */
-  textMargin?: number;
-  /**
-   * @default `right`
-   */
-  labelPosition?: 'right' | 'left';
-  testId?: string;
-  onSelect(value: { value: V; isSelected: boolean }): void;
-}
-
-export function Checkbox<V>({
-  children,
-  isDisabled,
-  isReadonly,
-  isChecked = false,
-  value,
-  size = 18,
-  alignItems = 'center',
-  textMargin,
-  data,
-  testId,
-  isSemiChecked,
-  labelPosition = 'right',
-  tweakStyles,
-  onSelect,
-}: ICheckboxProps<V>): JSX.Element {
-  const { classes } = useTheme('Checkbox', styles, tweakStyles, {
-    size,
-    alignItems,
-    textMargin,
-  });
-
-  const [isSelected, setIsSelected] = useState(false);
-
-  const hasAction = !isDisabled && !isReadonly;
-
-  const onToggle = () => {
-    const newValue = !isSelected;
-    onSelect({ value, isSelected: newValue });
-    setIsSelected(newValue);
-  };
-
-  useEffect(() => {
-    setIsSelected(isChecked);
-  }, [isChecked]);
-
-  return (
-    <label
-      className={clsx(classes.root, {
-        [classes.disabled]: isDisabled,
-        [classes.labelPositionLeft]: labelPosition === 'left',
-      })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <input
-        type="checkbox"
-        className={classes.input}
-        checked={isSelected}
-        disabled={isDisabled}
-        readOnly={isReadonly}
-        {...(hasAction && {
-          onChange: onToggle,
-          onKeyDown: getSelectKeyHandler(onToggle),
-        })}
-      />
-      <div className={clsx(classes.check, isSelected && classes.checked)}>
-        <Icon type={isSemiChecked ? 'minus' : 'check'} />
-      </div>
-      {isReactNodeNotEmpty(children) && <div className={classes.children}>{children}</div>}
-    </label>
-  );
-}
+import { useEffect, useState, ReactNode } from 'react';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  getSelectKeyHandler,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { CheckboxStyles, styles } from './Checkbox.styles';
+
+export interface ICheckboxProps<V> extends ICommonProps {
+  tweakStyles?: CheckboxStyles;
+  children?: ReactNode;
+  isChecked?: boolean;
+  isSemiChecked?: boolean;
+  isDisabled?: boolean;
+  isReadonly?: boolean;
+  isInvalid?: boolean;
+  value: V;
+  /**
+   * @default 18
+   */
+  size?: number;
+  /**
+   * @default `center`
+   */
+  alignItems?: 'top' | 'center';
+  /**
+   * @default `size - 4px`
+   */
+  textMargin?: number;
+  /**
+   * @default `right`
+   */
+  labelPosition?: 'right' | 'left';
+  testId?: string;
+  onSelect(value: { value: V; isSelected: boolean }): void;
+}
+
+export function Checkbox<V>({
+  children,
+  isDisabled,
+  isReadonly,
+  isChecked = false,
+  value,
+  size = 18,
+  alignItems = 'center',
+  textMargin,
+  data,
+  testId,
+  isSemiChecked,
+  labelPosition = 'right',
+  tweakStyles,
+  onSelect,
+}: ICheckboxProps<V>): JSX.Element {
+  const { classes } = useTheme('Checkbox', styles, tweakStyles, {
+    size,
+    alignItems,
+    textMargin,
+  });
+
+  const [isSelected, setIsSelected] = useState(false);
+
+  const hasAction = !isDisabled && !isReadonly;
+
+  const onToggle = () => {
+    const newValue = !isSelected;
+    onSelect({ value, isSelected: newValue });
+    setIsSelected(newValue);
+  };
+
+  useEffect(() => {
+    setIsSelected(isChecked);
+  }, [isChecked]);
+
+  return (
+    <label
+      className={clsx(classes.root, {
+        [classes.disabled]: isDisabled,
+        [classes.labelPositionLeft]: labelPosition === 'left',
+      })}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <input
+        type="checkbox"
+        className={classes.input}
+        checked={isSelected}
+        disabled={isDisabled}
+        readOnly={isReadonly}
+        {...(hasAction && {
+          onChange: onToggle,
+          onKeyDown: getSelectKeyHandler(onToggle),
+        })}
+      />
+      <div className={clsx(classes.check, isSelected && classes.checked)}>
+        <Icon type={isSemiChecked ? 'minus' : 'check'} />
+      </div>
+      {isReactNodeNotEmpty(children) && <div className={classes.children}>{children}</div>}
+    </label>
+  );
+}