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

package/src/theme/true-jss/ThemedStylesManager.ts

@@ -0,0 +1,92 @@
+import { jss } from 'react-jss';
+import type { Classes, StyleSheet } from 'jss';
+import { isNotEmpty, mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { IStyles } from '../types';
+import { IPartialStyle, TweakStylesManager } from './TweakStylesManager';
+import { IJssContext } from './jss-context';
+
+interface IStyleSheet<C extends string> {
+  manager: TweakStylesManager<C>;
+  refs: number;
+  sheet: StyleSheet<C>;
+  detachTimeout?: number;
+}
+
+const NO_THEME_STYLES: IPartialStyle = {};
+
+interface IThemedStylesManagerOptions<C extends string> {
+  styles: IStyles<C>;
+  name: string;
+}
+
+export class ThemedStylesManager<C extends string> {
+  #styleSheetMap = new Map<IPartialStyle, IStyleSheet<C>>();
+  #styles: IStyles<C>;
+  #name: string;
+
+  constructor({ styles, name }: IThemedStylesManagerOptions<C>) {
+    this.#styles = styles;
+    this.#name = name;
+  }
+
+  public getClasses(
+    theme = NO_THEME_STYLES,
+    tweak: IPartialStyle[],
+    jssContext: IJssContext,
+  ): Classes<C> {
+    return this.getOrCreate(theme, jssContext).manager.getClasses(tweak);
+  }
+
+  public manageTweak(theme = NO_THEME_STYLES, tweak: IPartialStyle[]): VoidFunction | undefined {
+    this.#styleSheetMap.get(theme)?.manager.manage(tweak);
+
+    return () => this.#styleSheetMap.get(theme)?.manager.unmanage(tweak);
+  }
+
+  public manage(theme = NO_THEME_STYLES): VoidFunction | undefined {
+    const value = this.#styleSheetMap.get(theme);
+    if (!isNotEmpty(value)) {
+      return;
+    }
+    if (isNotEmpty(value.detachTimeout)) {
+      clearTimeout(value.detachTimeout);
+      value.detachTimeout = undefined;
+    }
+    value.refs += 1;
+    if (value.refs > 0) {
+      value.sheet.attach();
+    }
+
+    return () => this.unmanage(theme);
+  }
+
+  private unmanage(theme = NO_THEME_STYLES): void {
+    const value = this.#styleSheetMap.get(theme);
+    if (!isNotEmpty(value) || value.refs === 0) {
+      return;
+    }
+    value.refs -= 1;
+    if (value.refs === 0 && !isNotEmpty(value.detachTimeout)) {
+      value.detachTimeout = window.setTimeout(() => {
+        if (value.refs === 0) {
+          value.sheet.detach();
+        }
+      }, 100);
+    }
+  }
+
+  private getOrCreate(theme: IPartialStyle, jssContext: IJssContext): IStyleSheet<C> {
+    if (!this.#styleSheetMap.has(theme)) {
+      const sheet = jss.createStyleSheet(mergeStyles(this.#styles, theme), {
+        link: true,
+        meta: this.#name,
+        generateId: jssContext.generateId,
+      });
+      const classes = { ...sheet.classes };
+      const manager = new TweakStylesManager({ sheet, classes });
+      this.#styleSheetMap.set(theme, { sheet, manager, refs: 0 });
+    }
+
+    return this.#styleSheetMap.get(theme)!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+  }
+}

package/src/theme/true-jss/TweakStylesManager.ts

@@ -0,0 +1,157 @@
+import type { StyleSheet, Classes, Rule } from 'jss';
+import {
+  isArrayNotEmpty,
+  isNotEmpty,
+  joinStrings,
+  mergeStyles,
+} from '@true-engineering/true-react-platform-helpers';
+import { isTweakStyle } from '../helpers';
+
+export type IPartialStyle = object;
+
+interface TweakRules<C extends string> {
+  classes: Classes<C>;
+  refs?: number;
+  rules: Map<C, Rule>;
+}
+
+interface TweakStylesManagerOptions<C extends string> {
+  sheet: StyleSheet<C>;
+  classes: Classes<C>;
+  tweak?: IPartialStyle[];
+}
+
+export class TweakStylesManager<C extends string> {
+  #map = new WeakMap<IPartialStyle, TweakStylesManager<C>>();
+  #sheet: StyleSheet<C>;
+  #classes: Classes<C>;
+  #tweak: IPartialStyle[];
+
+  #tweakRules: TweakRules<C> | undefined;
+  constructor({ sheet, classes, tweak = [] }: TweakStylesManagerOptions<C>) {
+    this.#sheet = sheet;
+    this.#classes = classes;
+    this.#tweak = tweak;
+  }
+
+  public getClasses([next, ...rest]: IPartialStyle[]): Classes<C> {
+    const nextManager = this.getNextManager(next);
+    if (isNotEmpty(nextManager)) {
+      return nextManager.getClasses(rest);
+    }
+    return this.getOrCreate()?.classes ?? this.#classes;
+  }
+
+  public manage([next, ...rest]: IPartialStyle[]): void {
+    const nextManager = this.getNextManager(next);
+    if (isNotEmpty(nextManager)) {
+      return nextManager.manage(rest);
+    }
+    if (!isNotEmpty(this.#tweakRules)) {
+      return;
+    }
+    if (this.#tweakRules.refs === 0) {
+      this.insertRules();
+    }
+    this.#tweakRules.refs = (this.#tweakRules.refs ?? 0) + 1;
+  }
+
+  public unmanage([next, ...rest]: IPartialStyle[]): void {
+    const nextManager = this.getNextManager(next);
+    if (isNotEmpty(nextManager)) {
+      return nextManager.unmanage(rest);
+    }
+    if (!isNotEmpty(this.#tweakRules) || this.#tweakRules.refs === 0) {
+      return;
+    }
+    this.#tweakRules.refs = (this.#tweakRules.refs ?? 1) - 1;
+    if (this.#tweakRules.refs === 0) {
+      this.deleteRules();
+    }
+  }
+
+  private getNextManager(next?: IPartialStyle) {
+    if (!isNotEmpty(next)) {
+      return;
+    }
+    if (!this.#map.has(next)) {
+      const manager = new TweakStylesManager({
+        sheet: this.#sheet,
+        classes: this.#classes,
+        tweak: this.#tweak.concat(next),
+      });
+      this.#map.set(next, manager);
+    }
+    return this.#map.get(next);
+  }
+
+  private getOrCreate() {
+    if (!isNotEmpty(this.#tweakRules) && isArrayNotEmpty(this.#tweak)) {
+      const [first, ...rest] = this.#tweak;
+      const styles = isArrayNotEmpty(rest) ? mergeStyles(first, ...rest) : first;
+
+      const rules = this.addRules(styles);
+
+      const classes = { ...this.#classes };
+      rules.forEach((rule, key) => {
+        classes[key] = joinStrings([classes[key], rule.id], ' ');
+      });
+
+      this.#tweakRules = { classes, rules };
+    }
+    return this.#tweakRules;
+  }
+
+  private addRules(styles: IPartialStyle) {
+    return new Map(
+      Object.entries(styles)
+        .map(([key, style]) => this.addRule(key as C, style))
+        .filter(isNotEmpty),
+    );
+  }
+
+  private addRule(key: C, style: object) {
+    if (isTweakStyle(key)) {
+      return;
+    }
+    const rule = this.#sheet.addRule(key, style, { index: this.getInsertIndex(key) });
+    return isNotEmpty(rule) ? ([key, rule] as const) : undefined;
+  }
+
+  private insertRules() {
+    this.#tweakRules?.rules.forEach((rule, key) => {
+      this.#sheet.rules.register(rule);
+      this.#sheet.rules.index.splice(this.getInsertIndex(key), 0, rule);
+      this.#sheet.insertRule(rule);
+    });
+  }
+
+  private deleteRules() {
+    this.#tweakRules?.rules.forEach((rule) => this.#sheet.deleteRule(rule));
+  }
+
+  private getInsertIndex(key: C) {
+    return (
+      this.#sheet.rules.index.findIndex((rule) => rule.key === key) + 1 ||
+      this.#sheet.rules.index.length
+    );
+  }
+}
+
+declare module 'jss' {
+  export interface RuleList {
+    index: Rule[];
+  }
+  // eslint-disable-next-line no-shadow
+  export interface StyleSheet<RuleName> {
+    rules: RuleList;
+    // eslint-disable-next-line @typescript-eslint/method-signature-style
+    deleteRule(rule: Rule): boolean;
+    // eslint-disable-next-line @typescript-eslint/method-signature-style
+    addRule(
+      name: RuleName,
+      style: JssStyle,
+      options?: Partial<Rule['options']>,
+    ): (Rule & { id: string }) | null;
+  }
+}

package/src/theme/true-jss/index.ts

@@ -0,0 +1,2 @@
+export * from './ThemedStylesManager';
+export * from './jss-context';

package/src/theme/true-jss/jss-context.tsx

@@ -0,0 +1,34 @@
+import { Context, FC, PropsWithChildren, useContext, useMemo } from 'react';
+import { JssContext as JssContextLib } from 'react-jss';
+import { GenerateId } from 'jss';
+
+export interface IJssContext {
+  generateId?: GenerateId;
+  tweakStylesArch?: 'react-jss' | 'true-jss';
+}
+
+/** Типизация JssContext оказалась некорректна */
+export const JssContext = JssContextLib as unknown as Context<IJssContext>;
+
+export const JssProvider: FC<PropsWithChildren<IJssContext>> = ({
+  children,
+  tweakStylesArch,
+  generateId,
+}) => {
+  const context = useContext(JssContext);
+
+  const value: IJssContext = useMemo(
+    () => ({
+      ...context,
+      tweakStylesArch: tweakStylesArch ?? context.tweakStylesArch,
+      generateId: generateId ?? context.generateId,
+    }),
+    [context, tweakStylesArch, generateId],
+  );
+
+  return (
+    <JssContext.Provider key={tweakStylesArch} value={value}>
+      {children}
+    </JssContext.Provider>
+  );
+};

package/src/theme/types.ts

@@ -1,162 +1,164 @@
-import { Styles } from 'react-jss';
-import { Classes, JssValue } from 'jss';
-import type {
-  IAccountInfoStyles,
-  IAddButtonStyles,
-  IButtonStyles,
-  ICheckboxStyles,
-  ICloseButtonStyles,
-  ICommonIcon,
-  IComplexIcon,
-  IWithMessagesStyles,
-  IControlWrapperStyles,
-  ICssBaselineStyles,
-  IDateInputStyles,
-  IDatePickerHeaderStyles,
-  IDatePickerStyles,
-  IDescriptionStyles,
-  IDotsPreloaderStyles,
-  IFileInputStyles,
-  IFileItemStyles,
-  IFilterIntervalStyles,
-  IFilterSelectStyles,
-  IFiltersPaneSearchStyles,
-  IFiltersPaneStyles,
-  IFilterValueViewStyles,
-  IFilterWithDatesStyles,
-  IFilterWithPeriodStyles,
-  IFilterWrapperStyles,
-  IFlagStyles,
-  IFlexibleTableCellStyles,
-  IFlexibleTableRowStyles,
-  IFlexibleTableStyles,
-  IIconButtonStyles,
-  IIconStyles,
-  IIncrementInputStyles,
-  IInputStyles,
-  IListItemStyles,
-  IListStyles,
-  IModalStyles,
-  IMoreMenuStyles,
-  IMultiSelectInputStyles,
-  IMultiSelectListStyles,
-  IMultiSelectStyles,
-  INewMoreMenuStyles,
-  INotificationStyles,
-  IPhoneInputCountryListStyles,
-  IPhoneInputStyles,
-  IPreloaderSvgType,
-  IRadioButtonStyles,
-  ISearchInputStyles,
-  ISelectListStyles,
-  ISelectorStyles,
-  ISelectStyles,
-  ISkeletonStyles,
-  IStatusStyles,
-  ISvgIcon,
-  ISvgPreloaderStyles,
-  ISwitchStyles,
-  ITextAreaStyles,
-  ITextButtonStyles,
-  ITextWithInfoStyles,
-  ITextWithTooltipStyles,
-  IThemedPreloaderStyles,
-  IToasterStyles,
-  ITooltipStyles,
-  IWithPopupStyles,
-  IWithTooltipStyles,
-} 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;
-  FileInput: IFileInputStyles;
-  FileItem: IFileItemStyles;
-  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;
-  IconButton: IIconButtonStyles;
-  IncrementInput: IIncrementInputStyles;
-  Input: IInputStyles;
-  List: IListStyles;
-  ListItem: IListItemStyles;
-  Modal: IModalStyles;
-  MoreMenu: IMoreMenuStyles;
-  MultiSelect: IMultiSelectStyles;
-  MultiSelectInput: IMultiSelectInputStyles;
-  MultiSelectList: IMultiSelectListStyles;
-  Notification: INotificationStyles;
-  PhoneInput: IPhoneInputStyles;
-  PhoneInputCountryList: IPhoneInputCountryListStyles;
-  RadioButton: IRadioButtonStyles;
-  SearchInput: ISearchInputStyles;
-  Select: ISelectStyles;
-  SelectList: ISelectListStyles;
-  Selector: ISelectorStyles;
-  Skeleton: ISkeletonStyles;
-  Switch: ISwitchStyles;
-  TextButton: ITextButtonStyles;
-  TextArea: ITextAreaStyles;
-  TextWithInfo: ITextWithInfoStyles;
-  TextWithTooltip: ITextWithTooltipStyles;
-  Status: IStatusStyles;
-  ThemedPreloader: IThemedPreloaderStyles;
-  Tooltip: ITooltipStyles;
-  Toaster: IToasterStyles;
-  WithPopup: IWithPopupStyles;
-  NewMoreMenu: INewMoreMenuStyles;
-  WithMessages: IWithMessagesStyles;
-  ControlWrapper: IControlWrapperStyles;
-  WithTooltip: IWithTooltipStyles;
-}
-
-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 {
-  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 | Record<string, number>>;
-  boxShadows?: Record<string, JssValue>;
-  helpers?: IUiKitHelpers;
-}
+import { Styles } from 'react-jss';
+import { Classes, JssValue } from 'jss';
+import type {
+  IAccountInfoStyles,
+  IAddButtonStyles,
+  IButtonStyles,
+  ICheckboxStyles,
+  ICloseButtonStyles,
+  IControlWrapperStyles,
+  ICssBaselineStyles,
+  IDateInputStyles,
+  IDatePickerHeaderStyles,
+  IDatePickerStyles,
+  IDescriptionStyles,
+  IDocActionsStyles,
+  IDotsPreloaderStyles,
+  IFileInputStyles,
+  IFileItemStyles,
+  IFilterIntervalStyles,
+  IFilterSelectStyles,
+  IFiltersPaneSearchStyles,
+  IFiltersPaneStyles,
+  IFilterValueViewStyles,
+  IFilterWithDatesStyles,
+  IFilterWithPeriodStyles,
+  IFilterWrapperStyles,
+  IFlagStyles,
+  IFlexibleTableCellStyles,
+  IFlexibleTableRowStyles,
+  IFlexibleTableStyles,
+  IIconButtonStyles,
+  IIconStyles,
+  IIconType,
+  IIncrementInputStyles,
+  IInputStyles,
+  IListItemStyles,
+  IListStyles,
+  IModalStyles,
+  IMoreMenuStyles,
+  IMultiSelectInputStyles,
+  IMultiSelectListStyles,
+  IMultiSelectStyles,
+  INewMoreMenuStyles,
+  INotificationStyles,
+  IPhoneInputCountryListStyles,
+  IPhoneInputStyles,
+  IPreloaderSvgType,
+  IRadioButtonStyles,
+  ISearchInputStyles,
+  ISelectListStyles,
+  ISelectorStyles,
+  ISelectStyles,
+  ISkeletonStyles,
+  IStatusStyles,
+  ISvgIcon,
+  ISvgPreloaderStyles,
+  ISwitchStyles,
+  ITextAreaStyles,
+  ITextButtonStyles,
+  ITextWithInfoStyles,
+  ITextWithTooltipStyles,
+  IThemedPreloaderStyles,
+  IToasterStyles,
+  ITooltipStyles,
+  IWithMessagesStyles,
+  IWithPopupStyles,
+  IWithTooltipStyles,
+} from '../components';
+
+export type IStyles<C extends string, P = unknown> = Styles<C, P, Partial<Styles<C, P>>>;
+
+export type IMaybeArray<T> = T[] | T;
+export type IMixedStyles<T> = IMaybeArray<T | boolean | undefined>;
+export type IUseStyles<C extends string, P = unknown> = (
+  data?: P & { theme?: IMaybeArray<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;
+  DocActions: IDocActionsStyles;
+  DotsPreloader: IDotsPreloaderStyles;
+  SvgPreloader: ISvgPreloaderStyles;
+  FileInput: IFileInputStyles;
+  FileItem: IFileItemStyles;
+  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;
+  IconButton: IIconButtonStyles;
+  IncrementInput: IIncrementInputStyles;
+  Input: IInputStyles;
+  List: IListStyles;
+  ListItem: IListItemStyles;
+  Modal: IModalStyles;
+  MoreMenu: IMoreMenuStyles;
+  MultiSelect: IMultiSelectStyles;
+  MultiSelectInput: IMultiSelectInputStyles;
+  MultiSelectList: IMultiSelectListStyles;
+  Notification: INotificationStyles;
+  PhoneInput: IPhoneInputStyles;
+  PhoneInputCountryList: IPhoneInputCountryListStyles;
+  RadioButton: IRadioButtonStyles;
+  SearchInput: ISearchInputStyles;
+  Select: ISelectStyles;
+  SelectList: ISelectListStyles;
+  Selector: ISelectorStyles;
+  Skeleton: ISkeletonStyles;
+  Switch: ISwitchStyles;
+  TextButton: ITextButtonStyles;
+  TextArea: ITextAreaStyles;
+  TextWithInfo: ITextWithInfoStyles;
+  TextWithTooltip: ITextWithTooltipStyles;
+  Status: IStatusStyles;
+  ThemedPreloader: IThemedPreloaderStyles;
+  Tooltip: ITooltipStyles;
+  Toaster: IToasterStyles;
+  WithPopup: IWithPopupStyles;
+  NewMoreMenu: INewMoreMenuStyles;
+  WithMessages: IWithMessagesStyles;
+  ControlWrapper: IControlWrapperStyles;
+  WithTooltip: IWithTooltipStyles;
+}
+
+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 {
+  components?: Partial<IComponentStyles>;
+  icons?: Partial<Record<IIconType, ISvgIcon>>;
+  preloaders?: Partial<Record<IPreloaderSvgType, string>>; // TODO: заменить string
+  animations?: IUiKitAnimations;
+  colors?: Record<string, string>;
+  dimensions?: Record<string, number | Record<string, number>>;
+  boxShadows?: Record<string, JssValue>;
+  helpers?: IUiKitHelpers;
+}