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

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -1,66 +1,41 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { phoneInfo } from '../../constants';
-import { iconsList } from '../Icon';
-import { PhoneInput } from './PhoneInput';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { GROUP_PLACEMENTS } from '../ControlWrapper';
+import { iconsMap } from '../Icon';
+import { IPhoneInputProps, PhoneInput } from './PhoneInput';
 import { IPhoneValue } from './types';
 
-const icons = [undefined, ...Object.keys(iconsList)];
-const groupPlacements = [undefined, 'left', 'right', 'middle'];
-const borders = [undefined, 'left', 'top', 'right', 'bottom'];
-const errorPositions = ['bottom', 'top'];
-const countryCodes = phoneInfo.map((info) => info.countryCode);
-
-export default {
-  title: 'Inputs/PhoneInput',
-  component: PhoneInput,
-  argTypes: {
-    icon: { control: 'select', options: icons },
-    errorPosition: { control: 'inline-radio', options: errorPositions },
-    border: { control: 'inline-radio', options: borders },
-    groupPlacement: { control: 'select', options: groupPlacements },
-    defaultCountryCode: { control: 'select', options: countryCodes },
-  },
-};
-
-const Template: ComponentStory<typeof PhoneInput> = (args) => {
+const Story: FC<IPhoneInputProps> = (args) => {
   const [value, setValue] = useState<IPhoneValue>({
     dialCode: '7',
-    phoneNumber: '1234567890',
+    phoneNumber: '9134567890',
+    countryCode: 'RU',
   });
-
   return <PhoneInput {...args} value={value} onChange={setValue} />;
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  infoMessage: 'Message Info',
-  icon: undefined,
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isActive: false,
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
-  isClearable: false,
-  isLoading: false,
-  groupPlacement: undefined,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'testId',
-      'data',
-      'tabIndex',
-      'onChange',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onKeyDown',
-      'onIconClick',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/PhoneInput',
+  component: Story,
+  args: {
+    label: 'Label',
+    infoMessage: 'Message Info',
+    icon: undefined,
+    isInvalid: false,
+    errorMessage: 'Error Text',
+    isActive: false,
+    isDisabled: false,
+    isRequired: false,
+    isReadonly: false,
+    isClearable: false,
+    isLoading: false,
+    groupPlacement: undefined,
+  },
+  argTypes: {
+    icon: { control: 'select', options: [undefined, ...Object.keys(iconsMap)] },
+    groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/PhoneInput/PhoneInput.tsx

@@ -76,7 +76,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
 
   const countryCode = useMemo(
     () => value?.countryCode ?? getCountryCodeFromPhone(phoneWithCode),
-    [value.dialCode, value.phoneNumber],
+    [phoneWithCode, value?.countryCode],
   );
 
   const handleClose = () => {
@@ -122,7 +122,10 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
     if (newPhoneInfo.countryCode !== countryCode) {
       onChange(
         {
-          phoneNumber: '',
+          phoneNumber:
+            newPhoneInfo.dialCode !== value.dialCode
+              ? ''
+              : getPhoneObjFromString(phoneWithCode).phoneNumber,
           dialCode: newPhoneInfo.dialCode,
           countryCode: newPhoneInfo.countryCode,
         },

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.stories.tsx

@@ -1,7 +1,7 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { PhoneInputCountryList } from './PhoneInputCountryList';
 
-export default {
+const meta: Meta<typeof PhoneInputCountryList> = {
   title: 'Inputs/PhoneInput/PhoneInputCountryList',
   component: PhoneInputCountryList,
   args: {
@@ -9,13 +9,7 @@ export default {
     placeholder: 'Поиск',
     noMatchesLabel: 'Ничего не найдено',
   },
-  parameters: {
-    controls: {
-      exclude: ['data', 'tweakStyles', 'testId'],
-    },
-  },
-} as ComponentMeta<typeof PhoneInputCountryList>;
+};
 
-export const Default: ComponentStory<typeof PhoneInputCountryList> = (args) => (
-  <PhoneInputCountryList {...args} />
-);
+export default meta;
+export const Default = {};

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx

@@ -48,10 +48,7 @@ export const PhoneInputCountryList: FC<IPhoneInputCountryListProps> = ({
     currentComponentName: 'PhoneInputCountryList',
   });
 
-  const sortedCountries = useMemo(
-    () => sortCountriesByLocale(phoneInfo, locale),
-    [phoneInfo, locale],
-  );
+  const sortedCountries = useMemo(() => sortCountriesByLocale(phoneInfo, locale), [locale]);
 
   const selectedCountryIdx = findCountryIndexByCode(selectedCountryCode, sortedCountries);
 

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

@@ -1,15 +1,18 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { RadioButton } from './RadioButton';
-
-export default {
-  title: 'Controls/RadioButton',
-  component: RadioButton,
-};
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
+import { IExtendableProps } from '../../types';
+import { IRadioButtonProps, RadioButton } from './RadioButton';
 
 const options = ['one', 'two', 'three'];
+const SIZES = [undefined, 'micro'] as const;
 
-const Template: ComponentStory<typeof RadioButton> = (args) => {
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface IRadioButtonSizes extends IExtendableProps<typeof SIZES> {}
+}
+
+const Story: FC<IRadioButtonProps<string>> = (args) => {
   const [activeIdx, setActiveIdx] = useState(0);
 
   return (
@@ -30,17 +33,24 @@ const Template: ComponentStory<typeof RadioButton> = (args) => {
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Label',
-  // isChecked: false,
-  isInvalid: false,
-  isDisabled: false,
-};
-
-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/RadioButton.styles.ts

@@ -1,4 +1,5 @@
 import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IRadioButtonSizes } from './types';
 
 export const useStyles = createThemedStyles('RadioButton', {
   input: {
@@ -34,4 +35,4 @@ export const useStyles = createThemedStyles('RadioButton', {
   isInvalid: {},
 });
 
-export type IRadioButtonStyles = ITweakStyles<typeof useStyles>;
+export type IRadioButtonStyles = ITweakStyles<typeof useStyles, IRadioButtonSizes>;

package/src/components/RadioButton/RadioButton.tsx

@@ -1,14 +1,19 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  addDataAttributes,
+} from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
+import { IRadioButtonSize } from './types';
 import { useStyles, IRadioButtonStyles } from './RadioButton.styles';
 
 export interface IRadioButtonProps<Value extends string> extends ICommonProps<IRadioButtonStyles> {
   children?: ReactNode;
   value: Value;
   groupName: string;
+  size?: IRadioButtonSize;
   isChecked?: boolean;
   /** @default false */
   isDisabled?: boolean;
@@ -21,6 +26,7 @@ export function RadioButton<Value extends string>({
   children,
   value,
   groupName,
+  size,
   isChecked,
   isDisabled = false,
   isInvalid = false,
@@ -33,10 +39,11 @@ export function RadioButton<Value extends string>({
 
   return (
     <label
-      className={clsx(classes.label, isDisabled && classes.isDisabled)}
+      className={clsx(classes.label, isNotEmpty(size) && classes[size], {
+        [classes.isDisabled]: isDisabled,
+      })}
       htmlFor={`${groupName}--${value}`}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <input
         id={`${groupName}--${value}`}

package/src/components/RadioButton/index.ts

@@ -1,2 +1,3 @@
 export * from './RadioButton';
 export type { IRadioButtonStyles } from './RadioButton.styles';
+export * from './types';

package/src/components/RadioButton/types.ts

@@ -0,0 +1,4 @@
+// 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/SearchInput/SearchInput.tsx

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-import { getTestId } from '@true-engineering/true-react-platform-helpers';
+import { forwardRef } from 'react';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IInputProps, Input } from '../Input';
@@ -11,31 +10,23 @@ export type ISearchInputProps = Omit<
 > &
   ICommonProps<ISearchInputStyles>;
 
-export const SearchInput: FC<ISearchInputProps> = ({
-  isClearable = true,
-  placeholder,
-  value,
-  testId,
-  tweakStyles,
-  data,
-  ...props
-}) => {
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'SearchInput',
-  });
+export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(
+  ({ isClearable = true, tweakStyles, ...props }, ref) => {
+    const tweakInputStyles = useTweakStyles({
+      innerStyles: inputStyles,
+      tweakStyles,
+      className: 'tweakInput',
+      currentComponentName: 'SearchInput',
+    });
 
-  return (
-    <Input
-      value={value}
-      placeholder={placeholder}
-      icon="search"
-      isClearable={isClearable}
-      testId={getTestId(testId, 'input')}
-      tweakStyles={tweakInputStyles}
-      {...props}
-    />
-  );
-};
+    return (
+      <Input
+        ref={ref}
+        icon="search"
+        isClearable={isClearable}
+        tweakStyles={tweakInputStyles}
+        {...props}
+      />
+    );
+  },
+);

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,37 +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',
 };
+
+export default meta;
+export const CustomSelect = {};