@true-engineering/true-react-common-ui-kit 4.0.0-alpha54 → 4.0.0-alpha61

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

@@ -1,78 +0,0 @@
-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/true-jss/ThemedStylesManager.ts

@@ -1,93 +0,0 @@
-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 });
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return this.#styleSheetMap.get(theme)!;
-  }
-}

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

@@ -1,156 +0,0 @@
-import type { Classes, Rule, StyleSheet } 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[];
-  }
-  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

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

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

@@ -1,34 +0,0 @@
-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>
-  );
-};