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

package/src/components/MultiSelectList/MultiSelectList.styles.ts

@@ -1,12 +1,13 @@
-import { colors, helpers } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, helpers, ITweakStyles, createThemedStyles } from '../../theme';
+import { IButtonStyles } from '../Button';
+import { ICheckboxStyles } from '../Checkbox';
+import { ISearchInputStyles } from '../SearchInput';
 
 const ITEM_HEIGHT = 40;
 const TOP_GAP = 12;
 
-export const styles = {
+export const useStyles = createThemedStyles('MultiSelectList', {
   root: {
-    width: ({ width }: { width: number | string }): string | number => width ?? 220,
     background: colors.CLASSIC_WHITE,
   },
 
@@ -85,40 +86,47 @@ export const styles = {
     padding: 16,
     fontSize: 14,
   },
-
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        backgroundColor: 'transparent',
-        border: 'none',
-        height: 40,
-      },
+});
+
+export const searchInputStyles: ISearchInputStyles = {
+  tweakInput: {
+    inputWrapper: {
+      backgroundColor: 'transparent',
+      border: 'none',
+      height: 40,
     },
   },
+};
 
-  tweakCheckbox: {
-    root: {
-      padding: [11, 16],
-    },
+export const checkboxStyles: ICheckboxStyles = {
+  root: {
+    padding: [11, 16],
+  },
 
-    children: {
-      marginRight: 'auto',
-    },
+  children: {
+    marginRight: 'auto',
   },
+};
 
-  tweakClearButton: {
-    text: {
-      color: colors.GREY_ACTIVE,
+export const clearButtonStyles: IButtonStyles = {
+  text: {
+    color: colors.GREY_ACTIVE,
 
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
+    '&:hover, &:focus': {
+      color: colors.FONT_MEDIUM,
+    },
 
-      '&:active': {
-        color: colors.FONT_MEDIUM,
-      },
+    '&:active': {
+      color: colors.FONT_MEDIUM,
     },
   },
 };
 
-export type MultiSelectListStyles = ComponentStyles<typeof styles>;
+export type IMultiSelectListStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakSearchInput: ISearchInputStyles;
+    tweakCheckbox: ICheckboxStyles;
+    tweakClearButton: IButtonStyles;
+  }
+>;

package/src/components/MultiSelectList/MultiSelectList.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState, useMemo, useRef, useCallback, ReactNode } from 're
 import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
 import { addDataAttributes } from '../../helpers';
-import { useIsMounted, useTheme, useTweakStyles } from '../../hooks';
+import { useIsMounted, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Button } from '../Button';
 import { Checkbox, ICheckboxProps } from '../Checkbox';
@@ -11,10 +11,15 @@ import { ThemedPreloader } from '../ThemedPreloader';
 import { DEFAULT_LOCALE, MultiSelectLocales } from './constants';
 import { defaultConvertFunction, getLocale } from './helpers';
 import { IMultiSelectListValues, IMultiSelectLocale, IMultiSelectLocaleKey } from './types';
-import { MultiSelectListStyles, styles } from './MultiSelectList.styles';
-
-export interface IMultiSelectListProps<Value, Option> extends ICommonProps {
-  tweakStyles?: MultiSelectListStyles;
+import {
+  useStyles,
+  IMultiSelectListStyles,
+  checkboxStyles,
+  searchInputStyles,
+  clearButtonStyles,
+} from './MultiSelectList.styles';
+
+export interface IMultiSelectListProps<Value, Option> extends ICommonProps<IMultiSelectListStyles> {
   value?: Value;
   isSearchEnabled?: boolean;
   width?: number | string;
@@ -31,7 +36,6 @@ export interface IMultiSelectListProps<Value, Option> extends ICommonProps {
   checkboxPosition?: 'left' | 'right';
   pageSize?: number;
   searchMaxLength?: number;
-  testId?: string;
 }
 
 export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Option = string>({
@@ -39,7 +43,7 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
   tweakStyles,
   data,
   isSearchEnabled = false,
-  width,
+  width = 220,
   localeKey = DEFAULT_LOCALE,
   locale = MultiSelectLocales[localeKey],
   onChange,
@@ -56,18 +60,28 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
   testId,
 }: IMultiSelectListProps<Value, Option>): JSX.Element {
   const isMounted = useIsMounted();
-  const { classes, componentStyles } = useTheme('MultiSelectList', styles, tweakStyles, { width });
-
-  const tweakCheckboxStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakCheckbox');
+  const classes = useStyles({ theme: tweakStyles });
 
-  const tweakSearchInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSearchInput');
-
-  const tweakClearButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakClearButton');
+  const tweakCheckboxStyles = useTweakStyles({
+    innerStyles: checkboxStyles,
+    tweakStyles,
+    className: 'tweakCheckbox',
+    currentComponentName: 'MultiSelectList',
+  });
 
-  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+  const tweakSearchInputStyles = useTweakStyles({
+    innerStyles: searchInputStyles,
+    tweakStyles,
+    className: 'tweakSearchInput',
+    currentComponentName: 'MultiSelectList',
+  });
 
-  const chosenValues = value?.include;
-  const chosenValuesIds = useMemo(() => chosenValues?.map(getValueId), [getValueId, chosenValues]);
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'MultiSelectList',
+  });
 
   const [keyCursorOn, setKeyCursorOn] = useState(0);
   const [searchValue, setSearchValue] = useState('');
@@ -82,6 +96,11 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
 
   const observer = useRef<IntersectionObserver>();
 
+  const chosenValues = value?.include;
+
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+  const chosenValuesIds = useMemo(() => chosenValues?.map(getValueId), [getValueId, chosenValues]);
+
   const unchosenOptions = useMemo(
     () => allOptions.filter((v) => !chosenValuesIds?.includes(getValueId(v))),
     [getValueId, allOptions, chosenValuesIds],
@@ -310,7 +329,7 @@ export function MultiSelectList<Value extends IMultiSelectListValues<Option>, Op
   const shouldShowOptionsList = !isLoading && allOptions.length !== 0;
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} style={{ width }} {...addDataAttributes(data)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput

package/src/components/MultiSelectList/helpers.ts

@@ -2,7 +2,7 @@ import merge from 'lodash-es/merge';
 import { DEFAULT_LOCALE, MultiSelectLocales } from './constants';
 import type { IMultiSelectLocale, IMultiSelectLocaleKey } from './types';
 
-export const defaultConvertFunction = (val: unknown) => String(val);
+export const defaultConvertFunction = (val: unknown): string => String(val);
 
 export const getLocale = (
   key: IMultiSelectLocaleKey = DEFAULT_LOCALE,

package/src/components/MultiSelectList/index.ts

@@ -1,3 +1,3 @@
 export * from './MultiSelectList';
 export * from './types';
-export type { MultiSelectListStyles } from './MultiSelectList.styles';
+export type { IMultiSelectListStyles } from './MultiSelectList.styles';

package/src/components/Notification/Notification.styles.ts

@@ -1,11 +1,6 @@
-import { ComponentStyles } from '../../types';
-import type { NotificationType } from './types';
+import { ITweakStyles, createThemedStyles } from '../../theme';
 
-interface IStyleProps {
-  type: NotificationType;
-}
-
-export const styles = {
+export const useStyles = createThemedStyles('Notification', {
   root: {
     display: 'flex',
   },
@@ -45,6 +40,16 @@ export const styles = {
   withText: {},
 
   withTitle: {},
-};
 
-export type NotificationStyles = ComponentStyles<typeof styles, IStyleProps>;
+  error: {},
+
+  info: {},
+
+  warning: {},
+
+  ok: {},
+
+  'not-ok': {},
+});
+
+export type INotificationStyles = ITweakStyles<typeof useStyles>;

package/src/components/Notification/Notification.tsx

@@ -6,15 +6,13 @@ import {
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
-import { NotificationType } from './types';
-import { NotificationStyles, styles } from './Notification.styles';
+import { INotificationType } from './types';
+import { useStyles, INotificationStyles } from './Notification.styles';
 
-export interface INotificationProps extends ICommonProps {
-  tweakStyles?: NotificationStyles;
-  type: NotificationType;
+export interface INotificationProps extends ICommonProps<INotificationStyles> {
+  type: INotificationType;
   /**
    * @default true
    */
@@ -25,7 +23,6 @@ export interface INotificationProps extends ICommonProps {
    * @default `s`
    */
   size?: 's' | 'm' | 'l';
-  testId?: string;
   children?: ReactNode;
 }
 
@@ -40,14 +37,14 @@ export const Notification: FC<INotificationProps> = ({
   data,
   tweakStyles,
 }) => {
-  const { classes } = useTheme('Notification', styles, tweakStyles, { type });
+  const classes = useStyles({ theme: tweakStyles });
 
   const hasText = isStringNotEmpty(text);
   const hasTitle = isStringNotEmpty(title);
 
   return (
     <div
-      className={clsx(classes.root, classes[size], {
+      className={clsx(classes.root, classes[size], classes[type], {
         [classes.inline]: !isFullWidth,
         [classes.withTitle]: hasTitle,
         [classes.withText]: hasText,

package/src/components/Notification/index.ts

@@ -1,3 +1,3 @@
 export * from './Notification';
 export * from './types';
-export type { NotificationStyles } from './Notification.styles';
+export type { INotificationStyles } from './Notification.styles';

package/src/components/Notification/types.ts

@@ -1 +1 @@
-export type NotificationType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
+export type INotificationType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';

package/src/components/NumberInput/index.ts

@@ -1 +1 @@
-export * from './NumberInput';
+export * from './NumberInput';

package/src/components/PhoneInput/PhoneInput.styles.ts

@@ -1,84 +1,89 @@
-import { colors, dimensions } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-const COUNTRY_SELECT_WIDTH = 80;
-
-export const styles = {
-  root: {
-    width: '100%',
-    position: 'relative',
-    boxSizing: 'border-box',
-  },
-
-  countrySelectContainer: {
-    position: 'absolute',
-    left: 1,
-    top: 1,
-    width: COUNTRY_SELECT_WIDTH,
-    height: dimensions.CONTROL_HEIGHT - 2,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRight: ['solid', 1, colors.BORDER_MAIN],
-    transition: 'border-color 0.2s ease-in',
-    cursor: 'pointer',
-    zIndex: 2,
-  },
-
-  disabledCountrySelect: {
-    cursor: 'default',
-  },
-
-  flag: {
-    width: 22,
-    height: 16,
-  },
-
-  arrow: {
-    width: 20,
-    color: colors.GREY_ACTIVE,
-    marginLeft: 8,
-    transition: 'transform .2s ease',
-  },
-
-  up: {
-    transform: 'rotate(180deg)',
-  },
-
-  invalidArrow: {
-    color: colors.RED_WARNING,
-  },
-
-  focusedBorder: {},
-
-  invalidBorder: {
-    borderColor: colors.RED_WARNING,
-  },
-
-  inputContainer: {
-    position: 'relative',
-    flex: 1,
-  },
-
-  flagListContainer: {
-    position: 'absolute',
-    width: '100%',
-    top: dimensions.CONTROL_HEIGHT + 6,
-    left: -1,
-    zIndex: 3,
-  },
-
-  tweakInput: {
-    inputWrapper: {
-      paddingLeft: COUNTRY_SELECT_WIDTH,
-    },
-
-    label: {
-      marginLeft: COUNTRY_SELECT_WIDTH,
-    },
-  },
-
-  tweakCountryList: {},
-};
-
-export type PhoneInputStyles = ComponentStyles<typeof styles>;
+import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+import { IPhoneInputCountryListStyles } from './components';
+
+const COUNTRY_SELECT_WIDTH = 80;
+
+export const useStyles = createThemedStyles('PhoneInput', {
+  root: {
+    width: '100%',
+    position: 'relative',
+    boxSizing: 'border-box',
+  },
+
+  countrySelectContainer: {
+    position: 'absolute',
+    left: 1,
+    top: 1,
+    width: COUNTRY_SELECT_WIDTH,
+    height: dimensions.CONTROL_HEIGHT - 2,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRight: ['solid', 1, colors.BORDER_MAIN],
+    transition: 'border-color 0.2s ease-in',
+    cursor: 'pointer',
+    zIndex: 2,
+  },
+
+  disabledCountrySelect: {
+    cursor: 'default',
+  },
+
+  flag: {
+    width: 22,
+    height: 16,
+  },
+
+  arrow: {
+    width: 20,
+    color: colors.GREY_ACTIVE,
+    marginLeft: 8,
+    transition: 'transform .2s ease',
+  },
+
+  up: {
+    transform: 'rotate(180deg)',
+  },
+
+  invalidArrow: {
+    color: colors.RED_WARNING,
+  },
+
+  focusedBorder: {},
+
+  invalidBorder: {
+    borderColor: colors.RED_WARNING,
+  },
+
+  inputContainer: {
+    position: 'relative',
+    flex: 1,
+  },
+
+  flagListContainer: {
+    position: 'absolute',
+    width: '100%',
+    top: dimensions.CONTROL_HEIGHT + 6,
+    left: -1,
+    zIndex: 3,
+  },
+});
+
+export const inputStyles: IInputStyles = {
+  inputWrapper: {
+    paddingLeft: COUNTRY_SELECT_WIDTH,
+  },
+
+  label: {
+    marginLeft: COUNTRY_SELECT_WIDTH,
+  },
+};
+
+export type IPhoneInputStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakInput: IInputStyles;
+    tweakCountryList: IPhoneInputCountryListStyles;
+  }
+>;

package/src/components/PhoneInput/PhoneInput.tsx

@@ -1,24 +1,30 @@
 import { FC, useState, useRef, useMemo, MouseEvent, FocusEvent, FormEvent } from 'react';
 import clsx from 'clsx';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
 import {
   getCountryCodeFromPhone,
   getFullPhone,
   getPhoneMask,
   getPhoneObjFromString,
   findCountryByCode,
+  addDataAttributes,
 } from '../../helpers';
-import { useOnClickOutsideWithRef, useTheme, useTweakStyles } from '../../hooks';
+import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
 import { Flag } from '../Flag';
 import { Icon } from '../Icon';
 import { IInputProps, Input } from '../Input';
 import { PhoneInputCountryList } from './components';
 import { DEFAULT_VALUE } from './constants';
 import { IPhoneInfo, IPhoneValue } from './types';
-import { PhoneInputStyles, styles } from './PhoneInput.styles';
+import { useStyles, IPhoneInputStyles, inputStyles } from './PhoneInput.styles';
 
 export interface IPhoneInputProps
-  extends Omit<IInputProps, 'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder'> {
-  tweakStyles?: PhoneInputStyles;
+  extends Omit<
+      IInputProps,
+      'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder' | 'tweakStyles'
+    >,
+    ICommonProps<IPhoneInputStyles> {
   locale?: string;
   codeSearchPlaceholder?: string;
   noMatchesLabel?: string;
@@ -33,6 +39,7 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
   locale = 'ru',
   value = DEFAULT_VALUE,
   onChange,
+  data,
   testId,
   isDisabled,
   isInvalid,
@@ -42,13 +49,27 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
   noMatchesLabel = 'Ничего не найдено',
   ...inputProps
 }) => {
-  const { classes, componentStyles } = useTheme('PhoneInput', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'PhoneInput',
+  });
+
+  const tweakCountryListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakCountryList',
+    currentComponentName: 'PhoneInput',
+  });
+
+  const [isListOpen, setIsListOpen] = useState(false);
+  const [isFocused, setFocused] = useState(false);
 
   const list = useRef<HTMLDivElement>(null);
   const inputWrapper = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const [isListOpen, setIsListOpen] = useState(false);
-  const [isFocused, setFocused] = useState(false);
 
   const phoneWithCode = getFullPhone(value);
 
@@ -131,12 +152,8 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
 
   useOnClickOutsideWithRef(list, handleClose, inputWrapper);
 
-  const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
-
-  const tweakCountryListStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakCountryList');
-
   return (
-    <div className={classes.root} data-testid={testId}>
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
       <div
         className={clsx(classes.countrySelectContainer, {
           [classes.disabledCountrySelect]: isDisabled,
@@ -160,7 +177,6 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
       </div>
 
       <Input
-        onChange={handleChange}
         value={phoneWithCode}
         mask={getPhoneMask(countryCode)}
         // alwaysShowMask={false}
@@ -168,10 +184,11 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
         isDisabled={isDisabled}
         isInvalid={isInvalid}
         isActive={isListOpen || isActive}
-        testId={testId !== undefined ? `${testId}-input` : undefined}
+        testId={getTestId(testId, 'input')}
+        tweakStyles={tweakInputStyles}
+        onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        tweakStyles={tweakInputStyles}
         {...inputProps}
       />
 
@@ -180,11 +197,11 @@ export const PhoneInput: FC<IPhoneInputProps> = ({
           <PhoneInputCountryList
             selectedCountryCode={countryCode}
             placeholder={codeSearchPlaceholder}
-            onChange={handleSelect}
-            closeList={handleClose}
             locale={locale}
             tweakStyles={tweakCountryListStyles}
             noMatchesLabel={noMatchesLabel}
+            onChange={handleSelect}
+            closeList={handleClose}
           />
         </div>
       )}

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.styles.ts

@@ -1,10 +1,10 @@
-import { colors, dimensions, helpers } from '../../../../theme';
-import { ComponentStyles } from '../../../../types';
+import { colors, createThemedStyles, dimensions, helpers, ITweakStyles } from '../../../../theme';
+import { IInputStyles } from '../../../Input';
 
 const ROW_HEIGHT = 40;
 const LIST_PADDING = 10;
 
-export const styles = {
+export const useStyles = createThemedStyles('PhoneInputCountryList', {
   root: {
     borderRadius: dimensions.BORDER_RADIUS_SMALL,
     backgroundColor: colors.CLASSIC_WHITE,
@@ -82,19 +82,22 @@ export const styles = {
     color: colors.FONT_LABEL,
     padding: [6, 16],
   },
+});
 
-  tweakInput: {
-    inputWrapper: {
-      border: 'none',
-      height: 'calc(var(--control-height) - 2px)',
-    },
-
-    input: {
-      fontSize: 14,
-      lineHeight: '20px',
-      letterSpacing: 0.15,
-    },
+export const inputStyles: IInputStyles = {
+  inputWrapper: {
+    border: 'none',
+    height: 'calc(var(--control-height) - 2px)',
+  },
+
+  input: {
+    fontSize: 14,
+    lineHeight: '20px',
+    letterSpacing: 0.15,
   },
 };
 
-export type PhoneInputCountryListStyles = ComponentStyles<typeof styles>;
+export type IPhoneInputCountryListStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakInput: IInputStyles }
+>;