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

package/src/components/SmartInput/SmartInput.tsx

@@ -1,7 +1,7 @@
-import { ClipboardEvent, FormEvent, forwardRef, useRef } from 'react';
+import { ClipboardEvent, forwardRef, useRef } from 'react';
 import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { useMergedRefs } from '../../hooks';
-import { IInputProps, Input } from '../Input';
+import { IChangeInputEvent, IInputProps, Input } from '../Input';
 import {
   CharactersMap,
   EmailCharactersMap,
@@ -22,7 +22,7 @@ export interface ISmartInputProps extends Omit<IInputProps, 'onChange'> {
   onChange: (
     value: string,
     rawValue: IInputRawValue,
-    event?: FormEvent<HTMLInputElement> | ClipboardEvent<HTMLInputElement>,
+    event?: IChangeInputEvent | ClipboardEvent<HTMLInputElement>,
   ) => void;
 }
 
@@ -56,7 +56,7 @@ export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
       }
     };
 
-    const handleChange = async (str: string, event: FormEvent<HTMLInputElement>) => {
+    const handleChange = async (str: string, event: IChangeInputEvent) => {
       const isValid = regex.test(str);
 
       const charactersMap = smartType === 'email' ? EmailCharactersMap : CharactersMap;

package/src/components/Status/Status.stories.tsx

@@ -1,6 +1,6 @@
 import { Status } from '.';
 import { ComponentStory } from '@storybook/react';
-import { IIconType, iconsList } from '../Icon';
+import { iconsList, IIconType } from '../Icon';
 import { complexIcons } from '../Icon/complexIcons';
 import { STATUS_COLORS, STATUS_SIZES } from './constants';
 import { IStatusStyles } from './Status.styles';
@@ -10,11 +10,7 @@ export default {
   component: Status,
 };
 
-const iconTypes = [
-  undefined,
-  ...Object.keys(iconsList),
-  ...Object.keys(complexIcons),
-] as IIconType[];
+const icons = [undefined, ...Object.keys(iconsList), ...Object.keys(complexIcons)] as IIconType[];
 
 const customTweakStyles: IStatusStyles = {
   custom: {
@@ -62,7 +58,7 @@ Default.args = {
 };
 
 Default.argTypes = {
-  icon: { options: iconTypes, control: 'select' },
+  icon: { options: icons, control: 'select' },
   iconPosition: { options: ['left', 'right'], control: 'inline-radio' },
 };
 

package/src/components/TextArea/TextArea.stories.tsx

@@ -25,13 +25,11 @@ Default.args = {
   infoMessage: 'Message Info',
   rows: 5,
   maxLength: 500,
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
   isInvalid: false,
   errorMessage: 'Error Text',
   isActive: false,
   isDisabled: false,
   isRequired: false,
-  isAutoSizeable: true,
+  isAutoSized: true,
   shouldAlwaysShowPlaceholder: false,
 };

package/src/components/TextArea/TextArea.styles.ts

@@ -1,46 +1,25 @@
-import { ITweakStyles, animations, createThemedStyles, helpers } from '../../theme';
-
-const PADDING_X = 12;
+import { animations, createThemedStyles, helpers, ITweakStyles } from '../../theme';
+import { IControlGroupStyles } from '../ControlGroup';
+import { IControlWrapperStyles } from '../ControlWrapper';
 
 export const useStyles = createThemedStyles('TextArea', {
-  root: {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-
-  wrapper: {
-    display: 'flex',
-    position: 'relative',
-    width: '100%',
-    flexGrow: 1,
-    boxSizing: 'border-box',
-    transition: animations.defaultTransition,
-    transitionProperty: 'border-color',
-    backgroundColor: 'white',
-    border: ['solid', 1, 'lightgray'],
-  },
-
   textarea: {
     ...helpers.withScrollBar,
-
     width: '100%',
     height: '100%',
-    outline: 'none',
-    outlineStyle: 'none',
     fontFamily: 'inherit',
     fontSize: 16,
-    padding: [14, PADDING_X, 8],
-    scrollPadding: '14px 0 8px',
+    padding: [14, 0, 8, 'var(--control-padding)'],
+    scrollPadding: '14px 0 8px var(--control-padding)',
+    scrollbarGutter: 'stable',
+    boxSizing: 'border-box',
+    outline: 'none',
+    outlineStyle: 'none',
     transition: animations.defaultTransition,
     transitionProperty: 'background-color',
     border: 'none',
     resize: 'none',
-
-    '&:disabled': {
-      extend: 'disabled',
-    },
+    background: 'transparent',
 
     '&::placeholder': {
       opacity: 1,
@@ -53,125 +32,47 @@ export const useStyles = createThemedStyles('TextArea', {
     },
   },
 
-  autosize: {
-    display: 'inline-grid',
+  autoSized: {
+    display: 'grid',
     gridTemplateRows: 'minmax(0, 100%)',
 
     '& > $textarea, &::after': {
-      gridArea: '1 / 1 / 2 / 2',
+      gridArea: '1 / 2',
     },
 
     '&::after': {
       extend: 'textarea',
-      content: 'attr(data-value) " "',
+      content: 'attr(data-value) " "', // Без пробела ломается!
       overflowWrap: 'break-word',
       whiteSpace: 'pre-wrap',
       visibility: 'hidden',
-      scrollbarGutter: 'stable',
-    },
-  },
-
-  focused: {
-    position: 'relative',
-    zIndex: 1,
-  },
-
-  withFloatingLabel: {
-    '& $textarea, &::after': {
-      paddingTop: 24,
-      scrollPaddingTop: '24px',
-    },
-  },
-
-  floating: {},
-
-  activeLabel: {
-    display: 'none',
-
-    '&$floating': {
-      display: 'block',
-      transform: 'scale(0.75) translateY(-120%)',
-    },
-  },
-
-  required: {
-    '&:before': {
-      content: '""',
-      position: 'absolute',
-      left: -12,
-      top: 20,
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-
-      backgroundColor: 'red',
-    },
-  },
-
-  disabled: {},
-
-  label: {
-    position: 'absolute',
-    pointerEvents: 'none',
-    left: PADDING_X,
-    top: PADDING_X * 2,
-    transformOrigin: 'top left',
-    transform: 'translateY(-50%)',
-    transition: animations.defaultTransition,
-    transitionProperty: 'transform, color',
-    fontSize: 16,
-  },
-
-  invalid: {
-    borderColor: 'red',
-  },
-
-  invalidLabel: {},
-
-  error: {
-    fontSize: 12,
-    paddingTop: 4,
-    paddingLeft: 13,
-    color: 'red',
-  },
-
-  requiredLabel: {
-    '&:after': {
-      content: '""',
-      position: 'absolute',
-      right: -8,
-      top: 4,
-      transform: 'translate(0, -50%)',
-      width: 6,
-      height: 6,
-      borderRadius: '50%',
-      backgroundColor: 'red',
     },
   },
 
   symbolsCount: {
-    display: 'block',
     textAlign: 'right',
     marginTop: 4,
     fontSize: 12,
     marginLeft: 'auto',
-    paddingLeft: 32,
     whiteSpace: 'nowrap',
+    pointerEvents: 'none',
   },
 
   symbolsCountError: {
     color: 'red',
   },
+});
 
-  footer: {
-    display: 'flex',
-  },
-
-  info: {
-    fontSize: 12,
-    paddingTop: 4,
-    paddingLeft: 13,
+export const controlWrapperStyles: IControlWrapperStyles = {
+  label: {
+    top: 16,
   },
-});
+};
 
-export type ITextAreaStyles = ITweakStyles<typeof useStyles>;
+export type ITextAreaStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakControlGroup: IControlGroupStyles;
+    tweakControlWrapper: IControlWrapperStyles;
+  }
+>;

package/src/components/TextArea/TextArea.tsx

@@ -1,39 +1,34 @@
-import { forwardRef, useState, FormEvent, FocusEvent, ChangeEvent, ReactNode } from 'react';
+import { ChangeEvent, FocusEvent, FormEvent, forwardRef, useState } from 'react';
 import clsx from 'clsx';
 import {
-  addDataTestId,
+  addDataAttributes,
   isNotEmpty,
   isReactNodeNotEmpty,
   isStringNotEmpty,
 } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes, trimStringToMaxLength } from '../../helpers';
+import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
+import { ControlGroup, IControlGroupProps } from '../ControlGroup';
+import { ControlWrapper, IControlWrapperProps } from '../ControlWrapper';
 import { ITextAreaHTMLBaseProps } from './types';
-import { useStyles, ITextAreaStyles } from './TextArea.styles';
+import { controlWrapperStyles, ITextAreaStyles, useStyles } from './TextArea.styles';
 
-export interface ITextAreaProps extends ICommonProps<ITextAreaStyles>, ITextAreaHTMLBaseProps {
+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;
-  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;
+  isAutoSized?: boolean;
   /** @default false */
   shouldFocusOnMount?: boolean;
   /** @default true */
@@ -53,131 +48,110 @@ 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,
+      shouldFocusOnMount,
       hasCounter = true,
-      shouldTrimAfterMaxLength = false,
-      isAutoSizeable = true,
-      shouldAlwaysShowPlaceholder = false,
+      shouldTrimAfterMaxLength,
+      isAutoSized = true,
+      shouldAlwaysShowPlaceholder,
+      isDisabled,
+      isActive,
       maxLength,
       rows,
-      testId,
       data,
+      testId,
       tweakStyles,
       onChange,
       onPaste,
       onFocus,
       onBlur,
+      ...controlProps
     },
     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 tweakControlGroupStyles = useTweakStyles({
+      tweakStyles,
+      className: 'tweakControlGroup',
+      currentComponentName: 'TextArea',
+    });
 
-    const handleOnFocus = (event: FocusEvent<HTMLTextAreaElement>) => {
-      setFocused(true);
-      if (onFocus !== undefined) {
-        onFocus(event);
-      }
-    };
+    const tweakControlWrapperStyles = useTweakStyles({
+      innerStyles: controlWrapperStyles,
+      tweakStyles,
+      className: 'tweakControlWrapper',
+      currentComponentName: 'TextArea',
+    });
 
-    const handleOnBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
-      setFocused(false);
-      if (onBlur !== undefined) {
-        onBlur(event);
-      }
-    };
+    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 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 handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+      onChange(event.currentTarget.value, event);
     };
 
-    const hasInfoMessage = isStringNotEmpty(infoMessage);
-    const hasErrorMessage = isStringNotEmpty(errorMessage);
+    const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {
+      setFocused(true);
+      onFocus?.(event);
+    };
+
+    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
+      setFocused(false);
+      onBlur?.(event);
+    };
 
     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}
+      <ControlGroup
+        errorMessage={errorMessage}
+        infoMessage={infoMessage}
+        tweakStyles={tweakControlGroupStyles}
+      >
+        <ControlWrapper
+          label={label}
+          tweakStyles={tweakControlWrapperStyles}
+          isFocused={hasFocus}
+          isDisabled={isDisabled}
+          hasValue={hasValue}
+          isFullWidth
+          testId={testId}
+          {...controlProps}
         >
-          {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>
+          <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/TextButton/TextButton.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 { TextButton } from './TextButton';
 import { TEXT_BUTTON_SIZES, TEXT_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[];
 
 export default {
   title: 'Buttons/TextButton',
@@ -28,7 +24,7 @@ export default {
   },
 
   argTypes: {
-    icon: { control: 'select', options: iconTypes },
+    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' },

package/src/components/WithPopup/WithPopup.stories.tsx

@@ -91,7 +91,6 @@ Default.args = {
   shouldRenderInBody: true,
   shouldHideOnScroll: false,
   shouldStopPropagation: true,
-  shouldShowArrow: false,
 };
 
 Default.parameters = {

package/src/components/WithPopup/WithPopup.styles.ts

@@ -20,8 +20,6 @@ export const useStyles = createThemedStyles('WithPopup', {
     outline: 'none',
   },
 
-  arrow: {},
-
   animationEnd: {},
 
   animationStart: {},