@true-engineering/true-react-common-ui-kit 4.0.0-alpha5 → 4.0.0-alpha50

package/dist/types.d.ts

@@ -1,5 +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 { JssStyle } from 'jss';
+import { IMaybeArray } from './theme';
 export interface ITestIdProps {
     testId?: string;
 }
@@ -10,7 +12,7 @@ export interface IDataAttributesProps extends ITestIdProps {
     data?: IDataAttributes;
 }
 export interface ITweakStylesProps<TweakStyles> {
-    tweakStyles?: TweakStyles;
+    tweakStyles?: IMaybeArray<TweakStyles>;
 }
 export type ICommonProps<TweakStyles> = IDataAttributesProps & ITweakStylesProps<TweakStyles>;
 export interface IDropdownWithPopperOptions {
@@ -43,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, 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,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "4.0.0-alpha5",
+  "version": "4.0.0-alpha50",
   "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,40 @@
     "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,33 +69,30 @@
   },
   "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"
+    "terser": "5.44.0",
+    "typescript": "5.8.2",
+    "typescript-eslint": "8.46.2",
+    "vite": "7.1.12",
+    "vite-plugin-dts": "4.5.4"
   },
   "resolutions": {
     "strip-ansi": "6.0.1"

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/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/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/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;

package/src/components/CloseButton/CloseButton.stories.tsx

@@ -1,11 +1,10 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { CloseButton } from './CloseButton';
 
-export default {
+const meta: Meta<typeof CloseButton> = {
   title: 'Buttons/CloseButton',
   component: CloseButton,
-  args: {},
-  argTypes: {},
-} as ComponentMeta<typeof CloseButton>;
+};
 
-export const Default: ComponentStory<typeof CloseButton> = (args) => <CloseButton {...args} />;
+export default meta;
+export const Default = {};

package/src/components/Colors/Colors.stories.tsx

@@ -1,7 +1,67 @@
-import { Colors } from './Colors';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { createThemedStyles, useTheme } from '../../theme';
 
-export default {
+const useStyles = createThemedStyles({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+
+  colorCard: {
+    width: 120,
+    border: 'solid 1px #dde3ed',
+    borderRadius: 8,
+    color: '#222a37',
+    fontSize: 14,
+    margin: 6,
+  },
+
+  color: {
+    height: 120,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+
+  colorName: {
+    marginBottom: 6,
+    padding: 6,
+    overflow: 'hidden',
+  },
+
+  hex: {
+    marginTop: 6,
+    textTransform: 'uppercase',
+    fontWeight: 'bold',
+    padding: [0, 6, 6],
+  },
+});
+
+const Story: FC = () => {
+  const classes = useStyles();
+  const theme = useTheme();
+  const { colors = {} } = theme;
+
+  return (
+    <div className={classes.root}>
+      {Object.entries(colors as Record<string, string>).map(([colorName, color]) => {
+        const name = colorName.split('_').join(' ').toLowerCase();
+        return (
+          <div key={colorName} className={classes.colorCard}>
+            <div className={classes.color} style={{ backgroundColor: color }} />
+            <div className={classes.colorName}>{`${name[0].toUpperCase()}${name.slice(1)}`}</div>
+            <div className={classes.hex}>{color}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const meta: Meta = {
   title: 'Data Display/Colors',
+  component: Story,
 };
 
-export const Default = (): JSX.Element => <Colors />;
+export default meta;
+export const Default = {};

package/src/components/ControlWrapper/ControlWrapper.stories.tsx

@@ -1,45 +1,55 @@
+import { FC } from 'react';
 import { doNothing } from '@true-engineering/true-react-platform-helpers';
-import { ComponentStory } from '@storybook/react';
-import { iconsList } from '../Icon';
-import { ControlWrapper } from './ControlWrapper';
+import { type Meta } from '@storybook/react';
+import { excludeStorybookParams } from '../../helpers';
+import { IExtendableProps } from '../../types';
+import { Icon, iconsMap } from '../Icon';
+import { ControlWrapper, IControlWrapperProps } from './ControlWrapper';
+import { GROUP_PLACEMENTS } from './constants';
 
-export default {
-  title: 'ControlWrapper',
-  component: ControlWrapper,
-};
+const SIZES = ['micro'] as const;
+
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface IControlWrapperSizes extends IExtendableProps<typeof SIZES> {}
+}
 
-const Template: ComponentStory<typeof ControlWrapper> = (args) => (
-  <ControlWrapper {...args} onClear={doNothing} onIconClick={doNothing}>
+const Story: FC<IControlWrapperProps> = (args) => (
+  <ControlWrapper {...args} onClear={doNothing}>
     <div style={{ minWidth: 200, height: 48 }} />
   </ControlWrapper>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  isInvalid: false,
-  label: 'Label',
-  isFocused: false,
-  isRequired: false,
-  isLoading: false,
-  isDisabled: false,
-  hasValue: false,
-};
-
-Default.argTypes = {
-  icon: { control: 'select', options: [undefined, ...Object.keys(iconsList)] },
-  groupPlacement: {
-    control: 'select',
-    options: [
-      'top',
-      'bottom',
-      'top-left',
-      'top-right',
-      'bottom-left',
-      'bottom-right',
-      'left',
-      'right',
-      'middle',
+const meta: Meta<typeof Story> = {
+  title: 'Controls/ControlWrapper',
+  component: Story,
+  args: {
+    label: 'Label',
+    isInvalid: false,
+    isFocused: false,
+    isRequired: false,
+    isLoading: false,
+    isDisabled: false,
+    hasValue: false,
+    isActive: false,
+    isFullWidth: false,
+    icon: [
+      { iconComponent: <div>Бу</div>, onClick: () => console.log('close'), shouldResetSize: true },
+      { iconComponent: <Icon type="plus" /> },
+      { iconComponent: 'search', onClick: () => console.log('search') },
     ],
   },
+  argTypes: {
+    size: { options: [undefined, ...SIZES], control: 'inline-radio' },
+    icon: { options: [undefined, ...Object.keys(iconsMap)], control: 'select' },
+    groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
+  },
+  parameters: {
+    controls: {
+      exclude: excludeStorybookParams(['children']),
+    },
+  },
 };
+
+export default meta;
+export const Default = {};