@true-engineering/true-react-common-ui-kit 4.0.0-alpha4 → 4.0.0-alpha40

package/dist/types.d.ts

@@ -1,45 +1,52 @@
-import { FocusEventHandler, type KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
-import { Modifier, Placement } from 'react-overlays/usePopper';
-export interface ITestIdProps {
-    testId?: string;
-}
-export interface IDataAttributes {
-    [key: string]: unknown;
-}
-export interface IDataAttributesProps extends ITestIdProps {
-    data?: IDataAttributes;
-}
-export interface ITweakStylesProps<TweakStyles> {
-    tweakStyles?: TweakStyles;
-}
-export type ICommonProps<TweakStyles> = IDataAttributesProps & ITweakStylesProps<TweakStyles>;
-export interface IDropdownWithPopperOptions {
-    shouldUsePopper?: boolean;
-    shouldRenderInBody?: boolean;
-    scrollParent?: 'auto' | 'document' | Element;
-    shouldHideOnScroll?: boolean;
-    canBeFlipped?: boolean;
-    modifiers?: Array<Partial<Modifier<any, any>>>;
-    placement?: Placement;
-    flipOptions?: Record<string, any>;
-}
-export type IClickHandlerEvent = MouseEvent | KeyboardEvent;
-export interface IDomElementInteractions<T> {
-    onBlur?: FocusEventHandler<T>;
-    onFocus?: FocusEventHandler<T>;
-    onMouseLeave?: MouseEventHandler<T>;
-    onMouseEnter?: MouseEventHandler<T>;
-    onMouseMove?: MouseEventHandler<T>;
-    onMouseDown?: MouseEventHandler<T>;
-    onMouseUp?: MouseEventHandler<T>;
-    onClick?: MouseEventHandler<T>;
-    onKeyDown?: KeyboardEventHandler<T>;
-    onKeyPress?: KeyboardEventHandler<T>;
-    onKeyUp?: KeyboardEventHandler<T>;
-    onPointerLeave?: PointerEventHandler<T>;
-    onPointerDown?: PointerEventHandler<T>;
-    onPointerMove?: PointerEventHandler<T>;
-    onPointerEnter?: PointerEventHandler<T>;
-    onPointerUp?: PointerEventHandler<T>;
-}
-export type IRenderNode<T> = ReactNode | ((props: T) => ReactNode);
+import type { FocusEventHandler, KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
+import type { Modifier, Placement } from 'react-overlays/usePopper';
+import type { JssStyle } from 'jss';
+import type { IMaybeArray } from './theme';
+export interface ITestIdProps {
+    testId?: string;
+}
+export interface IDataAttributes {
+    [key: string]: unknown;
+}
+export interface IDataAttributesProps extends ITestIdProps {
+    data?: IDataAttributes;
+}
+export interface ITweakStylesProps<TweakStyles> {
+    tweakStyles?: IMaybeArray<TweakStyles>;
+}
+export type ICommonProps<TweakStyles> = IDataAttributesProps & ITweakStylesProps<TweakStyles>;
+export interface IDropdownWithPopperOptions {
+    shouldUsePopper?: boolean;
+    shouldRenderInBody?: boolean;
+    scrollParent?: 'auto' | 'document' | Element;
+    shouldHideOnScroll?: boolean;
+    canBeFlipped?: boolean;
+    modifiers?: Array<Partial<Modifier<any, any>>>;
+    placement?: Placement;
+    flipOptions?: Record<string, any>;
+}
+export type IClickHandlerEvent = MouseEvent | KeyboardEvent;
+export interface IDomElementInteractions<T> {
+    onBlur?: FocusEventHandler<T>;
+    onFocus?: FocusEventHandler<T>;
+    onMouseLeave?: MouseEventHandler<T>;
+    onMouseEnter?: MouseEventHandler<T>;
+    onMouseMove?: MouseEventHandler<T>;
+    onMouseDown?: MouseEventHandler<T>;
+    onMouseUp?: MouseEventHandler<T>;
+    onClick?: MouseEventHandler<T>;
+    onKeyDown?: KeyboardEventHandler<T>;
+    onKeyPress?: KeyboardEventHandler<T>;
+    onKeyUp?: KeyboardEventHandler<T>;
+    onPointerLeave?: PointerEventHandler<T>;
+    onPointerDown?: PointerEventHandler<T>;
+    onPointerMove?: PointerEventHandler<T>;
+    onPointerEnter?: PointerEventHandler<T>;
+    onPointerUp?: PointerEventHandler<T>;
+}
+export type IRenderNode<T> = ReactNode | ((props: T) => ReactNode);
+export type IExtendableProps<T extends string | readonly string[]> = Record<T extends ReadonlyArray<infer P> ? P : T, JssStyle>;
+export type IDefaultExtendableProps = IExtendableProps<'custom'>;
+export type IWithPrefix<T, P extends string> = {
+    [K in keyof T as `${P}${K & string}`]: T[K];
+};

package/package.json

@@ -1,99 +1,103 @@
-{
-  "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha4",
-  "description": "True Engineering React UI Kit with theming support",
-  "author": "True Engineering (https://trueengineering.ru)",
-  "keywords": [
-    "TE",
-    "True Engineering",
-    "UI Kit with theming support",
-    "UI Kit"
-  ],
-  "homepage": "",
-  "license": "Apache-2.0",
-  "type": "module",
-  "types": "dist/index.d.ts",
-  "main": "dist/true-react-common-ui-kit.umd.cjs",
-  "module": "./dist/true-react-common-ui-kit.js",
-  "directories": {
-    "lib": "src"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "files": [
-    "src",
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "require": "./dist/true-react-common-ui-kit.umd.cjs",
-      "import": "./dist/true-react-common-ui-kit.js"
-    },
-    "./dist/style.css": "./dist/style.css",
-    "./src": "./src/index.ts"
-  },
-  "scripts": {
-    "build": "tsc && vite build",
-    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
-    "format": "prettier --write \"**/*.{js,jsx,css,json,ts,tsx}\"",
-    "format:check": "prettier --check \"**/*.{js,jsx,css,json,ts,tsx}\"",
-    "full-check": "yarn format:check && yarn lint",
-    "types-check": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@floating-ui/react": "0.26.12",
-    "@true-engineering/true-react-platform-helpers": "0.4.4",
-    "clsx": "1.2.1",
-    "country-flag-icons": "1.5.5",
-    "date-fns": "2.29.3",
-    "filesize": "10.1.1",
-    "hex-to-rgba": "2.0.1",
-    "jss": "10.10.0",
-    "lodash-es": "4.17.21",
-    "react": "18.2.0",
-    "react-datepicker": "4.25.0",
-    "react-dom": "18.2.0",
-    "react-input-mask": "3.0.0-alpha.2",
-    "react-jss": "10.10.0",
-    "react-overlays": "5.2.1",
-    "react-remove-scroll": "2.5.6",
-    "react-transition-group": "4.4.5",
-    "scroll-into-view-if-needed": "3.0.6",
-    "ts-debounce": "4.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "7.20.12",
-    "@storybook/addon-essentials": "7.6.17",
-    "@storybook/blocks": "7.6.17",
-    "@storybook/react": "7.6.17",
-    "@storybook/react-vite": "7.6.17",
-    "@storybook/test": "7.6.17",
-    "@swc/core": "^1.3.30",
-    "@trivago/prettier-plugin-sort-imports": "4.3.0",
-    "@types/lodash-es": "4.17.11",
-    "@types/react": "18.2.79",
-    "@types/react-datepicker": "4.19.4",
-    "@types/react-dom": "18.2.25",
-    "@types/react-input-mask": "3.0.2",
-    "@types/react-transition-group": "4.4.10",
-    "@typescript-eslint/eslint-plugin": "5.48.2",
-    "@typescript-eslint/parser": "5.48.2",
-    "@vitejs/plugin-react": "3.0.0",
-    "eslint": "8.36.0",
-    "eslint-config-prettier": "8.7.0",
-    "eslint-plugin-import": "2.29.0",
-    "eslint-plugin-react": "7.32.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "prettier": "2.8.3",
-    "rollup-plugin-swc3": "0.3.0",
-    "typescript": "4.9.3",
-    "unplugin-swc": "1.3.2",
-    "vite": "4.0.0",
-    "vite-plugin-dts": "3.7.3"
-  },
-  "resolutions": {
-    "strip-ansi": "6.0.1"
-  },
-  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
-}
+{
+  "name": "@true-engineering/true-react-common-ui-kit",
+  "version": "4.0.0-alpha40",
+  "description": "True Engineering React UI Kit with theming support",
+  "author": "True Engineering (https://trueengineering.ru)",
+  "keywords": [
+    "TE",
+    "True Engineering",
+    "UI Kit with theming support",
+    "UI Kit"
+  ],
+  "homepage": "",
+  "license": "Apache-2.0",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/true-react-common-ui-kit.umd.cjs",
+  "module": "./dist/true-react-common-ui-kit.js",
+  "directories": {
+    "lib": "src"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/true-react-common-ui-kit.umd.cjs",
+      "import": "./dist/true-react-common-ui-kit.js"
+    },
+    "./dist/style.css": "./dist/style.css",
+    "./src": "./src/index.ts"
+  },
+  "scripts": {
+    "build": "tsc && vite build",
+    "build:pr": "vite build",
+    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "format": "prettier --write \"**/*.{js,jsx,css,json,ts,tsx}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,css,json,ts,tsx}\"",
+    "types-check": "tsc --noEmit",
+    "full-check": "yarn types-check && yarn format:check && yarn lint"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.27.13",
+    "@true-engineering/true-react-platform-helpers": "^1.0.0",
+    "clsx": "^2.1.1",
+    "country-flag-icons": "1.5.5",
+    "date-fns": "^4.1.0",
+    "filesize": "10.1.1",
+    "hex-to-rgba": "2.0.1",
+    "jss": "10.10.0",
+    "lodash-es": "4.17.21",
+    "react": "^18.2.0",
+    "react-datepicker": "8.4.0",
+    "react-dom": "^18.2.0",
+    "react-input-mask": "3.0.0-alpha.2",
+    "react-jss": "10.10.0",
+    "react-overlays": "5.2.1",
+    "react-remove-scroll": "2.5.6",
+    "react-transition-group": "4.4.5",
+    "scroll-into-view-if-needed": "3.0.6",
+    "ts-debounce": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.20.12",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/blocks": "7.6.17",
+    "@storybook/react": "7.6.17",
+    "@storybook/react-vite": "7.6.17",
+    "@storybook/test": "7.6.17",
+    "@swc/core": "^1.3.30",
+    "@trivago/prettier-plugin-sort-imports": "4.3.0",
+    "@types/lodash-es": "4.17.11",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
+    "@types/react-input-mask": "3.0.2",
+    "@types/react-transition-group": "4.4.10",
+    "@typescript-eslint/eslint-plugin": "5.48.2",
+    "@typescript-eslint/parser": "5.48.2",
+    "@vitejs/plugin-react": "3.0.0",
+    "eslint": "8.36.0",
+    "eslint-config-prettier": "8.7.0",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "prettier": "2.8.3",
+    "rollup-plugin-swc3": "0.3.0",
+    "typescript": "4.9.3",
+    "unplugin-swc": "1.3.2",
+    "vite": "4.0.0",
+    "vite-plugin-dts": "3.7.3"
+  },
+  "resolutions": {
+    "strip-ansi": "6.0.1"
+  },
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+}

package/src/components/AccountInfo/AccountInfo.stories.tsx

@@ -1,32 +1,32 @@
-import { ComponentStory } from '@storybook/react';
-import { AccountInfo } from './AccountInfo';
-
-export default {
-  title: 'Data Display/AccountInfo',
-  component: AccountInfo,
-};
-
-const Template: ComponentStory<typeof AccountInfo> = (args) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      width: 400,
-      height: 200,
-      border: '1px dotted rgba(0, 0, 0, 0.2)',
-    }}
-  >
-    <AccountInfo {...args} options={[{ item: 'Logout', onClick: () => console.log('logout') }]} />
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  accountName: 'Ivan Ivanov',
-};
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'options', 'avatar'],
-  },
-};
+import { ComponentStory } from '@storybook/react';
+import { AccountInfo } from './AccountInfo';
+
+export default {
+  title: 'Data Display/AccountInfo',
+  component: AccountInfo,
+};
+
+const Template: ComponentStory<typeof AccountInfo> = (args) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 400,
+      height: 200,
+      border: '1px dotted rgba(0, 0, 0, 0.2)',
+    }}
+  >
+    <AccountInfo {...args} options={[{ item: 'Logout', onClick: () => console.log('logout') }]} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  accountName: 'Ivan Ivanov',
+};
+Default.parameters = {
+  controls: {
+    exclude: ['data', 'options', 'avatar'],
+  },
+};

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

@@ -1,52 +1,52 @@
-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: animations.defaultTransition,
-    transitionProperty: 'color',
-  },
-
-  accountNameOpened: {},
-
-  accountChevron: {
-    width: 16,
-    height: 16,
-    transition: animations.defaultTransition,
-    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 }>;
+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: animations.defaultTransition,
+    transitionProperty: 'color',
+  },
+
+  accountNameOpened: {},
+
+  accountChevron: {
+    width: 16,
+    height: 16,
+    transition: animations.defaultTransition,
+    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,80 +1,80 @@
-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, useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { IListProps, List } from '../List';
-import { ANIMATION_TIMEOUT } from './constants';
-import { useStyles, IAccountInfoStyles } from './AccountInfo.styles';
-
-export interface IAccountInfoProps extends ICommonProps<IAccountInfoStyles> {
-  /** @default `<Icon type='avatar' />` */
-  avatar?: ReactNode;
-  accountName: ReactNode;
-  options: IListProps['items'];
-}
-
-export const AccountInfo: FC<IAccountInfoProps> = ({
-  data,
-  testId,
-  avatar,
-  tweakStyles,
-  accountName,
-  options,
-}) => {
-  const classes = useStyles({ theme: tweakStyles });
-
-  const tweakListStyles = useTweakStyles({
-    tweakStyles,
-    className: 'tweakList',
-    currentComponentName: 'AccountInfo',
-  });
-
-  const nameRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-
-  const toggleMenu = (event: MouseEvent<HTMLDivElement>) => {
-    event.stopPropagation();
-    setIsMenuOpen((v) => !v);
-  };
-
-  useOnClickOutsideWithRef(dropdownRef, () => setIsMenuOpen(false), nameRef);
-
-  return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      {avatar ?? (
-        <div className={classes.avatarIcon}>
-          <Icon type="avatar" />
-        </div>
-      )}
-      <div ref={nameRef} className={classes.account} onClick={toggleMenu}>
-        <div className={clsx(classes.accountName, isMenuOpen && classes.accountNameOpened)}>
-          {accountName}
-        </div>
-        <div className={clsx(classes.accountChevron, isMenuOpen && classes.accountChevronOpened)}>
-          <Icon type="chevron-down-small" />
-        </div>
-        <CSSTransition
-          in={isMenuOpen}
-          timeout={ANIMATION_TIMEOUT}
-          unmountOnExit
-          classNames={{
-            enter: classes['slide-up-enter'],
-            enterActive: classes['slide-up-enter-active'],
-            exit: classes['slide-up-exit'],
-            exitActive: classes['slide-up-exit-active'],
-          }}
-        >
-          <div ref={dropdownRef} className={classes.accountMenu} onClick={toggleMenu}>
-            <List items={options} tweakStyles={tweakListStyles} />
-          </div>
-        </CSSTransition>
-      </div>
-    </div>
-  );
-};
+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, useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { IListProps, List } from '../List';
+import { ANIMATION_TIMEOUT } from './constants';
+import { useStyles, IAccountInfoStyles } from './AccountInfo.styles';
+
+export interface IAccountInfoProps extends ICommonProps<IAccountInfoStyles> {
+  /** @default `<Icon type='avatar' />` */
+  avatar?: ReactNode;
+  accountName: ReactNode;
+  options: IListProps['items'];
+}
+
+export const AccountInfo: FC<IAccountInfoProps> = ({
+  data,
+  testId,
+  avatar,
+  tweakStyles,
+  accountName,
+  options,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakListStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakList',
+    currentComponentName: 'AccountInfo',
+  });
+
+  const nameRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = (event: MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    setIsMenuOpen((v) => !v);
+  };
+
+  useOnClickOutsideWithRef(dropdownRef, () => setIsMenuOpen(false), nameRef);
+
+  return (
+    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+      {avatar ?? (
+        <div className={classes.avatarIcon}>
+          <Icon type="avatar" />
+        </div>
+      )}
+      <div ref={nameRef} className={classes.account} onClick={toggleMenu}>
+        <div className={clsx(classes.accountName, isMenuOpen && classes.accountNameOpened)}>
+          {accountName}
+        </div>
+        <div className={clsx(classes.accountChevron, isMenuOpen && classes.accountChevronOpened)}>
+          <Icon type="chevron-down-small" />
+        </div>
+        <CSSTransition
+          in={isMenuOpen}
+          timeout={ANIMATION_TIMEOUT}
+          unmountOnExit
+          classNames={{
+            enter: classes['slide-up-enter'],
+            enterActive: classes['slide-up-enter-active'],
+            exit: classes['slide-up-exit'],
+            exitActive: classes['slide-up-exit-active'],
+          }}
+        >
+          <div ref={dropdownRef} className={classes.accountMenu} onClick={toggleMenu}>
+            <List items={options} tweakStyles={tweakListStyles} />
+          </div>
+        </CSSTransition>
+      </div>
+    </div>
+  );
+};

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