@true-engineering/true-react-common-ui-kit 4.0.0-alpha5 → 4.0.0-alpha51

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/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/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/constants.ts

@@ -1,20 +1,9 @@
 import { mimeTypes } from '../../constants';
-import { IComplexIcon } from '../Icon';
-import { type IFileIcon } from './types';
+import { IIconType } from '../Icon';
 
-export const FILE_ICONS = [
-  'file-excel',
-  'file-image',
-  'file-pdf',
-  'file-word',
-  'file-xml',
-  'file-zip',
-  'file-other',
-] satisfies IComplexIcon[];
+export const FILE_ICON_DEFAULT: IIconType = 'file-other';
 
-export const FILE_ICON_DEFAULT: IFileIcon = 'file-other';
-
-export const iconTypeMap: Record<string, IFileIcon> = {
+export const iconTypeMap: Record<string, IIconType> = {
   [mimeTypes.xls]: 'file-excel',
   [mimeTypes.xlsx]: 'file-excel',
   [mimeTypes.jpeg]: 'file-image',

package/src/components/FileItem/helpers.ts

@@ -1,7 +1,8 @@
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { IMimeType, mimeTypes } from '../../constants';
+import { IIconType } from '../Icon';
 import { FILE_ICON_DEFAULT, iconTypeMap } from './constants';
-import { IFileIcon, IFileInfo } from './types';
+import { IFileInfo } from './types';
 
 export const getFileExtensionByFilename = (fileName: string): string | undefined => {
   const splitFileName = fileName.split('.');
@@ -13,7 +14,7 @@ export const getMimeTypeByFilename = (fileName: string): string | undefined => {
   return isNotEmpty(ext) ? mimeTypes[ext as IMimeType] : undefined;
 };
 
-export const getFileIcon = ({ type, name }: IFileInfo): IFileIcon => {
+export const getFileIcon = ({ type, name }: IFileInfo): IIconType => {
   if (isNotEmpty(type) && type in iconTypeMap) {
     return iconTypeMap[type];
   }

package/src/components/FileItem/types.ts

@@ -1,4 +1,4 @@
-import { FILE_ICONS, FILE_ITEM_SIZES } from './constants';
+import { FILE_ITEM_SIZES } from './constants';
 
 export interface IFileInfo {
   name: File['name'];
@@ -6,6 +6,4 @@ export interface IFileInfo {
   size?: File['size'];
 }
 
-export type IFileIcon = (typeof FILE_ICONS)[number];
-
 export type IFileItemSize = (typeof FILE_ITEM_SIZES)[number];

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -1,5 +1,5 @@
-import { ReactNode, useState } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { FC, ReactNode, useState } from 'react';
+import { type Meta } from '@storybook/react';
 import { IMultiSelectListValues } from '../MultiSelectList';
 import { FiltersPane, IFiltersPaneProps } from './FiltersPane';
 import { FilterSelect } from './components';
@@ -8,11 +8,13 @@ import { ConfigType, IDatePeriod, IFiltersPaneSearchPayload, IPeriod } from './t
 const LONG_STRING = 'or veeeeeeeeery looooooooooooooooooooooooooooooooooooooooong';
 
 const convertVToString = (val: { v: string }): string => val.v;
+
 const convertVToNode = (val: { v: string }): ReactNode => (
   <b>
     <i>{val.v}</i>
   </b>
 );
+
 const fieldTranslates = {
   interval: 'Interval',
   name: 'Name',
@@ -57,8 +59,7 @@ const fetchOptionsMock = [
   'or vee444ee',
 ];
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-type ConfigValues = {
+interface ConfigValues extends Record<string, unknown> {
   name: string;
   date: IPeriod;
   select: string;
@@ -68,9 +69,10 @@ type ConfigValues = {
   isActive: boolean;
   selectSearch: string;
   custom: string;
-};
+}
 
-interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps<Values, Content> {
+interface IFiltersPaneCustomProps<Values extends Record<string, unknown>, Content>
+  extends IFiltersPaneProps<Values, Content> {
   containerWidth: number;
   isSearchDisabled: boolean;
   shouldShowSettingsButton: boolean;
@@ -78,9 +80,10 @@ interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps
   isGroupingEnabled: boolean;
   checkboxPosition: 'left' | 'right';
   isClearableFields: boolean;
+  isSearchAutoSized: boolean;
 }
 
-function FiltersPaneWithCustomProps<Values, Content>({
+const Story: FC<IFiltersPaneCustomProps<ConfigValues, unknown>> = ({
   containerWidth,
   isSearchDisabled,
   shouldShowSettingsButton,
@@ -88,8 +91,9 @@ function FiltersPaneWithCustomProps<Values, Content>({
   isGroupingEnabled,
   checkboxPosition,
   isClearableFields,
+  isSearchAutoSized,
   ...args
-}: IFiltersPaneWithCustomProps<Values, Content>) {
+}) => {
   const config: ConfigType<ConfigValues> = {
     name: {
       name: 'name',
@@ -238,6 +242,7 @@ function FiltersPaneWithCustomProps<Values, Content>({
           getValueView: convertFieldToString,
           onChange: setSearchValue,
           isDisabled: isSearchDisabled,
+          isAutoSized: isSearchAutoSized,
         }}
         enabledFilters={[
           'name',
@@ -260,11 +265,24 @@ function FiltersPaneWithCustomProps<Values, Content>({
       />
     </div>
   );
-}
+};
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Table/FiltersPane',
-  component: FiltersPaneWithCustomProps,
+  component: Story,
+  args: {
+    shouldShowSettingsButton: false,
+    isSearchDisabled: false,
+    hasClearButton: true,
+    isClearableFields: false,
+    isDisabled: false,
+    shouldRenderDataId: false,
+    containerWidth: 400,
+    withFieldNameInLabel: true,
+    isGroupingEnabled: true,
+    checkboxPosition: 'left',
+    isSearchAutoSized: false,
+  },
   argTypes: {
     containerWidth: {
       control: { type: 'range', min: 100, max: 1000, step: 100 },
@@ -276,20 +294,5 @@ export default {
   },
 };
 
-const Template: ComponentStory<typeof FiltersPaneWithCustomProps> = (args) => (
-  <FiltersPaneWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  shouldShowSettingsButton: false,
-  isSearchDisabled: false,
-  hasClearButton: true,
-  isClearableFields: false,
-  isDisabled: false,
-  containerWidth: 400,
-  withFieldNameInLabel: true,
-  isGroupingEnabled: true,
-  checkboxPosition: 'left',
-};
+export default meta;
+export const Default = {};

package/src/components/FiltersPane/FiltersPane.tsx

@@ -1,16 +1,20 @@
 import { useMemo } from 'react';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  getTestId,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Button } from '../Button';
-import { Icon } from '../Icon';
+import { IIcon, renderIcon } from '../Icon';
 import { FilterWrapper, IFiltersPaneSearchProps, FiltersPaneSearch } from './components';
 import { getLocale } from './helpers';
 import { ConfigType, IFilterLocaleKey, IPartialFilterLocale } from './types';
 import { useStyles, IFiltersPaneStyles, clearButtonStyles } from './FiltersPane.styles';
 
-export interface IFiltersPaneProps<Values, Content = Values>
+export interface IFiltersPaneProps<Values extends Record<string, unknown>, Content = Values>
   extends ICommonProps<IFiltersPaneStyles> {
   filtersConfig: ConfigType<Values>;
   enabledFilters?: Array<keyof ConfigType<Values>>;
@@ -23,6 +27,10 @@ export interface IFiltersPaneProps<Values, Content = Values>
   isDisabled?: boolean;
   /** @default true */
   hasClearButton?: boolean;
+  /** @default false */
+  shouldRenderDataId?: boolean;
+  /** @default 'filter' */
+  settingsIcon?: IIcon;
   onChangeFilters: (values: Partial<Values>) => void;
   onSettingsButtonClick?: () => void;
   onClear?: () => void;
@@ -39,6 +47,8 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   search,
   isDisabled = false,
   hasClearButton = true,
+  shouldRenderDataId = false,
+  settingsIcon = 'filter',
   testId,
   onChangeFilters,
   onSettingsButtonClick,
@@ -61,10 +71,10 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
 
   const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 
-  const filtersKeys = enabledFilters || Object.keys(filtersConfig);
+  const filtersKeys = enabledFilters ?? Object.keys(filtersConfig);
 
   const handleClear = () => {
-    if (onClear !== undefined) {
+    if (isNotEmpty(onClear)) {
       onClear();
       return;
     }
@@ -76,8 +86,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
 
   const shouldShowClearButton =
     hasClearButton &&
-    (search !== undefined ||
-      filtersKeys.filter((key) => filtersConfig[key] !== undefined).length > 0);
+    (isNotEmpty(search) || filtersKeys.some((key) => isNotEmpty(filtersConfig[key])));
 
   const clearButton = (
     <div className={classes.clear}>
@@ -95,7 +104,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   );
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       {/* Settings */}
       {onSettingsButtonClick !== undefined && (
         <div
@@ -104,9 +113,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
           {...addDataTestId(testId, 'settings-button')}
           onClick={!isDisabled ? onSettingsButtonClick : undefined}
         >
-          <div className={classes.settingsIcon}>
-            <Icon type="filter" />
-          </div>
+          <div className={classes.settingsIcon}>{renderIcon(settingsIcon)}</div>
         </div>
       )}
       {/* Search */}
@@ -122,10 +129,11 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
       {/* Filters */}
       {filtersKeys.map((key, index) => {
         const isLast = index === filtersKeys.length - 1;
-        const currentValue = values[key];
-        const filter = filtersConfig[key];
+        const filterKey = String(key);
+        const currentValue = values[filterKey];
+        const filter = filtersConfig[filterKey];
         if (filter === undefined) {
-          console.error(`enabledFilters содержит фильтр ${String(key)}, не описанный в конфиге`);
+          console.error(`enabledFilters содержит фильтр ${filterKey}, не описанный в конфиге`);
           if (isLast) {
             return clearButton;
           }
@@ -137,18 +145,19 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
             filter={filter}
             locale={locale}
             localeKey={localeKey}
-            onChange={(value) => onChangeFilters({ ...values, [key]: value })}
+            onChange={(value) => onChangeFilters({ ...values, [filterKey]: value })}
             value={currentValue}
-            key={key as string}
+            key={filterKey}
             isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
             tweakStyles={tweakFilterWrapperStyles}
-            testId={getTestId(testId, `filter-${String(key)}`)}
+            data={shouldRenderDataId ? { id: filterKey } : undefined}
+            testId={getTestId(testId, `filter-${filterKey}`)}
           />
         );
 
         if (isLast) {
           return (
-            <div className={classes.filterWithClearButton} key={key as string}>
+            <div className={classes.filterWithClearButton} key={filterKey}>
               {filterWrapper}
               {shouldShowClearButton && <>{clearButton}</>}
             </div>