@true-engineering/true-react-common-ui-kit 1.8.0 → 1.8.1

package/src/components/Button/Button.tsx

@@ -1,195 +1,195 @@
-import {
-  useMemo,
-  FC,
-  ReactElement,
-  ReactNode,
-  ButtonHTMLAttributes,
-  MouseEvent,
-} from 'react';
-import clsx from 'clsx';
-import { merge } from 'lodash';
-
-import { ICommonProps } from '../../types';
-import { addDataAttributes, isNotEmpty, addDataTestId } from '../../helpers';
-import { useTheme } from '../../hooks';
-import {
-  ThemedPreloader,
-  IThemedPreloaderProps,
-  ThemedPreloaderStyles,
-} from '../ThemedPreloader';
-import { Icon, IIconType } from '../Icon';
-
-import { ButtonStyles, styles, dotsPreloaderStyles } from './Button.styles';
-
-export type IButtonSize = 's' | 'm' | 'l' | 'xl';
-
-/* Information for migration from old views
-
-      main => primary
-      cancel => secondary
-      cancel-light => outline
-      attention => warning
-      light => text
-      error => destructive
-
-  For other old views use custom.
-*/
-
-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?: IIconType | ReactElement;
-  /**
-   * @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: FC<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,
-}) => {
-  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 = isNotEmpty(icon);
-  const hasChildren = isNotEmpty(children);
-  const hasNoAction = isDisabled || isLoading;
-
-  return (
-    <button
-      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}>
-            {typeof icon === 'string' ? (
-              <Icon type={icon as IIconType} />
-            ) : (
-              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,
+  FC,
+  ReactElement,
+  ReactNode,
+  ButtonHTMLAttributes,
+  MouseEvent,
+} from 'react';
+import clsx from 'clsx';
+import { merge } from 'lodash';
+
+import { ICommonProps } from '../../types';
+import { addDataAttributes, isNotEmpty, addDataTestId } from '../../helpers';
+import { useTheme } from '../../hooks';
+import {
+  ThemedPreloader,
+  IThemedPreloaderProps,
+  ThemedPreloaderStyles,
+} from '../ThemedPreloader';
+import { Icon, IIconType } from '../Icon';
+
+import { ButtonStyles, styles, dotsPreloaderStyles } from './Button.styles';
+
+export type IButtonSize = 's' | 'm' | 'l' | 'xl';
+
+/* Information for migration from old views
+
+      main => primary
+      cancel => secondary
+      cancel-light => outline
+      attention => warning
+      light => text
+      error => destructive
+
+  For other old views use custom.
+*/
+
+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?: IIconType | ReactElement;
+  /**
+   * @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: FC<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,
+}) => {
+  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 = isNotEmpty(icon);
+  const hasChildren = isNotEmpty(children);
+  const hasNoAction = isDisabled || isLoading;
+
+  return (
+    <button
+      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}>
+            {typeof icon === 'string' ? (
+              <Icon type={icon as IIconType} />
+            ) : (
+              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/index.ts

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

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

@@ -1,35 +1,35 @@
-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.styles.ts

@@ -1,62 +1,62 @@
-import { ComponentStyles } from '../../types';
-import type { ICheckboxProps } from './Checkbox';
-
-interface IStyleProps {
-  size: NonNullable<ICheckboxProps<unknown>['size']>;
-  alignItems: NonNullable<ICheckboxProps<unknown>['alignItems']>;
-  textMargin: ICheckboxProps<unknown>['textMargin'];
-}
-
-export const styles = {
-  root: {
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: ({ alignItems }: IStyleProps): string =>
-      alignItems === 'top' ? 'flex-start' : 'center',
-  },
-
-  disabled: {
-    cursor: 'default',
-    pointerEvents: 'none',
-  },
-
-  input: {
-    width: 1,
-    height: 1,
-    position: 'absolute',
-    opacity: 0,
-  },
-
-  children: {
-    maxWidth: 'calc(100% - 32px)',
-    display: 'flex',
-    alignItems: 'center',
-  },
-
-  check: {
-    width: ({ size }: IStyleProps): number => size,
-    height: ({ size }: IStyleProps): number => size,
-    borderRadius: 2,
-    flexShrink: 0,
-    marginRight: ({ size, textMargin }: IStyleProps): number =>
-      textMargin !== undefined ? textMargin : size - 4,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    boxSizing: 'border-box',
-  },
-
-  checked: {},
-
-  labelPositionLeft: {
-    flexDirection: 'row-reverse',
-
-    '& $check': {
-      marginRight: 0,
-      marginLeft: ({ size, textMargin }: IStyleProps): number =>
-        textMargin !== undefined ? textMargin : size - 4,
-    },
-  },
-};
-
-export type CheckboxStyles = ComponentStyles<typeof styles, IStyleProps>;
+import { ComponentStyles } from '../../types';
+import type { ICheckboxProps } from './Checkbox';
+
+interface IStyleProps {
+  size: NonNullable<ICheckboxProps<unknown>['size']>;
+  alignItems: NonNullable<ICheckboxProps<unknown>['alignItems']>;
+  textMargin: ICheckboxProps<unknown>['textMargin'];
+}
+
+export const styles = {
+  root: {
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: ({ alignItems }: IStyleProps): string =>
+      alignItems === 'top' ? 'flex-start' : 'center',
+  },
+
+  disabled: {
+    cursor: 'default',
+    pointerEvents: 'none',
+  },
+
+  input: {
+    width: 1,
+    height: 1,
+    position: 'absolute',
+    opacity: 0,
+  },
+
+  children: {
+    maxWidth: 'calc(100% - 32px)',
+    display: 'flex',
+    alignItems: 'center',
+  },
+
+  check: {
+    width: ({ size }: IStyleProps): number => size,
+    height: ({ size }: IStyleProps): number => size,
+    borderRadius: 2,
+    flexShrink: 0,
+    marginRight: ({ size, textMargin }: IStyleProps): number =>
+      textMargin !== undefined ? textMargin : size - 4,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+  },
+
+  checked: {},
+
+  labelPositionLeft: {
+    flexDirection: 'row-reverse',
+
+    '& $check': {
+      marginRight: 0,
+      marginLeft: ({ size, textMargin }: IStyleProps): number =>
+        textMargin !== undefined ? textMargin : size - 4,
+    },
+  },
+};
+
+export type CheckboxStyles = ComponentStyles<typeof styles, IStyleProps>;