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

package/dist/types.d.ts

@@ -1,12 +1,13 @@
 import { ReactElement } from 'react';
-import { Styles } from 'react-jss';
 import { Modifier, Placement } from 'react-overlays/usePopper';
-import type { ICommonIcon, IComplexIcon, IIconType, IPreloaderSvgType, ISvgIcon } from './components';
+import type { IIconType } from './components';
 export interface IDataAttributes {
     [key: string]: unknown;
 }
-export interface ICommonProps {
+export interface ICommonProps<TweakStyles> {
     data?: IDataAttributes;
+    testId?: string;
+    tweakStyles?: TweakStyles;
 }
 export interface IDropdownWithPopperOptions {
     shouldUsePopper?: boolean;
@@ -19,22 +20,3 @@ export interface IDropdownWithPopperOptions {
     flipOptions?: Record<string, any>;
 }
 export declare type IIcon = IIconType | ReactElement;
-export declare type ComponentStyles<StyleSheet, Props = unknown> = Partial<Styles<keyof StyleSheet, Props>>;
-export declare type ComponentName = 'AccountInfo' | 'AddButton' | 'Button' | 'CloseButton' | 'Checkbox' | 'CssBaseline' | 'Colors' | 'DateInput' | 'DatePicker' | 'DatePickerHeader' | 'Description' | 'DotsPreloader' | 'SvgPreloader' | 'FiltersPane' | 'FilterInterval' | 'FilterSelect' | 'FilterWithDates' | 'FilterWithPeriod' | 'FilterWrapper' | 'FilterValueView' | 'FiltersPaneSearch' | 'Flag' | 'FlexibleTable' | 'Icon' | 'IncrementInput' | 'Input' | 'List' | 'Modal' | 'MoreMenu' | 'MultiSelect' | 'MultiSelectInput' | 'MultiSelectList' | 'Notification' | 'PhoneInput' | 'PhoneInputCountryList' | 'RadioButton' | 'SearchInput' | 'Select' | 'SelectList' | 'ScrollIntoViewIfNeeded' | 'Switch' | 'TextArea' | 'TextWithInfo' | 'TextWithTooltip' | 'ThemedPreloader' | 'Tooltip' | 'Toaster';
-export declare type UiKitAnimations = Record<string, any>;
-export declare type UiKitHelpers = Record<string, Styles | (() => Styles)>;
-export interface UiKitTheme {
-    name: string;
-    components?: Partial<Record<ComponentName, ComponentStyles<any, any>>>;
-    /**
-     * Для переопределения иконок, которые есть в UiKit
-     */
-    icons?: Partial<Record<ICommonIcon, ISvgIcon>>;
-    complexIcons?: Partial<Record<IComplexIcon, string>>;
-    preloaders?: Partial<Record<IPreloaderSvgType, string>>;
-    animations?: UiKitAnimations;
-    colors?: Record<string, string>;
-    dimensions?: Record<string, number>;
-    boxShadows?: Record<string, string>;
-    helpers?: UiKitHelpers;
-}

package/dist/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "2.5.0",
+  "version": "3.0.0-alpha.0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -42,7 +42,7 @@
     "types-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@true-engineering/true-react-platform-helpers": "0.0.5",
+    "@true-engineering/true-react-platform-helpers": "0.0.6",
     "clsx": "1.2.1",
     "country-flag-icons": "1.5.5",
     "date-fns": "2.29.3",

package/src/components/AccountInfo/AccountInfo.styles.ts

@@ -1,55 +1,51 @@
-import { animations } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-//
-
-export const styles = {
-  root: {
-    display: 'flex',
-  },
-
-  account: {
-    display: 'flex',
-    position: 'relative',
-    alignItems: 'center',
-    cursor: 'pointer',
-  },
-
-  accountName: {
-    margin: [0, 2, 0, 10],
-    fontSize: 14,
-    transition: 'color 0.25s ease-in-out',
-  },
-
-  accountNameOpened: {},
-
-  accountChevron: {
-    width: 16,
-    height: 16,
-    transition: 'ease-in-out 0.25s',
-    transitionProperty: 'transform, color',
-  },
-
-  accountChevronOpened: {
-    transform: 'rotate(180deg)',
-  },
-
-  accountMenu: {
-    position: 'absolute',
-    zIndex: 90,
-    top: '100%',
-    right: 0,
-    marginTop: 8,
-  },
-
-  avatarIcon: {
-    width: 32,
-    height: 32,
-  },
-
-  ...animations.slideUp,
-
-  tweakList: {},
-};
-
-export type AccountInfoStyles = ComponentStyles<typeof styles>;
+import { animations, createThemedStyles, ITweakStyles } from '../../theme';
+import { IListStyles } from '../List';
+
+export const useStyles = createThemedStyles('AccountInfo', {
+  root: {
+    display: 'flex',
+  },
+
+  account: {
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'center',
+    cursor: 'pointer',
+  },
+
+  accountName: {
+    margin: [0, 2, 0, 10],
+    fontSize: 14,
+    transition: 'color 0.25s ease-in-out',
+  },
+
+  accountNameOpened: {},
+
+  accountChevron: {
+    width: 16,
+    height: 16,
+    transition: 'ease-in-out 0.25s',
+    transitionProperty: 'transform, color',
+  },
+
+  accountChevronOpened: {
+    transform: 'rotate(180deg)',
+  },
+
+  accountMenu: {
+    position: 'absolute',
+    zIndex: 90,
+    top: '100%',
+    right: 0,
+    marginTop: 8,
+  },
+
+  avatarIcon: {
+    width: 32,
+    height: 32,
+  },
+
+  ...animations.slideUp,
+});
+
+export type IAccountInfoStyles = ITweakStyles<typeof useStyles, { tweakList: IListStyles }>;

package/src/components/AccountInfo/AccountInfo.tsx

@@ -1,16 +1,16 @@
 import { FC, ReactNode, useRef, useState, MouseEvent } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useOnClickOutsideWithRef, useTheme, useTweakStyles } from '../../hooks';
+import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { IListProps, List } from '../List';
 import { ANIMATION_TIMEOUT } from './constants';
-import { AccountInfoStyles, styles } from './AccountInfo.styles';
+import { useStyles, IAccountInfoStyles } from './AccountInfo.styles';
 
-export interface IAccountInfoProps extends ICommonProps {
-  tweakStyles?: AccountInfoStyles;
+export interface IAccountInfoProps extends ICommonProps<IAccountInfoStyles> {
   avatar?: ReactNode;
   accountName: ReactNode;
   options: IListProps['items'];
@@ -18,15 +18,20 @@ export interface IAccountInfoProps extends ICommonProps {
 
 export const AccountInfo: FC<IAccountInfoProps> = ({
   data,
+  testId,
   avatar,
   tweakStyles,
   accountName,
   options,
 }) => {
-  // TODO: потестить
-  const { classes, componentStyles } = useTheme('AccountInfo', styles, tweakStyles, {
-    timeout: ANIMATION_TIMEOUT,
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakList',
+    currentComponentName: 'AccountInfo',
   });
+
   const nameRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
@@ -39,10 +44,8 @@ export const AccountInfo: FC<IAccountInfoProps> = ({
 
   useOnClickOutsideWithRef(dropdownRef, () => setIsMenuOpen(false), nameRef);
 
-  const tweakListStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakList');
-
   return (
-    <div className={classes.root} {...addDataAttributes(data)} tabIndex={0}>
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
       {avatar ?? (
         <div className={classes.avatarIcon}>
           <Icon type="avatar" />

package/src/components/AccountInfo/constants.ts

@@ -1 +1 @@
-export const ANIMATION_TIMEOUT = 150;
+export const ANIMATION_TIMEOUT = 150; // такой же тайминг должен быть в стилях анимации

package/src/components/AccountInfo/index.ts

@@ -1,2 +1,2 @@
-export * from './AccountInfo';
-export type { AccountInfoStyles } from './AccountInfo.styles';
+export * from './AccountInfo';
+export type { IAccountInfoStyles } from './AccountInfo.styles';

package/src/components/AddButton/AddButton.stories.tsx

@@ -1,21 +1,21 @@
-import { ComponentStory } from '@storybook/react';
-import { AddButton } from './AddButton';
-
-export default {
-  title: 'AddButton',
-  component: AddButton,
-};
-
-const Template: ComponentStory<typeof AddButton> = (args) => (
-  <AddButton {...args} onClick={console.log} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: 'Добавить билет',
-  isDisabled: false,
-  isFullWidth: false,
-};
-
-Default.parameters = { controls: { exclude: ['onClick'] } };
+import { ComponentStory } from '@storybook/react';
+import { AddButton } from './AddButton';
+
+export default {
+  title: 'AddButton',
+  component: AddButton,
+};
+
+const Template: ComponentStory<typeof AddButton> = (args) => (
+  <AddButton {...args} onClick={console.log} />
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  text: 'Добавить билет',
+  isDisabled: false,
+  isFullWidth: false,
+};
+
+Default.parameters = { controls: { exclude: ['onClick'] } };

package/src/components/AddButton/AddButton.styles.ts

@@ -1,34 +1,34 @@
-import { ComponentStyles } from '../../types';
-
-export const styles = {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0px 16px',
-    height: 52,
-    cursor: 'pointer',
-    outline: 'none',
-    transition: 'border-color 0.1s ease-in, background-color 0.1s ease-in',
-    fontSize: 14,
-
-    '&:hover': {
-      transition: 'border-color 0.1s ease-in, background-color 0.1s ease-in',
-    },
-  },
-
-  disabled: {
-    cursor: 'default',
-  },
-
-  icon: {
-    width: 20,
-    display: 'inline-block',
-    marginRight: 8,
-  },
-
-  fullWidth: {
-    width: '100%',
-  },
-};
-
-export type AddButtonStyles = ComponentStyles<typeof styles>;
+import { createThemedStyles, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('AddButton', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '0px 16px',
+    height: 52,
+    cursor: 'pointer',
+    outline: 'none',
+    transition: 'border-color 0.1s ease-in, background-color 0.1s ease-in',
+    fontSize: 14,
+
+    '&:hover': {
+      transition: 'border-color 0.1s ease-in, background-color 0.1s ease-in',
+    },
+  },
+
+  disabled: {
+    cursor: 'default',
+  },
+
+  icon: {
+    width: 20,
+    display: 'inline-block',
+    marginRight: 8,
+  },
+
+  fullWidth: {
+    width: '100%',
+  },
+});
+
+export type IAddButtonStyles = ITweakStyles<typeof useStyles>;

package/src/components/AddButton/AddButton.tsx

@@ -1,13 +1,12 @@
 import { FC } from 'react';
 import clsx from 'clsx';
+import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
-import { useTheme } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
-import { AddButtonStyles, styles } from './AddButton.styles';
+import { useStyles, IAddButtonStyles } from './AddButton.styles';
 
-export interface IAddButtonProps extends ICommonProps {
-  tweakStyles?: AddButtonStyles;
+export interface IAddButtonProps extends ICommonProps<IAddButtonStyles> {
   text: string;
   type?: 'submit' | 'button';
   isDisabled?: boolean;
@@ -23,9 +22,10 @@ export const AddButton: FC<IAddButtonProps> = ({
   onClick,
   isFullWidth,
   data,
+  testId,
   tweakStyles,
 }) => {
-  const { classes } = useTheme('AddButton', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   return (
     <button
@@ -37,10 +37,11 @@ export const AddButton: FC<IAddButtonProps> = ({
       )}
       onClick={!isDisabled ? onClick : undefined}
       disabled={isDisabled}
+      {...addDataTestId(testId)}
       {...addDataAttributes(data)}
     >
       <div className={classes.icon}>
-        <Icon type={'plus'} />
+        <Icon type="plus" />
       </div>
       <div>{text}</div>
     </button>

package/src/components/AddButton/index.ts

@@ -1,2 +1,2 @@
-export * from './AddButton';
-export type { AddButtonStyles } from './AddButton.styles';
+export * from './AddButton';
+export type { IAddButtonStyles } from './AddButton.styles';