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

package/src/components/MoreMenu/MoreMenu.tsx

@@ -2,21 +2,19 @@ import { FC, MouseEvent, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme, useTweakStyles, useOnClickOutsideWithRef } from '../../hooks';
+import { useTweakStyles, useOnClickOutsideWithRef } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { IListItem, List } from '../List';
-import { MoreMenuStyles, styles } from './MoreMenu.styles';
+import { useStyles, IMoreMenuStyles } from './MoreMenu.styles';
 
-export interface IMoreMenuProps extends ICommonProps {
-  tweakStyles?: MoreMenuStyles;
+export interface IMoreMenuProps extends ICommonProps<IMoreMenuStyles> {
   items: IListItem[];
   isDisabled?: boolean;
   /**
    * @default true
    */
   hasDefaultStateBackground?: boolean;
-  testId?: string;
   onMenuOpen?(): void;
   onMenuClose?(): void;
 }
@@ -31,8 +29,13 @@ export const MoreMenu: FC<IMoreMenuProps> = ({
   onMenuOpen,
   onMenuClose,
 }) => {
-  const { classes, componentStyles } = useTheme('MoreMenu', styles, tweakStyles);
-  const tweakListStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakList');
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakList',
+    currentComponentName: 'MoreMenu',
+  });
 
   const [isMenuShown, setIsMenuShown] = useState(false);
   const list = useRef<HTMLDivElement>(null);

package/src/components/MoreMenu/index.ts

@@ -1,2 +1,2 @@
 export * from './MoreMenu';
-export type { MoreMenuStyles } from './MoreMenu.styles';
+export type { IMoreMenuStyles } from './MoreMenu.styles';

package/src/components/MultiSelect/MultiSelect.styles.ts

@@ -1,6 +1,7 @@
-import { ComponentStyles } from '../../types';
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IMultiSelectListStyles } from '../MultiSelectList';
 
-export const styles = {
+export const useStyles = createThemedStyles('MultiSelect', {
   root: {
     position: 'relative',
     boxSizing: 'border-box',
@@ -44,12 +45,15 @@ export const styles = {
   left: {},
 
   right: {},
+});
 
-  tweakMultiSelectList: {
-    root: {
-      width: '100%',
-    },
+export const multiSelectListStyles: IMultiSelectListStyles = {
+  root: {
+    width: '100%',
   },
 };
 
-export type MultiSelectStyles = ComponentStyles<typeof styles>;
+export type IMultiSelectStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakMultiSelectList: IMultiSelectListStyles }
+>;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -1,6 +1,9 @@
 import { useRef, useState } from 'react';
 import clsx from 'clsx';
-import { useOnClickOutside, useTheme, useTweakStyles } from '../../hooks';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../helpers';
+import { useOnClickOutside, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
 import {
   MultiSelectList,
   IMultiSelectListValues,
@@ -8,21 +11,20 @@ import {
   IMultiSelectLocaleKey,
 } from '../MultiSelectList';
 import { MultiSelectInput } from './components';
-import { THorizontalCornerConnection } from './types';
-import { styles, MultiSelectStyles } from './MultiSelect.styles';
+import { IHorizontalCornerConnection } from './types';
+import { useStyles, IMultiSelectStyles, multiSelectListStyles } from './MultiSelect.styles';
 
-export interface IMultiSelectProps<Value = string> {
-  tweakStyles?: MultiSelectStyles;
+export interface IMultiSelectProps<Value = string> extends ICommonProps<IMultiSelectStyles> {
   value?: IMultiSelectListValues<Value>;
-  corners?: THorizontalCornerConnection;
+  corners?: IHorizontalCornerConnection;
   isInvalid?: boolean;
   isRequired?: boolean;
   isDisabled?: boolean;
   placeholder?: string;
   localeKey?: IMultiSelectLocaleKey;
   locale?: IMultiSelectLocale;
-  onChange: (value?: IMultiSelectListValues<Value>) => void;
-  fetchOptions: (value?: string, page?: number) => Promise<Value[]>;
+  onChange(value?: IMultiSelectListValues<Value>): void;
+  fetchOptions(value?: string, page?: number): Promise<Value[]>;
 }
 
 export function MultiSelect<Value = string>({
@@ -34,12 +36,23 @@ export function MultiSelect<Value = string>({
   placeholder = '',
   localeKey,
   locale,
+  testId,
+  data,
   onChange,
   fetchOptions,
   tweakStyles,
 }: IMultiSelectProps<Value>): JSX.Element {
-  const { classes, componentStyles } = useTheme('MultiSelect', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakMultiSelectListStyles = useTweakStyles({
+    innerStyles: multiSelectListStyles,
+    tweakStyles,
+    className: 'tweakMultiSelectList',
+    currentComponentName: 'MultiSelect',
+  });
+
   const [isOpen, setIsOpen] = useState(false);
+
   const ref = useRef(null);
 
   const handleOnClose = () => {
@@ -48,12 +61,6 @@ export function MultiSelect<Value = string>({
 
   useOnClickOutside(ref, handleOnClose, classes.root);
 
-  const tweakMultiSelectListStyles = useTweakStyles(
-    componentStyles,
-    tweakStyles,
-    'tweakMultiSelectList',
-  );
-
   return (
     <div
       className={clsx(
@@ -64,6 +71,8 @@ export function MultiSelect<Value = string>({
         isRequired && classes.required,
         isDisabled && classes.disabled,
       )}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
     >
       {/* Input */}
       <MultiSelectInput

package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.styles.ts

@@ -1,6 +1,6 @@
-import { ComponentStyles } from '../../../../types';
+import { ITweakStyles, createThemedStyles } from '../../../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles('MultiSelectInput', {
   root: {
     display: 'flex',
     justifyContent: 'center',
@@ -68,6 +68,6 @@ export const styles = {
   },
 
   indicatorDisabled: {},
-};
+});
 
-export type MultiSelectInputStyles = ComponentStyles<typeof styles>;
+export type IMultiSelectInputStyles = ITweakStyles<typeof useStyles>;

package/src/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.tsx

@@ -1,16 +1,16 @@
 import { ReactElement } from 'react';
 import clsx from 'clsx';
-import { useTheme } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
-import { Icon, IMultiSelectListValues } from '../../../index';
-import { styles } from './MultiSelectInput.styles';
+import { Icon, IMultiSelectInputStyles, IMultiSelectListValues } from '../../../index';
+import { useStyles } from './MultiSelectInput.styles';
 
-export interface IMultiSelectInputProps<Value> extends ICommonProps {
+export interface IMultiSelectInputProps<Value>
+  extends Pick<ICommonProps<IMultiSelectInputStyles>, 'tweakStyles'> {
   value?: IMultiSelectListValues<Value>;
   isOpen: boolean;
   isDisabled: boolean;
   placeholder: string;
-  onToggle: (state: boolean) => void;
+  onToggle(state: boolean): void;
 }
 
 export function MultiSelectInput<Value>({
@@ -18,9 +18,10 @@ export function MultiSelectInput<Value>({
   isOpen,
   isDisabled = false,
   placeholder = '',
+  tweakStyles,
   onToggle,
 }: IMultiSelectInputProps<Value>): ReactElement | null {
-  const { classes } = useTheme('MultiSelectInput', styles);
+  const classes = useStyles({ theme: tweakStyles });
 
   const value = v?.include;
 

package/src/components/MultiSelect/components/MultiSelectInput/index.ts

@@ -1,2 +1,2 @@
 export * from './MultiSelectInput';
-export type { MultiSelectInputStyles } from './MultiSelectInput.styles';
+export type { IMultiSelectInputStyles } from './MultiSelectInput.styles';

package/src/components/MultiSelect/index.ts

@@ -1,4 +1,4 @@
 export * from './MultiSelect';
 export * from './types';
-export type { MultiSelectStyles } from './MultiSelect.styles';
-export type { MultiSelectInputStyles } from './components';
+export type { IMultiSelectStyles } from './MultiSelect.styles';
+export type { IMultiSelectInputStyles } from './components';

package/src/components/MultiSelect/types.ts

@@ -1 +1 @@
-export type THorizontalCornerConnection = 'full' | 'left' | 'right';
+export type IHorizontalCornerConnection = 'full' | 'left' | 'right';

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/PhoneInput/PhoneInput.styles.ts

@@ -1,9 +1,10 @@
-import { colors, dimensions } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+import { IPhoneInputCountryListStyles } from './components';
 
 const COUNTRY_SELECT_WIDTH = 80;
 
-export const styles = {
+export const useStyles = createThemedStyles('PhoneInput', {
   root: {
     width: '100%',
     position: 'relative',
@@ -67,18 +68,22 @@ export const styles = {
     left: -1,
     zIndex: 3,
   },
+});
 
-  tweakInput: {
-    inputWrapper: {
-      paddingLeft: COUNTRY_SELECT_WIDTH,
-    },
-
-    label: {
-      marginLeft: COUNTRY_SELECT_WIDTH,
-    },
+export const inputStyles: IInputStyles = {
+  inputWrapper: {
+    paddingLeft: COUNTRY_SELECT_WIDTH,
   },
 
-  tweakCountryList: {},
+  label: {
+    marginLeft: COUNTRY_SELECT_WIDTH,
+  },
 };
 
-export type PhoneInputStyles = ComponentStyles<typeof styles>;
+export type IPhoneInputStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakInput: IInputStyles;
+    tweakCountryList: IPhoneInputCountryListStyles;
+  }
+>;