@true-engineering/true-react-common-ui-kit 2.5.0 → 3.0.0-alpha.0

package/src/components/TextWithTooltip/TextWithTooltip.tsx

@@ -3,14 +3,14 @@ import { Styles } from 'react-jss';
 import { Portal } from 'react-overlays';
 import usePopper, { Modifier, Placement } from 'react-overlays/usePopper';
 import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useOnClickOutsideWithRef, useTheme, useTweakStyles } from '../../hooks';
+import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ITooltipProps, Tooltip } from '../Tooltip';
-import { styles, TextWithTooltipStyles } from './TextWithTooltip.styles';
+import { useStyles, ITextWithTooltipStyles } from './TextWithTooltip.styles';
 
-export interface ITextWithTooltipProps extends ICommonProps {
-  tweakStyles?: TextWithTooltipStyles;
+export interface ITextWithTooltipProps extends ICommonProps<ITextWithTooltipStyles> {
   children: ReactNode;
   tooltipText: ITooltipProps['text'];
   tooltipView?: ITooltipProps['view'];
@@ -37,17 +37,24 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
   shouldRenderInBody = true,
   mouseEventType = 'hover',
   hoverDelay,
+  testId,
   data,
   tweakStyles,
 }) => {
-  const { classes, componentStyles } = useTheme('TextWithTooltip', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
-  const root = useRef<HTMLDivElement>(null);
-  const tooltip = useRef<HTMLDivElement>(null);
+  const tweakTooltipStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakTooltip',
+    currentComponentName: 'TextWithTooltip',
+  });
 
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   const [tooltipTimeout, setTooltipTimeout] = useState<ReturnType<typeof setTimeout>>();
 
+  const root = useRef<HTMLDivElement>(null);
+  const tooltip = useRef<HTMLDivElement>(null);
+
   const hasDelay = hoverDelay !== undefined;
 
   const handleMouseEnter = () => {
@@ -108,8 +115,6 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
 
   const shouldShowTooltip = tooltipText !== undefined && tooltipText !== null && !isDisabled;
 
-  const tweakTooltipStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakTooltip');
-
   return (
     <div
       className={clsx(
@@ -117,6 +122,7 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
         mouseEventType === 'click' && shouldShowTooltip && classes.clickable,
       )}
       {...(shouldShowTooltip ? props : undefined)}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
       ref={root}
     >

package/src/components/TextWithTooltip/index.ts

@@ -1,2 +1,2 @@
-export * from './TextWithTooltip';
-export type { TextWithTooltipStyles } from './TextWithTooltip.styles';
+export * from './TextWithTooltip';
+export type { ITextWithTooltipStyles } from './TextWithTooltip.styles';

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

@@ -1,21 +1,26 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-  },
-
-  dots: {},
-
-  default: {},
-
-  logo: {},
-
-  currentColor: {
-    color: 'currentColor',
-  },
-
-  tweakPreloaderComponent: {},
-};
-
-export type ThemedPreloaderStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IDotsPreloaderStyles, ISvgPreloaderStyles } from './components';
+
+export const useStyles = createThemedStyles('ThemedPreloader', {
+  root: {
+    display: 'flex',
+  },
+
+  dots: {},
+
+  default: {},
+
+  logo: {},
+
+  currentColor: {
+    color: 'currentColor',
+  },
+});
+
+export type IThemedPreloaderStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakDotsPreloader: IDotsPreloaderStyles;
+    tweakSvgPreloader: ISvgPreloaderStyles;
+  }
+>;

package/src/components/ThemedPreloader/ThemedPreloader.tsx

@@ -1,14 +1,14 @@
 import { FC } from 'react';
 import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { SvgPreloader, DotsPreloader } from './components';
 import { IPreloaderSvgType } from './types';
-import { ThemedPreloaderStyles, styles } from './ThemedPreloader.styles';
+import { useStyles, IThemedPreloaderStyles } from './ThemedPreloader.styles';
 
-export interface IThemedPreloaderProps extends ICommonProps {
-  tweakStyles?: ThemedPreloaderStyles;
+export interface IThemedPreloaderProps extends ICommonProps<IThemedPreloaderStyles> {
   /**
    * @default `default`
    */
@@ -20,27 +20,35 @@ export const ThemedPreloader: FC<IThemedPreloaderProps> = ({
   type = 'default',
   useCurrentColor = false,
   data,
+  testId,
   tweakStyles,
 }) => {
-  const { classes, componentStyles } = useTheme('ThemedPreloader', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
-  const preloaderComponentStyles = useTweakStyles(
-    componentStyles,
+  const tweakDotsPreloaderStyles = useTweakStyles({
     tweakStyles,
-    'tweakPreloaderComponent',
-  );
+    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={preloaderComponentStyles} />
+        <DotsPreloader tweakStyles={tweakDotsPreloaderStyles} />
       ) : (
-        <SvgPreloader type={type} tweakStyles={preloaderComponentStyles} />
+        <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/ThemedPreloader/components/DotsPreloader/DotsPreloader.styles.ts

@@ -1,54 +1,54 @@
-import { ComponentStyles } from '../../../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    gap: 4,
-
-    '&::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%',
-    height: 8,
-    width: 8,
-    backgroundColor: 'currentColor',
-  },
-
-  dot: {
-    extend: 'fadedDot',
-    animationDelay: '180ms',
-  },
-};
-
-export type DotsPreloaderStyles = ComponentStyles<typeof styles>;
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
+
+export const useStyles = createThemedStyles('DotsPreloader', {
+  root: {
+    display: 'flex',
+    gap: 4,
+
+    '&::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%',
+    height: 8,
+    width: 8,
+    backgroundColor: 'currentColor',
+  },
+
+  dot: {
+    extend: 'fadedDot',
+    animationDelay: '180ms',
+  },
+});
+
+export type IDotsPreloaderStyles = ITweakStyles<typeof useStyles>;

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

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

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

@@ -1,2 +1,2 @@
-export { DotsPreloader } from './DotsPreloader';
-export type { DotsPreloaderStyles } 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 { ComponentStyles } from '../../../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-  },
-};
-
-export type SvgPreloaderStyles = ComponentStyles<typeof styles>;
+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,20 +1,19 @@
 import { FC, useContext } from 'react';
-import { ThemeContext, useTheme } from '../../../../hooks';
+import { ThemeContext } from '../../../../theme';
 import { ICommonProps } from '../../../../types';
 import { IPreloaderSvgType } from '../../types';
 import { DefaultPreloader } from '../DefaultPreloader';
-import { SvgPreloaderStyles, styles } from './SvgPreloader.styles';
+import { useStyles, ISvgPreloaderStyles } from './SvgPreloader.styles';
 
-export interface ISvgPreloaderProps extends ICommonProps {
+export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyles>, 'tweakStyles'> {
   type: IPreloaderSvgType;
-  tweakStyles?: SvgPreloaderStyles;
 }
 
 export const SvgPreloader: FC<ISvgPreloaderProps> = ({ type = 'default', tweakStyles }) => {
-  const { classes } = useTheme('SvgPreloader', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
   const { theme } = useContext(ThemeContext);
   const PreloaderIcon = theme.preloaders?.[type] ?? DefaultPreloader;
-
   const isInlineSvg = typeof PreloaderIcon === 'string';
 
   return isInlineSvg ? (

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

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

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

package/src/components/Toaster/Toaster.styles.ts

@@ -1,59 +1,60 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  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,
-  },
-
-  tweakCloseButton: {},
-};
-
-export type ToasterStyles = ComponentStyles<typeof styles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { ICloseButtonStyles } from '../CloseButton';
+
+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: ICloseButtonStyles }
+>;

package/src/components/Toaster/Toaster.tsx

@@ -1,25 +1,25 @@
 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 { useTheme, useTweakStyles } from '../../hooks';
+import { 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';
+import { IToasterType } from './types';
+import { useStyles, IToasterStyles } from './Toaster.styles';
 
-export interface IToasterProps extends ICommonProps {
-  tweakStyles?: ToasterStyles;
+export interface IToasterProps extends ICommonProps<IToasterStyles> {
   /**
    * @default `error`
    */
-  type?: ToasterType;
+  type?: IToasterType;
   title?: string;
   text?: string;
   children?: ReactNode;
@@ -46,6 +46,7 @@ export const Toaster: FC<IToasterProps> = ({
   text,
   timeout = DEFAULT_TIMEOUT,
   data,
+  testId,
   tweakStyles,
   hasCloseButton = false,
   shouldCloseOnClick = false,
@@ -53,7 +54,13 @@ export const Toaster: FC<IToasterProps> = ({
   onClose,
   onTimeEnd,
 }) => {
-  const { classes, componentStyles } = useTheme('Toaster', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakCloseButtonStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakCloseButton',
+    currentComponentName: 'Toaster',
+  });
 
   let timeoutFunction: ReturnType<typeof setTimeout>;
 
@@ -78,12 +85,11 @@ export const Toaster: FC<IToasterProps> = ({
     return () => clearTimeout(timeoutFunction);
   }, []);
 
-  const tweakCloseButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakCloseButton');
-
   return (
     <div
       className={classes.root}
       onClick={shouldCloseOnClick ? onClose : undefined}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
     >
       <div className={clsx(classes.iconContainer, classes[type])}>

package/src/components/Toaster/index.ts

@@ -1,3 +1,3 @@
 export * from './Toaster';
 export * from './types';
-export type { ToasterStyles } from './Toaster.styles';
+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.styles.ts

@@ -1,13 +1,7 @@
 import { rgba } from '../../helpers';
-import { colors, dimensions } from '../../theme';
-import { ComponentStyles } from '../../types';
-import { ITooltipProps } from './Tooltip';
+import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
 
-interface IStyleProps {
-  type: NonNullable<ITooltipProps['type']>;
-}
-
-export const styles = {
+export const useStyles = createThemedStyles('Tooltip', {
   root: {
     display: 'inline-block',
     boxSizing: 'border-box',
@@ -17,10 +11,8 @@ export const styles = {
     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,
+    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,
@@ -35,11 +27,23 @@ export const styles = {
     fontSize: 12,
     padding: [8, 12],
     borderRadius: dimensions.BORDER_RADIUS_SMALL,
-    backgroundColor: ({ type }: { type: ITooltipProps['type'] }): string =>
-      type === 'error' ? colors.RED_WARNING : colors.FONT_MEDIUM,
+    backgroundColor: colors.FONT_MEDIUM,
     color: colors.CLASSIC_WHITE,
     letterSpacing: 0.2,
   },
-};
 
-export type TooltipStyles = ComponentStyles<typeof styles, IStyleProps>;
+  info: {},
+
+  error: {
+    '&$tooltip': {
+      backgroundColor: colors.RED_WARNING,
+      color: colors.CLASSIC_WHITE,
+    },
+
+    '&$hint': {
+      backgroundColor: colors.RED_WARNING,
+    },
+  },
+});
+
+export type ITooltipStyles = ITweakStyles<typeof useStyles>;