@true-engineering/true-react-common-ui-kit 2.7.0 → 3.0.0-alpha.1

package/src/components/Toaster/Toaster.tsx

@@ -1,108 +1,114 @@
-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 {
+  addDataTestId,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { CloseButton } from '../CloseButton';
+import { Icon } from '../Icon';
+import { DEFAULT_TIMEOUT } from './constants';
+import { IToasterType } from './types';
+import { useStyles, IToasterStyles } from './Toaster.styles';
+
+export interface IToasterProps extends ICommonProps<IToasterStyles> {
+  /**
+   * @default `error`
+   */
+  type?: IToasterType;
+  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,
+  testId,
+  tweakStyles,
+  hasCloseButton = false,
+  shouldCloseOnClick = false,
+  children,
+  onClose,
+  onTimeEnd,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakCloseButtonStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakCloseButton',
+    currentComponentName: 'Toaster',
+  });
+
+  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);
+  }, []);
+
+  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>
+        {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 { IToasterStyles } from './Toaster.styles';

package/src/components/Toaster/types.ts

@@ -1 +1 @@
-export type ToasterType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
+export type IToasterType = '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} />;

package/src/components/Tooltip/Tooltip.styles.ts

@@ -1,45 +1,49 @@
-import { rgba } from '../../helpers';
-import { colors, dimensions } from '../../theme';
-import { ComponentStyles } from '../../types';
-import { ITooltipProps } from './Tooltip';
-
-interface IStyleProps {
-  type: NonNullable<ITooltipProps['type']>;
-}
-
-export const styles = {
-  root: {
-    display: 'inline-block',
-    boxSizing: 'border-box',
-  },
-
-  tooltip: {
-    fontSize: 14,
-    padding: [18, 20],
-    letterSpacing: 0.15,
-    backgroundColor: ({ type }: IStyleProps): string =>
-      type === 'error' ? colors.RED_WARNING : colors.CLASSIC_WHITE,
-    color: ({ type }: IStyleProps): string =>
-      type === 'error' ? colors.CLASSIC_WHITE : colors.FONT_MAIN,
-    boxShadow: `0 0 1px ${rgba(colors.FONT_MAIN, 0.4)}, 0 -2px 6px ${rgba(
-      colors.FONT_MAIN,
-      0.06,
-    )}, 0 8px 32px -8px ${rgba(colors.FONT_MAIN, 0.3)}`,
-    borderRadius: 12,
-    lineHeight: 1.4,
-    maxWidth: 320,
-  },
-
-  hint: {
-    whiteSpace: 'nowrap',
-    fontSize: 12,
-    padding: [8, 12],
-    borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    backgroundColor: ({ type }: { type: ITooltipProps['type'] }): string =>
-      type === 'error' ? colors.RED_WARNING : colors.FONT_MEDIUM,
-    color: colors.CLASSIC_WHITE,
-    letterSpacing: 0.2,
-  },
-};
-
-export type TooltipStyles = ComponentStyles<typeof styles, IStyleProps>;
+import { rgba } from '../../helpers';
+import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Tooltip', {
+  root: {
+    display: 'inline-block',
+    boxSizing: 'border-box',
+  },
+
+  tooltip: {
+    fontSize: 14,
+    padding: [18, 20],
+    letterSpacing: 0.15,
+    backgroundColor: colors.CLASSIC_WHITE,
+    color: colors.FONT_MAIN,
+    boxShadow: `0 0 1px ${rgba(colors.FONT_MAIN, 0.4)}, 0 -2px 6px ${rgba(
+      colors.FONT_MAIN,
+      0.06,
+    )}, 0 8px 32px -8px ${rgba(colors.FONT_MAIN, 0.3)}`,
+    borderRadius: 12,
+    lineHeight: 1.4,
+    maxWidth: 320,
+  },
+
+  hint: {
+    whiteSpace: 'nowrap',
+    fontSize: 12,
+    padding: [8, 12],
+    borderRadius: dimensions.BORDER_RADIUS_SMALL,
+    backgroundColor: colors.FONT_MEDIUM,
+    color: colors.CLASSIC_WHITE,
+    letterSpacing: 0.2,
+  },
+
+  info: {},
+
+  error: {
+    '&$tooltip': {
+      backgroundColor: colors.RED_WARNING,
+      color: colors.CLASSIC_WHITE,
+    },
+
+    '&$hint': {
+      backgroundColor: colors.RED_WARNING,
+    },
+  },
+});
+
+export type ITooltipStyles = ITweakStyles<typeof useStyles>;

package/src/components/Tooltip/Tooltip.tsx

@@ -1,35 +1,39 @@
-import { FC, ReactNode } from 'react';
-import clsx from 'clsx';
-import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { styles, TooltipStyles } from './Tooltip.styles';
-
-export interface ITooltipProps extends ICommonProps {
-  tweakStyles?: TooltipStyles;
-  text: ReactNode;
-  /**
-   * @default `tooltip`
-   */
-  view?: 'tooltip' | 'hint';
-  /**
-   * @default `info`
-   */
-  type?: 'info' | 'error';
-}
-
-export const Tooltip: FC<ITooltipProps> = ({
-  text,
-  view = 'tooltip',
-  type = 'info',
-  data,
-  tweakStyles,
-}) => {
-  const { classes } = useTheme('Tooltip', styles, tweakStyles, { type });
-
-  return (
-    <div className={clsx(classes.root, classes[view])} {...addDataAttributes(data)}>
-      {text}
-    </div>
-  );
-};
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { useStyles, ITooltipStyles } from './Tooltip.styles';
+
+export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
+  text: ReactNode;
+  /**
+   * @default `tooltip`
+   */
+  view?: 'tooltip' | 'hint';
+  /**
+   * @default `info`
+   */
+  type?: 'info' | 'error';
+}
+
+export const Tooltip: FC<ITooltipProps> = ({
+  text,
+  view = 'tooltip',
+  type = 'info',
+  data,
+  testId,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <div
+      className={clsx(classes.root, classes[view], classes[type])}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      {text}
+    </div>
+  );
+};

package/src/components/Tooltip/index.ts

@@ -1,3 +1,3 @@
-export * from './Tooltip';
-export * from './types';
-export type { TooltipStyles } from './Tooltip.styles';
+export * from './Tooltip';
+export * from './types';
+export type { ITooltipStyles } from './Tooltip.styles';

package/src/components/Tooltip/types.ts

@@ -1 +1 @@
-export type ITooltipType = 'info' | 'warning';
+export type ITooltipType = 'info' | 'warning';

package/src/components/index.ts

@@ -1,37 +1,36 @@
-export * from './AccountInfo';
-export * from './AddButton';
-export * from './Button';
-export * from './Checkbox';
-export * from './CloseButton';
-export * from './Colors';
-export * from './CssBaseline';
-export * from './DateInput';
-export * from './DatePicker';
-export * from './Description';
-export * from './FiltersPane';
-export * from './Flag';
-export * from './FlexibleTable';
-export * from './Icon';
-export * from './IncrementInput';
-export * from './Input';
-export * from './List';
-export * from './ListItem';
-export * from './Modal';
-export * from './MoreMenu';
-export * from './MultiSelect';
-export * from './MultiSelectList';
-export * from './Notification';
-export * from './NumberInput';
-export * from './SearchInput';
-export * from './SmartInput';
-export * from './PhoneInput';
-export * from './RadioButton';
-export * from './Select';
-export * from './Switch';
-export * from './TextArea';
-export * from './TextWithInfo';
-export * from './TextWithTooltip';
-export * from './ThemedPreloader';
-export * from './Toaster';
-export * from './Tooltip';
-export * from './ScrollIntoViewIfNeeded';
+export * from './AccountInfo';
+export * from './AddButton';
+export * from './Button';
+export * from './Checkbox';
+export * from './CloseButton';
+export * from './Colors';
+export * from './CssBaseline';
+export * from './DateInput';
+export * from './DatePicker';
+export * from './Description';
+export * from './FiltersPane';
+export * from './Flag';
+export * from './FlexibleTable';
+export * from './Icon';
+export * from './IncrementInput';
+export * from './Input';
+export * from './List';
+export * from './Modal';
+export * from './MoreMenu';
+export * from './MultiSelect';
+export * from './MultiSelectList';
+export * from './Notification';
+export * from './NumberInput';
+export * from './SearchInput';
+export * from './SmartInput';
+export * from './PhoneInput';
+export * from './RadioButton';
+export * from './Select';
+export * from './Switch';
+export * from './TextArea';
+export * from './TextWithInfo';
+export * from './TextWithTooltip';
+export * from './ThemedPreloader';
+export * from './Toaster';
+export * from './Tooltip';
+export * from './ScrollIntoViewIfNeeded';

package/src/helpers/index.ts

@@ -1,5 +1,3 @@
-export * from './popper-helpers';
-export * from './phone';
-export * from './misc';
-export * from './deprecated';
-export * from './snippets';
+export * from './popper-helpers';
+export * from './phone';
+export * from './misc';