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

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: '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: '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/',
+};

package/src/components/TextWithInfo/TextWithInfo.tsx

@@ -1,60 +1,60 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { TextWithTooltip } from '../TextWithTooltip';
-import { styles, TextWithInfoStyles } from './TextWithInfo.styles';
-
-export interface ITextWithInfoProps extends ICommonProps {
-  tweakStyles?: TextWithInfoStyles;
-  text: string;
-  isSelected?: boolean;
-  textTooltip?: string;
-  info?: {
-    infoTooltip?: string;
-    link?: string;
-  };
-  onClick(): void;
-}
-
-export const TextWithInfo: FC<ITextWithInfoProps> = ({
-  text,
-  isSelected = false,
-  info,
-  textTooltip,
-  onClick,
-  data,
-  tweakStyles,
-}) => {
-  const { classes } = useTheme('TextWithInfo', styles, tweakStyles);
-
-  return (
-    <div
-      className={clsx(classes.root, isSelected && classes.selected)}
-      {...addDataAttributes(data)}
-    >
-      <div className={classes.container}>
-        <div className={classes.text} onClick={onClick}>
-          {textTooltip !== undefined ? (
-            <TextWithTooltip tooltipText={textTooltip}>{text}</TextWithTooltip>
-          ) : (
-            text
-          )}
-        </div>
-        {info && (
-          <a className={classes.info} href={info.link} target="_blank" rel="noopener noreferrer">
-            {info.infoTooltip !== undefined ? (
-              <TextWithTooltip tooltipText={info.infoTooltip}>
-                <Icon type="information" />
-              </TextWithTooltip>
-            ) : (
-              <Icon type="information" />
-            )}
-          </a>
-        )}
-      </div>
-    </div>
-  );
-};
+import { FC } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../helpers';
+import { useTheme } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { TextWithTooltip } from '../TextWithTooltip';
+import { styles, TextWithInfoStyles } from './TextWithInfo.styles';
+
+export interface ITextWithInfoProps extends ICommonProps {
+  tweakStyles?: TextWithInfoStyles;
+  text: string;
+  isSelected?: boolean;
+  textTooltip?: string;
+  info?: {
+    infoTooltip?: string;
+    link?: string;
+  };
+  onClick(): void;
+}
+
+export const TextWithInfo: FC<ITextWithInfoProps> = ({
+  text,
+  isSelected = false,
+  info,
+  textTooltip,
+  onClick,
+  data,
+  tweakStyles,
+}) => {
+  const { classes } = useTheme('TextWithInfo', styles, tweakStyles);
+
+  return (
+    <div
+      className={clsx(classes.root, isSelected && classes.selected)}
+      {...addDataAttributes(data)}
+    >
+      <div className={classes.container}>
+        <div className={classes.text} onClick={onClick}>
+          {textTooltip !== undefined ? (
+            <TextWithTooltip tooltipText={textTooltip}>{text}</TextWithTooltip>
+          ) : (
+            text
+          )}
+        </div>
+        {info && (
+          <a className={classes.info} href={info.link} target="_blank" rel="noopener noreferrer">
+            {info.infoTooltip !== undefined ? (
+              <TextWithTooltip tooltipText={info.infoTooltip}>
+                <Icon type="information" />
+              </TextWithTooltip>
+            ) : (
+              <Icon type="information" />
+            )}
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/TextWithTooltip/TextWithTooltip.tsx

@@ -1,143 +1,143 @@
-import { FC, ReactNode, useEffect, useRef, useState } from 'react';
-import { Styles } from 'react-jss';
-import { Portal } from 'react-overlays';
-import usePopper, { Modifier, Placement } from 'react-overlays/usePopper';
-import clsx from 'clsx';
-import { addDataAttributes } from '../../helpers';
-import { useOnClickOutsideWithRef, useTheme, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { ITooltipProps, Tooltip } from '../Tooltip';
-import { styles, TextWithTooltipStyles } from './TextWithTooltip.styles';
-
-export interface ITextWithTooltipProps extends ICommonProps {
-  tweakStyles?: TextWithTooltipStyles;
-  children: ReactNode;
-  tooltipText: ITooltipProps['text'];
-  tooltipView?: ITooltipProps['view'];
-  tooltipType?: ITooltipProps['type'];
-  tooltipPosition?: Placement;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  tooltipModifiers?: Array<Partial<Modifier<any, any>>>;
-  tooltipOffsetOptions?: Record<string, unknown>;
-  mouseEventType?: 'hover' | 'click';
-  hoverDelay?: number;
-  isDisabled?: boolean;
-  shouldRenderInBody?: boolean;
-}
-
-export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
-  children,
-  tooltipText,
-  tooltipPosition = 'top',
-  tooltipView = 'tooltip',
-  tooltipType,
-  tooltipModifiers = [],
-  tooltipOffsetOptions,
-  isDisabled = false,
-  shouldRenderInBody = true,
-  mouseEventType = 'hover',
-  hoverDelay,
-  data,
-  tweakStyles,
-}) => {
-  const { classes, componentStyles } = useTheme('TextWithTooltip', styles, tweakStyles);
-
-  const root = useRef<HTMLDivElement>(null);
-  const tooltip = useRef<HTMLDivElement>(null);
-
-  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-  const [tooltipTimeout, setTooltipTimeout] = useState<ReturnType<typeof setTimeout>>();
-
-  const hasDelay = hoverDelay !== undefined;
-
-  const handleMouseEnter = () => {
-    if (hasDelay) {
-      const timeout = setTimeout(() => {
-        setIsTooltipVisible(true);
-      }, hoverDelay);
-
-      setTooltipTimeout(timeout);
-    } else {
-      setIsTooltipVisible(true);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    if (hasDelay) {
-      clearTimeout(tooltipTimeout);
-    }
-    setIsTooltipVisible(false);
-  };
-
-  useEffect(() => () => clearTimeout(tooltipTimeout), []);
-
-  const { styles: popperStyles, attributes } = usePopper(root.current, tooltip.current, {
-    enabled: isTooltipVisible,
-    placement: tooltipPosition,
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [0, 6],
-          ...tooltipOffsetOptions,
-        },
-      },
-      ...tooltipModifiers,
-    ],
-  });
-
-  useOnClickOutsideWithRef(
-    tooltip,
-    () => {
-      if (mouseEventType === 'click') {
-        setIsTooltipVisible(false);
-      }
-    },
-    root,
-  );
-
-  const props =
-    mouseEventType === 'click'
-      ? {
-          onClick: () => setIsTooltipVisible(true),
-        }
-      : {
-          onMouseEnter: handleMouseEnter,
-          onMouseLeave: handleMouseLeave,
-        };
-
-  const shouldShowTooltip = tooltipText !== undefined && tooltipText !== null && !isDisabled;
-
-  const tweakTooltipStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakTooltip');
-
-  return (
-    <div
-      className={clsx(
-        classes.root,
-        mouseEventType === 'click' && shouldShowTooltip && classes.clickable,
-      )}
-      {...(shouldShowTooltip ? props : undefined)}
-      {...addDataAttributes(data)}
-      ref={root}
-    >
-      {shouldShowTooltip && (
-        <Portal container={shouldRenderInBody ? document.body : root.current}>
-          <div
-            className={classes.tooltip}
-            style={popperStyles.popper as Styles}
-            {...attributes.popper}
-            ref={tooltip}
-          >
-            <Tooltip
-              view={tooltipView}
-              type={tooltipType}
-              text={tooltipText}
-              tweakStyles={tweakTooltipStyles}
-            />
-          </div>
-        </Portal>
-      )}
-      {children}
-    </div>
-  );
-};
+import { FC, ReactNode, useEffect, useRef, useState } from 'react';
+import { Styles } from 'react-jss';
+import { Portal } from 'react-overlays';
+import usePopper, { Modifier, Placement } from 'react-overlays/usePopper';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../helpers';
+import { useOnClickOutsideWithRef, useTheme, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { ITooltipProps, Tooltip } from '../Tooltip';
+import { styles, TextWithTooltipStyles } from './TextWithTooltip.styles';
+
+export interface ITextWithTooltipProps extends ICommonProps {
+  tweakStyles?: TextWithTooltipStyles;
+  children: ReactNode;
+  tooltipText: ITooltipProps['text'];
+  tooltipView?: ITooltipProps['view'];
+  tooltipType?: ITooltipProps['type'];
+  tooltipPosition?: Placement;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  tooltipModifiers?: Array<Partial<Modifier<any, any>>>;
+  tooltipOffsetOptions?: Record<string, unknown>;
+  mouseEventType?: 'hover' | 'click';
+  hoverDelay?: number;
+  isDisabled?: boolean;
+  shouldRenderInBody?: boolean;
+}
+
+export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
+  children,
+  tooltipText,
+  tooltipPosition = 'top',
+  tooltipView = 'tooltip',
+  tooltipType,
+  tooltipModifiers = [],
+  tooltipOffsetOptions,
+  isDisabled = false,
+  shouldRenderInBody = true,
+  mouseEventType = 'hover',
+  hoverDelay,
+  data,
+  tweakStyles,
+}) => {
+  const { classes, componentStyles } = useTheme('TextWithTooltip', styles, tweakStyles);
+
+  const root = useRef<HTMLDivElement>(null);
+  const tooltip = useRef<HTMLDivElement>(null);
+
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const [tooltipTimeout, setTooltipTimeout] = useState<ReturnType<typeof setTimeout>>();
+
+  const hasDelay = hoverDelay !== undefined;
+
+  const handleMouseEnter = () => {
+    if (hasDelay) {
+      const timeout = setTimeout(() => {
+        setIsTooltipVisible(true);
+      }, hoverDelay);
+
+      setTooltipTimeout(timeout);
+    } else {
+      setIsTooltipVisible(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (hasDelay) {
+      clearTimeout(tooltipTimeout);
+    }
+    setIsTooltipVisible(false);
+  };
+
+  useEffect(() => () => clearTimeout(tooltipTimeout), []);
+
+  const { styles: popperStyles, attributes } = usePopper(root.current, tooltip.current, {
+    enabled: isTooltipVisible,
+    placement: tooltipPosition,
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 6],
+          ...tooltipOffsetOptions,
+        },
+      },
+      ...tooltipModifiers,
+    ],
+  });
+
+  useOnClickOutsideWithRef(
+    tooltip,
+    () => {
+      if (mouseEventType === 'click') {
+        setIsTooltipVisible(false);
+      }
+    },
+    root,
+  );
+
+  const props =
+    mouseEventType === 'click'
+      ? {
+          onClick: () => setIsTooltipVisible(true),
+        }
+      : {
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+        };
+
+  const shouldShowTooltip = tooltipText !== undefined && tooltipText !== null && !isDisabled;
+
+  const tweakTooltipStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakTooltip');
+
+  return (
+    <div
+      className={clsx(
+        classes.root,
+        mouseEventType === 'click' && shouldShowTooltip && classes.clickable,
+      )}
+      {...(shouldShowTooltip ? props : undefined)}
+      {...addDataAttributes(data)}
+      ref={root}
+    >
+      {shouldShowTooltip && (
+        <Portal container={shouldRenderInBody ? document.body : root.current}>
+          <div
+            className={classes.tooltip}
+            style={popperStyles.popper as Styles}
+            {...attributes.popper}
+            ref={tooltip}
+          >
+            <Tooltip
+              view={tooltipView}
+              type={tooltipType}
+              text={tooltipText}
+              tweakStyles={tweakTooltipStyles}
+            />
+          </div>
+        </Portal>
+      )}
+      {children}
+    </div>
+  );
+};

package/src/components/ThemedPreloader/ThemedPreloader.stories.tsx

@@ -1,41 +1,41 @@
-import { FC } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { colors } from '../../theme';
-import { IThemedPreloaderProps, ThemedPreloader } from './ThemedPreloader';
-
-interface IThemedPreloaderWithCustomProps extends IThemedPreloaderProps {
-  currentColor: string;
-}
-
-const ThemedPreloaderWithCustomProps: FC<IThemedPreloaderWithCustomProps> = ({
-  currentColor,
-  ...args
-}) => (
-  <div style={{ color: currentColor }}>
-    <ThemedPreloader {...args} />
-  </div>
-);
-
-export default {
-  title: 'ThemedPreloader',
-  component: ThemedPreloaderWithCustomProps,
-  argTypes: {
-    type: { options: ['default', 'logo', 'dots'], control: 'inline-radio' },
-  },
-};
-
-const Template: ComponentStory<typeof ThemedPreloaderWithCustomProps> = (args) => (
-  <ThemedPreloaderWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  type: 'dots',
-  useCurrentColor: false,
-  currentColor: colors.GREEN_FOCUS,
-};
-Default.parameters = {
-  controls: {
-    exclude: ['data'],
-  },
-};
+import { FC } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { colors } from '../../theme';
+import { IThemedPreloaderProps, ThemedPreloader } from './ThemedPreloader';
+
+interface IThemedPreloaderWithCustomProps extends IThemedPreloaderProps {
+  currentColor: string;
+}
+
+const ThemedPreloaderWithCustomProps: FC<IThemedPreloaderWithCustomProps> = ({
+  currentColor,
+  ...args
+}) => (
+  <div style={{ color: currentColor }}>
+    <ThemedPreloader {...args} />
+  </div>
+);
+
+export default {
+  title: 'ThemedPreloader',
+  component: ThemedPreloaderWithCustomProps,
+  argTypes: {
+    type: { options: ['default', 'logo', 'dots'], control: 'inline-radio' },
+  },
+};
+
+const Template: ComponentStory<typeof ThemedPreloaderWithCustomProps> = (args) => (
+  <ThemedPreloaderWithCustomProps {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  type: 'dots',
+  useCurrentColor: false,
+  currentColor: colors.GREEN_FOCUS,
+};
+Default.parameters = {
+  controls: {
+    exclude: ['data'],
+  },
+};