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

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>;

package/src/components/Tooltip/Tooltip.tsx

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

package/src/helpers/index.ts

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

package/src/helpers/misc.ts

@@ -145,7 +145,7 @@ export const isSpaceChar = (char?: string): boolean =>
 export const getNumberLength = (n?: number): number =>
   n === undefined || isNaN(n) ? 0 : n.toString().length;
 
-export const trimStringToMaxLength = (val: string, maxLength: number) =>
+export const trimStringToMaxLength = (val: string, maxLength: number): string =>
   val.length > maxLength ? val.slice(0, maxLength) : val;
 
 export const addDataAttributes = (data: IDataAttributes = {}): IDataAttributes =>

package/src/helpers/phone.ts

@@ -17,7 +17,10 @@ export const findCountryIndexByCode = (countryCode?: string, countriesList = pho
 export const getCountryTextByLocale = (country: IPhoneInfo, locale: string): string =>
   locale.toLowerCase() === 'ru' ? country.countryRu : country.countryEn;
 
-export const sortCountriesByLocale = (countriesList: IPhoneInfo[], locale: string) =>
+/**
+ * Мутирует!
+ */
+export const sortCountriesByLocale = (countriesList: IPhoneInfo[], locale: string): IPhoneInfo[] =>
   countriesList.sort((countryA, countryB) =>
     getCountryTextByLocale(countryA, locale).localeCompare(
       getCountryTextByLocale(countryB, locale),

package/src/hooks/index.ts

@@ -1,6 +1,5 @@
 export * from './use-is-mounted';
 export * from './use-on-click-outside';
-export * from './use-theme';
 export * from './use-dropdown';
 export * from './use-tweak-styles';
 export * from './use-did-mount-effect';

package/src/hooks/use-tweak-styles.ts

@@ -1,13 +1,57 @@
 import { useMemo } from 'react';
-import { Styles } from 'react-jss';
-import merge from 'lodash-es/merge';
-
-export const useTweakStyles = <StyleSheet>(
-  componentStyles: StyleSheet = {} as StyleSheet,
-  tweakStyles: Partial<Record<keyof StyleSheet, any>> | undefined,
-  className: keyof StyleSheet,
-): Styles =>
-  useMemo(
-    () => merge({}, componentStyles[className], tweakStyles?.[className]) as Styles,
-    [tweakStyles?.[className]],
-  );
+import { isEmpty, isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { areStylesThemed, getTheme, IComponentName, themedStyles } from '../theme';
+
+// TODO: Можно усилить типы
+export const useTweakStyles = <StyleSheet, ClassName extends keyof StyleSheet>({
+  innerStyles,
+  tweakStyles: currentComponentTweakStyles,
+  className,
+  currentComponentName,
+}: {
+  /**
+   * Это tweakStyles, определенные в родительском компоненте
+   * (например, стили для Input, определенные в стилях компонента Select)
+   */
+  innerStyles?: StyleSheet[ClassName];
+  /**
+   * Пропса tweakStyles из родительского компонента
+   * (это уже непосредственно ISelectProps.tweakStyles)
+   */
+  tweakStyles?: StyleSheet;
+  /**
+   * Класс для переопределения tweakStyles из-вне. (Например, 'tweakInput')
+   */
+  className: ClassName;
+  /**
+   * Название компонента который вызывает useTweakStyles. (В данном примере 'Select')
+   */
+  currentComponentName?: IComponentName;
+}): StyleSheet[ClassName] =>
+  useMemo(() => {
+    const theme = getTheme();
+    // tweakStyles, переопределенные в теме родительского компонента
+    const themeStyles = isNotEmpty(currentComponentName)
+      ? (theme.components?.[currentComponentName]?.[className as never] as StyleSheet[ClassName])
+      : undefined;
+    const tweakStyles = currentComponentTweakStyles?.[className];
+
+    // Если нечего мержить
+    const styles = [innerStyles, tweakStyles, themeStyles].filter(isNotEmpty);
+    if (styles.length <= 1) {
+      return styles[0];
+    }
+
+    // Мы можем подмержить тему в innerStyles, чтобы сохранить кэширование
+    if (isNotEmpty(innerStyles) && isNotEmpty(themeStyles) && isEmpty(tweakStyles)) {
+      return areStylesThemed(innerStyles) ? innerStyles : themedStyles(innerStyles, themeStyles);
+    }
+
+    // Ну тут уже прощай кэш
+    return mergeStyles(innerStyles, themeStyles, tweakStyles);
+  }, [
+    innerStyles,
+    className,
+    currentComponentName,
+    currentComponentTweakStyles,
+  ]) as StyleSheet[ClassName];

package/src/index.ts

@@ -1,4 +1,4 @@
-export { commonTheme } from './theme';
+export * from './theme';
 export * from './components';
 export * from './hooks';
 export * from './types';

package/src/theme/Provider.tsx

@@ -0,0 +1,21 @@
+import { createContext, FC, ReactNode } from 'react';
+import { common } from './common';
+import { IUiKitTheme } from './types';
+
+export interface IThemedProviderProps {
+  theme: IUiKitTheme;
+  children: ReactNode;
+}
+
+let globalTheme: IUiKitTheme;
+
+export const getTheme = (): IUiKitTheme => globalTheme;
+
+export const ThemeContext = createContext<{
+  theme: IUiKitTheme;
+}>({ theme: common });
+
+export const ThemeProvider: FC<IThemedProviderProps> = ({ theme, children }) => {
+  globalTheme = theme;
+  return <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>;
+};

package/src/{theme.ts → theme/common.ts}

@@ -1,5 +1,5 @@
 import { Styles } from 'react-jss';
-import { UiKitHelpers, UiKitTheme } from './types';
+import { IUiKitHelpers, IUiKitTheme } from './types';
 
 export const colors = {
   FONT_MAIN: '#222a37',
@@ -36,7 +36,7 @@ export const dimensions = {
   CONTROL_HEIGHT: 48,
 } as const;
 
-export const helpers: UiKitHelpers = {
+export const helpers: IUiKitHelpers = {
   withAngle: (angleSize = 6, position: 'left' | 'right' = 'left', distance = 100) =>
     ({
       display: 'inline-block',
@@ -117,7 +117,7 @@ export const animations = {
     'slide-up-enter-active': {
       opacity: 1,
       transform: `translateY(${SLIDE_UP_POSITION_END}px)`,
-      transition: ({ timeout = 150 }: { timeout: number }): string => `${timeout}ms ease-in-out`,
+      transition: '150ms ease-in-out',
       transitionProperty: 'opacity, transform',
     },
 
@@ -129,18 +129,18 @@ export const animations = {
     'slide-up-exit': {
       opacity: 0,
       transform: `translateY(${SLIDE_UP_POSITION_START}px)`,
-      transition: ({ timeout = 150 }: { timeout: number }): string => `${timeout}ms ease-in-out`,
+      transition: '150ms ease-in-out',
       transitionProperty: 'opacity, transform',
     },
   },
 };
 
-export interface CommonUiKitTheme extends UiKitTheme {
+export interface ICommonUiKitTheme extends IUiKitTheme {
   colors: typeof colors;
   dimensions: typeof dimensions;
 }
 
-export const commonTheme: CommonUiKitTheme = {
+export const common: ICommonUiKitTheme = {
   name: 'common',
   animations,
   colors,

package/src/theme/helpers.ts

@@ -0,0 +1,74 @@
+import { createUseStyles, Styles } from 'react-jss';
+import merge from 'lodash-es/merge';
+import {
+  isArrayNotEmpty,
+  isNotEmpty,
+  mergeStyles,
+} from '@true-engineering/true-react-platform-helpers';
+import { getTheme } from './Provider';
+import { IComponentName, IStyles, IUseStyles } from './types';
+
+const isTweakStyle = (key: string): boolean => key.startsWith('tweak');
+
+const cleanStyles = <T>(tweakStyles?: T): T | undefined =>
+  isNotEmpty(tweakStyles) && Object.keys(tweakStyles).some((key) => !isTweakStyle(key))
+    ? tweakStyles
+    : undefined;
+
+const checkStyles = (componentName: string, styles: Record<string, unknown>): void => {
+  const invalidClasses = Object.keys(styles).reduce((acc, key) => {
+    if (isTweakStyle(key)) {
+      acc.push(key);
+    }
+    return acc;
+  }, [] as string[]);
+
+  if (isArrayNotEmpty(invalidClasses)) {
+    console.error(
+      `${componentName}: Названия классов не должны начинаться со слова "tweak": ${invalidClasses}`,
+    );
+  }
+};
+
+export const areStylesThemed = (styles: Record<string, unknown>): boolean =>
+  // eslint-disable-next-line no-underscore-dangle
+  styles.__themed === true;
+
+/**
+ * Подмешивает стили из темы. Мутирует, добавляя специально поле,
+ * по которому можно определить была ли уже произведена мутация ранее,
+ * тем самым сохраняя ссылку на объект и позволяя этим кэшировать JSS стили
+ */
+export const themedStyles = <T>(styles: T, themeComponentStyles: T): T => {
+  merge(styles, themeComponentStyles); // mutation !!!!
+  Object.defineProperty(styles, '__themed', { value: true });
+  return styles;
+};
+
+export function createThemedStyles<C extends string, P>(styles: IStyles<C, P>): IUseStyles<C, P>;
+
+export function createThemedStyles<C extends string, P>(
+  componentName: IComponentName,
+  styles: IStyles<C, P>,
+): IUseStyles<C, P>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createThemedStyles<C extends string, P>(...args: any[]): IUseStyles<C, P> {
+  const shouldUseTheme = args.length > 1;
+  const styles: IStyles<C, P> = shouldUseTheme ? args[1] : args[0];
+  const componentName: IComponentName | undefined = shouldUseTheme ? args[0] : undefined;
+
+  if (process.env.NODE_ENV !== 'production') {
+    checkStyles(componentName ?? 'LocalComponent', styles);
+  }
+  const useStyles = createUseStyles<C, P>((tweakStyles) => {
+    const theme = getTheme();
+    return mergeStyles(
+      styles as Styles<C, P>,
+      isNotEmpty(componentName) ? (theme?.components?.[componentName] as Styles<C, P>) : undefined,
+      tweakStyles,
+    );
+  });
+
+  return (data) => useStyles(isNotEmpty(data) ? { ...data, theme: cleanStyles(data.theme) } : data);
+}

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+export * from './Provider';
+export * from './common';
+export * from './types';
+export * from './helpers';

package/src/theme/types.ts

@@ -0,0 +1,137 @@
+import { Styles } from 'react-jss';
+import { Classes } from 'jss';
+import type {
+  IAccountInfoStyles,
+  IAddButtonStyles,
+  IButtonStyles,
+  ICheckboxStyles,
+  ICloseButtonStyles,
+  ICommonIcon,
+  IComplexIcon,
+  ICssBaselineStyles,
+  IDateInputStyles,
+  IDatePickerHeaderStyles,
+  IDatePickerStyles,
+  IDescriptionStyles,
+  IDotsPreloaderStyles,
+  IFilterIntervalStyles,
+  IFilterSelectStyles,
+  IFiltersPaneSearchStyles,
+  IFiltersPaneStyles,
+  IFilterWithDatesStyles,
+  IFilterWithPeriodStyles,
+  IFilterWrapperStyles,
+  IFlagStyles,
+  IFlexibleTableStyles,
+  IIconStyles,
+  IIncrementInputStyles,
+  IInputStyles,
+  IListStyles,
+  IModalStyles,
+  IMoreMenuStyles,
+  IMultiSelectInputStyles,
+  IMultiSelectListStyles,
+  IMultiSelectStyles,
+  INotificationStyles,
+  IPhoneInputCountryListStyles,
+  IPhoneInputStyles,
+  IPreloaderSvgType,
+  IRadioButtonStyles,
+  ISearchInputStyles,
+  ISelectListStyles,
+  ISelectStyles,
+  ISvgIcon,
+  ISvgPreloaderStyles,
+  ISwitchStyles,
+  ITextAreaStyles,
+  ITextWithInfoStyles,
+  ITextWithTooltipStyles,
+  IThemedPreloaderStyles,
+  IToasterStyles,
+  ITooltipStyles,
+  IFlexibleTableCellStyles,
+  IFlexibleTableRowStyles,
+  IFilterValueViewStyles,
+} from '../components';
+
+export type IStyles<C extends string, P> = Styles<C, P, Partial<Styles<C, P>>>;
+
+export type IUseStyles<C extends string, P = unknown> = (
+  data?: P & { theme?: Partial<Styles<C, P>> },
+) => Classes<C>;
+
+export type ITweakStyles<
+  StyleCreator,
+  ChildTweakStyles = unknown,
+> = StyleCreator extends IUseStyles<infer C, infer P>
+  ? Partial<Styles<C, P>> & Partial<ChildTweakStyles>
+  : never;
+
+export interface IComponentStyles {
+  AccountInfo: IAccountInfoStyles;
+  AddButton: IAddButtonStyles;
+  Button: IButtonStyles;
+  CloseButton: ICloseButtonStyles;
+  Checkbox: ICheckboxStyles;
+  CssBaseline: ICssBaselineStyles;
+  DateInput: IDateInputStyles;
+  DatePicker: IDatePickerStyles;
+  DatePickerHeader: IDatePickerHeaderStyles;
+  Description: IDescriptionStyles;
+  DotsPreloader: IDotsPreloaderStyles;
+  SvgPreloader: ISvgPreloaderStyles;
+  FilterValueView: IFilterValueViewStyles;
+  FiltersPane: IFiltersPaneStyles;
+  FilterInterval: IFilterIntervalStyles;
+  FilterSelect: IFilterSelectStyles;
+  FilterWithDates: IFilterWithDatesStyles;
+  FilterWithPeriod: IFilterWithPeriodStyles;
+  FilterWrapper: IFilterWrapperStyles;
+  FiltersPaneSearch: IFiltersPaneSearchStyles;
+  Flag: IFlagStyles;
+  FlexibleTable: IFlexibleTableStyles;
+  FlexibleTableRow: IFlexibleTableRowStyles;
+  FlexibleTableCell: IFlexibleTableCellStyles;
+  Icon: IIconStyles;
+  IncrementInput: IIncrementInputStyles;
+  Input: IInputStyles;
+  List: IListStyles;
+  Modal: IModalStyles;
+  MoreMenu: IMoreMenuStyles;
+  MultiSelect: IMultiSelectStyles;
+  MultiSelectInput: IMultiSelectInputStyles;
+  MultiSelectList: IMultiSelectListStyles;
+  Notification: INotificationStyles;
+  PhoneInput: IPhoneInputStyles;
+  PhoneInputCountryList: IPhoneInputCountryListStyles;
+  RadioButton: IRadioButtonStyles;
+  SearchInput: ISearchInputStyles;
+  Select: ISelectStyles;
+  SelectList: ISelectListStyles;
+  Switch: ISwitchStyles;
+  TextArea: ITextAreaStyles;
+  TextWithInfo: ITextWithInfoStyles;
+  TextWithTooltip: ITextWithTooltipStyles;
+  ThemedPreloader: IThemedPreloaderStyles;
+  Tooltip: ITooltipStyles;
+  Toaster: IToasterStyles;
+}
+
+export type IComponentName = keyof IComponentStyles;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type IUiKitAnimations = Record<string, any>;
+export type IUiKitHelpers = Record<string, Styles | (() => Styles)>;
+
+export interface IUiKitTheme {
+  name: string;
+  components?: Partial<IComponentStyles>;
+  icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
+  complexIcons?: Partial<Record<IComplexIcon, string>>;
+  preloaders?: Partial<Record<IPreloaderSvgType, string>>; // TODO: заменить string
+  animations?: IUiKitAnimations;
+  colors?: Record<string, string>;
+  dimensions?: Record<string, number>;
+  boxShadows?: Record<string, string>;
+  helpers?: IUiKitHelpers;
+}

package/src/types.ts

@@ -1,20 +1,15 @@
 import { ReactElement } from 'react';
-import { Styles } from 'react-jss';
 import { Modifier, Placement } from 'react-overlays/usePopper';
-import type {
-  ICommonIcon,
-  IComplexIcon,
-  IIconType,
-  IPreloaderSvgType,
-  ISvgIcon,
-} from './components';
+import type { IIconType } from './components';
 
 export interface IDataAttributes {
   [key: string]: unknown;
 }
 
-export interface ICommonProps {
+export interface ICommonProps<TweakStyles> {
   data?: IDataAttributes;
+  testId?: string;
+  tweakStyles?: TweakStyles;
 }
 
 export interface IDropdownWithPopperOptions {
@@ -33,76 +28,3 @@ export interface IDropdownWithPopperOptions {
 }
 
 export type IIcon = IIconType | ReactElement;
-
-export type ComponentStyles<StyleSheet, Props = unknown> = Partial<Styles<keyof StyleSheet, Props>>;
-
-// TODO: Скрипт
-export type ComponentName =
-  | 'AccountInfo'
-  | 'AddButton'
-  | 'Button'
-  | 'CloseButton'
-  | 'Checkbox'
-  | 'CssBaseline'
-  | 'Colors'
-  | 'DateInput'
-  | 'DatePicker'
-  | 'DatePickerHeader'
-  | 'Description'
-  | 'DotsPreloader'
-  | 'SvgPreloader'
-  | 'FiltersPane'
-  | 'FilterInterval'
-  | 'FilterSelect'
-  | 'FilterWithDates'
-  | 'FilterWithPeriod'
-  | 'FilterWrapper'
-  | 'FilterValueView'
-  | 'FiltersPaneSearch'
-  | 'Flag'
-  | 'FlexibleTable'
-  | 'Icon'
-  | 'IncrementInput'
-  | 'Input'
-  | 'List'
-  | 'Modal'
-  | 'MoreMenu'
-  | 'MultiSelect'
-  | 'MultiSelectInput'
-  | 'MultiSelectList'
-  | 'Notification'
-  | 'PhoneInput'
-  | 'PhoneInputCountryList'
-  | 'RadioButton'
-  | 'SearchInput'
-  | 'Select'
-  | 'SelectList'
-  | 'ScrollIntoViewIfNeeded'
-  | 'Switch'
-  | 'TextArea'
-  | 'TextWithInfo'
-  | 'TextWithTooltip'
-  | 'ThemedPreloader'
-  | 'Tooltip'
-  | 'Toaster';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type UiKitAnimations = Record<string, any>;
-export type UiKitHelpers = Record<string, Styles | (() => Styles)>;
-
-export interface UiKitTheme {
-  name: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
-  /**
-   * Для переопределения иконок, которые есть в UiKit
-   */
-  icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
-  complexIcons?: Partial<Record<IComplexIcon, string>>;
-  preloaders?: Partial<Record<IPreloaderSvgType, string>>; // TODO: заменить string
-  animations?: UiKitAnimations;
-  colors?: Record<string, string>;
-  dimensions?: Record<string, number>;
-  boxShadows?: Record<string, string>;
-  helpers?: UiKitHelpers;
-}