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

package/src/components/Input/index.ts

@@ -1,3 +1,3 @@
 export * from './Input';
 export * from './types';
-export type { InputStyles } from './Input.styles';
+export type { IInputStyles } from './Input.styles';

package/src/components/List/List.styles.ts

@@ -1,52 +1,51 @@
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-const ITEM_HORIZONTAL_PADDING = 16;
-const ICON_SIZE = 20;
-const ICON_GAP = 12;
-
-export const styles = {
-  root: {
-    minWidth: 180,
-    backgroundColor: colors.CLASSIC_WHITE,
-    padding: [8, 0],
-    listStyle: 'none',
-    margin: 0,
-  },
-
-  item: {
-    display: 'flex',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    fontSize: 16,
-    whiteSpace: 'nowrap',
-    minHeight: 40,
-    padding: [0, ITEM_HORIZONTAL_PADDING],
-    transition: 'background-color 0.25s ease-in-out',
-    cursor: 'pointer',
-  },
-
-  disabledItem: {
-    cursor: 'default',
-  },
-
-  spacer: {
-    height: 1,
-    backgroundColor: colors.BORDER_LIGHT,
-  },
-
-  withIconGap: {
-    paddingLeft: ITEM_HORIZONTAL_PADDING + ICON_SIZE + ICON_GAP,
-  },
-
-  icon: {
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-    marginRight: ICON_GAP,
-    flexShrink: 0,
-  },
-
-  content: {},
-};
-
-export type ListStyles = ComponentStyles<typeof styles>;
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+
+const ITEM_HORIZONTAL_PADDING = 16;
+const ICON_SIZE = 20;
+const ICON_GAP = 12;
+
+export const useStyles = createThemedStyles('List', {
+  root: {
+    minWidth: 180,
+    backgroundColor: colors.CLASSIC_WHITE,
+    padding: [8, 0],
+    listStyle: 'none',
+    margin: 0,
+  },
+
+  item: {
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    fontSize: 16,
+    whiteSpace: 'nowrap',
+    minHeight: 40,
+    padding: [0, ITEM_HORIZONTAL_PADDING],
+    transition: 'background-color 0.25s ease-in-out',
+    cursor: 'pointer',
+  },
+
+  disabledItem: {
+    cursor: 'default',
+  },
+
+  spacer: {
+    height: 1,
+    backgroundColor: colors.BORDER_LIGHT,
+  },
+
+  withIconGap: {
+    paddingLeft: ITEM_HORIZONTAL_PADDING + ICON_SIZE + ICON_GAP,
+  },
+
+  icon: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    marginRight: ICON_GAP,
+    flexShrink: 0,
+  },
+
+  content: {},
+});
+
+export type IListStyles = ITweakStyles<typeof useStyles>;

package/src/components/List/List.tsx

@@ -7,20 +7,17 @@ import {
 } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { renderIcon } from '../../helpers/snippets';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { IListItem } from './types';
-import { ListStyles, styles } from './List.styles';
+import { useStyles, IListStyles } from './List.styles';
 
-export interface IListProps extends ICommonProps {
-  tweakStyles?: ListStyles;
+export interface IListProps extends ICommonProps<IListStyles> {
   items: IListItem[];
-  testId?: string;
   onClick?(): void;
 }
 
 export const List: FC<IListProps> = ({ items, testId, data, tweakStyles, onClick }) => {
-  const { classes } = useTheme('List', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   const handleItemClick = (item: IListItem) => {
     item.onClick();

package/src/components/List/index.ts

@@ -1,3 +1,3 @@
 export * from './List';
 export * from './types';
-export type { ListStyles } from './List.styles';
+export type { IListStyles } from './List.styles';

package/src/components/Modal/Modal.styles.ts

@@ -1,6 +1,6 @@
 import { rgba } from '../../helpers';
-import { colors, dimensions } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { ICloseButtonStyles } from '../CloseButton';
 
 const VERTICAL_OVERLAY_PADDING = 50;
 
@@ -8,7 +8,7 @@ const MODAL_HORIZONTAL_PADDING_L = 40;
 const MODAL_HORIZONTAL_PADDING_M = 36;
 const MODAL_HORIZONTAL_PADDING_S = 26;
 
-export const styles = {
+export const useStyles = createThemedStyles('Modal', {
   root: {},
 
   fixedPosition: {
@@ -298,8 +298,6 @@ export const styles = {
   'modal-enter-active': { extend: 'animationStart' },
   'modal-exit': { extend: 'animationStart' },
   'modal-exit-active': { extend: 'animationEnd' },
+});
 
-  tweakCloseButton: {},
-};
-
-export type ModalStyles = ComponentStyles<typeof styles>;
+export type IModalStyles = ITweakStyles<typeof useStyles, { tweakCloseButton: ICloseButtonStyles }>;

package/src/components/Modal/Modal.tsx

@@ -8,14 +8,13 @@ import {
   isReactNodeNotEmpty,
 } 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 { CloseButton } from '../CloseButton';
 import { IModalPosition, IModalTransitionProps } from './types';
-import { ModalStyles, styles } from './Modal.styles';
+import { useStyles, IModalStyles } from './Modal.styles';
 
-export interface IModalProps extends ICommonProps, IModalTransitionProps {
-  tweakStyles?: ModalStyles;
+export interface IModalProps extends ICommonProps<IModalStyles>, IModalTransitionProps {
   title?: ReactNode;
   size?: 'l' | 'm' | 's';
   isFooterSticky?: boolean;
@@ -30,7 +29,6 @@ export interface IModalProps extends ICommonProps, IModalTransitionProps {
   shouldBlockScroll?: boolean;
   isOpen?: boolean;
   zIndex?: number;
-  testId?: string;
   onClose?(): void;
 }
 
@@ -57,13 +55,17 @@ export const Modal: FC<IModalProps> = ({
   onClose,
   ...restProps
 }) => {
-  const isModalOpen = restProps.in ?? isOpen;
-  const { classes, componentStyles } = useTheme('Modal', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
-  const tweakCloseButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakCloseButton');
+  const tweakCloseButtonStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakCloseButton',
+    currentComponentName: 'Modal',
+  });
 
   const [isClickOnOverlay, setIsClickOnOverlay] = useState(false);
 
+  const isModalOpen = restProps.in ?? isOpen;
   const hasFooter = buttons !== undefined && buttons.length > 0;
   const overlay = useRef<HTMLDivElement>(null);
 

package/src/components/Modal/index.ts

@@ -1,3 +1,3 @@
 export * from './Modal';
 export * from './types';
-export type { ModalStyles } from './Modal.styles';
+export type { IModalStyles } from './Modal.styles';

package/src/components/MoreMenu/MoreMenu.stories.tsx

@@ -1,46 +1,46 @@
-import { ComponentStory } from '@storybook/react';
-import { colors } from '../../theme';
-import { MoreMenu } from './MoreMenu';
-
-const menuItems = [
-  { item: 'Печатать билет', onClick: console.log },
-  { item: 'Выписать', onClick: console.log },
-  { item: 'Аннулировать', onClick: console.log, shouldDrawSpacerBelow: true },
-  {
-    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
-    onClick: console.log,
-  },
-  {
-    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
-    onClick: console.log,
-  },
-];
-
-export default {
-  title: 'MoreMenu',
-  component: MoreMenu,
-};
-
-const Template: ComponentStory<typeof MoreMenu> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 600,
-      height: 400,
-    }}
-  >
-    <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
-      <div style={{ flexShrink: 0 }}>Test subject</div>
-      <MoreMenu {...args} items={menuItems} />
-    </div>
-  </div>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  isDisabled: false,
-  hasDefaultStateBackground: true,
-};
+import { ComponentStory } from '@storybook/react';
+import { colors } from '../../theme';
+import { MoreMenu } from './MoreMenu';
+
+const menuItems = [
+  { item: 'Печатать билет', onClick: console.log },
+  { item: 'Выписать', onClick: console.log },
+  { item: 'Аннулировать', onClick: console.log, shouldDrawSpacerBelow: true },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+  },
+  {
+    item: (() => <div style={{ color: colors.RED_ACTIVE }}>Удалить</div>)(),
+    onClick: console.log,
+  },
+];
+
+export default {
+  title: 'MoreMenu',
+  component: MoreMenu,
+};
+
+const Template: ComponentStory<typeof MoreMenu> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 600,
+      height: 400,
+    }}
+  >
+    <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+      <div style={{ flexShrink: 0 }}>Test subject</div>
+      <MoreMenu {...args} items={menuItems} />
+    </div>
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  isDisabled: false,
+  hasDefaultStateBackground: true,
+};

package/src/components/MoreMenu/MoreMenu.styles.ts

@@ -1,8 +1,8 @@
 import { rgba } from '../../helpers';
-import { colors } from '../../theme';
-import { ComponentStyles } from '../../types';
+import { colors, ITweakStyles, createThemedStyles } from '../../theme';
+import { IListStyles } from '../List';
 
-export const styles = {
+export const useStyles = createThemedStyles('MoreMenu', {
   root: {
     position: 'relative',
   },
@@ -63,8 +63,6 @@ export const styles = {
     right: 0,
     marginTop: 6,
   },
+});
 
-  tweakList: {},
-};
-
-export type MoreMenuStyles = ComponentStyles<typeof styles>;
+export type IMoreMenuStyles = ITweakStyles<typeof useStyles, { tweakList: IListStyles }>;

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 * from './MoreMenu';
+export type { IMoreMenuStyles } from './MoreMenu.styles';

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

@@ -1,55 +1,59 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    position: 'relative',
-    boxSizing: 'border-box',
-    height: '100%',
-    width: '100%',
-    cursor: 'pointer',
-    fontSize: 16,
-  },
-
-  required: {
-    '&:before': {
-      content: '""',
-      position: 'absolute',
-      left: -12,
-      top: '50%',
-      transform: 'translate(0, -50%)',
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-    },
-  },
-
-  disabled: {
-    cursor: 'default',
-  },
-
-  listContainer: {
-    position: 'absolute',
-    top: 'calc(100% + 4px)',
-    left: -1,
-    right: -1,
-    zIndex: 2,
-  },
-
-  invalid: {},
-
-  open: {},
-
-  full: {},
-
-  left: {},
-
-  right: {},
-
-  tweakMultiSelectList: {
-    root: {
-      width: '100%',
-    },
-  },
-};
-
-export type MultiSelectStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+import { IMultiSelectListStyles } from '../MultiSelectList';
+
+export const useStyles = createThemedStyles('MultiSelect', {
+  root: {
+    position: 'relative',
+    boxSizing: 'border-box',
+    height: '100%',
+    width: '100%',
+    cursor: 'pointer',
+    fontSize: 16,
+  },
+
+  required: {
+    '&:before': {
+      content: '""',
+      position: 'absolute',
+      left: -12,
+      top: '50%',
+      transform: 'translate(0, -50%)',
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+    },
+  },
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  listContainer: {
+    position: 'absolute',
+    top: 'calc(100% + 4px)',
+    left: -1,
+    right: -1,
+    zIndex: 2,
+  },
+
+  invalid: {},
+
+  open: {},
+
+  full: {},
+
+  left: {},
+
+  right: {},
+});
+
+export const multiSelectListStyles: IMultiSelectListStyles = {
+  root: {
+    width: '100%',
+  },
+};
+
+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';