@cloud-ru/uikit-product-claudia 1.6.2

package/src/components/SshField/SshField.tsx

@@ -0,0 +1,222 @@
+import cn from 'classnames';
+import { DragEvent, forwardRef, KeyboardEventHandler, useState } from 'react';
+
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+import { AttachmentSVG, EyeClosedSVG, EyeSVG, PasswordLockSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import {
+  AdaptiveFieldTextArea,
+  FieldTextAreaProps,
+  getAdaptiveFieldProps,
+} from '@cloud-ru/uikit-product-mobile-fields';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { ButtonFunction } from '@snack-uikit/button';
+import { DropZone, FileUpload } from '@snack-uikit/drop-zone';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+import { ChatStatusAnnouncement } from '../ChatStatusAnnouncement';
+import { MobileFieldAi } from './components/MobileFieldAi';
+import { DropZoneContent } from './helperComponents/DropZoneContent';
+import { FieldSubmitButton } from './helperComponents/FieldSubmitButton';
+import { TextAreaActionsFooter } from './helperComponents/TextAreaActionsFooter';
+import styles from './styles.module.scss';
+import { FileErrorType, getFileErrorType } from './utils/handleFileError';
+import { isTouchDevice as isTouchDeviceHelper } from './utils/isTouchDevice';
+import { readFileContent } from './utils/readFileContent';
+import { validateFileSize, validateFileType, validateSSHKeyContent } from './utils/validateSSHKey';
+
+export type SshFieldProps = WithLayoutType<
+  Omit<FieldTextAreaProps, 'placeholder' | 'labelTooltip' | 'label' | 'required' | 'size' | 'spellCheck' | 'footer'> & {
+    /** Колбек действия при отправке */
+    onSubmit(value: string): void;
+  }
+>;
+
+export const SshField = forwardRef<HTMLTextAreaElement, SshFieldProps>(
+  ({ onSubmit: handleSubmitProp, value, disabled, className, ...props }, ref) => {
+    const { layoutType, validationState, onChange } = props;
+    const { t } = useLocale('Claudia');
+    const isTouchDevice = isTouchDeviceHelper(layoutType);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [isValueHidden, setIsValueHidden] = useState<boolean>(true);
+    const [fileErrorType, setFileErrorType] = useState<FileErrorType | null>(null);
+
+    const isValueValid = typeof value === 'string' && value.trim().length > 0;
+    const showFileError = Boolean(fileErrorType);
+
+    const getErrorMessage = (errorType: FileErrorType): string => {
+      switch (errorType) {
+        case 'EMPTY_FILE':
+          return t('SshField.errors.emptyFile');
+        case 'BINARY_DATA':
+          return t('SshField.errors.binaryData');
+        case 'INVALID_SSH_KEY':
+          return t('SshField.errors.invalidSSHKey');
+        case 'INVALID_EXTENSION':
+        case 'INVALID_MIME_TYPE':
+        case 'INVALID_FILE_TYPE':
+          return t('SshField.errors.invalidFileExtension');
+        case 'FILE_TOO_LARGE':
+          return t('SshField.errors.fileTooLarge');
+        case 'READ_ERROR':
+          return t('SshField.errors.readError');
+        case 'UNKNOWN_ERROR':
+        default:
+          return t('SshField.errors.unknownError');
+      }
+    };
+
+    const handleChange = (newValue: string) => {
+      if (fileErrorType) {
+        setFileErrorType(null);
+      }
+      if (onChange) {
+        onChange(newValue);
+      }
+    };
+
+    const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      setIsDragOver(true);
+    };
+
+    const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      setIsDragOver(false);
+    };
+
+    const handleSubmit = () => {
+      if (isValueValid) {
+        handleSubmitProp(value);
+      }
+    };
+
+    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = e => {
+      if (isTouchDevice) {
+        return;
+      }
+
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+
+        if (!disabled) {
+          handleSubmit();
+        }
+
+        return;
+      }
+    };
+
+    const onFileUpload = async (file: File) => {
+      try {
+        setIsLoading(true);
+        setFileErrorType(null);
+        validateFileType(file);
+        validateFileSize(file);
+
+        const fileContent = await readFileContent(file);
+
+        validateSSHKeyContent(fileContent);
+
+        if (onChange) {
+          onChange(fileContent);
+        }
+      } catch (err) {
+        const errorType = getFileErrorType(err);
+        setFileErrorType(errorType);
+      } finally {
+        setIsLoading(false);
+        setIsDragOver(false);
+      }
+    };
+
+    if (isTouchDevice) {
+      return (
+        <MobileFieldAi
+          {...props}
+          {...getAdaptiveFieldProps(props)}
+          onSubmit={handleSubmit}
+          submitEnabled={isValueValid && !disabled}
+          ref={ref}
+          value={value}
+        />
+      );
+    }
+
+    return (
+      <div className={cn(styles.wrapper, className)} onDragOver={handleDragOver} onDragLeave={handleDragLeave}>
+        <ChatStatusAnnouncement
+          className={styles.chatStatus}
+          layoutType={layoutType}
+          icon={<PasswordLockSVG size={16} color={themeVars.sys.neutral.textSupport} />}
+          content={t('SshField.chatStatusAnnouncement.content')}
+          actionLabel={t('SshField.chatStatusAnnouncement.cancel')}
+          onActionClick={() => {}}
+        />
+        {isDragOver ? (
+          <DropZone
+            description={<DropZoneContent />}
+            className={styles.dropZone}
+            mode='single'
+            onFilesUpload={(files: File[]) => onFileUpload(files[0])}
+          />
+        ) : (
+          <AdaptiveFieldTextArea
+            {...props}
+            ref={ref}
+            value={value}
+            onChange={handleChange}
+            size='m'
+            disabled={isLoading}
+            minRows={2}
+            maxRows={4}
+            placeholder={t('SshField.placeholder')}
+            className={isValueHidden ? styles.secured : undefined}
+            onKeyDown={handleKeyDown}
+            validationState={showFileError ? 'error' : validationState}
+            hint={showFileError && fileErrorType ? getErrorMessage(fileErrorType) : props.hint}
+            footer={
+              <TextAreaActionsFooter
+                left={
+                  <ButtonFunction
+                    size='xs'
+                    icon={isValueHidden ? <EyeSVG /> : <EyeClosedSVG />}
+                    onClick={() => setIsValueHidden(prev => !prev)}
+                    disabled={isLoading}
+                  />
+                }
+                right={
+                  <>
+                    <Tooltip
+                      tip={t('SshField.attachFileTooltip')}
+                      hoverDelayOpen={600}
+                      triggerClassName={styles.uploadTooltip}
+                      open={isTouchDevice ? false : undefined}
+                    >
+                      <FileUpload mode='single' onFilesUpload={(files: File[]) => onFileUpload(files[0])}>
+                        <ButtonFunction
+                          disabled={isLoading}
+                          size={isTouchDevice ? 's' : 'xs'}
+                          icon={<AttachmentSVG />}
+                        />
+                      </FileUpload>
+                    </Tooltip>
+                    <FieldSubmitButton
+                      disabled={isLoading}
+                      showTooltip={!isTouchDevice}
+                      className={isTouchDevice ? styles.mobileSubmitButton : undefined}
+                      active={isValueValid && !disabled}
+                      handleClick={handleSubmit}
+                      size={isTouchDevice ? 's' : 'xs'}
+                    />
+                  </>
+                }
+              />
+            }
+          />
+        )}
+      </div>
+    );
+  },
+);

package/src/components/SshField/components/MobileFieldAi/MobileFieldAi.tsx

@@ -0,0 +1,71 @@
+import { forwardRef } from 'react';
+
+import { AttachmentSVG } 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';
+import { FileUpload } from '@snack-uikit/drop-zone';
+import { Scroll } from '@snack-uikit/scroll';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+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}>
+          <Tooltip
+            disableSpanWrapper
+            tip={t('FieldChat.attachFileTooltip')}
+            hoverDelayOpen={600}
+            triggerClassName={styles.uploadTooltip}
+          >
+            <FileUpload mode='multiple' onFilesUpload={() => {}}>
+              <ButtonFunction size={'s'} icon={<AttachmentSVG />} />
+            </FileUpload>
+          </Tooltip>
+          <FieldSubmitButton
+            showTooltip={false}
+            className={styles.mobileSubmitButton}
+            fullWidth={true}
+            active={submitEnabled}
+            handleClick={onSubmit}
+            size='s'
+          />
+        </div>
+      </div>
+    );
+  },
+);

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

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

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

@@ -0,0 +1,80 @@
+@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 {
+  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/SshField/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/SshField/components/TextArea/index.ts

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

package/src/components/SshField/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/SshField/helperComponents/DropZoneContent/DropZoneContent.tsx

@@ -0,0 +1,15 @@
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+
+export function DropZoneContent() {
+  const { t } = useLocale('Claudia');
+
+  return (
+    <div className={styles.container}>
+      <Typography.SansTitleS className={styles.container}>{t('SshField.dropZone.title')}</Typography.SansTitleS>
+      <Typography.SansBodyS className={styles.container}>{t('SshField.dropZone.description')}</Typography.SansBodyS>
+    </div>
+  );
+}

package/src/components/SshField/helperComponents/DropZoneContent/index.ts

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

package/src/components/SshField/helperComponents/DropZoneContent/styles.module.scss

@@ -0,0 +1,17 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+}
+
+.defaultText {
+  color: stv.$sys-neutral-text-main;
+}
+
+.disclaimerText {
+  color: stv.$sys-green-text-support;
+}

package/src/components/SshField/helperComponents/FieldSubmitButton/FieldSubmitButton.tsx

@@ -0,0 +1,45 @@
+import { ArrowUpSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ButtonFilled } from '@snack-uikit/button';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+export type FieldSubmitButtonProps = {
+  active: boolean;
+  handleClick(): void;
+  size?: 'xs' | 's';
+  className?: string;
+  fullWidth?: boolean;
+  showTooltip?: boolean;
+  disabled?: boolean;
+};
+
+export function FieldSubmitButton({
+  active,
+  handleClick,
+  size = 'xs',
+  className,
+  fullWidth,
+  showTooltip = true,
+  disabled,
+}: FieldSubmitButtonProps) {
+  const { t } = useLocale('FieldsPredefined');
+
+  if (active) {
+    return (
+      <Tooltip tip={t('FieldAi.submit.tooltip')} hoverDelayOpen={600} open={showTooltip ? undefined : false}>
+        <ButtonFilled
+          fullWidth={fullWidth}
+          icon={<ArrowUpSVG />}
+          size={size}
+          appearance='primary'
+          type='submit'
+          onClick={handleClick}
+          className={className}
+          disabled={disabled}
+        />
+      </Tooltip>
+    );
+  }
+
+  return <ButtonFilled icon={<ArrowUpSVG />} size={size} disabled className={className} fullWidth={fullWidth} />;
+}

package/src/components/SshField/helperComponents/FieldSubmitButton/index.ts

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

package/src/components/SshField/helperComponents/TextAreaActionsFooter/TextAreaActionsFooter.tsx

@@ -0,0 +1,18 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import styles from './styles.module.scss';
+
+type TextAreaActionsFooterProps = {
+  left?: ReactNode;
+  right?: ReactNode;
+};
+
+export function TextAreaActionsFooter({ left, right }: TextAreaActionsFooterProps) {
+  return (
+    <div className={styles.actionsFooter}>
+      <div className={styles.actionsWrapper}>{left}</div>
+      <div className={cn(styles.actionsWrapper, styles.right)}>{right}</div>
+    </div>
+  );
+}

package/src/components/SshField/helperComponents/TextAreaActionsFooter/index.ts

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

package/src/components/SshField/helperComponents/TextAreaActionsFooter/styles.module.scss

@@ -0,0 +1,23 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
+
+.actionsFooter {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding-bottom: 7px;
+}
+
+.actionsWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ste.$dimension-050m;
+}
+
+.right {
+  justify-content: flex-end;
+  width: 100%;
+  padding-right: 8px;
+}

package/src/components/SshField/index.ts

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