@true-engineering/true-react-common-ui-kit 4.0.0-alpha6 → 4.0.0-alpha61

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

@@ -1,29 +1,31 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { IncrementInput } from './IncrementInput';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { IIncrementInputProps, IncrementInput } from './IncrementInput';
 
-export default {
-  title: 'Inputs/IncrementInput',
-  component: IncrementInput,
-};
-
-const Template: ComponentStory<typeof IncrementInput> = (args) => {
+const Story: FC<IIncrementInputProps> = (args) => {
   const [value, setValue] = useState<number>();
   return <IncrementInput {...args} value={value} onChange={(v) => setValue(v)} />;
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  min: 0,
-  max: 99,
-  step: 1,
-  intPartPrecision: 10,
-  label: 'Label',
-  placeholder: 'Placeholder',
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/IncrementInput',
+  component: Story,
+  args: {
+    min: 0,
+    max: 99,
+    step: 1,
+    intPartPrecision: 10,
+    label: 'Label',
+    placeholder: 'Placeholder',
+    isInvalid: false,
+    errorMessage: 'Error Text',
+    isDisabled: false,
+    isRequired: false,
+    isReadonly: false,
+    endIcon: 'information',
+    isClearable: true,
+  },
 };
+
+export default meta;
+export const Default = {};

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/Input.stories.tsx

@@ -1,83 +1,53 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { iconsList } from '../Icon';
+import { FC, useState } from 'react';
+import { type Meta } from '@storybook/react';
+import { GROUP_PLACEMENTS } from '../ControlWrapper';
+import { iconsMap } from '../Icon';
 import { IInputProps, Input } from './Input';
 
 const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
-const groupPositions = [
-  undefined,
-  'top',
-  'bottom',
-  'top-left',
-  'top-right',
-  'bottom-left',
-  'bottom-right',
-  'left',
-  'right',
-  'middle',
-];
+
 const masks = [undefined, '99/99', 'aaa-aaa', '***+***'];
-const icons = [undefined, ...Object.keys(iconsList)];
 
-export default {
-  title: 'Inputs/Input',
-  component: Input,
-  argTypes: {
-    type: { control: 'radio', options: types },
-    icon: { control: 'select', options: icons },
-    mask: { control: 'select', options: masks },
-    groupPositions: { control: 'select', options: groupPositions },
-  },
-};
+const icons = [undefined, ...Object.keys(iconsMap)];
 
-const Template: ComponentStory<typeof Input> = (args) => {
+const Story: FC<IInputProps> = (args) => {
   const [value, setValue] = useState('');
-
   return (
     <div style={{ width: 300 }}>
-      <Input
-        {...args}
-        value={value}
-        onChange={setValue}
-        onIconClick={() => console.log('icon click')}
-      />
+      <Input {...args} value={value} onChange={setValue} />
     </div>
   );
 };
 
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  infoMessage: 'Message Info',
-  type: 'text',
-  isInvalid: false,
-  units: '',
-  errorMessage: 'Error Text',
-  isActive: false,
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
-  isClearable: false,
-  isLoading: false,
-  isAutoSized: false,
-  shouldAlwaysShowPlaceholder: false,
-  groupPlacement: undefined,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'testId',
-      'data',
-      'tabIndex',
-      'onChange',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onKeyDown',
-      'onIconClick',
-    ],
+const meta: Meta<typeof Story> = {
+  title: 'Inputs/Input',
+  component: Story,
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    infoMessage: 'Message Info',
+    type: 'text',
+    isInvalid: false,
+    units: '',
+    errorMessage: 'Error Text',
+    isActive: false,
+    isDisabled: false,
+    isRequired: false,
+    isReadonly: false,
+    isClearable: false,
+    isLoading: false,
+    isAutoSized: false,
+    shouldAlwaysShowPlaceholder: false,
+    groupPlacement: undefined,
+  },
+  argTypes: {
+    type: { control: 'radio', options: types },
+    endIcon: { control: 'select', options: icons },
+    startIcon: { control: 'select', options: icons },
+    mask: { control: 'select', options: masks },
+    groupPlacement: { options: [undefined, ...GROUP_PLACEMENTS], control: 'select' },
   },
 };
+
+export default meta;
+export const Default = {};

package/src/components/Input/Input.styles.ts

@@ -43,12 +43,15 @@ export const useStyles = createThemedStyles('Input', {
       },
   },
 
+  defaultWrapper: {
+    display: 'flex',
+    flexGrow: 1,
+  },
+
   autoSizeWrapper: {
     position: 'relative',
-    display: 'flex',
     minWidth: 0,
     zIndex: 0,
-    flexGrow: 1,
   },
 
   autoSized: {

package/src/components/Input/Input.tsx

@@ -4,31 +4,34 @@ import { useTweakStyles } from '../../hooks';
 import { IWithMessagesProps, WithMessages } from '../WithMessages';
 import { IInputBaseProps, InputBase } from './InputBase';
 
-export type IInputProps = IInputBaseProps &
-  Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>;
+export interface IInputProps
+  extends IInputBaseProps,
+    Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {}
 
-export const Input = forwardRef<HTMLInputElement, IInputProps>(
-  ({ infoMessage, errorMessage, isInvalid, testId, tweakStyles, ...inputProps }, ref) => {
-    const tweakWithMessagesStyles = useTweakStyles({
-      tweakStyles,
-      className: 'tweakWithMessages',
-    });
+export const Input = forwardRef<HTMLInputElement, IInputProps>(function Input(
+  { infoMessage, errorMessage, isInvalid, testId, tweakStyles, ...inputProps },
+  ref,
+) {
+  const tweakWithMessagesStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakWithMessages',
+    currentComponentName: 'Input',
+  });
 
-    return (
-      <WithMessages
-        errorMessage={errorMessage}
-        infoMessage={infoMessage}
-        testId={getTestId(testId, 'wrapper')}
-        tweakStyles={tweakWithMessagesStyles}
-      >
-        <InputBase
-          {...inputProps}
-          ref={ref}
-          testId={testId}
-          tweakStyles={tweakStyles}
-          isInvalid={isInvalid}
-        />
-      </WithMessages>
-    );
-  },
-);
+  return (
+    <WithMessages
+      errorMessage={errorMessage}
+      infoMessage={infoMessage}
+      testId={getTestId(testId, 'wrapper')}
+      tweakStyles={tweakWithMessagesStyles}
+    >
+      <InputBase
+        {...inputProps}
+        ref={ref}
+        testId={testId}
+        tweakStyles={tweakStyles}
+        isInvalid={isInvalid}
+      />
+    </WithMessages>
+  );
+});