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

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

@@ -1,130 +1,130 @@
-import { animations, createThemedStyles, ITweakStyles } from '../../theme';
-import { IThemedPreloaderStyles } from '../ThemedPreloader';
-
-export const useStyles = createThemedStyles('TextButton', {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    height: 24,
-    padding: 0,
-    background: 'transparent',
-    border: 'none',
-    borderRadius: 0,
-    cursor: 'pointer',
-    outline: 'none',
-    transition: animations.defaultTransition,
-    transitionProperty: 'color',
-
-    '&[disabled]': {
-      cursor: 'default',
-      pointerEvents: 'none',
-    },
-  },
-
-  xl: {
-    fontSize: 16,
-
-    '& $content': {
-      gap: 14,
-    },
-  },
-
-  l: {
-    fontSize: 14,
-    letterSpacing: '0.15px',
-
-    '& $content': {
-      gap: 10,
-
-      '&$reverseContent': {
-        gap: 6,
-      },
-    },
-  },
-
-  primary: {},
-
-  secondary: {},
-
-  custom: {},
-
-  active: {},
-
-  disabled: {},
-
-  bold: {
-    fontWeight: 'bold',
-  },
-
-  iconContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-
-  circle: {
-    width: 24,
-    height: 24,
-    borderRadius: '50%',
-    transition: animations.defaultTransition,
-    transitionProperty: ['background', 'color'],
-  },
-
-  icon: {
-    width: 20,
-    height: 20,
-  },
-
-  content: {
-    display: 'flex',
-    alignItems: 'center',
-    height: '100%',
-  },
-
-  reverseContent: {
-    flexDirection: 'row-reverse',
-  },
-
-  loader: {
-    display: 'none',
-    height: 8,
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-    transform: 'translate(-50%, -50%)',
-  },
-
-  loading: {
-    '& $content': {
-      visibility: 'hidden',
-    },
-
-    '& $loader': {
-      display: 'block',
-    },
-  },
-});
-
-export const preloaderStyles: IThemedPreloaderStyles = {
-  tweakDotsPreloader: {
-    fadedDot: {
-      width: 6,
-      height: 6,
-    },
-  },
-
-  logo: {
-    width: 24,
-    height: 24,
-  },
-
-  default: {
-    width: 24,
-    height: 24,
-  },
-};
-
-export type ITextButtonStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakPreloader: IThemedPreloaderStyles }
->;
+import { animations, createThemedStyles, ITweakStyles } from '../../theme';
+import { IThemedPreloaderStyles } from '../ThemedPreloader';
+
+export const useStyles = createThemedStyles('TextButton', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    height: 24,
+    padding: 0,
+    background: 'transparent',
+    border: 'none',
+    borderRadius: 0,
+    cursor: 'pointer',
+    outline: 'none',
+    transition: animations.defaultTransition,
+    transitionProperty: 'color',
+
+    '&[disabled]': {
+      cursor: 'default',
+      pointerEvents: 'none',
+    },
+  },
+
+  xl: {
+    fontSize: 16,
+
+    '& $content': {
+      gap: 14,
+    },
+  },
+
+  l: {
+    fontSize: 14,
+    letterSpacing: '0.15px',
+
+    '& $content': {
+      gap: 10,
+
+      '&$reverseContent': {
+        gap: 6,
+      },
+    },
+  },
+
+  primary: {},
+
+  secondary: {},
+
+  custom: {},
+
+  active: {},
+
+  disabled: {},
+
+  bold: {
+    fontWeight: 'bold',
+  },
+
+  iconContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  circle: {
+    width: 24,
+    height: 24,
+    borderRadius: '50%',
+    transition: animations.defaultTransition,
+    transitionProperty: ['background', 'color'],
+  },
+
+  icon: {
+    width: 20,
+    height: 20,
+  },
+
+  content: {
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+  },
+
+  reverseContent: {
+    flexDirection: 'row-reverse',
+  },
+
+  loader: {
+    display: 'none',
+    height: 8,
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    transform: 'translate(-50%, -50%)',
+  },
+
+  loading: {
+    '& $content': {
+      visibility: 'hidden',
+    },
+
+    '& $loader': {
+      display: 'block',
+    },
+  },
+});
+
+export const preloaderStyles: IThemedPreloaderStyles = {
+  tweakDotsPreloader: {
+    fadedDot: {
+      width: 6,
+      height: 6,
+    },
+  },
+
+  logo: {
+    width: 24,
+    height: 24,
+  },
+
+  default: {
+    width: 24,
+    height: 24,
+  },
+};
+
+export type ITextButtonStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakPreloader: IThemedPreloaderStyles }
+>;

package/src/components/TextButton/TextButton.tsx

@@ -1,110 +1,110 @@
-import { forwardRef, ReactNode } 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 } 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>,
-    ITextButtonHTMLBaseProps {
-  /** @default 'undefined' */
-  children?: ReactNode;
-  /** @default 'undefined' */
-  icon?: IIcon;
-  /** @default 'primary' */
-  view?: ITextButtonView;
-  /** @default false */
-  isBold?: boolean;
-  /** @default false */
-  hasCircleUnderIcon?: boolean;
-  /**  @default false */
-  isDisabled?: boolean;
-  /** @default false */
-  isLoading?: boolean;
-  /** @default false */
-  isActive?: boolean;
-  /** @default 'l' */
-  size?: ITextButtonSize;
-  /** @default 'left' */
-  iconPosition?: 'left' | 'right';
-  /** @default 'dots' */
-  preloaderType?: IThemedPreloaderProps['type'];
-}
-
-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 hasNoAction = isDisabled || isLoading;
-
-    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>
-        )}
-      </button>
-    );
-  },
-);
+import { forwardRef, ReactNode } 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 } 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>,
+    ITextButtonHTMLBaseProps {
+  /** @default 'undefined' */
+  children?: ReactNode;
+  /** @default 'undefined' */
+  icon?: IIcon;
+  /** @default 'primary' */
+  view?: ITextButtonView;
+  /** @default false */
+  isBold?: boolean;
+  /** @default false */
+  hasCircleUnderIcon?: boolean;
+  /**  @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isLoading?: boolean;
+  /** @default false */
+  isActive?: boolean;
+  /** @default 'l' */
+  size?: ITextButtonSize;
+  /** @default 'left' */
+  iconPosition?: 'left' | 'right';
+  /** @default 'dots' */
+  preloaderType?: IThemedPreloaderProps['type'];
+}
+
+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 hasNoAction = isDisabled || isLoading;
+
+    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>
+        )}
+      </button>
+    );
+  },
+);

package/src/components/TextButton/constants.ts

@@ -1,3 +1,3 @@
-export const TEXT_BUTTON_SIZES = ['l', 'xl'] as const;
-
-export const TEXT_BUTTON_VIEWS = ['primary', 'secondary', 'custom'] as const;
+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,3 +1,3 @@
-export * from './TextButton';
-export * from './types';
-export type { ITextButtonStyles } from './TextButton.styles';
+export * from './TextButton';
+export * from './types';
+export type { ITextButtonStyles } from './TextButton.styles';

package/src/components/TextButton/types.ts

@@ -1,11 +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'
->;
+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/TextWithInfo/TextWithInfo.stories.tsx

@@ -1,53 +1,53 @@
-import { FC, useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { ITextWithInfoProps, TextWithInfo } from './TextWithInfo';
-
-interface ITextWithInfoWithCustomProps extends ITextWithInfoProps {
-  infoTooltip: string;
-  link: string;
-}
-
-const TextWithInfoWithCustomProps: FC<ITextWithInfoWithCustomProps> = ({
-  infoTooltip,
-  link,
-  ...args
-}) => {
-  const [isSelected, setIsSelected] = useState(false);
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 600,
-        height: 400,
-      }}
-    >
-      <TextWithInfo
-        {...args}
-        info={{ infoTooltip, link }}
-        isSelected={isSelected}
-        onClick={() => setIsSelected(true)}
-      />
-    </div>
-  );
-};
-
-export default {
-  title: 'Data Display/TextWithInfo',
-  component: TextWithInfoWithCustomProps,
-};
-
-const Template: ComponentStory<typeof TextWithInfoWithCustomProps> = (args) => (
-  <TextWithInfoWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: 'Обычная перевозка',
-  textTooltip: 'Tултип для самой обычной перевозки',
-  infoTooltip: 'Читать подробную информацию',
-  link: 'https://ya.ru/',
-};
+import { FC, useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { ITextWithInfoProps, TextWithInfo } from './TextWithInfo';
+
+interface ITextWithInfoWithCustomProps extends ITextWithInfoProps {
+  infoTooltip: string;
+  link: string;
+}
+
+const TextWithInfoWithCustomProps: FC<ITextWithInfoWithCustomProps> = ({
+  infoTooltip,
+  link,
+  ...args
+}) => {
+  const [isSelected, setIsSelected] = useState(false);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 600,
+        height: 400,
+      }}
+    >
+      <TextWithInfo
+        {...args}
+        info={{ infoTooltip, link }}
+        isSelected={isSelected}
+        onClick={() => setIsSelected(true)}
+      />
+    </div>
+  );
+};
+
+export default {
+  title: 'Data Display/TextWithInfo',
+  component: TextWithInfoWithCustomProps,
+};
+
+const Template: ComponentStory<typeof TextWithInfoWithCustomProps> = (args) => (
+  <TextWithInfoWithCustomProps {...args} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Обычная перевозка',
+  textTooltip: 'Tултип для самой обычной перевозки',
+  infoTooltip: 'Читать подробную информацию',
+  link: 'https://ya.ru/',
+};