chore: port SnapCentertoCursor to experimental branch

[khuezy]

No description provided.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5c53afb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[khuezy]

@clauderic Does the DragOverlay respect the modifier? When I add the DragOverlay, it doesn't get centered on cursor.

[clauderic]

You should be able to add a story here: apps/stories/stories/react/Draggable/Modifiers/Modifiers.stories.tsx

Something like:

export const SnapToCursor: Story = {
  name: 'Snap to cursor',
  args: {
    modifiers: [SnapCenterToCursor],
  },
};

[khuezy]

There is an issue w/ the typing when I apply the modifier to the DragDropProvider:

Type 'typeof SnapCenterToCursor' is not assignable to type 'ModifierConstructor<DragDropManager<Draggable<Data>, Droppable<Data>>> | ModifierDescriptor<DragDropManager<Draggable<Data>, Droppable<...>>>'.
  Type 'typeof SnapCenterToCursor' is not assignable to type 'ModifierConstructor<DragDropManager<Draggable<Data>, Droppable<Data>>>'.
    Types of parameters 'manager' and 'manager' are incompatible.
      Type 'DragDropManager<Draggable<Data>, Droppable<Data>>' is not assignable to type 'DragDropManager<Draggable<Data, DragDropManager<any, any>>, Droppable<Data, DragDropManager<any, any>>>'.
        Types of property 'collisionObserver' are incompatible.
          Type 'CollisionObserver<Draggable<Data>, Droppable<Data>, DragDropManager<Draggable<Data>, Droppable<Data>>>' is not assignable to type 'CollisionObserver<Draggable<Data, DragDropManager<any, any>>, Droppable<Data, DragDropManager<any, any>>, DragDropManager<Draggable<Data,

The code runs correctly but typescript complains. I'm using DragDropProvider from @dnd-kit/react

[yf-yang]

@khuezy There are two DragDropManager, one is from @dnd-kit/abstract and the other is from @dnd-kit/dom. That should be the cause

You can refer to RestrictToWindow's signature

[khuezy]

The snap.ts in the abstract package includes the DragDropManage<Draggable, Droppable>, whereas the RestrictToWindow from the dom package doesn't. I'm not sure if omitting those two will lose types.

[clauderic]

I'm not sure why your editor isn't respecting the prettier settings, it should be:

{
  "bracketSpacing": false,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "es5"
}

[khuezy]

Yea that's really strange. I see the prettier loading .prettierrc but it's not applying those settings.
When I run bun format, it picks up 28 file changes... Should I include that or just leave everything as it is for you to format.