@true-engineering/true-react-common-ui-kit 4.0.0-alpha43 → 4.0.0-alpha45

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/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/FlexibleTable/FlexibleTable.stories.tsx

@@ -1,14 +1,9 @@
 import { FC } from 'react';
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { FlexibleTable } from './FlexibleTable';
+import { type Meta } from '@storybook/react';
+import { FlexibleTable, IFlexibleTableProps } from './FlexibleTable';
 import { IFlexibleTableConfigType, IValueComponentProps } from './types';
 
-export default {
-  title: 'Table/FlexibleTable',
-  component: FlexibleTable,
-} as ComponentMeta<typeof FlexibleTable>;
-
 interface ITableContent {
   contractCode: string;
   validFrom: Date;
@@ -77,7 +72,7 @@ const config: IFlexibleTableConfigType<ITableContent> = {
 
 const content: ITableContent[] = [
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE1',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -91,7 +86,7 @@ const content: ITableContent[] = [
     publicNote: 'Public Note',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE2',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -104,7 +99,7 @@ const content: ITableContent[] = [
     note: 'Only Note',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE3',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -117,7 +112,7 @@ const content: ITableContent[] = [
     publicNote: 'Only Public Note',
   },
   {
-    contractCode: 'SOME_CODE_1',
+    contractCode: 'SOME_CODE4',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -129,7 +124,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE5',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -141,7 +136,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE6',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -153,7 +148,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE7',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -165,7 +160,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE8',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -177,7 +172,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE9',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -189,7 +184,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE10',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -201,7 +196,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE11',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -213,7 +208,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE12',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -225,7 +220,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'OB_UT_M119',
+    contractCode: 'OB_UT_M13',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -237,7 +232,7 @@ const content: ITableContent[] = [
     status: 'Active',
   },
   {
-    contractCode: 'SOME_CODE',
+    contractCode: 'SOME_CODE14',
     validFrom: new Date('2015-05-18'),
     validTo: new Date('2020-05-18'),
     title: 'Название',
@@ -250,13 +245,15 @@ const content: ITableContent[] = [
   },
 ];
 
-const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) => (
+const Story: FC<IFlexibleTableProps<ITableContent, unknown, 'contractCode'>> = (args) => (
   <div style={{ width: 700, overflow: 'auto' }}>
     <FlexibleTable<ITableContent>
       {...args}
       config={config}
       content={content}
       rowAttributes={['contractCode']}
+      enabledColumns={undefined}
+      uniqueField="contractCode"
       expandableRowComponent={(_0, _1, close) => (
         <div onClick={close}>
           всем привет :)
@@ -268,33 +265,33 @@ const Template: ComponentStory<typeof FlexibleTable<ITableContent>> = (args) =>
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  isLoading: false,
-  isFirstColumnSticky: true,
-  isHorizontallyScrollable: true,
-  isExpandableRowComponentInitiallyOpen: false,
-};
-
-Default.argTypes = {
-  isExpandableRowComponentInitiallyOpen: { control: 'boolean' },
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'data',
-      'testId',
-      'content',
-      'config',
-      'rowAttributes',
-      'headerContent',
-      'tweakStyles',
-      'onHeadClick',
-      'onRowClick',
-      'onRowHover',
-      'expandableRowComponent',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Table/FlexibleTable',
+  component: Story,
+  args: {
+    isLoading: false,
+    isFirstColumnSticky: true,
+    isHorizontallyScrollable: true,
+    isExpandableRowComponentInitiallyOpen: false,
+  },
+  parameters: {
+    controls: {
+      exclude: [
+        'data',
+        'testId',
+        'content',
+        'config',
+        'rowAttributes',
+        'headerContent',
+        'tweakStyles',
+        'onHeadClick',
+        'onRowClick',
+        'onRowHover',
+        'expandableRowComponent',
+      ],
+    },
   },
 };
+
+export default meta;
+export const Default = {};