@true-engineering/true-react-common-ui-kit 4.0.0-alpha6 → 4.0.0-alpha62

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,19 @@ import { IInputStyles, useStyles } from './Input.styles';
 
 export interface IInputBaseProps
   extends ICommonProps<IInputStyles>,
+    Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'className'>,
     Pick<
       IControlWrapperProps,
       | 'label'
       | 'icon'
+      | 'endIcon'
+      | 'startIcon'
+      | '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,141 +60,171 @@ 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>(
-  (
-    {
-      value = '',
-      placeholder,
-      label,
-      type = 'text',
-      isDisabled,
-      autoComplete,
-      inputMode: initialInputMode,
-      isReadonly,
-      isInvalid,
-      isActive,
-      isClearable,
-      isAutoSized,
-      name,
-      tweakStyles,
-      maxLength,
-      shouldFocusOnMount,
-      units,
-      testId,
-      tabIndex,
-      onChange,
-      onPaste,
-      onFocus,
-      onBlur,
-      onKeyDown,
-      // Пропсы react-input-mask
-      mask,
-      maskPlaceholder,
-      alwaysShowMask,
-      shouldAlwaysShowPlaceholder,
-      beforeMaskedStateChange,
-      ...controlProps
+export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(function InputBase(
+  {
+    value = '',
+    placeholder,
+    label,
+    type = 'text',
+    isDisabled,
+    autoComplete,
+    inputMode: initialInputMode,
+    isReadonly,
+    isInvalid,
+    isActive,
+    isClearable,
+    isAutoSized,
+    name,
+    tweakStyles,
+    maxLength,
+    shouldFocusOnMount,
+    units,
+    testId,
+    tabIndex,
+    shouldAlwaysShowPlaceholder,
+    onChange,
+    onPaste,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    // Пропсы react-input-mask
+    mask,
+    maskPlaceholder,
+    alwaysShowMask,
+    beforeMaskedStateChange,
+    // Пропсы ControlWrapper
+    data,
+    groupPlacement,
+    startIcon,
+    icon,
+    endIcon = icon,
+    isLoading,
+    isRequired,
+    size,
+    children,
+    ...inputProps
+  },
+  ref,
+) {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakControlWrapperStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakControlWrapper',
+    currentComponentName: 'Input',
+  });
+
+  const [isFocused, setFocused] = useState(false);
+  const [unitsWidth, setUnitsWidth] = useState<number>();
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const mergedRef = useMergedRefs([ref, inputRef]);
+
+  // Try to guess input-mode if possible
+  const inputMode: IInputBaseProps['inputMode'] =
+    initialInputMode ??
+    (['email', 'tel', 'url'].includes(type) ? (type as 'email' | 'tel' | 'url') : undefined);
+
+  const hasFocus = isFocused || isActive;
+  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, 'change');
+  };
+
+  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    setFocused(false);
+    onBlur?.(event);
+  };
+
+  // для SmartInput нужен event, иначе onChange не вызовется
+  const handleInputClear = async (event: IClickHandlerEvent) => {
+    // await не убирать (важно для порядка выполнения (сначала onChange, затем focus)
+    await onChange('', event, 'clear');
+    inputRef.current?.focus();
+  };
+
+  const unitsRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      setUnitsWidth(node?.clientWidth);
     },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const tweakControlWrapperStyles = useTweakStyles({
-      tweakStyles,
-      className: 'tweakControlWrapper',
-      currentComponentName: 'Input',
-    });
-
-    const [isFocused, setFocused] = useState(false);
-    const [unitsWidth, setUnitsWidth] = useState<number>();
-
-    const inputRef = useRef<HTMLInputElement>(null);
-    const mergedRef = mergeRefs([ref, inputRef]);
-
-    // Try to guess input-mode if possible
-    const inputMode: IInputBaseProps['inputMode'] =
-      initialInputMode ??
-      (['email', 'tel', 'url'].includes(type) ? (type as 'email' | 'tel' | 'url') : undefined);
-
-    const hasFocus = isFocused || isActive;
-    const hasValue = isNotEmpty(value) && value !== '';
-    const hasUnits = isReactNodeNotEmpty(units);
-    const hasPlaceholder =
-      (!isReactNodeNotEmpty(label) || hasFocus || shouldAlwaysShowPlaceholder) &&
-      isStringNotEmpty(placeholder);
-
-    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-      onChange(event.currentTarget.value, event);
-    };
-
-    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {
-      setFocused(true);
-      onFocus?.(event);
-    };
-
-    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-      setFocused(false);
-      onBlur?.(event);
-    };
-
-    // для SmartInput нужен event, иначе onChange не вызовется
-    const handleInputClear = async (event: IClickHandlerEvent) => {
-      // await не убирать (важно для порядка выполнения (сначала onChange, затем focus)
-      await onChange('', event);
+    [units],
+  );
+
+  const props: InputHTMLAttributes<HTMLInputElement> = {
+    className: clsx(classes.input, {
+      [classes.withUnits]: hasUnits,
+      [classes.withValue]: hasValue,
+      [classes.withLabel]: isReactNodeNotEmpty(label),
+      [classes.autoSized]: isAutoSized,
+      [classes.focusedInput]: isFocused,
+      [classes.disabledInput]: isDisabled,
+      [classes.invalidInput]: isInvalid,
+    }),
+    style:
+      hasUnits && hasValue ? ({ '--units-width': `${unitsWidth}px` } as CSSProperties) : undefined,
+    value,
+    type,
+    autoComplete,
+    inputMode,
+    disabled: isDisabled,
+    placeholder: hasPlaceholder ? placeholder : undefined,
+    name,
+    maxLength,
+    readOnly: isReadonly,
+    tabIndex,
+    onKeyDown,
+    onPaste,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    ...addDataTestId(testId),
+    ...inputProps,
+  };
+
+  useEffect(() => {
+    // It works much better than autoFocus for mobile devices
+    if (shouldFocusOnMount) {
       inputRef.current?.focus();
-    };
-
-    const unitsRef = useCallback(
-      (node: HTMLDivElement | null) => {
-        setUnitsWidth(node?.clientWidth);
-      },
-      [units],
-    );
-
-    const props: InputHTMLAttributes<HTMLInputElement> = {
-      className: clsx(classes.input, {
-        [classes.withUnits]: hasUnits,
-        [classes.withValue]: hasValue,
-        [classes.withLabel]: isReactNodeNotEmpty(label),
-        [classes.autoSized]: isAutoSized,
-        [classes.focusedInput]: isFocused,
-        [classes.disabledInput]: isDisabled,
-        [classes.invalidInput]: isInvalid,
-      }),
-      style:
-        hasUnits && hasValue
-          ? ({ '--units-width': `${unitsWidth}px` } as CSSProperties)
-          : undefined,
-      value,
-      type,
-      autoComplete,
-      inputMode,
-      disabled: isDisabled,
-      placeholder: hasPlaceholder ? placeholder : undefined,
-      name,
-      maxLength,
-      readOnly: isReadonly,
-      tabIndex,
-      onKeyDown,
-      onPaste,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onChange: handleChange,
-      ...addDataTestId(testId),
-    };
-
-    useEffect(() => {
-      // It works much better than autoFocus for mobile devices
-      if (shouldFocusOnMount) {
-        inputRef.current?.focus();
-      }
-    }, []);
-
-    const inputContent = (
-      <>
+    }
+  }, [shouldFocusOnMount]);
+
+  return (
+    <ControlWrapper
+      label={label}
+      isDisabled={isDisabled}
+      isFocused={hasFocus}
+      isActive={hasPlaceholder}
+      isInvalid={isInvalid}
+      hasValue={hasValue}
+      isFullWidth={!isAutoSized}
+      tweakStyles={tweakControlWrapperStyles}
+      onClear={isClearable && hasValue ? handleInputClear : undefined}
+      data={data}
+      groupPlacement={groupPlacement}
+      startIcon={startIcon}
+      endIcon={endIcon}
+      isLoading={isLoading}
+      isRequired={isRequired}
+      size={size}
+    >
+      <div
+        className={clsx(classes.defaultWrapper, {
+          [classes.autoSizeWrapper]: hasUnits || isAutoSized,
+        })}
+      >
         {isNotEmpty(mask) ? (
           <InputMask
             ref={mergedRef as unknown as MutableRefObject<InputMask>}
@@ -225,27 +244,8 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
             {units}
           </div>
         )}
-      </>
-    );
-
-    return (
-      <ControlWrapper
-        label={label}
-        isDisabled={isDisabled}
-        isFocused={hasFocus}
-        isInvalid={isInvalid}
-        hasValue={hasValue || hasPlaceholder}
-        isFullWidth={!isAutoSized}
-        tweakStyles={tweakControlWrapperStyles}
-        onClear={isClearable && hasValue ? handleInputClear : undefined}
-        {...controlProps}
-      >
-        {hasUnits || isAutoSized ? (
-          <div className={classes.autoSizeWrapper}>{inputContent}</div>
-        ) : (
-          inputContent
-        )}
-      </ControlWrapper>
-    );
-  },
-);
+      </div>
+      {children}
+    </ControlWrapper>
+  );
+});

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

@@ -1,13 +1,23 @@
-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 { IExtendableProps } from '../../types';
+import { IListProps, List } from './List';
 import { IListItemProps as IListItem } from './components';
 
+const SIZES = ['micro'] as const;
+
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface IListSizes extends IExtendableProps<typeof SIZES> {}
+}
+
 const listItems: IListItem[] = [
   {
     item: 'Печатать билет',
     onClick: console.log,
-    icon: 'sign-out',
+    icon: 'filter',
   },
   { item: 'Выписать', onClick: console.log, withIconGap: true },
   {
@@ -62,20 +72,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 +85,23 @@ export const Default: ComponentStory<typeof List> = (args) => (
     <List {...args} />
   </div>
 );
+
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/List',
+  component: Story,
+  args: {
+    items: listItems,
+    size: undefined,
+  },
+  argTypes: {
+    size: { options: [undefined, ...SIZES], control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['items']),
+    },
+  },
+};
+
+export default meta;
+export const Default = {};

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

@@ -1,5 +1,6 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
 import { IWithPopupStyles } from '../WithPopup';
+import { IListSizes } from './types';
 
 export const useStyles = createThemedStyles('List', {
   root: {
@@ -8,6 +9,7 @@ export const useStyles = createThemedStyles('List', {
     padding: [8, 0],
     listStyle: 'none',
     margin: 0,
+    textAlign: 'left',
   },
 
   nestedItems: {
@@ -22,4 +24,4 @@ export const withPopupStyles: IWithPopupStyles = {
   },
 };
 
-export type IListStyles = ITweakStyles<typeof useStyles>;
+export type IListStyles = ITweakStyles<typeof useStyles, IListSizes>;

package/src/components/List/List.tsx

@@ -1,22 +1,24 @@
 import { FC, Fragment, KeyboardEvent, MouseEvent } from 'react';
+import clsx from 'clsx';
 import {
-  addDataTestId,
+  addDataAttributes,
   getTestId,
   isArrayNotEmpty,
   isNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-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, IListSize } from './types';
 import { useStyles, IListStyles, withPopupStyles } from './List.styles';
 
 export interface IListProps extends ICommonProps<IListStyles> {
   items: IListItem[];
+  size?: IListSize;
   onClick?: (event: MouseEvent | KeyboardEvent) => void;
 }
 
-export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick }) => {
+export const List: FC<IListProps> = ({ items, size, testId, data, tweakStyles, onClick }) => {
   const classes = useStyles({ theme: tweakStyles });
 
   const handleItemClick = (
@@ -29,11 +31,17 @@ 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) => {
+    <div
+      className={clsx(classes.root, isNotEmpty(size) && classes[size])}
+      {...addDataAttributes(data, testId)}
+    >
+      {filteredItems.map((item, i) => {
         const itemProps: IListItemProps = {
           testId: getTestId(testId, `item-${i}`),
+          size,
           ...item,
           shouldDrawSpacerAbove: item.shouldDrawSpacerAbove && i !== 0,
           shouldDrawSpacerBelow: item.shouldDrawSpacerBelow && i !== items.length - 1,
@@ -54,7 +62,7 @@ export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick
                 )}
               >
                 <div className={classes.nestedItems}>
-                  <List items={item.nestedItems} onClick={onClick} />
+                  <List items={item.nestedItems} size={size} onClick={onClick} />
                 </div>
               </WithPopup>
             ) : (

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

@@ -1,4 +1,5 @@
 import { animations, colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import type { IListSizes as IListItemSizes } from '../../types';
 
 const ITEM_HORIZONTAL_PADDING = 16;
 const ICON_SIZE = 20;
@@ -49,4 +50,4 @@ export const useStyles = createThemedStyles('ListItem', {
   },
 });
 
-export type IListItemStyles = ITweakStyles<typeof useStyles>;
+export type IListItemStyles = ITweakStyles<typeof useStyles, IListItemSizes>;

package/src/components/List/components/ListItem/ListItem.tsx

@@ -2,13 +2,14 @@ import { FC, MouseEvent, KeyboardEvent, ReactNode } from 'react';
 import clsx from 'clsx';
 import {
   addClickHandler,
-  addDataTestId,
+  addDataAttributes,
   isArrayNotEmpty,
+  isNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
 import { ICommonProps } from '../../../../types';
 import { renderIcon, IIcon, Icon } from '../../../Icon';
+import type { IListSize as IListItemSize } from '../../types';
 import { useStyles, IListItemStyles } from './ListItem.styles';
 
 export interface IListItemProps extends ICommonProps<IListItemStyles> {
@@ -16,6 +17,7 @@ export interface IListItemProps extends ICommonProps<IListItemStyles> {
   view?: 'default' | 'destructive';
   icon?: IIcon;
   nestedItems?: IListItemProps[];
+  size?: IListItemSize;
   isFocused?: boolean;
   disabled?: boolean;
   shouldDrawSpacerAbove?: boolean;
@@ -28,6 +30,7 @@ export const ListItem: FC<IListItemProps> = ({
   icon,
   item,
   nestedItems,
+  size,
   disabled: isDisabled,
   isFocused,
   shouldDrawSpacerAbove,
@@ -45,14 +48,13 @@ export const ListItem: FC<IListItemProps> = ({
     <>
       {shouldDrawSpacerAbove && <div className={classes.spacer} />}
       <div
-        className={clsx(classes.root, classes[view], {
+        className={clsx(classes.root, classes[view], isNotEmpty(size) && classes[size], {
           [classes.disabledItem]: isDisabled,
           [classes.withIconGap]: withIconGap,
           [classes.focused]: isFocused,
         })}
         {...addClickHandler(onClick, !isDisabled)}
-        {...addDataTestId(testId)}
-        {...addDataAttributes({ ...data, disabled: isDisabled ? true : undefined })}
+        {...addDataAttributes({ ...data, disabled: isDisabled ? true : undefined }, testId)}
       >
         {isReactNodeNotEmpty(icon) && <span className={classes.icon}>{renderIcon(icon)}</span>}
         <span className={classes.content}>{item}</span>

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 * from './types';
+export { type IListItemStyles, type IListItemProps, ListItem } from './components';

package/src/components/List/types.ts

@@ -0,0 +1,11 @@
+import { IListItemProps } from './components';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface IListSizes {}
+
+export type IListSize = keyof IListSizes;
+
+export interface IListItem extends IListItemProps {
+  isHidden?: boolean;
+  size?: IListSize;
+}