@cloud-ru/uikit-product-fields-predefined 0.13.11 → 0.14.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-fields-predefined",
   "title": "Fields Predefined",
-  "version": "0.13.11",
+  "version": "0.14.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,15 +34,15 @@
   "dependencies": {
     "@cloud-ru/uikit-product-icons": "16.0.0",
     "@cloud-ru/uikit-product-mobile-dropdown": "0.9.28",
-    "@cloud-ru/uikit-product-mobile-fields": "0.11.31",
+    "@cloud-ru/uikit-product-mobile-fields": "0.12.0",
     "@cloud-ru/uikit-product-mobile-modal": "0.9.25",
     "@cloud-ru/uikit-product-mobile-tooltip": "0.5.1",
     "@cloud-ru/uikit-product-utils": "8.0.1",
     "@snack-uikit/attachment": "0.4.10",
-    "@snack-uikit/button": "0.19.11",
+    "@snack-uikit/button": "0.19.16",
     "@snack-uikit/drop-zone": "0.9.6",
     "@snack-uikit/icon-predefined": "0.7.3",
-    "@snack-uikit/input-private": "4.8.1",
+    "@snack-uikit/input-private": "4.8.5",
     "@snack-uikit/scroll": "0.10.1",
     "@snack-uikit/tooltip": "0.17.4",
     "@snack-uikit/typography": "0.8.7",
@@ -57,7 +57,9 @@
     "@types/merge-refs": "1.0.0"
   },
   "peerDependencies": {
-    "@cloud-ru/uikit-product-locale": "*"
+    "@cloud-ru/uikit-product-locale": "*",
+    "react-hook-form": ">=7.51.0",
+    "yup": ">=0.32.0"
   },
-  "gitHead": "f67d8d3987dc49157789aebe9e083c42d0abf5c3"
+  "gitHead": "6366d4a4912c09f95af6ba794df7b5a246893762"
 }

package/src/components/FieldDescription/FieldDescription.tsx

@@ -0,0 +1,97 @@
+import mergeRefs from 'merge-refs';
+import { FocusEvent, forwardRef, useMemo, useRef, useState } from 'react';
+import { string, ValidationError } from 'yup';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveFieldTextArea } from '@cloud-ru/uikit-product-mobile-fields';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+
+import { useCustomFieldValidation } from '../../hooks';
+import { FieldWithAddButton } from './components';
+import { DEFAULT_MAX_LENGTH } from './constants';
+import { FieldDescriptionProps } from './types';
+
+/**
+ * Поле описание c локальным стейтом и валидацией
+ */
+export const FieldDescription = forwardRef<HTMLTextAreaElement, WithLayoutType<FieldDescriptionProps>>(
+  (
+    {
+      size = 'm',
+      required = false,
+      maxLength = DEFAULT_MAX_LENGTH,
+      customSchema,
+      resizable = true,
+      addButton,
+      onValidationError,
+      ...props
+    },
+    ref,
+  ) => {
+    const { t } = useLocale('FieldsPredefined');
+
+    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 [value, setValue] = useState('');
+    const [error, setError] = useState<ValidationError | null>(null);
+
+    const handleChange = (newValue: string) => {
+      setValue(newValue);
+      props.onChange?.(newValue);
+      const result = validate(newValue);
+      setError(result.error);
+      onValidationError?.(result.error);
+    };
+
+    const handleBlur = (newValue: FocusEvent<HTMLTextAreaElement, Element>) => {
+      props.onBlur?.(newValue);
+      const result = validate(value);
+      setError(result.error);
+      onValidationError?.(result.error);
+    };
+
+    const errorMes = props.error ?? error?.message;
+
+    const standaloneComponent = (
+      <AdaptiveFieldTextArea
+        {...props}
+        resizable={resizable}
+        label={t('FieldDescription.label')}
+        inputMode='text'
+        ref={mergeRefs(ref, textareaRef)}
+        size={size}
+        maxLength={maxLength}
+        value={value}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        validationState={errorMes ? 'error' : props.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 mergeRefs from 'merge-refs';
+import { forwardRef, useMemo, useRef } from 'react';
+import { Controller } from 'react-hook-form';
+import { string } from 'yup';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveFieldTextArea } from '@cloud-ru/uikit-product-mobile-fields';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+
+import { useCustomFieldValidation } from '../../hooks';
+import { FieldWithAddButton } from './components/FieldWithAddButton';
+import { DEFAULT_MAX_LENGTH } from './constants';
+import { FieldDescriptionRHFProps } from './types';
+
+/**
+ * Поле описание c оберткой для React Hook Form
+ */
+export const FieldDescriptionRHF = forwardRef<HTMLTextAreaElement, WithLayoutType<FieldDescriptionRHFProps>>(
+  (
+    {
+      controllerProps,
+      customSchema,
+      size = 'm',
+      required = false,
+      maxLength = DEFAULT_MAX_LENGTH,
+      addButton,
+      resizable = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const { t } = useLocale('FieldsPredefined');
+    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 (
+            <AdaptiveFieldTextArea
+              {...props}
+              resizable={resizable}
+              size={size}
+              label={t('FieldDescription.label')}
+              inputMode='text'
+              ref={mergeRefs(ref, localRef, textareaRef)}
+              maxLength={maxLength}
+              value={value}
+              onChange={newValue => {
+                props.onChange?.(newValue);
+                onChange(newValue);
+              }}
+              onBlur={value => {
+                props.onBlur?.(value);
+                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;
+  },
+);

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

@@ -0,0 +1,43 @@
+import { RefObject, useEffect, useState } from 'react';
+
+import { PlusSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
+import { ButtonFunction } from '@snack-uikit/button';
+
+export function FieldWithAddButton({
+  children,
+  size,
+  autoFocusRef,
+}: {
+  children: React.ReactNode;
+  size?: FieldTextAreaProps['size'];
+  autoFocusRef: RefObject<HTMLTextAreaElement | null>;
+}) {
+  const { t } = useLocale('FieldsPredefined');
+  const [showField, setShowField] = useState(false);
+
+  useEffect(() => {
+    if (showField && autoFocusRef.current) {
+      autoFocusRef.current.focus();
+    }
+  }, [showField, autoFocusRef]);
+
+  if (showField) {
+    return children;
+  }
+
+  return (
+    <div>
+      {!showField && (
+        <ButtonFunction
+          icon={<PlusSVG />}
+          iconPosition='before'
+          label={t('FieldDescription.addButton')}
+          onClick={() => setShowField(true)}
+          size={size}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export { FieldWithAddButton } 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 { FieldDescription } from './FieldDescription';
+export { FieldDescriptionRHF } from './FieldDescriptionRHF';
+export type { FieldDescriptionProps, FieldDescriptionPropsBase, FieldDescriptionRHFProps } from './types';

package/src/components/FieldDescription/types.ts

@@ -0,0 +1,23 @@
+import { ControllerProps, FieldValues } from 'react-hook-form';
+import { StringSchema, ValidationError } from 'yup';
+
+import { FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
+
+export type FieldDescriptionPropsBase = Omit<
+  FieldTextAreaProps,
+  'placeholder' | 'label' | 'footer' | 'searchPlaceholder' | 'hint' | 'inputMode' | 'caption' | 'name'
+> & {
+  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/FieldName/FieldName.tsx

@@ -0,0 +1,125 @@
+import mergeRefs from 'merge-refs';
+import { FocusEvent, forwardRef, useMemo, useRef, useState } from 'react';
+import { string, ValidationError } from 'yup';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveFieldText } from '@cloud-ru/uikit-product-mobile-fields';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { runAfterRerender } from '@snack-uikit/input-private';
+
+import { useCustomFieldValidation } from '../../hooks';
+import { DEFAULT_MAX_NAME_LENGTH } from './constants';
+import { FieldNameProps } from './types';
+
+/**
+ * Поле имя c локальным стейтом и валидацией
+ */
+export const FieldName = forwardRef<HTMLInputElement, WithLayoutType<FieldNameProps>>((props, ref) => {
+  const { t } = useLocale('FieldsPredefined');
+
+  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);
+  };
+
+  const shouldShowCounter =
+    currentError && (currentError?.match(t('FieldName.maxSymbols', { max: maxLength })) || isRequiredError);
+
+  // Ошибка обязательного поля появляется после blur
+  const showError = currentError && ((isRequiredError && !isFocused) || !isRequiredError);
+
+  return (
+    <AdaptiveFieldText
+      {...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}
+      caption={!required ? t('FieldDescription.optional') : undefined}
+    />
+  );
+});

package/src/components/FieldName/FieldNameRHF.tsx

@@ -0,0 +1,112 @@
+import mergeRefs from 'merge-refs';
+import { FocusEventHandler, forwardRef, useMemo, useState } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { string } from 'yup';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveFieldText } from '@cloud-ru/uikit-product-mobile-fields';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { runAfterRerender } from '@snack-uikit/input-private';
+
+import { useCustomFieldValidation } from '../../hooks';
+import { DEFAULT_MAX_NAME_LENGTH } from './constants';
+import { FieldNameRHFProps } from './types';
+
+/**
+ * Поле имя c оберткой для React Hook Form
+ */
+export const FieldNameRHF = forwardRef<HTMLInputElement, WithLayoutType<FieldNameRHFProps>>((props, ref) => {
+  const { t } = useLocale('FieldsPredefined');
+
+  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);
+
+        // - Есть ошибка обязательного поля и поле не в фокусе
+        // - Или другая ошибка
+        // - Или принудительно показываем ошибку
+        const showError = error && ((isRequiredError && !isFocused) || !isRequiredError);
+
+        const errorMes = propError ?? error?.message;
+
+        const handleChange = (newValue: string) => {
+          inputProps.onChange?.(newValue);
+          onChange(newValue);
+        };
+
+        const handleBlur: FocusEventHandler<HTMLInputElement> = value => {
+          runAfterRerender(() => setIsFocused(false));
+
+          inputProps.onBlur?.(value);
+          onBlur();
+        };
+
+        return (
+          <AdaptiveFieldText
+            {...inputProps}
+            inputMode='text'
+            onClearButtonClick={() => trigger(controllerProps.name)}
+            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}
+            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 { FieldName } from './FieldName';
+export { FieldNameRHF } from './FieldNameRHF';
+export type { BaseFieldNameProps, FieldNameRHFProps, FieldNameProps } from './types';

package/src/components/FieldName/types.ts

@@ -0,0 +1,22 @@
+import { ControllerProps, FieldValues } from 'react-hook-form';
+import { StringSchema, ValidationError } from 'yup';
+
+import { FieldTextProps } from '@cloud-ru/uikit-product-mobile-fields';
+
+export type BaseFieldNameProps = Omit<
+  FieldTextProps,
+  'placeholder' | 'label' | 'footer' | 'type' | 'inputMode' | 'caption' | 'hint'
+> & {
+  showLabel?: boolean;
+  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'>;
+};

package/src/components/index.ts

@@ -3,3 +3,5 @@ export * from './SelectCreate';
 export * from './FieldAi';
 export * from './FieldChat';
 export * from './AIDisclaimer';
+export * from './FieldName';
+export * from './FieldDescription';

package/src/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useOpen';
+export * from './useCustomFieldValidation';

package/src/hooks/useCustomFieldValidation.ts

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+import { AnySchema, ValidationError } from 'yup';
+
+export type UseFieldValidationProps = {
+  schema: AnySchema;
+};
+
+export const useCustomFieldValidation = ({ schema }: UseFieldValidationProps) => {
+  const validate = useCallback(
+    (value: string) => {
+      try {
+        schema.validateSync(value);
+        return { error: null };
+      } catch (err: unknown) {
+        if (err instanceof ValidationError) {
+          return { error: err };
+        }
+        return { error: null };
+      }
+    },
+    [schema],
+  );
+
+  const validateRHF = useCallback(
+    (value: string) => {
+      try {
+        schema.validateSync(value);
+        return true;
+      } catch (err: unknown) {
+        if (err instanceof ValidationError) return err.message;
+        return;
+      }
+    },
+    [schema],
+  );
+
+  return { validate, validateRHF };
+};