@true-engineering/true-react-common-ui-kit 2.5.0 → 3.0.0-alpha.0

package/src/components/Select/Select.tsx

@@ -13,7 +13,6 @@ import {
 import { Portal } from 'react-overlays';
 import clsx from 'clsx';
 import { Styles } from 'jss';
-import merge from 'lodash-es/merge';
 import { debounce } from 'ts-debounce';
 import {
   getTestId,
@@ -23,14 +22,8 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { hasExactParent } from '../../helpers';
 import { renderIcon } from '../../helpers/snippets';
-import {
-  useIsMounted,
-  useTheme,
-  useOnClickOutsideWithRef,
-  useDropdown,
-  useTweakStyles,
-} from '../../hooks';
-import { IDropdownWithPopperOptions, IIcon } from '../../types';
+import { useIsMounted, useOnClickOutsideWithRef, useDropdown, useTweakStyles } from '../../hooks';
+import { ICommonProps, IDropdownWithPopperOptions, IIcon } from '../../types';
 import { IInputProps, Input } from '../Input';
 import { ISearchInputProps, SearchInput } from '../SearchInput';
 import { SelectList } from './components';
@@ -43,11 +36,11 @@ import {
   isMultiSelectValue,
 } from './helpers';
 import { IMultipleSelectValue } from './types';
-import { SelectStyles, styles } from './Select.styles';
+import { useStyles, ISelectStyles, searchInputStyles, getInputStyles } from './Select.styles';
 
 export interface ISelectProps<Value>
-  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type'> {
-  tweakStyles?: SelectStyles;
+  extends Omit<IInputProps, 'value' | 'onChange' | 'onBlur' | 'type' | 'tweakStyles'>,
+    ICommonProps<ISelectStyles> {
   defaultOptionLabel?: string;
   allOptionsLabel?: string;
   noMatchesLabel?: string;
@@ -122,7 +115,33 @@ export function Select<Value>(
     optionsFilter,
     ...inputProps
   } = props;
-  const { classes, componentStyles } = useTheme('Select', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const shouldRenderSearchInputInList = searchInput?.shouldRenderInList === true;
+  const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
+  const isMultiSelect = isMultiSelectValue(props, value);
+  const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: getInputStyles({ hasReadonlyInput, isMultiSelect }),
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'Select',
+  });
+
+  const tweakSearchInputStyles = useTweakStyles({
+    innerStyles: searchInputStyles,
+    tweakStyles,
+    className: 'tweakSearchInput',
+    currentComponentName: 'Select',
+  });
+
+  const tweakSelectListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakSelectList',
+    currentComponentName: 'Select',
+  });
+
   const isMounted = useIsMounted();
   const [isListOpen, setIsListOpen] = useState(false);
   const [areOptionsLoading, setAreOptionsLoading] = useState(false);
@@ -138,10 +157,6 @@ export function Select<Value>(
   const list = useRef<HTMLDivElement>(null);
   const input = useRef<HTMLInputElement>(null); // TODO ref снаружи?
 
-  const shouldRenderSearchInputInList = searchInput?.shouldRenderInList === true;
-  const hasSearchInputInList = optionsMode !== 'normal' && shouldRenderSearchInputInList;
-
-  const isMultiSelect = isMultiSelectValue(props, value);
   const strValue = isMultiSelect ? value?.[0] : value;
   const shouldShowAllOption =
     isMultiSelect && isStringNotEmpty(allOptionsLabel) && searchValue === '';
@@ -420,22 +435,6 @@ export function Select<Value>(
     // Последняя проверка на случай, если мы че то ищем в опциях
     (optionsMode === 'normal' || hasEnoughSymbolsToSearch);
 
-  const hasReadonlyInput = isReadonly || optionsMode === 'normal' || shouldRenderSearchInputInList;
-
-  const tweakInputStyles = useMemo(
-    () =>
-      merge(
-        {},
-        componentStyles.tweakInput,
-        { ...(hasReadonlyInput && { input: { cursor: 'pointer' } }) },
-        { ...(isMultiSelect && { inputIcon: { width: 'auto' } }) },
-        tweakStyles?.tweakInput,
-      ) as Styles,
-    [tweakStyles?.tweakInput, hasReadonlyInput],
-  );
-
-  const tweakSearchInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSearchInput');
-
   // Эти значения ставятся в false по дефолту также в useDropdown
   const {
     shouldUsePopper = false,
@@ -504,7 +503,7 @@ export function Select<Value>(
           activeValue={value}
           isLoading={inputProps.isLoading}
           loadingLabel={loadingLabel}
-          tweakStyles={tweakStyles?.tweakSelectList as Styles}
+          tweakStyles={tweakSelectListStyles}
           testId={getTestId(testId, 'list')}
           // скролл не работает с включеным поппером
           shouldScrollToList={shouldScrollToList && !shouldUsePopper && !shouldHideOnScroll}

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

@@ -1,11 +1,10 @@
-import { colors, dimensions, helpers } from '../../../../theme';
-import { ComponentStyles } from '../../../../types';
+import { colors, createThemedStyles, dimensions, helpers, ITweakStyles } from '../../../../theme';
 
 export const ROW_HEIGHT = 40;
 export const CONTAINER_PADDING = 10;
 export const CELL_PADDING = [10, 20];
 
-export const styles = {
+export const useStyles = createThemedStyles('SelectList', {
   root: {
     borderRadius: dimensions.BORDER_RADIUS_SMALL,
     boxShadow: '0 13px 74px -27px rgba(0, 0, 0, 0.11)',
@@ -67,6 +66,6 @@ export const styles = {
   },
 
   defaultCell: {},
-};
+});
 
-export type SelectListStyles = ComponentStyles<typeof styles>;
+export type ISelectListStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,20 +1,19 @@
 import { ReactNode, useMemo, MouseEvent } from 'react';
 import clsx from 'clsx';
 import {
+  addDataTestId,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { useTheme } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { ALL_OPTION_INDEX, DEFAULT_OPTION_INDEX } from '../../constants';
 import { IMultipleSelectValue } from '../../types';
 import { SelectListItem } from '../SelectListItem';
-import { SelectListStyles, styles } from './SelectList.styles';
+import { useStyles, ISelectListStyles } from './SelectList.styles';
 
-export interface ISelectListProps<Value> extends ICommonProps {
-  tweakStyles?: SelectListStyles;
+export interface ISelectListProps<Value> extends ICommonProps<ISelectListStyles> {
   options: Value[];
   focusedIndex?: number;
   activeValue?: Value | Value[];
@@ -22,7 +21,6 @@ export interface ISelectListProps<Value> extends ICommonProps {
   isLoading?: boolean;
   loadingLabel?: ReactNode;
   defaultOptionLabel?: string;
-  testId?: string;
   allOptionsLabel?: string;
   areAllOptionsSelected?: boolean;
   shouldScrollToList?: boolean;
@@ -56,7 +54,8 @@ export function SelectList<Value>({
   convertValueToReactNode = convertValueToString,
   convertValueToId,
 }: ISelectListProps<Value>): JSX.Element {
-  const { classes } = useTheme('SelectList', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
   const isMultiSelect = isNotEmpty(onToggleCheckbox);
   const multiSelectValue = activeValue as IMultipleSelectValue<Value> | undefined;
   const selectedOptionsCount = multiSelectValue?.length ?? 0;
@@ -93,7 +92,7 @@ export function SelectList<Value>({
       {isReactNodeNotEmpty(customListHeader) && (
         <div className={classes.listHeader}>{customListHeader}</div>
       )}
-      <div className={classes.list} data-testid={testId}>
+      <div className={classes.list} {...addDataTestId(testId)}>
         {isLoading ? (
           <div className={clsx(classes.cell, classes.loading)}>{loadingLabel}</div>
         ) : (

package/src/components/Select/components/SelectList/index.ts

@@ -1,2 +1,2 @@
 export * from './SelectList';
-export type { SelectListStyles } from './SelectList.styles';
+export type { ISelectListStyles } from './SelectList.styles';

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

@@ -1,7 +1,7 @@
-import { CheckboxStyles } from '../../../Checkbox';
+import { ICheckboxStyles } from '../../../Checkbox';
 import { CELL_PADDING } from '../SelectList/SelectList.styles';
 
-export const checkboxStyles: CheckboxStyles = {
+export const checkboxStyles: ICheckboxStyles = {
   root: {
     padding: CELL_PADDING,
     width: '100%',

package/src/components/Select/components/SelectListItem/SelectListItem.tsx

@@ -14,7 +14,7 @@ export interface ISelectListItemProps {
   isActive?: boolean;
   isFocused?: boolean;
   children: ReactNode;
-  classes: Classes<'cellWithCheckbox' | 'cell' | 'focused' | 'active' | 'disabled'>;
+  classes: Classes<'cellWithCheckbox' | 'cell' | 'focused' | 'active' | 'disabled'>; // TODO: !!!
   onOptionSelect(index: number, event: MouseEvent<HTMLElement>): void;
   onToggleCheckbox?(index: number, isSelected: boolean): void;
 }

package/src/components/Select/constants.ts

@@ -1,2 +1,2 @@
-export const DEFAULT_OPTION_INDEX = -2;
-export const ALL_OPTION_INDEX = -1;
+export const DEFAULT_OPTION_INDEX = -2;
+export const ALL_OPTION_INDEX = -1;

package/src/components/Select/helpers.ts

@@ -7,9 +7,10 @@ export const defaultIsOptionDisabled = <Value>(option: Value): boolean =>
   option !== null &&
   ((option as { isDisabled?: boolean })?.isDisabled ?? false);
 
-export const defaultConvertFunction = (v: unknown) => (v === undefined ? undefined : String(v));
+export const defaultConvertFunction = (v: unknown): string | undefined =>
+  v === undefined ? undefined : String(v);
 
-export const defaultCompareFunction = <Value>(v1: Value, v2: Value) => v1 === v2;
+export const defaultCompareFunction = <Value>(v1: Value, v2: Value): boolean => v1 === v2;
 
 export const getDefaultConvertToIdFunction =
   <Value>(

package/src/components/Select/index.ts

@@ -1,4 +1,4 @@
 export * from './Select';
 export * from './types';
-export type { SelectStyles } from './Select.styles';
-export type { SelectListStyles } from './components';
+export type { ISelectStyles } from './Select.styles';
+export type { ISelectListStyles } from './components';

package/src/components/Select/types.ts

@@ -1 +1 @@
-export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;
+export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;

package/src/components/SmartInput/SmartInput.stories.tsx

@@ -2,10 +2,10 @@ import { useState } from 'react';
 import { ComponentStory } from '@storybook/react';
 import { IInputProps } from '../Input';
 import { SmartInput } from './SmartInput';
-import { TSmartType } from './types';
+import { ISmartType } from './types';
 
 const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
-const smartTypes: TSmartType[] = ['default', 'agencyName', 'surname', 'name', 'email'];
+const smartTypes: ISmartType[] = ['default', 'agencyName', 'surname', 'name', 'email'];
 
 export default {
   title: 'Inputs/SmartInput',

package/src/components/SmartInput/SmartInput.tsx

@@ -2,11 +2,11 @@ import { useState, useEffect, forwardRef, FormEvent, ClipboardEvent } from 'reac
 import { Input, IInputProps } from '../Input';
 import { CharactersMap, SMART_INPUT_REGEX_MAP, TransliterationMap } from './constants';
 import { transformCaseSensitive } from './helpers';
-import { TSmartType } from './types';
+import { ISmartType } from './types';
 
 export interface ISmartInputProps extends IInputProps {
   isUpperCase?: boolean;
-  smartType?: TSmartType;
+  smartType?: ISmartType;
   regExp?: RegExp;
   onChange: (value: string) => void;
 }

package/src/components/SmartInput/helpers.ts

@@ -1,7 +1,7 @@
-import { TSmartType } from './types';
+import { ISmartType } from './types';
 
 export const transformCaseSensitive = (
-  smartType: TSmartType,
+  smartType: ISmartType,
   map: { [key: string]: string },
   symbol: string,
 ): string => {

package/src/components/SmartInput/types.ts

@@ -1,4 +1,4 @@
-export type TSmartType =
+export type ISmartType =
   | 'name'
   | 'nameRuEn'
   | 'surname'

package/src/components/Switch/Switch.styles.ts

@@ -1,75 +1,75 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-  },
-
-  primary: {},
-
-  secondary: {},
-
-  invalid: {},
-
-  disabled: {
-    pointerEvents: 'none',
-    cursor: 'default',
-  },
-
-  checked: {
-    '& $switch::before': {
-      left: 18,
-    },
-  },
-
-  switch: {
-    position: 'relative',
-    flexShrink: 0,
-    display: 'block',
-    width: 36,
-    height: 20,
-    backgroundColor: '#333',
-    borderRadius: 10,
-    boxSizing: 'border-box',
-    transitionProperty: 'opacity, background-color',
-    transition: '0.25s ease-in-out',
-
-    '&::before': {
-      content: '""',
-      position: 'absolute',
-      top: 2,
-      left: 2,
-      right: 'auto',
-      display: 'block',
-      width: 16,
-      height: 16,
-      backgroundColor: '#fff',
-      borderRadius: '50%',
-      zIndex: 1,
-      transitionProperty: 'left, background-color',
-      transition: '0.25s ease-in-out',
-    },
-  },
-
-  input: {
-    display: 'none',
-  },
-
-  label: {
-    transitionProperty: 'opacity, color',
-    transition: '0.25s ease-in-out',
-  },
-
-  labelLeft: {
-    order: -1,
-    marginRight: 12,
-  },
-
-  labelRight: {
-    marginLeft: 12,
-  },
-};
-
-export type SwitchStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Switch', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+  },
+
+  primary: {},
+
+  secondary: {},
+
+  invalid: {},
+
+  disabled: {
+    pointerEvents: 'none',
+    cursor: 'default',
+  },
+
+  checked: {
+    '& $switch::before': {
+      left: 18,
+    },
+  },
+
+  switch: {
+    position: 'relative',
+    flexShrink: 0,
+    display: 'block',
+    width: 36,
+    height: 20,
+    backgroundColor: '#333',
+    borderRadius: 10,
+    boxSizing: 'border-box',
+    transitionProperty: 'opacity, background-color',
+    transition: '0.25s ease-in-out',
+
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: 2,
+      left: 2,
+      right: 'auto',
+      display: 'block',
+      width: 16,
+      height: 16,
+      backgroundColor: '#fff',
+      borderRadius: '50%',
+      zIndex: 1,
+      transitionProperty: 'left, background-color',
+      transition: '0.25s ease-in-out',
+    },
+  },
+
+  input: {
+    display: 'none',
+  },
+
+  label: {
+    transitionProperty: 'opacity, color',
+    transition: '0.25s ease-in-out',
+  },
+
+  labelLeft: {
+    order: -1,
+    marginRight: 12,
+  },
+
+  labelRight: {
+    marginLeft: 12,
+  },
+});
+
+export type ISwitchStyles = ITweakStyles<typeof useStyles>;

package/src/components/Switch/Switch.tsx

@@ -2,13 +2,11 @@ import { ReactNode } from 'react';
 import clsx from 'clsx';
 import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ISwitchState } from './types';
-import { styles, SwitchStyles } from './Switch.styles';
+import { useStyles, ISwitchStyles } from './Switch.styles';
 
-export interface ISwitchProps<V extends string> extends ICommonProps {
-  tweakStyles?: SwitchStyles;
+export interface ISwitchProps<V extends string> extends ICommonProps<ISwitchStyles> {
   children?: ReactNode;
   value: V;
   isChecked: boolean;
@@ -22,7 +20,6 @@ export interface ISwitchProps<V extends string> extends ICommonProps {
    * @default `primary`
    */
   color?: 'primary' | 'secondary';
-  testId?: string;
   onChange(state: ISwitchState<V>): void;
 }
 
@@ -39,7 +36,7 @@ export const Switch = <V extends string>({
   testId,
   onChange,
 }: ISwitchProps<V>): JSX.Element => {
-  const { classes } = useTheme('Switch', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   const handleChange = () => onChange({ name: value, isEnabled: !isChecked });
 

package/src/components/Switch/index.ts

@@ -1,3 +1,3 @@
 export * from './Switch';
 export * from './types';
-export type { SwitchStyles } from './Switch.styles';
+export type { ISwitchStyles } from './Switch.styles';