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

package/src/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.tsx

@@ -6,7 +6,7 @@ import {
   findCountryIndexByCode,
   sortCountriesByLocale,
 } from '../../../../helpers';
-import { useTheme, useTweakStyles } from '../../../../hooks';
+import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Flag } from '../../../Flag';
 import { Icon } from '../../../Icon';
@@ -14,10 +14,14 @@ import { Input } from '../../../Input';
 import { ScrollIntoViewIfNeeded } from '../../../ScrollIntoViewIfNeeded';
 import { phoneInfo } from '../../phone-info';
 import { IPhoneInfo } from '../../types';
-import { PhoneInputCountryListStyles, styles } from './PhoneInputCountryList.styles';
+import {
+  useStyles,
+  IPhoneInputCountryListStyles,
+  inputStyles,
+} from './PhoneInputCountryList.styles';
 
-export interface IPhoneInputCountryListProps extends ICommonProps {
-  tweakStyles?: PhoneInputCountryListStyles;
+export interface IPhoneInputCountryListProps
+  extends Pick<ICommonProps<IPhoneInputCountryListStyles>, 'tweakStyles'> {
   selectedCountryCode?: string;
   locale: string;
   placeholder: string;
@@ -35,8 +39,14 @@ export const PhoneInputCountryList: FC<IPhoneInputCountryListProps> = ({
   onChange,
   tweakStyles,
 }) => {
-  const { classes, componentStyles } = useTheme('PhoneInputCountryList', styles, tweakStyles);
-  const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'PhoneInputCountryList',
+  });
 
   const sortedCountries = useMemo(
     () => sortCountriesByLocale(phoneInfo, locale),

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

@@ -1,2 +1,2 @@
 export * from './PhoneInputCountryList';
-export type { PhoneInputCountryListStyles } from './PhoneInputCountryList.styles';
+export type { IPhoneInputCountryListStyles } from './PhoneInputCountryList.styles';

package/src/components/PhoneInput/index.ts

@@ -1,5 +1,5 @@
 export * from './PhoneInput';
 export { phoneInfo } from './phone-info';
 export * from './types';
-export type { PhoneInputStyles } from './PhoneInput.styles';
-export type { PhoneInputCountryListStyles } from './components';
+export type { IPhoneInputStyles } from './PhoneInput.styles';
+export type { IPhoneInputCountryListStyles } from './components';

package/src/components/PhoneInput/types.ts

@@ -1,16 +1,16 @@
-export interface IPhoneInfo {
-  countryEn: string;
-  countryRu: string;
-  countryCode: string;
-  dialCode: string;
-  phoneMask?: string;
-  dialCodePriority?: number;
-  areaCodes?: string[];
-  fullCodes: string[];
-}
-
-export interface IPhoneValue {
-  phoneNumber?: string;
-  dialCode?: string;
-  countryCode?: string;
-}
+export interface IPhoneInfo {
+  countryEn: string;
+  countryRu: string;
+  countryCode: string;
+  dialCode: string;
+  phoneMask?: string;
+  dialCodePriority?: number;
+  areaCodes?: string[];
+  fullCodes: string[];
+}
+
+export interface IPhoneValue {
+  phoneNumber?: string;
+  dialCode?: string;
+  countryCode?: string;
+}

package/src/components/RadioButton/RadioButton.styles.ts

@@ -1,37 +1,37 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  input: {
-    appearance: 'none',
-    cursor: 'pointer',
-    borderRadius: '50%',
-    width: 18,
-    height: 18,
-    outline: 'none',
-    transition: '0.1s all ease-in-out',
-    margin: 0,
-    border: [1, 'solid', '#000'],
-
-    '&:checked': {
-      border: [5, 'solid', '#000'],
-    },
-  },
-
-  label: {
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-  },
-
-  content: {
-    marginLeft: 8,
-  },
-
-  isDisabled: {
-    cursor: 'default',
-  },
-
-  isInvalid: {},
-};
-
-export type RadioButtonStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('RadioButton', {
+  input: {
+    appearance: 'none',
+    cursor: 'pointer',
+    borderRadius: '50%',
+    width: 18,
+    height: 18,
+    outline: 'none',
+    transition: '0.1s all ease-in-out',
+    margin: 0,
+    border: [1, 'solid', '#000'],
+
+    '&:checked': {
+      border: [5, 'solid', '#000'],
+    },
+  },
+
+  label: {
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+  },
+
+  content: {
+    marginLeft: 8,
+  },
+
+  isDisabled: {
+    cursor: 'default',
+  },
+
+  isInvalid: {},
+});
+
+export type IRadioButtonStyles = ITweakStyles<typeof useStyles>;

package/src/components/RadioButton/RadioButton.tsx

@@ -1,13 +1,11 @@
 import { ReactNode } from 'react';
 import clsx from 'clsx';
-import { isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { RadioButtonStyles, styles } from './RadioButton.styles';
+import { useStyles, IRadioButtonStyles } from './RadioButton.styles';
 
-export interface IRadioButtonProps<Value extends string> extends ICommonProps {
-  tweakStyles?: RadioButtonStyles;
+export interface IRadioButtonProps<Value extends string> extends ICommonProps<IRadioButtonStyles> {
   children?: ReactNode;
   value: Value;
   groupName: string;
@@ -25,15 +23,17 @@ export function RadioButton<Value extends string>({
   isDisabled,
   isInvalid,
   data,
+  testId,
   tweakStyles,
   onChange,
 }: IRadioButtonProps<Value>): JSX.Element {
-  const { classes } = useTheme('RadioButton', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   return (
     <label
       className={clsx(classes.label, isDisabled && classes.isDisabled)}
       htmlFor={`${groupName}--${value}`}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
     >
       <input

package/src/components/RadioButton/index.ts

@@ -1,2 +1,2 @@
-export * from './RadioButton';
-export type { RadioButtonStyles } from './RadioButton.styles';
+export * from './RadioButton';
+export type { IRadioButtonStyles } from './RadioButton.styles';

package/src/components/ScrollIntoViewIfNeeded/index.ts

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

package/src/components/SearchInput/SearchInput.styles.ts

@@ -1,10 +1,10 @@
 import { rgba } from '../../helpers';
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
 
 const LEFT_PADDING = 44;
 
-export const styles = {
+export const useStyles = createThemedStyles('SearchInput', {
   root: {
     position: 'relative',
   },
@@ -19,32 +19,32 @@ export const styles = {
     zIndex: 2,
     color: colors.GREY_ACTIVE,
   },
+});
+
+export const inputStyles: IInputStyles = {
+  inputWrapper: {
+    height: 35,
+    borderColor: 'transparent',
+    backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
+    borderRadius: 18,
+    paddingLeft: LEFT_PADDING,
+    transitionProperty: 'background-color, border-color',
+  },
+
+  focused: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    borderColor: colors.BORDER_MAIN,
+  },
+
+  input: {
+    fontSize: 14,
+    paddingLeft: 0,
+  },
 
-  tweakInput: {
-    inputWrapper: {
-      height: 35,
-      borderColor: 'transparent',
-      backgroundColor: rgba(colors.BORDER_MAIN, 0.3),
-      borderRadius: 18,
-      paddingLeft: LEFT_PADDING,
-      transitionProperty: 'background-color, border-color',
-    },
-
-    focused: {
-      backgroundColor: colors.CLASSIC_WHITE,
-      borderColor: colors.BORDER_MAIN,
-    },
-
-    input: {
-      fontSize: 14,
-      paddingLeft: 0,
-    },
-
-    label: {
-      left: LEFT_PADDING,
-      fontSize: 14,
-    },
+  label: {
+    left: LEFT_PADDING,
+    fontSize: 14,
   },
 };
 
-export type SearchInputStyles = ComponentStyles<typeof styles>;
+export type ISearchInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;

package/src/components/SearchInput/SearchInput.tsx

@@ -1,10 +1,11 @@
 import { FC } from 'react';
 import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme, useTweakStyles } from '../../hooks';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { IInputProps, Input } from '../Input';
-import { SearchInputStyles, styles } from './SearchInput.styles';
+import { useStyles, inputStyles, ISearchInputStyles } from './SearchInput.styles';
 
 export type ISearchInputProps = Omit<
   IInputProps,
@@ -17,9 +18,8 @@ export type ISearchInputProps = Omit<
   | 'hasFloatingLabel'
   | 'border'
   | 'tweakStyles'
-> & {
-  tweakStyles?: SearchInputStyles;
-};
+> &
+  ICommonProps<ISearchInputStyles>;
 
 export const SearchInput: FC<ISearchInputProps> = ({
   isClearable = true,
@@ -28,9 +28,14 @@ export const SearchInput: FC<ISearchInputProps> = ({
   data,
   ...props
 }) => {
-  const { classes, componentStyles } = useTheme('SearchInput', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
-  const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'SearchInput',
+  });
 
   return (
     <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>

package/src/components/SearchInput/index.ts

@@ -1,2 +1,2 @@
-export * from './SearchInput';
-export type { SearchInputStyles } from './SearchInput.styles';
+export * from './SearchInput';
+export type { ISearchInputStyles } from './SearchInput.styles';

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

@@ -1,96 +1,144 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    width: '100%',
-    position: 'relative',
-    boxSizing: 'border-box',
-  },
-
-  inputWrapper: {
-    width: '100%',
-    cursor: 'text',
-    position: 'relative',
-  },
-
-  listWrapper: {
-    left: -1,
-    zIndex: 3,
-    width: 'fit-content',
-    minWidth: 'calc(100% + 1px)',
-  },
-
-  withoutPopper: {
-    position: 'absolute',
-    top: 'calc(100% + 6px)',
-  },
-
-  listWrapperInBody: {
-    minWidth: 'auto',
-    width: 'auto',
-    maxWidth: 'min-content',
-  },
-
-  arrow: {
-    position: 'absolute',
-    right: 12,
-    top: 14,
-    width: 20,
-    height: 20,
-    cursor: 'pointer',
-    zIndex: 1,
-    transition: 'transform 0.1s ease',
-  },
-
-  activeArrow: {
-    transform: 'rotate(180deg)',
-  },
-
-  disabled: {
-    '& $arrow': {
-      cursor: 'default',
-    },
-  },
-
-  counter: {
-    '&:not(:last-child)': {
-      paddingRight: 8,
-    },
-  },
-
-  icon: {
-    width: 16,
-    height: 16,
-  },
-
-  tweakInput: {
-    input: {
-      paddingRight: 32,
-    },
-
-    disabled: {
-      '& $input': {
-        cursor: 'default',
-      },
-    },
-
-    controls: {
-      paddingRight: 32,
-    },
-  },
-
-  tweakSelectList: {},
-
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        height: 48,
-        borderRadius: 0,
-        border: 'none',
-        backgroundColor: 'transparent',
-      },
-    },
-  },
-};
-
-export type SelectStyles = ComponentStyles<typeof styles>;
+import { mergeStyles } from '@true-engineering/true-react-platform-helpers';
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+import { ISearchInputStyles } from '../SearchInput';
+import { ISelectListStyles } from './components';
+
+export const useStyles = createThemedStyles('Select', {
+  root: {
+    width: '100%',
+    position: 'relative',
+    boxSizing: 'border-box',
+  },
+
+  inputWrapper: {
+    width: '100%',
+    cursor: 'text',
+    position: 'relative',
+  },
+
+  listWrapper: {
+    left: -1,
+    zIndex: 3,
+    width: 'fit-content',
+    minWidth: 'calc(100% + 1px)',
+  },
+
+  withoutPopper: {
+    position: 'absolute',
+    top: 'calc(100% + 6px)',
+  },
+
+  listWrapperInBody: {
+    minWidth: 'auto',
+    width: 'auto',
+    maxWidth: 'min-content',
+  },
+
+  arrow: {
+    position: 'absolute',
+    right: 12,
+    top: 14,
+    width: 20,
+    height: 20,
+    cursor: 'pointer',
+    zIndex: 1,
+    transition: 'transform 0.1s ease',
+  },
+
+  activeArrow: {
+    transform: 'rotate(180deg)',
+  },
+
+  disabled: {
+    '& $arrow': {
+      cursor: 'default',
+    },
+  },
+
+  counter: {
+    '&:not(:last-child)': {
+      paddingRight: 8,
+    },
+  },
+
+  icon: {
+    width: 16,
+    height: 16,
+  },
+});
+
+const baseInputStyles: IInputStyles = {
+  input: {
+    paddingRight: 32,
+  },
+
+  disabled: {
+    '& $input': {
+      cursor: 'default',
+    },
+  },
+
+  controls: {
+    paddingRight: 32,
+  },
+};
+
+const readonlyInputBaseStyles: IInputStyles = {
+  inputIcon: {
+    width: 'auto',
+  },
+};
+
+const multiSelectInputBaseStyles: IInputStyles = {
+  inputIcon: {
+    width: 'auto',
+  },
+};
+
+export const readonlyInputStyles = mergeStyles(baseInputStyles, readonlyInputBaseStyles);
+export const multiSelectInputStyles = mergeStyles(baseInputStyles, multiSelectInputBaseStyles);
+export const readonlyMultiSelectStyles = mergeStyles(
+  baseInputStyles,
+  readonlyInputBaseStyles,
+  multiSelectInputBaseStyles,
+);
+
+export const getInputStyles = ({
+  hasReadonlyInput,
+  isMultiSelect,
+}: {
+  hasReadonlyInput: boolean;
+  isMultiSelect: boolean;
+}): IInputStyles => {
+  if (hasReadonlyInput && isMultiSelect) {
+    return readonlyMultiSelectStyles;
+  }
+  if (hasReadonlyInput && !isMultiSelect) {
+    return readonlyInputStyles;
+  }
+  if (!hasReadonlyInput && isMultiSelect) {
+    return multiSelectInputStyles;
+  }
+  return baseInputStyles;
+};
+
+export const searchInputStyles: ISearchInputStyles = {
+  tweakInput: {
+    inputWrapper: {
+      height: 48,
+      borderRadius: 0,
+      border: 'none',
+      backgroundColor: 'transparent',
+    },
+  },
+};
+
+export type ISelectStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakInput: IInputStyles;
+    tweakSelectList: ISelectListStyles;
+    tweakSearchInput: ISearchInputStyles;
+  }
+>;