@cloud-ru/uikit-product-fields-predefined 2.4.8-preview-04a474c4.0 → 3.0.0

package/src/components/FieldCode/components/Cell/Cell.tsx

@@ -1,32 +0,0 @@
-import cn from 'classnames';
-import { forwardRef } from 'react';
-
-import { FieldText, FieldTextProps } from '@snack-uikit/fields';
-
-import { ZERO_WIDTH_SPACE } from '../../constants';
-import styles from './styles.module.scss';
-
-type CellProps = {
-  /** CSS-класс ячейки кода */
-  className?: string;
-} & Pick<
-  FieldTextProps,
-  'size' | 'disabled' | 'value' | 'autoComplete' | 'onKeyDown' | 'onPaste' | 'onChange' | 'validationState'
->;
-
-export const Cell = forwardRef<HTMLInputElement, CellProps>((props, ref) => {
-  const { className, size, value, ...fieldCellProps } = props;
-
-  return (
-    <FieldText
-      inputMode='numeric'
-      ref={ref}
-      className={cn(styles.cell, className)}
-      data-size={size}
-      showClearButton={false}
-      value={value === ZERO_WIDTH_SPACE ? '' : value}
-      size={size}
-      {...fieldCellProps}
-    />
-  );
-});

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

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

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

@@ -1,5 +0,0 @@
-.cell {
-  input {
-    text-align: center;
-  }
-}

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

@@ -1,33 +0,0 @@
-import { UpdateSVG } from '@cloud-ru/uikit-product-icons';
-import { useLocale } from '@cloud-ru/uikit-product-locale';
-import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
-
-import { formatSecondsAsMmSs } from './utils';
-
-export type ResendCodeProps = {
-  /** Колбек отправки нового кода */
-  onResend: () => void;
-  /** Количество секунд до следующего отправления кода */
-  secondsToNextResend: number;
-} & Pick<ButtonFunctionProps, 'size' | 'disabled'>;
-
-export function ResendCode(props: ResendCodeProps) {
-  const { onResend, secondsToNextResend, ...buttonProps } = props;
-  const { t } = useLocale('FieldsPredefined');
-
-  return (
-    <ButtonFunction
-      label={
-        secondsToNextResend > 0
-          ? t('FieldCode.resendCodeButtons.resendCodeWithVia', {
-              timer: formatSecondsAsMmSs(secondsToNextResend),
-            })
-          : t('FieldCode.resendCodeButtons.resendCode')
-      }
-      onClick={onResend}
-      icon={<UpdateSVG />}
-      iconPosition='before'
-      {...buttonProps}
-    />
-  );
-}

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

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

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

@@ -1,5 +0,0 @@
-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

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

package/src/components/FieldCode/constants.ts

@@ -1,20 +0,0 @@
-export const ZERO_WIDTH_SPACE = '\u200B';
-
-/**
- * Когда дергать `moveFocus` у `FieldCode` (массив `focusEffects`, порядок не важен).
- * @see {@link FIELD_CODE_DEFAULT_FOCUS_EFFECTS}
- */
-export type FieldCodeFocusEffect =
-  /** После монтирования — ячейка `0`. */
-  | 'firstCellOnMount'
-  /** После `ref.resetCode()` — ячейка `0`. */
-  | 'firstCellOnReset'
-  /** При включении `showEmptyChars` — первая пустая (все заполнены — последняя); не на каждый ввод. */
-  | 'firstCellWhenShowEmptyChars';
-
-/** Дефолтный набор для `focusEffects`. */
-export const FIELD_CODE_DEFAULT_FOCUS_EFFECTS: readonly FieldCodeFocusEffect[] = [
-  'firstCellOnMount',
-  'firstCellOnReset',
-  'firstCellWhenShowEmptyChars',
-];

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

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

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

@@ -1,147 +0,0 @@
-import { useRefState } from '@siberiacancode/reactuse';
-import { ClipboardEvent, KeyboardEvent, useCallback, useEffect } from 'react';
-
-import { useValueControl } from '@snack-uikit/utils';
-
-import { ZERO_WIDTH_SPACE } from '../constants';
-import { isNumberChar, isStringCodeLength, isZeroWidthSpace } from '../utils';
-
-export type UseCodeInputParams = {
-  /** Количество цифр в коде (ожидается целое ≥ 1) */
-  codeLength: number;
-  /** Значение кода */
-  value?: string;
-  /** Колбек изменения значения */
-  onChange?: (code: string) => void;
-  /** Функция фокуса */
-  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/useFieldCodeValidate.ts

@@ -1,35 +0,0 @@
-import { useCallback } from 'react';
-
-import { useLocale } from '@cloud-ru/uikit-product-locale';
-
-import { isNumberChar } from '../utils';
-
-export type UseFieldCodeValidateParams = {
-  /** Ожидаемая длина кода (цифр) */
-  codeLength: number;
-};
-
-/**
- * Возвращает функцию валидации значения кода (пусто / неполный код).
- */
-export function useFieldCodeValidate(params: UseFieldCodeValidateParams) {
-  const { codeLength } = params;
-  const { t } = useLocale('FieldsPredefined');
-
-  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

@@ -1,52 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-
-import { type FieldCodeFocusEffect } from '../constants';
-import { getFirstEmptyCellIndex } from '../utils';
-
-type UseFieldHelpersParams = {
-  onChangeCode: (code: string) => void;
-  moveFocus: (index: number) => void;
-  focusEffects: readonly FieldCodeFocusEffect[];
-  showEmptyChars?: boolean;
-  code: readonly string[];
-  codeLength: number;
-};
-
-export function useFieldHelpers(params: UseFieldHelpersParams) {
-  const { onChangeCode, moveFocus, focusEffects: focusEffectsProp, showEmptyChars, code, codeLength } = params;
-
-  const focusEffectsKey = [...focusEffectsProp].sort().join(',');
-  const focusEffects = useMemo(
-    () => [...focusEffectsProp],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [focusEffectsKey],
-  );
-
-  const resetCode = useCallback(() => {
-    onChangeCode('');
-
-    if (focusEffects.includes('firstCellOnReset')) {
-      moveFocus(0);
-    }
-  }, [focusEffects, moveFocus, onChangeCode]);
-
-  useEffect(() => {
-    if (focusEffects.includes('firstCellOnMount')) {
-      moveFocus(0);
-    }
-  }, [focusEffects, moveFocus]);
-
-  useEffect(() => {
-    if (!focusEffects.includes('firstCellWhenShowEmptyChars') || !showEmptyChars) {
-      return;
-    }
-
-    const emptyIndex = getFirstEmptyCellIndex(code);
-    if (emptyIndex >= 0) {
-      moveFocus(emptyIndex);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showEmptyChars, focusEffects, moveFocus, codeLength]);
-
-  return { resetCode };
-}

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

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

package/src/components/FieldCode/index.ts

@@ -1,2 +0,0 @@
-export * from './FieldCode';
-export { useFieldCodeValidate, type UseFieldCodeValidateParams } from './hooks/useFieldCodeValidate';

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

@@ -1,40 +0,0 @@
-@use '@cloud-ru/figma-tokens-web/build/scss/components/styles-tokens-element' as ste;
-@use 'sass:map';
-
-.fieldCode {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.codeContainer {
-  display: flex;
-  justify-content: center;
-
-  $container-gaps: (
-    's': 8px,
-    'm': 8px,
-    'l': 12px,
-  );
-
-  @each $size, $gap in $container-gaps {
-    &[data-size='#{$size}'] {
-      gap: $gap;
-    }
-  }
-}
-
-.cellSpacing {
-  $spacing-sizes: (
-    's': 2px,
-    'm': 8px,
-    'l': 12px,
-  );
-
-  @each $size, $margin-right in $spacing-sizes {
-    &[data-size='#{$size}'] {
-      margin-right: $margin-right;
-    }
-  }
-}

package/src/components/FieldCode/utils.ts

@@ -1,23 +0,0 @@
-import { FieldTextProps } from '@snack-uikit/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,
-): FieldTextProps['validationState'] => {
-  if (showEmptyChars) {
-    return isZeroWidthSpace(value) ? 'error' : 'default';
-  }
-
-  return error ? 'error' : 'default';
-};