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

package/src/components/DateInput/DateInput.tsx

@@ -1,19 +1,21 @@
 import { FormEvent, MouseEvent, forwardRef, ChangeEvent } from 'react';
 import clsx from 'clsx';
+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 { IInputProps, Input } from '../Input';
 import { EMPTY_DATE_INPUT_VALUE, EMPTY_DATE_RANGE_INPUT_VALUE } from './constants';
-import { DateInputStyles, styles } from './DateInput.styles';
+import { useStyles, IDateInputStyles } from './DateInput.styles';
 
 export interface IDateInputProps
-  extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange'> {
+  extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange' | 'tweakStyles'>,
+    ICommonProps<IDateInputStyles> {
   date?: string;
   startDate?: string;
   endDate?: string;
   className?: string;
   isRange?: boolean;
-  tweakStyles?: DateInputStyles;
   onClick?(event: MouseEvent<HTMLDivElement>): void;
   // react-datepicker ожидает event первым аргументом
   onChange?(event: FormEvent<HTMLInputElement>, value: string): void;
@@ -31,15 +33,20 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
       data,
       isRange,
       tweakStyles,
+      testId,
       onClick,
       onChange,
       ...inputProps
     },
     ref,
   ) => {
-    const { classes, componentStyles } = useTheme('DateInput', styles, tweakStyles);
+    const classes = useStyles({ theme: tweakStyles });
 
-    const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
+    const tweakInputStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakInput',
+      currentComponentName: 'DateInput',
+    });
 
     const beforeMaskedStateChange: IInputProps['beforeMaskedStateChange'] = ({ nextState }) => {
       // Если в инпуте отсутствует введенное значение, то выставляем
@@ -63,7 +70,12 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
     };
 
     return (
-      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
+      <div
+        className={clsx(classes.root, className)}
+        onClick={onClick}
+        {...addDataTestId(testId)}
+        {...addDataAttributes(data)}
+      >
         <Input
           {...inputProps}
           ref={ref}
@@ -72,6 +84,7 @@ export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
           placeholder={
             placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
           }
+          testId={getTestId(testId, 'input')}
           tweakStyles={tweakInputStyles}
           onChange={handleChange}
           beforeMaskedStateChange={beforeMaskedStateChange}

package/src/components/DateInput/index.ts

@@ -1,3 +1,3 @@
 export * from './DateInput';
-export type { DateInputStyles } from './DateInput.styles';
+export type { IDateInputStyles } from './DateInput.styles';
 export * from './constants';

package/src/components/DatePicker/DatePicker.styles.ts

@@ -1,12 +1,7 @@
-import { ComponentStyles } from '../../types';
-import type { IDatePickerProps } from './DatePicker';
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IDateInputStyles } from '../DateInput';
 
-export interface IDatePickerStyleProps {
-  topPosition: NonNullable<IDatePickerProps['topPosition']>;
-  leftPosition: NonNullable<IDatePickerProps['leftPosition']>;
-}
-
-export const styles = {
+export const useStyles = createThemedStyles('DatePicker', {
   root: {
     width: '100%',
     height: '100%',
@@ -18,8 +13,6 @@ export const styles = {
 
   popper: {
     zIndex: 10,
-    marginTop: ({ topPosition }: IDatePickerStyleProps): number => topPosition,
-    marginLeft: ({ leftPosition }: IDatePickerStyleProps): number => leftPosition,
 
     '&[data-placement^="bottom"]': {
       paddingTop: 6,
@@ -37,8 +30,9 @@ export const styles = {
       paddingLeft: 6,
     },
   },
+});
 
-  tweakDateInput: {},
-};
-
-export type DatePickerStyles = ComponentStyles<typeof styles, IDatePickerStyleProps>;
+export type IDatePickerStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakDateInput: IDateInputStyles }
+>;

package/src/components/DatePicker/DatePicker.tsx

@@ -4,25 +4,25 @@ import 'react-datepicker/dist/react-datepicker.css';
 import clsx from 'clsx';
 import { isAfter, isBefore, isValid } from 'date-fns';
 import {
+  addDataTestId,
   isEmpty,
   isNotEmpty,
   isStringNotEmpty,
 } 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 { DateInput, EMPTY_DATE_INPUT_VALUE, IDateInputProps } from '../DateInput';
 import { DatePickerHeader, PopperContainer } from './components';
 import { DatePickerComponent, DEFAULT_DATE_FORMAT } from './constants';
 import { areDatesEquals, getDateFormatter, getDateValueParser } from './helpers';
 import { IDatePickerBaseProps, IRange } from './types';
-import { DatePickerStyles, styles } from './DatePicker.styles';
+import { useStyles, IDatePickerStyles } from './DatePicker.styles';
 
-export interface IDatePickerProps extends IDatePickerBaseProps {
+export interface IDatePickerProps extends IDatePickerBaseProps, ICommonProps<IDatePickerStyles> {
   selectedDate?: Date | null;
   locale: Locale;
   months?: string[];
-  topPosition?: number;
-  leftPosition?: number;
   /**
    * @default `dd.MM.yyyy`
    */
@@ -32,15 +32,15 @@ export interface IDatePickerProps extends IDatePickerBaseProps {
   isInline?: boolean;
   shouldRenderPopperInBody?: boolean;
   customInput?: FC<IDateInputProps>;
-  tweakStyles?: DatePickerStyles;
-  onChangeDate?: (date: Date | null, event?: SyntheticEvent) => void;
-  onChangeRange?: (date: IRange, event?: SyntheticEvent) => void;
+  onChangeDate?(date: Date | null, event?: SyntheticEvent): void;
+  onChangeRange?(date: IRange, event?: SyntheticEvent): void;
 }
 
 export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
   (
     {
       data,
+      testId,
       selectedDate = null,
       minDate,
       maxDate,
@@ -48,8 +48,6 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       startDate = null,
       locale,
       months,
-      topPosition = 0,
-      leftPosition = 0,
       calendarStartDay = 1,
       dateFormat = DEFAULT_DATE_FORMAT,
       monthsShown,
@@ -89,12 +87,13 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
     },
     ref,
   ) => {
-    const { classes, componentStyles } = useTheme('DatePicker', styles, tweakStyles, {
-      leftPosition,
-      topPosition,
-    });
+    const classes = useStyles({ theme: tweakStyles });
 
-    const tweakDateInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakDateInput');
+    const tweakDateInputStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakDateInput',
+      currentComponentName: 'DatePicker',
+    });
 
     const { formatDate, parseDateValue } = useMemo(
       () => ({
@@ -235,7 +234,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
     }, [selectedDate, startDate, endDate]);
 
     return (
-      <div className={classes.root} {...addDataAttributes(data)}>
+      <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
         <DatePickerComponent
           ref={ref}
           minDate={minDate}

package/src/components/DatePicker/components/DatePickerHeader/DatePickerHeader.styles.ts

@@ -1,9 +1,10 @@
-import { ComponentStyles } from '../../../../types';
+import { ITweakStyles, createThemedStyles } from '../../../../theme';
+import { ISelectStyles } from '../../../Select';
 
 const SELECT_PADDING_LEFT = 12;
 const SELECT_PADDING_RIGHT = 24;
 
-export const styles = {
+export const useStyles = createThemedStyles('DatePickerHeader', {
   btn: {
     width: 36,
     height: 36,
@@ -49,36 +50,39 @@ export const styles = {
     flexShrink: 0,
     marginLeft: 'auto',
   },
+});
 
-  tweakSelect: {
-    list: {
-      cell: {
-        fontSize: 14,
-        minHeight: 35,
-      },
+export const selectStyles: ISelectStyles = {
+  tweakSelectList: {
+    cell: {
+      fontSize: 14,
+      minHeight: 35,
     },
+  },
 
-    arrow: {
-      right: 0,
-      top: 9,
-      width: 16,
-      height: 16,
-    },
+  arrow: {
+    right: 0,
+    top: 9,
+    width: 16,
+    height: 16,
+  },
 
-    tweakInput: {
-      inputWrapper: {
-        height: 35,
-        border: 'none',
-      },
+  tweakInput: {
+    inputWrapper: {
+      height: 35,
+      border: 'none',
+    },
 
-      input: {
-        fontSize: 16,
-        fontWeight: 'bold',
-        paddingRight: SELECT_PADDING_RIGHT - 8,
-        paddingLeft: SELECT_PADDING_LEFT,
-      },
+    input: {
+      fontSize: 16,
+      fontWeight: 'bold',
+      paddingRight: SELECT_PADDING_RIGHT - 8,
+      paddingLeft: SELECT_PADDING_LEFT,
     },
   },
 };
 
-export type DatePickerHeaderStyles = ComponentStyles<typeof styles>;
+export type IDatePickerHeaderStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakSelect: ISelectStyles }
+>;

package/src/components/DatePicker/components/DatePickerHeader/DatePickerHeader.tsx

@@ -1,19 +1,22 @@
 import { FC, useMemo } from 'react';
 import { ReactDatePickerCustomHeaderProps as BaseProps } from 'react-datepicker';
 import { getYear, getMonth } from 'date-fns';
-import { useTheme } from '../../../../hooks';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
 import { Select } from '../../../Select';
-import { DatePickerHeaderStyles, styles } from './DatePickerHeader.styles';
+import { useStyles, IDatePickerHeaderStyles, selectStyles } from './DatePickerHeader.styles';
 
-export interface IDatePickerHeaderProps extends BaseProps {
+export interface IDatePickerHeaderProps
+  extends BaseProps,
+    Pick<ICommonProps<IDatePickerHeaderStyles>, 'tweakStyles'> {
   months?: string[];
-  tweakStyles?: DatePickerHeaderStyles;
 }
 
 export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
   date,
   months = [],
+  tweakStyles,
   prevMonthButtonDisabled,
   nextMonthButtonDisabled,
   changeYear,
@@ -21,7 +24,14 @@ export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
   decreaseMonth,
   increaseMonth,
 }) => {
-  const { classes, componentStyles } = useTheme('DatePickerHeader', styles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakSelectStyles = useTweakStyles({
+    innerStyles: selectStyles,
+    tweakStyles,
+    className: 'tweakSelect',
+    currentComponentName: 'DatePickerHeader',
+  });
 
   const years = useMemo(
     () => Array.from(Array(41)).map((_, i) => getYear(new Date()) - 30 + i),
@@ -37,7 +47,7 @@ export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
             value={months[getMonth(date)]}
             options={months}
             dropdownIcon="chevron-down-small"
-            tweakStyles={componentStyles.tweakSelect}
+            tweakStyles={tweakSelectStyles}
             onChange={(value) => changeMonth(months.indexOf(value as string))}
           />
         </div>
@@ -49,7 +59,7 @@ export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
             value={getYear(date)}
             options={years}
             dropdownIcon="chevron-down-small"
-            tweakStyles={componentStyles.tweakSelect}
+            tweakStyles={tweakSelectStyles}
             onChange={(value) => changeYear(value as number)}
           />
         </div>

package/src/components/DatePicker/components/DatePickerHeader/index.ts

@@ -1,2 +1,2 @@
 export * from './DatePickerHeader';
-export type { DatePickerHeaderStyles } from './DatePickerHeader.styles';
+export type { IDatePickerHeaderStyles } from './DatePickerHeader.styles';

package/src/components/DatePicker/index.ts

@@ -1,4 +1,4 @@
 export * from './DatePicker';
 export * from './types';
-export type { DatePickerStyles } from './DatePicker.styles';
-export type { DatePickerHeaderStyles } from './components';
+export type { IDatePickerStyles } from './DatePicker.styles';
+export type { IDatePickerHeaderStyles } from './components';

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

@@ -1,7 +1,6 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles('Description', {
   root: {},
 
   button: {
@@ -26,6 +25,6 @@ export const styles = {
       color: colors.FONT_MAIN,
     },
   },
-};
+});
 
-export type DescriptionStyles = ComponentStyles<typeof styles>;
+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 type { IDescriptionStyles } from './Description.styles';

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

@@ -1,9 +1,9 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IButtonStyles } from '../Button';
 
 export const FILTER_HEIGHT = 36;
 
-export const styles = {
+export const useStyles = createThemedStyles('FiltersPane', {
   root: {
     display: 'flex',
     flexWrap: 'wrap',
@@ -39,33 +39,49 @@ export const styles = {
     gap: 16,
     minWidth: 0,
   },
+});
 
-  // TODO: удалить когда появятся текстовые кнопки
-  tweakClearButton: {
-    s: {
-      paddingLeft: 0,
-      paddingRight: 0,
-      minWidth: 'unset',
+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,
     },
 
-    text: {
+    '&:hover, &:focus, &:active': {
       background: 'none',
-      color: colors.GREY_ACTIVE,
+      borderColor: 'transparent',
+    },
+  },
+};
 
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
+export const innerTextButtonStyles: IButtonStyles = {
+  text: {
+    color: colors.GREY_ACTIVE,
 
-      '&:active': {
-        color: colors.FONT_MAIN,
-      },
+    '&:hover, &:focus': {
+      color: colors.FONT_MEDIUM,
+    },
 
-      '&:hover, &:focus, &:active': {
-        background: 'none',
-        borderColor: 'transparent',
-      },
+    '&:active': {
+      color: colors.FONT_MEDIUM,
     },
   },
 };
 
-export type FiltersPaneStyles = ComponentStyles<typeof styles>;
+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)}`)}
           />
         );