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

package/src/components/TextArea/TextArea.tsx

@@ -1,161 +1,195 @@
-import { ChangeEvent, FocusEvent, FormEvent, forwardRef, useState } from 'react';
-import clsx from 'clsx';
-import {
-  addDataAttributes,
-  isNotEmpty,
-  isReactNodeNotEmpty,
-  isStringNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-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';
-
-export interface ITextAreaProps
-  extends ICommonProps<ITextAreaStyles>,
-    Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled'>,
-    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>,
-    Pick<ITextAreaHTMLBaseProps, 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'> {
-  value?: string;
-  placeholder?: string;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default false */
-  isActive?: boolean;
-  /**
-   * Должна ли высота и ширина textarea подстраиваться под содержимое
-   * @default true
-   */
-  isAutoSized?: boolean;
-  /** @default false */
-  shouldFocusOnMount?: boolean;
-  /** @default true */
-  hasCounter?: boolean;
-  /** @default false */
-  shouldTrimAfterMaxLength?: boolean;
-  /** @default false */
-  shouldAlwaysShowPlaceholder?: boolean;
-  onChange: (value: string, event?: FormEvent<HTMLTextAreaElement>) => void;
-}
-
-const DEFAULT_VALUE = '';
-
-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 tweakWithMessagesStyles = useTweakStyles({
-      tweakStyles,
-      className: 'tweakWithMessages',
-      currentComponentName: 'TextArea',
-    });
-
-    const tweakControlWrapperStyles = useTweakStyles({
-      innerStyles: controlWrapperStyles,
-      tweakStyles,
-      className: 'tweakControlWrapper',
-      currentComponentName: 'TextArea',
-    });
-
-    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 handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-      onChange(event.currentTarget.value, event);
-    };
-
-    const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {
-      setFocused(true);
-      onFocus?.(event);
-    };
-
-    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
-      setFocused(false);
-      onBlur?.(event);
-    };
-
-    return (
-      <WithMessages
-        errorMessage={errorMessage}
-        infoMessage={infoMessage}
-        tweakStyles={tweakWithMessagesStyles}
-      >
-        <ControlWrapper
-          label={label}
-          tweakStyles={tweakControlWrapperStyles}
-          isFocused={hasFocus}
-          isDisabled={isDisabled}
-          hasValue={hasValue}
-          isFullWidth
-          testId={testId}
-          {...controlProps}
-        >
-          <div
-            className={clsx(classes.wrapper, { [classes.autoSized]: isAutoSized })}
-            {...(isAutoSized && { 'data-value': value })}
-          >
-            <textarea
-              ref={ref}
-              className={classes.textarea}
-              value={value}
-              disabled={isDisabled}
-              placeholder={hasPlaceholder ? placeholder : undefined}
-              maxLength={shouldTrimAfterMaxLength ? maxLength : undefined}
-              name={name}
-              rows={rows}
-              onPaste={onPaste}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-              onChange={handleChange}
-              {...addDataAttributes(data, testId, 'control')}
-            />
-          </div>
-        </ControlWrapper>
-        {hasCounter && isNotEmpty(maxLength) && (
-          <span
-            className={clsx(classes.symbolsCount, {
-              [classes.symbolsCountError]: value.length > maxLength,
-            })}
-          >
-            {value.length} / {maxLength}
-          </span>
-        )}
-      </WithMessages>
-    );
-  },
-);
+import {
+  ChangeEvent,
+  FocusEvent,
+  FormEvent,
+  forwardRef,
+  TextareaHTMLAttributes,
+  useState,
+} from 'react';
+import { Styles } from 'react-jss';
+import clsx from 'clsx';
+import {
+  addDataAttributes,
+  getTestId,
+  isArrayLikeNotEmpty,
+  isNotEmpty,
+  isReactNodeNotEmpty,
+  isStringNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
+import { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
+import { IWithMessagesProps, WithMessages } from '../WithMessages';
+import { ITextAreaCounterPosition } from './types';
+import { ITextAreaStyles, useStyles } from './TextArea.styles';
+
+export interface ITextAreaProps
+  extends ICommonProps<ITextAreaStyles>,
+    Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>,
+    Pick<
+      IControlWrapperProps,
+      'label' | 'isInvalid' | 'isRequired' | 'isDisabled' | 'size' | 'groupPlacement'
+    >,
+    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {
+  value?: string;
+  placeholder?: string;
+  counterPosition?: ITextAreaCounterPosition;
+  /** @default false */
+  isActive?: boolean;
+  /**
+   * Должна ли высота и ширина textarea подстраиваться под содержимое
+   * @default true
+   */
+  isAutoSized?: boolean;
+  /** @default false */
+  shouldFocusOnMount?: boolean;
+  /** @default true */
+  hasCounter?: boolean;
+  /** @default false */
+  shouldTrimAfterMaxLength?: boolean;
+  /** @default false */
+  shouldAlwaysShowPlaceholder?: boolean;
+  onChange: (value: string, event?: FormEvent<HTMLTextAreaElement>) => void;
+}
+
+export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
+  (
+    {
+      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 });
+
+    const shouldShowCounter = hasCounter && isNotEmpty(maxLength);
+    const counterString = `${value.length} / ${maxLength}`;
+
+    const tweakWithMessagesStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakWithMessages',
+      currentComponentName: 'TextArea',
+    });
+
+    const tweakControlWrapperStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakControlWrapper',
+      currentComponentName: 'TextArea',
+    });
+
+    const [isFocused, setFocused] = useState(false);
+
+    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 handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {
+      setFocused(true);
+      onFocus?.(event);
+    };
+
+    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
+      setFocused(false);
+      onBlur?.(event);
+    };
+
+    return (
+      <div
+        className={clsx(classes.root, isNotEmpty(size) && classes[size])}
+        style={{ '--counter-length': counterString.length } as Styles}
+      >
+        <WithMessages
+          errorMessage={errorMessage}
+          infoMessage={infoMessage}
+          tweakStyles={tweakWithMessagesStyles}
+          testId={getTestId(testId, 'wrapper')}
+        >
+          <ControlWrapper
+            label={label}
+            tweakStyles={tweakControlWrapperStyles}
+            isFocused={hasFocus}
+            isDisabled={isDisabled}
+            hasValue={hasValue}
+            isInvalid={isInvalid}
+            isRequired={isRequired}
+            groupPlacement={groupPlacement}
+            size={size}
+            isFullWidth
+          >
+            <div
+              className={clsx(classes.wrapper, {
+                [classes.autoSized]: isAutoSized,
+                [classes.withLabel]: hasLabel,
+              })}
+              // Не менять на addDataAttributes
+              {...(isAutoSized && { 'data-value': value })}
+            >
+              <textarea
+                ref={ref}
+                className={classes.textarea}
+                value={value}
+                disabled={isDisabled}
+                placeholder={hasPlaceholder ? placeholder : undefined}
+                maxLength={shouldTrimAfterMaxLength ? maxLength : undefined}
+                name={name}
+                rows={rows}
+                onPaste={onPaste}
+                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>
+        </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 './TextArea';
+export type { ITextAreaStyles } from './TextArea.styles';
+export * from './types';

package/src/components/TextArea/types.ts

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

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

@@ -1,43 +1,42 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { iconsList, IIconType } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
-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 {
-  title: 'Buttons/TextButton',
-  component: TextButton,
-  args: {
-    children: 'Text Button',
-    icon: 'chevron-right-small',
-    size: 'l',
-    view: 'primary',
-    isBold: false,
-    isLoading: false,
-    isActive: false,
-    isDisabled: false,
-    hasCircleUnderIcon: true,
-    iconPosition: 'left',
-    preloaderType: 'dots',
-  },
-
-  argTypes: {
-    icon: { control: 'select', options: icons },
-    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} />
-);
+import { ComponentMeta, ComponentStory } 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(iconsMap)];
+
+export default {
+  title: 'Buttons/TextButton',
+  component: TextButton,
+  args: {
+    children: 'Text Button',
+    icon: 'chevron-right-small',
+    size: 'l',
+    view: 'primary',
+    isBold: false,
+    isLoading: false,
+    isActive: false,
+    isDisabled: false,
+    hasCircleUnderIcon: true,
+    iconPosition: 'left',
+    preloaderType: 'dots',
+  },
+
+  argTypes: {
+    icon: { control: 'select', options: icons },
+    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} />
+);