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

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -1,23 +1,18 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
 import { IExtendableProps } from '../../types';
-import { RadioButton } from './RadioButton';
+import { IRadioButtonProps, RadioButton } from './RadioButton';
 
-const RADIO_SIZES = [undefined, 'micro'] as const;
-
-export default {
-  title: 'Controls/RadioButton',
-  component: RadioButton,
-};
+const options = ['one', 'two', 'three'];
+const SIZES = [undefined, 'micro'] as const;
 
 declare module './types' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface IRadioButtonSizes extends IExtendableProps<typeof RADIO_SIZES> {}
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface IRadioButtonSizes extends IExtendableProps<typeof SIZES> {}
 }
 
-const options = ['one', 'two', 'three'];
-
-const Template: ComponentStory<typeof RadioButton> = (args) => {
+const Story: FC<IRadioButtonProps<string>> = (args) => {
   const [activeIdx, setActiveIdx] = useState(0);
 
   return (
@@ -38,22 +33,24 @@ const Template: ComponentStory<typeof RadioButton> = (args) => {
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Label',
-  size: undefined,
-  // isChecked: false,
-  isInvalid: false,
-  isDisabled: false,
-};
-
-Default.argTypes = {
-  size: { options: [undefined, ...RADIO_SIZES], control: 'inline-radio' },
-};
-
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'value', 'groupName', 'isChecked', 'onChange'],
+const meta: Meta<typeof Story> = {
+  title: 'Controls/RadioButton',
+  component: Story,
+  args: {
+    children: 'Label',
+    size: undefined,
+    isInvalid: false,
+    isDisabled: false,
+  },
+  argTypes: {
+    size: { options: [undefined, ...SIZES], control: 'inline-radio' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['value', 'groupName', 'isChecked']),
+    },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/RadioButton/types.ts

@@ -1,4 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface IRadioButtonSizes {}
 
 export type IRadioButtonSize = keyof IRadioButtonSizes;

package/src/components/ScrollIntoViewIfNeeded/ScrollIntoViewIfNeeded.ts

@@ -1,4 +1,12 @@
-import { createElement, createRef, HTMLProps, PureComponent, ReactNode, RefObject } from 'react';
+import {
+  createElement,
+  createRef,
+  DOMElement,
+  HTMLProps,
+  PureComponent,
+  ReactNode,
+  RefObject,
+} from 'react';
 import scrollIntoViewIfNeeded, { StandardBehaviorOptions } from 'scroll-into-view-if-needed';
 import {
   ScrollIntoViewIfNeededDefaultElementType,
@@ -13,25 +21,25 @@ export interface IScrollIntoViewIfNeededProps extends HTMLProps<HTMLElement> {
 }
 
 export class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoViewIfNeededProps> {
-  node: RefObject<HTMLElement> = createRef();
-
   public static defaultProps: IScrollIntoViewIfNeededProps = ScrollIntoViewIfNeededDefaultProps;
 
-  componentDidMount() {
+  node: RefObject<HTMLElement> = createRef();
+
+  componentDidMount(): void {
     const { active } = this.props;
     if (active) {
       this.handleScrollIntoViewIfNeeded();
     }
   }
 
-  componentDidUpdate({ active }: IScrollIntoViewIfNeededProps) {
+  componentDidUpdate({ active }: IScrollIntoViewIfNeededProps): void {
     const { active: isNowActive } = this.props;
     if (!active && isNowActive) {
       this.handleScrollIntoViewIfNeeded();
     }
   }
 
-  handleScrollIntoViewIfNeeded = () => {
+  handleScrollIntoViewIfNeeded = (): void => {
     const { options } = this.props;
     const { current: node } = this.node;
 
@@ -40,7 +48,7 @@ export class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoViewIfNeede
     }
   };
 
-  render() {
+  render(): DOMElement<any, any> {
     const { active, elementType, children, options, ...wrapperProps } = this.props;
 
     return createElement(
@@ -50,5 +58,3 @@ export class ScrollIntoViewIfNeeded extends PureComponent<IScrollIntoViewIfNeede
     );
   }
 }
-
-export default ScrollIntoViewIfNeeded;

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -1,13 +1,8 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { SearchInput } from './SearchInput';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { ISearchInputProps, SearchInput } from './SearchInput';
 
-export default {
-  title: 'Inputs/SearchInput',
-  component: SearchInput,
-};
-
-const Template: ComponentStory<typeof SearchInput> = (args) => {
+const Story: FC<ISearchInputProps> = (args) => {
   const [value, setValue] = useState('');
   return (
     <div style={{ width: 320 }}>
@@ -16,9 +11,14 @@ const Template: ComponentStory<typeof SearchInput> = (args) => {
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  placeholder: 'Поиск',
-  isAutoSized: false,
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/SearchInput',
+  component: Story,
+  args: {
+    placeholder: 'Поиск',
+    isAutoSized: false,
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/Select/CustomSelect.stories.tsx

@@ -1,13 +1,13 @@
-import { useState } from 'react';
+import { FC, useState } from 'react';
 import { createUseStyles } from 'react-jss';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { type ComponentMeta, type ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { Button, type IButtonStyles } from '../Button';
 import { type IInputStyles, Input } from '../Input';
 import { TextButton } from '../TextButton';
 import { type ISelectProps, Select } from './Select';
 
-interface ISelectWithCustomProps<Option> extends ISelectProps<Option> {
+interface ISelectCustomProps<Option> extends ISelectProps<Option> {
   shouldUsePopper?: boolean;
   shouldRenderInBody?: boolean;
   shouldHideOnScroll?: boolean;
@@ -136,15 +136,15 @@ function CustomListFooter({ onReset, onClear }: ICustomListFooterProps) {
   );
 }
 
-function SelectWithCustomProps({
+const Story: FC<ISelectCustomProps<string>> = ({
   noMatchesLabel,
   shouldUsePopper,
   shouldRenderInBody,
   shouldHideOnScroll,
   canBeFlipped,
   scrollParent,
-  ...restProps
-}: ISelectWithCustomProps<string>) {
+  ...args
+}) => {
   const classes = useSelectStyles();
   const [inputValue, setInputValue] = useState<string>();
   const [options, setOptions] = useState<string[]>([]);
@@ -185,7 +185,7 @@ function SelectWithCustomProps({
   );
 
   const props = {
-    ...restProps,
+    ...args,
     onChange: setInputValue,
     value: inputValue,
     options,
@@ -214,38 +214,34 @@ function SelectWithCustomProps({
       }}
     />
   );
-}
+};
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Controls/Select',
-  component: SelectWithCustomProps,
+  component: Story,
+  args: {
+    label: 'Dropdown',
+    noMatchesLabel: 'No matches',
+    isInvalid: false,
+    errorMessage: '',
+    isDisabled: false,
+    isRequired: false,
+    isClearable: false,
+    shouldUsePopper: false,
+    shouldRenderInBody: false,
+    shouldHideOnScroll: false,
+    shouldScrollToList: true,
+    canBeFlipped: false,
+    scrollParent: 'document',
+    size: undefined,
+  },
   argTypes: {
     scrollParent: {
       options: ['document', 'auto'],
       control: { type: 'select' },
     },
   },
-} as ComponentMeta<typeof SelectWithCustomProps>;
-
-const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
-  <SelectWithCustomProps {...args} />
-);
-
-export const CustomSelect = Template.bind({});
-
-CustomSelect.args = {
-  label: 'Dropdown',
-  noMatchesLabel: 'No matches',
-  isInvalid: false,
-  errorMessage: '',
-  isDisabled: false,
-  isRequired: false,
-  isClearable: false,
-  shouldUsePopper: false,
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-  shouldScrollToList: true,
-  canBeFlipped: false,
-  scrollParent: 'document',
-  size: undefined,
 };
+
+export default meta;
+export const CustomSelect = {};

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

@@ -1,6 +1,7 @@
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactElement, ReactNode, useEffect, useState } from 'react';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+import { GROUP_PLACEMENTS } from '../ControlWrapper';
 import { iconsMap } from '../Icon';
 import { IMultipleSelectProps, Select } from './Select';
 
@@ -10,8 +11,6 @@ interface ObjectValue {
   isDisabled?: boolean;
 }
 
-const groupPlacements = [undefined, 'left', 'right', 'middle'];
-
 const genLetters = (qnt = 1): string =>
   Math.random()
     .toString(36)
@@ -61,7 +60,7 @@ const icons = [undefined, ...Object.keys(iconsMap)];
 const getRandomInt = (min: number, max: number) =>
   Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min))) + Math.ceil(min);
 
-interface ISelectWithCustomProps<T> extends IMultipleSelectProps<T> {
+interface ISelectCustomProps<T> extends IMultipleSelectProps<T> {
   valuesType: 'strings' | 'objects';
   shouldUseReactNodes?: boolean;
   shouldUsePopper?: boolean;
@@ -73,7 +72,7 @@ interface ISelectWithCustomProps<T> extends IMultipleSelectProps<T> {
   scrollParent?: 'document' | 'auto';
 }
 
-function SelectWithCustomProps<T>({
+function Story<T>({
   valuesType,
   optionsMode,
   shouldUseReactNodes,
@@ -85,8 +84,8 @@ function SelectWithCustomProps<T>({
   canBeFlipped,
   scrollParent,
   noMatchesLabel,
-  ...rest
-}: ISelectWithCustomProps<T>) {
+  ...args
+}: ISelectCustomProps<T>): ReactElement {
   const [stringValue, setStringValue] = useState<string[]>();
 
   const stringHandler = (newValue?: string[]) => {
@@ -160,7 +159,7 @@ function SelectWithCustomProps<T>({
 
   return (
     <Select
-      {...rest}
+      {...args}
       {...(props as unknown as IMultipleSelectProps<any>)}
       {...(shouldRenderSearchInputInList && {
         searchInput: { shouldRenderInList: true },
@@ -182,14 +181,41 @@ function SelectWithCustomProps<T>({
   );
 }
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Controls/Select',
-  component: SelectWithCustomProps,
+  component: Story,
+  args: {
+    label: 'Dropdown',
+    noMatchesLabel: 'No matches',
+    isInvalid: false,
+    errorMessage: 'Error Text',
+    icon: 'filter',
+    defaultOptionLabel: '',
+    allOptionsLabel: 'Все опции',
+    isDisabled: false,
+    isRequired: false,
+    isClearable: false,
+    isLoading: false,
+    debounceTime: 400,
+    // custom options
+    shouldUseReactNodes: false,
+    valuesType: 'strings',
+    optionsMode: 'normal',
+    shouldUsePopper: false,
+    shouldRenderInBody: false,
+    shouldHideOnScroll: false,
+    shouldUseCustomIsDisabledFunction: false,
+    shouldRenderSearchInputInList: false,
+    shouldScrollToList: true,
+    canBeFlipped: false,
+    scrollParent: 'document',
+    size: undefined,
+  },
   argTypes: {
     debounceTime: {
       control: { type: 'range', min: 0, max: 1000, step: 100 },
     },
-    groupPlacement: { control: 'select', options: groupPlacements },
+    groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
     optionsMode: {
       control: 'inline-radio',
       options: ['normal', 'search', 'dynamic'],
@@ -200,38 +226,7 @@ export default {
     },
     icon: { control: 'select', options: icons },
   },
-} as ComponentMeta<typeof SelectWithCustomProps>;
-
-const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
-  <SelectWithCustomProps {...args} />
-);
-
-export const MultiSelect = Template.bind({});
-
-MultiSelect.args = {
-  label: 'Dropdown',
-  noMatchesLabel: 'No matches',
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  icon: 'document',
-  defaultOptionLabel: '',
-  allOptionsLabel: 'Все опции',
-  isDisabled: false,
-  isRequired: false,
-  isClearable: false,
-  isLoading: false,
-  debounceTime: 400,
-  // custom options
-  shouldUseReactNodes: false,
-  valuesType: 'strings',
-  optionsMode: 'normal',
-  shouldUsePopper: false,
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-  shouldUseCustomIsDisabledFunction: false,
-  shouldRenderSearchInputInList: false,
-  shouldScrollToList: true,
-  canBeFlipped: false,
-  scrollParent: 'document',
-  size: undefined,
 };
+
+export default meta;
+export const MultiSelect = {};

package/src/components/Select/Select.stories.tsx

@@ -1,6 +1,7 @@
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactElement, ReactNode, useEffect, useState } from 'react';
 import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+import { GROUP_PLACEMENTS } from '../ControlWrapper';
 import { iconsMap } from '../Icon';
 import { ISelectProps, Select } from './Select';
 
@@ -10,8 +11,6 @@ interface ObjectValue {
   isDisabled?: boolean;
 }
 
-const groupPlacements = [undefined, 'left', 'right', 'middle'];
-
 const genLetters = (qnt = 1): string =>
   Math.random()
     .toString(36)
@@ -61,7 +60,7 @@ const icons = [undefined, ...Object.keys(iconsMap)];
 const getRandomInt = (min: number, max: number) =>
   Math.floor(Math.random() * (Math.floor(max) - Math.ceil(min))) + Math.ceil(min);
 
-interface ISelectWithCustomProps<T> extends ISelectProps<T> {
+interface ISelectCustomProps<T> extends ISelectProps<T> {
   valuesType: 'strings' | 'objects';
   shouldUseReactNodes?: boolean;
   shouldUsePopper?: boolean;
@@ -73,7 +72,7 @@ interface ISelectWithCustomProps<T> extends ISelectProps<T> {
   scrollParent?: 'document' | 'auto';
 }
 
-function SelectWithCustomProps<T>({
+function Story<T>({
   valuesType,
   optionsMode,
   shouldUseReactNodes,
@@ -85,8 +84,8 @@ function SelectWithCustomProps<T>({
   canBeFlipped,
   scrollParent,
   noMatchesLabel,
-  ...rest
-}: ISelectWithCustomProps<T>) {
+  ...args
+}: ISelectCustomProps<T>): ReactElement {
   const [stringValue, setStringValue] = useState<string>();
   const stringHandler = (newValue?: string) => {
     console.log('change');
@@ -158,7 +157,7 @@ function SelectWithCustomProps<T>({
 
   return (
     <Select
-      {...rest}
+      {...args}
       {...(props as unknown as ISelectProps<any>)}
       {...(shouldRenderSearchInputInList && {
         searchInput: { shouldRenderInList: true },
@@ -179,14 +178,41 @@ function SelectWithCustomProps<T>({
   );
 }
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Controls/Select',
-  component: SelectWithCustomProps,
+  component: Story,
+  args: {
+    label: 'Dropdown',
+    defaultOptionLabel: 'Default Option',
+    noMatchesLabel: 'No matches',
+    isInvalid: false,
+    errorMessage: 'Error Text',
+    isDisabled: false,
+    isReadonly: false,
+    isRequired: false,
+    isClearable: false,
+    isLoading: false,
+    debounceTime: 400,
+    icon: undefined,
+    // custom options
+    shouldUseReactNodes: false,
+    valuesType: 'strings',
+    optionsMode: 'normal',
+    shouldUsePopper: false,
+    shouldRenderInBody: false,
+    shouldHideOnScroll: false,
+    shouldUseCustomIsDisabledFunction: false,
+    shouldRenderSearchInputInList: false,
+    shouldScrollToList: true,
+    canBeFlipped: false,
+    scrollParent: 'document',
+    size: undefined,
+  },
   argTypes: {
     debounceTime: {
       control: { type: 'range', min: 0, max: 1000, step: 100 },
     },
-    groupPlacement: { control: 'select', options: groupPlacements },
+    groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
     optionsMode: {
       control: 'inline-radio',
       options: ['normal', 'search', 'dynamic'],
@@ -197,38 +223,7 @@ export default {
     },
     icon: { control: 'select', options: icons },
   },
-} as ComponentMeta<typeof SelectWithCustomProps>;
-
-const Template: ComponentStory<typeof SelectWithCustomProps> = (args) => (
-  <SelectWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Dropdown',
-  defaultOptionLabel: 'Default Option',
-  noMatchesLabel: 'No matches',
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isDisabled: false,
-  isReadonly: false,
-  isRequired: false,
-  isClearable: false,
-  isLoading: false,
-  debounceTime: 400,
-  icon: undefined,
-  // custom options
-  shouldUseReactNodes: false,
-  valuesType: 'strings',
-  optionsMode: 'normal',
-  shouldUsePopper: false,
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-  shouldUseCustomIsDisabledFunction: false,
-  shouldRenderSearchInputInList: false,
-  shouldScrollToList: true,
-  canBeFlipped: false,
-  scrollParent: 'document',
-  size: undefined,
 };
+
+export default meta;
+export const Default = {};

package/src/components/Select/Select.tsx

@@ -61,7 +61,7 @@ export interface ISelectProps<Value>
   dropdownOptions?: IDropdownWithPopperOptions;
   /** @default 'chevron-down' */
   dropdownIcon?: IIcon;
-  options: Value[] | Readonly<Value[]>;
+  options: Value[] | readonly Value[];
   value: Value | undefined;
   /** @default true */
   shouldScrollToList?: boolean;
@@ -280,32 +280,6 @@ export function Select<Value>(
     handleListOpen();
   };
 
-  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-    // Когда что-то блокирует открытие листа, но блур все равно должен сработать
-    // например minSymbolsCount
-    if (isListOpen && !isOpen) {
-      handleListClose(event);
-      return;
-    }
-
-    if (
-      !isNotEmpty(event.relatedTarget) ||
-      !isNotEmpty(list.current) ||
-      !isNotEmpty(inputWrapper.current)
-    ) {
-      return;
-    }
-
-    const isActionInsideSelect =
-      hasExactParent(event.relatedTarget, list.current) ||
-      hasExactParent(event.relatedTarget, inputWrapper.current);
-
-    // Ничего не делаем, если клик был внутри селекта
-    if (!isActionInsideSelect) {
-      handleListClose(event);
-    }
-  };
-
   const handleChange = useCallback(
     (newValue: Value | IMultipleSelectValue<Value> | undefined, event: IChangeSelectEvent) => {
       // Тут беда с типами, сорри
@@ -484,6 +458,32 @@ export function Select<Value>(
     // Последняя проверка на случай, если мы че то ищем в опциях
     (optionsMode === 'normal' || hasEnoughSymbolsToSearch);
 
+  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+    // Когда что-то блокирует открытие листа, но блур все равно должен сработать
+    // например minSymbolsCount
+    if (isListOpen && !isOpen) {
+      handleListClose(event);
+      return;
+    }
+
+    if (
+      !isNotEmpty(event.relatedTarget) ||
+      !isNotEmpty(list.current) ||
+      !isNotEmpty(inputWrapper.current)
+    ) {
+      return;
+    }
+
+    const isActionInsideSelect =
+      hasExactParent(event.relatedTarget, list.current) ||
+      hasExactParent(event.relatedTarget, inputWrapper.current);
+
+    // Ничего не делаем, если клик был внутри селекта
+    if (!isActionInsideSelect) {
+      handleListClose(event);
+    }
+  };
+
   // Эти значения ставятся в false по дефолту также в useDropdown
   const {
     shouldUsePopper = false,

package/src/components/Select/components/SelectList/SelectList.tsx

@@ -1,4 +1,4 @@
-import { useMemo, type ReactNode } from 'react';
+import { type ReactNode, useMemo } from 'react';
 import clsx from 'clsx';
 import {
   addDataTestId,
@@ -8,13 +8,13 @@ import {
 import { type ICommonProps } from '../../../../types';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from '../../constants';
-import { SelectListItem, type ISelectListItemProps } from '../SelectListItem';
-import { useStyles, type ISelectListStyles } from './SelectList.styles';
+import { type ISelectListItemProps, SelectListItem } from '../SelectListItem';
+import { type ISelectListStyles, useStyles } from './SelectList.styles';
 
 export interface ISelectListProps<Value>
   extends ICommonProps<ISelectListStyles>,
     Pick<ISelectListItemProps, 'onToggleCheckbox' | 'onOptionSelect' | 'isMultiSelect'> {
-  options: Value[] | Readonly<Value[]>;
+  options: Value[] | readonly Value[];
   focusedIndex?: number;
   activeValue?: Value | Value[];
   noMatchesLabel?: string;