@true-engineering/true-react-common-ui-kit 4.0.0-alpha44 → 4.0.0-alpha46

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,7 +1,7 @@
-import { useState } from 'react';
+import { FC, useState } from 'react';
 import { ru } from 'date-fns/locale';
-import { ComponentStory } from '@storybook/react';
-import { DatePicker } from './DatePicker';
+import { type Meta } from '@storybook/react';
+import { DatePicker, IDatePickerProps } from './DatePicker';
 
 const months = [
   'Январь',
@@ -18,19 +18,9 @@ const months = [
   'Декабрь',
 ];
 
-export default {
-  title: 'Inputs/DatePicker',
-  component: DatePicker,
-};
-
-const Template: ComponentStory<typeof DatePicker> = (args) => {
+const Story: FC<IDatePickerProps> = (args) => {
   const [date, setDate] = useState<Date | null>(null);
 
-  const [startDate, setStartDate] = useState<Date | null>(
-    args.startDate ? new Date(args.startDate) : null,
-  );
-  const [endDate, setEndDate] = useState<Date | null>(args.endDate ? new Date(args.endDate) : null);
-
   return (
     <div
       style={{
@@ -50,52 +40,25 @@ const Template: ComponentStory<typeof DatePicker> = (args) => {
           testId="datepicker"
           months={months}
           selectedDate={date}
-          startDate={startDate}
-          endDate={endDate}
           minDate={new Date()}
           onChangeDate={setDate}
-          onChangeRange={(dates) => {
-            setStartDate(dates?.[0] ?? null);
-            setEndDate(dates?.[1] ?? null);
-          }}
         />
       </div>
     </div>
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Дата',
-  isRange: false,
-  isClearable: true,
-  shouldRenderPopperInBody: false,
-  popperPlacement: 'bottom-start',
-};
-
-Default.argTypes = {
-  popperPlacement: {
-    options: [
-      'bottom-start',
-      'bottom',
-      'bottom-end',
-      'top-start',
-      'top',
-      'top-end',
-      'right-start',
-      'right',
-      'right-end',
-      'left-start',
-      'left',
-      'left-end',
-    ],
-    control: 'select',
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/DatePicker',
+  component: Story,
+  args: {
+    label: 'Дата',
+    isRange: false,
+    isClearable: true,
+    shouldRenderPopperInBody: false,
+    popperPlacement: 'bottom-start',
   },
 };
 
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'testId', 'tabIndex', 'onFocus', 'onBlur', 'onPaste', 'onKeyDown'],
-  },
-};
+export default meta;
+export const Default = {};

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,58 +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 { iconsMap } from '../Icon';
 import { FileItem, IFileItemProps } from './FileItem';
 
-export default {
-  title: 'Data Display/FileItem',
-  component: FileItem,
-};
-
 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/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,9 @@ type ConfigValues = {
   isActive: boolean;
   selectSearch: string;
   custom: string;
-};
+}
 
-interface IFiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content>
+interface IFiltersPaneCustomProps<Values extends Record<string, unknown>, Content>
   extends IFiltersPaneProps<Values, Content> {
   containerWidth: number;
   isSearchDisabled: boolean;
@@ -82,7 +83,7 @@ interface IFiltersPaneWithCustomProps<Values extends Record<string, unknown>, Co
   isSearchAutoSized: boolean;
 }
 
-function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content>({
+const Story: FC<IFiltersPaneCustomProps<ConfigValues, unknown>> = ({
   containerWidth,
   isSearchDisabled,
   shouldShowSettingsButton,
@@ -92,7 +93,7 @@ function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Cont
   isClearableFields,
   isSearchAutoSized,
   ...args
-}: IFiltersPaneWithCustomProps<Values, Content>) {
+}) => {
   const config: ConfigType<ConfigValues> = {
     name: {
       name: 'name',
@@ -264,11 +265,24 @@ function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Cont
       />
     </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 },
@@ -280,22 +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,
-  shouldRenderDataId: false,
-  containerWidth: 400,
-  withFieldNameInLabel: true,
-  isGroupingEnabled: true,
-  checkboxPosition: 'left',
-  isSearchAutoSized: false,
-};
+export default meta;
+export const Default = {};

package/src/components/FiltersPane/components/Filter/Filter.tsx

@@ -72,7 +72,7 @@ export function Filter<Values extends Record<string, unknown>, Key extends keyof
   }
 
   if (filter.type === 'multiSelect') {
-    const preparedValue = isMultiSelectValue<any>(value) ? value : undefined; // eslint-disable-line @typescript-eslint/no-explicit-any
+    const preparedValue = isMultiSelectValue<any>(value) ? value : undefined;
 
     return (
       <FilterMultiSelect

package/src/components/FiltersPane/components/Filter/helpers.ts

@@ -4,15 +4,15 @@ import { IDatePeriod, IFilterMultiSelectValues, IPeriod } from '../../types';
 const isDateOrEmpty = (value: unknown): value is Date | null | undefined =>
   isEmpty(value) || value instanceof Date;
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const isDatePeriodValue = (value: any): value is IDatePeriod =>
   isDateOrEmpty(value?.from) && isDateOrEmpty(value?.to);
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const isPeriodValue = (value: any): value is IPeriod =>
   isString(value?.periodType) && isDatePeriodValue(value);
 
 export const isMultiSelectValue = <T extends string>(
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   value: any,
 ): value is IFilterMultiSelectValues<T> => Array.isArray(value?.include);

package/src/components/FiltersPane/types.ts

@@ -101,7 +101,6 @@ export type CustomComponent<Value> = FC<ICustomComponentProps<Value>>;
 export type ICustomValue<V> = V extends Array<infer T> ? T : never;
 
 export interface ICustomRangeConfigItem<Value> extends IConfigItemBasicBase<Value> {
-  // eslint-disable-next-line @typescript-eslint/ban-types
   [key: string & {}]: any;
   type: 'custom';
   component: CustomComponent<Value>;
@@ -109,7 +108,6 @@ export interface ICustomRangeConfigItem<Value> extends IConfigItemBasicBase<Valu
 }
 
 export interface ICustomMultipleConfigItem<Value> extends IConfigItemBasicBase<Value> {
-  // eslint-disable-next-line @typescript-eslint/ban-types
   [key: string & {}]: any;
   type: 'custom';
   component: CustomComponent<Value>;

package/src/components/Flag/Flag.stories.tsx

@@ -1,30 +1,25 @@
+import { FC } from 'react';
 import { countries } from 'country-flag-icons';
-import { ComponentStory } from '@storybook/react';
-import { Flag } from './Flag';
+import { type Meta } from '@storybook/react';
+import { Flag, IFlagProps } from './Flag';
 import { customFlags } from './customFlags';
 
-export default {
-  title: 'Data Display/Flag',
-  component: Flag,
-  argTypes: {
-    countryCode: { control: 'select', options: [...countries, ...Object.keys(customFlags)] },
-  },
-};
-
-const Template: ComponentStory<typeof Flag> = (args) => (
+const Story: FC<IFlagProps> = (args) => (
   <div style={{ width: 60, height: 40 }}>
     <Flag {...args} />
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  countryCode: 'ug',
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['data'],
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/Flag',
+  component: Story,
+  args: {
+    countryCode: 'ug',
+  },
+  argTypes: {
+    countryCode: { control: 'select', options: [...countries, ...Object.keys(customFlags)] },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/Flag/Flag.tsx

@@ -1,10 +1,10 @@
 import { FC } from 'react';
 import { hasFlag } from 'country-flag-icons';
-import Flags from 'country-flag-icons/react/3x2';
+import * as Flags from 'country-flag-icons/react/3x2';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { customFlags } from './customFlags';
-import { useStyles, IFlagStyles } from './Flag.styles';
+import { IFlagStyles, useStyles } from './Flag.styles';
 
 export interface IFlagProps extends Pick<ICommonProps<IFlagStyles>, 'tweakStyles'> {
   /** @default '' */