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

package/src/components/ThemedPreloader/ThemedPreloader.tsx

@@ -1,47 +1,47 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import { addDataAttributes } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { SvgPreloader, DotsPreloader } from './components';
-import { IPreloaderSvgType } from './types';
-import { ThemedPreloaderStyles, styles } from './ThemedPreloader.styles';
-
-export interface IThemedPreloaderProps extends ICommonProps {
-  tweakStyles?: ThemedPreloaderStyles;
-  /**
-   * @default `default`
-   */
-  type?: 'dots' | IPreloaderSvgType;
-  useCurrentColor?: boolean;
-}
-
-export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
-  type = 'default',
-  useCurrentColor = false,
-  data,
-  tweakStyles,
-}) => {
-  const { classes, componentStyles } = useTheme('ThemedPreloader', styles, tweakStyles);
-
-  const preloaderComponentStyles = useTweakStyles(
-    componentStyles,
-    tweakStyles,
-    'tweakPreloaderComponent',
-  );
-
-  return (
-    <div
-      className={clsx(classes.root, classes[type], {
-        [classes.currentColor]: useCurrentColor,
-      })}
-      {...addDataAttributes(data)}
-    >
-      {type === 'dots' ? (
-        <DotsPreloader tweakStyles={preloaderComponentStyles} />
-      ) : (
-        <SvgPreloader type={type} tweakStyles={preloaderComponentStyles} />
-      )}
-    </div>
-  );
-};
+import { FC } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../helpers';
+import { useTheme, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { SvgPreloader, DotsPreloader } from './components';
+import { IPreloaderSvgType } from './types';
+import { ThemedPreloaderStyles, styles } from './ThemedPreloader.styles';
+
+export interface IThemedPreloaderProps extends ICommonProps {
+  tweakStyles?: ThemedPreloaderStyles;
+  /**
+   * @default `default`
+   */
+  type?: 'dots' | IPreloaderSvgType;
+  useCurrentColor?: boolean;
+}
+
+export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
+  type = 'default',
+  useCurrentColor = false,
+  data,
+  tweakStyles,
+}) => {
+  const { classes, componentStyles } = useTheme('ThemedPreloader', styles, tweakStyles);
+
+  const preloaderComponentStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakPreloaderComponent',
+  );
+
+  return (
+    <div
+      className={clsx(classes.root, classes[type], {
+        [classes.currentColor]: useCurrentColor,
+      })}
+      {...addDataAttributes(data)}
+    >
+      {type === 'dots' ? (
+        <DotsPreloader tweakStyles={preloaderComponentStyles} />
+      ) : (
+        <SvgPreloader type={type} tweakStyles={preloaderComponentStyles} />
+      )}
+    </div>
+  );
+};

package/src/components/ThemedPreloader/components/DefaultPreloader/DefaultPreloader.tsx

@@ -1,29 +1,29 @@
-import { FC } from 'react';
-
-export const DefaultPreloader: FC = () => (
-  <svg width="100%" height="100%" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-      <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
-        <stop stopColor="currentColor" stopOpacity="0" offset="0%" />
-        <stop stopColor="currentColor" stopOpacity=".631" offset="63.146%" />
-        <stop stopColor="currentColor" offset="100%" />
-      </linearGradient>
-    </defs>
-    <g transform="translate(2,2)" fill="none">
-      <path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" strokeWidth="3">
-        <animateTransform
-          xmlns="http://www.w3.org/2000/svg"
-          attributeName="transform"
-          attributeType="XML"
-          type="rotate"
-          from="0 18 18"
-          to="360 18 18"
-          dur="1s"
-          begin="0s"
-          repeatCount="indefinite"
-          fill="freeze"
-        />
-      </path>
-    </g>
-  </svg>
-);
+import { FC } from 'react';
+
+export const DefaultPreloader: FC = () => (
+  <svg width="100%" height="100%" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+        <stop stopColor="currentColor" stopOpacity="0" offset="0%" />
+        <stop stopColor="currentColor" stopOpacity=".631" offset="63.146%" />
+        <stop stopColor="currentColor" offset="100%" />
+      </linearGradient>
+    </defs>
+    <g transform="translate(2,2)" fill="none">
+      <path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" strokeWidth="3">
+        <animateTransform
+          xmlns="http://www.w3.org/2000/svg"
+          attributeName="transform"
+          attributeType="XML"
+          type="rotate"
+          from="0 18 18"
+          to="360 18 18"
+          dur="1s"
+          begin="0s"
+          repeatCount="indefinite"
+          fill="freeze"
+        />
+      </path>
+    </g>
+  </svg>
+);

package/src/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.tsx

@@ -1,18 +1,18 @@
-import { FC } from 'react';
-import { useTheme } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { DotsPreloaderStyles, styles } from './DotsPreloader.styles';
-
-export interface IDotsPreloaderProps extends ICommonProps {
-  tweakStyles?: DotsPreloaderStyles;
-}
-
-export const DotsPreloader: FC<IDotsPreloaderProps> = ({ tweakStyles }) => {
-  const { classes } = useTheme('DotsPreloader', styles, tweakStyles);
-
-  return (
-    <div className={classes.root}>
-      <span className={classes.dot} />
-    </div>
-  );
-};
+import { FC } from 'react';
+import { useTheme } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { DotsPreloaderStyles, styles } from './DotsPreloader.styles';
+
+export interface IDotsPreloaderProps extends ICommonProps {
+  tweakStyles?: DotsPreloaderStyles;
+}
+
+export const DotsPreloader: FC<IDotsPreloaderProps> = ({ tweakStyles }) => {
+  const { classes } = useTheme('DotsPreloader', styles, tweakStyles);
+
+  return (
+    <div className={classes.root}>
+      <span className={classes.dot} />
+    </div>
+  );
+};

package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.tsx

@@ -1,25 +1,25 @@
-import { FC, useContext } from 'react';
-import { ThemeContext, useTheme } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
-import { IPreloaderSvgType } from '../../types';
-import { DefaultPreloader } from '../DefaultPreloader';
-import { SvgPreloaderStyles, styles } from './SvgPreloader.styles';
-
-export interface ISvgPreloaderProps extends ICommonProps {
-  type: IPreloaderSvgType;
-  tweakStyles?: SvgPreloaderStyles;
-}
-
-export const SvgPreloader: FC<ISvgPreloaderProps> = ({ type = 'default', tweakStyles }) => {
-  const { classes } = useTheme('SvgPreloader', styles, tweakStyles);
-  const { theme } = useContext(ThemeContext);
-  const PreloaderIcon = theme.preloaders?.[type] ?? DefaultPreloader;
-
-  const isInlineSvg = typeof PreloaderIcon === 'string';
-
-  return isInlineSvg ? (
-    <div className={classes.root} dangerouslySetInnerHTML={{ __html: PreloaderIcon }} />
-  ) : (
-    <PreloaderIcon />
-  );
-};
+import { FC, useContext } from 'react';
+import { ThemeContext, useTheme } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { IPreloaderSvgType } from '../../types';
+import { DefaultPreloader } from '../DefaultPreloader';
+import { SvgPreloaderStyles, styles } from './SvgPreloader.styles';
+
+export interface ISvgPreloaderProps extends ICommonProps {
+  type: IPreloaderSvgType;
+  tweakStyles?: SvgPreloaderStyles;
+}
+
+export const SvgPreloader: FC<ISvgPreloaderProps> = ({ type = 'default', tweakStyles }) => {
+  const { classes } = useTheme('SvgPreloader', styles, tweakStyles);
+  const { theme } = useContext(ThemeContext);
+  const PreloaderIcon = theme.preloaders?.[type] ?? DefaultPreloader;
+
+  const isInlineSvg = typeof PreloaderIcon === 'string';
+
+  return isInlineSvg ? (
+    <div className={classes.root} dangerouslySetInnerHTML={{ __html: PreloaderIcon }} />
+  ) : (
+    <PreloaderIcon />
+  );
+};

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

@@ -1,3 +1,3 @@
-export * from './DotsPreloader';
-export * from './SvgPreloader';
-export * from './DefaultPreloader';
+export * from './DotsPreloader';
+export * from './SvgPreloader';
+export * from './DefaultPreloader';

package/src/components/ThemedPreloader/constants.ts

@@ -1 +1 @@
-export const svgTypes = ['default', 'logo'] as const;
+export const svgTypes = ['default', 'logo'] as const;

package/src/components/ThemedPreloader/index.ts

@@ -1,4 +1,4 @@
-export * from './ThemedPreloader';
-export * from './types';
-export type { ThemedPreloaderStyles } from './ThemedPreloader.styles';
-export type { DotsPreloaderStyles, SvgPreloaderStyles } from './components';
+export * from './ThemedPreloader';
+export * from './types';
+export type { ThemedPreloaderStyles } from './ThemedPreloader.styles';
+export type { DotsPreloaderStyles, SvgPreloaderStyles } from './components';

package/src/components/ThemedPreloader/types.ts

@@ -1,3 +1,3 @@
-import { svgTypes } from './constants';
-
-export type IPreloaderSvgType = (typeof svgTypes)[number];
+import { svgTypes } from './constants';
+
+export type IPreloaderSvgType = (typeof svgTypes)[number];

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: '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: '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/Toaster/Toaster.tsx

@@ -1,108 +1,108 @@
-import { FC, ReactNode, useEffect } from 'react';
-import clsx from 'clsx';
-import {
-  isNotEmpty,
-  isReactNodeNotEmpty,
-  isStringNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { CloseButton } from '../CloseButton';
-import { Icon } from '../Icon';
-import { DEFAULT_TIMEOUT } from './constants';
-import { ToasterType } from './types';
-import { styles, ToasterStyles } from './Toaster.styles';
-
-export interface IToasterProps extends ICommonProps {
-  tweakStyles?: ToasterStyles;
-  /**
-   * @default `error`
-   */
-  type?: ToasterType;
-  title?: string;
-  text?: string;
-  children?: ReactNode;
-  /**
-   * Время автоматического закрытия тостера в миллисекундах
-   * @default 7000
-   */
-  timeout?: number;
-  /**
-   * @default false
-   */
-  hasCloseButton?: boolean;
-  /**
-   * @default false
-   */
-  shouldCloseOnClick?: boolean;
-  onClose?(): void;
-  onTimeEnd?(): void;
-}
-
-export const Toaster: FC<IToasterProps> = ({
-  title,
-  type = 'error',
-  text,
-  timeout = DEFAULT_TIMEOUT,
-  data,
-  tweakStyles,
-  hasCloseButton = false,
-  shouldCloseOnClick = false,
-  children,
-  onClose,
-  onTimeEnd,
-}) => {
-  const { classes, componentStyles } = useTheme('Toaster', styles, tweakStyles);
-
-  let timeoutFunction: ReturnType<typeof setTimeout>;
-
-  useEffect(() => {
-    if (onTimeEnd === undefined) {
-      return;
-    }
-
-    const disappear = async () => {
-      await new Promise((resolve) => {
-        timeoutFunction = setTimeout(() => {
-          resolve(undefined);
-        }, timeout);
-      });
-
-      onTimeEnd();
-      clearTimeout(timeoutFunction);
-    };
-
-    disappear();
-
-    return () => clearTimeout(timeoutFunction);
-  }, []);
-
-  const tweakCloseButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakCloseButton');
-
-  return (
-    <div
-      className={classes.root}
-      onClick={shouldCloseOnClick ? onClose : undefined}
-      {...addDataAttributes(data)}
-    >
-      <div className={clsx(classes.iconContainer, classes[type])}>
-        <Icon type={`status-${type}`} />
-      </div>
-      <div>
-        {isStringNotEmpty(title) && <div className={classes.title}>{title}</div>}
-        {isStringNotEmpty(text) && <div className={classes.text}>{text}</div>}
-        {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
-      </div>
-      {hasCloseButton && isNotEmpty(onClose) && (
-        <div className={classes.close}>
-          <CloseButton
-            onClose={onClose}
-            iconType="close-window"
-            tweakStyles={tweakCloseButtonStyles}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
+import { FC, ReactNode, useEffect } from 'react';
+import clsx from 'clsx';
+import {
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTheme, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { CloseButton } from '../CloseButton';
+import { Icon } from '../Icon';
+import { DEFAULT_TIMEOUT } from './constants';
+import { ToasterType } from './types';
+import { styles, ToasterStyles } from './Toaster.styles';
+
+export interface IToasterProps extends ICommonProps {
+  tweakStyles?: ToasterStyles;
+  /**
+   * @default `error`
+   */
+  type?: ToasterType;
+  title?: string;
+  text?: string;
+  children?: ReactNode;
+  /**
+   * Время автоматического закрытия тостера в миллисекундах
+   * @default 7000
+   */
+  timeout?: number;
+  /**
+   * @default false
+   */
+  hasCloseButton?: boolean;
+  /**
+   * @default false
+   */
+  shouldCloseOnClick?: boolean;
+  onClose?(): void;
+  onTimeEnd?(): void;
+}
+
+export const Toaster: FC<IToasterProps> = ({
+  title,
+  type = 'error',
+  text,
+  timeout = DEFAULT_TIMEOUT,
+  data,
+  tweakStyles,
+  hasCloseButton = false,
+  shouldCloseOnClick = false,
+  children,
+  onClose,
+  onTimeEnd,
+}) => {
+  const { classes, componentStyles } = useTheme('Toaster', styles, tweakStyles);
+
+  let timeoutFunction: ReturnType<typeof setTimeout>;
+
+  useEffect(() => {
+    if (onTimeEnd === undefined) {
+      return;
+    }
+
+    const disappear = async () => {
+      await new Promise((resolve) => {
+        timeoutFunction = setTimeout(() => {
+          resolve(undefined);
+        }, timeout);
+      });
+
+      onTimeEnd();
+      clearTimeout(timeoutFunction);
+    };
+
+    disappear();
+
+    return () => clearTimeout(timeoutFunction);
+  }, []);
+
+  const tweakCloseButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakCloseButton');
+
+  return (
+    <div
+      className={classes.root}
+      onClick={shouldCloseOnClick ? onClose : undefined}
+      {...addDataAttributes(data)}
+    >
+      <div className={clsx(classes.iconContainer, classes[type])}>
+        <Icon type={`status-${type}`} />
+      </div>
+      <div>
+        {isStringNotEmpty(title) && <div className={classes.title}>{title}</div>}
+        {isStringNotEmpty(text) && <div className={classes.text}>{text}</div>}
+        {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
+      </div>
+      {hasCloseButton && isNotEmpty(onClose) && (
+        <div className={classes.close}>
+          <CloseButton
+            onClose={onClose}
+            iconType="close-window"
+            tweakStyles={tweakCloseButtonStyles}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Toaster/constants.ts

@@ -1 +1 @@
-export const DEFAULT_TIMEOUT = 7 * 1000; // 7 seconds
+export const DEFAULT_TIMEOUT = 7 * 1000; // 7 seconds

package/src/components/Toaster/index.ts

@@ -1,3 +1,3 @@
-export * from './Toaster';
-export * from './types';
-export type { ToasterStyles } from './Toaster.styles';
+export * from './Toaster';
+export * from './types';
+export type { ToasterStyles } from './Toaster.styles';

package/src/components/Toaster/types.ts

@@ -1 +1 @@
-export type ToasterType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
+export type ToasterType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';

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

@@ -1,19 +1,19 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Tooltip } from './Tooltip';
-
-export default {
-  title: '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: '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} />;