@true-engineering/true-react-common-ui-kit 1.0.1

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

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

package/src/components/Icon/index.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +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>
+);

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

@@ -0,0 +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 | undefined>(undefined);
+  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

@@ -0,0 +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>;

package/src/components/IncrementInput/IncrementInput.tsx

@@ -0,0 +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>
+  );
+};

package/src/components/IncrementInput/index.ts

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

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

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+
+import { Input, IInputProps } from './Input';
+import { icons } from '../Icon/icons';
+
+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(icons)];
+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',
+  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',
+    ],
+  },
+};

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

@@ -0,0 +1,305 @@
+import { dimensions } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+const PADDING_X = 12;
+export const AUTOSIZE_MAX_WIDTH = 480;
+
+export const styles = {
+  root: {
+    width: '100%',
+    boxSizing: 'border-box',
+    position: 'relative',
+  },
+
+  inputWrapper: {
+    display: 'flex',
+    width: '100%',
+    height: dimensions.CONTROL_HEIGHT,
+    boxSizing: 'border-box',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'border-color',
+    backgroundColor: 'white',
+    position: 'relative',
+  },
+
+  inputContent: {
+    fontSize: 16,
+    fontFamily: 'inherit',
+    padding: [0, PADDING_X],
+  },
+
+  input: {
+    extend: 'inputContent',
+    width: '100%',
+    height: '100%',
+    outline: 'none',
+    boxSizing: 'border-box',
+    outlineStyle: 'none',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'background-color',
+    border: 'none',
+    background: 'none',
+
+    '&::placeholder': {
+      opacity: 1,
+    },
+
+    MozAppearance: 'textfield',
+    '&::-webkit-inner-spin-button,&::-webkit-outer-spin-button': {
+      WebkitAppearance: 'none',
+      margin: 0,
+    },
+  },
+
+  autosize: {
+    display: 'inline-grid',
+    verticalAlign: 'top',
+    alignItems: 'center',
+    justifyContent: 'start',
+
+    '&::after, input': {
+      width: 'auto',
+      minWidth: '1em',
+      gridArea: '1 / 2',
+      font: 'inherit',
+      justifySelf: 'stretch',
+    },
+
+    '&::after': {
+      maxWidth: AUTOSIZE_MAX_WIDTH,
+      content: 'attr(data-value) " "',
+      visibility: 'hidden',
+      whiteSpace: 'pre-wrap',
+    },
+  },
+
+  focused: {
+    position: 'relative',
+    zIndex: 1,
+  },
+
+  unitsWrapper: {
+    extend: 'inputContent',
+
+    position: 'absolute',
+    left: 0,
+    height: '100%',
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    pointerEvents: 'none',
+  },
+
+  fakeValue: {
+    visibility: 'hidden',
+  },
+
+  units: {
+    paddingLeft: 4,
+  },
+
+  withFloatingLabel: {
+    paddingTop: 18,
+  },
+
+  floatingLabelWithoutPadding: {
+    paddingTop: 18,
+    paddingLeft: 0,
+  },
+
+  floating: {},
+
+  activeLabel: {
+    display: 'none',
+
+    '&$floating': {
+      display: 'block',
+      transform: 'scale(0.75) translateY(-120%)',
+    },
+  },
+
+  required: {
+    '&:before': {
+      content: '""',
+      position: 'absolute',
+      left: -12,
+      top: '50%',
+      transform: 'translate(0, -50%)',
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+    },
+  },
+
+  label: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    left: PADDING_X,
+    top: '50%',
+    transformOrigin: 'top left',
+    transform: 'translateY(-50%)',
+    transition: '0.25s ease-in-out',
+    transitionProperty: 'transform, color',
+    fontSize: 16,
+  },
+
+  floatingWithoutPadding: {
+    left: 0,
+  },
+
+  requiredLabel: {
+    '&:after': {
+      content: '""',
+      position: 'absolute',
+      right: -8,
+      top: 4,
+      transform: 'translate(0, -50%)',
+      width: 6,
+      height: 6,
+      borderRadius: '50%',
+    },
+  },
+
+  activeIcon: {
+    cursor: 'pointer',
+  },
+
+  'border-top': {
+    borderRadius: 0,
+    borderWidth: [1, 0, 0, 0],
+  },
+
+  'border-bottom': {
+    borderRadius: 0,
+    borderWidth: [0, 0, 1, 0],
+  },
+
+  'border-left': {
+    borderRadius: 0,
+    borderWidth: [0, 0, 0, 1],
+  },
+
+  'border-right': {
+    borderRadius: 0,
+    borderWidth: [0, 1, 0, 0],
+  },
+
+  top: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  bottom: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+  },
+
+  'top-left': {
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  'top-right': {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  'bottom-left': {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  'bottom-right': {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  left: {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  },
+
+  right: {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+  },
+
+  middle: {
+    borderRadius: 0,
+  },
+
+  controls: {
+    display: 'flex',
+    gridArea: '1 / 3',
+  },
+
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: [0, 4],
+    width: 20,
+    transition: 'color 0.25s ease-in-out',
+    boxSizing: 'content-box',
+
+    '&:last-child': {
+      paddingRight: 8,
+    },
+
+    '& + $units': {
+      marginLeft: 4,
+    },
+  },
+
+  clearIcon: {
+    extend: 'icon',
+  },
+
+  inputIcon: {
+    extend: 'icon',
+  },
+
+  withIcons: {
+    paddingRight: 4,
+  },
+
+  withControls: {},
+
+  invalid: {},
+
+  disabled: {},
+
+  invalidLabel: {},
+
+  error: {
+    fontSize: 12,
+  },
+
+  info: {
+    fontSize: 12,
+    paddingTop: 4,
+    paddingLeft: 13,
+  },
+
+  'error-top': {
+    position: 'absolute',
+    top: -18,
+    left: -1,
+    padding: [4, 8],
+    zIndex: 1,
+  },
+
+  'error-bottom': {
+    paddingTop: 4,
+    paddingLeft: 13,
+  },
+
+  loading: {},
+
+  tweakPreloader: {},
+};
+
+export type InputStyles = ComponentStyles<typeof styles>;