@true-engineering/true-react-common-ui-kit 3.24.1 → 3.25.1

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

package/src/components/TextWithInfo/TextWithInfo.tsx

@@ -1,62 +1,62 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { TextWithTooltip } from '../TextWithTooltip';
-import { useStyles, ITextWithInfoStyles } from './TextWithInfo.styles';
-
-export interface ITextWithInfoProps extends ICommonProps<ITextWithInfoStyles> {
-  text: string;
-  /** @default false */
-  isSelected?: boolean;
-  textTooltip?: string;
-  info?: {
-    infoTooltip?: string;
-    link?: string;
-  };
-  onClick: () => void;
-}
-
-export const TextWithInfo: FC<ITextWithInfoProps> = ({
-  text,
-  isSelected = false,
-  info,
-  textTooltip,
-  onClick,
-  testId,
-  data,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <div
-      className={clsx(classes.root, isSelected && classes.selected)}
-      {...addDataTestId(testId)}
-      {...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 { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { TextWithTooltip } from '../TextWithTooltip';
+import { useStyles, ITextWithInfoStyles } from './TextWithInfo.styles';
+
+export interface ITextWithInfoProps extends ICommonProps<ITextWithInfoStyles> {
+  text: string;
+  /** @default false */
+  isSelected?: boolean;
+  textTooltip?: string;
+  info?: {
+    infoTooltip?: string;
+    link?: string;
+  };
+  onClick: () => void;
+}
+
+export const TextWithInfo: FC<ITextWithInfoProps> = ({
+  text,
+  isSelected = false,
+  info,
+  textTooltip,
+  onClick,
+  testId,
+  data,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <div
+      className={clsx(classes.root, isSelected && classes.selected)}
+      {...addDataTestId(testId)}
+      {...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.stories.tsx

@@ -1,58 +1,58 @@
-import { ComponentStory } from '@storybook/react';
-import { TextWithTooltip } from './TextWithTooltip';
-
-const positions = [
-  'top',
-  'bottom',
-  'right',
-  'left',
-  'top-start',
-  'top-end',
-  'bottom-start',
-  'bottom-end',
-  'right-start',
-  'right-end',
-  'left-start',
-  'left-end',
-  'auto',
-  'auto-start',
-  'auto-end',
-];
-
-export default {
-  title: 'Data Display/TextWithTooltip',
-  component: TextWithTooltip,
-  argTypes: {
-    tooltipPosition: { control: 'select', options: positions },
-    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
-    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
-    mouseEventType: { control: 'inline-radio', options: ['hover', 'click'] },
-  },
-};
-
-const Template: ComponentStory<typeof TextWithTooltip> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 600,
-      height: 400,
-    }}
-  >
-    <TextWithTooltip {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Наведи на меня - появится тултип',
-  tooltipText: 'Текст тултипа',
-  tooltipPosition: 'top',
-  tooltipView: 'tooltip',
-  tooltipType: 'info',
-  isDisabled: false,
-  mouseEventType: 'hover',
-  shouldRenderInBody: true,
-};
+import { ComponentStory } from '@storybook/react';
+import { TextWithTooltip } from './TextWithTooltip';
+
+const positions = [
+  'top',
+  'bottom',
+  'right',
+  'left',
+  'top-start',
+  'top-end',
+  'bottom-start',
+  'bottom-end',
+  'right-start',
+  'right-end',
+  'left-start',
+  'left-end',
+  'auto',
+  'auto-start',
+  'auto-end',
+];
+
+export default {
+  title: 'Data Display/TextWithTooltip',
+  component: TextWithTooltip,
+  argTypes: {
+    tooltipPosition: { control: 'select', options: positions },
+    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
+    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
+    mouseEventType: { control: 'inline-radio', options: ['hover', 'click'] },
+  },
+};
+
+const Template: ComponentStory<typeof TextWithTooltip> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 600,
+      height: 400,
+    }}
+  >
+    <TextWithTooltip {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Наведи на меня - появится тултип',
+  tooltipText: 'Текст тултипа',
+  tooltipPosition: 'top',
+  tooltipView: 'tooltip',
+  tooltipType: 'info',
+  isDisabled: false,
+  mouseEventType: 'hover',
+  shouldRenderInBody: true,
+};

package/src/components/TextWithTooltip/TextWithTooltip.tsx

@@ -1,5 +1,4 @@
-import { FC, ReactNode, useEffect, useRef, useState } from 'react';
-import { Styles } from 'react-jss';
+import { CSSProperties, FC, ReactNode, useEffect, useRef, useState } from 'react';
 import { Portal } from 'react-overlays';
 import usePopper, { Modifier, Placement } from 'react-overlays/usePopper';
 import clsx from 'clsx';
@@ -137,7 +136,7 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
         <Portal container={shouldRenderInBody ? document.body : root.current}>
           <div
             className={classes.tooltip}
-            style={popperStyles.popper as Styles}
+            style={popperStyles.popper as CSSProperties}
             {...attributes.popper}
             ref={tooltip}
           >

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

package/src/components/ThemedPreloader/ThemedPreloader.tsx

@@ -1,54 +1,54 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { SvgPreloader, DotsPreloader } from './components';
-import { IPreloaderSvgType } from './types';
-import { useStyles, IThemedPreloaderStyles } from './ThemedPreloader.styles';
-
-export interface IThemedPreloaderProps extends ICommonProps<IThemedPreloaderStyles> {
-  /** @default 'default' */
-  type?: 'dots' | IPreloaderSvgType;
-  /** @default false */
-  useCurrentColor?: boolean;
-}
-
-export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
-  type = 'default',
-  useCurrentColor = false,
-  data,
-  testId,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakDotsPreloaderStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakDotsPreloader',
-    currentComponentName: 'ThemedPreloader',
-  });
-
-  const tweakSvgPreloaderStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakSvgPreloader',
-    currentComponentName: 'ThemedPreloader',
-  });
-
-  return (
-    <div
-      className={clsx(classes.root, classes[type], {
-        [classes.currentColor]: useCurrentColor,
-      })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      {type === 'dots' ? (
-        <DotsPreloader tweakStyles={tweakDotsPreloaderStyles} />
-      ) : (
-        <SvgPreloader type={type} tweakStyles={tweakSvgPreloaderStyles} />
-      )}
-    </div>
-  );
-};
+import { FC } from 'react';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { SvgPreloader, DotsPreloader } from './components';
+import { IPreloaderSvgType } from './types';
+import { useStyles, IThemedPreloaderStyles } from './ThemedPreloader.styles';
+
+export interface IThemedPreloaderProps extends ICommonProps<IThemedPreloaderStyles> {
+  /** @default 'default' */
+  type?: 'dots' | IPreloaderSvgType;
+  /** @default false */
+  useCurrentColor?: boolean;
+}
+
+export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
+  type = 'default',
+  useCurrentColor = false,
+  data,
+  testId,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakDotsPreloaderStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakDotsPreloader',
+    currentComponentName: 'ThemedPreloader',
+  });
+
+  const tweakSvgPreloaderStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakSvgPreloader',
+    currentComponentName: 'ThemedPreloader',
+  });
+
+  return (
+    <div
+      className={clsx(classes.root, classes[type], {
+        [classes.currentColor]: useCurrentColor,
+      })}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      {type === 'dots' ? (
+        <DotsPreloader tweakStyles={tweakDotsPreloaderStyles} />
+      ) : (
+        <SvgPreloader type={type} tweakStyles={tweakSvgPreloaderStyles} />
+      )}
+    </div>
+  );
+};

package/src/components/ThemedPreloader/components/DefaultPreloader/index.ts

@@ -1 +1 @@
-export * from './DefaultPreloader';
+export * from './DefaultPreloader';

package/src/components/Toaster/Toaster.stories.tsx

@@ -1,30 +1,30 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Button } from '../Button';
-import { Toaster } from './Toaster';
-
-const types = ['error', 'info', 'warning', 'ok', 'not-ok'];
-
-export default {
-  title: 'Feedback/Toaster',
-  component: Toaster,
-  args: {
-    title: 'Произошла очень страшная ошибка',
-    text: 'Мы даже не знаем, чем вам помочь!',
-    type: types[0],
-    timeout: 7000,
-    hasCloseButton: false,
-    shouldCloseOnClick: false,
-  },
-  argTypes: {
-    type: { control: 'inline-radio', options: types },
-  },
-  parameters: {
-    controls: { exclude: ['onTimeEnd', 'onClose', 'data', 'tweakStyles'] },
-  },
-} as ComponentMeta<typeof Toaster>;
-
-export const Default: ComponentStory<typeof Toaster> = (args) => (
-  <Toaster {...args} onTimeEnd={() => console.log(1)} onClose={() => alert('closed')}>
-    <Button size="m">Нажмите</Button>
-  </Toaster>
-);
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Button } from '../Button';
+import { Toaster } from './Toaster';
+
+const types = ['error', 'info', 'warning', 'ok', 'not-ok'];
+
+export default {
+  title: 'Feedback/Toaster',
+  component: Toaster,
+  args: {
+    title: 'Произошла очень страшная ошибка',
+    text: 'Мы даже не знаем, чем вам помочь!',
+    type: types[0],
+    timeout: 7000,
+    hasCloseButton: false,
+    shouldCloseOnClick: false,
+  },
+  argTypes: {
+    type: { control: 'inline-radio', options: types },
+  },
+  parameters: {
+    controls: { exclude: ['onTimeEnd', 'onClose', 'data', 'tweakStyles'] },
+  },
+} as ComponentMeta<typeof Toaster>;
+
+export const Default: ComponentStory<typeof Toaster> = (args) => (
+  <Toaster {...args} onTimeEnd={() => console.log(1)} onClose={() => alert('closed')}>
+    <Button size="m">Нажмите</Button>
+  </Toaster>
+);

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,19 +1,19 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Tooltip } from './Tooltip';
-
-export default {
-  title: 'Data Display/Tooltip',
-  component: Tooltip,
-  args: {
-    text: 'Tooltip Text',
-    view: 'tooltip',
-    type: 'info',
-  },
-  argTypes: {
-    text: { control: 'text' },
-    view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
-    type: { control: 'inline-radio', options: ['info', 'error'] },
-  },
-} as ComponentMeta<typeof Tooltip>;
-
-export const Default: ComponentStory<typeof Tooltip> = (args) => <Tooltip {...args} />;
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+
+export default {
+  title: 'Data Display/Tooltip',
+  component: Tooltip,
+  args: {
+    text: 'Tooltip Text',
+    view: 'tooltip',
+    type: 'info',
+  },
+  argTypes: {
+    text: { control: 'text' },
+    view: { control: 'inline-radio', options: ['tooltip', 'hint'] },
+    type: { control: 'inline-radio', options: ['info', 'error'] },
+  },
+} as ComponentMeta<typeof Tooltip>;
+
+export const Default: ComponentStory<typeof Tooltip> = (args) => <Tooltip {...args} />;