@true-engineering/true-react-common-ui-kit 3.9.0 → 3.9.2

package/src/components/Select/helpers.ts

@@ -1,27 +1,27 @@
-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): string | undefined =>
-  v === undefined ? undefined : String(v);
-
-export const defaultCompareFunction = <Value>(v1: Value, v2: Value): boolean => 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): string | undefined =>
+  v === undefined ? undefined : String(v);
+
+export const defaultCompareFunction = <Value>(v1: Value, v2: Value): boolean => 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 * from './types';
-export type { ISelectStyles } from './Select.styles';
-export type { ISelectListStyles } from './components';
+export * from './Select';
+export * from './types';
+export type { ISelectStyles } from './Select.styles';
+export type { ISelectListStyles } from './components';

package/src/components/Skeleton/Skeleton.styles.ts

@@ -1,46 +1,46 @@
-import { rgba } from '../../helpers';
-import { colors, createThemedStyles, ITweakStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Skeleton', {
-  root: {
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-    backgroundColor: rgba(colors.GREY_DISABLED, 0.8),
-    position: 'relative',
-    borderRadius: 4,
-    overflow: 'hidden',
-    '-webkit-mask-image': '-webkit-radial-gradient(white, black)',
-
-    '&::after': {
-      content: '""',
-      animation: '$skeleton 1.6s linear 0.5s infinite',
-      background: `linear-gradient(90deg, transparent, ${rgba(
-        colors.GREY_BACKGROUND,
-        0.65,
-      )}, transparent)`,
-      position: 'absolute',
-      transform: 'translateX(-100%)',
-      bottom: 0,
-      left: 0,
-      right: 0,
-      top: 0,
-    },
-  },
-
-  '@keyframes skeleton': {
-    '0%': {
-      transform: 'translateX(-100%)',
-    },
-
-    '50%': {
-      transform: 'translateX(100%)',
-    },
-
-    '100%': {
-      transform: 'translateX(100%)',
-    },
-  },
-});
-
-export type ISkeletonStyles = ITweakStyles<typeof useStyles>;
+import { rgba } from '../../helpers';
+import { colors, createThemedStyles, ITweakStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Skeleton', {
+  root: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    backgroundColor: rgba(colors.GREY_DISABLED, 0.8),
+    position: 'relative',
+    borderRadius: 4,
+    overflow: 'hidden',
+    '-webkit-mask-image': '-webkit-radial-gradient(white, black)',
+
+    '&::after': {
+      content: '""',
+      animation: '$skeleton 1.6s linear 0.5s infinite',
+      background: `linear-gradient(90deg, transparent, ${rgba(
+        colors.GREY_BACKGROUND,
+        0.65,
+      )}, transparent)`,
+      position: 'absolute',
+      transform: 'translateX(-100%)',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+    },
+  },
+
+  '@keyframes skeleton': {
+    '0%': {
+      transform: 'translateX(-100%)',
+    },
+
+    '50%': {
+      transform: 'translateX(100%)',
+    },
+
+    '100%': {
+      transform: 'translateX(100%)',
+    },
+  },
+});
+
+export type ISkeletonStyles = ITweakStyles<typeof useStyles>;

package/src/components/Skeleton/Skeleton.tsx

@@ -1,12 +1,12 @@
-import { CSSProperties, FC } from 'react';
-import { ICommonProps } from '../../types';
-import { ISkeletonStyles, useStyles } from './Skeleton.styles';
-
-export interface ISkeletonProps extends Pick<ICommonProps<ISkeletonStyles>, 'tweakStyles'> {
-  height?: CSSProperties['height'];
-}
-
-export const Skeleton: FC<ISkeletonProps> = ({ height, tweakStyles }) => {
-  const classes = useStyles({ theme: tweakStyles });
-  return <div className={classes.root} style={{ height }} />;
-};
+import { CSSProperties, FC } from 'react';
+import { ICommonProps } from '../../types';
+import { ISkeletonStyles, useStyles } from './Skeleton.styles';
+
+export interface ISkeletonProps extends Pick<ICommonProps<ISkeletonStyles>, 'tweakStyles'> {
+  height?: CSSProperties['height'];
+}
+
+export const Skeleton: FC<ISkeletonProps> = ({ height, tweakStyles }) => {
+  const classes = useStyles({ theme: tweakStyles });
+  return <div className={classes.root} style={{ height }} />;
+};

package/src/components/Skeleton/index.ts

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

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

@@ -1,51 +1,51 @@
-import { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { IInputProps } from '../Input';
-import { SmartInput } from './SmartInput';
-import { ISmartType } from './types';
-
-const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
-const smartTypes: ISmartType[] = ['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 } from './SmartInput';
+import { ISmartType } from './types';
+
+const types: Array<IInputProps['type']> = ['text', 'password', 'email', 'number'];
+const smartTypes: ISmartType[] = ['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/constants.ts

@@ -1,84 +1,84 @@
-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 CharactersMap: { [key: string]: string } = {
-  й: 'q',
-  ц: 'w',
-  у: 'e',
-  к: 'r',
-  е: 't',
-  н: 'y',
-  г: 'u',
-  ш: 'i',
-  щ: 'o',
-  з: 'p',
-  х: '[',
-  ъ: ']',
-  ф: 'a',
-  ы: 's',
-  в: 'd',
-  а: 'f',
-  п: 'g',
-  р: 'h',
-  о: 'j',
-  л: 'k',
-  д: 'l',
-  ж: ';',
-  э: "'",
-  я: 'z',
-  ч: 'x',
-  с: 'c',
-  м: 'v',
-  и: 'b',
-  т: 'n',
-  ь: 'm',
-  б: ',',
-  ю: '.',
-  ё: '`',
-};
-
-export const TransliterationMap: { [key: string]: string } = {
-  й: 'i',
-  ц: 'ts',
-  у: 'u',
-  к: 'k',
-  е: 'e',
-  н: 'n',
-  г: 'g',
-  ш: 'sh',
-  щ: 'shch',
-  з: 'z',
-  х: 'h',
-  ъ: 'ie',
-  ф: 'f',
-  ы: 'y',
-  в: 'v',
-  а: 'a',
-  п: 'p',
-  р: 'r',
-  о: 'o',
-  л: 'l',
-  д: 'd',
-  ж: 'zh',
-  э: 'e',
-  я: 'ia',
-  ч: 'ch',
-  с: 's',
-  м: 'm',
-  и: 'i',
-  т: 't',
-  ь: '',
-  б: 'b',
-  ю: 'iu',
-  ё: 'e',
-};
+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 CharactersMap: { [key: string]: string } = {
+  й: 'q',
+  ц: 'w',
+  у: 'e',
+  к: 'r',
+  е: 't',
+  н: 'y',
+  г: 'u',
+  ш: 'i',
+  щ: 'o',
+  з: 'p',
+  х: '[',
+  ъ: ']',
+  ф: 'a',
+  ы: 's',
+  в: 'd',
+  а: 'f',
+  п: 'g',
+  р: 'h',
+  о: 'j',
+  л: 'k',
+  д: 'l',
+  ж: ';',
+  э: "'",
+  я: 'z',
+  ч: 'x',
+  с: 'c',
+  м: 'v',
+  и: 'b',
+  т: 'n',
+  ь: 'm',
+  б: ',',
+  ю: '.',
+  ё: '`',
+};
+
+export const TransliterationMap: { [key: string]: string } = {
+  й: 'i',
+  ц: 'ts',
+  у: 'u',
+  к: 'k',
+  е: 'e',
+  н: 'n',
+  г: 'g',
+  ш: 'sh',
+  щ: 'shch',
+  з: 'z',
+  х: 'h',
+  ъ: 'ie',
+  ф: 'f',
+  ы: 'y',
+  в: 'v',
+  а: 'a',
+  п: 'p',
+  р: 'r',
+  о: 'o',
+  л: 'l',
+  д: 'd',
+  ж: 'zh',
+  э: 'e',
+  я: 'ia',
+  ч: 'ch',
+  с: 's',
+  м: 'm',
+  и: 'i',
+  т: 't',
+  ь: '',
+  б: 'b',
+  ю: 'iu',
+  ё: 'e',
+};

package/src/components/SmartInput/helpers.ts

@@ -1,13 +1,13 @@
-import { ISmartType } from './types';
-
-export const transformCaseSensitive = (
-  smartType: ISmartType,
-  map: { [key: string]: string },
-  symbol: string,
-): string => {
-  const isUpperCase = symbol.toUpperCase() === symbol;
-  const result = smartType.endsWith('RuEn')
-    ? symbol.toLowerCase()
-    : map[symbol.toLowerCase()] ?? symbol;
-  return isUpperCase ? result.toUpperCase() : result;
-};
+import { ISmartType } from './types';
+
+export const transformCaseSensitive = (
+  smartType: ISmartType,
+  map: { [key: string]: string },
+  symbol: string,
+): string => {
+  const isUpperCase = symbol.toUpperCase() === symbol;
+  const result = smartType.endsWith('RuEn')
+    ? symbol.toLowerCase()
+    : map[symbol.toLowerCase()] ?? symbol;
+  return isUpperCase ? result.toUpperCase() : result;
+};

package/src/components/SmartInput/index.ts

@@ -1,2 +1,2 @@
-export * from './SmartInput';
-export * from './types';
+export * from './SmartInput';
+export * from './types';

package/src/components/SmartInput/types.ts

@@ -1,11 +1,11 @@
-export type ISmartType =
-  | 'name'
-  | 'nameRuEn'
-  | 'surname'
-  | 'surnameRuEn'
-  | 'email'
-  | 'agencyName'
-  | 'default'
-  | 'digits'
-  | 'docNumber'
-  | 'benefitCert';
+export type ISmartType =
+  | 'name'
+  | 'nameRuEn'
+  | 'surname'
+  | 'surnameRuEn'
+  | 'email'
+  | 'agencyName'
+  | 'default'
+  | 'digits'
+  | 'docNumber'
+  | 'benefitCert';

package/src/components/Switch/Switch.styles.ts

@@ -1,75 +1,75 @@
-import { ITweakStyles, createThemedStyles } from '../../theme';
-
-export const useStyles = createThemedStyles('Switch', {
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-  },
-
-  primary: {},
-
-  secondary: {},
-
-  invalid: {},
-
-  disabled: {
-    pointerEvents: 'none',
-    cursor: 'default',
-  },
-
-  checked: {
-    '& $switch::before': {
-      left: 18,
-    },
-  },
-
-  switch: {
-    position: 'relative',
-    flexShrink: 0,
-    display: 'block',
-    width: 36,
-    height: 20,
-    backgroundColor: '#333',
-    borderRadius: 10,
-    boxSizing: 'border-box',
-    transitionProperty: 'opacity, background-color',
-    transition: '0.25s ease-in-out',
-
-    '&::before': {
-      content: '""',
-      position: 'absolute',
-      top: 2,
-      left: 2,
-      right: 'auto',
-      display: 'block',
-      width: 16,
-      height: 16,
-      backgroundColor: '#fff',
-      borderRadius: '50%',
-      zIndex: 1,
-      transitionProperty: 'left, background-color',
-      transition: '0.25s ease-in-out',
-    },
-  },
-
-  input: {
-    display: 'none',
-  },
-
-  label: {
-    transitionProperty: 'opacity, color',
-    transition: '0.25s ease-in-out',
-  },
-
-  labelLeft: {
-    order: -1,
-    marginRight: 12,
-  },
-
-  labelRight: {
-    marginLeft: 12,
-  },
-});
-
-export type ISwitchStyles = ITweakStyles<typeof useStyles>;
+import { ITweakStyles, createThemedStyles } from '../../theme';
+
+export const useStyles = createThemedStyles('Switch', {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+  },
+
+  primary: {},
+
+  secondary: {},
+
+  invalid: {},
+
+  disabled: {
+    pointerEvents: 'none',
+    cursor: 'default',
+  },
+
+  checked: {
+    '& $switch::before': {
+      left: 18,
+    },
+  },
+
+  switch: {
+    position: 'relative',
+    flexShrink: 0,
+    display: 'block',
+    width: 36,
+    height: 20,
+    backgroundColor: '#333',
+    borderRadius: 10,
+    boxSizing: 'border-box',
+    transitionProperty: 'opacity, background-color',
+    transition: '0.25s ease-in-out',
+
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: 2,
+      left: 2,
+      right: 'auto',
+      display: 'block',
+      width: 16,
+      height: 16,
+      backgroundColor: '#fff',
+      borderRadius: '50%',
+      zIndex: 1,
+      transitionProperty: 'left, background-color',
+      transition: '0.25s ease-in-out',
+    },
+  },
+
+  input: {
+    display: 'none',
+  },
+
+  label: {
+    transitionProperty: 'opacity, color',
+    transition: '0.25s ease-in-out',
+  },
+
+  labelLeft: {
+    order: -1,
+    marginRight: 12,
+  },
+
+  labelRight: {
+    marginLeft: 12,
+  },
+});
+
+export type ISwitchStyles = ITweakStyles<typeof useStyles>;