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

package/src/components/Notification/Notification.tsx

@@ -0,0 +1,84 @@
+import { FC, ReactNode } from 'react';
+import clsx from 'clsx';
+import { Icon } from '../Icon';
+import { useTheme } from '../../hooks';
+import { addDataAttributes, addDataTestId, isNotEmpty } from '../../helpers';
+import { ICommonProps } from '../../types';
+
+import { NotificationStyles, styles } from './Notification.styles';
+
+export type NotificationType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
+
+export interface INotificationProps extends ICommonProps {
+  tweakStyles?: NotificationStyles;
+  type: NotificationType;
+  /**
+   * @default true
+   */
+  isFullWidth?: boolean;
+  text?: string;
+  title?: string;
+  /**
+   * @default `s`
+   */
+  size?: 's' | 'm' | 'l';
+  testId?: string;
+  children?: ReactNode;
+}
+
+export const Notification: FC<INotificationProps> = ({
+  children,
+  type,
+  isFullWidth = true,
+  text,
+  title,
+  testId,
+  size = 's',
+  data,
+  tweakStyles,
+}) => {
+  const { classes } = useTheme('Notification', styles, tweakStyles, { type });
+
+  const hasText = isNotEmpty(text);
+  const hasTitle = isNotEmpty(title);
+  const hasTestId = isNotEmpty(testId);
+
+  return (
+    <div
+      className={clsx(classes.root, classes[size], {
+        [classes.inline]: !isFullWidth,
+        [classes.withTitle]: hasTitle,
+        [classes.withText]: hasText,
+      })}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
+    >
+      <div className={classes.icon}>
+        <Icon type={`status-${type}`} />
+      </div>
+      <div className={classes.body}>
+        {hasTitle && (
+          <span
+            className={classes.title}
+            data-testid={hasTestId ? `${testId}-title` : undefined}
+          >
+            {title}
+          </span>
+        )}
+        {hasText && (
+          <span
+            className={classes.text}
+            data-testid={hasTestId ? `${testId}-text` : undefined}
+          >
+            {text}
+          </span>
+        )}
+        {isNotEmpty(children) && (
+          <div className={classes.content}>{children}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Notification;

package/src/components/Notification/index.ts

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

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+
+import { NumberInput } from './NumberInput';
+
+export default {
+  title: 'Inputs/NumberInput',
+  component: NumberInput,
+};
+
+const Template: ComponentStory<typeof NumberInput> = (args) => {
+  const [value, setValue] = useState<number | undefined>(undefined);
+  return <NumberInput {...args} value={value} onChange={(v) => setValue(v)} />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  min: 0,
+  max: 9999,
+  precision: 3,
+  intPartPrecision: 7,
+  canBeFloat: false,
+  label: 'Label',
+  placeholder: 'Placeholder',
+  infoMessage: 'Message Info',
+  units: 'RUB',
+  hasFloatingLabel: true,
+  hasRequiredLabel: true,
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  isDisabled: false,
+  isRequired: false,
+  isReadonly: false,
+};

package/src/components/NumberInput/NumberInput.tsx

@@ -0,0 +1,142 @@
+import React, { forwardRef, useState } from 'react';
+
+import {
+  formatNumber,
+  formatStringNumber,
+  getNumberInRange,
+  isNotEmpty,
+  removeStringFormat,
+  setCaretPosition,
+  stringToNumber,
+} from '../../helpers';
+import { Input, IInputProps } from '../Input';
+import { formatNumberWithDefault, getNewCaretPosition } from './helpers';
+import { useDidMountEffect } from '../../hooks';
+
+export interface INumberInputProps
+  extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
+  value?: number;
+  canBeFloat?: boolean;
+  precision?: number;
+  intPartPrecision?: number;
+  defaultValue?: number;
+  // canBeNegative....TODO
+  min?: number;
+  max?: number;
+  onChange: (
+    value: number | undefined,
+    event?: React.FormEvent<HTMLInputElement>,
+  ) => void;
+}
+
+export const NumberInput = forwardRef<HTMLInputElement, INumberInputProps>(
+  (
+    {
+      value,
+      canBeFloat = false,
+      defaultValue,
+      precision = 3,
+      intPartPrecision = 7,
+      // canBeNegative....TODO
+      onChange,
+      onBlur,
+      min,
+      max,
+      ...props
+    },
+    ref,
+  ) => {
+    const [showedValue, setShowedValue] = useState(() =>
+      formatNumberWithDefault(value, defaultValue),
+    );
+
+    // специальный костыль для обработки Delete - т.к. без него каретка будет работать неправильно при удалении пробелов
+    const [isDeleteForwardAction, setIsDeleteForwardAction] = useState(false);
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      setIsDeleteForwardAction(event.key === 'Delete');
+    };
+
+    const setShowedValueWithDefault = (v: string) => {
+      setShowedValue(isNotEmpty(v) ? v : formatNumber(defaultValue));
+    };
+
+    const handleChange = async (
+      inputValue: string,
+      event: React.FormEvent<HTMLInputElement>,
+    ): Promise<void> => {
+      const oldValue = showedValue;
+      const target = event.target as HTMLInputElement;
+      const defaultCaretPos = target.selectionStart ?? 0;
+      const numString = removeStringFormat(inputValue);
+
+      if (numString === '') {
+        onChange(undefined);
+        // не убирать - ломается каретка
+        setShowedValue('');
+        return;
+      }
+
+      const intRegexp = new RegExp(`^\\d{0,${intPartPrecision}}$`);
+      const floatRegexp = new RegExp(
+        `^\\d{0,${intPartPrecision}}(\\.\\d{0,${precision}})?$`,
+      );
+      const numberRegexp =
+        canBeFloat && precision > 0 ? floatRegexp : intRegexp;
+
+      if (!numString.match(numberRegexp)) {
+        await setShowedValue(oldValue);
+        setCaretPosition(target, defaultCaretPos - 1);
+        return;
+      }
+
+      const hasDot = canBeFloat && inputValue.match(/^[\d\s]*[.,]$/);
+      const formattedValue = formatStringNumber(numString);
+      const newValue = hasDot ? `${formattedValue}.` : formattedValue;
+      await setShowedValue(newValue);
+      setCaretPosition(
+        target,
+        getNewCaretPosition(
+          defaultCaretPos,
+          oldValue,
+          newValue,
+          isDeleteForwardAction,
+        ),
+      );
+    };
+
+    const handleBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
+      const val = event.currentTarget.value;
+      const num = stringToNumber(val);
+      const newValue =
+        num !== undefined ? getNumberInRange(num, min, max) : undefined;
+      if (newValue !== value) {
+        onChange(newValue);
+      } else {
+        setShowedValueWithDefault(formatNumber(value));
+      }
+      if (onBlur !== undefined) {
+        onBlur(event);
+      }
+    };
+
+    useDidMountEffect(() => {
+      if (value !== undefined) {
+        setShowedValueWithDefault(formatNumber(value));
+      } else {
+        setShowedValue(formatNumber(value));
+      }
+    }, [value]);
+
+    return (
+      <Input
+        value={showedValue}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/NumberInput/helpers.ts

@@ -0,0 +1,68 @@
+import { formatNumber, isNotEmpty, isSpaceChar } from '../../helpers';
+
+const getPrevSpaces = (val: string, position: number): number =>
+  val
+    .slice(0, position - 1)
+    .split('')
+    .filter(isSpaceChar).length;
+
+export const getNewCaretPosition = (
+  defaultPosition: number,
+  oldValue: string,
+  newValue: string,
+  isDeleteForwardAction?: boolean,
+): number => {
+  if (oldValue === newValue) {
+    return isDeleteForwardAction ? defaultPosition + 1 : defaultPosition;
+  }
+
+  const oldPrevSpaces = getPrevSpaces(oldValue, defaultPosition);
+  const newPrevSpaces = getPrevSpaces(newValue, defaultPosition);
+  const diff = newPrevSpaces - oldPrevSpaces;
+  const res = defaultPosition + diff;
+  if (res <= 0) {
+    return 0;
+  }
+  return res - (isSpaceChar(newValue[res - 1]) ? 1 : 0);
+};
+
+export const formatNumberWithDefault = (
+  value: number | undefined,
+  defaultValue?: number,
+): string => {
+  const val = formatNumber(value);
+  return isNotEmpty(val) ? val : formatNumber(defaultValue);
+};
+
+// const testNewCaretPosition = () => {
+//   console.log(getNewCaretPosition(1, '', '1') === 1);
+//   console.log(getNewCaretPosition(2, '1', '12') === 2);
+//   console.log(getNewCaretPosition(3, '12', '123') === 3);
+//   console.log(getNewCaretPosition(4, '123', '1 234') === 5);
+//   console.log(getNewCaretPosition(6, '1 234', '12 345') === 6);
+//   console.log(getNewCaretPosition(2, '1 234', '10 234') === 2);
+//   console.log(getNewCaretPosition(3, '1 234', '10 234') === 2);
+//   console.log(getNewCaretPosition(1, '1 234', '21 234') === 1);
+//   console.log(getNewCaretPosition(8, '123 456', '123 456.') === 8);
+//   console.log(getNewCaretPosition(8, '123 456', '1 234 567') === 9);
+//   console.log(getNewCaretPosition(5, '123 456', '1 230 456') === 5);
+//   console.log(getNewCaretPosition(4, '123 456', '1 230 456') === 5);
+//
+//   console.log(getNewCaretPosition(0, '1', '') === 0);
+//   console.log(getNewCaretPosition(1, '12', '1') === 1);
+//   console.log(getNewCaretPosition(2, '123', '12') === 2);
+//   console.log(getNewCaretPosition(4, '1 234', '123') === 3);
+//   console.log(getNewCaretPosition(5, '12 345', '1 234') === 5);
+//   console.log(getNewCaretPosition(1, '10 234', '1 234') === 1);
+//   console.log(getNewCaretPosition(2, '10 234', '10 234') === 2);
+//   console.log(getNewCaretPosition(0, '21 234', '1 234') === 0);
+//   console.log(getNewCaretPosition(7, '123 456.', '123 456') === 7);
+//   console.log(getNewCaretPosition(8, '1 234 567', '123 456') === 7);
+//   console.log(getNewCaretPosition(5, '1 230 456', '1 230 456') === 5);
+//   console.log(getNewCaretPosition(4, '1 230 456', '123 456') === 3);
+//
+//   console.log(getNewCaretPosition(5, '1 234 567', '123 467') === 5);
+//   console.log(getNewCaretPosition(5, '1 234 567', '1 234') === 5);
+// };
+//
+// testNewCaretPosition();

package/src/components/NumberInput/index.ts

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

package/src/components/PhoneInput/PhoneInput.stories.tsx

@@ -0,0 +1,71 @@
+import { ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+
+import { PhoneInput } from './PhoneInput';
+import { icons } from '../Icon/icons';
+import { phoneInfo } from './phone-info';
+import { IPhoneValue } from './types';
+
+const iconTypes = [undefined, ...Object.keys(icons)];
+const inlineStyles = [undefined, 'left', 'right', 'middle'];
+const borders = [undefined, 'left', 'top', 'right', 'bottom'];
+const errorPositions = ['bottom', 'top'];
+const countryCodes = phoneInfo.map((info) => info.countryCode);
+
+export default {
+  title: 'Inputs/PhoneInput',
+  component: PhoneInput,
+  argTypes: {
+    iconType: { control: 'select', options: iconTypes },
+    errorPosition: { control: 'inline-radio', options: errorPositions },
+    border: { control: 'inline-radio', options: borders },
+    inlineStyle: { control: 'select', options: inlineStyles },
+    defaultCountryCode: { control: 'select', options: countryCodes },
+  },
+};
+
+const Template: ComponentStory<typeof PhoneInput> = (args) => {
+  const [value, setValue] = useState<IPhoneValue>({
+    dialCode: '7',
+    phoneNumber: '1234567890',
+  });
+
+  return <PhoneInput {...args} value={value} onChange={setValue} />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Label',
+  infoMessage: 'Message Info',
+  border: undefined,
+  iconType: undefined,
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  errorPosition: 'bottom',
+  hasFloatingLabel: true,
+  hasRequiredLabel: true,
+  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/PhoneInput/PhoneInput.styles.ts

@@ -0,0 +1,84 @@
+import { colors, dimensions } from '../../theme';
+import { ComponentStyles } from '../../types';
+
+const COUNTRY_SELECT_WIDTH = 80;
+
+export const styles = {
+  root: {
+    width: '100%',
+    position: 'relative',
+    boxSizing: 'border-box',
+  },
+
+  countrySelectContainer: {
+    position: 'absolute',
+    left: 1,
+    top: 1,
+    width: COUNTRY_SELECT_WIDTH,
+    height: dimensions.CONTROL_HEIGHT - 2,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRight: ['solid', 1, colors.BORDER_MAIN],
+    transition: 'border-color 0.2s ease-in',
+    cursor: 'pointer',
+    zIndex: 2,
+  },
+
+  disabledCountrySelect: {
+    cursor: 'default',
+  },
+
+  flag: {
+    width: 22,
+    height: 16,
+  },
+
+  arrow: {
+    width: 20,
+    color: colors.GREY_ACTIVE,
+    marginLeft: 8,
+    transition: 'transform .2s ease',
+  },
+
+  up: {
+    transform: 'rotate(180deg)',
+  },
+
+  invalidArrow: {
+    color: colors.RED_WARNING,
+  },
+
+  focusedBorder: {},
+
+  invalidBorder: {
+    borderColor: colors.RED_WARNING,
+  },
+
+  inputContainer: {
+    position: 'relative',
+    flex: 1,
+  },
+
+  flagListContainer: {
+    position: 'absolute',
+    width: '100%',
+    top: dimensions.CONTROL_HEIGHT + 6,
+    left: -1,
+    zIndex: 3,
+  },
+
+  tweakInput: {
+    inputWrapper: {
+      paddingLeft: COUNTRY_SELECT_WIDTH,
+    },
+
+    label: {
+      marginLeft: COUNTRY_SELECT_WIDTH,
+    },
+  },
+
+  tweakCountryList: {},
+};
+
+export type PhoneInputStyles = ComponentStyles<typeof styles>;