@true-engineering/true-react-common-ui-kit 1.0.1

package/src/components/TextWithTooltip/TextWithTooltip.tsx

@@ -0,0 +1,163 @@
+import React, { FC, useEffect, useRef, useState } from 'react';
+import { Styles } from 'react-jss';
+import { Portal } from 'react-overlays';
+import usePopper, { Modifier, Placement } from 'react-overlays/usePopper';
+import clsx from 'clsx';
+
+import { ITooltipProps, Tooltip } from '../Tooltip';
+import {
+  useOnClickOutsideWithRef,
+  useTheme,
+  useTweakStyles,
+} from '../../hooks';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+
+import { styles, TextWithTooltipStyles } from './TextWithTooltip.styles';
+
+export interface ITextWithTooltipProps extends ICommonProps {
+  tweakStyles?: TextWithTooltipStyles;
+  children: string | React.ReactNode;
+  tooltipText: ITooltipProps['text'];
+  tooltipView?: ITooltipProps['view'];
+  tooltipType?: ITooltipProps['type'];
+  tooltipPosition?: Placement;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  tooltipModifiers?: Array<Partial<Modifier<any, any>>>;
+  tooltipOffsetOptions?: Record<string, unknown>;
+  mouseEventType?: 'hover' | 'click';
+  hoverDelay?: number;
+  isDisabled?: boolean;
+  shouldRenderInBody?: boolean;
+}
+
+export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
+  children,
+  tooltipText,
+  tooltipPosition = 'top',
+  tooltipView = 'tooltip',
+  tooltipType,
+  tooltipModifiers = [],
+  tooltipOffsetOptions,
+  isDisabled = false,
+  shouldRenderInBody = true,
+  mouseEventType = 'hover',
+  hoverDelay,
+  data,
+  tweakStyles,
+}) => {
+  const { classes, componentStyles } = useTheme(
+    'TextWithTooltip',
+    styles,
+    tweakStyles,
+  );
+
+  const root = useRef<HTMLDivElement>(null);
+  const tooltip = useRef<HTMLDivElement>(null);
+
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const [tooltipTimeout, setTooltipTimeout] =
+    useState<ReturnType<typeof setTimeout>>();
+
+  const hasDelay = hoverDelay !== undefined;
+
+  const handleMouseEnter = () => {
+    if (hasDelay) {
+      const timeout = setTimeout(() => {
+        setIsTooltipVisible(true);
+      }, hoverDelay);
+
+      setTooltipTimeout(timeout);
+    } else {
+      setIsTooltipVisible(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (hasDelay) {
+      clearTimeout(tooltipTimeout);
+    }
+    setIsTooltipVisible(false);
+  };
+
+  useEffect(() => () => clearTimeout(tooltipTimeout), []);
+
+  const { styles: popperStyles, attributes } = usePopper(
+    root.current,
+    tooltip.current,
+    {
+      enabled: isTooltipVisible,
+      placement: tooltipPosition,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 6],
+            ...tooltipOffsetOptions,
+          },
+        },
+        ...tooltipModifiers,
+      ],
+    },
+  );
+
+  useOnClickOutsideWithRef(
+    tooltip,
+    () => {
+      if (mouseEventType === 'click') {
+        setIsTooltipVisible(false);
+      }
+    },
+    root,
+  );
+
+  const props =
+    mouseEventType === 'click'
+      ? {
+          onClick: () => setIsTooltipVisible(true),
+        }
+      : {
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+        };
+
+  const shouldShowTooltip =
+    tooltipText !== undefined && tooltipText !== null && !isDisabled;
+
+  const tweakTooltipStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakTooltip',
+  );
+
+  return (
+    <div
+      className={clsx(
+        classes.root,
+        mouseEventType === 'click' && shouldShowTooltip && classes.clickable,
+      )}
+      {...(shouldShowTooltip ? props : undefined)}
+      {...addDataAttributes(data)}
+      ref={root}
+    >
+      {shouldShowTooltip && (
+        <Portal container={shouldRenderInBody ? document.body : root.current}>
+          <div
+            className={classes.tooltip}
+            style={popperStyles.popper as Styles}
+            {...attributes.popper}
+            ref={tooltip}
+          >
+            <Tooltip
+              view={tooltipView}
+              type={tooltipType}
+              text={tooltipText}
+              tweakStyles={tweakTooltipStyles}
+            />
+          </div>
+        </Portal>
+      )}
+      {children}
+    </div>
+  );
+};

package/src/components/TextWithTooltip/index.ts

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

package/src/components/ThemedPreloader/ThemedPreloader.stories.tsx

@@ -0,0 +1,41 @@
+import { ComponentStory } from '@storybook/react';
+import { FC } from '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: '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.styles.ts

@@ -0,0 +1,21 @@
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  root: {
+    display: 'flex',
+  },
+
+  dots: {},
+
+  default: {},
+
+  logo: {},
+
+  currentColor: {
+    color: 'currentColor',
+  },
+
+  tweakPreloaderComponent: {},
+};
+
+export type ThemedPreloaderStyles = ComponentStyles<typeof styles>;

package/src/components/ThemedPreloader/ThemedPreloader.tsx

@@ -0,0 +1,56 @@
+import { FC } from 'react';
+import clsx from 'clsx';
+
+import { ICommonProps } from '../../types';
+import { SvgPreloader, DotsPreloader } from './components';
+import { addDataAttributes } from '../../helpers';
+import { useTheme, useTweakStyles } from '../../hooks';
+
+import { ThemedPreloaderStyles, styles } from './ThemedPreloader.styles';
+
+const svgTypes = ['default', 'logo'] as const;
+
+export type IPreloaderSvgType = (typeof svgTypes)[number];
+
+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

@@ -0,0 +1,34 @@
+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/DefaultPreloader/index.ts

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

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

@@ -0,0 +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>;

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

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { ICommonProps } from '../../../../types';
+import { useTheme } from '../../../../hooks';
+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/DotsPreloader/index.ts

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

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

@@ -0,0 +1,11 @@
+import { ComponentStyles } from '../../../../types';
+
+export const styles = {
+  root: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+  },
+};
+
+export type SvgPreloaderStyles = ComponentStyles<typeof styles>;

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

@@ -0,0 +1,32 @@
+import { FC, useContext } from 'react';
+import { ThemeContext, useTheme } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { IPreloaderSvgType } from '../../ThemedPreloader';
+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/SvgPreloader/index.ts

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

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

@@ -0,0 +1,2 @@
+export { DotsPreloader } from './DotsPreloader';
+export { SvgPreloader } from './SvgPreloader';

package/src/components/ThemedPreloader/index.ts

@@ -0,0 +1,2 @@
+export * from './ThemedPreloader';
+export type { ThemedPreloaderStyles } from './ThemedPreloader.styles';

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

@@ -0,0 +1,34 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Toaster } from './Toaster';
+import { Button } from '../Button';
+
+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.styles.ts

@@ -0,0 +1,59 @@
+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>;

package/src/components/Toaster/Toaster.tsx

@@ -0,0 +1,113 @@
+import { FC, ReactNode, useEffect } from 'react';
+import clsx from 'clsx';
+
+import { Icon } from '../Icon';
+import { CloseButton } from '../CloseButton';
+import { ICommonProps } from '../../types';
+import { useTheme, useTweakStyles } from '../../hooks';
+import { addDataAttributes, isNotEmpty } from '../../helpers';
+
+import { styles, ToasterStyles } from './Toaster.styles';
+
+const DEFAULT_TIMEOUT = 7 * 1000; // 7 seconds
+
+export type ToasterType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
+
+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>
+        {isNotEmpty(title) && <div className={classes.title}>{title}</div>}
+        {isNotEmpty(text) && <div className={classes.text}>{text}</div>}
+        {isNotEmpty(children) && (
+          <div className={classes.content}>{children}</div>
+        )}
+      </div>
+      {hasCloseButton && onClose !== undefined && (
+        <div className={classes.close}>
+          <CloseButton
+            onClose={onClose}
+            iconType="close-window"
+            tweakStyles={tweakCloseButtonStyles}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Toaster/index.ts

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

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

@@ -0,0 +1,21 @@
+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} />
+);