@true-engineering/true-react-common-ui-kit 4.0.0-alpha7 → 4.0.0-alpha71

package/src/components/NewMoreMenu/NewMoreMenu.tsx

@@ -1,12 +1,12 @@
 import { FC } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isArrayEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes, isArrayEmpty } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
+import { ICommonProps, IRenderNode } from '../../types';
 import { Icon } from '../Icon';
-import { IListItem, List } from '../List';
+import { IListItem, IListSize, List } from '../List';
 import { IWithPopupProps, WithPopup } from '../WithPopup';
+import { IWithPopupTriggerProps } from '../WithPopup/types';
 import { useStyles, INewMoreMenuStyles } from './NewMoreMenu.styles';
 
 export interface INewMoreMenuProps
@@ -21,6 +21,8 @@ export interface INewMoreMenuProps
     >,
     ICommonProps<INewMoreMenuStyles> {
   items: IListItem[];
+  renderTrigger?: IRenderNode<IWithPopupTriggerProps>;
+  listSize?: IListSize;
   /** @default false */
   isDisabled?: boolean;
   /** @default true */
@@ -31,12 +33,12 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
   items,
   isDisabled = false,
   hasDefaultStateBackground = true,
-  data,
-  testId,
+  renderTrigger,
+  listSize,
   tweakStyles,
   ...rest
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakWithPopupStyles = useTweakStyles({
     tweakStyles,
@@ -50,30 +52,33 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
     currentComponentName: 'NewMoreMenu',
   });
 
+  const defaultTrigger = ({ triggerProps, referenceProps }: IWithPopupTriggerProps) => (
+    <button
+      className={clsx(classes.button, {
+        [classes.hasCircle]: hasDefaultStateBackground,
+        [classes.disabled]: triggerProps.isDisabled,
+        [classes.active]: triggerProps.isActive,
+      })}
+      disabled={triggerProps.isDisabled}
+      {...addDataAttributes(triggerProps.data, triggerProps.testId)}
+      {...referenceProps}
+    >
+      <div className={classes.icon}>
+        <Icon type="menu" />
+      </div>
+    </button>
+  );
+
   return (
     <WithPopup
       isDisabled={isDisabled || isArrayEmpty(items)}
       tweakStyles={tweakWithPopupStyles}
       {...rest}
-      trigger={({ triggerProps, referenceProps }) => (
-        <button
-          className={clsx(classes.button, {
-            [classes.hasCircle]: hasDefaultStateBackground,
-            [classes.disabled]: triggerProps.isDisabled,
-            [classes.active]: triggerProps.isActive,
-          })}
-          disabled={triggerProps.isDisabled}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
-          {...referenceProps}
-        >
-          <div className={classes.icon}>
-            <Icon type="menu" />
-          </div>
-        </button>
-      )}
+      trigger={renderTrigger ?? defaultTrigger}
     >
-      {({ onClose }) => <List items={items} tweakStyles={tweakListStyles} onClick={onClose} />}
+      {({ onClose }) => (
+        <List items={items} size={listSize} tweakStyles={tweakListStyles} onClick={onClose} />
+      )}
     </WithPopup>
   );
 };

package/src/components/Notification/Notification.stories.tsx

@@ -1,51 +1,54 @@
-import { Meta, Story } from '@storybook/react';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
+import { iconsMap } from '../Icon';
 import { INotificationProps, Notification } from './Notification';
 
-const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
-
-const lorem = 'Lorem ipsum dolor, sit amet consectetur adipisicing';
-
-interface IStory extends INotificationProps {
+interface INotificationCustomProps extends INotificationProps {
   shouldUseChildrenInstead: boolean;
 }
 
-export default {
+const Story: FC<INotificationCustomProps> = ({
+  shouldUseChildrenInstead,
+  title,
+  text,
+  ...args
+}) => (
+  <Notification
+    {...args}
+    title={!shouldUseChildrenInstead ? title : undefined}
+    text={!shouldUseChildrenInstead ? text : undefined}
+  >
+    {shouldUseChildrenInstead ? (
+      <div>
+        Some childrens with <a href="google.com">tags</a>
+      </div>
+    ) : undefined}
+  </Notification>
+);
+
+const meta: Meta<typeof Story> = {
   title: 'Data Display/Notification',
-  component: Notification,
+  component: Story,
   args: {
     title: 'Notification title',
-    text: lorem,
+    text: 'Lorem ipsum dolor, sit amet consectetur adipisicing',
     size: 's',
     type: 'info',
     isFullWidth: false,
     shouldUseChildrenInstead: false,
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['s', 'm', 'l'] },
-    icon: { options: icons, control: 'select' },
-    type: {
-      control: 'inline-radio',
-      options: ['error', 'info', 'warning', 'ok', 'not-ok', 'custom'],
+    icon: { options: [undefined, null, ...Object.keys(iconsMap)], control: 'select' },
+    size: { options: ['s', 'm', 'l'], control: 'inline-radio' },
+    type: { options: ['info', 'error', 'warning', 'ok', 'not-ok', 'custom'], control: 'select' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['children']),
     },
   },
-} as Meta<IStory>;
-
-export const Default: Story<IStory> = ({ title, text, shouldUseChildrenInstead, ...args }) => {
-  const children = (
-    <div>
-      Some childrens with <a href="google.com">tags</a>
-    </div>
-  );
-
-  return (
-    <Notification
-      {...args}
-      title={!shouldUseChildrenInstead ? title : undefined}
-      text={!shouldUseChildrenInstead ? text : undefined}
-    >
-      {shouldUseChildrenInstead ? children : undefined}
-    </Notification>
-  );
 };
+
+export default meta;
+export const Default = {};

package/src/components/Notification/Notification.tsx

@@ -1,13 +1,13 @@
 import { FC, ReactNode } from 'react';
 import clsx from 'clsx';
 import {
+  addDataAttributes,
   addDataTestId,
+  isNotEmpty,
   isReactNodeNotEmpty,
-  isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
-import { Icon, IIcon, renderIcon } from '../Icon';
+import { IIcon, renderIcon } from '../Icon';
 import { INotificationType } from './types';
 import { useStyles, INotificationStyles } from './Notification.styles';
 
@@ -15,11 +15,11 @@ export interface INotificationProps extends ICommonProps<INotificationStyles> {
   type: INotificationType;
   /** @default true */
   isFullWidth?: boolean;
-  text?: string;
-  title?: string;
+  text?: ReactNode;
+  title?: ReactNode;
   /** @default 's' */
   size?: 's' | 'm' | 'l';
-  icon?: IIcon;
+  icon?: IIcon | null;
   children?: ReactNode;
 }
 
@@ -32,15 +32,13 @@ export const Notification: FC<INotificationProps> = ({
   testId,
   size = 's',
   data,
-  icon,
+  icon = type !== 'custom' ? `status-${type}` : undefined,
   tweakStyles,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
-  const hasText = isStringNotEmpty(text);
-  const hasTitle = isStringNotEmpty(title);
-  const isDefaultType = type !== 'custom';
-  const hasIcon = isReactNodeNotEmpty(icon) || isDefaultType;
+  const hasText = isReactNodeNotEmpty(text);
+  const hasTitle = isReactNodeNotEmpty(title);
 
   return (
     <div
@@ -49,16 +47,9 @@ export const Notification: FC<INotificationProps> = ({
         [classes.withTitle]: hasTitle,
         [classes.withText]: hasText,
       })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
-      {hasIcon && (
-        <div className={classes.icon}>
-          {isReactNodeNotEmpty(icon)
-            ? renderIcon(icon)
-            : isDefaultType && <Icon type={`status-${type}`} />}
-        </div>
-      )}
+      {isNotEmpty(icon) && <div className={classes.icon}>{renderIcon(icon)}</div>}
       <div className={classes.body}>
         {hasTitle && (
           <span className={classes.title} {...addDataTestId(testId, 'title')}>

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -1,33 +1,37 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { NumberInput } from './NumberInput';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { INumberInputProps, NumberInput } from './NumberInput';
 
-export default {
-  title: 'Inputs/NumberInput',
-  component: NumberInput,
-};
-
-const Template: ComponentStory<typeof NumberInput> = (args) => {
+const Story: FC<INumberInputProps> = (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({});
-
-Default.args = {
-  min: 0,
-  max: 9999,
-  precision: 3,
-  intPartPrecision: 7,
-  canBeFloat: false,
-  canBeNegative: false,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  infoMessage: 'Message Info',
-  units: 'RUB',
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/NumberInput',
+  component: Story,
+  args: {
+    min: 0,
+    max: 9999,
+    precision: 3,
+    intPartPrecision: 7,
+    canBeFloat: false,
+    canBeNegative: false,
+    label: 'Label',
+    placeholder: 'Placeholder',
+    infoMessage: 'Message Info',
+    units: 'RUB',
+    isInvalid: false,
+    errorMessage: 'Error Text',
+    isDisabled: false,
+    isRequired: false,
+    isReadonly: false,
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/NumberInput/NumberInput.tsx

@@ -28,107 +28,105 @@ export interface INumberInputProps extends Omit<IInputProps, 'value' | 'onChange
   onChange: (value: number | undefined, event?: IChangeInputEvent) => void;
 }
 
-export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
-  (
-    {
-      value,
-      canBeFloat = false,
-      canBeNegative = false,
-      defaultValue,
-      precision = 3,
-      intPartPrecision = 7,
-      onChange,
-      onBlur,
-      min,
-      max,
-      ...props
-    },
-    ref,
-  ) => {
-    const [showedValue, setShowedValue] = useState(() =>
-      formatNumberWithDefault(value, defaultValue),
-    );
+export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(function NumberInput(
+  {
+    value,
+    canBeFloat = false,
+    canBeNegative = false,
+    defaultValue,
+    precision = 3,
+    intPartPrecision = 7,
+    onChange,
+    onBlur,
+    min,
+    max,
+    ...props
+  },
+  ref,
+) {
+  const [showedValue, setShowedValue] = useState(() =>
+    formatNumberWithDefault(value, defaultValue),
+  );
 
-    // специальный костыль для обработки Delete - т.к. без него каретка будет работать неправильно при удалении пробелов
-    const [isDeleteForwardAction, setIsDeleteForwardAction] = useState(false);
+  // специальный костыль для обработки Delete - т.к. без него каретка будет работать неправильно при удалении пробелов
+  const [isDeleteForwardAction, setIsDeleteForwardAction] = useState(false);
 
-    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-      setIsDeleteForwardAction(event.key === 'Delete');
-    };
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    setIsDeleteForwardAction(event.key === 'Delete');
+  };
 
-    const setShowedValueWithDefault = (v: string) => {
-      setShowedValue(isStringNotEmpty(v) ? v : formatNumber(defaultValue));
-    };
+  const setShowedValueWithDefault = (v: string) => {
+    setShowedValue(isStringNotEmpty(v) ? v : formatNumber(defaultValue));
+  };
 
-    const handleChange = async (inputValue: string, event: IChangeInputEvent): Promise<void> => {
-      const oldValue = showedValue;
-      const target = event.target as HTMLInputElement;
-      const defaultCaretPos = target.selectionStart ?? 0;
-      const numString = removeStringFormat(inputValue);
+  const handleChange = async (inputValue: string, event: IChangeInputEvent): Promise<void> => {
+    const oldValue = showedValue;
+    const target = event.target as HTMLInputElement;
+    const defaultCaretPos = target.selectionStart ?? 0;
+    const numString = removeStringFormat(inputValue);
 
-      if (numString === '') {
-        onChange(undefined);
-        // не убирать - ломается каретка
-        setShowedValue('');
-        return;
-      }
+    if (numString === '') {
+      onChange(undefined);
+      // не убирать - ломается каретка
+      setShowedValue('');
+      return;
+    }
 
-      const numberRegexp = new RegExp(
-        constructRegExp({
-          precision,
-          intPartPrecision,
-          canBeNegative,
-          canBeFloat,
-        }),
-      );
+    const numberRegexp = new RegExp(
+      constructRegExp({
+        precision,
+        intPartPrecision,
+        canBeNegative,
+        canBeFloat,
+      }),
+    );
 
-      if (!numberRegexp.test(numString)) {
-        await setShowedValue(oldValue);
-        setCaretPosition(target, defaultCaretPos - 1);
-        return;
-      }
+    if (!numberRegexp.test(numString)) {
+      await setShowedValue(oldValue);
+      setCaretPosition(target, defaultCaretPos - 1);
+      return;
+    }
 
-      const hasDot = canBeFloat && /^[-]*[\d\s]*[.,]$/.test(inputValue);
-      const formattedValue = formatStringNumber(numString);
-      const newValue = hasDot ? `${formattedValue}.` : formattedValue;
-      await setShowedValue(newValue);
-      setCaretPosition(
-        target,
-        getNewCaretPosition(defaultCaretPos, oldValue, newValue, isDeleteForwardAction),
-      );
-    };
+    const hasDot = canBeFloat && /^[-]*[\d\s]*[.,]$/.test(inputValue);
+    const formattedValue = formatStringNumber(numString);
+    const newValue = hasDot ? `${formattedValue}.` : formattedValue;
+    await setShowedValue(newValue);
+    setCaretPosition(
+      target,
+      getNewCaretPosition(defaultCaretPos, oldValue, newValue, isDeleteForwardAction),
+    );
+  };
 
-    const handleBlur = (event: FocusEvent<HTMLInputElement>): void => {
-      const val = event.currentTarget.value;
-      const num = stringToNumber(val);
-      const newValue = num !== undefined ? getNumberInRange(num, min, max) : undefined;
-      if (newValue !== value) {
-        onChange(newValue);
-      } else {
-        setShowedValueWithDefault(formatNumber(value));
-      }
-      if (onBlur !== undefined) {
-        onBlur(event);
-      }
-    };
+  const handleBlur = (event: FocusEvent<HTMLInputElement>): void => {
+    const val = event.currentTarget.value;
+    const num = stringToNumber(val);
+    const newValue = num !== undefined ? getNumberInRange(num, min, max) : undefined;
+    if (newValue !== value) {
+      onChange(newValue);
+    } else {
+      setShowedValueWithDefault(formatNumber(value));
+    }
+    if (onBlur !== undefined) {
+      onBlur(event);
+    }
+  };
 
-    useDidMountEffect(() => {
-      if (value !== undefined) {
-        setShowedValueWithDefault(formatNumber(value));
-      } else {
-        setShowedValue(formatNumber(value));
-      }
-    }, [value]);
+  useDidMountEffect(() => {
+    if (value !== undefined) {
+      setShowedValueWithDefault(formatNumber(value));
+    } else {
+      setShowedValue(formatNumber(value));
+    }
+  }, [value]);
 
-    return (
-      <Input
-        value={showedValue}
-        onChange={handleChange}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
+  return (
+    <Input
+      value={showedValue}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onKeyDown={handleKeyDown}
+      ref={ref}
+      {...props}
+    />
+  );
+});

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

@@ -1,67 +1,41 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { phoneInfo } from '../../constants';
-import { iconsList } from '../Icon';
-import { PhoneInput } from './PhoneInput';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { GROUP_PLACEMENTS } from '../ControlWrapper';
+import { iconsMap } from '../Icon';
+import { IPhoneInputProps, PhoneInput } from './PhoneInput';
 import { IPhoneValue } from './types';
 
-const icons = [undefined, ...Object.keys(iconsList)];
-const groupPlacements = [undefined, 'left', 'right', 'middle'];
-const borders = [undefined, 'left', 'top', 'right', 'bottom'];
-const errorPositions = ['bottom', 'top'];
-const countryCodes = phoneInfo.map((info) => info.countryCode);
-
-export default {
-  title: 'Inputs/PhoneInput',
-  component: PhoneInput,
-  argTypes: {
-    icon: { control: 'select', options: icons },
-    errorPosition: { control: 'inline-radio', options: errorPositions },
-    border: { control: 'inline-radio', options: borders },
-    groupPlacement: { control: 'select', options: groupPlacements },
-    defaultCountryCode: { control: 'select', options: countryCodes },
-  },
-};
-
-const Template: ComponentStory<typeof PhoneInput> = (args) => {
+const Story: FC<IPhoneInputProps> = (args) => {
   const [value, setValue] = useState<IPhoneValue>({
     dialCode: '7',
     phoneNumber: '9134567890',
     countryCode: 'RU',
   });
-
   return <PhoneInput {...args} value={value} onChange={setValue} />;
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  infoMessage: 'Message Info',
-  icon: undefined,
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isActive: false,
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
-  isClearable: false,
-  isLoading: false,
-  groupPlacement: undefined,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'testId',
-      'data',
-      'tabIndex',
-      'onChange',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onKeyDown',
-      'onIconClick',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/PhoneInput',
+  component: Story,
+  args: {
+    label: 'Label',
+    infoMessage: 'Message Info',
+    endIcon: undefined,
+    isInvalid: false,
+    errorMessage: 'Error Text',
+    isActive: false,
+    isDisabled: false,
+    isRequired: false,
+    isReadonly: false,
+    isClearable: false,
+    isLoading: false,
+    groupPlacement: undefined,
+  },
+  argTypes: {
+    endIcon: { control: 'select', options: [undefined, ...Object.keys(iconsMap)] },
+    groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
   },
 };
+
+export default meta;
+export const Default = {};