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

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

@@ -1,149 +1,149 @@
-import { Styles } from 'react-jss';
-import { UiKitHelpers, UiKitTheme } from './types';
-
-export const colors = {
-  FONT_MAIN: '#222a37',
-  FONT_MEDIUM: '#505f79',
-  FONT_LABEL: '#7a869a',
-  FONT_DISABLED: '#95a0b3',
-  GREY_ACTIVE: '#95a0b3',
-  BORDER_MAIN: '#d0d6e1',
-  BORDER_LIGHT: '#dde3ed',
-  GREY_HOVER: '#dde3ed',
-  GREY_FOCUS: '#eceff5',
-  GREY_DISABLED: '#eceff5',
-  GREY_BACKGROUND: '#f6f8fc',
-  CLASSIC_WHITE: '#ffffff',
-  RED_ACTIVE: '#912e34',
-  RED_HOVER: '#c13e45',
-  RED_WARNING: '#f14d56',
-  RED_WARNING_LIGHT: '#ff6261',
-  RED_BACKGROUND: '#feedee',
-  ORANGE_BACKGROUND: '#fff4e9',
-  GREEN_BACKGROUND: '#f4f9e6',
-  BLUE_BACKGROUND: '#ebf1ff',
-  // временные константы пока не будет полной темизации
-  GREEN_FOCUS: '#97ba1e',
-  ORANGE_FOCUS: '#ff991f',
-} as const;
-
-export const dimensions = {
-  BORDER_RADIUS_LARGE: 16,
-  BORDER_RADIUS_MEDIUM: 12,
-  BORDER_RADIUS_STD: 8,
-  BORDER_RADIUS_SMALL: 6,
-  BORDER_RADIUS_EXTRA_SMALL: 4,
-  CONTROL_HEIGHT: 48,
-} as const;
-
-export const helpers: UiKitHelpers = {
-  withAngle: (angleSize = 6, position: 'left' | 'right' = 'left', distance = 100) =>
-    ({
-      display: 'inline-block',
-      position: 'relative',
-      marginTop: angleSize * 2 - 1,
-      boxShadow: '0 8px 20px 0 rgba(0, 0, 0, 0.04)',
-      border: ['solid', 1, colors.BORDER_MAIN],
-      borderRadius: dimensions.BORDER_RADIUS_EXTRA_SMALL,
-
-      '&:before': {
-        content: '""',
-        position: 'absolute',
-        top: -angleSize,
-        left: position === 'left' && distance,
-        right: position === 'right' && distance,
-        width: 0,
-        height: 0,
-        borderLeft: [angleSize, 'solid', 'transparent'],
-        borderRight: [angleSize, 'solid', 'transparent'],
-        borderBottom: [angleSize, 'solid', colors.BORDER_MAIN],
-      },
-
-      '&:after': {
-        content: '""',
-        position: 'absolute',
-        top: -angleSize + 1,
-        left: position === 'left' && distance + 1,
-        right: position === 'right' && distance + 1,
-        width: 0,
-        height: 0,
-        borderLeft: [angleSize - 1, 'solid', 'transparent'],
-        borderRight: [angleSize - 1, 'solid', 'transparent'],
-        borderBottom: [angleSize - 1, 'solid', colors.CLASSIC_WHITE],
-      },
-    } as unknown as Styles),
-
-  withScrollBar: {
-    overflow: 'auto',
-    boxSizing: 'border-box',
-    scrollbarWidth: 'thin' /* Firefox */,
-    scrollbarColor: '#d0d6e1 transparent',
-
-    '&::-webkit-scrollbar': {
-      height: 10,
-      width: 10,
-    },
-
-    '&::-webkit-scrollbar-thumb': {
-      backgroundClip: 'padding-box',
-      backgroundColor: colors.BORDER_MAIN,
-      border: [2, 'solid', 'transparent'],
-      borderRadius: 5,
-      minHeight: 30,
-      width: 6,
-
-      '&:hover': {
-        backgroundColor: colors.GREY_ACTIVE,
-      },
-    },
-
-    '&::-webkit-scrollbar-track-piece': {
-      backgroundColor: 'transparent',
-    },
-  },
-};
-
-const SLIDE_UP_POSITION_START = 15;
-const SLIDE_UP_POSITION_END = 0;
-
-export const animations = {
-  // Если понадобится, сюда можно пробросить параметры через useTheme props
-  slideUp: {
-    'slide-up-enter': {
-      opacity: 0,
-      transform: `translateY(${SLIDE_UP_POSITION_START}px)`,
-    },
-
-    'slide-up-enter-active': {
-      opacity: 1,
-      transform: `translateY(${SLIDE_UP_POSITION_END}px)`,
-      transition: ({ timeout = 150 }: { timeout: number }): string => `${timeout}ms ease-in-out`,
-      transitionProperty: 'opacity, transform',
-    },
-
-    'slide-up-exit-active': {
-      opacity: 1,
-      transform: `translateY(${SLIDE_UP_POSITION_END}px)`,
-    },
-
-    'slide-up-exit': {
-      opacity: 0,
-      transform: `translateY(${SLIDE_UP_POSITION_START}px)`,
-      transition: ({ timeout = 150 }: { timeout: number }): string => `${timeout}ms ease-in-out`,
-      transitionProperty: 'opacity, transform',
-    },
-  },
-};
-
-export interface CommonUiKitTheme extends UiKitTheme {
-  colors: typeof colors;
-  dimensions: typeof dimensions;
-}
-
-export const commonTheme: CommonUiKitTheme = {
-  name: 'common',
-  animations,
-  colors,
-  dimensions,
-  helpers,
-};
+import { Styles } from 'react-jss';
+import { IUiKitHelpers, IUiKitTheme } from './types';
+
+export const colors = {
+  FONT_MAIN: '#222a37',
+  FONT_MEDIUM: '#505f79',
+  FONT_LABEL: '#7a869a',
+  FONT_DISABLED: '#95a0b3',
+  GREY_ACTIVE: '#95a0b3',
+  BORDER_MAIN: '#d0d6e1',
+  BORDER_LIGHT: '#dde3ed',
+  GREY_HOVER: '#dde3ed',
+  GREY_FOCUS: '#eceff5',
+  GREY_DISABLED: '#eceff5',
+  GREY_BACKGROUND: '#f6f8fc',
+  CLASSIC_WHITE: '#ffffff',
+  RED_ACTIVE: '#912e34',
+  RED_HOVER: '#c13e45',
+  RED_WARNING: '#f14d56',
+  RED_WARNING_LIGHT: '#ff6261',
+  RED_BACKGROUND: '#feedee',
+  ORANGE_BACKGROUND: '#fff4e9',
+  GREEN_BACKGROUND: '#f4f9e6',
+  BLUE_BACKGROUND: '#ebf1ff',
+  // временные константы пока не будет полной темизации
+  GREEN_FOCUS: '#97ba1e',
+  ORANGE_FOCUS: '#ff991f',
+} as const;
+
+export const dimensions = {
+  BORDER_RADIUS_LARGE: 16,
+  BORDER_RADIUS_MEDIUM: 12,
+  BORDER_RADIUS_STD: 8,
+  BORDER_RADIUS_SMALL: 6,
+  BORDER_RADIUS_EXTRA_SMALL: 4,
+  CONTROL_HEIGHT: 48,
+} as const;
+
+export const helpers: IUiKitHelpers = {
+  withAngle: (angleSize = 6, position: 'left' | 'right' = 'left', distance = 100) =>
+    ({
+      display: 'inline-block',
+      position: 'relative',
+      marginTop: angleSize * 2 - 1,
+      boxShadow: '0 8px 20px 0 rgba(0, 0, 0, 0.04)',
+      border: ['solid', 1, colors.BORDER_MAIN],
+      borderRadius: dimensions.BORDER_RADIUS_EXTRA_SMALL,
+
+      '&:before': {
+        content: '""',
+        position: 'absolute',
+        top: -angleSize,
+        left: position === 'left' && distance,
+        right: position === 'right' && distance,
+        width: 0,
+        height: 0,
+        borderLeft: [angleSize, 'solid', 'transparent'],
+        borderRight: [angleSize, 'solid', 'transparent'],
+        borderBottom: [angleSize, 'solid', colors.BORDER_MAIN],
+      },
+
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        top: -angleSize + 1,
+        left: position === 'left' && distance + 1,
+        right: position === 'right' && distance + 1,
+        width: 0,
+        height: 0,
+        borderLeft: [angleSize - 1, 'solid', 'transparent'],
+        borderRight: [angleSize - 1, 'solid', 'transparent'],
+        borderBottom: [angleSize - 1, 'solid', colors.CLASSIC_WHITE],
+      },
+    } as unknown as Styles),
+
+  withScrollBar: {
+    overflow: 'auto',
+    boxSizing: 'border-box',
+    scrollbarWidth: 'thin' /* Firefox */,
+    scrollbarColor: '#d0d6e1 transparent',
+
+    '&::-webkit-scrollbar': {
+      height: 10,
+      width: 10,
+    },
+
+    '&::-webkit-scrollbar-thumb': {
+      backgroundClip: 'padding-box',
+      backgroundColor: colors.BORDER_MAIN,
+      border: [2, 'solid', 'transparent'],
+      borderRadius: 5,
+      minHeight: 30,
+      width: 6,
+
+      '&:hover': {
+        backgroundColor: colors.GREY_ACTIVE,
+      },
+    },
+
+    '&::-webkit-scrollbar-track-piece': {
+      backgroundColor: 'transparent',
+    },
+  },
+};
+
+const SLIDE_UP_POSITION_START = 15;
+const SLIDE_UP_POSITION_END = 0;
+
+export const animations = {
+  // Если понадобится, сюда можно пробросить параметры через useTheme props
+  slideUp: {
+    'slide-up-enter': {
+      opacity: 0,
+      transform: `translateY(${SLIDE_UP_POSITION_START}px)`,
+    },
+
+    'slide-up-enter-active': {
+      opacity: 1,
+      transform: `translateY(${SLIDE_UP_POSITION_END}px)`,
+      transition: '150ms ease-in-out',
+      transitionProperty: 'opacity, transform',
+    },
+
+    'slide-up-exit-active': {
+      opacity: 1,
+      transform: `translateY(${SLIDE_UP_POSITION_END}px)`,
+    },
+
+    'slide-up-exit': {
+      opacity: 0,
+      transform: `translateY(${SLIDE_UP_POSITION_START}px)`,
+      transition: '150ms ease-in-out',
+      transitionProperty: 'opacity, transform',
+    },
+  },
+};
+
+export interface ICommonUiKitTheme extends IUiKitTheme {
+  colors: typeof colors;
+  dimensions: typeof dimensions;
+}
+
+export const common: ICommonUiKitTheme = {
+  name: 'common',
+  animations,
+  colors,
+  dimensions,
+  helpers,
+};

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,109 +1,30 @@
-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';
-
-export interface IDataAttributes {
-  [key: string]: unknown;
-}
-
-export interface ICommonProps {
-  data?: IDataAttributes;
-}
-
-export interface IDropdownWithPopperOptions {
-  shouldUsePopper?: boolean;
-  shouldRenderInBody?: boolean;
-  scrollParent?: 'auto' | 'document' | Element;
-
-  shouldHideOnScroll?: boolean; // работает весьма условно без shouldUsePopper
-  canBeFlipped?: boolean; // только с shouldUsePopper
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  modifiers?: Array<Partial<Modifier<any, any>>>; // только с shouldUsePopper
-  placement?: Placement; // only with shouldUsePopper
-  // https://popper.js.org/docs/v2/modifiers/flip/
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  flipOptions?: Record<string, any>; // только с shouldUsePopper
-}
-
-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'
-  | 'ListItem'
-  | '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;
-}
+import { ReactElement } from 'react';
+import { Modifier, Placement } from 'react-overlays/usePopper';
+import type { IIconType } from './components';
+
+export interface IDataAttributes {
+  [key: string]: unknown;
+}
+
+export interface ICommonProps<TweakStyles> {
+  data?: IDataAttributes;
+  testId?: string;
+  tweakStyles?: TweakStyles;
+}
+
+export interface IDropdownWithPopperOptions {
+  shouldUsePopper?: boolean;
+  shouldRenderInBody?: boolean;
+  scrollParent?: 'auto' | 'document' | Element;
+
+  shouldHideOnScroll?: boolean; // работает весьма условно без shouldUsePopper
+  canBeFlipped?: boolean; // только с shouldUsePopper
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  modifiers?: Array<Partial<Modifier<any, any>>>; // только с shouldUsePopper
+  placement?: Placement; // only with shouldUsePopper
+  // https://popper.js.org/docs/v2/modifiers/flip/
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  flipOptions?: Record<string, any>; // только с shouldUsePopper
+}
+
+export type IIcon = IIconType | ReactElement;

package/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />