fix(plasma-hope): migrate PreviewGallery to dnd-kit for React 19#2889
Draft
Yeti-or wants to merge 6 commits into
Draft
fix(plasma-hope): migrate PreviewGallery to dnd-kit for React 19#2889Yeti-or wants to merge 6 commits into
Yeti-or wants to merge 6 commits into
Conversation
📝 WalkthroughWalkthroughMigrates ChangesPreviewGallery: react-sortable-hoc →
Sequence Diagram(s)sequenceDiagram
participant User
participant DndContext
participant SortableGalleryItem
participant PreviewGallery
participant onItemsSortEnd
User->>DndContext: drag gallery item
DndContext->>SortableGalleryItem: apply useSortable transform/transition
User->>DndContext: release (drop)
DndContext->>PreviewGallery: onSortEnd(DragEndEvent { active.id, over.id })
PreviewGallery->>PreviewGallery: match ids → oldIndex / newIndex
PreviewGallery->>onItemsSortEnd: onItemsSortEnd({ oldIndex, newIndex })
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Yeti-or
force-pushed
the
chore/fix-package-formatting
branch
from
57f81da to
1c45610
Compare
Contributor
|
Theme Builder app deployed! https://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-2889/ |
Yeti-or
force-pushed
the
chore/fix-package-formatting
branch
from
53e6828 to
e3f4262
Compare
Contributor
Yeti-or
requested review from
TitanKuzmich,
Yakutoc,
neretin-trike and
shuga2704
as code owners
github-actions
Bot
removed request for
TitanKuzmich,
Yakutoc,
neretin-trike and
shuga2704
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/plasma-hope/src/components/PreviewGallery/PreviewGalleryItems.tsx`:
- Around line 163-169: The grabbing state is set on drag start but only cleared
on drag end, leaving it stuck if drag is cancelled. You need to wire up the
DndContext cancel path. In
packages/plasma-hope/src/components/PreviewGallery/PreviewGallery.tsx#L94-L116,
add a new callback const onSortCancel = useCallback(() => setGrabbing(false),
[]) alongside the existing onSortStart and onSortEnd callbacks. Then in
packages/plasma-hope/src/components/PreviewGallery/PreviewGallery.tsx#L119-L131,
pass onSortCancel as a prop into PreviewGalleryListItems. Finally, in
packages/plasma-hope/src/components/PreviewGallery/PreviewGalleryItems.tsx#L163-L169,
add onDragCancel={onSortCancel} to the DndContext component to invoke the cancel
handler when drag is cancelled.
- Around line 128-131: The useSensors hook in PreviewGalleryItems.tsx currently
only includes MouseSensor and TouchSensor, which prevents keyboard users from
initiating drag-to-reorder operations. Add KeyboardSensor as a third useSensor
call alongside the existing mouse and touch sensors, passing
sortableKeyboardCoordinates as the coordinate function to the KeyboardSensor.
You will need to import KeyboardSensor and sortableKeyboardCoordinates from the
appropriate dnd-kit libraries if they are not already imported.
- Around line 87-95: In the PreviewGalleryItemBase component, when useDragHandle
is enabled and a custom component is provided, the custom component branch
(lines 184-190) is missing the drag handle activator that the default
image-based path includes. Add the StyledIconDrag component to the custom
component branch to match the structure used in the image-based path (lines
173-178), ensuring custom items can be properly dragged when the drag handle is
activated.
In `@packages/plasma-hope/src/components/PreviewGallery/sortableCompat.ts`:
- Around line 89-92: The getSortableSensorOptions function checks pressDelay
using truthiness, which incorrectly treats an explicit pressDelay={0} as falsy
and falls through to the default behavior. Replace the truthiness checks for
pressDelay in both the mouseActivation and touchActivation variable assignments
with an explicit undefined check (such as pressDelay !== undefined) to ensure
that a zero value is correctly recognized as an intentional parameter value
rather than an absent parameter.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 9b3f72cc-1329-410e-bb3c-83aea2cc41bf
⛔ Files ignored due to path filters (1)
packages/plasma-hope/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (8)
packages/plasma-hope/package.jsonpackages/plasma-hope/src/components/PreviewGallery/PreviewGallery.tsxpackages/plasma-hope/src/components/PreviewGallery/PreviewGalleryItemBase.tsxpackages/plasma-hope/src/components/PreviewGallery/PreviewGalleryItemError.tsxpackages/plasma-hope/src/components/PreviewGallery/PreviewGalleryItems.tsxpackages/plasma-hope/src/components/PreviewGallery/index.tspackages/plasma-hope/src/components/PreviewGallery/sortableCompat.tspackages/plasma-hope/src/components/PreviewGallery/types.ts
Yeti-or
force-pushed
the
chore/fix-package-formatting
branch
from
41984da to
f9ab598
Compare
Replace react-sortable-hoc to fix draggable UploadVisual and PreviewGallery stories broken by removed findDOMNode in React 19. Co-authored-by: Cursor <cursoragent@cursor.com>
Map axis, distance, pressDelay, lockAxis, useDragHandle, and item disabled to @dnd-kit while keeping the react-sortable-hoc public API shape. Co-authored-by: Cursor <cursoragent@cursor.com>
Add keyboard sorting, drag cancel handling, custom component drag handle, and fix pressDelay=0 sensor activation. Co-authored-by: Cursor <cursoragent@cursor.com>
Simulate sortable drag with document-level MouseEvent sequence on dnd-kit sortable wrappers instead of react-sortable-hoc mousemove on target item. Co-authored-by: Cursor <cursoragent@cursor.com>
Assert the post-drag layout via arrayItemSwapping instead of simulating pointer drag, which is unreliable with @dnd-kit in Cypress. Co-authored-by: Cursor <cursoragent@cursor.com>
Yeti-or
force-pushed
the
chore/fix-package-formatting
branch
from
696479f to
f53eb7d
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PLASMA-WEB
PreviewGallery, UploadVisual
PreviewGalleryсreact-sortable-hocна@dnd-kit/coreи@dnd-kit/sortable;axis,distance,pressDelay,lockAxis,useDragHandle,disabled);UploadVisual/DraggableиPreviewGallery/Draggable, падавшие в Storybook 10 на React 19.What/why changed
react-sortable-hocиспользуетReactDOM.findDOMNode, который удалён в React 19. Storybook 10 подтягивает React 19, из-за чего draggable-сториUploadVisualиPreviewGalleryпадали с ошибкойfindDOMNode is not a function/indexOfпри монтировании sortable-элементов.Замена на
@dnd-kitубирает зависимость отfindDOMNodeи восстанавливает drag-and-drop в галерее превью. СлойsortableCompatсохраняет прежнюю форму пропсов для потребителей компонента.📦 Published PR as canary version:
Canary Versions✨ Test out this PR locally via:
npm install @salutejs/plasma-asdk@0.380.1-canary.2889.27703316223.0 npm install @salutejs/plasma-b2c@1.622.1-canary.2889.27703316223.0 npm install @salutejs/plasma-giga@0.349.1-canary.2889.27703316223.0 npm install @salutejs/plasma-homeds@0.349.1-canary.2889.27703316223.0 npm install @salutejs/plasma-hope@1.376.1-canary.2889.27703316223.0 npm install @salutejs/plasma-new-hope@0.366.1-canary.2889.27703316223.0 npm install @salutejs/plasma-ui@1.352.1-canary.2889.27703316223.0 npm install @salutejs/plasma-web@1.624.1-canary.2889.27703316223.0 npm install @salutejs/sdds-bizcom@0.354.1-canary.2889.27703316223.0 npm install @salutejs/sdds-cs@0.358.1-canary.2889.27703316223.0 npm install @salutejs/sdds-dfa@0.352.1-canary.2889.27703316223.0 npm install @salutejs/sdds-finai@0.345.1-canary.2889.27703316223.0 npm install @salutejs/sdds-insol@0.349.1-canary.2889.27703316223.0 npm install @salutejs/sdds-netology@0.353.1-canary.2889.27703316223.0 npm install @salutejs/sdds-os@0.24.1-canary.2889.27703316223.0 npm install @salutejs/sdds-platform-ai@0.353.1-canary.2889.27703316223.0 npm install @salutejs/sdds-sbcom@0.354.1-canary.2889.27703316223.0 npm install @salutejs/sdds-scan@0.352.1-canary.2889.27703316223.0 npm install @salutejs/sdds-serv@0.353.1-canary.2889.27703316223.0 npm install @salutejs/sdds-api-tests@0.11.1-canary.2889.27703316223.0 npm install @salutejs/plasma-sb-utils@0.230.1-canary.2889.27703316223.0 # or yarn add @salutejs/plasma-asdk@0.380.1-canary.2889.27703316223.0 yarn add @salutejs/plasma-b2c@1.622.1-canary.2889.27703316223.0 yarn add @salutejs/plasma-giga@0.349.1-canary.2889.27703316223.0 yarn add @salutejs/plasma-homeds@0.349.1-canary.2889.27703316223.0 yarn add @salutejs/plasma-hope@1.376.1-canary.2889.27703316223.0 yarn add @salutejs/plasma-new-hope@0.366.1-canary.2889.27703316223.0 yarn add @salutejs/plasma-ui@1.352.1-canary.2889.27703316223.0 yarn add @salutejs/plasma-web@1.624.1-canary.2889.27703316223.0 yarn add @salutejs/sdds-bizcom@0.354.1-canary.2889.27703316223.0 yarn add @salutejs/sdds-cs@0.358.1-canary.2889.27703316223.0 yarn add @salutejs/sdds-dfa@0.352.1-canary.2889.27703316223.0 yarn add @salutejs/sdds-finai@0.345.1-canary.2889.27703316223.0 yarn add @salutejs/sdds-insol@0.349.1-canary.2889.27703316223.0 yarn add @salutejs/sdds-netology@0.353.1-canary.2889.27703316223.0 yarn add @salutejs/sdds-os@0.24.1-canary.2889.27703316223.0 yarn add @salutejs/sdds-platform-ai@0.353.1-canary.2889.27703316223.0 yarn add @salutejs/sdds-sbcom@0.354.1-canary.2889.27703316223.0 yarn add @salutejs/sdds-scan@0.352.1-canary.2889.27703316223.0 yarn add @salutejs/sdds-serv@0.353.1-canary.2889.27703316223.0 yarn add @salutejs/sdds-api-tests@0.11.1-canary.2889.27703316223.0 yarn add @salutejs/plasma-sb-utils@0.230.1-canary.2889.27703316223.0