@cloud-ru/ds-uikit-product-fields-predefined 1.0.0

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@cloud-ru/ds-uikit-product-fields-predefined",
+  "version": "1.0.0",
+  "description": "Набор предопределённых полей формы поверх @ds/fields — телефон, маски, имя, описание, код и другие готовые сценарии ввода.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloud-ru-tech/snack-v2.git",
+    "directory": "packages/uikit-product-fields-predefined"
+  },
+  "homepage": "https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/uikit-product-fields-predefined",
+  "license": "Apache-2.0",
+  "author": "Nikita Ershov <niershov@cloud.ru>",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./locale": {
+      "source": "./src/locale/index.ts",
+      "types": "./dist/esm/locale/index.d.ts",
+      "import": "./dist/esm/locale/index.js",
+      "require": "./dist/cjs/locale/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "dependencies": {
+    "awesome-phonenumber": "^7.8.0",
+    "classnames": "^2.5.1",
+    "imask": "^7.6.1",
+    "merge-refs": "^2.0.0",
+    "react-imask": "^7.6.1",
+    "@cloud-ru/ds-adaptive": "^1.0.0",
+    "@cloud-ru/ds-button": "^1.0.0",
+    "@cloud-ru/ds-drawer": "^1.0.0",
+    "@cloud-ru/ds-fields": "^1.0.0",
+    "@cloud-ru/ds-icons": "^1.0.0",
+    "@cloud-ru/ds-attachment": "^1.0.0",
+    "@cloud-ru/ds-list": "^1.0.0",
+    "@cloud-ru/ds-locale": "^1.0.0",
+    "@cloud-ru/ds-modal": "^1.0.0",
+    "@cloud-ru/ds-scroll": "^1.0.0",
+    "@cloud-ru/ds-tooltip": "^1.0.0",
+    "@cloud-ru/ds-input-private": "^1.0.0",
+    "@cloud-ru/ds-dropzone": "^1.0.0",
+    "@cloud-ru/ds-utils": "^1.0.0",
+    "@cloud-ru/ds-field-decorator": "^1.0.0"
+  },
+  "peerDependencies": {
+    "react-hook-form": "^7.79.0",
+    "yup": "^1.7.1"
+  },
+  "devDependencies": {
+    "react-hook-form": "7.83.0",
+    "yup": "1.7.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/FieldChat/FieldChat.tsx

@@ -0,0 +1,113 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { AttachmentSquareProps } from '@cloud-ru/ds-attachment';
+import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
+import { FileUpload, UPLOAD_MODE } from '@cloud-ru/ds-dropzone';
+import { FieldTextArea } from '@cloud-ru/ds-fields';
+import { AttachmentSVG } from '@cloud-ru/ds-icons/interface/product';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+import { KeyboardEvent, useMemo } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { fieldsPredefinedLocale } from '../../locale';
+import { Attachments } from './components/Attachments';
+import { FieldSubmitButton } from './components/FieldSubmitButton';
+import { TextAreaActionsFooter } from './components/TextAreaActionsFooter';
+import styles from './styles.module.scss';
+import { FieldChatProps } from './types';
+
+/**
+ * Поле чата: многострочный ввод с прикреплением файлов и кнопкой отправки.
+ * Enter — отправка, Shift+Enter — перенос строки. Прикреплённые файлы на mobile
+ * показываются над полем, на desktop — под полем.
+ */
+export function FieldChat({ handleSubmit: handleSubmitProp, value, attachment, autoFocus, ...props }: FieldChatProps) {
+  const { t } = fieldsPredefinedLocale.useTranslations();
+
+  const { layoutType } = useAdaptiveLayout();
+  const isMobile = isMobileLayout(layoutType);
+
+  // disabled/readonly уходят в FieldTextArea через ...props, но футер-действия (скрепка, отправка)
+  // их не наследуют — гасим их явно, иначе прикрепление/отправка остаются кликабельны в disabled-поле.
+  const isInactive = Boolean(props.disabled || props.readonly);
+
+  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 = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  return (
+    <div className={styles.fieldChat} data-layout-type={layoutType}>
+      {isMobile && <Attachments files={files} isMobile={isMobile} />}
+
+      <FieldTextArea
+        {...props}
+        autoFocus={autoFocus}
+        value={value}
+        size='m'
+        minRows={1}
+        maxRows={4}
+        showCopyButton={false}
+        placeholder={t('FieldChat.placeholder')}
+        onKeyDown={handleKeyDown}
+        footer={
+          <TextAreaActionsFooter
+            right={
+              <>
+                {attachment && (
+                  <Tooltip
+                    tip={t('FieldChat.attachFileTooltip')}
+                    hoverDelayOpen={600}
+                    open={isInactive ? false : undefined}
+                    triggerClassName={styles.uploadTooltip}
+                  >
+                    <FileUpload
+                      mode={UPLOAD_MODE.Multiple}
+                      onFilesUpload={attachment.onFilesUpload}
+                      accept={attachment.accept}
+                    >
+                      <Button
+                        view={VIEW.Function}
+                        appearance={APPEARANCE.Neutral}
+                        size='s'
+                        icon={<AttachmentSVG />}
+                        disabled={isInactive}
+                        data-test-id={TEST_IDS.fieldChatUpload}
+                      />
+                    </FileUpload>
+                  </Tooltip>
+                )}
+
+                <FieldSubmitButton
+                  active={isValueValid && !isInactive}
+                  handleClick={handleSubmit}
+                  data-test-id={TEST_IDS.fieldChatSubmit}
+                />
+              </>
+            }
+          />
+        }
+      />
+
+      {!isMobile && <Attachments files={files} />}
+    </div>
+  );
+}

package/src/components/FieldChat/components/Attachments/Attachments.tsx

@@ -0,0 +1,31 @@
+import { Attachment, AttachmentSquare, AttachmentSquareProps } from '@cloud-ru/ds-attachment';
+import { Scroll } from '@cloud-ru/ds-scroll';
+
+import styles from './styles.module.scss';
+
+export type AttachmentsProps = {
+  /** Прикреплённые файлы */
+  files: AttachmentSquareProps[];
+  /** Мобильная раскладка: карточки `Attachment` вместо квадратных `AttachmentSquare`, той же строкой под скролл. */
+  isMobile?: boolean;
+};
+
+export function Attachments({ files, isMobile }: AttachmentsProps) {
+  if (!files.length) {
+    return null;
+  }
+
+  return (
+    <Scroll className={styles.attachmentsScroll}>
+      <div className={styles.attachments}>
+        {files.map((file, index) =>
+          isMobile ? (
+            <Attachment key={file.file?.name || index} size='s' {...file} />
+          ) : (
+            <AttachmentSquare key={file.file?.name || index} size='s' {...file} />
+          ),
+        )}
+      </div>
+    </Scroll>
+  );
+}

package/src/components/FieldChat/components/Attachments/index.ts

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

package/src/components/FieldChat/components/Attachments/styles.module.scss

@@ -0,0 +1,19 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.attachmentsScroll {
+  // Flex-ребёнок колонки .fieldChat: без min-width:0 ряд превью распирает поле
+  // шире контейнера и вылезает за панель вместо горизонтального скролла.
+  min-width: 0;
+}
+
+.attachments {
+  display: flex;
+  gap: base.$sn-primitive-dimension-8;
+  padding: base.$sn-primitive-dimension-1 0;
+
+  // Превью сохраняют свой размер и уезжают в горизонтальный скролл,
+  // а не сжимаются под ширину контейнера.
+  > * {
+    flex-shrink: 0;
+  }
+}

package/src/components/FieldChat/components/FieldSubmitButton/FieldSubmitButton.tsx

@@ -0,0 +1,71 @@
+import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
+import { ArrowUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Tooltip } from '@cloud-ru/ds-tooltip';
+
+import { fieldsPredefinedLocale } from '../../../../locale';
+import styles from './styles.module.scss';
+
+export type FieldSubmitButtonProps = {
+  /** Активна ли отправка (есть валидное значение или прикреплённые файлы) */
+  active: boolean;
+  /** Колбек клика по кнопке отправки */
+  handleClick(): void;
+  /** Дополнительный класс */
+  className?: string;
+  /** Растянуть на всю ширину */
+  fullWidth?: boolean;
+  /** Показывать тултип над активной кнопкой */
+  showTooltip?: boolean;
+  /** Идентификатор для тестов */
+  'data-test-id'?: string;
+};
+
+/**
+ * Кнопка отправки сообщения. В активном состоянии — `submit` с тултипом, иначе — disabled.
+ */
+export function FieldSubmitButton({
+  active,
+  handleClick,
+  className,
+  fullWidth,
+  showTooltip = true,
+  'data-test-id': dataTestId,
+}: FieldSubmitButtonProps) {
+  const { t } = fieldsPredefinedLocale.useTranslations();
+
+  if (active) {
+    return (
+      <Tooltip
+        tip={t('FieldAi.submit.tooltip')}
+        hoverDelayOpen={600}
+        open={showTooltip ? undefined : false}
+        triggerClassName={styles.tooltipTrigger}
+      >
+        <Button
+          fullWidth={fullWidth}
+          icon={<ArrowUpSVG />}
+          size='s'
+          view={VIEW.Filled}
+          appearance={APPEARANCE.Primary}
+          type='submit'
+          onClick={handleClick}
+          className={className}
+          data-test-id={dataTestId}
+        />
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Button
+      icon={<ArrowUpSVG />}
+      size='s'
+      view={VIEW.Filled}
+      appearance={APPEARANCE.Primary}
+      disabled
+      className={className}
+      fullWidth={fullWidth}
+      data-test-id={dataTestId}
+    />
+  );
+}

package/src/components/FieldChat/components/FieldSubmitButton/index.ts

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

package/src/components/FieldChat/components/FieldSubmitButton/styles.module.scss

@@ -0,0 +1,6 @@
+// Trigger-обёртка Tooltip — inline `<span>`: baseline-выравнивание добавляет ей высоту
+// сверх кнопки, и футер поля «подпрыгивает» при появлении активной кнопки.
+// `display: flex` схлопывает обёртку до размеров кнопки (тот же приём, что `.uploadTooltip`).
+.tooltipTrigger {
+  display: flex;
+}

package/src/components/FieldChat/components/TextAreaActionsFooter/TextAreaActionsFooter.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+
+import styles from './styles.module.scss';
+
+export type TextAreaActionsFooterProps = {
+  /** Контент слева (например, счётчик символов) */
+  left?: ReactNode;
+  /** Контент справа (кнопки действий) */
+  right?: ReactNode;
+};
+
+export function TextAreaActionsFooter({ left, right }: TextAreaActionsFooterProps) {
+  return (
+    <div className={styles.actionsFooter}>
+      <div className={styles.actionsLeft}>{left}</div>
+      <div className={styles.actionsRight}>{right}</div>
+    </div>
+  );
+}

package/src/components/FieldChat/components/TextAreaActionsFooter/index.ts

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

package/src/components/FieldChat/components/TextAreaActionsFooter/styles.module.scss

@@ -0,0 +1,29 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.actionsFooter {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  padding-bottom: base.$sn-primitive-dimension-8;
+}
+
+.actionsLeft {
+  display: flex;
+  flex-direction: row;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+}
+
+.actionsRight {
+  display: flex;
+  flex-direction: row;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+  justify-content: flex-end;
+
+  width: 100%;
+  padding-right: base.$sn-primitive-dimension-8;
+}

package/src/components/FieldChat/index.ts

@@ -0,0 +1,2 @@
+export * from './FieldChat';
+export * from './types';

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

@@ -0,0 +1,20 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.fieldChat {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-primitive-dimension-12;
+  // Заполняем контейнер и не даём полю растягиваться под контент (ряд вложений):
+  // без этого `.fieldChat` shrink-wrap'ится по самому широкому ребёнку (скролл превью)
+  // и вылезает за родителя, а горизонтальный скролл вложений не включается.
+  width: 100%;
+  min-width: 0;
+
+  &[data-layout-type='mobile'] {
+    gap: base.$sn-primitive-dimension-8;
+  }
+}
+
+.uploadTooltip {
+  display: flex;
+}

package/src/components/FieldChat/types.ts

@@ -0,0 +1,29 @@
+import { AttachmentSquareProps } from '@cloud-ru/ds-attachment';
+import { FileUploadProps } from '@cloud-ru/ds-dropzone';
+import { FieldTextAreaProps } from '@cloud-ru/ds-fields';
+
+export type FieldChatProps = Omit<
+  FieldTextAreaProps,
+  // minRows/maxRows/showCopyButton/onKeyDown зафиксированы внутри FieldChat и в API не выносятся.
+  | 'placeholder'
+  | 'hint'
+  | 'label'
+  | 'required'
+  | 'size'
+  | 'spellCheck'
+  | 'footer'
+  | 'minRows'
+  | 'maxRows'
+  | 'showCopyButton'
+  | 'onKeyDown'
+> & {
+  /** Колбек действия при отправке */
+  handleSubmit(value: string): void;
+  /** Прикрепление файлов */
+  attachment?: Pick<FileUploadProps, 'onFilesUpload' | 'accept'> & {
+    /** Список загруженных файлов */
+    files?: File[];
+    /** Колбек действия при удалении прикреплённого файла */
+    onFileDelete: AttachmentSquareProps['onDelete'];
+  };
+};

package/src/components/FieldCode/FieldCode.tsx

@@ -0,0 +1,138 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { FieldDecorator, FieldDecoratorProps } from '@cloud-ru/ds-field-decorator';
+import cn from 'classnames';
+import { forwardRef, useImperativeHandle } from 'react';
+
+import { Cell, ResendCode, ResendCodeProps } from './components';
+import { useCodeInput, UseCodeInputParams, useFieldCodeOverflow, 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;
+  /** Сообщение при неверном коде, если не передан свой `error` */
+  invalidCode?: string;
+  /** Растягивать ячейки на всю доступную ширину; иначе фиксированная ширина по `size` */
+  stretchCells?: boolean;
+};
+
+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 = 'm',
+    disabled,
+    label,
+    error,
+    invalidCode,
+    showEmptyChars,
+    resendCode,
+    stretchCells = false,
+    'data-test-id': dataTestId,
+  } = props;
+
+  const { layoutType } = useAdaptiveLayout();
+  const isMobile = isMobileLayout(layoutType);
+
+  const { inputsRef, moveFocus, blurFields } = useFocusCell(codeLength);
+  const { code, cellHandlers, onChangeCode } = useCodeInput({ value, onChange, codeLength, moveFocus, onComplete });
+  const { resetCode } = useFieldHelpers({
+    onChangeCode,
+    isMobile,
+    moveFocus,
+    showEmptyChars,
+    code,
+    codeLength,
+  });
+
+  const { rootRef, codeContainerRef, hasOverflow } = useFieldCodeOverflow();
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      moveFocus,
+      blurFields,
+      resetCode,
+    }),
+    [moveFocus, blurFields, resetCode],
+  );
+
+  const resolvedError = error ?? invalidCode;
+
+  return (
+    <div
+      ref={rootRef}
+      className={cn(styles.fieldCode, hasOverflow && styles.fieldCodeScrollable, className)}
+      data-size={size}
+      data-disabled={disabled || undefined}
+      data-stretch-cells={stretchCells || undefined}
+      {...(dataTestId ? { 'data-test-id': dataTestId } : undefined)}
+    >
+      <FieldDecorator
+        className={cn(!hasOverflow && styles.fieldDecorator)}
+        label={label}
+        disabled={disabled}
+        size={size}
+        error={resolvedError}
+      >
+        <div
+          ref={codeContainerRef}
+          className={styles.codeContainer}
+          data-size={size}
+          data-stretch-cells={stretchCells || undefined}
+        >
+          {code.map((char, index) => (
+            <Cell
+              ref={inputRef => {
+                if (inputRef) {
+                  inputsRef.current[index] = inputRef;
+                }
+              }}
+              key={index}
+              className={cn(spacing?.includes(index) && styles.cellSpacing, cellClassName)}
+              stretchCells={stretchCells}
+              size={size}
+              value={char}
+              disabled={disabled}
+              autoComplete={index === 0 ? 'one-time-code' : undefined}
+              onKeyDown={e => cellHandlers.onKeyDown(e, index)}
+              onPaste={cellHandlers.onPaste}
+              onChange={inputValue => cellHandlers.onChange(inputValue, index)}
+              validationState={getCellValidationState(char, showEmptyChars, Boolean(resolvedError))}
+            />
+          ))}
+        </div>
+      </FieldDecorator>
+
+      {resendCode ? <ResendCode {...resendCode} size={resendCode.size ?? size} /> : null}
+    </div>
+  );
+});

package/src/components/FieldCode/components/Cell/Cell.tsx

@@ -0,0 +1,35 @@
+import { FieldCombo, FieldComboProps } from '@cloud-ru/ds-fields';
+import cn from 'classnames';
+import { forwardRef } from 'react';
+
+import { TEST_IDS } from '../../../../constants';
+import { ZERO_WIDTH_SPACE } from '../../constants';
+import styles from './styles.module.scss';
+
+type CellProps = {
+  /** CSS-класс ячейки кода */
+  className?: string;
+  /** Растягивать ячейку на всю доступную ширину */
+  stretchCells?: boolean;
+} & Pick<
+  FieldComboProps,
+  'size' | 'disabled' | 'value' | 'autoComplete' | 'onKeyDown' | 'onPaste' | 'onChange' | 'validationState'
+>;
+
+export const Cell = forwardRef<HTMLInputElement, CellProps>(function Cell(props, ref) {
+  const { className, size, stretchCells, value, ...fieldCellProps } = props;
+
+  return (
+    <FieldCombo
+      inputMode='numeric'
+      ref={ref}
+      className={cn(styles.cell, stretchCells && styles.stretch, className)}
+      data-size={size}
+      data-test-id={TEST_IDS.fieldCodeCell}
+      showClearButton={false}
+      value={value === ZERO_WIDTH_SPACE ? '' : value}
+      size={size}
+      {...fieldCellProps}
+    />
+  );
+});

package/src/components/FieldCode/components/Cell/index.ts

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

package/src/components/FieldCode/components/Cell/styles.module.scss

@@ -0,0 +1,27 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+$cell-widths: (
+  's': base.$sn-primitive-dimension-32,
+  'm': base.$sn-primitive-dimension-40,
+  'l': base.$sn-primitive-dimension-52,
+);
+
+.cell {
+  flex-shrink: 0;
+
+  input {
+    text-align: center;
+  }
+
+  @each $size, $width in $cell-widths {
+    &[data-size='#{$size}']:not(.stretch) {
+      width: $width;
+    }
+  }
+
+  // Класс, а не data-атрибут: FieldCombo роутит произвольные data-* на внутренний input, а не на корень .cell.
+  &.stretch {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+}