@true-engineering/true-react-common-ui-kit 2.1.0 → 2.2.0

package/src/components/Select/helpers.ts

@@ -1,29 +1,26 @@
-import { isNotEmpty } from '../../helpers';
-import type { IMultipleSelectProps, ISelectProps } from './Select';
-import { IMultipleSelectValue } from './types';
-
-export const defaultIsOptionDisabled = <Value>(option: Value): boolean =>
-  typeof option === 'object' &&
-  option !== null &&
-  ((option as { isDisabled?: boolean })?.isDisabled ?? false);
-
-export const defaultConvertFunction = (v: unknown) =>
-  v === undefined ? undefined : String(v);
-
-export const defaultCompareFunction = <Value>(v1: Value, v2: Value) =>
-  v1 === v2;
-
-export const getDefaultConvertToIdFunction =
-  <Value>(
-    convertValueToString: (value: Value) => string | undefined,
-  ): ((value: Value) => string | undefined) =>
-  (value) =>
-    isNotEmpty((value as { id: unknown })?.id)
-      ? String((value as { id: unknown }).id)
-      : convertValueToString(value);
-
-export const isMultiSelectValue = <Value>(
-  props: ISelectProps<Value> | IMultipleSelectProps<Value>,
-  _value: Value | IMultipleSelectValue<Value> | undefined,
-): _value is IMultipleSelectValue<Value> | undefined =>
-  props.isMultiSelect === true;
+import { isNotEmpty } from '@true-engineering/true-react-platform-helpers';
+import type { IMultipleSelectProps, ISelectProps } from './Select';
+import { IMultipleSelectValue } from './types';
+
+export const defaultIsOptionDisabled = <Value>(option: Value): boolean =>
+  typeof option === 'object' &&
+  option !== null &&
+  ((option as { isDisabled?: boolean })?.isDisabled ?? false);
+
+export const defaultConvertFunction = (v: unknown) => (v === undefined ? undefined : String(v));
+
+export const defaultCompareFunction = <Value>(v1: Value, v2: Value) => v1 === v2;
+
+export const getDefaultConvertToIdFunction =
+  <Value>(
+    convertValueToString: (value: Value) => string | undefined,
+  ): ((value: Value) => string | undefined) =>
+  (value) =>
+    isNotEmpty((value as { id: unknown })?.id)
+      ? String((value as { id: unknown }).id)
+      : convertValueToString(value);
+
+export const isMultiSelectValue = <Value>(
+  props: ISelectProps<Value> | IMultipleSelectProps<Value>,
+  _value: Value | IMultipleSelectValue<Value> | undefined,
+): _value is IMultipleSelectValue<Value> | undefined => props.isMultiSelect === true;

package/src/components/Select/index.ts

@@ -1,4 +1,4 @@
-export * from './Select';
-export type { IMultipleSelectValue } from './types';
-export type { SelectStyles } from './Select.styles';
-export type { SelectListStyles } from './SelectList/SelectList.styles';
+export * from './Select';
+export type { IMultipleSelectValue } from './types';
+export type { SelectStyles } from './Select.styles';
+export type { SelectListStyles } from './SelectList/SelectList.styles';

package/src/components/Select/types.ts

@@ -1 +1 @@
-export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;
+export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;

package/src/components/SmartInput/SmartInput.stories.tsx

@@ -1,63 +1,50 @@
-import { ComponentStory } from '@storybook/react';
-import { useState } from 'react';
-import { IInputProps } from '../Input';
-import { SmartInput, TSmartType } from './SmartInput';
-
-const types: Array<IInputProps['type']> = [
-  'text',
-  'password',
-  'email',
-  'number',
-];
-const smartTypes: TSmartType[] = [
-  'default',
-  'agencyName',
-  'surname',
-  'name',
-  'email',
-];
-
-export default {
-  title: 'Inputs/SmartInput',
-  component: SmartInput,
-  argTypes: {
-    type: { control: 'inline-radio', options: types },
-    smartType: { control: 'inline-radio', options: smartTypes },
-  },
-};
-
-const Template: ComponentStory<typeof SmartInput> = (args) => {
-  const [value, setValue] = useState('');
-
-  return (
-    <div>
-      <div>Фичи умного инпута:</div>
-      <ul>
-        <li>Переключение раскладки при вводе</li>
-        <li>Транслитерация при копировании текста на русском</li>
-        <li>
-          Запрет ввода определённых символов для разных видов полей, например,
-          только буквы, пробелы и дефис для фамилий и т.д.
-        </li>
-        <li>
-          Фильтрация скопированного значения на предмет запрещённых символов
-        </li>
-        <li>Трансформация значения в UPPERCASE</li>
-      </ul>
-
-      <SmartInput {...args} value={value} onChange={(v) => setValue(v)} />
-    </div>
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  type: 'text',
-  smartType: 'default',
-  isUpperCase: false,
-  isDisabled: false,
-  hasFloatingLabel: true,
-};
+import { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { IInputProps } from '../Input';
+import { SmartInput, TSmartType } from './SmartInput';
+
+const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
+const smartTypes: TSmartType[] = ['default', 'agencyName', 'surname', 'name', 'email'];
+
+export default {
+  title: 'Inputs/SmartInput',
+  component: SmartInput,
+  argTypes: {
+    type: { control: 'inline-radio', options: types },
+    smartType: { control: 'inline-radio', options: smartTypes },
+  },
+};
+
+const Template: ComponentStory<typeof SmartInput> = (args) => {
+  const [value, setValue] = useState('');
+
+  return (
+    <div>
+      <div>Фичи умного инпута:</div>
+      <ul>
+        <li>Переключение раскладки при вводе</li>
+        <li>Транслитерация при копировании текста на русском</li>
+        <li>
+          Запрет ввода определённых символов для разных видов полей, например, только буквы, пробелы
+          и дефис для фамилий и т.д.
+        </li>
+        <li>Фильтрация скопированного значения на предмет запрещённых символов</li>
+        <li>Трансформация значения в UPPERCASE</li>
+      </ul>
+
+      <SmartInput {...args} value={value} onChange={(v) => setValue(v)} />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Label',
+  placeholder: 'Placeholder',
+  type: 'text',
+  smartType: 'default',
+  isUpperCase: false,
+  isDisabled: false,
+  hasFloatingLabel: true,
+};

package/src/components/SmartInput/SmartInput.tsx

@@ -1,180 +1,147 @@
-import React, { useState, useEffect, forwardRef } from 'react';
-import { Input, IInputProps } from '../Input';
-import {
-  CharactersMap,
-  transformCaseSensitive,
-  TransliterationMap,
-} from './helpers';
-
-export type TSmartType =
-  | 'name'
-  | 'nameRuEn'
-  | 'surname'
-  | 'surnameRuEn'
-  | 'email'
-  | 'agencyName'
-  | 'default'
-  | 'digits'
-  | 'docNumber'
-  | 'benefitCert';
-
-export interface ISmartInputProps extends IInputProps {
-  isUpperCase?: boolean;
-  smartType?: TSmartType;
-  regExp?: RegExp;
-  onChange: (value: string) => void;
-}
-
-export const SMART_INPUT_REGEX_MAP = {
-  default: /./i,
-  agencyName: /^[a-zA-Z\s0-9-]*$/i,
-  surname: /^[a-zA-Z\s-]*$/i,
-  name: /^[a-zA-Z\s-.`']*$/i,
-  surnameRuEn: /^[a-zA-Zа-яА-Я\s-]*$/i,
-  nameRuEn: /^[a-zA-Zа-яА-Я\s-.`']*$/i,
-  email: /^[a-zA-Z0-9@_\-.+']*$/i,
-  digits: /^[0-9]*$/i,
-  docNumber: /^[a-zA-Z0-9]*$/i,
-  benefitCert: /^[a-zA-Z0-9/]*$/i,
-};
-
-export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
-  (
-    {
-      onChange,
-      isUpperCase,
-      smartType = 'default',
-      regExp,
-      value = '',
-      maxLength,
-      ...rest
-    },
-    ref,
-  ) => {
-    const [currentValue, setCurrentValue] = useState<string>(
-      getUpperCaseIfNeeded(value),
-    );
-    const [caretPosition, setCaretPosition] = useState<number | null>(null);
-    const [input, setInput] = useState<HTMLInputElement | null>(null);
-    const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
-
-    useEffect(() => {
-      if (
-        input &&
-        input.type !== 'email' &&
-        input.selectionStart !== caretPosition
-      ) {
-        input.selectionStart = caretPosition;
-        input.selectionEnd = caretPosition;
-      }
-    }, [caretPosition]);
-
-    useEffect(() => {
-      setCurrentValue(getUpperCaseIfNeeded(value));
-    }, [value]);
-
-    function getUpperCaseIfNeeded(str: string) {
-      return isUpperCase ? str.toUpperCase() : str;
-    }
-
-    const handleChange = (
-      str: string,
-      event?: React.FormEvent<HTMLInputElement>,
-    ) => {
-      const mappedValue = str
-        .split('')
-        .map((symbol) =>
-          regex.test(symbol)
-            ? symbol
-            : transformCaseSensitive(
-                smartType,
-                smartType !== 'email'
-                  ? CharactersMap
-                  : { ...CharactersMap, '"': '@' },
-                symbol,
-              ),
-        )
-        .filter((symbol) => regex.test(symbol))
-        .join('');
-      const domElement = event?.currentTarget;
-
-      if (domElement) {
-        if (!input) {
-          setInput(domElement);
-        }
-
-        setCurrentValue(getUpperCaseIfNeeded(mappedValue));
-        onChange(getUpperCaseIfNeeded(mappedValue));
-
-        if (mappedValue !== currentValue) {
-          setCaretPosition(domElement.selectionStart);
-        } else {
-          setCaretPosition(
-            domElement.selectionStart ? domElement.selectionStart - 1 : null,
-          );
-        }
-      }
-    };
-
-    const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
-      const str = event.clipboardData.getData('text/plain').split('').join('');
-      const domElement = event.currentTarget;
-
-      if (!input) {
-        setInput(domElement);
-      }
-
-      event.preventDefault();
-      const selectionStart = domElement.selectionStart ?? 0;
-      const selectionEnd = domElement.selectionEnd ?? 0;
-
-      let mappedValue = str
-        .split('')
-        .map((symbol) =>
-          regex.test(symbol)
-            ? symbol
-            : transformCaseSensitive(smartType, TransliterationMap, symbol),
-        )
-        .filter((letter) => regex.test(letter))
-        .join('');
-
-      const newValueLength =
-        mappedValue.length +
-        currentValue.length -
-        (selectionEnd - selectionStart);
-
-      if (
-        maxLength !== undefined &&
-        maxLength >= 0 &&
-        newValueLength > maxLength
-      ) {
-        const validMappedValueLength =
-          mappedValue.length - (newValueLength - maxLength);
-
-        mappedValue = mappedValue.substring(0, validMappedValueLength);
-      }
-
-      const newValue = getUpperCaseIfNeeded(
-        `${currentValue?.substring(
-          0,
-          selectionStart,
-        )}${mappedValue}${currentValue?.substring(selectionEnd)}`,
-      );
-
-      setCaretPosition(selectionStart + mappedValue.length);
-      setCurrentValue(newValue);
-      onChange(newValue);
-    };
-
-    return (
-      <Input
-        {...rest}
-        ref={ref}
-        maxLength={maxLength}
-        onChange={handleChange}
-        onPaste={handlePaste}
-        value={currentValue}
-      />
-    );
-  },
-);
+import React, { useState, useEffect, forwardRef } from 'react';
+import { Input, IInputProps } from '../Input';
+import { CharactersMap, transformCaseSensitive, TransliterationMap } from './helpers';
+
+export type TSmartType =
+  | 'name'
+  | 'nameRuEn'
+  | 'surname'
+  | 'surnameRuEn'
+  | 'email'
+  | 'agencyName'
+  | 'default'
+  | 'digits'
+  | 'docNumber'
+  | 'benefitCert';
+
+export interface ISmartInputProps extends IInputProps {
+  isUpperCase?: boolean;
+  smartType?: TSmartType;
+  regExp?: RegExp;
+  onChange: (value: string) => void;
+}
+
+export const SMART_INPUT_REGEX_MAP = {
+  default: /./i,
+  agencyName: /^[a-zA-Z\s0-9-]*$/i,
+  surname: /^[a-zA-Z\s-]*$/i,
+  name: /^[a-zA-Z\s-.`']*$/i,
+  surnameRuEn: /^[a-zA-Zа-яА-Я\s-]*$/i,
+  nameRuEn: /^[a-zA-Zа-яА-Я\s-.`']*$/i,
+  email: /^[a-zA-Z0-9@_\-.+']*$/i,
+  digits: /^[0-9]*$/i,
+  docNumber: /^[a-zA-Z0-9]*$/i,
+  benefitCert: /^[a-zA-Z0-9/]*$/i,
+};
+
+export const SmartInput = forwardRef<HTMLInputElement, ISmartInputProps>(
+  (
+    { onChange, isUpperCase, smartType = 'default', regExp, value = '', maxLength, ...rest },
+    ref,
+  ) => {
+    const [currentValue, setCurrentValue] = useState<string>(getUpperCaseIfNeeded(value));
+    const [caretPosition, setCaretPosition] = useState<number | null>(null);
+    const [input, setInput] = useState<HTMLInputElement | null>(null);
+    const regex = regExp || SMART_INPUT_REGEX_MAP[smartType];
+
+    useEffect(() => {
+      if (input && input.type !== 'email' && input.selectionStart !== caretPosition) {
+        input.selectionStart = caretPosition;
+        input.selectionEnd = caretPosition;
+      }
+    }, [caretPosition]);
+
+    useEffect(() => {
+      setCurrentValue(getUpperCaseIfNeeded(value));
+    }, [value]);
+
+    function getUpperCaseIfNeeded(str: string) {
+      return isUpperCase ? str.toUpperCase() : str;
+    }
+
+    const handleChange = (str: string, event?: React.FormEvent<HTMLInputElement>) => {
+      const mappedValue = str
+        .split('')
+        .map((symbol) =>
+          regex.test(symbol)
+            ? symbol
+            : transformCaseSensitive(
+                smartType,
+                smartType !== 'email' ? CharactersMap : { ...CharactersMap, '"': '@' },
+                symbol,
+              ),
+        )
+        .filter((symbol) => regex.test(symbol))
+        .join('');
+      const domElement = event?.currentTarget;
+
+      if (domElement) {
+        if (!input) {
+          setInput(domElement);
+        }
+
+        setCurrentValue(getUpperCaseIfNeeded(mappedValue));
+        onChange(getUpperCaseIfNeeded(mappedValue));
+
+        if (mappedValue !== currentValue) {
+          setCaretPosition(domElement.selectionStart);
+        } else {
+          setCaretPosition(domElement.selectionStart ? domElement.selectionStart - 1 : null);
+        }
+      }
+    };
+
+    const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {
+      const str = event.clipboardData.getData('text/plain').split('').join('');
+      const domElement = event.currentTarget;
+
+      if (!input) {
+        setInput(domElement);
+      }
+
+      event.preventDefault();
+      const selectionStart = domElement.selectionStart ?? 0;
+      const selectionEnd = domElement.selectionEnd ?? 0;
+
+      let mappedValue = str
+        .split('')
+        .map((symbol) =>
+          regex.test(symbol)
+            ? symbol
+            : transformCaseSensitive(smartType, TransliterationMap, symbol),
+        )
+        .filter((letter) => regex.test(letter))
+        .join('');
+
+      const newValueLength =
+        mappedValue.length + currentValue.length - (selectionEnd - selectionStart);
+
+      if (maxLength !== undefined && maxLength >= 0 && newValueLength > maxLength) {
+        const validMappedValueLength = mappedValue.length - (newValueLength - maxLength);
+
+        mappedValue = mappedValue.substring(0, validMappedValueLength);
+      }
+
+      const newValue = getUpperCaseIfNeeded(
+        `${currentValue?.substring(0, selectionStart)}${mappedValue}${currentValue?.substring(
+          selectionEnd,
+        )}`,
+      );
+
+      setCaretPosition(selectionStart + mappedValue.length);
+      setCurrentValue(newValue);
+      onChange(newValue);
+    };
+
+    return (
+      <Input
+        {...rest}
+        ref={ref}
+        maxLength={maxLength}
+        onChange={handleChange}
+        onPaste={handlePaste}
+        value={currentValue}
+      />
+    );
+  },
+);