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

package/src/components/FieldDescription/components/FieldWithAddButton.tsx

@@ -0,0 +1,51 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { Button, ICON_POSITION, VIEW } from '@cloud-ru/ds-button';
+import { FieldTextAreaProps } from '@cloud-ru/ds-fields';
+import { PlusSVG } from '@cloud-ru/ds-icons/interface/system';
+import { ReactNode, RefObject, useCallback, useEffect, useState } from 'react';
+
+import { TEST_IDS } from '../../../constants';
+import { fieldsPredefinedLocale } from '../../../locale';
+
+export function FieldWithAddButton({
+  children,
+  size = 'm',
+  autoFocusRef,
+}: {
+  children: ReactNode;
+  size?: FieldTextAreaProps['size'];
+  autoFocusRef: RefObject<HTMLTextAreaElement | null>;
+}) {
+  const { t } = fieldsPredefinedLocale.useTranslations();
+  const [showField, setShowField] = useState(false);
+
+  const { layoutType } = useAdaptiveLayout();
+  const isMobile = isMobileLayout(layoutType);
+
+  const handleAddClick = useCallback(() => setShowField(true), []);
+
+  useEffect(() => {
+    // На mobile автофокус запрещён — он принудительно открывает экранную клавиатуру.
+    if (showField && !isMobile && autoFocusRef.current) {
+      autoFocusRef.current.focus();
+    }
+  }, [showField, isMobile, autoFocusRef]);
+
+  if (showField) {
+    return children;
+  }
+
+  return (
+    <div>
+      <Button
+        view={VIEW.Function}
+        icon={<PlusSVG />}
+        iconPosition={ICON_POSITION.Before}
+        label={t('FieldDescription.addButton')}
+        onClick={handleAddClick}
+        size={size}
+        data-test-id={TEST_IDS.fieldDescriptionAddButton}
+      />
+    </div>
+  );
+}

package/src/components/FieldDescription/components/index.ts

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

package/src/components/FieldDescription/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_MAX_LENGTH = 255;

package/src/components/FieldDescription/index.ts

@@ -0,0 +1,3 @@
+export * from './FieldDescription';
+export * from './FieldDescriptionRHF';
+export * from './types';

package/src/components/FieldDescription/types.ts

@@ -0,0 +1,23 @@
+import { FieldTextAreaProps } from '@cloud-ru/ds-fields';
+import { ControllerProps, FieldValues } from 'react-hook-form';
+import { StringSchema, ValidationError } from 'yup';
+
+export type FieldDescriptionPropsBase = Omit<
+  FieldTextAreaProps,
+  'placeholder' | 'label' | 'footer' | 'searchPlaceholder' | 'hint' | 'inputMode' | 'caption' | 'name'
+> & {
+  /** Дополнительная yup-схема, которая конкатенируется к встроенной */
+  customSchema?: StringSchema;
+  /** Поле появляется по кнопке «Добавить описание» (только для опционального поля) */
+  addButton?: boolean;
+};
+
+export type FieldDescriptionProps = FieldDescriptionPropsBase & {
+  /** Колбэк, вызываемый при изменении ошибки валидации (только в standalone-режиме) */
+  onValidationError?(error: ValidationError | null): void;
+};
+
+export type FieldDescriptionRHFProps = FieldDescriptionPropsBase & {
+  /** Режим контроллера с использованием react-hook-form */
+  controllerProps: Omit<ControllerProps<FieldValues>, 'render' | 'rules' | 'disabled'>;
+};

package/src/components/FieldMask/FieldMask.tsx

@@ -0,0 +1,56 @@
+import { FieldCombo, FieldComboProps } from '@cloud-ru/ds-fields';
+import { InputMask } from 'imask';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useEffect } from 'react';
+import { useIMask } from 'react-imask';
+
+import { BASE_MASK_OPTIONS, MASK_OPTIONS } from './constants';
+import { Mask } from './types';
+
+export type FieldMaskProps = Omit<FieldComboProps, 'value' | 'onChange' | 'inputMode'> & {
+  /** Значение поля (controlled-режим) */
+  value?: string;
+  /** Колбек смены значения; вторым аргументом — экземпляр маски imask */
+  onChange?(value: string, mask: InputMask): void;
+  /** Предустановленная маска поля */
+  mask: Mask;
+};
+
+export const FieldMask = forwardRef<HTMLInputElement, FieldMaskProps>(function FieldMask(
+  { value: valueProp, onChange, mask, size = 'm', ...props },
+  ref,
+) {
+  const maskOptions = MASK_OPTIONS[mask];
+
+  const {
+    ref: maskedRef,
+    value,
+    setValue,
+  } = useIMask(
+    { ...BASE_MASK_OPTIONS, ...maskOptions.options },
+    {
+      defaultValue: valueProp,
+      onAccept: onChange,
+    },
+  );
+
+  useEffect(() => {
+    if (valueProp !== undefined && valueProp !== value) {
+      setValue(valueProp);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [valueProp]);
+
+  return (
+    <FieldCombo
+      // @ts-expect-error тип maskedRef из react-imask не совпадает с ref-типом FieldCombo
+      ref={mergeRefs(ref, maskedRef)}
+      value={value}
+      onChange={setValue}
+      placeholder={maskOptions.placeholder}
+      inputMode={maskOptions.inputMode ?? 'numeric'}
+      size={size}
+      {...props}
+    />
+  );
+});

package/src/components/FieldMask/constants.ts

@@ -0,0 +1,70 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+
+import { Mask } from './types';
+
+export const MASK = {
+  Code: 'code',
+  Uuid: 'uuid',
+  Passport: 'passport',
+  Snils: 'snils',
+  IpV4Address: 'ip-v4-address',
+  IpV4AddressWithMask: 'ip-v4-address-with-mask',
+} as const;
+
+export const MASK_OPTIONS: Record<
+  Mask,
+  {
+    placeholder: string;
+    options: Record<string, unknown>;
+    inputMode?: FieldComboProps['inputMode'];
+  }
+> = {
+  [MASK.Uuid]: {
+    placeholder: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
+    options: {
+      mask: 'hhhhhhhh-hhhh-hhhh-hhhh-hhhhhhhhhhhh',
+      placeholderChar: '_',
+      definitions: {
+        h: /[0-9a-f]/,
+      },
+    },
+    inputMode: 'text',
+  },
+  [MASK.Code]: {
+    placeholder: 'XXXX',
+    options: {
+      mask: '0000',
+      placeholderChar: '_',
+    },
+    inputMode: 'numeric',
+  },
+  [MASK.Passport]: {
+    placeholder: 'XXXX XXXXXX',
+    options: {
+      mask: '0000 000000',
+    },
+    inputMode: 'numeric',
+  },
+  [MASK.Snils]: {
+    placeholder: 'XXXXXX-XXX XX',
+    options: {
+      mask: '000000-000 00',
+    },
+    inputMode: 'numeric',
+  },
+  [MASK.IpV4Address]: {
+    placeholder: '___.___.___.___',
+    options: { mask: '0[00]{.}`0[00]{.}`0[00]{.}`0[00]' },
+    inputMode: 'numeric',
+  },
+  [MASK.IpV4AddressWithMask]: {
+    placeholder: '___.___.___.___/__',
+    options: { mask: '0[00]{.}`0[00]{.}`0[00]{.}`0[00]{/}`0[0]' },
+    inputMode: 'numeric',
+  },
+};
+
+export const BASE_MASK_OPTIONS = {
+  lazy: true,
+  autofix: true,
+} as const;

package/src/components/FieldMask/index.ts

@@ -0,0 +1,3 @@
+export { MASK } from './constants';
+export * from './FieldMask';
+export * from './types';

package/src/components/FieldMask/types.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+
+import { MASK } from './constants';
+
+export type Mask = ValueOf<typeof MASK>;

package/src/components/FieldName/FieldName.tsx

@@ -0,0 +1,126 @@
+import { FieldCombo } from '@cloud-ru/ds-fields';
+import { runAfterRerender } from '@cloud-ru/ds-input-private';
+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 { DEFAULT_MAX_NAME_LENGTH } from './constants';
+import { FieldNameProps } from './types';
+
+/**
+ * Поле «Имя» с локальным стейтом и валидацией (yup).
+ */
+export const FieldName = forwardRef<HTMLInputElement, FieldNameProps>(function FieldName(props, ref) {
+  const { t } = fieldsPredefinedLocale.useTranslations();
+
+  const {
+    value: propValue = '',
+    onChange: propOnChange,
+    onBlur: propOnBlur,
+    error: propError,
+    maxLength = DEFAULT_MAX_NAME_LENGTH,
+    required = true,
+    customSchema,
+    showLabel = true,
+    allowMoreThanMaxLength = true,
+    size = 'm',
+    ...inputProps
+  } = props;
+
+  const [internalValue, setInternalValue] = useState(propValue);
+  const [validationError, setValidationError] = useState<ValidationError | null>(null);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const validationSchema = useMemo(() => {
+    let baseSchema = string()
+      .test('maxLength', t('FieldName.maxSymbols', { max: maxLength }), value => {
+        if (!value) return true;
+        return value.length <= maxLength;
+      })
+      .matches(/^[a-zA-Z0-9.\-_]*$/, {
+        message: t('FieldName.wrongSymbols'),
+        name: 'allowedSymbols',
+        excludeEmptyString: true,
+      });
+
+    if (customSchema) {
+      baseSchema = baseSchema.concat(customSchema);
+    }
+
+    return required ? baseSchema.required(t('FieldName.required')) : baseSchema;
+  }, [customSchema, maxLength, required, t]);
+
+  const { validate } = useCustomFieldValidation({ schema: validationSchema });
+
+  const currentValue = 'value' in props ? propValue : internalValue;
+  const currentError = propError || validationError?.message;
+  const isRequiredError = currentError?.match(t('FieldName.required'));
+
+  const handleChange = (newValue: string) => {
+    const result = validate(newValue);
+    // Если была required-ошибка и пользователь начал ввод — очищаем её.
+    if (isRequiredError && !isFocused) {
+      setValidationError(null);
+    } else if (result.error && result.error.message !== t('FieldName.required')) {
+      // Любую НЕ required ошибку показываем сразу.
+      setValidationError(result.error);
+    } else {
+      setValidationError(null);
+    }
+
+    setInternalValue(newValue);
+    propOnChange?.(newValue);
+  };
+
+  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+    runAfterRerender(() => setIsFocused(false));
+
+    const result = validate(currentValue);
+    setValidationError(result.error);
+    props.onValidationError?.(result.error);
+    propOnBlur?.(e);
+  };
+
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+
+  const handleClear = () => {
+    const result = validate('');
+    setValidationError(result.error);
+    props.onValidationError?.(result.error);
+  };
+
+  // Ошибка обязательного поля появляется после blur.
+  const showError = currentError && ((isRequiredError && !isFocused) || !isRequiredError);
+
+  // Счётчик — только при ошибке длины/обязательности (как в FieldNameRHF).
+  const shouldShowCounter =
+    Boolean(currentError) &&
+    (Boolean(currentError?.match(t('FieldName.maxSymbols', { max: maxLength }))) || Boolean(isRequiredError));
+
+  return (
+    <FieldCombo
+      {...inputProps}
+      inputMode='text'
+      onClearButtonClick={handleClear}
+      allowMoreThanMaxLength={allowMoreThanMaxLength}
+      ref={mergeRefs(ref, inputRef)}
+      value={currentValue}
+      onChange={handleChange}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      validationState={showError ? 'error' : inputProps.validationState}
+      hint={showError ? currentError : undefined}
+      maxLength={shouldShowCounter && showError ? maxLength : undefined}
+      size={size}
+      label={showLabel ? t('FieldName.label') : undefined}
+      placeholder={t('FieldName.placeholder')}
+      caption={!required ? t('FieldDescription.optional') : undefined}
+    />
+  );
+});

package/src/components/FieldName/FieldNameRHF.tsx

@@ -0,0 +1,114 @@
+import { FieldCombo } from '@cloud-ru/ds-fields';
+import { runAfterRerender } from '@cloud-ru/ds-input-private';
+import mergeRefs from 'merge-refs';
+import { FocusEventHandler, forwardRef, useMemo, useState } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { string } from 'yup';
+
+import { useCustomFieldValidation } from '../../hooks';
+import { fieldsPredefinedLocale } from '../../locale';
+import { DEFAULT_MAX_NAME_LENGTH } from './constants';
+import { FieldNameRHFProps } from './types';
+
+/**
+ * Поле «Имя» с обёрткой для react-hook-form.
+ */
+export const FieldNameRHF = forwardRef<HTMLInputElement, FieldNameRHFProps>(function FieldNameRHF(props, ref) {
+  const { t } = fieldsPredefinedLocale.useTranslations();
+
+  const {
+    controllerProps,
+    maxLength = DEFAULT_MAX_NAME_LENGTH,
+    required = true,
+    customSchema,
+    showLabel = true,
+    size = 'm',
+    allowMoreThanMaxLength = true,
+    error: propError,
+    ...inputProps
+  } = props;
+
+  const [isFocused, setIsFocused] = useState(false);
+  const { trigger } = useFormContext();
+
+  const validationSchema = useMemo(() => {
+    let baseSchema = string()
+      .test('maxLength', t('FieldName.maxSymbols', { max: maxLength }), value => {
+        if (!value) return true;
+        return value.length <= maxLength;
+      })
+      .matches(/^[a-zA-Z0-9.\-_]*$/, {
+        message: t('FieldName.wrongSymbols'),
+        name: 'allowedSymbols',
+        excludeEmptyString: true,
+      });
+
+    if (customSchema) {
+      baseSchema = baseSchema.concat(customSchema);
+    }
+
+    return required ? baseSchema.required(t('FieldName.required')) : baseSchema;
+  }, [customSchema, maxLength, required, t]);
+
+  const { validateRHF } = useCustomFieldValidation({ schema: validationSchema });
+
+  const handleFocus: FocusEventHandler<HTMLInputElement> = value => {
+    setIsFocused(true);
+    inputProps.onFocus?.(value);
+  };
+
+  return (
+    <Controller
+      {...controllerProps}
+      rules={{ validate: validateRHF }}
+      render={({ field: { value, ref: localRef, onBlur, onChange }, fieldState: { error } }) => {
+        const isRequiredError = Boolean(error && error.message?.match(t('FieldName.required')));
+        const shouldShowCounter =
+          error && (error.message?.match(t('FieldName.maxSymbols', { max: maxLength })) || isRequiredError);
+
+        // Показываем ошибку, если: required-ошибка и поле не в фокусе; либо любая другая ошибка;
+        // либо ошибка передана принудительно через проп `error`.
+        const showError = error && ((isRequiredError && !isFocused) || !isRequiredError);
+
+        const errorMes = propError ?? error?.message;
+
+        const handleClearButtonClick = () => {
+          trigger(controllerProps.name);
+        };
+
+        const handleChange = (newValue: string) => {
+          inputProps.onChange?.(newValue);
+          onChange(newValue);
+        };
+
+        const handleBlur: FocusEventHandler<HTMLInputElement> = value => {
+          runAfterRerender(() => setIsFocused(false));
+
+          inputProps.onBlur?.(value);
+          onBlur();
+        };
+
+        return (
+          <FieldCombo
+            {...inputProps}
+            inputMode='text'
+            onClearButtonClick={handleClearButtonClick}
+            allowMoreThanMaxLength={allowMoreThanMaxLength}
+            ref={mergeRefs(ref, localRef)}
+            value={value}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            validationState={showError ? 'error' : inputProps.validationState}
+            hint={showError ? errorMes : undefined}
+            maxLength={shouldShowCounter && showError ? maxLength : undefined}
+            size={size}
+            label={showLabel ? t('FieldName.label') : undefined}
+            placeholder={t('FieldName.placeholder')}
+            caption={!required ? t('FieldDescription.optional') : undefined}
+          />
+        );
+      }}
+    />
+  );
+});

package/src/components/FieldName/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_MAX_NAME_LENGTH = 64;

package/src/components/FieldName/index.ts

@@ -0,0 +1,3 @@
+export * from './FieldName';
+export * from './FieldNameRHF';
+export * from './types';

package/src/components/FieldName/types.ts

@@ -0,0 +1,28 @@
+import { FieldComboProps } from '@cloud-ru/ds-fields';
+import { ControllerProps, FieldValues } from 'react-hook-form';
+import { StringSchema, ValidationError } from 'yup';
+
+export type BaseFieldNameProps = Omit<
+  FieldComboProps,
+  'placeholder' | 'label' | 'footer' | 'type' | 'inputMode' | 'caption' | 'hint'
+> & {
+  /** Показывать предустановленный лейбл «Имя» */
+  showLabel?: boolean;
+  /**
+   * Дополнительная yup-схема, конкатенируется к встроенной (обязательность, длина, допустимые символы).
+   * Через неё подключают data-зависимые проверки, которые компонент не может выполнить сам — например,
+   * проверку уникальности имени по данным потребителя. Текст ошибки можно взять из локали пакета:
+   * `fieldsPredefinedLocale.useTranslations().t('FieldName.errorDuplicate')`.
+   */
+  customSchema?: StringSchema;
+};
+
+export type FieldNameProps = BaseFieldNameProps & {
+  /** Колбэк, вызываемый при изменении ошибки валидации */
+  onValidationError?(error: ValidationError | null): void;
+};
+
+export type FieldNameRHFProps = BaseFieldNameProps & {
+  /** Режим контроллера с использованием react-hook-form */
+  controllerProps: Omit<ControllerProps<FieldValues>, 'render' | 'rules' | 'disabled'>;
+};