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

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

@@ -1,78 +1,78 @@
-import { colors, dimensions, ITweakStyles, createThemedStyles, animations } 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',
-  },
-
-  buttons: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: BUTTONS_WIDTH,
-    position: 'absolute',
-    right: BUTTONS_GAP,
-    top: BUTTONS_GAP,
-    bottom: BUTTONS_GAP,
-    zIndex: 1,
-  },
-
-  button: {
-    width: '100%',
-    height: (dimensions.CONTROL_HEIGHT - 5) / 2,
-    border: 'none',
-    outline: 'none',
-    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],
-
-    '&:hover, &:focus': {
-      backgroundColor: colors.GREY_HOVER,
-    },
-
-    '&:active': {
-      backgroundColor: colors.GREY_ACTIVE,
-    },
-
-    '&:first-child': {
-      marginBottom: 1,
-    },
-  },
-
-  disabledButton: {
-    backgroundColor: colors.CLASSIC_WHITE,
-    color: colors.FONT_DISABLED,
-    cursor: 'default',
-
-    '&:hover': {
-      backgroundColor: colors.CLASSIC_WHITE,
-    },
-  },
-
-  errorButton: {},
-});
-
-export const inputStyles: IInputStyles = {
-  input: {
-    '&:not($withControls)': {
-      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
-    },
-  },
-
-  controls: {
-    paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
-  },
-};
-
-export type IIncrementInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;
+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',
+  },
+
+  buttons: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: BUTTONS_WIDTH,
+    position: 'absolute',
+    right: BUTTONS_GAP,
+    top: BUTTONS_GAP,
+    bottom: BUTTONS_GAP,
+    zIndex: dimensions.Z_INDEX.CONTROL_FOCUS + 1,
+  },
+
+  button: {
+    width: '100%',
+    height: (dimensions.CONTROL.HEIGHT - 5) / 2,
+    border: 'none',
+    outline: 'none',
+    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],
+
+    '&:hover, &:focus': {
+      backgroundColor: colors.GREY_HOVER,
+    },
+
+    '&:active': {
+      backgroundColor: colors.GREY_ACTIVE,
+    },
+
+    '&:first-child': {
+      marginBottom: 1,
+    },
+  },
+
+  disabledButton: {
+    backgroundColor: colors.CLASSIC_WHITE,
+    color: colors.FONT_DISABLED,
+    cursor: 'default',
+
+    '&:hover': {
+      backgroundColor: colors.CLASSIC_WHITE,
+    },
+  },
+
+  errorButton: {},
+});
+
+export const inputStyles: IInputStyles = {
+  input: {
+    paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
+  },
+
+  tweakControlWrapper: {
+    controls: {
+      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
+    },
+  }
+};
+
+export type IIncrementInputStyles = ITweakStyles<typeof useStyles, { tweakInput: IInputStyles }>;

package/src/components/IncrementInput/IncrementInput.tsx

@@ -1,105 +1,105 @@
-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 { useTweakStyles } from '../../hooks';
-import { ICommonProps } from '../../types';
-import { Icon } from '../Icon';
-import { INumberInputProps, NumberInput } from '../NumberInput';
-import { useStyles, IIncrementInputStyles, inputStyles } from './IncrementInput.styles';
-
-export interface IIncrementInputProps
-  extends Omit<INumberInputProps, 'canBeFloat' | 'precision' | 'tweakStyles'>,
-    ICommonProps<IIncrementInputStyles> {
-  /** @default 1 */
-  step?: number;
-}
-
-export const IncrementInput: FC<IIncrementInputProps> = ({
-  value,
-  onChange,
-  min,
-  max,
-  step = 1,
-  intPartPrecision,
-  data,
-  testId,
-  tweakStyles,
-  isDisabled,
-  isReadonly,
-  isInvalid,
-  ...props
-}) => {
-  const tweakInputStyles = useTweakStyles({
-    innerStyles: inputStyles,
-    tweakStyles,
-    className: 'tweakInput',
-    currentComponentName: 'IncrementInput',
-  });
-
-  const classes = useStyles({ theme: tweakStyles });
-
-  const isIncreaseDisabled =
-    isDisabled ||
-    isReadonly ||
-    (intPartPrecision !== undefined && getNumberLength((value ?? 0) + step) > intPartPrecision) ||
-    (max !== undefined && value !== undefined && value >= max);
-
-  const isDecreaseDisabled =
-    isDisabled || isReadonly || (min !== undefined && value !== undefined ? value <= min : false);
-
-  const increment = (): void => {
-    onChange(getNumberInRange((value ?? 0) + step, min, max));
-  };
-
-  const decrement = (): void => {
-    onChange(getNumberInRange((value ?? 0) - step, min, max));
-  };
-
-  useEffect(() => {
-    if (!isNumberInteger(step)) {
-      console.error('Параметр step должен быть целым числом');
-    }
-  }, [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}
-      />
-      <div className={classes.buttons}>
-        <button
-          className={clsx(classes.button, {
-            [classes.disabledButton]: isIncreaseDisabled,
-            [classes.errorButton]: isInvalid,
-          })}
-          type="button"
-          disabled={isIncreaseDisabled}
-          onClick={increment}
-        >
-          <Icon type="plus" />
-        </button>
-        <button
-          className={clsx(classes.button, {
-            [classes.disabledButton]: isDecreaseDisabled,
-            [classes.errorButton]: isInvalid,
-          })}
-          type="button"
-          disabled={isDecreaseDisabled}
-          onClick={decrement}
-        >
-          <Icon type="minus" />
-        </button>
-      </div>
-    </div>
-  );
-};
+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 { useTweakStyles } from '../../hooks';
+import { ICommonProps } from '../../types';
+import { Icon } from '../Icon';
+import { INumberInputProps, NumberInput } from '../NumberInput';
+import { useStyles, IIncrementInputStyles, inputStyles } from './IncrementInput.styles';
+
+export interface IIncrementInputProps
+  extends Omit<INumberInputProps, 'canBeFloat' | 'precision' | 'tweakStyles'>,
+    ICommonProps<IIncrementInputStyles> {
+  /** @default 1 */
+  step?: number;
+}
+
+export const IncrementInput: FC<IIncrementInputProps> = ({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  intPartPrecision,
+  data,
+  testId,
+  tweakStyles,
+  isDisabled,
+  isReadonly,
+  isInvalid,
+  ...props
+}) => {
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'IncrementInput',
+  });
+
+  const classes = useStyles({ theme: tweakStyles });
+
+  const isIncreaseDisabled =
+    isDisabled ||
+    isReadonly ||
+    (intPartPrecision !== undefined && getNumberLength((value ?? 0) + step) > intPartPrecision) ||
+    (max !== undefined && value !== undefined && value >= max);
+
+  const isDecreaseDisabled =
+    isDisabled || isReadonly || (min !== undefined && value !== undefined ? value <= min : false);
+
+  const increment = (): void => {
+    onChange(getNumberInRange((value ?? 0) + step, min, max));
+  };
+
+  const decrement = (): void => {
+    onChange(getNumberInRange((value ?? 0) - step, min, max));
+  };
+
+  useEffect(() => {
+    if (!isNumberInteger(step)) {
+      console.error('Параметр step должен быть целым числом');
+    }
+  }, [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}
+      />
+      <div className={classes.buttons}>
+        <button
+          className={clsx(classes.button, {
+            [classes.disabledButton]: isIncreaseDisabled,
+            [classes.errorButton]: isInvalid,
+          })}
+          type="button"
+          disabled={isIncreaseDisabled}
+          onClick={increment}
+        >
+          <Icon type="plus" />
+        </button>
+        <button
+          className={clsx(classes.button, {
+            [classes.disabledButton]: isDecreaseDisabled,
+            [classes.errorButton]: isInvalid,
+          })}
+          type="button"
+          disabled={isDecreaseDisabled}
+          onClick={decrement}
+        >
+          <Icon type="minus" />
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/IncrementInput/index.ts

@@ -1,2 +1,2 @@
-export * from './IncrementInput';
-export type { IIncrementInputStyles } from './IncrementInput.styles';
+export * from './IncrementInput';
+export type { IIncrementInputStyles } from './IncrementInput.styles';

package/src/components/Input/Input.stories.tsx

@@ -1,91 +1,83 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { iconsList } from '../Icon';
-import { Input, IInputProps } from './Input';
-
-const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
-const inlineStyles = [
-  undefined,
-  'top',
-  'bottom',
-  'top-left',
-  'top-right',
-  'bottom-left',
-  'bottom-right',
-  'left',
-  'right',
-  'middle',
-];
-const masks = [undefined, '99/99', 'aaa-aaa', '***+***'];
-const iconTypes = [undefined, ...Object.keys(iconsList)];
-const borders = [undefined, 'left', 'top', 'right', 'bottom'];
-const errorPositions = ['bottom', 'top'];
-
-export default {
-  title: 'Inputs/Input',
-  component: Input,
-  argTypes: {
-    type: { control: 'radio', options: types },
-    border: { control: 'radio', options: borders },
-    iconType: { control: 'select', options: iconTypes },
-    errorPosition: { control: 'inline-radio', options: errorPositions },
-    mask: { control: 'select', options: masks },
-    inlineStyles: { control: 'select', options: inlineStyles },
-  },
-};
-
-const Template: ComponentStory<typeof Input> = (args) => {
-  const [value, setValue] = useState('');
-
-  return (
-    <Input
-      {...args}
-      value={value}
-      onChange={(v) => setValue(v)}
-      onIconClick={() => console.log('icon click')}
-    />
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  infoMessage: 'Message Info',
-  units: 'RUB',
-  type: 'text',
-  border: undefined,
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  errorPosition: 'bottom',
-  isAutoSizeable: false,
-  shouldFocusOnMount: false,
-  shouldAlwaysShowPlaceholder: false,
-  isActive: false,
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
-  isClearable: false,
-  isLoading: false,
-  inlineStyle: undefined,
-};
-
-Default.parameters = {
-  controls: {
-    exclude: [
-      'testId',
-      'data',
-      'tabIndex',
-      'onChange',
-      'onFocus',
-      'onBlur',
-      'onPaste',
-      'onKeyDown',
-      'onIconClick',
-      'tweakStyles',
-    ],
-  },
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { iconsList } 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 Template: ComponentStory<typeof Input> = (args) => {
+  const [value, setValue] = useState('');
+
+  return (
+    <div style={{ width: 300 }}>
+      <Input
+        {...args}
+        value={value}
+        onChange={setValue}
+        onIconClick={() => console.log('icon click')}
+      />
+    </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',
+    ],
+  },
+};