@cloud-ru/uikit-product-fields-predefined 2.4.8-preview-5e39e65e.0 → 3.0.0

package/src/components/FieldAi/components/MobileFieldAi/styles.module.scss

@@ -1,90 +0,0 @@
-@use '@cloud-ru/figma-tokens-cloud-platform/build/scss/components/styles-tokens-fields' as ste;
-
-$padding-right: (
-  's': ste.$fields-buttons-s,
-  'm': ste.$fields-buttons-m,
-  'l': ste.$fields-buttons-m,
-);
-$scroll-bar-heights: (
-  's': ste.$dimension-050m,
-  'm': calc(#{ste.$dimension-025m} + #{ste.$dimension-050m}),
-  'l': ste.$dimension-1m,
-);
-$sizes: 's', 'm', 'l';
-
-.scrollContainer {
-  border-radius: 4px;
-  padding: 6px 0;
-
-  [data-overlayscrollbars-contents] {
-    display: flex;
-  }
-}
-
-.textarea {
-  overflow: hidden;
-}
-
-.mobileInputWrapper {
-  --max-rows: 1000;
-  --min-rows: 3;
-
-  display: flex;
-  position: relative;
-  gap: 8px;
-
-  .scrollContainer {
-    min-height: calc(var(--min-rows) * var(--row-height) + var(--horizontal-scroll-bar-height));
-    max-height: calc(var(--max-rows) * var(--row-height) + var(--horizontal-scroll-bar-height));
-  }
-
-  .textarea {
-    @include ste.composite-var(ste.$sans-body-l);
-
-    padding-right: calc(42px + ste.simple-var(ste.$fields-scroll-bar-width, 'width'));
-
-    &::placeholder {
-      color: ste.simple-var(ste.$sys-neutral-text-disabled);
-    }
-  }
-
-  @each $size in $sizes {
-    &[data-size='#{$size}'] {
-      --row-height: #{ste.simple-var(ste.$theme-variables, 'sans', 'body', $size, 'line-height')};
-      --horizontal-scroll-bar-height: #{ste.simple-var($scroll-bar-heights, $size)};
-    }
-  }
-}
-
-.mobileSubmitButtonWrapper {
-  width: 32px;
-  height: 32px;
-  display: flex;
-  flex-shrink: 0;
-  position: absolute;
-  bottom: 0;
-  right: 10px;
-}
-
-.mobileSubmitButton {
-  /* stylelint-disable-next-line declaration-no-important */
-  position: relative !important;
-  /* stylelint-disable-next-line declaration-no-important */
-  flex-shrink: 0 !important;
-
-  &:not([data-disabled]) {
-    /* stylelint-disable-next-line color-no-hex */
-    background: radial-gradient(229.88% 112% at 37.5% 77.08%, #26D07C 19.86%, #5FD7C2 50.73%, #7CB5F2 89.88%);
-  }
-
-  &:after {
-    content: '';
-    display: flex;
-    width: 48px;
-    height: 48px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}

package/src/components/FieldAi/components/PasswordValidation/PasswordValidation.tsx

@@ -1,85 +0,0 @@
-import { useMemo } from 'react';
-
-import { useLocale } from '@cloud-ru/uikit-product-locale';
-import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
-
-import { isTouchDevice as isTouchDeviceHelper } from '../../../../helpers';
-import { ValidationPassword, ValidationPasswordKey } from '../../utils';
-import { CheckItem } from '../CheckItem';
-import styles from './styles.module.scss';
-
-export type WithPasswordTooltipProps = WithLayoutType<{
-  passwordValidation: ValidationPassword;
-  animatedKey?: ValidationPasswordKey | null;
-}>;
-
-export function PasswordValidation({ passwordValidation, layoutType, animatedKey }: WithPasswordTooltipProps) {
-  const { t } = useLocale('FieldsPredefined');
-
-  const allCriteriaMet = useMemo(() => Object.values(passwordValidation).every(item => item), [passwordValidation]);
-  const isTouchDevice = isTouchDeviceHelper(layoutType);
-
-  if (isTouchDevice) {
-    if (allCriteriaMet) {
-      return (
-        <div className={styles.validationItemsContainer} data-layout-type={layoutType}>
-          <CheckItem
-            checked={true}
-            label={t('FieldAi.secret.passwordTooltip.titleSuccess')}
-            layoutType={layoutType}
-            shouldHide={false}
-          />
-        </div>
-      );
-    }
-  }
-
-  return (
-    <div className={styles.validationItemsContainer} data-layout-type={layoutType}>
-      <div className={styles.validationList}>
-        <CheckItem
-          checked={passwordValidation.minLength}
-          label={t('FieldAi.secret.passwordTooltip.minLength')}
-          layoutType={layoutType}
-          shouldHide={isTouchDevice}
-          animated={animatedKey === 'minLength'}
-        />
-        <CheckItem
-          checked={passwordValidation.onlyLatin}
-          label={t('FieldAi.secret.passwordTooltip.onlyLatin')}
-          layoutType={layoutType}
-          shouldHide={isTouchDevice}
-          animated={animatedKey === 'onlyLatin'}
-        />
-        <CheckItem
-          checked={passwordValidation.hasLetterCases}
-          label={t('FieldAi.secret.passwordTooltip.hasLetterCases')}
-          layoutType={layoutType}
-          shouldHide={isTouchDevice}
-          animated={animatedKey === 'hasLetterCases'}
-        />
-        <CheckItem
-          checked={passwordValidation.hasNumber}
-          label={t('FieldAi.secret.passwordTooltip.hasNumber')}
-          layoutType={layoutType}
-          shouldHide={isTouchDevice}
-          animated={animatedKey === 'hasNumber'}
-        />
-        <CheckItem
-          checked={passwordValidation.hasSymbol}
-          label={t('FieldAi.secret.passwordTooltip.hasSymbol')}
-          layoutType={layoutType}
-          shouldHide={isTouchDevice}
-          animated={animatedKey === 'hasSymbol'}
-        />
-        <CheckItem
-          checked={passwordValidation.noSpaces}
-          label={t('FieldAi.secret.passwordTooltip.noSpaces')}
-          layoutType={layoutType}
-          shouldHide={isTouchDevice}
-          animated={animatedKey === 'noSpaces'}
-        />
-      </div>
-    </div>
-  );
-}

package/src/components/FieldAi/components/PasswordValidation/index.ts

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

package/src/components/FieldAi/components/PasswordValidation/styles.module.scss

@@ -1,34 +0,0 @@
-@use '@cloud-ru/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
-
-.tooltipText {
-  display: flex;
-  flex-direction: column;
-}
-
-.validationList {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.validationItemsContainer {
-  @include ste.composite-var(ste.$sans-body-m);
-  color: ste.$sys-neutral-text-main;
-
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-
-  &[data-layout-type='mobile'],
-  &[data-layout-type='tablet'] {
-    gap: 8px;
-    @include ste.composite-var(ste.$sans-body-s);
-    padding: 8px 16px;
-
-
-    .validationList {
-      gap: 2px;
-    }
-  }
-}
-

package/src/components/FieldAi/components/TextArea/TextArea.tsx

@@ -1,113 +0,0 @@
-import cn from 'classnames';
-import {
-  ChangeEvent,
-  ChangeEventHandler,
-  FocusEventHandler,
-  forwardRef,
-  KeyboardEventHandler,
-  MouseEventHandler,
-  RefAttributes,
-  useState,
-} from 'react';
-import TextareaAutosize from 'react-textarea-autosize';
-
-import { InputPrivateProps } from '@snack-uikit/input-private';
-import { extractSupportProps, useLayoutEffect, WithSupportProps } from '@snack-uikit/utils';
-
-import styles from './styles.module.scss';
-
-export type TextAreaProps = RefAttributes<HTMLTextAreaElement> &
-  WithSupportProps<{
-    /** HTML-аттрибут name */
-    name?: string;
-    /** HTML-аттрибут value */
-    value?: string;
-    /** Колбек смены значения */
-    onChange?(value: string, e: ChangeEvent<HTMLTextAreaElement>): void;
-    /** HTML-аттрибут id */
-    id?: string;
-    className?: string;
-    /** Плейсхолдер */
-    placeholder?: string;
-    /** Является ли поле доступным только на чтение */
-    readonly?: boolean;
-    /** Является ли поле деактивированным */
-    disabled?: boolean;
-    /** Включен ли автокомплит */
-    autoComplete?: boolean;
-    /** Максимальное кол-во символов */
-    maxLength?: number;
-    /** Колбек получения фокуса */
-    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
-    /** Колбек потери фокуса */
-    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
-    /** Колбек нажатия клавиши клавиатуры */
-    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
-    /** HTML-аттрибут tab-index */
-    tabIndex?: number;
-    /** Минимальное кол-во строк, до которого размер поля может быть увеличен @default 3*/
-    minRows?: number;
-    /** Включение проверки орфографии @default true*/
-    spellCheck?: boolean;
-    /** Режим работы экранной клавиатуры */
-    inputMode?: InputPrivateProps['inputMode'];
-  }>;
-
-export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  (
-    {
-      name,
-      value = '',
-      onChange,
-      placeholder,
-      id,
-      className,
-      disabled = false,
-      readonly = false,
-      autoComplete = false,
-      maxLength,
-      onFocus,
-      onBlur,
-      onKeyDown,
-      tabIndex,
-      minRows = 3,
-      spellCheck,
-      inputMode,
-      ...rest
-    },
-    ref,
-  ) => {
-    // fix of height on the initial render
-    // see https://github.com/Andarist/react-textarea-autosize/issues/337#issuecomment-1024980737
-    const [, setIsRerendered] = useState(false);
-    useLayoutEffect(() => setIsRerendered(true), []);
-
-    const onChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = e => onChange?.(e.target.value, e);
-    const stopPropagation: MouseEventHandler<HTMLTextAreaElement> = e => e.stopPropagation();
-
-    return (
-      <TextareaAutosize
-        id={id}
-        name={name}
-        value={value}
-        ref={ref}
-        className={cn(className, styles.textarea)}
-        autoComplete={autoComplete ? 'on' : 'off'}
-        placeholder={placeholder}
-        disabled={disabled}
-        readOnly={readonly}
-        maxLength={maxLength}
-        onChange={onChangeHandler}
-        onClick={stopPropagation}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        onKeyDown={onKeyDown}
-        tabIndex={tabIndex}
-        minRows={minRows}
-        spellCheck={spellCheck}
-        inputMode={inputMode}
-        {...extractSupportProps(rest)}
-      />
-    );
-  },
-);

package/src/components/FieldAi/components/TextArea/index.ts

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

package/src/components/FieldAi/components/TextArea/styles.module.scss

@@ -1,35 +0,0 @@
-@use '@cloud-ru/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
-
-.textarea {
-  resize: none;
-
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 100%;
-  margin: 0;
-  padding: 0;
-
-  color: ste.simple-var(ste.$sys-neutral-text-main);
-
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
-  outline: 0;
-
-  &::placeholder {
-    color: ste.simple-var(ste.$sys-neutral-text-disabled);
-  }
-
-  &::-webkit-scrollbar {
-    width: 0;
-    max-width: 0;
-  }
-
-  &:read-only {
-    color: ste.simple-var(ste.$sys-neutral-text-support);
-  }
-
-  &[disabled] {
-    color: ste.simple-var(ste.$sys-neutral-text-disabled);
-  }
-}

package/src/components/FieldAi/components/WithPasswordValidation/WithPasswordValidation.tsx

@@ -1,63 +0,0 @@
-import { ReactNode } from 'react';
-
-import { AdaptiveTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
-import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
-
-import { isTouchDevice } from '../../../../helpers';
-import { ValidationPassword, ValidationPasswordKey } from '../../utils';
-import { PasswordValidation } from '../PasswordValidation';
-import styles from './styles.module.scss';
-
-export type WithPasswordTooltipProps = WithLayoutType<{
-  showValidation?: boolean;
-  children: ReactNode;
-  passwordValidation: ValidationPassword;
-  animatedKey?: ValidationPasswordKey | null;
-}>;
-
-export function WithPasswordValidation({
-  showValidation,
-  passwordValidation,
-  layoutType,
-  children,
-  animatedKey,
-}: WithPasswordTooltipProps) {
-  if (isTouchDevice(layoutType)) {
-    if (showValidation) {
-      return (
-        <div className={styles.validationContainer}>
-          <PasswordValidation
-            passwordValidation={passwordValidation}
-            layoutType={layoutType}
-            animatedKey={animatedKey}
-          />
-
-          {children}
-        </div>
-      );
-    }
-
-    return children;
-  }
-
-  if (showValidation) {
-    return (
-      <AdaptiveTooltip
-        placement={'left-end'}
-        layoutType={layoutType}
-        tip={
-          <PasswordValidation
-            passwordValidation={passwordValidation}
-            layoutType={layoutType}
-            animatedKey={animatedKey}
-          />
-        }
-        offset={8}
-      >
-        {children}
-      </AdaptiveTooltip>
-    );
-  }
-
-  return children;
-}

package/src/components/FieldAi/components/WithPasswordValidation/index.ts

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

package/src/components/FieldAi/components/WithPasswordValidation/styles.module.scss

@@ -1,8 +0,0 @@
-@use '@cloud-ru/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
-
-.validationContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  background-color: ste.$sys-neutral-background1-level;
-}

package/src/components/FieldAi/index.ts

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

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

@@ -1,85 +0,0 @@
-/* stylelint-disable color-no-hex */
-@use '@cloud-ru/figma-tokens-cloud-platform/build/scss/components/styles-tokens-fields' as ste;
-@use '@cloud-ru/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
-
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: ste.$dimension-050m;
-  position: relative;
-}
-
-.passwordWrapper {
-  gap: 0;
-}
-
-.alert {
-  display: flex;
-  gap: 8px;
-  padding: 4px 8px;
-  border-radius: 8px 8px 0 0;
-  border: 1px solid stv.$sys-blue-decor-activated;
-  background-color: stv.$sys-blue-decor-default;
-  box-sizing: border-box;
-  height: 38px;
-  position: absolute;
-  left: 0;
-  top: -26px;
-  width: 100%;
-  color: stv.$sys-neutral-text-main;
-}
-
-.alertText {
-  flex: 1;
-  min-width: 0;
-  color: stv.$sys-neutral-text-main;
-}
-
-.secured {
-  textarea {
-    -webkit-text-security: disc;
-    /* stylelint-disable-next-line property-no-unknown */
-    text-security: disc;
-  }
-}
-
-.mobileSubmitButton {
-  /* stylelint-disable-next-line declaration-no-important */
-  position: relative !important;
-  /* stylelint-disable-next-line declaration-no-important */
-  flex-shrink: 0 !important;
-
-  &:after {
-    content: '';
-    display: flex;
-    width: 48px;
-    height: 48px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
-.submitButton {
-  &:not([data-disabled]) {
-    background: radial-gradient(229.88% 112% at 37.5% 77.08%, #26D07C 19.86%, #5FD7C2 50.73%, #7CB5F2 89.88%);
-  }
-}
-
-.textarea {
-  & > :first-child {
-    &[data-validation='default']:not([data-readonly]):not([data-disable-focus]):focus-within:not([data-disabled]) {
-      border-color: transparent;
-      background:
-        linear-gradient(var(--sys-neutral-background2-level), var(--sys-neutral-background2-level) 0) padding-box,
-        radial-gradient(
-            57.79% 100% at 50% 0%,
-            #7cb5f2 38%,
-            #5fd7c2 79%,
-            #26d07c 90%
-          )
-          border-box;
-    }
-  }
-}

package/src/components/FieldAi/utils.ts

@@ -1,27 +0,0 @@
-export type ValidationPassword = {
-  onlyLatin: boolean;
-  minLength: boolean;
-  hasLetterCases: boolean;
-  hasNumber: boolean;
-  hasSymbol: boolean;
-  noSpaces: boolean;
-};
-
-export type ValidationPasswordKey = keyof ValidationPassword;
-
-const MIN_PASSWORD_LENGTH = 8;
-const NUMBER_REGEX = /[0-9]/;
-const CAPITAL_REGEX = /\p{Lu}/u;
-const LOWER_REGEX = /\p{Ll}/u;
-const SYMBOLS_REGEX = /[\p{P}\p{S}]/u;
-const NO_SPACES = /^\S*$/u;
-const LATIN_REGEX = /^[a-zA-Z0-9\p{P}\p{S}]+$/u;
-
-export const getValidationPassword = (password: string = ''): ValidationPassword => ({
-  onlyLatin: Boolean(password.match(LATIN_REGEX)),
-  minLength: password.length >= MIN_PASSWORD_LENGTH,
-  hasLetterCases: Boolean(password.match(CAPITAL_REGEX)) && Boolean(password.match(LOWER_REGEX)),
-  hasNumber: Boolean(password.match(NUMBER_REGEX)),
-  hasSymbol: Boolean(password.match(SYMBOLS_REGEX)),
-  noSpaces: Boolean(password.match(NO_SPACES)),
-});

package/src/components/FieldCode/FieldCode.tsx

@@ -1,125 +0,0 @@
-import cn from 'classnames';
-import { forwardRef, useImperativeHandle } from 'react';
-
-import { FieldDecorator, FieldDecoratorProps } from '@snack-uikit/fields';
-
-import { Cell, ResendCode, type ResendCodeProps } from './components';
-import { FIELD_CODE_DEFAULT_FOCUS_EFFECTS, type FieldCodeFocusEffect } from './constants';
-import { useCodeInput, UseCodeInputParams, useFieldHelpers, useFocusCell } from './hooks';
-import styles from './styles.module.scss';
-import { getCellValidationState } from './utils';
-
-export type FieldCodeRef = {
-  /** Перенести фокус на ячейку с индексом `index` */
-  moveFocus: (index: number) => void;
-  /** Убрать фокус со всех ячеек кода */
-  blurFields: () => void;
-  /** Сбросить значение кода */
-  resetCode: () => void;
-};
-
-/** Собственные пропсы `FieldCode` */
-export type FieldCodeOwnProps = {
-  /** CSS-класс компонента */
-  className?: string;
-  /** CSS-класс ячейки кода */
-  cellClassName?: string;
-  /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
-  spacing?: number[];
-  /** Подсветить пустые символы кода */
-  showEmptyChars?: boolean;
-  /** Компонент отправки нового кода */
-  resendCode?: ResendCodeProps;
-  /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
-  focusEffects?: readonly FieldCodeFocusEffect[];
-  /** Сообщение при неверном коде, если не передан свой `error` */
-  invalidCode?: string;
-};
-
-export type FieldCodeProps = FieldCodeOwnProps &
-  Omit<UseCodeInputParams, 'moveFocus'> &
-  Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
-
-export const FieldCode = forwardRef<FieldCodeRef, FieldCodeProps>(function FieldCode(props, ref) {
-  const {
-    codeLength,
-    className,
-    cellClassName,
-    value,
-    onChange,
-    spacing,
-    onComplete,
-    size,
-    disabled,
-    label,
-    error,
-    invalidCode,
-    showEmptyChars,
-    resendCode,
-    focusEffects = FIELD_CODE_DEFAULT_FOCUS_EFFECTS,
-    'data-test-id': dataTestId,
-  } = props;
-
-  const { inputsRef, moveFocus, blurFields } = useFocusCell(codeLength);
-  const { code, cellHandlers, onChangeCode } = useCodeInput({ value, onChange, codeLength, moveFocus, onComplete });
-  const { resetCode } = useFieldHelpers({
-    onChangeCode,
-    focusEffects,
-    moveFocus,
-    showEmptyChars,
-    code,
-    codeLength,
-  });
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      moveFocus,
-      blurFields,
-      resetCode,
-    }),
-    [moveFocus, blurFields, resetCode],
-  );
-
-  const resolvedError = error ?? invalidCode;
-
-  const resolvedDecoratorProps = {
-    label,
-    disabled,
-    size,
-    error: resolvedError,
-  };
-
-  return (
-    <div className={cn(styles.fieldCode, className)} {...(dataTestId ? { 'data-test-id': dataTestId } : undefined)}>
-      <FieldDecorator {...resolvedDecoratorProps}>
-        <div className={styles.codeContainer} data-size={size}>
-          {code.map((char, index) => (
-            <Cell
-              ref={inputRef => {
-                if (inputRef) {
-                  inputsRef.current[index] = inputRef;
-                }
-              }}
-              key={index}
-              className={cn(spacing?.includes(index) && styles.cellSpacing, cellClassName)}
-              size={size}
-              value={char}
-              disabled={disabled}
-              autoComplete={index === 0 ? 'one-time-code' : undefined}
-              onKeyDown={e => cellHandlers.onKeyDown(e, index)}
-              onPaste={cellHandlers.onPaste}
-              onChange={e => cellHandlers.onChange(e, index)}
-              validationState={getCellValidationState(char, showEmptyChars, Boolean(resolvedError))}
-            />
-          ))}
-        </div>
-      </FieldDecorator>
-
-      {resendCode ? <ResendCode {...resendCode} size={resendCode.size ?? size} /> : null}
-    </div>
-  );
-});
-
-export type { FieldCodeFocusEffect } from './constants';
-export { FIELD_CODE_DEFAULT_FOCUS_EFFECTS } from './constants';