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

package/src/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.styles.ts

@@ -1,55 +1,55 @@
-import { createThemedStyles, ITweakStyles } from '../../../../theme';
-
-export const useStyles = createThemedStyles('DotsPreloader', {
-  root: {
-    display: 'flex',
-    gap: 4,
-    '--dot-size': '8px',
-
-    '&::before, &::after': {
-      content: '""',
-      extend: 'fadedDot',
-    },
-
-    '&::before': {
-      animationDelay: '0',
-    },
-
-    '&::after': {
-      animationDelay: '360ms',
-    },
-  },
-
-  /* ----------- 3 DOTS ---------- */
-
-  '@keyframes FadedDots': {
-    '0%': {
-      opacity: 0.2,
-    },
-    '30%': {
-      opacity: 1,
-    },
-    '100%': {
-      opacity: 0.2,
-    },
-  },
-
-  // используется в .dot и в before и after элементах root
-  fadedDot: {
-    display: 'block',
-    animationDuration: 750,
-    animationIterationCount: 'infinite',
-    animationName: '$FadedDots',
-    borderRadius: '50%',
-    width: 'var(--dot-size)',
-    height: 'var(--dot-size)',
-    backgroundColor: 'currentColor',
-  },
-
-  dot: {
-    extend: 'fadedDot',
-    animationDelay: '180ms',
-  },
-});
-
-export type IDotsPreloaderStyles = ITweakStyles<typeof useStyles>;
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
+
+export const useStyles = createThemedStyles('DotsPreloader', {
+  root: {
+    display: 'flex',
+    gap: 4,
+    '--dot-size': '8px',
+
+    '&::before, &::after': {
+      content: '""',
+      extend: 'fadedDot',
+    },
+
+    '&::before': {
+      animationDelay: '0',
+    },
+
+    '&::after': {
+      animationDelay: '360ms',
+    },
+  },
+
+  /* ----------- 3 DOTS ---------- */
+
+  '@keyframes FadedDots': {
+    '0%': {
+      opacity: 0.2,
+    },
+    '30%': {
+      opacity: 1,
+    },
+    '100%': {
+      opacity: 0.2,
+    },
+  },
+
+  // используется в .dot и в before и after элементах root
+  fadedDot: {
+    display: 'block',
+    animationDuration: 750,
+    animationIterationCount: 'infinite',
+    animationName: '$FadedDots',
+    borderRadius: '50%',
+    width: 'var(--dot-size)',
+    height: 'var(--dot-size)',
+    backgroundColor: 'currentColor',
+  },
+
+  dot: {
+    extend: 'fadedDot',
+    animationDelay: '180ms',
+  },
+});
+
+export type IDotsPreloaderStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,15 +1,15 @@
-import { FC } from 'react';
-import { ICommonProps } from '../../../../types';
-import { useStyles, IDotsPreloaderStyles } from './DotsPreloader.styles';
-
-export type IDotsPreloaderProps = Pick<ICommonProps<IDotsPreloaderStyles>, 'tweakStyles'>;
-
-export const DotsPreloader: FC<IDotsPreloaderProps> = ({ tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <div className={classes.root}>
-      <span className={classes.dot} />
-    </div>
-  );
-};
+import { FC } from 'react';
+import { ICommonProps } from '../../../../types';
+import { useStyles, IDotsPreloaderStyles } from './DotsPreloader.styles';
+
+export type IDotsPreloaderProps = Pick<ICommonProps<IDotsPreloaderStyles>, 'tweakStyles'>;
+
+export const DotsPreloader: FC<IDotsPreloaderProps> = ({ tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <div className={classes.root}>
+      <span className={classes.dot} />
+    </div>
+  );
+};

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

@@ -1,2 +1,2 @@
-export { DotsPreloader } from './DotsPreloader';
-export type { IDotsPreloaderStyles } from './DotsPreloader.styles';
+export { DotsPreloader } from './DotsPreloader';
+export type { IDotsPreloaderStyles } from './DotsPreloader.styles';

package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.styles.ts

@@ -1,11 +1,11 @@
-import { createThemedStyles, ITweakStyles } from '../../../../theme';
-
-export const useStyles = createThemedStyles('SvgPreloader', {
-  root: {
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-  },
-});
-
-export type ISvgPreloaderStyles = ITweakStyles<typeof useStyles>;
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
+
+export const useStyles = createThemedStyles('SvgPreloader', {
+  root: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+  },
+});
+
+export type ISvgPreloaderStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,24 +1,24 @@
-import { FC, useContext } from 'react';
-import { ThemeContext } from '../../../../theme';
-import { ICommonProps } from '../../../../types';
-import { IPreloaderSvgType } from '../../types';
-import { DefaultPreloader } from '../DefaultPreloader';
-import { useStyles, ISvgPreloaderStyles } from './SvgPreloader.styles';
-
-export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyles>, 'tweakStyles'> {
-  type: IPreloaderSvgType;
-}
-
-export const SvgPreloader: FC<ISvgPreloaderProps> = ({ type = 'default', tweakStyles }) => {
-  const classes = useStyles({ theme: 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 } from '../../../../theme';
+import { ICommonProps } from '../../../../types';
+import { IPreloaderSvgType } from '../../types';
+import { DefaultPreloader } from '../DefaultPreloader';
+import { useStyles, ISvgPreloaderStyles } from './SvgPreloader.styles';
+
+export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyles>, 'tweakStyles'> {
+  type: IPreloaderSvgType;
+}
+
+export const SvgPreloader: FC<ISvgPreloaderProps> = ({ type = 'default', tweakStyles }) => {
+  const classes = useStyles({ theme: 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/SvgPreloader/index.ts

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

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 { IThemedPreloaderStyles } from './ThemedPreloader.styles';
-export type { IDotsPreloaderStyles, ISvgPreloaderStyles } from './components';
+export * from './ThemedPreloader';
+export * from './types';
+export type { IThemedPreloaderStyles } from './ThemedPreloader.styles';
+export type { IDotsPreloaderStyles, ISvgPreloaderStyles } 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: '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/Toaster/Toaster.styles.ts

@@ -1,60 +1,60 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
-import { IIconButtonStyles } from '../IconButton';
-
-export const useStyles = createThemedStyles('Toaster', {
-  root: {
-    borderRadius: 8,
-    position: 'relative',
-    background: colors.CLASSIC_WHITE,
-    padding: [20, 40, 20, 20],
-    display: 'flex',
-  },
-
-  iconContainer: {
-    width: 20,
-    height: 20,
-    flexShrink: 0,
-    marginRight: 16,
-  },
-
-  error: {
-    color: colors.RED_WARNING,
-  },
-
-  info: {},
-
-  warning: {
-    color: colors.ORANGE_FOCUS,
-  },
-
-  ok: {
-    color: colors.GREEN_FOCUS,
-  },
-
-  'not-ok': {
-    color: colors.FONT_LABEL,
-  },
-
-  text: {},
-
-  title: {},
-
-  content: {
-    '&:not(:first-child):not(:empty)': {
-      marginTop: 16,
-    },
-  },
-
-  close: {
-    position: 'absolute',
-    top: 12,
-    right: 12,
-    width: 32,
-    height: 32,
-  },
-});
-
-export type IToasterStyles = ITweakStyles<
-  typeof useStyles,
-  { tweakCloseButton: IIconButtonStyles }
->;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IIconButtonStyles } from '../IconButton';
+
+export const useStyles = createThemedStyles('Toaster', {
+  root: {
+    borderRadius: 8,
+    position: 'relative',
+    background: colors.CLASSIC_WHITE,
+    padding: [20, 40, 20, 20],
+    display: 'flex',
+  },
+
+  iconContainer: {
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+    marginRight: 16,
+  },
+
+  error: {
+    color: colors.RED_WARNING,
+  },
+
+  info: {},
+
+  warning: {
+    color: colors.ORANGE_FOCUS,
+  },
+
+  ok: {
+    color: colors.GREEN_FOCUS,
+  },
+
+  'not-ok': {
+    color: colors.FONT_LABEL,
+  },
+
+  text: {},
+
+  title: {},
+
+  content: {
+    '&:not(:first-child):not(:empty)': {
+      marginTop: 16,
+    },
+  },
+
+  close: {
+    position: 'absolute',
+    top: 12,
+    right: 12,
+    width: 32,
+    height: 32,
+  },
+});
+
+export type IToasterStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakCloseButton: IIconButtonStyles }
+>;

package/src/components/Toaster/Toaster.tsx

@@ -1,96 +1,96 @@
-import { FC, ReactNode, useEffect } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  isEmpty,
-  isNotEmpty,
-  isReactNodeNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { IconButton } from '../IconButton';
-import { DEFAULT_TIMEOUT } from './constants';
-import { IToasterType } from './types';
-import { IToasterStyles, useStyles } from './Toaster.styles';
-
-export interface IToasterProps extends ICommonProps<IToasterStyles> {
-  /** @default 'error' */
-  type?: IToasterType;
-  title?: ReactNode;
-  text?: ReactNode;
-  children?: ReactNode;
-  /**
-   * Время автоматического закрытия тостера в миллисекундах
-   * @default 7000
-   */
-  timeout?: number;
-  /** @default false */
-  hasCloseButton?: boolean;
-  /** @default false */
-  shouldCloseOnClick?: boolean;
-  onClose?: () => void;
-  onTimeEnd?: () => void;
-}
-
-export const Toaster: FC<IToasterProps> = ({
-  type = 'error',
-  title,
-  text,
-  children,
-  timeout = DEFAULT_TIMEOUT,
-  hasCloseButton = false,
-  shouldCloseOnClick = false,
-  data,
-  testId,
-  tweakStyles,
-  onClose,
-  onTimeEnd,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakCloseButtonStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakCloseButton',
-    currentComponentName: 'Toaster',
-  });
-
-  useEffect(() => {
-    if (!Number.isFinite(timeout) || isEmpty(onTimeEnd)) {
-      return;
-    }
-
-    const timeoutId = window.setTimeout(() => onTimeEnd(), timeout);
-
-    return () => window.clearTimeout(timeoutId);
-  }, []);
-
-  return (
-    <div
-      className={classes.root}
-      onClick={shouldCloseOnClick ? onClose : undefined}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <div className={clsx(classes.iconContainer, classes[type])}>
-        <Icon type={`status-${type}`} />
-      </div>
-      <div>
-        {isReactNodeNotEmpty(title) && <div className={classes.title}>{title}</div>}
-        {isReactNodeNotEmpty(text) && <div className={classes.text}>{text}</div>}
-        {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
-      </div>
-      {hasCloseButton && isNotEmpty(onClose) && (
-        <div className={classes.close}>
-          <IconButton
-            view="cancel-light"
-            icon="close-window"
-            tweakStyles={tweakCloseButtonStyles}
-            onClick={onClose}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
+import { FC, ReactNode, useEffect } from 'react';
+import clsx from 'clsx';
+import {
+  addDataTestId,
+  isEmpty,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { IconButton } from '../IconButton';
+import { DEFAULT_TIMEOUT } from './constants';
+import { IToasterType } from './types';
+import { IToasterStyles, useStyles } from './Toaster.styles';
+
+export interface IToasterProps extends ICommonProps<IToasterStyles> {
+  /** @default 'error' */
+  type?: IToasterType;
+  title?: ReactNode;
+  text?: ReactNode;
+  children?: ReactNode;
+  /**
+   * Время автоматического закрытия тостера в миллисекундах
+   * @default 7000
+   */
+  timeout?: number;
+  /** @default false */
+  hasCloseButton?: boolean;
+  /** @default false */
+  shouldCloseOnClick?: boolean;
+  onClose?: () => void;
+  onTimeEnd?: () => void;
+}
+
+export const Toaster: FC<IToasterProps> = ({
+  type = 'error',
+  title,
+  text,
+  children,
+  timeout = DEFAULT_TIMEOUT,
+  hasCloseButton = false,
+  shouldCloseOnClick = false,
+  data,
+  testId,
+  tweakStyles,
+  onClose,
+  onTimeEnd,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakCloseButtonStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakCloseButton',
+    currentComponentName: 'Toaster',
+  });
+
+  useEffect(() => {
+    if (!Number.isFinite(timeout) || isEmpty(onTimeEnd)) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => onTimeEnd(), timeout);
+
+    return () => window.clearTimeout(timeoutId);
+  }, []);
+
+  return (
+    <div
+      className={classes.root}
+      onClick={shouldCloseOnClick ? onClose : undefined}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <div className={clsx(classes.iconContainer, classes[type])}>
+        <Icon type={`status-${type}`} />
+      </div>
+      <div>
+        {isReactNodeNotEmpty(title) && <div className={classes.title}>{title}</div>}
+        {isReactNodeNotEmpty(text) && <div className={classes.text}>{text}</div>}
+        {isReactNodeNotEmpty(children) && <div className={classes.content}>{children}</div>}
+      </div>
+      {hasCloseButton && isNotEmpty(onClose) && (
+        <div className={classes.close}>
+          <IconButton
+            view="cancel-light"
+            icon="close-window"
+            tweakStyles={tweakCloseButtonStyles}
+            onClick={onClose}
+          />
+        </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 { IToasterStyles } from './Toaster.styles';
+export * from './Toaster';
+export * from './types';
+export type { IToasterStyles } from './Toaster.styles';

package/src/components/Toaster/types.ts

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