@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha40

package/src/theme/common.ts

@@ -1,178 +1,178 @@
-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,
-    PADDING: 16,
-    ICON_SIZE: 24,
-    ICON_INNER_SIZE: 24,
-    ICON_GAP: 8,
-  },
-
-  Z_INDEX: {
-    CONTROL_INVALID: 1,
-    CONTROL_FOCUS: 2,
-  },
-} as const;
-
-export const helpers = {
-  withAngle: (angleSize = 6, position: 'left' | 'right' = 'left', distance = 100): Styles =>
-    ({
-      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: {
-    boxSizing: 'border-box',
-    overflow: 'auto',
-
-    // Chromium
-    '@supports selector(::-webkit-scrollbar)': {
-      '--webkit-scrollbar-width': '10px',
-      '--webkit-scrollbar-height': '10px',
-
-      '&::-webkit-scrollbar': {
-        width: 'var(--webkit-scrollbar-width)',
-        height: 'var(--webkit-scrollbar-height)',
-
-        '&-thumb': {
-          width: 6,
-          minHeight: 30,
-          border: [2, 'solid', 'transparent'],
-          borderRadius: 5,
-          backgroundColor: colors.BORDER_MAIN,
-          backgroundClip: 'padding-box',
-
-          '&:hover': {
-            backgroundColor: colors.GREY_ACTIVE,
-          },
-        },
-
-        '&-track-piece': {
-          backgroundColor: 'transparent',
-        },
-
-        '&-corner': {
-          backgroundColor: 'transparent',
-        },
-      },
-    },
-
-    // Firefox
-    '@supports not selector(::-webkit-scrollbar)': {
-      scrollbarWidth: 'thin',
-      scrollbarColor: `${colors.BORDER_MAIN} transparent`,
-    },
-  },
-} satisfies IUiKitHelpers;
-
-export const SLIDE_UP_ANIMATION_DURATION = 150;
-const SLIDE_UP_POSITION_START = 15;
-const SLIDE_UP_POSITION_END = 0;
-
-export const animations = {
-  defaultTransition: '0.25s ease-in-out',
-  // Если понадобится, сюда можно пробросить параметры через 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: `${SLIDE_UP_ANIMATION_DURATION}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: `${SLIDE_UP_ANIMATION_DURATION}ms ease-in-out`,
-      transitionProperty: 'opacity, transform',
-    },
-  },
-};
-
-export interface ICommonUiKitTheme extends IUiKitTheme {
-  colors: typeof colors;
-  dimensions: typeof dimensions;
-  helpers: typeof helpers;
-  animations: typeof animations;
-}
-
-export const common: ICommonUiKitTheme = {
-  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,
+    PADDING: 16,
+    ICON_SIZE: 24,
+    ICON_INNER_SIZE: 24,
+    ICON_GAP: 8,
+  },
+
+  Z_INDEX: {
+    CONTROL_INVALID: 1,
+    CONTROL_FOCUS: 2,
+  },
+} as const;
+
+export const helpers = {
+  withAngle: (angleSize = 6, position: 'left' | 'right' = 'left', distance = 100): Styles =>
+    ({
+      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: {
+    boxSizing: 'border-box',
+    overflow: 'auto',
+
+    // Chromium
+    '@supports selector(::-webkit-scrollbar)': {
+      '--webkit-scrollbar-width': '10px',
+      '--webkit-scrollbar-height': '10px',
+
+      '&::-webkit-scrollbar': {
+        width: 'var(--webkit-scrollbar-width)',
+        height: 'var(--webkit-scrollbar-height)',
+
+        '&-thumb': {
+          width: 6,
+          minHeight: 30,
+          border: [2, 'solid', 'transparent'],
+          borderRadius: 5,
+          backgroundColor: colors.BORDER_MAIN,
+          backgroundClip: 'padding-box',
+
+          '&:hover': {
+            backgroundColor: colors.GREY_ACTIVE,
+          },
+        },
+
+        '&-track-piece': {
+          backgroundColor: 'transparent',
+        },
+
+        '&-corner': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+
+    // Firefox
+    '@supports not selector(::-webkit-scrollbar)': {
+      scrollbarWidth: 'thin',
+      scrollbarColor: `${colors.BORDER_MAIN} transparent`,
+    },
+  },
+} satisfies IUiKitHelpers;
+
+export const SLIDE_UP_ANIMATION_DURATION = 150;
+const SLIDE_UP_POSITION_START = 15;
+const SLIDE_UP_POSITION_END = 0;
+
+export const animations = {
+  defaultTransition: '0.25s ease-in-out',
+  // Если понадобится, сюда можно пробросить параметры через 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: `${SLIDE_UP_ANIMATION_DURATION}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: `${SLIDE_UP_ANIMATION_DURATION}ms ease-in-out`,
+      transitionProperty: 'opacity, transform',
+    },
+  },
+};
+
+export interface ICommonUiKitTheme extends IUiKitTheme {
+  colors: typeof colors;
+  dimensions: typeof dimensions;
+  helpers: typeof helpers;
+  animations: typeof animations;
+}
+
+export const common: ICommonUiKitTheme = {
+  animations,
+  colors,
+  dimensions,
+  helpers,
+};

package/src/theme/create-themed-styles.ts

@@ -0,0 +1,78 @@
+import { useContext, useInsertionEffect, useMemo } from 'react';
+import { createUseStyles, Styles } from 'react-jss';
+import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { mixStyles } from '../hooks/use-mixed-styles';
+import { getTheme, useTheme } from './Provider';
+import {
+  checkStyles,
+  cleanStyles,
+  getTweakStylesCache,
+  isStylesNotEmpty,
+  mergeTweakStyles,
+} from './helpers';
+import { ThemedStylesManager, JssContext } from './true-jss';
+import { IComponentName, IStyles, IUseStyles } from './types';
+
+const DEFAULT_NAME = 'LocalComponent';
+
+export function createThemedStyles<C extends string>(
+  ...args: [IStyles<C>] | [IComponentName, IStyles<C>]
+): IUseStyles<C> {
+  const [componentName, styles] = args.length === 2 ? args : [undefined, args[0]];
+  const name = componentName ?? DEFAULT_NAME;
+
+  if (process.env.NODE_ENV !== 'production') {
+    checkStyles(name, styles);
+  }
+
+  const tweakStylesManager = new ThemedStylesManager({ styles, name });
+  const tweakStylesCache = getTweakStylesCache();
+
+  const useStyles = createUseStyles<C>((tweakStyles) => {
+    const theme = getTheme();
+    return mergeStyles(
+      styles as Styles<C>,
+      isNotEmpty(componentName) ? (theme?.components?.[componentName] as Styles<C>) : undefined,
+      tweakStyles,
+    );
+  });
+
+  return (data) => {
+    const jssContext = useContext(JssContext);
+
+    const tweakStyles = useMemo(
+      () => mixStyles(data?.theme).filter(isStylesNotEmpty),
+      [data?.theme],
+    );
+
+    if (jssContext.tweakStylesArch !== 'true-jss') {
+      const tweakStylesStrategy =
+        jssContext.tweakStylesArch === 'react-jss' ? tweakStylesCache : mergeTweakStyles;
+
+      const theme = useMemo(
+        () => cleanStyles(tweakStylesStrategy(tweakStyles)),
+        [tweakStylesStrategy, tweakStyles],
+      );
+
+      return useStyles(isNotEmpty(data) ? { ...data, theme } : data);
+    }
+
+    const { components } = useTheme();
+
+    const themeStyles = isNotEmpty(componentName) ? components?.[componentName] : undefined;
+
+    const classes = tweakStylesManager.getClasses(themeStyles, tweakStyles, jssContext);
+
+    useInsertionEffect(() => {
+      const unmanage = tweakStylesManager.manage(themeStyles);
+      return unmanage;
+    }, [themeStyles]);
+
+    useInsertionEffect(() => {
+      const unmanage = tweakStylesManager.manageTweak(themeStyles, tweakStyles);
+      return unmanage;
+    }, [themeStyles, classes]);
+
+    return classes;
+  };
+}

package/src/theme/helpers.ts

@@ -1,76 +1,76 @@
-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 EMPTY_STYLES = {};
-
-const isTweakStyle = (key: string): boolean => key.startsWith('tweak');
-
-const cleanStyles = <T>(tweakStyles?: T): T =>
-  isNotEmpty(tweakStyles) && Object.keys(tweakStyles).some((key) => !isTweakStyle(key))
-    ? tweakStyles
-    : (EMPTY_STYLES as T);
-
-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);
-}
+import { merge } from 'lodash-es';
+import {
+  isArrayNotEmpty,
+  isNotEmpty,
+  mergeStyles,
+} from '@true-engineering/true-react-platform-helpers';
+import { IMaybeArray } from './types';
+
+const EMPTY_STYLES = {};
+
+export const isTweakStyle = (key: string): boolean => key.startsWith('tweak');
+
+export const isStylesNotEmpty = <T>(tweakStyles?: T): tweakStyles is NonNullable<T> =>
+  isNotEmpty(tweakStyles) && !Object.keys(tweakStyles).every(isTweakStyle);
+
+export const cleanStyles = <T>(tweakStyles?: T): T =>
+  isStylesNotEmpty(tweakStyles) ? tweakStyles : (EMPTY_STYLES as T);
+
+export const mergeTweakStyles = <T>(tweakStyles?: IMaybeArray<T>): T | undefined => {
+  if (!Array.isArray(tweakStyles)) {
+    return tweakStyles;
+  }
+  const [first, ...rest] = tweakStyles;
+  return isArrayNotEmpty(rest) ? mergeStyles(first, ...rest) : first;
+};
+
+export const checkStyles = (componentName: string, styles: Record<string, unknown>): void => {
+  const invalidClasses = Object.keys(styles).filter(isTweakStyle);
+
+  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;
+};
+
+type TweakStylesCache = (styles: object[], prev?: object[]) => object | undefined;
+export const getTweakStylesCache = (): TweakStylesCache => {
+  let mergedStyles: object | undefined;
+  const cache = new WeakMap<object, TweakStylesCache>();
+
+  const getNext = (next: object) => {
+    if (!cache.has(next)) {
+      cache.set(next, getTweakStylesCache());
+    }
+    return cache.get(next)!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+  };
+
+  return (styles, prev = []) => {
+    const [next, ...rest] = styles;
+    if (isNotEmpty(next)) {
+      return getNext(next)(rest, prev.concat(next));
+    }
+
+    if (isNotEmpty(mergedStyles)) {
+      return mergedStyles;
+    }
+
+    return (mergedStyles = mergeTweakStyles(prev));
+  };
+};

package/src/theme/index.ts

@@ -1,4 +1,6 @@
-export * from './Provider';
-export * from './common';
-export * from './types';
-export * from './helpers';
+export * from './Provider';
+export * from './true-jss';
+export * from './common';
+export * from './types';
+export * from './helpers';
+export * from './create-themed-styles';