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

package/src/components/CloseButton/CloseButton.styles.ts

@@ -1,8 +1,7 @@
 import { rgba } from '../../helpers';
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles('CloseButton', {
   root: {
     width: 40,
     height: 40,
@@ -29,6 +28,6 @@ export const styles = {
       backgroundColor: rgba(colors.FONT_DISABLED, 0.5),
     },
   },
-};
+});
 
-export type CloseButtonStyles = ComponentStyles<typeof styles>;
+export type ICloseButtonStyles = ITweakStyles<typeof useStyles>;

package/src/components/CloseButton/CloseButton.tsx

@@ -1,15 +1,13 @@
 import { FC } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
-import { CloseButtonStyles, styles } from './CloseButton.styles';
+import { useStyles, ICloseButtonStyles } from './CloseButton.styles';
 
-export interface ICloseButtonProps extends ICommonProps {
-  tweakStyles?: CloseButtonStyles;
-  testId?: string;
-  onClose?: () => void;
+export interface ICloseButtonProps extends ICommonProps<ICloseButtonStyles> {
   iconType?: 'close' | 'close-large' | 'close-window';
+  onClose?(): void;
 }
 
 export const CloseButton: FC<ICloseButtonProps> = ({
@@ -19,14 +17,14 @@ export const CloseButton: FC<ICloseButtonProps> = ({
   iconType = 'close',
   onClose,
 }) => {
-  const { classes } = useTheme('CloseButton', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   return (
     <button
       type="button"
       className={classes.root}
       onClick={onClose}
-      data-testid={testId}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
     >
       <Icon type={iconType} />

package/src/components/CloseButton/index.ts

@@ -1,2 +1,2 @@
-export * from './CloseButton';
-export type { CloseButtonStyles } from './CloseButton.styles';
+export * from './CloseButton';
+export type { ICloseButtonStyles } from './CloseButton.styles';

package/src/components/Colors/Colors.stories.tsx

@@ -1,7 +1,7 @@
-import { Colors } from './Colors';
-
-export default {
-  title: 'Colors',
-};
-
-export const Default = (): JSX.Element => <Colors />;
+import { Colors } from './Colors';
+
+export default {
+  title: 'Colors',
+};
+
+export const Default = (): JSX.Element => <Colors />;

package/src/components/Colors/Colors.styles.ts

@@ -1,38 +1,36 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-
-  colorCard: {
-    width: 120,
-    border: 'solid 1px #dde3ed',
-    borderRadius: 8,
-    color: '#222a37',
-    fontSize: 14,
-    margin: 6,
-  },
-
-  color: {
-    height: 120,
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
-  },
-
-  colorName: {
-    marginBottom: 6,
-    padding: 6,
-    overflow: 'hidden',
-  },
-
-  hex: {
-    marginTop: 6,
-    textTransform: 'uppercase',
-    fontWeight: 'bold',
-    padding: [0, 6, 6],
-  },
-};
-
-export type ColorsStyles = ComponentStyles<typeof styles>;
+import { createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+
+  colorCard: {
+    width: 120,
+    border: 'solid 1px #dde3ed',
+    borderRadius: 8,
+    color: '#222a37',
+    fontSize: 14,
+    margin: 6,
+  },
+
+  color: {
+    height: 120,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+
+  colorName: {
+    marginBottom: 6,
+    padding: 6,
+    overflow: 'hidden',
+  },
+
+  hex: {
+    marginTop: 6,
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    padding: [0, 6, 6],
+  },
+});

package/src/components/Colors/Colors.tsx

@@ -1,11 +1,11 @@
 import { FC, useContext } from 'react';
-import { useTheme, ThemeContext } from '../../hooks';
-import { styles } from './Colors.styles';
+import { ThemeContext } from '../../theme';
+import { useStyles } from './Colors.styles';
 
 // TODO: А зачем нужен то этот компонент кроме как ради сторис?????? мб его толкьо в сторис оформить?
 
 export const Colors: FC = () => {
-  const { classes } = useTheme('Colors', styles);
+  const classes = useStyles();
   const { theme } = useContext(ThemeContext);
   const { colors = {} } = theme;
 

package/src/components/Colors/index.ts

@@ -1,2 +1 @@
-export * from './Colors';
-export type { ColorsStyles } from './Colors.styles';
+export * from './Colors';

package/src/components/CssBaseline/CssBaseline.styles.ts

@@ -1,15 +1,14 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  '@global html, body': {
-    fontFamily: 'Arial, sans-serif',
-    color: colors.FONT_MAIN,
-    padding: 0,
-    margin: 0,
-  },
-
-  root: {},
-};
-
-export type CssBaselineStyles = ComponentStyles<typeof styles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('CssBaseline', {
+  '@global html, body': {
+    fontFamily: 'Arial, sans-serif',
+    color: colors.FONT_MAIN,
+    padding: 0,
+    margin: 0,
+  },
+
+  root: {},
+});
+
+export type ICssBaselineStyles = ITweakStyles<typeof useStyles>;

package/src/components/CssBaseline/CssBaseline.tsx

@@ -1,15 +1,13 @@
 import { FC } from 'react';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { CssBaselineStyles, styles } from './CssBaseline.styles';
+import { useStyles, ICssBaselineStyles } from './CssBaseline.styles';
 
-export interface ICssBaselineProps extends ICommonProps {
-  tweakStyles?: CssBaselineStyles;
-}
+export type ICssBaselineProps = ICommonProps<ICssBaselineStyles>;
 
-export const CssBaseline: FC<ICssBaselineProps> = ({ data, tweakStyles }) => {
-  const { classes } = useTheme('CssBaseline', styles, tweakStyles);
+export const CssBaseline: FC<ICssBaselineProps> = ({ data, testId, tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
 
-  return <div className={classes.root} {...addDataAttributes(data)} />;
+  return <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)} />;
 };

package/src/components/CssBaseline/index.ts

@@ -1,2 +1,2 @@
-export * from './CssBaseline';
-export type { CssBaselineStyles } from './CssBaseline.styles';
+export * from './CssBaseline';
+export type { ICssBaselineStyles } from './CssBaseline.styles';

package/src/components/DateInput/DateInput.styles.ts

@@ -1,14 +1,18 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    width: '100%',
-    height: '100%',
-    cursor: 'pointer',
-    position: 'relative',
-  },
-
-  tweakInput: {},
-};
-
-export type DateInputStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+
+export const useStyles = createThemedStyles('DateInput', {
+  root: {
+    width: '100%',
+    height: '100%',
+    cursor: 'pointer',
+    position: 'relative',
+  },
+});
+
+export type IDateInputStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakInput: IInputStyles;
+  }
+>;

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/constants.ts

@@ -1,2 +1,2 @@
-export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
-export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;
+export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
+export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;

package/src/components/DateInput/index.ts

@@ -1,3 +1,3 @@
-export * from './DateInput';
-export type { DateInputStyles } from './DateInput.styles';
-export * from './constants';
+export * from './DateInput';
+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';