Skip to content

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

Draft
dHIM24 wants to merge 15 commits into
masterfrom
DS-16107
Draft

(feat/haptics): добавлена реализация WebHaptics [DS-16107]#2209
dHIM24 wants to merge 15 commits into
masterfrom
DS-16107

Conversation

@dHIM24

@dHIM24 dHIM24 commented May 12, 2026

Copy link
Copy Markdown
Contributor
  • Добавлена базовая инфраструктура haptic feedback.

Чек лист

  • Задача сформулирована и описана в JIRA
  • В названии ветки есть айдишник задачи в JIRA (fix/DS-1234), ссылку прикреплять не надо
  • У реквеста осмысленное название feat(...) или fix(...) по conventional commits (https://www.conventionalcommits.org)
  • Код покрыт тестами и протестирован в различных браузерах
  • Добавленные пропсы добавлены в демки и описаны в документации
  • К реквесту добавлен changeset

Если есть визуальные изменения

  • Прикреплено изображение было/стало

Отрабатывает API, как WebHaptics, так и нативного решения

Screen_Recording_20260512_073849_Yandex.Browser.mp4
render(() => {
    const [checkboxFirst, setCheckboxFirst] = React.useState(false);
    const [checkboxSecond, setCheckboxSecond] = React.useState(false);
    const [radio, setRadio] = React.useState('first');
    const [switchChecked, setSwitchChecked] = React.useState(true);
    const [sliderValue, setSliderValue] = React.useState(2.5);
    const [numberValue, setNumberValue] = React.useState(1);
    const [date, setDate] = React.useState(null);

    return (
        <CoreConfigContext.Provider
            value={{
                breakpoint: 1024,
                client: 'mobile',
                haptics: { enabled: true, debug: true },
            }}
        >
            <div style={{ display: 'flex', flexDirection: 'column', gap: 48 }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                    <Typography.Text view='primary-small' color='secondary'>
                        Чекбоксы
                    </Typography.Text>
                    <Checkbox
                        checked={checkboxFirst}
                        label='Чекбокс 1'
                        onChange={(_, { checked }) => setCheckboxFirst(checked)}
                        data-haptic-preset='buzz'
                    />
                    <Checkbox
                        checked={checkboxSecond}
                        label='Чекбокс 2'
                        onChange={(_, { checked }) => setCheckboxSecond(checked)}
                    />
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                    <Typography.Text view='primary-small' color='secondary'>
                        Радио
                    </Typography.Text>
                    <Radio
                        checked={radio === 'first'}
                        label='Радио 1'
                        name='haptic-radio'
                        onChange={() => setRadio('first')}
                    />
                    <Radio
                        checked={radio === 'second'}
                        label='Радио 2'
                        name='haptic-radio'
                        onChange={() => setRadio('second')}
                    />
                </div>

                <Switch
                    checked={switchChecked}
                    label='Свитч'
                    onChange={(_, { checked }) => setSwitchChecked(checked)}
                />

                <Slider
                    min={1}
                    max={10}
                    step={1}
                    value={sliderValue}
                    pips={{ mode: 'steps', values: 1 }}
                    onChange={({ value }) => setSliderValue(value)}
                />

                <NumberInput
                    block={true}
                    label='Инпут со степпером'
                    labelView='inner'
                    min={1}
                    max={10}
                    step={1}
                    value={numberValue}
                    onChange={(_, { value }) => setNumberValue(value)}
                />

                <UniversalDateInput
                    block={true}
                    view='date'
                    label='Календарь'
                    labelView='inner'
                    value={date}
                    onChange={setDate}
                    picker={true}
                    Calendar={Calendar}
                    disableUserInput={true}
                />
            </div>
        </CoreConfigContext.Provider>
    );
});

@changeset-bot

changeset-bot Bot commented May 12, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: ba8df55

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 87 packages
Name Type
@alfalab/core-components-haptics Minor
@alfalab/core-components-config Minor
@alfalab/core-components Major
@alfalab/core-components-button Patch
@alfalab/core-components-checkbox Patch
@alfalab/core-components-number-input Patch
@alfalab/core-components-radio Patch
@alfalab/core-components-switch Patch
@alfalab/core-components-mq Major
@alfalab/core-components-portal Major
@alfalab/core-components-attach Patch
@alfalab/core-components-calendar-with-skeleton Patch
@alfalab/core-components-calendar Patch
@alfalab/core-components-confirmation-v1 Patch
@alfalab/core-components-confirmation Patch
@alfalab/core-components-custom-button Patch
@alfalab/core-components-drawer Patch
@alfalab/core-components-gallery Patch
@alfalab/core-components-icon-button Patch
@alfalab/core-components-input Patch
@alfalab/core-components-navigation-bar-private Patch
@alfalab/core-components-navigation-bar Patch
@alfalab/core-components-pass-code-v1 Patch
@alfalab/core-components-pass-code Patch
@alfalab/core-components-pattern-lock-v1 Patch
@alfalab/core-components-pattern-lock Patch
@alfalab/core-components-picker-button Patch
@alfalab/core-components-plate Patch
@alfalab/core-components-product-cover Patch
@alfalab/core-components-pure-cell Patch
@alfalab/core-components-select Patch
@alfalab/core-components-table Patch
@alfalab/core-components-tooltip Patch
@alfalab/core-components-amount-input Patch
@alfalab/core-components-calendar-input Patch
@alfalab/core-components-checkbox-group Patch
@alfalab/core-components-code-input Patch
@alfalab/core-components-custom-picker-button Patch
@alfalab/core-components-date-range-input Patch
@alfalab/core-components-date-time-input Patch
@alfalab/core-components-filter-tag Patch
@alfalab/core-components-form-control Patch
@alfalab/core-components-input-autocomplete Patch
@alfalab/core-components-international-phone-input Patch
@alfalab/core-components-markdown Patch
@alfalab/core-components-modal Patch
@alfalab/core-components-radio-group Patch
@alfalab/core-components-select-with-tags Patch
@alfalab/core-components-side-panel Patch
@alfalab/core-components-system-message Patch
@alfalab/core-components-tabs Patch
@alfalab/core-components-tag Patch
@alfalab/core-components-textarea Patch
@alfalab/core-components-toast-plate Patch
@alfalab/core-components-toast Patch
@alfalab/core-components-typography Patch
@alfalab/core-components-universal-date-input Patch
@alfalab/core-components-universal-modal Patch
@alfalab/core-components-base-modal Patch
@alfalab/core-components-notification-manager Patch
@alfalab/core-components-notification Patch
@alfalab/core-components-popover Patch
@alfalab/core-components-sortable-list Patch
@alfalab/core-components-with-suffix Patch
@alfalab/core-components-calendar-range Patch
@alfalab/core-components-file-upload-item-v1 Patch
@alfalab/core-components-file-upload-item Patch
@alfalab/core-components-password-input Patch
@alfalab/core-components-date-input Patch
@alfalab/core-components-masked-input Patch
@alfalab/core-components-slider-input Patch
@alfalab/core-components-time-input Patch
@alfalab/core-components-bottom-sheet Patch
@alfalab/core-components-popup-sheet Patch
@alfalab/core-components-alert Patch
@alfalab/core-components-intl-phone-input Patch
@alfalab/core-components-pagination Patch
@alfalab/core-components-accordion Patch
@alfalab/core-components-chart Patch
@alfalab/core-components-circular-progress-bar Patch
@alfalab/core-components-comment Patch
@alfalab/core-components-list-header Patch
@alfalab/core-components-list Patch
@alfalab/core-components-stepped-progress-bar Patch
@alfalab/core-components-tab-bar Patch
@alfalab/core-components-bank-card Patch
@alfalab/core-components-phone-input Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@dHIM24 dHIM24 changed the title (feat/shared): добавлена реализация WebHaptics (feat/shared): добавлена реализация WebHaptics [DS-16107] May 12, 2026
@github-actions

github-actions Bot commented May 12, 2026

Copy link
Copy Markdown
Contributor

Bundle size report

Entry point Size (minified)
@alfalab/core-components-alert/index.js 23.3 (+8.30 KB ❌)
@alfalab/core-components-alert/desktop/index.js 23 (+8.40 KB ❌)
@alfalab/core-components-alert/mobile/index.js 23 (+8.40 KB ❌)
@alfalab/core-components-amount-input/index.js 70.2 (+8.40 KB ❌)
@alfalab/core-components-attach/index.js 22.2 (+8.30 KB ❌)
@alfalab/core-components-bank-card/index.js 51.6 (+8.30 KB ❌)
@alfalab/core-components-bottom-sheet/index.js 97.2 (+8.40 KB ❌)
@alfalab/core-components-button/index.js 16.8 (+8.40 KB ❌)
@alfalab/core-components-button/desktop/index.js 15 (+8.50 KB ❌)
@alfalab/core-components-button/mobile/index.js 15 (+8.50 KB ❌)
@alfalab/core-components-calendar/index.js 193.2 (+8.40 KB ❌)
@alfalab/core-components-calendar/desktop/index.js 71.7 (+8.30 KB ❌)
@alfalab/core-components-calendar/mobile/index.js 193 (+8.30 KB ❌)
@alfalab/core-components-calendar/shared/index.js 52.3 (+8.30 KB ❌)
@alfalab/core-components-calendar-input/index.js 263.8 (+8.40 KB ❌)
@alfalab/core-components-calendar-input/desktop/index.js 151.2 (+8.30 KB ❌)
@alfalab/core-components-calendar-input/mobile/index.js 263.5 (+8.30 KB ❌)
@alfalab/core-components-calendar-range/index.js 300.7 (+8.40 KB ❌)
@alfalab/core-components-calendar-with-skeleton/index.js 73.1 (+8.30 KB ❌)
@alfalab/core-components-checkbox/index.js 12.3 (+8.10 KB ❌)
@alfalab/core-components-confirmation/index.js 39.8 (+8.30 KB ❌)
@alfalab/core-components-confirmation/desktop/index.js 39.6 (+8.40 KB ❌)
@alfalab/core-components-confirmation/mobile/index.js 39.6 (+8.30 KB ❌)
@alfalab/core-components-confirmation/shared/index.js 37.8 (+8.30 KB ❌)
@alfalab/core-components-confirmation-v1/index.js 30.7 (+8.50 KB ❌)
@alfalab/core-components-custom-button/index.js 17.4 (+8.30 KB ❌)
@alfalab/core-components-custom-button/desktop/index.js 15.7 (+8.60 KB ❌)
@alfalab/core-components-custom-button/mobile/index.js 15.7 (+8.60 KB ❌)
@alfalab/core-components-custom-picker-button/index.js 258 (+8.60 KB ❌)
@alfalab/core-components-custom-picker-button/desktop/index.js 151.1 (+8.60 KB ❌)
@alfalab/core-components-custom-picker-button/mobile/index.js 230.5 (+8.60 KB ❌)
@alfalab/core-components-date-input/index.js 77.2 (+8.40 KB ❌)
@alfalab/core-components-date-range-input/index.js 263.2 (+8.30 KB ❌)
@alfalab/core-components-date-range-input/desktop/index.js 150.3 (+8.30 KB ❌)
@alfalab/core-components-date-range-input/mobile/index.js 262.5 (+8.30 KB ❌)
@alfalab/core-components-date-time-input/index.js 262.7 (+8.30 KB ❌)
@alfalab/core-components-date-time-input/desktop/index.js 149.8 (+8.30 KB ❌)
@alfalab/core-components-date-time-input/mobile/index.js 262 (+8.30 KB ❌)
@alfalab/core-components-file-upload-item/index.js 69.8 (+8.40 KB ❌)
@alfalab/core-components-file-upload-item-v1/index.js 28.1 (+8.30 KB ❌)
@alfalab/core-components-gallery/index.js 634.1 (+8.30 KB ❌)
@alfalab/core-components-haptics/index.js 8.6 (+8.60 KB ❌)
@alfalab/core-components-icon-button/index.js 18 (+8.40 KB ❌)
@alfalab/core-components-icon-button/desktop/index.js 16.3 (+8.60 KB ❌)
@alfalab/core-components-icon-button/mobile/index.js 16.2 (+8.50 KB ❌)
@alfalab/core-components-input/index.js 35.1 (+8.30 KB ❌)
@alfalab/core-components-input/desktop/index.js 34.6 (+8.40 KB ❌)
@alfalab/core-components-input/mobile/index.js 34.5 (+8.30 KB ❌)
@alfalab/core-components-input/shared/index.js 21 (+8.40 KB ❌)
@alfalab/core-components-input-autocomplete/index.js 262.6 (+8.60 KB ❌)
@alfalab/core-components-input-autocomplete/desktop/index.js 163.7 (+8.60 KB ❌)
@alfalab/core-components-input-autocomplete/mobile/index.js 235.3 (+8.60 KB ❌)
@alfalab/core-components-international-phone-input/index.js 560 (+8.60 KB ❌)
@alfalab/core-components-international-phone-input/desktop/index.js 477.5 (+8.60 KB ❌)
@alfalab/core-components-international-phone-input/mobile/index.js 532 (+8.60 KB ❌)
@alfalab/core-components-intl-phone-input/index.js 665.1 (+8.60 KB ❌)
@alfalab/core-components-masked-input/index.js 44.5 (+8.40 KB ❌)
@alfalab/core-components-modal/index.js 85.7 (+8.30 KB ❌)
@alfalab/core-components-modal/desktop/index.js 85.5 (+8.30 KB ❌)
@alfalab/core-components-modal/mobile/index.js 85.5 (+8.30 KB ❌)
@alfalab/core-components-navigation-bar/shared/index.js 19.9 (+8.50 KB ❌)
@alfalab/core-components-navigation-bar-private/index.js 27.8 (+8.30 KB ❌)
@alfalab/core-components-navigation-bar-private/shared/index.js 24.2 (+8.40 KB ❌)
@alfalab/core-components-notification/index.js 36.1 (+8.40 KB ❌)
@alfalab/core-components-number-input/index.js 55 (+8.50 KB ❌)
@alfalab/core-components-number-input/desktop/index.js 54.2 (+8.40 KB ❌)
@alfalab/core-components-number-input/mobile/index.js 54.1 (+8.40 KB ❌)
@alfalab/core-components-number-input/shared/index.js 22 (+8.40 KB ❌)
@alfalab/core-components-pass-code/index.js 29.7 (+8.40 KB ❌)
@alfalab/core-components-pass-code/desktop/index.js 28 (+8.60 KB ❌)
@alfalab/core-components-pass-code/mobile/index.js 28 (+8.60 KB ❌)
@alfalab/core-components-pass-code-v1/index.js 26.8 (+8.50 KB ❌)
@alfalab/core-components-password-input/index.js 38.8 (+8.30 KB ❌)
@alfalab/core-components-pattern-lock/index.js 33.4 (+8.40 KB ❌)
@alfalab/core-components-pattern-lock/desktop/index.js 31.7 (+8.60 KB ❌)
@alfalab/core-components-pattern-lock/mobile/index.js 31.7 (+8.60 KB ❌)
@alfalab/core-components-pattern-lock-v1/index.js 33.6 (+8.30 KB ❌)
@alfalab/core-components-pattern-lock-v1/desktop/index.js 32 (+8.50 KB ❌)
@alfalab/core-components-pattern-lock-v1/mobile/index.js 32 (+8.50 KB ❌)
@alfalab/core-components-phone-input/index.js 46.4 (+8.30 KB ❌)
@alfalab/core-components-picker-button/index.js 255.9 (+8.60 KB ❌)
@alfalab/core-components-picker-button/desktop/index.js 149.3 (+8.60 KB ❌)
@alfalab/core-components-picker-button/mobile/index.js 228.7 (+8.60 KB ❌)
@alfalab/core-components-plate/index.js 23 (+8.30 KB ❌)
@alfalab/core-components-plate/desktop/index.js 22.6 (+8.30 KB ❌)
@alfalab/core-components-plate/mobile/index.js 22.6 (+8.30 KB ❌)
@alfalab/core-components-popup-sheet/index.js 79.7 (+8.30 KB ❌)
@alfalab/core-components-product-cover/index.js 23.7 (+8.60 KB ❌)
@alfalab/core-components-pure-cell/index.js 32.3 (+8.30 KB ❌)
@alfalab/core-components-radio/index.js 11.3 (+8.10 KB ❌)
@alfalab/core-components-select/index.js 251.8 (+8.60 KB ❌)
@alfalab/core-components-select/desktop/index.js 167.7 (+8.60 KB ❌)
@alfalab/core-components-select/mobile/index.js 225.5 (+8.60 KB ❌)
@alfalab/core-components-select/shared/index.js 208.2 (+8.70 KB ❌)
@alfalab/core-components-select-with-tags/index.js 237.9 (+8.60 KB ❌)
@alfalab/core-components-select-with-tags/desktop/index.js 211.4 (+8.60 KB ❌)
@alfalab/core-components-select-with-tags/mobile/index.js 211.8 (+8.60 KB ❌)
@alfalab/core-components-side-panel/index.js 88.6 (+8.40 KB ❌)
@alfalab/core-components-side-panel/desktop/index.js 86.7 (+8.30 KB ❌)
@alfalab/core-components-side-panel/mobile/index.js 84.9 (+8.30 KB ❌)
@alfalab/core-components-slider-input/index.js 69 (+8.30 KB ❌)
@alfalab/core-components-switch/index.js 12.2 (+8.10 KB ❌)
@alfalab/core-components-table/index.js 179.7 (+8.60 KB ❌)
@alfalab/core-components-tabs/index.js 47.3 (+8.30 KB ❌)
@alfalab/core-components-tabs/collapsible/index.js 158.7 (+8.60 KB ❌)
@alfalab/core-components-tabs/desktop/index.js 45.9 (+8.30 KB ❌)
@alfalab/core-components-tabs/mobile/index.js 45.9 (+8.30 KB ❌)
@alfalab/core-components-tabs/shared/index.js 38.1 (+8.30 KB ❌)
@alfalab/core-components-time-input/index.js 36 (+8.30 KB ❌)
@alfalab/core-components-toast/index.js 74.9 (+8.40 KB ❌)
@alfalab/core-components-toast/desktop/index.js 74.3 (+8.40 KB ❌)
@alfalab/core-components-toast/mobile/index.js 74.3 (+8.40 KB ❌)
@alfalab/core-components-toast-plate/index.js 29.7 (+8.40 KB ❌)
@alfalab/core-components-toast-plate/desktop/index.js 29.2 (+8.30 KB ❌)
@alfalab/core-components-toast-plate/mobile/index.js 29.2 (+8.30 KB ❌)
@alfalab/core-components-tooltip/index.js 126.8 (+8.40 KB ❌)
@alfalab/core-components-tooltip/mobile/index.js 98 (+8.30 KB ❌)
@alfalab/core-components-universal-date-input/index.js 147 (+8.30 KB ❌)
@alfalab/core-components-universal-date-input/desktop/index.js 146.9 (+8.40 KB ❌)
@alfalab/core-components-universal-date-input/mobile/index.js 146.9 (+8.40 KB ❌)
@alfalab/core-components-universal-modal/index.js 126 (+8.30 KB ❌)
@alfalab/core-components-universal-modal/desktop/index.js 123.4 (+8.40 KB ❌)
@alfalab/core-components-universal-modal/mobile/index.js 84.5 (+8.30 KB ❌)
@alfalab/core-components-universal-modal/responsive/index.js 126 (+8.30 KB ❌)

@coveralls

coveralls commented May 12, 2026

Copy link
Copy Markdown

Coverage Report for CI Build 28085901338

Coverage decreased (-0.1%) to 82.03%

Details

  • Coverage decreased (-0.1%) from the base build.
  • Patch coverage: 19 uncovered changes across 2 files (58 of 77 lines covered, 75.32%).
  • No coverage regressions found.

Uncovered Changes

File Changed Covered %
packages/haptics/src/utils.ts 23 9 39.13%
packages/haptics/src/hooks/use-haptic.ts 16 11 68.75%
Total (9 files) 77 58 75.32%

Coverage Regressions

No coverage regressions found.


Coverage Stats

Coverage Status
Relevant Lines: 11837
Covered Lines: 9793
Line Coverage: 82.73%
Relevant Branches: 2253
Covered Branches: 1765
Branch Coverage: 78.34%
Branches in Coverage %: Yes
Coverage Strength: 259.99 hits per line

💛 - Coveralls

@github-actions

Copy link
Copy Markdown
Contributor

Demo build (default)

https://core-ds.github.io/core-components/2209

@github-actions

Copy link
Copy Markdown
Contributor

Demo build (alfasans)

https://core-ds.github.io/core-components/2209-alfasans

@dHIM24 dHIM24 force-pushed the DS-16107 branch 2 times, most recently from fa8e6d7 to b34f5e6 Compare May 19, 2026 08:48
@dHIM24 dHIM24 changed the title (feat/shared): добавлена реализация WebHaptics [DS-16107] (feat/haptics): добавлена реализация WebHaptics [DS-16107] May 19, 2026
Comment thread packages/checkbox/src/Component.tsx Outdated
Comment thread packages/haptics/src/component.tsx Outdated
Comment thread packages/number-input/src/components/number-input/Component.tsx Outdated
@dHIM24 dHIM24 force-pushed the DS-16107 branch 4 times, most recently from 99801fe to f70572b Compare June 4, 2026 10:09
/**
* Можно ли запускать haptic с учётом итогового конфига и поддержки окружения.
*/
enabled: boolean;

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

delete

);

return {
enabled: Boolean(config && isSupported),

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

//

const { cancel, isSupported, trigger: triggerHaptics } = useWebHaptics({ debug, showSwitch });

const config = resolveHapticConfig({
dataHapticPreset,

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

preset*

export const useHaptic = ({
dataHapticPreset,
debug,
showSwitch,

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

раскопать и описать

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants