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

package/src/components/Icon/Icon.tsx

@@ -1,22 +1,21 @@
 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 { ComplexIconBoilerplate, IconBoilerplate } from './components';
 import { isComplexIcon } from './helpers';
 import { IIconType } from './types';
-import { IconStyles, styles } from './Icon.styles';
+import { useStyles, IIconStyles } from './Icon.styles';
 
-export interface IIconProps extends ICommonProps {
-  tweakStyles?: IconStyles;
+export interface IIconProps extends ICommonProps<IIconStyles> {
   type: IIconType;
 }
 
-export const Icon: FC<IIconProps> = ({ type, data, tweakStyles }) => {
-  const { classes } = useTheme('Icon', styles, tweakStyles);
+export const Icon: FC<IIconProps> = ({ type, data, testId, tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
       {isComplexIcon(type) ? (
         <ComplexIconBoilerplate type={type} />
       ) : (

package/src/components/Icon/complexIcons/augment.d.ts

@@ -1 +1 @@
-declare module '*.svg?raw';
+declare module '*.svg?raw';

package/src/components/Icon/complexIcons/avatarGreen.svg

@@ -1,58 +1,58 @@
-  <svg
-    width="100%"
-    height="100%"
-    viewBox="0 0 32 32"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
-    <mask
-      id="mask0_0_12744"
-      style="mask-type: 'alpha';"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="32"
-      height="32"
-    >
-      <circle cx="16" cy="16" r="16" fill="white" />
-    </mask>
-    <g mask="url(#mask0_0_12744)">
-      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
-      <mask
-        id="mask1_0_12744"
-        style="mask-type: 'alpha';"
-        maskUnits="userSpaceOnUse"
-        x="3"
-        y="16"
-        width="26"
-        height="26"
-      >
-        <circle cx="16" cy="29" r="13" fill="white" />
-      </mask>
-      <g mask="url(#mask1_0_12744)">
-        <ellipse
-          cx="16"
-          cy="17.5"
-          rx="6"
-          ry="7.5"
-          fill="#505F79"
-          fill-opacity="0.204983"
-        />
-      </g>
-    </g>
-    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
-    <defs>
-      <linearGradient
-        id="paint0_linear_0_12744"
-        x1="13.347"
-        y1="46.279"
-        x2="33.5318"
-        y2="30.8088"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#ABD229" />
-        <stop offset="1" stop-color="#9CD03F" />
-      </linearGradient>
-    </defs>
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle opacity="0.5" cx="16" cy="16" r="16" fill="#DDE3ED" />
+    <mask
+      id="mask0_0_12744"
+      style="mask-type: 'alpha';"
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <circle cx="16" cy="16" r="16" fill="white" />
+    </mask>
+    <g mask="url(#mask0_0_12744)">
+      <circle cx="16" cy="29" r="13" fill="url(#paint0_linear_0_12744)" />
+      <mask
+        id="mask1_0_12744"
+        style="mask-type: 'alpha';"
+        maskUnits="userSpaceOnUse"
+        x="3"
+        y="16"
+        width="26"
+        height="26"
+      >
+        <circle cx="16" cy="29" r="13" fill="white" />
+      </mask>
+      <g mask="url(#mask1_0_12744)">
+        <ellipse
+          cx="16"
+          cy="17.5"
+          rx="6"
+          ry="7.5"
+          fill="#505F79"
+          fill-opacity="0.204983"
+        />
+      </g>
+    </g>
+    <ellipse cx="16" cy="13" rx="6" ry="7" fill="white" />
+    <defs>
+      <linearGradient
+        id="paint0_linear_0_12744"
+        x1="13.347"
+        y1="46.279"
+        x2="33.5318"
+        y2="30.8088"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#ABD229" />
+        <stop offset="1" stop-color="#9CD03F" />
+      </linearGradient>
+    </defs>
   </svg>

package/src/components/Icon/complexIcons/index.ts

@@ -1 +1 @@
-export * from './icons';
+export * from './icons';

package/src/components/Icon/components/ComplexIconBoilerplate/ComplexIconBoilerplate.tsx

@@ -1,5 +1,5 @@
 import { FC, useContext, useMemo } from 'react';
-import { ThemeContext } from '../../../../hooks';
+import { ThemeContext } from '../../../../theme';
 import { complexIcons } from '../../complexIcons';
 import { IComplexIcon } from '../../types';
 

package/src/components/Icon/components/IconBolerplate/IconBoilerplate.tsx

@@ -1,5 +1,5 @@
 import { FC, useContext, useMemo } from 'react';
-import { ThemeContext } from '../../../../hooks';
+import { ThemeContext } from '../../../../theme';
 import { iconsList as commonIcons } from '../../icons-list';
 import { ICommonIcon } from '../../types';
 

package/src/components/Icon/helpers.ts

@@ -6,4 +6,4 @@ export const isComplexIcon = (type: IIconType): type is IComplexIcon => type in
 /**
  * Эта функция позволяет корректно определить ключи в типе
  */
-export const checkIcons = <P extends string>(ico: Record<P, ISvgIcon>) => ico;
+export const checkIcons = <P extends string>(ico: Record<P, ISvgIcon>): Record<P, ISvgIcon> => ico;

package/src/components/Icon/index.ts

@@ -1,4 +1,4 @@
 export * from './Icon';
 export * from './types';
 export { iconsList } from './icons-list';
-export type { IconStyles } from './Icon.styles';
+export type { IIconStyles } from './Icon.styles';

package/src/components/IncrementInput/IncrementInput.styles.ts

@@ -1,77 +1,77 @@
-import { colors, dimensions } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const BUTTONS_WIDTH = 36;
-export const BUTTONS_GAP = 2;
-
-export const styles = {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'relative',
-  },
-
-  buttons: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: BUTTONS_WIDTH,
-    position: 'absolute',
-    right: BUTTONS_GAP,
-    top: BUTTONS_GAP,
-    bottom: BUTTONS_GAP,
-    zIndex: 1,
-  },
-
-  button: {
-    width: '100%',
-    height: (dimensions.CONTROL_HEIGHT - 5) / 2,
-    border: 'none',
-    outline: 'none',
-    backgroundColor: colors.GREY_BACKGROUND,
-    transition: 'background-color 0.25s ease-in-out',
-    color: colors.FONT_MEDIUM,
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: [0, 10],
-
-    '&:hover, &:focus': {
-      backgroundColor: colors.GREY_HOVER,
-    },
-
-    '&:active': {
-      backgroundColor: colors.GREY_ACTIVE,
-    },
-
-    '&:first-child': {
-      marginBottom: 1,
-    },
-  },
-
-  disabledButton: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    color: colors.FONT_DISABLED,
-    cursor: 'default',
-
-    '&:hover': {
-      backgroundColor: colors.CLASSIC_WHITE,
-    },
-  },
-
-  errorButton: {},
-
-  tweakInput: {
-    input: {
-      '&:not($withControls)': {
-        paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
-      },
-    },
-
-    controls: {
-      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
-    },
-  },
-};
-
-export type IncrementInputStyles = ComponentStyles<typeof styles>;
+import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+
+export const BUTTONS_WIDTH = 36;
+export const BUTTONS_GAP = 2;
+
+export const useStyles = createThemedStyles('IncrementInput', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+  },
+
+  buttons: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: BUTTONS_WIDTH,
+    position: 'absolute',
+    right: BUTTONS_GAP,
+    top: BUTTONS_GAP,
+    bottom: BUTTONS_GAP,
+    zIndex: 1,
+  },
+
+  button: {
+    width: '100%',
+    height: (dimensions.CONTROL_HEIGHT - 5) / 2,
+    border: 'none',
+    outline: 'none',
+    backgroundColor: colors.GREY_BACKGROUND,
+    transition: 'background-color 0.25s ease-in-out',
+    color: colors.FONT_MEDIUM,
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: [0, 10],
+
+    '&:hover, &:focus': {
+      backgroundColor: colors.GREY_HOVER,
+    },
+
+    '&:active': {
+      backgroundColor: colors.GREY_ACTIVE,
+    },
+
+    '&:first-child': {
+      marginBottom: 1,
+    },
+  },
+
+  disabledButton: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    color: colors.FONT_DISABLED,
+    cursor: 'default',
+
+    '&:hover': {
+      backgroundColor: colors.CLASSIC_WHITE,
+    },
+  },
+
+  errorButton: {},
+});
+
+export const inputStyles: IInputStyles = {
+  input: {
+    '&:not($withControls)': {
+      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
+    },
+  },
+
+  controls: {
+    paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
+  },
+};
+
+export type IIncrementInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;

package/src/components/IncrementInput/IncrementInput.tsx

@@ -1,13 +1,16 @@
-import { FC } from 'react';
-import { isNumberInteger } from '@true-engineering/true-react-platform-helpers';
+import { FC, useEffect } from 'react';
+import clsx from 'clsx';
+import { addDataTestId, isNumberInteger } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes, getNumberInRange, getNumberLength } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
 import { INumberInputProps, NumberInput } from '../NumberInput';
-import { ChangeButton } from './components';
-import { IncrementInputStyles, styles } from './IncrementInput.styles';
+import { useStyles, IIncrementInputStyles, inputStyles } from './IncrementInput.styles';
 
-export interface IIncrementInputProps extends Omit<INumberInputProps, 'canBeFloat' | 'precision'> {
-  tweakStyles?: IncrementInputStyles;
+export interface IIncrementInputProps
+  extends Omit<INumberInputProps, 'canBeFloat' | 'precision' | 'tweakStyles'>,
+    ICommonProps<IIncrementInputStyles> {
   step?: number;
 }
 
@@ -19,14 +22,30 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
   step = 1,
   intPartPrecision,
   data,
+  testId,
   tweakStyles,
+  isDisabled,
+  isReadonly,
+  isInvalid,
   ...props
 }) => {
-  if (!isNumberInteger(step)) {
-    console.error('Параметр step должен быть целым числом');
-  }
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'IncrementInput',
+  });
 
-  const { classes, componentStyles } = useTheme('IncrementInput', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const isIncreaseDisabled =
+    isDisabled ||
+    isReadonly ||
+    (intPartPrecision !== undefined && getNumberLength((value ?? 0) + step) > intPartPrecision) ||
+    (max !== undefined && value !== undefined && value >= max);
+
+  const isDecreaseDisabled =
+    isDisabled || isReadonly || (min !== undefined && value !== undefined ? value <= min : false);
 
   const increment = (): void => {
     onChange(getNumberInRange((value ?? 0) + step, min, max));
@@ -36,12 +55,19 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
     onChange(getNumberInRange((value ?? 0) - step, min, max));
   };
 
-  const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
+  useEffect(() => {
+    if (!isNumberInteger(step)) {
+      console.error('Параметр step должен быть целым числом');
+    }
+  }, [step]);
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
       <NumberInput
         {...props}
+        isInvalid={isInvalid}
+        isDisabled={isDisabled}
+        isReadonly={isReadonly}
         min={min}
         max={max}
         intPartPrecision={intPartPrecision}
@@ -50,30 +76,28 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
         tweakStyles={tweakInputStyles}
       />
       <div className={classes.buttons}>
-        <ChangeButton
-          type="plus"
-          isButtonDisabled={
-            props.isDisabled ||
-            props.isReadonly ||
-            (intPartPrecision !== undefined &&
-              getNumberLength((value ?? 0) + step) > intPartPrecision) ||
-            (max !== undefined && value !== undefined && value >= max)
-          }
-          isInvalid={props.isInvalid}
+        <button
+          className={clsx(classes.button, {
+            [classes.disabledButton]: isIncreaseDisabled,
+            [classes.errorButton]: isInvalid,
+          })}
+          type="button"
+          disabled={isIncreaseDisabled}
           onClick={increment}
-          classes={classes}
-        />
-        <ChangeButton
-          type="minus"
-          isButtonDisabled={
-            props.isDisabled ||
-            props.isReadonly ||
-            (min !== undefined && value !== undefined ? value <= min : false)
-          }
-          isInvalid={props.isInvalid}
+        >
+          <Icon type="plus" />
+        </button>
+        <button
+          className={clsx(classes.button, {
+            [classes.disabledButton]: isDecreaseDisabled,
+            [classes.errorButton]: isInvalid,
+          })}
+          type="button"
+          disabled={isDecreaseDisabled}
           onClick={decrement}
-          classes={classes}
-        />
+        >
+          <Icon type="minus" />
+        </button>
       </div>
     </div>
   );

package/src/components/IncrementInput/index.ts

@@ -1,2 +1,2 @@
-export * from './IncrementInput';
-export type { IncrementInputStyles } from './IncrementInput.styles';
+export * from './IncrementInput';
+export type { IIncrementInputStyles } from './IncrementInput.styles';