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

package/src/components/DatePicker/components/index.ts

@@ -1,2 +1,3 @@
+export * from './DatePickerBase';
 export * from './DatePickerHeader';
 export * from './PopperContainer';

package/src/components/DatePicker/constants.ts

@@ -1,6 +1,12 @@
-import ReactDatePicker from 'react-datepicker';
+import { enUS as enLocale, ru as ruLocale, type Locale } from 'date-fns/locale';
 
 export const DEFAULT_DATE_FORMAT = 'dd.MM.yyyy';
 
-export const DatePickerComponent =
-  (ReactDatePicker as unknown as { default: typeof ReactDatePicker }).default ?? ReactDatePicker;
+export const OUTSIDE_CLICK_IGNORE_CLASS = 'react-datepicker-ignore-onclickoutside';
+
+export const LocalesMap = {
+  ru: ruLocale,
+  en: enLocale,
+} satisfies Record<string, Locale>;
+
+export type IDatePickerLocale = keyof typeof LocalesMap | Locale;

package/src/components/DatePicker/helpers.ts

@@ -1,12 +1,10 @@
-import { parse, format, isSameDay, type Locale } from 'date-fns';
-import { ru as ruLocale, enUS as enLocale } from 'date-fns/locale';
+import { format, isSameDay, parse } from 'date-fns';
 import {
   isEmpty,
   isNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { EMPTY_DATE_INPUT_VALUE } from '../DateInput';
-import { IDatePickerLocale } from './types';
 
 export const getDateFormatter =
   (dateFormat: string) =>
@@ -23,13 +21,3 @@ export const getDateValueParser =
 export const areDatesEquals = (date1?: Date | null, date2?: Date | null): boolean =>
   (isEmpty(date1) && isEmpty(date2)) ||
   (isNotEmpty(date1) && isNotEmpty(date2) && isSameDay(date1, date2));
-
-export const preparateDatePickerLocale = (locale: IDatePickerLocale): Locale => {
-  if (locale === 'ru') {
-    return ruLocale;
-  }
-  if (locale === 'en') {
-    return enLocale;
-  }
-  return locale;
-};

package/src/components/DatePicker/index.ts

@@ -1,4 +1,5 @@
 export * from './DatePicker';
 export * from './types';
+export type { IDatePickerLocale } from './constants';
 export type { IDatePickerStyles } from './DatePicker.styles';
 export type { IDatePickerHeaderStyles } from './components';

package/src/components/DatePicker/types.ts

@@ -1,13 +1,10 @@
-import { ReactDatePickerProps } from 'react-datepicker';
-import { type Locale } from 'date-fns';
+import { type DatePickerProps } from 'react-datepicker';
 import { type IDateInputProps } from '../DateInput';
 
 export type IRange = [Date | null, Date | null] | null;
 
-export type IDatePickerLocale = 'ru' | 'en' | Locale;
-
 export type IDatePickerBaseProps = Pick<
-  ReactDatePickerProps,
+  DatePickerProps,
   | 'startDate'
   | 'endDate'
   | 'minDate'
@@ -17,6 +14,7 @@ export type IDatePickerBaseProps = Pick<
   | 'monthsShown'
   | 'popperModifiers'
   | 'popperPlacement'
+  | 'popperProps'
   | 'filterDate'
   | 'dayClassName'
   | 'calendarContainer'
@@ -34,7 +32,8 @@ export type IDatePickerBaseProps = Pick<
   | 'strictParsing'
   | 'highlightDates'
   | 'fixedHeight'
-  | 'excludeScrollbar'
+  | 'swapRange'
+  | 'onKeyDown'
 > &
   Omit<
     IDateInputProps,
@@ -48,4 +47,5 @@ export type IDatePickerBaseProps = Pick<
     | 'onChange'
     | 'onClick'
     | 'tweakStyles'
+    | 'onKeyDown'
   >;

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

@@ -1,9 +1,16 @@
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { Description } from './Description';
 
-export default {
+const meta: Meta<typeof Description> = {
   title: 'Data Display/Description',
   component: Description,
+  args: {
+    text: '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',
+    moreTitle: 'подробнее',
+    lessTitle: 'скрыть',
+    truncateIndex: 150,
+    isAlwaysOpen: false,
+  },
   argTypes: {
     truncateIndex: {
       control: { type: 'range', min: 20, max: 600, step: 10 },
@@ -11,17 +18,5 @@ export default {
   },
 };
 
-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,
-};
+export default meta;
+export const Default = {};

package/src/components/Description/Description.tsx

@@ -1,6 +1,5 @@
 import { FC, useState } from 'react';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
 import { LINK_REGEXP } from './constants';
 import { useStyles, IDescriptionStyles } from './Description.styles';
@@ -25,7 +24,7 @@ export const Description: FC<IDescriptionProps> = ({
   data,
   tweakStyles,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const isTooShort = text.length < truncateIndex;
   const [isOpen, setIsOpen] = useState(isAlwaysOpen);
@@ -36,7 +35,7 @@ export const Description: FC<IDescriptionProps> = ({
   const shortText = text.slice(0, text.slice(0, truncateIndex).lastIndexOf(' '));
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       {isAlwaysOpen || isOpen || isTooShort ? (
         <div>
           <span>{textWithNoLink} </span>

package/src/components/FileInput/FileInput.stories.tsx

@@ -1,75 +1,71 @@
+import { FC } from 'react';
 import { format } from 'date-fns';
 import { ru } from 'date-fns/locale';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { mimeTypes } from '../../constants';
+import { excludeStorybookParams } from '../../helpers';
 import { FileItem } from '../FileItem';
-import { Icon } from '../Icon';
-import { FileInput } from './FileInput';
+import { FileInput, IFileInputProps } from './FileInput';
 
-export default {
-  title: 'Inputs/FileInput',
-  component: FileInput,
-};
+const Story: FC<IFileInputProps> = (args) => {
+  const handleAdd = (newFiles: File[]) =>
+    console.log(
+      'added:',
+      newFiles.map(({ name }) => name),
+    );
 
-const description = 'Форматы файла: xlsx, xlsm. Размер — до 1 МБ';
-const text = (
-  <div style={{ display: 'flex', alignItems: 'center' }}>
-    <span style={{ display: 'inline-block', width: 20, height: 20, marginRight: 8 }}>
-      <Icon type="upload" />
-    </span>
-    Перетащите или выберите файл
-  </div>
-);
-
-const handleAdd = (newFiles: File[]) =>
-  console.log(
-    'added:',
-    newFiles.map(({ name }) => name),
+  return (
+    <div style={{ width: 652 }}>
+      <FileInput
+        {...args}
+        tweakStyles={{
+          fileList: {
+            '& > div': {
+              width: '270px',
+            },
+          },
+        }}
+        text={
+          <div style={{ display: 'flex', alignItems: 'center' }}>Перетащите или выберите файл</div>
+        }
+        fileList={
+          <>
+            <FileItem
+              fileInfo={{ name: 'file1', type: mimeTypes.jpeg, size: 10000 }}
+              metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
+            />
+            <FileItem
+              fileInfo={{ name: 'file 2', type: mimeTypes.xls }}
+              metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
+              isDisabled
+            />
+          </>
+        }
+        onAdd={handleAdd}
+      />
+    </div>
   );
+};
 
-const Template: ComponentStory<typeof FileInput> = (args) => (
-  <div style={{ width: 652 }}>
-    <FileInput {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Скан документа',
-  isDragAndDropDisabled: false,
-  isRequired: true,
-  isReadOnly: false,
-  isMultipleDisabled: false,
-  isDisabled: false,
-  isActive: false,
-  onAdd: handleAdd,
-  tweakStyles: {
-    fileList: {
-      '& > div': {
-        width: '270px',
-      },
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/FileInput',
+  component: Story,
+  args: {
+    label: 'Скан документа',
+    isDragAndDropDisabled: false,
+    isRequired: true,
+    isReadOnly: false,
+    isMultipleDisabled: false,
+    isDisabled: false,
+    isActive: false,
+    description: 'Форматы файла: xlsx, xlsm. Размер — до 1 МБ',
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['text', 'fileList', 'accept']),
     },
   },
-  description,
-  text,
-  fileList: (
-    <>
-      <FileItem
-        fileInfo={{ name: 'file1', type: mimeTypes.jpeg, size: 10000 }}
-        metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
-      />
-      <FileItem
-        fileInfo={{ name: 'file 2', type: mimeTypes.xls }}
-        metadata={<span>Обновлен {format(new Date(), 'dd MMM, HH:mm', { locale: ru })}</span>}
-        isDisabled
-      />
-    </>
-  ),
 };
 
-Default.parameters = {
-  controls: {
-    exclude: ['onAdd', 'tweakStyles'],
-  },
-};
+export default meta;
+export const Default = {};

package/src/components/FileInput/FileInput.tsx

@@ -8,11 +8,11 @@ import {
 } from 'react';
 import clsx from 'clsx';
 import {
+  addDataAttributes,
   addDataTestId,
   isEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { blockEvent } from './helpers';
 import { IFileInputStyles, useStyles } from './FileInput.styles';
@@ -39,109 +39,101 @@ export interface IFileInputProps extends ICommonProps<IFileInputStyles> {
   onAdd?: (files: File[]) => void;
 }
 
-export const FileInput = forwardRef<HTMLInputElement, IFileInputProps>(
-  (
-    {
-      fileList,
-      label,
-      text,
-      description,
-      isDragAndDropDisabled = false,
-      isRequired = false,
-      isReadOnly = false,
-      isMultipleDisabled = false,
-      isDisabled = false,
-      isActive = false,
-      accept,
-      onAdd,
-      testId,
-      tweakStyles,
-      data,
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const [isDragOver, setIsDragOver] = useState(false);
+export const FileInput = forwardRef<HTMLInputElement, IFileInputProps>(function FileInput(
+  {
+    fileList,
+    label,
+    text,
+    description,
+    isDragAndDropDisabled = false,
+    isRequired = false,
+    isReadOnly = false,
+    isMultipleDisabled = false,
+    isDisabled = false,
+    isActive = false,
+    accept,
+    onAdd,
+    testId,
+    tweakStyles,
+    data,
+  },
+  ref,
+) {
+  const classes = useStyles({ tweakStyles });
 
-    const handleAdd = (files: FileList | null) => {
-      if (isDisabled || isEmpty(files) || files?.length === 0) {
-        return;
-      }
+  const [isDragOver, setIsDragOver] = useState(false);
 
-      onAdd?.([...files]);
-    };
+  const handleAdd = (files: FileList | null) => {
+    if (isDisabled || isEmpty(files) || files?.length === 0) {
+      return;
+    }
 
-    const handleDragStart: DragEventHandler<HTMLDivElement> = (event) => {
-      blockEvent(event);
-      setIsDragOver(true);
-    };
+    onAdd?.([...files]);
+  };
 
-    const handleDragStop: DragEventHandler<HTMLDivElement> = (event) => {
-      blockEvent(event);
-      setIsDragOver(false);
-    };
+  const handleDragStart: DragEventHandler<HTMLDivElement> = (event) => {
+    blockEvent(event);
+    setIsDragOver(true);
+  };
 
-    const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {
-      handleDragStop(event);
+  const handleDragStop: DragEventHandler<HTMLDivElement> = (event) => {
+    blockEvent(event);
+    setIsDragOver(false);
+  };
 
-      handleAdd(event.dataTransfer.files);
-    };
+  const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {
+    handleDragStop(event);
 
-    const handleFileChange: ChangeEventHandler<HTMLInputElement> = (event) => {
-      handleAdd(event.target.files);
-    };
+    handleAdd(event.dataTransfer.files);
+  };
 
-    const dndHandlers =
-      !isDragAndDropDisabled && !isDisabled
-        ? {
-            onDragOver: handleDragStart,
-            onDragEnter: handleDragStart,
-            onDragLeave: handleDragStop,
-            onDrop: handleDrop,
-          }
-        : undefined;
+  const handleFileChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    handleAdd(event.target.files);
+  };
 
-    return (
-      <div className={classes.root} {...addDataAttributes(data)} {...addDataTestId(testId)}>
-        {isReactNodeNotEmpty(label) && (
-          <div className={clsx(classes.label, { [classes.requiredLabel]: isRequired })}>
-            {label}
-          </div>
-        )}
-        {!isReadOnly && (
-          <div
-            className={clsx(classes.inputWrapper, {
-              [classes.dragged]: isDragOver,
-              [classes.disabled]: isDisabled,
-              [classes.active]: isActive,
-            })}
-            {...dndHandlers}
-          >
-            {isReactNodeNotEmpty(text) && <div className={classes.text}>{text}</div>}
-            <label className={classes.inputLabel}>
-              <input
-                ref={ref}
-                type="file"
-                value=""
-                onChange={handleFileChange}
-                multiple={!isMultipleDisabled}
-                disabled={isDisabled}
-                accept={accept}
-                {...addDataTestId(testId, 'input')}
-              />
-            </label>
-          </div>
-        )}
+  const dndHandlers =
+    !isDragAndDropDisabled && !isDisabled
+      ? {
+          onDragOver: handleDragStart,
+          onDragEnter: handleDragStart,
+          onDragLeave: handleDragStop,
+          onDrop: handleDrop,
+        }
+      : undefined;
 
-        {isReactNodeNotEmpty(description) && (
-          <div className={classes.description}>{description}</div>
-        )}
+  return (
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
+      {isReactNodeNotEmpty(label) && (
+        <div className={clsx(classes.label, { [classes.requiredLabel]: isRequired })}>{label}</div>
+      )}
+      {!isReadOnly && (
+        <div
+          className={clsx(classes.inputWrapper, {
+            [classes.dragged]: isDragOver,
+            [classes.disabled]: isDisabled,
+            [classes.active]: isActive,
+          })}
+          {...dndHandlers}
+        >
+          {isReactNodeNotEmpty(text) && <div className={classes.text}>{text}</div>}
+          <label className={classes.inputLabel}>
+            <input
+              ref={ref}
+              type="file"
+              value=""
+              onChange={handleFileChange}
+              multiple={!isMultipleDisabled}
+              disabled={isDisabled}
+              accept={accept}
+              {...addDataTestId(testId, 'input')}
+            />
+          </label>
+        </div>
+      )}
 
-        <div className={classes.fileList}>{fileList}</div>
-      </div>
-    );
-  },
-);
+      {isReactNodeNotEmpty(description) && <div className={classes.description}>{description}</div>}
 
-FileInput.displayName = 'FileInput';
+      <div className={classes.fileList}>{fileList}</div>
+    </div>
+  );
+});

package/src/components/FileItem/FileItem.stories.tsx

@@ -1,59 +1,59 @@
+import { FC } from 'react';
 import { format } from 'date-fns';
 import { ru } from 'date-fns/locale';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { FILE_ITEM_SIZES } from '../FileItem/constants';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
+import { iconsMap } from '../Icon';
 import { FileItem, IFileItemProps } from './FileItem';
 
-export default {
-  title: 'Data Display/FileItem',
-  component: FileItem,
-};
-
-const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+const icons = [undefined, ...Object.keys(iconsMap)];
 
 const preloaderTypes: Array<IFileItemProps['preloaderType']> = ['dots', 'default', 'logo'];
 
-const onRemove = async () => console.log('remove file');
-
-const onClick = (): Promise<void> => new Promise(() => console.log('download file'));
-
-export const Default: ComponentStory<typeof FileItem> = (args) => <FileItem {...args} />;
-
-Default.args = {
-  // actions: <IconButton icon="download" />,
-  icon: undefined,
-  error: 'Страшная ошибка',
-  itemSize: 'm',
-  preloaderType: 'default',
-  removeIcon: 'trash-can',
-  isDisabled: false,
-  areActionsDisabled: false,
-  isLoading: false,
-  shouldShowSize: true,
-  onClick,
-  onRemove,
-  fileInfo: {
-    name: 'Document_Filename.docx',
-    type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-    size: 1000000,
+const Story: FC<IFileItemProps> = (args) => (
+  <FileItem
+    {...args}
+    metadata={
+      <span>Обновлен {format(new Date(1712298796990), 'dd MMM, HH:mm', { locale: ru })}</span>
+    }
+    fileInfo={{
+      name: 'Document_Filename.docx',
+      type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      size: 1000000,
+    }}
+    onRemove={() => console.log('remove file')}
+    onClick={() => new Promise(() => console.log('download file'))}
+  />
+);
+
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/FileItem',
+  component: Story,
+  args: {
+    icon: undefined,
+    error: 'Страшная ошибка',
+    itemSize: 'm',
+    preloaderType: 'default',
+    removeIcon: 'trash-can',
+    isDisabled: false,
+    areActionsDisabled: false,
+    isLoading: false,
+    shouldShowSize: true,
+    info: 'Нет, Вы это видели вообще?',
   },
-  metadata: (
-    <span>Обновлен {format(new Date(1712298796990), 'dd MMM, HH:mm', { locale: ru })}</span>
-  ),
-  info: 'Нет, Вы это видели вообще?',
-};
-
-Default.argTypes = {
-  icon: { options: icons, control: 'select' },
-  removeIcon: { options: icons, control: 'select' },
-  itemSize: { options: FILE_ITEM_SIZES, control: 'inline-radio' },
-  preloaderType: { options: preloaderTypes, control: 'inline-radio' },
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'testId', 'tweakStyles', 'onRemove', 'onClick'],
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['fileInfo', 'metadata']),
+    },
+  },
+  argTypes: {
+    icon: { options: icons, control: 'select' },
+    removeIcon: { options: icons, control: 'select' },
+    itemSize: { options: FILE_ITEM_SIZES, control: 'inline-radio' },
+    preloaderType: { options: preloaderTypes, control: 'inline-radio' },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/FileItem/FileItem.tsx

@@ -3,12 +3,11 @@ import clsx from 'clsx';
 import { filesize } from 'filesize';
 import {
   addClickHandler,
-  addDataTestId,
+  addDataAttributes,
   isFunction,
   isNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IIcon, renderIcon } from '../Icon';
@@ -64,7 +63,7 @@ export const FileItem: FC<IFileItemProps> = ({
   data,
   tweakStyles,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakIconButtonStyles = useTweakStyles({
     tweakStyles,
@@ -104,8 +103,7 @@ export const FileItem: FC<IFileItemProps> = ({
         className={clsx(classes.fileItemWrapper, classes[itemSize], {
           [classes.disabled]: isDisabled,
         })}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
+        {...addDataAttributes(data, testId)}
         {...addClickHandler(handleClick, !isDisabled)}
       >
         <div className={classes.fileIcon}>{renderIcon(icon)}</div>