@cloud-ru/uikit-product-fields-predefined 0.13.3

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

@@ -0,0 +1,28 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
+
+.checkItem {
+  display: inline-flex;
+  gap: 10px;
+
+  &[data-layout-type='mobile'],
+  &[data-layout-type='tablet'] {
+    gap: 8px;
+  }
+}
+
+.icon {
+  flex-shrink: 0;
+  color: ste.$sys-neutral-accent-default;
+
+  &[data-checked='true'] {
+    color: ste.$sys-primary-text-light;
+  }
+}
+
+.label {
+  color: ste.$sys-neutral-text-light;
+
+  &[data-checked='true'] {
+    color: ste.$sys-primary-text-light;
+  }
+}

package/src/components/FieldAi/components/MobileFieldAi/MobileFieldAi.tsx

@@ -0,0 +1,57 @@
+import { forwardRef } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
+import { Scroll } from '@snack-uikit/scroll';
+
+import { FieldSubmitButton } from '../../../../helperComponents/FieldSubmitButton';
+import { TextArea } from '../TextArea';
+import styles from './styles.module.scss';
+
+type MobileFieldAiProps = Omit<
+  FieldTextAreaProps,
+  'placeholder' | 'labelTooltip' | 'label' | 'required' | 'size' | 'spellCheck' | 'footer'
+> & {
+  onSubmit(): void;
+  submitEnabled: boolean;
+};
+
+const MIN_ROWS = 1;
+const MAX_ROWS = 6;
+
+export const MobileFieldAi = forwardRef<HTMLTextAreaElement, MobileFieldAiProps>(
+  ({ onSubmit, value, submitEnabled, ...props }, ref) => {
+    const { t } = useLocale('FieldsPredefined');
+
+    return (
+      <div
+        className={styles.mobileInputWrapper}
+        style={{ '--max-rows': MAX_ROWS, '--min-rows': MIN_ROWS }}
+        data-size='m'
+      >
+        <Scroll className={styles.scrollContainer} size='s' barHideStrategy='never'>
+          <TextArea
+            {...props}
+            className={styles.textarea}
+            ref={ref}
+            value={value}
+            minRows={MIN_ROWS}
+            placeholder={t('FieldAi.regular.placeholder')}
+            spellCheck={true}
+          />
+        </Scroll>
+
+        <div className={styles.mobileSubmitButtonWrapper}>
+          <FieldSubmitButton
+            showTooltip={false}
+            className={styles.mobileSubmitButton}
+            fullWidth={true}
+            active={submitEnabled}
+            handleClick={onSubmit}
+            size='s'
+          />
+        </div>
+      </div>
+    );
+  },
+);

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

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

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

@@ -0,0 +1,81 @@
+@use '@sbercloud/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));
+  }
+
+  @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)};
+
+      .textarea {
+        @include ste.composite-var(ste.$theme-variables, 'sans', 'body', $size);
+
+        padding-right: calc(42px + ste.simple-var(ste.$fields-scroll-bar-width, 'width'));
+      }
+    }
+  }
+}
+
+.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;
+
+  &: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

@@ -0,0 +1,78 @@
+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 } from '../../utils';
+import { CheckItem } from '../CheckItem';
+import styles from './styles.module.scss';
+
+export type WithPasswordTooltipProps = WithLayoutType<{
+  passwordValidation: ValidationPassword;
+}>;
+
+export function PasswordValidation({ passwordValidation, layoutType }: 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}
+        />
+        <CheckItem
+          checked={passwordValidation.onlyLatin}
+          label={t('FieldAi.secret.passwordTooltip.onlyLatin')}
+          layoutType={layoutType}
+          shouldHide={isTouchDevice}
+        />
+        <CheckItem
+          checked={passwordValidation.hasLetterCases}
+          label={t('FieldAi.secret.passwordTooltip.hasLetterCases')}
+          layoutType={layoutType}
+          shouldHide={isTouchDevice}
+        />
+        <CheckItem
+          checked={passwordValidation.hasNumber}
+          label={t('FieldAi.secret.passwordTooltip.hasNumber')}
+          layoutType={layoutType}
+          shouldHide={isTouchDevice}
+        />
+        <CheckItem
+          checked={passwordValidation.hasSymbol}
+          label={t('FieldAi.secret.passwordTooltip.hasSymbol')}
+          layoutType={layoutType}
+          shouldHide={isTouchDevice}
+        />
+        <CheckItem
+          checked={passwordValidation.noSpaces}
+          label={t('FieldAi.secret.passwordTooltip.noSpaces')}
+          layoutType={layoutType}
+          shouldHide={isTouchDevice}
+        />
+      </div>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,32 @@
+@use '@sbercloud/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);
+
+    .validationList {
+      gap: 2px;
+    }
+  }
+}
+

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

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

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

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

@@ -0,0 +1,35 @@
+@use '@sbercloud/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

@@ -0,0 +1,51 @@
+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 } from '../../utils';
+import { PasswordValidation } from '../PasswordValidation';
+import styles from './styles.module.scss';
+
+export type WithPasswordTooltipProps = WithLayoutType<{
+  showValidation?: boolean;
+  children: ReactNode;
+  passwordValidation: ValidationPassword;
+}>;
+
+export function WithPasswordValidation({
+  showValidation,
+  passwordValidation,
+  layoutType,
+  children,
+}: WithPasswordTooltipProps) {
+  if (isTouchDevice(layoutType)) {
+    if (showValidation) {
+      return (
+        <div className={styles.validationContainer}>
+          <PasswordValidation passwordValidation={passwordValidation} layoutType={layoutType} />
+
+          {children}
+        </div>
+      );
+    }
+
+    return children;
+  }
+
+  if (showValidation) {
+    return (
+      <AdaptiveTooltip
+        placement={'left-end'}
+        layoutType={layoutType}
+        tip={<PasswordValidation passwordValidation={passwordValidation} layoutType={layoutType} />}
+        offset={8}
+      >
+        {children}
+      </AdaptiveTooltip>
+    );
+  }
+
+  return children;
+}

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

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

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

@@ -0,0 +1,7 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
+
+.validationContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}

package/src/components/FieldAi/index.ts

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

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

@@ -0,0 +1,33 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-fields' as ste;
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: ste.$dimension-050m;
+}
+
+.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%);
+  }
+}

package/src/components/FieldAi/utils.ts

@@ -0,0 +1,25 @@
+export type ValidationPassword = {
+  onlyLatin: boolean;
+  minLength: boolean;
+  hasLetterCases: boolean;
+  hasNumber: boolean;
+  hasSymbol: boolean;
+  noSpaces: boolean;
+};
+
+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/FieldChat/FieldChat.tsx

@@ -0,0 +1,101 @@
+import { KeyboardEventHandler, useMemo } from 'react';
+
+import { AttachmentSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveFieldTextArea, FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { AttachmentSquareProps } from '@snack-uikit/attachment';
+import { ButtonFunction } from '@snack-uikit/button';
+import { FileUpload, FileUploadProps } from '@snack-uikit/drop-zone';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+import { FieldSubmitButton } from '../../helperComponents/FieldSubmitButton';
+import { TextAreaActionsFooter } from '../../helperComponents/TextAreaActionsFooter';
+import { Attachments } from './components/Attachments';
+import styles from './styles.module.scss';
+
+export type FieldChatProps = WithLayoutType<
+  Omit<
+    FieldTextAreaProps,
+    'placeholder' | 'hint' | 'labelTooltip' | 'label' | 'required' | 'size' | 'spellCheck' | 'footer'
+  > & {
+    /** Колбек действия при отправке */
+    handleSubmit(value: string): void;
+    attachment?: Pick<FileUploadProps, 'onFilesUpload' | 'accept'> & {
+      /** Список загруженных файлов */
+      files?: File[];
+      /** Колбек действия при удалении прикрепленного файла */
+      onFileDelete: AttachmentSquareProps['onDelete'];
+    };
+  }
+>;
+
+export function FieldChat({ handleSubmit: handleSubmitProp, value, layoutType, attachment, ...props }: FieldChatProps) {
+  const { t } = useLocale('FieldsPredefined');
+
+  const isMobile = layoutType === 'mobile';
+
+  const files = useMemo<AttachmentSquareProps[]>(
+    () =>
+      attachment?.files?.map(file => ({
+        file,
+        onDelete: attachment?.onFileDelete,
+      })) ?? [],
+    [attachment?.files, attachment?.onFileDelete],
+  );
+
+  const isValueValid = (typeof value === 'string' && value.trim().length > 0) || files.length > 0;
+
+  const handleSubmit = () => {
+    if (isValueValid) {
+      handleSubmitProp(value ?? '');
+    }
+  };
+
+  const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+      return;
+    }
+  };
+
+  return (
+    <div className={styles.fieldChat} data-layout-type={layoutType}>
+      {isMobile && <Attachments files={files} isMobile={isMobile} />}
+
+      <AdaptiveFieldTextArea
+        {...props}
+        layoutType={layoutType}
+        size={isMobile ? 'l' : 'm'}
+        minRows={1}
+        maxRows={4}
+        placeholder={t('FieldChat.placeholder')}
+        onKeyDown={handleKeyDown}
+        footer={
+          <TextAreaActionsFooter
+            right={
+              <>
+                {attachment && (
+                  <Tooltip
+                    tip={t('FieldChat.attachFileTooltip')}
+                    hoverDelayOpen={600}
+                    triggerClassName={styles.uploadTooltip}
+                  >
+                    <FileUpload mode='multiple' onFilesUpload={attachment.onFilesUpload} accept={attachment.accept}>
+                      <ButtonFunction size={isMobile ? 's' : 'xs'} icon={<AttachmentSVG />} />
+                    </FileUpload>
+                  </Tooltip>
+                )}
+
+                <FieldSubmitButton active={isValueValid} handleClick={handleSubmit} size={isMobile ? 's' : 'xs'} />
+              </>
+            }
+          />
+        }
+      />
+
+      {!isMobile && <Attachments files={files} />}
+    </div>
+  );
+}