@true-engineering/true-react-common-ui-kit 3.19.0 → 3.20.1

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

@@ -1,35 +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>();
-  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,
-  canBeNegative: 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,
-};
+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>();
+  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,
+  canBeNegative: 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/helpers.ts

@@ -1,86 +1,86 @@
-import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { formatNumber, isSpaceChar } from '../../helpers';
-import type { INumberInputProps } from './NumberInput';
-
-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 isStringNotEmpty(val) ? val : formatNumber(defaultValue);
-};
-
-export const constructRegExp = ({
-  canBeFloat,
-  canBeNegative,
-  intPartPrecision,
-  precision,
-}: Pick<
-  INumberInputProps,
-  'canBeFloat' | 'canBeNegative' | 'intPartPrecision' | 'precision'
->): string => {
-  const basePart = `\\d{0,${intPartPrecision}}`;
-  const floatPart = `(\\.\\d{0,${precision}})?`;
-  const negativePart = '(\\-)?';
-
-  return `^${canBeNegative ? negativePart : ''}${basePart}${canBeFloat ? floatPart : ''}$`;
-};
-
-// 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();
+import { isStringNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import { formatNumber, isSpaceChar } from '../../helpers';
+import type { INumberInputProps } from './NumberInput';
+
+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 isStringNotEmpty(val) ? val : formatNumber(defaultValue);
+};
+
+export const constructRegExp = ({
+  canBeFloat,
+  canBeNegative,
+  intPartPrecision,
+  precision,
+}: Pick<
+  INumberInputProps,
+  'canBeFloat' | 'canBeNegative' | 'intPartPrecision' | 'precision'
+>): string => {
+  const basePart = `\\d{0,${intPartPrecision}}`;
+  const floatPart = `(\\.\\d{0,${precision}})?`;
+  const negativePart = '(\\-)?';
+
+  return `^${canBeNegative ? negativePart : ''}${basePart}${canBeFloat ? floatPart : ''}$`;
+};
+
+// 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/PhoneInput/PhoneInput.stories.tsx

@@ -1,70 +1,70 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { phoneInfo } from '../../constants';
-import { iconsList } from '../Icon';
-import { PhoneInput } from './PhoneInput';
-import { IPhoneValue } from './types';
-
-const iconTypes = [undefined, ...Object.keys(iconsList)];
-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',
-    ],
-  },
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { phoneInfo } from '../../constants';
+import { iconsList } from '../Icon';
+import { PhoneInput } from './PhoneInput';
+import { IPhoneValue } from './types';
+
+const iconTypes = [undefined, ...Object.keys(iconsList)];
+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

@@ -1,89 +1,89 @@
-import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
-import { IInputStyles } from '../Input';
-import { IPhoneInputCountryListStyles } from './components';
-
-const COUNTRY_SELECT_WIDTH = 80;
-
-export const useStyles = createThemedStyles('PhoneInput', {
-  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,
-  },
-});
-
-export const inputStyles: IInputStyles = {
-  inputWrapper: {
-    paddingLeft: COUNTRY_SELECT_WIDTH,
-  },
-
-  label: {
-    marginLeft: COUNTRY_SELECT_WIDTH,
-  },
-};
-
-export type IPhoneInputStyles = ITweakStyles<
-  typeof useStyles,
-  {
-    tweakInput: IInputStyles;
-    tweakCountryList: IPhoneInputCountryListStyles;
-  }
->;
+import { colors, dimensions, ITweakStyles, createThemedStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+import { IPhoneInputCountryListStyles } from './components';
+
+const COUNTRY_SELECT_WIDTH = 80;
+
+export const useStyles = createThemedStyles('PhoneInput', {
+  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,
+  },
+});
+
+export const inputStyles: IInputStyles = {
+  inputWrapper: {
+    paddingLeft: COUNTRY_SELECT_WIDTH,
+  },
+
+  label: {
+    marginLeft: COUNTRY_SELECT_WIDTH,
+  },
+};
+
+export type IPhoneInputStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakInput: IInputStyles;
+    tweakCountryList: IPhoneInputCountryListStyles;
+  }
+>;

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

@@ -1,21 +1,21 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { PhoneInputCountryList } from './PhoneInputCountryList';
-
-export default {
-  title: 'Inputs/PhoneInput/PhoneInputCountryList',
-  component: PhoneInputCountryList,
-  args: {
-    locale: 'ru',
-    placeholder: 'Поиск',
-    noMatchesLabel: 'Ничего не найдено',
-  },
-  parameters: {
-    controls: {
-      exclude: ['data', 'tweakStyles', 'testId'],
-    },
-  },
-} as ComponentMeta<typeof PhoneInputCountryList>;
-
-export const Default: ComponentStory<typeof PhoneInputCountryList> = (args) => (
-  <PhoneInputCountryList {...args} />
-);
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { PhoneInputCountryList } from './PhoneInputCountryList';
+
+export default {
+  title: 'Inputs/PhoneInput/PhoneInputCountryList',
+  component: PhoneInputCountryList,
+  args: {
+    locale: 'ru',
+    placeholder: 'Поиск',
+    noMatchesLabel: 'Ничего не найдено',
+  },
+  parameters: {
+    controls: {
+      exclude: ['data', 'tweakStyles', 'testId'],
+    },
+  },
+} as ComponentMeta<typeof PhoneInputCountryList>;
+
+export const Default: ComponentStory<typeof PhoneInputCountryList> = (args) => (
+  <PhoneInputCountryList {...args} />
+);