@true-engineering/true-react-common-ui-kit 4.0.0-alpha7 → 4.0.0-alpha70

package/dist/types.d.ts

@@ -1,6 +1,7 @@
-import { FocusEventHandler, type KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
+import { FocusEventHandler, KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
 import { Modifier, Placement } from 'react-overlays/usePopper';
-import type { IMaybeArray } from './theme';
+import { IMaybeArray } from '@true-engineering/true-react-platform-helpers';
+import { IStyle } from './theme';
 export interface ITestIdProps {
     testId?: string;
 }
@@ -44,3 +45,8 @@ export interface IDomElementInteractions<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, IStyle>;
+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,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha7",
+  "version": "4.0.0-alpha70",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [
@@ -12,8 +12,8 @@
   "homepage": "",
   "license": "Apache-2.0",
   "type": "module",
-  "types": "dist/index.d.ts",
-  "main": "dist/true-react-common-ui-kit.umd.cjs",
+  "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"
@@ -25,35 +25,39 @@
     "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",
+    "./dist/true-react-common-ui-kit.css": "./dist/true-react-common-ui-kit.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}\"",
-    "full-check": "yarn format:check && yarn lint",
-    "types-check": "tsc --noEmit"
+    "types-check": "tsc --noEmit",
+    "full-check": "yarn types-check && yarn format:check && yarn lint"
   },
   "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",
+    "@floating-ui/react": "^0.27.13",
+    "@true-engineering/true-react-platform-helpers": "^1.0.0",
+    "clsx": "^2.1.1",
+    "country-flag-icons": "1.5.21",
+    "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": "4.25.0",
-    "react-dom": "18.2.0",
+    "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",
@@ -64,36 +68,29 @@
   },
   "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",
+    "@storybook/react": "9.1.10",
+    "@swc/core": "1.3.30",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
-    "@types/lodash-es": "4.17.11",
+    "@types/node": "24.7.2",
     "@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",
+    "@vitejs/plugin-react-swc": "4.2.0",
+    "eslint": "9.34.0",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-import-resolver-typescript": "4.4.4",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "6.0.0-rc.1",
+    "globals": "16.3.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"
+    "terser": "5.44.0",
+    "typescript": "5.8.2",
+    "typescript-eslint": "8.46.2",
+    "vite": "7.1.12",
+    "vite-plugin-dts": "4.5.4"
   },
-  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+  "packageManager": "yarn@4.11.0"
 }

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

@@ -1,32 +1,24 @@
-import { ComponentStory } from '@storybook/react';
-import { AccountInfo } from './AccountInfo';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
+import { AccountInfo, IAccountInfoProps } 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>
+const Story: FC<IAccountInfoProps> = (args) => (
+  <AccountInfo {...args} options={[{ item: 'Logout', onClick: () => console.log('logout') }]} />
 );
 
-export const Default = Template.bind({});
-Default.args = {
-  accountName: 'Ivan Ivanov',
-};
-Default.parameters = {
-  controls: {
-    exclude: ['data', 'options', 'avatar'],
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/AccountInfo',
+  component: Story,
+  args: {
+    accountName: 'Ivan Ivanov',
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['avatar', 'options']),
+    },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/AccountInfo/AccountInfo.tsx

@@ -1,8 +1,7 @@
 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 { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useOnClickOutsideWithRef, useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
@@ -46,7 +45,7 @@ export const AccountInfo: FC<IAccountInfoProps> = ({
   useOnClickOutsideWithRef(dropdownRef, () => setIsMenuOpen(false), nameRef);
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       {avatar ?? (
         <div className={classes.avatarIcon}>
           <Icon type="avatar" />

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

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

package/src/components/AddButton/AddButton.tsx

@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import clsx from 'clsx';
-import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import { addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
 import { useStyles, IAddButtonStyles } from './AddButton.styles';
@@ -17,7 +16,7 @@ export interface IAddButtonProps extends ICommonProps<IAddButtonStyles> {
   onClick?: () => void | Promise<void>;
 }
 
-// TODO: Весьма сомнительный компонент
+/** @deprecated Весьма сомнительный компонент */
 export const AddButton: FC<IAddButtonProps> = ({
   text,
   type = 'button',
@@ -40,8 +39,7 @@ export const AddButton: FC<IAddButtonProps> = ({
       )}
       onClick={!isDisabled ? onClick : undefined}
       disabled={isDisabled}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <div className={classes.icon}>
         <Icon type="plus" />

package/src/components/Button/Button.stories.tsx

@@ -1,14 +1,11 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
+import { type Meta } from '@storybook/react';
+import { iconsMap } from '../Icon';
 import { Button, IButtonProps } from './Button';
-import { BUTTON_SIZES, BUTTON_VIEWS } from './constants';
-
-const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
+import { BUTTON_SIZES } from './constants';
 
 const preloaderTypes: Array<IButtonProps['preloaderType']> = ['dots', 'default', 'logo'];
 
-export default {
+const meta: Meta<typeof Button> = {
   title: 'Buttons/Button',
   component: Button,
   args: {
@@ -25,26 +22,11 @@ export default {
     isFullWidth: false,
   },
   argTypes: {
-    icon: { options: icons, control: 'select' },
+    icon: { options: [undefined, ...Object.keys(iconsMap)], control: 'select' },
     size: { options: BUTTON_SIZES, control: 'inline-radio' },
-    view: { options: BUTTON_VIEWS, control: 'inline-radio' },
-    iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
     preloaderType: { options: preloaderTypes, control: 'inline-radio' },
   },
-  parameters: {
-    controls: {
-      exclude: [
-        'data',
-        'testId',
-        'onClick',
-        'onMouseDown',
-        'tweakStyles',
-        'shouldSkipTabNavigation',
-      ],
-    },
-  },
-} as ComponentMeta<typeof Button>;
+};
 
-export const Default: ComponentStory<typeof Button> = (args) => (
-  <Button {...args} key={args.size} />
-);
+export default meta;
+export const Default = {};

package/src/components/Button/Button.tsx

@@ -1,7 +1,9 @@
 import { ReactNode, ButtonHTMLAttributes, MouseEvent, forwardRef } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  addDataAttributes,
+  isReactNodeNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps, IDomElementInteractions } from '../../types';
 import { renderIcon, IIcon } from '../Icon';
@@ -46,84 +48,81 @@ export interface IButtonProps
   onMouseDown?: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;
 }
 
-export const Button = forwardRef<HTMLButtonElement, IButtonProps>(
-  (
-    {
-      type = 'button',
-      children,
-      size = 'l',
-      view = 'primary',
-      isFullWidth = false,
-      isInline = false,
-      isDisabled = false,
-      isActive = false,
-      isLoading = false,
-      shouldSkipTabNavigation = false,
-      data,
-      testId,
-      tweakStyles,
-      icon,
-      iconPosition = 'left',
-      preloaderType = 'dots',
-      ...interactions
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
+export const Button = forwardRef<HTMLButtonElement, IButtonProps>(function Button(
+  {
+    type = 'button',
+    children,
+    size = 'l',
+    view = 'primary',
+    isFullWidth = false,
+    isInline = false,
+    isDisabled = false,
+    isActive = false,
+    isLoading = false,
+    shouldSkipTabNavigation = false,
+    data,
+    testId,
+    tweakStyles,
+    icon,
+    iconPosition = 'left',
+    preloaderType = 'dots',
+    ...interactions
+  },
+  ref,
+) {
+  const classes = useStyles({ theme: tweakStyles });
 
-    const tweakPreloaderStyles = useTweakStyles({
-      innerStyles: getPreloaderStyles(size),
-      tweakStyles,
-      className: 'tweakPreloader',
-      currentComponentName: 'Button',
-    });
+  const tweakPreloaderStyles = useTweakStyles({
+    innerStyles: getPreloaderStyles(size),
+    tweakStyles,
+    className: 'tweakPreloader',
+    currentComponentName: 'Button',
+  });
 
-    const hasIcon = isReactNodeNotEmpty(icon);
-    const hasChildren = isReactNodeNotEmpty(children);
-    const hasNoAction = isDisabled || isLoading;
+  const hasIcon = isReactNodeNotEmpty(icon);
+  const hasChildren = isReactNodeNotEmpty(children);
+  const hasNoAction = isDisabled || isLoading;
 
-    return (
-      <button
-        ref={ref}
-        type={type}
-        className={clsx(classes.root, classes[size], classes[view], {
-          [classes.disabled]: isDisabled,
-          [classes.fullWidth]: isFullWidth,
-          [classes.inline]: isInline,
-          [classes.active]: isActive,
-          [classes.loading]: isLoading,
-          [classes.onlyIcon]: hasIcon && !hasChildren,
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={clsx(classes.root, classes[size], classes[view], {
+        [classes.disabled]: isDisabled,
+        [classes.fullWidth]: isFullWidth,
+        [classes.inline]: isInline,
+        [classes.active]: isActive,
+        [classes.loading]: isLoading,
+        [classes.onlyIcon]: hasIcon && !hasChildren,
+      })}
+      tabIndex={shouldSkipTabNavigation ? -1 : undefined}
+      disabled={hasNoAction}
+      {...interactions}
+      {...addDataAttributes(data, testId)}
+    >
+      <span
+        className={clsx(classes.content, {
+          [classes.iconFromRight]: hasChildren && hasIcon && iconPosition === 'right',
+          [classes.iconFromLeft]: hasChildren && hasIcon && iconPosition === 'left',
         })}
-        tabIndex={shouldSkipTabNavigation ? -1 : undefined}
-        disabled={hasNoAction}
-        {...interactions}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
       >
-        <span
-          className={clsx(classes.content, {
-            [classes.iconFromRight]: hasChildren && hasIcon && iconPosition === 'right',
-            [classes.iconFromLeft]: hasChildren && hasIcon && iconPosition === 'left',
-          })}
-        >
-          {hasIcon && (
-            <span className={classes.icon}>{isReactNodeNotEmpty(icon) && renderIcon(icon)}</span>
-          )}
-          {hasChildren && (
-            <span className={clsx(classes.children, hasIcon && classes.withIcon)}>{children}</span>
-          )}
-        </span>
-
-        {isLoading && (
-          <span className={classes.loader}>
-            <ThemedPreloader
-              type={preloaderType}
-              useCurrentColor
-              tweakStyles={tweakPreloaderStyles}
-            />
-          </span>
+        {hasIcon && (
+          <span className={classes.icon}>{isReactNodeNotEmpty(icon) && renderIcon(icon)}</span>
         )}
-      </button>
-    );
-  },
-);
+        {hasChildren && (
+          <span className={clsx(classes.children, hasIcon && classes.withIcon)}>{children}</span>
+        )}
+      </span>
+
+      {isLoading && (
+        <span className={classes.loader}>
+          <ThemedPreloader
+            type={preloaderType}
+            useCurrentColor
+            tweakStyles={tweakPreloaderStyles}
+          />
+        </span>
+      )}
+    </button>
+  );
+});

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,54 +1,65 @@
-import { useState, FC } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Checkbox as CheckboxComponent, ICheckboxProps } from './Checkbox';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
+import { IExtendableProps } from '../../types';
+import { Checkbox, ICheckboxProps } from '../Checkbox';
 
-const CheckboxComponentWithData: FC<ICheckboxProps<string>> = (props) => {
+const SIZES = ['micro'] as const;
+
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface ICheckboxSizes extends IExtendableProps<typeof SIZES> {}
+}
+
+const Story: FC<ICheckboxProps<string>> = (args) => {
   const [isChecked, setIsChecked] = useState(false);
   const [isSemiChecked, setIsSemiChecked] = useState(false);
 
   return (
     <div style={{ gap: 10, display: 'grid' }}>
-      <CheckboxComponent
+      <Checkbox
         isChecked={isChecked}
         isSemiChecked={isSemiChecked}
         onSelect={({ isSelected }) => {
           setIsChecked(isSelected);
           setIsSemiChecked(false);
         }}
-        {...props}
+        {...args}
       >
         Use wrapping paper
-      </CheckboxComponent>
-      <CheckboxComponent
+      </Checkbox>
+      <Checkbox
         value={undefined}
         isChecked={isSemiChecked}
         onSelect={({ isSelected }) => setIsSemiChecked(isSelected)}
+        {...args}
       >
         Is Semi Checked
-      </CheckboxComponent>
+      </Checkbox>
     </div>
   );
 };
 
-const meta: Meta<typeof CheckboxComponentWithData> = {
+const meta: Meta<typeof Story> = {
   title: 'Controls/Checkbox',
-  component: CheckboxComponentWithData,
+  component: Story,
   args: {
     value: 'value',
     labelPosition: 'right',
+    size: undefined,
     isInvalid: false,
     isDisabled: false,
     isReadonly: false,
   },
+  argTypes: {
+    size: { options: [undefined, ...SIZES], control: 'inline-radio' },
+  },
   parameters: {
     controls: {
-      exclude: ['data', 'tweakStyles', 'testId', 'onSelect'],
+      exclude: excludeStorybookParams(['isChecked', 'isSemiChecked']),
     },
   },
 };
 
 export default meta;
-
-type Story = StoryObj<typeof CheckboxComponent>;
-
-export const Default: Story = {};
+export const Default = {};

package/src/components/Checkbox/Checkbox.styles.ts

@@ -1,7 +1,9 @@
 import { createThemedStyles, ITweakStyles } from '../../theme';
+import { ICheckboxSizes } from './types';
 
 export const useStyles = createThemedStyles('Checkbox', {
   root: {
+    position: 'relative',
     cursor: 'pointer',
     display: 'flex',
     alignItems: 'center',
@@ -46,4 +48,4 @@ export const useStyles = createThemedStyles('Checkbox', {
   },
 });
 
-export type ICheckboxStyles = ITweakStyles<typeof useStyles>;
+export type ICheckboxStyles = ITweakStyles<typeof useStyles, ICheckboxSizes>;

package/src/components/Checkbox/Checkbox.tsx

@@ -1,18 +1,20 @@
 import { ReactNode, ChangeEvent, KeyboardEvent } from 'react';
 import clsx from 'clsx';
 import {
-  addDataTestId,
   getSelectKeyHandler,
+  isNotEmpty,
   isReactNodeNotEmpty,
+  addDataAttributes,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
+import { ICheckboxSize } from './types';
 import { useStyles, ICheckboxStyles } from './Checkbox.styles';
 
 export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
   value?: V;
   children?: ReactNode;
+  size?: ICheckboxSize;
   /** @default false */
   isChecked?: boolean;
   /** @default false */
@@ -34,6 +36,7 @@ export interface ICheckboxProps<V> extends ICommonProps<ICheckboxStyles> {
 export function Checkbox<V>({
   value,
   children,
+  size,
   isChecked = false,
   isSemiChecked = false,
   isInvalid = false,
@@ -55,14 +58,13 @@ export function Checkbox<V>({
 
   return (
     <label
-      className={clsx(classes.root, {
+      className={clsx(classes.root, isNotEmpty(size) && classes[size], {
         [classes.checked]: isSelected,
         [classes.invalid]: isInvalid,
         [classes.disabled]: isDisabled,
         [classes.labelPositionLeft]: labelPosition === 'left',
       })}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <input
         className={classes.input}

package/src/components/Checkbox/index.ts

@@ -1,2 +1,3 @@
 export * from './Checkbox';
 export type { ICheckboxStyles } from './Checkbox.styles';
+export * from './types';

package/src/components/Checkbox/types.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ICheckboxSizes {}
+
+export type ICheckboxSize = keyof ICheckboxSizes;