@true-engineering/true-react-common-ui-kit 2.6.0 → 3.0.0-alpha.0

package/dist/components/TextArea/TextArea.styles.d.ts

@@ -1,128 +1,3 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {
-        width: string;
-        height: string;
-        display: string;
-        flexDirection: string;
-    };
-    wrapper: {
-        display: string;
-        position: string;
-        width: string;
-        flexGrow: number;
-        boxSizing: string;
-        transition: string;
-        transitionProperty: string;
-        backgroundColor: string;
-        border: (string | number)[];
-    };
-    textarea: {
-        width: string;
-        height: string;
-        outline: string;
-        boxSizing: string;
-        outlineStyle: string;
-        fontFamily: string;
-        fontSize: number;
-        padding: number[];
-        transition: string;
-        transitionProperty: string;
-        border: string;
-        resize: string;
-        overflow: string;
-        '&::placeholder': {
-            opacity: number;
-        };
-        MozAppearance: string;
-        '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
-            WebkitAppearance: string;
-            margin: number;
-        };
-    };
-    focused: {
-        position: string;
-        zIndex: number;
-    };
-    withFloatingLabel: {
-        paddingTop: number;
-    };
-    floating: {};
-    activeLabel: {
-        display: string;
-        '&$floating': {
-            display: string;
-            transform: string;
-        };
-    };
-    required: {
-        '&:before': {
-            content: string;
-            position: string;
-            left: number;
-            top: number;
-            width: number;
-            height: number;
-            borderRadius: string;
-            backgroundColor: string;
-        };
-    };
-    disabled: {};
-    label: {
-        position: string;
-        pointerEvents: string;
-        left: number;
-        top: number;
-        transformOrigin: string;
-        transform: string;
-        transition: string;
-        transitionProperty: string;
-        fontSize: number;
-    };
-    invalid: {
-        borderColor: string;
-    };
-    invalidLabel: {
-        color: string;
-    };
-    error: {
-        fontSize: number;
-        paddingTop: number;
-        paddingLeft: number;
-        color: string;
-    };
-    requiredLabel: {
-        '&:after': {
-            content: string;
-            position: string;
-            right: number;
-            top: number;
-            transform: string;
-            width: number;
-            height: number;
-            borderRadius: string;
-            backgroundColor: string;
-        };
-    };
-    symbolsCount: {
-        display: string;
-        textAlign: string;
-        marginTop: number;
-        fontSize: number;
-        marginLeft: string;
-        paddingLeft: number;
-        whiteSpace: string;
-    };
-    symbolsCountError: {
-        color: string;
-    };
-    footer: {
-        display: string;
-    };
-    info: {
-        fontSize: number;
-        paddingTop: number;
-        paddingLeft: number;
-    };
-};
-export declare type TextAreaStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "textarea" | "disabled" | "footer" | "label" | "error" | "invalid" | "focused" | "withFloatingLabel" | "floating" | "activeLabel" | "required" | "requiredLabel" | "invalidLabel" | "info" | "wrapper" | "symbolsCount" | "symbolsCountError", unknown>;
+export declare type ITextAreaStyles = ITweakStyles<typeof useStyles>;

package/dist/components/TextArea/index.d.ts

@@ -1,2 +1,2 @@
 export * from './TextArea';
-export type { TextAreaStyles } from './TextArea.styles';
+export type { ITextAreaStyles } from './TextArea.styles';

package/dist/components/TextWithInfo/TextWithInfo.d.ts

@@ -1,8 +1,7 @@
 import { FC } from 'react';
 import { ICommonProps } from '../../types';
-import { TextWithInfoStyles } from './TextWithInfo.styles';
-export interface ITextWithInfoProps extends ICommonProps {
-    tweakStyles?: TextWithInfoStyles;
+import { ITextWithInfoStyles } from './TextWithInfo.styles';
+export interface ITextWithInfoProps extends ICommonProps<ITextWithInfoStyles> {
     text: string;
     isSelected?: boolean;
     textTooltip?: string;

package/dist/components/TextWithInfo/TextWithInfo.styles.d.ts

@@ -1,48 +1,3 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {
-        display: string;
-        height: number;
-        padding: number[];
-        borderRadius: number;
-        boxSizing: string;
-        color: "#505f79";
-        '&:hover': {
-            backgroundColor: "#eceff5";
-        };
-    };
-    container: {
-        display: string;
-        height: string;
-        alignItems: string;
-    };
-    selected: {
-        backgroundColor: "#eceff5";
-    };
-    text: {
-        cursor: string;
-        fontSize: number;
-    };
-    info: {
-        width: number;
-        marginLeft: number;
-        color: "#95a0b3";
-        cursor: string;
-        borderRadius: string;
-        '&:link': {
-            color: "#95a0b3";
-        };
-        '&:hover': {
-            color: "#ffffff";
-            backgroundColor: "#95a0b3";
-        };
-        '&:visited': {
-            color: "#95a0b3";
-            '&:hover': {
-                color: "#ffffff";
-                backgroundColor: "#95a0b3";
-            };
-        };
-    };
-};
-export declare type TextWithInfoStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "text" | "container" | "info" | "selected", unknown>;
+export declare type ITextWithInfoStyles = ITweakStyles<typeof useStyles>;

package/dist/components/TextWithInfo/index.d.ts

@@ -1,2 +1,2 @@
 export * from './TextWithInfo';
-export type { TextWithInfoStyles } from './TextWithInfo.styles';
+export type { ITextWithInfoStyles } from './TextWithInfo.styles';

package/dist/components/TextWithTooltip/TextWithTooltip.d.ts

@@ -2,9 +2,8 @@ import { FC, ReactNode } from 'react';
 import { Modifier, Placement } from 'react-overlays/usePopper';
 import { ICommonProps } from '../../types';
 import { ITooltipProps } from '../Tooltip';
-import { TextWithTooltipStyles } from './TextWithTooltip.styles';
-export interface ITextWithTooltipProps extends ICommonProps {
-    tweakStyles?: TextWithTooltipStyles;
+import { ITextWithTooltipStyles } from './TextWithTooltip.styles';
+export interface ITextWithTooltipProps extends ICommonProps<ITextWithTooltipStyles> {
     children: ReactNode;
     tooltipText: ITooltipProps['text'];
     tooltipView?: ITooltipProps['view'];

package/dist/components/TextWithTooltip/TextWithTooltip.styles.d.ts

@@ -1,14 +1,6 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {
-        position: string;
-    };
-    tooltip: {
-        zIndex: number;
-    };
-    clickable: {
-        cursor: string;
-    };
-    tweakTooltip: {};
-};
-export declare type TextWithTooltipStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+import { ITooltipStyles } from '../Tooltip';
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "tooltip" | "clickable", unknown>;
+export declare type ITextWithTooltipStyles = ITweakStyles<typeof useStyles, {
+    tweakTooltip: ITooltipStyles;
+}>;

package/dist/components/TextWithTooltip/index.d.ts

@@ -1,2 +1,2 @@
 export * from './TextWithTooltip';
-export type { TextWithTooltipStyles } from './TextWithTooltip.styles';
+export type { ITextWithTooltipStyles } from './TextWithTooltip.styles';

package/dist/components/ThemedPreloader/ThemedPreloader.d.ts

@@ -1,9 +1,8 @@
 import { FC } from 'react';
 import { ICommonProps } from '../../types';
 import { IPreloaderSvgType } from './types';
-import { ThemedPreloaderStyles } from './ThemedPreloader.styles';
-export interface IThemedPreloaderProps extends ICommonProps {
-    tweakStyles?: ThemedPreloaderStyles;
+import { IThemedPreloaderStyles } from './ThemedPreloader.styles';
+export interface IThemedPreloaderProps extends ICommonProps<IThemedPreloaderStyles> {
     /**
      * @default `default`
      */

package/dist/components/ThemedPreloader/ThemedPreloader.styles.d.ts

@@ -1,14 +1,7 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {
-        display: string;
-    };
-    dots: {};
-    default: {};
-    logo: {};
-    currentColor: {
-        color: string;
-    };
-    tweakPreloaderComponent: {};
-};
-export declare type ThemedPreloaderStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+import { IDotsPreloaderStyles, ISvgPreloaderStyles } from './components';
+export declare const useStyles: import("../../theme").IUseStyles<"currentColor" | "root" | "default" | "dots" | "logo", unknown>;
+export declare type IThemedPreloaderStyles = ITweakStyles<typeof useStyles, {
+    tweakDotsPreloader: IDotsPreloaderStyles;
+    tweakSvgPreloader: ISvgPreloaderStyles;
+}>;

package/dist/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.d.ts

@@ -1,7 +1,5 @@
 import { FC } from 'react';
 import { ICommonProps } from '../../../../types';
-import { DotsPreloaderStyles } from './DotsPreloader.styles';
-export interface IDotsPreloaderProps extends ICommonProps {
-    tweakStyles?: DotsPreloaderStyles;
-}
+import { IDotsPreloaderStyles } from './DotsPreloader.styles';
+export declare type IDotsPreloaderProps = Pick<ICommonProps<IDotsPreloaderStyles>, 'tweakStyles'>;
 export declare const DotsPreloader: FC<IDotsPreloaderProps>;

package/dist/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.styles.d.ts

@@ -1,43 +1,3 @@
-import { ComponentStyles } from '../../../../types';
-export declare const styles: {
-    root: {
-        display: string;
-        gap: number;
-        '&::before, &::after': {
-            content: string;
-            extend: string;
-        };
-        '&::before': {
-            animationDelay: string;
-        };
-        '&::after': {
-            animationDelay: string;
-        };
-    };
-    '@keyframes FadedDots': {
-        '0%': {
-            opacity: number;
-        };
-        '30%': {
-            opacity: number;
-        };
-        '100%': {
-            opacity: number;
-        };
-    };
-    fadedDot: {
-        display: string;
-        animationDuration: number;
-        animationIterationCount: string;
-        animationName: string;
-        borderRadius: string;
-        height: number;
-        width: number;
-        backgroundColor: string;
-    };
-    dot: {
-        extend: string;
-        animationDelay: string;
-    };
-};
-export declare type DotsPreloaderStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../../../theme';
+export declare const useStyles: import("../../../../theme").IUseStyles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown>;
+export declare type IDotsPreloaderStyles = ITweakStyles<typeof useStyles>;

package/dist/components/ThemedPreloader/components/DotsPreloader/index.d.ts

@@ -1,2 +1,2 @@
 export { DotsPreloader } from './DotsPreloader';
-export type { DotsPreloaderStyles } from './DotsPreloader.styles';
+export type { IDotsPreloaderStyles } from './DotsPreloader.styles';

package/dist/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.d.ts

@@ -1,9 +1,8 @@
 import { FC } from 'react';
 import { ICommonProps } from '../../../../types';
 import { IPreloaderSvgType } from '../../types';
-import { SvgPreloaderStyles } from './SvgPreloader.styles';
-export interface ISvgPreloaderProps extends ICommonProps {
+import { ISvgPreloaderStyles } from './SvgPreloader.styles';
+export interface ISvgPreloaderProps extends Pick<ICommonProps<ISvgPreloaderStyles>, 'tweakStyles'> {
     type: IPreloaderSvgType;
-    tweakStyles?: SvgPreloaderStyles;
 }
 export declare const SvgPreloader: FC<ISvgPreloaderProps>;

package/dist/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.styles.d.ts

@@ -1,9 +1,3 @@
-import { ComponentStyles } from '../../../../types';
-export declare const styles: {
-    root: {
-        display: string;
-        width: string;
-        height: string;
-    };
-};
-export declare type SvgPreloaderStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../../../theme';
+export declare const useStyles: import("../../../../theme").IUseStyles<"root", unknown>;
+export declare type ISvgPreloaderStyles = ITweakStyles<typeof useStyles>;

package/dist/components/ThemedPreloader/components/SvgPreloader/index.d.ts

@@ -1,2 +1,2 @@
 export * from './SvgPreloader';
-export type { SvgPreloaderStyles } from './SvgPreloader.styles';
+export type { ISvgPreloaderStyles } from './SvgPreloader.styles';

package/dist/components/ThemedPreloader/index.d.ts

@@ -1,4 +1,4 @@
 export * from './ThemedPreloader';
 export * from './types';
-export type { ThemedPreloaderStyles } from './ThemedPreloader.styles';
-export type { DotsPreloaderStyles, SvgPreloaderStyles } from './components';
+export type { IThemedPreloaderStyles } from './ThemedPreloader.styles';
+export type { IDotsPreloaderStyles, ISvgPreloaderStyles } from './components';

package/dist/components/Toaster/Toaster.d.ts

@@ -1,13 +1,12 @@
 import { FC, ReactNode } from 'react';
 import { ICommonProps } from '../../types';
-import { ToasterType } from './types';
-import { ToasterStyles } from './Toaster.styles';
-export interface IToasterProps extends ICommonProps {
-    tweakStyles?: ToasterStyles;
+import { IToasterType } from './types';
+import { IToasterStyles } from './Toaster.styles';
+export interface IToasterProps extends ICommonProps<IToasterStyles> {
     /**
      * @default `error`
      */
-    type?: ToasterType;
+    type?: IToasterType;
     title?: string;
     text?: string;
     children?: ReactNode;

package/dist/components/Toaster/Toaster.styles.d.ts

@@ -1,45 +1,6 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {
-        borderRadius: number;
-        position: string;
-        background: "#ffffff";
-        padding: number[];
-        display: string;
-    };
-    iconContainer: {
-        width: number;
-        height: number;
-        flexShrink: number;
-        marginRight: number;
-    };
-    error: {
-        color: "#f14d56";
-    };
-    info: {};
-    warning: {
-        color: "#ff991f";
-    };
-    ok: {
-        color: "#97ba1e";
-    };
-    'not-ok': {
-        color: "#7a869a";
-    };
-    text: {};
-    title: {};
-    content: {
-        '&:not(:first-child):not(:empty)': {
-            marginTop: number;
-        };
-    };
-    close: {
-        position: string;
-        top: number;
-        right: number;
-        width: number;
-        height: number;
-    };
-    tweakCloseButton: {};
-};
-export declare type ToasterStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+import { ICloseButtonStyles } from '../CloseButton';
+export declare const useStyles: import("../../theme").IUseStyles<"close" | "content" | "root" | "text" | "title" | "error" | "warning" | "iconContainer" | "info" | "ok" | "not-ok", unknown>;
+export declare type IToasterStyles = ITweakStyles<typeof useStyles, {
+    tweakCloseButton: ICloseButtonStyles;
+}>;

package/dist/components/Toaster/index.d.ts

@@ -1,3 +1,3 @@
 export * from './Toaster';
 export * from './types';
-export type { ToasterStyles } from './Toaster.styles';
+export type { IToasterStyles } from './Toaster.styles';

package/dist/components/Toaster/types.d.ts

@@ -1 +1 @@
-export declare type ToasterType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
+export declare type IToasterType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,8 +1,7 @@
 import { FC, ReactNode } from 'react';
 import { ICommonProps } from '../../types';
-import { TooltipStyles } from './Tooltip.styles';
-export interface ITooltipProps extends ICommonProps {
-    tweakStyles?: TooltipStyles;
+import { ITooltipStyles } from './Tooltip.styles';
+export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
     text: ReactNode;
     /**
      * @default `tooltip`

package/dist/components/Tooltip/Tooltip.styles.d.ts

@@ -1,35 +1,3 @@
-import { ComponentStyles } from '../../types';
-import { ITooltipProps } from './Tooltip';
-interface IStyleProps {
-    type: NonNullable<ITooltipProps['type']>;
-}
-export declare const styles: {
-    root: {
-        display: string;
-        boxSizing: string;
-    };
-    tooltip: {
-        fontSize: number;
-        padding: number[];
-        letterSpacing: number;
-        backgroundColor: ({ type }: IStyleProps) => string;
-        color: ({ type }: IStyleProps) => string;
-        boxShadow: string;
-        borderRadius: number;
-        lineHeight: number;
-        maxWidth: number;
-    };
-    hint: {
-        whiteSpace: string;
-        fontSize: number;
-        padding: number[];
-        borderRadius: 6;
-        backgroundColor: ({ type }: {
-            type: ITooltipProps['type'];
-        }) => string;
-        color: "#ffffff";
-        letterSpacing: number;
-    };
-};
-export declare type TooltipStyles = ComponentStyles<typeof styles, IStyleProps>;
-export {};
+import { ITweakStyles } from '../../theme';
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "tooltip" | "error" | "info" | "hint", unknown>;
+export declare type ITooltipStyles = ITweakStyles<typeof useStyles>;

package/dist/components/Tooltip/index.d.ts

@@ -1,3 +1,3 @@
 export * from './Tooltip';
 export * from './types';
-export type { TooltipStyles } from './Tooltip.styles';
+export type { ITooltipStyles } from './Tooltip.styles';

package/dist/helpers/index.d.ts

@@ -1,4 +1,3 @@
 export * from './popper-helpers';
 export * from './phone';
 export * from './misc';
-export * from './deprecated';

package/dist/helpers/phone.d.ts

@@ -2,6 +2,9 @@ import { IPhoneInfo, IPhoneValue } from '../components';
 export declare const findCountryByCode: (countryCode?: string, countriesList?: IPhoneInfo[]) => IPhoneInfo | undefined;
 export declare const findCountryIndexByCode: (countryCode?: string, countriesList?: IPhoneInfo[]) => number;
 export declare const getCountryTextByLocale: (country: IPhoneInfo, locale: string) => string;
+/**
+ * Мутирует!
+ */
 export declare const sortCountriesByLocale: (countriesList: IPhoneInfo[], locale: string) => IPhoneInfo[];
 export declare const checkSearchStringInCountry: (country: IPhoneInfo, searchString: string) => boolean;
 export declare const getFullPhone: (phone?: IPhoneValue) => string;

package/dist/hooks/index.d.ts

@@ -1,6 +1,5 @@
 export * from './use-is-mounted';
 export * from './use-on-click-outside';
-export * from './use-theme';
 export * from './use-dropdown';
 export * from './use-tweak-styles';
 export * from './use-did-mount-effect';

package/dist/hooks/use-tweak-styles.d.ts

@@ -1,2 +1,21 @@
-import { Styles } from 'react-jss';
-export declare const useTweakStyles: <StyleSheet_1>(componentStyles: StyleSheet_1 | undefined, tweakStyles: Partial<Record<keyof StyleSheet_1, any>> | undefined, className: keyof StyleSheet_1) => Styles;
+import { IComponentName } from '../theme';
+export declare const useTweakStyles: <StyleSheet_1, ClassName extends keyof StyleSheet_1>({ innerStyles, tweakStyles, className, currentComponentName, }: {
+    /**
+     * Это tweakStyles, определенные в родительском компоненте
+     * (например, стили для Input, определенные в стилях компонента Select)
+     */
+    innerStyles?: StyleSheet_1[ClassName] | undefined;
+    /**
+     * Пропса tweakStyles из родительского компонента
+     * (это уже непосредственно ISelectProps.tweakStyles)
+     */
+    tweakStyles?: StyleSheet_1 | undefined;
+    /**
+     * Класс для переопределения tweakStyles из-вне. (Например, 'tweakInput')
+     */
+    className: ClassName;
+    /**
+     * Название компонента который вызывает useTweakStyles. (В данном примере 'Select')
+     */
+    currentComponentName?: keyof import("../theme").IComponentStyles | undefined;
+}) => StyleSheet_1[ClassName];

package/dist/index.d.ts

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

package/dist/theme/Provider.d.ts

@@ -0,0 +1,11 @@
+import { FC, ReactNode } from 'react';
+import { IUiKitTheme } from './types';
+export interface IThemedProviderProps {
+    theme: IUiKitTheme;
+    children: ReactNode;
+}
+export declare const getTheme: () => IUiKitTheme;
+export declare const ThemeContext: import("react").Context<{
+    theme: IUiKitTheme;
+}>;
+export declare const ThemeProvider: FC<IThemedProviderProps>;

package/dist/{theme.d.ts → theme/common.d.ts}

@@ -1,4 +1,4 @@
-import { UiKitHelpers, UiKitTheme } from './types';
+import { IUiKitHelpers, IUiKitTheme } from './types';
 export declare const colors: {
     readonly FONT_MAIN: "#222a37";
     readonly FONT_MEDIUM: "#505f79";
@@ -31,7 +31,7 @@ export declare const dimensions: {
     readonly BORDER_RADIUS_EXTRA_SMALL: 4;
     readonly CONTROL_HEIGHT: 48;
 };
-export declare const helpers: UiKitHelpers;
+export declare const helpers: IUiKitHelpers;
 export declare const animations: {
     slideUp: {
         'slide-up-enter': {
@@ -41,9 +41,7 @@ export declare const animations: {
         'slide-up-enter-active': {
             opacity: number;
             transform: string;
-            transition: ({ timeout }: {
-                timeout: number;
-            }) => string;
+            transition: string;
             transitionProperty: string;
         };
         'slide-up-exit-active': {
@@ -53,15 +51,13 @@ export declare const animations: {
         'slide-up-exit': {
             opacity: number;
             transform: string;
-            transition: ({ timeout }: {
-                timeout: number;
-            }) => string;
+            transition: string;
             transitionProperty: string;
         };
     };
 };
-export interface CommonUiKitTheme extends UiKitTheme {
+export interface ICommonUiKitTheme extends IUiKitTheme {
     colors: typeof colors;
     dimensions: typeof dimensions;
 }
-export declare const commonTheme: CommonUiKitTheme;
+export declare const common: ICommonUiKitTheme;

package/dist/theme/helpers.d.ts

@@ -0,0 +1,10 @@
+import { IComponentName, IStyles, IUseStyles } from './types';
+export declare const areStylesThemed: (styles: Record<string, unknown>) => boolean;
+/**
+ * Подмешивает стили из темы. Мутирует, добавляя специально поле,
+ * по которому можно определить была ли уже произведена мутация ранее,
+ * тем самым сохраняя ссылку на объект и позволяя этим кэшировать JSS стили
+ */
+export declare const themedStyles: <T>(styles: T, themeComponentStyles: T) => T;
+export declare function createThemedStyles<C extends string, P>(styles: IStyles<C, P>): IUseStyles<C, P>;
+export declare function createThemedStyles<C extends string, P>(componentName: IComponentName, styles: IStyles<C, P>): IUseStyles<C, P>;