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

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

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

package/src/components/SmartInput/SmartInput.tsx

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

package/src/components/SmartInput/helpers.ts

@@ -0,0 +1,85 @@
+import { TSmartType } from './SmartInput';
+
+export const transformCaseSensitive = (
+  smartType: TSmartType,
+  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;
+};
+
+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/index.ts

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

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,40 @@
+import { ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import { Switch } from './Switch';
+
+export default {
+  title: 'Switch',
+  component: Switch,
+  argTypes: {
+    labelPosition: { control: 'inline-radio', options: ['left', 'right'] },
+    color: { control: 'inline-radio', options: ['primary', 'secondary'] },
+  },
+};
+
+const Template: ComponentStory<typeof Switch> = (args) => {
+  const [isChecked, setIsChecked] = useState(true);
+
+  return (
+    <Switch
+      {...args}
+      isChecked={isChecked}
+      onChange={(value) => setIsChecked(value.isEnabled)}
+      value="check"
+    />
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  children: 'Label',
+  labelPosition: 'right',
+  isDisabled: false,
+  color: 'primary',
+};
+
+Default.parameters = {
+  controls: {
+    exclude: ['data', 'testId', 'onChange'],
+  },
+};

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

@@ -0,0 +1,75 @@
+import { ComponentStyles } from '../../types';
+
+export const styles = {
+  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 SwitchStyles = ComponentStyles<typeof styles>;

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,89 @@
+import { PropsWithChildren } from 'react';
+import clsx from 'clsx';
+import { useTheme } from '../../hooks';
+import { addDataAttributes, isNotEmpty } from '../../helpers';
+import { ICommonProps } from '../../types';
+
+import { styles, SwitchStyles } from './Switch.styles';
+
+export interface ISwitchState<V = string> {
+  name: V;
+  isEnabled: boolean;
+}
+
+export interface ISwitchProps<V extends string> extends ICommonProps {
+  tweakStyles?: SwitchStyles;
+  value: V;
+  isChecked: boolean;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  /**
+   * @deprecated Use `children` instead
+   */
+  label?: string;
+  /**
+   * @default `right`
+   */
+  labelPosition?: 'left' | 'right';
+  /**
+   * @default `primary`
+   */
+  color?: 'primary' | 'secondary';
+  onChange: (state: ISwitchState<V>) => void;
+  testId?: string;
+}
+
+export const Switch = <V extends string>({
+  isDisabled,
+  isChecked,
+  isInvalid,
+  onChange,
+  value,
+  label,
+  children,
+  labelPosition = 'right',
+  color = 'primary',
+  data,
+  tweakStyles,
+  testId,
+}: PropsWithChildren<ISwitchProps<V>>): JSX.Element => {
+  const { classes } = useTheme('Switch', styles, tweakStyles);
+
+  const hasLabel = isNotEmpty(label);
+  const hasChild = isNotEmpty(children);
+  const handleChange = () => onChange({ name: value, isEnabled: !isChecked });
+
+  return (
+    <label
+      className={clsx(classes.root, classes[color], {
+        [classes.disabled]: isDisabled,
+        [classes.checked]: isChecked,
+        [classes.invalid]: isInvalid,
+      })}
+      {...addDataAttributes(data)}
+      data-testid={testId}
+    >
+      <span className={classes.switch}>
+        <input
+          type="checkbox"
+          name={value}
+          className={classes.input}
+          onChange={isDisabled ? undefined : handleChange}
+          checked={isChecked}
+          disabled={isDisabled}
+          data-testid={testId !== undefined ? `${testId}-input` : undefined}
+        />
+      </span>
+      {(hasLabel || hasChild) && (
+        <span
+          className={clsx(
+            classes.label,
+            classes[labelPosition === 'left' ? 'labelLeft' : 'labelRight'],
+          )}
+        >
+          {hasLabel ? label : children}
+        </span>
+      )}
+    </label>
+  );
+};

package/src/components/Switch/index.ts

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

package/src/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,35 @@
+import { ComponentStory } from '@storybook/react';
+import { useState } from 'react';
+import { TextArea } from './TextArea';
+
+export default {
+  title: 'Inputs/TextArea',
+  component: TextArea,
+  argTypes: {
+    maxLength: {
+      control: { type: 'range', min: 10, max: 500, step: 10 },
+    },
+  },
+};
+
+const Template: ComponentStory<typeof TextArea> = (args) => {
+  const [value, setValue] = useState('');
+  return <TextArea {...args} value={value} onChange={(v) => setValue(v)} />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  label: 'Label',
+  placeholder: 'Placeholder',
+  infoMessage: 'Message Info',
+  rows: 5,
+  maxLength: 500,
+  hasFloatingLabel: true,
+  hasRequiredLabel: true,
+  isInvalid: false,
+  errorMessage: 'Error Text',
+  isActive: false,
+  isDisabled: false,
+  isRequired: false,
+};