@cloud-ru/ds-uikit-product-fields-predefined 1.0.0

package/src/components/FieldCode/components/ResendCode/ResendCode.tsx

@@ -0,0 +1,41 @@
+import { APPEARANCE, Button, ButtonProps, ICON_POSITION, VIEW } from '@cloud-ru/ds-button';
+import { UpdateSVG } from '@cloud-ru/ds-icons/interface/system';
+
+import { TEST_IDS } from '../../../../constants';
+import { fieldsPredefinedLocale } from '../../../../locale';
+import { formatSecondsAsMmSs } from './utils';
+
+export type ResendCodeProps = {
+  /** Колбек отправки нового кода */
+  onResend(): void;
+  /** Количество секунд до следующей отправки кода */
+  secondsToNextResend: number;
+} & Pick<ButtonProps, 'size' | 'disabled'>;
+
+export function ResendCode(props: ResendCodeProps) {
+  const { onResend, secondsToNextResend, disabled, size = 'm', ...buttonProps } = props;
+  const { t } = fieldsPredefinedLocale.useTranslations();
+
+  const isResendCodeWithVia = secondsToNextResend > 0;
+
+  return (
+    <Button
+      view={VIEW.Function}
+      appearance={APPEARANCE.Neutral}
+      label={
+        isResendCodeWithVia
+          ? t('FieldCode.resendCodeButtons.resendCodeWithVia', {
+              timer: formatSecondsAsMmSs(secondsToNextResend),
+            })
+          : t('FieldCode.resendCodeButtons.resendCode')
+      }
+      onClick={onResend}
+      icon={<UpdateSVG />}
+      iconPosition={ICON_POSITION.Before}
+      disabled={isResendCodeWithVia || disabled}
+      size={size}
+      data-test-id={TEST_IDS.fieldCodeResend}
+      {...buttonProps}
+    />
+  );
+}

package/src/components/FieldCode/components/ResendCode/index.ts

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

package/src/components/FieldCode/components/ResendCode/utils.ts

@@ -0,0 +1,5 @@
+export function formatSecondsAsMmSs(totalSeconds: number): string {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}

package/src/components/FieldCode/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Cell';
+export * from './ResendCode';

package/src/components/FieldCode/constants.ts

@@ -0,0 +1,2 @@
+/** Заполнитель пустой ячейки кода — сохраняет позицию символа в строке значения. */
+export const ZERO_WIDTH_SPACE = '\u200B';

package/src/components/FieldCode/hooks/index.ts

@@ -0,0 +1,5 @@
+export * from './useCodeInput';
+export * from './useFieldCodeOverflow';
+export * from './useFieldCodeValidate';
+export * from './useFieldHelpers';
+export * from './useFocusCell';

package/src/components/FieldCode/hooks/useCodeInput.ts

@@ -0,0 +1,146 @@
+import { useValueControl } from '@cloud-ru/ds-utils';
+import { ClipboardEvent, KeyboardEvent, useCallback, useEffect } from 'react';
+
+import { ZERO_WIDTH_SPACE } from '../constants';
+import { isNumberChar, isStringCodeLength, isZeroWidthSpace } from '../utils';
+import { useRefState } from './useRefState';
+
+export type UseCodeInputParams = {
+  /** Количество цифр в коде (целое ≥ 1) */
+  codeLength: number;
+  /** Значение кода */
+  value?: string;
+  /** Колбек изменения значения */
+  onChange?(code: string): void;
+  /** Функция переноса фокуса на ячейку с индексом `index` */
+  moveFocus(index: number): void;
+  /** Колбек ввода всех символов кода */
+  onComplete?(code: string): void;
+};
+
+const buildCodeArray = (str: string, codeLength: number) =>
+  Array.from({ length: codeLength }, (_, idx) => str[idx] || ZERO_WIDTH_SPACE);
+
+export function useCodeInput(params: UseCodeInputParams) {
+  const { value: valueProp, onChange: onChangeProp, codeLength, moveFocus, onComplete } = params;
+
+  const [value = '', onChange] = useValueControl<string>({
+    value: valueProp,
+    onChange: onChangeProp,
+    defaultValue: '',
+  });
+
+  const codeRef = useRefState<string[]>(buildCodeArray(value, codeLength));
+
+  const updateCodeByIndex = useCallback(
+    (index: number, newChar: string) => {
+      codeRef.current[index] = newChar;
+      onChange?.(codeRef.current.join(''));
+    },
+    [codeRef, onChange],
+  );
+
+  const updateFullCode = useCallback(
+    (newCode: string) => {
+      codeRef.current = newCode.split('');
+
+      onChange?.(newCode);
+      moveFocus(codeLength - 1);
+      onComplete?.(newCode);
+    },
+    [codeLength, codeRef, moveFocus, onChange, onComplete],
+  );
+
+  const handleAfterCellUpdate = useCallback(
+    (index: number) => {
+      const normalizedCode = codeRef.current.join('');
+
+      const isLastInput = index === codeLength - 1;
+      const isAllInputsFilled = isStringCodeLength(normalizedCode, codeLength);
+      if (!isLastInput) {
+        moveFocus(index + 1);
+      } else if (isAllInputsFilled) {
+        onComplete?.(normalizedCode);
+      }
+    },
+    [codeLength, codeRef, moveFocus, onComplete],
+  );
+
+  const deleteChar = useCallback(
+    (index: number) => {
+      if (codeRef.current[index] && !isZeroWidthSpace(codeRef.current[index])) {
+        updateCodeByIndex(index, ZERO_WIDTH_SPACE);
+      } else if (index > 0) {
+        moveFocus(index - 1);
+      }
+    },
+    [codeRef, moveFocus, updateCodeByIndex],
+  );
+
+  const onAutoCompleteInput = useCallback(
+    (code: string, index: number) => {
+      if (isStringCodeLength(code, codeLength)) {
+        updateFullCode(code);
+        return;
+      }
+
+      if (!isNumberChar(code)) {
+        return;
+      }
+
+      updateCodeByIndex(index, code);
+      handleAfterCellUpdate(index);
+    },
+    [codeLength, handleAfterCellUpdate, updateCodeByIndex, updateFullCode],
+  );
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>, index: number) => {
+      switch (e.key) {
+        case 'ArrowLeft':
+          moveFocus(index - 1);
+          break;
+        case 'ArrowRight':
+          moveFocus(index + 1);
+          break;
+        case 'Backspace':
+          deleteChar(index);
+          break;
+        default:
+          if (isNumberChar(e.key)) {
+            e.preventDefault();
+            updateCodeByIndex(index, e.key);
+            handleAfterCellUpdate(index);
+          }
+          break;
+      }
+    },
+    [deleteChar, handleAfterCellUpdate, moveFocus, updateCodeByIndex],
+  );
+
+  const onPaste = useCallback(
+    (e: ClipboardEvent<HTMLInputElement>) => {
+      const codeInput = e?.clipboardData.getData('text') ?? '';
+      if (!isStringCodeLength(codeInput, codeLength)) {
+        return;
+      }
+
+      updateFullCode(codeInput);
+    },
+    [codeLength, updateFullCode],
+  );
+
+  useEffect(() => {
+    codeRef.current = buildCodeArray(value, codeLength);
+  }, [codeLength, codeRef, value]);
+
+  return {
+    code: codeRef.current,
+    cellHandlers: {
+      onKeyDown,
+      onPaste,
+      onChange: onAutoCompleteInput,
+    },
+    onChangeCode: onChange,
+  };
+}

package/src/components/FieldCode/hooks/useFieldCodeOverflow.ts

@@ -0,0 +1,53 @@
+import { useLayoutEffect } from '@cloud-ru/ds-utils';
+import { useCallback, useRef, useState } from 'react';
+
+function hasCodeOverflow(root: HTMLElement, codeContainer: HTMLElement): boolean {
+  return codeContainer.scrollWidth > root.clientWidth;
+}
+
+/** Запасной сценарий: включает горизонтальный скролл, если ряд ячеек шире контейнера. */
+export function useFieldCodeOverflow() {
+  const [hasOverflow, setHasOverflow] = useState(false);
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const codeContainerRef = useRef<HTMLDivElement>(null);
+
+  const measure = useCallback(() => {
+    const root = rootRef.current;
+    const codeContainer = codeContainerRef.current;
+
+    if (!root || !codeContainer) {
+      return;
+    }
+
+    setHasOverflow(prev => {
+      const next = hasCodeOverflow(root, codeContainer);
+      return prev === next ? prev : next;
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    const codeContainer = codeContainerRef.current;
+
+    if (!root || !codeContainer) {
+      return;
+    }
+
+    measure();
+
+    const resizeObserver = new ResizeObserver(measure);
+    resizeObserver.observe(root);
+    resizeObserver.observe(codeContainer);
+
+    const mutationObserver = new MutationObserver(measure);
+    mutationObserver.observe(codeContainer, { childList: true });
+
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [measure]);
+
+  return { rootRef, codeContainerRef, hasOverflow };
+}

package/src/components/FieldCode/hooks/useFieldCodeValidate.ts

@@ -0,0 +1,32 @@
+import { useCallback } from 'react';
+
+import { fieldsPredefinedLocale } from '../../../locale';
+import { isNumberChar } from '../utils';
+
+export type UseFieldCodeValidateParams = {
+  /** Ожидаемая длина кода (количество цифр) */
+  codeLength: number;
+};
+
+/** Возвращает функцию валидации значения кода: пустое значение / неполный код. */
+export function useFieldCodeValidate(params: UseFieldCodeValidateParams) {
+  const { codeLength } = params;
+  const { t } = fieldsPredefinedLocale.useTranslations();
+
+  return useCallback(
+    (value?: string | number) => {
+      const str = value != null ? String(value) : '';
+      const digits = str.split('').filter(isNumberChar).join('');
+      if (digits.length === 0) {
+        return t('FieldCode.required');
+      }
+
+      if (digits.length < codeLength) {
+        return t('FieldCode.minLength', { count: codeLength });
+      }
+
+      return undefined;
+    },
+    [codeLength, t],
+  );
+}

package/src/components/FieldCode/hooks/useFieldHelpers.ts

@@ -0,0 +1,45 @@
+import { useCallback, useEffect } from 'react';
+
+import { getFirstEmptyCellIndex } from '../utils';
+
+type UseFieldHelpersParams = {
+  onChangeCode(code: string): void;
+  moveFocus(index: number): void;
+  isMobile?: boolean;
+  showEmptyChars?: boolean;
+  code: readonly string[];
+  codeLength: number;
+};
+
+export function useFieldHelpers(params: UseFieldHelpersParams) {
+  const { onChangeCode, moveFocus, isMobile = false, showEmptyChars, code, codeLength } = params;
+
+  const resetCode = useCallback(() => {
+    onChangeCode('');
+
+    if (!isMobile) {
+      moveFocus(0);
+    }
+  }, [isMobile, moveFocus, onChangeCode]);
+
+  useEffect(() => {
+    if (!isMobile) {
+      moveFocus(0);
+    }
+  }, [isMobile, moveFocus]);
+
+  useEffect(() => {
+    if (isMobile || !showEmptyChars) {
+      return;
+    }
+
+    const emptyIndex = getFirstEmptyCellIndex(code);
+    if (emptyIndex >= 0) {
+      moveFocus(emptyIndex);
+    }
+    // Фокус перемещается только при включении подсветки или смене длины кода, не на каждый ввод.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showEmptyChars, isMobile, moveFocus, codeLength]);
+
+  return { resetCode };
+}

package/src/components/FieldCode/hooks/useFocusCell.ts

@@ -0,0 +1,26 @@
+import { useCallback, useRef } from 'react';
+
+export function useFocusCell(codeLength: number) {
+  const inputsRef = useRef<HTMLInputElement[]>([]);
+
+  const focusInput = useCallback((index: number) => {
+    inputsRef.current[index]?.focus();
+  }, []);
+
+  const moveFocus = useCallback(
+    (newIndex: number) => {
+      if (newIndex >= 0 && newIndex < codeLength) {
+        focusInput(newIndex);
+      }
+    },
+    [codeLength, focusInput],
+  );
+
+  const blurFields = useCallback(() => {
+    inputsRef.current.forEach(input => {
+      input?.blur();
+    });
+  }, []);
+
+  return { inputsRef, moveFocus, blurFields };
+}

package/src/components/FieldCode/hooks/useRefState.ts

@@ -0,0 +1,23 @@
+import { useMemo, useReducer, useRef } from 'react';
+
+/**
+ * Ref-контейнер, присваивание `.current` которого вызывает ре-рендер.
+ * Локальная замена `useRefState` из `@siberiacancode/reactuse` — пакет не тянем ради одного хука.
+ */
+export function useRefState<T>(initialValue: T) {
+  const [, forceRender] = useReducer((tick: number) => tick + 1, 0);
+  const ref = useRef(initialValue);
+
+  return useMemo(
+    () => ({
+      get current(): T {
+        return ref.current;
+      },
+      set current(value: T) {
+        ref.current = value;
+        forceRender();
+      },
+    }),
+    [],
+  );
+}

package/src/components/FieldCode/index.ts

@@ -0,0 +1,3 @@
+export * from './components/ResendCode';
+export * from './FieldCode';
+export * from './hooks/useFieldCodeValidate';

package/src/components/FieldCode/styles.module.scss

@@ -0,0 +1,51 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+$container-gaps: (
+  's': base.$sn-primitive-dimension-8,
+  'm': base.$sn-primitive-dimension-8,
+  'l': base.$sn-primitive-dimension-12,
+);
+
+.fieldCode {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+
+  // align-items: stretch перебивает center — без него дети остаются по ширине контента.
+  &[data-stretch-cells] {
+    align-items: stretch;
+    width: 100%;
+  }
+}
+
+.fieldCodeScrollable {
+  overflow-x: auto;
+}
+
+.fieldDecorator {
+  width: unset;
+}
+
+.codeContainer {
+  display: flex;
+  justify-content: safe center;
+
+  &[data-stretch-cells] {
+    width: 100%;
+  }
+
+  @each $size, $gap in $container-gaps {
+    &[data-size='#{$size}'] {
+      gap: $gap;
+    }
+  }
+}
+
+.cellSpacing {
+  @each $size, $margin-right in $container-gaps {
+    &[data-size='#{$size}'] {
+      margin-right: $margin-right;
+    }
+  }
+}

package/src/components/FieldCode/utils.ts

@@ -0,0 +1,23 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+
+import { ZERO_WIDTH_SPACE } from './constants';
+
+export const isNumberChar = (char: string) => /^\d$/.test(char);
+export const isStringCodeLength = (input: string, codeLength: number) => new RegExp(`^\\d{${codeLength}}$`).test(input);
+export const isZeroWidthSpace = (value: string) => value === ZERO_WIDTH_SPACE;
+
+export function getFirstEmptyCellIndex(code: readonly string[]): number {
+  return code.findIndex(isZeroWidthSpace);
+}
+
+export const getCellValidationState = (
+  value: string,
+  showEmptyChars?: boolean,
+  error?: boolean,
+): FieldComboProps['validationState'] => {
+  if (showEmptyChars) {
+    return isZeroWidthSpace(value) ? 'error' : 'default';
+  }
+
+  return error ? 'error' : 'default';
+};

package/src/components/FieldDescription/FieldDescription.tsx

@@ -0,0 +1,98 @@
+import { FieldTextArea } from '@cloud-ru/ds-fields';
+import mergeRefs from 'merge-refs';
+import { FocusEvent, forwardRef, useMemo, useRef, useState } from 'react';
+import { string, ValidationError } from 'yup';
+
+import { useCustomFieldValidation } from '../../hooks';
+import { fieldsPredefinedLocale } from '../../locale';
+import { FieldWithAddButton } from './components';
+import { DEFAULT_MAX_LENGTH } from './constants';
+import { FieldDescriptionProps } from './types';
+
+/**
+ * Поле «Описание» с локальным стейтом и валидацией (yup).
+ */
+export const FieldDescription = forwardRef<HTMLTextAreaElement, FieldDescriptionProps>(function FieldDescription(
+  {
+    size = 'm',
+    required = false,
+    maxLength = DEFAULT_MAX_LENGTH,
+    customSchema,
+    resizable = true,
+    addButton,
+    onValidationError,
+    value: propValue,
+    ...restProps
+  },
+  ref,
+) {
+  const { t } = fieldsPredefinedLocale.useTranslations();
+
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  const validationSchema = useMemo(() => {
+    let baseSchema = string()
+      .trim()
+      .max(maxLength, t('FieldDescription.maxSymbols', { max: maxLength }));
+
+    if (customSchema) {
+      baseSchema = baseSchema.concat(customSchema);
+    }
+
+    return required ? baseSchema.required(t('FieldDescription.required')) : baseSchema;
+  }, [customSchema, maxLength, required, t]);
+
+  const { validate } = useCustomFieldValidation({ schema: validationSchema });
+
+  const [internalValue, setInternalValue] = useState(propValue ?? '');
+  const [error, setError] = useState<ValidationError | null>(null);
+
+  // Как в FieldName: заданный `value` переводит поле в controlled-режим.
+  const value = propValue !== undefined ? propValue : internalValue;
+
+  const handleChange = (newValue: string) => {
+    setInternalValue(newValue);
+    restProps.onChange?.(newValue);
+    const result = validate(newValue);
+    setError(result.error);
+    onValidationError?.(result.error);
+  };
+
+  const handleBlur = (event: FocusEvent<HTMLTextAreaElement, Element>) => {
+    restProps.onBlur?.(event);
+    const result = validate(value);
+    setError(result.error);
+    onValidationError?.(result.error);
+  };
+
+  const errorMes = restProps.error ?? error?.message;
+
+  const standaloneComponent = (
+    <FieldTextArea
+      {...restProps}
+      resizable={resizable}
+      label={t('FieldDescription.label')}
+      placeholder={t('FieldDescription.placeholder')}
+      inputMode='text'
+      ref={mergeRefs(ref, textareaRef)}
+      size={size}
+      maxLength={maxLength}
+      value={value}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      validationState={errorMes ? 'error' : restProps.validationState}
+      hint={errorMes}
+      caption={!required ? t('FieldDescription.optional') : undefined}
+    />
+  );
+
+  if (addButton && !required) {
+    return (
+      <FieldWithAddButton autoFocusRef={textareaRef} size={size}>
+        {standaloneComponent}
+      </FieldWithAddButton>
+    );
+  }
+
+  return standaloneComponent;
+});

package/src/components/FieldDescription/FieldDescriptionRHF.tsx

@@ -0,0 +1,93 @@
+import { FieldTextArea } from '@cloud-ru/ds-fields';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useMemo, useRef } from 'react';
+import { Controller } from 'react-hook-form';
+import { string } from 'yup';
+
+import { useCustomFieldValidation } from '../../hooks';
+import { fieldsPredefinedLocale } from '../../locale';
+import { FieldWithAddButton } from './components/FieldWithAddButton';
+import { DEFAULT_MAX_LENGTH } from './constants';
+import { FieldDescriptionRHFProps } from './types';
+
+/**
+ * Поле «Описание» с обёрткой для react-hook-form.
+ */
+export const FieldDescriptionRHF = forwardRef<HTMLTextAreaElement, FieldDescriptionRHFProps>(
+  function FieldDescriptionRHF(
+    {
+      controllerProps,
+      customSchema,
+      size = 'm',
+      required = false,
+      maxLength = DEFAULT_MAX_LENGTH,
+      addButton,
+      resizable = true,
+      ...props
+    },
+    ref,
+  ) {
+    const { t } = fieldsPredefinedLocale.useTranslations();
+
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+    const validationSchema = useMemo(() => {
+      let baseSchema = string()
+        .trim()
+        .max(maxLength, t('FieldDescription.maxSymbols', { max: maxLength }));
+
+      if (customSchema) {
+        baseSchema = baseSchema.concat(customSchema);
+      }
+
+      return required ? baseSchema.required(t('FieldDescription.required')) : baseSchema;
+    }, [customSchema, maxLength, required, t]);
+
+    const { validateRHF } = useCustomFieldValidation({ schema: validationSchema });
+
+    const controllerComponent = (
+      <Controller
+        {...controllerProps}
+        rules={{ validate: validateRHF }}
+        render={({ field: { value, ref: localRef, onBlur, onChange }, fieldState: { error } }) => {
+          const errorMes = props.error ?? error?.message;
+
+          return (
+            <FieldTextArea
+              {...props}
+              resizable={resizable}
+              size={size}
+              label={t('FieldDescription.label')}
+              placeholder={t('FieldDescription.placeholder')}
+              inputMode='text'
+              ref={mergeRefs(ref, localRef, textareaRef)}
+              maxLength={maxLength}
+              value={value}
+              onChange={newValue => {
+                props.onChange?.(newValue);
+                onChange(newValue);
+              }}
+              onBlur={event => {
+                props.onBlur?.(event);
+                onBlur();
+              }}
+              validationState={errorMes ? 'error' : props.validationState}
+              hint={errorMes}
+              caption={!required ? t('FieldDescription.optional') : undefined}
+            />
+          );
+        }}
+      />
+    );
+
+    if (addButton && !required) {
+      return (
+        <FieldWithAddButton autoFocusRef={textareaRef} size={size}>
+          {controllerComponent}
+        </FieldWithAddButton>
+      );
+    }
+
+    return controllerComponent;
+  },
+);