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

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

package/src/components/FloatDocActions/FloatDocActions.stories.tsx

@@ -1,6 +1,7 @@
 import { FC, useState } from 'react';
 import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import type { Meta, StoryObj } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { Button } from '../Button';
 import { Checkbox, ICheckboxProps } from '../Checkbox';
 import { NewMoreMenu } from '../NewMoreMenu';
@@ -13,19 +14,7 @@ import { DOC_ACTIONS_VIEWS } from './components';
 
 const DATA_LENGTH = 300;
 
-const Actions: FC = () => (
-  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-    <TextButton icon="trash-can" view="custom">
-      Удалить
-    </TextButton>
-    <TextButton icon="pencil">Редактировать</TextButton>
-    <Button view="secondary">Отказать</Button>
-    <Button>Одобрить</Button>
-    <NewMoreMenu items={[]} />
-  </div>
-);
-
-const DocActionsWithData: FC<IFloatDocActionsProps> = (props) => {
+const Story: FC<IFloatDocActionsProps> = (args) => {
   const [isOpen, setIsOpen] = useState(false);
   const [state, setState] = useState<Set<number>>(new Set());
 
@@ -56,7 +45,7 @@ const DocActionsWithData: FC<IFloatDocActionsProps> = (props) => {
   };
 
   const isAllRowsSelected = state.size === DATA_LENGTH;
-  const title = props.title + ': ' + state.size;
+  const title = args.title + ': ' + state.size;
 
   return (
     <div style={{ display: 'flex', gap: '50px' }}>
@@ -78,14 +67,22 @@ const DocActionsWithData: FC<IFloatDocActionsProps> = (props) => {
         </table>
         <div style={{ position: 'sticky', bottom: '12px', left: '8px', right: '18px' }}>
           <FloatDocActionsComponent
-            {...props}
+            {...args}
             title={title}
             isOpen={isOpen}
             isChecked={isAllRowsSelected}
             isSemiChecked={!isAllRowsSelected && state.size !== 0}
             onSelect={handleSelectAll}
           >
-            <Actions />
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+              <TextButton icon="trash-can" view="custom">
+                Удалить
+              </TextButton>
+              <TextButton icon="calendar">Редактировать</TextButton>
+              <Button view="secondary">Отказать</Button>
+              <Button>Одобрить</Button>
+              <NewMoreMenu items={[]} />
+            </div>
           </FloatDocActionsComponent>
         </div>
       </div>
@@ -93,9 +90,9 @@ const DocActionsWithData: FC<IFloatDocActionsProps> = (props) => {
   );
 };
 
-const meta: Meta<typeof DocActionsWithData> = {
+const meta: Meta<typeof Story> = {
   title: 'Table/FloatDocActions',
-  component: DocActionsWithData,
+  component: Story,
   args: {
     title: 'Выбрано',
     view: 'neutral',
@@ -105,13 +102,10 @@ const meta: Meta<typeof DocActionsWithData> = {
   },
   parameters: {
     controls: {
-      exclude: ['actions'],
+      exclude: excludeStorybookParams(['actions']),
     },
   },
 };
 
 export default meta;
-
-type Story = StoryObj<typeof FloatDocActionsComponent>;
-
-export const Default: Story = {};
+export const Default = {};

package/src/components/Icon/Icon.stories.tsx

@@ -5,10 +5,6 @@ import { Icon } from './Icon';
 import { iconsMap } from './icons';
 import { IIconType } from './types';
 
-export default {
-  title: 'Data Display/Icon',
-};
-
 const GalleryIcon: FC<{ type: IIconType }> = ({ type }) => (
   <div
     key={type}
@@ -49,7 +45,7 @@ const GalleryIcon: FC<{ type: IIconType }> = ({ type }) => (
   </div>
 );
 
-export const Gallery = () => {
+const Story: FC = () => {
   const theme = useTheme();
   const notCustomizedIcons = Object.keys(iconsMap).filter((icon) =>
     isEmpty(theme.icons?.[icon]),
@@ -93,3 +89,11 @@ export const Gallery = () => {
     </div>
   );
 };
+
+const meta = {
+  title: 'Data Display/Icon',
+  component: Story,
+};
+
+export default meta;
+export const Default = {};

package/src/components/Icon/types.ts

@@ -4,7 +4,7 @@ import { iconsMap } from './icons';
 export type ISvgIcon = string;
 
 type IUiKitIconsMap = typeof iconsMap;
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface IIconsMap extends IUiKitIconsMap {}
 
 export type IIconType = keyof IIconsMap;

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,11 +1,11 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { iconsMap } from '../Icon';
+import { type Meta } from '@storybook/react';
+import { iconsMap, IIconType } from '../Icon';
 import { IconButton } from './IconButton';
 import { ICON_BUTTON_SIZES, ICON_BUTTON_VIEWS } from './constants';
 
-const icons = Object.keys(iconsMap);
+const icons = Object.keys(iconsMap) as IIconType[];
 
-export default {
+const meta: Meta<typeof IconButton> = {
   title: 'Buttons/IconButton',
   component: IconButton,
   args: {
@@ -21,11 +21,7 @@ export default {
     size: { options: ICON_BUTTON_SIZES, control: 'inline-radio' },
     view: { options: ICON_BUTTON_VIEWS, control: 'inline-radio' },
   },
-  parameters: {
-    controls: {
-      exclude: ['tweakStyles', 'testId', 'data'],
-    },
-  },
-} as ComponentMeta<typeof IconButton>;
+};
 
-export const Default: ComponentStory<typeof IconButton> = (args) => <IconButton {...args} />;
+export default meta;
+export const Default = {};

package/src/components/IncrementInput/IncrementInput.stories.tsx

@@ -1,31 +1,31 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { IncrementInput } from './IncrementInput';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { IIncrementInputProps, IncrementInput } from './IncrementInput';
 
-export default {
-  title: 'Inputs/IncrementInput',
-  component: IncrementInput,
-};
-
-const Template: ComponentStory<typeof IncrementInput> = (args) => {
+const Story: FC<IIncrementInputProps> = (args) => {
   const [value, setValue] = useState<number>();
   return <IncrementInput {...args} value={value} onChange={(v) => setValue(v)} />;
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  min: 0,
-  max: 99,
-  step: 1,
-  intPartPrecision: 10,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
-  icon: 'question',
-  isClearable: true,
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/IncrementInput',
+  component: Story,
+  args: {
+    min: 0,
+    max: 99,
+    step: 1,
+    intPartPrecision: 10,
+    label: 'Label',
+    placeholder: 'Placeholder',
+    isInvalid: false,
+    errorMessage: 'Error Text',
+    isDisabled: false,
+    isRequired: false,
+    isReadonly: false,
+    icon: 'information',
+    isClearable: true,
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/Input/Input.stories.tsx

@@ -1,38 +1,17 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { GROUP_PLACEMENTS } from '../ControlWrapper';
 import { iconsMap } from '../Icon';
 import { IInputProps, Input } from './Input';
 
 const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
-const groupPositions = [
-  undefined,
-  'top',
-  'bottom',
-  'top-left',
-  'top-right',
-  'bottom-left',
-  'bottom-right',
-  'left',
-  'right',
-  'middle',
-];
+
 const masks = [undefined, '99/99', 'aaa-aaa', '***+***'];
-const icons = [undefined, ...Object.keys(iconsMap)];
 
-export default {
-  title: 'Inputs/Input',
-  component: Input,
-  argTypes: {
-    type: { control: 'radio', options: types },
-    icon: { control: 'select', options: icons },
-    mask: { control: 'select', options: masks },
-    groupPositions: { control: 'select', options: groupPositions },
-  },
-};
+const icons = [undefined, ...Object.keys(iconsMap)];
 
-const Template: ComponentStory<typeof Input> = (args) => {
+const Story: FC<IInputProps> = (args) => {
   const [value, setValue] = useState('');
-
   return (
     <div style={{ width: 300 }}>
       <Input {...args} value={value} onChange={setValue} />
@@ -40,39 +19,34 @@ const Template: ComponentStory<typeof Input> = (args) => {
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  infoMessage: 'Message Info',
-  type: 'text',
-  isInvalid: false,
-  units: '',
-  errorMessage: 'Error Text',
-  isActive: false,
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
-  isClearable: false,
-  isLoading: false,
-  isAutoSized: false,
-  shouldAlwaysShowPlaceholder: false,
-  groupPlacement: undefined,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'testId',
-      'data',
-      'tabIndex',
-      'onChange',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onKeyDown',
-      'onIconClick',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/Input',
+  component: Story,
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    infoMessage: 'Message Info',
+    type: 'text',
+    isInvalid: false,
+    units: '',
+    errorMessage: 'Error Text',
+    isActive: false,
+    isDisabled: false,
+    isRequired: false,
+    isReadonly: false,
+    isClearable: false,
+    isLoading: false,
+    isAutoSized: false,
+    shouldAlwaysShowPlaceholder: false,
+    groupPlacement: undefined,
+  },
+  argTypes: {
+    type: { control: 'radio', options: types },
+    icon: { control: 'select', options: icons },
+    mask: { control: 'select', options: masks },
+    groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/List/List.stories.tsx

@@ -1,13 +1,15 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { colors } from '../../theme';
-import { List } from './List';
+import { IListProps, List } from './List';
 import { IListItemProps as IListItem } from './components';
 
 const listItems: IListItem[] = [
   {
     item: 'Печатать билет',
     onClick: console.log,
-    icon: 'sign-out',
+    icon: 'filter',
   },
   { item: 'Выписать', onClick: console.log, withIconGap: true },
   {
@@ -62,20 +64,7 @@ const listItems: IListItem[] = [
   },
 ];
 
-export default {
-  title: 'Data Display/List',
-  component: List,
-  args: {
-    items: listItems,
-  },
-  parameters: {
-    controls: {
-      exclude: ['data', 'tweakStyles', 'testId', 'onClick'],
-    },
-  },
-} as ComponentMeta<typeof List>;
-
-export const Default: ComponentStory<typeof List> = (args) => (
+const Story: FC<IListProps> = (args) => (
   <div
     style={{
       border: '1px dotted rgba(0,0,0,.2)',
@@ -88,3 +77,19 @@ export const Default: ComponentStory<typeof List> = (args) => (
     <List {...args} />
   </div>
 );
+
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/List',
+  component: Story,
+  args: {
+    items: listItems,
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['items']),
+    },
+  },
+};
+
+export default meta;
+export const Default = {};

package/src/components/List/List.styles.ts

@@ -1,4 +1,4 @@
-import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
 import { IWithPopupStyles } from '../WithPopup';
 
 export const useStyles = createThemedStyles('List', {
@@ -8,6 +8,7 @@ export const useStyles = createThemedStyles('List', {
     padding: [8, 0],
     listStyle: 'none',
     margin: 0,
+    textAlign: 'left',
   },
 
   nestedItems: {