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

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,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/NewMoreMenu/NewMoreMenu.tsx

@@ -1,7 +1,6 @@
 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 { Icon } from '../Icon';
@@ -63,8 +62,7 @@ export const NewMoreMenu: FC<INewMoreMenuProps> = ({
             [classes.active]: triggerProps.isActive,
           })}
           disabled={triggerProps.isDisabled}
-          {...addDataTestId(testId)}
-          {...addDataAttributes(data)}
+          {...addDataAttributes(data, testId)}
           {...referenceProps}
         >
           <div className={classes.icon}>

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

@@ -1,11 +1,11 @@
 import { FC, ReactNode } from 'react';
 import clsx from 'clsx';
 import {
+  addDataAttributes,
   addDataTestId,
   isReactNodeNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { Icon, IIcon, renderIcon } from '../Icon';
 import { INotificationType } from './types';
@@ -49,8 +49,7 @@ export const Notification: FC<INotificationProps> = ({
         [classes.withTitle]: hasTitle,
         [classes.withText]: hasText,
       })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       {hasIcon && (
         <div className={classes.icon}>

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