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

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,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

@@ -1,14 +1,14 @@
 import { FC, Fragment, KeyboardEvent, MouseEvent } from 'react';
 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 } from './types';
 import { useStyles, IListStyles, withPopupStyles } from './List.styles';
 
 export interface IListProps extends ICommonProps<IListStyles> {
@@ -29,9 +29,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) => {
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
+      {filteredItems.map((item, i) => {
         const itemProps: IListItemProps = {
           testId: getTestId(testId, `item-${i}`),
           ...item,

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

@@ -2,11 +2,10 @@ import { FC, MouseEvent, KeyboardEvent, ReactNode } from 'react';
 import clsx from 'clsx';
 import {
   addClickHandler,
-  addDataTestId,
+  addDataAttributes,
   isArrayNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
 import { ICommonProps } from '../../../../types';
 import { renderIcon, IIcon, Icon } from '../../../Icon';
 import { useStyles, IListItemStyles } from './ListItem.styles';
@@ -51,8 +50,7 @@ export const ListItem: FC<IListItemProps> = ({
           [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 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/Modal/Modal.stories.tsx

@@ -1,20 +1,24 @@
 import { FC, useState } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { Button } from '../Button';
 import { IModalProps, Modal } from './Modal';
 
 const smallText =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+
 const text =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.';
-const largeText = [...text, ...text, ...text];
+
+const largeText = `${text}${text}${text}`;
+
 const texts = { small: smallText, medium: text, large: largeText };
 
-export interface IModalWithCustomProps extends IModalProps {
+export interface IModalCustomProps extends IModalProps {
   textSize: 'small' | 'medium' | 'large';
 }
 
-const ModalWithCustomProps: FC<IModalWithCustomProps> = ({ size, textSize, ...args }) => {
+const Story: FC<IModalCustomProps> = ({ size, textSize, ...args }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isSecondModalOpen, setIsSecondModalOpen] = useState(false);
 
@@ -27,26 +31,28 @@ const ModalWithCustomProps: FC<IModalWithCustomProps> = ({ size, textSize, ...ar
         {...args}
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
-        buttons={[
-          <Button
-            key="1"
-            view="secondary"
-            onClick={() => setIsModalOpen(false)}
-            size={size === 's' ? 'm' : 'l'}
-          >
-            Отмена
-          </Button>,
-          <Button
-            key="2"
-            size={size === 's' ? 'm' : 'l'}
-            onClick={() => {
-              setIsModalOpen(false);
-              setIsSecondModalOpen(true);
-            }}
-          >
-            Применить
-          </Button>,
-        ]}
+        footer={
+          <>
+            <Button
+              key="1"
+              view="secondary"
+              onClick={() => setIsModalOpen(false)}
+              size={size === 's' ? 'm' : 'l'}
+            >
+              Отмена
+            </Button>
+            <Button
+              key="2"
+              size={size === 's' ? 'm' : 'l'}
+              onClick={() => {
+                setIsModalOpen(false);
+                setIsSecondModalOpen(true);
+              }}
+            >
+              Применить
+            </Button>
+          </>
+        }
       >
         <div style={{ lineHeight: 1.6 }}>{texts[textSize]}</div>
       </Modal>
@@ -58,48 +64,33 @@ const ModalWithCustomProps: FC<IModalWithCustomProps> = ({ size, textSize, ...ar
   );
 };
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Feedback/Modal',
-  component: Modal,
+  component: Story,
+  args: {
+    title: 'Some modal title',
+    size: 'm',
+    textSize: 'small',
+    buttonsAlign: 'right',
+    shouldCloseOnEsc: true,
+    hasOverlay: true,
+    hasCloseButton: true,
+    shouldCloseOnOverlayClick: true,
+    shouldBlockScroll: true,
+    isFooterSticky: false,
+  },
   argTypes: {
-    buttonsAlign: {
-      control: 'inline-radio',
-      options: ['left', 'center', 'right'],
-    },
     textSize: {
       control: 'inline-radio',
       options: ['small', 'medium', 'large'],
     },
-    size: { control: 'inline-radio', options: ['s', 'm', 'l'] },
-    position: {
-      control: 'inline-radio',
-      options: ['center', 'left', 'right', 'static'],
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['items']),
     },
   },
 };
 
-const Template: ComponentStory<typeof ModalWithCustomProps> = (args) => (
-  <div
-    style={{
-      border: '1px dotted rgba(0,0,0,.2)',
-      height: 1000, // чтобы был скролл на странице
-    }}
-  >
-    <ModalWithCustomProps {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Some modal title',
-  size: 'm',
-  textSize: 'small',
-  buttonsAlign: 'right',
-  shouldCloseOnEsc: true,
-  hasOverlay: true,
-  hasCloseButton: true,
-  shouldCloseOnOverlayClick: true,
-  shouldBlockScroll: true,
-  isFooterSticky: false,
-};
+export default meta;
+export const Default = {};