@cloud-ru/ds-fields 1.0.0

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@cloud-ru/ds-fields",
+  "version": "1.0.0",
+  "description": "Поля ввода с единой обёрткой label/caption/hint/error и общими осями size/validationState — текст, пароль, число, ползунок, дата, время, выбор, цвет.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloud-ru-tech/snack-v2.git",
+    "directory": "packages/fields"
+  },
+  "homepage": "https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/fields",
+  "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"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "merge-refs": "^2.0.0",
+    "react-textarea-autosize": "^8.5.9",
+    "@cloud-ru/ds-adaptive": "^1.0.0",
+    "@cloud-ru/ds-button": "^1.0.0",
+    "@cloud-ru/ds-calendar": "^1.0.0",
+    "@cloud-ru/ds-bottom-sheet": "^1.0.0",
+    "@cloud-ru/ds-divider": "^1.0.0",
+    "@cloud-ru/ds-dropdown": "^1.0.0",
+    "@cloud-ru/ds-field-decorator": "^1.0.0",
+    "@cloud-ru/ds-icons": "^1.0.0",
+    "@cloud-ru/ds-list": "^1.0.0",
+    "@cloud-ru/ds-loader": "^1.0.0",
+    "@cloud-ru/ds-materials": "^1.0.0",
+    "@cloud-ru/ds-color-picker": "^1.0.0",
+    "@cloud-ru/ds-skeleton": "^1.0.0",
+    "@cloud-ru/ds-tag": "^1.0.0",
+    "@cloud-ru/ds-slider": "^1.0.0",
+    "@cloud-ru/ds-input-private": "^1.0.0",
+    "@cloud-ru/ds-tooltip": "^1.0.0",
+    "@cloud-ru/ds-scroll": "^1.0.0",
+    "@cloud-ru/ds-utils": "^1.0.0"
+  }
+}

package/src/components/FieldColor/FieldColor.tsx

@@ -0,0 +1,426 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { NO_DRAG_ATTRIBUTE } from '@cloud-ru/ds-bottom-sheet';
+import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
+import { ColorPicker, colorPickerLocale, ColorPickerProps, RawColor } from '@cloud-ru/ds-color-picker';
+import { Dropdown } from '@cloud-ru/ds-dropdown';
+import { FieldDecorator, FieldDecoratorProps, SIZE, VALIDATION_STATE } from '@cloud-ru/ds-field-decorator';
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
+import { InputPrivate, InputPrivateProps, useButtonNavigation, useClearButton } from '@cloud-ru/ds-input-private';
+import { useValueControl } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import {
+  CSSProperties,
+  FocusEvent,
+  forwardRef,
+  KeyboardEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { FieldLayoutPresets, useAdaptiveAutoFocus } from '../../hooks';
+import { copyTextToClipboard, getAcrylicProps, toInputSize, useCopyButton } from '../shared';
+import fieldStyles from '../shared/styles.module.scss';
+import styles from './styles.module.scss';
+import { normalizeHexInput } from './utils';
+
+type FieldColorDecoratorProps = Omit<FieldDecoratorProps, 'children'>;
+
+type FieldColorOwnProps = {
+  /** CSS-класс корня `FieldDecorator` */
+  className?: string;
+  /** CSS-класс оболочки поля */
+  fieldClassName?: string;
+  /** Текущее значение (hex/rgb/hsl-строка, controlled-режим). */
+  value?: string;
+  /** Начальное значение (uncontrolled-режим). */
+  defaultValue?: string;
+  /** Колбек смены значения. */
+  onChange?(value: string): void;
+  /** Открыт color-picker. */
+  open?: boolean;
+  /** Колбек смены состояния открытия. */
+  onOpenChange?(open: boolean): void;
+  /**
+   * Показывать кнопку очистки (видна при value && !readonly && !disabled).
+   * @default true
+   */
+  showClearButton?: boolean;
+  /** Колбек после клика по кнопке очистки. */
+  onClearButtonClick?(): void;
+  /**
+   * Показывать кнопку копирования (видна при readonly && value && !disabled).
+   * @default true
+   */
+  showCopyButton?: boolean;
+  /** Колбек после копирования значения. */
+  onCopyButtonClick?(): void;
+  /**
+   * Переопределение адаптивных дефолтов по раскладке. Участвует `autoFocus`: на mobile он выключен
+   * (открывает клавиатуру без действия). Вернуть на mobile — `layoutPresets={{ mobile: { autoFocus: true } }}`.
+   */
+  layoutPresets?: FieldLayoutPresets;
+  /**
+   * Фон поля (acrylic).
+   * @default true
+   */
+  background?: boolean;
+  // Только desktop: `autoApply` действует на desktop-палитре; на mobile значение всегда коммитится
+  // по явному Apply в `BottomSheet` (autoApply форсится в `true`).
+} & Pick<ColorPickerProps, 'withAlpha' | 'autoApply' | 'availableModes'>;
+
+export type FieldColorProps = FieldColorDecoratorProps &
+  Omit<InputPrivateProps, 'className' | 'value' | 'onChange'> &
+  FieldColorOwnProps;
+
+export const FieldColor = forwardRef<HTMLInputElement, FieldColorProps>(function FieldColor(
+  {
+    label = '',
+    labelTooltip,
+    caption,
+    hint,
+    error,
+    validationState = VALIDATION_STATE.Default,
+    showHintIcon,
+    length,
+    required,
+    size = SIZE.M,
+    className,
+    fieldClassName,
+    background = true,
+    value: valueProp,
+    defaultValue = '',
+    onChange: onChangeProp,
+    open: openProp,
+    onOpenChange,
+    showClearButton: showClearButtonProp = true,
+    onClearButtonClick,
+    showCopyButton: showCopyButtonProp = true,
+    onCopyButtonClick,
+    withAlpha,
+    autoApply,
+    availableModes,
+    layoutPresets,
+    disabled,
+    readonly: readOnly,
+    placeholder,
+    'data-test-id': dataTestId = TEST_IDS.fieldColor,
+    ...inputProps
+  },
+  ref,
+) {
+  const {
+    onFocus: onFocusProp,
+    onBlur: onBlurProp,
+    onKeyDown: onKeyDownProp,
+    tabIndex: tabIndexProp,
+    autoFocus,
+    ...restInputProps
+  } = inputProps;
+  const localRef = useRef<HTMLInputElement>(null);
+  const clearButtonRef = useRef<HTMLButtonElement>(null);
+  const copyButtonRef = useRef<HTMLButtonElement>(null);
+  const [focusVisible, setFocusVisible] = useState(false);
+  const [hover, setHover] = useState(false);
+  const [openLocal, setOpenLocal] = useState(false);
+  const open = openProp ?? openLocal;
+  const { layoutType } = useAdaptiveLayout();
+  const mobile = isMobileLayout(layoutType);
+
+  const resolvedAutoFocus = useAdaptiveAutoFocus(autoFocus, layoutPresets);
+
+  const [value = '', onChange] = useValueControl<string>({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp,
+  });
+  const effectiveValidationState = useMemo(
+    () => (error ? VALIDATION_STATE.Error : validationState),
+    [error, validationState],
+  );
+
+  const showOpen = open && !disabled && !readOnly;
+  const showClearUi = Boolean(showClearButtonProp && value && !readOnly && !disabled);
+  const showCopyUi = Boolean(showCopyButtonProp && value && !disabled && readOnly);
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (openProp === undefined) setOpenLocal(next);
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange],
+  );
+
+  // Фокус в поле при открытии пикера (паритет с легаси `@snack-uikit/fields`). На mobile пикер
+  // открывается в `BottomSheet` поверх поля — фокус на скрытый под ним input не уводим.
+  useEffect(() => {
+    if (open && !mobile) {
+      localRef.current?.focus();
+    }
+  }, [open, mobile]);
+
+  const onClear = useCallback(() => {
+    onChange?.('');
+    onClearButtonClick?.();
+    if (required) {
+      localRef.current?.focus();
+    }
+  }, [onChange, onClearButtonClick, required]);
+
+  const onCopy = useCallback(async () => {
+    const copied = await copyTextToClipboard(value);
+    if (copied) {
+      onCopyButtonClick?.();
+    }
+    return copied;
+  }, [onCopyButtonClick, value]);
+
+  const clearButtonSettings = useClearButton({
+    clearButtonRef,
+    showClearButton: showClearUi,
+    size: toInputSize(size),
+    onClear,
+    disabled: Boolean(disabled || readOnly),
+  });
+
+  const copyButtonSettings = useCopyButton({
+    copyButtonRef,
+    showCopyButton: showCopyUi,
+    size: toInputSize(size),
+    onCopy,
+    disabled: Boolean(disabled),
+  });
+
+  const { postfixButtons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
+    inputRef: localRef,
+    postfixButtons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+    readonly: Boolean(readOnly),
+    submitKeys: ['Enter', 'Space', 'Tab'],
+  });
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      onInputKeyDown(event);
+      onKeyDownProp?.(event);
+    },
+    [onInputKeyDown, onKeyDownProp],
+  );
+
+  const handleInputChange = useCallback(
+    (next: string) => {
+      onChange?.(normalizeHexInput(next, withAlpha));
+    },
+    [onChange, withAlpha],
+  );
+
+  const handlePickerChange = useCallback(
+    (raw: RawColor) => {
+      onChange?.(raw.hex);
+    },
+    [onChange],
+  );
+
+  const { t } = colorPickerLocale.useTranslations();
+
+  // Mobile: палитра в BottomSheet с явным Apply — правки в черновик, коммит в поле по Apply.
+  const [draft, setDraft] = useState(value);
+  const prevOpenRef = useRef(open);
+  useEffect(() => {
+    if (open && !prevOpenRef.current && mobile) {
+      setDraft(value);
+    }
+    prevOpenRef.current = open;
+  }, [open, mobile, value]);
+
+  const handleMobileApply = useCallback(() => {
+    onChange?.(draft ?? '');
+    handleOpenChange(false);
+  }, [onChange, draft, handleOpenChange]);
+
+  const handleMobileCancel = useCallback(() => {
+    handleOpenChange(false);
+  }, [handleOpenChange]);
+
+  const handleMouseEnter = useCallback(() => {
+    if (!readOnly && !disabled) {
+      setHover(true);
+    }
+  }, [readOnly, disabled]);
+
+  const handleMouseLeave = useCallback(() => {
+    setHover(false);
+  }, []);
+
+  const handleInputFocus = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      setFocusVisible(event.target.matches(':focus-visible'));
+      onFocusProp?.(event);
+    },
+    [onFocusProp],
+  );
+
+  const handleInputBlur = useCallback(
+    (event: FocusEvent<HTMLInputElement>) => {
+      setFocusVisible(false);
+      onBlurProp?.(event);
+    },
+    [onBlurProp],
+  );
+
+  const trigger = (
+    <div
+      className={cn(fieldStyles.fieldWrapper, styles.trigger, fieldClassName)}
+      data-size={size}
+      data-validation-state={effectiveValidationState}
+      data-disabled={disabled || undefined}
+      data-readonly={readOnly || undefined}
+      data-withbackground={background || undefined}
+      data-focusvisible={focusVisible || showOpen || undefined}
+      data-hover={!readOnly && !disabled && hover ? true : undefined}
+      data-test-id={dataTestId}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className={fieldStyles.backgroundWrapper}>
+        <div
+          className={fieldStyles.materialLayer}
+          {...getAcrylicProps({
+            validationState: effectiveValidationState,
+            disabled,
+            readonly: readOnly,
+            hover,
+            focusVisible: focusVisible || showOpen,
+          })}
+        >
+          <div className={fieldStyles.acrylicBg} aria-hidden />
+        </div>
+        <div className={fieldStyles.borderStateLayer} data-state='borderOnBackground' />
+        <div className={fieldStyles.focusLayer} />
+      </div>
+      <div className={fieldStyles.fieldContainer}>
+        <div className={fieldStyles.contentWrapper}>
+          <div className={fieldStyles.iconSlot}>
+            <span
+              className={styles.swatch}
+              data-test-id={TEST_IDS.fieldColorSwatch}
+              style={{ '--field-color-swatch-color': value || 'transparent' } as CSSProperties}
+              aria-hidden
+            />
+          </div>
+          <div className={fieldStyles.inputLine}>
+            <div className={fieldStyles.inputArea}>
+              <InputPrivate
+                ref={mergeRefs(ref, localRef)}
+                className={fieldStyles.fieldInput}
+                value={value}
+                onChange={handleInputChange}
+                disabled={disabled}
+                readonly={readOnly}
+                placeholder={placeholder}
+                autoFocus={resolvedAutoFocus}
+                tabIndex={tabIndexProp ?? inputTabIndex}
+                onKeyDown={handleKeyDown}
+                onFocus={handleInputFocus}
+                onBlur={handleInputBlur}
+                {...restInputProps}
+                data-test-id={TEST_IDS.fieldColorInput}
+              />
+              {postfixButtons && <span className={fieldStyles.postfixButtonsSlot}>{postfixButtons}</span>}
+            </div>
+          </div>
+          {/* Chevron присутствует во всех состояниях, включая readonly — паритет с Figma
+              readonly-варианты тоже показывают chevron-down рядом с copy). */}
+          <div className={fieldStyles.iconSlot}>
+            <span className={styles.chevron} data-test-id={TEST_IDS.fieldColorChevron} aria-hidden>
+              {showOpen ? <ChevronUpSVG /> : <ChevronDownSVG />}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <FieldDecorator
+      className={className}
+      label={label}
+      labelTooltip={labelTooltip}
+      caption={caption}
+      hint={hint}
+      error={error}
+      validationState={validationState}
+      showHintIcon={showHintIcon}
+      length={length}
+      required={required}
+      labelFor={inputProps.id}
+      disabled={disabled}
+      readonly={readOnly}
+      size={size}
+    >
+      <Dropdown
+        trigger='click'
+        widthStrategy='auto'
+        open={showOpen}
+        onOpenChange={handleOpenChange}
+        headerDivider={mobile}
+        footerDivider={mobile}
+        title={
+          mobile ? (
+            <span className={styles.sheetTitle} data-test-id={TEST_IDS.fieldColorSheetTitle}>
+              {(draft || '').toUpperCase()}
+              <span
+                className={styles.sheetSwatch}
+                style={{ '--field-color-swatch-color': draft || 'transparent' } as CSSProperties}
+                aria-hidden
+              />
+            </span>
+          ) : undefined
+        }
+        footer={
+          mobile ? (
+            <div className={styles.sheetFooter}>
+              <Button
+                label={t('cancel')}
+                size={size}
+                view={VIEW.Function}
+                appearance={APPEARANCE.Neutral}
+                onClick={handleMobileCancel}
+                data-test-id={TEST_IDS.fieldColorCancel}
+              />
+              <Button
+                label={t('apply')}
+                size={size}
+                view={VIEW.Filled}
+                appearance={APPEARANCE.Primary}
+                onClick={handleMobileApply}
+                data-test-id={TEST_IDS.fieldColorApply}
+              />
+            </div>
+          ) : undefined
+        }
+        content={
+          // На mobile палитра живёт в `BottomSheet`: помечаем её no-drag, иначе drag по слайдеру/области
+          // цвета одновременно потащил бы sheet к закрытию (свайп-дисмисс перехватывал бы жест контрола).
+          <div className={styles.pickerHost} {...(mobile ? { [NO_DRAG_ATTRIBUTE]: '' } : {})}>
+            <ColorPicker
+              value={(mobile ? draft : value) || undefined}
+              size={size}
+              withAlpha={withAlpha}
+              withColorArea={mobile ? false : undefined}
+              autoApply={mobile ? true : autoApply}
+              availableModes={availableModes}
+              onChange={mobile ? raw => setDraft(raw.hex) : handlePickerChange}
+              data-test-id={TEST_IDS.fieldColorPicker}
+            />
+          </div>
+        }
+      >
+        {trigger}
+      </Dropdown>
+    </FieldDecorator>
+  );
+});

package/src/components/FieldColor/index.ts

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

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

@@ -0,0 +1,120 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/colorPicker.module' as colorPicker;
+
+// FieldColor size → colorPicker previewColor size (Figma fieldSelectColor):
+// s → colorPicker s (16px / radius 4), m → colorPicker m (24px / radius 8),
+// l → colorPicker m (24px / radius 8) — в макете L-поле референсит m-токен previewColor,
+// swatch не увеличивается до 32.
+$swatch-sizes: (
+  's': 's',
+  'm': 'm',
+  'l': 'm',
+);
+
+.trigger {
+  cursor: pointer;
+}
+
+.swatch {
+  position: relative;
+
+  flex: 0 0 auto;
+
+  background-color: var(--field-color-swatch-color, transparent);
+
+  // Шахматка прозрачности — визуальная конвенция alpha-канала, у геометрии клеток нет
+  // дизайн-токена; литералы 8px/4px намеренные (паритет с легаси color-picker swatch).
+  background-image:
+    linear-gradient(45deg, base.$sn-theme-color-available-borderColor 25%, transparent 25%),
+    linear-gradient(-45deg, base.$sn-theme-color-available-borderColor 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, base.$sn-theme-color-available-borderColor 75%),
+    linear-gradient(-45deg, transparent 75%, base.$sn-theme-color-available-borderColor 75%);
+  background-position:
+    0 0,
+    0 4px,
+    4px -4px,
+    -4px 0;
+  background-size: 8px 8px;
+
+  &::after {
+    content: '';
+
+    position: absolute;
+    inset: 0;
+
+    border-radius: inherit;
+
+    background-color: var(--field-color-swatch-color, transparent);
+  }
+}
+
+.chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: base.$sn-theme-color-available-version-textTertiary;
+}
+
+@each $size, $tokenSize in $swatch-sizes {
+  .trigger[data-size='#{$size}'] .swatch {
+    width: base.simple-var(colorPicker.$colorPicker, 'anatomy', 'size', $tokenSize, 'previewColor', 'width');
+    height: base.simple-var(colorPicker.$colorPicker, 'anatomy', 'size', $tokenSize, 'previewColor', 'height');
+    border-radius: base.simple-var(colorPicker.$colorPicker, 'anatomy', 'size', $tokenSize, 'previewColor', 'border-radius');
+  }
+}
+
+// Mobile: заголовок sheet'а — текущий цвет (hex + круглый swatch).
+.sheetTitle {
+  display: inline-flex;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+}
+
+.sheetSwatch {
+  position: relative;
+
+  flex: 0 0 auto;
+
+  width: base.$sn-primitive-dimension-24;
+  height: base.$sn-primitive-dimension-24;
+  border-radius: 50%;
+
+  background-color: var(--field-color-swatch-color, transparent);
+
+  // Шахматка прозрачности — та же конвенция, что у `.swatch` (литералы 8px/4px намеренные).
+  background-image:
+    linear-gradient(45deg, base.$sn-theme-color-available-borderColor 25%, transparent 25%),
+    linear-gradient(-45deg, base.$sn-theme-color-available-borderColor 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, base.$sn-theme-color-available-borderColor 75%),
+    linear-gradient(-45deg, transparent 75%, base.$sn-theme-color-available-borderColor 75%);
+  background-position:
+    0 0,
+    0 4px,
+    4px -4px,
+    -4px 0;
+  background-size: 8px 8px;
+
+  &::after {
+    content: '';
+
+    position: absolute;
+    inset: 0;
+
+    border-radius: inherit;
+
+    background-color: var(--field-color-swatch-color, transparent);
+  }
+}
+
+.sheetFooter {
+  display: flex;
+  gap: base.$sn-primitive-dimension-8;
+  justify-content: space-between;
+}
+
+// Прозрачная для layout обёртка палитры (несёт только `data-bottom-sheet-no-drag`): не должна влиять
+// на раскладку контента sheet'а / popover'а — `display: contents` убирает её из box-дерева, но не из DOM,
+// поэтому `closest()` drag-движка её по-прежнему находит.
+.pickerHost {
+  display: contents;
+}

package/src/components/FieldColor/utils.ts

@@ -0,0 +1,17 @@
+/** Всё, что не hex-цифра. */
+const NON_HEX_CHARS = /[^0-9a-fA-F]/g;
+/** Hex-цифр с альфой: `rrggbbaa` (8); без альфы: `rrggbb` (6). `#` не считается. */
+const HEX_DIGITS_WITH_ALPHA = 8;
+const HEX_DIGITS_NO_ALPHA = 6;
+
+/**
+ * Нормализует пользовательский ввод цвета в потенциально валидную hex-строку:
+ * при наличии hex-цифр ведущая `#` обязательна (добавляется всегда), за ней — не более
+ * 8 hex-цифр (`rrggbbaa`) при `withAlpha`, иначе 6 (`rrggbb`). Лишние/внутренние `#` и
+ * любые не-hex символы отбрасываются. Пустой ввод (очистка поля) остаётся пустым.
+ */
+export function normalizeHexInput(raw: string, withAlpha = true): string {
+  const maxDigits = withAlpha ? HEX_DIGITS_WITH_ALPHA : HEX_DIGITS_NO_ALPHA;
+  const digits = raw.replace(NON_HEX_CHARS, '').slice(0, maxDigits);
+  return digits ? `#${digits}` : '';
+}