@true-engineering/true-react-common-ui-kit 4.0.0-alpha5 → 4.0.0-alpha51

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

@@ -1,83 +1,52 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { iconsList } from '../Icon';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { GROUP_PLACEMENTS } from '../ControlWrapper';
+import { iconsMap } from '../Icon';
 import { IInputProps, Input } from './Input';
 
 const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
-const groupPositions = [
-  undefined,
-  'top',
-  'bottom',
-  'top-left',
-  'top-right',
-  'bottom-left',
-  'bottom-right',
-  'left',
-  'right',
-  'middle',
-];
+
 const masks = [undefined, '99/99', 'aaa-aaa', '***+***'];
-const icons = [undefined, ...Object.keys(iconsList)];
 
-export default {
-  title: 'Inputs/Input',
-  component: Input,
-  argTypes: {
-    type: { control: 'radio', options: types },
-    icon: { control: 'select', options: icons },
-    mask: { control: 'select', options: masks },
-    groupPositions: { control: 'select', options: groupPositions },
-  },
-};
+const icons = [undefined, ...Object.keys(iconsMap)];
 
-const Template: ComponentStory<typeof Input> = (args) => {
+const Story: FC<IInputProps> = (args) => {
   const [value, setValue] = useState('');
-
   return (
     <div style={{ width: 300 }}>
-      <Input
-        {...args}
-        value={value}
-        onChange={setValue}
-        onIconClick={() => console.log('icon click')}
-      />
+      <Input {...args} value={value} onChange={setValue} />
     </div>
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  infoMessage: 'Message Info',
-  type: 'text',
-  isInvalid: false,
-  units: '',
-  errorMessage: 'Error Text',
-  isActive: false,
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
-  isClearable: false,
-  isLoading: false,
-  isAutoSized: false,
-  shouldAlwaysShowPlaceholder: false,
-  groupPlacement: undefined,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'testId',
-      'data',
-      'tabIndex',
-      'onChange',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onKeyDown',
-      'onIconClick',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/Input',
+  component: Story,
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    infoMessage: 'Message Info',
+    type: 'text',
+    isInvalid: false,
+    units: '',
+    errorMessage: 'Error Text',
+    isActive: false,
+    isDisabled: false,
+    isRequired: false,
+    isReadonly: false,
+    isClearable: false,
+    isLoading: false,
+    isAutoSized: false,
+    shouldAlwaysShowPlaceholder: false,
+    groupPlacement: undefined,
+  },
+  argTypes: {
+    type: { control: 'radio', options: types },
+    icon: { control: 'select', options: icons },
+    mask: { control: 'select', options: masks },
+    groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/Input/Input.styles.ts

@@ -43,6 +43,10 @@ export const useStyles = createThemedStyles('Input', {
       },
   },
 
+  defaultWrapper: {
+    display: 'contents',
+  },
+
   autoSizeWrapper: {
     position: 'relative',
     display: 'flex',

package/src/components/Input/Input.tsx

@@ -4,8 +4,9 @@ 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) => {

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, eventType: 'change' | 'clear') => 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,14 +126,14 @@ 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) &&
       isStringNotEmpty(placeholder);
 
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-      onChange(event.currentTarget.value, event);
+      onChange(event.currentTarget.value, event, 'change');
     };
 
     const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
@@ -154,7 +149,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
     // для SmartInput нужен event, иначе onChange не вызовется
     const handleInputClear = async (event: IClickHandlerEvent) => {
       // await не убирать (важно для порядка выполнения (сначала onChange, затем focus)
-      await onChange('', event);
+      await onChange('', event, 'clear');
       inputRef.current?.focus();
     };
 
@@ -195,6 +190,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       onBlur: handleBlur,
       onChange: handleChange,
       ...addDataTestId(testId),
+      ...inputProps,
     };
 
     useEffect(() => {
@@ -204,47 +200,50 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       }
     }, []);
 
-    const inputContent = (
-      <>
-        {isNotEmpty(mask) ? (
-          <InputMask
-            ref={mergedRef as unknown as MutableRefObject<InputMask>}
-            mask={mask}
-            maskPlaceholder={maskPlaceholder}
-            alwaysShowMask={alwaysShowMask}
-            beforeMaskedStateChange={beforeMaskedStateChange}
-            {...props}
-          />
-        ) : (
-          <input ref={mergedRef} {...props} />
-        )}
-
-        {(hasUnits || isAutoSized) && <div className={classes.fakeValue}>{value}</div>}
-        {hasUnits && hasValue && (
-          <div className={classes.units} ref={unitsRef}>
-            {units}
-          </div>
-        )}
-      </>
-    );
-
     return (
       <ControlWrapper
         label={label}
         isDisabled={isDisabled}
         isFocused={hasFocus}
+        isActive={hasPlaceholder}
         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
-        )}
+        <div
+          className={clsx(classes.defaultWrapper, {
+            [classes.autoSizeWrapper]: hasUnits || isAutoSized,
+          })}
+        >
+          {isNotEmpty(mask) ? (
+            <InputMask
+              ref={mergedRef as unknown as MutableRefObject<InputMask>}
+              mask={mask}
+              maskPlaceholder={maskPlaceholder}
+              alwaysShowMask={alwaysShowMask}
+              beforeMaskedStateChange={beforeMaskedStateChange}
+              {...props}
+            />
+          ) : (
+            <input ref={mergedRef} {...props} />
+          )}
+
+          {(hasUnits || isAutoSized) && <div className={classes.fakeValue}>{value}</div>}
+          {hasUnits && hasValue && (
+            <div className={classes.units} ref={unitsRef}>
+              {units}
+            </div>
+          )}
+        </div>
+        {children}
       </ControlWrapper>
     );
   },

package/src/components/List/List.stories.tsx

@@ -1,13 +1,15 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { colors } from '../../theme';
-import { List } from './List';
+import { IListProps, List } from './List';
 import { IListItemProps as IListItem } from './components';
 
 const listItems: IListItem[] = [
   {
     item: 'Печатать билет',
     onClick: console.log,
-    icon: 'sign-out',
+    icon: 'filter',
   },
   { item: 'Выписать', onClick: console.log, withIconGap: true },
   {
@@ -62,20 +64,7 @@ const listItems: IListItem[] = [
   },
 ];
 
-export default {
-  title: 'Data Display/List',
-  component: List,
-  args: {
-    items: listItems,
-  },
-  parameters: {
-    controls: {
-      exclude: ['data', 'tweakStyles', 'testId', 'onClick'],
-    },
-  },
-} as ComponentMeta<typeof List>;
-
-export const Default: ComponentStory<typeof List> = (args) => (
+const Story: FC<IListProps> = (args) => (
   <div
     style={{
       border: '1px dotted rgba(0,0,0,.2)',
@@ -88,3 +77,19 @@ export const Default: ComponentStory<typeof List> = (args) => (
     <List {...args} />
   </div>
 );
+
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/List',
+  component: Story,
+  args: {
+    items: listItems,
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['items']),
+    },
+  },
+};
+
+export default meta;
+export const Default = {};

package/src/components/List/List.styles.ts

@@ -1,4 +1,4 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
 import { IWithPopupStyles } from '../WithPopup';
 
 export const useStyles = createThemedStyles('List', {
@@ -8,6 +8,7 @@ export const useStyles = createThemedStyles('List', {
     padding: [8, 0],
     listStyle: 'none',
     margin: 0,
+    textAlign: 'left',
   },
 
   nestedItems: {

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;
+}