@cloud-ru/uikit-product-claudia 1.11.1 → 1.12.0

package/src/components/SshField/SshField.tsx

@@ -19,11 +19,12 @@ import { MobileFieldAi } from './components/MobileFieldAi';
 import { DropZoneContent } from './helperComponents/DropZoneContent';
 import { FieldSubmitButton } from './helperComponents/FieldSubmitButton';
 import { TextAreaActionsFooter } from './helperComponents/TextAreaActionsFooter';
+import { WithSshValidation } from './helperComponents/WithSshValidation';
 import styles from './styles.module.scss';
-import { FileErrorType, getFileErrorType } from './utils/handleFileError';
+import { ValidationState } from './types';
 import { isTouchDevice as isTouchDeviceHelper } from './utils/isTouchDevice';
 import { readFileContent } from './utils/readFileContent';
-import { validateFileSize, validateFileType, validateSSHKeyContent } from './utils/validateSSHKey';
+import { validateFileErrors, validateSshKeyErrors } from './utils/validateSSHKey';
 
 export type SshFieldProps = WithLayoutType<
   Omit<FieldTextAreaProps, 'placeholder' | 'labelTooltip' | 'label' | 'required' | 'size' | 'spellCheck' | 'footer'> & {
@@ -42,39 +43,23 @@ export const SshField = forwardRef<HTMLTextAreaElement, SshFieldProps>(
     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 [sshValidation, setSshValidation] = useState<ValidationState | null>(null);
+
+    const isSshValid = !sshValidation || Object.values(sshValidation).every(value => !value);
+    const isValueValid = isSshValid && typeof value === 'string' && value.trim().length > 0;
 
     const handleChange = (newValue: string) => {
-      if (fileErrorType) {
-        setFileErrorType(null);
+      if (sshValidation) {
+        setSshValidation(null);
       }
-      if (onChange) {
-        onChange(newValue);
+
+      if (!onChange) return;
+
+      onChange(newValue);
+
+      if (newValue) {
+        const sshValidationState = validateSshKeyErrors(newValue);
+        setSshValidation(sshValidationState);
       }
     };
 
@@ -113,20 +98,28 @@ export const SshField = forwardRef<HTMLTextAreaElement, SshFieldProps>(
     const onFileUpload = async (file: File) => {
       try {
         setIsLoading(true);
-        setFileErrorType(null);
-        validateFileType(file);
-        validateFileSize(file);
+        setSshValidation(null);
 
-        const fileContent = await readFileContent(file);
+        const fileValidationErrorState = validateFileErrors(file);
 
-        validateSSHKeyContent(fileContent);
+        if (fileValidationErrorState.fileType) {
+          setSshValidation(fileValidationErrorState);
+          return;
+        }
+
+        const { error, fileContent } = await readFileContent(file);
 
-        if (onChange) {
-          onChange(fileContent);
+        if (error || typeof fileContent !== 'string') {
+          setSshValidation({ ...fileValidationErrorState, readError: true });
+          return;
         }
-      } catch (err) {
-        const errorType = getFileErrorType(err);
-        setFileErrorType(errorType);
+
+        const sshValidationState = validateSshKeyErrors(fileContent);
+        setSshValidation({ ...fileValidationErrorState, ...sshValidationState });
+
+        if (!onChange) return;
+
+        onChange(fileContent);
       } finally {
         setIsLoading(false);
         setIsDragOver(false);
@@ -135,93 +128,99 @@ export const SshField = forwardRef<HTMLTextAreaElement, SshFieldProps>(
 
     if (isTouchDevice) {
       return (
-        <MobileFieldAi
-          {...props}
-          {...getAdaptiveFieldProps(props)}
-          onSubmit={handleSubmit}
-          submitEnabled={isValueValid && !disabled}
-          ref={ref}
-          value={value}
-        />
+        <WithSshValidation layoutType={layoutType} sshValidation={sshValidation}>
+          <MobileFieldAi
+            {...props}
+            onChange={handleChange}
+            onFileUpload={onFileUpload}
+            {...getAdaptiveFieldProps(props)}
+            onSubmit={handleSubmit}
+            submitEnabled={isValueValid && !disabled}
+            ref={ref}
+            value={value}
+          />
+        </WithSshValidation>
       );
     }
 
     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={[
-            { content: t('SshField.chatStatusAnnouncement.content.option1') },
-            { content: t('SshField.chatStatusAnnouncement.content.option2'), shouldFocusOnHover: true },
-            { content: t('SshField.chatStatusAnnouncement.content.option3') },
-          ]}
-          actionLabel={t('SshField.chatStatusAnnouncement.cancel')}
-          onActionClick={onCancel}
-        />
-        {isDragOver ? (
-          <DropZone
-            description={<DropZoneContent />}
-            className={styles.dropZone}
-            mode='single'
-            onFilesUpload={(files: File[]) => onFileUpload(files[0])}
+        <WithSshValidation layoutType={layoutType} sshValidation={sshValidation}>
+          <ChatStatusAnnouncement
+            className={styles.chatStatus}
+            layoutType={layoutType}
+            icon={<PasswordLockSVG size={16} color={themeVars.sys.neutral.textSupport} />}
+            content={[
+              { content: t('SshField.chatStatusAnnouncement.content.option1') },
+              { content: t('SshField.chatStatusAnnouncement.content.option2'), shouldFocusOnHover: true },
+              { content: t('SshField.chatStatusAnnouncement.content.option3') },
+            ]}
+            actionLabel={t('SshField.chatStatusAnnouncement.cancel')}
+            onActionClick={onCancel}
           />
-        ) : (
-          <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
+          {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={isSshValid ? validationState : 'error'}
+              hint={props.hint}
+              footer={
+                <TextAreaActionsFooter
+                  left={
+                    <ButtonFunction
+                      size='xs'
+                      icon={isValueHidden ? <EyeSVG /> : <EyeClosedSVG />}
+                      onClick={() => setIsValueHidden(prev => !prev)}
                       disabled={isLoading}
-                      showTooltip={!isTouchDevice}
-                      className={isTouchDevice ? styles.mobileSubmitButton : undefined}
-                      active={isValueValid && !disabled}
-                      handleClick={handleSubmit}
-                      size={isTouchDevice ? 's' : 'xs'}
                     />
-                  </>
-                }
-              />
-            }
-          />
-        )}
+                  }
+                  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'}
+                      />
+                    </>
+                  }
+                />
+              }
+            />
+          )}
+        </WithSshValidation>
       </div>
     );
   },

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

@@ -3,6 +3,7 @@ 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 { WithLayoutType } from '@cloud-ru/uikit-product-utils';
 import { ButtonFunction } from '@snack-uikit/button';
 import { FileUpload } from '@snack-uikit/drop-zone';
 import { Scroll } from '@snack-uikit/scroll';
@@ -12,19 +13,19 @@ 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'
+type MobileFieldAiProps = WithLayoutType<
+  Omit<FieldTextAreaProps, 'placeholder' | 'labelTooltip' | 'label' | 'required' | 'size' | 'spellCheck' | 'footer'>
 > & {
   onSubmit(): void;
   submitEnabled: boolean;
+  onFileUpload(file: File): void;
 };
 
 const MIN_ROWS = 1;
 const MAX_ROWS = 6;
 
 export const MobileFieldAi = forwardRef<HTMLTextAreaElement, MobileFieldAiProps>(
-  ({ onSubmit, value, submitEnabled, ...props }, ref) => {
+  ({ onSubmit, value, submitEnabled, onFileUpload, ...props }, ref) => {
     const { t } = useLocale('Claudia');
 
     return (
@@ -52,7 +53,7 @@ export const MobileFieldAi = forwardRef<HTMLTextAreaElement, MobileFieldAiProps>
             hoverDelayOpen={600}
             triggerClassName={styles.uploadTooltip}
           >
-            <FileUpload mode='multiple' onFilesUpload={() => {}}>
+            <FileUpload mode='multiple' onFilesUpload={(files: File[]) => onFileUpload(files[0])}>
               <ButtonFunction size={'s'} icon={<AttachmentSVG />} />
             </FileUpload>
           </Tooltip>

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

@@ -0,0 +1,23 @@
+import { CrossFilledSVG } from '@cloud-ru/uikit-product-icons';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+
+type CheckItemProps = WithLayoutType<{
+  label: string;
+}>;
+
+export function CheckItem({ label, layoutType }: CheckItemProps) {
+  return (
+    <div className={styles.checkItem} data-layout-type={layoutType}>
+      <div className={styles.iconWrapper}>
+        <CrossFilledSVG size={16} className={styles.icon} />
+      </div>
+
+      <Typography.SansBodyM data-layout-type={layoutType} className={styles.label}>
+        {label}
+      </Typography.SansBodyM>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,31 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
+
+.checkItem {
+  display: flex;
+  flex-direction: row;
+  gap: ste.$dimension-050m;
+
+  &[data-layout-type='mobile'],
+  &[data-layout-type='tablet'] {
+    gap: ste.$dimension-1m;
+  }
+}
+
+.iconWrapper {
+  width: ste.$dimension-2m;
+  height: ste.$dimension-2m;
+  transform: translateY(ste.$dimension-025m);
+}
+
+.icon {
+  color: ste.$sys-red-accent-default;
+}
+
+.label {
+  color: ste.$sys-red-decor-default;
+
+  &[data-layout-type='mobile'],
+  &[data-layout-type='tablet'] {
+    color: ste.$sys-red-text-main;
+  }
+}

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

@@ -5,7 +5,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 4px;
+  gap: stv.$dimension-050m;
 }
 
 .defaultText {

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

@@ -0,0 +1,36 @@
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+
+import { ValidationState } from '../../types';
+import { CheckItem } from '../CheckItem';
+import styles from './styles.module.scss';
+
+export type WithPasswordTooltipProps = WithLayoutType<{
+  sshValidation: ValidationState | null;
+}>;
+
+export function SshValidation({ sshValidation, layoutType }: WithPasswordTooltipProps) {
+  const { t } = useLocale('Claudia');
+
+  if (!sshValidation) return null;
+
+  return (
+    <div className={styles.validationItemsContainer} data-layout-type={layoutType}>
+      <div className={styles.validationList}>
+        {sshValidation.fileSize && <CheckItem label={t('SshField.errors.fileSize')} layoutType={layoutType} />}
+
+        {sshValidation.fileType && <CheckItem label={t('SshField.errors.fileType')} layoutType={layoutType} />}
+
+        {sshValidation.binaryData && <CheckItem label={t('SshField.errors.binaryData')} layoutType={layoutType} />}
+
+        {sshValidation.emptyFile && <CheckItem label={t('SshField.errors.emptyFile')} layoutType={layoutType} />}
+
+        {sshValidation.invalidSSHKey && (
+          <CheckItem label={t('SshField.errors.invalidSSHKey')} layoutType={layoutType} />
+        )}
+
+        {sshValidation.readError && <CheckItem label={t('SshField.errors.readError')} layoutType={layoutType} />}
+      </div>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,31 @@
+@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: ste.$dimension-1m;
+}
+
+.validationItemsContainer {
+  @include ste.composite-var(ste.$sans-body-m);
+  color: ste.$sys-neutral-text-main;
+
+  display: flex;
+  flex-direction: column;
+  gap: ste.$dimension-1m;
+
+  &[data-layout-type='mobile'],
+  &[data-layout-type='tablet'] {
+    gap: ste.$dimension-1m;
+    @include ste.composite-var(ste.$sans-body-s);
+
+    .validationList {
+      gap: ste.$dimension-025m;
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+import { ReactNode, useMemo } from 'react';
+
+import { AdaptiveTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+
+import { ValidationState } from '../../types';
+import { isTouchDevice } from '../../utils/isTouchDevice';
+import { SshValidation } from '../SshValidation';
+import styles from './styles.module.scss';
+
+export type WithSshValidationProps = WithLayoutType<{
+  children: ReactNode;
+  sshValidation: ValidationState | null;
+}>;
+
+export function WithSshValidation({ sshValidation, layoutType, children }: WithSshValidationProps) {
+  const isSshValidationError = useMemo(
+    () => (sshValidation ? Object.values(sshValidation).some(item => item) : false),
+    [sshValidation],
+  );
+
+  if (isTouchDevice(layoutType)) {
+    return (
+      <div className={styles.validationContainer}>
+        <SshValidation sshValidation={sshValidation} layoutType={layoutType} />
+
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <AdaptiveTooltip
+      placement='left-end'
+      layoutType={layoutType}
+      tip={<SshValidation sshValidation={sshValidation} layoutType={layoutType} />}
+      open={isSshValidationError}
+      offset={8}
+    >
+      {children}
+    </AdaptiveTooltip>
+  );
+}

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

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

package/src/components/SshField/helperComponents/WithSshValidation/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: ste.$dimension-1m;
+}

package/src/components/SshField/types.ts

@@ -0,0 +1,13 @@
+type FileError = {
+  fileType: boolean;
+  fileSize: boolean;
+  readError: boolean;
+};
+
+type FileContentError = {
+  binaryData: boolean;
+  emptyFile: boolean;
+  invalidSSHKey: boolean;
+};
+
+export type ValidationState = Partial<FileError & FileContentError>;

package/src/components/SshField/utils/readFileContent.ts

@@ -1,22 +1,23 @@
-export const readFileContent = (file: File): Promise<string> =>
-  new Promise((resolve, reject) => {
+type ReadFileContentResult = {
+  error: boolean;
+  fileContent?: string;
+};
+
+export const readFileContent = (file: File): Promise<ReadFileContentResult> =>
+  new Promise(resolve => {
     const reader = new FileReader();
 
     reader.onload = (e: ProgressEvent<FileReader>) => {
-      if (e.target?.result && typeof e.target.result === 'string') {
-        resolve(e.target.result);
+      if (e.target && typeof e.target.result === 'string') {
+        resolve({ error: false, fileContent: e.target.result });
       } else {
-        reject(new Error('READ_ERROR: Не удалось прочитать содержимое файла'));
+        resolve({ error: true });
       }
     };
 
-    reader.onerror = () => {
-      reject(new Error('READ_ERROR: Не удалось прочитать файл'));
-    };
+    reader.onerror = () => resolve({ error: true });
 
-    reader.onabort = () => {
-      reject(new Error('READ_ERROR: Чтение файла было прервано'));
-    };
+    reader.onabort = () => resolve({ error: true });
 
     // Читаем как текст
     reader.readAsText(file);