@true-engineering/true-react-common-ui-kit 3.30.0 → 3.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.30.0",
+  "version": "3.31.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

package/src/components/AccountInfo/AccountInfo.stories.tsx

@@ -1,32 +1,32 @@
-import { ComponentStory } from '@storybook/react';
-import { AccountInfo } from './AccountInfo';
-
-export default {
-  title: 'Data Display/AccountInfo',
-  component: AccountInfo,
-};
-
-const Template: ComponentStory<typeof AccountInfo> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 400,
-      height: 200,
-      border: '1px dotted rgba(0, 0, 0, 0.2)',
-    }}
-  >
-    <AccountInfo {...args} options={[{ item: 'Logout', onClick: () => console.log('logout') }]} />
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  accountName: 'Ivan Ivanov',
-};
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'options', 'avatar'],
-  },
-};
+import { ComponentStory } from '@storybook/react';
+import { AccountInfo } from './AccountInfo';
+
+export default {
+  title: 'Data Display/AccountInfo',
+  component: AccountInfo,
+};
+
+const Template: ComponentStory<typeof AccountInfo> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 400,
+      height: 200,
+      border: '1px dotted rgba(0, 0, 0, 0.2)',
+    }}
+  >
+    <AccountInfo {...args} options={[{ item: 'Logout', onClick: () => console.log('logout') }]} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  accountName: 'Ivan Ivanov',
+};
+Default.parameters = {
+  controls: {
+    exclude: ['data', 'options', 'avatar'],
+  },
+};

package/src/components/AccountInfo/AccountInfo.tsx

@@ -1,80 +1,80 @@
-import { FC, ReactNode, useRef, useState, MouseEvent } from 'react';
-import { CSSTransition } from 'react-transition-group';
-import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { IListProps, List } from '../List';
-import { ANIMATION_TIMEOUT } from './constants';
-import { useStyles, IAccountInfoStyles } from './AccountInfo.styles';
-
-export interface IAccountInfoProps extends ICommonProps<IAccountInfoStyles> {
-  /** @default `<Icon type='avatar' />` */
-  avatar?: ReactNode;
-  accountName: ReactNode;
-  options: IListProps['items'];
-}
-
-export const AccountInfo: FC<IAccountInfoProps> = ({
-  data,
-  testId,
-  avatar,
-  tweakStyles,
-  accountName,
-  options,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakListStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakList',
-    currentComponentName: 'AccountInfo',
-  });
-
-  const nameRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-
-  const toggleMenu = (event: MouseEvent<HTMLDivElement>) => {
-    event.stopPropagation();
-    setIsMenuOpen((v) => !v);
-  };
-
-  useOnClickOutsideWithRef(dropdownRef, () => setIsMenuOpen(false), nameRef);
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {avatar ?? (
-        <div className={classes.avatarIcon}>
-          <Icon type="avatar" />
-        </div>
-      )}
-      <div ref={nameRef} className={classes.account} onClick={toggleMenu}>
-        <div className={clsx(classes.accountName, isMenuOpen && classes.accountNameOpened)}>
-          {accountName}
-        </div>
-        <div className={clsx(classes.accountChevron, isMenuOpen && classes.accountChevronOpened)}>
-          <Icon type="chevron-down-small" />
-        </div>
-        <CSSTransition
-          in={isMenuOpen}
-          timeout={ANIMATION_TIMEOUT}
-          unmountOnExit
-          classNames={{
-            enter: classes['slide-up-enter'],
-            enterActive: classes['slide-up-enter-active'],
-            exit: classes['slide-up-exit'],
-            exitActive: classes['slide-up-exit-active'],
-          }}
-        >
-          <div ref={dropdownRef} className={classes.accountMenu} onClick={toggleMenu}>
-            <List items={options} tweakStyles={tweakListStyles} />
-          </div>
-        </CSSTransition>
-      </div>
-    </div>
-  );
-};
+import { FC, ReactNode, useRef, useState, MouseEvent } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { IListProps, List } from '../List';
+import { ANIMATION_TIMEOUT } from './constants';
+import { useStyles, IAccountInfoStyles } from './AccountInfo.styles';
+
+export interface IAccountInfoProps extends ICommonProps<IAccountInfoStyles> {
+  /** @default `<Icon type='avatar' />` */
+  avatar?: ReactNode;
+  accountName: ReactNode;
+  options: IListProps['items'];
+}
+
+export const AccountInfo: FC<IAccountInfoProps> = ({
+  data,
+  testId,
+  avatar,
+  tweakStyles,
+  accountName,
+  options,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakList',
+    currentComponentName: 'AccountInfo',
+  });
+
+  const nameRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = (event: MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    setIsMenuOpen((v) => !v);
+  };
+
+  useOnClickOutsideWithRef(dropdownRef, () => setIsMenuOpen(false), nameRef);
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      {avatar ?? (
+        <div className={classes.avatarIcon}>
+          <Icon type="avatar" />
+        </div>
+      )}
+      <div ref={nameRef} className={classes.account} onClick={toggleMenu}>
+        <div className={clsx(classes.accountName, isMenuOpen && classes.accountNameOpened)}>
+          {accountName}
+        </div>
+        <div className={clsx(classes.accountChevron, isMenuOpen && classes.accountChevronOpened)}>
+          <Icon type="chevron-down-small" />
+        </div>
+        <CSSTransition
+          in={isMenuOpen}
+          timeout={ANIMATION_TIMEOUT}
+          unmountOnExit
+          classNames={{
+            enter: classes['slide-up-enter'],
+            enterActive: classes['slide-up-enter-active'],
+            exit: classes['slide-up-exit'],
+            exitActive: classes['slide-up-exit-active'],
+          }}
+        >
+          <div ref={dropdownRef} className={classes.accountMenu} onClick={toggleMenu}>
+            <List items={options} tweakStyles={tweakListStyles} />
+          </div>
+        </CSSTransition>
+      </div>
+    </div>
+  );
+};

package/src/components/AddButton/AddButton.stories.tsx

@@ -1,21 +1,21 @@
-import { ComponentStory } from '@storybook/react';
-import { AddButton } from './AddButton';
-
-export default {
-  title: 'Buttons/AddButton',
-  component: AddButton,
-};
-
-const Template: ComponentStory<typeof AddButton> = (args) => (
-  <AddButton {...args} onClick={console.log} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: 'Добавить билет',
-  isDisabled: false,
-  isFullWidth: false,
-};
-
-Default.parameters = { controls: { exclude: ['onClick'] } };
+import { ComponentStory } from '@storybook/react';
+import { AddButton } from './AddButton';
+
+export default {
+  title: 'Buttons/AddButton',
+  component: AddButton,
+};
+
+const Template: ComponentStory<typeof AddButton> = (args) => (
+  <AddButton {...args} onClick={console.log} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Добавить билет',
+  isDisabled: false,
+  isFullWidth: false,
+};
+
+Default.parameters = { controls: { exclude: ['onClick'] } };

package/src/components/AddButton/AddButton.tsx

@@ -1,52 +1,52 @@
-import { FC } from 'react';
-import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { useStyles, IAddButtonStyles } from './AddButton.styles';
-
-export interface IAddButtonProps extends ICommonProps<IAddButtonStyles> {
-  text: string;
-  /** @default 'button' */
-  type?: 'submit' | 'button';
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default false */
-  isFullWidth?: boolean;
-  onClick?: () => void | Promise<void>;
-}
-
-// TODO: Весьма сомнительный компонент
-export const AddButton: FC<IAddButtonProps> = ({
-  text,
-  type = 'button',
-  isDisabled = false,
-  onClick,
-  isFullWidth = false,
-  data,
-  testId,
-  tweakStyles,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  return (
-    <button
-      type={type}
-      className={clsx(
-        classes.root,
-        isDisabled && classes.disabled,
-        isFullWidth && classes.fullWidth,
-      )}
-      onClick={!isDisabled ? onClick : undefined}
-      disabled={isDisabled}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
-    >
-      <div className={classes.icon}>
-        <Icon type="plus" />
-      </div>
-      <div>{text}</div>
-    </button>
-  );
-};
+import { FC } from 'react';
+import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { useStyles, IAddButtonStyles } from './AddButton.styles';
+
+export interface IAddButtonProps extends ICommonProps<IAddButtonStyles> {
+  text: string;
+  /** @default 'button' */
+  type?: 'submit' | 'button';
+  /** @default false */
+  isDisabled?: boolean;
+  /** @default false */
+  isFullWidth?: boolean;
+  onClick?: () => void | Promise<void>;
+}
+
+// TODO: Весьма сомнительный компонент
+export const AddButton: FC<IAddButtonProps> = ({
+  text,
+  type = 'button',
+  isDisabled = false,
+  onClick,
+  isFullWidth = false,
+  data,
+  testId,
+  tweakStyles,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  return (
+    <button
+      type={type}
+      className={clsx(
+        classes.root,
+        isDisabled && classes.disabled,
+        isFullWidth && classes.fullWidth,
+      )}
+      onClick={!isDisabled ? onClick : undefined}
+      disabled={isDisabled}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <div className={classes.icon}>
+        <Icon type="plus" />
+      </div>
+      <div>{text}</div>
+    </button>
+  );
+};

package/src/components/Colors/Colors.stories.tsx

@@ -1,7 +1,7 @@
-import { Colors } from './Colors';
-
-export default {
-  title: 'Data Display/Colors',
-};
-
-export const Default = (): JSX.Element => <Colors />;
+import { Colors } from './Colors';
+
+export default {
+  title: 'Data Display/Colors',
+};
+
+export const Default = (): JSX.Element => <Colors />;

package/src/components/DateInput/DateInput.tsx

@@ -1,90 +1,90 @@
-import { FormEvent, MouseEvent, forwardRef, ChangeEvent } from 'react';
-import clsx from 'clsx';
-import { addDataAttributes } from '../../helpers';
-import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { IInputProps, Input } from '../Input';
-import { EMPTY_DATE_INPUT_VALUE, EMPTY_DATE_RANGE_INPUT_VALUE } from './constants';
-import { useStyles, IDateInputStyles } from './DateInput.styles';
-
-export interface IDateInputProps
-  extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange' | 'tweakStyles'>,
-    ICommonProps<IDateInputStyles> {
-  date?: string;
-  /** @default  '' */
-  startDate?: string;
-  /** @default '' */
-  endDate?: string;
-  className?: string;
-  /** @default false */
-  isRange?: boolean;
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-  // react-datepicker ожидает event первым аргументом
-  onChange?: (event: FormEvent<HTMLInputElement>, value: string) => void;
-}
-
-export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
-  (
-    {
-      date,
-      startDate = '',
-      endDate = '',
-      mask,
-      className,
-      placeholder,
-      data,
-      isRange = false,
-      tweakStyles,
-      onClick,
-      onChange,
-      ...inputProps
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const tweakInputStyles = useTweakStyles({
-      tweakStyles,
-      className: 'tweakInput',
-      currentComponentName: 'DateInput',
-    });
-
-    const beforeMaskedStateChange: IInputProps['beforeMaskedStateChange'] = ({ nextState }) => {
-      // Если в инпуте отсутствует введенное значение, то выставляем
-      // пустую строку для корректной работы react-datepicker
-      if (
-        nextState.value === EMPTY_DATE_INPUT_VALUE ||
-        nextState.value === EMPTY_DATE_RANGE_INPUT_VALUE
-      ) {
-        return { value: '', selection: { start: 0, end: 0 } };
-      }
-      return nextState;
-    };
-
-    const handleChange: IInputProps['onChange'] = (value, event) => {
-      // Событие click срабатывает только при нажатии на кнопку очистки
-      if (event.type === 'click') {
-        // react-datepicker ожидает пустую строку в event.target.value
-        (event as ChangeEvent<HTMLInputElement>).target.value = '';
-      }
-      onChange?.(event, value);
-    };
-
-    return (
-      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
-        <Input
-          {...inputProps}
-          ref={ref}
-          value={isRange ? `${startDate}${endDate}` : date}
-          mask={mask ?? (isRange ? '99.99.9999 - 99.99.9999' : '99.99.9999')}
-          placeholder={
-            placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
-          }
-          tweakStyles={tweakInputStyles}
-          onChange={handleChange}
-          beforeMaskedStateChange={beforeMaskedStateChange}
-        />
-      </div>
-    );
-  },
-);
+import { FormEvent, MouseEvent, forwardRef, ChangeEvent } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { IInputProps, Input } from '../Input';
+import { EMPTY_DATE_INPUT_VALUE, EMPTY_DATE_RANGE_INPUT_VALUE } from './constants';
+import { useStyles, IDateInputStyles } from './DateInput.styles';
+
+export interface IDateInputProps
+  extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange' | 'tweakStyles'>,
+    ICommonProps<IDateInputStyles> {
+  date?: string;
+  /** @default  '' */
+  startDate?: string;
+  /** @default '' */
+  endDate?: string;
+  className?: string;
+  /** @default false */
+  isRange?: boolean;
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+  // react-datepicker ожидает event первым аргументом
+  onChange?: (event: FormEvent<HTMLInputElement>, value: string) => void;
+}
+
+export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(
+  (
+    {
+      date,
+      startDate = '',
+      endDate = '',
+      mask,
+      className,
+      placeholder,
+      data,
+      isRange = false,
+      tweakStyles,
+      onClick,
+      onChange,
+      ...inputProps
+    },
+    ref,
+  ) => {
+    const classes = useStyles({ theme: tweakStyles });
+
+    const tweakInputStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakInput',
+      currentComponentName: 'DateInput',
+    });
+
+    const beforeMaskedStateChange: IInputProps['beforeMaskedStateChange'] = ({ nextState }) => {
+      // Если в инпуте отсутствует введенное значение, то выставляем
+      // пустую строку для корректной работы react-datepicker
+      if (
+        nextState.value === EMPTY_DATE_INPUT_VALUE ||
+        nextState.value === EMPTY_DATE_RANGE_INPUT_VALUE
+      ) {
+        return { value: '', selection: { start: 0, end: 0 } };
+      }
+      return nextState;
+    };
+
+    const handleChange: IInputProps['onChange'] = (value, event) => {
+      // Событие click срабатывает только при нажатии на кнопку очистки
+      if (event.type === 'click') {
+        // react-datepicker ожидает пустую строку в event.target.value
+        (event as ChangeEvent<HTMLInputElement>).target.value = '';
+      }
+      onChange?.(event, value);
+    };
+
+    return (
+      <div className={clsx(classes.root, className)} onClick={onClick} {...addDataAttributes(data)}>
+        <Input
+          {...inputProps}
+          ref={ref}
+          value={isRange ? `${startDate}${endDate}` : date}
+          mask={mask ?? (isRange ? '99.99.9999 - 99.99.9999' : '99.99.9999')}
+          placeholder={
+            placeholder ?? (isRange ? EMPTY_DATE_RANGE_INPUT_VALUE : EMPTY_DATE_INPUT_VALUE)
+          }
+          tweakStyles={tweakInputStyles}
+          onChange={handleChange}
+          beforeMaskedStateChange={beforeMaskedStateChange}
+        />
+      </div>
+    );
+  },
+);

package/src/components/DateInput/constants.ts

@@ -1,2 +1,2 @@
-export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
-export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;
+export const EMPTY_DATE_INPUT_VALUE = '__.__.____';
+export const EMPTY_DATE_RANGE_INPUT_VALUE = `${EMPTY_DATE_INPUT_VALUE} - ${EMPTY_DATE_INPUT_VALUE}`;

package/src/components/Description/Description.stories.tsx

@@ -1,27 +1,27 @@
-import { ComponentStory } from '@storybook/react';
-import { Description } from './Description';
-
-export default {
-  title: 'Data Display/Description',
-  component: Description,
-  argTypes: {
-    truncateIndex: {
-      control: { type: 'range', min: 20, max: 600, step: 10 },
-    },
-  },
-};
-
-const lorem =
-  'Lorem ipsum dolor, sit amet consectetur adipisicing. Alias necessitatibus quidem nobis molestiae dolor sed at, voluptatum nulla qui enim maiores consectetur dolorum atque odit id ratione pariatur ut nihil. http://google.com';
-
-const Template: ComponentStory<typeof Description> = (args) => <Description {...args} />;
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: lorem,
-  moreTitle: 'подробнее',
-  lessTitle: 'скрыть',
-  truncateIndex: 150,
-  isAlwaysOpen: false,
-};
+import { ComponentStory } from '@storybook/react';
+import { Description } from './Description';
+
+export default {
+  title: 'Data Display/Description',
+  component: Description,
+  argTypes: {
+    truncateIndex: {
+      control: { type: 'range', min: 20, max: 600, step: 10 },
+    },
+  },
+};
+
+const lorem =
+  'Lorem ipsum dolor, sit amet consectetur adipisicing. Alias necessitatibus quidem nobis molestiae dolor sed at, voluptatum nulla qui enim maiores consectetur dolorum atque odit id ratione pariatur ut nihil. http://google.com';
+
+const Template: ComponentStory<typeof Description> = (args) => <Description {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: lorem,
+  moreTitle: 'подробнее',
+  lessTitle: 'скрыть',
+  truncateIndex: 150,
+  isAlwaysOpen: false,
+};