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

package/src/components/PhoneInput/PhoneInput.tsx

@@ -1,8 +1,7 @@
 import { FC, FocusEvent, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes, getTestId } from '@true-engineering/true-react-platform-helpers';
 import {
-  addDataAttributes,
   findCountryByCode,
   getCountryCodeFromPhone,
   getFullPhone,
@@ -10,7 +9,7 @@ import {
   getPhoneObjFromString,
 } from '../../helpers';
 import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
+import { IReplaceTweakStylesProps } from '../../types';
 import { Flag } from '../Flag';
 import { Icon } from '../Icon';
 import { IChangeInputEvent, IInputProps, Input } from '../Input';
@@ -21,10 +20,9 @@ import { inputStyles, IPhoneInputStyles, useStyles } from './PhoneInput.styles';
 
 export interface IPhoneInputProps
   extends Omit<
-      IInputProps,
-      'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder' | 'tweakStyles'
-    >,
-    ICommonProps<IPhoneInputStyles> {
+    IReplaceTweakStylesProps<IInputProps, IPhoneInputStyles>,
+    'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder'
+  > {
   /** @default 'ru' */
   locale?: string;
   /** @default 'Поиск' */
@@ -50,7 +48,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
   noMatchesLabel = 'Ничего не найдено',
   ...inputProps
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakInputStyles = useTweakStyles({
     innerStyles: inputStyles,
@@ -76,7 +74,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
 
   const countryCode = useMemo(
     () => value?.countryCode ?? getCountryCodeFromPhone(phoneWithCode),
-    [value.countryCode, value.dialCode, value.phoneNumber],
+    [phoneWithCode, value?.countryCode],
   );
 
   const handleClose = () => {
@@ -157,7 +155,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
   useOnClickOutsideWithRef(list, handleClose, inputWrapper);
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       <div
         className={clsx(classes.countrySelectContainer, {
           [classes.disabledCountrySelect]: isDisabled,

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

@@ -8,7 +8,7 @@ import {
   sortCountriesByLocale,
 } from '../../../../helpers';
 import { useTweakStyles } from '../../../../hooks';
-import { ICommonProps } from '../../../../types';
+import { ITweakStylesProps } from '../../../../types';
 import { Flag } from '../../../Flag';
 import { Icon } from '../../../Icon';
 import { IChangeInputEvent, Input } from '../../../Input';
@@ -21,7 +21,7 @@ import {
 } from './PhoneInputCountryList.styles';
 
 export interface IPhoneInputCountryListProps
-  extends Pick<ICommonProps<IPhoneInputCountryListStyles>, 'tweakStyles'> {
+  extends ITweakStylesProps<IPhoneInputCountryListStyles> {
   selectedCountryCode?: string;
   locale: string;
   placeholder: string;
@@ -39,7 +39,7 @@ export const PhoneInputCountryList: FC<IPhoneInputCountryListProps> = ({
   onChange,
   tweakStyles,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakInputStyles = useTweakStyles({
     innerStyles: inputStyles,
@@ -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,
@@ -29,14 +35,15 @@ export function RadioButton<Value extends string>({
   tweakStyles,
   onChange,
 }: IRadioButtonProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   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,19 @@ 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: 'Поиск',
+    size: undefined,
+    isAutoSized: false,
+    isLoading: false,
+  },
+  argTypes: {
+    size: { options: [undefined, 'micro'], control: 'inline-radio' },
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/SearchInput/SearchInput.styles.ts

@@ -2,27 +2,21 @@ import { IInputStyles } from '../Input';
 
 export const inputStyles: IInputStyles = {
   tweakControlWrapper: {
-    endIcon: {
+    startControls: {
       position: 'absolute',
-      width: 40,
       left: 0,
-
-      '&:last-child': {
-        paddingRight: 0,
-      },
-
-      '&:not($activeIcon)': {
-        pointerEvents: 'none',
-      },
+      top: 0,
+      height: '100%',
+      pointerEvents: 'none',
     },
 
     controlWrapper: {
       borderColor: 'transparent',
     },
   },
+
   inputContent: {
-    fontSize: 14,
-    paddingLeft: 44,
+    paddingLeft: 'calc(var(--start-controls-width) + var(--control-padding))',
   },
 };
 

package/src/components/SearchInput/SearchInput.tsx

@@ -1,36 +1,32 @@
 import { forwardRef } from 'react';
-import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
+import { IReplaceTweakStylesProps } from '../../types';
 import { IInputProps, Input } from '../Input';
 import { inputStyles, ISearchInputStyles } from './SearchInput.styles';
 
 export type ISearchInputProps = Omit<
-  IInputProps,
-  'type' | 'label' | 'isInvalid' | 'errorMessage' | 'isActive' | 'tweakStyles'
-> &
-  ICommonProps<ISearchInputStyles>;
+  IReplaceTweakStylesProps<IInputProps, ISearchInputStyles>,
+  'type' | 'label' | 'isInvalid' | 'errorMessage' | 'isActive' | 'startIcon'
+>;
 
-export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(
-  ({ isClearable = true, placeholder, value, testId, tweakStyles, data, ...props }, ref) => {
-    const tweakInputStyles = useTweakStyles({
-      innerStyles: inputStyles,
-      tweakStyles,
-      className: 'tweakInput',
-      currentComponentName: 'SearchInput',
-    });
+export const SearchInput = forwardRef<HTMLInputElement, ISearchInputProps>(function SearchInput(
+  { isClearable = true, tweakStyles, ...props },
+  ref,
+) {
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'SearchInput',
+  });
 
-    return (
-      <Input
-        ref={ref}
-        value={value}
-        placeholder={placeholder}
-        icon="search"
-        isClearable={isClearable}
-        testId={getTestId(testId, 'input')}
-        tweakStyles={tweakInputStyles}
-        {...props}
-      />
-    );
-  },
-);
+  return (
+    <Input
+      ref={ref}
+      startIcon="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 = {};