(feat/haptics): добавлена реализация WebHaptics [DS-16107]

.changeset/twelve-ends-find.md

@@ -0,0 +1,7 @@
+---
+'@alfalab/core-components-haptics': minor
+'@alfalab/core-components-config': minor
+'@alfalab/core-components': minor
+---
+
+- Добавлена базовая инфраструктура `haptic feedback`.

.vscode/settings.json

@@ -57,6 +57,7 @@
         "packages/generic-wrapper",
         "packages/global-store",
         "packages/grid",
+        "packages/haptics",
         "packages/hatching-progress-bar",
         "packages/icon-button",
         "packages/icon-view",

packages/button/package.json

@@ -13,6 +13,7 @@
         "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
     },
     "dependencies": {
+        "@alfalab/core-components-haptics": "^0.0.1",
         "@alfalab/core-components-mq": "^6.0.5",
         "@alfalab/core-components-shared": "^2.2.1",
         "@alfalab/core-components-spinner": "^6.0.5",

packages/button/src/components/base-button/Component.tsx

@@ -10,6 +10,7 @@ import React, {
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
+import { HapticA, HapticButton } from '@alfalab/core-components-haptics';
 import { getDataTestId } from '@alfalab/core-components-shared';
 import { Spinner } from '@alfalab/core-components-spinner';
 import { useFocus } from '@alfalab/hooks';
@@ -50,6 +51,7 @@ export const BaseButton = forwardRef<
             nowrap = false,
             colors = 'default',
             Component = href ? 'a' : 'button',
+            'data-haptic-preset': dataHapticPreset,
             onClick,
             styles = {},
             colorStylesMap = { default: {}, inverted: {} },
@@ -73,6 +75,9 @@ export const BaseButton = forwardRef<
 
         const iconOnly = !children;
 
+        const isNativeButton = Component === 'button';
+        const isNativeAnchor = Component === 'a';
+
         const sizeStyle = `size-${size}`;
 
         const componentProps = {
@@ -186,12 +191,16 @@ export const BaseButton = forwardRef<
 
         if (href) {
             const { target } = restProps as AnchorHTMLAttributes<HTMLAnchorElement>;
+            const LinkComponent = isNativeAnchor ? HapticA : Component;
 
             // Для совместимости с react-router-dom, меняем href на to
             const hrefProps = { [typeof Component === 'string' ? 'href' : 'to']: href };
 
             return (
-                <Component
+                <LinkComponent
+                    {...(isNativeAnchor && {
+                        'data-haptic-preset': dataHapticPreset,
+                    })}
                     rel={target === '_blank' ? 'noreferrer noopener' : undefined}
                     {...componentProps}
                     {...(restProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
@@ -201,12 +210,17 @@ export const BaseButton = forwardRef<
                     ref={mergeRefs([buttonRef, ref])}
                 >
                     {buttonChildren}
-                </Component>
+                </LinkComponent>
             );
         }
 
+        const ButtonComponent = isNativeButton ? HapticButton : Component;
+
         return (
-            <Component
+            <ButtonComponent
+                {...(isNativeButton && {
+                    'data-haptic-preset': dataHapticPreset,
+                })}
                 {...componentProps}
                 {...restButtonProps}
                 onClick={handleClick}
@@ -215,7 +229,7 @@ export const BaseButton = forwardRef<
                 ref={mergeRefs([buttonRef, ref])}
             >
                 {buttonChildren}
-            </Component>
+            </ButtonComponent>
         );
     },
 );

packages/button/src/typings.ts

@@ -5,6 +5,8 @@ import {
     type ReactNode,
 } from 'react';
 
+import { type HapticConfig } from '@alfalab/core-components-haptics';
+
 export type StyleColors = {
     default: {
         [key: string]: string;
@@ -114,6 +116,12 @@ type ComponentProps = {
      */
     children?: ReactNode;
 
+    /**
+     * Haptic-пресет или кастомный vibration-конфиг для клика по кнопке.
+     * @default selection
+     */
+    'data-haptic-preset'?: HapticConfig['data-haptic-preset'];
+
     /**
      * Дополнительный класс для label
      */

packages/button/tsconfig.build.json

@@ -9,6 +9,8 @@
         "paths": {
             "@alfalab/core-components-button": ["./src"],
             "@alfalab/core-components-button/*": ["./src/*"],
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-mq": ["../mq/src"],
             "@alfalab/core-components-mq/*": ["../mq/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
@@ -18,6 +20,7 @@
         }
     },
     "references": [
+        { "path": "../haptics/tsconfig.build.json" },
         { "path": "../mq/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },
         { "path": "../spinner/tsconfig.build.json" }

packages/button/tsconfig.json

@@ -8,6 +8,8 @@
         "paths": {
             "@alfalab/core-components-button": ["./src"],
             "@alfalab/core-components-button/*": ["./src/*"],
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-mq": ["../mq/src"],
             "@alfalab/core-components-mq/*": ["../mq/src/*"],
             "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
@@ -21,6 +23,7 @@
         }
     },
     "references": [
+        { "path": "../haptics/tsconfig.build.json" },
         { "path": "../mq/tsconfig.build.json" },
         { "path": "../screenshot-utils/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },

packages/checkbox/package.json

@@ -13,6 +13,7 @@
         "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
     },
     "dependencies": {
+        "@alfalab/core-components-haptics": "^0.0.1",
         "@alfalab/core-components-shared": "^2.2.1",
         "@alfalab/hooks": "^1.17.0",
         "classnames": "^2.5.1",

packages/checkbox/src/Component.tsx

@@ -12,6 +12,7 @@ import React, {
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
+import { type HapticConfig, HapticInput } from '@alfalab/core-components-haptics';
 import { dom, getDataTestId } from '@alfalab/core-components-shared';
 import { useFocus } from '@alfalab/hooks';
 
@@ -154,6 +155,12 @@ export type CheckboxProps = Omit<NativeProps, 'size' | 'onChange' | 'enterKeyHin
      * @default default
      */
     colors?: 'default' | 'inverted';
+
+    /**
+     * Haptic-пресет или кастомный vibration-конфиг для переключения чекбокса.
+     * @default selection
+     */
+    'data-haptic-preset'?: HapticConfig['data-haptic-preset'];
 };
 
 export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
@@ -184,6 +191,7 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
             error,
             inputRef,
             colors = 'default',
+            'data-haptic-preset': dataHapticPreset,
             ...restProps
         },
         ref,
@@ -237,7 +245,8 @@ export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(
                 ref={mergeRefs([labelRef, ref, labelProps?.ref as Ref<HTMLLabelElement>])}
             >
                 {!hiddenInput && (
-                    <input
+                    <HapticInput
+                        data-haptic-preset={dataHapticPreset}
                         type='checkbox'
                         onChange={handleChange}
                         name={name}

packages/checkbox/tsconfig.build.json

@@ -9,9 +9,14 @@
         "paths": {
             "@alfalab/core-components-checkbox": ["./src"],
             "@alfalab/core-components-checkbox/*": ["./src/*"],
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
             "@alfalab/core-components-shared/*": ["../shared/src/*"]
         }
     },
-    "references": [{ "path": "../shared/tsconfig.build.json" }]
+    "references": [
+        { "path": "../haptics/tsconfig.build.json" },
+        { "path": "../shared/tsconfig.build.json" }
+    ]
 }

packages/checkbox/tsconfig.json

@@ -8,6 +8,10 @@
         "paths": {
             "@alfalab/core-components-checkbox": ["./src"],
             "@alfalab/core-components-checkbox/*": ["./src/*"],
+            "@alfalab/core-components-config": ["../config/src"],
+            "@alfalab/core-components-config/*": ["../config/src/*"],
+            "@alfalab/core-components-haptics": ["../haptics/src"],
+            "@alfalab/core-components-haptics/*": ["../haptics/src/*"],
             "@alfalab/core-components-screenshot-utils": ["../screenshot-utils/src"],
             "@alfalab/core-components-screenshot-utils/*": ["../screenshot-utils/src/*"],
             "@alfalab/core-components-shared": ["../shared/src"],
@@ -17,6 +21,8 @@
         }
     },
     "references": [
+        { "path": "../config/tsconfig.build.json" },
+        { "path": "../haptics/tsconfig.build.json" },
         { "path": "../screenshot-utils/tsconfig.build.json" },
         { "path": "../shared/tsconfig.build.json" },
         { "path": "../test-utils/tsconfig.build.json" }

packages/config/src/CoreConfigContext.ts

@@ -4,6 +4,9 @@ export type CoreConfigContextValue = {
     breakpoint: number;
     client: 'desktop' | 'mobile';
     getPortalContainer?: () => Element | null | undefined;
+    haptics?: {
+        enabled?: boolean;
+    };
 };
 
 export const CoreConfigContext = createContext<CoreConfigContextValue>({

packages/haptics/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @alfalab/core-components-haptics
+
+## 0.0.1
+
+### Patch Changes
+
+<sup><time>14.05.2026</time></sup>
+
+- Инициализация пакета

packages/haptics/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "@alfalab/core-components-haptics",
+    "version": "0.0.1",
+    "description": "",
+    "keywords": [],
+    "license": "MIT",
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "main": "index.js",
+    "module": "./esm/index.js",
+    "scripts": {
+        "build": "rollup -c ../../tools/rollup/rollup.config.mjs --silent"
+    },
+    "dependencies": {
+        "@alfalab/core-components-config": "^1.1.0",
+        "tslib": "^2.4.0",
+        "web-haptics": "^0.0.6"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0 || ^19.0.0"
+    },
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    },
+    "themesVersion": "15.0.4",
+    "varsVersion": "11.0.2"
+}

packages/haptics/src/components/haptic-a/Component.tsx

@@ -0,0 +1,27 @@
+import React, { type AnchorHTMLAttributes, forwardRef, type MouseEvent } from 'react';
+
+import { useHaptic } from '../../hooks/use-haptic';
+import { type HapticBaseProps } from '../../types';
+
+type HapticAProps = AnchorHTMLAttributes<HTMLAnchorElement> & HapticBaseProps;
+
+export const HapticA = forwardRef<HTMLAnchorElement, HapticAProps>(
+    ({ 'data-haptic-preset': dataHapticPreset, onClick, ...restProps }, ref) => {
+        const { trigger } = useHaptic({ dataHapticPreset });
+
+        const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
+            onClick?.(event);
+
+            if (event.defaultPrevented) return;
+
+            trigger();
+        };
+
+        return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/anchor-has-content, jsx-a11y/click-events-have-key-events
+            <a {...restProps} ref={ref} onClick={handleClick} />
+        );
+    },
+);
+
+HapticA.displayName = 'HapticA';

packages/haptics/src/components/haptic-a/index.ts

@@ -0,0 +1 @@
+export { HapticA } from './Component';

packages/haptics/src/components/haptic-button/Component.tsx

@@ -0,0 +1,33 @@
+import React, { type ButtonHTMLAttributes, forwardRef, type MouseEvent } from 'react';
+
+import { useHaptic } from '../../hooks/use-haptic';
+import { type HapticBaseProps } from '../../types';
+
+type HapticButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
+    type?: 'button' | 'submit';
+} & HapticBaseProps;
+
+export const HapticButton = forwardRef<HTMLButtonElement, HapticButtonProps>(
+    ({ 'data-haptic-preset': dataHapticPreset, onClick, type = 'button', ...restProps }, ref) => {
+        const { trigger } = useHaptic({ dataHapticPreset });
+
+        const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+            onClick?.(e);
+
+            if (e.defaultPrevented) return;
+
+            trigger();
+        };
+
+        return (
+            <button
+                {...restProps}
+                ref={ref}
+                type={type === 'submit' ? 'submit' : 'button'}
+                onClick={handleClick}
+            />
+        );
+    },
+);
+
+HapticButton.displayName = 'HapticButton';

packages/haptics/src/components/haptic-button/index.ts

@@ -0,0 +1 @@
+export { HapticButton } from './Component';

packages/haptics/src/components/haptic-input/Component.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef, type InputHTMLAttributes, type MouseEvent } from 'react';
+
+import { useHaptic } from '../../hooks/use-haptic';
+import { type HapticBaseProps } from '../../types';
+
+type HapticInputProps = InputHTMLAttributes<HTMLInputElement> & HapticBaseProps;
+
+export const HapticInput = forwardRef<HTMLInputElement, HapticInputProps>(
+    ({ 'data-haptic-preset': dataHapticPreset, onClick, ...restProps }, ref) => {
+        const { trigger } = useHaptic({ dataHapticPreset });
+
+        const handleClick = (event: MouseEvent<HTMLInputElement>) => {
+            onClick?.(event);
+
+            if (event.defaultPrevented) return;
+
+            trigger();
+        };
+
+        return <input {...restProps} ref={ref} onClick={handleClick} />;
+    },
+);
+
+HapticInput.displayName = 'HapticInput';

packages/haptics/src/components/haptic-input/index.ts

@@ -0,0 +1 @@
+export { HapticInput } from './Component';

packages/haptics/src/components/index.ts

@@ -0,0 +1,3 @@
+export { HapticA } from './haptic-a';
+export { HapticButton } from './haptic-button';
+export { HapticInput } from './haptic-input';