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

package/src/components/TextArea/TextArea.tsx

@@ -1,8 +1,17 @@
-import { ChangeEvent, FocusEvent, FormEvent, forwardRef, useState } from 'react';
+import {
+  ChangeEvent,
+  CSSProperties,
+  FocusEvent,
+  FormEvent,
+  forwardRef,
+  TextareaHTMLAttributes,
+  useState,
+} from 'react';
 import clsx from 'clsx';
 import {
   addDataAttributes,
   getTestId,
+  isArrayLikeNotEmpty,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
@@ -11,18 +20,20 @@ import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
 import { IWithMessagesProps, WithMessages } from '../WithMessages';
-import { ITextAreaHTMLBaseProps } from './types';
-import { controlWrapperStyles, ITextAreaStyles, useStyles } from './TextArea.styles';
+import { ITextAreaCounterPosition } from './types';
+import { ITextAreaStyles, useStyles } from './TextArea.styles';
 
 export interface ITextAreaProps
   extends ICommonProps<ITextAreaStyles>,
-    Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled'>,
-    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>,
-    Pick<ITextAreaHTMLBaseProps, 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'> {
+    Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>,
+    Pick<
+      IControlWrapperProps,
+      'label' | 'isInvalid' | 'isRequired' | 'isDisabled' | 'size' | 'groupPlacement'
+    >,
+    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {
   value?: string;
   placeholder?: string;
-  /** @default false */
-  isDisabled?: boolean;
+  counterPosition?: ITextAreaCounterPosition;
   /** @default false */
   isActive?: boolean;
   /**
@@ -41,76 +52,85 @@ export interface ITextAreaProps
   onChange: (value: string, event?: FormEvent<HTMLTextAreaElement>) => void;
 }
 
-const DEFAULT_VALUE = '';
+export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(function TextArea(
+  {
+    value = '',
+    placeholder,
+    name,
+    counterPosition = 'default',
+    shouldFocusOnMount,
+    hasCounter = true,
+    shouldTrimAfterMaxLength,
+    isAutoSized = true,
+    shouldAlwaysShowPlaceholder,
+    isActive,
+    maxLength,
+    rows,
+    data,
+    testId,
+    tweakStyles,
+    onChange,
+    onPaste,
+    onFocus,
+    onBlur,
+    // Пропсы WithMessages
+    infoMessage,
+    errorMessage,
+    // Пропсы ControlWrapper
+    label,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    size,
+    groupPlacement,
+    ...textAreaProps
+  },
+  ref,
+) {
+  const classes = useStyles({ theme: tweakStyles });
 
-export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
-  (
-    {
-      value = DEFAULT_VALUE,
-      label,
-      placeholder,
-      infoMessage,
-      errorMessage,
-      name,
-      shouldFocusOnMount,
-      hasCounter = true,
-      shouldTrimAfterMaxLength,
-      isAutoSized = true,
-      shouldAlwaysShowPlaceholder,
-      isDisabled,
-      isActive,
-      maxLength,
-      rows,
-      data,
-      testId,
-      tweakStyles,
-      onChange,
-      onPaste,
-      onFocus,
-      onBlur,
-      ...controlProps
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
+  const shouldShowCounter = hasCounter && isNotEmpty(maxLength);
+  const counterString = `${value.length} / ${maxLength}`;
 
-    const tweakWithMessagesStyles = useTweakStyles({
-      tweakStyles,
-      className: 'tweakWithMessages',
-      currentComponentName: 'TextArea',
-    });
+  const tweakWithMessagesStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakWithMessages',
+    currentComponentName: 'TextArea',
+  });
 
-    const tweakControlWrapperStyles = useTweakStyles({
-      innerStyles: controlWrapperStyles,
-      tweakStyles,
-      className: 'tweakControlWrapper',
-      currentComponentName: 'TextArea',
-    });
+  const tweakControlWrapperStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakControlWrapper',
+    currentComponentName: 'TextArea',
+  });
 
-    const [isFocused, setFocused] = useState(false);
+  const [isFocused, setFocused] = useState(false);
 
-    const hasFocus = isFocused || isActive;
-    // в hasValue нельзя использовать isStringNotEmpty из-за того что isStringNotEmpty делает trim
-    const hasValue = value !== undefined && value !== '';
-    const hasLabel = isReactNodeNotEmpty(label);
-    const hasPlaceholder =
-      (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && isStringNotEmpty(placeholder);
+  const hasFocus = isFocused || isActive;
+  const hasValue = isArrayLikeNotEmpty(value);
+  const hasLabel = isReactNodeNotEmpty(label);
+  const hasPlaceholder =
+    (!hasLabel || hasFocus || shouldAlwaysShowPlaceholder) && isStringNotEmpty(placeholder);
 
-    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-      onChange(event.currentTarget.value, event);
-    };
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    onChange(event.currentTarget.value, event);
+  };
 
-    const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {
-      setFocused(true);
-      onFocus?.(event);
-    };
+  const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {
+    setFocused(true);
+    onFocus?.(event);
+  };
 
-    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
-      setFocused(false);
-      onBlur?.(event);
-    };
+  const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
+    setFocused(false);
+    onBlur?.(event);
+  };
 
-    return (
+  return (
+    <div
+      className={clsx(classes.root, isNotEmpty(size) && classes[size])}
+      style={{ '--counter-length': counterString.length } as CSSProperties}
+    >
       <WithMessages
         errorMessage={errorMessage}
         infoMessage={infoMessage}
@@ -123,11 +143,18 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
           isFocused={hasFocus}
           isDisabled={isDisabled}
           hasValue={hasValue}
+          isInvalid={isInvalid}
+          isRequired={isRequired}
+          groupPlacement={groupPlacement}
+          size={size}
           isFullWidth
-          {...controlProps}
         >
           <div
-            className={clsx(classes.wrapper, { [classes.autoSized]: isAutoSized })}
+            className={clsx(classes.wrapper, {
+              [classes.autoSized]: isAutoSized,
+              [classes.withLabel]: hasLabel,
+            })}
+            // Не менять на addDataAttributes
             {...(isAutoSized && { 'data-value': value })}
           >
             <textarea
@@ -143,20 +170,24 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
               onFocus={handleFocus}
               onBlur={handleBlur}
               onChange={handleChange}
+              autoFocus={shouldFocusOnMount}
               {...addDataAttributes(data, testId)}
+              {...textAreaProps}
             />
+            {shouldShowCounter && (
+              <span
+                className={clsx(classes.symbolsCount, classes[`counter-${counterPosition}`], {
+                  [classes.symbolsCountError]: value.length > maxLength,
+                  [classes.symbolsCountActive]: hasFocus || hasValue,
+                })}
+                {...addDataAttributes({ counterPosition })}
+              >
+                {counterString}
+              </span>
+            )}
           </div>
         </ControlWrapper>
-        {hasCounter && isNotEmpty(maxLength) && (
-          <span
-            className={clsx(classes.symbolsCount, {
-              [classes.symbolsCountError]: value.length > maxLength,
-            })}
-          >
-            {value.length} / {maxLength}
-          </span>
-        )}
       </WithMessages>
-    );
-  },
-);
+    </div>
+  );
+});

package/src/components/TextArea/index.ts

@@ -1,3 +1,3 @@
 export * from './TextArea';
-export * from './types';
 export type { ITextAreaStyles } from './TextArea.styles';
+export * from './types';

package/src/components/TextArea/types.ts

@@ -1,6 +1,6 @@
-import { TextareaHTMLAttributes } from 'react';
+import { IExtendableProps } from '../../types';
 
-export type ITextAreaHTMLBaseProps = Pick<
-  TextareaHTMLAttributes<HTMLTextAreaElement>,
-  'placeholder' | 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'
->;
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ITextAreaCounterPositions extends IExtendableProps<'default'> {}
+
+export type ITextAreaCounterPosition = keyof ITextAreaCounterPositions;

package/src/components/TextButton/TextButton.stories.tsx

@@ -1,17 +1,14 @@
-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 { TextButton } from './TextButton';
 import { TEXT_BUTTON_SIZES, TEXT_BUTTON_VIEWS } from './constants';
 
-const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
-
-export default {
+const meta: Meta<typeof TextButton> = {
   title: 'Buttons/TextButton',
   component: TextButton,
   args: {
     children: 'Text Button',
-    icon: 'chevron-right-small',
+    icon: 'calendar',
     size: 'l',
     view: 'primary',
     isBold: false,
@@ -22,22 +19,14 @@ export default {
     iconPosition: 'left',
     preloaderType: 'dots',
   },
-
   argTypes: {
-    icon: { control: 'select', options: icons },
+    icon: { control: 'select', options: [undefined, Object.keys(iconsMap)] },
     size: { options: TEXT_BUTTON_SIZES, control: 'inline-radio' },
     view: { options: TEXT_BUTTON_VIEWS, control: 'inline-radio' },
     iconPosition: { control: 'inline-radio' },
     preloaderType: { control: 'inline-radio' },
   },
+};
 
-  parameters: {
-    controls: {
-      exclude: ['testId', 'tweakStyles', 'data', 'onClick'],
-    },
-  },
-} as ComponentMeta<typeof TextButton>;
-
-export const Default: ComponentStory<typeof TextButton> = (args) => (
-  <TextButton {...args} key={args.size} />
-);
+export default meta;
+export const Default = {};

package/src/components/TextButton/TextButton.styles.ts

@@ -7,6 +7,7 @@ export const useStyles = createThemedStyles('TextButton', {
     alignItems: 'center',
     height: 24,
     padding: 0,
+    position: 'relative',
     background: 'transparent',
     border: 'none',
     borderRadius: 0,

package/src/components/TextButton/TextButton.tsx

@@ -1,7 +1,9 @@
 import { forwardRef, ReactNode } 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 } from '../../types';
 import { IIcon, renderIcon } from '../Icon';
@@ -36,75 +38,72 @@ export interface ITextButtonProps
   preloaderType?: IThemedPreloaderProps['type'];
 }
 
-export const TextButton = forwardRef<HTMLButtonElement, ITextButtonProps>(
-  (
-    {
-      children,
-      icon,
-      view = 'primary',
-      isDisabled = false,
-      isBold = false,
-      isLoading = false,
-      isActive = false,
-      hasCircleUnderIcon = false,
-      size = 'l',
-      iconPosition = 'left',
-      preloaderType = 'dots',
-      type = 'button',
-      testId,
-      tweakStyles,
-      data,
-      onClick,
-      ...restProps
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const tweakPreloaderStyles = useTweakStyles({
-      innerStyles: preloaderStyles,
-      tweakStyles,
-      className: 'tweakPreloader',
-      currentComponentName: 'TextButton',
-    });
+export const TextButton = forwardRef<HTMLButtonElement, ITextButtonProps>(function TextButton(
+  {
+    children,
+    icon,
+    view = 'primary',
+    isDisabled = false,
+    isBold = false,
+    isLoading = false,
+    isActive = false,
+    hasCircleUnderIcon = false,
+    size = 'l',
+    iconPosition = 'left',
+    preloaderType = 'dots',
+    type = 'button',
+    testId,
+    tweakStyles,
+    data,
+    onClick,
+    ...restProps
+  },
+  ref,
+) {
+  const classes = useStyles({ theme: tweakStyles });
 
-    const hasNoAction = isDisabled || isLoading;
+  const tweakPreloaderStyles = useTweakStyles({
+    innerStyles: preloaderStyles,
+    tweakStyles,
+    className: 'tweakPreloader',
+    currentComponentName: 'TextButton',
+  });
 
-    return (
-      <button
-        ref={ref}
-        type={type}
-        className={clsx(classes.root, classes[size], classes[view], {
-          [classes.bold]: isBold,
-          [classes.loading]: isLoading,
-          [classes.active]: isActive,
-          [classes.disabled]: isDisabled,
-        })}
-        disabled={hasNoAction}
-        onClick={!hasNoAction ? onClick : undefined}
-        {...restProps}
-        {...addDataTestId(testId)}
-        {...addDataAttributes(data)}
-      >
-        <span className={clsx(classes.content, iconPosition === 'right' && classes.reverseContent)}>
-          {isReactNodeNotEmpty(icon) && (
-            <span className={clsx(classes.iconContainer, hasCircleUnderIcon && classes.circle)}>
-              <span className={classes.icon}>{renderIcon(icon)}</span>
-            </span>
-          )}
-          {children}
-        </span>
+  const hasNoAction = isDisabled || isLoading;
 
-        {isLoading && (
-          <span className={classes.loader}>
-            <ThemedPreloader
-              type={preloaderType}
-              useCurrentColor
-              tweakStyles={tweakPreloaderStyles}
-            />
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={clsx(classes.root, classes[size], classes[view], {
+        [classes.bold]: isBold,
+        [classes.loading]: isLoading,
+        [classes.active]: isActive,
+        [classes.disabled]: isDisabled,
+      })}
+      disabled={hasNoAction}
+      onClick={!hasNoAction ? onClick : undefined}
+      {...restProps}
+      {...addDataAttributes(data, testId)}
+    >
+      <span className={clsx(classes.content, iconPosition === 'right' && classes.reverseContent)}>
+        {isReactNodeNotEmpty(icon) && (
+          <span className={clsx(classes.iconContainer, hasCircleUnderIcon && classes.circle)}>
+            <span className={classes.icon}>{renderIcon(icon)}</span>
           </span>
         )}
-      </button>
-    );
-  },
-);
+        {children}
+      </span>
+
+      {isLoading && (
+        <span className={classes.loader}>
+          <ThemedPreloader
+            type={preloaderType}
+            useCurrentColor
+            tweakStyles={tweakPreloaderStyles}
+          />
+        </span>
+      )}
+    </button>
+  );
+});

package/src/components/TextWithInfo/TextWithInfo.stories.tsx

@@ -1,17 +1,13 @@
 import { FC, useState } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { type Meta } from '@storybook/react';
 import { ITextWithInfoProps, TextWithInfo } from './TextWithInfo';
 
-interface ITextWithInfoWithCustomProps extends ITextWithInfoProps {
+interface ITextWithInfoCustomProps extends ITextWithInfoProps {
   infoTooltip: string;
   link: string;
 }
 
-const TextWithInfoWithCustomProps: FC<ITextWithInfoWithCustomProps> = ({
-  infoTooltip,
-  link,
-  ...args
-}) => {
+const Story: FC<ITextWithInfoCustomProps> = ({ infoTooltip, link, ...args }) => {
   const [isSelected, setIsSelected] = useState(false);
 
   return (
@@ -34,20 +30,16 @@ const TextWithInfoWithCustomProps: FC<ITextWithInfoWithCustomProps> = ({
   );
 };
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Data Display/TextWithInfo',
-  component: TextWithInfoWithCustomProps,
+  component: Story,
+  args: {
+    text: 'Обычная перевозка',
+    textTooltip: 'Tултип для самой обычной перевозки',
+    infoTooltip: 'Читать подробную информацию',
+    link: 'https://ya.ru/',
+  },
 };
 
-const Template: ComponentStory<typeof TextWithInfoWithCustomProps> = (args) => (
-  <TextWithInfoWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: 'Обычная перевозка',
-  textTooltip: 'Tултип для самой обычной перевозки',
-  infoTooltip: 'Читать подробную информацию',
-  link: 'https://ya.ru/',
-};
+export default meta;
+export const Default = {};

package/src/components/TextWithInfo/TextWithInfo.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 { TextWithTooltip } from '../TextWithTooltip';
@@ -34,8 +33,7 @@ export const TextWithInfo: FC<ITextWithInfoProps> = ({
   return (
     <div
       className={clsx(classes.root, isSelected && classes.selected)}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
     >
       <div className={classes.container}>
         <div className={classes.text} onClick={onClick}>

package/src/components/TextWithTooltip/TextWithTooltip.stories.tsx

@@ -1,5 +1,6 @@
-import { ComponentStory } from '@storybook/react';
-import { TextWithTooltip } from './TextWithTooltip';
+import { FC } from 'react';
+import { type Meta } from '@storybook/react';
+import { ITextWithTooltipProps, TextWithTooltip } from './TextWithTooltip';
 
 const positions = [
   'top',
@@ -19,18 +20,7 @@ const positions = [
   'auto-end',
 ];
 
-export default {
-  title: 'Data Display/TextWithTooltip',
-  component: TextWithTooltip,
-  argTypes: {
-    tooltipPosition: { control: 'select', options: positions },
-    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
-    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
-    mouseEventType: { control: 'inline-radio', options: ['hover', 'click'] },
-  },
-};
-
-const Template: ComponentStory<typeof TextWithTooltip> = (args) => (
+const Story: FC<ITextWithTooltipProps> = (args) => (
   <div
     style={{
       display: 'flex',
@@ -44,15 +34,26 @@ const Template: ComponentStory<typeof TextWithTooltip> = (args) => (
   </div>
 );
 
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Наведи на меня - появится тултип',
-  tooltipText: 'Текст тултипа',
-  tooltipPosition: 'top',
-  tooltipView: 'tooltip',
-  tooltipType: 'info',
-  isDisabled: false,
-  mouseEventType: 'hover',
-  shouldRenderInBody: true,
+const meta: Meta<typeof Story> = {
+  title: 'Data Display/TextWithTooltip',
+  component: Story,
+  args: {
+    children: 'Наведи на меня - появится тултип',
+    tooltipText: 'Текст тултипа',
+    tooltipPosition: 'top',
+    tooltipView: 'tooltip',
+    tooltipType: 'info',
+    isDisabled: false,
+    mouseEventType: 'hover',
+    shouldRenderInBody: true,
+  },
+  argTypes: {
+    tooltipPosition: { control: 'select', options: positions },
+    tooltipView: { control: 'inline-radio', options: ['tooltip', 'hint'] },
+    tooltipType: { control: 'inline-radio', options: ['info', 'error'] },
+    mouseEventType: { control: 'inline-radio', options: ['hover', 'click'] },
+  },
 };
+
+export default meta;
+export const Default = {};

package/src/components/TextWithTooltip/TextWithTooltip.tsx

@@ -2,12 +2,11 @@ import { CSSProperties, FC, ReactNode, useEffect, useRef, useState } from 'react
 import { Portal } from 'react-overlays';
 import usePopper, { Modifier, Placement } from 'react-overlays/usePopper';
 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 { ITooltipProps, Tooltip } from '../Tooltip';
-import { useStyles, ITextWithTooltipStyles } from './TextWithTooltip.styles';
+import { ITextWithTooltipStyles, useStyles } from './TextWithTooltip.styles';
 
 export interface ITextWithTooltipProps extends ICommonProps<ITextWithTooltipStyles> {
   children: ReactNode;
@@ -18,10 +17,11 @@ export interface ITextWithTooltipProps extends ICommonProps<ITextWithTooltipStyl
   tooltipType?: ITooltipProps['type'];
   /** @default 'top' */
   tooltipPosition?: Placement;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   /** @default [] */
   tooltipModifiers?: Array<Partial<Modifier<any, any>>>;
   tooltipOffsetOptions?: Record<string, unknown>;
+  /** @default 'undefined' */
+  tooltipSize?: ITooltipProps['size'];
   /** @default 'hover' */
   mouseEventType?: 'hover' | 'click';
   hoverDelay?: number;
@@ -40,6 +40,7 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
   tooltipType = 'info',
   tooltipModifiers = [],
   tooltipOffsetOptions,
+  tooltipSize,
   isDisabled = false,
   shouldRenderInBody = true,
   mouseEventType = 'hover',
@@ -129,8 +130,7 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
         mouseEventType === 'click' && shouldShowTooltip && classes.clickable,
       )}
       {...(shouldShowTooltip ? props : undefined)}
-      {...addDataTestId(testId)}
-      {...addDataAttributes(data)}
+      {...addDataAttributes(data, testId)}
       ref={root}
     >
       {shouldShowTooltip && (
@@ -145,6 +145,7 @@ export const TextWithTooltip: FC<ITextWithTooltipProps> = ({
               view={tooltipView}
               type={tooltipType}
               text={tooltipText}
+              size={tooltipSize}
               tweakStyles={tweakTooltipStyles}
             />
           </div>