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

package/src/components/TextArea/TextArea.tsx

@@ -1,183 +1,157 @@
-import { forwardRef, useState, FormEvent, FocusEvent, ChangeEvent, ReactNode } from 'react';
-import clsx from 'clsx';
-import {
-  addDataTestId,
-  isNotEmpty,
-  isReactNodeNotEmpty,
-  isStringNotEmpty,
-} from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes, trimStringToMaxLength } from '../../helpers';
-import { ICommonProps } from '../../types';
-import { ITextAreaHTMLBaseProps } from './types';
-import { useStyles, ITextAreaStyles } from './TextArea.styles';
-
-export interface ITextAreaProps extends ICommonProps<ITextAreaStyles>, ITextAreaHTMLBaseProps {
-  value?: string;
-  label?: ReactNode;
-  placeholder?: string;
-  /** @default false */
-  isDisabled?: boolean;
-  /** @default true */
-  hasFloatingLabel?: boolean;
-  /** @default false */
-  isInvalid?: boolean;
-  /** @default false */
-  isActive?: boolean;
-  /**
-   * Должна ли высота и ширина textarea подстраиваться под содержимое
-   * @default true
-   */
-  isAutoSizeable?: boolean;
-  infoMessage?: string;
-  errorMessage?: string;
-  /** @default false */
-  isRequired?: boolean;
-  /** @default false */
-  hasRequiredLabel?: 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,
-      isDisabled,
-      hasFloatingLabel = true,
-      isInvalid = false,
-      isActive = false,
-      infoMessage,
-      errorMessage,
-      isRequired = false,
-      name,
-      hasRequiredLabel = false,
-      shouldFocusOnMount = false,
-      hasCounter = true,
-      shouldTrimAfterMaxLength = false,
-      isAutoSizeable = true,
-      shouldAlwaysShowPlaceholder = false,
-      maxLength,
-      rows,
-      testId,
-      data,
-      tweakStyles,
-      onChange,
-      onPaste,
-      onFocus,
-      onBlur,
-    },
-    ref,
-  ) => {
-    const classes = useStyles({ theme: tweakStyles });
-
-    const [isFocused, setFocused] = useState(false);
-
-    const handleOnChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-      const rawValue = event.currentTarget.value;
-      const newValue =
-        shouldTrimAfterMaxLength && maxLength !== undefined
-          ? trimStringToMaxLength(rawValue, maxLength)
-          : rawValue;
-
-      onChange(newValue, event);
-    };
-
-    const handleOnFocus = (event: FocusEvent<HTMLTextAreaElement>) => {
-      setFocused(true);
-      if (onFocus !== undefined) {
-        onFocus(event);
-      }
-    };
-
-    const handleOnBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
-      setFocused(false);
-      if (onBlur !== undefined) {
-        onBlur(event);
-      }
-    };
-
-    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 props = {
-      className: classes.textarea,
-      onFocus: handleOnFocus,
-      onBlur: handleOnBlur,
-      onChange: handleOnChange,
-      value,
-      onPaste,
-      disabled: isDisabled,
-      placeholder: hasPlaceholder ? placeholder : undefined,
-      name,
-      autoFocus: shouldFocusOnMount,
-      rows,
-      ...addDataTestId(testId),
-    };
-
-    const hasInfoMessage = isStringNotEmpty(infoMessage);
-    const hasErrorMessage = isStringNotEmpty(errorMessage);
-
-    return (
-      <div className={classes.root} {...addDataAttributes(data)}>
-        <div
-          className={clsx(classes.wrapper, {
-            [classes.required]: isRequired && !hasRequiredLabel,
-            [classes.invalid]: isInvalid,
-            [classes.focused]: hasFocus,
-            [classes.disabled]: isDisabled,
-            [classes.autosize]: isAutoSizeable,
-            [classes.withFloatingLabel]: hasFloatingLabel && hasLabel,
-          })}
-          data-value={isAutoSizeable ? value : undefined}
-        >
-          {hasLabel && (
-            <span
-              className={clsx(classes.label, {
-                [classes.invalidLabel]: isInvalid,
-                [classes.requiredLabel]: hasRequiredLabel && !isRequired,
-                [classes.activeLabel]: hasFocus || hasValue,
-                [classes.floating]: hasFloatingLabel,
-              })}
-            >
-              {label}
-            </span>
-          )}
-
-          <textarea ref={ref} {...props} />
-        </div>
-
-        <div className={classes.footer}>
-          {hasInfoMessage && <div className={classes.info}>{infoMessage}</div>}
-          {!hasInfoMessage && hasErrorMessage && (
-            <div className={classes.error}>{errorMessage}</div>
-          )}
-          {hasCounter && isNotEmpty(maxLength) && (
-            <span
-              className={clsx(classes.symbolsCount, {
-                [classes.symbolsCountError]: value.length > maxLength,
-              })}
-            >
-              {value.length} / {maxLength}
-            </span>
-          )}
-        </div>
-        {hasInfoMessage && hasErrorMessage && <div className={classes.error}>{errorMessage}</div>}
-      </div>
-    );
-  },
-);
+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 { ControlGroup, IControlGroupProps } from '../ControlGroup';
+import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
+import { ITextAreaHTMLBaseProps } from './types';
+import { controlWrapperStyles, ITextAreaStyles, useStyles } from './TextArea.styles';
+
+export interface ITextAreaProps
+  extends ICommonProps<ITextAreaStyles>,
+    Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled'>,
+    Pick<IControlGroupProps, '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 tweakControlGroupStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakControlGroup',
+      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 (
+      <ControlGroup
+        errorMessage={errorMessage}
+        infoMessage={infoMessage}
+        tweakStyles={tweakControlGroupStyles}
+      >
+        <ControlWrapper
+          label={label}
+          tweakStyles={tweakControlWrapperStyles}
+          isFocused={hasFocus}
+          isDisabled={isDisabled}
+          hasValue={hasValue}
+          isFullWidth
+          testId={testId}
+          {...controlProps}
+        >
+          <div {...(isAutoSized && { className: classes.autoSized, '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>
+        )}
+      </ControlGroup>
+    );
+  },
+);

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 * from './types';
+export type { ITextAreaStyles } from './TextArea.styles';

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 { TextareaHTMLAttributes } from 'react';
+
+export type ITextAreaHTMLBaseProps = Pick<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'placeholder' | 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'
+>;

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

@@ -1,47 +1,43 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { IIconType, iconsList } from '../Icon';
-import { complexIcons } from '../Icon/complexIcons';
-import { TextButton } from './TextButton';
-import { TEXT_BUTTON_SIZES, TEXT_BUTTON_VIEWS } from './constants';
-
-const iconTypes = [
-  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: iconTypes },
-    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 { 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} />
+);