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

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/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: {

package/src/components/Modal/Modal.stories.tsx

@@ -1,20 +1,24 @@
 import { FC, useState } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { Button } from '../Button';
 import { IModalProps, Modal } from './Modal';
 
 const smallText =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+
 const text =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.';
-const largeText = [...text, ...text, ...text];
+
+const largeText = `${text}${text}${text}`;
+
 const texts = { small: smallText, medium: text, large: largeText };
 
-export interface IModalWithCustomProps extends IModalProps {
+export interface IModalCustomProps extends IModalProps {
   textSize: 'small' | 'medium' | 'large';
 }
 
-const ModalWithCustomProps: FC<IModalWithCustomProps> = ({ size, textSize, ...args }) => {
+const Story: FC<IModalCustomProps> = ({ size, textSize, ...args }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isSecondModalOpen, setIsSecondModalOpen] = useState(false);
 
@@ -27,26 +31,28 @@ const ModalWithCustomProps: FC<IModalWithCustomProps> = ({ size, textSize, ...ar
         {...args}
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
-        buttons={[
-          <Button
-            key="1"
-            view="secondary"
-            onClick={() => setIsModalOpen(false)}
-            size={size === 's' ? 'm' : 'l'}
-          >
-            Отмена
-          </Button>,
-          <Button
-            key="2"
-            size={size === 's' ? 'm' : 'l'}
-            onClick={() => {
-              setIsModalOpen(false);
-              setIsSecondModalOpen(true);
-            }}
-          >
-            Применить
-          </Button>,
-        ]}
+        footer={
+          <>
+            <Button
+              key="1"
+              view="secondary"
+              onClick={() => setIsModalOpen(false)}
+              size={size === 's' ? 'm' : 'l'}
+            >
+              Отмена
+            </Button>
+            <Button
+              key="2"
+              size={size === 's' ? 'm' : 'l'}
+              onClick={() => {
+                setIsModalOpen(false);
+                setIsSecondModalOpen(true);
+              }}
+            >
+              Применить
+            </Button>
+          </>
+        }
       >
         <div style={{ lineHeight: 1.6 }}>{texts[textSize]}</div>
       </Modal>
@@ -58,48 +64,33 @@ const ModalWithCustomProps: FC<IModalWithCustomProps> = ({ size, textSize, ...ar
   );
 };
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Feedback/Modal',
-  component: Modal,
+  component: Story,
+  args: {
+    title: 'Some modal title',
+    size: 'm',
+    textSize: 'small',
+    buttonsAlign: 'right',
+    shouldCloseOnEsc: true,
+    hasOverlay: true,
+    hasCloseButton: true,
+    shouldCloseOnOverlayClick: true,
+    shouldBlockScroll: true,
+    isFooterSticky: false,
+  },
   argTypes: {
-    buttonsAlign: {
-      control: 'inline-radio',
-      options: ['left', 'center', 'right'],
-    },
     textSize: {
       control: 'inline-radio',
       options: ['small', 'medium', 'large'],
     },
-    size: { control: 'inline-radio', options: ['s', 'm', 'l'] },
-    position: {
-      control: 'inline-radio',
-      options: ['center', 'left', 'right', 'static'],
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['items']),
     },
   },
 };
 
-const Template: ComponentStory<typeof ModalWithCustomProps> = (args) => (
-  <div
-    style={{
-      border: '1px dotted rgba(0,0,0,.2)',
-      height: 1000, // чтобы был скролл на странице
-    }}
-  >
-    <ModalWithCustomProps {...args} />
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  title: 'Some modal title',
-  size: 'm',
-  textSize: 'small',
-  buttonsAlign: 'right',
-  shouldCloseOnEsc: true,
-  hasOverlay: true,
-  hasCloseButton: true,
-  shouldCloseOnOverlayClick: true,
-  shouldBlockScroll: true,
-  isFooterSticky: false,
-};
+export default meta;
+export const Default = {};

package/src/components/MoreMenu/MoreMenu.stories.tsx

@@ -1,8 +1,11 @@
-import { ComponentStory } from '@storybook/react';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { colors } from '../../theme';
-import { MoreMenu } from './MoreMenu';
+import { IListItem } from '../List';
+import { IMoreMenuProps, MoreMenu } from './MoreMenu';
 
-const menuItems = [
+const items: IListItem[] = [
   { item: 'Печатать билет', onClick: console.log },
   { item: 'Выписать', onClick: console.log },
   { item: 'Аннулировать', onClick: console.log, shouldDrawSpacerBelow: true },
@@ -16,12 +19,7 @@ const menuItems = [
   },
 ];
 
-export default {
-  title: 'Data Display/MoreMenu',
-  component: MoreMenu,
-};
-
-const Template: ComponentStory<typeof MoreMenu> = (args) => (
+const Story: FC<IMoreMenuProps> = (args) => (
   <div
     style={{
       display: 'flex',
@@ -33,14 +31,25 @@ const Template: ComponentStory<typeof MoreMenu> = (args) => (
   >
     <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
       <div style={{ flexShrink: 0 }}>Test subject</div>
-      <MoreMenu {...args} items={menuItems} />
+      <MoreMenu {...args} />
     </div>
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  isDisabled: false,
-  hasDefaultStateBackground: true,
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/MoreMenu',
+  component: Story,
+  args: {
+    items,
+    isDisabled: false,
+    hasDefaultStateBackground: true,
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['items']),
+    },
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/MultiSelect/MultiSelect.stories.tsx

@@ -1,14 +1,7 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { MultiSelect } from './MultiSelect';
-
-export default {
-  title: 'Controls/MultiSelect',
-  component: MultiSelect,
-  argTypes: {
-    corners: { control: 'inline-radio', options: ['full', 'left', 'right'] },
-  },
-};
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
+import { IMultiSelectProps, MultiSelect } from './MultiSelect';
 
 const stringOptions = [
   'Опция 1',
@@ -22,7 +15,7 @@ const stringOptions = [
   '4',
 ];
 
-const Template: ComponentStory<typeof MultiSelect> = (args) => {
+const Story: FC<IMultiSelectProps> = (args) => {
   const [value, setValue] = useState<string[]>([]);
 
   return (
@@ -35,12 +28,22 @@ const Template: ComponentStory<typeof MultiSelect> = (args) => {
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  placeholder: 'Placeholder',
-  corners: 'full',
-  isInvalid: false,
-  isDisabled: false,
-  isRequired: false,
+const meta: Meta<typeof Story> = {
+  title: 'Controls/MultiSelect',
+  component: Story,
+  args: {
+    placeholder: 'Placeholder',
+    corners: 'full',
+    isInvalid: false,
+    isDisabled: false,
+    isRequired: false,
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['items']),
+    },
+  },
 };
+
+export default meta;
+export const Default = {};