@true-engineering/true-react-common-ui-kit 3.45.1 → 4.0.0-alpha0

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
+import { FocusEventHandler, type KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, PointerEventHandler, ReactNode } from 'react';
 import { Modifier, Placement } from 'react-overlays/usePopper';
 export interface ITestIdProps {
     testId?: string;
@@ -23,6 +23,7 @@ export interface IDropdownWithPopperOptions {
     placement?: Placement;
     flipOptions?: Record<string, any>;
 }
+export type IClickHandlerEvent = MouseEvent | KeyboardEvent;
 export interface IDomElementInteractions<T> {
     onBlur?: FocusEventHandler<T>;
     onFocus?: FocusEventHandler<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@true-engineering/true-react-common-ui-kit",
-  "version": "3.45.1",
+  "version": "4.0.0-alpha0",
   "description": "True Engineering React UI Kit with theming support",
   "author": "True Engineering (https://trueengineering.ru)",
   "keywords": [

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

@@ -1,14 +1,10 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { IIconType, iconsList } from '../Icon';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { iconsList, IIconType } from '../Icon';
 import { complexIcons } from '../Icon/complexIcons';
 import { Button, IButtonProps } from './Button';
 import { BUTTON_SIZES, BUTTON_VIEWS } from './constants';
 
-const iconTypes = [
-  undefined,
-  ...Object.keys(iconsList),
-  ...Object.keys(complexIcons),
-] as IIconType[];
+const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
 
 const preloaderTypes: Array<IButtonProps['preloaderType']> = ['dots', 'default', 'logo'];
 
@@ -29,7 +25,7 @@ export default {
     isFullWidth: false,
   },
   argTypes: {
-    icon: { options: iconTypes, control: 'select' },
+    icon: { options: icons, control: 'select' },
     size: { options: BUTTON_SIZES, control: 'inline-radio' },
     view: { options: BUTTON_VIEWS, control: 'inline-radio' },
     iconPosition: { options: ['left', 'right'], control: 'inline-radio' },

package/src/components/CloseButton/CloseButton.tsx

@@ -3,11 +3,11 @@ import { addDataTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../helpers';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
-import { useStyles, ICloseButtonStyles } from './CloseButton.styles';
+import { ICloseButtonStyles, useStyles } from './CloseButton.styles';
 
 export interface ICloseButtonProps extends ICommonProps<ICloseButtonStyles> {
   /** @default 'close' */
-  iconType?: 'close' | 'close-large' | 'close-window';
+  icon?: 'close' | 'close-large' | 'close-window';
   onClose?: () => void;
 }
 
@@ -16,7 +16,7 @@ export const CloseButton: FC<ICloseButtonProps> = ({
   tweakStyles,
   testId,
   data,
-  iconType = 'close',
+  icon = 'close',
   onClose,
 }) => {
   const classes = useStyles({ theme: tweakStyles });
@@ -29,7 +29,7 @@ export const CloseButton: FC<ICloseButtonProps> = ({
       {...addDataTestId(testId)}
       {...addDataAttributes(data)}
     >
-      <Icon type={iconType} />
+      <Icon type={icon} />
     </button>
   );
 };

package/src/components/ControlGroup/ControlGroup.stories.tsx

@@ -0,0 +1,40 @@
+import { doNothing } from '@true-engineering/true-react-platform-helpers';
+import { ComponentStory } from '@storybook/react';
+import { IInputProps, Input } from '../Input';
+import { ControlGroup } from './ControlGroup';
+
+export default {
+  title: 'ControlGroup',
+  component: ControlGroup,
+};
+
+const Template: ComponentStory<typeof ControlGroup> = ({ direction, ...args }) => {
+  let groupPlacement: Array<IInputProps['groupPlacement']> = [];
+  if (direction === 'horizontal') {
+    groupPlacement = ['left', 'right'];
+  }
+  if (direction === 'vertical') {
+    groupPlacement = ['top', 'bottom'];
+  }
+  return (
+    <ControlGroup {...args} direction={direction}>
+      <Input value="value" groupPlacement={groupPlacement[0]} onChange={doNothing} />
+      <Input value="value" groupPlacement={groupPlacement[1]} onChange={doNothing} />
+    </ControlGroup>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  infoMessage: 'Message Info',
+  errorMessage: 'Error Text',
+  direction: undefined,
+};
+
+Default.argTypes = {
+  direction: {
+    options: [undefined, 'horizontal', 'vertical'],
+    control: 'radio',
+  },
+};

package/src/components/ControlGroup/ControlGroup.styles.ts

@@ -0,0 +1,46 @@
+import { createThemedStyles, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('ControlGroup', {
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+  },
+
+  error: {
+    color: 'red',
+  },
+
+  info: {
+    color: 'gray',
+  },
+
+  horizontal: {
+    display: 'flex',
+
+    '& > *': {
+      flexGrow: 1,
+
+      '&:not(:first-child)': {
+        marginLeft: -1,
+      },
+    },
+  },
+
+  vertical: {
+    display: 'flex',
+    flexDirection: 'column',
+
+    '& > *:not(:first-child)': {
+      marginTop: -1,
+    },
+  },
+
+  message: {
+    fontSize: 12,
+  },
+
+  children: {},
+});
+
+export type IControlGroupStyles = ITweakStyles<typeof useStyles>;

package/src/components/ControlGroup/ControlGroup.tsx

@@ -0,0 +1,55 @@
+import { forwardRef, ReactNode } from 'react';
+import clsx from 'clsx';
+import { addDataAttributes, addDataTestId, isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { ICommonProps } from '../../types';
+import { IControlGroupStyles, useStyles } from './ControlGroup.styles';
+
+export interface IControlGroupProps extends ICommonProps<IControlGroupStyles> {
+  children: ReactNode;
+  infoMessage?: ReactNode;
+  errorMessage?: ReactNode;
+  direction?: 'horizontal' | 'vertical';
+}
+
+export const ControlGroup = forwardRef<HTMLDivElement, IControlGroupProps>(
+  ({ children, infoMessage, errorMessage, direction, tweakStyles, testId, data }, ref) => {
+    const classes = useStyles({ theme: tweakStyles });
+
+    const shouldShowError = isReactNodeNotEmpty(errorMessage);
+    const shouldShowInfo = isReactNodeNotEmpty(infoMessage) && !shouldShowError;
+
+    return (
+      <div
+        ref={ref}
+        className={classes.root}
+        data-invalid={shouldShowError ? true : undefined}
+        {...addDataAttributes(data, testId)}
+      >
+        {isReactNodeNotEmpty(children) && (
+          <div
+            className={clsx(classes.children, {
+              [classes.horizontal]: direction === 'horizontal',
+              [classes.vertical]: direction === 'vertical',
+            })}
+          >
+            {children}
+          </div>
+        )}
+        {(shouldShowError || shouldShowInfo) && (
+          <div className={classes.message}>
+            {shouldShowError && (
+              <div className={classes.error} {...addDataTestId(testId, 'error')}>
+                {errorMessage}
+              </div>
+            )}
+            {shouldShowInfo && (
+              <div className={classes.info} {...addDataTestId(testId, 'info')}>
+                {infoMessage}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/ControlGroup/index.ts

@@ -0,0 +1,2 @@
+export * from './ControlGroup';
+export type { IControlGroupStyles } from './ControlGroup.styles';

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

@@ -0,0 +1,45 @@
+import { doNothing } from '@true-engineering/true-react-platform-helpers';
+import { ComponentStory } from '@storybook/react';
+import { iconsList } from '../Icon';
+import { ControlWrapper } from './ControlWrapper';
+
+export default {
+  title: 'ControlWrapper',
+  component: ControlWrapper,
+};
+
+const Template: ComponentStory<typeof ControlWrapper> = (args) => (
+  <ControlWrapper {...args} onClear={doNothing} onIconClick={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',
+    ],
+  },
+};

package/src/components/ControlWrapper/ControlWrapper.styles.ts

@@ -0,0 +1,185 @@
+import { animations, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
+import { IThemedPreloaderStyles } from '../ThemedPreloader';
+
+const { CONTROL, Z_INDEX } = dimensions;
+
+export const useStyles = createThemedStyles('ControlWrapper', {
+  root: {
+    '--control-height': `${CONTROL.HEIGHT - 2}px`, // borders
+    '--control-padding': `${CONTROL.PADDING}px`,
+    '--icon-size': `${CONTROL.ICON_SIZE}px`,
+    '--icon-inner-size': `${CONTROL.ICON_INNER_SIZE}px`,
+    '--icon-gap': `${CONTROL.ICON_GAP}px`,
+    display: 'flex',
+    width: '100%',
+    backgroundColor: 'white',
+    position: 'relative',
+    border: ['solid', 1, 'gray'],
+    borderRadius: 8,
+    boxSizing: 'border-box',
+    zIndex: 0,
+  },
+
+  invalid: {
+    zIndex: Z_INDEX.CONTROL_INVALID,
+  },
+
+  disabled: {},
+
+  focused: {
+    position: 'relative',
+    zIndex: Z_INDEX.CONTROL_FOCUS,
+  },
+
+  withValue: {},
+
+  loading: {},
+
+  minContent: {
+    width: 'min-content',
+  },
+
+  label: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    left: 'var(--control-padding)',
+    top: '50%',
+    transformOrigin: 'top left',
+    transform: 'translateY(-50%)',
+    transition: animations.defaultTransition,
+    transitionProperty: 'transform, color',
+    fontSize: 16,
+    zIndex: 1,
+  },
+
+  activeLabel: {},
+
+  requiredLabel: {
+    '&:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      top: 0,
+      right: -8,
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+      backgroundColor: 'orange',
+    },
+  },
+
+  disabledLabel: {},
+
+  wrapper: {
+    display: 'flex',
+    flexGrow: 1,
+    minWidth: 0, // Нужно для селекта
+    textAlign: 'left',
+  },
+
+  controls: {
+    display: 'flex',
+    marginLeft: 'auto',
+    flexShrink: 0,
+  },
+
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 'var(--icon-size)',
+    width: 'var(--icon-size)',
+    height: '100%',
+    flexShrink: 0,
+    cursor: 'default',
+
+    '&:last-child': {
+      paddingRight: 6,
+    },
+  },
+
+  iconInner: {
+    width: 'var(--icon-inner-size)',
+  },
+
+  customIcon: {
+    width: 'unset',
+
+    '& $iconInner': {
+      width: 'unset',
+    },
+  },
+
+  endIcon: {},
+
+  activeIcon: {
+    cursor: 'pointer',
+    outline: 'none',
+  },
+
+  clearIcon: {
+    '& $iconInner': {
+      width: 'var(--icon-inner-size)',
+    },
+  },
+
+  loader: {
+    '& $iconInner': {
+      width: 'var(--icon-inner-size)',
+    },
+  },
+
+  /* groupPositions */
+  'placement-top': {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  'placement-bottom': {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+  },
+
+  'placement-top-left': {
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  'placement-top-right': {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  'placement-bottom-left': {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  'placement-bottom-right': {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  'placement-left': {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  'placement-right': {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  'placement-middle': {
+    borderRadius: 0,
+  },
+});
+
+export type IControlWrapperStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakPreloader: IThemedPreloaderStyles }
+>;

package/src/components/ControlWrapper/ControlWrapper.tsx

@@ -0,0 +1,151 @@
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import {
+  addClickHandler,
+  addDataAttributes,
+  addDataTestId,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  isString,
+} from '@true-engineering/true-react-platform-helpers';
+import { useTweakStyles } from '../../hooks';
+import { IClickHandlerEvent, ICommonProps } from '../../types';
+import { Icon, IIcon, renderIcon } from '../Icon';
+import { ThemedPreloader } from '../ThemedPreloader';
+import { IControlWrapperStyles, useStyles } from './ControlWrapper.styles';
+
+export interface IControlWrapperProps extends ICommonProps<IControlWrapperStyles> {
+  children: ReactNode;
+  label?: ReactNode;
+  icon?: IIcon;
+  groupPlacement?:
+    | 'left'
+    | 'right'
+    | 'middle'
+    | 'top'
+    | 'bottom'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right';
+  /** @default false */
+  isInvalid?: boolean;
+  /** @default false */
+  isFocused?: boolean;
+  /** @default false */
+  hasValue?: boolean;
+  /** @default false */
+  isRequired?: boolean;
+  /** @default false */
+  isFullWidth?: boolean;
+  /** @default false */
+  isLoading?: boolean;
+  /** @default false */
+  isDisabled?: boolean;
+  onIconClick?: (event: IClickHandlerEvent) => void;
+  onClear?: (event: IClickHandlerEvent) => void;
+}
+
+export const ControlWrapper: FC<IControlWrapperProps> = ({
+  label,
+  icon,
+  groupPlacement,
+  isInvalid,
+  isFocused,
+  isRequired,
+  isLoading,
+  isFullWidth,
+  isDisabled,
+  hasValue,
+  testId,
+  children,
+  tweakStyles,
+  data,
+  onIconClick,
+  onClear,
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const hasEndIcon = !isLoading && isReactNodeNotEmpty(icon);
+  const hasClearButton = !isDisabled && !isLoading && hasValue && isNotEmpty(onClear);
+  const hasControls = hasEndIcon || hasClearButton || isLoading;
+
+  const tweakPreloaderStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakPreloader',
+    currentComponentName: 'ControlWrapper',
+  });
+
+  return (
+    <div
+      className={clsx(
+        classes.root,
+        isNotEmpty(groupPlacement) && [classes[`placement-${groupPlacement}`]],
+        {
+          [classes.invalid]: isInvalid,
+          [classes.focused]: isFocused,
+          [classes.withValue]: hasValue,
+          [classes.disabled]: isDisabled,
+          [classes.loading]: isLoading,
+          [classes.minContent]: !isFullWidth,
+        },
+      )}
+      {...addDataAttributes(data, testId)}
+    >
+      {isReactNodeNotEmpty(label) && (
+        <div
+          className={clsx(classes.label, {
+            [classes.requiredLabel]: isRequired,
+            [classes.disabledLabel]: isDisabled,
+            [classes.activeLabel]: isFocused || hasValue,
+          })}
+        >
+          {label}
+        </div>
+      )}
+      <div className={classes.wrapper}>
+        {children}
+
+        {hasControls && (
+          <div className={classes.controls}>
+            {hasClearButton && (
+              <div
+                className={clsx(classes.icon, classes.clearIcon, classes.activeIcon)}
+                {...addClickHandler(onClear)}
+                {...addDataTestId(testId, 'clear')}
+              >
+                <div className={classes.iconInner}>
+                  <Icon type="close" />
+                </div>
+              </div>
+            )}
+
+            {hasEndIcon && (
+              <div
+                className={clsx(classes.icon, classes.endIcon, {
+                  [classes.activeIcon]: !isDisabled && isNotEmpty(onIconClick),
+                  [classes.customIcon]: !isString(icon),
+                })}
+                {...addClickHandler(onIconClick, !isDisabled)}
+                {...addDataTestId(testId, 'icon')}
+              >
+                <div className={classes.iconInner}>{renderIcon(icon)}</div>
+              </div>
+            )}
+
+            {isLoading && (
+              <div
+                className={clsx(classes.icon, classes.loader)}
+                {...addDataTestId(testId, 'loading')}
+              >
+                <div className={classes.iconInner}>
+                  <ThemedPreloader tweakStyles={tweakPreloaderStyles} />
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/ControlWrapper/index.ts

@@ -0,0 +1,2 @@
+export * from './ControlWrapper';
+export type { IControlWrapperStyles } from './ControlWrapper.styles';

package/src/components/DateInput/DateInput.styles.ts

@@ -1,4 +1,4 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
+import { createThemedStyles, ITweakStyles } from '../../theme';
 import { IInputStyles } from '../Input';
 
 export const useStyles = createThemedStyles('DateInput', {
@@ -10,9 +10,4 @@ export const useStyles = createThemedStyles('DateInput', {
   },
 });
 
-export type IDateInputStyles = ITweakStyles<
-  typeof useStyles,
-  {
-    tweakInput: IInputStyles;
-  }
->;
+export type IDateInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;

package/src/components/DateInput/DateInput.tsx

@@ -1,11 +1,11 @@
-import { FormEvent, MouseEvent, forwardRef, ChangeEvent } from 'react';
+import { ChangeEvent, forwardRef, MouseEvent } from 'react';
 import clsx from 'clsx';
 import { addDataAttributes } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
-import { IInputProps, Input } from '../Input';
+import { IChangeInputEvent, IInputProps, Input } from '../Input';
 import { EMPTY_DATE_INPUT_VALUE, EMPTY_DATE_RANGE_INPUT_VALUE } from './constants';
-import { useStyles, IDateInputStyles } from './DateInput.styles';
+import { IDateInputStyles, useStyles } from './DateInput.styles';
 
 export interface IDateInputProps
   extends Omit<IInputProps, 'value' | 'beforeMaskedStateChange' | 'onChange' | 'tweakStyles'>,
@@ -20,7 +20,7 @@ export interface IDateInputProps
   isRange?: boolean;
   onClick?: (event: MouseEvent<HTMLDivElement>) => void;
   // react-datepicker ожидает event первым аргументом
-  onChange?: (event: FormEvent<HTMLInputElement>, value: string) => void;
+  onChange?: (event: IChangeInputEvent, value: string) => void;
 }
 
 export const DateInput = forwardRef<HTMLInputElement, IDateInputProps>(

package/src/components/DatePicker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, FC, FocusEvent, SyntheticEvent, forwardRef, useMemo } from 'react';
+import { FC, FocusEvent, forwardRef, SyntheticEvent, useEffect, useMemo, useState } from 'react';
 import ReactDatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import clsx from 'clsx';
@@ -16,7 +16,7 @@ import { DatePickerHeader, PopperContainer } from './components';
 import { DatePickerComponent, DEFAULT_DATE_FORMAT } from './constants';
 import { areDatesEquals, getDateFormatter, getDateValueParser } from './helpers';
 import { IDatePickerBaseProps, IRange } from './types';
-import { useStyles, IDatePickerStyles } from './DatePicker.styles';
+import { IDatePickerStyles, useStyles } from './DatePicker.styles';
 
 export interface IDatePickerProps extends IDatePickerBaseProps, ICommonProps<IDatePickerStyles> {
   selectedDate?: Date | null;
@@ -125,7 +125,7 @@ export const DatePicker = forwardRef<ReactDatePicker, IDatePickerProps>(
       isDisabled,
       isClearable,
       isActive: isOpen,
-      iconType: isClearable && hasDateInputValue ? undefined : 'calendar',
+      icon: isClearable && hasDateInputValue ? undefined : 'calendar',
       tweakStyles: tweakDateInputStyles,
       ...(isRange ? { startDate: startDateValue, endDate: endDateValue } : { date: dateValue }),
     };