@true-engineering/true-react-common-ui-kit 4.0.0-alpha5 → 4.0.0-alpha51

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/Modal/Modal.tsx

@@ -17,7 +17,7 @@ import { useStyles, IModalStyles, closeButtonStyles } from './Modal.styles';
 
 export interface IModalProps extends ICommonProps<IModalStyles>, IModalTransitionProps {
   title?: ReactNode;
-  /** @default 'l */
+  /** @default 'l' */
   size?: 'l' | 'm' | 's';
   /** @default false */
   isFooterSticky?: boolean;

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

package/src/components/MultiSelectList/MultiSelectList.tsx

@@ -1,8 +1,13 @@
 import { useEffect, useState, useMemo, useRef, useCallback, ReactNode } from 'react';
 import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
-import { isArrayNotEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  getTestId,
+  isArrayNotEmpty,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useIsMounted, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Button } from '../Button';
@@ -330,7 +335,7 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
     !isLoading && (isArrayNotEmpty(allOptions) || isArrayNotEmpty(chosenValues));
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput
@@ -339,16 +344,13 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
             onChange={handleOnChange}
             tweakStyles={tweakSearchInputStyles}
             maxLength={searchMaxLength}
-            testId={testId !== undefined ? `${testId}-search` : undefined}
+            testId={getTestId(testId, 'search')}
             shouldFocusOnMount
           />
         </div>
       )}
       {shouldShowOptionsList && (
-        <div
-          className={classes.list}
-          data-testid={testId !== undefined ? `${testId}-list` : undefined}
-        >
+        <div className={classes.list} {...addDataTestId(testId, 'list')}>
           {/* Выбранные */}
           {hasSelectedOptionsGroup && (
             <>
@@ -379,8 +381,9 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
                       value={val}
                       tweakStyles={tweakCheckboxStyles}
                       labelPosition={checkboxPosition === 'left' ? 'right' : 'left'}
+                      data={{ id }}
                     >
-                      <div className={classes.option} data-option={id}>
+                      <div className={classes.option} {...addDataAttributes({ option: id })}>
                         {view}
                       </div>
                     </Checkbox>
@@ -417,8 +420,9 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
                       value={val}
                       tweakStyles={tweakCheckboxStyles}
                       labelPosition={checkboxPosition === 'left' ? 'right' : 'left'}
+                      data={{ id }}
                     >
-                      <div className={classes.option} data-option={id}>
+                      <div className={classes.option} {...addDataAttributes({ option: id })}>
                         {view}
                       </div>
                     </Checkbox>
@@ -449,7 +453,7 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
             onClick={handleClear}
             size="s"
             view="text"
-            testId={testId !== undefined ? `${testId}-clear-button` : undefined}
+            testId={getTestId(testId, 'clear-button')}
             tweakStyles={tweakClearButtonStyles}
           >
             {translates.clear}

package/src/components/MultiSelectList/helpers.ts

@@ -1,4 +1,4 @@
-import merge from 'lodash-es/merge';
+import { merge } from '@true-engineering/true-react-platform-helpers';
 import { DEFAULT_LOCALE, MultiSelectLocales } from './constants';
 import type { IMultiSelectLocale, IMultiSelectLocaleKey } from './types';
 
@@ -8,4 +8,4 @@ export const getLocale = (
   key: IMultiSelectLocaleKey = DEFAULT_LOCALE,
   custom?: Partial<IMultiSelectLocale>,
   custom2?: Partial<IMultiSelectLocale>,
-): IMultiSelectLocale => merge({}, MultiSelectLocales[key], custom, custom2);
+): IMultiSelectLocale => merge(MultiSelectLocales[key], custom, custom2);

package/src/components/NewMoreMenu/NewMoreMenu.stories.tsx

@@ -1,23 +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 { NewMoreMenu } from './NewMoreMenu';
+import { IListItem } from '../List';
+import { INewMoreMenuProps, NewMoreMenu } from './NewMoreMenu';
 
-const positions = [
-  'top',
-  'bottom',
-  'right',
-  'left',
-  'top-start',
-  'top-end',
-  'bottom-start',
-  'bottom-end',
-  'right-start',
-  'right-end',
-  'left-start',
-  'left-end',
-];
-
-const menuItems = [
+const menuItems: IListItem[] = [
   { item: 'Печатать билет', onClick: console.log },
   { item: 'Выписать', onClick: console.log },
   { item: 'Аннулировать', onClick: console.log, shouldDrawSpacerBelow: true },
@@ -31,15 +19,22 @@ const menuItems = [
   },
 ];
 
-export default {
-  title: 'Data Display/NewMoreMenu',
-  component: NewMoreMenu,
-  argTypes: {
-    placement: { control: 'select', options: positions },
-  },
-};
+const placements = [
+  'top',
+  'bottom',
+  'right',
+  'left',
+  'top-start',
+  'top-end',
+  'bottom-start',
+  'bottom-end',
+  'right-start',
+  'right-end',
+  'left-start',
+  'left-end',
+];
 
-const Template: ComponentStory<typeof NewMoreMenu> = (args) => (
+const Story: FC<INewMoreMenuProps> = (args) => (
   <div
     style={{
       display: 'flex',
@@ -56,19 +51,26 @@ const Template: ComponentStory<typeof NewMoreMenu> = (args) => (
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  canBeFlipped: false,
-  isDisabled: false,
-  hasDefaultStateBackground: true,
-  placement: 'bottom-end',
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['items', 'middlewares', 'testId', 'data'],
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/NewMoreMenu',
+  component: Story,
+  args: {
+    canBeFlipped: false,
+    isDisabled: false,
+    hasDefaultStateBackground: true,
+    placement: 'bottom-end',
+    shouldRenderInBody: false,
+    shouldHideOnScroll: false,
+  },
+  argTypes: {
+    placement: { control: 'select', options: placements },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['items', 'middlewares']),
+    },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/Notification/Notification.stories.tsx

@@ -1,51 +1,52 @@
-import { Meta, Story } from '@storybook/react';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
+import { iconsMap } from '../Icon';
 import { INotificationProps, Notification } from './Notification';
 
-const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
-
-const lorem = 'Lorem ipsum dolor, sit amet consectetur adipisicing';
-
-interface IStory extends INotificationProps {
+interface INotificationCustomProps extends INotificationProps {
   shouldUseChildrenInstead: boolean;
 }
 
-export default {
+const Story: FC<INotificationCustomProps> = ({
+  shouldUseChildrenInstead,
+  title,
+  text,
+  ...args
+}) => (
+  <Notification
+    {...args}
+    title={!shouldUseChildrenInstead ? title : undefined}
+    text={!shouldUseChildrenInstead ? text : undefined}
+  >
+    {shouldUseChildrenInstead ? (
+      <div>
+        Some childrens with <a href="google.com">tags</a>
+      </div>
+    ) : undefined}
+  </Notification>
+);
+
+const meta: Meta<typeof Story> = {
   title: 'Data Display/Notification',
-  component: Notification,
+  component: Story,
   args: {
     title: 'Notification title',
-    text: lorem,
+    text: 'Lorem ipsum dolor, sit amet consectetur adipisicing',
     size: 's',
     type: 'info',
     isFullWidth: false,
     shouldUseChildrenInstead: false,
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['s', 'm', 'l'] },
-    icon: { options: icons, control: 'select' },
-    type: {
-      control: 'inline-radio',
-      options: ['error', 'info', 'warning', 'ok', 'not-ok', 'custom'],
+    icon: { options: [undefined, ...Object.keys(iconsMap)], control: 'select' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['children']),
     },
   },
-} as Meta<IStory>;
-
-export const Default: Story<IStory> = ({ title, text, shouldUseChildrenInstead, ...args }) => {
-  const children = (
-    <div>
-      Some childrens with <a href="google.com">tags</a>
-    </div>
-  );
-
-  return (
-    <Notification
-      {...args}
-      title={!shouldUseChildrenInstead ? title : undefined}
-      text={!shouldUseChildrenInstead ? text : undefined}
-    >
-      {shouldUseChildrenInstead ? children : undefined}
-    </Notification>
-  );
 };
+
+export default meta;
+export const Default = {};

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -1,33 +1,37 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { NumberInput } from './NumberInput';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { INumberInputProps, NumberInput } from './NumberInput';
 
-export default {
-  title: 'Inputs/NumberInput',
-  component: NumberInput,
-};
-
-const Template: ComponentStory<typeof NumberInput> = (args) => {
+const Story: FC<INumberInputProps> = (args) => {
   const [value, setValue] = useState<number>();
-  return <NumberInput {...args} value={value} onChange={(v) => setValue(v)} />;
+  return (
+    <div style={{ width: 300 }}>
+      <NumberInput {...args} value={value} onChange={(v) => setValue(v)} />
+    </div>
+  );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  min: 0,
-  max: 9999,
-  precision: 3,
-  intPartPrecision: 7,
-  canBeFloat: false,
-  canBeNegative: false,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  infoMessage: 'Message Info',
-  units: 'RUB',
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/NumberInput',
+  component: Story,
+  args: {
+    min: 0,
+    max: 9999,
+    precision: 3,
+    intPartPrecision: 7,
+    canBeFloat: false,
+    canBeNegative: false,
+    label: 'Label',
+    placeholder: 'Placeholder',
+    infoMessage: 'Message Info',
+    units: 'RUB',
+    isInvalid: false,
+    errorMessage: 'Error Text',
+    isDisabled: false,
+    isRequired: false,
+    isReadonly: false,
+  },
 };
+
+export default meta;
+export const Default = {};