@true-engineering/true-react-common-ui-kit 3.45.1 → 4.0.0-alpha0

package/src/components/DatePicker/components/DatePickerHeader/DatePickerHeader.styles.ts

@@ -1,9 +1,6 @@
-import { ITweakStyles, createThemedStyles } from '../../../../theme';
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
 import { ISelectStyles } from '../../../Select';
 
-const SELECT_PADDING_LEFT = 12;
-const SELECT_PADDING_RIGHT = 24;
-
 export const useStyles = createThemedStyles('DatePickerHeader', {
   btn: {
     width: 36,
@@ -12,34 +9,10 @@ export const useStyles = createThemedStyles('DatePickerHeader', {
     boxSizing: 'border-box',
     border: 'none',
     outline: 'none',
-
     cursor: 'pointer',
     marginLeft: 8,
   },
 
-  select: {
-    height: 35,
-    fontSize: 16,
-    position: 'relative',
-  },
-
-  selectValue: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    color: 'transparent',
-    pointerEvents: 'none',
-    paddingLeft: SELECT_PADDING_LEFT,
-    paddingRight: SELECT_PADDING_RIGHT,
-  },
-
-  selectControl: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-  },
-
   header: {
     margin: 6,
     display: 'flex',
@@ -60,24 +33,17 @@ export const selectStyles: ISelectStyles = {
     },
   },
 
-  arrow: {
-    right: 0,
-    top: 9,
-    width: 16,
-    height: 16,
-  },
-
   tweakInput: {
-    inputWrapper: {
-      height: 35,
-      border: 'none',
+    tweakControlWrapper: {
+      root: {
+        '--control-height': '35px',
+        border: 'none',
+      },
     },
 
-    input: {
+    inputContent: {
       fontSize: 16,
       fontWeight: 'bold',
-      paddingRight: SELECT_PADDING_RIGHT - 8,
-      paddingLeft: SELECT_PADDING_LEFT,
     },
   },
 };

package/src/components/DatePicker/components/DatePickerHeader/DatePickerHeader.tsx

@@ -1,11 +1,11 @@
 import { FC, useMemo } from 'react';
 import { ReactDatePickerCustomHeaderProps as BaseProps } from 'react-datepicker';
-import { getYear, getMonth } from 'date-fns';
+import { getMonth, getYear } from 'date-fns';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
 import { Select } from '../../../Select';
-import { useStyles, IDatePickerHeaderStyles, selectStyles } from './DatePickerHeader.styles';
+import { IDatePickerHeaderStyles, selectStyles, useStyles } from './DatePickerHeader.styles';
 
 export interface IDatePickerHeaderProps
   extends BaseProps,
@@ -40,30 +40,22 @@ export const DatePickerHeader: FC<IDatePickerHeaderProps> = ({
 
   return (
     <div className={classes.header}>
-      <div className={classes.select}>
-        <div className={classes.selectValue}>{months[getMonth(date)]}</div>
-        <div className={classes.selectControl}>
-          <Select
-            value={months[getMonth(date)]}
-            options={months}
-            dropdownIcon="chevron-down-small"
-            tweakStyles={tweakSelectStyles}
-            onChange={(value) => changeMonth(months.indexOf(value as string))}
-          />
-        </div>
-      </div>
-      <div className={classes.select}>
-        <div className={classes.selectValue}>{getYear(date)}</div>
-        <div className={classes.selectControl}>
-          <Select
-            value={getYear(date)}
-            options={years}
-            dropdownIcon="chevron-down-small"
-            tweakStyles={tweakSelectStyles}
-            onChange={(value) => changeYear(value as number)}
-          />
-        </div>
-      </div>
+      <Select
+        value={months[getMonth(date)]}
+        options={months}
+        dropdownIcon="chevron-down-small"
+        isAutoSized
+        tweakStyles={tweakSelectStyles}
+        onChange={(value) => changeMonth(months.indexOf(value as string))}
+      />
+      <Select
+        value={getYear(date)}
+        options={years}
+        dropdownIcon="chevron-down-small"
+        isAutoSized
+        tweakStyles={tweakSelectStyles}
+        onChange={(value) => changeYear(value as number)}
+      />
 
       <div className={classes.buttons}>
         <button

package/src/components/DatePicker/types.ts

@@ -40,7 +40,7 @@ export type IDatePickerBaseProps = Pick<
     | 'endDate'
     | 'isRange'
     | 'isActive'
-    | 'iconType'
+    | 'icon'
     | 'maxLength'
     | 'onChange'
     | 'onClick'

package/src/components/FileItem/FileItem.stories.tsx

@@ -2,7 +2,7 @@ import { format } from 'date-fns';
 import { ru } from 'date-fns/locale';
 import { ComponentStory } from '@storybook/react';
 import { FILE_ITEM_SIZES } from '../FileItem/constants';
-import { IIconType, iconsList } from '../Icon';
+import { iconsList, IIconType } from '../Icon';
 import { complexIcons } from '../Icon/complexIcons';
 import { FileItem, IFileItemProps } from './FileItem';
 
@@ -11,11 +11,7 @@ export default {
   component: FileItem,
 };
 
-const iconTypes = [
-  undefined,
-  ...Object.keys(iconsList),
-  ...Object.keys(complexIcons),
-] as IIconType[];
+const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
 
 const preloaderTypes: Array<IFileItemProps['preloaderType']> = ['dots', 'default', 'logo'];
 
@@ -50,8 +46,8 @@ Default.args = {
 };
 
 Default.argTypes = {
-  icon: { options: iconTypes, control: 'select' },
-  removeIcon: { options: iconTypes, control: 'select' },
+  icon: { options: icons, control: 'select' },
+  removeIcon: { options: icons, control: 'select' },
   itemSize: { options: FILE_ITEM_SIZES, control: 'inline-radio' },
   preloaderType: { options: preloaderTypes, control: 'inline-radio' },
 };

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -73,7 +73,6 @@ type ConfigValues = {
 interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps<Values, Content> {
   containerWidth: number;
   isSearchDisabled: boolean;
-  isSearchAutosizeable: boolean;
   shouldShowSettingsButton: boolean;
   withFieldNameInLabel: boolean;
   isGroupingEnabled: boolean;
@@ -84,7 +83,6 @@ interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps
 function FiltersPaneWithCustomProps<Values, Content>({
   containerWidth,
   isSearchDisabled,
-  isSearchAutosizeable,
   shouldShowSettingsButton,
   withFieldNameInLabel,
   isGroupingEnabled,
@@ -239,7 +237,6 @@ function FiltersPaneWithCustomProps<Values, Content>({
           fields: ['interval', 'name'] as Array<keyof ConfigValues>,
           getValueView: convertFieldToString,
           onChange: setSearchValue,
-          isAutoSizeable: isSearchAutosizeable,
           isDisabled: isSearchDisabled,
         }}
         enabledFilters={[
@@ -287,7 +284,6 @@ export const Default = Template.bind({});
 
 Default.args = {
   shouldShowSettingsButton: false,
-  isSearchAutosizeable: true,
   isSearchDisabled: false,
   hasClearButton: true,
   isClearableFields: false,

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.styles.ts

@@ -40,14 +40,16 @@ export const inputStyles: IInputStyles = {
     minWidth: 120,
   },
 
-  icon: {
-    padding: 0,
-    width: 24,
-
-    '&:last-child': {
-      paddingRight: 0,
+  tweakControlWrapper: {
+    icon: {
+      padding: 0,
+      width: 24,
+
+      '&:last-child': {
+        paddingRight: 0,
+      },
     },
-  },
+  }
 };
 
 export const clearButtonStyles = cloneDeep(innerTextButtonStyles);

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.tsx

@@ -7,12 +7,7 @@ import { Button } from '../../../Button';
 import { NumberInput } from '../../../NumberInput';
 import { getLocale, sortValues } from '../../helpers';
 import { IFilterLocaleKey, IPartialFilterLocale } from '../../types';
-import {
-  useStyles,
-  IFilterIntervalStyles,
-  inputStyles,
-  clearButtonStyles,
-} from './FilterInterval.styles';
+import { clearButtonStyles, IFilterIntervalStyles, inputStyles, useStyles } from './FilterInterval.styles';
 
 export interface IFilterIntervalProps extends ICommonProps<IFilterIntervalStyles> {
   value?: Array<number | undefined>;
@@ -98,7 +93,6 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
                 ? `${labelName} ${translates.from.toLocaleLowerCase()}`
                 : translates.from
             }
-            border="bottom"
             canBeFloat={canBeFloat}
             isClearable
             min={fromInput?.min}
@@ -122,7 +116,6 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
                 ? `${labelName} ${translates.to.toLocaleLowerCase()}`
                 : translates.to
             }
-            border="bottom"
             canBeFloat={canBeFloat}
             isClearable
             min={toInput?.min}

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.styles.ts

@@ -122,11 +122,13 @@ export const useStyles = createThemedStyles('FilterSelect', {
 
 export const searchInputStyles: ISearchInputStyles = {
   tweakInput: {
-    inputWrapper: {
-      backgroundColor: 'transparent',
-      border: 'none',
-      height: 40,
-    },
+    tweakControlWrapper: {
+      root: {
+        '--control-height': '40px',
+        backgroundColor: 'transparent',
+        border: 'none',
+      },
+    }
   },
 };
 

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useRef, FC } from 'react';
+import { FC, useMemo, useRef, useState } from 'react';
 import { isAfter, isBefore } from 'date-fns';
 import enUS from 'date-fns/locale/en-US';
 import ru from 'date-fns/locale/ru';
@@ -11,20 +11,20 @@ import { DatePicker } from '../../../DatePicker';
 import { DEFAULT_PICKER_PROPS } from '../../constants';
 import { getLocale } from '../../helpers';
 import {
-  IFilterWithDateDatePickerProps,
   IFilterLocaleKey,
+  IFilterWithDateDatePickerProps,
   IFilterWithDatesValue,
   IPartialFilterLocale,
 } from '../../types';
 import {
-  useStyles,
-  IFilterWithDatesStyles,
-  clearButtonStyles,
   backButtonStyles,
-  startDatePickerWithButtonStyles,
-  startDatePickerStyles,
+  clearButtonStyles,
   endDatePickerStyles,
   endDatePickerWithButtonStyles,
+  IFilterWithDatesStyles,
+  startDatePickerStyles,
+  startDatePickerWithButtonStyles,
+  useStyles,
 } from './FilterWithDates.styles';
 
 export interface IFilterWithDatesProps extends ICommonProps<IFilterWithDatesStyles> {
@@ -139,7 +139,6 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
             locale={dateLocale}
             onChangeDate={handleChangeFrom}
             tweakStyles={tweakStartDatePickerStyles}
-            border="bottom"
             testId={getTestId(testId, 'from')}
             isClearable={isClearable}
             {...startPickerProps}
@@ -154,7 +153,6 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
             locale={dateLocale}
             onChangeDate={handleChangeTo}
             tweakStyles={tweakEndDatePickerStyles}
-            border="bottom"
             testId={getTestId(testId, 'to')}
             isClearable={isClearable}
             {...endPickerProps}

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.ts

@@ -1,11 +1,5 @@
 import { rgba } from '../../../../helpers';
-import {
-  animations,
-  colors,
-  createThemedStyles,
-  dimensions,
-  ITweakStyles,
-} from '../../../../theme';
+import { animations, colors, createThemedStyles, dimensions, ITweakStyles } from '../../../../theme';
 import { ISearchInputStyles } from '../../../SearchInput';
 import { ISelectStyles } from '../../../Select';
 import { FILTER_HEIGHT } from '../../FiltersPane.styles';
@@ -89,17 +83,18 @@ export const useStyles = createThemedStyles('FiltersPaneSearch', {
 
 export const searchInputStyles: ISearchInputStyles = {
   tweakInput: {
-    inputWrapper: {
-      backgroundColor: 'transparent',
-      border: 'none',
-      height: FILTER_HEIGHT - 2,
-      fontSize: 14,
-      minWidth: 140,
-    },
+    tweakControlWrapper: {
+      root: {
+        '--control-height': `${FILTER_HEIGHT - 2}px`,
+        backgroundColor: 'transparent',
+        border: 'none',
+        minWidth: 140,
+      },
 
-    focused: {
-      backgroundColor: 'transparent',
-      border: 'none',
+      focused: {
+        backgroundColor: 'transparent',
+        border: 'none',
+      },
     },
   },
 };

package/src/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useMemo, ReactNode } from 'react';
+import { ReactNode, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { addDataAttributes } from '../../../../helpers';
 import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
@@ -9,10 +9,10 @@ import { getLocale } from '../../helpers';
 import { IFilterLocaleKey, IFiltersPaneSearchPayload, IPartialFilterLocale } from '../../types';
 import { FilterSelect } from '../FilterSelect';
 import {
-  useStyles,
   IFiltersPaneSearchStyles,
   searchInputStyles,
   selectStyles,
+  useStyles,
 } from './FiltersPaneSearch.styles';
 
 export interface IFiltersPaneSearchProps<Value> extends ICommonProps<IFiltersPaneSearchStyles> {
@@ -29,7 +29,6 @@ export interface IFiltersPaneSearchProps<Value> extends ICommonProps<IFiltersPan
   hasClearSelectButton?: boolean;
   isDisabled?: boolean;
   isSelectSearchEnabled?: boolean;
-  isAutoSizeable?: boolean;
 }
 
 export function FiltersPaneSearch<Value>({
@@ -45,7 +44,6 @@ export function FiltersPaneSearch<Value>({
   hasClearSelectButton,
   isDisabled = false,
   isSelectSearchEnabled = true,
-  isAutoSizeable = true,
   maxLength,
   data,
   tweakStyles,
@@ -115,7 +113,6 @@ export function FiltersPaneSearch<Value>({
         onBlur={() => setIsInputFocused(false)}
         testId={testId !== undefined ? `${testId}-input` : undefined}
         maxLength={maxLength}
-        isAutoSizeable={isAutoSizeable}
         isDisabled={isDisabled}
       />
 

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,16 +1,16 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { IIconType, iconsList } from '../Icon';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { iconsList, IIconType } from '../Icon';
 import { complexIcons } from '../Icon/complexIcons';
 import { IconButton } from './IconButton';
 import { ICON_BUTTON_SIZES, ICON_BUTTON_VIEWS } from './constants';
 
-const iconTypes = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+const icons = [...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
 
 export default {
   title: 'Buttons/IconButton',
   component: IconButton,
   args: {
-    icon: iconTypes[0],
+    icon: icons[0],
     view: 'main',
     size: 'm',
     isDisabled: false,
@@ -18,7 +18,7 @@ export default {
     isActive: false,
   },
   argTypes: {
-    icon: { options: iconTypes, control: 'select' },
+    icon: { options: icons, control: 'select' },
     size: { options: ICON_BUTTON_SIZES, control: 'inline-radio' },
     view: { options: ICON_BUTTON_VIEWS, control: 'inline-radio' },
   },

package/src/components/IncrementInput/IncrementInput.stories.tsx

@@ -21,8 +21,6 @@ Default.args = {
   intPartPrecision: 10,
   label: 'Label',
   placeholder: 'Placeholder',
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
   isInvalid: false,
   errorMessage: 'Error Text',
   isDisabled: false,

package/src/components/IncrementInput/IncrementInput.styles.ts

@@ -1,4 +1,4 @@
-import { colors, dimensions, ITweakStyles, createThemedStyles, animations } from '../../theme';
+import { animations, colors, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
 import { IInputStyles } from '../Input';
 
 export const BUTTONS_WIDTH = 36;
@@ -19,12 +19,12 @@ export const useStyles = createThemedStyles('IncrementInput', {
     right: BUTTONS_GAP,
     top: BUTTONS_GAP,
     bottom: BUTTONS_GAP,
-    zIndex: 1,
+    zIndex: dimensions.Z_INDEX.CONTROL_FOCUS + 1,
   },
 
   button: {
     width: '100%',
-    height: (dimensions.CONTROL_HEIGHT - 5) / 2,
+    height: (dimensions.CONTROL.HEIGHT - 5) / 2,
     border: 'none',
     outline: 'none',
     backgroundColor: colors.GREY_BACKGROUND,
@@ -65,14 +65,14 @@ export const useStyles = createThemedStyles('IncrementInput', {
 
 export const inputStyles: IInputStyles = {
   input: {
-    '&:not($withControls)': {
-      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
-    },
-  },
-
-  controls: {
     paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
   },
+
+  tweakControlWrapper: {
+    controls: {
+      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
+    },
+  }
 };
 
 export type IIncrementInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;

package/src/components/Input/Input.stories.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { ComponentStory } from '@storybook/react';
 import { iconsList } from '../Icon';
-import { Input, IInputProps } from './Input';
+import { IInputProps, Input } from './Input';
 
 const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
-const inlineStyles = [
+const groupPositions = [
   undefined,
   'top',
   'bottom',
@@ -17,20 +17,16 @@ const inlineStyles = [
   'middle',
 ];
 const masks = [undefined, '99/99', 'aaa-aaa', '***+***'];
-const iconTypes = [undefined, ...Object.keys(iconsList)];
-const borders = [undefined, 'left', 'top', 'right', 'bottom'];
-const errorPositions = ['bottom', 'top'];
+const icons = [undefined, ...Object.keys(iconsList)];
 
 export default {
   title: 'Inputs/Input',
   component: Input,
   argTypes: {
     type: { control: 'radio', options: types },
-    border: { control: 'radio', options: borders },
-    iconType: { control: 'select', options: iconTypes },
-    errorPosition: { control: 'inline-radio', options: errorPositions },
+    icon: { control: 'select', options: icons },
     mask: { control: 'select', options: masks },
-    inlineStyles: { control: 'select', options: inlineStyles },
+    groupPositions: { control: 'select', options: groupPositions },
   },
 };
 
@@ -38,12 +34,14 @@ const Template: ComponentStory<typeof Input> = (args) => {
   const [value, setValue] = useState('');
 
   return (
-    <Input
-      {...args}
-      value={value}
-      onChange={(v) => setValue(v)}
-      onIconClick={() => console.log('icon click')}
-    />
+    <div style={{ width: 300 }}>
+      <Input
+        {...args}
+        value={value}
+        onChange={setValue}
+        onIconClick={() => console.log('icon click')}
+      />
+    </div>
   );
 };
 
@@ -53,24 +51,19 @@ Default.args = {
   label: 'Label',
   placeholder: 'Placeholder',
   infoMessage: 'Message Info',
-  units: 'RUB',
   type: 'text',
-  border: undefined,
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
   isInvalid: false,
+  units: '',
   errorMessage: 'Error Text',
-  errorPosition: 'bottom',
-  isAutoSizeable: false,
-  shouldFocusOnMount: false,
-  shouldAlwaysShowPlaceholder: false,
   isActive: false,
   isDisabled: false,
   isRequired: false,
   isReadonly: false,
   isClearable: false,
   isLoading: false,
-  inlineStyle: undefined,
+  isAutoSized: false,
+  shouldAlwaysShowPlaceholder: false,
+  groupPlacement: undefined,
 };
 
 Default.parameters = {
@@ -85,7 +78,6 @@ Default.parameters = {
       'onPaste',
       'onKeyDown',
       'onIconClick',
-      'tweakStyles',
     ],
   },
 };