@true-engineering/true-react-common-ui-kit 2.3.1 → 2.3.2

package/src/hooks/use-theme.ts

@@ -1,32 +1,32 @@
-import { createContext, useContext, useMemo } from 'react';
-import { createUseStyles, Styles } from 'react-jss';
-import merge from 'lodash-es/merge';
-import { commonTheme } from '../theme';
-import { ComponentName, UiKitTheme } from '../types';
-
-export const ThemeContext = createContext<{
-  theme: UiKitTheme;
-}>({ theme: commonTheme });
-
-export const useTheme = <StyleSheet>(
-  componentName: ComponentName,
-  styles: StyleSheet,
-  tweakStyles?: Partial<Record<keyof StyleSheet, any>>,
-  options?: Record<string, unknown>,
-): {
-  classes: Record<keyof StyleSheet, string>;
-  componentStyles: StyleSheet;
-} => {
-  const { theme } = useContext(ThemeContext);
-  const { components } = theme;
-
-  const newStyles = useMemo(
-    () => merge({}, styles, components?.[componentName] ?? {}, tweakStyles),
-    [styles, components?.[componentName], tweakStyles],
-  );
-
-  return {
-    classes: createUseStyles(newStyles as Styles)(options) as Record<keyof StyleSheet, string>,
-    componentStyles: newStyles,
-  };
-};
+import { createContext, useContext, useMemo } from 'react';
+import { createUseStyles, Styles } from 'react-jss';
+import merge from 'lodash-es/merge';
+import { commonTheme } from '../theme';
+import { ComponentName, UiKitTheme } from '../types';
+
+export const ThemeContext = createContext<{
+  theme: UiKitTheme;
+}>({ theme: commonTheme });
+
+export const useTheme = <StyleSheet>(
+  componentName: ComponentName,
+  styles: StyleSheet,
+  tweakStyles?: Partial<Record<keyof StyleSheet, any>>,
+  options?: Record<string, unknown>,
+): {
+  classes: Record<keyof StyleSheet, string>;
+  componentStyles: StyleSheet;
+} => {
+  const { theme } = useContext(ThemeContext);
+  const { components } = theme;
+
+  const newStyles = useMemo(
+    () => merge({}, styles, components?.[componentName] ?? {}, tweakStyles),
+    [styles, components?.[componentName], tweakStyles],
+  );
+
+  return {
+    classes: createUseStyles(newStyles as Styles)(options) as Record<keyof StyleSheet, string>,
+    componentStyles: newStyles,
+  };
+};

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

@@ -1,13 +1,13 @@
-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 { 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]],
+  );

package/src/index.ts

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

package/src/theme.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 { 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,
+};

package/src/types.ts

@@ -1,107 +1,107 @@
-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'
-  | '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;
-}
+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'
+  | '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;
+}

package/src/vite-env.d.ts

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