@true-engineering/true-react-common-ui-kit 4.0.0-alpha6 → 4.0.0-alpha61

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.styles.ts

@@ -1,4 +1,3 @@
-import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { IDatePickerStyles } from '../../../DatePicker';
@@ -6,6 +5,7 @@ import { innerTextButtonStyles } from '../../FiltersPane.styles';
 
 export const useStyles = createThemedStyles('FilterWithDates', {
   root: {
+    width: 320,
     background: colors.CLASSIC_WHITE,
     position: 'relative',
     zIndex: 20,
@@ -32,12 +32,12 @@ export const useStyles = createThemedStyles('FilterWithDates', {
   datepicker: {},
 });
 
-export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
+export const clearButtonStyles = structuredClone(innerTextButtonStyles);
 
 export const backButtonStyles = innerTextButtonStyles;
 
 const PICKER_TOP_MARGIN = 28;
-const PICKER_WITH_BUTTONS_TOP_MARGIN = 60;
+const PICKER_WITH_BUTTONS_TOP_MARGIN = 56;
 const START_PICKER_LEFT_MARGIN = -20;
 const END_PICKER_LEFT_MARGIN = -170;
 

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx

@@ -1,9 +1,11 @@
 import { FC, useMemo, useRef, useState } from 'react';
 import { isAfter, isBefore } from 'date-fns';
-import enUS from 'date-fns/locale/en-US';
-import ru from 'date-fns/locale/ru';
-import { getTestId, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
+import { enUS, ru } from 'date-fns/locale';
+import {
+  getTestId,
+  isNotEmpty,
+  addDataAttributes,
+} from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Button } from '../../../Button';
@@ -128,12 +130,12 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
   };
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       <div className={classes.container}>
         <div className={classes.containerItem}>
           <DatePicker
             selectedDate={value?.from}
-            maxDate={value?.to}
+            maxDate={value?.to ?? undefined}
             label={translates.from}
             months={translates.months}
             locale={dateLocale}
@@ -149,7 +151,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
             selectedDate={value?.to}
             label={translates.to}
             months={translates.months}
-            minDate={value?.from}
+            minDate={value?.from ?? undefined}
             locale={dateLocale}
             onChangeDate={handleChangeTo}
             tweakStyles={tweakEndDatePickerStyles}

package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx

@@ -1,4 +1,5 @@
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { PERIODS, PERIODS_GETTERS } from '../../constants';
@@ -146,12 +147,12 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
             locale={translates}
             tweakStyles={tweakSelectStyles}
             getValueView={getPeriodTranslate}
-            testId={testId !== undefined ? `${testId}-select` : undefined}
+            testId={getTestId(testId, 'select')}
           />
         </div>
       )}
       {isDatePickerShown && (
-        <div className={classes.picker} style={{ width: 320 }} ref={refDatePicker}>
+        <div className={classes.picker} ref={refDatePicker}>
           <FilterWithDates
             onStartBtnSubmit={() => {
               setIsDatePickerShown(false);
@@ -168,7 +169,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
             onChange={handleCustomDateChange}
             localeKey={localeKey}
             locale={translates}
-            testId={testId !== undefined ? `${testId}-dates` : undefined}
+            testId={getTestId(testId, 'dates')}
           />
         </div>
       )}

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -1,8 +1,11 @@
 import { MouseEventHandler } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
-import { useTweakStyles } from '../../../../hooks';
+import {
+  addDataAttributes,
+  getTestId,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { useMixedStyles, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
 import { WithPopup } from '../../../WithPopup';
@@ -12,8 +15,10 @@ import { FilterValueView } from '../FilterValueView';
 import { isContentNotEmpty } from './helpers';
 import { useStyles, IFilterWrapperStyles } from './FilterWrapper.styles';
 
-export interface IFilterWrapperProps<Values, Key extends keyof Values>
-  extends ICommonProps<IFilterWrapperStyles> {
+export interface IFilterWrapperProps<
+  Values extends Record<string, unknown>,
+  Key extends keyof Values,
+> extends ICommonProps<IFilterWrapperStyles> {
   filter: ConfigItem<Values[Key]>;
   value?: Values[Key];
   isDisabled?: boolean;
@@ -22,7 +27,7 @@ export interface IFilterWrapperProps<Values, Key extends keyof Values>
   onChange: <V>(value: V) => void;
 }
 
-export function FilterWrapper<Values, Key extends keyof Values>({
+export function FilterWrapper<Values extends Record<string, unknown>, Key extends keyof Values>({
   filter,
   value,
   isDisabled,
@@ -30,9 +35,10 @@ export function FilterWrapper<Values, Key extends keyof Values>({
   localeKey,
   data,
   testId,
-  tweakStyles,
+  tweakStyles: baseTweakStyles,
   onChange,
 }: IFilterWrapperProps<Values, Key>): JSX.Element {
+  const tweakStyles = useMixedStyles(baseTweakStyles, filter.tweakWrapperStyles);
   const classes = useStyles({ theme: tweakStyles });
 
   const tweakWithPopupStyles = useTweakStyles({
@@ -91,8 +97,7 @@ export function FilterWrapper<Values, Key extends keyof Values>({
             [classes.boolean]: isBoolean,
             [classes.disabled]: isDisabled,
           })}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
+          {...addDataAttributes(data, testId)}
           {...referenceProps}
         >
           <div
@@ -100,13 +105,13 @@ export function FilterWrapper<Values, Key extends keyof Values>({
             className={clsx(classes.item, { [classes.booleanItem]: isBoolean })}
           >
             <div className={classes.name}>{filter.name}</div>
-            {!isBoolean && value !== undefined && value !== null && (
+            {!isBoolean && isNotEmpty(value) && (
               <div className={classes.value}>
                 <FilterValueView
                   value={value}
                   filter={filter}
-                  localeKey={localeKey}
                   locale={locale}
+                  localeKey={localeKey}
                   testId={getTestId(testId, 'value')}
                   tweakStyles={tweakFilterValueViewStyles}
                 />
@@ -137,8 +142,8 @@ export function FilterWrapper<Values, Key extends keyof Values>({
         <Filter
           value={value}
           filter={filter}
-          localeKey={localeKey}
           locale={locale}
+          localeKey={localeKey}
           onClose={onClose}
           onChange={onChange}
           testId={testId}

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.ts

@@ -33,6 +33,11 @@ export const useStyles = createThemedStyles('FiltersPaneSearch', {
     },
   },
 
+  hasValue: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN,
+  },
+
   selectWrapper: {
     position: 'relative',
     display: 'flex',

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.tsx

@@ -1,6 +1,13 @@
 import { ReactNode, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { addDataAttributes } from '../../../../helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  getTestId,
+  isArrayLikeNotEmpty,
+  isArrayNotEmpty,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
@@ -29,6 +36,7 @@ export interface IFiltersPaneSearchProps<Value> extends ICommonProps<IFiltersPan
   hasClearSelectButton?: boolean;
   isDisabled?: boolean;
   isSelectSearchEnabled?: boolean;
+  isAutoSized?: boolean;
 }
 
 export function FiltersPaneSearch<Value>({
@@ -44,6 +52,7 @@ export function FiltersPaneSearch<Value>({
   hasClearSelectButton,
   isDisabled = false,
   isSelectSearchEnabled = true,
+  isAutoSized = false,
   maxLength,
   data,
   tweakStyles,
@@ -89,20 +98,15 @@ export function FiltersPaneSearch<Value>({
     setIsOpen(false);
   };
 
-  const selectedFieldLabel = useMemo(
-    () => (field !== undefined && getValueView !== undefined ? getValueView(field) : undefined),
-    [field],
-  );
-
   return (
     <div
       className={clsx(classes.root, {
         [classes.focused]: isInputFocused,
         [classes.disabled]: isDisabled,
+        [classes.hasValue]: isArrayLikeNotEmpty(value),
       })}
       ref={refRoot}
-      data-testid={testId}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <SearchInput
         value={value}
@@ -111,26 +115,22 @@ export function FiltersPaneSearch<Value>({
         tweakStyles={tweakSearchInputStyles}
         onFocus={() => setIsInputFocused(true)}
         onBlur={() => setIsInputFocused(false)}
-        testId={testId !== undefined ? `${testId}-input` : undefined}
+        testId={getTestId(testId, 'input')}
         maxLength={maxLength}
         isDisabled={isDisabled}
+        isAutoSized={isAutoSized}
       />
 
       <div className={classes.selectWrapper}>
         {/* Select block */}
-        {fields.length > 0 && (
+        {isArrayNotEmpty(fields) && (
           <div
             className={classes.selectBlock}
             onClick={!isDisabled ? () => setIsOpen(!isOpen) : undefined}
-            data-testid={testId !== undefined ? `${testId}-select` : undefined}
+            {...addDataTestId(testId, 'select')}
           >
-            <div
-              className={clsx(
-                classes.selectLabel,
-                selectedFieldLabel !== undefined && classes.active,
-              )}
-            >
-              {selectedFieldLabel ?? translates.displayedFields}
+            <div className={clsx(classes.selectLabel, { [classes.active]: isNotEmpty(field) })}>
+              {isNotEmpty(field) ? getValueView?.(field) : translates.displayedFields}
             </div>
             <div className={clsx(classes.chevronIcon, isOpen && classes.open)}>
               <Icon type="chevron-down" />
@@ -152,7 +152,7 @@ export function FiltersPaneSearch<Value>({
               onChange={handleFieldsChange}
               isSearchEnabled={isSelectSearchEnabled}
               hasClearButton={hasClearSelectButton}
-              testId={testId !== undefined ? `${testId}-dropdown` : undefined}
+              testId={getTestId(testId, 'dropdown')}
             />
           </div>
         )}

package/src/components/FiltersPane/helpers.ts

@@ -1,4 +1,4 @@
-import merge from 'lodash-es/merge';
+import { merge } from '@true-engineering/true-react-platform-helpers';
 import { DEFAULT_LOCALE, DEFAULT_SELECT_LOCALE, FilterLocales, SelectLocales } from './constants';
 import {
   type IFilterLocale,
@@ -12,13 +12,13 @@ export const getLocale = (
   key: IFilterLocaleKey = DEFAULT_LOCALE,
   custom?: IPartialFilterLocale,
   custom2?: IPartialFilterLocale,
-): IFilterLocale => merge({}, FilterLocales[key], custom, custom2);
+): IFilterLocale => merge(FilterLocales[key], custom, custom2);
 
 export const getSelectLocale = (
   key: ISelectLocaleKey = DEFAULT_SELECT_LOCALE,
   custom?: Partial<ISelectLocale>,
   custom2?: Partial<ISelectLocale>,
-): ISelectLocale => merge({}, SelectLocales[key], custom, custom2);
+): ISelectLocale => merge(SelectLocales[key], custom, custom2);
 
 export const sortValues = (arr: Array<number | undefined>): Array<number | undefined> =>
   arr.includes(undefined) ? arr : (arr as number[]).sort((a, b) => (a < b ? -1 : 1));

package/src/components/FiltersPane/index.ts

@@ -1,5 +1,6 @@
 export * from './FiltersPane';
 export type { IFiltersPaneStyles } from './FiltersPane.styles';
 export * from './types';
+export { PERIODS, PERIODS_GETTERS } from './constants';
 // TODO : подумать над тем чтобы вынести это все наружу
 export * from './components';

package/src/components/FiltersPane/types.ts

@@ -1,12 +1,15 @@
 import { FC, ReactNode } from 'react';
+import { ITestIdProps } from '../../types';
 import { IDatePickerProps } from '../DatePicker';
 import { IMultiSelectListValues } from '../MultiSelectList';
+import { INumberInputProps } from '../NumberInput';
 import type {
   IFilterIntervalProps,
   IFilterMultiSelectProps,
   IFilterSelectProps,
   IFilterWithDatesProps,
   IFilterWithPeriodProps,
+  IFilterWrapperStyles,
 } from './components';
 import { FilterLocales, PERIODS, SelectLocales } from './constants';
 
@@ -47,17 +50,19 @@ export type MultiSelectOptionType<Value> = Value | undefined extends
   : unknown;
 
 export interface IConfigItemBasicBase<Value> {
-  name: string;
+  name: ReactNode;
   isInline?: boolean;
   isClearable?: boolean;
   requiredFilledFilters?: string[];
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
   getSelectedValueView?: (v: Value) => ReactNode;
+  tweakWrapperStyles?: IFilterWrapperStyles;
 }
 
 export type IIntervalConfigItem<Value> = IConfigItemBasicBase<Value> & {
   type: 'interval';
+  name: string;
 } & Omit<IFilterIntervalProps, 'value' | 'onChange' | 'labelName'>;
 
 export interface IBooleanConfigItem<Value> extends IConfigItemBasicBase<Value> {
@@ -84,7 +89,7 @@ export type IDateRangeConfigItem<Value> = IConfigItemBasicBase<Value> & {
   dateFormat?: string;
 } & Omit<IFilterWithPeriodProps, 'value' | 'onChange' | 'setIsOpen'>;
 
-export interface ICustomComponentProps<Value> {
+export interface ICustomComponentProps<Value> extends ITestIdProps {
   value?: Value;
   onChange: (v?: Value) => void;
   onClose?: () => void;
@@ -98,7 +103,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>;
@@ -106,7 +110,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>;
@@ -173,3 +176,8 @@ export type IFilterWithDateDatePickerProps = Omit<
   IDatePickerProps,
   'onChange' | 'value' | 'locale' | 'months' | 'selectedDate' | 'tweakStyles'
 >;
+
+export type IFilterNumberInputProps = Omit<
+  INumberInputProps,
+  'onChange' | 'value' | 'label' | 'testId' | 'tweakStyles'
+>;

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 '' */

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 = {};