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

package/src/components/SearchInput/SearchInput.tsx

@@ -1,5 +1,4 @@
 import { forwardRef } from 'react';
-import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IInputProps, Input } from '../Input';
@@ -7,30 +6,28 @@ import { inputStyles, ISearchInputStyles } from './SearchInput.styles';
 
 export type ISearchInputProps = Omit<
   IInputProps,
-  'type' | 'label' | 'isInvalid' | 'errorMessage' | 'isActive' | 'tweakStyles'
+  'type' | 'label' | 'isInvalid' | 'errorMessage' | 'isActive' | 'tweakStyles' | 'startIcon'
 > &
   ICommonProps<ISearchInputStyles>;
 
-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 = {};

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

@@ -1,6 +1,8 @@
-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';
 
 interface ObjectValue {
@@ -9,8 +11,6 @@ interface ObjectValue {
   isDisabled?: boolean;
 }
 
-const groupPlacements = [undefined, 'left', 'right', 'middle'];
-
 const genLetters = (qnt = 1): string =>
   Math.random()
     .toString(36)
@@ -54,11 +54,13 @@ const objectOptions: ObjectValue[] = [
   { name: 'Artem', age: 23 },
 ];
 
+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;
@@ -70,7 +72,7 @@ interface ISelectWithCustomProps<T> extends IMultipleSelectProps<T> {
   scrollParent?: 'document' | 'auto';
 }
 
-function SelectWithCustomProps<T>({
+function Story<T>({
   valuesType,
   optionsMode,
   shouldUseReactNodes,
@@ -82,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[]) => {
@@ -157,7 +159,7 @@ function SelectWithCustomProps<T>({
 
   return (
     <Select
-      {...rest}
+      {...args}
       {...(props as unknown as IMultipleSelectProps<any>)}
       {...(shouldRenderSearchInputInList && {
         searchInput: { shouldRenderInList: true },
@@ -179,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',
+    endIcon: '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'],
@@ -195,38 +224,9 @@ export default {
       control: 'inline-radio',
       options: ['strings', 'objects'],
     },
+    endIcon: { 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',
 };
+
+export default meta;
+export const MultiSelect = {};

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

@@ -1,6 +1,8 @@
-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';
 
 interface ObjectValue {
@@ -9,8 +11,6 @@ interface ObjectValue {
   isDisabled?: boolean;
 }
 
-const groupPlacements = [undefined, 'left', 'right', 'middle'];
-
 const genLetters = (qnt = 1): string =>
   Math.random()
     .toString(36)
@@ -54,11 +54,13 @@ const objectOptions: ObjectValue[] = [
   { name: 'Artem', age: 23 },
 ];
 
+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;
@@ -70,7 +72,7 @@ interface ISelectWithCustomProps<T> extends ISelectProps<T> {
   scrollParent?: 'document' | 'auto';
 }
 
-function SelectWithCustomProps<T>({
+function Story<T>({
   valuesType,
   optionsMode,
   shouldUseReactNodes,
@@ -82,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');
@@ -155,7 +157,7 @@ function SelectWithCustomProps<T>({
 
   return (
     <Select
-      {...rest}
+      {...args}
       {...(props as unknown as ISelectProps<any>)}
       {...(shouldRenderSearchInputInList && {
         searchInput: { shouldRenderInList: true },
@@ -176,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,
+    endIcon: 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'],
@@ -192,37 +221,9 @@ export default {
       control: 'inline-radio',
       options: ['strings', 'objects'],
     },
+    endIcon: { 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,
-  // custom options
-  shouldUseReactNodes: false,
-  valuesType: 'strings',
-  optionsMode: 'normal',
-  shouldUsePopper: false,
-  shouldRenderInBody: false,
-  shouldHideOnScroll: false,
-  shouldUseCustomIsDisabledFunction: false,
-  shouldRenderSearchInputInList: false,
-  shouldScrollToList: true,
-  canBeFlipped: false,
-  scrollParent: 'document',
 };
+
+export default meta;
+export const Default = {};

package/src/components/Select/Select.styles.ts

@@ -5,7 +5,7 @@ import { type ISearchInputStyles } from '../SearchInput';
 import { IWithMessagesStyles } from '../WithMessages';
 import { type ISelectListStyles } from './components';
 
-const { CONTROL, Z_INDEX } = dimensions;
+const { Z_INDEX } = dimensions;
 
 export const useStyles = createThemedStyles('Select', {
   root: {
@@ -17,7 +17,6 @@ export const useStyles = createThemedStyles('Select', {
   inputWrapper: {
     width: '100%',
     cursor: 'text',
-    position: 'relative',
   },
 
   listWrapper: {
@@ -40,20 +39,16 @@ export const useStyles = createThemedStyles('Select', {
   },
 
   arrow: {
-    position: 'absolute',
-    right: 12,
-    top: '50%',
-    width: 20,
-    height: 20,
+    width: 'var(--icon-inner-size, 20px)',
+    height: 'var(--icon-inner-size, 20px)',
     cursor: 'pointer',
-    transform: 'translateY(-50%)',
     transition: animations.defaultTransition,
     transitionProperty: 'transform',
     zIndex: Z_INDEX.CONTROL_FOCUS + 1,
   },
 
   activeArrow: {
-    transform: 'translateY(-50%) rotate(180deg)',
+    transform: 'rotate(180deg)',
   },
 
   disabled: {
@@ -62,45 +57,15 @@ export const useStyles = createThemedStyles('Select', {
     },
   },
 
-  counter: {
-    '&:not(:last-child)': {
-      paddingRight: 8,
-    },
-  },
-
-  icon: {
-    width: CONTROL.ICON_INNER_SIZE,
-    height: CONTROL.ICON_INNER_SIZE,
-  },
-
-  iconWrapper: {
-    display: 'flex',
-    alignItems: 'center',
-  },
+  counter: {},
 });
 
 const baseInputStyles: IInputStyles = {
-  inputContent: {
-    paddingRight: 32,
-  },
-
   input: {
     '&[readonly]': {
       cursor: 'pointer',
     },
   },
-
-  tweakControlWrapper: {
-    controls: {
-      paddingRight: 40,
-    },
-
-    icon: {
-      '&:last-child': {
-        paddingRight: 0,
-      },
-    },
-  },
 };
 
 const readonlyInputBaseStyles: IInputStyles = {