@true-engineering/true-react-common-ui-kit 4.0.0-alpha3 → 4.0.0-alpha31

package/src/components/IncrementInput/IncrementInput.stories.tsx

@@ -26,4 +26,6 @@ Default.args = {
   isDisabled: false,
   isRequired: false,
   isReadonly: false,
+  icon: 'question',
+  isClearable: true,
 };

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

@@ -1,41 +1,44 @@
 import { animations, colors, createThemedStyles, dimensions, ITweakStyles } 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',
+export const inputStyles: IInputStyles = {
+  tweakControlWrapper: {
+    controlWrapper: {
+      '--increment-buttons-width': '36px',
+      '--increment-buttons-gap': '1px',
+      '--increment-buttons-margin': '1px',
+      '--increment-button-icon-size': '16px',
+    },
   },
+};
 
+export const useStyles = createThemedStyles('IncrementInput', {
   buttons: {
     display: 'flex',
     flexDirection: 'column',
-    width: BUTTONS_WIDTH,
-    position: 'absolute',
-    right: BUTTONS_GAP,
-    top: BUTTONS_GAP,
-    bottom: BUTTONS_GAP,
+    height: 'calc(100% - var(--increment-buttons-margin) * 2)',
+    margin: 'var(--increment-buttons-margin)',
+    gap: 'var(--increment-buttons-gap)',
+    flexShrink: 0,
+    order: 1000, // сдвигаем кнопки на самый конец
+
     zIndex: dimensions.Z_INDEX.CONTROL_FOCUS + 1,
   },
 
   button: {
-    width: '100%',
-    height: (dimensions.CONTROL.HEIGHT - 5) / 2,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 'var(--increment-buttons-width)',
+    flexGrow: 1,
+
+    cursor: 'pointer',
     border: 'none',
     outline: 'none',
+    color: colors.FONT_MEDIUM,
     backgroundColor: colors.GREY_BACKGROUND,
     transition: animations.defaultTransition,
-    transitionProperty: 'background-color',
-    color: colors.FONT_MEDIUM,
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: [0, 10],
+    transitionProperty: 'background-color, color',
 
     '&:hover, &:focus': {
       backgroundColor: colors.GREY_HOVER,
@@ -44,16 +47,12 @@ export const useStyles = createThemedStyles('IncrementInput', {
     '&:active': {
       backgroundColor: colors.GREY_ACTIVE,
     },
-
-    '&:first-child': {
-      marginBottom: 1,
-    },
   },
 
   disabledButton: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    color: colors.FONT_DISABLED,
     cursor: 'default',
+    color: colors.FONT_DISABLED,
+    backgroundColor: colors.CLASSIC_WHITE,
 
     '&:hover': {
       backgroundColor: colors.CLASSIC_WHITE,
@@ -61,18 +60,11 @@ export const useStyles = createThemedStyles('IncrementInput', {
   },
 
   errorButton: {},
-});
-
-export const inputStyles: IInputStyles = {
-  input: {
-    paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
-  },
 
-  tweakControlWrapper: {
-    controls: {
-      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
-    },
+  icon: {
+    width: 'var(--increment-button-icon-size)',
+    height: 'var(--increment-button-icon-size)',
   },
-};
+});
 
 export type IIncrementInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;

package/src/components/IncrementInput/IncrementInput.tsx

@@ -1,7 +1,7 @@
 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 { isNotEmpty, isNumberInteger } from '@true-engineering/true-react-platform-helpers';
+import { getNumberInRange, getNumberLength } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
@@ -22,8 +22,6 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
   max,
   step = 1,
   intPartPrecision,
-  data,
-  testId,
   tweakStyles,
   isDisabled,
   isReadonly,
@@ -39,14 +37,15 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
 
   const classes = useStyles({ theme: tweakStyles });
 
+  const isEditDisabled = isDisabled || isReadonly;
+
   const isIncreaseDisabled =
-    isDisabled ||
-    isReadonly ||
-    (intPartPrecision !== undefined && getNumberLength((value ?? 0) + step) > intPartPrecision) ||
-    (max !== undefined && value !== undefined && value >= max);
+    isEditDisabled ||
+    (isNotEmpty(intPartPrecision) && getNumberLength((value ?? 0) + step) > intPartPrecision) ||
+    (isNotEmpty(max) && isNotEmpty(value) && value >= max);
 
   const isDecreaseDisabled =
-    isDisabled || isReadonly || (min !== undefined && value !== undefined ? value <= min : false);
+    isEditDisabled || (isNotEmpty(min) && isNotEmpty(value) && value <= min);
 
   const increment = (): void => {
     onChange(getNumberInRange((value ?? 0) + step, min, max));
@@ -63,19 +62,18 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
   }, [step]);
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      <NumberInput
-        {...props}
-        isInvalid={isInvalid}
-        isDisabled={isDisabled}
-        isReadonly={isReadonly}
-        min={min}
-        max={max}
-        intPartPrecision={intPartPrecision}
-        onChange={onChange}
-        value={value}
-        tweakStyles={tweakInputStyles}
-      />
+    <NumberInput
+      {...props}
+      isInvalid={isInvalid}
+      isDisabled={isDisabled}
+      isReadonly={isReadonly}
+      min={min}
+      max={max}
+      intPartPrecision={intPartPrecision}
+      onChange={onChange}
+      value={value}
+      tweakStyles={tweakInputStyles}
+    >
       <div className={classes.buttons}>
         <button
           className={clsx(classes.button, {
@@ -86,8 +84,11 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
           disabled={isIncreaseDisabled}
           onClick={increment}
         >
-          <Icon type="plus" />
+          <div className={classes.icon}>
+            <Icon type="plus" />
+          </div>
         </button>
+
         <button
           className={clsx(classes.button, {
             [classes.disabledButton]: isDecreaseDisabled,
@@ -97,9 +98,11 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
           disabled={isDecreaseDisabled}
           onClick={decrement}
         >
-          <Icon type="minus" />
+          <div className={classes.icon}>
+            <Icon type="minus" />
+          </div>
         </button>
       </div>
-    </div>
+    </NumberInput>
   );
 };

package/src/components/Input/Input.stories.tsx

@@ -35,12 +35,7 @@ const Template: ComponentStory<typeof Input> = (args) => {
 
   return (
     <div style={{ width: 300 }}>
-      <Input
-        {...args}
-        value={value}
-        onChange={setValue}
-        onIconClick={() => console.log('icon click')}
-      />
+      <Input {...args} value={value} onChange={setValue} />
     </div>
   );
 };

package/src/components/Input/Input.tsx

@@ -1,10 +1,12 @@
 import { forwardRef } from 'react';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { IWithMessagesProps, WithMessages } from '../WithMessages';
 import { IInputBaseProps, InputBase } from './InputBase';
 
-export type IInputProps = IInputBaseProps &
-  Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>;
+export interface IInputProps
+  extends IInputBaseProps,
+    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {}
 
 export const Input = forwardRef<HTMLInputElement, IInputProps>(
   ({ infoMessage, errorMessage, isInvalid, testId, tweakStyles, ...inputProps }, ref) => {
@@ -17,7 +19,7 @@ export const Input = forwardRef<HTMLInputElement, IInputProps>(
       <WithMessages
         errorMessage={errorMessage}
         infoMessage={infoMessage}
-        testId={testId}
+        testId={getTestId(testId, 'wrapper')}
         tweakStyles={tweakWithMessagesStyles}
       >
         <InputBase

package/src/components/Input/InputBase.tsx

@@ -15,12 +15,12 @@ import InputMask, { Props as ReactInputMaskBaseProps } from 'react-input-mask';
 import clsx from 'clsx';
 import {
   addDataTestId,
+  isArrayLikeNotEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
-  mergeRefs,
 } from '@true-engineering/true-react-platform-helpers';
-import { useTweakStyles } from '../../hooks';
+import { useMergedRefs, useTweakStyles } from '../../hooks';
 import { IClickHandlerEvent, ICommonProps } from '../../types';
 import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
 import { IChangeInputEvent } from './types';
@@ -28,30 +28,17 @@ import { IInputStyles, useStyles } from './Input.styles';
 
 export interface IInputBaseProps
   extends ICommonProps<IInputStyles>,
+    Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'className'>,
     Pick<
       IControlWrapperProps,
       | 'label'
       | 'icon'
+      | 'size'
       | 'groupPlacement'
       | 'isInvalid'
       | 'isRequired'
       | 'isLoading'
       | 'isDisabled'
-      | 'onIconClick'
-    >,
-    Pick<
-      InputHTMLAttributes<HTMLInputElement>,
-      | 'type'
-      | 'inputMode'
-      | 'autoComplete'
-      | 'name'
-      | 'maxLength'
-      | 'tabIndex'
-      | 'placeholder'
-      | 'onFocus'
-      | 'onBlur'
-      | 'onPaste'
-      | 'onKeyDown'
     >,
     Pick<
       Partial<ReactInputMaskBaseProps>,
@@ -71,7 +58,7 @@ export interface IInputBaseProps
   isAutoSized?: boolean;
   /** @default false */
   shouldAlwaysShowPlaceholder?: boolean;
-  onChange(value: string, event: IChangeInputEvent): void;
+  onChange: (value: string, event: IChangeInputEvent) => void;
 }
 
 export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
@@ -96,6 +83,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       units,
       testId,
       tabIndex,
+      shouldAlwaysShowPlaceholder,
       onChange,
       onPaste,
       onFocus,
@@ -105,9 +93,16 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       mask,
       maskPlaceholder,
       alwaysShowMask,
-      shouldAlwaysShowPlaceholder,
       beforeMaskedStateChange,
-      ...controlProps
+      // Пропсы ControlWrapper
+      data,
+      groupPlacement,
+      icon,
+      isLoading,
+      isRequired,
+      size,
+      children,
+      ...inputProps
     },
     ref,
   ) => {
@@ -123,7 +118,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
     const [unitsWidth, setUnitsWidth] = useState<number>();
 
     const inputRef = useRef<HTMLInputElement>(null);
-    const mergedRef = mergeRefs([ref, inputRef]);
+    const mergedRef = useMergedRefs([ref, inputRef]);
 
     // Try to guess input-mode if possible
     const inputMode: IInputBaseProps['inputMode'] =
@@ -131,7 +126,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       (['email', 'tel', 'url'].includes(type) ? (type as 'email' | 'tel' | 'url') : undefined);
 
     const hasFocus = isFocused || isActive;
-    const hasValue = isNotEmpty(value) && value !== '';
+    const hasValue = isArrayLikeNotEmpty(value);
     const hasUnits = isReactNodeNotEmpty(units);
     const hasPlaceholder =
       (!isReactNodeNotEmpty(label) || hasFocus || shouldAlwaysShowPlaceholder) &&
@@ -194,7 +189,8 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       onFocus: handleFocus,
       onBlur: handleBlur,
       onChange: handleChange,
-      ...addDataTestId(testId, 'input'),
+      ...addDataTestId(testId),
+      ...inputProps,
     };
 
     useEffect(() => {
@@ -234,17 +230,23 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
         isDisabled={isDisabled}
         isFocused={hasFocus}
         isInvalid={isInvalid}
-        hasValue={hasValue || hasPlaceholder}
+        hasValue={hasValue}
         isFullWidth={!isAutoSized}
         tweakStyles={tweakControlWrapperStyles}
         onClear={isClearable && hasValue ? handleInputClear : undefined}
-        {...controlProps}
+        data={data}
+        groupPlacement={groupPlacement}
+        icon={icon}
+        isLoading={isLoading}
+        isRequired={isRequired}
+        size={size}
       >
         {hasUnits || isAutoSized ? (
           <div className={classes.autoSizeWrapper}>{inputContent}</div>
         ) : (
           inputContent
         )}
+        {children}
       </ControlWrapper>
     );
   },

package/src/components/List/List.tsx

@@ -8,7 +8,8 @@ import {
 import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { WithPopup } from '../WithPopup';
-import { IListItemProps, IListItemProps as IListItem, ListItem } from './components';
+import { IListItemProps, ListItem } from './components';
+import { IListItem } from './types';
 import { useStyles, IListStyles, withPopupStyles } from './List.styles';
 
 export interface IListProps extends ICommonProps<IListStyles> {
@@ -29,9 +30,11 @@ export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick
     }
   };
 
+  const filteredItems = items.filter(({ isHidden }) => !isHidden);
+
   return (
     <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {items.map((item, i) => {
+      {filteredItems.map((item, i) => {
         const itemProps: IListItemProps = {
           testId: getTestId(testId, `item-${i}`),
           ...item,

package/src/components/List/index.ts

@@ -1,3 +1,4 @@
 export * from './List';
 export type { IListStyles } from './List.styles';
-export { type IListItemStyles, type IListItemProps as IListItem, ListItem } from './components';
+export type { IListItem } from './types';
+export { type IListItemStyles, type IListItemProps, ListItem } from './components';

package/src/components/List/types.ts

@@ -0,0 +1,5 @@
+import { IListItemProps } from './components';
+
+export interface IListItem extends IListItemProps {
+  isHidden?: boolean;
+}

package/src/components/MultiSelectList/MultiSelectList.tsx

@@ -1,8 +1,13 @@
 import { useEffect, useState, useMemo, useRef, useCallback, ReactNode } from 'react';
 import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
-import { isArrayNotEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  getTestId,
+  isArrayNotEmpty,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useIsMounted, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Button } from '../Button';
@@ -330,7 +335,7 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
     !isLoading && (isArrayNotEmpty(allOptions) || isArrayNotEmpty(chosenValues));
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput
@@ -339,16 +344,13 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
             onChange={handleOnChange}
             tweakStyles={tweakSearchInputStyles}
             maxLength={searchMaxLength}
-            testId={testId !== undefined ? `${testId}-search` : undefined}
+            testId={getTestId(testId, 'search')}
             shouldFocusOnMount
           />
         </div>
       )}
       {shouldShowOptionsList && (
-        <div
-          className={classes.list}
-          data-testid={testId !== undefined ? `${testId}-list` : undefined}
-        >
+        <div className={classes.list} {...addDataTestId(testId, 'list')}>
           {/* Выбранные */}
           {hasSelectedOptionsGroup && (
             <>
@@ -379,8 +381,9 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
                       value={val}
                       tweakStyles={tweakCheckboxStyles}
                       labelPosition={checkboxPosition === 'left' ? 'right' : 'left'}
+                      data={{ id }}
                     >
-                      <div className={classes.option} data-option={id}>
+                      <div className={classes.option} {...addDataAttributes({ option: id })}>
                         {view}
                       </div>
                     </Checkbox>
@@ -417,8 +420,9 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
                       value={val}
                       tweakStyles={tweakCheckboxStyles}
                       labelPosition={checkboxPosition === 'left' ? 'right' : 'left'}
+                      data={{ id }}
                     >
-                      <div className={classes.option} data-option={id}>
+                      <div className={classes.option} {...addDataAttributes({ option: id })}>
                         {view}
                       </div>
                     </Checkbox>
@@ -449,7 +453,7 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
             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/NumberInput/NumberInput.stories.tsx

@@ -9,7 +9,11 @@ export default {
 
 const Template: ComponentStory<typeof NumberInput> = (args) => {
   const [value, setValue] = useState<number>();
-  return <NumberInput {...args} value={value} onChange={(v) => setValue(v)} />;
+  return (
+    <div style={{ width: 300 }}>
+      <NumberInput {...args} value={value} onChange={(v) => setValue(v)} />
+    </div>
+  );
 };
 
 export const Default = Template.bind({});

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -26,7 +26,8 @@ export default {
 const Template: ComponentStory<typeof PhoneInput> = (args) => {
   const [value, setValue] = useState<IPhoneValue>({
     dialCode: '7',
-    phoneNumber: '1234567890',
+    phoneNumber: '9134567890',
+    countryCode: 'RU',
   });
 
   return <PhoneInput {...args} value={value} onChange={setValue} />;

package/src/components/PhoneInput/PhoneInput.tsx

@@ -76,7 +76,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
 
   const countryCode = useMemo(
     () => value?.countryCode ?? getCountryCodeFromPhone(phoneWithCode),
-    [value.dialCode, value.phoneNumber],
+    [value.countryCode, value.dialCode, value.phoneNumber],
   );
 
   const handleClose = () => {
@@ -122,7 +122,10 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
     if (newPhoneInfo.countryCode !== countryCode) {
       onChange(
         {
-          phoneNumber: '',
+          phoneNumber:
+            newPhoneInfo.dialCode !== value.dialCode
+              ? ''
+              : getPhoneObjFromString(phoneWithCode).phoneNumber,
           dialCode: newPhoneInfo.dialCode,
           countryCode: newPhoneInfo.countryCode,
         },

package/src/components/SearchInput/SearchInput.tsx

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-import { getTestId } from '@true-engineering/true-react-platform-helpers';
+import { forwardRef } from 'react';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IInputProps, Input } from '../Input';
@@ -11,31 +10,23 @@ export type ISearchInputProps = Omit<
 > &
   ICommonProps<ISearchInputStyles>;
 
-export const SearchInput: FC<ISearchInputProps> = ({
-  isClearable = true,
-  placeholder,
-  value,
-  testId,
-  tweakStyles,
-  data,
-  ...props
-}) => {
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'SearchInput',
-  });
+export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(
+  ({ isClearable = true, tweakStyles, ...props }, ref) => {
+    const tweakInputStyles = useTweakStyles({
+      innerStyles: inputStyles,
+      tweakStyles,
+      className: 'tweakInput',
+      currentComponentName: 'SearchInput',
+    });
 
-  return (
-    <Input
-      value={value}
-      placeholder={placeholder}
-      icon="search"
-      isClearable={isClearable}
-      testId={getTestId(testId, 'input')}
-      tweakStyles={tweakInputStyles}
-      {...props}
-    />
-  );
-};
+    return (
+      <Input
+        ref={ref}
+        icon="search"
+        isClearable={isClearable}
+        tweakStyles={tweakInputStyles}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/Select/CustomSelect.stories.tsx

@@ -247,4 +247,5 @@ CustomSelect.args = {
   shouldScrollToList: true,
   canBeFlipped: false,
   scrollParent: 'document',
+  size: undefined,
 };

package/src/components/Select/MultiSelect.stories.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { iconsList } from '../Icon';
 import { IMultipleSelectProps, Select } from './Select';
 
 interface ObjectValue {
@@ -54,6 +55,8 @@ const objectOptions: ObjectValue[] = [
   { name: 'Artem', age: 23 },
 ];
 
+const icons = [undefined, ...Object.keys(iconsList)];
+
 // Максимум не включается, минимум включается
 const getRandomInt = (min: number, max: number) =>
   Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min))) + Math.ceil(min);
@@ -195,6 +198,7 @@ export default {
       control: 'inline-radio',
       options: ['strings', 'objects'],
     },
+    icon: { control: 'select', options: icons },
   },
 } as ComponentMeta<typeof SelectWithCustomProps>;
 
@@ -229,4 +233,5 @@ MultiSelect.args = {
   shouldScrollToList: true,
   canBeFlipped: false,
   scrollParent: 'document',
+  size: undefined,
 };