@true-engineering/true-react-common-ui-kit 1.12.1 → 2.0.0

package/src/components/Icon/icons/index.ts

@@ -1 +1 @@
-export * from './icons';
+export * from './icons';

package/src/components/Icon/index.ts

@@ -1,4 +1,4 @@
-export * from './Icon';
-export type { IconStyles } from './Icon.styles';
-export type { ISvgIcon, ICommonIcon } from './icons';
-export type { IComplexIcon } from './complexIcons';
+export * from './Icon';
+export type { IconStyles } from './Icon.styles';
+export type { ISvgIcon, ICommonIcon } from './icons';
+export type { IComplexIcon } from './complexIcons';

package/src/components/IncrementInput/ChangeButton.tsx

@@ -1,34 +1,34 @@
-import { FC } from 'react';
-import { Classes } from 'jss';
-import clsx from 'clsx';
-
-import { Icon } from '../Icon';
-
-interface IChangeButtonProps {
-  type: 'plus' | 'minus';
-  isButtonDisabled: boolean;
-  isInvalid?: boolean;
-  classes: Classes<'button' | 'disabledButton' | 'errorButton'>;
-  onClick: () => void;
-}
-
-export const ChangeButton: FC<IChangeButtonProps> = ({
-  type,
-  isButtonDisabled,
-  isInvalid,
-  onClick,
-  classes,
-}) => (
-  <button
-    className={clsx(
-      classes.button,
-      isButtonDisabled && classes.disabledButton,
-      isInvalid && classes.errorButton,
-    )}
-    disabled={isButtonDisabled}
-    onClick={onClick}
-    type="button"
-  >
-    <Icon type={type} />
-  </button>
-);
+import { FC } from 'react';
+import { Classes } from 'jss';
+import clsx from 'clsx';
+
+import { Icon } from '../Icon';
+
+interface IChangeButtonProps {
+  type: 'plus' | 'minus';
+  isButtonDisabled: boolean;
+  isInvalid?: boolean;
+  classes: Classes<'button' | 'disabledButton' | 'errorButton'>;
+  onClick: () => void;
+}
+
+export const ChangeButton: FC<IChangeButtonProps> = ({
+  type,
+  isButtonDisabled,
+  isInvalid,
+  onClick,
+  classes,
+}) => (
+  <button
+    className={clsx(
+      classes.button,
+      isButtonDisabled && classes.disabledButton,
+      isInvalid && classes.errorButton,
+    )}
+    disabled={isButtonDisabled}
+    onClick={onClick}
+    type="button"
+  >
+    <Icon type={type} />
+  </button>
+);

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

@@ -1,34 +1,34 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-
-import { IncrementInput } from './IncrementInput';
-
-export default {
-  title: 'Inputs/IncrementInput',
-  component: IncrementInput,
-};
-
-const Template: ComponentStory<typeof IncrementInput> = (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',
-  hasFloatingLabel: true,
-  hasRequiredLabel: true,
-  isInvalid: false,
-  errorMessage: 'Error Text',
-  isDisabled: false,
-  isRequired: false,
-  isReadonly: false,
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+
+import { IncrementInput } from './IncrementInput';
+
+export default {
+  title: 'Inputs/IncrementInput',
+  component: IncrementInput,
+};
+
+const Template: ComponentStory<typeof IncrementInput> = (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',
+  hasFloatingLabel: true,
+  hasRequiredLabel: true,
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  isDisabled: false,
+  isRequired: false,
+  isReadonly: false,
+};

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

@@ -1,77 +1,77 @@
-import { colors, dimensions } from '../../theme';
-import { ComponentStyles } from '../../types';
-
-export const BUTTONS_WIDTH = 36;
-export const BUTTONS_GAP = 2;
-
-export const styles = {
-  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: 'background-color 0.25s ease-in-out',
-    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: {},
-
-  tweakInput: {
-    input: {
-      '&:not($withControls)': {
-        paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
-      },
-    },
-
-    controls: {
-      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
-    },
-  },
-};
-
-export type IncrementInputStyles = ComponentStyles<typeof styles>;
+import { colors, dimensions } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+export const BUTTONS_WIDTH = 36;
+export const BUTTONS_GAP = 2;
+
+export const styles = {
+  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: 'background-color 0.25s ease-in-out',
+    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: {},
+
+  tweakInput: {
+    input: {
+      '&:not($withControls)': {
+        paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
+      },
+    },
+
+    controls: {
+      paddingRight: BUTTONS_WIDTH + BUTTONS_GAP,
+    },
+  },
+};
+
+export type IncrementInputStyles = ComponentStyles<typeof styles>;

package/src/components/IncrementInput/IncrementInput.tsx

@@ -1,95 +1,95 @@
-import { FC } from 'react';
-
-import { useTheme, useTweakStyles } from '../../hooks';
-import {
-  addDataAttributes,
-  getNumberInRange,
-  getNumberLength,
-  isInt,
-} from '../../helpers';
-import { INumberInputProps, NumberInput } from '../NumberInput';
-import { ChangeButton } from './ChangeButton';
-
-import { IncrementInputStyles, styles } from './IncrementInput.styles';
-
-export interface IIncrementInputProps
-  extends Omit<INumberInputProps, 'canBeFloat' | 'precision'> {
-  tweakStyles?: IncrementInputStyles;
-  step?: number;
-}
-
-export const IncrementInput: FC<IIncrementInputProps> = ({
-  value,
-  onChange,
-  min,
-  max,
-  step = 1,
-  intPartPrecision,
-  data,
-  tweakStyles,
-  ...props
-}) => {
-  if (!isInt(step)) {
-    console.error('Параметр step должен быть целым числом');
-  }
-
-  const { classes, componentStyles } = useTheme(
-    'IncrementInput',
-    styles,
-    tweakStyles,
-  );
-
-  const increment = (): void => {
-    onChange(getNumberInRange((value ?? 0) + step, min, max));
-  };
-
-  const decrement = (): void => {
-    onChange(getNumberInRange((value ?? 0) - step, min, max));
-  };
-
-  const tweakInputStyles = useTweakStyles(
-    componentStyles,
-    tweakStyles,
-    'tweakInput',
-  );
-
-  return (
-    <div className={classes.root} {...addDataAttributes(data)}>
-      <NumberInput
-        {...props}
-        min={min}
-        max={max}
-        intPartPrecision={intPartPrecision}
-        onChange={onChange}
-        value={value}
-        tweakStyles={tweakInputStyles}
-      />
-      <div className={classes.buttons}>
-        <ChangeButton
-          type="plus"
-          isButtonDisabled={
-            props.isDisabled ||
-            props.isReadonly ||
-            (intPartPrecision !== undefined &&
-              getNumberLength((value ?? 0) + step) > intPartPrecision) ||
-            (max !== undefined && value !== undefined && value >= max)
-          }
-          isInvalid={props.isInvalid}
-          onClick={increment}
-          classes={classes}
-        />
-        <ChangeButton
-          type="minus"
-          isButtonDisabled={
-            props.isDisabled ||
-            props.isReadonly ||
-            (min !== undefined && value !== undefined ? value <= min : false)
-          }
-          isInvalid={props.isInvalid}
-          onClick={decrement}
-          classes={classes}
-        />
-      </div>
-    </div>
-  );
-};
+import { FC } from 'react';
+
+import { useTheme, useTweakStyles } from '../../hooks';
+import {
+  addDataAttributes,
+  getNumberInRange,
+  getNumberLength,
+  isInt,
+} from '../../helpers';
+import { INumberInputProps, NumberInput } from '../NumberInput';
+import { ChangeButton } from './ChangeButton';
+
+import { IncrementInputStyles, styles } from './IncrementInput.styles';
+
+export interface IIncrementInputProps
+  extends Omit<INumberInputProps, 'canBeFloat' | 'precision'> {
+  tweakStyles?: IncrementInputStyles;
+  step?: number;
+}
+
+export const IncrementInput: FC<IIncrementInputProps> = ({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  intPartPrecision,
+  data,
+  tweakStyles,
+  ...props
+}) => {
+  if (!isInt(step)) {
+    console.error('Параметр step должен быть целым числом');
+  }
+
+  const { classes, componentStyles } = useTheme(
+    'IncrementInput',
+    styles,
+    tweakStyles,
+  );
+
+  const increment = (): void => {
+    onChange(getNumberInRange((value ?? 0) + step, min, max));
+  };
+
+  const decrement = (): void => {
+    onChange(getNumberInRange((value ?? 0) - step, min, max));
+  };
+
+  const tweakInputStyles = useTweakStyles(
+    componentStyles,
+    tweakStyles,
+    'tweakInput',
+  );
+
+  return (
+    <div className={classes.root} {...addDataAttributes(data)}>
+      <NumberInput
+        {...props}
+        min={min}
+        max={max}
+        intPartPrecision={intPartPrecision}
+        onChange={onChange}
+        value={value}
+        tweakStyles={tweakInputStyles}
+      />
+      <div className={classes.buttons}>
+        <ChangeButton
+          type="plus"
+          isButtonDisabled={
+            props.isDisabled ||
+            props.isReadonly ||
+            (intPartPrecision !== undefined &&
+              getNumberLength((value ?? 0) + step) > intPartPrecision) ||
+            (max !== undefined && value !== undefined && value >= max)
+          }
+          isInvalid={props.isInvalid}
+          onClick={increment}
+          classes={classes}
+        />
+        <ChangeButton
+          type="minus"
+          isButtonDisabled={
+            props.isDisabled ||
+            props.isReadonly ||
+            (min !== undefined && value !== undefined ? value <= min : false)
+          }
+          isInvalid={props.isInvalid}
+          onClick={decrement}
+          classes={classes}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/IncrementInput/index.ts

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