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

package/src/components/Description/Description.styles.ts

@@ -1,31 +1,30 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {},
-
-  button: {
-    cursor: 'pointer',
-    display: 'inline-block',
-    color: colors.FONT_MEDIUM,
-    marginTop: 18,
-    textTransform: 'capitalize',
-    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
-
-    '&:hover': {
-      color: colors.FONT_MAIN,
-    },
-  },
-
-  link: {
-    color: colors.FONT_MEDIUM,
-    textDecoration: 'none',
-    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
-
-    '&:hover': {
-      color: colors.FONT_MAIN,
-    },
-  },
-};
-
-export type DescriptionStyles = ComponentStyles<typeof styles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Description', {
+  root: {},
+
+  button: {
+    cursor: 'pointer',
+    display: 'inline-block',
+    color: colors.FONT_MEDIUM,
+    marginTop: 18,
+    textTransform: 'capitalize',
+    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
+
+    '&:hover': {
+      color: colors.FONT_MAIN,
+    },
+  },
+
+  link: {
+    color: colors.FONT_MEDIUM,
+    textDecoration: 'none',
+    borderBottom: [1, 'dashed', colors.FONT_MEDIUM],
+
+    '&:hover': {
+      color: colors.FONT_MAIN,
+    },
+  },
+});
+
+export type IDescriptionStyles = ITweakStyles<typeof useStyles>;

package/src/components/Description/Description.tsx

@@ -1,12 +1,11 @@
 import { FC, useState } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { LINK_REGEXP } from './constants';
-import { DescriptionStyles, styles } from './Description.styles';
+import { useStyles, IDescriptionStyles } from './Description.styles';
 
-export interface IDescriptionProps extends ICommonProps {
-  tweakStyles?: DescriptionStyles;
+export interface IDescriptionProps extends ICommonProps<IDescriptionStyles> {
   text: string;
   moreTitle?: string;
   lessTitle?: string;
@@ -20,10 +19,11 @@ export const Description: FC<IDescriptionProps> = ({
   lessTitle,
   truncateIndex = 150,
   isAlwaysOpen = true,
+  testId,
   data,
   tweakStyles,
 }) => {
-  const { classes } = useTheme('Description', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   const isTooShort = text.length < truncateIndex;
   const [isOpen, setIsOpen] = useState(isAlwaysOpen);
@@ -34,7 +34,7 @@ export const Description: FC<IDescriptionProps> = ({
   const shortText = text.slice(0, text.slice(0, truncateIndex).lastIndexOf(' '));
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
       {isAlwaysOpen || isOpen || isTooShort ? (
         <div>
           <span>{textWithNoLink} </span>

package/src/components/Description/index.ts

@@ -1,2 +1,2 @@
-export * from './Description';
-export type { DescriptionStyles } from './Description.styles';
+export * from './Description';
+export type { IDescriptionStyles } from './Description.styles';

package/src/components/FiltersPane/FiltersPane.styles.ts

@@ -1,71 +1,87 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const FILTER_HEIGHT = 36;
-
-export const styles = {
-  root: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    gap: 8,
-    width: '100%',
-  },
-
-  settings: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 18,
-    boxSizing: 'border-box',
-    width: 40,
-    height: FILTER_HEIGHT,
-    cursor: 'pointer',
-    transition: 'background-color 0.25s ease-in-out',
-  },
-
-  settingsIcon: {
-    width: 16,
-    height: 16,
-  },
-
-  clear: {
-    display: 'flex',
-    alignItems: 'center',
-    height: FILTER_HEIGHT,
-  },
-
-  filterWithClearButton: {
-    display: 'flex',
-    gap: 16,
-    minWidth: 0,
-  },
-
-  // TODO: удалить когда появятся текстовые кнопки
-  tweakClearButton: {
-    s: {
-      paddingLeft: 0,
-      paddingRight: 0,
-      minWidth: 'unset',
-    },
-
-    text: {
-      background: 'none',
-      color: colors.GREY_ACTIVE,
-
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
-
-      '&:active': {
-        color: colors.FONT_MAIN,
-      },
-
-      '&:hover, &:focus, &:active': {
-        background: 'none',
-        borderColor: 'transparent',
-      },
-    },
-  },
-};
-
-export type FiltersPaneStyles = ComponentStyles<typeof styles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IButtonStyles } from '../Button';
+
+export const FILTER_HEIGHT = 36;
+
+export const useStyles = createThemedStyles('FiltersPane', {
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 8,
+    width: '100%',
+  },
+
+  settings: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 18,
+    boxSizing: 'border-box',
+    width: 40,
+    height: FILTER_HEIGHT,
+    cursor: 'pointer',
+    transition: 'background-color 0.25s ease-in-out',
+  },
+
+  settingsIcon: {
+    width: 16,
+    height: 16,
+  },
+
+  clear: {
+    display: 'flex',
+    alignItems: 'center',
+    height: FILTER_HEIGHT,
+  },
+
+  filterWithClearButton: {
+    display: 'flex',
+    gap: 16,
+    minWidth: 0,
+  },
+});
+
+export const clearButtonStyles: IButtonStyles = {
+  s: {
+    paddingLeft: 0,
+    paddingRight: 0,
+    minWidth: 'unset',
+  },
+
+  text: {
+    background: 'none',
+    color: colors.GREY_ACTIVE,
+
+    '&:hover, &:focus': {
+      color: colors.FONT_MEDIUM,
+    },
+
+    '&:active': {
+      color: colors.FONT_MAIN,
+    },
+
+    '&:hover, &:focus, &:active': {
+      background: 'none',
+      borderColor: 'transparent',
+    },
+  },
+};
+
+export const innerTextButtonStyles: IButtonStyles = {
+  text: {
+    color: colors.GREY_ACTIVE,
+
+    '&:hover, &:focus': {
+      color: colors.FONT_MEDIUM,
+    },
+
+    '&:active': {
+      color: colors.FONT_MEDIUM,
+    },
+  },
+};
+
+export type IFiltersPaneStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakClearButton: IButtonStyles }
+>;

package/src/components/FiltersPane/FiltersPane.tsx

@@ -1,16 +1,17 @@
 import { useMemo, useRef } from 'react';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
 import { FilterWrapper, IFiltersPaneSearchProps, FiltersPaneSearch } from './components';
 import { getLocale } from './helpers';
 import { ConfigType, IFilterLocaleKey, IPartialFilterLocale } from './types';
-import { FiltersPaneStyles, styles } from './FiltersPane.styles';
+import { useStyles, IFiltersPaneStyles, clearButtonStyles } from './FiltersPane.styles';
 
-export interface IFiltersPaneProps<Values, Content = Values> extends ICommonProps {
-  tweakStyles?: FiltersPaneStyles;
+export interface IFiltersPaneProps<Values, Content = Values>
+  extends ICommonProps<IFiltersPaneStyles> {
   filtersConfig: ConfigType<Values>;
   enabledFilters?: Array<keyof ConfigType<Values>>;
   values?: Partial<Values>;
@@ -19,10 +20,9 @@ export interface IFiltersPaneProps<Values, Content = Values> extends ICommonProp
   locale?: IPartialFilterLocale;
   isDisabled?: boolean;
   hasClearButton?: boolean;
-  onClear?: () => void;
-  onChangeFilters: (values: Partial<Values>) => void;
-  onSettingsButtonClick?: () => void;
-  testId?: string;
+  onChangeFilters(values: Partial<Values>): void;
+  onSettingsButtonClick?(): void;
+  onClear?(): void;
 }
 
 export function FiltersPane<Values extends Record<string, unknown>, Content = Values>({
@@ -36,12 +36,19 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   search,
   isDisabled = false,
   hasClearButton = true,
+  testId,
   onChangeFilters,
   onSettingsButtonClick,
   onClear,
-  testId,
 }: IFiltersPaneProps<Values, Content>): JSX.Element {
-  const { classes, componentStyles } = useTheme('FiltersPane', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'FiltersPane',
+  });
 
   const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 
@@ -65,8 +72,6 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
     (search !== undefined ||
       filtersKeys.filter((key) => filtersConfig[key] !== undefined).length > 0);
 
-  const tweakClearButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakClearButton');
-
   const clearButton = (
     <div className={classes.clear}>
       <Button
@@ -74,7 +79,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
         size="s"
         view="text"
         isDisabled={isDisabled}
-        testId={testId !== undefined ? `${testId}-clear-button` : undefined}
+        testId={getTestId(testId, 'clear-button')}
         tweakStyles={tweakClearButtonStyles}
       >
         {translates.clear}
@@ -83,14 +88,14 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   );
 
   return (
-    <div className={classes.root} ref={ref} {...addDataAttributes(data)} data-testid={testId}>
+    <div className={classes.root} ref={ref} {...addDataTestId(testId)} {...addDataAttributes(data)}>
       {/* Settings */}
       {onSettingsButtonClick !== undefined && (
         <div
           className={classes.settings}
-          onClick={!isDisabled ? onSettingsButtonClick : undefined}
           tabIndex={0}
-          data-testid={testId !== undefined ? `${testId}-settings-button` : undefined}
+          {...addDataTestId(testId, 'settings-button')}
+          onClick={!isDisabled ? onSettingsButtonClick : undefined}
         >
           <div className={classes.settingsIcon}>
             <Icon type="filter" />
@@ -104,7 +109,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
           locale={getLocale(search.localeKey ?? localeKey, search.locale, locale)}
           localeKey={search.localeKey ?? localeKey}
           isDisabled={search.isDisabled ?? isDisabled}
-          testId={testId !== undefined ? `${testId}-search` : undefined}
+          testId={getTestId(testId, 'search')}
         />
       )}
       {/* Filters */}
@@ -130,7 +135,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
             key={key as string}
             isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
             filtersPaneRef={ref}
-            testId={testId !== undefined ? `${testId}-filter-${String(key)}` : undefined}
+            testId={getTestId(testId, `filter-${String(key)}`)}
           />
         );
 

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.styles.ts

@@ -1,7 +1,9 @@
-import { colors } from '../../../../theme';
-import { ComponentStyles } from '../../../../types';
+import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { IButtonStyles } from '../../../Button';
+import { IInputStyles } from '../../../Input';
+import { innerTextButtonStyles } from '../../FiltersPane.styles';
 
-export const styles = {
+export const useStyles = createThemedStyles('FilterInterval', {
   root: {
     padding: 8,
     background: colors.CLASSIC_WHITE,
@@ -30,35 +32,29 @@ export const styles = {
     display: 'flex',
     justifyContent: 'flex-end',
   },
+});
 
-  tweakInput: {
-    input: {
-      minWidth: 120,
-    },
-
-    icon: {
-      padding: 0,
-      width: 24,
-
-      '&:last-child': {
-        paddingRight: 0,
-      },
-    },
+export const inputStyles: IInputStyles = {
+  input: {
+    minWidth: 120,
   },
 
-  tweakClearButton: {
-    text: {
-      color: colors.GREY_ACTIVE,
-
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
+  icon: {
+    padding: 0,
+    width: 24,
 
-      '&:active': {
-        color: colors.FONT_MEDIUM,
-      },
+    '&:last-child': {
+      paddingRight: 0,
     },
   },
 };
 
-export type FilterIntervalStyles = ComponentStyles<typeof styles>;
+export const clearButtonStyles = innerTextButtonStyles;
+
+export type IFilterIntervalStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakInput: IInputStyles;
+    tweakClearButton: IButtonStyles;
+  }
+>;

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.tsx

@@ -1,19 +1,23 @@
 import { FC, useMemo } from 'react';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
-import { useTheme, useTweakStyles } from '../../../../hooks';
+import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Button } from '../../../Button';
 import { NumberInput } from '../../../NumberInput';
 import { getLocale, sortValues } from '../../helpers';
 import { IFilterLocaleKey, IPartialFilterLocale } from '../../types';
-import { FilterIntervalStyles, styles } from './FilterInterval.styles';
+import {
+  useStyles,
+  IFilterIntervalStyles,
+  inputStyles,
+  clearButtonStyles,
+} from './FilterInterval.styles';
 
-export interface IFilterIntervalProps extends ICommonProps {
-  tweakStyles?: FilterIntervalStyles;
+export interface IFilterIntervalProps extends ICommonProps<IFilterIntervalStyles> {
   value?: Array<number | undefined>;
   onChange: (value?: Array<number | undefined>) => void;
   labelName: string;
-
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
   withFieldNameInLabel?: boolean;
@@ -28,7 +32,6 @@ export interface IFilterIntervalProps extends ICommonProps {
     max?: number;
     maxLength?: number;
   };
-  testId?: string;
 }
 
 export const FilterInterval: FC<IFilterIntervalProps> = ({
@@ -45,7 +48,7 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
   toInput,
   testId,
 }) => {
-  const { classes, componentStyles } = useTheme('FilterInterval', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 
@@ -69,9 +72,19 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
     onChange(sortValues([value?.[0], v]));
   };
 
-  const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'FilterInterval',
+  });
 
-  const tweakClearButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakClearButton');
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'FilterInterval',
+  });
 
   return (
     <div className={classes.root} {...addDataAttributes(data)}>
@@ -92,7 +105,7 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
             max={fromInput?.max}
             maxLength={fromInput?.maxLength}
             tweakStyles={tweakInputStyles}
-            testId={testId !== undefined ? `${testId}-start` : undefined}
+            testId={getTestId(testId, 'start')}
           />
           {withFieldNameInLabel && (
             <div className={classes.autosize}>
@@ -116,7 +129,7 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
             max={toInput?.max}
             maxLength={toInput?.maxLength}
             tweakStyles={tweakInputStyles}
-            testId={testId !== undefined ? `${testId}-end` : undefined}
+            testId={getTestId(testId, 'end')}
           />
           {withFieldNameInLabel && (
             <div className={classes.autosize}>
@@ -130,7 +143,7 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
           onClick={handleClear}
           size="s"
           view="text"
-          testId={testId !== undefined ? `${testId}-clear-button` : undefined}
+          testId={getTestId(testId, 'clear-button')}
           tweakStyles={tweakClearButtonStyles}
         >
           {translates.clear}

package/src/components/FiltersPane/components/FilterInterval/index.ts

@@ -1,2 +1,2 @@
 export * from './FilterInterval';
-export type { FilterIntervalStyles } from './FilterInterval.styles';
+export type { IFilterIntervalStyles } from './FilterInterval.styles';

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.styles.ts

@@ -1,12 +1,13 @@
-import { colors, helpers } from '../../../../theme';
-import { ComponentStyles } from '../../../../types';
+import { colors, createThemedStyles, helpers, ITweakStyles } from '../../../../theme';
+import { IButtonStyles } from '../../../Button';
+import { ISearchInputStyles } from '../../../SearchInput';
+import { innerTextButtonStyles } from '../../FiltersPane.styles';
 
 const ITEM_HEIGHT = 40;
 const LIST_GAP = 12;
 
-export const styles = {
+export const useStyles = createThemedStyles('FilterSelect', {
   root: {
-    width: ({ width }: { width: string | number }): string | number => width ?? 220,
     background: colors.CLASSIC_WHITE,
   },
 
@@ -114,30 +115,24 @@ export const styles = {
     padding: 16,
     fontSize: 14,
   },
+});
 
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        backgroundColor: 'transparent',
-        border: 'none',
-        height: 40,
-      },
-    },
-  },
-
-  tweakClearButton: {
-    text: {
-      color: colors.GREY_ACTIVE,
-
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
-
-      '&:active': {
-        color: colors.FONT_MEDIUM,
-      },
+export const searchInputStyles: ISearchInputStyles = {
+  tweakInput: {
+    inputWrapper: {
+      backgroundColor: 'transparent',
+      border: 'none',
+      height: 40,
     },
   },
 };
 
-export type FilterSelectStyles = ComponentStyles<typeof styles>;
+export const clearButtonStyles = innerTextButtonStyles;
+
+export type IFilterSelectStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakSearchInput: ISearchInputStyles;
+    tweakClearButton: IButtonStyles;
+  }
+>;