@true-engineering/true-react-common-ui-kit 4.0.0-alpha20 → 4.0.0-alpha22

package/package.json

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

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

@@ -4,7 +4,7 @@ import { iconsList } from '../Icon';
 import { ControlWrapper } from './ControlWrapper';
 
 export default {
-  title: 'ControlWrapper',
+  title: 'Controls/ControlWrapper',
   component: ControlWrapper,
 };
 

package/src/components/IncrementInput/IncrementInput.stories.tsx

@@ -26,4 +26,6 @@ Default.args = {
   isDisabled: false,
   isRequired: false,
   isReadonly: false,
+  icon: 'question',
+  isClearable: true,
 };

package/src/components/IncrementInput/IncrementInput.styles.ts

@@ -1,41 +1,44 @@
 import { animations, colors, createThemedStyles, dimensions, ITweakStyles } from '../../theme';
 import { IInputStyles } from '../Input';
 
-export const BUTTONS_WIDTH = 36;
-export const BUTTONS_GAP = 2;
-
-export const useStyles = createThemedStyles('IncrementInput', {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'relative',
+export const inputStyles: IInputStyles = {
+  tweakControlWrapper: {
+    controlWrapper: {
+      '--increment-buttons-width': '36px',
+      '--increment-buttons-gap': '1px',
+      '--increment-buttons-margin': '1px',
+      '--increment-button-icon-size': '16px',
+    },
   },
+};
 
+export const useStyles = createThemedStyles('IncrementInput', {
   buttons: {
     display: 'flex',
     flexDirection: 'column',
-    width: BUTTONS_WIDTH,
-    position: 'absolute',
-    right: BUTTONS_GAP,
-    top: BUTTONS_GAP,
-    bottom: BUTTONS_GAP,
+    height: 'calc(100% - var(--increment-buttons-margin) * 2)',
+    margin: 'var(--increment-buttons-margin)',
+    gap: 'var(--increment-buttons-gap)',
+    flexShrink: 0,
+    order: 1000, // сдвигаем кнопки на самый конец
+
     zIndex: dimensions.Z_INDEX.CONTROL_FOCUS + 1,
   },
 
   button: {
-    width: '100%',
-    height: (dimensions.CONTROL.HEIGHT - 5) / 2,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 'var(--increment-buttons-width)',
+    flexGrow: 1,
+
+    cursor: 'pointer',
     border: 'none',
     outline: 'none',
+    color: colors.FONT_MEDIUM,
     backgroundColor: colors.GREY_BACKGROUND,
     transition: animations.defaultTransition,
-    transitionProperty: 'background-color',
-    color: colors.FONT_MEDIUM,
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: [0, 10],
+    transitionProperty: 'background-color, color',
 
     '&:hover, &:focus': {
       backgroundColor: colors.GREY_HOVER,
@@ -44,16 +47,12 @@ export const useStyles = createThemedStyles('IncrementInput', {
     '&:active': {
       backgroundColor: colors.GREY_ACTIVE,
     },
-
-    '&:first-child': {
-      marginBottom: 1,
-    },
   },
 
   disabledButton: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    color: colors.FONT_DISABLED,
     cursor: 'default',
+    color: colors.FONT_DISABLED,
+    backgroundColor: colors.CLASSIC_WHITE,
 
     '&:hover': {
       backgroundColor: colors.CLASSIC_WHITE,
@@ -61,18 +60,11 @@ export const useStyles = createThemedStyles('IncrementInput', {
   },
 
   errorButton: {},
-});
-
-export const inputStyles: IInputStyles = {
-  input: {
-    paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
-  },
 
-  tweakControlWrapper: {
-    controls: {
-      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
-    },
+  icon: {
+    width: 'var(--increment-button-icon-size)',
+    height: 'var(--increment-button-icon-size)',
   },
-};
+});
 
 export type IIncrementInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;

package/src/components/IncrementInput/IncrementInput.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect } from 'react';
 import clsx from 'clsx';
-import { addDataTestId, isNumberInteger } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes, getNumberInRange, getNumberLength } from '../../helpers';
+import { isNotEmpty, isNumberInteger } from '@true-engineering/true-react-platform-helpers';
+import { getNumberInRange, getNumberLength } from '../../helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Icon } from '../Icon';
@@ -22,8 +22,6 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
   max,
   step = 1,
   intPartPrecision,
-  data,
-  testId,
   tweakStyles,
   isDisabled,
   isReadonly,
@@ -39,14 +37,15 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
 
   const classes = useStyles({ theme: tweakStyles });
 
+  const isEditDisabled = isDisabled || isReadonly;
+
   const isIncreaseDisabled =
-    isDisabled ||
-    isReadonly ||
-    (intPartPrecision !== undefined && getNumberLength((value ?? 0) + step) > intPartPrecision) ||
-    (max !== undefined && value !== undefined && value >= max);
+    isEditDisabled ||
+    (isNotEmpty(intPartPrecision) && getNumberLength((value ?? 0) + step) > intPartPrecision) ||
+    (isNotEmpty(max) && isNotEmpty(value) && value >= max);
 
   const isDecreaseDisabled =
-    isDisabled || isReadonly || (min !== undefined && value !== undefined ? value <= min : false);
+    isEditDisabled || (isNotEmpty(min) && isNotEmpty(value) && value <= min);
 
   const increment = (): void => {
     onChange(getNumberInRange((value ?? 0) + step, min, max));
@@ -63,19 +62,18 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
   }, [step]);
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
-      <NumberInput
-        {...props}
-        isInvalid={isInvalid}
-        isDisabled={isDisabled}
-        isReadonly={isReadonly}
-        min={min}
-        max={max}
-        intPartPrecision={intPartPrecision}
-        onChange={onChange}
-        value={value}
-        tweakStyles={tweakInputStyles}
-      />
+    <NumberInput
+      {...props}
+      isInvalid={isInvalid}
+      isDisabled={isDisabled}
+      isReadonly={isReadonly}
+      min={min}
+      max={max}
+      intPartPrecision={intPartPrecision}
+      onChange={onChange}
+      value={value}
+      tweakStyles={tweakInputStyles}
+    >
       <div className={classes.buttons}>
         <button
           className={clsx(classes.button, {
@@ -86,8 +84,11 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
           disabled={isIncreaseDisabled}
           onClick={increment}
         >
-          <Icon type="plus" />
+          <div className={classes.icon}>
+            <Icon type="plus" />
+          </div>
         </button>
+
         <button
           className={clsx(classes.button, {
             [classes.disabledButton]: isDecreaseDisabled,
@@ -97,9 +98,11 @@ export const IncrementInput: FC<IIncrementInputProps> = ({
           disabled={isDecreaseDisabled}
           onClick={decrement}
         >
-          <Icon type="minus" />
+          <div className={classes.icon}>
+            <Icon type="minus" />
+          </div>
         </button>
       </div>
-    </div>
+    </NumberInput>
   );
 };

package/src/components/Input/InputBase.tsx

@@ -33,13 +33,13 @@ export interface IInputBaseProps
       IControlWrapperProps,
       | 'label'
       | 'icon'
+      | 'size'
       | 'groupPlacement'
       | 'isInvalid'
       | 'isRequired'
       | 'isLoading'
       | 'isDisabled'
       | 'onIconClick'
-      | 'size'
     >,
     Pick<
       Partial<ReactInputMaskBaseProps>,
@@ -103,6 +103,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
       isRequired,
       size,
       onIconClick,
+      children,
       ...inputProps
     },
     ref,
@@ -248,6 +249,7 @@ export const InputBase = forwardRef<HTMLInputElement, IInputBaseProps>(
         ) : (
           inputContent
         )}
+        {children}
       </ControlWrapper>
     );
   },

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

@@ -1,7 +1,10 @@
 import { useState } from 'react';
 import { ComponentStory } from '@storybook/react';
+import { IExtendableProps } from '../../types';
 import { TextArea } from './TextArea';
 
+const COUNTER_POSITIONS = ['default', 'top'] as const;
+
 export default {
   title: 'Inputs/TextArea',
   component: TextArea,
@@ -12,9 +15,14 @@ export default {
   },
 };
 
+declare module './types' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface ITextAreaCounterPositions extends IExtendableProps<typeof COUNTER_POSITIONS> {}
+}
+
 const Template: ComponentStory<typeof TextArea> = (args) => {
   const [value, setValue] = useState('');
-  return <TextArea {...args} value={value} onChange={(v) => setValue(v)} />;
+  return <TextArea {...args} value={value} onChange={setValue} />;
 };
 
 export const Default = Template.bind({});
@@ -26,6 +34,7 @@ Default.args = {
   rows: 5,
   maxLength: 500,
   isInvalid: false,
+  counterPosition: 'default',
   errorMessage: 'Error Text',
   isActive: false,
   isDisabled: false,
@@ -33,3 +42,7 @@ Default.args = {
   isAutoSized: true,
   shouldAlwaysShowPlaceholder: false,
 };
+
+Default.argTypes = {
+  counterPosition: { options: [undefined, ...COUNTER_POSITIONS], control: 'select' },
+};

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

@@ -1,8 +1,14 @@
 import { animations, createThemedStyles, helpers, ITweakStyles } from '../../theme';
+import { IWithPrefix } from '../../types';
 import { IControlWrapperStyles } from '../ControlWrapper';
 import { IWithMessagesStyles } from '../WithMessages';
+import { ITextAreaCounterPositions } from './types';
 
 export const useStyles = createThemedStyles('TextArea', {
+  root: {
+    width: '100%',
+  },
+
   textarea: {
     ...helpers.withScrollBar,
     width: '100%',
@@ -66,6 +72,10 @@ export const useStyles = createThemedStyles('TextArea', {
     color: 'red',
   },
 
+  symbolsCountActive: {},
+
+  'counter-default': {},
+
   withLabel: {},
 });
 
@@ -74,5 +84,5 @@ export type ITextAreaStyles = ITweakStyles<
   {
     tweakWithMessages: IWithMessagesStyles;
     tweakControlWrapper: IControlWrapperStyles;
-  }
+  } & IWithPrefix<ITextAreaCounterPositions, 'counter-'>
 >;

package/src/components/TextArea/TextArea.tsx

@@ -6,6 +6,7 @@ import {
   TextareaHTMLAttributes,
   useState,
 } from 'react';
+import { Styles } from 'react-jss';
 import clsx from 'clsx';
 import {
   addDataAttributes,
@@ -19,6 +20,7 @@ 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
@@ -31,6 +33,7 @@ export interface ITextAreaProps
     Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {
   value?: string;
   placeholder?: string;
+  counterPosition?: ITextAreaCounterPosition;
   /** @default false */
   isActive?: boolean;
   /**
@@ -49,14 +52,13 @@ export interface ITextAreaProps
   onChange: (value: string, event?: FormEvent<HTMLTextAreaElement>) => void;
 }
 
-const DEFAULT_VALUE = '';
-
 export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
   (
     {
-      value = DEFAULT_VALUE,
+      value = '',
       placeholder,
       name,
+      counterPosition = 'default',
       shouldFocusOnMount,
       hasCounter = true,
       shouldTrimAfterMaxLength,
@@ -88,6 +90,9 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
   ) => {
     const classes = useStyles({ theme: tweakStyles });
 
+    const shouldShowCounter = hasCounter && isNotEmpty(maxLength);
+    const counterString = `${value.length} / ${maxLength}`;
+
     const tweakWithMessagesStyles = useTweakStyles({
       tweakStyles,
       className: 'tweakWithMessages',
@@ -123,60 +128,65 @@ export const TextArea = forwardRef<HTMLTextAreaElement, ITextAreaProps>(
     };
 
     return (
-      <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={classes.root} style={{ '--counter-length': counterString.length } as Styles}>
+        <WithMessages
+          errorMessage={errorMessage}
+          infoMessage={infoMessage}
+          tweakStyles={tweakWithMessagesStyles}
+          testId={getTestId(testId, 'wrapper')}
         >
-          <div
-            className={clsx(classes.wrapper, {
-              [classes.autoSized]: isAutoSized,
-              [classes.withLabel]: hasLabel,
-            })}
-            {...(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}
-            />
-          </div>
-        </ControlWrapper>
-        {hasCounter && isNotEmpty(maxLength) && (
-          <span
-            className={clsx(classes.symbolsCount, {
-              [classes.symbolsCountError]: value.length > maxLength,
-            })}
+          <ControlWrapper
+            label={label}
+            tweakStyles={tweakControlWrapperStyles}
+            isFocused={hasFocus}
+            isDisabled={isDisabled}
+            hasValue={hasValue}
+            isInvalid={isInvalid}
+            isRequired={isRequired}
+            groupPlacement={groupPlacement}
+            size={size}
+            isFullWidth
           >
-            {value.length} / {maxLength}
-          </span>
-        )}
-      </WithMessages>
+            <div
+              className={clsx(classes.wrapper, isNotEmpty(size) && classes[size], {
+                [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/types.ts

@@ -0,0 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+import { IExtendableProps } from '../../types';
+
+export interface ITextAreaCounterPositions extends IExtendableProps<'default'> {}
+
+export type ITextAreaCounterPosition = keyof ITextAreaCounterPositions;

package/src/components/WithMessages/WithMessages.stories.tsx

@@ -4,7 +4,7 @@ import { IInputProps, Input } from '../Input';
 import { WithMessages } from './WithMessages';
 
 export default {
-  title: 'WithMessages',
+  title: 'Data Display/WithMessages',
   component: WithMessages,
 };