@true-engineering/true-react-common-ui-kit 4.0.0-alpha7 → 4.0.0-alpha70

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

@@ -3,12 +3,11 @@ import { RemoveScroll } from 'react-remove-scroll';
 import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
 import {
-  addDataTestId,
+  addDataAttributes,
   getTestId,
   isArrayNotEmpty,
   isReactNodeNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IconButton } from '../IconButton';
@@ -17,7 +16,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;
@@ -142,8 +141,7 @@ export const Modal: FC<IModalProps> = ({
               [classes.fixedPosition]: position !== 'static',
             })}
             style={{ zIndex }}
-            {...addDataTestId(testId)}
-            {...addDataAttributes(data)}
+            {...addDataAttributes(data, testId)}
           >
             <div
               ref={overlay}

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

@@ -1,7 +1,6 @@
 import { FC, MouseEvent, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes, getTestId } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles, useOnClickOutsideWithRef } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
@@ -71,8 +70,7 @@ export const MoreMenu: FC<IMoreMenuProps> = ({
           [classes.active]: isMenuShown,
         })}
         onClick={!isButtonDisabled ? toggleMenu : undefined}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
+        {...addDataAttributes(data, testId)}
       >
         <div className={classes.icon}>
           <Icon type="menu" />

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

@@ -1,7 +1,6 @@
 import { useRef, useState } from 'react';
 import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useOnClickOutside, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import {
@@ -76,8 +75,7 @@ export function MultiSelect<Value = string>({
         isRequired && classes.required,
         isDisabled && classes.disabled,
       )}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       {/* Input */}
       <MultiSelectInput

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,19 @@
-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 { IExtendableProps } from '../../types';
+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 SIZES = ['micro'] as const;
 
-const menuItems = [
+declare module '../List/types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface IListSizes extends IExtendableProps<typeof SIZES> {}
+}
+
+const menuItems: IListItem[] = [
   { item: 'Печатать билет', onClick: console.log },
   { item: 'Выписать', onClick: console.log },
   { item: 'Аннулировать', onClick: console.log, shouldDrawSpacerBelow: true },
@@ -31,15 +27,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 +59,28 @@ 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,
+    listSize: undefined,
+  },
+  argTypes: {
+    placement: { control: 'select', options: placements },
+    listSize: { options: [undefined, ...SIZES], control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['items', 'middlewares']),
+    },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/NewMoreMenu/NewMoreMenu.tsx

@@ -1,12 +1,12 @@
 import { FC } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isArrayEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes, isArrayEmpty } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
+import { ICommonProps, IRenderNode } from '../../types';
 import { Icon } from '../Icon';
-import { IListItem, List } from '../List';
+import { IListItem, IListSize, List } from '../List';
 import { IWithPopupProps, WithPopup } from '../WithPopup';
+import { IWithPopupTriggerProps } from '../WithPopup/types';
 import { useStyles, INewMoreMenuStyles } from './NewMoreMenu.styles';
 
 export interface INewMoreMenuProps
@@ -21,6 +21,8 @@ export interface INewMoreMenuProps
     >,
     ICommonProps<INewMoreMenuStyles> {
   items: IListItem[];
+  renderTrigger?: IRenderNode<IWithPopupTriggerProps>;
+  listSize?: IListSize;
   /** @default false */
   isDisabled?: boolean;
   /** @default true */
@@ -31,8 +33,8 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
   items,
   isDisabled = false,
   hasDefaultStateBackground = true,
-  data,
-  testId,
+  renderTrigger,
+  listSize,
   tweakStyles,
   ...rest
 }) => {
@@ -50,30 +52,33 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
     currentComponentName: 'NewMoreMenu',
   });
 
+  const defaultTrigger = ({ triggerProps, referenceProps }: IWithPopupTriggerProps) => (
+    <button
+      className={clsx(classes.button, {
+        [classes.hasCircle]: hasDefaultStateBackground,
+        [classes.disabled]: triggerProps.isDisabled,
+        [classes.active]: triggerProps.isActive,
+      })}
+      disabled={triggerProps.isDisabled}
+      {...addDataAttributes(triggerProps.data, triggerProps.testId)}
+      {...referenceProps}
+    >
+      <div className={classes.icon}>
+        <Icon type="menu" />
+      </div>
+    </button>
+  );
+
   return (
     <WithPopup
       isDisabled={isDisabled || isArrayEmpty(items)}
       tweakStyles={tweakWithPopupStyles}
       {...rest}
-      trigger={({ triggerProps, referenceProps }) => (
-        <button
-          className={clsx(classes.button, {
-            [classes.hasCircle]: hasDefaultStateBackground,
-            [classes.disabled]: triggerProps.isDisabled,
-            [classes.active]: triggerProps.isActive,
-          })}
-          disabled={triggerProps.isDisabled}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
-          {...referenceProps}
-        >
-          <div className={classes.icon}>
-            <Icon type="menu" />
-          </div>
-        </button>
-      )}
+      trigger={renderTrigger ?? defaultTrigger}
     >
-      {({ onClose }) => <List items={items} tweakStyles={tweakListStyles} onClick={onClose} />}
+      {({ onClose }) => (
+        <List items={items} size={listSize} tweakStyles={tweakListStyles} onClick={onClose} />
+      )}
     </WithPopup>
   );
 };